/* ------------------------------------------------------------------------
	Stuff
------------------------------------------------------------------------- */

	:root {
	  --enable-gradients: true;
	}
	
 	html, body {
		position:relative; 
		height: 100%;
		min-height: 100%;
		margin: 0;
	}
 
	body, input, select, textarea {
		font-family: Raleway, 'Open Sans', Sans-Serif;
		font-size: 1.4rem;
		font-weight: 300;
		line-height: 1.8rem;
		letter-spacing: 0.06em;
	}
	
    ul { list-style-type: none; margin: 0; padding: 0; }
	
 	p { margin: 1.5rem 0; }

	h1 {
		font-size: 2.5rem;
		line-height: 3rem;
		font-weight: 300;
	}
	h2 {
		font-size: 2.2rem;
		line-height: 2rem;
		font-weight: 200;
	}
	h3 {
		font-size: 2.0rem;
		line-height: 2rem;
		font-weight: 200;
	}
	h4 {
		font-size: 1.9rem;
		line-height: 2rem;
		font-weight: 200;
	}
	h5 {
		font-size: 1.7rem;
		line-height: 2rem;
		font-weight: 200;
	}

	.container-fluid {
		padding: 4rem;
	}

	.text-black { color: #000; }
	.bg-black 	{ background-color: #000; opacity: 1; }
	.bg-grey 	{ background-color: rgba(255,255,255, .1);  }
	.hide		{ display: none; }
	
	.ih756 {
		max-height: 250px;
	}

/* ------------------------------------------------------------------------
	Intro
------------------------------------------------------------------------- */

	.overlay {
		display: flex;
		justify-content: center;
		align-items: center;    
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.introTop	{ z-index: 2; }
	.introBot	{ z-index: 1; }
	.visible	{ opacity: 1; }
	.hidden		{ opacity: 0; }

	.intro {
		display: inline-block;
		pointer-events: none;
		position: relative;
		width: 29px;
		height: 29px;
		background-color: none;
		margin: 0;
		opacity: 0;
	}

	.introLine {
		top: 50%;
		left: 10%;
		height: 0px;
		width: 5px;
		border: solid 1px #fff;
		-webkit-animation: introLine 1s 0.3s both;
		   -moz-animation: introLine 1s 0.3s both;
				animation: introLine 1s 0.3s both;
		transition: width 0.5s ease;
		
	}

	.introLine::after {
		content: '';
		display: block;
		width: 200px;
		position: absolute;
	}



.line1, .line2 {
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: white;
 		-webkit-animation: drawtLine 1s 0.3s both;
		   -moz-animation: drawtLine 1s 0.3s both;
				animation: drawLine 1s 0.3s both;
	transform-origin: 50% 50% 0px;  
}

.line1 { top: 45%; }
.line2 { top: 55%; }

@keyframes drawLine {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}				
}

/* ------------------------------------------------------------------------
	Background Image Slider
------------------------------------------------------------------------- */

	/* Swiper slider */

    .s1, .s2, .s3 { width: 100%; height: 100%; }
    .s2, .s3 { min-height: 400px; }

	.s901, .s902, .s903, .s904, .s905, .s906, .s907, 
	.master01, .master02, .master03, .master04, 
	.praia01, .praia02,	.praia03, .praia04,	.praia05, .praia06, .praia07, .praia08 {
		background-size: cover !important;
		background-position: center center !important;
		overflow: hidden;
	}

	.s901 { background: url(../img/slider/s901.jpg); }	
	.s902 { background: url(../img/slider/s902.jpg); }	
	.s903 { background: url(../img/slider/s903.jpg); }	
	.s904 { background: url(../img/slider/s904.jpg); }	
	.s905 { background: url(../img/slider/s905.jpg); }	
	.s906 { background: url(../img/slider/s906.jpg); }	
	.s907 { background: url(../img/slider/s907.jpg); }	

	.praia01 { background: url(../img/praias/praias-gaibu.jpg); }	
	.praia02 { background: url(../img/praias/praias-calhetas.jpg); }	
	.praia03 { background: url(../img/praias/praias-paiva.jpg); }	
	.praia04 { background: url(../img/praias/praias-itapuama.jpg); }	
	.praia05 { background: url(../img/praias/praias-xareu.jpg); }	
	.praia06 { background: url(../img/praias/praias-enseada.jpg); }	
	.praia07 { background: url(../img/praias/praias-paraiso.jpg); }	
	.praia08 { background: url(../img/praias/praias-suape.jpg); }	

	.master01 { background: url(../img/namoa-suite4a.jpg); }	
	.master02 { background: url(../img/namoa-suite4b.jpg); }	
	.master03 { background: url(../img/namoa-suite4c.jpg); }	
	.master04 { background: url(../img/namoa-suite4d.jpg); }	
	

	.title-pos { position: absolute; height: auto; background-color: rgba(255,255,255, .2); }
	
	.p1 { top: 5%; right: 0; }
	.p2 { top: 5%; left: 0; }
	.p3 { bottom: 8%; left: 0; }
	.p4 { bottom: 8%; right: 0; }

.slide-title {
	font-size: 4rem;
	line-height: 1;
	max-width: 90%;
	color: #eee;
	z-index: 100;
	text-transform: uppercase;
	letter-spacing: 0rem;
	font-weight: normal;
}

.sub-title {
	font-size: 2rem;
	line-height: 1;
	max-width: 90%;
	color: #fff;
	z-index: 100;
	text-transform: none;
	font-weight: normal;
}

svg { font-weight: 200; width: 100%; height: 150px; margin: 2rem 0; }

/* ------------------------------------------------------------------------
	Carousel
------------------------------------------------------------------------- */

	.symbol:before {content:"\201C"; font:700 10rem Georgia; color:#ccc; line-height:3rem;   }
	.carousel .carousel-item { height: 32rem; resize: horizontal; }	

/* ------------------------------------------------------------------------
	Hospedagem
------------------------------------------------------------------------- */

	.card-img-overlay h2 { position: absolute; left: 1rem; bottom: 1rem;  } 
	.icon-small, .logo-small, .logo-small img { height: 80px; }
	
/* ------------------------------------------------------------------------
	Praias
------------------------------------------------------------------------- */




/* ------------------------------------------------------------------------
	Footer
------------------------------------------------------------------------- */

	.namoa-footer {
		background: #000;
		color: white;
		font-size: 1.1rem;
	}	

	.namoa-footer ul li {
		display: table;
		vertical-align: top; 
		margin: 0.5rem 0;
	}
			
	.namoa-footer ul li i, .namoa-footer ul li .text {
		display: table-cell;
		vertical-align: top;
	}
	
	.namoa-footer ul li i {
		width: 3rem;
	}

	.subtitle { font-size: 1.7rem; line-height: 2rem; font-weight: 200; text-transform: uppercase; }
	.copyright { line-height: 1.2rem; border-top: 1px solid rgba(255,255,255, .5); } 
  

/* ------------------------------------------------------------------------
	Navigation
------------------------------------------------------------------------- */

 
	.menu__toggler {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 100;
		height: 50px;
		width: 50px;
		outline: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background: rgba(52, 58, 64, 0.5);
	}
	.menu__toggler span,
	.menu__toggler span::before,
	.menu__toggler span::after {
		position: absolute;
		content: '';
		width: 25px;
		height: 2.5px;
		background: #fafafa;
		border-radius: 20px;
		transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
	}
	.menu__toggler span::before { top: -8px; }
	.menu__toggler span::after { top: 8px; }
	
	.menu__toggler.active > span {
		background: transparent;
	}
	.menu__toggler.active > span::before, .menu__toggler.active > span::after {
		background: #fff;
		top: 0px;
	}
	.menu__toggler.active > span::before {
		-webkit-transform: rotate(-225deg);
				transform: rotate(-225deg);
	}
	.menu__toggler.active > span::after {
		-webkit-transform: rotate(225deg);
				transform: rotate(225deg);
	}

	/*
	* 	SLIDING MENU PANEL
	*/ 

	.menu {
		position: fixed;
		display: block;
		bottom: 0; right: -20rem;
		visibility: hidden;
		background: rgba(0, 0, 0, 1.0);
		border-radius: 0; 
		width: 19rem;
		height: 40rem;
		overflow: hidden;
		z-index: 99;
		transform: translateX(0);
		transition: visibility .2s ease-in-out, transform .2s ease-in-out;
	}

	.menu.show{
		visibility: visible;
		transform: translateX(-100%);
	}

	.nav-brand img { height: 80px; width: 80px; }

	.nav-item { width: 100%; }

	.nav-item a {
		display: block;
		padding: 0.9rem 2rem;
		font-size: 1.7rem;
		text-decoration: none;
		text-transform: uppercase;
		color: #eee;
	}
	.nav-item a:hover,
	.nav-item a:active,
	.nav-item a:focus {
		color: #000;
		background: #eee;
	}

	.menu.active { right: 0; }

	/* Menu Overlay*/

	.nav-overlay {
		height: 100%;
		z-index: 30;
		position: fixed;
		bottom: 0;
		right: 0;
		opacity:0;
		background-color: rgba(34, 34, 34, 0.6);
		transition:opacity .2s linear, visibility .1s, width 1s ease-in;
		visibility:hidden;
	}
	.nav-overlay.show {
		transition: opacity .5s ease, width 0s;
		opacity: 1;
		width: 100%;
		visibility: visible;
	}

	.social {
		position: absolute;	
		left: 2rem;
		bottom: 2rem;
	}	
	.social i { margin: 0 1rem 0 0; }
	.social a:link,
	.social a:hover {
		text-decoration: none;
	}
	
	.fa-facebook-f { color: #3b5998; }
	.fa-tripadvisor { color: #589442; }
	.fa-twitter { color: #55acee; }

/* ------------------------------------------------------------------------
	Media Queries
------------------------------------------------------------------------- */

@media only screen and (max-height: 45rem) and (orientation: landscape) {
	.menu { height: 20rem; width: 40rem; right: -40rem; }

	.nav { flex-direction: row; width: 28rem; padding: 2.5rem 0 2.5rem 1.0rem; }
	
	.nav-brand { float: left;  margin: 1.5rem 2rem; }
	.nav-item { width: 50%; margin: 0; padding: 0; }
	
	.social { left: 2rem; }	
  
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {

	h1 { font-size: 3.0rem; line-height: 4rem; font-weight: 300; }
	h2 { font-size: 2.5rem;	line-height: 3rem; font-weight: 100; }
	
	.carousel .carousel-item { height: 22rem; }	

}