/* Globale Styles */
*, html, body {
	margin: 0;
	padding: 0;
}

body {
	color: #fefeff;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 14px;
	line-height: 24px;
	overflow: hidden;
	background-color: #dedfdf;
	user-select: none;

}

::-webkit-scrollbar {
	width: 2px;
}
::-webkit-scrollbar-track {
	background: inherit;
	background-color: transparent;
}
::-webkit-scrollbar-thumb {
	background: #aaaaaa;
}
::-webkit-scrollbar-thumb:hover {
	background: #a1a1a1;
}

.mobileOnly {display: none;}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {	
	
	.desktopOnly {display: none !important;}
	.mobileOnly {display: inline-block;}

}
/**X**/

/* Canvas Element */
#webgl {
	width: 100%;
	height: auto;
	cursor: grab;
	overflow: hidden;
}
#webgl:active {
	cursor: grabbing
}
/**X**/


.uvMaterialauswahl .fa-info-circle {
	color: #2da1d4;
	font-size: 1.2em;
	vertical-align: top;
	z-index: 10;
}
.carwrapsMaterialfarben .farbPalette .fa-info-circle {
	color: #2da1d4;
	font-size: 1.1em;
	vertical-align: top;
	z-index: 10;
}
.fa-info-circle:hover {
	cursor: pointer;
}
@media only screen and (max-width: 768px) {	

	.carwrapsMaterialfarben .farbPalette .fa-info-circle {

		font-size: 0.8em !important;
	}
	
}

/* Button Menu */
.buttonmenu {
	/*border: 1px solid red;*/
	width: 100%;
	background-color: transparent;
	overflow: hidden;
	transition: 0.5s;
	text-align: center;
	z-index: 1;
	margin: auto;
	display: flexbox;

	position: fixed;
	bottom: 1em;
	left: 50%;
	transform: translate(-50%, 0%);}

.buttonmenu .menu-btn {
	width: 40px;
	height: 40px;
	border-radius: 0 !important;
	border: 1px solid #2da1d4;
	background-color: rgba(255,255,255,0.65);
	padding: 8px 4px;
	margin-bottom: 10px;

	position: relative;
}
.buttonmenu .menu-btn:hover,
.buttonmenu .menu-btn:focus,
.buttonmenu .menu-btn:active {
	outline: 0 !important;
	border: 1px solid #2da1d4;
	transition: .1s;
}
.buttonmenu .menu-btn-txt {
	width: auto;
	height: 40px;
	border-radius: 0 !important;
	border: 1px solid #2da1d4;
	background-color: rgba(255,255,255,0.65);
	padding: 8px 16px;
	margin-bottom: 10px;
	color: #808080;
	display: inline-block;

	position: relative;
}
.buttonmenu .menu-btn-txt:hover,
.buttonmenu .menu-btn-txt:focus,
.buttonmenu .menu-btn-txt:active {
	outline: 0 !important;
	border: 1px solid #2da1d4;
	background-color: rgba(255,255,255,0.55) !important;
	transition: .1s;
	color: #808080 !important;
}		
.buttonmenu .menu-btn img {
	width: 30px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media only screen and (max-width: 768px) {	

	#buttonmenu {
		width: 100% !important;
	}

}

/**X**/


/********************* Sonnenschutz Start *********************/
.startUV {
	background-color: transparent;
	width: 390px;
	height: auto;
	margin: -150px 0;
	display: flex;
	overflow: hidden;
	transition: 0.5s;
	z-index: 1;
	cursor: pointer;
	
	position: fixed;
	bottom: 50%;
	left: 0;
}
.startUV h3 {
	color: #2da1d4;
	padding-left: 1em;
	font-family: 'Antonio', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 2.5em;
}

.startUV h3>i {
	color: #808080;
	font-size: 0.8em;
	cursor: pointer;
}
.startUV h3 .fa-chevron-right {
	visibility: hidden;
}
.startUV h3 .fa-chevron-left {
	visibility: visible;
}
.startUV hr {
	border: 1px solid #808080;
}

.startUV p {
	color: #808080; 
	font-size: 1.1em; 
	padding: 0.5em 3em 0em 4em; 
	text-align: left;
}

.button-startUV {
	border: 1px solid #2da1d4;
	border-radius: unset;
	background-color: rgba(255,255,255,0.5);
	color: #2da1d4;
	font-weight: normal;
	font-size: 1.0em;
	padding: 0.3em 0.8em;
	margin-top: 1em;
	transition: .2s;
}

.startUV:hover .button-startUV {
	color: #2da1d4;
	background-color: rgba(255,255,255,0.7);

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

	.startUV h3 .fa-chevron-right {
		visibility: visible !important;
	}
	.startUV h3 .fa-chevron-left {
		visibility: hidden !important;
	}
	.startUV {
		width: 100%;
		margin: 0 !important;
		padding: 10px 0 !important;
		text-align: left !important;
		background-color: rgba(255,255,255,0.5);
	}
	.startUV {
		bottom: 120px;
	}

	.startUV h3 {
		margin: 0 0 0 0 !important;
		padding: 0 0 0 60px !important;
		text-align: left !important;
		font-size: 1.5em;
	}
	.startUV hr {
		display: none !important;
	}
	.startUV p {
		display: none;
	}

}

/**x**/

/********************* CarWraps Start *********************/
.startCW {
	background-color: transparent;
	width: 390px;
	height: auto;
	margin: -150px 0;
	display: flex;
	overflow: hidden;
	transition: 0.5s;
	z-index: 1;
	cursor: pointer;
	
	position: fixed;
	bottom: 50%;
	right: 0;
	text-align: left;
}

.startCW h3 {
	color: #2da1d4;
	padding-left: 1em;
	font-family: 'Antonio', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 2.5em;
}

.startCW h3 i {
	color: #808080;
	font-size: 0.8em;
	cursor: pointer;
}

.startCW hr {
	border: 1px solid #808080;
}

.startCW p {
	color: #808080; 
	font-size: 1.1em; 
	padding: 0.5em 3em 0em 4em; 
	text-align: left;
}

.button-startCW {
	border: 1px solid #2da1d4;
	border-radius: unset;
	background-color: rgba(255,255,255,0.5);
	color: #2da1d4;
	font-weight: normal;
	font-size: 1.0em;
	text-align: right;
	padding: 0.3em 0.8em;
	margin-top: 1em;
	transition: .2s;
}

.startCW:hover .button-startCW {
	color: #2da1d4;
	background-color: rgba(255,255,255,0.7);
}
@media only screen and (max-width: 768px) {	

	.startCW {
		width: 100%;
		margin: 0 !important;
		padding: 10px 0 !important;
		background-color: rgba(255,255,255,0.5);
		bottom: 70px;
	}
	.startCW h3 {
		margin: 0 !important;
		padding: 0 0 0 60px !important;
		font-size: 1.5em;
	}
	.startCW hr {
		display: none !important;
	}
	.startCW p {
		display: none;
	}

}

/**x**/
.btn-bg-style {
	z-index: 20;
	top: 0;
	background-color: #efefef;
	padding: 10px;
}

/********************* UV Button *********************/
.uv-btn {
	color: #2da1d4;
	border: 1px solid #2da1d4;
	border-radius: 0;
	outline: 0;
	background-color: transparent;
	font-size: 1em;
	font-style: normal;
	text-align: center;
	padding: 5px 10px 5px 10px;
	margin: 0em 3em 0.5em 3em;
	z-index: 5;
}
.uv-btn:hover,
.uv-btn:focus,
.uv-btn:active {
	color: #34bdf8;
	border: 1px solid #34bdf8;
	background-color: rgba(0,0,0,0.05)
}
@media only screen and (max-width: 768px) {	
	
	.uv-btn {
		padding: 3px 30px 3px 30px;
		margin: 0.5em 0 0.5em 0 !important;
	}

}

/********************* UV Auswahl *********************/
.uvMaterialauswahl {
	overflow-x: hidden !important;
	overflow-y: scroll !important;
	height: 100%;
	width: 450px;
	padding: 0 30px 30px 30px;
	border-right: 1px solid #ababab;
	background-color: #efefef;
	transition: 0.1s;

	position: fixed;
	bottom: 0;
	left: -450px;
}
.uvMaterialauswahl .materialauswahl {
	height: 100%;
	background-color: #efefef;
	margin-top: 11em;
	padding: 30px;
}

.uvMaterialauswahl h3 {
	color: #2da1d4;
	margin: 0 0 10px 0;
	font-family: 'Antonio', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 2.2em;
}
.uvMaterialauswahl hr {
	border: 1px solid #808080;
	margin: 10px 0;
}
.uvMaterialauswahl p {
	padding: 0  30px;
	color: #959595;
	text-align: left;
}
.uvMaterialauswahl img {
	margin-left:  30px;
	margin-bottom: 1.35em;
	width: 40px;
	height: auto;
	display: block !important;
	float: right;
	clear: right;
}
.uvMaterialauswahl img:first-child {
	margin-top: 20px !important;
}
.uvMaterialauswahl .uv-settings {
	display: block;
	position: relative;
	padding-left: 2em;
	margin: 1.4em 0;
	cursor: pointer;
	font-size: 1em;
	color: #808080;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.uvMaterialauswahl .uv-settings input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
.uvMaterialauswahl .checkmarkuv {
	position: absolute;
	top: 0;
	left: 0;
	margin-top: .2em;
	height: 20px;
	width: 20px;
	background-color: rgba(0,0,0,0.05);
	border-radius: 50%;
	border: 1px solid #2da1d4;
}
.uvMaterialauswahl .uv-settings:hover input ~ .checkmarkuv {
background-color: rgba(0,0,0,0.09);
}
.uvMaterialauswahl .uv-settings input:checked ~ .checkmarkuv {
background-color: rgba(45, 161, 212, 0.15);
}
.uvMaterialauswahl .checkmarkuv:after {
content: "";
position: absolute;
display: none;
}
.uvMaterialauswahl .uv-settings input:checked ~ .checkmarkuv:after {
display: block;
}
.uvMaterialauswahl .uv-settings .checkmarkuv:after {
	top: 4px;
	left: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: rgba(45, 161, 212, 0.75);
}
@media only screen and (max-width: 768px) {	

	.uvMaterialauswahl p {
		font-size: 0.9em;
		padding: 0  10px;
	}
	.uvMaterialauswahl {
		height: 50%;
		width: 100%;
		border-top: 1px solid #ababab;
		bottom: -1000px;
		left: 0;
	}
	.uvMaterialauswahl .materialauswahl {
		padding: 0 10px 10px 10px;
		margin-top: 2em;
	}
	.uvMaterialauswahl h3 {
		padding: 0px 0px 0px 10px;
		margin-top: 10px;
		font-size: 1.5em;
	}
	
}

/********************* UV Material Info *********************/
.uvMaterialinfo {
	overflow-x: hidden !important;
	overflow-y: scroll !important;
	z-index: 1;
	height: 100%;
	width: 450px;
	padding: 0 30px 30px 30px;
	border-right: 1px solid #ababab;
	background-color: #efefef;
	transition: 0.1s;

	position: fixed;
	bottom: 0;
	left: -450px;
}
.uvMaterialinfo .materialinfo {
	height: 100%;
	background-color: #efefef;
	margin-top: 11em;
	padding: 30px;
}

.uvMaterialinfo h3 {
	color: #2da1d4;
	margin: 0 0 10px 0;
	font-family: 'Antonio', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 2.2em;
}
.uvMaterialinfo hr {
	border: 1px solid #808080;
	margin: 10px 0;
}
.uvMaterialinfo p {
	padding: 0  30px;
	color: #959595;
	text-align: left;
}
@media only screen and (max-width: 768px) {	

	.uvMaterialinfo p {
		font-size: 0.9em;
		padding: 0  10px;
	}
	.uvMaterialinfo {
		height: 50%;
		width: 100%;
		border-top: 1px solid #ababab;
		bottom: -1000px;
		left: 0;
	}
	.uvMaterialinfo .materialinfo {
		padding: 0 10px 10px 10px;
		margin-top: 2em;
	}
	.uvMaterialinfo h3 {
		padding: 0px 0px 0px 10px;
		margin-top: 10px;
		font-size: 1.5em;
	}
	
}



/********************* CarWraps Button *********************/
.cw-btn {
	color: #2da1d4;
	border: 1px solid #2da1d4;
	border-radius: 0;
	outline: 0;
	background-color: transparent;
	font-size: 1em;
	font-style: normal;
	text-align: center;
	padding: 5px 10px 5px 10px;
	margin: 0em 3em 0.5em 3em;
}
.cw-btn:hover,
.cw-btn:focus,
.cw-btn:active {
	color: #34bdf8;
	border: 1px solid #34bdf8;
	background-color: rgba(0,0,0,0.05)
}
@media only screen and (max-width: 768px) {	
	
	.cw-btn {
		padding: 3px 30px 3px 30px;
		margin: 0 !important;
	}

}
@media only screen and (max-width: 320px) {	
	
	.cw-btn {
		padding: 3px 30px 3px 30px;
		margin: 0.5em 0 0.5em 0 !important;
	}

}

/********************* CarWraps Auswahl *********************/
.carwrapsMaterialauswahl {
	overflow-x: hidden !important;
	overflow-y: scroll !important;
	z-index: 1;
	height: 100%;
	width: 450px;
	padding: 0 30px 30px 30px;
	border-left: 1px solid #ababab;
	background-color: #efefef;
	transition: 0.1s;

	position: fixed;
	bottom: 0;
	right: -450px;
}
.carwrapsMaterialauswahl .materialauswahl {
	height: 100%;
	background-color: #efefef;
	margin-top: 11em;
	padding: 30px;
}

.carwrapsMaterialauswahl h3 {
	color: #2da1d4;
	margin: 0 0 10px 0;
	font-family: 'Antonio', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 2.2em;
}
.carwrapsMaterialauswahl hr {
	border: 1px solid #808080;
	margin: 10px 0;
}
.carwrapsMaterialauswahl p {
	padding: 0  30px;
	color: #959595;
	text-align: left;
}
.carwrapsMaterialauswahl img {
	margin-left:  30px;
	margin-bottom: 1.35em;
	width: 55px;
	height: auto;
	display: block !important;
	float: right;
	clear: right;
}
.carwrapsMaterialauswahl img:first-child {
	margin-top: 16px !important;
}
.carwrapsMaterialauswahl .cw-settings {
	display: block;
	position: relative;
	padding-left: 2em;
	margin: 1.3em 0;
	cursor: pointer;
	font-size: 1em;
	color: #808080;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.carwrapsMaterialauswahl .cw-settings input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
.carwrapsMaterialauswahl .checkmarkcw {
	position: absolute;
	top: 0;
	left: 0;
	margin-top: .2em;
	height: 20px;
	width: 20px;
	background-color: rgba(0,0,0,0.05);
	border-radius: 50%;
	border: 1px solid #2da1d4;
}
.carwrapsMaterialauswahl .cw-settings:hover input ~ .checkmarkcw {
background-color: rgba(0,0,0,0.09);
}
.carwrapsMaterialauswahl .cw-settings input:checked ~ .checkmarkcw {
background-color: rgba(45, 161, 212, 0.15);
}
.carwrapsMaterialauswahl .checkmarkcw:after {
content: "";
position: absolute;
display: none;
}
.carwrapsMaterialauswahl .cw-settings input:checked ~ .checkmarkcw:after {
display: block;
}
.carwrapsMaterialauswahl .cw-settings .checkmarkcw:after {
	top: 4px;
	left: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: rgba(45, 161, 212, 0.75);
}
@media only screen and (max-width: 768px) {	

	.carwrapsMaterialauswahl p {
		font-size: 0.9em;
		padding: 0  10px;
	}
	.carwrapsMaterialauswahl {
		height: 50%;
		width: 100%;
		border-top: 1px solid #ababab;
		bottom: -1000px;
		right: 0;
	}
	.carwrapsMaterialauswahl .materialauswahl {
		padding: 0 10px 10px 10px;
		margin-top: 2em;
	}
	.carwrapsMaterialauswahl h3 {
		padding: 0px 0px 0px 10px;
		margin-top: 10px;
		font-size: 1.5em;
	}
	
}

/********************* CarWraps Info *********************/
.carwrapsMaterialinfo {
	overflow-x: hidden !important;
	overflow-y: scroll !important;
	z-index: 1;
	height: 100%;
	width: 450px;
	padding: 0 30px 30px 30px;
	border-left: 1px solid #ababab;
	background-color: #efefef;
	transition: 0.1s;

	position: fixed;
	bottom: 0;
	right: -450px;
}
.carwrapsMaterialinfo .materialinfo {
	height: 100%;
	background-color: #efefef;
	margin-top: 11em;
	padding: 30px;
}

.carwrapsMaterialinfo h3 {
	color: #2da1d4;
	margin: 0 0 10px 0;
	font-family: 'Antonio', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 2.2em;
}
.carwrapsMaterialinfo hr {
	border: 1px solid #808080;
	margin: 10px 0;
}
.carwrapsMaterialinfo p {
	padding: 0  30px;
	color: #959595;
	text-align: left;
}
@media only screen and (max-width: 768px) {	

	.carwrapsMaterialinfo p {
		font-size: 0.9em;
		padding: 0  10px;
	}
	.carwrapsMaterialinfo {
		height: 50%;
		width: 100%;
		border-top: 1px solid #ababab;
		bottom: -1000px;
		right: 0;
	}
	.carwrapsMaterialinfo .materialinfo {
		padding: 0 10px 10px 10px;
		margin-top: 2em;
	}
	.carwrapsMaterialinfo h3 {
		padding: 0px 0px 0px 10px;
		margin-top: 10px;
		font-size: 1.5em;
	}
	
}

/********************* CarWraps Materialfarben *********************/
.carwrapsMaterialfarben {
	overflow-x: hidden !important;
	overflow-y: scroll !important;
	z-index: 1;
	height: 100%;
	width: 450px;
	padding: 0 30px 30px 30px;
	border-left: 1px solid #ababab;
	background-color: #efefef;
	transition: 0.1s;

	position: fixed;
	bottom: 0;
	right: -450px;
}
.carwrapsMaterialfarben .farbPalette {
	height: 100%;
	background-color: #efefef;
	margin-top: 11em;
	padding: 30px;
}

.carwrapsMaterialfarben h3 {
	color: #2da1d4;
	margin: 0 0 10px 0;
	font-family: 'Antonio', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 2.2em;
}
.carwrapsMaterialfarben hr {
	border: 1px solid #808080;
	margin: 10px 0;
}

.carwrapsMaterialfarben h3 i.fa-info-circle {
	font-size: 0.6em !important;
}

.carwrapsMaterialfarben .farbPalette a {
	color: #808080;
	text-decoration: none;
	font-size: 1.1em;
	font-weight: normal;
}
.carwrapsMaterialfarben .farbPalette a:hover,
.carwrapsMaterialfarben .farbPalette a:active,
.carwrapsMaterialfarben .farbPalette a:focus {
	color: #2da1d4;
}
.carwrapsMaterialfarben .farbPalette a>i {
	font-size: 2.5em;
	margin: 5px 8px 5px 30px;
	outline: 2px solid transparent;
	vertical-align: middle !important;
}
.carwrapsMaterialfarben .farbPalette a>div {
	display: inline-block;
}
.carwrapsMaterialfarben .farbPalette a:hover i,
.carwrapsMaterialfarben .farbPalette a:active i,
.carwrapsMaterialfarben .farbPalette a:focus i {
	outline: 2px solid #2da1d4;
}
@media only screen and (max-width: 768px) {	

	.carwrapsMaterialfarben {
		height: 50%;
		width: 100%;
		border-top: 1px solid #ababab;
		bottom: -1000px;
		right: 0;
	}
	.carwrapsMaterialfarben .farbPalette {
		padding: 0 10px 10px 10px;
		margin-top: 2em;
	}
	.carwrapsMaterialfarben h3 {
		padding: 0px 0px 0px 10px;
		margin-top: 10px;
		font-size: 1.5em;
	}
	

}