:root {
    --font-brand: 'arvilregular', Helvetica, sans-serif;
	--font-text: 'montserrat', Helvetica, sans-serif;
    --color-primary: rgba(143, 115, 74);
	--color-secondary: rgba(221, 213, 200);
	--color-brand: rgba(143, 115, 74);
}

* {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    line-height: inherit;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

body {
    width:100%;
	/*text-align: center;*/
	 font-family: var(--font-text);
	
}

.principal {
    color: var(--color-brand);
    font-family: var(--font-brand);
    font-size: 32px;
    text-align: center;
    padding: 20px;
}	
		.foreword {
			position: relative;
			display: inline-block;
			width: 100%;
		}	 

		.foreword_title h1 {
			position: relative;
			display: inline-block;
			width: 30%;
			vertical-align: top;
		}	

		.foreword_concept{
			position: relative;
			display: inline-block;
			width: 68%;
			font-family: Arial, Helvetica, sans-serif;
			text-align: left;
		}

		.modalDialog > div {
						width: 550px;
						height:auto;
						position: relative;
						margin: 0% auto;
						top: 50;
						left: 0%;
						padding: 30px 0px 0px 0px;
						border-radius: 10px;
						background: rgba(255, 255, 255);
						background: -moz-linear-gradient(#fff, #999);
						background: -webkit-linear-gradient(rgba(255, 255, 255));
						background: -o-linear-gradient(#fff, #999);
						-webkit-transition: opacity 400ms ease-in;
						-moz-transition: opacity 400ms ease-in;
						transition: opacity 400ms ease-in;
				}
						  
		.modalDialog {
						position: fixed;
						font-family: Arial, Helvetica, sans-serif;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						background: rgba(0,0,0,0.8);
						z-index: 99999;
						opacity:0;
						-webkit-transition: opacity 400ms ease-in;
						-moz-transition: opacity 400ms ease-in;
						transition: opacity 400ms ease-in;
						pointer-events: none;
				}

		.modalDialog:target {
						opacity:1;
						pointer-events: auto;
				}

       	
	

	#modal {
			width: 100%;
			height: 40%;
			
			position: fixed;
			top: 0;
			left: 0%;
			display: flex;
			animation: modal 2s 3s forwards;
			visibility: hidden;
			opacity: 0;
			z-index:+40;
			
		}

		.contenido {
			position:fixed;
			margin: auto;
			left:0%;
			top:0%;
			width: 100%;
			height: 40%;
			background: rgbg(179,179,179,0.8);
          
		}
		
		#cerrar { display: none; }

		#cerrar + label {
			position: fixed;
			color: #fff;
			font-size: 15px;
			z-index: 50;
			background: rgba(143, 115, 74);
			height: 40px;
			width: 150px;
			line-height: 40px;
			border-radius: 10%;
			left: 45%;
			top: 210px;
			cursor: pointer;
			font-family: helvetica;
			animation: modal 2s 3s forwards;
			visibility: hidden;
			opacity: 0;
		}

		#cerrar:checked + label, #cerrar:checked ~ .modal {	display: none;}

		@keyframes modal {
			100% {	
				visibility: visible;
				opacity: 1;
			}
		}
		
	

@media only screen and (max-width: 800px) {
	.hero-slider {
		width:100%;
		height:525px; 
	}
		
		.modal {
			width: 100%;
			height: 70%;
			background: rgb(179,179,179,0.8);
			position: fixed;
			top: 0;
			left: 0;
			animation: modal 2s 3s forwards;
			visibility: hidden;
			opacity: 0;
			z-index:+10;
			display: none;
		}
		
		.contenido {
			margin: auto;
			left:5%;
			width: 100%;
			height: 90%;
			background: rgbg(179,179,179,0.8);
			border-radius: 10px;
			padding: 20 0 0 0;
			display: none;
		}
		
		#cerrar + label {
			left: 30%;
			top: 330px;
			
		}
		/*.modal { display: none;}*/
		
		#cerrar { display: none;}
		.prom { 
			left:5%;
			width:95%;
			height:100%;
		}
			
	
		.foreword_title {
			position: relative;
			display: inline-block;
			width: 100%;
			vertical-align: top;
			padding: 0  0 20 0;
		}	

		.foreword_concept{
			position: relative;
			display: inline-block;
			width: 100%;
			text-align: left;
			padding: 0 10 0 20;
		}

	}