body, html{background: #6bb4b5; overflow-x: hidden;}

body {
font-size:1.5rem;
font-family: 'Open Sans', sans-serif;
line-height:160%;
color:#565656;
margin:0;
padding:0;
font-weight: normal;
}

*{outline: 0 !important;}

/* allgemeine Überschriften*/
h1, .h1, h2, h3, h4 {
margin: 0 0 10px 0;
color:#6bb4b5;
line-height: 1.2;
font-weight: 300;
text-transform: uppercase;
padding: 0;  
position: relative;
}

h1, .h1{font-size: 170%; font-weight: 700;}
h2{font-size: 140%; font-weight: 700;}
h3{font-size: 130%;}
h4{font-size: 120%;}

/* allgemeine links im text */
a:link,a:visited {
text-decoration:underline;
color:#24353e;
transition: all 0.2s ease;
}

a:hover,a:active {
text-decoration:none;
color:#6bb4b5;
}

img {
border:none;max-width: 100%;height: auto;}


.button, a.button {background: #565656;color:#FFFFFF;border-radius: 0;border: none;padding: 10px 25px;text-decoration: none;display: inline-block;font-weight: 500;transition: all 0.2s ease;text-transform: uppercase; box-sizing:border-box;}

.button:hover, a.button:hover, .button:focus {opacity: 0.6;cursor:pointer;}

.gmnoprint img {
    max-width: none;
}
.gmnoprint label {
    display: inline;
    width: auto;
}

.loader{background: #FFFFFF; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999;}




.topbar{background: #FFFFFF; border-bottom: 1px solid #c6c6c6; padding: 0; line-height: 40px;}
.topmenu ul{padding: 0; margin: 0; list-style: none; float: right;}
.topmenu ul li{display: inline-block; padding: 0; margin: 0;}
.topmenu ul li a{margin: 0; padding: 0 20px; text-decoration: none; color: #FFFFFF; font-weight: bold; text-transform: uppercase; background: #6bb4b5;}

.topbar .adress{position: relative; padding: 0 30px 0 30px;}
.topbar .adress:before{background-image: url(../images/mail.png); background-size: 20px 20px; width: 20px; height: 20px; content: " "; display: block; position: absolute; left: 0; top: 0; margin: 0;}
.topbar a.phone{padding-left: 30px; position: relative; color: #565656 !important; text-decoration: none;}
.topbar a.phone:before{background-image: url(../images/phone_grey.png); background-size: 20px 20px; width: 20px; height: 20px; content: " "; display: block; position: absolute; left: 0; top: 0; margin: 0;}

.header-wrapper{position: absolute; top: 0; left: 0; width: 100%; z-index: 999;}

.stickyheader{z-index: 99 !important; position: relative;}
.header{background: #FFFFFF; border-bottom: 1px solid #c6c6c6;}
.header *{transition: all 0.2s ease;}
.header .logo a{display: block;}
.header .logo a img{height: 60px; margin: 20px 0; width: auto;}

.is-sticky .header .logo img{height: 40px; margin: 10px 0;}
.is-sticky .mainmenu a{padding: 15px 0;}



.mainmenu{position: relative; line-height: 30px;}
.mainmenu ul{display: block; width: 100%; margin: 0; text-align: right; padding: 0;}
.mainmenu .small{font-size: 100%;}

.mainmenu ul li{width: auto; background: none !important; display: inline-block !important; padding: 0; margin: 0 0 0 20px; position: relative;}
.mainmenu ul li .trigger{display: none;}
.mainmenu ul li a{display: block !important; padding: 35px 0; margin: 0; color: #6bb4b5; font-weight: bold; text-decoration: none; text-transform: uppercase; background: none !important; position: relative;}
.mainmenu ul li a:hover{background: none !important; color: #6bb4b5; font-weight: bold;}


.mainmenu .level1{position: absolute; z-index: 99; background: rgba(255,255,255,1); display: none; border-bottom: 4px solid #6bb4b5; width: 33.33%; padding-top: 20px; font-size: 90%; margin: 1px 0 0 0; text-align: right;}
.mainmenu .level1:before{background: rgba(255,255,255,1); content: " "; display: block; width: 1000px; height: 100%; position: absolute; top: 0; left: -1000px; border-bottom: 4px solid #6bb4b5; box-sizing: content-box;}
.mainmenu .level1:after{background: rgba(255,255,255,1); content: " "; display: block; width: 1000px; height: 100%; position: absolute; top: 0; right: -1000px; border-bottom: 4px solid #6bb4b5; box-sizing: content-box;}
.mainmenu .level1 li{display: inline-block !important; width: auto !important; text-align: left; padding: 0 0 20px 0; margin: 0 3% 0 0;}
.mainmenu .level1 li a{padding: 0 0 10px 0; line-height: 1;}
.mainmenu .level1 li a:hover{background: none !important; color: #6bb4b5; font-weight: bold;}

/* Save Level Menu 20180803
.mainmenu .level1{position: absolute; z-index: 99; background: rgba(255,255,255,0.8); display: none; border-bottom: 4px solid #6bb4b5; width: 33.33%; padding-top: 40px; font-size: 90%; margin: 1px 0 0 0;}
.mainmenu .level1:before{background: rgba(255,255,255,0.8); content: " "; display: block; width: 1000px; height: 100%; position: absolute; top: 0; left: -1000px; border-bottom: 4px solid #6bb4b5; box-sizing: content-box;}
.mainmenu .level1:after{background: rgba(255,255,255,0.8); content: " "; display: block; width: 1000px; height: 100%; position: absolute; top: 0; right: -1000px; border-bottom: 4px solid #6bb4b5; box-sizing: content-box;}
.mainmenu .level1 li{display: block !important; float: left; width: 30.33% !important; text-align: left; padding: 0 0 40px 0; margin: 0 3% 0 0;}
.mainmenu .level1 li a{padding: 0 0 10px 0; line-height: 1;}
.mainmenu .level1 li a:hover{background: none !important; color: #6bb4b5; font-weight: bold;}

.mainmenu .level2{position: relative; background: none; padding: 0; margin: 0;}
.mainmenu .level2 li{float: none; width: 100% !important; padding: 0; margin: 0;}
.mainmenu .level2 li a{color: #565656; font-weight: normal; text-transform: none; padding: 5px 0;}
.mainmenu .level2 li a:hover{background: none !important; color: #565656; font-weight: normal;}
*/


.slider{position: relative;}
.slider img{position: relative;}

.fullbg{background-size: cover !important; background-position: center center !important;}


.fullsection{position: relative; overflow: hidden;}
.fullsection.start{border-bottom: none; padding: 100px 0;}
.fullsection.start .logoanimation{margin-top: -150px;}

.fullsection.start .logo_animation_gif{position: absolute; top: 50%; left: 50%; width: 80%; max-width: 400px; height: auto; margin: -40px 0 0 0; transform: translate(-50%, -50%);}
.fullsection.start .title{margin: 20px 0 0 0; text-align: center; color: #6bb4b5; text-transform: uppercase; font-size: 140%; font-weight: 600;}

.fullsection .scroll{width: 100%; height: 100px; background: #6bb4b5 url(../images/scroll.png) center center no-repeat; background-size: 30px auto; content: " "; display: block; position: absolute; bottom: 0; left: 0; z-index: 99; cursor: pointer;}
.fullsection .scroll.green{background: #ececec url(../images/scroll_green.png) center center no-repeat; background-size: 30px auto;}
.fullsection .slideitem{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.fullsection .slideitem{background-size: 80% auto !important; background-repeat: no-repeat !important;}

.fullsection .textwrapper{position: absolute; bottom: 100px; right: 0; width: 50%; max-width: 500px;}
.fullsection .textwrapper .heading{background: #6bb4b5; color: #FFFFFF; padding: 10px 20px; display: inline-block; text-transform: uppercase; font-weight: bold;}
.fullsection .textwrapper .matter{background: #FFFFFF; padding: 20px 0 20px 20px;}
.fullsection .textwrapper .matter ul{margin: 0; padding: 0; list-style: none; border-top: 1px solid #c6c6c6;}
.fullsection .textwrapper .matter ul li{display: block; border-bottom: 1px solid #c6c6c6;}
.fullsection .textwrapper .matter ul li a:before{font-family: FontAwesome; content: "\f054"; font-size: 70%; margin-right: 5px;}
.fullsection .textwrapper .matter ul li a{display: block; color: #565656; text-decoration: none; padding: 2px 0;}

.fullsection#section6 .textwrapper{bottom: 0;}

.content{padding: 0; position: relative; background: #FFFFFF;}

.content .bggrey{background: #f3f3f3; position: relative;}
.content .bggrey:before{background: #f3f3f3; content: " "; display: block; width: 1000px; height: 100%; position: absolute; top: 0; left: -1000px; box-sizing: content-box;}
.content .bggrey:after{background: #f3f3f3; content: " "; display: block; width: 1000px; height: 100%; position: absolute; top: 0; right: -1000px; box-sizing: content-box;}


.content #userForm{}
.content #userForm h3{margin: 50px 0 0 0; padding: 0;}
.content #userForm h3:first-child{margin: 0; padding: 0;}

.content #userForm .form-horizontal label{width: 100%; display: block; margin: 0; padding: 0; text-align: left;}
.content #userForm .form-horizontal .controls{width: 100%; margin: 0; padding: 0; position: relative; float: left;}
.content #userForm .form-horizontal input, .content #userForm .form-horizontal select{width: 100%; border: 2px solid #E5E5E5; box-shadow: none; border-radius: 0; padding: 0 5px; margin: 0; line-height: 40px; display: block; height: 40px; font-size: 14px; color: #000000;}
.content #userForm .form-horizontal textarea{width: 100%; border: 1px solid #E5E5E5; box-shadow: none; border-radius: 0; margin: 0; line-height: 120%; display: block; padding: 5px; font-size: 14px; color: #000000;}
.content #userForm #absenden{background: #565656;color:#FFFFFF;border-radius: 0;border: none;padding: 10px 25px;text-decoration: none;display: inline-block;font-weight: 500;transition: all 0.2s ease;text-transform: uppercase; box-sizing:border-box;}
.content #userForm #absenden:hover{opacity: 0.6;}

.content #userForm input.rsform-calendar-button{position: absolute; top: 0; right: 0; width: 50px;}

@media (max-width: 600px){
	.content #userForm .rsform-block{width: 100%; float: none; margin-right: 0;}
}


.content .sppb-blockquote{border-left: 2px solid rgba(152,152,152,.3); padding-left: 20px;}
.content .sppb-blockquote:before{display: none;}



.content .sppb-gallery{margin: 0 -15px;}
.content .sppb-gallery li{padding: 0 15px; width: 33.33%;}
.content .sppb-gallery li img{width: 100% !important; height: auto !important;}

.content .nopadding .sppb-gallery{margin: 0;}
.content .nopadding .sppb-gallery li{padding: 0;}

.content .sppb-addon-text-block ul{margin: 0; padding: 0; list-style: none; border-top: 1px solid #c6c6c6;}
.content .sppb-addon-text-block ul li{display: block; border-bottom: 1px solid #c6c6c6; position: relative; padding: 5px 0;}
.content .sppb-addon-text-block ul li:before{font-family: FontAwesome; content: "\f054"; font-size: 70%; margin-right: 5px; display: inline-block;}

.content .referenzen-head{}
.content .referenzen-head a{float: right; margin: 10px 0 0 0; text-decoration: none; font-weight: bold;}
.content .referenzen .item{}
.content .referenzen .item a.inner{background: #FFFFFF; display: block; text-decoration: none;}
.content .referenzen .item a.inner .image{overflow: hidden; display: block;}
.content .referenzen .item a.inner .image img{transition: all 0.5s ease-in-out;}
.content .referenzen .item a.inner .title{padding: 20px; text-transform: none; color: #565656; font-weight: bold; font-size: 100%; display: block; text-decoration: none;}
.content .referenzen .item a.inner:hover{}

.content .item-separator{background: #eee; height: 1px; margin: 40px 0;}

.content .gallery{padding: 0;}
.content .gallery li{list-style: none; margin-bottom: 30px;}

.content #sitemap{}
.content #sitemap ul.nav{}
.content #sitemap li, .content #sitemap li:hover{background: none !important;}
.content #sitemap li a, .content #sitemap li a:hover, .content #sitemap li a:focus{background: none !important;}
.content #sitemap img{display: none;}

.content .sppb-blockquote{font-size:1.5rem; font-family: 'Open Sans', sans-serif; line-height:160%; color:#565656;}


.content select{  /* styling */
background-color: white;
border: thin solid #ccc;
border-radius: 0;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;

/* reset */
margin: 0;      
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
	
background: #FFFFFF url(../images/select.png) no-repeat;
background-size: 15px auto;
background-position: calc(100% - 15px) calc(100% - 12px);
}
/*** the following rule remove default arrow on HTML tag select - IE10+ ***/
.content select::-ms-expand{display: none;}

#mixitupcontrols{}
#mixitupcontrols fieldset{display: inline-block;}
#mixitupcontrols select{box-sizing: border-box; margin: 0 0 5px 0;}
#mixitupcontrols button{background: #6bb4b5; color: #FFFFFF; font-weight: bold; text-transform: uppercase; padding: 0.5em 1em 0.5em 1em; box-sizing: border-box;}
#mixitupcontainer .mix{positon: relative; display: inline-block; margin-bottom: 1rem;}
#mixitupcontainer .mix:after{content: ''; position: absolute;}
#mixitupreset{cursor: pointer;}

.tags{margin: 0 0 40px 0;}
.tags a{text-decoration: none; margin: 0 0 0 5px;}

.footer{background: #6bb4b5; padding: 30px 0; color: #FFFFFF;}
.footer .pull-left{margin: 0 5px 0 15px;}
.footer .pull-right{margin: 0 15px 0 0;}
.footer .footercertificates{margin-right: 15px; text-align: right;}
.footer .footercertificates a{color: #FFFFFF; text-decoration: none;}

.footer .buttons a{border: 2px solid #FFFFFF; font-weight: bold; padding: 8px 10px; color: #FFFFFF; margin: 0 5px 5px 0; display: inline-block; text-decoration: none; position: relative;}
.footer .buttons a.secondary{background: #FFFFFF; color: #6bb4b5;}
.footer .buttons a:hover{opacity: 0.5; background: #FFFFFF; color: #6bb4b5;}
.footer .buttons a.phone{padding-left: 40px;}
.footer .buttons a.phone:before{background-image: url(../images/phone_white.png); background-size: 20px 20px; width: 20px; height: 20px; content: " "; display: block; position: absolute; left: 10px; top: 50%; margin: -10px 0 0 0;}
.footer .buttons a.phone:hover:before{background-image: url(../images/phone_green.png);}

.footer ul{margin: 0; padding: 0; list-style: none; font-weight: 300;}
.footer ul li{}
.footer ul li a{padding: 0; margin: 0; background: none !important; color: #FFFFFF; text-decoration: none; display: block; text-align: right;}
.footer ul li a:hover, .footer ul li.active a{text-decoration: underline;}





#galleryOverlay #nextArrow {background: #6bb4b5 url(../images/arrow_right.png) no-repeat scroll center center / 40px 40px; height: 40px; line-height: 40px; margin-top: -20px; opacity: 1; top: 50%; width: 40px;}
#galleryOverlay #nextArrow.notvisiblebutton {display: none !important;}
#galleryOverlay #prevArrow {background: #6bb4b5 url(../images/arrow_left.png) no-repeat scroll center center / 40px 40px; height: 40px; line-height: 40px; margin-top: -20px; opacity: 1; top: 50%; width: 40px;}
#galleryOverlay #prevArrow.notvisiblebutton {display: none !important;}
#galleryOverlay #closeGallery {background: #6bb4b5 url(../images/close.png) no-repeat scroll center center / 20px 20px; height: 40px; line-height: 40px; opacity: 1; width: 40px;}







.panel-menu{margin: 0;}
.panel-menu ul{background: #565656;}
.panel-menu ul li{position: relative; border-bottom: 1px solid rgba(255,255,255,0.3);}
.panel-menu ul li a{background: none; text-decoration: none; color: #FFFFFF; font-size: 1.3rem; display: block; padding: 0 10px; line-height: 40px;}
.panel-menu ul li a:hover{background: none;}
.panel-menu ul li .trigger{	position: absolute; right: 10px; top: 0; background: url(../images/arrow_right.png) center center no-repeat; background-size: 30px auto; height: 40px; width: 40px; text-align: center; cursor: pointer; z-index: 99;}
.panel-menu ul li .trigger.active{-ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ transform: rotate(90deg);}

.panel-menu img{display: none !important;}


.panel-menu ul ul{padding: 0 0 20px 0; margin: 0;}
.panel-menu ul ul li{border: none; padding: 0 0 10px 0;}
.panel-menu ul ul li a{line-height: 30px;}

.panel-menu ul ul ul{padding: 0; margin: 0; display: block;}
.panel-menu ul ul ul li{padding: 0;}
.panel-menu ul ul ul li a{line-height: 1; padding: 5px 10px;}

.panel-topmenu ul{background: #6bb4b5;}


.panel-topbar{line-height: 1.2; padding: 30px 10px;}
.panel-topbar .adress{display: block; margin-bottom: 10px;}
.panel-topbar .adress span{display: block; height: 1px; background: none; overflow: hidden;}


.panel-toggle{width: 40px; height: 40px; background: #6bb4b5 url(../images/menu.png) center center no-repeat; background-size: 20px auto; cursor: pointer; display: none !important; position: absolute; right: 0; top: 50%; margin: -20px 15px 0 0;}

body,html{height: 100%;}
body{overflow:visible;transition: transform 0.2s ease 0s;}
body.ps-active{transform: translateX(250px); position: fixed;}
#panel-left{background-color: #FFFFFF; height: 100%;left: 0;position: fixed;top: 0;transform: translateX(-250px);width: 250px;z-index: 10; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);overflow-y: visible;overflow-x: hidden;}
	


@media (max-width: 1200px){
}

@media (max-width: 992px){
	
	.header-wrapper .mainmenu{display: none;}
	
	.panel-toggle{display: block !important;}
	
	#panel-left .mainmenu{background: #565656;}
	#panel-left .mainmenu ul{margin: 0 0 20px 0;}
	#panel-left .mainmenu ul li{width: 100% !important;}
	#panel-left .mainmenu .nav > li a {text-align: left; padding: 0 10px; line-height: 40px;}
	
	.footer{padding: 15px;}
	.footer .pull-left, .footer .pull-right{float: none; width: 100%; margin: 10px 0}
	
	.footer ul{text-align: left;}
	.footer ul li{display: inline-block; margin: 0 10px 5px 0;}
	.footer ul li a{text-align: left;}

}

@media (max-width: 768px){
	.header-wrapper .topbar{display: none;}
	.header .logo img{height: 40px !important; margin: 10px 0 !important;}
	
	.fullsection.start .logo_animation_gif{width: 70%; max-width: 400px;}
	.fullsection.start .title{font-size: 100% !important; margin-left: -10% !important; margin-right: -10% !important;}
	.fullsection .slideitem{display: none !important;}
	
	.footer .footercertificates{text-align: left;}

}


@media only screen and (max-width: 768px) and (orientation: landscape) {
	.fullsection.start .logo_animation_gif{width: 70%; max-width: 400px; text-align: center;}
	.fullsection.start .logo_animation_gif img{max-height: 100px; width: auto;}
	.fullsection.start .title{font-size: 100% !important; margin-left: -10% !important; margin-right: -10% !important;}

}








.hexagon-grid {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0; /* Clears unordered list default of 40px */
	left: -6.9285714285%;
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}
	
	
.hexagon-grid li {
    list-style-type: none;
    position: relative;
    float: left;
    width: 27.85714285714286%;
    padding: 0 0 32.16760145166612% 0;
    -o-transform: rotate(-60deg) skewY(30deg);
    -moz-transform: rotate(-60deg) skewY(30deg);
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
    overflow: hidden;
    visibility: hidden;
	margin: 0;
}

.hexagon-grid li * {
    visibility: visible;
}


.hexagon-grid li:nth-child(3n+2) {
  margin: 0 1%;
}
	
.hexagon-grid li:nth-child(6n+4) { 
    margin-left: 0.5%;
}
	
.hexagon-grid li:nth-child(6n+4), .hexagon-grid li:nth-child(6n+5), .hexagon-grid li:nth-child(6n+6) {
    margin-top: -6.9285714285%;
    margin-bottom: -6.9285714285%;
    -o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
}


.hexagon-grid li:nth-child(1), .hexagon-grid li:nth-child(5), .hexagon-grid li:nth-child(7){
	opacity: 0;
}
	
	
.hexagon-grid li .hexagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #6bb4b5;
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
	text-decoration: none;
}

.hexagon-grid li .hexagon.active {
	background: #FFFFFF !important;
}

.hexagon-grid li .hexagon.active:before{
	-o-transform: rotate(-60deg) skewY(30deg);
    -moz-transform: rotate(-60deg) skewY(30deg);
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid #6bb4b5;
	content: " ";
	top: 0;
	left: 0;
}

.hexagon-grid li .hexagon.active:after{
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid #6bb4b5;
	content: " ";
	top: 0;
	left: 0;
}
	
.hexagon-grid li .hexagon:hover {
	background: #B5DADA;
}

.hexagon-grid li .hexagon span {
	position: relative; top: 50%; transform: translateY(-52%); left: 0%; width: 100%; text-align: center; color: white; display: block; font-size: 80%; font-weight: bold; text-transform: uppercase; line-height: 1;
}

.hexagon-grid li .hexagon span img {
	width: 42%;
	margin: 0 0 5px 0;
}

@media (max-width: 768px){
	.hexagon-grid li .hexagon span {font-size: 50% !important; }
}

.hexagon-grid li span.hover {
position: absolute; display: block; background: red; top: 0; left: 0; overflow: visible;
}









.logoanimation{position: absolute; width: 100%; height: 100%; transform: scale(1.5);}
.logoanimation .logo{position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); width: 70px; height: auto; margin: -10px 0 0 0; z-index: 99; display: none;}
.logoanimation .logo img{width: 100%; height: auto;}

.logoanimation .wrapper {
  position: absolute;
  display: inline-block;
  z-index: 90;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  -webkit-transition: -webkit-transform 3s ease-out;
  transition: -webkit-transform 3s ease-out;
  transition: transform 3s ease-out;
  transition: transform 3s ease-out, -webkit-transform 3s ease-out;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50% -50px;
          transform-origin: 50% 50% -50px;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate3d(0, 1, 0, 0deg);
          transform: translateX(-50%) translateY(-50%) rotate3d(0, 1, 0, 0deg);
}

.logoanimation .wrapper.active {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate3d(0, 1, 0, 1440deg);
          transform: translateX(-50%) translateY(-50%) rotate3d(0, 1, 0, 1440deg);
}

.logoanimation .cube {
  -webkit-transform: rotate3d(1, 0, 0, -35deg);
          transform: rotate3d(1, 0, 0, -35deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.logoanimation .cube.static {
  -webkit-transform: rotate3d(0, 0, 0, 0deg);
          transform: rotate3d(0, 0, 0, 0deg);
}

.logoanimation .cube.right {
  -webkit-transform: rotate3d(0, 1, 0, 45deg);
          transform: rotate3d(0, 1, 0, 45deg);
}

.logoanimation .cube.left {
  -webkit-transform: rotate3d(0, 1, 0, -45deg);
          transform: rotate3d(0, 1, 0, -45deg);
}

.logoanimation .cube.top {
  -webkit-transform: rotate3d(1, 0, 0, -45deg);
          transform: rotate3d(1, 0, 0, -45deg);
}

.logoanimation .cube.bottom {
  -webkit-transform: rotate3d(1, 0, 0, 45deg);
          transform: rotate3d(1, 0, 0, 45deg);
}

.logoanimation .square {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 2px solid #6ab4b5;
  position: absolute;
  opacity: 0.3;
  -webkit-transform-origin: 50% 50% -50px;
          transform-origin: 50% 50% -50px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

.logoanimation .square.front {
  -webkit-transform: translateZ(50px) rotateY(45deg);
          transform: translateZ(50px) rotateY(45deg);
}

.logoanimation .square.left {
  -webkit-transform: translateZ(50px) rotateY(-45deg);
          transform: translateZ(50px) rotateY(-45deg);
}

.logoanimation .square.back {
  -webkit-transform: translateZ(50px) rotateY(-135deg);
          transform: translateZ(50px) rotateY(-135deg);
}

.logoanimation .square.right {
  -webkit-transform: translateZ(50px) rotateY(135deg);
          transform: translateZ(50px) rotateY(135deg);
}

.logoanimation .square.top {
  -webkit-transform: translateZ(50px) rotateX(90deg) rotateZ(-45deg);
          transform: translateZ(50px) rotateX(90deg) rotateZ(-45deg);
}

.logoanimation .square.bottom {
  -webkit-transform: translateZ(50px) rotateX(-90deg) rotateZ(-45deg);
          transform: translateZ(50px) rotateX(-90deg) rotateZ(-45deg);
}



.logoanimation .wrapper.two{
	display: none;
}

.logoanimation .wrapper.two .square {
	border-width: 4px;
	opacity: 1;
}

.logoanimation .wrapper.two .square.front{
	border-width: 0 4px 4px 0;
}

.logoanimation .wrapper.two .square.left{
	border-width: 0 0 4px 4px;
}

.logoanimation .wrapper.two .square.back{
	border-width: 0;
}

.logoanimation .wrapper.two .square.right{
	border-width: 0;
}

.logoanimation .wrapper.two .square.top{
	border-width: 4px 4px 0 0;
}

.logoanimation .wrapper.two .square.bottom{
	border-width: 0;
}