/* Top Navbar */

.page-topnav{
padding: 0px 0px 0px 0px;
background-color: white;
position: fixed;
width: 100%;
left:0;
z-index: 1;
}
.page-topnav p{
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
margin-left:20px;
margin-right: 20px;
}
.page-topnav a{
font-size: 17px;
margin-top: 10px;
margin-bottom: 10px;
margin-left:10px;
margin-right: 10px;
text-decoration: none;
padding: 7px 7px 7px 7px;
color:white;
font-family: 'Lato', sans-serif;
}


#logo a{
border-bottom:0;
margin-left:0px;
}

#topnav-content{
background-color:#2F87D0;
padding-top:15px;
padding-bottom:15px;
}

#topnav-content a:hover{
    font-size: 17px;
    background-color: #2e86de;
}

/* Side Navigation */

.sidenav_head{
padding: 10px 0px 2px 10px;
font-size:18px;
}

#sidenav{
  border-right:1px solid #dadce0;
  background-color:#fff;
  position:fixed;
  height:100%;
  overflow-y: auto;
  left:0;
  bottom:0;
  top:110px;
  padding: 0px 0px 150px 0px;
}

#sidenav a{
text-decoration: none;
}

#sidenav li{
list-style-type: none;
}

#sidenav li a p{
text-decoration:none;
font-family: 'Lato', sans-serif;
font-size:17px;
color:#72777c;
padding: 10px 0px 10px 10px;
margin-bottom: 1px;
}

#sidenav div li a p{
color: #5f6368;
font-size:14px;
padding: 8px 0px 8px 36px;
font-family: 'Open Sans', sans-serif;

}

#sidenav li:hover {
background-color: #f5f5f5;
}

#sidenav a p:hover{
color: black;
}

.code-highlight{
background-color:#f5f7f8;
overflow:auto;
}

.code-highlight-1{
  background-color:#f5f7f8;
  overflow:auto;
  padding: 0px 0px 10px 10px;
}



/* Main Content */
h1,h2,h3,h4{
  font-family: 'Open Sans', sans-serif;
  display: block;
}
h2::first-letter {
  text-transform: uppercase;
}
h1::first-letter {
  text-transform: uppercase;
}
h1,h2,h3{
  color: #337AB7;
}
h1{
  font-size: 32px;
  padding-bottom: 14px;
}
h2{
  font-size: 24px;
  padding-bottom: 12px;
}
h4{
   color: #202124;
   padding-top: 10px;
   padding-bottom: 10px;
   font-weight: 600;
}
p{
  font-size: 16px;
  color: #161616;
  /* color: #5f6368; */
}
 hr{
  border-top: 1px solid #eee;
}
.btnstyle
{
    background-color: #428BCA;
    color: #fff!important;
}
.bttn{
  color: #212121 !important;
  background-color: #e0e0e0 !important;
  text-transform: uppercase;
}

#next{
  display: none;
}
#prev{
  display: none;
}
a:hover{
  font-size: 18px;
}
.button {
  border-radius: 5px;
  background-color: #428BCA;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 12px;
  width: 135px;
  transition: all 0.5s;
  cursor: pointer;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.button-prev {
  border-radius: 5px;
  background-color: #428BCA;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 12px;
  width: 135px;
  transition: all 0.5s;
  cursor: pointer;
}

.button-prev span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button-prev span:after {
  content: '\00ab';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button-prev:hover span {
  padding-right: 25px;
}

.button-prev:hover span:after {
  opacity: 1;
  right: 0;
}

.why{
  background-color:#c0eaf7;
  border-left: 5px solid #337AB7;
  padding: 10px 2px 2px 10px;
}

.note{
  border-left: 5px solid #706941;
  background-color: #FAEFB8;
  padding: 10px 2px 2px 10px;
}

.imagestyle{
    padding:10px 10px 10px 10px;
}

.code{
  padding:10px 10px 10px 10px;
  border:2px solid #337AB7;
}

pre{
  background-color:white;
  font-size:16px;
  border-color:#fff;
  font-family: 'Source Code Pro', monospace;
}

#footer{
  padding:25px 25px 25px 30px;
  width: 100%;
}

#footer p{
    color:#5f6368;
    font-size:14px;
    font-family: 'Open Sans', sans-serif;
}

#footer p a{
  color:#202124;
  font-size:14px;
  text-decoration:none;
}

.footer-background{
   background-color:#f1f3f4;
}


.menu {
 padding: 25px 25px 25px 25px;
 height:300px;
 margin-right: 0px;
 margin-left: 0px;
 display: none;
 position: absolute;
 background-color: #fff;
 width: 100%;
 overflow-y: auto;
 left: 0;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
}

.menu a{
 font-size: 16px;
 color: #202124;
 text-decoration: none;
 margin-top: 5px;
 margin-bottom: 5px;
 margin: 0;
 text-align: center;
 padding: 5px 0px 5px 0px !important;
 font-family: 'Open Sans', sans-serif;
}

.menu a:hover{
 background-color: #f5f5f5;
 border: 0;
}

.menu h4{
 text-transform: uppercase;
 color: #2F87D0;
 padding-bottom: 0px;
 padding-top: 0px;
}

#content{
 top:115px;
}

#content p{
 font-family: 'Open Sans', sans-serif;
 font-size: 16px;
}

#content a{
  color : green;
  font-size: 16px;
  text-decoration: none;
}

#content a:hover{
  color : #2F87D0;
}

#rightDiv{
 padding:10px 10px 10px 10px;
 top:110px;
 text-align: center;
}

#ad-and-footer{
 margin-top:110px;
}
.sideads{
 display: none;
 background-color:#fff;
 padding:5px 0px 5px 0px;
 height:610px;
 margin-top:5px;
}
.glyphicon-remove{
   position:absolute;
   top:0;
   right:0;
   font-size:20px;
   padding: 10px 10px 10px 10px;
}

.glyphicon-remove:hover{
   font-size: 24px;
}
#try-it img{
  position: absolute;;
  float: left;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.algo{
  padding: 10px 10px 10px 10px;
  background-color: #f5f5f5;
}

@media only screen and (min-width: 992px) {
  #sidenav{
    display: block !important;
  }
  #sidenav .glyphicon-remove{
    display: none !important;
  }
}

@media only screen and (max-width: 600px) {
  .menu {
    height: 600px !important;
  }
  .code{
    padding:5px 0px 5px 0px;
    border:0;
  }
  #try-it img{
    position: absolute;;
    float: left;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .well{
    padding: 0;
    background-color: #fff;
    border: 0;
    box-shadow: inset 0 1px 1px white;
  }
 #topnav-content a:hover{
    font-size: 15px;
    background-color: #2e86de;
}
}

@media only screen and (max-width: 992px) {
  .menu {
    height: 600px;
  }
 #mobile-menu{
   display: block;
 }
 #sidenav{
   z-index: 1;
   width: 100%;
   display: none ;
 }
 #sidenav .glyphicon-remove{
   display: inline !important;
 }
 .page-topnav a{
   font-size: 15px;
 }
 #topnav-content a:hover{
    font-size: 15px;
    background-color: #2e86de;
}
 #content p{
   font-size: 14px;
 }
 pre{
   font-size: 14px;
 }
 .page-topnav a{
   margin-left:10px;
   margin-right: 10px;
   text-transform: uppercase;
 }
 .page-topnav .menu a{
   text-transform: none;
 }
 .glyphicon-menu-hamburger{
   font-size: 18px;
   padding: 0px 10px 0px 10px;
 }
}