/* W3Schools Font Logo */
.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:#555;display:block;position:relative}
.w3schools-logo .dotcom{color:#4caf50;font-family:'Source Sans Pro',sans-serif}
@font-face{font-family:fontawesome;src:url(../lib/fonts/fontawesome.eot?14663396#iefix) format('embedded-opentype'),url(../lib/fonts/fontawesome.woff?14663396) format('woff'),url(../lib/fonts/fontawesome.ttf?14663396) format('truetype'),url(../lib/fonts/fontawesome.svg?14663396#fontawesome) format('svg');font-style:normal}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:20px;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0,0)}

.fa-home:before {content:'\e800';}
.fa-menu:before {content: '\f0c9';}
.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-caret-down:before {content:'\e809';}
.fa-caret-up:before {content:'\e80a';}
.fa-user:before { content: '\e816'; }
.fa-js:before { content: '\e819'; }
.fa-python:before { content: '\e81a'; }
.fa-php:before { content: '\e81b'; }
.fa-bootstrap:before { content: '\e81c'; }
.fa-html5:before { content: '\f13b'; }
.fa-css3:before { content: '\f13c'; }

a {font-family:"Segoe UI",Arial,sans-serif;text-decoration:none;}

/* Customize w3schools23.css */
#nav_tutorials,
#nav_references,
#nav_exercises {
  margin-top: 0;
}

@media screen and (min-width: 769px) {
  .w3-bar-block .w3-button {
    padding: 0 16px !important;
  }
}

.fa{font-size:20px}
#main{padding:0;border-right:none}
.fa-thumbs-o-up:hover{color:#fff}

@media (min-width:1675px) {
  #main {
    width: auto;
  }
}

#nav_exercises,#nav_references,#nav_tutorials{display:none;padding-bottom:40px;position:absolute;width:100%;z-index:5!important}
#nav_exercises h3,#nav_references h3,#nav_tutorials h3,#sectionxs_exercises h3,#sectionxs_references h3,#sectionxs_tutorials h3{padding-left:6px;color:#fff4a3}
div.cse .gsc-control-cse,div.gsc-control-cse{padding:0;margin-top:0}


/* Customize W3.CSS */
.w3-col.l4 .w3-card-2{padding:15px 10px;height:260px}
.w3-bar{position:relative;z-index:4;font-size:18px;background-color:#fff;color:#282a35}
h1,h2,h3,h4,h5,h6{font-family:'Source Sans Pro',sans-serif}
h1{font-size:80px;margin:2px 0 -20px 0!important}
.learn h1{margin:10px 0!important}
.green-border{border-left:4px solid #04aa6d}
.w3-round,.w3-round-medium{border-radius:5px}
.tryit-button{background-color:#04aa6d;color:#fff;border-radius:25px;font-size:18px;width:200px}
.tut-button{background-color:#04aa6d;color:#fff;font-size:18px;margin:auto;display:block;width:200px;border-radius:25px}
.w3csstut{height:390px}
#getdiploma a:hover,.exercise-button:hover,.tryit-button:hover,.tut-button:hover{background-color:#059862!important;color:#fff!important}
.bar-item-hover:hover{background-color:#04aa6d!important;color:#fff!important}
.bar-icon-hover:hover,.fa-logo:hover{background-color:#fff!important;color:#059862!important}
.mystyle,.mystyle:hover{background-color:#282a35!important;color:#fff!important}
.closenav_span:hover{background-color:#282a35!important;color:#059862!important}
.ref-button{background-color:#fff;font-size:18px;margin:auto;display:block;width:200px;border-radius:25px;color:#000}
.ref-button:hover{background-color:#e7e9eb!important;color:#000}
.black-color{background-color:#282a35;color:#fff}
.black-color:hover{background-color:#000!important;color:#fff!important}
.grey-color{background-color:#e7e9eb;color:#000}
.exercise-button{padding:70px 50px;font-size:35px;width:87%;opacity:.97}
#w3loginbtn{width:130px;background-color:#04aa6d;color:#fff;border-radius:25px;font-size:18px;line-height:1.5;display:none}
#loginactioncontainer{margin-left:50px}

@media screen and (min-width:601px){#navbtn_menu{display:block}
}
@media screen and (max-width:430px){#w3loginbtn{width:90px;line-height:2;font-size:14px}
#loginactioncontainer{width:70px;margin-left:16px}
}
@media screen and (min-width:861px){#myAccordion,#navbtn_menu,.hidesm{display:none!important}
}
@media screen and (max-width:430px){#nav_search_btn,#nav_translate_btn,#navbtn_menu{padding:8px 8px}
}
@media screen and (max-width:860px){.barex,.navex{display:none!important}
#googleSearch,#google_translate_element{top:75px;width:100%!important;right:0!important;padding-top:19px!important}
}
@media screen and (max-width:768px){.w3-jumbo,h1{font-size:60px!important}
}
@media screen and (max-width:380px){div.cse .gsc-control-cse,div.gsc-control-cse{padding:0;margin-top:-4px}
}


#w3_cert_badge{position:absolute;right:5%;width:220px;transform:rotate(10deg);bottom:-15%}
#w3_cert_arrow{position:absolute;right:240px;width:220px;transform:rotate(10deg);bottom:0;z-index:1}
#howto_padding{padding:48px 24px 100px 24px}
#getdiploma{position:relative;padding:0 60px 50px 60px;margin-bottom:85px;background-color:#282a35;color:#ffc0c7;font-family:'Source Sans Pro',sans-serif}
#getdiploma p{font-size:52px;margin-top:1em;margin-bottom:1em;font-family:'Source Sans Pro',sans-serif}
#getdiploma h2{font-size:62px;margin-top:1em;margin-bottom:1em;font-family:'Source Sans Pro',sans-serif}
#getdiploma a{border-radius:50px;font-size:18px;background-color:#04aa6d;padding:17px 55px}

@media screen and (max-width:680px){#w3_cert_badge{width:150px;right:2%}
}
@media screen and (max-width:1155px){#w3_cert_arrow{display:none}
}
@media screen and (max-width:992px){#w3_cert_arrow{display:block}
.w3csstut{height:auto}
}
@media screen and (min-width:1844px){#w3_cert_badge{width:190px;right:2%}
#w3_cert_arrow{right:169px}
}
@media screen and (max-width:800px){#w3_cert_arrow{display:none}
#getdiploma h2{font-size:55px}
}


@media screen and (max-width:600px){#w3_cert_badge{top:-35px;right:10px;width:100px}
#howto_padding{padding:2px 24px 90px 24px}
}
@media screen and (max-width:500px){#getdiploma p{font-size:40px}
#getdiploma a{width:100%}
}

.tutbuttons a{text-decoration:none}
.tutbuttons a div{opacity:.9}
.tutbuttons a:hover div{opacity:1}
.ribbon-vid{width:60px;font-size:14px;padding:5px;position:absolute;left:-20px;top:-10px;text-align:center;color:#000;border-radius:25px;-ms-transform:rotate(-20deg);transform:rotate(-20deg)}
.ws-yellow-hover:hover{background-color:#fff080!important;color:#000!important}
.ribbon-topnav{font-size:11px;font-weight:700;padding:3px 10px;margin-left:3px;text-align:center;color:#000;border-radius:25px;border:1px solid #000;position:relative;top:-2px;background-color:#fff}
#google_translate_element{z-index:7!important}


@media screen and (max-width:860px){.ws-hide-860{display:none!important}
}
@media screen and (max-width:1080px){.ws-hide-1080{display:none!important}
}
@media screen and (max-width:1200px){.ws-hide-1200{display:none!important}
}

#howto_iframe{width:100%;border:6px solid #e3e6e8;height:400px;border-bottom-left-radius:4px;border-bottom-right-radius:4px}
.vl-howto{border-left:50px solid #282a35;height:80px;position:absolute;top:-6px;left:50%;margin-left:-25px}
.vl-howtobtn{width:50%;margin-top:73px}


@media screen and (max-width:1200px){.ws-hide-1200{display:none!important}
}
@media screen and (max-width:900px){#howto_iframe{height:360px}
}
@media screen and (max-width:800px){#howto_iframe{height:320px}
}
@media screen and (max-width:700px){#howto_iframe{height:280px}
.codeeditorbr-input{margin-left:15px}
.vl-howto{height:45px}
.vl-howtobtn{margin-top:37px}
}
@media screen and (max-width:584px){#howto_iframe{height:245px}
}
@media screen and (max-width:500px){#howto_iframe{height:215px}
}
@media screen and (max-width:450px){#howto_iframe{height:203px}
}

.codeeditorbr-container{border-top-left-radius:4px;border-top-right-radius:4px}
.codeeditorbr-row{padding:10px;background:#f1f1f1;border-top-left-radius:4px;border-top-right-radius:4px}
.codeeditorbr-column{float:left}
.codeeditorbr-left{width:20%}
.codeeditorbr-middle{width:80%}
@media screen and (max-width:800px){.codeeditorbr-left{width:24%}
.codeeditorbr-middle{width:76%}
}
.codeeditorbr-row:after{content:"";display:table;clear:both}
.codeeditorbr-dot{margin-top:5px;height:15px;width:15px;background-color:#bbb;border-radius:50%;display:inline-block;margin-left:3px}
.codeeditorbr-input{width:80%;border-radius:3px;border:none;background-color:#fff;margin-top:-8px;height:22px;color:#666;font-size:14px;padding:5px}
.hover-yellow:hover{background-color:#fff080!important;color:#000!important}
.codeeditorbr-tablink{font-size:17px;font-family:'Source Sans Pro',sans-serif;border:none;display:inline-block;padding:6px 18px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;text-align:center;cursor:pointer;white-space:nowrap;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff}
.codeeditorbr-tablink:hover{background-color:#e7e9eb!important}
.hover-yellow:hover{background-color:#fff080!important;color:#000!important}
#bgcodeimg{background:#282a35 url(/w3images/w3codes.png) no-repeat fixed center}
form.example{position:relative}
form.example input[type=text]{padding:10px;font-size:17px;border:1px solid #282a35;border-radius:25px;float:left;width:80%;padding-left:25px;background:#fff;border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;border-right:1px solid #04aa6d;outline:0}
form.example button{border-radius:25px;float:left;width:20%;padding:10px;background:#04aa6d;color:#fff;font-size:17px;border:1px solid #282a35;border-left:none;cursor:pointer;border-top-left-radius:0;border-bottom-left-radius:0}
form.example button:hover{background:#059862;color:#fff}
form.example::after{content:"";clear:both;display:table}
#listofsearchresults{display:none;position:absolute;background-color:#282a35;background-color:#fff;color:#000;width:80%;top:47px;border-left:1px solid #282a35;border-right:1px solid #282a35;border-bottom:1px solid #282a35;text-align:left}
#listofsearchresults a{background-color:#e2e3e9;background-color:#fff;color:#777;text-decoration:none;display:block;padding:10px 30px;width:100%;opacity:.95}
#listofsearchresults a:hover{color:#000;opacity:1}
.span_search{background-color:#ffecee}
.search_active{background-color:#ffecee!important;color:#000!important}
.search_active .span_search{background-color:#ffccd1}
.learntocodeh1{font-size:70px;font-weight:700}
.learntocodeh3{color:#ffc0c7;font-weight:700;margin-top:30px!important;font-size:23px}
.learntocodecontent{padding-left:90px;padding-right:90px}
@media screen and (max-width:600px){.learntocodeh1{font-size:50px!important}
.learntocodeh3{font-size:21px!important}
.learntocodecontent{padding-left:35px;padding-right:35px}
form.example button,form.example input[type=text]{font-size:16px}
form.example input[type=text]{padding-left:16px}
}


/* 2022-09-27 Customize W3.CSS */
.w3-col.l4 .w3-card-2 {
padding:15px 10px;
height:220px;
}

.w3-sidebar {
z-index:3;
width:230px;
overflow:hidden !important;
/*position:absolute !important;*/
margin-bottom:-155px;
}
.w3-sidebar .w3-bar-block .w3-bar-item{
padding:0 16px;
font-size:15px; 
}

.w3-wide {
font-family:"Segoe UI",Arial,sans-serif;
}

ul.nav-sidebar{margin:0;margin-top:5px;padding:5px 0;border:0px solid #eee;list-style-type:none}
ul.nav-sidebar li a{display:block;cursor:pointer;padding:5px 10px;font-weight:400;text-decoration:none;color:#343437}
ul.nav-sidebar li.active a:hover,ul.nav-sidebar li a:hover{color:#fff;background-color:#db4800}
ul.nav-sidebar li.active a{background-color:#f2f2f2}

@media screen and (min-width:769px){.w3-sidebar.w3-collapse{display:block !important;}}
@media screen and (min-width:769px){.w3-main{margin-left:230px !important;}.w3-bar-block .w3-button{padding:0;}}
@media screen and (max-width:768px){.w3-sidebar.w3-collapse,.barex,.navex{display:none !important;}.w3-bar-block .w3-bar-item{text-align:center !important;padding:2px 0;}h1,.w3-jumbo{font-size:60px !important;}}
@media screen and (max-width:380px){.getcert{position:absolute;text-align:center;left:50%;bottom:50%;font-size:13px;}}
@media only screen and (max-device-width: 1366px){.w3-hide-device{display:none;}}
@media screen and (max-width:1080px){#cert_navbtn{display:none;}}