@font-face
{
    font-family: Roboto-Light;
    src: url("../fonts/Roboto-Light.ttf");
}
@font-face
{
    font-family: DINProLight;
    src: url("../fonts/DINProLight.woff"), url("../fonts/DINProLight.ttf");
}
@font-face
{
    font-family: MyriadPro-Regular;
    src: url("../fonts/MyriadPro-Regular.woff"), url("../fonts/MyriadPro-Regular.ttf");
}
#svg-el-blur, .no-js { height: 100%; width: 100%; background-color: #333738; }
/*#svg-el-blur image { filter:url(#blur-effect); width: 100%; height: 100%;}*/

.front {
    position: absolute;
    z-index:1;
}
.tail.focus {
    position:absolute;
    top: 0px;
    /*background-color:red;*/
    left: -101px;
    display: none;
}

html { height:100%; width:100%; padding:0; margin:0;}
.map iframe html { overflow: hidden; }
body { 
    height:100%; width:100%; padding:0; margin:0;
	font-family: Roboto-Light, MyriadPro-Regular;
    color: #FFFFFF;
}

form { height:100%; width:100%; padding:0; margin:0; position: relative; overflow: hidden;}
#page {overflow: hidden; width: 100%;
height: 100%;
top: 0;}
a {
    color: #FFFFFF;
}
header {
    background-color: #333738;
    height: 5%;
    position: absolute;
    z-index:2;
    width:100%;
}
 footer {
    position: fixed;
    bottom: 0;
    left:0;
    height: 100px;
}
.footer-white {
    z-index: 100;
}
footer a {
	display: block;
    width:100%;
    height:100%;
}
footer a img{
	display: block;
    height:100%;
}

.back {
    width: 100%;
    height: 100%;
    margin: 5px 0 0 0;
    padding: 0px;
    background-color: #333738;
    overflow-x: hidden;
    overflow-y: hidden;

    /*min-height: 560px;
    min-width:860px;*/
}
.back-image {    
    background-attachment: fixed;
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
}

/*MAIN MENU*/
header nav {
    width: 100%;
}
header nav ul {    
	height: 50%;
    margin:0 auto;
	padding: 0 0 0 2%;
    list-style: none;
}
header nav ul li {
    display: inline-block;
    height: 100%;
	padding: 0;
	margin: 0 2% 0 0;
}
header nav ul li a {
	color: #FFFFFF;
	text-decoration:none;
    font-size: 34%;
	font-family: DINProLight, MyriadPro-Regular;
	text-transform: uppercase;
}
header nav ul li:hover a {
	color: #FF4843;
}
header nav ul li a.active {
	color: #FF4843;
}
/*Main Content*/
.main-content {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0;
}

/*BOXES*/
.box {
	display: inline-block;
	width: 20%;
	margin: 0;
	padding: 0;
	vertical-align: top;
	font-size: 0;
    position: relative;
}
.box.last-row {
	display: none;
}

.box-link {
    position:absolute;
    z-index:3;
	display: block;
	cursor: pointer;
    width: 100%;
    height: 100%;
}

.box-header {
	height: 25%;
	width: 100%;
	font-size: 0px;
}
.box.vertical .box-header {
	position: relative;
	width: 25%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
}
.header-right {
    left: 75%;
}
.box:hover .header-right {
    left: 0;
}

.box-icon {
	display: inline-block;
	width: 25%;
	height: 100%;
}
.box.vertical .box-icon {
	position: absolute;
	top: 0;
	left: 0;
    width:100%;
    height: 25%;
}
.box.vertical .box-icon.icon-bottom {
	top: 75%;
}

.media {
	margin-top: 40px;
}

.box-title {
	display: inline-block;	
	width: 67%;
	height: 100%;
	margin: 0px 0px 0px 8%;
	padding: 0;
	text-decoration: none;
	font-family: DINProLight, MyriadPro-Regular;
	text-transform: uppercase;
	vertical-align: top;
}
.box-title.text-right {
	margin: 0px 8% 0px 0px;
	text-align: right;
}
.box.vertical .box-title {
	position: absolute;
	top: 58%;
	left: 0;
	width: 100%;
	height: 25%;
	margin: 0;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.header-right .box-title {
    top: 43% !important;
}

.box-text {
	width: 80%;
	height: 55%;
	padding: 5% 0% 0% 10%;
	text-decoration:none;
    font-family: Roboto-Light, MyriadPro-Regular;
	display: none;
}
.box.vertical .box-text {
	width: 65%;
	height: 90%;
	font-size: 0.7vw;
}
.box.contact .box-text {
	padding-top:10%;
}
.text-top {
	width: 100%;
	height: 75%;
}
.text-italic {
	display: block;
	margin-top: 5%;
	font-style: italic;
}
.box:hover .box-text{
	display: inline-block;
}

/*information content*/
.left-side {
    display: inline-block;
    width: 20%;
    height: 100%;
    background-color: #333738;
    vertical-align: top;
}
.left-side img {
    display: block;
    width: 100%;
}
.right-side {
    display: inline-block;
    width: 80%;    
    height:100%;
    background-color: #333738;
    font-size: 0;
}
.without-back {
    background-color: transparent;
}
.gray-bcg {
    background-color: #333738;
}
.profile-info {
    padding: 0 8% 0 12%;   
}
.profile-text {
    color: #FFFFFF;  
}
h2 {
    margin-top:0;
    text-transform: uppercase;
    font-family: DINProLight, MyriadPro-Regular;
    font-weight: normal;
}
h3 {
    margin:0;
    font-size: 122%;
    line-height: 1.5;
    text-transform:uppercase;
    color: #5f6465;
    font-family: DINProLight, MyriadPro-Regular;
    font-weight: normal;
}
.box-single, .box-double, .box-triple, .box-vertical, .box-quadruple {
    display: inline-block;
    vertical-align: top;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1em solid transparent;
    border-top: 0;
}
.top-box h3 {
    margin-top: 1em;
}
.box-quadruple {
    font-size: 0;
}
.box-vertical {
    position:absolute;
    right:0;
}
    .box-vertical span {
        display: block;
        margin-right:15%;
    }
    .text-list {
        margin:0;
        padding:0 0 0 1em;
        list-style-image: url(../images/icons/dot.png);
    }
    .link-list {
        margin:0;
        padding:0 0 0 1em;
        line-height: 1.5;
        list-style-image: url(../images/icons/link_arrow.png);
        white-space: nowrap;
    }
    .text-list.coop-list{
        list-style: none;
        line-height: 1.5;
    }
    .coop-list{
        width: 50%;
        display: inline-block;        
        padding: 0;
    }
.short-list li {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #FF4843;
}
    .profile-text a {
        color: #FF4843;
        text-transform: uppercase;
    }
    .profile-text a:hover {
        text-decoration: none;
    }
.profile-text a.email {
    padding-left: 7%;
    line-height: 1.5;
    display: inline-block;
    width: 100%;
    text-transform: none;
}
.map-link {
    padding-left: 7%;
    margin: 5% 0;
    line-height: 1.5;
    display: inline-block;
    width: 100%;
}
/*product gallery*/
.product-gallery {
    font-size: 0;
    height:100%;
    width:100%;
}
.product-gallery .box img
{
    width:100%;
    max-height: 100%;
}
.product-gallery .box
{
    position:relative;
}
.box .dimmer {
    display:none;
    position: absolute;
    z-index: 11;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    text-decoration: none;
    background-image: url(../images/icons/detail.png);
    background-repeat: no-repeat;
    background-position: center center;
}
.box .dimmer .preview-name {
    position: absolute;
    bottom: 0;
	color: #FFFFFF;
	font-family: DINProLight, MyriadPro-Regular;
    font-weight: bold;
    margin: 0px 12% 10% 12%;
}
.box:hover .dimmer {
    display:block;
    cursor: pointer;
}

.itemDetail-shade {    
    position: absolute;
    width:100%;
    height:100%;
    background-color: rgba(51,55,56,0.9);
    background-image: url(../images/loader.gif);
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 100;
    display: none;
    top:0;
    left:0;
}
.itemDetail-close {
    position:absolute;
    top:0;
    right:0;
    height: 5%;
    display: block;
    cursor: pointer;
}
.itemDetail {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.photoSlide {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;    
}
.itemDetail img {
    display: block;
    max-width:100%;
    max-height: 100%;
    margin: auto;
    vertical-align: middle;
    background-color: #333738;
}

/*contact*/
.contact-info {
    display: inline-block;
    color: #FFFFFF;
    text-transform: uppercase;
    width: 100%;
}
/*gallery*/
.galery-arrow {
    position: absolute;
    top: 50%;
    display: block;
    cursor: pointer;
    z-index: 3;
}
.move-left, .move-right {
    left:50%;
}
/*textures*/
.texture {
    position: relative;
    width: 50%;
    height: 50%;
    overflow-x: hidden;
    overflow-y: hidden;
}
.texture1 {
    top: 50%;
    left: 50%;
}
.texture2 {
    top: 0%;
    left: 0%;
}
.texture3 {
    top: 0%;
    left: 50%;
}
.texture4 {
    top: 50%;
    left: 0%;
}

.texture img {
    top: 0px;
    left: 0px;
    position: absolute;
    white-space: normal;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    z-index:1;
}