*{

  box-sizing: border-box;
}
body {
    font-family: "Lato", sans-serif;
  }

  .mega  
  {  
   
margin-left: 50px;
 height: 200px;
 width: 200px;

border-style: double;
  border: solid 5px;
  border-color: #000;
  }  


/*logo arrows*/

  .triangle-down {
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 30px solid #555;
    margin-left: 70px;
}




.triangle-up {
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 30px solid #555;
    margin-left: 70px;
}







/*flashing text above  and bottom of logo*/

  .text-div {
    width: 200px;
    margin: auto;
    background-color: rgb(255, 255, 255);
    padding: 8px;
   }

   .flashing {
    color: rgb(40, 42, 179);
    font-size: 20px;
    font-family:monospace;
    font-weight:600 ;
    animation: flashing-style 0.9s linear infinite;
   }
   @keyframes flashing-style {
    0% {
     opacity: 0;
    }
   }

   .one {
    animation: one 1s linear infinite;
   }
   @keyframes one {
    50% {
      opacity: 0;
    }
   }


















/*Sidenav Styling*/
  
  .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;
     }  
   }
   





   
 
   @media (max-width: 576px) { 

    #leftdiv{

margin-left: 30px;


    }
    #rightdiv{

      margin-left: 50px;
   
      
      
          }
        }
          


  

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


  #leftdiv{
  
  width: 300px;
   }
  
  
  
  
   #rightdiv{
    width:900 ;
   }
   }
  
  
  
   .container>.row{
    clear: both}
  
  
  
   
   
   











    
  


    @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(71, 180, 214) ;
  
 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;
        }


      
      }



.mega{
      margin-left: 130px;
      border: none;
      border-style: none;
    
}