/*loading*/


@font-face {
    font-family: 'Helvetica-Bold';
    src: url('myriad-pro-cufonfonts/Helvetica-Bold.eot?#iefix') format('embedded-opentype'),  url('myriad-pro-cufonfonts/Helvetica-Bold.woff') format('woff'), url('myriad-pro-cufonfonts/Helvetica-Bold.ttf')  format('truetype'), url('myriad-pro-cufonfonts/Helvetica-Bold.svg#Helvetica-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'MyriadPro-Regular';
    src: url('myriad-pro-cufonfonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),  url('myriad-pro-cufonfonts/MyriadPro-Regular.otf')  format('opentype'),
           url('myriad-pro-cufonfonts/MyriadPro-Regular.woff') format('woff'), url('myriad-pro-cufonfonts/MyriadPro-Regular.ttf')  format('truetype'), url('myriad-pro-cufonfonts/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
  }

#loading-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999999;

    background-color: #0f0f0f;
}

#loading-text {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #999;
    width: 100px;
    height: 30px;
    margin: -7px 0 0 -45px;
    text-align: center;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 20px;
}
#loading-img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #999;
    /* width: 100px; */
    height: 30px;
    margin: -2px 0 0 -62px;

}


#loading-content {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 195px;
    height: 195px;
    margin: -85px 0 0 -85px;
    border: 3px solid #F00;
}

#loading-content:after {
  /*  content: "";*/
    position: absolute;
    border: 3px solid #0F0;
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
}

#loading-content:before {
   /* content: "";*/
    position: absolute;
    border: 3px solid #00F;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
}

#loading-content {
    border: 2px solid transparent;
    border-top-color: #d6d3d3;
    border-bottom-color: #d6d3d3;
    border-radius: 50%;
    -webkit-animation: loader .5s linear infinite;
    -moz-animation: loader .5s linear infinite;
    -o-animation: loader .5s linear infinite;
    animation: loader .5s linear infinite;
}

#loading-content:before {
    border: 3px solid transparent;
    border-top-color: #D4CC6A;
    border-bottom-color: #D4CC6A;
    border-radius: 50%;
    -webkit-animation: loader 3s linear infinite;
    -moz-animation: loader 2s linear infinite;
    -o-animation: loader 2s linear infinite;
    animation: loader 3s linear infinite;
}

#loading-content:after {
    border: 3px solid transparent;
    border-top-color: #84417C;
    border-bottom-color: #84417C;
    border-radius: 50%;
    -webkit-animation: loader 1.5s linear infinite;
    animation: loader 1.5s linear infinite;
    -moz-animation: loader 2s linear infinite;
    -o-animation: loader 2s linear infinite;
}

@-webkit-keyframes loaders {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#content-wrapper {
    color: #FFF;
    position: fixed;
    left: 0;
    top: 20px;
    width: 100%;
    height: 100%;
}

#header
{
    width: 800px;
    margin: 0 auto;
    text-align: center;
    height: 100px;
    background-color: #666;
}

#content
{
    width: 800px;
    height: 1000px;
    margin: 0 auto;
    text-align: center;
    background-color: #888;
}
.block{
    display: block!important;
}
@keyframes loadingend{
    0% {
        opacity: 1;


    }
    100% {
        opacity: 0;

    }
}
.loadingend{

    /*transition: opacity 1s linear;*/
    /* transition: opacity 1.0s ease-in;*/
    animation:2s ease  normal forwards loadingend;
    opacity: 0;


}
@keyframes anime{
    0% {
        opacity: 0;


    }
    100% {
        opacity: 1;

    }
}
.anime{

    /*transition: opacity 1s linear;*/
    /* transition: opacity 1.0s ease-in;*/
    animation:.8s ease 1s normal forwards anime;
    opacity: 0;

}
.loading-new {
    width: 100%;
    height: 100vh;
    background: #0f0f0f;
    position: fixed;
    opacity: 1;
    /* background-color: #fff; */
    z-index: 999999999999999999999999;
    overflow: hidden;
    top: 0;
}
.spanf1 {
    font-family: "Helvetica-Bold", 'MyriadPro-Regular';
    text-align: justify;
    font-size: 8.8vw;
    left: -40px;
    /* word-spacing: -9px; */
    letter-spacing: -7px;
    word-spacing: -16px;
    top: 33.7%;
    color: #3333335c;
    position: absolute;
 }
.spamloading{
    position: absolute;
    /* border-top-right-radius: 7px; */
    /* border-bottom-right-radius: 7px; */
    border-radius: 0px;
    top: 47%;
    width: 100%;
    height: 2px;
    background: #8e8b8b;
    /* left: 40%; */
}

.newloadingl{
    color: #ffffff;
    width: 0%;
    position: absolute;
    top: 0%;
    /* border-top-right-radius: 7px; */
    /* border-bottom-right-radius: 7px; */
    border-radius: 0px;
    background: #ffffff;
    }
    
    @keyframes newloading {
        0% {
            width: 0%;
        
        }
        100% {
            width:50%;
        
        }
    }
    
    .newloading{
    /* opacity:1; */
    /*transition: opacity 1s linear;*/
    /* transition: opacity 1.0s ease-in;*/
    animation:3s linear normal forwards newloading;
    opacity: 1;

    }
    @keyframes newloadingennd {
        0% {
            width: 50%;
        
        }
        100% {
            width:100%;
        
        }
    }
    .newloadingennd{
        animation:3s linear normal forwards newloadingennd;
        opacity: 1;
    }
    .logo-loading {
        width: 16%;
        position: relative;
        top: 40%;
        height: 300px;
        background: transparent;
        margin-left: 8%;
        animation: 1.1s ease 1s normal forwards anime;
        opacity: 0;
    }
    .overflow{
        overflow: hidden;
    }
    @media (max-width: 320px){
        .logo-loading {
            width: 45%;
            position: relative;
            top: 40%;
            height: 300px;
            background: transparent;
        }
        .spamloading {
            position: absolute;
            /* border-top-right-radius: 7px; */
            /* border-bottom-right-radius: 7px; */
            border-radius: 0;
            top: 45%;
            width: 100%;
            height: 2px;
            background: #8e8b8b;
            left: 0;
        }
        .spanf1 {
            /* font-family: "Myriad Pro", "Helvetica-Bold","AdobeInvisFont"; */
            text-align: justify;
            /* font-size: 8.8vw; */
            left: -9px;
            top: 42%;
            word-spacing: 4px;
            letter-spacing: -3px;
            color: #33333391;
            position: absolute;
        }
    }
    
    @media (max-width: 360px) and (min-width:321px){
        .logo-loading {
            width: 45%;
            position: relative;
            top: 40%;
            height: 300px;
            background: transparent;
        }
        .spamloading {
            position: absolute;
            /* border-top-right-radius: 7px; */
            /* border-bottom-right-radius: 7px; */
            border-radius: 0;
            top: 45%;
            width: 100%;
            height: 2px;
            background: #8e8b8b;
            left: 0;
        }
        .spanf1 {
            /* font-family: "Myriad Pro", "Helvetica-Bold","AdobeInvisFont"; */
            text-align: justify;
            /* font-size: 8.8vw; */
            left: -9px;
            top: 42%;
            word-spacing: 4px;
            letter-spacing: -3px;
            color: #33333391;
            position: absolute;
        }
    }
    
    @media (max-width: 400px) and (min-width:361px) {
        .logo-loading {
            width: 45%;
            position: relative;
            top: 40%;
            height: 300px;
            background: transparent;
        }
        .spamloading {
            position: absolute;
            /* border-top-right-radius: 7px; */
            /* border-bottom-right-radius: 7px; */
            border-radius: 0;
            top: 45%;
            width: 100%;
            height: 2px;
            background: #8e8b8b;
            left: 0;
        }
        .spanf1 {
            /* font-family: "Myriad Pro", "Helvetica-Bold","AdobeInvisFont"; */
            text-align: justify;
            /* font-size: 8.8vw; */
            left: -9px;
            top: 42%;
            word-spacing: 4px;
            letter-spacing: -3px;
            color: #33333391;
            position: absolute;
        }
    }
    
    @media (max-width: 480px) and (min-width:401px) and (orientation: portrait) {
        .logo-loading {
            width: 45%;
            position: relative;
            top: 39%;
            height: 300px;
            background: transparent;
        }
        .spamloading {
            position: absolute;
            /* border-top-right-radius: 7px; */
            /* border-bottom-right-radius: 7px; */
            border-radius: 0;
            top: 45%;
            width: 100%;
            height: 2px;
            background: #8e8b8b;
            left: 0;
        }
        .spanf1 {
            /* font-family: "Myriad Pro", "Helvetica-Bold","AdobeInvisFont"; */
            text-align: justify;
            /* font-size: 8.8vw; */
            left: -9px;
            top: 41%;
            word-spacing: 4px;
            letter-spacing: -3px;
            color: #33333391;
            position: absolute;
        }
    }
    
    @media (max-width: 550px) and (min-width: 481px) {
        .logo-loading {
            width: 45%;
            position: relative;
            top: 40%;
            height: 300px;
            background: transparent;
        }
        .spamloading {
            position: absolute;
            /* border-top-right-radius: 7px; */
            /* border-bottom-right-radius: 7px; */
            border-radius: 0;
            top: 45%;
            width: 100%;
            height: 2px;
            background: #8e8b8b;
            left: 0;
        }
        .spanf1 {
            /* font-family: "Myriad Pro", "Helvetica-Bold","AdobeInvisFont"; */
            text-align: justify;
            /* font-size: 8.8vw; */
            left: -9px;
            top: 42%;
            word-spacing: 4px;
            letter-spacing: -3px;
            color: #33333391;
            position: absolute;
        }
    }
    
    @media (max-width: 620px) and (min-width:551px) and (orientation:portrait) {
        .logo-loading {
            width: 45%;
            position: relative;
            top: 40%;
            height: 300px;
            background: transparent;
        }
        .spamloading {
            position: absolute;
            /* border-top-right-radius: 7px; */
            /* border-bottom-right-radius: 7px; */
            border-radius: 0;
            top: 45%;
            width: 100%;
            height: 2px;
            background: #8e8b8b;
            left: 0;
        }
        .spanf1 {
            /* font-family: "Myriad Pro", "Helvetica-Bold","AdobeInvisFont"; */
            text-align: justify;
            /* font-size: 8.8vw; */
            left: -9px;
            top: 42%;
            word-spacing: 4px;
            letter-spacing: -3px;
            color: #33333391;
            position: absolute;
        }
    }
   
  
        @media (max-width: 1024px) and (min-width:992px){
            .spanf1 {
                font-family: "Helvetica-Bold", 'MyriadPro-Regular';
                text-align: justify;
                font-size: 9vw;
                left: -10px;
                /* word-spacing: -9px; */
                letter-spacing: -4px;
                word-spacing: -16px;
                top: 38%;
                color: #3333335c;
                position: absolute;
            }
        }

        @media (max-width: 1280px) and (min-width: 1025px) {
            .spanf1 {
                font-family: "Helvetica-Bold", 'MyriadPro-Regular';
                text-align: justify;
                font-size: 9vw;
                left: -10px;
                /* word-spacing: -9px; */
                letter-spacing: -7px;
                word-spacing: -8px;
                top: 35%;
                color: #3333335c;
                position: absolute;
            }
        }

    @media (min-width: 1366px) and (max-width: 1439px){
        .spanf1 {
            font-family: "Helvetica-Bold", 'MyriadPro-Regular';
            text-align: justify;
            font-size: 9vw;
            left: -10px;
            /* word-spacing: -9px; */
            letter-spacing: -7px;
            word-spacing: -16px;
            top: 36.5%;
            color: #3333335c;
            position: absolute;
        }
    }
    @media (min-width: 1440px) and (max-width: 1599px) {
        .spanf1 {
            font-family: "Helvetica-Bold", 'MyriadPro-Regular';
            text-align: justify;
            font-size: 9vw;
            left: -20px;
            /* word-spacing: -9px; */
            letter-spacing: -7px;
            word-spacing: -16px;
            top: 33.5%;
            color: #3333335c;
            position: absolute;
        }
    }
    @media (min-width: 1600px) and (max-width: 1919px) {
        .spanf1 {
            font-family: "Helvetica-Bold", 'MyriadPro-Regular';
            text-align: justify;
            font-size: 8.9vw;
            left: -15px;
            /* word-spacing: -9px; */
            letter-spacing: -7px;
            word-spacing: -16px;
            top: 34.5%;
            color: #3333335c;
            position: absolute;
        }
    }