#conMe{
display:block;
top:0px;
right:180px;
z-index:999;
position:fixed;
box-shadow:0px 0px 5px rgba(0,0,0,0.7);
border-radius:4px;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
}

#conMe{

border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
}


@keyframes contactAni{
    0% { background: rgba(29,121,155,0.4);}
    50%{ background: rgba(29,121,155,0.8); }
    100%{ background: rgba(29,121,155,0.4); }
}

#conMe>a{
display:block;
padding:8px;
background:#02b1d5;
color:#FFF;
text-decoration:none;
font-weight:500;
font-size:130%;
transition:0.5s all;
animation: contactAni 5s linear infinite;
}






#conMe form{
display:block;
padding:20px;
background:rgba(70,70,70,1);
font-size:120%;
}

#conMe form label{
display:block;
margin-bottom:10px;
}

#conMe form label strong{
display:block;
}

#conMe form input{
display:block;
width:100%;
font-size:120%;
padding:8px;
border:0px;
background:#CCC;
font-weight:500;
color:#333;

}

#conMe form input[type=submit]{
background-color:rgba(0,0,0,0.6);
color:#FFF;
}

#contactTarget{
background:#333;
padding:10px;
font-size:130%;
}

#contactTarget:empty{
display:none;
}

.contactClose{
display:block;
padding:4px;
text-decoration:none;
color:#FFF;
border:1px solid #CCC;
border-radius:5px;
text-align:center;
}


#contactContent{
display:block;
width:100%;
text-align:center;
}

#contactContent>div{
display:inline-block;
width:300px;
font-size:130%;
}

#contactContent a{
display:inline-block;
border-bottom:2px solid #CCC;
text-decoration:none;

color:#FFF;
margin-left:5px;
}


@media only screen and (max-width: 900px) {

#contactContent{
text-align:left;
}

#contactContent>div{
display:block;
width:100%;
padding:20px;
font-size:130%;
}
}body{
background:rgb(30,30,30);
margin:0px;
padding:0px;
transition:0.4s all;
}

body.checkout{
filter:blur(1px) saturation(50%);
}

body.checkout #content{
opacity:0.01;
}


body, textarea,input,select,div,a,span,nav,h1,h2,h3{
box-sizing:border-box;
}


body, textarea,input,select,option{
	font-family:Rajdhani,Verdana, Geneva, sans-serif;
	font-weight:300;
color:rgb(230,230,230);
}


#content{
display:block;
width:99%;
padding:15px;
position:absolute;
left:0px;
top:0px;
transition:0.4s all;
}


.logoBg{
background: linear-gradient(135deg, rgba(40,40,40,1) 0%,rgba(40,40,40,0) 50%,rgba(40,40,40,0) 100%);
width:500px;
height:500px;
max-height:100vh;
max-width:100%;
display:block;
position:fixed;
left:0px;
top:0px;
z-index:999;
pointer-events: none;
}
#logo{
display:block;
width:200px;
height:80px;
background-size:contain;
background-image:url(artsys.png);
background-position:center center;
position:fixed;
left:20px;
top:10px;
background-repeat:no-repeat;
z-index:1000;
}

.contentContext #mainNav{
position:fixed;
display:block;
top:0px;
right:0px;
background:rgba(30,30,30,1);
width:100%;
z-index:1111;
max-height:100vh;
overflow:scroll;
height:0px;
}


.contentContext.menuopen #mainNav{
height:auto;
}

.contentContext #menuGroups{
display:none;
height:100vh;
}

.contentContext.menuopen #menuGroups{
display:block;
}

.contentContext.menuopen #mainContent{
display:none;
}


#burger{
display:none;
}


.contentContext #burger{
display:block;
position:fixed;
right:30px;
top:15px;
}

#burger>span{
display:block;
background-color:#FFF;
box-shadow:0px 0px 5px rgba(0,0,0,0.3);
margin-top:10px;
margin-bottom:11px;
width:45px;
height:3px;
position:relative;
transition:0.3s all;
}


.contentContext.menuopen #burger>span:nth-child(1){
transform:rotate(-45deg);
top:7px;
}

.contentContext.menuopen #burger>span:nth-child(2){
transform:rotate(45deg);
top:-7px;
}


.contentContext.menuopen #burger>span:nth-child(3){
display:none;
}


#products{

display:block;
width:100%;
padding:20px;
text-align:center;
padding-top:50px;
}

.contentContext #products{
padding-top:200px;
}


.menuGroup a{
display:inline-block;
width:250px;
color:#CCC;
border-radius:10px;
padding:20px;
text-decoration:none;
font-size:100%;
margin-left:15px;
margin-right:15px;
font-weight:300;
padding:15px;
border-radius:10px;
border:1px solid #CCC;
transition:0.3s all;
}

.menuGroup a:hover{
background:rgba(0,0,0,0.3);
box-shadow:0px 0px 10px rgba(255,255,255,0.2);
}

.menuGroup a>strong{
font-weight:400;
font-size:240%;
color:#02b1d5;
}


.secondaryMenu{
display:block;
width:100%;
padding:20px;
text-align:center;
padding-top:70px;
}

.secondaryMenu a{
display:inline-block;
font-size:140%;
text-decoration:none;
text-align:center;
color:#999;
border-color:#666;
}


@media only screen and (max-width: 900px) {

.menuGroup a{
display:block;
width:80%;
margin-left:10%;
margin-bottom:20px;
}

.menuGroup p{
margin:0px;
}
}#scrollDownArrow{
display:block;
width:180px;
position:fixed;
z-index:99;
right:100px;
bottom:10px;
height:100px;
}

#scrollDownArrow>span{
display:block;
height:4px;
width:40%;
background:#999;
position:relative;
left:0px;
top:0px;
}

#scrollDownArrow>span:nth-child(1){
transform:rotate(45deg);
left:-25px;
top:
}

#scrollDownArrow>span:nth-child(2){
transform:rotate(-45deg);
left:25px;
top:-4px;
}.product{
display:block;
width:100%;
}

.productOpener{
display:block;
width:100%;
min-height:96vh;
background-size:cover;
background-position:center center;
background-attachment: fixed;
margin-bottom:4vh;
}

.productOpenerContent{
padding:0px;
min-height:96vh;
background:rgba(40,40,40,0.7);
text-align:center;
width:100%;
padding:20px;
margin:0px;
}

.productOpener h1{
font-size:700%;
margin:0px;
padding:0px;
padding-top:20vh;
color:#FFF;
margin-bottom:100px;
}

.productOpener h1>span{
display:block;
font-weight:300;
font-size:70%;
}

.productOpener h1>span>span{
border-top:2px solid #02b1d5;
display:inline-block;
}

.openQuote{
display:block;
width:100%;

font-size:240%;
max-width:600px;
text-align:left;
}

.productSubInfoMenu{
display:block;
width:100%;

}

.productSubInfoMenu a, .goBtn{
display:inline-block;
padding:20px;
border-radius:10px;
text-decoration:none;
margin:10px;
vertical-align:top;
color:#CCC;
border:1px solid #CCC;
font-size:142%;
font-weight:500;
background-color:rgba(50,50,50,0.5);
}

.productSubInfoMenu a:hover, .goBtn:hover{
background-color:rgba(0,0,0,0.3);
}


.goBtn{
padding:15px;
border-radius:10px;
font-size:122%;
margin:0px;
margin-top:80px;

}





.productSubInfo{
display:block;
width:100%;
background-size:cover;
background-position:center center;
margin-bottom:4vh;
}

.subInfoMobilePicture{
display:none;
}

.subInfoContent{
background-color:rgba(50,50,50,0.8);
text-align:center;
padding-top:10vh;
text-align:left;
padding-left:10%;
padding-top:20vh;
}



.subInfoContent{
display:block;
min-height:96vh;

}



.subInfoContent h2{
font-size:360%;
margin:0px;
padding:0px;
margin-bottom:5vh;
}

.subInfoContent h2 .prodBread{
font-size:40%;
display:block;
margin-bottom:30px;
}

.subInfoContent h2 .prodBread a{
color:#FFF;
text-decoration:none;
border-bottom:2px solid #666;
color:rgba(255,255,255,0.8);
}

.subInfoContent h2 .prodBread a:hover{
text-shadow:0px 0px 5px rgba(255,255,255,0.5);
color:rgba(255,255,255,1);
border-bottom:2px solid #CCC;
}

.subInfoTxtW{
display:block;
width:100%;
}

.subInfoQuote{
display:inline-block;
vertical-align:top;
font-size:180%;
width:400px;
margin-right:50px;
margin-bottom:40px;
}


.subInfoTxt{
display:inline-block;
vertical-align:top;
width:500px;
max-width:100%;
font-size:130%;
}

.subInfoTxtW .bignr{
font-size:250%;
display:block;
line-height:88%;
width:100%;
}

.subInfoTxtW a{
color: #FFF;
border-bottom:2px solid #FFF;
text-decoration:none;
}


@media only screen and (max-width: 900px) {

.productOpener h1{
font-size:360%;
}

.subInfoQuote{
margin-right:0px;
}

.subInfoQuote, .subInfoTxt, .productSubInfo h2{
width:100%;
padding-left:7%;
padding-right:7%;
}

.productSubInfo h2{
margin-bottom:60px;

}

.productSubInfoMenu a{
width:80%;
margin:0px;

margin-bottom:10px;
}
.subInfoMobilePicture{
display:block;
width:100%;
margin-bottom:20px;
filter:grayscale(20%) contrast(80%) saturate(80%);
}

.goBtn{
display:none !important;
width:80%;
margin-left:10%;
display:block;
text-align:center
}

.subInfoContent{
background-color:rgba(50,50,50,1);
padding-left:0px;
}

.subInfoContent h2{
font-size:250%;
}

.subInfoTxtW{
margin-bottom:40px;
padding-bottom:80px;
}

}.mainSlide{
display:block;
width:1920px;
height:1080px;
background-size:cover;
position:absolute;
}

.mainSlide>.bgImg{
background-size:cover;
width:1920px;
height:1080px;
position:absolute;
top:0px;
left:0px;
display:block;
}

.slideContent{
background:rgba(50,50,50,0.5);
width:1920px;
height:1080px;
position:absolute;
top:0px;
left:0px;
display:block;
}


.slide{
font-size:40px;
}

.slide h1{
font-size:522%;
margin:0px;
padding:0px;
}

.step{
position:absolute;
display:block;
width:1920px;
height:1080px;
padding:100px;
padding-top:350px;
width:100%;
text-align:center;
font-weight:300;
}

.step2{
background:rgba(50,50,50,0.8);
font-size:240%;
}

.step3{
background:rgba(50,50,50,0.8);
font-size:180%;
}

#startpage{
display:block;
width:100%;


text-align:center;
padding-top:20vh;
}

#startpage h1{
font-weight:300;
font-size:330%;
margin:0px;
padding:0px;
}

#startpage h1>span{
display:block;
font-size:73%;
color:#666;
padding-top:10px;
}

#startpage h1>span span{
border-top:2px solid #02b1d5;
padding-top:7px;
display:inline-block;
}