body {
  font-size:16px;
}
h1 {
  font-size:80px;
  color:#555555;
}
h2 {
  font-size:40px;
  color:#555555;
}
.top {
  height:68px;
  padding-top:20px;
  line-height:50px;
  overflow:hidden;
  font-size:15px;
}
.w3schools-logo {
    font-family:fontawesome;
    text-decoration:none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size:37px;
	letter-spacing:3px;
	color:#555555;
	display:block;
	position:absolute;
	top:17px;
	padding-left:2px;
}
.w3schools-logo .dotcom {
    color:#4CAF50;
}
.w3schools-logo:hover {
    color:#555555;
}

.w3-topnav {
  padding:0 10px;
}
.w3-topnav a{
  float:left;
  letter-spacing:4px;
  font-size:17px;
  line-height:71px;
}
.w3-topnav a:hover {
  background-color:white;
  color:#4CAF50;
}
.topnavlinks {
  width:auto;
  float:right;
}
a.topnav-localicons {
  font-size:20px !important;
}
a.topnav-icons {
  font-size:20px;
}
#menubtn {
  float:left;
  font-size:16px;
}
.w3-sidenav {
  overflow:hidden;
  position:absolute !important;
  display:none;
  background-color:transparent;
}
.w3-sidenav a {
  padding:0 20px;
  color:#555555;
}
.w3-sidenav h2 {
  font-size:20px;
  padding-left:20px;
  color:#000000;
}
.w3-dropnav {
  display:none;
  padding-bottom:40px;
}
.w3-dropnav h3 {
  padding-top:20px;
}
.w3-closebtn {
  padding:10px 20px !important;
  position:absolute;
  right:0;
}
#nav_menu-xs {
  background-color:#f1f1f1;
  text-align:center;
}
#nav_menu-xs a {
  color:#000000;
  margin:10px;
  display:block;
  font-size:16px;
  letter-spacing:4px;
  color:inherit;
  text-decoration:none;
}
#nav_menu-xs .w3-closebtn {
  margin:0;
}
.w3-closebtn:hover {
  background-color:#cccccc;
}
#sectionxs_tutorials, #sectionxs_references, #sectionxs_examples {
  background-color:#ffffff;
}
#sectionxs_tutorials .w3-closebtn, #sectionxs_references .w3-closebtn, #sectionxs_examples .w3-closebtn {
  display:none;
}
#sectionxs_tutorials a, #sectionxs_references a, #sectionxs_examples a {
  letter-spacing:normal;
}
#nav_translate, #nav_search {
  display:none;
}
#nav_translate a {
  display:inline;
}
#googleSearch {
  color:#000000;
}
.searchdiv {
  max-width:400px;
  margin:auto;
  text-align:left;
  font-size:16px;
}
div.cse .gsc-control-cse, div.gsc-control-cse {
  background-color:transparent;
  border:none;
  padding:0px;
  margin:0px;
}
td.gsc-search-button input.gsc-search-button {
  background-color:#555555;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button {
  box-sizing:content-box;
  line-height:normal;
}
.gsc-tabsArea div {
  overflow:visible; 
}
.gsst_a .gscb_a {
  margin-top:3px;
}
.section{
  padding:4%;
}
.section p {
  color:#555555;
  font-size:30px;
	margin:0 0 10px !important;
}
.w3-code {
  padding:12px 16px;
  border-left:4px solid #4CAF50 !important;
}
.sectionbtn {
  background-color:#555555;
  margin:10px 5px 5px 5px;
}
.section.onethird p {
  font-size:20px;
}
.section.onethird .w3-card-2 {
  padding:15px 10px;
  height:260px;
}
footer a {
  text-decoration:none;
}
.about {
  text-align:center;
  margin:20px auto auto auto;
  font-size:14px;
  letter-spacing:4px;
  word-spacing: 10px;
  color:#555555;
}
#fblikeframe {
  display:none;
}
#popupframe {
  position:fixed;
  height:100%;
  width:100%;
  top:0;
  left:0;
  background-color:#000000;
  opacity:0.5;
  z-index:999;
}
#popupDIV {
  position:fixed;
  height:40%;
  width:40%;
  min-width:310px;
  min-height:250px;
  top:30%;
  left:30%;
  background-color:#ffffff;
  z-index:9999;
}
@font-face {
font-family: 'fontawesome';
src:url('lib/fonts/fontawesome8deb.eot?14663396');
src:url('lib/fonts/fontawesome8deb.eot?14663396#iefix') format('embedded-opentype'),
    url('lib/fonts/fontawesome8deb.woff?14663396') format('woff'),
    url('lib/fonts/fontawesome8deb.ttf?14663396') format('truetype'),
    url('lib/fonts/fontawesome8deb.svg?14663396#fontawesome') format('svg');
font-weight:normal;
font-style:normal;
}
.fa {
  display:inline-block;
  font:normal normal normal 14px/1 FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transform:translate(0,0);
}
.fa-2x {
  font-size:2em;
}
.fa-home:before {content: '\e800'; }
.fa-globe:before {content: '\e801'; }
.fa-search:before {content: '\e802'; }
.fa-thumbs-o-up:before {content: '\e803'; }
.fa-left-open:before {content: '\e804'; }
.fa-right-open:before {content: '\e805'; }
.fa-facebook-square:before { content: '\e806'; }
.fa-google-plus-square:before { content: '\e807'; }
.fa-twitter-square:before { content: '\e808'; }
.fa-caret-down:before { content: '\e809'; }
.fa-caret-up:before { content: '\e80a'; }

@media only screen and (min-width :1100px) {
  #main {
    margin-left:230px;
  }
  #sidemenu {
    width:230px;
    display:block;
  }
}
@media only screen and (min-width :992px) {
  .about {
    text-align:right;
    margin:auto;
  }
  .css-hide-when-large {
      display:none;
  }  
}
@media only screen and (max-width :991px) {
  .topsection {
    text-align:center;
  }
  .topsection img, .topsection div {
    float:none;
    margin:auto;
  }
  .top {
    height:100px;
  }
  .top img {
    display:block;
    margin:auto;
  }
  .top .w3schools-logo {
    position:relative;
    top:0;
    width:100%;
    text-align:center;
    margin:auto;
  }  
  .toptext {
    width:100%;
    text-align:center;
  }
  .css-hide-when-small {
    display:none;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    font-size:50px;
  }
  .section p {
    font-size:18px;
  }
  .sectionexample {
    display:none !important;
  }
  .section {
    padding:0 0 30px 0;
  }
  .onethird {
    padding:30px;
  }
  #navbtn_tutorials, #navbtn_references, #navbtn_examples {
    display:none !important;
  }
  #menubtn {
    background-repeat:repeat-x !important;/*To test for devices less than 768px*/
  }
  .w3-sidenav {
    display:none !important;
  }
  #main {
    margin-left:0% !important;
  }
}
@media screen and (min-width: 769px) {
  #nav_menu-xs {
    display:none !important;
  }
}
@media screen and (max-width:600px) {
  .top {
    height:68px;
  }
  .toptext {
    display:none;
  }
  .w3-dropnav .w3-col {
    height:auto;
  }
}
.w3-theme {
  color:#fff !important;
  background-color:#4CAF50 !important;
}