/* CSS Document */

/*------------------ POSITIONING  -----------------------*/

 
body {
background-color: #938C87;
font-family: 'Droid Serif', serif;
font-size: 10pt;
margin: 0;
color: #495865;
}

#container {
background-color: #ffffff;
position: relative;
margin: 10px auto 0;
width: 95%;
max-width: 1040px;
-moz-box-shadow:    0 0 8px 2px #444;
-webkit-box-shadow: 0 0 8px 2px #444;
box-shadow:         0 0 8px 2px #444;
}

#header {
position: relative;
height: 40px;
padding: 0 0 0 10px;
width:  100%;
background-color: #FFF;
}

#logo {
position: absolute;
width: 361px;
left: 50%;
margin: 20px 0 0 -185px;
height: 75px;
z-index: 1000;
}

#logo img {
	width: 100%;
}

#side_slogan {
	position: absolute;
	right: 4%;
	top: 20px;
	height: 328px;
	width: 245px;
}

#side_since {
	position: absolute;
	right: 4%;
	top: 20px;
	height: 71px;
	width: 126px;
}

#menu_outer {
    float: right;
    right: 50%;
    position: relative;
}	

#menu {
	height: 40px;
	z-index: 1500;
    float: right;
    right: -50%;
    position: relative;
}

#menu2 {
position: relative;
float:left;
clear:both;
right: 0;
width: 100%;
height: auto;
z-index: 500;
}

#banner {
	position: relative;
	margin: 0 auto;
	overflow:hidden;
	width: 100%;	
	height:527px;
	margin-bottom: -130px;
}

.banner_img {
	position:absolute;
	left: 20%;
	margin-left:-208px;
}

#detail {
position: relative;
margin: 0 auto;
width: 70%;
min-height: 180px;
margin-top: 15px;
padding-top: 20px;
}


#news-container{
    float:left;
    width:100%;
    position:relative;
    overflow:hidden;
}
#content-container {
    float:left;
    width:100%;
    position:relative;
	z-index: 2000;
}


#news {
	float:left;
	position:relative;
	width:20%;
	padding: 1%;
	border: 1px solid #7F491D;
	/*max-width: 200px;*/
	margin-left: 2.5%;
	background-color:#FFF;
}

#contact {
	float:right;
	position:relative;
	width:20%;
	padding: 2.5%;
	border: 1px solid #7F491D;
	/*max-width: 200px;*/
	margin-right: 2.5%;
	background-color:#FFF;
}

#contact p {
	margin-bottom: 6px;
}


#news img, #contact img {
	max-width: 100%;
	height: auto !important;
}

#content {
	float:left;
	position:relative;
	padding: 2.5% 5%;
	width:52.5%;
	background-color:#FFF;
	margin: 1px 0 0 1.2%;
	min-height: 300px;
	height: auto !important; /*this line for firefox (and IE7) etc */
	height:300px; /* this line for IE6 */	
}
 

#footer {
clear: both;
position: relative;
width: 70%;
height: 55px;
}

#footer p {
position: absolute;
text-align: right;
right: 40px;
padding: 5px;
}

/*------------------ GALLERY -----------------------*/

#gallery {
position: relative;
margin: 0 auto;
overflow:hidden;
width: 100%;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
/* Fix of Webkit flickering */
z-index:1;
}

.swiper-wrapper img {
	margin-right: 10px;
}

.swiper-wrapper div:last-child img {
	margin-right: 0;	
}


#gallery_logo {
	position:relative;
	height: 114px;
	width: 100%;
	background: url(../elements/gallery_banner.jpg) no-repeat;
	padding-bottom: 5px;
	}
	
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#cycle-1 div { width:100%; }
#cycle-2 { overflow: visible !important;}
#cycle-2 .cycle-slide { border:3px solid #fff; margin-right: 12px; cursor:pointer;}
#cycle-2 .cycle-slide-active { border:3px solid #004; }

#cycle-1 img {
	width: 100%;
	height: auto;
}

#slideshow-1,#slideshow-2 { position: relative; margin: 10px 0; float: left; overflow:hidden; }
#slideshow-1 { width: 100%;  }
#slideshow-2 { height: 120px; width: 90%;}


/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }


/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}

.cycle-button {
	display: block;
	float: left;
	position: relative;
	text-align: center;
	height: 30px;
	margin: 35px 1%;
	font-size: 40px;
	width: 3%;
}

.cycle-button a {
	text-decoration: none !important;
}


/*------------------ TYPOGRAPHY -----------------------*/

a:link {text-decoration: underline; color: #495865;}
a:visited {text-decoration: underline; color: #495865;}
a:active {text-decoration: underline; color: #495865;}
a:hover {text-decoration: underline; color: #333333;}

/*#news a:link {text-decoration: underline; color: #f7ec30;}
#news a:visited {text-decoration: underline; color: #f7ec30;}
#news a:active {text-decoration: underline; color: #f7ec30;}
#news a:hover {text-decoration: underline; color: #ffffff;}

#footer a:link {text-decoration: none; color: #ffffff;}
#footer a:visited {text-decoration: none; color: #ffffff;}
#footer a:active {text-decoration: none; color: #ffffff;}
#footer a:hover {text-decoration: none; color: #f7ec30;}
*/

p, #content li {
font-size: 9pt;
line-height: 12pt;
color: #666666;
margin-top: 0;
margin-bottom: 12px;
}
#content li {
margin-bottom: 2px;
}

h1 {
font-size: 10pt;
line-height: 18pt;
color: #534741;
font-weight: normal;
margin: 0 0 5px 0;
}

h2 {
font-size: 12pt;
line-height: 18pt;
color: #534741;
font-weight: normal;
margin: 0 0 10px 0;
}


/*------------------ INCIDENTALS -----------------------*/

#content hr {
	clear: both;
	border-color: #666666;
}



/*------------------ RESPONSIVE DESIGN ALTERS -----------------------*/



@media only screen and (max-width: 1920px)  {
	#header, #gallery, #detail, #footer {
	width: 100%;
	}
	#menu2 {	display: none; }

} /

@media only screen and (max-width: 1280px)  {
	#header, #gallery, #detail, #footer {
	width: 100%;
	}
	#logo { padding-right: 15px;}

	#menu2 {	display: none; }

} 

@media only screen and (max-width: 1024px)  {
	#header, #gallery, #detail, #footer {
	width: 100%;
	}
	#menu2 {	display: none; }
} 


@media only screen and (max-width: 820px)  {
	#header, #gallery, #detail, #footer {
	width: 100%;
	}
	#menu {
	width: 100%;
	}
	#menu2 {	display: none; }
}

@media only screen and (max-width: 760px)  {
	#side_slogan { display: none; }
	#side_since { display: none; }

}

@media only screen and (max-width : 480px) {
	#contact, #content, #news {
	width: 90%;
	float: left;
	margin-left: 5%;
	height:auto;
	min-height:0px;
	}
	
	#logo {
		width: 80%;
		margin-left: 10%;
		left: 0;
	}
	
	#news {
		text-align:center;
	}
	
	#news img {
		margin: 0 auto;
	}
	
	#header {
		margin: 0;
	}
	
	.cycle-button {
		width: 6%;
	}
	
	#slideshow-2 {
		width: 80%;
	}

	/* see fotuna-menu.css for further styling */

}