/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
input{
	border:1px solid #b0b0b0;
	padding:3px 5px 4px;
	color:#979797;
	width:190px;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}


/* Fonts */

@font-face {
	font-family: 'ClanScWeb-Thin';
	src: local('☺'),
	url("font/ClanScWeb-Thin.woff") format("woff");
}

@font-face {
	font-family: 'ClanWeb-Thin';
	src: local('☺'),
	url('font/ClanWeb-Thin.woff') format('woff');
}

@font-face {
	font-family: 'ClanWeb-Black';
	src: local('☺'),
	url('font/ClanWeb-Black.woff') format('woff');
}

@font-face {
	font-family: 'ClanScWeb-Black';
	src: local('☺'),
	url("font/ClanScWeb-Black.woff") format("woff");
}

/* General Styles */
body{
	overflow-y: scroll;
	overflow-x: hidden;
	font-family: 'ClanWeb-Thin', helvetica, arial, verdana, sans-serif;
	color: #8e8e8e;
}
.ie7 body{
	overflow:hidden;
}
.logo {
	float: left; 
	margin-left: 10%;
	}
.logo img {
	width: 220px !important;
	margin: 30px 0 30px 0;
}	
.lang {
	float: right; 
	margin: 30px 10% 0 0;
	color: #fff;
}
.lang span {
	padding: 0 10px 0 10px;
}	
a {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
}
a:hover {
	color: #fff;
	text-decoration: none;
}

.content {
	padding: 4%;
}
.clr{
	clear: both;
}

h1 {
	font-size: 48px;
	line-height: 55px;
	position: relative;
    padding: 80px 10px 12px 0px;
	margin-left: 10%;
	margin-right: 10%;
}
p {
	line-height: 40px;
	margin-left: 10%;
	color: #00a1c9;
	font-size: 28px;
}
.container {
	position:relative; 
	width:80%; 
	margin:0px auto;
}

.row {
	flex-wrap: wrap;
	display: flex;
	background-color: #d5d5d5;
}
.variation {
	flex: 32%;
}

.brick {
	display: block !important;
	height: 100%;
	width: 100%;
}
.wrapper {
	display: block;
}
.brick1 img, .brick img{
	width: 100%;
}

.blue {
	background-color: #008db1;
}

/* configurator */

.stage {
	width: 86%;
	float: left;
	top: 0;
	bottom: 0;
}
.stage img {
	width: 100%;
}
.stage ul{
	list-style: none;
	margin-top: 1%;
}
.stage li{
	float: left;
	width: 14%;
	margin: 0 0.1% 0 0;
}
.tiles {
	float: right;
	width: 14%;
	position: relative;
	color: #666;
}
.tiles h3{
	clear:left;
	padding: 5px 0 5px 0;
	font-size: 20px;
}

.tiles div{
	padding: 0 5% 0 5%;
}
.tiles ul{
	list-style: none;
}
.tiles li{
	float: left;
	margin: 1% 1% 0 0;
	width: 36%;
}
.tiles li img{
	width: 100%;
}
.tiles li a, .stage li a {
	display: block;
	/*border: 2px solid transparent;
	padding: 1px;
	position: relative;*/
}
.tiles li a:hover, .stage li a:hover, .tiles li a.selected,  .stage li a.selected {
	border: 2px solid #c03;
}


/* Media Queries */

@media screen and (max-width: 1024px) {
	.container	{
		width:90%; 	
	}
	h1 {
		margin-left: 5%;
		margin-right: 5%;
	}
	p {
		margin-left: 5%;
	}
	.logo {
		margin-left: 5%;	
	}
	.lang {
		margin-right: 5%;	
	}
}	

@media screen and (max-width: 767px) {
	.container	{
		width:100%; 	
	}
	.logo {
		margin-left: 3%;	
	}
	.lang {
		margin-right: 3%;	
	}
	h1 {	
		font-size: 36px;
		padding: 50px 10px 5px 0;
		line-height: 40px;
		margin-left: 3%;
		margin-right: 3%;
	}
	p {
		margin-left: 3%;
	}
}
@media screen and (max-width: 480px) {
	.variation {
		flex: 50%;
	}
}

/* slideshow */
.slideshow,
.slideshow:after { 
    width: 100%;
	height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.slideshow:after { 
    content: '';
}
.slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size:100%;
   
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 24s linear infinite 0s;
    -moz-animation: imageAnimation 24s linear infinite 0s;
    -o-animation: imageAnimation 24s linear infinite 0s;
    -ms-animation: imageAnimation 24s linear infinite 0s;
    animation: imageAnimation 24s linear infinite 0s; 
}
.slideshow li:nth-child(1) span { 
    background-image: url(../images/background/1.jpg);
    
}
.slideshow li:nth-child(2) span { 
    background-image: url(../images/background/2.jpg);
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s; 
}
.slideshow li:nth-child(3) span { 
    background-image: url(../images/background/3.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.slideshow li:nth-child(4) span { 
    background-image: url(../images/background/4.jpg);
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -o-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s; 
}
.slideshow li:nth-child(5) span { 
    background-image: url(../images/background/5.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.slideshow li:nth-child(6) span { 
    background-image: url(../images/background/6.jpg);
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s; 
}
.slideshow li:nth-child(7) span { 
    background-image: url(../images/background/7.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.slideshow li:nth-child(8) span { 
    background-image: url(../images/background/8.jpg);
    -webkit-animation-delay: 21s;
    -moz-animation-delay: 21s;
    -o-animation-delay: 21s;
    -ms-animation-delay: 21s;
    animation-delay: 21s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    4% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    21% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    4% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    21% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    4% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    21% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    4% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    21% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    4% { opacity: 1;
         animation-timing-function: ease-out; }
    21% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .slideshow li span{
	opacity: 1;
}