{% load staticfiles %}

.p-t-10{padding-top: 10%;}
.h-20{height: 20vw;}
.h-30{height: 30vw;}
.w-30{width: 25vw;}
.m-lr-5{margin-left: 2%; margin-right: 2%;}
.u-btn{position: absolute; right: 5%; top: 12%;}

.earthbg{        background-repeat: no-repeat;
        background-image: url({% static "imgs/earth.png" %});
        background-size: 67%;
        background-position-x: 100%;
        background-position-y:0%;
}

.item_box {top: 10vw;position: absolute; }


.item_box p{width: 100%; text-align: center;}

.box_text{        
    /* width: 70vw; */
    text-align: left;
    display: flex;
    right: 0vw;
    top: 45vw;
    padding: 0%;
    font-size: 2vw;
    margin: 0%;
    color: white;
    position: absolute;
}
.box_text1{        
    width: 85vw;
    text-align: left;
    display: flex;
    right: 0vw;
    top: 55vw;
    padding: 0%;
    font-size: 2vw;
    margin: 0%;
    color: white;
    position: absolute;
}
.box_text1 p{ padding: 2%;}
.box_text1 p{ padding: 0%;} 
.title_box{top:3vw; width: 50%; left: 0%;position: absolute; background-color: rgba(0,0,0,.8);z-index: 9999; color: white;padding:.5%;}

.title_box a h1{color: white !important;}
.title_box a h1:hover{color: deepskyblue !important;}
.w-90{width: calc(100%);}
.m-t-n10{margin-top: 10%;}
#tm_ind{ position: absolute; left: 10%;  z-index: 9999;}



.writeit{position: absolute; top: -5%; font-size: 4vw;


}

.small_right{background-image: url({% static "imgs/th3logo/small_right.png" %});
        background-size: 0%;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: visible;
        z-index: 9999;
        -webkit-transition: transform 1.3s, background-size 2s;
        transition: transform 1.3s, background-size 2s;
                -webkit-filter: drop-shadow(0px 0px 5px deepskyblue);
        -moz-filter: drop-shadow(0px 0px 5px deepskyblue);
        filter: drop-shadow(0px 0px 5px deepskyblue);


}

.left_big{background-image: url({% static "imgs/th3logo/left_big.png" %});
        background-size: 0%;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: visible;
        z-index: 9999;
        -webkit-transition: transform 2s, background-size 1.7s;
        transition: transform 2s, background-size 2s;
                -webkit-filter: drop-shadow(0px 0px 5px deepskyblue);
        -moz-filter: drop-shadow(0px 0px 5px deepskyblue);
        filter: drop-shadow(0px 0px 5px deepskyblue);

}

.mid_med{background-image: url({% static "imgs/th3logo/mid_med.png" %});
        background-size: 0%;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: visible;
        z-index: 9999;
        -webkit-transition: transform 3.2s, background-size 2s;
        transition: transform 3.2s, background-size 2s;
                -webkit-filter: drop-shadow(0px 0px 5px deepskyblue);
        -moz-filter: drop-shadow(0px 0px 5px deepskyblue);
        filter: drop-shadow(0px 0px 5px deepskyblue);

}

.sun{background-image: url({% static "imgs/th3logo/sun.png" %});
        background-size: 0%;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: visible;
        z-index: 9999;
        -webkit-transition: transform 2.6s, background-size 2s;
        transition: transform 2.6s, background-size 2s;
                -webkit-filter: drop-shadow(0px 0px 5px deepskyblue);
        -moz-filter: drop-shadow(0px 0px 5px deepskyblue);
        filter: drop-shadow(0px 0px 5px deepskyblue);



}



@keyframes rotate_parts{
  from {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  to{
  -webkit-transform: rotate(80deg);
  transform: rotate(80deg);
  }
}

#th3{position: absolute; width: 100%; height: 120%;  -webkit-transition: transform 1.2s; /* Safari */z-index: -1;
    transition: transform 1.2s;
    opacity: .9; top:-10%;
    }




.r_430{  
  -webkit-transform: rotate(430deg);
  transform: rotate(430deg); 
  background-size: 90%;
}


.r_n540{  
  -webkit-transform: rotate(-540deg);
  transform: rotate(-540deg);
  background-size: 90%;
}


.r_n80{  
  -webkit-transform: rotate(-80deg);
  transform: rotate(-80deg);
  background-size: 90%;
}

.r_n720{  
  -webkit-transform: rotate(-720deg);
  transform: rotate(-720deg);
  background-size: 90%;
}

.r_n360{  
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  background-size: 90%;
}

.r_360{  
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  background-size: 90%;
}


@keyframes white2space{
  from {
    background-color:rgba(255, 255, 255, 1);
    background-image: url({% static "imgs/BG3_trans.png" %});
  }
  to{
    background-color: black;
    background-image: url({% static "imgs/BG3.png" %});
  }
}


@keyframes space2white{
  from {
    background-color: black;
    background-image: url({% static "imgs/BG3.png" %});
  }
  to{
    background-image: url({% static "imgs/BG3_trans.png" %});
    background-color:rgba(255, 255, 255, 1);
  }
}
.white_background{
    animation-name: space2white;
  animation-duration: 6s;
  -webkit-animation-fill-mode: forwards;
    background-size: cover;
    background-repeat: no-repeat;
}


.stars_background{
    animation-name: white2space;
  animation-duration: 6s;
  -webkit-animation-fill-mode: forwards;
    background-size: cover;
    background-repeat: no-repeat;
}
#blog{position: absolute; top: 20%; overflow: scroll; width: 100%;}

.atl_box.blog:hover{  animation-name: atlH;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;

}

.atl_box.blog{
background-color: rgba(63,63,63,1);
        -webkit-filter: drop-shadow(0px 0px 5px black);
    -moz-filter: drop-shadow(0px 0px 5px black);
    filter: drop-shadow(0px 0px 5px black);
    ;
}

@keyframes moonearth{
  from {
    background-image: url({% static "imgs/moon.png" %});
  }
  to{
    background-image: url({% static "imgs/earth.png" %});
  }
}


@keyframes earthmoon{
  from {
    background-image: url({% static "imgs/earth.png" %});
  }
  to{
    background-image: url({% static "imgs/moon.png" %});
  }
}



.earthBG{background-image: url({% static "imgs/earth.png" %});}
.moonBG{background-image: url({% static "imgs/moon.png" %});}

#play{position: absolute; top: 45%; left: 50%; font-size: 5vw; z-index: 9999; display: none;}
#headerVideo{display: none;}

    .section{background-color: rgba(255, 255, 255, 0) !important;}
    /* Style for our header texts #iphone4 th3_clients opacity: 0; rocket-info BG2.png
    * --------------------------------------- */
    h1{
        font-size: 2em;
        color: black;
        margin:0;
        padding:0;
    }
    h2{
        font-size: 2em;
        margin: 0 0 18px 0;
        
    }

    /* Common styles
    * --------------------------------------- */
    img{
        -webkit-transition: all 0.7s ease-out;
        -moz-transition: all 0.7s ease-out;
        -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;
    }
    .section{
        width: 100%;
        overflow:hidden;
        position: relative;
    }
    .wrap{
        width: 1180px;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    .box{
        text-align: left;
        color: white;
        font-size: 1.2em;
        line-height: 1.6em;
    }




    /* Section 0 
    * --------------------------------------- */
    #section0{    
        background-size: cover;
        background-repeat: no-repeat;
    
    }

    
    #fullpage{
        /*
        background-image: url({% static "imgs/vr-space-moon-2.png" %}); background-size: cover; background-repeat: no-repeat; background-position: center;
        */
    }
    #section1{
        
        background-repeat: no-repeat;
        background-image: url({% static "imgs/earth.png" %});
        background-size: 166%;
        background-position-x: 100%;
        background-position-y: 0%;
        overflow:visible;
        color: white;

        /*
        background-image: url({% static "imgs/launch_pad.jpg" %}) ;background-size: cover; background-repeat: no-repeat; background-position: center;
        */
    }
    #section1 .slideimg{
        position:absolute;
/*
        left: 15vw;
        top: 0vw;
*/
    }

    #section1 .box{
        position: absolute;
        top: 16%;
        left: calc(30%);        
        width: 32%;
        z-index: 1;
    }
    #rocket-info{position: absolute; top: calc(20%); left: 2%; width: calc(75%);  font-size: 1.5vw; z-index: 9000; border-radius: 1vw; margin: 0; padding: 1%; opacity: 0;

    }

    #lander-info{position: absolute; top: calc(30%); left: 40%; width: calc(33%); background-color: rgba(15,25,125,.2); font-size: 2.5vw; z-index: 9000; border-radius: 1vw; margin: 0; padding: 1%; opacity: 1;
    }

    #th3rdcoast-info{position: absolute; top: calc(30%); left: 40%; width: calc(33%); background-color: rgba(15,25,125,.2); font-size: 1.5vw; z-index: 9000; border-radius: 1vw; margin: 0; padding: 1%; opacity: 1;
    }

    #atlas-info{position: absolute; top: calc(30%); left: 40%; width: calc(33%); background-color: rgba(15,25,125,.2); font-size: 1.5vw; z-index: 9000; border-radius: 1vw; margin: 0; padding: 1%; opacity: 1;
    }    
    #section1 h1{color: white;}
    #section1 .box2{
    position: absolute;
    top: 41%;
    right: 64%;
    }
    #section1 .imgsContainer{
        display: block;
        position: absolute;
        z-index: 1;
        top: 42%;
        left: 58%;
        margin-top: -325px;
        margin-left: -747px;
        width: 800px;
        height: 696px;
    }

    
    #section1 #iphone4{

        width: auto;
        height: 100%;
        max-height: 95vw;
    }
    


    #section1 #iphone-green{    
        background-size: 10%;
        background-repeat: no-repeat;
        background-image: url({% static "imgs/moon.png" %});
        position: absolute;
        left: 145%;
        top: 4%;
        width: 140% !important;
        height:100vw;
        overflow: visible;
        -webkit-transition:-webkit-filter 10s ease-in-out;
        transition: filter 10s ease-in-out;
        -webkit-filter: drop-shadow(0px 0px 5px deepskyblue);
        -moz-filter: drop-shadow(0px 0px 5px deepskyblue);
        filter: drop-shadow(0px 0px 5px deepskyblue);

    }
    #iphone-green.active{
        -webkit-transform: translate3d(13px, 0px, 0px);
        -moz-transform: translate3d(13px, 0px, 0px);
        -ms-transform:translate3d(13px, 0px, 0px);
        transform: translate3d(13px, 0px, 0px);

    }

.moonlight{
        -webkit-filter: drop-shadow(0px 0px 0px deepskyblue) !important;
        -moz-filter: drop-shadow(0px 0px 0px deepskyblue) !important;
        filter: drop-shadow(0px 0px 0px deepskyblue) !important;
}

    /*screen resolutions between 620px and 800px*/
    @media all and (min-width: 620px) and (max-width: 800px){
        #section1 .imgsContainer{
            margin-top: -278px;
            margin-left: -685px;
            width: 647px;
            height: 563px;
        }
    }

    /*screen resolutions lower than 620px*/
    @media all and (max-width: 620px){
        #section1 .imgsContainer{
            margin-top: -208px;
            margin-left: -516px;
            width: 534px;
            height: 464px;
        }
    }
    #iphone2{
        z-index: 10;
    }
    #iphone2.active{
        -webkit-transform: translate3d(-134px, 0px, 0px);
        -moz-transform: translate3d(-134px, 0px, 0px);
        -ms-transform:translate3d(-134px, 0px, 0px);
        transform: translate3d(-134px, 0px, 0px);

    }

    #iphone3{

        z-index: 12;
    }
    #iphone3.active{
        -webkit-transform: translate3d(213px, 0px, 0px);
        -moz-transform: translate3d(213px, 0px, 0px);
        -ms-transform:translate3d(213px, 0px, 0px);
        transform: translate3d(213px, 0px, 0px);

    }

    #iphone4{
        z-index: 11;
        left: 10vw;
        top: 30vw;
        opacity: 0;
    }

    #iphone4.active{
        -webkit-transform: translate3d(0px, -20vw, 20vw);
        -moz-transform: translate3d(0px, -20vw, 20vw);
        -ms-transform:translate3d(0px, -20vw, 20vw);
        transform: translate3d(0px, -20vw, 20vw);
        opacity: 1;
    }

    #iphone4.landed{
        -webkit-transform: translate3d(0px, 0vw, 50vw);
        -moz-transform: translate3d(0px, 0vw, 50vw);
        -ms-transform:translate3d(0px, 0vw, 50vw);
        transform: translate3d(0px, 0vw, 50vw);
        opacity: 1;
    }


    #earth{
        z-index: 11;
        left: 10vw;
        top: -9vw;
        opacity: 0;
    }

    #earth.active{
        -webkit-transform: translate3d(0px, 20vw, 20vw);
        -moz-transform: translate3d(0px, 20vw, 20vw);
        -ms-transform:translate3d(0px, 20vw, 20vw);
        transform: translate3d(0px, 20vw, 20vw);
        opacity: 1;
    }




    /* Section 2  iphone-yellow
    * --------------------------------------- */
    #section2 img{
        

    }

    #section2 .imgsContainer,
    #staticImg .imgsContainer{
        position: absolute;
        z-index: 1;
        left: 100%;
        display: block;
        margin-top: -288px;
        margin-left: -636px;
        width: 0;
        height: 0;

        -webkit-transition: all 1.2s ease-in-out;
        -moz-transition: all 1.2s ease-in-out;
        -o-transition: all 1.2s ease-in-out;
        transition: all 1.2s ease-in-out;
    }

    #section2.moveUp .imgsContainer{
        top: 50%;
    }

    #section2.moveDown .imgsContainer,
    #staticImg .imgsContainer{
        top: 0%;
    }

    #section2.active .imgsContainer{
        top: 80%;
    }

    #section2 .box{
        position: absolute;
        top: calc(22%);
        left: calc(32%);
        width: 45vw;
    }

.vr-space-alpha{        background-size: cover;
        background-repeat: no-repeat;
        background-image: url({% static "imgs/vr-space-alpha.png" %});
    }

    #section2{
     
        background-position-y:0%;
        background-position-x:0%; 
        background-size: 100%;
        background-position: bottom;
        background-repeat: no-repeat;
        background-repeat-x: repeat;
        color: white;
       /* background-image: url({% static "imgs/vr-space-alpha.png" %}); */
        z-index: 9999;

        
    }
    #section2 h1{color: white;}
    #iphone-yellow{
        top: 0% !important;
        left: -80%;
        max-height: 20vw;
        width: auto;
    }
    #iphone-yellow.active{
        
        -webkit-transform: translate3d(51vw, 4vw, 0vw);
        -moz-transform: translate3d(51vw, 4vw, 0vw);
        -ms-transform:translate3d(51vw, 4vw, 0vw);
        transform: translate3d(51vw, 4vw, 0vw);
        /*
        left: calc(0%);
        top: calc(60%);
        */
    }
    #iphone-red{
        top: -33vw;
        left: 0vw;
    }

    #iphone-blue{
    top: 30%;
    left: 80%;
    width: 42vw;
    position: absolute;
    }
    #iphone-blue.active{

        left: 80vw !important;

    }

.lander_after{
    position: absolute;
    top: 20%;
    left: 65%;
}

    .moon2earth{        
        animation-name: moonearth;
        animation-duration: 5s;
        -webkit-animation-fill-mode: forwards;
    }
    .earth2moon{        
        animation-name: earthmoon;
        animation-duration: 5s;
        -webkit-animation-fill-mode: backwards;
    }

    #th3rdcoast{
        position: absolute;
        z-index: 9999;
        left: calc(110%);
        top: calc(36%);
        opacity: 0;
    }

    #th3rdcoast.active{
        left: calc(60%);
        top: calc(36%);
/*        -webkit-transform: translate3d(calc(-30vw), calc(27vw), calc(10vw));
        -moz-transform: translate3d(calc(-30vw), calc(27vw), calc(10vw));
        -ms-transform:translate3d(calc(-30vw), calc(27vw), calc(10vw));
        transform: translate3d(calc(-30vw), calc(27vw), calc(10vw));
*/        
        opacity: 1;
    }

#th3_clients{
    position: absolute;
    top: calc(50%);
    left: 30%;
}


.clients_a, .clients_b, .clients_c{opacity: 0; height: 0vw; padding: 2%;}
    #staticImg{
        display: block;
        position: absolute;
        z-index: 1;
        top: 200%;
        left: 0;
        width: 100%;
        min-width: 980px;
        height: 100%;

        -webkit-transition: all 0.7s ease-out;
        -moz-transition: all 0.7s ease-out;
        -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;

        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }
    #staticImg.moveDown{
    -webkit-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
    }
    #staticImg.moveUp{

    -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
    }
    #staticImg.moveDown .imgsContainer{
            top: 50%;
    }
    #staticImg.moveDown img{
        top: 155px;
    }

    #staticImg.active .imgsContainer{
        top: 50%;
    }


    #staticImg.active img{
        top: 487px;
    }





    /* Section 3
    * --------------------------------------- */
    #section3 .imgsContainer{

        position: absolute;
        top: 30%;
        left: 5%;
        width: 80%;
        text-align: left;
    }
    #section3{}
/*
    #section3 img{
        top: 155px;
        left: 455px;
        position: absolute;
    }

    #section3 .box{
        
        margin: 5% 0 0 0;
    }
*/
    #section3 .box{
        position: absolute;
        top: calc(13%);
        left: calc(35%);
        width: calc(45vw);
        z-index: 1;
    }

#links{
    -webkit-filter: drop-shadow(0px 0px 5px deepskyblue);
    -moz-filter: drop-shadow(0px 0px 5px deepskyblue);
    filter: drop-shadow(0px 0px 5px deepskyblue);
    position: absolute; left: calc(40%); top: calc(85%);
}

    /* Overwriting fullPage.js tooltip color
    * --------------------------------------- */
    .fp-tooltip{
        color: #AAA;
    }
    #fp-nav span, .fp-slidesNav span{
        border-color: black;
        -webkit-box-shadow:0px 20px 10px -10px deepskyblue;
        -moz-box-shadow:0px 20px 10px -10px deepskyblue;
        box-shadow:0px 20px 10px -10px deepskyblue;
    }
    #fp-nav li .active span, .fp-slidesNav .active span{
        background: deepskyblue;
        border-color: black;
        -webkit-filter: drop-shadow(0px 0px 5px deepskyblue);
    -moz-filter: drop-shadow(0px 0px 5px deepskyblue);
    filter: drop-shadow(0px 0px 5px deepskyblue);
    }
/*  #mission_statement{background-color: rgba(1, 41, 59, .3);   -webkit-filter: drop-shadow(0px 0px 1px DeepSkyBlue);
    -moz-filter: drop-shadow(0px 0px 1px DeepSkyBlue);
    filter: drop-shadow(0px 0px 1px DeepSkyBlue);}

    th3rdcoast
*/


    #section4 .box{
        position: absolute;
        top: 10%;
        left: calc(40%);
         margin: 5% 0 0 0;
        width: 45vw;
    }


    #section4 .imgsContainer{
        top: 25%;
    }
/*
    #section3 img{
        top: 155px;
        left: 455px;
        position: absolute;
    }

*/


    #section6{
        background-image: url({% static "imgs/vr-space-alpha-8.png" %});
        background-size: 100%;
        background-position: bottom;
        background-repeat: no-repeat;
    }

.check_wrapper{position: absolute; top: 35%; left: 0%; z-index: 1000;}


#mission_statement{

-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
padding:10px 25px 20px;

text-align:left;
}

#mission_statement:after{
content:"";
width:100%;
height:20%;
position:absolute;
bottom:-15px;
left:0;
-webkit-box-shadow:0px 20px 10px -10px #000;
-moz-box-shadow:0px 20px 10px -10px #000;
 box-shadow:0px 20px 10px -10px #000;
}

#mission_statement h3{
color:#edf2f3;
font-size: 1vw;
text-align:center;
padding-bottom:20px;
text-shadow:0px 0px 0 rgb(48,48,45),0px 1px 0 rgb(21,21,18),0px 2px 0 rgb(-6,-6,-9),0px 3px 0 rgb(-33,-33,-36), 0px 6px 0 rgb(-114,-114,-117),0px 7px 6px rgba(0,0,0,0.85);

text-transform:uppercase;
letter-spacing:.3em;
}

#mission_statement pre{
-webkit-border-radius:1vw;
-moz-border-radius:1vw;
border-radius:1vw;
-webkit-filter:blur(0.3px);
border-left:0vw solid #1b1b1b;
border-right:0vw solid #1c1c1c;
border-top:0vw solid #0f1310;
border-bottom:0vw solid #0f1310;
border-style: groove; 
overflow:hidden;
position:relative;
color:#7cb4fc;
padding:1.5em 1.5em 1.5em 5em;
-webkit-box-shadow:inset 0 0 0 9px rgba(0,0,0,.97),  0 1px 60px 10px rgba(0,0,0,9), inset 0 1px 80px 5px deepskyblue;
-moz-box-shadow:inset 0 0 0 9px rgba(0,0,0,.97),  0 1px 60px 10px rgba(0,0,0,9), inset 0 1px 80px 5px deepskyblue;
box-shadow:inset 0 0 0 9px rgba(0,0,0,.97),  0 1px 60px 10px rgba(0,0,0,9), inset 0 1px 80px 5px deepskyblue;

text-shadow:#89d3fd 0 -1px 35px;
}

#mission_statement pre:before{
content:"";
width:100%;
height:20%;
position:absolute;
top:0;
left:0;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,66,25,0.2)), color-stop(70%,rgba(32,57,17,0)), color-stop(99%,rgba(28,53,13,0)));
-webkit-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
-moz-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
-ms-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
 -o-animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
    animation:scan 6.5s 1.0s infinite ease-in-out  forwards;
}


#mission_statement pre:after{
content:"";
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:1;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAE0lEQVQIHWP4//8/AxMDFMiDWQA2wAMhzy0v7QAAAABJRU5ErkJggg==); /*scanline*/
 repeat;
-webkit-filter:drop-shadow(15.32px 2.18px 7.35px rgba(20, 184, 189, 1));
}

#mission_statement code{
background:#fff;
border:1px solid #DDD;
padding:0.1em 0.2em;
}

#mission_statement pre code{
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
background-color:transparent;
border-style:none;
font:400 19px VT323, monospace;
}

#mission_statement pre code:last-child:after{
content:"\220E";
-webkit-animation:cursor .95s ease-in-out infinite;
-moz-animation:cursor .95s ease-in-out infinite;
-ms-animation:cursor .95s ease-in-out infinite;
 -o-animation:cursor .95s ease-in-out infinite;
    animation:cursor .95s ease-in-out infinite;
font-size:120%;
}

/*Animations*/

/* Cant' get "Scan" to work in Firefox*/
@-webkit-keyframes scan{
from { top: -50%;
left: 0;
}

to {
top: 150%;
left: 0;
}
}


@keyframes scan{
from { top: -50%;
left: 0;
}

to {
top: 150%;
left: 0;
}
}


@-webkit-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-moz-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-ms-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@-o-keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}


@keyframes cursor{
from { opacity: 1.0;
}

to {
opacity: 0.0;
}
}
#fp-nav{}

.fa-check-square-o{font-size: 5vw;}


#section3 p{background: rgba(0,0,0,0);}

#section3 p.info{
    position: absolute;
    top: 30vw;

    -webkit-transform: translateX(100vw);
    -moz-transform: translateX(100vw);
    -ms-transform:translateX(100vw);
    transform: translateX(100vw);

    -webkit-transition: transform 1.2s;
    transition: transform 1.2s;

    /*
        -webkit-transform: translate3d(2vw, 29vw, 10vw);
        -moz-transform: translate3d(2vw, 29vw, 10vw);
        -ms-transform:translate3d(2vw, 29vw, 10vw);
        transform: translate3d(2vw, 29vw, 10vw);

        -webkit-transition: transform 1.2s;
        transition: transform 1.2s;
    */  

}

#section3 p.info.active{


    -webkit-transform: translateX(5vw);
    -moz-transform: translateX(5vw);
    -ms-transform:translateX(5vw);
    transform: translateX(5vw);

    /*
        -webkit-transform: translate3d(2vw, 39vw, 10vw);
        -moz-transform: translate3d(2vw, 39vw, 10vw);
        -ms-transform:translate3d(2vw, 39vw, 10vw);
        transform: translate3d(2vw, 39vw, 10vw);

     */   

}



/*
atl_box
.menuimg
logo
btn
topBar
space_bg
fw_
menuimg
#slider
desktop_
article p
ham_menu
fa-bars
SM h1
space_bg
#iphone-yellow
d-btn
atlH
.carousel p
*/

@font-face {
    font-family: Avenir-UltraLight;
  src: url('{% static "fonts/AvenirNext-UltraLight.ttf" %}');
  src: url('{% static "fonts/AvenirNext-UltraLight.woff" %}');
    
}
@font-face {
    font-family: Avenir-Light;
  src: url('../fonts/AvenirNext-UltraLight.ttf');
  src: url('../fonts/AvenirNext-UltraLight.woff');
}
@font-face {
    font-family: Avenir-Light;
  src: url('../fonts/AvenirNext-Bold.ttf');
  src: url('../fonts/AvenirNext-Bold.woff');
  font-weight: bold;
}
@font-face {
    font-family: Avenir-Light;
  src: url('../fonts/AvenirNext-Regular.ttf');
  src: url('../fonts/AvenirNext-Regular.woff');
  font-weight: 600;
}
.bold{font-family: Avenir-Light; font-weight: 600;}
#moon_prob button{background-color: rgba(43, 43, 43, 0.94); width: 65% !important; background-color: rgba(40,40,40,.6);}
#moon_prob button:hover{background-color: rgba(20,20,20,.9);}

.launch-btn{width: 90%; background-color: rgba(255,255,255,.2)}
.launch-btn:hover{background-color: rgba(0,0,0,.5)}


.check_box {
    width: 19.5vw;
    height: 7vw;
    font-size: 2vw;
    border-radius: 5px;
    margin: 1%;
    text-align: center;
    border: 1px rgb(62, 62, 62) solid;
    background-color: rgba(2, 7, 16, 0.7);
}
.check_box:hover{    
    animation-name: cap;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
}
.top_check{
    font-size: 4vw;
    position: relative;
    top: 40%;
}
#atl_close{position: fixed; top: 0; left: 0; font-size: 3vw; z-index: 9999; height: 3vw; width: 3vw; padding: 1%; margin:1%;
    background-image: url(../imgs/icon-close.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1%;
}
#atl_close:hover{  animation-name: atlH3;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
}
/*.atl_info article p{font-size: 1.3vw;}*/
.atl_info{display: none; position: fixed; top: 0; left:0; width: 100%; height: 100%;padding: 0%;margin: 0%; background-color: rgba(0,0,0,.9); z-index: 9999;}
.atl_box{
    width: 23vw;
    height: 26vw;
    border-radius: 1px;
    margin: 2%;
    text-align: center;
    border: 1px rgb(62, 62, 62) solid;

}
.atl_box_hvr:hover{
  animation-name: atlH2;
  animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}
.atl_box h3{
  padding-top: 2%;
  font-weight: 100;
  font-size: 2vw;
}
.atl_box2 h3{
  padding-top: 3%;
  font-weight: 100;
  font-size: 2.5vw !important;
}
.atl_box2{
    width: 32vw;
    height: 14vw;
    border-radius: 5px;
    margin: 2%;
    padding:0%;
    text-align: center;

}
.h-20vw{height: 20vw !important;}
.fw-600{font-weight: 600;}
@keyframes cap{
  from {        -webkit-filter: drop-shadow(0px 0px 4px white);
  -moz-filter: drop-shadow(0px 0px 4px white);
  filter: drop-shadow(0px 0px 4px white);
color: white;background-color: rgba(255,255,255,.0);
}
  to{-webkit-filter: drop-shadow(0px 0px 0px black);
  -moz-filter: drop-shadow(0px 0px 0px black);
  filter: drop-shadow(0px 0px 0px black);background-color: rgba(255,255,255,.08);
color: deepskyblue;
background-color: rgba(5,5,5,1);

}
}
@keyframes atlH{
  from {        -webkit-filter: drop-shadow(0px 0px 10px deepskyblue);
  -moz-filter: drop-shadow(0px 0px 10px deepskyblue);
  filter: drop-shadow(0px 0px 10px deepskyblue);
color: deepskyblue;background-color: rgba(255,255,255,.0);}
  to{        -webkit-filter: drop-shadow(0px 0px 1px deepskyblue);
  -moz-filter: drop-shadow(0px 0px 1px deepskyblue);
  filter: drop-shadow(0px 0px 1px deepskyblue);background-color: rgba(0, 220, 255, .1);}

}




.sign-btn:hover{
  color: deepskyblue;
  animation-name: atlH;
  animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}
.create-btn{
  border: 1px rgba(0,0,0,0) solid;
}
.create-btn:hover{
  color: deepskyblue;
  animation-name: atlH3;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
}
.atl_h{color: inherit;}

@keyframes atlH2{
  from {           -webkit-filter: drop-shadow(0px 0px 5px black);
  -moz-filter: drop-shadow(0px 0px 5px black);
  filter: drop-shadow(0px 0px 5px black);     }
  to{-webkit-filter: drop-shadow(0px 0px 5px deepskyblue);
  -moz-filter: drop-shadow(0px 0px 5px deepskyblue);
  filter: drop-shadow(0px 0px 5px deepskyblue);background-color: rgba(4, 109, 158, .3);border:1.2px deepskyblue solid;}
}
@keyframes atlH3{
  from {           -webkit-filter: drop-shadow(0px 0px 5px black);
  -moz-filter: drop-shadow(0px 0px 5px black);
  filter: drop-shadow(0px 0px 5px black); border:1.2px rgba(255,255,255,0) solid;}
  to{-webkit-filter: drop-shadow(0px 0px 0px white);
  -moz-filter: drop-shadow(0px 0px 0px white);
  filter: drop-shadow(0px 0px 0px white);
  border:1.2px rgba(255,255,255,.5) solid;
background-color: rgba(0,0,0,1)}
}
.d-btn{
 -webkit-filter: drop-shadow(0px 0px 5px black);
  -moz-filter: drop-shadow(0px 0px 5px black);
  filter: drop-shadow(0px 0px 5px black);background-color: rgba(4, 109, 158, .1); border:1.2px rgba(255,255,255,0) solid;
}

.d-btn:hover{
  border:1.2px rgba(255,255,255,.5) solid;
  animation-name: atlH2;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
}

.menuimg:hover{
  animation-name: atlH;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
}
.doc_hide{display: none; width: 90%; height: 90vw;}
#show_doc{}
.space_bg_d{background: -webkit-linear-gradient(30deg, rgba(63,63,63,.6), rgba(255,255,255,.2), rgba(63,63,63,.6)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(30deg, rgba(63,63,63,.6), rgba(255,255,255,.2), rgba(63,63,63,.6)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(30deg, rgba(63,63,63,.6), rgba(255,255,255,.2), rgba(63,63,63,.6)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(30deg, rgba(63,63,63,.6), rgba(255,255,255,.2), rgba(63,63,63,.6));}


.space_bg{background: -webkit-linear-gradient(-90deg, rgba(0,0,0,.9), #212121, rgba(0,0,0,.9)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, rgba(0,0,0,.9), #212121, rgba(0,0,0,.9)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, rgba(0,0,0,.9), #212121, rgba(0,0,0,.9)); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, rgba(0,0,0,.9), #212121, rgba(0,0,0,.9));}

.space_bg_g{    background: -webkit-linear-gradient(-45deg, rgba(25,25,25,1), rgba(0,0,0, .6), rgba(25,25,25,1));
    background: -o-linear-gradient(-45deg, rgba(25,25,25,1), rgba(0,0,0, .6), rgba(25,25,25,1));
    background: -moz-linear-gradient(-45deg, rgba(25,25,25,1), rgba(0,0,0, .6), rgba(25,25,25,1));
    background: linear-gradient(-45deg, rgba(25,25,25,1), rgba(0,0,0, .6), rgba(25,25,25,1));
    -webkit-filter: drop-shadow(0px 0px 1px white);
    -moz-filter: drop-shadow(0px 0px 1px white);
    filter: drop-shadow(0px 0px 1px white);}

.lnkin{width:3vw;position: relative;}
.team_circle_box{display: flex;width: 7%;margin: 0%; position: relative;}
.circle{width: 1.2vw;height: 1.2vw;background-color: lightgrey;border-radius: 100%;margin-left: 1%;margin-right: 1%;}

.p-t-3{padding-top: 3%;}
.w-5{width: 5%;}
.yt-uix-sessionlink .ytp-watermark{display: none !important;}
h2{padding: 0%;margin: 0%; font-size: 2.5vw;}






.q-search{position: fixed;
top: 2%;
width: 90%;
padding: 1% 0% 6% 0%;
margin: 5%;
z-index: 9999;
display: none;
border-radius: 5px;

}
.q-search input{

width: 80%;
height: 5vw !important;  
color: white;
border-width: 0px;
background: -webkit-linear-gradient(-90deg, rgba(105, 105, 105, 0.9), rgba(222, 222, 222, 0.7), rgba(189, 189, 189, 0.9)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, rgba(105, 105, 105, 0.9), rgba(222, 222, 222, 0.7), rgba(189, 189, 189, 0.9)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, rgba(105, 105, 105, 0.9), rgba(222, 222, 222, 0.7), rgba(189, 189, 189, 0.9)); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, rgba(105, 105, 105, 0.9), rgba(222, 222, 222, 0.7), rgba(189, 189, 189, 0.9));
border-radius: 5px;
font-weight: 100;
font-size: 2.3vw;
font-weight: 300;

}
.table-wrap{display: none;}
.loc-h{  top: 52.7%;
  left: 5%;
  position: absolute;}
.loc-btn{
  top: 53.2%;
  left: 5%;
  position: absolute;
  border-style: solid;
  border-color: rgba(200,200,200,.8);
  border-width: 2px;
  border-radius: 10px;
  width: 4vw;
  height: 4vw;
  background: -webkit-linear-gradient(-90deg, rgba(0,0,0,.1), rgba(112, 128, 144, 0.2), rgba(112, 128, 144, 0.69)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, rgba(0,0,0,.1), rgba(112, 128, 144, 0.2), rgba(112, 128, 144, 0.69)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, rgba(0,0,0,.1), rgba(112, 128, 144, 0.2), rgba(112, 128, 144, 0.69)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, rgba(0,0,0,.1), rgba(112, 128, 144, 0.2), rgba(112, 128, 144, 0.69));
  }
  .loc-btn:hover{  

  background: -webkit-linear-gradient(-90deg, rgba(0,0,0,.5), rgba(112, 128, 144, 0.5), rgba(112, 128, 144, 0.9)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, rgba(0,0,0,.5), rgba(112, 128, 144, 0.5), rgba(112, 128, 144, 0.9)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, rgba(0,0,0,.5), rgba(112, 128, 144, 0.5), rgba(112, 128, 144, 0.9)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, rgba(0,0,0,.5), rgba(112, 128, 144, 0.5), rgba(112, 128, 144, 0.9));
  }
.b-border{
  border-bottom-style: solid;
  border-bottom-color: white;
  border-bottom-width: .5vw;
  width: 20%;
}
.abso{ position: absolute;}
.nts{
    position: absolute;
    right: -.5% !important;
    top: 0%;
    background-color: rgba(0, 0, 0, 0);
    width: 22%;
    border-radius: 4px;
    border-color: white;
    height: 30vw;
    border-style: solid;
    margin: 0%;
    padding-left: 1%;

  }
.nts a{
  font-size: 1vw;
    
}
.nts a:hover{
  background-color: rgba(112, 128, 144, 0.89);
      -webkit-filter: drop-shadow(0px 0px .5px white);
  -moz-filter: drop-shadow(0px 0px .5px white);
  filter: drop-shadow(0px 0px .5px white);
}




.SM_ a {
    margin: 0%;
    height: 10%;
    display: inline-block !important;
    word-wrap: normal;

}
/*.SM_:hover{color: deepskyblue !important;}*/
.lg{color: dimgrey;}
.dropdown, dropdown-toggle, notification-toggle{
  display: block;
}

.team_box{
    width: 100%;
    min-width: 50vw;
    max-width: 70vw;
    height: 35vw;
    text-align: left;
    display: flex;
    border-style: solid;
    border-color: rgba(0,0,0,.1);
    border-width: .3vw;
    border-radius: 7px;
    background-color: rgba(0,0,0,.7);
    padding: 2%;
    font-size: 1vw !important;
    margin: 2% 5% 2% 5%;

}
.team-pic{

  max-height: 100%;
  width: 20vw;
  border-radius: 100%;
  border-style: solid;
  border-color: rgba(255,255,255,.3);
  border-width: .3vw;

}
.team_box h2{font-size: 2vw; border-radius: 5px; padding: 1%; margin-top: 0vw;border-radius: 5px; padding: 1%; border-color: rgba(255,255,255,.3); position: absolute; width: 25vw;}

.team_box p{     border-radius: 5px;
    padding: 0%;
    width: 55%;
    position: relative;
    right: -5%;
    margin-left: 0%;
}
.team_box_ p{font-size: 2vw;}
#tab-note {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9006;
    display: none;
    width: 100%;
    font-size: 5vw;
    text-align: center;
    list-style: none;
    background-color: rgba(7,35,60,0.95);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: 2vw;
    border-bottom: 5px solid rgba(0, 126, 189, 0.41);
}
.fa{

  font-size: 4vw;
}
.open>.dropdown-menu {
    display: block;
    background-color: rgba(0, 0, 0, .8);
    z-index: 9000;
}
#home{
  display: none;
}
#tab-7:target, #tab-1:target, #tab-3:target, #tab-6:target,  #tab-5:target, #tab-8:target {
  display: block;
  z-index: 7000;
}

.larger{
    max-width: calc(100%);
    height: calc(100%);
    position: fixed;
    top: 9%;
    z-index: 9000;
    left: 0;
}
#myimg{
  opacity: 0;
}
.myimg{
  opacity: 1;
}
.order_view{
  opacity: 0;
}
h1 .tabRow_{
  font-size: 2vw;
  word-wrap: normal;
  padding: 0% 6% 0% 6%;
    margin: 0% 0% 0% 0%;
}
.tabRow_ {

    display: table-row;
    word-wrap: normal;
    text-align: center;
    white-space: wrap;
}
article p{
  font-size: 1.7vw;
}
.top{
  top: 3.5%;
}

.dropdown, dropdown-toggle, notification-toggle{display: block;}
#tab-note {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9006;
    display: none;
    width: 100%;
    font-size: 5vw;
    text-align: center;
    list-style: none;
    background-color: rgba(7,35,60,0.95);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: 2vw;
    border-bottom: 5px solid rgba(0, 126, 189, 0.41);
}
.atl_box2 .fa{
  font-size: 5vw;
}
.open>.dropdown-menu {
    display: block;
    background-color: rgba(3,52,73, .9);
    z-index: 7005;
}
.dropdown-menu h4{
  font-size: 7vw; 
}
.dropdown-menu a{
  font-size: 3.5vw;
}
#slider {
  position: relative;
  margin-left: 0%;
  margin-right: 0%;
  margin-top: 0%;
  margin-bottom: 0%;
}

.font-size{
    font-size: 1.5vw;
}

#slider ul li {


  position: relative;
  display: table-cell;
  vertical-align: middle;
 
}
.float_right {
    float: right;
}
#b1{
  top: 60%;
  position: relative;
}

.fa-phone, #msg, #LBTN, #desktop, .fa-bell{

}


.infoFrame{
  background-color: {{ instance.menu_hover_color }};
  border-style: groove;
  border-color: {{ instance.background_color }};
}
.new_message{
    display: block;
    position: fixed;
    z-index: 9999;
    top: 100%;
    background-color: rgba(0,0,0, .9);
    height: 80%;
    width: 100%;

    
}
.open{
  display: block;
  height: 80%;
  top: 0%;
  padding-top: 6%;
  overflow-y: scroll;


}
#new{

    position: fixed;
    bottom: 0%;
    width: 100%;
    text-align: center;
    z-index: 3000;
    background-color: black;
    font-size: 12vw;
    margin-bottom: 0;

}
#tab-4 article{
  
}
.tab{
  height: 100%;
  
}
.tab article{
  position: relative;
}
.order_view{
  opacity: 0;
}
.drop-opts{

  display: none;
  position: fixed;
  width: 30%;
  text-align: left;
  left: 29.5%;
  top: 3vw;
  margin:0%;
  padding:0%;
  height: auto;

  z-index: 1000 !important;
  font-size: 1.2vw;
}

.drop-opts-show{
  left: 29%;
  margin:0;


}
.drop-opt{  margin:0%;
  padding:0;
background-color: rgb(0, 0, 0);
}
.drop-opt:hover{background-color: rgba(0,0,0,.7);}
.drop-opt a:hover{color: DeepSkyBlue;}

/*
.desktop_ {
    position: fixed;
    top: 1%;
    font-size: 7vw;
    right: -9vw !important;
    padding-bottom: 1%;
    margin: 0% 0% 0% 0%;
    padding: 0% 0% 0% 1% !important;
}
.fa-mobile:before {
    font-size: 11vw;
}
*/
.HPImage20{
    width: 15%;
    height: auto;
}



.ENGBOX_ {

    font-size: 2vw;
}
h1 .tabRow_{
  font-size: 2vw;
  word-wrap: normal;
  padding: 0% 8% 0% 8%;
    margin: 0% 0% 0% 0%;
}
.tabRow_ {

    display: table-row;
    word-wrap: normal;
    text-align: center;
    white-space: wrap;
}
.logo_{
    top: 0;
    left: 0;
    position: fixed;
    z-index: 7000;
    width: 7%;
    margin-top: 0%;
}
.new_{
  font-size: 3vw !important;
}
.open_ {
    height: 100%;
    overflow-y: scroll;
    padding-top: 0%;
}
#tab-1_ {
  display: block;
}
.SM_ a {
    margin: 0%;
    height: 10%;
    word-wrap: normal;
}
.tab-1_ {
  display: block;
}
.tab-1_ article{
  position: static;
}
.top{
  top: 3.5%;
}
.SM .menu{
  display: none;
}
.hide{
  display: none !important;
}
.show{
  display: inline !important; 
}
.hide2{
  display: none !important;
}
.show2{
  display: inline !important;
}
.top-marg{
  margin-top: 6%;
}
.top-pad{
  padding-top: 6%;
}
.SLG{
  display: none;
}


.slide_text{
    display: -webkit-inline-box;
    position: relative;
    left: 1.8vw;
    font-size: 1.5vw;
    padding: 0 !important; 
    font-family: Avenir-Light;

  }
.mobile_slide{
  display: inline;
}
.small_font{
  font-size: 1.2vw;
}
.fa-desktop{
  padding-top: 1%;
}
.choice{
      font-size: 3vw;
    margin: 0% 0% 0% 0%;
    padding: 0% 0% 0% 8%;
}
.choice_{
    font-size: 2vw;
    margin: 0% 0% 0% 0%;
    padding: 0% 0% 0% 0%;
}
.SLG{
  
  display: none !important;

}
.order_number{
    position: absolute;
    top: 1vw;
    left: 4vw;
    font-size: 5vw;
}
.w-100{width: 100% !important;}
.w-95{width: 95% !important;}
.w-50{width: 50%;}
.w-65{width: 65%;}
.w-33{width: 33%;}
.w-25{width: 25%;}
.w-20{width: 20%;}
.w-15{width: 15%;}
.w-10{width: 10%;}
.w-2{width: 2%;}

.t-p-6{
  padding-top: 6%;
}
.t-p-6{
  padding-top: 6%;
}
.t-p-20{
  padding-top: 20%;
}
.t-p-10{
  padding-top: 10%;
}
.news_letter{
  width: 100%;
  
}
.bottom{
  bottom: 0;  
}
a {
  color: white;
}
.news_bg{
    width: 88%;
    text-align: left;
    background-color: rgba(0,0,0,.0);
    padding: 1%;
/*      -webkit-filter: drop-shadow(0px 0px 2px white);
  -moz-filter: drop-shadow(0px 0px 2px white);
  filter: drop-shadow(0px 0px 2px white);
      border-style: groove;
    border-width: 2px;
    border-radius: 4px;
*/
}
.news_bg h3{ font-weight: 600; color: deepskyblue !important;}
.cap_back{
  background-color: rgba(65,64,66, .7);
  width: 30%;
  border-color: slategrey;
  border-style: groove;
  border-width: 2px;
  border-radius: 10px;
}
.q-fs{
  font-size: 2vw;
}

article h1{font-size: 100;}
.fs-1{font-size: 1vw;}
.left-soc {
    position: relative;
    left: 35vw;
    bottom: 30%;
    font-size: 2vw;

}
.p-l-5{padding-left: 5%;}

.ar { background-color: rgba(255,255,255,.4); }
.atlas_row{display: inline-flex;}
.HPImage{width: 30%; height: auto;}
.HPImage100{width: 100%; height: auto;}
.inline-flex{display: inline-flex;    -webkit-box-pack: center;
    -webkit-flex-pack: center;
    /*-webkit-justify-content: center;*/
    -webkit-flex-align: center;
    -webkit-align-items: center;
    vertical-align: top;
}

.news_letter input {
  /*
    width: 80%;
    height: 2vw;
    font-size: 1vw;
    text-align: left;
    padding-top: 2%;
    padding-bottom: 2%;
  */
}
.m-t-n18{margin-top: -18%;}
.logo3{    position: fixed;
    left: 0;
    top: 0;
    padding: 2%;
    width: auto;
    height: 3%;}
.w-75{width: 75%;}
.p-b-20{padding-bottom: 20%;}
#atlas{z-index: 9990;}
.h-30{height: 20vw;
font-size: 1vw;}
.borders{border-width: 1px;
  border-color: SlateGrey;
  border-style: solid;
border-radius: 5px;}

.m-l-18{
  margin-left: 18%;
}


.rwd-table  {
  margin: 1em 0;
  min-width: 300px; 
  background-color: rgba(70,0,0,.7);
  text-align: left;
  border-width: 1px;
  border-style: solid;
  border-color: white;
  width: 80%;
  tr {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  
  th {
    display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!   
  }
  
  td {
    display: block; 
    
    &:first-child {
      padding-top: .5em;
    }
    &:last-child {
      padding-bottom: .5em;
    }

    &:before {
      content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
      font-weight: bold;

      // optional stuff to make it look nicer
      width: 6.5em; // magic number :( adjust according to your own content
      display: inline-block;
      // end options
      
      @media (min-width: $breakpoint-alpha) {
        display: none;
      }
    }
  }
  
  th, td {
    text-align: left;
    
    @media (min-width: $breakpoint-alpha) {
      display: table-cell;
      padding: .25em .5em;
      
      &:first-child {
        padding-left: 0;
      }
      
      &:last-child {
        padding-right: 0;
      }
    }

  }
  
  
}


// presentational styling

@import 'http://fonts.googleapis.com/css?family=Montserrat:300,400,700';




.rwd-table {
  background-color: rgba(70,0,0,.7);
  text-align: left;
  border-width: 1px;
  border-style: solid;
  border-color: white;
  color: #fff;
  border-radius: .4em;
  overflow: hidden;
  tr {
    border-color: lighten(#34495E, 10%);
  }
  th, td {
    margin: .5em 1em;
    @media (min-width: $breakpoint-alpha) { 
      padding: 1em !important; 
    }
  }
  th, td:before {
    color: #dd5;
  }
}

.table-head{font-size: 6vw;}




.news_bg a{
  color: deepskyblue !important;
}

#section3 p.info{

    position: absolute;
    top: 66%;
    left: 2%;
}

.update_event{
  position: absolute;
  right: 0;
  top: 0;
  width: 4vw;
  height: 4vw;

}
.h-20{height: 20vw;}
.m-lr-5{margin-left: 5%; margin-right: 5%;}