@charset "utf-8";
/* CSS Document */

@import url('responsive.css');


@media screen and (max-width: 970px) {
	.right-col{
	width:36.66666666666667%;
	margin-top:-25%;
	margin-right:6%;
	max-width:352px;
	float:right;
	z-index:0;
	position:relative;
	}

	.left-col{
		width:100%;
	}	

	.title{
		width:45%;
		margin-top:0;
	}
	.whitebg{
	background-color: transparent;}
	.whitebg:before{
	content:"";
	position:absolute;
	height:200px;
	width:100%;
	left:0;
	top:0;
	z-index:-1;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk0JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 52%, rgba(255,255,255,1) 94%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(52%,rgba(255,255,255,0)), color-stop(94%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 52%,rgba(255,255,255,1) 94%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 52%,rgba(255,255,255,1) 94%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 52%,rgba(255,255,255,1) 94%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 52%,rgba(255,255,255,1) 94%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );}
	.whitebg:after{
	background-color:#FFF;
	content:"";
	position:absolute;
	height:100%;
	width:100%;
	left:0;
	top:200px;
	z-index:-1;}
	.title .right{
		display:none;}
	.width-330 {
width: 33.3%;
max-width: 315px;
}	
.width-190 {
width: 58%;
max-width: 180px;
}
}
@media screen and (max-width: 800px) {
	.right-col{
	width:46.66666666666667%;
	margin-right:3%;
	margin-top:-18%;
	}
	.width-half{
	width:43.5%;
}
	.width-half2{
	width:50%;
	}	
	.margin-right{
	margin-right: inherit;
	}
	.clear-left{
		clear:left;}
		.width-330{
	width:50%;
	max-width:inherit;}
	.width-125{
		max-width:inherit;}
	.width-190{
		max-width:inherit;}
	.width-160{
		max-width:inherit;}	
	.contact{
	width:37%;
	}		
}
@media screen and (max-width: 700px) {
.learn-language{
	float:left;
	width:100%;
	clear:both;
	}
	.learn-french, .learn-eng, .learn-german, .learn-hindi, .learn-sanskrit{
	float:left;
	width:20%;
	}
.learn-language h2{
	font-size:24px;

	padding-top:10px;

	}		
.equipment h2{
	width:100%;
	margin-left:0%;
	margin-top:60%;}
.equipment h2:before{
	content: "";
position: absolute;
left: 40%;
top: -30px;
width: 0;
height: 0;
border-bottom: 30px solid #a40aff;
border-right: 30px solid transparent;
border-top: 0px solid transparent;
border-left: 30px solid transparent;
	}		
.equipment h3{
	float:left;
	margin-left:5%;}	
.equipment span{
	margin-left:5%;}	
.whitebg:after {
	display:none;}	
	
}
@media screen and (max-width: 660px) {
.bg{
        position: inherit !important;
    }
ul.sitemap{
	z-index:100;}	
	.title{
		width:100%;
	}
	.more-links{
	display: block;
	position: fixed;
	top: 50%;
	left: 0%;
	margin-left: -80px;
	background-color: #4D4D4D;
	padding: 10px;
	height: 20px;
	width: 80px;
	color: #FC6602;
	cursor: pointer;
	border-radius: 0 10px 10px 0;
	-webkit-transition: all 700ms cubic-bezier(0.100, 0.795, 0.070, 0.950);
	-moz-transition: all 700ms cubic-bezier(0.100, 0.795, 0.070, 0.950);
	-o-transition: all 700ms cubic-bezier(0.100, 0.795, 0.070, 0.950);
	transition: all 700ms cubic-bezier(0.100, 0.795, 0.070, 0.950); /* custom */
	-webkit-transition-timing-function: cubic-bezier(0.100, 0.795, 0.070, 0.950);
	-moz-transition-timing-function: cubic-bezier(0.100, 0.795, 0.070, 0.950);
	-o-transition-timing-function: cubic-bezier(0.100, 0.795, 0.070, 0.950);
	transition-timing-function: cubic-bezier(0.100, 0.795, 0.070, 0.950); /* custom */
	}
	.more-links:before{
	content: ">";
	right: 2px;
	top: 2px;
	font-weight:bolder;
	font-size: 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	position: absolute;
	animation: color-change 1s infinite linear;
  	-webkit-animation: color-change 1s infinite linear;
	-moz-animation: color-change 1s infinite linear;
		}
@-moz-keyframes color-change {
    0%, 100% {
       color: #FC6602;
    }
    50% {
         color: #FFF;
    }
}
@-webkit-keyframes color-change {
     0%, 100% {
       color: #FC6602;
    }
    50% {
         color: #FFF;
    }
}
@keyframes color-change {
     0%, 100% {
       color: #FC6602;
    }
    50% {
         color: #FFF;
    }
}			
	.more-links:hover{
		margin-left:0;	
	
	}
		
	.close{
		display:none;
		opacity:0;
	}	
	.close-vissible{
		display:block;
		z-index:3000;
		opacity:1;
	}
	.more{
		display:block;
		opacity:1;}
	.more-hidden{
		display:none;
		opacity:0;}	
	.headphone{
		overflow:visible;
		max-width:352px;
		max-height:400px;
		-webkit-transition: all 700ms cubic-bezier(0.100, 0.795, 0.070, 0.950); 
   -moz-transition: all 700ms cubic-bezier(0.100, 0.795, 0.070, 0.950); 
     -o-transition: all 700ms cubic-bezier(0.100, 0.795, 0.070, 0.950); 
        transition: all 700ms cubic-bezier(0.100, 0.795, 0.070, 0.950); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.100, 0.795, 0.070, 0.950); 
   -moz-transition-timing-function: cubic-bezier(0.100, 0.795, 0.070, 0.950); 
     -o-transition-timing-function: cubic-bezier(0.100, 0.795, 0.070, 0.950); 
        transition-timing-function: cubic-bezier(0.100, 0.795, 0.070, 0.950); /* custom */
		}
	
		.right-col{
		right:100%;
		width:100%;
		left:-367px;
		position:fixed;
		z-index:2000;
		top: 0%;
		bottom:0%;
		margin:auto ;
		}	
	.more-linksClicked{
	position: fixed;
	top: 10%;
	bottom: 10%;
	right: 50%;
	left: 0;
	margin: auto;
	width:90%;
	min-width:210px;
	border-radius: 0 50px 50px 0;
	z-index: 2000;
	background-color:#fff;
		}	

	.more-linksmoved{
		display:block;
		width:18px;
		height:18px;
		border-radius:100%;
		background-color:#F00;
		z-index:100;
		cursor:pointer;
		position:absolute;
		right:0;
		left:100%;
		margin-left:-40px;
		color: #000000;
		top:0;
		}
	.more-linksmoved:hover{
		margin-left:-40px;
		}
	.more-linksmoved:before{
		display:none;
		}

	.ribbon3d{
	margin-left: .9%;}	
	.ribbon3d .col1, .ribbon3d .col2, .ribbon3d .col3{
	margin:2% 4.9%;
	width:40%;
	}	
	.ribbon3d .col3{
	float:none;
	margin:0 auto;
		}
	.ribbon3d .col3 .imgCols:before{
	width:80%;
	left:-78%;
	background: #303030; 
	-webkit-transform: perspective( 100px ) rotateY( 00deg );
	-moz-transform: perspective( 100px ) rotateY( 00deg );
	-o-transform: perspective( 100px ) rotateY( 00deg );
	transform: perspective( 100px ) rotateY( 00deg );
		}	
	.ribbon3d .col3 .imgCols:after{
	width:80%;
	right:-80%;
	background: #303030; 
	-webkit-transform: perspective( 100px ) rotateY( 00deg );
	-moz-transform: perspective( 100px ) rotateY( 00deg );
	-o-transform: perspective( 100px ) rotateY( 00deg );
	transform: perspective( 100px ) rotateY( 00deg );
		}				
	.ribbon3d .col2 .imgCols:after{
	background: #303030; 
	-webkit-transform: perspective( 100px ) rotateY( 00deg );
	-moz-transform: perspective( 100px ) rotateY( 00deg );
	-o-transform: perspective( 100px ) rotateY( 00deg );
	transform: perspective( 100px ) rotateY( 00deg );}	
	.whyWeOnly, .objective{
	width:80%;
	margin:auto;
	float:none;
	font-size:15px;
	}
	.popup{
	background-color: #FC6602;
	padding: 5px;
	top:0px;
	left: 100px;
	right:50%;
	bottom:50%;
	position: absolute;
	opacity:1;
	visibility:hidden;
	width: 100px;
	height:25px;
	border-radius: 5px;
	color: #fff;
	z-index:inherit;
	animation: display-hide 4s;
  	-webkit-animation: display-hide 4s;
	-moz-animation: display-hide 4s;
	 pointer-events: none;
	 font-family:"Metrophobic", Arial, FreeSans, sans-serif;
	 font-size:15px;
	 box-shadow: 0 0 20px 10px #FFF;
		}
	.popup:before{
	content:"";
	position:absolute;
	left:-7px;
	top:9px;
	width: 0; 
	height: 0; 
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent; 
	
	border-right:7px solid #FC6602; 
	
			}	

	
@-moz-keyframes display-hide {
    0%, 100%{
        opacity:0;
		left: -54%;
		 visibility: visible;
    }
	20%, 80%{
		left: 120%;
		opacity:1;
	}
		
}
@-webkit-keyframes display-hide {
    0%, 20%, 100%{
        opacity:0;
		left: 154%;
		 visibility: visible;
    }
	40%, 80%{
		left: 120%;
		opacity:1;
	}
}
@keyframes display-hide {
    10%, 100%{
        opacity:0;
		left: 154%;
		 visibility: visible;
    }
	20%, 80%{
		left: 120%;
		opacity:1;
	}
}
.clear-left{
		clear: inherit;}
	.width-half{
	width:50%;
}	
.width-half3{
	width:100%;}
	
.contact{
	width: 100%;
	display:block;
	overflow:hidden;
	}	

		
}

@media screen and (max-width: 525px) {
	
	.title{
		width:100%;
	}

	.right-col{
		}	
	.more-linksClicked{
		
		background-color:#FFF;
		width:70%;
		margin-left:0;
		min-width:150px;}	
	.more-linksmoved{
		margin-left:-40px;
		}	
	.more-linksmoved:hover{
		margin-left:-40px;
		}	
.learn-french, .learn-eng, .learn-german, .learn-hindi, .learn-sanskrit{
	float:left;
	width:20%;
	}
	
.learn-language{
	width:100%;
	float:left;
	clear:both;
	margin-top:5px;
	margin-bottom:10px;
	}
.learn-language h2{
	font-size:23px;
	margin-top:10px;
	text-align:center;
	}
	

	}
	
@media screen and (max-width: 480px) {
		
	.ribbon3d .col1, .ribbon3d .col2, .ribbon3d .col3{
		float:none;
		width:90%;
		margin:10px auto;
	}
	.ribbon3d .imgCols:before, .ribbon3d .imgCols:after{
		display:none;
	
	}	
.learn-language {
	margin-top: 0;
	margin-right: 5%;
	margin-bottom: 0;
	margin-left: 5%;
	width:90%;
	}
	.learn-language h2{
	margin-top:0px;
	}
	.learn-german, .learn-sanskrit{
	clear:left;
	}
	.learn-french, .learn-eng, .learn-german, .learn-hindi, .learn-sanskrit{
	width:50%;
	}
	.learn-german{
	width:100%;	
		}
	.width-half{
	width:100%;
}
	.width-half2{
	width:100%;
	}
	.width-330{
	width:100%;}		

			
}