
/************
HOME CONTENT 
**************/

@import url(css/reset.css);
@import url(css/generals.css);
@import url(css/typography.css);
@import url(css/header.css);
@import url(css/buttons.css);
@import url(css/footer.css);
@import url(css/nano.css);

/************
MAIN CONTENT STYLE
**************/



.slider {
	position:relative;
	display: inline-block;
	float: left;
	background-repeat: no-repeat;
	width: 100%;
	margin: auto 0;
	margin: 0;
	} 


.claim.slideshow {
	display: inline-block;
	position: absolute;
	z-index: 9999;
	color: white;
	padding: 10px 10px;
	top: 100px;
	left: 0;
	right: 0;
	margin: auto 0;
	text-align: center;
	font-size: 1.5em;
	text-transform: uppercase;
	letter-spacing: 0.20em;
	font-weight: 600;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	}



.article-container {
	padding: 0px 50px;
	padding-bottom: 50px;
	position: relative;
	float: left;
	width: 100%;
	}

.article-container.services{
	padding: 0px;
	padding-bottom: 0px;
	}

.article-container.extras, .article-container.about{
	background-color: #08708A;
	position: relative;
	float: left;
	width: 100%;
	}

.about img{
	position:relative;
	display: inline-block;
	margin: auto 0;
	margin: 0;
	padding: 0 50px 10px;
	}




.panoramic-container{
	position:relative;
	display: inline-block;
	float: left;
	background: url(images/panorama.jpg);
	background-repeat: no-repeat;
	width: 100%;
	height: 344px;
	margin: auto 0;
	margin: 0;
	color: white;
	text-align: center;
	padding-bottom: 50px;
	padding-top: 100px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	}

.panoramic-container:hover{
opacity: .8;
}



.products-container {
	position:relative;
	float: left;
	display: inline-block;
	height: 344px;
	width: 33.33%;
	background-repeat: no-repeat;
	text-align: center;
	padding-bottom: 50px;
	padding-top: 100px;
	margin: auto 0;
	color: white;
	-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	}

.products-container:hover{
	opacity: .8;
	}

.products-container.events{
	background: url(images/events.jpg);
	}

.products-container.products{
	background: url(images/products.jpg);
	}

.products-container.portrait{
	background: url(images/portrait.jpg);
	}






.extras-container {
width: 100%;
float: left;
margin: 0 auto;
	}
.article-title.extras{
width: 100%;
float: left;
position: relative;
	}
.extras-content{	
	position: relative;
	float: left;
	width: 33.33%;
	text-align: center;
	padding-bottom: 50px;
	padding-top: 100px;
	}



.article-container.prices{

	}

.price-column{
	position:relative;
	float: left;
	display: inline-block;
	width: 33.33%;
	text-align: center;
	padding-bottom: 50px;
	padding-top: 30px;
	margin: auto 0;
	
	
	}
.article-container.pricelist {
	padding: 0px;
	padding-bottom: 50px;
	position: relative;
	float: left;
	width: 100%;
	background: url(images/texture.png);

}

.price-column {
	position:relative;
	float: left;
	display: inline-block;
	height: 344px;
	width: 33.33%;
	background-repeat: no-repeat;
	text-align: center;
	padding: 120px 50px 50px 50px;
	margin: auto 0;
	color: white;
	-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	}

.price-column:last-of-type{
	margin-bottom: 20px;
	}


.price-column:hover{
	opacity: .8;
	}

.price-column.pano{
	background: url(images/panorama_price.jpg);
}

.price-column.event{
	background: url(images/event_price.jpg);
}

.price-column.port{
	background: url(images/port_price.jpg);
}

.price-container{
width: 100%;
background: black;
z-index: 9999;
}

.pricelist.article-text strong {
}

/***********
Notebook NAVIGATION
********/

@media screen and (max-width:1366px){  

.panoramic-container{
	background: url(images/panorama.png);
		}



/************
Tablet NAVIGATION
**************/


@media screen and (max-width:768px){  

	.products-container{
	width: 50%;
	}

.price-column {
	width:50%;

	}

.down {
display: inline-block;
position: relative;
float: left;
margin: auto 0;

} 

	/************
 Mobile NAVIGATION
**************/

@media (max-width:420px){  

	.products-container{
	width: 100%;
	}

	.extras-content img{
	width:60px; 
	height:60px;
	}

	.price-column {
	width: 100%;
	}

	.claim.slideshow {
	font-size: 0.8em;



}