/* This is the CSS for the GDApps. 
*  Post date 01-01-2017
*/
html { 
    background-color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
}


body {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    color:  White;
    overflow-y: hidden;
    overflow-x: hidden;
    margin:0px;
}

a { text-decoration: none;}

/* GDApps custom */
#gdapps_email {
    color: navy;
}

#gdapps_strong {
    color: darkred;
}

/*Loading Icon CSS*/
.sk-circle {
    margin: 300px auto;
    width: 190px;
    height: 190px;
    position: relative;
}

.sk-circle h1{
    text-align:center;
}

.sk-circle .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.sk-circle .sk-child:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #ffffff;
    border-radius: 100%;
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg); 
}
.sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg); 
}
.sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); 
}
.sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg); 
}
.sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg); 
}
.sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg); 
}
.sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg); 
}
.sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg); 
}
.sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg); 
}
.sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg); 
}
.sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg); 
}
.sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s; 
}
.sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s; 
}
.sk-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s; 
}
.sk-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s; 
}
.sk-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s; 
}
.sk-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s; 
}
.sk-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s; 
}
.sk-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s; 
}
.sk-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s; 
}
.sk-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s; 
}
.sk-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s; 
}

@-webkit-keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


#GDA {
    bottom: 8px;
    color: #fff;
    font-size: 12px;
    position: absolute;
    right: 8px;
}

#GDA a {
    color: #fff;
    text-decoration: none;
}

#demoalert{
    background-color: #891a3d;
    border-style: none;
    bottom: 0;
    left:40%;
    cursor: pointer;
    position: fixed;
    padding: 15px;
    z-index: 60;
    display:none;
}

#demoalert a{
    color: #fff;
    font-size:14px;
    font-weight: bolder;
    text-decoration: none ;
}


/* Images Header Navigation*/
header{text-align:center;}


/*Begin Mobile Code CSS*/
#m_container{
    float:left;
    width:100%;

    display: none;
}

#m_container figure:first-child{
    float: left;
    margin: 0px auto;
}

#m_container figure{
    float: left;
    margin: 90px auto;
}

#m_container figure:last-child{
    float: left;
    margin: 0px auto;
}

#m_title{
    position: relative;
    float:left;
    border-left: 12px solid #e1b105;
    width:95%;
    margin-top: 10px 0px 20px 0px;
}

#m_title h3{
    font-size: 12px;
    margin:5px 0 0 12px;
    padding:0;
    color: #e1b105;
    text-shadow: -3px 3px 2px rgba(0,0,0,1);
    text-shadow: -3px 3px 2px 1px rgba(0,0,0,1);
}


#m_title h4{
    font-size: 14px;
    font-weight: bold;
    margin:0 0 0 12px;
    padding:0;
    color: #e1b105;
    text-shadow: -3px 3px 2px rgba(0,0,0,1);
    text-shadow: -3px 3px 2px 1px rgba(0,0,0,1);
}


#m_container figure figcaption{
    margin-top:25px;
    padding:15px 20px;
    background-color: rgba(255,255,255,1);
    color: rgba(71,88,94,1);
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #0093BF;
}

/* REPLACE: .m_architecture{ */
.m_gdasitecontent{
    width:100%;
}




.action{
    color:#fff;
    padding:5px;
    background:#0093BF; 
    border-radius: 5px;
    font-size: 15px;
    text-align:center;
    text-decoration:  none  ;
}

.action:hover{
    background: rgba(71,88,94,1);
    color:#fff;
    text-decoration:  none  ;
}

.action:nth-child(even){
    color:#fff;
    padding:5px;
    background:#0093BF; 
    border-radius: 5px;
    font-size: 15px;
    margin-left:30px;
    text-align:center;
    text-decoration:  none;
}


.action:hover:nth-child(even){
    background: rgba(71,88,94,1);
    color:#fff;
    text-decoration:  none  ;
}



#m_actions{
    width:100%;
    text-align:center;
    margin:25px 0px 10px 0px;
}

#m_scroll{
    text-align: center;
    color:#cc3300;
    font-size:18px;
    line-height:15px;
}


.loaderwhite {
    color:#cc3300;
}

.loaderwhite span {

    color: rgba(204, 51, 0, 0.9);
    -webkit-animation: loadingwhite .9s ease-in-out infinite alternate;
    -moz-animation: loadingwhite .9s ease-in-out infinite alternate;
    -ms-animation: loadingwhite .9s ease-in-out infinite alternate;
    animation: loadingwhite .9s ease-in-out infinite alternate;

}

@-webkit-keyframes loadingwhite {
    to { color: rgba(255, 255, 255, .9);}
}

@-moz-keyframes loadingwhite {
    to { color: rgba(255, 255, 255, .9);}
}

@-ms-keyframes loadingwhite {
    to { color: rgba(255, 255, 255, .9);}
}

@keyframes loadingwhite {
    to { color: rgba(255, 255, 255, .9);}
}

.loaderwhite span:nth-child(1) {
    -webkit-animation-delay:0.3s;
    -moz-animation-delay:0.3s;
    -ms-animation-delay:0.3s;
    animation-delay:0.3s;
}

.loaderwhite span:nth-child(2) {
    -webkit-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -ms-animation-delay:0.6s;
    animation-delay:0.6s;
}
.loaderwhite span:nth-child(3) {
    -webkit-animation-delay:0.9s;
    -moz-animation-delay:0.9s;
    -ms-animation-delay:0.9s;
    animation-delay:0.9s;
}


/*End Mobile Code*/

ul#menu, ul#menu  {
    margin:0;
    padding:0;
    position:fixed;
    top:0;
    left:0;
    z-index:60;
    width:100%;
    height:33px;
}

.menu_bg{
    background-color:#010E10;
}

ul.sub-menu {
    margin:0;
    padding:0;
    background-color:#010E10;
    position:fixed;
    top:0;
    left:0;
    z-index:60;
    width:100%;
}

ul#menu ul.sub-menu {
    border-top: solid 2px rgba(141,166,177,0.8);
    font-size: 13px;
}

ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}

#narrowheader{
    display:none;   
}


ul#menu li a{
    text-decoration: none;
    display:inline-block;
    padding: 8px 13px;
}

.menuActiveColor{
    color:#ffffcc;
}

.menuOffColor{
    color: #ffffcc;
}



/*sub-menu text color width must subtract padding*/
ul#menu li ul.sub-menu li a {
    color: #ffffcc;
    width:230px;
    text-align: left;
    padding: 5px 20px;
}


ul#menu li a:hover {
    font-style:italic;
    color: #F9C605;

}

/*sub menu hover color*/
ul#menu li ul.sub-menu li a:hover {
    background-color:rgba(102, 102, 102, 1);
    color: gold;
}

/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;

}


.divider{
    border-left: 1px solid rgba(255, 255, 255, 1); 
}

.first_spacer{
    margin-left: 20px;
}


/*dropdown in titlebar on mouseover*/
ul#menu li ul.sub-menu {
    display:none;   
    position: absolute;
    top: 32px;
    left: 0;
    width:270px;
    color: #000000;
    background-color:rgba(51, 51, 51, .95);

}

ul#menu li:hover ul.sub-menu {

    display:block;
}


/*Page Title*/
#menu-title{
    position: fixed;
    top: 0px;
    left: 0px;
    margin-top:7px;
    margin-left: 30px;
    margin-right: 15px;
    cursor:pointer;
    z-index:60;

}

#menu-title h1{

    font-size: 14px;
    text-align: center;
    line-height: 0px;
    font-weight: bold;
}


/*End PAge Title*/

/*Page Logo*/
#menu-logo{
    position: fixed;
    top: 0px;
    right: 0px;
    margin-top:2px;
    margin-left: 20px;
    margin-right: 5px;
    z-index: 100;
    width:400px;
}

#menu-logo img{
    width: 400px;
}

/*End Page Logo*/

/*navigation Code*/


#title{
    position: relative;
    float:left;
    border-left: 34px solid #ffff66;
    height:60px;
    width:95%;
    margin-top: 50px;
}

#title h3 {
    font-size: 20px;
    margin:5px 0 0 12px;
    padding:0;
    color: #ffff66;
    text-shadow: -3px 3px 2px rgba(0,0,0,1);
    text-shadow: -3px 3px 2px 1px rgba(0,0,0,1);
}


#title h4 {
    font-size: 24px;
    font-weight: bold;
    margin:0 0 0 12px;
    padding:0;
    color: #ffff66;
    text-shadow: -3px 3px 2px rgba(0,0,0,1);
    text-shadow: -3px 3px 2px 1px rgba(0,0,0,1);
}

#gdasitecontent{
    position:relative;
    float:left;
    width: 90%;   /* fallback for browsers without support for calc() i.e. safari < 6 */
    width: calc(100% - 120px);
    text-align: center;
}


.notShown{
    opacity: 0;
}

#gdasitecontent img{
    width:100%;
}

#contents{
    bottom: 0;
    left: 0;
    position: absolute;
    width: 60px;
}

.c_height3{
    height:243px;
}

.c_height2{
    height:196px;
}

.c_height1{
    height:150px;
}


.tray_spacer2{
    margin-top:45px;
}

.tray_spacer1{
    margin-top:45px;
}

.l_traysize{
    width:300px;
    height:45px;
}

.v_traysize{
    width:300px;
    height:45px;
}

.c_traysize{
    width:305px;
    height:45px;
}


.treysizeactive{
    width:45px
}


.trayhidden{
    display: none;
}


.l_tray{
    position:relative;
    float:left;
    margin-bottom: 1px; 
}

.l_icon{
    position:relative;
    float:left;
    height:45px;
    width: 45px;
    background-color:#333333;
    cursor:pointer;
}

.page_icon {
    height: 26px;
    width: 22px;
    margin: 10px 8px 0px 12px;
}

.l_text{
    position:relative;
    float:left;
    background-color:#333333;
    font-weight: bold;
    padding:14px;
    cursor: pointer;
    display:none;
}
/*Close Contents Tray*/



/*Video Tray CSS*/
#v_tray{
    position:relative;
    float:left;
    margin-bottom: 1px; 
}

#v_icon{
    position:relative;
    float:left;
    height:45px;
    width: 45px;
    background-color:#333333;
    cursor:pointer;
}

.video_icon {
    height: 26px;
    width:25px;
    margin: 10px 8px 0px 10px;
}

#v_text{
    position:relative;
    float:left;
    background-color:#333333;
    font-weight: bold;
    padding:14px;
    cursor: pointer;
    display:none;
}
/*Close Video Tray*/


/*Contents Tray*/
#c_tray{
    position:relative;
    float:left;
    /*display:none;*/
}



.c_icon{
    position:relative;
    float:left;
    height:45px;
    width: 45px;
    background-color:#333333;
    cursor:pointer;
}

#c_text{
    position:relative;
    float:left;
    background-color:#333333;
    font-weight: bold;
    padding:14px;
    cursor: pointer;
    display:none;
}

#c_label{
    position:relative;
    float:left;
    width:110px;
    height: 45px;
    text-align:center;
    background-color: #333333;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    margin-left: -33px;
    margin-top: 33px;
}

#c_label p{

    font-weight: bold;
    font-size: 16px;
    margin-top: 12px;
}


.contents_icon{
    height: 26px;
    width:25px;
    margin: 10px 0 0px 11px;
}



#text{
    margin-left:45px;
    background-color:rgba(229, 234, 235, .8);
    margin-top: -12px;
}

#text a{
    color: #47585e;
    text-decoration: underline ;
}

#text a:hover{
    color:rgba(234,33,45,1);
}

/* ogiringal width is set to width:625px; */
.text_3{
    line-height: 25px;
    height:242px;
    width:700px;
    color:#F9C605;
}

.text_2{
    line-height: 22px;
    height:197px;
    width:700px;
    color:#F9C605;
}

.text_1{
    line-height: 19px;
    height:150px;
    width:700px;
    color:#F9C605;
}


.showme{
    display:none;
}

#text p{
    color:#47585E;
    font-weight: bold;
    font-size:12px;
    padding:15px;
}

/*
.active_bg {
    display:none;
}
*/

.bg_img {
    background-image: url("images/background.jpg");
}

.bg_img_m {
    background-image: url("images/background_m.png");
}

#hidden_preload{
    display:none;
}

/*Navigation button CSS*/
#previousbutton{
    float:left;
    position:relative;
    clear:both;
    width:60px;
    margin-top:15%;
    z-index:1;
}


.gotoprevious {
    width:60px;
    height:60px;
    display: inline-block;
    -webkit-transition:  opacity 0.9s;
    -moz-transition:  opacity 0.9s;
    transition: opacity 0.9s;
    opacity: 0.80;
}

.gotoprevious:hover {
    -webkit-transform: scale(1.10);
    -moz-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    opacity:1.00;
    cursor: pointer;
}


#nextbutton{
    float:right;
    position:relative;
    width:60px;
    margin-top:15%;
    z-index:3;
}

.gotonext {
    width:60px;
    height:60px;
    display: inline-block;
    -webkit-transition:  opacity 0.9s;
    -moz-transition: opacity 0.9s;
    transition:  opacity 0.9s;
    opacity: 0.80;
}

.gotonext:hover {
    -webkit-transform: scale(1.10);
    -moz-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    opacity:1.00;
    cursor: pointer;
}

/*End code for step container*/

ul.gda-container {

}

ul.gda-container li {
    width: 100%;
    height: 100%;
    display: none;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

ul.gda-container li.gda-move {
    pointer-events: none;
    /*  -webkit-transition: -webkit-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;
      -moz-transition: -moz-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;
      -o-transition: -o-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;
      -ms-transition: -ms-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;
      transition: transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;
       -webkit-transition:  opacity 800ms ease;
      -moz-transition:  opacity 800ms ease;
      -o-transition:  opacity 800ms ease;
      -ms-transition:  opacity 800ms ease;
      transition:  opacity 800ms ease;*/
}


.close-btn_ins {
    border: 3px solid #fff;
    position: relative;
    padding: 1px 5px;
    margin:20px 30px 0px 0px;
    background-color: rgba(53,221,217,.8);
    float: right;
    border-radius: 20px;
    cursor:pointer;
}

.close-btn_ins:hover {
    background-color: rgba(53,221,217,1);
}

.close-btn_ins a {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

/*CSS to support the playing of video elements*/
/*Begin video CSS inside blackout div*/
#blackscreen {
    background-color: #000000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: none;
    text-align: center;
    z-index: 61;
}

.close-btn {
    border: 3px solid #fff;
    position: relative;
    padding: 1px 5px;
    margin:20px 30px 0px 0px;
    background-color: rgba(53,221,217,.8);
    float: right;
    border-radius: 20px;
    cursor:pointer;
}

.close-btn:hover {
    background-color: rgba(53,221,217,1);
}

.close-btn a {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#playvideo {
    border: 0 solid #F9C605;
    box-shadow: 0 0 20px #F9C605;
    margin-top:20px;
    width: 1280px;
    height:720px;  
    border: 1px solid #000;
}

.aboutus{
    padding: 5px 15px;
    border-radius: 0 0 50px 50px;
    color:#B0AD20;
    background-color:#333333;
    position:absolute;
    font-weight:bold;
    top:33px;
    right:30px;
    cursor: pointer;
    display:none;
}

.aboutus:hover{
    background-color: saddlebrown;
}


/*@media Code*/
/*Temp CSS to test media transistions*/
#mediatester{
    position:absolute;
    bottom: 0;
    left: 45%;
    background:Black;
    padding:5px;
    /**/display:none;
}

#mediatester a:before{
    content:'No @Media Applied';
    color: white;
}
/*If width < 1280*/

@media  (min-width: 1255px) and (max-width: 1280px)  {

    body {
        background-image: url('images/background.jpg');
    }

    .aboutus{
        font-size: 11px;
        padding: 5px 18px;
    }

    #mediatester{
        background:green;
    }
    #mediatester a:before{
        content:'@ media is 1280x720';
    }

    #menu-title {margin-left: 20px;}

    #menu-logo {margin-right: 10px;}

    #playvideo {
        width: 960px;
        height:540px;        
    }

}

/*Must Adjust length of written title at <1255*/
@media  (min-width: 1024px) and (max-width: 1255px)  {

    body {
        background-image: url('images/background.jpg');
    }


    #mediatester{
        background: Orange ;
    }
    #mediatester a:before{
        content:'@ media <1255 to prevent text overlap in title';
    }

    #gdasitecontent{
        width: 85%;   
        /* fallback for browsers without support for calc() i.e. safari < 6 */
        width: calc(100% - 120px);
    }

    /*
    #menu-title h1 {font-size: 13px;
                    display:none;
    }
    */
    #menu-title {
        margin-left: 10px;
        font-size: 13px;
    }

    /*
    #menu-logo {
        margin-right: 10px;
    }
    */

    #menu-logo{
        position: fixed;
        top: 0px;
        right: 0px;
        margin-top:2px;
        margin-left: 20px;
        margin-right: 5px;
        z-index: 100;
        width:200px;
    }

    #menu-logo img{
        width: 200px;
    }
}



/*When < 1024 do this*/
@media  (min-width: 960px) and (max-width: 1024px)  {
    
    body {
        background-image: url('images/background.jpg');
    }
    
    
    #mediatester{
        background: Yellow;
    }
    #mediatester a:before{
        content:'@ media is 1024x768';
    }

    /* REPLACE:  .howto{   */
    .aboutus{
        font-size: 11px;
        padding: 5px 18px;
    }

    ul#menu li a {font-size: 12px;}

    #menu-title {
        margin-left: 10px;
        font-size: 10px;
    }

    #menu-logo {     
        position: fixed;
        top: 0px;
        right: 0px;
        margin-top:7px;
        margin-left: 20px;
        margin-right: 5px;
        z-index: 100;
        width:150px;
    }

    #menu-logo img { width: 150px;}

    ul#menu li ul.sub-menu { top:26px;}

    ul#menu li a {font-size: 12px;}

    #contact_us {right: 85px;}

    #playvideo {
        margin-top: 150px;
        width: 640px;
        height:360px;        
    }

    /* minimize content */
    #gdasitecontent{
        width: 85%;   /* fallback for browsers without support for calc() i.e. safari < 6 */
        width: calc(100% - 160px);
    }

}


/* On devices where the screen width is up to 960*/

@media  (min-width: 700px) and (max-width: 960px)  {


    /*
    html {
        background-image: image("images/Brick_wall_red.png");
    }
    */

    .aboutus{opacity:0}

    #demoalert{
        display:none;
    }

    #playvideo {
        margin-top: 50px;
        width: 640px;
        height:360px;        
    }

    body {
        font-family:Arial, Helvetica, sans-serif;
        font-size: 14px;
        color:  White;
        overflow-y:  scroll;
        overflow-x: hidden;
        margin:0px;
        /* 
        background-image: image("images/Brick_wall_red.png");
        background-color: #891a3d; 
        */
    }

    a{ 
        color:rgba(71,88,94,1);
        text-decoration: underline ;
    }

    a:hover{
        color:#0093BF;
    }

    .container{
        display:none;
    }


    #menu-title {
        display:none;
    }

    #menu-logo{
        display:none;
    }

    header{
        display:none;
    }

    /* REPLACE: #NSE {  */
    #GDA {
        display:none;
    }

    #m_container{
        display: block;
    }


    #mediatester{
        background:  Fuchsia  ;
    }

    #mediatester a:before{
        content:'@ media is 768x1024';
    }

    #mediatester a:before{
        content:'Mobile Device Display';
    }

    /* minimize content */
    #gdasitecontent{
        width: 85%;   
        /* fallback for browsers without support for calc() i.e. safari < 6 */
        /* width: calc(100% - 100px); */
    }
}

/*Video CSS*/
@media  (min-width: 400px) and (max-width: 700px)  {

    /* REPLACE:  .howto */
    .aboutus{opacity:0}

    body {
        font-family:Arial, Helvetica, sans-serif;
        font-size: 12px;
        color:  White;
        overflow-y:  scroll;
        overflow-x: hidden;
        margin:0px;
        /* 
        background-image: image("images/Brick_wall_red.png");
        background-color: #891a3d; 
        */
    }

    .container{
        display:none;
    }


    #menu-title {
        display:none;
    }

    #menu-logo{
        display:none;
    }

    header{
        display:none;
    }

    #GDA {
        display:none;
    }

    #m_container{
        display: block;
    }


    #playvideo {
        width: 480px;
        height:270px;        
    }
    #m_container figure {
        margin: .6em auto;
    }
    #m_title {
        border-top:1px solid rgba(255,255,255,.5);
    }

}

@media screen and (max-width: 400px)  {

    .aboutus{opacity:0}

    body {
        font-family:Arial, Helvetica, sans-serif;
        font-size: 10px;
        color:  White;
        overflow-y:  scroll;
        overflow-x: hidden;
        margin:0px;
        /* 
        background-image: image("images/Brick_wall_red.png");
        background-color: #891a3d; 
        */
    }

    .container{
        display:none;
    }


    #menu-title {
        display:none;
    }

    #menu-logo{
        display:none;
    }

    header{
        display:none;
    }

    #GDA {
        display:none;
    }

    #m_container{
        display: block;
    }

    #playvideo {
        width: 240px;
        height:135px;        
    }
}