@import url(bootstrap.min.css);
@import url(bootstrap-theme.min.css);
@import url(http://fonts.googleapis.com/css?family=Wallpoet);
@import url(http://fonts.googleapis.com/css?family=Overlock);

body {background: #eee;}



/***responsive navigation***/
/* Basic Styles */
#top_nav {background: #206ccc; padding: 0}
nav {height: 80px; width: auto;  font-size: 21px; position: relative; top: 0;}
nav ul {margin: auto; height: 80px; max-width: auto; no-repeat;}
nav li {display: inline; float: right; margin-top: 10px; min-height: 70px;}
nav ul li.active {background: #eee; border-radius: 8px 8px 0 0;}
nav ul li.active a {color: #206ccc;}
nav a {color: #fff; display: inline-block; text-align: right; text-decoration: none; padding:15px 30px 15px 0px;}
nav a:hover {color: #fff; text-decoration:underline;}

nav a#pull {display: none;}
nav select {margin-right:30px;}
nav img {text-align: left;}
div#logo_nav_container {float:left;width:260px; position:absolute; right:880px;left:0;top:0px;margin-right: auto;margin-left:auto;z-index: 999;}

@media screen and (max-width: 992px) {
	div#logo_nav_container {right:auto;}
	nav {font-size: 17px;height: 60px;margin-top:0;}
	nav ul {height:60px;}
	nav li {margin-top: 3px;}
	nav a {padding:14px 14px 14px 0px;}
	#logo_nav_container img {height:80px;}
	nav select {margin-right:20px;}
}

@media screen and (max-width: 767px) {
	nav {width: 100%; height: auto; border-bottom: 0; position:relative;}
	nav ul {display: none; height: auto; padding: 0;}
	nav li {width: 100%; float: right; position: relative; border-bottom: 1px solid #262626; margin-top: 0px; min-height: 10px;}
  	nav a {text-align: left;width: 100%;text-indent: 25px;background: #2e2e2e; padding: 14px; font-size: 16px;}
  	nav a:hover {background:#444;color:#fff;}  	
	nav a#pull {display: block; background-color: #206ccc; width: auto; position: relative;	max-width: 1140px;padding:5px;}
	nav a#pull:after {content:"";background: url(../images/M2/nav-icon.png) no-repeat; width: 30px; height: 30px; color: #FFF; display: inline-block; position: absolute; right: 10px; top: 5px; margin-top: 5px}
	li#nav_lang  {display:none;}
	div#logo_nav_container {display:none;} 
	nav ul li.active a {color: #fff;}

}

@media screen and (min-width:1201px) {
	nav ul {width: 1200px; margin:auto;}
}

/****header image intro page****/
div#header_image {width:auto; height:450px; background: url(../images/M2/jetski_intro.jpg) #000 center no-repeat; background-size: 100% 100%}

@media screen and (max-width: 1300px) {
	div#header_image {background-size: cover;}
}


#header_container {padding: 80px 0 0 0;max-width: 1100px;margin:auto}

#header_image h1 {margin:0; padding:0px; font-family: Wallpoet; font-size: 34px}

#header_image button{
	margin:20px 20px 20px 0;
border:1px solid #18529c; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #206CCC; background-image: -webkit-gradient(linear, left top, left bottom, from(#206CCC), to(#1D61B8));
 background-image: -webkit-linear-gradient(top, #206CCC, #1D61B8);
 background-image: -moz-linear-gradient(top, #206CCC, #1D61B8);
 background-image: -ms-linear-gradient(top, #206CCC, #1D61B8);
 background-image: -o-linear-gradient(top, #206CCC, #1D61B8);
 background-image: linear-gradient(to bottom, #206CCC, #1D61B8);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#206CCC, endColorstr=#1D61B8);
}

#header_image button:hover{
  border:1px solid #123d74;
 background-color: #1955a0; background-image: -webkit-gradient(linear, left top, left bottom, from(#1955a0), to(#164a8c));
 background-image: -webkit-linear-gradient(top, #1955a0, #164a8c);
 background-image: -moz-linear-gradient(top, #1955a0, #164a8c);
 background-image: -ms-linear-gradient(top, #1955a0, #164a8c);
 background-image: -o-linear-gradient(top, #1955a0, #164a8c);
 background-image: linear-gradient(to bottom, #1955a0, #164a8c);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#1955a0, endColorstr=#164a8c);
}




@media screen and (max-width:767px) {
	div#header_image {background: #eee; height:auto; }
	#header_container {padding:25px 10px 0 10px; text-align: center;}
}

.box_1 {width:95%; max-width: 300px;margin:auto; background: #fff; padding-bottom:20px; margin:0 auto 40px auto;}
.box_1 p, .box_1 h2 {padding:10px; text-align: center;}
.products_intro img {width:100%;}
.products_intro  {text-align: center; padding: 60px 0  40px 0 ;background: #eeeeee}
.products_intro .inside {text-align: center;}



#intro_more {text-align: center; background: #fff; padding: 50px 0 100px 0}
#intro_more p, #intro_more h2, #intro_more a {text-align: center;}
.collage {background: url(../images/M2/collage_more_activities_in_tenerife2.jpg) center top; height:250px;}
.intro_more_inside {text-align: center;}
.intro_more_inside .btn {margin: 20px 0 40px 0}


#footer {padding: 30px 0 30px 0; background: #ccc;}

#wsprod_container {background: #eee; padding: 30px 0 60px 0;}
.wsprod {padding: 25px 0 25px 0; margin:35px 0 0 0; background: #fff;}


/**** external products navigation****/
.nav_container_ext_prod {margin:0 0 20px 0;}
.nav_container_ext_prod li a {background: #fff;}
.nav_container_ext_prod li a:hover {background: #ff8;}

/**external products***/
#external_products {padding-top:60px; max-width:1200px;}
.prod_block {padding: 20px; background: #fff;margin: 0 0 40px 0;}
.prod_block h2 {margin-top: 0}
.img_prod_ext img {width:100%;}


.prod_thumb {text-align: center; border-radius: 5px; margin-bottom:30px;}
.prod_thumb img {width:100%; border-radius: 5px 5px 0 0;}
.prod_thumb a {text-decoration:none;}
.prod_thumb h4 {background: #fff;margin:0; padding:8px 2px 10px 2px; font-size:15px; border-radius:0 0 5px 5px}
.prod_thumb a:hover h4 {background: #ff8}


.contact {max-width:1200px;margin: 40px auto 30px auto;}
iframe.map {width:100%; height: 480px; margin:40px 0 0 0; border:none;}
.bookings {text-align: center; margin-top: 30px;}
.bookings iframe {width: 100%; max-width:580px; height:800px;margin-top: 30px}


.videos {margin-top: 30px}
.videos h2 {margin-top: 30px}
.videos iframe {width:100%; height:349px;}
@media screen and (max-width: 1200px) {
	.videos iframe {height:300px;}
}
@media screen and (max-width: 992px) {
	.videos iframe {height:350px;}
}