/* BASE
* -------------------------------------------------- 
*  Base styles 
* 
*  Default styles of the project, these will not 
*  be changed or altered in most of the cases
* -------------------------------------------------- */

/* ----- KLEUREN ----- */
:root{
	--rytm-blue: #007DA5;
	--rytm-black: #2a2724;
	--rytm-brown: #B86954;
	--rytm-grey: #666666;
	--rytm-white: #efecea;
	--bodhi-lines: #3D3D3D;
	--bodhi-gold: #E9DCCC;
	--bodhi-background: #232325;
	--rytm-pure-white: #fdfdfd;  
}

/* ----- FONTS ----- */
body{
	font-family:"neuzeit-grotesk";
	background-color:var(--rytm-pure-white);
	color:var(--rytm-black);
}
h1, h2, h3, h4, h5, h6{
	font-family:"neuzeit-grotesk";
	color:var(--rytm-black);
}
h1{
	margin:0 0 5px 0;
}
h4{
	margin:0;
	font-weight:300;
}
/* HEADER / NAV 
* --------------------------------------------------
*  Header/nav/hamburger styles 
* -------------------------------------------------- */
.wpbf-logo img{
    height: 100%;
    max-height:51px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.wpbf-nav-wrapper {
    padding: 10px;
}
header,
header .wpbf-navigation{
	background:var(--bodhi-gold)!important;
}
.wpbf-menu-centered .logo-container .wpbf-logo{
	max-width:100px;
	padding:10px 0
}
header .wpbf-navigation .wpbf-logo-container .wpbf-logo{
	max-width:100px;
	padding:10px 0
}
header .wpbf-navigation #menu-item-92{
	/*display:none;*/
}


/* GENERAL
* --------------------------------------------------
*  General styles 
* 	Hero/subhero/grids/contact forms 
* -------------------------------------------------- */

/* HOME
* --------------------------------------------------
*  Homepage styles
* -------------------------------------------------- */
.vc_row{
	margin-left:0;
	margin-right:0;
}
.vc_column_container>.vc_column-inner{
	padding:0;
}

/* SUBPAGE
* --------------------------------------------------
*  Subpage styles
* -------------------------------------------------- */


/* ----- SINGLE CONFIGURATIE PAGE ----- */
.text-container{
	padding:50px;
}
.main-text{
	font-size:30px;
	margin-bottom:25px;
}

.sub-text{
	font-size:20px;
}

.button-container{	
	font-size:17px;
	bottom:0;
	display:flex;
	flex-direction:column;
	width: calc(100% - 40px);
}
.model-viewer-button{
	padding:10px;
	margin: 5px 0px;
	width:100%;
	border:1px solid var(--rytm-black);
	color: var(--rytm-black);
	cursor:pointer;	
	
	user-select:none;
}
.model-viewer-button:hover{
	background-color: var(--rytm-black);
	color:var(--rytm-pure-white);
}

#editbutton{
	
	color: var(--rytm-pure-white);
	background-color:var(--rytm-black);
}

#editbutton:hover{
	border:1px solid var(--rytm-blue);
	background-color: var(--rytm-blue);
	color:var(--rytm-pure-white);
}

.export-glb{
	position: absolute;
	text-align: center;
    width: 100px;
    left: 30px;
    font-size: 11px;
    bottom: 20px;
}

.logo-side{
	background-repeat:no-repeat;
	background-size:contain;
}

#inner-content{
	max-width:none;
	padding:0;	
}

.single-configuratie .rw-configuration, .single-bestelling .rw-configuration, .single-design .rw-configuration{
	height:calc(100%);
}

.single-configuratie .rw-configuration > .section_inner, .single-bestelling .rw-configuration > .section_inner{
	display:flex;
	align-items:center;
	height:100vh;
	width:100%;
	padding:20px;
	bottom:0;
}
.single-design .rw-configuration > .section_inner{
	display:flex;
	align-items:flex-end;
	height:100%;
}
.single-design .rw-configuration > .section_inner{
	padding:50px 0;
}
.single-configuratie model-viewer, .single-bestelling model-viewer{
	width:calc(100vw - 500px);
	height:100%;
	/*--poster-color: transparent;*/
	background-color: var(--rytm-white);
}
.single-design model-viewer{
	width:30vw;
	height:calc(100vh - 151px);
	/*--poster-color: transparent;*/
	background-color: var(--rytm-white);
}
model-viewer::part(default-progress-bar) {
	display: none;
}
.single-configuratie .model-viewer-loading, .single-bestelling .model-viewer-loading, .single-design .model-viewer-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: var(--rytm-white);
	color: var(--rytm-black);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height:100%;
	width: 50vw;
	opacity:0;
	z-index:-1;
	transition:all .3s ease;
}
.single-configuratie .model-viewer-loading.active, .single-bestelling .model-viewer-loading.active, .single-design .model-viewer-loading.active{
	opacity:1;
	z-index:250;
}
.single-configuratie .model-viewer-loading .loadicon, .single-bestelling .model-viewer-loading .loadicon, .single-design .model-viewer-loading .loadicon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.single-configuratie .model-viewer-loading .loadicon p, .single-bestelling .model-viewer-loading .loadicon p, .single-bestelling .model-viewer-loading .loadicon p {
	text-align: center;
}
.single-configuratie .model-viewer-loading .load, .single-bestelling .model-viewer-loading .load, .single-design .model-viewer-loading .load {
	display: block;
	background-color: var(--rytm-black);
	height: 32px;
	width: 2px;
	margin: 25px;
	animation: rotate 2s linear infinite;
}
.single-configuratie .model-viewer-loading .load span, .single-bestelling .model-viewer-loading .load span, .single-design .model-viewer-loading .load span {
	display: block;
	background-color: var(--bodhi-gold);
	height: 0;
	width: 100%;
	animation: fill 2s linear infinite;
}
@keyframes fill {
	0% {
		height: 0;
	}
	75% {
		height: 100%;
	}
	90% {
		height: 0;
	}
	100% {
		height: 0;
	}
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(0deg);
	}
	90% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(180deg);
	}
}

.single-configuratie .model-viewer-loading .progress-full, .single-bestelling .model-viewer-loading .progress-full, .single-design .model-viewer-loading .progress-full {
	border: 1px solid transparent;
	outline: 1px solid white;
	width: 100%;
	height: 4px;
	margin: 16px 0px 8px 0px;
}
.single-configuratie .model-viewer-loading .progress, .single-bestelling .model-viewer-loading .progress, .single-design .model-viewer-loading .progress {
	background: white;
	height: 100%;
}
.single-configuratie .ar-share-container, .single-bestelling .ar-share-container{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 450px;
	z-index: 1;
	padding:20px 0px 20px 20px;
	text-align: center;
	justify-content:space-between;
	height:100%
}
.single-design .ar-share-container{
	display: flex;
	flex-direction: column;
	align-items: left;
	width: 30vw;
	padding-left:30px;
	z-index: 1;
	text-align: left;
}
.single-configuratie .ar-share-container h2, .single-bestelling .ar-share-container h2, .single-design .ar-share-container h2{
	color:var(--rytm-black);
}
.single-configuratie .ar-share-container .ar-share-buttons-row, .single-bestelling .ar-share-container .ar-share-buttons-row{
	display: flex;
	justify-content: space-between;
	width: 75%;
	margin: 12px 0px;
}
.single-design .ar-share-container .ar-share-buttons-row{
	display: flex;
	justify-content: space-between;
	width: 40%;
	margin: 12px 0px;
}
.single-configuratie .ar-share-container .ar-share-buttons-row a, .single-bestelling .ar-share-container .ar-share-buttons-row a{
	color: var(--rytm-black);
	font-size: 2em;
	text-decoration: none;
	transition: all .3s ease;
}
.single-design .ar-share-container .ar-share-buttons-row a{
	color: var(--rytm-black);
	font-size: 1em;
	text-decoration: none;
	transition: all .3s ease;
}
.single-configuratie .ar-share-container .ar-share-buttons-row a:hover, .single-bestelling .ar-share-container .ar-share-buttons-row a:hover, .single-design .ar-share-container .ar-share-buttons-row a:hover{
	color:var(--rytm-blue);
}
.single-configuratie .ar-share-container .link-copied-popup, .single-bestelling .ar-share-container .link-copied-popup , .single-design .ar-share-container .link-copied-popup{
	display: block;
	opacity: 0;
	padding: 4px 12px;
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: black;
	color: white;
	transition: all .3s ease;
}
.single-design .ar-info-container{
	width:30vw;
	align-items:right;
	text-align:right;
}
.design-name{
	font-weight:bold;
	color:#5F021F;
	text-transform:uppercase;
}
.design-title{
	font-weight:bold;
	text-transform:uppercase;
}

.pantoneList{
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
}
.pantone-box-wrapper{
	margin-left:10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pantone-box{
	height:50px;
	width:50px;
}
.color-box{
	
}

/* FOOTER
* --------------------------------------------------
*  Footer styles
* -------------------------------------------------- */


footer {
	display:none !important;
}


/* MEDIA QUERIES
* --------------------------------------------------
*  Media query styles
* -------------------------------------------------- */



/* START MAX WIDTH 1280PX */
@media screen and (max-width: 1280px) {
  /* Algemeen */
  .vc_row .section_inner{
    max-width:100%;    
  }
}
/* END MAX WIDTH 1280PX */


/* START MAX WIDTH 1024PX */
@media screen and (max-width: 1024px) {
	/* Header */
	header .wpbf-mobile-menu-hamburger .wpbf-mobile-logo-container .wpbf-mobile-logo{
		max-width: 63px;
		margin:0 auto;
		padding:10px 0;		
	}
	header .wpbf-menu-toggle-container{
		display:none;
	}
	
	/* Single configuratie page */
	.single-configuratie model-viewer{
		height:50vh;
	}

}
/* END MAX WIDTH 1024PX */

/* START MAX WIDTH 1023PX */
@media screen and (max-width: 1023px) { 
    .model-viewer-section-inner{
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        max-width:85% !important;
        margin: 0 auto;
    }
    .single-design model-viewer{
        width:100% !important;
        margin-bottom:35px;
    }
    .ar-share-container{
		width:70%;
		align-items: center;
		text-align:center !important;
        padding-left:0 !important;
    }
	.single-design .ar-info-container {
		text-align: center;
	}
	.ar-info-container{
		display:flex;
		justify-content: center;
		text-align: center;
		width:100%;
		flex-direction:column;
	}
	.pantoneList{
		justify-content:center;
	}
	.single-design .ar-share-container .ar-share-buttons-row{
		width: 100%;
}
}
/* END MAX WIDTH 1023PX */

/* START MAX WIDTH 768PX */
@media screen and (max-width: 768px) {
	/* Algemeen */
	.vc_row .section_inner{
		padding:0 50px;
	}
	/* Single configuratie page */
	.single-configuratie .rw-configuration > .section_inner{
		flex-wrap:wrap;
		justify-content:center;
	}
	.single-configuratie model-viewer{
		height:500px;
		width:100%;
	}
	.single-configuratie .model-viewer-loading{
		top:0;
		left:50%;
		transform:translateX(-50%);
		height:600px;
		width:calc(100% - 100px);
	}
	.single-configuratie .ar-share-container{
		width:100%;
		padding-left:0;
	}
	model-viewer .ar-button {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		border: none;
		background-color: var(--rytm-blue);
		color: var(--rytm-white);
		padding: 12px 16px;
		width:70%;
		font-size: 1em;
	}
	.model-viewer-section-inner{
		max-width:85% !important;
		margin: 0 auto;
	}
	
}
/* END MAX WIDTH 768PX */

@media all and (min-width:768px) and (max-width:1024px){
    .single-design model-viewer {
        width: 100% !important;
        margin-bottom: 35px;
        max-width: 65vw;
        max-height: 55vh;
    }
}

/* START MAX WIDTH 480PX */
@media screen and (max-width: 480px) {
	/* Single configuratie page */
	.single-configuratie model-viewer, .single-design model-viewer{
		height:350px;
	}
}
/* END MAX WIDTH 480PX */


/* START MAX WIDTH 320PX */
@media screen and (max-width: 320px) {

}
/* END MAX WIDTH 320PX */