/*Vista Praia Beach Resort 2018 Stylesheet*/


/* Include padding in the calculated widths*/
* , *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Set all default margins & padding to zero */
* {margin:0;padding:0}

/* FONTS USED

Hdgs, Links, Captions
font-family: 'Nanum Gothic', sans-serif;

Paragraph, Tables, Lists
font-family: 'Roboto', sans-serif;

*/

html , body {
	font-family: 'Roboto', sans-serif;
	font-size:100%;
	color:#666666;
	height:100%;
}

table {
width:96%;
margin:1.5em auto;
border:#000000 thin solid;
}

th , td {
	font-family: 'Roboto', sans-serif;
	font-size:1em;
	text-align:center;
	padding:1.5em 3px;
}

td {
	font-size:0.875em;
	padding:1em 3px;
}

tr {

}

table tr:nth-child(odd) {
background-color:#CCCCCC;
}

img {
width:100%;
height:auto;
}

p , ul , ol {
width:100%;
font-size:1em;
text-align:justify;
line-height:1.5;
margin:0 auto 1em auto;
}

ul , ol {
width: 90%;
margin:1.5em auto;
}

ul li , ol li {
font-size:0.875em;
line-height:1.5;
margin-bottom:0.875em;
}

a {
font-family: 'Nanum Gothic', sans-serif;
text-decoration:none;
color:#333333;
text-align:center;
font-size:0.875em;
}

a:hover /*, a:focus*/ {
background-color:#006633;
color:#999999;
transition: all 250ms linear 0s ;
-webkit-transition: all 250ms linear 0s ;
-moz-transition: all 250ms linear 0s ;
-o-transition: all 250ms linear 0s ;
}

home_links a {
font-size:12px;
font-weight:bold;
}

h1 , h2 , cap , more {
display:block;
width:auto;
text-align:center;
font-family: 'Nanum Gothic', sans-serif;
color:#000000;
font-size:1.2em;
margin:0 auto 1.5em auto;
}

row > h1 {
width:100%;
text-align:center;
}

h2 {
font-size:1em;
margin-top:1em;
line-height:1.5;
}

/* START PRELOADER */
loading_holder {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display:flex;
		flex-direction:column;/**/
		justify-content: center;
		align-items: center;
		background:url(images/bg_tr_wh.png);
		z-index:100;
		}
		
		loading_holder img {
		width:16px;
		height:auto;
		}

		@keyframes ani_loa
		 {
		 0% {font-size:0.675em ;opacity:0.3;color:#CCCCCC;}
		 25% {font-size:0.725em ;opacity:0.4;color:#999999;}
		 50% {font-size:0.775em ;opacity:0.5;color:#666666;}
		 75% {font-size:0.825em ;opacity:0.6;color:#333333;}
		 100% {font-size:1em ;opacity:0.7;color:#000000;}
		}
		 @-webkit-keyframes ani_loa /* Safari and Chrome */
		 {
		 0% {font-size:0.675em ;opacity:0.3;color:#CCCCCC;}
		 25% {font-size:0.725em ;opacity:0.3;color:#999999;}
		 50% {font-size:0.775em ;opacity:0.5;color:#666666;}
		 75% {font-size:0.825em ;opacity:0.6;color:#333333;}
		 100% {font-size:01em ;opacity:0.7;color:#000000;}
		}
		@-moz-keyframes ani_loa /* Firefox */
		 {
		 0% {font-size:0.675em ;opacity:0.3;color:#CCCCCC;}
		 25% {font-size:0.725em ;opacity:0.4;color:#999999;}
		 50% {font-size:0.775em ;opacity:0.5;color:#666666;}
		 75% {font-size:0.825em ;opacity:0.6;color:#333333;}
		 100% {font-size:1em ;opacity:0.7;color:#000000;}
		}

		loading_holder loading_text {
		color:#FF3300;
		font-style:italic;
		border:#666666 thin dotted;
		text-align:center;
		opacity:0.5;
		margin-bottom:10px;
		 animation: ani_loa 2s;
		 -webkit-animation: ani_loa 2s; /* Safari and Chrome */
		  -moz-animation: ani_loa 2s; /* Firefox */
		animation-iteration-count: infinite;
		 -webkit-animation-iteration-count: infinite;
		 -moz-animation-iteration-count: infinite;
		 }

/* CLOSE PRELOADER */

holder_slides_intro {
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
z-index:0;
}

holder_slides_intro img {
position:absolute;
top:0;
left:0;
}

/*
a.skip_intro {
position:fixed;
bottom:25px;
right:25px;
display:block;
height:auto;
padding:3px;
color:#000000;
font-size:11px;
font-weight:bold;
text-align:center;
text-shadow:#ffffff 1px 1px 3px;
text-decoration:none;
border: #000000 thin solid;
border-radius:3px;
background-color:#CCCCCC;
z-index:1000;
}
*/

skip_holder{
	display:flex;
	height:100%;
	justify-content:flex-end;
	margin-right:3%;
	align-items:center;
}

a.skip_intro , reservation_holder {
/*position:fixed;
bottom:25px;
right:25px;
display:block;*/
height:auto;
padding:3px;
color:#000000;
font-size:11px;
font-weight:bold;
text-align:center;
text-shadow:#ffffff 1px 1px 3px;
text-decoration:none;
border: #000000 thin solid;
border-radius:3px;
background-color:#CCCCCC;
z-index:1000;
}

reservation_holder{
position:fixed;
background:#ffffff;
padding:10px;
top: 10px;
right:10px;
}

#pic_1 {
z-index:7;
}
#pic_2 {
z-index:6;
}
#pic_3 {
z-index:5;
}
#pic_4 {
z-index:4;
}
#pic_5 {
z-index:3;
}
#pic_6 {
z-index:2;
}
#pic_7 {
z-index:1;
}

holder_page {
position:fixed;/**/
display:flex;
left:25px;
bottom:25px;
width:96%;
justify-content:flex-start;
align-items:flex-end;
z-index:100;
}

holder_page > * {
margin:0 1.5% 0 0;
opacity:0;
}

logo_intro {
min-width:100px;
background:url(images/bg_tr_wh.png);
box-shadow: 3px 3px 3px #333333;
}

holder_page > *:nth-child(2) {
background:url(images/bg_tr_wh.png);
color:#000000;
font-size:11px;
padding:10px;
line-height:1.5;
text-shadow:#ffffff 1px 1px 3px;
box-shadow: 2px 2px 1px #333333;
}

bg_pg {
display:flex;/**/
height:100%;
position:relative;
margin:0;
z-index:0;
justify-content:center;
align-items: center;
}

bg_pg img {
position:absolute;
top:0;
left:0;
width:100%;
min-height:100%;
z-index:1;
}

blok_text {
display:flex;
position:absolute;
flex-flow: column nowrap;
top:45%;
justify-content:center;
align-items: center;
z-index:1000;
/*border:#333333 thin solid;
justify-content:center;
align-items:center;*/
}

bg_pg h1 , bg_pg a {
flex:0 0 1;
margin:0;
}

bg_pg blok_text > a , a.rotated_90_cw{
font-size:1.5em;
font-weight:bold;
color:#000000;
text-shadow:#666666 2px 2px 7px;
 -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
        transform: rotate(90deg);
}

bg_pg a:hover {
background-color:transparent;
}

bg_pg:nth-of-type(n) {

}

container_page {
display:flex;
flex-flow: column nowrap;
background-color:#CCCCCC;
padding:10px;
justify-content:space-between;
padding-top:150px;
height:auto;
}

header {
position:fixed;
top:0;
left:0;
display:flex;
width:80%;
height:auto;
/*background-color:#FFFFFF;*/
background-image:url(images/bg_tr_blk.png);
margin: 0 10% 0 10%;
padding:10px 5% 10px 5%;
border-radius: 0 0 0.5em 0.5em; 
justify-content:space-between;
align-items:center;
transition: all 250ms linear 0s ;
-webkit-transition: all 250ms linear 0s ;
-moz-transition: all 250ms linear 0s ;
-o-transition: all 250ms linear 0s ;
z-index:1000;
}

logo {
flex:0 0 auto;
}

logo a:hover {
background-color:transparent;
opacity:0.5;
}

nav {
margin-left:3em;
display:flex;
justify-content:space-between;
flex:1 1 0;
}

nav a , nav_footer {
font-weight:bold;
padding:0.25em;
/*margin-right:1em;*/
}

main {
display:flex;
width:80%;
margin:0 auto 0 auto;
flex-flow:column nowrap;
padding-top:1.5em;
padding-bottom:1.5em;
/*background-color:#999999;*/
border-radius: 0.5em 0.5em 0 0;
align-items:center;
justify-content:center;
}

/*main p {
width:90%;
}*/

main ul , main ol { 
width:100%;
margin-top:0;
margin-bottom:0;
}

blok_row {
display:flex;
width:100%;
flex-flow:row wrap;
align-items:center;
justify-content:center;
}

blok_row > holder_item {
display:flex;/**/
width:100%;
/*justify-content:center;align-items:center;*/
height:auto;
min-height:100px;
}

holder_item > * {
display:flex;
margin-right:auto;}

/*blok_row div {
width:auto;
min-width: 100px;
min-height:100px;
background-color:#0000FF;
}*/

row {
display:flex;
width:100%;
flex-wrap:wrap;
height:auto;
min-height:100%;
justify-content:space-between;
align-content:center;
padding:3em 10% 5em 10%;
}

picture {
padding-bottom:2em;
}

row > a:first-child {
flex:1 1 100%;
margin-bottom:10%;
}

row > div {
flex:0 0 30%;
background-color:#CCCCCC;
border-radius:0.5em;
overflow:hidden;
padding:0.5em;
margin:1em auto 1em auto;
}

row > div {
display: flex;
flex-direction:column;
}

.form-group,input.form-control , textarea.form-control , select , select option , select option[data-default] {
width:100%;
color:#000000;
font-family: 'Roboto', sans-serif;
padding-top:0.75em;
padding-left: 0.5em;
padding-bottom:0.75em;
}

pic > img {
border:#000000 thin dotted;
}

cap  {
text-transform:uppercase;
font-size:0.875em;
margin:1em auto 1em auto;
font-weight:bold;
}

more {
padding-top:2em;
font-size:1.0em;
font-weight:bold;
}

footer {
display:flex;
padding:1em 10%;
flex-flow:column;
background-color:#333333;
align-items:center;
}

footer a , copyright {
color:#CCCCCC;
font-size:0.775em;
}

footer > a  img {
width:150px;
height:auto;
background-color:#FFFFFF;
margin:2em auto;
}

footer > a  img:hover {
background-color:transparent;
}

nav_footer {
display:flex;
width:100%;
flex-flow:row;
justify-content:space-between;
}

/* GALLERY COMPONENTS */

holder_thbs , holder_pics {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items : center;
width:100%;
}

holder_thbs {
opacity:1;
transition: opacity , 500ms ;
-webkit-transition:  opacity , 500ms  ;
-moz-transition:  opacity , 500ms  ;
-o-transition:  opacity , 500ms  ;
z-index:10;
}

holder_thumb {
flex: 0 1 135px;
margin-right:15px;
margin-bottom:15px;
}

holder_thumb img {
box-shadow: 1px 1px 1px #666666;
}

holder_pics {
position:absolute;
left:0;
top:0;
padding-top:25px;
padding-bottom:100px;
background-color:#333333;
opacity:0;
transition: opacity , 500ms ;
-webkit-transition:  opacity , 500ms  ;
-moz-transition:  opacity , 500ms  ;
-o-transition:  opacity , 500ms  ;
}

main_pics {
/*display:flex;*/
display:none;
flex-flow: row wrap;
height:100%;
width:auto;
justify-content:center;
align-items:flex-end;
transition: opacity , 500ms ;
-webkit-transition:  opacity , 500ms  ;
-moz-transition:  opacity , 500ms  ;
-o-transition:  opacity , 500ms  ;
}

main_pics > * {
flex: 0 1 auto;
}

main_pics > *  > a > img {
max-width:40px;
}

holder_close_butt {
flex: 0 0 100%;
}

holder_close_butt > a > img {
margin-right:auto;
}

main_pics > *:nth-child(3) {
/*flex: 0 1 50px;
text-align:right;
flex-basis:auto;*/
max-height:480px;
width:auto;
margin:0.5em;
box-shadow: 2px 2px 3px #666666;
transition: opacity , 500ms ;
-webkit-transition:  opacity , 500ms  ;
-moz-transition:  opacity , 500ms  ;
-o-transition:  opacity , 500ms  ;
}


holder_prev_butt , holder_next_butt , holder_close_butt{
/*flex: 0 0 40px;*/
text-align : center;
}

holder_prev_butt a:hover , holder_next_butt a:hover , holder_close_butt a:hover{
background-color:transparent;
}

holder_close_butt {
}

/*holder_prev_butt img , holder_next_butt img {
width:50px;
}*/


/*Preloader*/

holder_thumbs , holder_pictures img {
/* width: 600px;
  height: 450px;*/
  background: url(loading.gif) 50% no-repeat;
/*  border: 1px solid black;
  border-radius: 5px;*/
}

.ui-datepicker {
font-family: 'Nanum Gothic', sans-serif;

	width: 17em;
	padding: .2em .2em 0;
	display: none;
    background-color:#333333;  
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	font-size:0.875em;
	line-height: 1.2em;
	text-align: center;
    color:#FFFFFF;
    background:#666666;  
}
.ui-datepicker table {
	width: 100%;
	font-size: .7em;
	border-collapse: collapse;
   	margin: 0 0 .4em;
    color:#000000;
    background:#333333;    
}
.ui-datepicker td {

	border: 0;
	padding: 1px;

    
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .8em;
	text-align: right;
	text-decoration: none;
}


/* ADDON CLASSES */

.header_onscroll {
width:100%;
margin: -5px 0 10px 0;
opacity:1;
background-color:#FFFFFF;
border-radius:0; 
box-shadow: 1px 1px 17px #666666;
}

.logo_onscroll {
width:50px;
}

.bg_pg_onscroll {
opacity:0.7;
}

.make_invisible{
opacity:0;
transition: opacity , 500ms ;
-webkit-transition:  opacity , 500ms  ;
-moz-transition:  opacity , 500ms  ;
-o-transition:  opacity , 500ms  ;
z-index:0;
}

.make_visible{
display:flex;
height:auto;
opacity:1;
transition: opacity , 500ms ;
-webkit-transition:  opacity , 500ms  ;
-moz-transition:  opacity , 500ms  ;
-o-transition:  opacity , 500ms  ;
z-index:1100;
}/**/


.fade_out , .fade_in {
opacity:0;
transition: opacity , 1000ms ;
-webkit-transition:  opacity , 1000ms  ;
-moz-transition:  opacity , 1000ms  ;
-o-transition:  opacity , 1000ms  ;
}

.fade_in {
opacity:1;
}

.fade_in_top{
opacity:1;
z-index:1100;
transition: opacity , 1000ms ;
-webkit-transition:  opacity , 1000ms  ;
-moz-transition:  opacity , 1000ms  ;
-o-transition:  opacity , 1000ms  ;
}

.nar_cen {
text-align:center;
line-height:2;
padding:auto 15%;
}

.ver_sta {
align-self:flex-start;
}

.ver_cen {
align-self:center;
}

.ver_end {
align-self:flex-end;
}

div .nar_cen {
width:100%;
}

a.rotated_90_cw {
width:100%;
text-align:center;
 -ms-transform: rotate(90deg); /* IE 9 */
 -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
 transform: rotate(90deg);
}

.selected {
border:#006633 thin dotted;
}

cap:nth-of-type(2){
margin-top:auto;
text-transform:capitalize;
}

row#first div#mid {
display:none;}


/*START MEDIA QUERIES*/

@media all and (max-width: 1800px) {
	
row#first div#mid {
display:none;}

}


@media all and (max-width: 1200px) {

header {
width:90%;
margin: 0 5% 0 5%;
}

row {
padding:3em 2.5% 5em 2.5%;
}

main {
width:90%;
}

footer {
padding:0.75em 2.5%;
}

nav_footer{
flex-wrap: wrap;
}

row#first div#mid {
display:none;}

}

@media all and (max-width: 900px) {

holder_page {
left:1%;
width:98%;
}

logo_intro {
min-width:80px;
}

nav a {
font-size:0.8em;
}
/*Make all Containers 90%, next media break pt @ 768?*/

header {
width:98%;
margin: 0 1% 0 1%;
padding:5px 2.0% 5px 2.0%;
}

logo {
margin-top:15px;
flex:0 0 80px;
margin-right:15px;
}

nav {
margin-left:0.5em;
flex-wrap: wrap;
}

main {
width:94%;
}

row#first div#mid {
display:none;}


}

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

/*Padding/top margin of first element, Gallery large pics, font size for nav links, bottom padding/margin for both navs*/

body {
font-size:12px;
}

holder_page {
left:15%;
bottom:25px;
width:70%;
align-items:flex-start;
}

holder_page > *{
flex:3;
}

holder_page > *:nth-child(2) {
/**/align-self:stretch;
flex:2;
}

home_links {
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
align-content:space-between;
}

home_links a {
font-size:12px;
line-height:2;
flex:1 1 50%;
}

a.skip_intro {
font-size:10px;
width:50px;
left:15px;
bottom:15px
}

row {
flex-flow:column nowrap;
/*height:auto;
min-height:100%;
justify-content:space-between;
align-content:center;
padding:3em 10% 5em 10%;*/
}

row h1:nth-of-type(1){
margin-top:120px;
}

row > div {
flex:0 0 1;
}

row > div#mid {
width:100%;
}

.nar_cen {
font-size:12px;
}

nav a , footer a{
font-size:12px;
margin-bottom:10px;
}

footer a {
margin-right:12px;
}

main_pics {
display:none;
width:90%;
height:auto;
}

main_pics > *:nth-child(3) {
max-height: auto;
max-width:96%;/**/
}

holder_pics.fade-in-top {
padding-bottom:1100px;
}

row#first div#mid {
display:none;}

}