article,section,nav,header{width: 100%; display: block;font-family: 'Poppins'; clear: both;}
*{transition-duration:.5s}
.space{display: none; width: 100%; height: 200px;}
.ham{display: none;width: 20px;color: #fff;position: fixed;padding: 23px;top:0; right: 0px; z-index: 10;background: #fff;}
html, body, article{height: 100%;}
.mrgin0{margin:0;padding:0;}
ul li{list-style-type: none;}
img{display: block;vertical-align: middle;}
.disabled{opacity:0.2;background: url("../img/cross-icon.svg")no-repeat left 10px !important;}
nav, nav ul {display: flex; justify-content: space-around;align-items: center;}
nav{height: 50px;padding:10px 0;position: fixed;border-bottom: 1px solid #eee;background: #fff;z-index: 9;}
.logo-white{width: 150px;}
nav ul a{color: #888;} nav ul a:hover{color: #005164;}
nav ul.navigation a{padding: 0 20px;}
nav ul.icon a{padding: 0 4px;}
b{font-weight: 700;}
h1,h2,h3,h4{margin: 0;padding: 0;}
#home section{position: relative;display: flex; flex-flow: column;}
header{margin: 120px 0;}
header h1{font-size: 60px;font-weight: 500;margin: -8px 0;}
header h1 span{font-weight: 200;}
.tags {margin:50px 0; font-weight: 200;font-size: 16px;}
.tags a{font-size: 12px;white-space: nowrap;border: 1px solid #ddd;border-radius: 20px;padding: 4px 15px;line-height: 2.5;margin: 0 3px;color: #000;}
.tags a:hover{border: 1px solid #ff0076;border-radius: 20px;padding: 4px 15px;line-height: 2.5;margin: 0 3px;color: #fff; background: #ff0076;}
.structure h2{font-size: 25px;font-weight: 500; color: #fff;}
.structure h2 span{font-weight: 200;}
.structure {background: #00B4FF; padding:70px 0; color: #AEE3F9;}
.arrow-down{width: 40px;margin: 0 auto;}
.course-box { display: flex; flex-flow: row; width: 85%; margin: 50px auto;}
.content-container p{color: #888;}
.content-container h3{white-space: nowrap;}
.content-container p span{font-weight: 500; color: #000;}
.active a{color: #000; font-weight: 700;}
.top{position: fixed;bottom: 10px; right: 10px;}
.image-container{width: 70%;}
.image-container img{width: 100%; height: auto;}
.content-container{width: 30%; position: relative;}
.print,.digital, .web, .frontend{padding: 40px; border: 1px solid #eee; margin: 0 70px; box-shadow: -3px 12px 25px #eee;background: #fff; width: 280px;}
 .animation{padding: 40px; border: 1px solid #eee; box-shadow: -3px 12px 25px #eee;background: #fff; width: 280px;margin:75px 70px 0 70px;}
.fix{position: fixed;width: 280px; top: 100px;opacity: 1; margin-top: 0;}
.scroll{opacity: 1;}

#Frontend, #WebDesign, #Animation, #SocialMedia, #GraphicDesign{width:100%; margin: 40px 0;}

.image-container ul li{position: relative;padding: 0 0 10px 0;}
.cont-title{position: absolute; right: 0; background: #fff; color: #888; padding: 10px 35px; margin: 10px; border-radius: 25px;}
.video-box li{width: 49%; float: left; margin: 0 1% 0 0;}
.table{display: flex; justify-content: space-evenly;}
.atc{margin: 0px auto; padding-top: 50px; width: 60%;}
.atc h2 span, .wju h2 span{font-weight: 200;}
.atc h2, .wju h2, .reg h2 {font-weight: 500; margin: 50px 0; font-size: 35px;}
.atc ul{width: 33.33%}
.atc ul li:first-child{font-weight: 700;color: #000;}
.atc ul li{padding: 15px 0; white-space: nowrap;color: #878787;}
.atc ul li:nth-child(even) {background: #eee;}
.atc ul li:nth-child(2) {color: #000;}
.atc ul:first-child li:nth-child(even) {background: #eee; border-bottom-left-radius: 25px;border-top-left-radius: 25px;}
.atc ul:last-child li:nth-child(even) {background: #eee; border-bottom-right-radius: 25px;border-top-right-radius: 25px;}
.video-box video{width: 100%; height: auto;}
.minhi video{padding: 5px 0; background: #000;}
.stdwok{ width: 100%; text-align: center; margin: 20px 0; font-weight: 500; }
.video-box p{ font-size: 12px; color: #888; text-align: center;margin: 5px 0 10px 0; }
.wju ul{display: flex; width:60%}
.wju ul li{width: 33%; margin: 0 0.5% 0.5% 0; padding: 50px 0; background: #eee; color: #464545;}
.wju ul li b{color: #000;}
.table .bg{background:#D8006B !important; color: #fff !important;}
.reg{padding:50px 0;}
.reg form{width: 60%; margin: 0 auto;}
.reg form ul{ display: flex; }
.reg form ul li{width: 49%; margin-right: 1%;}
.reg form ul li:last-child{margin-right:0;}
input, select, textarea{width: 100%; color: #888;}

input[type=text],input[type=date], select {
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 25px;
  box-sizing: border-box;
}

textarea {
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 20px;
  box-sizing: border-box;
}

input[type=submit] {
  background-color: #000;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 25px;
  cursor: pointer;
}

input[type=reset] {
  background-color: #000;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 25px;
  cursor: pointer;
}

input[type=submit]:hover, input[type=reset]:hover  {
  background-color: #888;
}
.inp-rad{display: flex;  padding: 22px;}
.inp-rad input.radio{width: 50px !important;align-items: center;}
#contact{margin:200px 0}
#contact h1 a{font-size: 70px; }
#contact p i{padding: 0 10px;}
#contact a{color: #000;}
#contact address{width:35%; margin: 0 auto 20px;}
#contact .icon{display: flex;justify-content: center;}
#contact .icon li{padding: 0 10px; margin-bottom: 20px;}
.hr{width: 100%; height: 1px;background: #ddd;}
.copyright{font-size: 12px; color: #888; text-align: center; width: 100%; margin: 30px 0;}


/* Mobile devices */
@media only screen and (max-width: 800px) {
html, body, article { height: auto; }
.icon{display: none;}
.ham{display:block;}
nav{flex-flow: column;justify-content: end;height: inherit;position: static;padding: 15px 0;background: none;}
#home section {flex-flow: column;}
.navigation{flex-flow: column; width: 100%;display: none; height: 100%; position: fixed; top: 0; padding-top: 70px;
    z-index: 3;background: #fff;}
.navigation li{width: 100%; text-align: center;}
nav ul.navigation a{display: block;padding: 40px 0}

article, section, nav{width: 100%;margin: auto;}
.course-box { flex-flow: column-reverse; width: 100%; margin: 50px auto;}
.image-container{width: 95%; margin: auto;}
.content-container{width: 100%; position: relative;}
.scroll{opacity: 1;}
.print, .digital, .animation, .web, .frontend{position: relative; padding: 0; text-align: center; border: none; margin:0 auto 40px; box-shadow: none;width: 100%;}
.fix {width: 100%;top: 0;}
.video-box li{width: 100%; float:none; margin:0}
.atc{margin:auto; width: 100%; font-size: 12px;}
.wju ul{width:100%}
.wju ul li{width: 100%; margin: 0 0.5% 0.5% 0; font-size: 12px;}
form {display: inline;}
form input, form select { width: 100%; padding: 15px 0; margin: 4px 0; text-indent: 5px;}
form textarea { width: 100%; height: 90px; text-indent: 25px; padding: 15px 0; }
.radio {width: 35px; margin: 40px;}
.subBTN input { width: 100%; padding: 25px 0; }

.reg form{width: 100%; }
.reg form ul{ display: block; }
.reg form ul li{width: 100%; margin:0%;}
.inp-rad { display: block; padding: 0;}
.inp-rad input.radio { margin: 40px 0;}

#contact h1 a{font-size: 40px; }
#contact address {width: 100%;}
header { margin: 50px 0; }
header h1 { font-size: 30px; margin: 0px 0;}
br {display: none;}
.softicon{width: 80%;}
.structure {padding: 30px 0;color: #AEE3F9;}
.cont-title {padding: 2px 12px; font-size: 12px;}
#Frontend, #WebDesign, #Animation, #SocialMedia, #GraphicDesign { margin: 0;}
.stdwok {font-size: 18px;}
.content-container p {padding: 0 20px;}
center { width: 95%; margin: auto;}
b {display: block;}
.wju ul li {padding: 20px 10px;}



}