@charset "utf-8";
/* CSS Document */


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

@font-face {
   font-family: SerenFont;
  src: url(/includes/assets/Rom_Ftl_Srif.ttf) format("truetype");
	}
	
@font-face {
   font-family: RotatorFont;
  src: url(/includes/assets/Cantarell-Regular.ttf) format("truetype");
	}
	
@font-face {
   font-family: Canterell;
  src: url(/includes/assets/Cantarell-Regular.ttf) format("truetype");
	}


*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;   
}

html {
    position: relative;
    min-height: 100%;
}

body {
	font-family: Canterell, Arial, "Lucida Grande", sans-serif; 
	line-height: 1.4em;
	background-color: white;
	color: #000066;
	margin: 0;
}

button {
	margin 0;
	padding: 0;
	border: 0;
}
#everythingAndFooter {
	min-height: 100%;
    height: 100%;
    margin: 0 auto -188px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .roomForFooter {
 /*    height: 188px; .roomForFooter must be the same height as .footer */
}
p {
	margin-bottom:10px;
	font-size: 18px;
	line-height: 22px;
}

p.zeroHeight {
	margin-bottom: 0;
	font-size: 1px;
	line-height: 1px;
}
a {
	color: #000060;
}

a:hover {
	color: red;
}
/* Container */

#pageContainer{
	position: relative;
	margin-left: 0;
	margin-right: 0;

}

 .SerenOuterBox {
	width:100%;
	position:absolute;
	background-color:white;
	z-index: 999999;   /* this added 12/21/17 because menu when hovering disappeared when over the XPRO-SLIDER container, support for ENVATO/CODECANYON xpro-slider found solution -- it fixed problem  */
	}  

#fixedTopHeader {
	position: fixed;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100px;
	background-color: white;
	z-index: 999;
}

#fixedTopHeader2018 {
	position: fixed;
	top: 0px;
	left: 0;
	width: 100%;
	height: 110px;
	background-color: white;
	z-index: 999;
}
.leftThird {
	float: left;
	width: 33%;
	padding-left: 119px;
	border-right:medium #000000;
	padding: 0;
	margin: 0;
}

.middleThird {
	float: left;
	width: 33%;
	border-right:medium #000000;
	display: block;
	margin: 0;
	clear: none;
}


.rightThird {
	float: left;
	width: 33%;
	border: none;
	padding: 0;
	margin: 0;
	clear: none;
}
.SerenLogo {
	background-color:white;
	width:119px;
	height:120px;
	z-index:999;
	display:block;	
	background-image:url(/images/MenuItems/2018LogoOnly.svg);
	background-repeat:no-repeat;
	position:fixed;
	top: 0;
	left: 0;


background-size:contain;
background-position:center;
}
.SerenLogo2018 {
	background-color:white;
	width:119px;
	height:120px;
	z-index:999;
	display:block;	
	background-image:url(/images/MenuItems/2018LogoOnly.svg);
	background-repeat:no-repeat;
	position:fixed;
	top:0;
	left: 3px;
	
	background-size:contain;
	background-position:center;
	float: left;
}
.CostaRicaSerenAdv {
	position:fixed;
	top: 0;
	left: 119px;
	height:80px;
	display: block;
	}

.CostaRicaSeren2018 {
	position: relative;
	top:0;
	height: 80px;
	display: block;
	float: left;
	padding-top: 15px;
	padding-left: 119px;
}
.SerenFontstyle {
	font-family: "SerenFont", Verdana, Tahoma;
	font-size:40px;
	/* text-shadow: 1px 1px 0 #FFFFFF, 2px 2px 0 #000000; 	*/	
	color:#00098F;
	padding-top: 10px;
	position: fixed;
	left:119px;
	top:10px;
	
   }
.SerenFontstyle2018 {
	font-family: "SerenFont", Verdana, Tahoma;
	font-size:40px;
	/*  text-shadow: 1px 1px 0 #FFFFFF, 2px 2px 0 #000000; 	*/	
	color:#00098F;
	/* padding-top: 10px;  */
	position: relative;
	display: block;
	
	
	
   }
.CostaRicaFont {
	color:#FF0000;
	text-shadow: none;

	font-style: normal;
	font-size:36px;
	position: fixed;
	left: 119px;
	top: 55px;
	}
.CostaRicaFont2018 {
	font-family: Canterell, Arial, "Lucida Grande", sans-serif;
	color:#FF0000;
	text-shadow: none;
	font-weight: 600;
	font-style: normal;
	font-size:36px;

	padding-top: 10px;
	display: block;
	
}



.AdventuresNature2018 h1 {
	font-size: 14px;
	padding-top:10px;

	font-weight: 4600;
	font-style: italic;
	text-align: center;
}

.phoneNumbers {
	font-size: 12px;
	font-weight: 600;
	text-align: right;
	margin-left: auto;
	padding-right: 10px;
	padding-top: 10px;

}

.phoneNumbers2018 {
	font-size: 16px;
	font-weight: 600;
	text-align: right;
	margin-left: auto;
	padding-right: 10px;
	padding-top: 10px;
	position: relative;
	float: right;
}

#afterHeader {
	position: relative;
	margin-top: 124px;
	
}

#topOfPage {
	position: relative;
}
/* Headings*/

h1{
	font-size: 2.4em;
	padding: 0;
}

h1.PgSubject  {
	float: left;
	font-size: 16px;
	clear: right;
	color: white;
}

.clear-fix {

    clear: both;
    line-height: 1px;

}









	

   



	

	
/* Rotator */




.bannerRotatorContainer {
	display:block;
	z-index: 100;
	}

.banner-rotator {
	display:block;
	position:relative;
	}

.banner-rotator .xpro-item-layer h3 {
	font-family: "RotatorFont", cursive;
	font-weight:100;
	font-size:36px;
}
.banner-rotator .xpro-item-layer H1 {
	font-family: "RotatorFont", cursive;
	font-size:60px;
	font-weight:200;
	font-style: italic;
	}
	
.banner-rotator .xpro-item-layer H2 {
	font-family: "RotatorFont", cursive;
	font-size:45px;
	font-weight:200;
	}
	
#myRotator {
max-width: 1920px;
max-height:540px;

}	



.xpro-previewbox-container {
    
    top: 100px;
  
}





/*  MAIN CONTENT STYLING   ***********************************/

.page {					/*  the PAGE excludes the top fixed header and rotator */
	max-width: 1320px;
	width: 90%;
	margin: 10px auto 0;  /*  leave TOP space for the non-movingSEREN-OUTEBOX - site header above  */
}

.padH1TitleOnLeft  {
	margin-left:102px;
	padding-top: 15px;
	}	
	
	
.headerTitleFont {	
	clear: both;
	width:auto;
	text-align:left;
	padding-top:9px;
	margin-top:0px;
	font-size:35px;
	font-style:normal;
	font-weight:bold;

	}	

h1 { 
	font-size: 38px; 
	line-height:1.1em;
    font-weight: normal;
	text-align:center;
	
	}
h2 { 
		font-size: 25px; 
		margin-left: 20px; 
		margin-right: 20px;
		line-height: 28px; 
		font-style:italic; 
		font-weight:normal;
		padding-top:10px;
	}
h3 { 
	font-size: 18px; 	
	margin: 8px 0px; 

	line-height:22px;
	 }

.biggerOpenText .darkBackground {
	font-size: 120%;
	line-height: 120%;
}

.img {
	width:100%;
}
.imgShadow {
	
    background-color: beige;
     box-shadow:20px 20px 10px grey; 
    margin-bottom: 50px;
    float: left;
    width: 100%;
}

.columnscontainer {
	width: 100%;
	max-width: 1310px;
	padding: 10px;
	margin: auto;

	float: left;
}

.indexPg-columnscontainer {
	width: 73%;
	max-width: 1310px;
	padding: 10px;
	margin: auto;

	float: left;
}
.columnscontainer H2 {
	clear: both;
}
.twocolumns { 
		width:100%;
		clear:both;
		}

.twocolumns .leftside {
		margin-top:50px;
		float:left;
		width: 40%;
	}



.leftside50 {
		margin-top:50x;
		float:left;
		width: 48%;
}

.rightside50 {
	margin-top:50px;
	float:left;
	padding-left:50px;
	width:50%;
}

.twocolumns .rightside {
	margin-top:50px;
	float:left;
	padding-left:50px;
	width:58%;

	
	}
.twocolumns .leftsideAccolade {
	margin-top: 50px;
	float: left;
	width: 25%;
}	
.leftsideAccolade img {
	width: 100%;
}
.twocolumns .rightsideAccolade {
	margin-top: 50px;
	float: left;
	padding-left: 20px;
	width: 73%;
}
.threecolumns { 
		width:100%;
		clear:both;
		}

.columnText {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 60px; /* Chrome, Safari, Opera */
    -moz-column-gap: 60px; /* Firefox */
    column-gap: 60px;
    -webkit-column-rule: 1px solid #000066; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid #000066; /* Firefox */
    column-rule: 1px solid #000066;
}

.columnBreakBefore {
	
	break-before: always;
}
.threecolumns .leftside {
		margin-top:15px;
		float:left;
		width: 40%;
	padding-right: 10px;
	}
	
	

.threecolumns .rightside {
	margin-top:15px;
	float:left;
	padding-left:20px;
	width:30%;
	}


.inlineImg {
	margin: 0px 0px 0px 0px;

}

.imgRight, .imgRightVertical {
	float: right;
	margin: 0;
	padding-left: 10px;
	width:40%;
	display: inline;
}

.imgRightVertical {
	width:50%;
}
.imgRight, .imgRightVertical img {
	width:100%;
}

.imgRight .caption {
	padding:10px 5px;
	margin-top: -5px;
}
.leftside img {
  width: 100%;

  max-width: 900px;
  float: left;
  clear: both;
}

.leftside50 img {
  width: 100%;
  max-width: 900px;
  float: left;
  clear: both;
}
.secondLeftsideImage {
	padding-top: 10px;
	}

.caption {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em; /* 10px; */
	color: #000066;
	margin: 0px;
	width: 100%;
	background-color: #C3C3DB;
 
	text-align: center;
	padding: 5px 10px;
	font-style: italic;
	clear: left;
}
.photoSeries {
	width: 100%;
}
.photoInSeries {

	margin: 0px;
}
/*  from https://success.crowdflower.com/hc/en-us/articles/202703155-CSS-Guide-to-Enlarge-Images-on-Hover:
Add the attribute, class="thumbnail" to each image element that you would like to enlarge on hover so that the element looks something like this:
<img src="[your hosted image URL]" class="thumbnail" height="100" width="100" /> 
*/
.thumbnail:hover {
    position:relative;
    top:-200px;
    left:-200px;
    width:350px;
    height:auto;
    display:block;
    z-index:999;
}
.imgFloatRight {
	float: right;
	padding: 5px 0px 5px 5px;
}

.addIndent {
	padding-left: 15px;
}
.legendText {
	font-weight:bold;
	font-size: 20px;
}


.tallImageColumn {
	float: right;
	display: table;
	width: 23%;
	padding-right: 10px;
}

.tallImageColumn figure img {
	width: 100%;
	height: auto;
}
figcaption {
	margin-top: -5px;
	padding: 5px;
	background-color: #C3C3DB;
}

/*  * * * * * * * *   CSS for LODGING page and lodging popup page  * * * * * * * * */
body.LodgePopup {
		margin-top: 70px;
		border-top: medium #000066;
}

.pageLodging {
	max-width: 1920px;
}
li.lodgeItem  {
	width: 23.5%;
}

ul.bullet li {
	list-style-type: disc;
}

dt {
	display: block;
	float: left;
}

dd {
    margin: 0 0 0 40px;
    display: block;
    float: left;
	clear: both;
	width: 100%;
}



#cboxTopCenter, #cboxTopLeft, #cboxTopRight {
	margin-top: 100px;
}

.smallerText {
	font-size:14px;
	
}

.xpro-slider-info h3 {
	font-weight: bold;
}

.xpro-slider-info p {
	padding-left: 10px;
}

.linkTextUnderline {
	text-decoration: underline;
	font-weight: bold;
}
.spaceAtBottom {      /*for P-versions with RISK included, modify spaceAtBottom so shows up in Colorbox  */
	padding-bottom: 12px;
}

.reduceSpaceAtBottom {      /*for P-versions with RISK included, modify spaceAtBottom so shows up in Colorbox  */
	margin-bottom: -12px;
}

.iframe {
	text-decoration: underline;
	font-weight: bold;
}

.h1small {
	font-size: 24px;
	font-style: italic;
	
}