@font-face {font-family: "Calibri";
            src: url("./font/Calibri.eot"); /* IE9*/
            src: url("./font/Calibri.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
                url("./font/Calibri.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url("./font/Calibri.svg#Calibri") format("svg"); /* iOS 4.1- */
}

*{margin:0;padding:0;text-decoration:none}

body{background:#555;font-size:20px;}

#loader {
position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  width: 100%;
  height: 100%;
  background:black;
}

#loader div.logo {
  position:absolute;
  top:30%;
  left:50%;
  width:350px;
  margin: -175px 0 0 -175px;    
}

#loader div.spin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border: 8px solid #333333;
  border-radius: 50%;
  border-top: 8px solid #d76702;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

div.visible {
    display:block;
}
div.hidden {
    display:none;
}

header{
    width:100%;
    background:#333;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

.logo{position:relative;z-index:123;padding:10px;font:18px verdana;color:#6DDB07;float:left;width:15%}
.logo a{color:#6DDB07;}
nav{position:relative;width:980px;margin:0 auto;}

p {
    margin:10px 0px;
}

div.pageouter {
    min-height:100vh;
}

div.page {
    max-width:1000px;margin:0 auto;
    padding:10px 10px;
    font-family:Calibri;color:#fff;
}
div.home-image {
    /*, url("images/site/header2.jpg");*/
    /* Set a specific height */
    height: 100%;
    width: 100%;
}

.hero {
    background-color: #000000;
}
.hero2 {
    background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1.0));
    position:absolute;
    top:0;
    width: 100%;
    height: 100%;
}
.hero div {
    position: relative;
    width: 100%;
    height: 100%;
    /*background: url(../files/page/background.jpg) no-repeat 50% 50% fixed;*/
    color:white;
    overflow: hidden;
    /*-webkit-filter: opacity(0.5);
    filter: opacity(0.5);*/
}

.hero div div {
    opacity: 0;
    }



.hero div div:nth-of-type(1) {
    position:absolute;
    /*background: linear-gradient(#00000000, #000000ff), url(images/site/header1.jpg) no-repeat 50% 50% fixed;*/
    background: url(images/site/header1.jpg) no-repeat 50% 50% scroll;
    background-size:cover;
    -webkit-animation: fade 12s ease-in-out infinite;
    animation: fade 12s ease-in-out infinite;
}

.hero div div:nth-of-type(2) {
    position:absolute;
    /*background: linear-gradient(#00000000, #000000ff), url(images/site/header2.jpg) no-repeat 50% 50% fixed;*/
    background: url(images/site/header2.jpg) no-repeat 50% 50% scroll;
    background-size:cover;
    -webkit-animation: fade 12s 4s ease-in-out infinite;
    animation: fade 12s 4s ease-in-out infinite;
}

.hero div div:nth-of-type(3) {
    position:absolute;
    /*background: linear-gradient(#00000000, #000000ff), url(images/site/header3.jpg) no-repeat 50% 50% fixed;*/
    background: url(images/site/header3.jpg) no-repeat 50% 50% scroll;
    background-size:cover;
    -webkit-animation: fade 12s 8s ease-in-out infinite;
    animation: fade 12s 8s ease-in-out infinite;
}

@-webkit-keyframes fade {
    8.33%, 33.33%       {opacity:1;}
    0%, 41.66%, 100% {opacity:0;}
}

@keyframes fade {
    8.33%, 33.33%       {opacity:1;}
    0%, 41.66%, 100% {opacity:0;}
}

div.home-mobile {
    display:none;
}

.hero-text {
    font-family:Calibri;
    text-align: center;
    position: absolute;
    top: 50%;
    width:100%;
    color: white;
    padding:40px;
}
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.hero-text h1 {
    font-size:50px;
    line-height:50px;
    /*animation: .5s ease-out 0s 1 slideInFromLeft;*/
}

.hero-text p {
    /*animation: 1s ease-out 0s 1 slideInFromRight;*/
}
.hero-text button {
    outline: 0;
    display: inline-block;
    margin:20 0;
    padding: 10px 25px;
    text-align: center;
    cursor: pointer;

    color:#fff;
    border:3px solid #fff;
    background:transparent;

    /*animation: 1s ease-out 0s 1 slideInFromBottom;
    -webkit-transition: color, background-color 0.5s; 
    transition: color, background-color 0.5s;*/
}

.hero-text button:hover {
    color:#000;
    background-color:#fff;
    border:3px solid #ffffffaa;
}

button.download {
    outline: 0;
    display: inline-block;
    margin:20 0;
    padding: 10px 25px;
    text-align: center;
    cursor: pointer;
    font-size:20px;
    
    color:#000;
    border:3px solid #000;
    background:transparent;
}

button.download:hover {
    color:#fff;
    background-color:#000;
    border:3px solid #000000aa;
}

div.headline1 {
    font-size:48px;
    font-weight:bold;
    margin:20 0;
    border-bottom:1px solid gray;
}

a.link {
    color:white;
    font-family:Calibri;
}

a.link:hover {
    text-decoration:underline;
}

div.footer {	
    display:inline-block;
}

div.footer a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    border-bottom: 3px solid transparent;
    font-family:Calibri;
}

div.footer a:hover {
    border-bottom: 3px solid white;
}

div.footer a.active {
    border-bottom: 3px solid white;
}

div.lieferant {
    width:250px;
    height:250px;
    display:inline-block;
    margin:10px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 220px;
    -webkit-transition: background-size 0.5s; /* Safari prior 6.1 */
    transition: background-size 0.5s;
}

div.lieferant:hover {
    background-size: 100%;
}

.openstreetmap {
    width:100%;
    height:40%;
}


.row {
    font-family:Calibri;color:#fff;
    width:100%;text-align:center;
    /*padding:10px;*/
}

.infopicture {
    margin:5px;
    display:inline-block;
    overflow:hidden;
    position: relative;
    height:300px;
    color:black;
}

.infopicture img {
    height:250px;
    vertical-align: middle;
    opacity: 1.0;
    cursor: pointer; 
    -webkit-transition: opacity 0.5s; /* Safari prior 6.1 */
    transition: opacity 0.5s;
}

.infopicture:hover img {
    opacity: 0.5; 
}

.picture {
    margin:5px;
    display:inline-block;
    overflow:hidden;
    background-color:#000;
    position: relative;
}

.picture img {
    height:200px;
    vertical-align: middle;
    opacity: 1.0;
    cursor: pointer; 
    -webkit-transition: opacity 0.5s; /* Safari prior 6.1 */
    transition: opacity 0.5s;
}

.picture:hover img {
    opacity: 0.5; 
}

.picture button.btn {
  visibility:hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  width:50px;
  height:50px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: transparent;
  color: white;
  border: 2px solid white;
  line-height:30px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  text-align: center;
  transition: all 0.5s;
}

.picture button.btn:hover {
  width:70px;
  height:70px;
}

.picture:hover button.btn {
    visibility: visible;
}

.picturebox {
    display: none;
  position: fixed;
  z-index: 100000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

.picturebox .picturebox_content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
  text-align:center;
}

.picturebox .picturebox_content .column {
    float:left;
    padding:2px;
    overflow:hidden;
}

.picturebox .picturebox_content .column img {
  height:80px;
}

.picturebox .close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.picturebox .close:hover,
.picturebox .close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.picturebox .mySlides {
    height:70%;
    overflow:hidden;
    display: none;
    background-color:black;
}

.picturebox .mySlides img {
    height:100%;
}

.picturebox .cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.picturebox .prev,
.picturebox .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.picturebox .prev {
    left:0;
}
/* Position the "next button" to the right */
.picturebox .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.picturebox .prev:hover,
.picturebox .next:hover {
  background-color: rgba(30, 30, 30, 0.8);
}

/* Number text (1/3 etc) */
.picturebox .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.picturebox .picturebox_content .mySlide .img {
  margin-bottom: -4px;
}

.picturebox .caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.picturebox .demo {
  opacity: 0.3;
}

.picturebox .active,
.picturebox .demo:hover {
  opacity: 1;
}

.picturebox img.hover-shadow {
  transition: 0.3s;
}

.picturebox .hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.partinfo {
    display: none;   
    font-family:Calibri;
    
}

.partinfo .box_inner {
    
}

.partinfo .box_header {
    /*background-color:#000;*/
    height:40px;
}

.partinfo .box_left {
    float:left;
    width:30%;
    height:100%;
    background-color:#d76702;
}   
.partinfo .box_left .subpart {
    cursor:pointer;
    padding:0px 40px;
    line-height:60px;
    height:60px;
    font-size:24px;
    font-weight:bold;
}
.partinfo .box_left .subpart:hover {
    background-color:#a55602;
}

.partinfo .box_right {
    float:left;
    width:70%;
    height:100%;
    background-color: #fff;
    padding:40px;
}

.partinfo .box_inner .close {
  color: #000;
  float: right;
  margin-right:20px;
  font-size: 32px;
  font-weight: bold;
}

.partinfo .box_inner .close:hover,
.partinfo .box_inner .close:focus {
  color: #555;
  text-decoration: none;
  cursor: pointer;
}


#infobox {
  display: none; /* Hidden by default */
  position: fixed; /*  Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  font-family:Calibri;
  color:black;
}

#infobox .infobox_inner {
    text-align:left;
  position:relative;
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

#infobox .infobox_header {
    border-bottom:1px solid gray;
    margin:20px;
}
#infobox .infobox_content {
    margin:20px;
}

#infobox .infobox_inner .close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#infobox .infobox_inner .close:hover,
#infobox .infobox_inner .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


a.tothetop {
    color:white;
    width:100%;
    text-align:center;
}
a.tothetop:hover {
    color:#ffffffaa;
}

a.tothetop div {
    font-family:Calibri;
    font-size:36px;
}

.companyarea {
    background-color:#d76702;
    height:360px;
    width:300px;
    margin:30px 10px;
    display:inline-block;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.companyarea div.titlecontainer div.title {
    text-align: center;
    line-height:60px;
    height:60px;
    font-size:24px;
    font-weight:bold;
}

.companyarea div.titlecontainer {
    width:300px;
}

.companyarea div.image {
    width:300px;
    height:300px;
    overflow:hidden;
    background-color:#000;
    position:relative;
}

.companyarea div.image img {
    height:100%;
    vertical-align: middle;
    opacity: 1.0;
    cursor: pointer; 
    transition: opacity 0.5s;
}

.companyarea div.image:hover img {
    opacity: 0.5; 
}

.companyarea div.image button.btn {
  visibility:hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: transparent;
  color: white;
  border: 2px solid white;
  font-size: 16px;
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.companyarea div.image button.btn:hover {
  
}

.companyarea div.image:hover button.btn {
    visibility: visible;
}

.companyarea div.image button.btn span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.companyarea div.image button.btn span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.companyarea div.image button.btn:hover span {
  padding-right: 25px;
}

.companyarea div.image button.btn:hover span:after {
  opacity: 1;
  right: 0;
}

.companyarea div.text {
    padding:10px;
}

.serviceitem2 {
    display:inline-block;
    overflow:hidden;
    color:#fff;
    background-color:#d76702;
    height:200px;
    width:200px;
    margin:10px;
    padding:50px 10px 10px 10px;
    font-size:24px;
    text-align:center;
    font-weight:bold;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}


.serviceitem2:hover {
    background-color:#b44402;
}

.serviceitem {
    display:inline-block;
    overflow:hidden;
    color:#fff;
    background-color:#152541;
    height:200px;
    width:200px;
    margin:10px;
    padding:50px 10px 10px 10px;
    font-size:24px;
    text-align:center;
    font-weight:bold;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}


.serviceitem:hover {
    background-color:#385077;
}

* {
    box-sizing: border-box;
}
/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    color:black;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

/* Container around content */
.container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* The circles on the timeline */
.container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: #d76702;
    border: 4px solid #d76702;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

/* Place the container to the left */
.left {
    left: 0;
}

/* Place the container to the right */
.right {
    left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
    left: -16px;
}

/* The actual content */
.content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}

.serviceicon {
    line-height:50px;
    height:50px;
    padding-left:70px;
    font-size:28px;
    font-weight:bold;
    margin:20px 0px;
}

.serviceicon_bau {
    background:url('images/site/icon_bau_big.png');
    background-repeat: no-repeat;
    background-size: 50px 50px;
}
.serviceicon_schreinerei {
    background:url('images/site/icon_schreinerei_big.png');
    background-repeat: no-repeat;
    background-size: 50px 50px;
}
.serviceicon_service {
    background:url('images/site/icon_service_big.png');
    background-repeat: no-repeat;
    background-size: 50px 50px;
}
.serviceicon_beratung {
    background:url('images/site/icon_beratung_big.png');
    background-repeat: no-repeat;
    background-size: 50px 50px;
}

i.arrow {
  border: solid #d76702;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
  margin:0 15px 0 10px;
}

i.arrowright {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

i.arrowleft {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

i.arrowup {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

i.arrowdown {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }

    /* Full-width containers */
    .container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .container::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    /* Make sure all circles are at the same spot */
    .left::after, .right::after {
        left: 15px;
    }

    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }
}

#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:Calibri;background:#333}
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:17px;font-size:20px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#d76702!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:24px;right:11px;width:12px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:16px;display:block;width:2px;height:12px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:43px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:270px;font-size:20px;text-decoration:none;color:#ddd;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:12px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:11px;right:16px;display:block;width:2px;height:12px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

@media screen and (max-width:1000px){
    
    .picture img {
        height: 130px;  
    }

    .companyarea {
        background-color:#d76702;
        height:360px;
        width:300px;
        margin:10px 10px;
        display:inline-block;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }

    .companyarea div.titlecontainer div.title {
        text-align: center;
        line-height:60px;
        height:60px;
        font-size:24px;
        font-weight:bold;
    }

    .companyarea div.titlecontainer {
        width:100%;
    }

    .companyarea div.image {
        width:100%;
        height:300px;
        overflow:hidden;
        background-color:#000;
        position: relative;
    }

    .companyarea div.image img {
        width:100%;
        height:auto;
        vertical-align: middle;
        opacity: 1.0;
        cursor: pointer; 
        transition: opacity 0.5s;
    }

    div.lieferant {
        width:150px;
        height:150px;
        display:inline-block;
        margin:10px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 130px;
        -webkit-transition: background-size 0.5s; /* Safari prior 6.1 */
        transition: background-size 0.5s;
    }

    #loader{display:none}
    /*div.home-image{display:none}
    div.home-mobile{display:block}
    .hero-text{display:none}*/
    
    .hero-text h1 {
        font-size:25px;
        line-height:25px;
    }
    .logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
    .logo2{display:none}
    nav{width:100%;}
    #cssmenu{width:100%}
    #cssmenu ul{width:100%;display:none}
    #cssmenu ul li{width:100%;border-top:1px solid #444}
    #cssmenu ul li:hover{background:#363636;}
    #cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
    #cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
    #cssmenu > ul > li{float:none}
    #cssmenu ul ul li a{padding-left:25px}
    #cssmenu ul ul li{background:#333!important;}
    #cssmenu ul ul li:hover{background:#363636!important}
    #cssmenu ul ul ul li a{padding-left:35px}
    #cssmenu ul ul li a{color:#ddd;background:none}
    #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
    #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
    #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
    #cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:24px;font-weight:700}
    .button{width:70px;height:70px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
    .button:after{position:absolute;top:22px;right:20px;display:block;height:8px;width:30px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
    .button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:12px;right:20px;display:block;height:2px;width:30px;background:#ddd;content:''}
    .button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:30px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
    .button.menu-opened:before{top:23px;background:#fff;width:30px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
    #cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:54px;width:54px;cursor:pointer}
    #cssmenu .submenu-button.submenu-opened{background:#262626}
    #cssmenu ul ul .submenu-button{height:40px;width:40px}
    #cssmenu .submenu-button:after{position:absolute;top:24px;right:19px;width:12px;height:2px;display:block;background:#ddd;content:''}
    #cssmenu ul ul .submenu-button:after{top:18px;right:11px}
    #cssmenu .submenu-button.submenu-opened:after{background:#fff}
    #cssmenu .submenu-button:before{position:absolute;top:19px;right:24px;display:block;width:2px;height:12px;background:#ddd;content:''}
    #cssmenu ul ul .submenu-button:before{top:13px;right:16px}
    #cssmenu .submenu-button.submenu-opened:before{display:none}
    #cssmenu ul ul ul li.active a{border-left:none}
    #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}