html, body{
    color:                   #000000;
    font-weight:             normal;
    height:                  100%;
    padding: 0;
    margin: 0;
}
.wrapper{
    position: relative;

    width:                  100%;
    min-height:             100%;

    height:                 100%;
    height:                 auto !important;


    background-image: url( 'bg.jpg' );
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}



.mainlogo{
    position: relative;
    top: 50px;
    margin: 0 auto;
    width: auto;
    height: auto;
    text-align: center;
}

.content{

    position: relative;
    width: 100vw;
    height: 100vh;

    background-image: url( 'cap.png' );
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-size: 35%;
}


.clear{
    clear: both;
    width: 100%;
    visibility: hidden;
    height: 150px;
}

footer{
    position: relative;
    margin: -150px auto 0 auto;
    width: 100%;
    height: 150px;
}


.cw{
    position: relative;
    width: 50%;
    margin: 0 auto;
    text-align: center;
}

.cleft,
.cright{
    display: inline-block;
    vertical-align: bottom;
    width: 49%;
    text-align: center;
}

.phone{
    font-weight: bolder;
    font-size: 2.5em;

    padding: 0;
    margin: 0;

    color: #9e8b4c;
}

.wrapper img{
    max-width: 100%;
}


.cright a{
    text-decoration: none;
}



@media screen and (max-width: 540px ){
    .cw{ width: 100%;}
}
@media screen and (max-width: 480px ){
    .mainlogo{ margin-bottom: 60px; }
    .cleft, .cright{
        display: block;
        width: 90%;
        margin: 0 auto;
    }
    .wrapper img{  max-width: 90%;}
}




@font-face { font-family: 'roboto_condensedbold'; src: url("/wp-content/themes/integramg/fonts/robotocondensed-bold-webfont.eot"); src: url("/wp-content/themes/integramg/fonts/robotocondensed-bold-webfont.eot?#iefix") format("embedded-opentype"), url("/wp-content/themes/integramg/fonts/robotocondensed-bold-webfont.woff2") format("woff2"), url("/wp-content/themes/integramg/fonts/robotocondensed-bold-webfont.woff") format("woff"), url("/wp-content/themes/integramg/fonts/robotocondensed-bold-webfont.ttf") format("truetype"), url("/wp-content/themes/integramg/fonts/robotocondensed-bold-webfont.svg#roboto_condensedbold") format("svg"); }



@font-face { font-family: 'stolzl-bold'; src: url("/wp-content/themes/integramg/fonts/stolzl-bold.woff2") format("woff2"), url("/wp-content/themes/integramg/fonts/stolzl-bold.svg") format("svg"), url("/wp-content/themes/integramg/fonts/stolzl-bold.ttf") format("truetype"), url("/wp-content/themes/integramg/fonts/stolzl-bold.woff") format("woff"); font-weight: normal; font-style: normal; }

/* preload */
/* ================================================ */
.headpiece {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 9999;
    pointer-events: none;
}

.logo_preload {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    display: inline-block;
    width: auto; height: auto;
    z-index: 2;
    opacity: 0;
    animation: logo_animate 3s ease-in-out 0.5ms forwards;
}

.title_preload {
    position: absolute;
    color: #fff;
    font-size: 50px;
    font-family: 'roboto_condensedbold', Arial, sans-serif;
    top: 48%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    text-transform: uppercase;

}

.title_preload span {
    display: inline-block;
    transform-origin: center;
    transform: rotateY(90deg);

}

.title_preload span:nth-child(1) {animation: title_rotate .5s ease-in-out 6.5s forwards; color: #3ea1ff;}
.title_preload span:nth-child(2) {animation: title_rotate .5s ease-in-out 6.7s forwards;}
.title_preload span:nth-child(3) {animation: title_rotate .5s ease-in-out 6.9s forwards;}
.title_preload span:nth-child(4) {animation: title_rotate .5s ease-in-out 7.1s forwards;}
.title_preload span:nth-child(5) {animation: title_rotate .5s ease-in-out 7.3s forwards;}
.title_preload span:nth-child(6) {animation: title_rotate .5s ease-in-out 7.5s forwards;}
.title_preload span:nth-child(7) {animation: title_rotate .5s ease-in-out 7.7s forwards; color: #3ea1ff;}
.title_preload span:nth-child(8) {animation: title_rotate .5s ease-in-out 7.9s forwards;}
.title_preload span:nth-child(9) {animation: title_rotate .5s ease-in-out 8.1s forwards;}
.title_preload span:nth-child(10) {animation: title_rotate .5s ease-in-out 8.3s forwards;}
.title_preload span:nth-child(11) {animation: title_rotate .5s ease-in-out 8.5s forwards;}
.title_preload span:nth-child(12) {animation: title_rotate .5s ease-in-out 8.7s forwards;}
.title_preload span:nth-child(13) {animation: title_rotate .5s ease-in-out 8.9s forwards;}
.title_preload span:nth-child(14) {animation: title_rotate .5s ease-in-out 9.1s forwards;}
.title_preload span:nth-child(15) {animation: title_rotate .5s ease-in-out 9.3s forwards;}
.title_preload span:nth-child(16) {animation: title_rotate .5s ease-in-out 9.5s forwards;}
.title_preload span:nth-child(17) {animation: title_rotate .5s ease-in-out 9.7s forwards;}
.title_preload span:nth-child(18) {animation: title_rotate .5s ease-in-out 9.9s forwards;}

@keyframes title_rotate {
    0% {transform: rotateY(90deg);}
    100% {transform: rotateY(0deg);}
}

@keyframes logo_animate {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.box_ball { opacity: 1; animation: box_ball_animate 1s ease-in-out 5.5s forwards; }

.ball_center, .ball_1, .ball_2, .ball_3, .ball_4, .ball_5, .ball_6, .ball_7, .ball_8 { opacity: 0; }

.ball_center { animation: ball_animate .2s ease-in-out 3s forwards; }

.ball_1 { animation: ball_animate .2s ease-in-out 3.2s forwards; }

.ball_2 { animation: ball_animate .2s ease-in-out 3.4s forwards; }

.ball_3 { animation: ball_animate .2s ease-in-out 3.6s forwards; }

.ball_4 { animation: ball_animate .2s ease-in-out 3.8s forwards; }

.ball_5 { animation: ball_animate .2s ease-in-out 4s forwards; }

.ball_6 { animation: ball_animate .2s ease-in-out 4.2s forwards; }

.ball_7 { animation: ball_animate .2s ease-in-out 4.4s forwards; }

.ball_8 { animation: ball_animate .2s ease-in-out 4.6s forwards; }

@keyframes ball_animate {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes box_ball_animate {
    0% { opacity: 1; }
    100% { opacity: 0; }
}





@media only screen and (max-width: 1500px) {
    .svg_preload { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
}


@media only screen and (max-width: 1024px) {
    .logo_preload {top: 44%;}
    .svg_preload {width: 143vw;left: -21vw;top: 48%;}
    .title_preload {font-size: 36px; top: 45%;}
}

@media only screen and (max-width: 768px) {
    .logo_preload {top: 44%;}
    .svg_preload {position: absolute;width: 264vw;height: 85vh;margin: auto;top: 4%;left: -81vw;-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);}
    .box_ball { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; }
    .title_preload {
        font-size: 27px;
        top: 44%;
    }
}


@media only screen and (max-width: 540px) {
    .headpiece { left: -119%; width: 339%;}
    .logo_preload {top: 44%; width: 320px;}
    .svg_preload { position: absolute; width: 264vw; height: 60vh; margin: auto; top: 16%; left: 37vw; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
    .box_ball { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; }
    .title_preload {font-size: 22px; top: 44%;}
}