html {
	height : 100%;
}

body {
	background : black;
	color : white;
	font-family : Tahoma, sans-serif;
	font-size : 13px;
	height : 100%;	
}

#container {
	background : black;
	max-width : 978px;
	width: 100%;
	display : block;
	margin : 0px auto;
}

header {
  text-align : center;
  margin : 36px 0 50px 0;
  position : relative;
}

  .menu {
    display : block;
    position : absolute;
    top : 61px;
    right : 0;
    font-size : 18px;
  }
  .lang {
  	display : block;
  	position: absolute;
  	top: 0px;
  	right: 0;
  	font-size: 12px;
  }
  
  .lang a {
  	color: #777;
  	text-decoration: none;
  }
    
      .menu a {
        display : block;
        text-decoration : none;
        color : white;
        margin-top : 7px;
        height : 18px;
        padding-left : 30px;
        line-height : 24px;
        float : right;
        text-align: right;
        clear: both;
      }
      
      .menu a:hover, .menu a.current {
        color : #f8dda2;
        background : url('/images/crown.png') no-repeat top left;
      }

#slider {
	max-width: 978px;
	width: 100%;
	height: 335px;
	display: block;
	position: relative;
	margin-bottom: 47px;
}
	ul.slides {
		list-style: none;
		width: 100%;
		height: 100%;
		display: block;
		position: relative;
		margin-left: 0;
		overflow: hidden;
	}
		ul.slides li {
			display: none;
			overflow: hidden;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		}
			ul.slides li img {
				position: absolute;
				top: 0;
				right: 0;
				height: 100%;
				z-index: 1;
				  -webkit-perspective: 800;
			  -webkit-transform-style: preserve-3d;
			  -webkit-transform: translateZ(0);
			  -o-transform: translateZ(0);
			  -moz-transform: translateZ(0);
			  transform: translateZ(0);
			}
			.slideTitle {
				position: absolute;
				top: 190px;
				right: 50px;
				font-size: 60px;
				color: white;
				-webkit-text-stroke: 1.0px #000000;
				-moz-text-stroke: 1.0px #000000;
				text-stroke: 1.0px #000000;
				font-weight: bold;
				font-family: Arial,Helvetica;
				z-index: 2;
				filter: inherit;
			  -webkit-perspective: 800;
			  -webkit-transform-style: preserve-3d;
			  -webkit-transform: translateZ(0);
			  -o-transform: translateZ(0);
			  -moz-transform: translateZ(0);
			  transform: translateZ(0);
			}
			.slideSubTitle {
				position: absolute;
				top: 250px;
				right: 50px;
				font-size: 40px;
				color: white;
				-webkit-text-stroke: 1.0px #000000;
				-moz-text-stroke: 1.0px #000000;
				text-stroke: 1.0px #000000;
				font-family: Arial,Helvetica;
				font-weight: 600;
				z-index: 2;
				filter: inherit;
				  -webkit-perspective: 800;
			  -webkit-transform-style: preserve-3d;
			  -webkit-transform: translateZ(0);
			  -o-transform: translateZ(0);
			  -moz-transform: translateZ(0);
			  transform: translateZ(0);
			}

			li.active .slideTitle { 
				-webkit-transform: translate3d(55px, 0px, 0px);
				-moz-transform: translate3d(55px, 0px, 0px);
				-o-transform: translate3d(55px, 0px, 0px);
				-ms-transform: translate3d(55px, 0px, 0px);
				transform: translate3d(55px, 0px, 0px);
			}
			li.active .slideSubTitle {
				-webkit-transform: translate3d(-55px, 0px, 0px);
				-moz-transform: translate3d(-55px, 0px, 0px);
				-o-transform: translate3d(-55px, 0px, 0px);
				-ms-transform: translate3d(-55px, 0px, 0px);
				transform: translate3d(-55px, 0px, 0px);
			}
			ul.slides li.active img {
				-webkit-transform: translate3d(30px, 0px, 0px);
				-moz-transform: translate3d(30px, 0px, 0px);
				-o-transform: translate3d(30px, 0px, 0px);
				-ms-transform: translate3d(30px, 0px, 0px);
				transform: translate3d(30px, 0px, 0px);
			}
			ul.slides li img, .slideTitle, .slideSubTitle {
				-webkit-transition: all 5.5s linear;
				-moz-transition: right 5.5s linear;
				-o-transition: right 5.5s linear;
				transition: all 5.5s linear;
			}
ul.slideNumbers {
	position: absolute;
	top: 0px;
	right: -30px;
	width: 30px;
	height: 150px;
	list-style: none;
	margin: 0;
	padding: 0;
}
	.slideNumbers li {
		cursor: pointer;
		display: block;
		height: 17px;
		width: 16px;
		margin: 3px 7px;
		background: url('/images/slideNumber.png');
	}
		.slideNumbers li.active, .slideNumbers li:hover {
			background: url('/images/slideNumber_active.png');
		}

.slideShadow {
	position: absolute;
	left: 0;
	bottom: -20px;
	display: block;
	height: 20px;
	width: 978px;
	background: url('/images/slideShadow.png') no-repeat top left;
}

#videoContainer {
	width: 100%;
	height: 190px;
}
    
.ytVidCover:hover .ytBigPlayButton:after {
	border-left-color: #f8dda2;
}

.ytIcon.ytWatchYt { display: none; }
.ytIcon.ytShare { display: none; }
    
#mission {
  display : block;
  width : 58%;
  float : left;
  margin : 22px 2% 0 2%;
}
    
.smallPhotos {
  width : 33%;
  display : block;
  float : left;
  margin : 0px 0 0 1%;
}

    .smallPhotos img {
      display : block;
      width : 100%;
      background : gray;
      margin-bottom : 10px;
      border : 1px solid #525252;
    }
.leftdiv {
  float: left;
  width: 68%;
}
#contactbox, #productbox {
  display : block;
  float : left;
  background : #2f2f2f;
  border : 1px solid #525252;
  width : 29%;
  padding-bottom: 15px;
  margin-left: 1%;
}

    div.contactoption_form_switch {
      float: left;
      text-align: center;
      padding-left: 5px;
      padding-right: 20px;
      padding-top: 20px;
      padding-bottom: 5px;
      width: 140px;
      height: 19px;        
    }
    
    div.contactoption_form_switch h1 {
    	text-align: left;
    	padding-left: 15px;	
    }
    
      a.contactoption_form_link:hover, a.contactoption_adres_link:hover {
        color : white; 
      }
      
    div.contactoption_adres, div.contactoption_form {
      display : block;
      clear : both;
      margin-top : 5px;
      padding: 20px;
    }
    
    
      div.contactoption_form input, div.contactoption_form textarea {
        background : #151515;
        border : 1px solid #525252;
        display : block;
        width : 90%;
        margin-bottom : 7px;
        padding : 8px;
        color : white;
        resize : none;
      }
      
        div.contactoption_form input {
          height : 22px;
        }
        
        div.contactoption_form textarea {
          height : 95px;
        }
        
        div.contactoption_form input.button {
          padding : 0px 35px 0px 7px;
          height : 26px;
          width : auto;
          color : #777;
          text-transform : uppercase;
          background : #151515 url('/images/submit_bg.png') no-repeat top right;
          float : right;
          margin-right : 3px;
        }
        
          div.contactoption_form input.button:hover {
            background : #777 url('/images/submit_bg.png') no-repeat top right;
            color : white;
          }
          
          div.contactoption_form input.button:active {
            background : #080808 url('/images/submit_bg.png') no-repeat top right;
            color : white;
          }

		.inputGroup {
			position: relative;
			display: block;
		}
      
      label {
        color : #777;
        text-transform : uppercase;
        position : absolute;
        bottom : 4px;
        left : 8px;
      }
      input:focus ~ label, textarea:focus ~ label, .has-value label { display: none; }
#productbox {
  margin : 0px 24px 15px 0px;
  padding : 15px;
  width : 194px;
  height : auto;
}

.productname {
	padding-top: 5px;
	height: 40px;
}

  #productbox img {
    width : 100%;
    display : block;
  }
  
  #productbox h2 {
    font-size : 20px;
    margin : 5px 0px; 
  }
  
  #productbox a {
    font-size : 13px;
    text-decoration : none;
    color : white;
    background : url('../images/pdf.png') no-repeat top left;
    padding-left : 20px;
  }
  
    #productbox a:hover {
      color : #f8dda2;
    }

h2 {
  text-transform : uppercase;
  font-size : 24px;
  margin-bottom : 10px;
}

hr {
  width : 250px;
  margin-left : 60px;
  border-color : #333;
}

#products {
  padding : 0;
  height: auto;
  text-align: center;
  font-size: 0;
}

.product {
  display : inline-block;
  width : 260px;
  height : 20px;
  margin : 0 30px 30px 30px;
  text-indent : 2px;
  font-size : 14px;
  position : relative;
  padding-top : 288px;
}
        .product img {
                width : 260px;
                height : 260px;
                border : 1px solid #525252; 
                display : block;
                position : absolute;
                top : 0;
                left : 0;
                z-index : 1;
        }
                .product img.img2 {
                    z-index : 2;
                    opacity: 0;
					visibility: hidden;
                }
					.product:hover img.img2 { 
						filter: alpha(opacity=100);
						opacity: 1;
						visibility: visible;
					}
 .transition, .product img.img2, .productOverlay {
	 -webkit-transition: all 0.35s ease;
	-moz-transition: all 0.35s ease;
	-o-transition: all 0.35s ease;
	transition: all 0.35s ease;
 }               
.productOverlay {
	padding: 10px;
	background: #191719;
	border: 1px solid #fdcc62;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width: 700px;
	position: absolute;
	bottom: 0;
	z-index: 3;
	filter: alpha(opacity=0);
	opacity: 0;
	visibility: hidden;
}
	.product.one .productOverlay { left: 10px; }
	.product.two .productOverlay { left: 50%; margin-left: -341px; }
	.product.three .productOverlay { right: 10px;}
	.product:hover .productOverlay {
		filter: alpha(opacity=100);
		opacity: 1;
		visibility: visible;
		bottom: -90px;
	}
		
                
                .productOverlay img {
                		align: middle;
                        width: 124px;
                        height: 83px;
                        position: relative;
                        border: 0px;
                }
                
                .productOverlay ul {
                		width: 100%;
                		margin: 0px;
                		list-style-type: none;
                }
                
                .productOverlay ul li {
                		width: 140px;
                		float: left;                		
                }
                
                .productOverlay ul li p {
						text-align: center; 
                		font-size: 10px;
                		font-weight: bold;
                }
                
                .productOverlay .arrow {
                        display : block;
                        width : 26px;
                        height : 22px;
                        position : absolute;
                        top : -19px;
                        background : url('/images/arrow.png');
                }
                        .product.one .productOverlay .arrow {
                                left : 10px;
                        }
                        .product.two .productOverlay .arrow {
                                left : 50%;
                                margin-left : -13px;
                        }
                        .product.three .productOverlay .arrow {
                                right : 10px;
                        }
        
@media(max-width:1030px){
  .menu, .lang { right: 15px; }
   #slider { height: 315px; }
}
@media(max-width:980px){
  .productOverlay { width: 280px; }
  .product.two .productOverlay { margin-left: -140px }
}
@media(max-width:920px){
    .leftdiv { width: 100%; float: none; }
    #contactbox {     float: none;
    clear: both;
    margin: 0 auto; width: 59%; }
}
@media(max-width:900px){
   header { margin: 26px 0 30px 0; }
   .menu { top: 15px; }
   #slider { height: 285px; }
   .slideTitle { font-size: 30px; }
   .slideSubTitle { font-size: 24px; top: 225px; }
   .slideNumbers { display: none; }
}
@media(max-width:750px){
   #slider { height: 250px; margin-bottom: 25px; }
   .slideTitle { top: 160px; }
   .slideSubTitle { top: 195px; }
   .product { margin : 0 15px 30px 15px; }
   .productOverlay, .product.one .productOverlay, .product.three .productOverlay, .product.two .productOverlay { width: 140px; margin-left: -70px; left: 50%; right: auto; bottom: auto; top: -30px; }
   .product:hover .productOverlay { top: 10px; }
}
@media(max-width:570px){
  .slideTitle, .slideSubTitle { display: none; }
   #slider { height: 200px; }
   .menu { position: relative; top: 0; right: 0; width: 100%; text-align: center; margin-top: 10px; }
   header { margin-bottom: 20px; }
   .menu a { float: none; clear: none; display: inline; text-align: center; }
   #mission, .smallPhotos { float: none; width: auto; clear: both; margin: 0; padding: 15px; }
   .smallPhotos { text-align: center; }
   .smallPhotos img { display: inline-block; max-width: 230px; }
   #contactbox { width: 96%; margin-bottom: 20px;}
}
@media(max-width:360px){
   #slider { height: 130px; margin-bottom: 20px; }
}
/* Static rebuild: slider fades via CSS instead of jQuery, contact form additions */
ul.slides li {
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s, visibility 0.4s;
}
ul.slides li.visible {
	opacity: 1;
	visibility: visible;
}
div.contactoption_form .formError {
	color: #f8dda2;
	clear: both;
	margin-bottom: 7px;
}
div.contactoption_form input.button:disabled {
	opacity: 0.5;
}