/*header responsive*/


@media only screen and (max-width: 1320px) {
#cssmenu {
  
            padding: 0px 3px;
    
}
}
@media only screen and (max-width: 1140px) {
#cssmenu {
  
            padding: 0px 6px;
    
}
#cssmenu > ul > li > a {
    margin: 17px 0px;
    font-size: 11px;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 0px 11px;
    color: #dddddd;
    font-weight: 700;
    text-transform: uppercase;
    border-right: 2px solid #FF5722;
}
}
@media only screen and (max-width: 970px) {
#cssmenu > ul > li > a {
    margin: 17px 0px;
    font-size: 10px;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 0px 8px;
    color: #dddddd;
    font-weight: 700;
    text-transform: uppercase;
    border-right: 2px solid #FF5722;
}
#banner-section .arrow {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 43%;
    z-index: 5;
    border-top: 3px solid #00ab00;
    border-right: 3px solid #00ab00;
    cursor: pointer;
    transition: border-color 0.3s ease-out;
}
}
@media only screen and (max-width: 855px) {
#cssmenu > ul > li > a {
    margin: 17px 0px;
    font-size: 9px;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 0px 6px;
    color: #dddddd;
    font-weight: 700;
    text-transform: uppercase;
    border-right: 2px solid #FF5722;
}
}
@media only screen and (max-width: 765px) {

	.logo {
    text-align: -webkit-center;
}
p.incode {
    float: left;
    padding: 33px 4px;
    text-align: -webkit-right;
    font-weight: bold;
    color: #ff0000;
    font-size: 13px;
}
p.incod {
    float: left;
    margin: 0px;
    line-height: 23px;
    padding: 9px 2px;
    color: #0b7b40;
    font-weight: bold;
    font-size: 12px;
    text-align: -webkit-auto;
}
span.sps1 {
    padding: 0px 0px 0px 39px;
}
span.sps2 {
    padding: 0px 0px 0px 17px;
}
#banner-section .arrow {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 32%;
    z-index: 5;
    border-top: 3px solid #00ab00;
    border-right: 3px solid #00ab00;
    cursor: pointer;
    transition: border-color 0.3s ease-out;
}
.coursecode {
    
    text-align: -webkit-center;
    float: none;
    margin: 0px auto;
     }
     p.incode {
    float: none;
    display: inline-table;
    padding: 33px 4px;
    text-align: -webkit-right;
    font-weight: bold;
    color: #ff0000;
    font-size: 13px;
    }
	p.incod {
    float: none;
    display: -webkit-inline-box;
    margin: 0px;
    line-height: 19px;
    position: relative;
    top: 18px;
    padding: 9px 2px;
    color: #0b7b40;
    font-weight: bold;
    font-size: 12px;
    text-align: -webkit-auto;
}


p.incode1 {
    float: none;
    display: inline-table;
}

}
@media only screen and (max-width: 576px) {
	.logo {
    text-align: -webkit-center;
          }
   .coursecode {
    
    text-align: -webkit-center;
    float: none;
    margin: 0px auto;
     }
     p.incode {
    float: none;
    display: inline-table;
    padding: 33px 4px;
    text-align: -webkit-right;
    font-weight: bold;
    color: #ff0000;
    font-size: 13px;
    }
	p.incod {
    float: none;
    display: -webkit-inline-box;
    margin: 0px;
    line-height: 19px;
    position: relative;
    top: 18px;
    padding: 9px 2px;
    color: #0b7b40;
    font-weight: bold;
    font-size: 12px;
    text-align: -webkit-auto;
}


p.incode1 {
    float: none;
    display: inline-table;
}

#banner-section .arrow {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 26%;
    z-index: 5;
    border-top: 3px solid #00ab00;
    border-right: 3px solid #00ab00;
    cursor: pointer;
    transition: border-color 0.3s ease-out;

}
}
@media only screen and (max-width: 420px) {
#banner-section .arrow {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 15%;
    z-index: 5;
    border-top: 3px solid #00ab00;
    border-right: 3px solid #00ab00;
    cursor: pointer;
    transition: border-color 0.3s ease-out;

}
}