@font-face {
	font-family: "BrownLLWeb";
	src: url("../../wp-content/themes/inclass/assets/fonts/BrownLLWeb-Light.woff") format("woff");
	src: url("../../wp-content/themes/inclass/assets/fonts/BrownLLWeb-Light.woff2") format("woff2");
	font-weight: 300;
 	font-style: thin;
}

@font-face {
	font-family: "BrownLLWeb";
	src: url("../../wp-content/themes/inclass/assets/fonts/BrownLLWeb-Regular.woff") format("woff");
	src: url("../../wp-content/themes/inclass/assets/fonts/BrownLLWeb-Regular.woff2") format("woff2");
	font-weight: 400;
 	font-style: normal;
}


/*OCULTAR OPCIONES*/

/*-------------GENERAL-------------*/

#property-editor .property-class:not(.tienehijos){
	display: none;
}

.propiedad_oculta{
	display: none;
}

/*CAMBIOS ESTILO*/

#app-container{
	padding: 0;
}

#app-container .main{
	margin: 0;
}

#app-container #property-editor,
#app-container .main{
	height: 100%;
}

#viewer{
	width: calc(60% - 15px);
	margin-right: 15px;
	height: 740px;
}

@media (max-width: 1002px) {
	#viewer {
		height: 550px;
	}
}

#app-container #export{
	padding: 0;
    display: flex;
    flex-flow: wrap;
    border: 0;
    height: auto;
	justify-content: flex-end;
    padding: 0 37px;
}

#app-container.ampliado #export{
	padding: 0 52px;
}

#app-container.ampliado #viewer,
#app-container.ampliado{
	width: 100% !important;
	height: 100% !important;
}

#app-container.ampliado #property-editor{
	display: none;
}

#app-container #export::before{
	display: none;
}

#app-container #export .export-item:not(:last-child){
	margin-right: 15px;
}

#property-editor{
	width: 40%;
	height: 740px !important;
}

#property-editor,
#viewer{
    border: 0;
    background: #F1F1F1;
}

#property-editor::before,
#viewer::before{
    display: none;
}

#property-editor{
    padding: 50px 10px 50px 50px;
    /*display: flex;
    justify-content: center;
    flex-flow: column;*/
}

#property-editor::-webkit-scrollbar {
	background: #d6d5d6;
	width: 6px;
}

#property-editor::-webkit-scrollbar-thumb {
	background: #4a4a4a;
	width: 6px;
	height: 76px;
}

#property-editor > p,
#property-editor .property-class,
#property-editor .property-class > .property{
    color: #434343;
}

#property-editor .property-class > .property[data-visible="true"]{
	max-width: calc(100% - 20px);
}

#property-editor .property-class > .property[data-visible="true"]::after{
	right: -20px;
}

#property-editor .property-class,
#property-editor .property-class > .property{
	font-size: 18px;
}

#property-editor .property-class{
    background: none;
    font-family: 'BrownLLWeb', sans-serif;
    width: 100%;
	max-width: 30rem;
    padding-bottom: 15px;
	padding-right: 50px;
}

#property-editor .property-class > .property:first-child{
    margin-top: 10px;
}

#property-editor .property-class .titulo_class{
	border-top: 1px solid #434343;
	border-bottom: 1px solid #434343;
	padding: 10px 0;
	display: inline-block;
    width: 100%;
}

#property-editor .property-class > .property{
    font-family: 'BrownLLWeb', sans-serif;
    padding: 10px 0;
    background: none;
    width: 100%;
	font-weight: 300;
}

#property-editor .property-class > .property[data-editable="true"]::after{
    content: '';
    background: url(arrow_bottom.png);
    width: 20px;
	height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    background-position: center;
}

#property-editor .property-class > .property[data-editable="true"].abierta::after{
    transform: rotate(180deg);
}

#property-editor .property-class > .property > .property-choice{
	color: #706C6C;
    padding: 8px 0 0 0;
	font-weight: 300;
}

#property-editor .property-class > .property > .property-choice:first-child{
    padding-top: 11px;
}

#property-editor .property-class > .property > .property-choice::before{
	content: '\f111';
	color: #fff;
	font-family: 'FontAwesome';
	font-size: 10px;
    margin-right: 15px;
}

#property-editor .property-class > .property > .property-choice.selected::before{
	color: #706C6C;
}

#property-editor .property-class > .property > .property-choice.selected{
	font-family: 'BrownLLWeb', sans-serif;	
}

.editor_coleccion{
	margin: 0 0 15px 0;
	font-family: 'BrownLLWeb', sans-serif;
	font-weight: 400 !important;
	font-size: 24px;
	line-height: 100%;
	max-width: 20rem;
	padding-right: 50px;
}

.editor_modelo{
	margin: 0 0 70px 0;
	font-family: 'BrownLLWeb', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 120%;
	max-width: 20rem;
	padding-right: 50px;
}

/*BOTONES*/

.editor_botones{
	position: absolute;
	bottom: 30px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.editor_botones > .caja{
    max-width: 400px;
    margin: 0 auto;
    display: flex;
}

.editor_botones .boton{
	display: flex;
	align-items: center;
	font-family: 'BrownLLWeb', sans-serif;
	pointer-events: none;
	font-size: 13px;
	flex-flow: column;
}

.editor_botones .boton{
	text-align: center;
}

.editor_botones .boton:not(:last-child){
	margin-right: 40px;
}

.editor_botones .boton::before{
	content: '';
	width: 30px;
	height: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	margin-bottom: 10px;
	background-position: center center;
}

.editor_botones .editor_move::before{
	background-image: url('iconos/MOVE.png');
}

.editor_botones .editor_rotate::before{
	background-image: url('iconos/ROTATE.png');
}

.editor_botones .editor_center::before{
	background-image: url('iconos/CENTER.png');
}

.editor_botones .editor_zoom::before{
	background-image: url('iconos/ZOOM.png');
}

#export{
	position: absolute;
	top: 20px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.botones_descarga > a:not(:last-child){
	margin-right: 20px;
}


#export .export-item:not(.Screenshot){
	display: none;
}

/*BOTONES IDIOMAS*/

#app-container:not([data-lang="it"]) .boton,
#app-container:not([data-lang="de"]) .boton,
#app-container:not([data-lang="fr"]) .boton,
#app-container:not([data-lang="en"]) .boton{
	font-size: 0;
}

#app-container:not([data-lang="it"]) .boton::after,
#app-container:not([data-lang="de"]) .boton::after,
#app-container:not([data-lang="fr"]) .boton::after,
#app-container:not([data-lang="en"]) .boton::after{
	font-size: 13px;
}

#app-container .editor_move{
	display: none;
}

/*Español*/

#app-container[data-lang="es"] .editor_move::after{
	content: 'Botón derecho para mover';
}

#app-container[data-lang="es"] .editor_rotate::after{
	content: 'Botón izquierdo para rotar';
}

#app-container[data-lang="es"] .editor_center::after{
	content: 'Doble click para centrar';
}

#app-container[data-lang="es"] .editor_zoom::after{
	content: 'Rueda del ratón para zoom';
}

/*Inglés*/

#app-container[data-lang="en"] .editor_move::after{
	content: 'Right click to move';
}

#app-container[data-lang="en"] .editor_rotate::after{
	content: 'Left click to rotate';
}

#app-container[data-lang="en"] .editor_center::after{
	content: 'Double click to center';
}

#app-container[data-lang="en"] .editor_zoom::after{
	content: 'Mouse wheel to zoom';
}

/*Francés*/

#app-container[data-lang="fr"] .editor_move::after{
	content: 'Un clic à droite pour déplacer';
}

#app-container[data-lang="fr"] .editor_rotate::after{
	content: 'Un clic à gauche pour pivoter';
}

#app-container[data-lang="fr"] .editor_center::after{
	content: 'Double-clic pour centrer';
}

#app-container[data-lang="fr"] .editor_zoom::after{
	content: 'Molette de la souris pour zoomer';
}

/*Alemán*/

#app-container[data-lang="de"] .editor_move::after{
	content: 'Rechtsklick zum Bewegen';
}

#app-container[data-lang="de"] .editor_rotate::after{
	content: 'Linksklick zum Drehen';
}

#app-container[data-lang="de"] .editor_center::after{
	content: 'Doppelklick zum Zentrieren';
}

#app-container[data-lang="de"] .editor_zoom::after{
	content: 'Mausrad zum Zoomen';
}

/*Italiano*/

#app-container[data-lang="it"] .editor_move::after{
	content: 'Right click to move';
}

#app-container[data-lang="it"] .editor_rotate::after{
	content: 'Left click to rotate';
}

#app-container[data-lang="it"] .editor_center::after{
	content: 'Double click to center';
}

#app-container[data-lang="it"] .editor_zoom::after{
	content: 'Mouse wheel to zoom';
}

/*MEDIAS*/

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

	#viewer{
		width: 100%;
		margin-right: 0;
		margin-bottom: 15px;
	}
	
	#property-editor{
		width: 100%;
	}	
}