/*@font-face {
  font-family: 'bn_bold';
  src: url("bn_bold.otf"); }
@font-face {
  font-family: 'honey';
  src: url("HoneyScript-Light.ttf"); }
*/
*{
	font-family: Helvetica;
}
.font-zero {
  margin: 0px;
  font-size: 0px; }

.relative{
	position: relative;
}
.centro{
	position: absolute !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 80%;
	text-align: center;
}
.center{
	text-align: center !important;
}
.justify{
	text-align: justify !important;
}

.header{
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	height: 825px;
	width: 100%;
}

.logo{
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}


.filtro-header{
position: absolute;
top: 0;
left: 0;
height: 530px;
width: 100%;
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 3%, rgba(255,255,255,0.7) 32%, rgba(229,229,229,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 3%,rgba(255,255,255,0.7) 32%,rgba(229,229,229,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 3%,rgba(255,255,255,0.7) 32%,rgba(229,229,229,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00e5e5e5',GradientType=0 ); /* IE6-9 */
}

nav{
	/*transition: 1s;*/
}
.menu{
	margin-top: -225px;	
}
.menu a{
	color: #fff;
}
.menu a:hover{
	color: #ccc;
}
.menu h2{
	text-transform: uppercase;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 3px;
    text-shadow: 2px 1px 1px rgba(0, 0, 0, 1);
}

.riscos img{
	max-width: 200%;
	width: 100%;
	position: absolute;
	right: 0;
}

@media(min-width: 900px){
	.fixed{
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    z-index: 2;
	    background: #00376A;
	    padding: 10px;
	    box-shadow: 0px 2px rgba(0, 0, 0, 0.7);
	    transition: 1s;
	}
	.fixed h2{
		font-weight: 100 !important;
	}
	.fixed .menu{
		margin-top: 0 !important;
		transition-delay: 1s;
	    transition: 1s;
	}
	#servicos .is-6{
		padding: 0px 30px;
	}
}
header{
	margin-bottom: 200px;
}

main{
	padding-top: 170px;
}

main h2{
	font-size: 27px;
	text-transform: uppercase;
	color: #00376A;
	letter-spacing: 3px;
	font-weight: 500;
	margin-bottom: 40px;
}

main h3{
	font-size: 20px;
	color: #00B1AD;
	letter-spacing: 1px;
	margin-bottom: 15px;
	font-weight: 500;
}

main p{
	font-size: 16px;
	color: #555555;
	font-weight: 500;
	text-align: justify;
}

#sobre{
	margin-bottom: 15px;
}

#sobre img{
	border-radius: 50%;
	filter: grayscale(1);
	width: 80%;
	height: auto;
	transition: 0.3s;
}
#sobre img:hover{
	filter:grayscale(0);
	transition: 0.3s;
}

#sobre ul {
    list-style: inherit;
    font-weight: 100;
    padding: 5px 0px 5px 50px;
}

#historia .cover{
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	height: 885px;
	width: 100%;
}	
#historia .cover .centro{
	top: 40%;
}
#historia h2, #historia p{
	color: #fff;
}

#historia .is-6{
	padding: 0px 30px;
}

#mvv .circulo{
	background: #00376A;
	border-radius: 50%;
	width: 192px;
	height: 192px;
}
#mvv ul {
    list-style: inherit;
    font-weight: 100;
    padding: 5px 0px 5px 50px;
}
#mvv .ativo{
	background: #00B1AD;
	transition: 0.3s;
}
#mvv .circulo:hover{
	background: #00B1AD;
	cursor: pointer;
	color: #00376A;
	transition: 0.3s;
}
#mvv .circulo:hover h2{
	color: #00376A;
	transition: 0.3s;
}
#mvv .dotted{
	width: 50%;
	height: 2px; 
	border-style: dotted; 
  	border-color: rgba(213, 126, 0, 1) ;
  	border-image-source :url('../../images/dot.png');
  	border-image-slice: 38;
  	border-image-repeat: round;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#mvv .circulo h2{
	color: #fff;
	transition: 0.3s;
}

#mvv p{
	margin-top: 45px;
}

#mvv .is-6{
	padding: 0px 30px;
}

.bl_content{
	display: none !important;
}

.wc_active{
	display: flex !important;
}

#servicos .cover{
	background-size: cover;
	background-position: top center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	height: 235px;
	width: 100%;
	margin: 50px 0px;
}	
#servicos img{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin-bottom: 25px;
}
#servicos p{
	margin: 25px 0px 50px 0px;
}
#embarcacoes{
	padding-top: 270px;
}
#embarcacoes p{
	margin:0px 0px 55px 0px;
}
#embarcacoes .barco{
	height: 450px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 0;
	cursor: pointer;
}
#embarcacoes h4{
	font-size: 32px;
	font-weight: 500;
	text-align: center;
	color: black;
}
#embarcacoes h5{
	color: #00376A;
	font-size: 25px;
	font-weight: 500;
	text-align: left;
    margin-top: 25px;
    margin-bottom: 25px;
}
#embarcacoes hr{
    background-color: black;
    height: 2px;
    margin: 1px;
    margin-bottom: 4px;
}
#contato{
	margin-top: 10px;
}
#contato .cover{
	background-size: cover;
	background-position: top center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	height: 730px;
	width: 100%;
	padding-top: 70px;
}
#contato h2{
	padding: 0px 0px 70px 0px;
	color: #fff;
	margin: 0;
}
#contato h3{
	letter-spacing: 2px;
	color: #fff;
	font-weight: 100;
	font-size: 19px;
	margin-bottom: 50px;
}
#contato input{
	border: 1px solid #fff;
	outline: none !important;
	border-radius: 3px;
	padding-left: 8px;
	background:transparent;
	color: #fff;
	margin-bottom: 15px;
	height: 35px;
	width: 80%;
	font-weight: 200;
	margin-left: 10%;
	transition: 0.3s;
}
#contato input:focus{
	background: #00a8ad;
	transition: 0.3s;
}
#contato textarea{
	border: 1px solid #fff;
	outline: none !important;
	border-radius: 3px;
	padding-left: 8px;
	padding-top: 8px;
	background:transparent;
	color: #fff;
	width: 80%;
	height: 120px;
	margin-left: 10%;
	transition: 0.3s;
	resize: none;
}
#contato textarea:focus{
	background: #00a8ad;
	transition: 0.3s;
}
#contato input[type="submit"]{
	border: 2px solid #fff !important;
	cursor: pointer;
	padding-left: 0;
	text-align: center;
	float: right;
	width: 120px;
	margin-right: 10%;
	margin-top: 15px;
	transition: 0.3s;
}
#contato input[type="submit"]:hover{
	background: #fff;
	color: #00B1AD;
	transition: 0.3s;
}
#contato input[type="submit"]:focus{
	background: #fff;
	color: #00B1AD;
	transition: 0.3s;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}
#contato p{
	letter-spacing: 2px;
	color: #fff;
	font-weight: 100;
	font-size: 16px;
}
#contato p:first-child{
	margin-bottom: 55px;
}
#contato i{
	float: left;
	font-size: 23px;
	color: #fff;
	margin-right: 20px;
	margin-top: 3px;
}
#contato .azul{
	background: #00B1AD;
	margin:5px !important;
	padding: 30px 50px;
}

.trava{
	overflow: hidden;
}

.modal-card-head{
	margin-bottom: 0 !important;
}
.modal p{
	margin: 0 !important;
}
span.wpcf7-not-valid-tip{
	display: none !important;
}
.ajax-loader{
    float: right !important;
    margin-top: 25px !important;
    margin-right: -200px !important;
}
div.wpcf7-validation-errors{
	float: right;
	margin: 0 !important;
}

footer{
	background-color: #00376A;
	padding: 30px;
}
footer p{
	color: #fff;
	letter-spacing: 3px;
	font-weight: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}
footer i{
	color: #23d160;
	margin-top: 5px;
}
footer a{
	color: #23d160;
}
footer a:hover{
	color: #fff;
}
@media(max-width: 880px){
	main{
		padding-top: 0; 
	}
	.header{
		height: 480px;
		background-attachment: inherit;
		background-position: right;
	}
	.menu{
		margin-top: -250px;
	}
	.filtro-header{
		height: 230px;
	}
	.container{
		max-width: 85%;
		margin: auto;
	}
	.centroM{
		position: relative !important;
		width: 100% !important;
		top: inherit !important;
		left: inherit !important;
		transform: inherit !important;
	}
	#historia .cover .centro{
		top: 125px !important;
	}
	#mvv .circulo{
		width: 80px;
		height: 80px;
	}
	#mvv h2{
		font-size: 10px;
	}
	#historia .cover{
		height: 985px;
	}
	#mvv{
		margin-top: -150px;
	}
	#mvv .dotted{
		display: none;
	}
	#mvv .is-5{
		margin-top: 0;
	}
	#servicos .cover{
		background-attachment: inherit;
	}
	#embarcacoes{
		padding-top: 120px;
	}
	#embarcacoes .barco{
		height: 300px;
	}
	#embarcacoes .barco h3{
		font-size: 20px;
	}
	#embarcacoes .columns{
		margin-right: 0;
	}
	#contato p{
		font-size: 11px;
	}
	#contato input{
		width: 100% !important;
		margin-left: 0;
		float: inherit !important;
	}
	#contato textarea{
		width: 100%;
		margin-left: 0;
		float: inherit;
	}
	#contato .cover{
		height: 1260px;
	}
	.ajax-loader{
	    float: right !important;
	    margin-top: -75px !important;
	    margin-right: -25px !important;
	}
	div.wpcf7-validation-errors{
		margin-top: -60px !important;
		padding: 0 !important;
	}
	#contato input[type="submit"]{
		margin-bottom: 50px;
	}
	footer{
		padding: 45px 0px;
	}
	#contato i{
		font-size: 14px;
	}
	#contato .azul{
		padding: 20px !important;
	}
}











































#embarcacoes .barco .filtro{
	position: absolute;
	width: 100%;
	height: 0px;
	bottom: 0px;
	background: rgba(0,177,173,0.79) ;
	animation: filtroI 1s ease-in-out;
	animation-fill-mode: forwards;
	transition: 1s;
}
#embarcacoes .barco:hover .filtro{
	animation: filtro 1s ease-in-out;
	animation-fill-mode: forwards;
	transition: 1s;
}
@keyframes filtro {
    from {height: 45px;}
    to {height: 100% ;}
}
@keyframes filtroI {
    from {height: 100%;}
    to {height: 45px ;}
}

#embarcacoes .barco .filtro h3{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	transition: 1s;
	width: 100%;
	text-align: center;
	font-weight: 100;
	text-transform: capitalize;
	font-size: 14px;
}
#embarcacoes .barco .filtro p{
	position: absolute;
	top: 60px;
	left: 50%;
	display: none;
	transform: translate(-50%,-50%);
	color: transparent;
	text-align: center;
	width: 100%;
	animation: filtropI 1s ease-in-out;
	animation-fill-mode: forwards;

}
#embarcacoes .barco:hover .filtro p{
	animation: filtrop 1s ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: 0.5s;
	display: block;
	transition: 0.5s;
}

@keyframes filtrop {
    from {top:60px;color:transparent;}
    to {top:50%;color:#fff;}
}
@keyframes filtropI {
    from {top:50%;color:#fff;}
    to {top:60px;color:transparent;}
}
#embarcacoes .barco .filtro a{
	position: absolute;
	top: 85%;
	left: 50%;
	transform: translate(-50%,-50%);
	border: 2px solid transparent;	
	border-radius: 50%;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}
#embarcacoes .barco:hover .filtro a{
	position: absolute;
	top: 85%;
	left: 50%;
	transform: translate(-50%,-50%);
	border: 2px solid #fff;	
	padding: 15px;
	border-radius: 2px;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
/*    -webkit-transition-delay:  1.5s ;
    -moz-transition-delay:  1.5s ;
    -o-transition-delay:  1.5s;
    transition-delay: 1.5s ;*/
}
@keyframes filtroa {
    from {background:transparent;}
    to {background:#fff;}
}
@keyframes filtroab {
    from {background:transparent;height: 0px;}
    to {background:#fff;height: 13px;}
}
@keyframes filtroaa {
    from {background:transparent;width : 0px;}
    to {background:#fff;width: 13px;}
}
#embarcacoes .barco:hover .filtro a:after, #embarcacoes .barco:hover .filtro a:before{
	display: none;
}
#embarcacoes .barco:hover .filtro a:before{
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translate(-50%);
    display: block;
    width: 3px;
    height: 0px;
    background: transparent;
    content: '';
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
	animation: filtroab 0.5s ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
}
#embarcacoes .barco:hover .filtro a:after {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translate(-50%);
    width: 0px;
    height: 3px;
    display: block;
    background: transparent;
    content: '';
	animation: filtroaa 0.5s ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
}

div.wpcf7-mail-sent-ng{
	clear: both;
}
@media(min-width: 1500px){
	#mvv{
		margin-top: 130px;
	}
}