/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

html { 
font-size: 62.5%;
height: 100%;
position: relative
}

h1,h2,h3,h4,h5,h6 {
font-weight:normal;
}

h1 {
font-size: 4.8rem;
line-height: 120%;
font-weight: 700;
margin: 30px 0 0 0;
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; 
text-transform: uppercase;
color:#FFF;
}

h2 {
font-size: 4rem;
line-height: 120%;
font-weight: 400;
margin: 30px 0 0 0;
text-transform: uppercase;
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; 
}

h3 {
font-size: 2.5rem;
line-height: 120%;
font-weight: 400;
margin: 30px 0 0 0;
color: rgba(128,128,138,1);
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; 
}

h4 {
font-size: 2rem;
line-height: 120%;
font-weight: 400;
margin: 30px 0 0 0;
}

ul {
list-style: none;
}

/*------------------------------------*\
    MAIN
\*------------------------------------*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
margin:0;
padding:0
}

article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object {
display:block
}

/* global box-sizing */
*,
*:after,
*:before {
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}

body {
font-family: Arial, sans-serif;
font-weight: 400;
font-size: 1.7rem;
color: rgba(21,77,88,1);
position: relative;
background: rgba(201,224,227,1);
line-height: 140%;
}

#siteWrapper,
#skrollr-body {
height: 100%;
}

noscript {
background: rgba(44,57,86,1);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100000;
padding: 10%;
overflow: hidden;
text-align: center
}

noscript img {
margin: 0 0 50px 0;
}

noscript .info {
color: #FFF;
}

noscript .info a {
color: yellow
}

/* clear */
.clear:before,
.clear:after {
content:' ';
display:table;
}

.clear:after {
clear:both;
}

.hidden {
display: none;
}

img {
max-width:100%;
height: auto;
vertical-align:bottom;
-webkit-transform: translateZ(0);
}

a, .animate {
text-decoration:none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

a:focus {
outline:0;
}

a:hover,
a:active {
outline:0;
}

strong, b {
font-weight: 600
}

.nicescroll-rails {
z-index: 90 !important;
width: 15px !important;
/*background-color: rgba(201,224,227,1);*/
}

.nicescroll-cursors {
border: none !important;
width: 15px !important;
background: -moz-linear-gradient(-45deg, rgba(232,76,13,1) 0%, rgba(241,135,0,1) 51%, rgba(227,11,124,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(232,76,13,1) 0%,rgba(241,135,0,1) 51%,rgba(227,11,124,1) 100%); 
background: linear-gradient(135deg, rgba(232,76,13,1) 0%,rgba(241,135,0,1) 51%,rgba(227,11,124,1) 100%); 
background-color: rgba(204,204,209,0) !important;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}

.nicescroll-cursors:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}

#siteWrapper {
position: relative;
padding: 0px;
margin: 0 auto;
max-width: 1360px;
background: #FFF;
}

/*------------------------------------*\
    MAINMENU
\*------------------------------------*/

.mobilemenuBtn {
display: block;
}

#menuWrapper {
width: 100%;
max-width: 1360px;
font-size: 1.6rem;
font-weight: 500;
position: fixed;
z-index: 100;
padding: 100px;
background: rgba(13,13,13,1);
display: none
}

#menuWrapper ul li.impressum {
padding: 25px 0 0 0
}

#menuWrapper ul li a {
background: rgba(232,76,13,1);
padding: 8px 15px;
color: #FFF;
text-decoration: none;
margin: 0;
text-transform: uppercase;
font-size: 1.8rem;
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; 
display: inline-block;
margin: 1px 0 0 0
}

#menuWrapper ul li a.active,
#menuWrapper ul li a:hover {
background: rgba(227,11,124,1)
}

#menuWrapper ul li.diff a {
background: rgba(241,135,0,1);
font-size: 1.4rem
}

#menuWrapper ul li.diff a:hover {
background: rgba(232,76,13,1);
}

#menuWrapper ul li.diff a.active {
background: rgba(227,11,124,1)
}

#menuOverlay {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
position: fixed;
z-index: 99;
top: 0;
left:0;
display: none;
}

/* ----- Socials ----- */

#menuWrapper .socials {
position: absolute;
right:100px;
bottom: 100px;
}

#menuWrapper .socials .btn {
width: 50px;
height: 50px;
background: rgba(121,177,184,0.5);
display: inline-block;
border-radius: 50%;
margin: 0 0 0 10px;
background-repeat: no-repeat;
background-position: center center;
opacity: 1
}

#menuWrapper .socials .btn.facebook {
background-image: url(../img/facebook-icon.png);
background-size: 12px;
}

#menuWrapper .socials .btn.twitter {
background-image: url(../img/twitter-icon.png);
background-size: 20px;
}

#menuWrapper .socials .btn.instagram {
background-image: url(../img/instagram-icon.png);
background-size: 22px;
}

#menuWrapper .socials .btn.email {
background-image: url(../img/email-icon.png);
background-size: 19px;
}

#menuWrapper .socials .btn:hover {
opacity: 0.8
}

/*------------------------------------*\
    Header
\*------------------------------------*/

#headerBGWrapper {
position: fixed;
top:0;
z-index: 0;
}

#headerWrapper {
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.8) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.8) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.8) 100%);
position: relative
}

#titleWrapper {
border: 18px solid;
border-image: linear-gradient(135deg, rgba(232,76,13,1) 0%,rgba(241,135,0,1) 51%,rgba(227,11,124,1) 100%) 1;
}

#titleWrapper {
position: absolute;
bottom: 100px;
left: 100px;
display: inline-block;
padding: 40px;
}

#titleWrapper h1 {
font-size: 5.4rem
}

#titleWrapper h2 {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 2.4rem;
text-transform: none;
color: #FFF;
margin: 15px 0 0 0
}

/*------------------------------------*\
    CONTENT
\*------------------------------------*/

#contentWrapper {
width: 100%;
margin: 0;
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto; 
-webkit-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-ms-transition: 0.4s ease-out;
-o-transition: 0.4s ease-out;
transition: 0.4s ease-out; 
position: relative;
z-index: 10;
}

#contentWrapper a {
color: rgba(240,126,38,1);
font-weight: 400;
}

#contentWrapper ul {
list-style: circle;
margin: 30px 0 0 22px
}

#contentWrapper ol {
margin: 30px 0 0 22px
}

#contentWrapper ul li,
#contentWrapper ol li {
margin: 5px 0 0 0
}

.sectionInner {
max-width: 1585px;
}

.section {
background: #FFF;
}

.section.no1 {
background: transparent
}

.sectionInner h2 {
font-size: 4rem;
font-weight: 300;
}

.sectionInner h3 {
font-size: 2.4rem;
}

.sectionInner p {
margin: 30px 0 0 0
}

.sectionInner .textbox .text {
padding: 50px;
margin: 30px 0 0 0;
}

/* ---- Der Visiomat ---- */

.visiomatWrapper {
display: grid; 
grid-template-rows:auto; 
grid-template-columns:60% 40%;
background: rgba(121,177,184,1)
}

.visiomatWrapper .text {
padding: 100px;
color: #FFF
}

.visiomatWrapper .imageWrapper {
display: grid; 
grid-template-rows:1fr 1fr 1fr; 
grid-template-columns:auto;
}

.visiomatWrapper .imageWrapper .img {
background-repeat: no-repeat;
background-size: cover;
background-position: center center
}

/* ---- Beteiligte ----- */

.beteiligteWrapper {
padding: 100px 20% 100px 100px;
position: relative;
color: #FFF
}

.beteiligteWrapper::before {
background-image: url(../img/visiomat_bg.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 1;
}

.beteiligteWrapper * {
position: relative;
z-index: 1
}

.beteiligteWrapper h2 {
color: #FFF;
}

.beteiligteWrapper .group,
.beteiligteWrapper .groupw {
font-size: 3rem;
line-height: 120%;
font-weight: 400;
margin: 50px 0 30px 0;
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; 
display: block;
text-transform: uppercase
}

.beteiligteWrapper .groupw {
margin: 80px 0 30px 0;
}

.beteiligteWrapper .accordion {
margin: 20px 0 0;
opacity: 0.5 !important;
overflow:hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;	
text-align: left;
background: #FFF
}

.beteiligteWrapper .accordion.active {
background: #FFF;
margin: 50px 0;
display: block
}

.beteiligteWrapper .accordion .title {
display: block;
position: relative;
font-size: 3.4rem;
line-height: 130%;
color: rgba(232,76,13,1);
position: relative;
padding: 25px 50px 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.beteiligteWrapper .accordion.active .title,
.beteiligteWrapper .accordion.openfirst .title {
color: rgba(227,11,125,1);
padding: 40px 50px 25px;
overflow: show;
text-overflow: inherit;
white-space: normal
}

.beteiligteWrapper .accordion .title .icon {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
background-image: url(../img/arrow-up.png);
background-repeat: no-repeat;
background-size: 28px;
background-position: center center;
display: block;
width:28px;
height: 17px;
position: absolute;
right:50px;
top: 40px;
}

.beteiligteWrapper .accordion.active .title .icon {
background-image: url(../img/arrow-down.png);
top:50px
}

.beteiligteWrapper .textblock {
margin: 50px 0;
padding: 0 60px;
}

.beteiligteWrapper .accordion.active,
.beteiligteWrapper .accordion.active:hover,
.beteiligteWrapper .accordion.openfirst {
opacity: 1 !important;
background: #FFF
}

.beteiligteWrapper .accordion:hover {
opacity: 1 !important;
}

.beteiligteWrapper .accordion .title {
margin: 0;
cursor: pointer
}

.beteiligteWrapper .accordion .acccontent {
color: rgba(21,77,80,1);
overflow:auto;
padding: 0 10% 50px 50px;
display: none;
font-weight: 400
}

.beteiligteWrapper .accordion .acccontent h4 {
margin: 10px 0 0 0;
font-size: 2.4rem;
}

.beteiligteWrapper .accordion.openfirst .acccontent {
display: block
}

.beteiligteWrapper .accordion em {
color: rgba(227,11,125,1);
}

.beteiligteWrapper .accordion .acccontent a {
border-bottom: 1px solid rgba(227,11,125,1);
display: inline-block;
padding: 0 0 1px 0;
}

.beteiligteWrapper .accordion .acccontent strong {
color: rgba(245,245,255,0.6);
}

/* ---- SECTION #Impressionen ----- */

.impressionenWrapper {
padding: 100px 20% 100px 100px;
}

.impressionenWrapper .accordion {
margin: 20px 0 0;
opacity: 0.5 !important;
overflow:hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;	
text-align: left;
background:rgba(121,177,184,1);
}

.impressionenWrapper .accordion.active {
background:rgba(121,177,184,1);
margin: 50px 0;
display: block
}

.impressionenWrapper .accordion .title {
display: block;
position: relative;
font-size: 3.4rem;
line-height: 130%;
color: #FFF;
position: relative;
padding: 25px 50px 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.impressionenWrapper .accordion.active .title,
.impressionenWrapper .accordion.openfirst .title {
color: #FFF;
padding: 40px 50px 25px;
overflow: show;
text-overflow: inherit;
white-space: normal
}

.impressionenWrapper .accordion .title .icon {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
background-image: url(../img/arrow-white.png);
background-repeat: no-repeat;
background-size: 28px;
background-position: center center;
display: block;
width:28px;
height: 17px;
position: absolute;
right:50px;
top: 40px;
}

.impressionenWrapper .accordion.active .title .icon {
background-image: url(../img/arrow-white.png);
top:50px;
transform:rotate(180deg);
}

.impressionenWrapper .accordion.active,
.impressionenWrapper .accordion.active:hover,
.impressionenWrapper .accordion.openfirst {
opacity: 1 !important;
background:rgba(121,177,184,1);
}

.impressionenWrapper .accordion:hover {
opacity: 1 !important;
}

.impressionenWrapper .accordion .title {
margin: 0;
cursor: pointer
}

.impressionenWrapper .accordion .acccontent {
overflow:hidden;
}

/* ----- Galerie ----- */

.galerie {
margin: 10px auto 20px;
position: relative;
overflow: hidden
}

.galerie .owl-stage-outer {

}

.galerie .clear {
clear: both
}

.galerie .owl-stage {
overflow:auto;
}

.galerie .owl-stage:before,
.galerie .owl-stage:after {
content:' ';
display:table;
}

.galerie .owl-stage:after {
clear:both;
}

.galerie .owl-item {
float: left
}

.galerie .owl-item a {
display: block;
opacity: 0.8;
overflow: hidden
}

.galerie .owl-item img {
display: block;
height: auto;
-webkit-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-ms-transition: 0.4s ease-out;
-o-transition: 0.4s ease-out;
transition: 0.4s ease-out;
}

.galerie .owl-item a:hover {
opacity: 1
}

.galerie .owl-item a:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

.galerie .owl-nav.disabled {
display: none;
}

.galerie .owl-dots {
text-align: center;
margin: 15px 0 0 0
}

.galerie .owl-dots .owl-dot {
display: inline-block;
border: none;
outline: none;
width: 15px;
height: 15px;
background: rgba(255,255,255,.5);
cursor: pointer;
border-radius: 50%;
margin: 0 4px;
padding: 0;
-webkit-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-ms-transition: 0.4s ease-out;
-o-transition: 0.4s ease-out;
transition: 0.4s ease-out;
}

.galerie .owl-dots .owl-dot.active {
background: rgba(255,255,255,1);	
}

.galerie .owl-dots .owl-dot span {
display: none;
}

#lightcase-overlay {
background: rgba(0,0,0,0.8)
}

#lightcase-info {
position: relative !important
}

#lightcase-info #lightcase-title {
color: #FFF !important;
font-size: 2rem !important;
text-align: center !important;
}

/* ---- SECTION #Videos ----- */

.videosWrapper {
padding: 100px 20% 100px 100px;
background:rgba(121,177,184,1);
color: #FFF
}

.videosWrapper .videos {
margin: 20px 0 0;
opacity: 0.5 !important;
overflow:hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;	
text-align: left;
background:rgba(255,255,255,1);
}

.videosWrapper .videos.active {
background:rgba(255,255,255,1);
margin: 50px 0;
display: block
}

.videosWrapper .videos .title {
display: block;
position: relative;
font-size: 3.4rem;
line-height: 130%;
color: rgba(121,177,184,1);
position: relative;
padding: 25px 50px 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.videosWrapper .videos.active .title,
.videosWrapper .videos.openfirst .title {
color: rgba(121,177,184,1);
padding: 40px 50px 25px;
overflow: show;
text-overflow: inherit;
white-space: normal
}


.videosWrapper .videos.active,
.videosWrapper .videos.active:hover,
.videosWrapper .videos.openfirst {
opacity: 1 !important;
background:rgba(255,255,255,1);
}

.videosWrapper .videos:hover {
opacity: 1 !important;
}
.videosWrapper .videos .acccontent {
overflow:hidden;
}

.videosWrapper .owl-dots .owl-dot {
background: rgba(121,177,184,0.5);
}

.videosWrapper .owl-dots .owl-dot.active {
background: rgba(121,177,184,1);	
}

/* ---- Wer und was ----- */

.whoWrapper {
padding: 100px 20% 100px 100px;
position: relative;
color: #FFF;
background: #e84c0d; 
background: -moz-linear-gradient(left, #e84c0d 0%, #f18700 100%);
background: -webkit-linear-gradient(left, #e84c0d 0%,#f18700 100%);
background: linear-gradient(to right, #e84c0d 0%,#f18700 100%);
}

.whoWrapper h3 {
color:#FFF;
margin: 50px 0 0 0;
font-size: 2.8rem;
}

.whoWrapper a {
color: #FFF !important;
display: inline-block;
border-bottom: 1px solid #FFF
}

/* ---- Kontakt ----- */

.kontaktWrapper {
display: grid; 
grid-template-rows:auto; 
grid-template-columns:1fr 1fr;
background: rgba(121,177,184,1)
}

.kontaktWrapper .adresse {
padding: 100px;
color: #FFF
}

.kontaktWrapper .adresse a {
color: #FFF !important;
}

.kontaktWrapper .socialWrapper {
position: relative;
}

.kontaktWrapper .socials {
position: absolute;
right:100px;
bottom: 120px;
}

.kontaktWrapper .socials .btn {
width: 60px;
height: 60px;
background: #FFF;
display: inline-block;
border-radius: 50%;
margin: 0 0 0 20px;
background-repeat: no-repeat;
background-position: center center;
opacity: 1
}

.kontaktWrapper .socials .btn.facebook {
background-image: url(../img/facebook-icon.png);
background-size: 14px;
}

.kontaktWrapper .socials .btn.twitter {
background-image: url(../img/twitter-icon.png);
background-size: 26px;
}

.kontaktWrapper .socials .btn.instagram {
background-image: url(../img/instagram-icon.png);
background-size: 28px;
}

.kontaktWrapper .socials .btn.email {
background-image: url(../img/email-icon.png);
background-size: 25px;
}

.kontaktWrapper .socials .btn:hover {
opacity: 0.8
}

/* ----- Impressum ----- */

.section.impressum {
padding: 100px;
}

/* ----- Datenschutz ----- */

.section.datenschutz {
padding: 100px 20% 100px 100px;
background: rgba(234,243,245,1)
}

.section.datenschutz h4 {
margin: 30px 0 0 0;
font-weight: bold
}

/* ----- Footer ----- */

#footerWrapper {
position: fixed;
bottom:0;
width: 100%;
max-width: 1360px;
z-index: 100
}

/* ----- UPBTN ----- */

.upBtn {
width: 70px;
height: 60px;
background: rgba(13,13,13,1);
background-image: url(../img/arrow-down.png);
transform: rotate(180deg);
background-repeat: no-repeat;
background-size: 26px;
background-position: center center;
position: absolute;
bottom: 50px;
right: 100px;
cursor: pointer;
z-index: 500;
-webkit-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-ms-transition: 0.4s ease-out;
-o-transition: 0.4s ease-out;
transition: 0.4s ease-out;
opacity: 0;
}

.upBtn.show {
margin: 0;
opacity: 1
}

.upBtn.mob {
display: none
}

/*------------------------------------*\
    SHOW HIDE MENU BUTTON
\*------------------------------------*/

.btnWrap {
position: fixed;
top:0;
width: 100%;
max-width: 1360px;
z-index: 100
}

.mobilemenuBtn {
color: #FFF;
font-size: 1.5rem;
font-weight: 500;
text-transform: uppercase;
text-align: left;
cursor: pointer;
z-index: 10000;
line-height: 100%;
position: absolute;
z-index: 100;
top:50px;
right: 100px;
background: rgba(13,13,13,1);
width: 70px;
height: 60px;
}

.mobilemenuWrapper {
display: none;
}

button.lines-button {
    background: rgba(51,56,58,0);
    border: medium none;
    display: inline-block;
    position: absolute;
    right:10px;
    top:20px;
    z-index: 800;
    outline: none;
}

.lines-button {
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

.lines {
    background: rgba(241,135,0,1);
    display: inline-block;
    height: 4px;
    position: relative;
    transition: all 0.3s ease 0s;
    width: 36px;
}

.lines::before, .lines::after {
    background: rgba(227,11,124,1);
    content: "";
    display: inline-block;
    height: 4px;
    left: 0;
    position: absolute;
    transform-origin: 0.15rem center 0;
    transition: all 0.3s ease 0s;
    width: 36px;
}

 .lines::after {
 background:rgba(232,76,13,1)
}

.lines::before {
    top: 9px;
}
.lines::after {
    top: -9px;
}

.lines-button.close {
    transform: scale3d(0.8, 0.8, 0.8);
}

.lines-button.close .lines::before,
.lines-button.close .lines::after {
background:rgba(232,76,13,1) !important
}

.lines-button.arrow.close .lines::before {
    transform: rotate3d(0, 0, 1, 40deg);
}
.lines-button.arrow.close .lines::after {
    transform: rotate3d(0, 0, 1, -40deg);
}
.lines-button.arrow-up.close {
    transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 90deg);
}
.lines-button.minus.close .lines::before, .lines-button.minus.close .lines::after {
    top: 0;
    transform: none;
    width: 3rem;
}
.lines-button.x.close .lines {
    background: transparent none repeat scroll 0 0;
}
.lines-button.x.close .lines::before, .lines-button.x.close .lines::after {
    top: 0;
    transform-origin: 50% 50% 0;
    width: 36px;
}
.lines-button.x.close .lines::before {
    transform: rotate3d(0, 0, 1, 45deg);
}
.lines-button.x.close .lines::after {
    transform: rotate3d(0, 0, 1, -45deg);
}