*{
	margin:0;
}

:root{
--tileColor: #6A83E1;
--backColor: #E1CF6A;
--tileMask:url("img/ArabianTales120.png");
--distImgW:90vw;
--rotImgW:45vw;
--tdisp:90vw;
--tilW:calc(var(--tdisp)/4);
--tsW:45vw;
}
/*----------------------------------GENERAL----------------start----*/

body{
	width: 90vw;
	margin: auto;
	background: #E9EAEC;
	box-sizing: border-box;
	position: relative;
}

h1, h2, h3, h4{
	font-family: 'Roboto', sans-serif;
	text-align: center;
}

p{
	font-family: 'Roboto', sans-serif;
	margin:1rem 0;
	line-height: 2.5rem;
	min-width: 6ch;
}

a{
	text-decoration: none;
	font-weight: 500;
}

.italic{
	font-style: italic;
}

.FL::first-letter{
	font-size: 5rem;
	color:#282646;
	float:left;
	line-height: 5rem;
	font-family: 'Ultra', serif;
	margin-right: 0.2rem;
	background: #E5D3CA;
}

label{
	font-family: 'Roboto', sans-serif;
}

hr{
	border: solid 1px black;
	margin:30px 0;
	width: 100%;
}

.Gris{
	color: #4E4E4E;
	border-color: #4E4E4E;
}


.titulos2{
	margin: 25px 0;
}

#txtImg{
	display:inline-block;
}

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

select{
	font-size: 1rem;
}

video{
	width: var(--tdisp);
	display: block;
	margin:auto;
}

figcaption{
	font-style: italic;
}
/*----------------------------------GENERAL----------------end----*/
/*------------------------Header----------------------*/

header{
	padding: 10px;
}

.hr1{
	margin-top: 0px;
}

.header{
	margin:auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header h2{
	font-size: 1.2rem;
	margin-top: 5px;
}

.logo{
	height: 50px;
}

/*------------------------------Cookies----------------------------start---*/

#cookies{
	position: fixed;
	width: 80vw;
	z-index: 10;
	background: black;
	padding: 1ch;
	color: white;
	animation: cooDisp 2s 1;
	animation-fill-mode: forwards;
	text-align: center;
	box-sizing: border-box;
	box-shadow: 7px 7px 12px black;
}

@keyframes cooDisp{
	0%{opacity: 0}
	100%{opacity: 1}
}

#cookBtn{
	font-size: 1.2rem;
	display: block;
	margin: auto;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
}

/*------------------------------Cookies----------------------------end---*/
/*-------------------------Tile Display----------------------------start--*/

.TDisp{
	position: relative;
}

.langBox{
	position: absolute;
	right: 0;
	top: -25px;
	font-size: 1.5rem;
}

.langBtn{
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	border:solid 1px black;
	font-size: 1.1rem;
	color: black;
	margin-left: 5px;
}

.TDisp h3{
	margin-bottom: 20px;
	position: relative;
}

#tiledisplay{
	margin:auto;
	display: grid;
	grid-template-columns: var(--tilW) var(--tilW) var(--tilW) var(--tilW);
	background:darkgray;
	width: var(--tdisp)
}

.tileDispCont{
	position: relative;
	width: var(--tdisp);
	height: var(--tdisp);
	margin:auto;

}
 
/*------------------------anim---------*/
.Warncont{
	position: absolute;
	bottom: calc(var(--tdisp)*0.1);
	left: calc(var(--tdisp)*0.1);
	z-index: 5;
	background: rgba(120, 120, 120, 0.65);
	width: calc(var(--tdisp)*0.8);
	height:calc(var(--tdisp)*0.8);
	animation: Twarning 4s 1;
	animation-fill-mode: forwards;
	text-align: center;
	padding: 30px;
	box-sizing: border-box;
	visibility: hidden;
	padding: calc(var(--tdisp)/9);
}

@keyframes Twarning{
	0%{opacity: 1}
	90%{opacity: 1}
	100%{opacity: 0; visibility: hidden;}
}
/*------------------------animEnd-------*/

#WarnNuevos{
	position: absolute;
	top: 2rem;
	right: 2rem;
	z-index: 4;
	background: black;
	width: 12ch;
	border-radius: 1.5ch;
	color: white;
	font-weight: 700;
	text-align: center;
	font-size: 1.25rem;
	padding:8px;
	animation: Nwarn 4s 1;
	animation-fill-mode: forwards;
	animation-delay: 0.2s;
	transform: rotate(5deg);
	text-shadow: 2px 2px black;
	opacity: 0;
}

@keyframes Nwarn{
	0%{opacity: 0;}
	35%{opacity: 1;}
	65%{opacity: 1;}
	100%{opacity: 0; visibility: hidden;}
}

#WarnNuevos p{
	font-family: 'Roboto Slab', serif;
	line-height: 1.5rem;
}

.TileWarning{	
	text-shadow: 2px 2px black;
	z-index: 2;
	font-weight:700;
	color:white;
	left: 12.5vw;	
	margin: auto;
	font-size: 1.2rem;
	line-height: 1.6rem;
}

#layouts, #draw, #back{
	width: 100%;
	box-sizing: border-box;
}

.contControls{
	flex-direction: column;
	display: flex;
	justify-content: space-between;
	position: relative;	
}


.imgEu{
	width:40vw;
	border-radius: 20vw;
	float: left;
	margin-right: 10px;
}


.tile{
	width:var(--tilW);
	height:var(--tilW);
	background:var(--tileColor);
	mask-image:var(--tileMask);
	-webkit-mask-image:var(--tileMask);
	mask-size:cover;
	-webkit-mask-size:cover;
}

.tileBack{
	width:var(--tilW);
	height:var(--tilW);
	background:var(--backColor);
}


.rotTrans{
	transition: all 0.6s;
}

/*---------------------------------Tile Selector-------- start---*/
#modelSel{
	box-sizing: border-box;
	border: solid 1px black;
	padding: 0;
}

#modelP{
	margin: 0 5px;
	font-weight: 500;
}

#TScont3{
	background: #E9EAEC;
	width: 80vw;
	position: absolute;
	top:50vw;
	overflow-x: scroll;
	z-index: 15;
	box-shadow: 5px 5px 8px black;
	border:solid 6px #ACB0B8;
	box-sizing: border-box;
	visibility: hidden;
}

.TScont2{
	display: flex;
	flex-wrap: nowrap;
}

.TScont1{
	padding:8px;
	border:solid 8px #E9EAEC;
	background: white;
}

.TScont1 p{
	text-align: center;
	font-family: 'Roboto Slab', serif;
	font-weight: 700;
	font-size: 1.5rem;
}

.Dtile{
	width:var(--tsW);
	height:var(--tsW);
	background:var(--tileColor);	
	mask-size:cover;
	-webkit-mask-size:cover;
}

.TilShowB{
	width:var(--tsW);
	height:var(--tsW);
	background:var(--backColor);
}

.DArabian{	
	mask-image:url(img/ArabianTalesMulti.png);
	-webkit-mask-image:url(img/ArabianTalesMulti.png);
}

.DFlowerW{	
	mask-image:url(img/FlowerWaveMulti.png);
	-webkit-mask-image:url(img/FlowerWaveMulti.png);
}

.DFlowL{	
	mask-image:url(img/FlowingLinkMulti.png);
	-webkit-mask-image:url(img/FlowingLinkMulti.png);
}

.DSpinS{	
	mask-image:url(img/SpinningStripesMulti.png);
	-webkit-mask-image:url(img/SpinningStripesMulti.png);
}

.DCrossM{	
	mask-image:url(img/CrossingMoonsMulti.png);
	-webkit-mask-image:url(img/CrossingMoonsMulti.png);
}

/*---------------------------------Tile Selector-------- end---*/
/*---------------------------------Display nav-----------*/

/*-------Form dist/colors-------start*/

.Fquest{
	display: flex;
	flex-wrap: wrap;
	width: 90vw;
	justify-content: space-between;
	align-items: center;
}

.Flabel{
	padding: 3px 0;
	min-width: 14ch;
	flex: 1;
}

.Finput{
	padding: 3px 0;
	min-width: 10ch;
	flex: 1;
}

.inpApp{
	width: 90vw;
}

/*-------Form dist/colors---------end*/


.navTable{
	margin: auto;
}

.TDisp nav{
	margin-top: 30px;
}

.TDisp nav label{
	text-align: left;
	float: left;
}

.celInt{
	height: 10px;
}

.Ndist{
	margin-bottom: 20px;
}

#aplicar{
	text-align: center;
	padding:3px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	margin: auto;
	display: block;
	width: 100%;
}

#presup{
	text-align: center;
	border-radius: 5px;
	font-family: 'Roboto', sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	color: white;
	text-shadow: 2px 2px black;
	background-image: linear-gradient(175deg, #8DA0C7 0%, #617DB4 20%, #617DB4 80%, #55688E 100%);
	margin: auto;
	display: block;
	margin-top: 15px;
	box-sizing: border-box;
	min-width: 15ch;
	width: 90vw;#8CA2CD
}

#presup:active{
	box-shadow: gray 5px 5px 8px;
}

#presup p{
	line-height: 1.5rem;
}

#fireWarn1{
	width: 100%;
	height:250px;
	background: rgba(120, 200, 80, 0.0);
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;

}

/*----------------------------presupuesto form---------*/

#presupuesto{
	box-sizing: border-box;
	border:solid 2px blue;
	border-radius: 10px;
	background: #D2D3D5;
	position: absolute;
	width: 90vw;
	top: 20px;
	z-index: 3;
	padding: 5px 5px;
	box-sizing: border-box;
	visibility: hidden;
	box-shadow: 8px 8px 4px rgba(10, 10, 10, 0.5);
}

.colorWarn{
	color: #FC4800;
	text-align: center;
	line-height: 1.2rem;
	font-weight: 700;
	margin-bottom: 25px;
	margin-top: 25px;
	border-top: solid 2px #FC4800;
	border-bottom: solid 2px #FC4800;

}

.FormCont{
	width: 100%;
	font-family:  'Roboto', sans-serif;
	font-weight: 500;
}

.FormCont input, .FormCont select{
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 8px;
}
.FieldTit{
	text-align: center;
	margin-top: 16px;
	margin-bottom: 8px;
}

.msg{
	display: inline-block;
	margin-top: 16px;
	margin-bottom: 8px;
}

#msg{
	width: 100%;
	height: 80px;
	box-sizing: border-box;
}

#enviar{
	text-align: center;
	border: 2px solid blue;
	border-radius: 5px;
	padding:3px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	color: blue;
	margin: auto;
	display: block;
	margin-top: 10px;
}

.envBtn{
	width: 100%;
	background:#7685DF;
	border:solid 1px blue;
	border-radius: 5px;
	padding: 4px;
	box-sizing: border-box;
	/*color: blue;*/
	font-weight: 700;
	font-size: 1.2rem;

}

#cancelar{
	width: 1.25rem;
	height: 1.25rem;
	color: black;
	float: right;
	font-size: 1.2rem;
}

#cancelar i{
	margin:auto;
	text-align: center;
}

.fbGreen{
	color:#104005;
	background: #99F585;
	border:solid 1px #104005;
	border-radius: 5px;
	margin:25px 0;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
}

.fbRed{
	color:#660707;
	background: #F09090;
	border:solid 1px #660707;
	border-radius: 5px;
	margin:25px 0;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
}

#sobreMi{
	position: relative;
}

/*------------------------------Mailer Lite---------*/

.mailsubmit{
	margin: 35px 0;
	background: #273655;
	color:white;
	padding: 10px;
	max-width: 480px;
	margin:auto;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;	
}

.mailsubmit input{
	width: 100%;
	box-sizing: border-box;
	font-size: 1.1rem;
}

.mailsubmit button{
	width: 100%;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: 1.1rem;
	font-weight: 700;
	color: #273655;
}

.mailsubmit p{
	margin: 6px 0;
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
}

#mc_embed_signup{
	margin: 35px 0;
	background: black;
	padding: 10px;
	max-width: 480px;
	margin:auto;
	box-sizing: border-box;
}

#mc_embed_signup h2, #mc_embed_signup p{
	color: white;
}

.pMC{
	text-align: center;
	font-weight: 700;
}

#mce-EMAIL{
	width: 100%;
	height:1.8rem;
	box-sizing: border-box;
	margin-bottom: 8px;
}

#mc-embedded-subscribe{
	width: 100%;
	height:1.8rem;
	font-weight: 700;
	font-size: 1.05rem;
}

.ml-form-embedWrapper p{
	line-height: 1.5rem;
}
/*-----------------------------------3 info---start-*/

.contQ{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.itemQ{
	width: 250px;
	margin: 20px 0;
}

.itemQ img{
	display: block;
	margin: auto;
	width: 80%;
	border-radius: 100%;
}

.itemQ h2{
	text-align: center;
}

/*-----------------------------------3 info-----end-*/


/*-----------------------------------FOOTER----*/

#Cont{
	margin-top:1rem;
}

.cont{
	margin-top: -0.1rem;
	text-align: center;
	font-weight: 700;
}

/*-------------------------------------------------------------

--------------------------------MQUERIES-----------------------

--------------------------------------------------------------*/

@media(min-width: 340px){
	.imgEu{
	width:150px;
	border-radius: 75px;
	float: left;
	margin-right: 10px;
}

}

@media (min-width: 400px){
	h1{
		text-align: right;
	}


}


@media (min-width: 450px){
	.contControls{
		flex-direction: row;
		justify-content: space-between;
		max-width: 480px;
		margin:auto;

	}

	#presup{
		align-self: center;
		width: 43vw;
		/*flex: 1;*/
		padding:4.5px;
		margin-top: 30px;

	}

	.dispNav{
		flex:1;
	}
	
	.fieldCont{
		display: flex;
	}

	.label{
		width: 38%;
	}

	.input{
		width: 58%;
	}

	.Fquest{
	width: 43vw;
	}
}



@media (min-width: 535px){
	:root{
		--tdisp:480px;
		--tsW:200px;
	}
	.Fquest{
	width: 230px;
	}

	#presup{
		flex: 0 0 230px;
	}

	#cookies{
	width: 360px;
	}

	#TScont3{
	width: 360px;
	}

	.contQ{
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	}

	.itemQ{
		width: 30%;
		margin: 20px 0;
	}


}



@media (min-width: 600px){
	#presupuesto{
		width: 540px;
		left: calc((90vw - 540px)/2);
	}

}

@media (min-width: 700px){
	#sobreMi, #lasBaldosas{
		column-count: 2;
	}

	video{
		width: calc(90vw/2);
	}
}

@media (min-width: 820px){

	.TDisp{
		margin-bottom: 50px;
	}

	.TDisp nav{
	margin-top: 0;
	}

	.contDisp{
		display: flex;
		justify-content: space-between;
	}

	.contControls{
		flex-direction: column;
		justify-content: space-between;

	}

	.tileDispCont{
		width: 480px;
		margin:0;
	}

	.f02{
		width:250px;
	}

	#presup, .Fquest{
		width: 250px;
	}

	#presup{
		margin-top: 15px;
		flex:0;
	}

	#cookies{
	width: 650px;
	}

	#TScont3{
	top:10vw;
	}

}



@media(min-width: 900px){
	body{
		width: 810px;
	}

	video{
		width: 390px;
	}

	#presupuesto{
		left: 135px;
	}
}