/* general */
body { font-size:12pt;color:#fff;
background:url('http://tierramagica-costarica.com/terranova/img/weltraum.jpg') no-repeat center center fixed; 
-webkit-background-size: cover;-moz-background-size:cover;-o-background-size: cover;background-size: cover; }

#bgmain { position:fixed;z-index:-1;left:50%;transform:translate(-50%,0);height:100%;max-width:1200px;min-height:500px;background-color:#000;opacity:0.5;}
#main { max-width:1200px;height:auto;text-align:center;padding-bottom:10px;display:non }

#pageheader { width:100%;height:120px }
#green { padding:0px;display:none }
#navidiv { display:inline-block }
#navidiv-es { display:inline-block }

#s1,#s2,#s3:focus { outline: none; }
#footer { color:#fff }

/* inserted boxes */
.box { width:200px;height:100px;border:solid 1px #69F;margin:5px }


/* fonts */
.sanspro { font-family: 'Source Sans Pro', sans-serif; }
.mavenpro { font-family: 'Maven Pro', sans-serif; }
.courgette { font-family: 'Courgette', cursive; }
.josefin { font-family: 'Josefin Sans', sans-serif; }


/* topics */
h1 { font-size:18pt;color:#fff;font-family:'Source Sans Pro',sans-serif;letter-spacing:0.04em }
h2 { font-size:14pt;color:#fff;margin:5px 0px;font-family:'Source Sans Pro',sans-serif; }


/* links */
a { color:#fff;letter-spacing:0.04em }
a:hover { text-decoration:underline }
a.adr { color:#fff;text-decoration:none;font-weight:normal }


/* forms */
form { display:table }
.label { padding:5px }
.styleform { border:solid 1px #f00;min-width:200px;min-height:100px }
.styleform .label { background-color:#ddd }


/* special */
textarea,button,submit,input { outline:0px }
#socialmedia { width:560px }
.social { width:32px }
#footertel { display:inline }
.lang { margin:1px;width:25px;height:15px;cursor:hand;cursor:pointer }




/* images, bigimg */
.mainimg { width:100% }

.verticalcenter { 
position:relative;top:50%;transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);	
-o-transform:translateY(-50%);
}

.w320 { max-width:100% }
.imgleft { float:left;margin:5px 10px 5px 0px }
.imgcenter { position:relative;left:50%;transform:translateX(-50%) }
.imgright { float:right;margin:5px 0px 5px 10px }
.bigimg { transform:translate(-50%,-50%) }


/* clickable class, clear */
.clx { cursor:hand;cursor:pointer }
.clear { border:solid 0px;display:block;width:100% }


/* colors */
.cbrown { color:#a9631d; }
.bgbrown { background-color:#a9631d; }


/* hyphen */
hr { 
display:block;
margin-top:0.5em;margin-bottom:0.5em;
margin-left:auto;margin-right:auto;
border-style:inset;border-width:1px; 
}


/* button */
.but1 {
border:solid 1px;display:inline-block;padding:4px 7px;
-moz-border-radius: 10px;border-radius: 10px;
background:#D4B249;color:#FFF;font-weight:bold
}




/* gallery */
.slideshow,.gallery {
position:relative;z-index:0;overflow:hidden;max-width:100%;
background-size: 150px;background-repeat:no-repeat;background-position:center;
}
.galtmb { max-width:150px;margin:5px;max-height:120px }

.galleryimg { 
max-width:100%;max-height:100%;z-index:-1;
margin:auto;position:absolute;top:0px;bottom:0px;left:100%;
}

.bggallery { position:absolute;width:100%;height:100%;top:0px;left:0px;z-index:-2 }
.capt { max-width:100% }
.thumbs { margin:5px;background-color:#666;-moz-border-radius: 10px;border-radius: 10px; }

.butgostop,.butbak,.butfwd { position:absolute }
.butgostop { left:5px;height:30px;display:none;bottom:5px }

.butbak,.butfwd { height:26px }
.butbak { right:32px;bottom:5px }
.butfwd { right:5px;bottom:5px }

.bakfwd { width:40px;margin-top:5px }


/* Media */
.mediacontainer { width:360px;height:240px;background-color:#999;max-width:100%; }
.mediacontainer.left { float:left;margin:5px 10px 5px 0px }
.mediacontainer.right { float:right;margin:5px 0px 5px 10px }
.mediacontainer.center { margin-left:auto;margin-right:auto }




/* RESPONSIVE */
@media (max-width:1200px) {
    #s2 { float:none;width:60%;max-width:60%;margin-left:auto;margin-right:auto }
	#s3 { float:none;width:60%;max-width:60%;margin-left:auto;margin-right:auto; }
    #green { margin-top:0px }
}

@media (max-width:800px) {
    #s2 { width:98%;max-width:98%; }
	#s3 { width:98%;max-width:98%; }
    #green { margin-top:0px }
    .bigimg { transform:translate(-50%,-50%) scale(1.2);  }
}


/* at w560 navigation collapses */
@media (max-width:560px) {
    body { font-size:14pt }
    #logo { float:none }
    #navidiv,#navidiv-es { max-width:100% }
    #s1 { margin-top:0px } 
    #s3 {  }
    img { max-width:100% }
    .imgleft,.imgright { margin:10px 0px;width:100% }
    .w320 { max-width:510px }
    .clx { cursor:default }
    #socialmedia { width:100% }
    .social { width:40px }
    #footertel { display:block;width:100% }
    #breakfastlink { width: 135px; }
    #e-adr { display:none }
    #e-but { display:inline }
}




/* Navigation */
#navigation { width:480px;top:50px;left:70px;z-index:1 }
.navlink { float:left;color:#333333;padding-left:30px;padding-right:30px;font-weight:normal }
.fnavlink { font-size:16pt }
.centernavi { width:100% }

.anavi { color:#333333;outline:0px }
.anavi:hover { text-decoration:none }
.anavi:active { #801900 }

.pointer {
margin-left:auto;margin-right:auto;width:0;height:0;
border-left: 7px solid transparent;border-right: 7px solid transparent;
border-bottom:14px solid #c8c7c7;
}

.navbox {
position:absolute;display:table;top:14px;padding-top:10px;min-width:140px;z-index:1;text-align:left;
background-color:#faf9e9;border:solid 0px #c8c7c7;border-top-width:1px;-moz-border-radius: 10px;border-radius: 10px;
}
.shift { right:0px }

.subnav { position:relative;z-index:1 }
.subnavlink, .actsubnavlink { padding:5px 10px;white-space:nowrap }

.subnavlink {
	color:#846651;font-size:12pt;
	background: -webkit-linear-gradient(#faf9e9,#e9e9e0);
	background: -o-linear-gradient(#faf9e9,#e9e9e0);
	background: -moz-linear-gradient(#faf9e9,#e9e9e0);
	background: linear-gradient(#faf9e9,#e9e9e0);
}

.actsubnavlink { color:#FFFFFF;background-color:#801900;font-size:12pt; }
#navbut { height:10px;background-color:#e9e9e0;-moz-border-radius: 0px 0px 10px 10px;border-radius: 0px 0px 10px 10px; }


/* Responsive */

/* < width px */
@media (max-width:1200px) {
#navigation { width:380px;left:30px }
.navlink { font-size:14pt;padding-left:20px;padding-right:20px }
}

/* < width px */
@media (max-width:1090px) { 
	#navigation { clear:both;top:0px;left:0px } 
	.navlink { padding-left:18px;padding-right:18px }
	.subnavlink, .actsubnavlink { font-size:11pt }
}

/* mob css */
@media (max-width:530px) {
#navigation { width:100%;background-color:#faf9e9 }
.mobmainlink { margin-left:10px }

.navlink { 
margin-top:1px;float:none;text-align:left;border:solid 0px;border-bottom-width:1px;
padding:0px;padding-top:8px;padding-bottom:5px; 
}

.centernavi { width:100% }
.navbox { 
position:static;padding-top:5px;margin-top:5px;width:100%;z-index:1;text-align:left;
background-color:#faf9e9;border:solid 0px #c8c7c7;
-moz-border-radius:0px;border-radius:0px;
}

.pointerdiv { position:static;margin-bottom:10px }
.pointer { display:none }
.subnavlink, .actsubnavlink { padding-left:20px }
#navbut { display:none }
}
/* Navigation */