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

*{
	margin-bottom: 0px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0px;
	
}

html{
	height:100%;
	

}

body{
	height:100%;
	width: 100%;
	margin:0 auto;
	background:white;
	font-size:16px;
	overflow-x: hidden;
}

header{
	width:100%;
	margin:0 auto;
	height:70px;
	position:fixed;
	background-color: #AEFF00;
	z-index:999;
}

p{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1em;
	font-weight: 300;
	color: #000;

}

h3{
	font-family: 'Oswald', sans-serif;
	font-size: 1.5em;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.5em;
	color: #000;

}

h4{
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	text-transform: uppercase;

}

a{outline: 0;}


#social{
	width: 90px;
	height: 29px;
	top: 20px;
	right: 10px;
	position: fixed;
	
}

.box-social{
	width: 14px;
	height: 29px;
	margin-right: 1.5px;
	margin-left: 1.5px;
	display: inline-block;
	position: relative;
	
}

#social a{
	text-decoration: none;
}

.face-top{
	background-image: url(../images/face-top.png) ;
	background-size: 14px 58px;
	background-position: 0 -29px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.twitter-top{
	background-image: url(../images/twitter-top.png);
	background-size: 14px 58px;
	background-position: 0 -29px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;

}

.gplus-top{
	background-image: url(../images/gplus-top.png);
	background-size: 14px 58px;
	background-position: 0 -29px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;

}

.flickr-top{
	background-image: url(../images/flickr-top.png);
	background-size: 14px 58px;
	background-position: 0 -29px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;

}

.face-top:hover, .twitter-top:hover, .gplus-top:hover, .flickr-top:hover{
	background-position: 0px 0px;
	

}
#intro{
	width: 100%;
	height: 90%;
	top:70px;
	position: relative;
	text-align: center;
	display: block;
}

a .bt-go {
	position: absolute;
	z-index: 100;
	padding: 2px 30px;
	margin: 0 auto;
	border: 1px solid #4A4A4A;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 22px;
	text-align: center;
	text-decoration: none;
	color: #4A4A4A;
	background-color: white;
	bottom: 25px;
	left: 50%;

	margin-top: 60px;
	text-transform: uppercase;
}


.bt-go span{ font-weight: 700;}

a .bt-go-simple{
	position: absolute;
	z-index: 29;
	padding: 1px 15px 3px;
	margin: 0 auto;
	border: 1px solid #4A4A4A;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.2em;
	line-height: 1em;
	text-align: center;
	color: #4A4A4A;
	bottom: 10px;
	left: 50%;
	margin-left: -25px;
	text-transform: uppercase;

}


#courses{
	width: 100%;
	height:auto;
	min-height: 560px;
	position: relative;
	display: block;


}

#central-courses{
	max-width: 1200px;
	height: auto;
	min-height: 250px;
	margin: 100px auto 0;
	text-align: center;
	padding: 100px 0;
	position: relative;
	vertical-align: middle;

}

#course{
	width: 23.5%;
	min-width: 230px;
	padding: 30px 30px 0;
	min-height: 280px;
	margin: 0 auto 20px;
	position: relative;
	display: inline-block;
	background-color: white;
	text-align: center;
}

#course a{
	text-decoration: none;
}

.bt-course{

	position: relative;
	width: 120px;
	padding: 2px 16px;
	margin: 0 auto;
	border: 1px solid #4A4A4A;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	text-align: center;
	text-decoration: none;
	color: white;
	background-color: black;
	top: 15px;
	text-transform: uppercase;
}

.bt-course span{
	font-weight: 700;
}

#school{
	width: 100%;
	height:auto;
	position: relative;
	display: block;
	margin: 0 auto;
	min-height: 600px;
	background-image: url(../images/waves.png),url(../images/bg-classes.jpg);
	background-attachment: scroll, scroll;
	background-repeat: no-repeat, no-repeat;
	background-size: 173px 56px, auto 100%;
	background-position: right 50%, 36% top;
	box-shadow: 0 2px 4px rgba(0,0,0,.5) inset;
	padding-bottom: 90px;
	padding-top: 60px;
	

}


#classes{
	max-width: 960px;
	height:auto;
	margin: 0 auto;
	top: 72px;
	bottom: 72px;
	text-align: center;
	position: relative;
	padding-left: 3%;
	vertical-align: middle;
	
	
}

#classes a{ text-decoration: none;}

.box-classes{
	width: 247px;
	height: 452px;
	margin: 0px 30px 40px 30px;
	background-color: orange;
	display: inline-block;
	position: relative;
	overflow: hidden;

}

.holiday img, .family img, .sup img{
	width: 247px;
	height: 452px;
	top: -452px;
	display: block;
	position: relative;
	transform: scaleY(1);
    transition: all .3s ease-in-out;

}

.surfcamp-title{
	position: absolute;
	color: white;
	height: 220px;
	width: 247px;
	margin-top: -450px;
	padding-left: 2px;
	z-index: 2;
	transition: all 0.4s linear;
	opacity: 1;
	overflow: hidden;

}

.plus{
	color: white;
	font-family: 'Source Sans Pro', sans-serif;
	border: 1px solid white;
	border-radius: 50%;
	font-size: 2em;
	width: 25px;
	height: 25px;
	margin: 20px auto;
	text-align: center;
	vertical-align: middle;
	line-height: .8em;
}

.plus-f{
	color: #4A4A4A;
	font-family: 'Source Sans Pro', sans-serif;
	border: 1px solid #4A4A4A;
	border-radius: 50%;
	font-size: 2em;
	width: 25px;
	height: 25px;
	margin: 20px auto;
	text-align: center;
	vertical-align: middle;
	line-height: .8em;
}

.surfcamp-title-b{
	position: absolute;
	color: #4A4A4A;
	height: 220px;
	width: 247px;
	margin-top: -210px;
	padding-left: 2px;
	z-index: 2;
	transition: all 0.4s linear;
	opacity: 1;
	overflow: hidden;

}

.holiday .mask{
	width: 247px;
	height: 452px;
	position: relative;
	overflow: hidden;
	text-align: center;
	top: 0;
	left: 0;
	z-index: 3;
	background-color: rgba(255, 231, 179, 0.3); 
    transition: all 0.3s linear;
    opacity: 0;
}

.family .mask{
	width: 247px;
	height: 452px;
	position: relative;
	overflow: hidden;
	text-align: center;
	top: 0;
	left: 0;
	z-index: 3;
	background-color: rgba(255, 231, 179, 0.3); 
    transition: all 0.3s linear;
    opacity: 0;
}

.sup .mask{
	width: 247px;
	height: 452px;
	position: relative;
	overflow: hidden;
	text-align: center;
	top: 0;
	left: 0px;
	z-index: 3;
	background-color: rgba(255, 231, 179, 0.3); 
    transition: all 0.3s linear;
    opacity: 0;
}

.mask h2{
	text-align: center;
	color: #0D57B6;
	position: relative;
	font-size: 1.5em;
	font-family: 'Oswald', sans-serif;
	padding: 15px;
	background: transparent;
	margin: 20px 0 10px 0;
	transform: scale(0);
	transition: all 0.3s linear;
    opacity: 0;
}

.mask p{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	text-align: center;
	position: relative;
	padding: 10px 15px;
	margin: 0;
	opacity: 0;
	color: #0D57B6;
    transform: scale(0);
    transition: all 0.3s linear;
}

.mask a.book{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 700;
	font-size: 1em;
	position: relative;
	text-align: center;
	text-decoration: none;
	margin: 45px auto 0;
	padding: 8px 12px;
	background-color: #0D57B6;
	color: white;
	opacity: 0;
	transform: scale(0);
    transition: all 0.3s linear;
}

.holiday:hover img{
	-webkit-transform: scale(3);  
    transform: scale(3);
    opacity: 0.7;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.family:hover img{
	-webkit-transform: scale(3) translateY(-70px);  
    transform: scale(3) translateY(-70px);
    opacity: 0.6;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.sup:hover img{
	-webkit-transform: scale(3);  
    transform: scale(3);
    opacity: 0.7;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.holiday:hover .surfcamp-title{
	transform: scale(0);
	opacity: 0;
}

.family:hover .surfcamp-title-b{
	transform: scale(0);
	opacity: 0;
}

.sup:hover .surfcamp-title{
	transform: scale(0);
	opacity: 0;
}



.holiday:hover .mask, .family:hover .mask, .sup:hover .mask{
	opacity: 1;
}

.holiday:hover .mask h2, 
.holiday:hover .mask p,
.holiday:hover .mask a.book{ 
    transform: scale(1);
    opacity: 1;
}

.family:hover .mask h2, 
.family:hover .mask p,
.family:hover .mask a.book{ 
    transform: scale(1);
    opacity: 1;
}

.sup:hover .mask h2, 
.sup:hover .mask p,
.sup:hover .mask a.book{ 
    transform: scale(1);
    opacity: 1;
}

#team{
	width: 100%;
	height: auto;
	min-height: 300px;
	position: relative;
	display: block;
	margin: 0 auto;
	padding-bottom: 177px;
	padding-top: 177px;
	/*padding: 0 15px;*/
	background: #AEFF00 url(../images/team-bg.png) center top no-repeat;
	background-size: auto 100%;
}

#central-team{
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
	position: relative;
	display: block;
	text-align: center;
}

#teacher{
	max-width: 680px;
	min-height: 245px;
	position: relative;
	margin: 0 auto;
	padding-right: 20px;
	text-align: center;
	display: inline-block;
}

.teach{
	width: 200px;
	height: 122px;
	margin: 0 auto;
	display: inline-block;
	position: relative;
	border: 1px transparent;
	vertical-align: middle;
	text-align: center;

}

.teach img{
	padding: 11px 0;
	display: block;
	height: 80px;
	width: 80px;
}

.box-left{
	float: left;
	width: 80px;
	height: 80px;
}

.box-right{
	float: right;
	width: 80px;
	height: 80px;
}



.teach p{
	padding-top: 30px;
}

#team-title{
	width: 314px;
	height: 141px;
	display: inline-block;
	position: relative;
	/*padding-left: 20px;*/
	margin: 50px auto 50px;
	color: #4A90E2;
}


#students{
	width: 100%;
	height: auto;
	min-height:895px;
	margin: 0 auto;
	position: relative;
	display: block;
	background: url(../images/bg-videos.jpg) 50% 50% no-repeat fixed;
	background-size: 2560px auto;
}

#central-videos{
	max-width: 1200px;
	height: 835px;
	margin:0 auto;
	position: relative;
	display: block;
}

.video-title{
	width: 314px;
	height: 141px;
	display: inline-block;
	position: relative;
	padding-left: 10px;
	padding-right: 50px;
	padding-top: 10%;
	margin: 180px auto 0;
	float: left;
	text-align: center;
	color: #AEFF00;
}

.video-wrap{
	
	max-width: 800px;
	width: 67%;
}

.video-thumb{
	max-width: 1200px;
	height: 160px;
	margin-bottom: 50px;
	display: block;
}

#thumb{
	width: 185px;
	height: 160px;
	margin: 0 auto;
}

#thumb img{
	width: 185px;
	height: 160px;
}

.slider-for{
	position: relative;
	padding-right: 20px;
	padding-top: 170px;
	display: inline-block;

}

.slider-for img{
	max-width: 800px;
	max-height: 452px;

}



#broadcast{
	height: 63px;
	width: 100%;
	background-color: white;
	padding-top: 94px;
	display: block;
	position: relative;
}



.broad{
	width: 220px;
	height: 44px;
	position: relative;
	float: right;
	margin-right: 20px;
	display: inline-block;
}

.broad img{
	width: 40px;
	height: 42px;
	float: left;
}

.broad p{
	color: #4A4A4A;
	text-align: right;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-right: 15px;
}

.weather{
	width: 248px;
	height: 36px;
	padding-top: 10px;
	margin-right: 30px;
	display: inline-block;
	float: right;
	position: relative;
}

#lanzarote{
	width: 100%;
	height: 622px;
	display: block;
	position: relative;
	background: url(../images/bg-lanzarote.jpg) center top no-repeat ;
	background-size: 2560px auto;
}

#central-lanz{
	max-width: 1200px;
	height: 622px;
	margin:0 auto;
	padding: 180px 0;
	text-align: center;
	position: relative;
	display: block;
}


#lanz-title{
	text-align: center;
	height: 153px;
    width: 300px;
	float: right;
	margin-right: 20px;
	margin-top: 40px;
	position: relative;
	display: inline-block;
	
}

#lanz-box{
	max-width: 360px;
	min-height: 104px;
	position:relative;
	float: left;
	text-align: justify;
	margin-top: 40px;
	padding-right: 20px;
	padding-top: 40px;
	margin-left: 20px;
	display: inline-block;
}

.bt-lanz{

	position: relative;
	width: 95px;
	padding: 2px 8px;
	float: left;
	border: 1px solid #4A4A4A;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	text-align: center;
	text-decoration: none;
	color: black;
	border: 1px solid black;
	top: 10px;
	margin-bottom: 25px;
	text-transform: uppercase;
}

.bt-lanz span{ font-weight: 700;}


#surf-shop{
	width: 100%;
	height: auto;
	margin: 0 auto;
	position: relative;
	display: block;


}

#central-shop{
	max-width: 1160px;
	height: 330px;
	margin: 250px auto;
	padding: 0 20px;
	text-align: center;
	position: relative;
	display: block;
}

.nav-ofertas{
	max-width: 850px;
	height: 329px;
	margin-right: 20px;
	display: block;
	position: relative;
	margin-left: 270px;

}

.box-ofertas{
	
	width: 250px;
	height: 329px;
	margin:0 auto;
	border: 1px solid gray;
}

.box-surf-shop{
	width: 152px;
	height: 329px;
	position: relative;
	margin-right: 20px;
	margin-left: 50px;
	display: block;
	float: left;

}

.box-surf-shop img{
	width: 152px;
	height: 240px;
	top: 0;
}

.products{
	width: 250px;
	height: 658px;
	margin: 0;
}

.products img{
	width: 250px;
	height: 329px;
}


#foot{
	width: 100%;
	min-height: 780px;
	background: #FBFAEC url(../images/bg-footer.jpg) no-repeat;
	background-position: 1000px -10%;
	background-size: 1072px 780px;
	position: relative;
	display: block;
	margin: 0 auto;
	box-shadow: 0 2px 4px rgba(0,0,0,.5) inset;
}

#central-foot{
	max-width: 1200px;
	min-height: 560px;
	margin: 0 auto;
	top: 85px;
	position: relative;
	display: block;

}

.txt-foot{
	max-width: 400px;
	min-height: 560px;
	display: inline-block;
	position: relative;
	float: left;
}

.txt-foot p{
	text-align: center;
	font-size: 1.4em;
	padding: 0 23px 11px 23px;
}

.txt-foot h3{
	font-family: 'Oswald', sans-serif;
	font-size: 1.5em;
	color: #4A4A4A;
	text-transform: none;
	text-align: center;
	padding: 23px 23px 10px 23px;

}

.social-foot{
	max-width: 300px;
	text-align: center;
	min-height: 60px;
	padding-left: 10px;
	margin: 0 auto 30px;

}

.face-foot{
	width: 40px;
	height: 40px;
	margin: 20px 15px 25px auto;
	display: inline-block;
	background-image: url(../images/face-foot.png);
	background-size: 120%;
	background-position: left bottom;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;

}

.twitter-foot{
	width: 40px;
	height: 40px;
	margin: 20px 15px 25px auto;
	display: inline-block;
	background-image: url(../images/twitter-foot.png);
	background-size: 120%;
	background-position: center bottom;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.gplus-foot{
	width: 40px;
	height: 40px;
	margin: 20px 15px 25px auto;
	display: inline-block;
	background-image: url(../images/gplus-foot.png);
	background-size: 120%;
	background-position: right bottom;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.flickr-foot{
	width: 40px;
	height: 40px;
	margin: 20px 15px 25px auto;
	display: inline-block;
	background-image: url(../images/flickr-foot.png);
	background-size: 120%;
	background-position: center bottom;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.face-foot:hover, .twitter-foot:hover, .gplus-foot:hover, .flickr-foot:hover{
	background-position: center top;
	background-size: 100%;
	
}

.logo-foot img{
	width: 70%;
	height: auto;
	padding: 7.5% 15% 4%;
}

.partners{
	width: 100%;
	height: 49px;
	margin-top: 20px;
}

.fesurf{
	width: 99px;
	height: 27px;
	margin-left: 70px;
}

.rip{
	width: 129px;
	height: 27px;
	margin-left: 15px;
}


.box-form{
	margin: 0 25px auto 45px;
	max-width: 334px;
	height: 500px;
	padding: 20px 20px;
	position: relative;
	display: block;
	float: left;
	
}

form{
	max-width: 300px;
	margin:0 auto;
	font-family:'Source Sans Pro', sans-serif;
	font-size:.99em;
	text-align: left;
	padding-bottom:40px;
}

label{
	color:#4A4A4A;
}

input,textarea{
	border: 1px solid #AEFF00;
	background-color: rgba(255,255,255,.5);
	width: 300px;
	min-height: 30px;
	display: block;
	margin-bottom: 20px;
	margin-top: 3px;
	
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	color:#4A4A4A;
}

textarea{
	min-height:100px;
	color:#4A4A4A;
}

input[type=submit]{
	padding:3px;
	margin-top:0;
	width:70px;
	float: right;
	vertical-align:middle;
	font-family: 'Oswald', sans-serif;
	font-size: 1.2em;
	font-weight: 700;
}

@media screen and (min-width: 1980px){
	#foot{
		background-position: right top;
	}

	#lanzarote{
		background-size: 100% auto;
	}

	#students{
		background-size: 100% auto;
	}

	#school{
		background-position: right 50%, left top;;
	}
}

@media screen and (max-width: 800px){

	#course{
		min-height: 250px;
	}

	#team{
		padding-top: 120px;
		padding-bottom: 90px;
	}

	.video-title{
		display: block;
		float: none;
		padding-top: 70px;
		padding-left: 20px;
		padding-right: 0;
		margin-top: 0px;
	}

	.slider-for{
		display: block;
		float: none;
		padding-top: 50px;
		padding-left: 20px;
	}



	.box-right{
		float: left;
	}

	#foot{
		background-position: 650px top;
		height: 1200px;
	}

	.bt-go{
		display: none;
	}


}

@media screen and (max-width: 600px){

	#team{
		padding-top: 80px;
		padding-bottom: 60px;
	}

	#broadcast{
		height: 127px;
		padding-top: 30px;
	}

	#central-lanz{
		padding-top: 90px;

	}

	#lanz-title, #lanz-box{
		float: none;
		margin-top: 20px;
	}

	#surf-shop{
		height: 775px;
	}

	#central-shop{
		min-height: 360px;
		margin-top: 100px;

	}

	.box-surf-shop{
		float: none;
		margin: 0 auto;
	}

	.nav-ofertas{
		margin: 0 auto;
		max-width: 300px;
	}

	.box-form{
		margin: 20px 0 0
	}



}

@media screen and (max-height: 360px){
	#sliderkalima_hype_container{
		margin-top: 40px;
	}
}