body {
    font-family: "Lato", sans-serif;
   
  }
  
/*logo text and arrow*/







/*sidenav*/

  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  #main {
    transition: margin-left .5s;
    padding: 16px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

  


/* Horizintal collapsing menu*/


 
 
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400);
 html {
   font-family: 'Open Sans', sans-serif;
 }
 .wrap {
   margin: 20px auto;
 }
 #nav {
   width: 1230px;
   background: hsl(0,3%,5%);
   font-weight: 600;
   font-size: 13px;
   border-radius: 4px;
 
 }
 #nav ul {
   margin: 0;
   padding: 0;
 }
 #nav ul li, label[for=toggle] {
   display: inline-block;
   cursor: pointer;
   
   color: hsl(0,0%,75%);
   padding:  13px 10px 13px 25px;
   text-transform: uppercase;
   letter-spacing: 1px;
   
 }
 #nav ul li:last-child {
  padding: 13px 25px 13px 25px;
 }
 #nav ul li:hover,
 label[for=toggle]:hover {
   color: hsl(0,0%,90%);
   text-shadow: 0 0 1px #fff; 
 }
 @media only screen 
 and (min-width : 1025px) {
   input[type=checkbox]#toggle,
   label[for=toggle] {
     display: none;
   }
 }
 @media only screen 
 and (max-width : 679px) {
   #nav {
     width: 80%;
   }
   input[type=checkbox]#toggle {
     position: absolute;
     z-index: -9999px;
     top: -9999px;
     left: -9999px;
   }
   i.icon-menu-1 {
     margin: 0 10px 0 0;
   }
   label[for=toggle] {
     width: 90%;
   }
   #menu {
     display: none;
   }
   input[type=checkbox]#toggle:checked ~ #menu {
     display: block;
   }
   input[type=checkbox]#toggle:checked ~ #menu li {
     display: block;
   }
 }
 @media only screen 
 and (min-width : 680px) 
 and (max-width : 702px) {
   #nav {
     width: 80%;
     font-size: 11px;
   }
   input[type=checkbox]#toggle,
   label[for=toggle] {
     display: none;
   }  
 }
 @media only screen 
 and (min-width : 703px) 
 and (max-width : 728px) {
   #nav {
     width: 80%;
     font-size: 12px;
   }
   input[type=checkbox]#toggle,
   label[for=toggle] {
     display: none;
   } 
 }
 @media only screen 
 and (min-width : 728px) 
 and (max-width : 1024px) {
   #nav {
     width: 80%;
     font-size: 13px;
   }
   input[type=checkbox]#toggle,
   label[for=toggle] {
     display: none;
   }  
 }
 









 






























/* changing size of archives div and text div for firefox*/
 @-moz-document url-prefix() {


#leftdiv{

width: 300px;
 }




 #rightdiv{
  width:900 ;
 }
 }



 .container>.row{
  clear: both}


























   
 
   @media (max-width: 576px) { 

    #leftdiv{

margin-left: 30px;


    }
    #rightdiv{

      margin-left: 50px;
   
      
      
          }
        }
          





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

          #leftarrow{
            margin-left: 400px;
          }
          #rightarrow{
            margin-right: 600px;
          }
         }

      
      



/*social media icons*/

         @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

         a, a:hover {
           color: #000;
           text-decoration: none;
       
         }
         
         .socialbtnsbtnsbtns, .socialbtnsbtnsbtns ul, .socialbtnsbtnsbtns li {
           margin: 0;
           padding:3px;
         }
         
         .socialbtnsbtnsbtns li {
             list-style: none outside none;
             display: inline-block;
         }
         
         .socialbtns li {
             list-style: none outside none;
             display: inline-block;
         }
         
         .socialbtns .fa {
           color: #FFF;
           text-shadow: 1px 1px 0px #000,
               1px -1px 0px #000,
               -1px 1px 0px #000,
               -1px -1px 0px #000;
           -webkit-text-shadow: 1px 1px 0px #000,
               1px -1px 0px #000,
               -1px 1px 0px #000,
               -1px -1px 0px #000;
           -moz-text-shadow: 1px 1px 0px #000,
               1px -1px 0px #000,
               -1px 1px 0px #000,
               -1px -1px 0px #000;
           -o-text-shadow: 1px 1px 0px #000,
               1px -1px 0px #000,
               -1px 1px 0px #000,
               -1px -1px 0px #000;
           transition: all ease-out 0.5s;
           -moz-transition: all ease-out 0.5s;
           -webkit-transition: all ease-out 0.5s;
           -o-transition: all ease-out 0.5s;
         }
         
         .socialbtns .fa:hover {
           color: #000;
           text-shadow: 1px 1px 0px #fff,
               1px -1px 0px #fff,
               -1px 1px 0px #fff,
               -1px -1px 0px #fff;
           -webkit-text-shadow: 1px 1px 0px #fff,
               1px -1px 0px #fff,
               -1px 1px 0px #fff,
               -1px -1px 0px #fff;
           -moz-text-shadow: 1px 1px 0px #fff,
               1px -1px 0px #fff,
               -1px 1px 0px #fff,
               -1px -1px 0px #fff;
           -o-text-shadow: 1px 1px 0px #fff,
               1px -1px 0px #fff,
               -1px 1px 0px #fff,
               -1px -1px 0px #fff;
           transition: all ease 0.5s;
           -moz-transition: all ease-in 0.5s;
           -webkit-transition: all ease-in 0.5s;
           -o-transition: all ease-in 0.5s;
         }
         



         







        
          @media (max-width: 576px) { 
          .col-sm-8 .innerdiv{
       width:  300px;
      
margin-left: 50px;
margin-top: 90px;
height: fit-content;
overflow: hidden;
ul.a {list-style-type: square;}

        }

      }




 
      @media (max-width: 576px) and (max-with:740px) { 
        .col-sm-8 .innerdiv{
     width:  300px;
    
margin-left: 50px;
margin-top: 90px;
height: fit-content;
overflow: hidden;
ul.a {list-style-type: square;}

      }

    }







     


      
      
      .innerdiv{
      
      width: 500px; height: 100% ; background-color: rgb(32, 123, 153) ;
      
     border:1px solid;
     box-shadow: rgba(0, 0, 0, 0.4) 5px 5px, rgba(44, 43, 44, 0.3) 10px 10px, rgba(105, 78, 95, 0.2) 15px 15px, rgba(105, 91, 100, 0.1) 20px 20px, rgba(71, 63, 68, 0.05) 25px 25px;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
      
  margin-top: 100px;

          }
     
     
          ul.a {list-style-type: square;}

         








          
          @-moz-document url-prefix() {


            .innerdiv{
              margin-left: 90px;
            }


          
          }
 
          


       .topline{
text-decoration: underline;
            text-align: center; 
            color: blue; 
            text-decoration-style:double;
          }













          .myalerti {
            padding: 20px;
            background-color: #f44336;
            color: white;
            width: 1200px;
            opacity: 1;
            transition: opacity 0.6s;
            margin-bottom: 15px;
            height :80px;
        margin-left: 80px;
          
          }
          
          
          .closingbtn {
            margin-left: 15px;
            color: white;
            font-weight: bold;
            float: right;
            font-size: 22px;
            line-height: 20px;
            cursor: pointer;
            transition: 0.3s;
          }
          
          .closingbtn:hover {
            color: black;
          }










          @media (max-width: 576px) { 
        
        

            .myalerti {
              padding: 20px;
              background-color: #f44336;
              color: white;
              opacity: 1;
              transition: opacity 0.6s;
              margin-bottom: 15px;
            width: 300px;
            margin-left: 50px;
            }
            
            
            .closingbtn {
              margin-left: 15px;
              color: white;
              font-weight: bold;
              float: right;
              font-size: 22px;
              line-height: 20px;
              cursor: pointer;
              transition: 0.3s;
            }
            
            .closingbtn:hover {
              color: black;
            }
  
  
  
          }
  
      






/**