*{
  margin: 0 auto;
  padding: 0;
}
/*common styles*/
html{
  overflow-x: hidden;
}
body{
  overflow-x: hidden;
  font-family: 'Roboto', sans-serif;
  font-size:16px;
}
a, a:hover, a:focus{
  text-decoration: none;
  transition:all 0.5s;
}
ul{
  list-style: none;
}
h1, h2, h3, h4{
  font-family: 'Montserrat', sans-serif;
}
p{
  font-size: 16px;
  line-height: 30px;
  color: #555;

font-weight: 500;
}



/*header style */
.navbar-default{
  background: none;
  border: 0 none;
  margin: 0;
    padding: 10px 0;
    border-radius: 0;
    z-index: 99999;
  
}
.navbar-nav>li{padding: 0 20px;}
.navbar-brand{
  padding: 0 25px;
}
.navbar-default .navbar-nav>li>a {
  color: #fff;
  font-weight: 500;
}
.nav li a{
  padding: 20px 5px;
}
.dropdown {
  position: relative;
  display: inline-block;
}

.banner-bg{
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.girl-sitting{
    position: absolute;
    left: 0%;
    top: 0;
    width: 55%;
   
}
.text-banner{
  padding: 245px 0;
  position: relative;
  z-index: 9999;
}
.text-banner h3{
  font-weight: 700;
 color:#333;

}
.text-banner h4{font-size: 17px;font-weight: 600;padding-top: 3px;   color: #555;}
.text-banner p{
  padding-top: 8px;
    color: #555;
    font-weight: 400;
    
}
.rotate1 {
  position: absolute;
    top: 20%;
    left: 15%;
}
.rotate2 {
  position: absolute;
    bottom: 15%;
    right: 5%;
}
.text-banner a, .apply-now{
  background: #353547;
  padding: 10px 40px;
  color: #fff;
  display: inline-block;
  margin-top: 30px;
  /*box-shadow: 0px 0px 6px 1px #ed882f;*/
box-shadow: 0 13px 25px #353547;

font-weight: 500;

font-size: 18px;
transition:all 0.5s;
}
.text-banner a:hover, .apply-now:hover{
  background: #353547;
  padding: 10px 40px;
  color: #fff;
  display: inline-block;
  margin-top: 30px;
  /*box-shadow: 0px 0px 6px 1px #ed882f;*/
box-shadow: 0 13px 25px #353547;
border-radius:25px;
font-weight: 500;

font-size: 18px;
}

.Yoc-learn{
  position: absolute;
  top: 37%;
  left: 30%;
}
.Yoc-learn h2{font-weight: 700;

color: #333;}
.Yoc-learn h4{
    color: #555;
}
/*.ui-ux{
  position: relative;
}*/
.b-circle{
  transform: rotate(-20deg);
}
.ui-ux img{
  position: absolute;
  top: 10%;
  left: 19%;
}
.web-d img{
  position: absolute;
  top: 10%;
  right: 19%;
}
.python img{
  position: absolute;
  bottom: 10%;
  left: 19%;
}
.php img{
  position: absolute;
  bottom: 10%;
  right: 19%;
}
.courses h4{
    position: absolute;
    font-weight: 600;
    color: #405063;
}
.ui-ux h4{
  top: 18%;
  left: 4%;
  color: #555;
}
.web-d h4{
  top: 18%;
  right: 1%;
}
.python h4{
  bottom: 23%;
  left: 2%;
}
.php h4{
  bottom: 23%;
  right: 5%;
}
.ui-ux  .ui, .web-d .web, .python .pyth, .php .ph{
  z-index: 9999;
}
.ui-ux .cardrotate{z-index: 2;}
.rotate3{
  position: absolute;top: 35%;
}
.our-courses{
  position: relative;
  z-index: 9999;
}
h2{
  font-weight: 700;
  color: #333;
  font-size: 26px;
}
section{
  padding-top: 65px;
  position: relative;
}
/* courses offered*/
.yoc-offers{
  position: relative;
}
/*.yoc-offers img{
  position: absolute;
  top: 10%;
  left: 19%;
}*/
.yoc-offers .ui{
  z-index: 9999;
  position: absolute;
}
.yoc-courses-offered h2{
  padding-bottom: 40px;
}
.pgm{
  box-shadow: 0px 0px 20px 2px #fdf0e5;
 padding: 55px 25px;
 padding-top:20px;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ddd;
}
.pgm h4{margin-top: 0;font-weight: 400;font-size: 18px;color: #333;text-align:center;padding: 20px 0px;}
.pgm ul {
  text-align: left;
}
.pgm ul{
  color: #555;
  line-height: 30px;
font-weight: 500;
min-height: 108px;

line-height: 35px;
}
/*.yoc-courses-offered{
  background: url("../../images/bgshape1.png");
  background-repeat: no-repeat;
}*/
.bgshape1{
  position: absolute;
    top: 15%;
    z-index: -2;
    width: 55%;
}
.maincircle{
  position: absolute;
  right: -160px;
   top: -100px;
}


.nav-tabs{
  width: 60%;
}
.nav-tabs>li{
  width: 33%;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
  border: 0 none;
  position: relative;
  color: #ed882f;
}
.nav-tabs>li.active>a:after{
      content: "";
    position: absolute;
    width: 75%;
    height: 3px;
    background: #ed882f;
    left: 12%;
    bottom: 0;
}
.panel{
  box-shadow: none;
  border: 0 none;
  background: none;
}
.panel-body{
  margin-top: 50px;
}
.panel.with-nav-tabs .panel-heading{
    padding: 5px 5px 0 5px;
    border: none;
    background: none
}
.panel.with-nav-tabs .nav-tabs{
  border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
  margin-bottom: -1px;
}
/********************************************************************/
/*** PANEL DEFAULT ***/
.with-nav-tabs.panel-default .nav-tabs > li > a,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
    color: #555;
}
.with-nav-tabs.panel-default .nav-tabs > .open > a,
.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
    color: #555;;
  background:none;
  border-color: transparent;
  transition: .6s;
}
.with-nav-tabs.panel-default .nav-tabs > li.active > a,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
  color: #ed882f;
  background: none;
  border-color: #ddd;
  border-bottom-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #f5f5f5;
    border-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #777;   
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #555;
}
.maincircle1{
  position: absolute;
  left: -135px;
  width: 20%;
  top: 35%;

}
.preparation h5{font-weight: 600;color:#333;}
/*advantage sstyles*/
.common-padding{
  padding-top: 60px;
}
.advantages-yoc .pgm{
  padding: 0px;
  width: 95%;
    margin: 0 auto;
    border-radius: 15px;
    min-height:260px;
}
.preparation{
  padding: 30px 0;
}
.rel{
  position: relative;

}
.bgshape2{
  position: absolute;
  top: 17%;
  z-index: -2;
  right: 0;
  width: 55%;
}
.training p{
  padding: 35px 0;
}
.rotate-logo{
  position: absolute;
bottom: -6%;

left: 16%;
  z-index: -1;
}
.rotate-logo1 {
    position: absolute;
    top: 42%;
    left: 40%;
    z-index: 999;
}
/*form section styles*/
form{
  box-shadow: 0px 5px 8px #ececec;
    float: left;
    width: 100%;
    padding: 50px 20px;
    margin-bottom: 70px;
    padding-bottom: 75px;
    border: 1px solid #ddd;
}
label{
    font-weight:500;
    color:#333;
}
form .btn{
  background: #353547;
  border: 0 none;

  color: #fff;
  display: inline-block;

  border-radius: 0;
}
.form-control{border-radius: 0;background-color: #f7f8fc;height: 44px;border: 1px solid #ddd;box-shadow:none;}
.form-control:focus{
  border-color: #ec7f20;
  box-shadow: none;
}
.plant {
   position: absolute;
    bottom: -25px;
    left: 0;
    z-index: -1;
}
.maincircle-1{
 position: absolute;
    right: -50px;
    top: 52%;
    width: 10%;
}

/*animation styles*/
/*animation styles*/
.loading {
    -webkit-animation: rotation 20s infinite linear;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

.cardrotate {
  -webkit-transition: -webkit-transform .5s ease-in-out;
          transition:         transform .5s ease-in-out;
}
.cardrotate:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

.ball {
  
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
 


 /* hover rotate*/
 .hover-rotate .cardrotate{
  transition: 0.90s;
  -webkit-transition: 0.90s;
  -moz-transition: 0.90s;
  -ms-transition: 0.90s;
  -o-transition: 0.90s;
  
}

.hover-rotate:hover .cardrotate{
  transition: 0.90s;
  -webkit-transition: 0.90s;
  -moz-transition: 0.90s;
  -ms-transition: 0.90s;
  -o-transition: 0.90s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
} 

.pgm ul li{
    background: url(../../images/bullet.png);
    background-repeat: no-repeat;
    padding-left: 27px;
    background-position: top 9px left 0;
}

.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}


/*footer*/
footer{
  background: #272733;
  padding: 30px 0;
    font-family: 'Montserrat', sans-serif;
}
footer h5{
  font-weight: 600;
  color: #ed882f;
  font-size: 16px;
}
footer address{
  color: #b7b7ce;
  line-height: 27px;
  font-weight: 600;
  font-size: 14px;

}
footer p{font-size: 14px; color: #b7b7ce;font-weight: normal;}
footer p a{color: #b7b7ce;}
footer i{
  background: #ed882f;

width: 45px;

height: 45px;

padding: 10px;

border-radius: 100%;

font-size: 18px;

color: #fff;

font-size: 25px !important;
}
footer img{
      width: 50%;
    padding: 35px 0;
}
.footer-padding{
  padding-left: 50px;
}
.nav-up{
  top: -85px;
}
header{
  position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
    z-index: 99999;
    
}

.ipad-on-scroll{
  background: #353547;
}


form{
  position: relative;
}
/*.text-success, .text-danger{
   position: absolute;
   left: 40%;
   top: 0%;
}*/
#success {
  position: absolute;
  left: 25%;
  bottom: 20px;
  font-size: 16px;
}
/*.text-danger{
  background: #f2dede;
  padding: 15px 25px;
}*/
#success{
  background: #dff0d8;
  padding: 15px 25px;
  display: none;
}
#check_user{
    padding: 5px;
    display:block;
    border:1px solid red;
    }

    .parsley-errors-list li{
      color: red;
    }


    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
      border-bottom: 2px solid #fff;
      background: none;
      color: #fff;
    }

/*media queries*/

@media screen and (max-width: 768px){
  header
  {
    position: initial !important;
  }
  .advantages-yoc .pgm{
    text-align: center;
  }
  .nav-tabs>li>a{
    font-size: 14px;
  }
  .nav-tabs{
    width: 100%;
  }
  .common-padding{
    padding: 0;
  }
  .rel{
    left: 0;
  }
  .pgm{
    margin-bottom: 35px !important;
  }
  .text-banner{
    padding: 50px 0;
  }
  .navbar-default{
    background: #ed882f !important;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background: #fff !important;
}
  .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background: none;
}
.navbar-toggle{border: none;margin-top: 20px;}
  .our-courses, .bg{
    display: none;
  }
  .navbar-brand{
    height: auto;
  }
  .navbar-collapse{
  background: #ed882f;
  z-index: 99999;
  margin-top: 30px;
}
}


.yctop{
    margin-top:20px;
    min-height:180px;
}