@charset "utf-8";

/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@import url('../css/common.css');
/**********************Pages CSS Start********************************/
body {
    background: url('../images/school.jpg') no-repeat center center fixed;
        /*overflow: scroll;*/
        /*background-size: 100%;*/
}
@media (min-width:300px) and (max-width:767px){
    body{
        background:#fff !important;
    }
    .sun {
  left: 37%;
}
    .video-bg {
        display:none;
        visibility:hidden;
    }
}
@media (min-width:767px) and (max-width:900px){
    .video-bg {
        display:none;
        visibility:hidden;
    }
}
.logo_box{
        position: relative;
    z-index: 9;
-webkit-animation-delay: 15.3s;
-moz-animation-delay: 15.3s;
animation-delay: 15.3s;
}
.sun,
.light,
.bird,
.birdr1,
.birdr,
.fin,
.wave {
  position: absolute;
}
        .sun {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  left: 47%;
  z-index: 40;
  background: linear-gradient(#ff0, #d00);
  box-shadow: 0 0 40px 6px #f20, 0 0 150px 10px #f33;
  animation: rise 14s ease forwards;
}

@keyframes rise {
  0% {
    top: 100%;
        opacity: 0;
  }
  100% {
    top: 10%;
        opacity: 1;
        display:none !important;
  }
}
.welcome{ text-align:center;position: relative;
    z-index: 99;
    transition:4.2s all ease;
}
.welcome h1{text-transform:uppercase;    position: relative;
    z-index: 9;
}

.col1{
    
color:rgb(241, 196, 15);
animation:bounceInDown;
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
animation-delay: 1.3s;

}
.col2{
color: #F04037;
animation:bounceInDown;
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
animation-delay: 2.3s;
}
.col3{
color: #3498db;
animation:bounceInDown;
-webkit-animation-delay: 3.3s;
-moz-animation-delay: 3.3s;
animation-delay: 3.3s;
}
.col4{
color: #2ecc71;
animation:bounceInDown;
-webkit-animation-delay: 4.3s;
-moz-animation-delay: 4.3s;
animation-delay: 4.3s;
}
a.link{
    text-decoration:none !important;
}
a.link:hover {
    text-decoration:none !important;
}
.logo{
    margin: 50px auto 0 !important;
    display: block;
}
        .ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}
        p.Course{
            color: #fff;
    padding: 10px 5px;
    font-style: italic;
    /* margin: 50px 30px; */
    font-size: 15px !important;
    position: absolute;
    top: 39%;
    left: -30px;
    width: 100%;
    border-radius: 4px;
        }
        .color1{
            background: #f366a4;
        }
        .color2{
            background: #58d68d;
        }
        .color3{
            background: #e87f40;
        }
        .color4{
            background: #b273ea;
        }
.head{
            -webkit-animation-delay: 4.3s;
-moz-animation-delay: 4.3s;
animation-delay: 4.3s;
}
.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
    width: 245px;
    height: 245px;
	display: inline-block;
	margin: 20px;
}
.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow:1px 1px 10px black;
	cursor: default;
}

.ch-info-wrap{
	position: absolute;
width: 215px;
    height: 215px;
	border-radius: 50%;

	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
    top: 16px;
    left: 16px;
	background:white url(../img/b.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info{
	position: absolute;
width: 215px;
    height: 215px;
	border-radius: 50%;

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
		
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

}

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ch-info .ch-info-back {
	-webkit-transform: rotate3d(0,1,0,180deg);
	-moz-transform: rotate3d(0,1,0,180deg);
	-o-transform: rotate3d(0,1,0,180deg);
	-ms-transform: rotate3d(0,1,0,180deg);
	transform: rotate3d(0,1,0,180deg);
	
	background: #000;
}

.ch-img-1 { 
	background: #f0408d;
	        -webkit-animation-delay: 10.3s;
-moz-animation-delay: 10.3s;
animation-delay: 10.3s;
}
.ch-img-2 { 
	background: #2ecc71;
	        -webkit-animation-delay: 10.5s;
-moz-animation-delay: 10.5s;
animation-delay: 10.5s;	
}
.ch-img-3 { 
	background: #e25f10;
	        -webkit-animation-delay: 10.7s;	
-moz-animation-delay: 10.7s;	
animation-delay: 10.7s;		
}
.ch-img-4 { 
	background: #943ce2;
	        -webkit-animation-delay: 10.8s;	
-moz-animation-delay: 10.8s;	
animation-delay: 10.8s;		
}
.ch-img-1-1 { 
	background-image: url(../img/building2.jpg);
	
}
.ch-img-2-2 { 
	background-image: url(../img/building1.jpg);
		
}

.ch-img-3 { 
	background-image: url(../img/main-school.jpg);
  
	
}
.ch-img-4
{
	background-image: url(../img/main-school.jpg);
		opacity:.9;
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
     margin: 10px 15px;
    padding: 47px 0 0 0;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	/*border-top: 1px solid rgba(255,255,255,0.5);*/
}

.ch-info a p{
	display: block;
	color: #fff;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info a p:hover {
	color: #fff222;
	color: rgba(255,242,34, 0.8);
}

.ch-item:hover .ch-info-wrap {
	box-shadow: 
		0 0 0 0 rgba(255,255,255,0.8), 
		inset 0 0 3px rgba(115,114, 23, 0.8);
		cursor:pointer;
}

.ch-item:hover .ch-info {
	-webkit-transform: rotate3d(0,1,0,-180deg);
	-moz-transform: rotate3d(0,1,0,-180deg);
	-o-transform: rotate3d(0,1,0,-180deg);
	-ms-transform: rotate3d(0,1,0,-180deg);
	transform: rotate3d(0,1,0,-180deg);

}

#sky{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    background:url(../images/clouds.png) repeat-x top left;
    z-index:0;
    animation: animation_about 15s linear 0.1s infinite;
}
@keyframes animation_about {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}