/* Responsive */

@media screen and (max-width : 760px){
       
       body{
            overflow-x:hidden;
       }
       
       header {
            visibility: visible;
            background-color: #000000;
            opacity: 0.4;
            padding: 10px;
            text-decoration: none;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1;
            -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
            box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
        }
            
       #content{
            position: relative;
            width: 100%;
            margin-left: 0;
            height: 100%;
       }
       
       #container{
            margin: 0;
            width: 100;
       }
       
       .heading{
            text-align:center;
            font-size:1.3em;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
       }
       
       .columns {
            display:block;
            width: 95%;
       }
         
       .columns img{
            display:block;
            margin-left:auto;
            margin-right:auto;
            width: 80%;
            height: 80%
       }  
             
       div.transbox {
            position: absolute;
            z-index: 0   ;
            width: 99%;
            height: 170px;
            margin-top: 0px;
            margin-left: 0;
            background-color: #000000;
            border: 1px solid white;
            opacity: 0.4;
            
      }


    
       


       
       
       #menu {
       
        visibility:visible;
    border: 1px solid #ffffff;
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
    display: block;
    height: 24px;
    padding: 3px 4px 3px;
    position: relative;
    width: 25px;
     background-color: #000000;
    opacity: 0.4;
    float: left;
    
}
header #page{

       color: #ffffff;
       display: inline;
       float: left;
       margin-left: 1em;
       margin-top: 7px;
       text-transform: uppercase;     

 }
 

#menu div {
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 2px 2px 2px 2px;
    height: 2px;
    margin-top: 3px;
    width: 90%;
}



nav {
    opacity: 0;
    left: 0px;
    top: 0px;
    position: fixed;
    z-index: -1;
    width: 70%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #000000;
    border: 1px solid white;
    
    margin-left: 0;
    
    
}

div.transbox p {
visibility: hidden;
    font-size: 2em;
    margin-left: 0;
    margin-top: 0;
    opacity: 1;
   
    font-weight: bold;
    color: white;
}

img.logo {
    
       z-index: 1;
       display:block;
     margin-left: auto;
     margin-right: auto;
     margin-top:55px;
}

nav ul {
    list-style-type: none;
    color: white;
    font-size: 1.5em;
    margin-top: 1em;
    width:99%
  

}


nav li {

    float: left;
    background-color: #FFFFFF;
    text-align: center;
    width:99%;
     border-top: 1px solid white;
    border-bottom: 1px solid white;
}



nav a {
   

    display: block;
    margin-left: auto;
     margin-right: auto;
    text-decoration:none;
    color: black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #FFFFFF;
    width:99%;
    

}


nav a:link {
    color: #000000;
}


nav a:active {
    color: #0000FF;
    text-decoration:none;
    color: #FFFFFF;
    background-color: #000000;
}

nav a:hover {
    text-decoration:none;
    color: #FFFFFF;
    background-color: #000000;

}

li.menuSpace{
             visibility:hidden;
    width: 0;
}
  

div.transboxbottom {

    float:left;
    width: 99%;
    height: 2em;
    margin-top: 30px;
    margin-bottom: 25px;
    margin-left:0;
    background-color: #000000;
    border: 1px solid white;



    opacity: 0.4;
   
}     

#contentLayer {
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    z-index: 5;
}


.columnLeft{
         width: 100%;
         
         

         }

.columnRight{
         width: 100%;
         
         
         }

.left{

        width: 100%;
        
          display: block;
          margin-left: auto;
         margin-right: auto;
         text-align:justify;
}

.right{
      width: 100%;
        
          display: block;
            
          margin-left: auto;
         margin-right: auto;
         text-align:justify;
}


 }