@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');*{margin:0;padding:0}body{font-family:"Open Sans";font-weight:400}header{background-color:#285064;color:#fff;font-family:"Open Sans";font-weight:400;font-size:18px;padding:5px 25px;position:fixed;top:0;width:100%;z-index:1}header .header-components{display:table;width:100%}header .header-components>div{display:table-cell;vertical-align:middle}header .header-components .logo a{text-decoration:none}header .header-components .logo img{background-image:url("../img/logo.svg");background-position:left center;background-repeat:no-repeat;background-size:40px 40px;color:transparent;content:'';line-height:normal;padding:20px 22px 20px;vertical-align:middle}header .header-components .project-name{font-family:"Montserrat";font-size:23px;letter-spacing:2px;margin-bottom:auto}header .header-components .project-name a{color:#fff;text-decoration:none}header .header-components nav>ul.header-menu{list-style:none}header .header-components nav>ul.header-menu li{float:left;padding:0 10px;margin:0 10px}header .header-components nav>ul.header-menu li.down-arrow{position:relative}header .header-components nav>ul.header-menu li.down-arrow span{cursor:pointer;padding:10px 15px}header .header-components nav>ul.header-menu li.down-arrow ul.sub-menu{background-color:#17bbb0;border-bottom-left-radius:10px;border-bottom-right-radius:10px;display:none;left:-350px;list-style-type:none;padding:15px 10px;position:absolute;width:450px;top:35px}header .header-components nav>ul.header-menu li.down-arrow ul.sub-menu li{margin:10px}header .header-components nav>ul.header-menu li.down-arrow:hover ul.sub-menu{display:block}header .header-components nav>ul.header-menu li a{color:#fff;cursor:pointer;font-size:15px;text-decoration:none}header .header-components nav>ul.header-menu li a.hamburger-icon{font-family:FontAwesome}header .header-components nav>ul.header-menu li a.hamburger-icon:before{content:'\f0c9'}aside.left-column{float:left;margin-top:70px;margin-bottom:10px;width:15%}aside.left-column div{padding:0 15px 0 25px}aside.left-column div ul{list-style-type:none}aside.left-column div ul li{font-size:12px;margin:5px 0}aside.left-column div ul li a{border-bottom:1px solid #d3d3d3;color:#000;text-decoration:none}aside.left-column div ul li a:hover{border-bottom:1px solid #27ae60}aside.left-column div ul li a.active{color:#26c281}.wrapper article.middle-column div.code-toolbar{font-size:15px}.wrapper article.middle-column div.line-highlight{font-size:15px;padding:0}article.middle-column{float:left;font-size:15px;left:20%;margin-top:70px;margin-bottom:10px;width:55%}article.middle-column>h1,article.middle-column p,article.middle-column div,article.middle-column>figure,article.middle-column form{padding:5px 15px}article.middle-column p,article.middle-column div{font-size:16px;line-height:26px}article.middle-column section{padding:0 15px}article.middle-column section p,article.middle-column section section{padding:0}article.middle-column section figure{padding:10px 15px}article.middle-column .inline{background-color:#ecf0f1;border:1px solid #d3d3d3;border-radius:3px;font-size:11px;padding:1px 3px}article.middle-column div.tabular.prev-next{border-top:2px solid #b2babb;margin-top:15px;text-align:center}article.middle-column div.tabular.prev-next .row .prev,article.middle-column div.tabular.prev-next .row .next{width:45%}article.middle-column div.tabular.prev-next .row .cell.prev{text-align:left}article.middle-column div.tabular.prev-next .row .cell.next{text-align:right}article.middle-column div.tabular.prev-next .row .middle{width:10%}article.middle-column div.tabular.prev-next a{color:#000;font-size:12px;padding:5px 0;text-decoration:none}article.middle-column div.tabular.prev-next a .text{color:#17bbb0;font-weight:600;padding:5px}article.middle-column div.tabular.prev-next a .chapter{margin-left:0}article.middle-column div.tabular.prev-next a .icon{padding:5px 0}article.middle-column div.tabular.prev-next a:hover{border-bottom:1px solid #27ae60}article.middle-column p a,article.middle-column ul li a,article.middle-column .tabular .row .cell a,article.middle-column figure a{border-bottom:1px solid #d3d3d3;color:#505050;text-decoration:none}article.middle-column ul li a{font-size:16px}.sitemap article.middle-column ul li a{font-size:11px}article.middle-column p a:hover,article.middle-column ul li a:hover,article.middle-column .tabular .row .cell a:hover,article.middle-column figure a:hover{border-bottom:1px solid #1abc9c}article.middle-column p.youtube{text-align:center}article.middle-column p.youtube iframe{width:100%}.advertisement{margin-top:10px}article.middle-column .advertisement .medium-rectangle,article.middle-column .advertisement .full-banner,article.middle-column .advertisement .leaderboard{margin:0 auto;text-align:center}article.middle-column .chapters{border-top:1px solid #d3d3d3}article.middle-column .chapters ul{list-style-type:disc;margin:5px 0}article.middle-column .chapters ul li{float:left;font-size:11px;margin-left:25px}article.middle-column .chapters ul li a{border-bottom:1px solid #d3d3d3;color:#000;font-size:10px;text-decoration:none}article.middle-column .chapters ul li a:hover{border-bottom:1px solid #27ae60;color:#000;text-decoration:none}article.middle-column .tabular{display:table;width:100%}article.middle-column .tabular .row{display:table-row;width:100%}article.middle-column .tabular .row .cell{display:table-cell;padding:5px}article.middle-column .tabular .row .cell:first-child{text-align:right}aside.right-column{float:left;left:80%;margin-top:70px;margin-bottom:10px;width:30%}aside.right-column>div{padding:0 0 0}aside.right-column div.social{text-align:center}aside.right-column div.social ul{display:inline-block;list-style-type:none}aside.right-column div.social ul li{color:#fff;cursor:pointer;float:left;vertical-align:middle}aside.right-column .next-prev{padding:10px 30px}aside.right-column .next-prev div.next{border:1px solid #d3d3d3}aside.right-column .next-prev div.next a{color:#000;display:inline-block;font-size:12px;padding:10px 0;text-decoration:none;width:100%}aside.right-column .next-prev div.next .text{background-color:#ecf0f1;padding:10px 0 10px 10px}aside.right-column .next-prev div.next .icon{background-color:#ecf0f1;padding:10px 10px 10px 0}aside.right-column .next-prev div.next .chapter{margin-left:10px}aside.right-column .next-prev div.previous{border:1px solid #d3d3d3;margin-top:10px}aside.right-column .next-prev div.previous a{color:#000;display:inline-block;font-size:12px;padding:10px 0;text-decoration:none;width:100%}aside.right-column .next-prev div.previous .text{background-color:#ecf0f1;padding:10px 10px 10px 0}aside.right-column .next-prev div.previous .icon{background-color:#ecf0f1;padding:10px 0 10px 10px}aside.right-column .next-prev div.previous .chapter{margin-left:10px}aside.right-column .advertisement .half-page,aside.right-column .advertisement .medium-rectangle{margin:0 15px;text-align:center}@keyframes right-slide-open{from{right:-300px}to{right:0}}@-webkit-keyframes right-slide-open{from{right:-300px}to{right:0}}@-moz-keyframes right-slide-open{from{right:-300px}to{right:0}}@-o-keyframes right-slide-open{from{right:-300px}to{right:0}}@-ms-keyframes right-slide-open{from{right:-300px}to{right:0}}@keyframes right-slide-close{from{right:0}to{right:-300px}}@-webkit-keyframes right-slide-close{from{right:0}to{right:-300px}}@-moz-keyframes right-slide-close{from{right:0}to{right:-300px}}@-o-keyframes right-slide-close{from{right:0}to{right:-300px}}@-ms-keyframes right-slide-close{from{right:0}to{right:-300px}}#hamburger-menu.close-hamburger{-moz-animation:right-slide-close .5s;-ms-animation:right-slide-close .5s;-o-animation:right-slide-close .5s;-webkit-animation:right-slide-close .5s;animation:right-slide-close .5s;right:-305px}#hamburger-menu.draw-hamburger{-moz-animation:right-slide-open .5s;-ms-animation:right-slide-open .5s;-o-animation:right-slide-open .5s;-webkit-animation:right-slide-open .5s;animation:right-slide-open .5s;display:block;right:0}#hamburger-menu{background-color:#2980b9;display:none;float:right;font-size:12px;height:100%;overflow:auto;padding:10px 10px 5%;position:fixed;text-align:justify;top:0;width:290px;z-index:1}#hamburger-menu ul{list-style-type:none;padding-left:15px}#hamburger-menu ul li{cursor:pointer;font-family:"Open Sans";font-weight:600;font-size:14px;margin:5px 0;padding:7px 15px;vertical-align:middle}#hamburger-menu ul li a{color:#fff;text-decoration:none}#hamburger-menu a.close-icon{text-decoration:none}#hamburger-menu a.close-icon::before{color:#f1c40f;content:"\f00d";cursor:pointer;font-family:FontAwesome;font-style:normal;font-size:20px;margin-left:90%;position:relative;vertical-align:middle}.hamburger-icons{background-size:25px 25px;content:"";line-height:normal;margin-right:10px;padding:13px 13px 13px;background-position:left center}#hamburger-menu ul li.html::before{background:url(../img/html.svg) no-repeat}#hamburger-menu ul li.css::before{background:url(../img/css.svg) no-repeat}#hamburger-menu ul li.c::before{background:url(../img/c.svg) no-repeat}#hamburger-menu ul li.php::before{background:url(../img/php.svg) no-repeat}#hamburger-menu ul li.affinity-designer::before{background:url(../img/affinity-designer.svg) no-repeat}#hamburger-menu ul li.affinity-photo::before{background:url(../img/affinity-photo.svg) no-repeat}#hamburger-menu ul li.couchdb::before{background:url(../img/couchdb.svg) no-repeat}#hamburger-menu ul li.js::before{background:url(../img/js.svg) no-repeat}#hamburger-menu ul li.ajax::before{background:url(../img/ajax.svg) no-repeat}#hamburger-menu ul li.jquery::before{background:url(../img/jquery.svg) no-repeat}#hamburger-menu ul li.reactjs::before{background:url(../img/reactjs.svg) no-repeat}#hamburger-menu ul li.grunt::before{background:url(../img/grunt.svg) no-repeat}#hamburger-menu ul li.jasmine::before{background:url(../img/jasmine.svg) no-repeat}#hamburger-menu ul li.protractor::before{background:url(../img/protractor.svg) no-repeat}#hamburger-menu ul li.nodejs::before{background:url(../img/nodejs.svg) no-repeat}#hamburger-menu ul li.matplotlib::before{background:url(../img/matplotlib.svg) no-repeat}#hamburger-menu ul li.html::before,#hamburger-menu ul li.css::before,#hamburger-menu ul li.c::before,#hamburger-menu ul li.php::before,#hamburger-menu ul li.affinity-designer::before,#hamburger-menu ul li.affinity-photo::before,#hamburger-menu ul li.couchdb::before,#hamburger-menu ul li.js::before,#hamburger-menu ul li.ajax::before,#hamburger-menu ul li.jquery::before,#hamburger-menu ul li.reactjs::before,#hamburger-menu ul li.grunt::before,#hamburger-menu ul li.jasmine::before,#hamburger-menu ul li.protractor::before,#hamburger-menu ul li.nodejs::before,#hamburger-menu ul li.matplotlib::before{background-size:25px 25px;content:"";line-height:normal;margin-right:10px;padding:13px 13px 13px;background-position:left center}footer{background-color:#2e3636;clear:both;color:#fff;display:table;width:100%}footer .footer-section{display:table-cell;font-size:12px;padding:5px 15px;text-align:center;vertical-align:middle}footer .footer-section.up a{color:#fff;cursor:pointer;font-size:25px;margin:10px 20px 0;text-decoration:none;vertical-align:middle}footer .footer-section ul{float:right;list-style-type:none}footer .footer-section ul li{float:left;padding:0 10px 0}footer .footer-section ul li a{color:#fff;text-decoration:none}footer .footer-section ul li a:hover{border-bottom:1px solid #fff}.dennis-gabil{color:#fff;text-decoration:none}.dennis-gabil:hover{border-bottom:1px solid #fff;text-decoration:none}.contact article.middle-column form{padding:0}.contact form fieldset{background-color:#f1f1f1;border:none;border-radius:2px;margin-bottom:12px;overflow:hidden;padding:0 10px}.contact form fieldset h2{margin:10px 12px}.contact form fieldset ul{background-color:#fff;border:1px solid #eaeaea;list-style:none;margin:12px;padding:12px}.contact form fieldset ul li{margin:.5em 0}.contact form fieldset label{display:inline-block;padding:3px 6px;text-align:right;width:80px;vertical-align:top}.contact form fieldset label.error{color:#ff0000;display:inline;font-size:11px;font-style:italic;margin-left:10px}.contact form fieldset input,.contact form fieldset textarea{font-size:100%}.contact form fieldset input[type=submit]{cursor:pointer;margin:0 12px 10px;padding:5px 10px}.contact #mail-success .modal-body p{font-size:11px;margin-bottom:0}.sitemap article.middle-column .tabular .row .cell{text-align:left}.sitemap article.middle-column .tabular .row .cell ul li{line-height:normal}.email-icon::before{content:"\f003";font-family:FontAwesome;margin-right:5px}.mobile-icon::before{content:"\f10b";font-family:FontAwesome;margin-right:5px}@media only screen and (max-width:320px){header{padding:5px 10px}header>div.header-components>div.logo{width:5%}header>div.header-components>div.project{width:85%}header>div.header-components>div.menu{width:10%}header>div.header-components .slogan{font-size:10px;margin-bottom:auto}header>div.header-components .menu #twitter,header>div.header-components .menu #fb,header>div.header-components .menu #tumblr,header>div.header-components .menu li.html,header>div.header-components .menu li.css,header>div.header-components .menu li.c,header>div.header-components .menu li.php,header>div.header-components .menu li.affinity-designer,header>div.header-components .menu li.affinity-photo,header>div.header-components .menu li.couchdb,header>div.header-components .menu li.js,header>div.header-components .menu li.ajax,header>div.header-components .menu li.jquery,header>div.header-components .menu li.reactjs,header>div.header-components .menu li.grunt,header>div.header-components .menu li.jasmine,header>div.header-components .menu li.protractor,header>div.header-components .menu li.nodejs,header>div.header-components .menu li.matplotlib,header>div.header-components .menu li.down-arrow{display:none}}@media only screen and (min-width:320px){header{padding:5px 10px}header>div.header-components>div.logo{width:5%}header>div.header-components>div.project{width:85%}header>div.header-components>div.menu{width:10%}header>div.header-components .slogan{font-size:10px;margin-bottom:auto}header>div.header-components .menu #twitter,header>div.header-components .menu #fb,header>div.header-components .menu #tumblr,header>div.header-components .menu li.html,header>div.header-components .menu li.css,header>div.header-components .menu li.c,header>div.header-components .menu li.php,header>div.header-components .menu li.affinity-designer,header>div.header-components .menu li.affinity-photo,header>div.header-components .menu li.couchdb,header>div.header-components .menu li.linux,header>div.header-components .menu li.js,header>div.header-components .menu li.ajax,header>div.header-components .menu li.jquery,header>div.header-components .menu li.reactjs,header>div.header-components .menu li.grunt,header>div.header-components .menu li.jasmine,header>div.header-components .menu li.protractor,header>div.header-components .menu li.nodejs,header>div.header-components .menu li.matplotlib,header>div.header-components .menu li.down-arrow{display:none}#hamburger{display:block}aside.left-column,aside.right-column{width:0}aside.left-column div{display:none}article.middle-column{width:100%}article.middle-column hr{display:block}article.middle-column .chapters{display:block}article.middle-column .prev-next{display:none}h1,h2,h3{font-family:"Open Sans";font-weight:600;font-size:1em}aside.right-column>div>h2{display:none}aside.right-column div.social,aside.right-column div.advertisement,aside.right-column div.next-prev{display:none}.pre-footer .dennis{width:100%}.pre-footer .dennis>div div.photo img{border-radius:25px;width:50px}.pre-footer .tutorials{width:0}.bio p{padding-right:5px}#tutorials{display:none}footer .footer-section{font-size:10px}footer .footer-section.copyright{width:100%}footer .footer-section.up{display:none;width:0}footer .footer-section.info{display:none;width:0}}@media only screen and (min-width:480px){header>div.header-components .slogan{font-size:10px;margin-bottom:auto}.bio p{padding-right:10px}}@media only screen and (min-width:768px){header>div.header-components>div.project{width:25%}header>div.header-components>div.menu{width:70%}header>div.header-components>div .menu #twitter,header>div.header-components>div .menu #fb,header>div.header-components>div .menu #tumblr,header>div.header-components>div .menu li.html,header>div.header-components>div .menu li.css,header>div.header-components>div .menu li.c,header>div.header-components>div .menu li.php,header>div.header-components>div .menu li.affinity-designer,header>div.header-components>div .menu li.affinity-photo,header>div.header-components>div .menu li.couchdb,header>div.header-components>div .menu li.js,header>div.header-components>div .menu li.ajax,header>div.header-components>div .menu li.jquery,header>div.header-components>div .menu li.grunt,header>div.header-components>div .menu li.jasmine,header>div.header-components>div .menu li.protractor,header>div.header-components>div .menu li.nodejs,header>div.header-components>div .menu li.matplotlib,header>div.header-components>div .menu li.down-arrow{display:block}#hamburger{display:none}aside.left-column{display:block;width:15%}aside.left-column div{display:block}aside.right-column{display:block;width:30%}aside.right-column>div>h2{display:block}aside.right-column div.social,aside.right-column div.advertisement,aside.right-column div.next-prev{display:block}aside.right-column div.social li,aside.right-column div.advertisement li,aside.right-column div.next-prev li{margin:7px 5px 0}article.middle-column{width:55%}article.middle-column hr{display:none}article.middle-column .chapters{display:none}article.middle-column .prev-next{display:table}.social-icon{width:25px}h1,h2,h3{font-size:.8em}#tutorials{display:table-cell}.pre-footer .dennis{width:40%}.pre-footer .dennis>div div.photo img{border-radius:30px;width:60px}.pre-footer .tutorials{width:60%}footer .footer-section.copyright{width:45%}footer .footer-section.up{display:table-cell;width:10%}footer .footer-section.info{display:table-cell;width:45%}}@media only screen and (min-width:1024px){header{padding:9px 15px}header>div.header-components>div.logo{width:5%}header>div.header-components>div.project{width:20%}header>div.header-components>div.menu{width:75%}header>div.header-components .slogan{font-size:10px;margin-bottom:auto}header>div.header-components .menu _ #twitter,header>div.header-components .menu #fb,header>div.header-components .menu #tumblr,header>div.header-components .menu li.html,header>div.header-components .menu li.css,header>div.header-components .menu li.c,header>div.header-components .menu li.php,header>div.header-components .menu li.affinity-designer,header>div.header-components .menu li.affinity-photo,header>div.header-components .menu li.couchdb,header>div.header-components .menu li.js,header>div.header-components .menu li.ajax,header>div.header-components .menu li.jquery,header>div.header-components .menu li.reactjs,header>div.header-components .menu li.grunt,header>div.header-components .menu li.jasmine,header>div.header-components .menu li.protractor,header>div.header-components .menu li.nodejs,header>div.header-components .menu li.matplotlib,header>div.header-components .menu li.down-arrow{display:block}aside.right-column div.social li{margin:7px 12px 0}.social-icon{width:30px}h1,h2,h3{font-size:1em}.pre-footer .dennis>div div.photo img{border-radius:35px;width:70px}footer .footer-section{font-size:12px}}@media only screen and (min-width:1224px){h1{font-size:1.5em}}