*, *:before, *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


@font-face {
    font-family: 'bebasregular';
    src: url('fonts/BEBAS___-webfont.eot');
    src: url('fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BEBAS___-webfont.woff') format('woff'),
         url('fonts/BEBAS___-webfont.ttf') format('truetype'),
         url('fonts/BEBAS___-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/**** Grid ****/

.grid_1 { width: 8.16326531%;  /*   80px ÷ 980px = 0.0816326531  */ }
.grid_2 { width: 18.36734694%; /*  180px ÷ 980px = 0.1836734694  */ }
.grid_3 { width: 28.57142857%; /*  280px ÷ 980px = 0.2857142857  */ }
.grid_4 { width: 38.7755102%;  /*  380px ÷ 980px = 0.387755102   */ }
.grid_5 { width: 48.97959184%; /*  480px ÷ 980px = 0.4897959184  */ }
.grid_6 { width: 59.18367347%; /*  580px ÷ 980px = 0.5918367347  */ }
.grid_7 { width: 69.3877551%;  /*  680px ÷ 980px = 0.693877551   */ }
.grid_8 { width: 79.59183673%; /*  780px ÷ 980px = 0.7959183673  */ }
.grid_9 { width: 89.79591837%; /*  880px ÷ 980px = 0.8979591837  */ }
.grid_10 { width: 100%;        /*  980px ÷ 980px = 100%          */ }

.container { 
	width: 100%; 
	max-width: 1020px; /*  980px + 40px de padding  */ 
	padding: 0 20px;
	margin: auto; 
}

.container :last-child { margin-right: 0!important; }

.indice-regras{ list-style-type: none;}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10 {
	margin-right: 2.04081633%;  /*  20px ÷ 980px = 0.0204081633  */
	margin-bottom: 2.04081633%; /*  20px ÷ 980px = 0.0204081633  */
	float: left;
	display: block;
}

img {

	max-width: 100%;
	height: auto;
}


/**** Tipografia ****/


body {
	font-family: 'Open Sans', sans-serif;
	line-height: 1.5em;
	background:#000;
	color: #fff;
}

h1 {
    margin: 2.04081633% 2.04081633% 0 0!important; /*  20px ÷ 980px = 0.0204081633  */
	font-size: 2.8125em; /*  45px ÷ 16px = 2.8125  */
}

h1 span {
	margin-top: 5%; /*  14px ÷ 280px = 0.05  */
	font-family: 'Oswald', sans-serif;
	color: #fff;
	display: block;
}

h2, h3 {
	color: #F58634;
	font-family: 'Oswald', sans-serif;
	margin: 0!important;
}

h2 { font-size: 45px; /*  40px ÷ 16px = 2.5  */ }

h3 { font-size: 1.875em; /*  30px ÷ 16px = 1.875  */ }



/**** Global ****/

.logo{ background: url(../images/logogaucho.png) no-repeat; width:239px; height:138px; text-indent:-9000px; position:relative; top:8px;}

#texttop{ color: #F38533; float:left; margin: 0; text-indent: 0; font-size: 18px; font-style: italic; margin: -32px 0 0 349px;  }

.item{overflow: hidden; height: 141px;}

.separadorlaranja{ float: left; width: 100%; margin: 5px 0 30px 0; height: 4px; position: relative; background: #F58634;}
.separadorpreto{ float: left; width: 100%; margin: 5px 0 30px 0; height: 4px; position: relative; background: #000;}
.separadorbranco{ float: left; width: 100%; margin: 25px 0 10px 0; height: 2px; position: relative; background: #fff;}

.www{ text-align: center; float: left; margin: 0 0 0 30px;}
.emailrodape{ float: right;}

header {
	background-color: #222;
	position: relative;
	background: url(../images/bgtopo.jpg) repeat-x;
	height:184px;
	width:100%;
}

.highlight {
	background-color: #f5f5f5;
}

.highlight .container div {
	margin-top: 6.12244898%; /*  60px ÷ 980px = 0.0612244898  */
	margin-bottom: 6.12244898%; /*  60px ÷ 980px = 0.0612244898  */
}

.highlight img { margin:0; }

article, aside {
	margin-top: 6.12244898%; /*  60px ÷ 980px = 0.0612244898  */
	margin-bottom: 6.12244898%!important; /*  60px ÷ 980px = 0.0612244898  */
}

footer {
	margin-top: 1.08163265%; /*  40px ÷ 980px = 0.0408163265  */
	padding-top: 5.12244898%; /*  60px ÷ 980px = 0.0612244898  */
	padding-bottom: 20px;
}

.fright { float: right; }

.laranja{background: #F58634; float: left; width: 100%; margin: 0 0 35px 0; padding: 15px 0 0 0;}







/**** Conteúdo ****/

a {	text-decoration: none; color:#F58634;  }

a:hover, a:focus { text-decoration: underline; }


			
.logo { margin: 25% 0 0; /*  20px ÷ 80px = 0.25  */ }

.highlight p { font-size: 1.125em; /*  18px ÷ 16px = 1.125  */	margin: 0; }

.embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; width: 100% } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.phones{float: right; color:#F38533; font-size:20px; margin:-150px 0 0 0; text-align:right; font-weight:600; text-align: left;}
.redesemail{float: right; color:#fff; font-size:14px; margin:-55px 0 0 0;}
.redesemail img{ width:42px; margin:5px 14px 0 12px;}

#banner{ background:url(../images/bgbanner.png) no-repeat; height:556px;  position: relative; top: -14px;}

.galeria{ color:#F58634; font-family: 'bebasregular'; }

footer{
	background: url(../images/toprodape.jpg) no-repeat top;
	float: left;
	min-height: 200px;
	width: 100%;

}

#servicos{ padding: 0; float: left;  margin: 0;}
#servicos li{ width: 300px; list-style: none; float: left; min-height: 225px; margin: 0 1% 18px 1%;}
#servicos li p{ float: left; margin: -68px 0 0 14px; position: relative; width: 270px; font-size: 14px;}
#servicos li p#mergulho{ color: #4CA5FF;}
#servicos li p#surf{ color: #FEB81F;}
#servicos li p#alimentacao{ color: #FF4C4C;}
#servicos li p#wake{ color: #26FF92;}
#servicos li p#sup{ color: #D8D800;}
#servicos li p#passeios{ color: #99E5FF;}


#formcontato{  float:left;  margin:20px 0 15px 0; text-align: left !important;  width: 90%; }

#formcontato fieldset{ border:0; width: 100%;}

#formcontato fieldset ul{ padding: 0 !important;}

#formcontato fieldset ul li{ list-style:none; margin:0 0 2px 0;}

#formcontato fieldset ul li label{ width:100%; font-size:16px; color: #fff;  }

#formcontato fieldset ul li input{ behavior: url(PIE.htc); border-radius: 2px; -moz-border-radius: 2px ; -webkit-border-radius: 2px ; border: 1px solid #A17C34; font-family: arial; color:#000; width:100%; height:27px; margin: 5px 0 0 0; padding:0 10px; background: #fff ;  }

#formcontato fieldset ul li textarea{ border: 1px solid #302B25; width:100%; min-width:100%; color:#000; min-height:76px; margin: 5px 0 0 0; behavior: url(PIE.htc); border-radius: 2px; -moz-border-radius: 2px ; -webkit-border-radius: 2px ;  background: #fff no-repeat;  padding:10px; }

#btenviarcontato{ width:100% !important; height:29px !important; float: left;  border: 0 !important;  font-size: 12px;  text-align: center; color: #fff;   cursor:pointer; background: #F58634 no-repeat !important; }

.localizacao{ color:#fff;}



@media screen and (max-width: 920px)  {
#texttop{ width: 200px;     margin: -43px 0 0 279px;
}

}

@media screen and (max-width: 768px) and (min-width: 640px) {

	.notablet { display: none; }
	header .grid_1 { width: 15%; margin: 5% 5% 5% 17.5%!important; }
	header .grid_3 { width: 45%; margin: 6% 17.5% 5% 0!important; }
	.logo { margin: 0; }
	header .grid_6 { width: 100%; border-top: 1px solid #333; margin-bottom: 5%; }
	h1 { font-size: 3.5em; }
	nav li { width: 25%!important; text-align: center; margin-top: 5%; }
	h3 { font-size: 1.5em; }
	.highlight .grid_7 { width: 100%; margin-right: 0; }
	#texttop{     margin: -44px 0 0 282px;}

}

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

	.nophone { display: none; }
	header .grid_1 { width: 15%;  }
	header .grid_3 { width: 45%; margin-top: 5%!important;}
	header .grid_6 { width: 115%; margin: 20px -20px 0px; }

	footer{ padding: 86px 0 0 0 !important;}


	.js #nav.closed {
		display: none;
	}
	

	#menu {
		display: block;
		float: right;
		width: 8%;
	}

	#menu img {
		margin-top: 105%;
	}

	nav li { 
		width: 100%!important; 
		margin: 0!important; 
		text-align: left;
	}

	nav li a {
		padding: 15px 0 15px 20px;
		border-top: 1px solid #333;
		display: block;
		font-size: 1em;
	}

	nav li a:hover,
	nav li a:focus {
		text-decoration: none;
		background-color: #333;
	}

	h3 { font-size: 2em; }
	#main .grid_6,
	#main .grid_4,
	footer .grid_8,
	footer .grid_2 { width: 100%; }
	footer .grid_8 { text-align: center; }

	footer .fright { float: none; overflow: auto; margin-top: 1em; text-align: center; }

	footer a {
		float: none;
		display: inline-block!important;
	}

	footer a.fb { 
		margin-right: 10px; 
	}
	#texttop{  display: none;}

}


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

	#texttop{ margin: 19px auto 0 auto !important; text-align: center; display: block; float: none;}
	h3 { font-size: 1.65em; }
	h4 {margin-top: 65px !important;}
	nav a { font-size: 1.5em; }
	.contato{ width: 100% !important;}
	.localizacao{ width: 100% !important;}
	#banner{ height: 100% !important; top:25px !important;}
	footer{ padding: 82px 0 0 0 !important;}
	.phones{  
margin: 15px auto 0 auto;
text-align: center;
float: none;}
	header .phones{ margin: 0px auto 0 auto;font-size: 15px;}
    header .redesemail{ display: none;}
    .redesemail{ margin: 0 auto; width: 200px;}
    .www{float: none; margin: 0;}
    .emailrodape{ float: none; text-align: center;}
    .logo{margin: 0 auto !important; }
    .owl-next { display: none !important;}
    .owl-prev{   display: none !important;}
    .item{height: 350px}
    .laranja{    margin: 30px 0 35px 0;}
    header{     height: 248px;}
    #servicos li{ width: 97%;}
    #servicos li p {
    margin: -55px 0px 0px 14px;
    width: 80%;
    font-size: 11px;
}