*{
	margin:0;
	padding:0;
	text-decoration:none;
}

    /*Modal********************************************/
	html
	{
	   font-family: poppins;
	}
	
	button 
	{
	   padding: 15px 15px;
	   margin-top: 30px;
	   margin-left: 30px;
	   background-color: rgb(0, 177, 65);
	   border-radius: 5px;
	   border: none;
	   font-size: 16px;
	   color: white;
	   cursor: pointer;
	
	}
	.modal-container
	{
	   position:fixed;
	   top: 0;
	   left: 0;
	   width: 100vw;
	   min-height: 100vh;
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   background-color: rgba(79,79,79,0.7);
	   z-index: 1;
	   visibility:hidden ;
	}
	.modal-content
	{
	   width: 450px;
	   height: auto;
	   padding:10px ;
	   border-radius: 10px;
	   background-color: rgb(255, 255, 255);
	   text-align: center;
	}
	.modal-content h2
	{
	   font-size: 25px;
	   font-weight: 500px;
	}
	.modal-content img
	{
	   width: 300px;
	   margin:30px 0px;
	}
	.modal-content p 
	{
	   font-size: 16px;
	   font-weight: 400;
	   margin-bottom: 20px;
	}
	.close
	{
	   width: 100%;
	   height: 50px;
	   border-radius: 10px;
	   background-color: rgb(17, 195, 62);
	   cursor: pointer;
	   padding-top: 25px;
	}
	.close span
	{
	
	   color:white;
	   font-size: 20px ;
	}
	.close:hover
	{
	   background-color: hsl(135, 84%, 40%);
	}
	.modal-content img
	{
		width: 400px;
	}
	/*********************************************************************/
	
p,h3
{
	text-align: justify;
	font-size: 20px;
	padding-left: 100px;
	padding-right: 100px;
	padding-top: 30px;
	background-color: white;
}
h1
{
	text-align: center;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 30px;
}

body{
	background: rgb(34,193,195);
	background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(250,198,85,1) 0%);
}

.boton_personalizado:hover
{
background-color: rgb(151, 0, 227);
color: azure;
border-radius: 20px;
width: 195px;
height: 35px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
}
.boton_personalizado
{
background-color: #ff0000;
color: rgb(255, 255, 255);
border-radius: 20px;
width: 200px;
height: 40px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
font-weight: bold;
}
.boton_personalizado_1:hover
{
background-color: rgb(151, 0, 227);
color: azure;
border-radius: 20px;
width: 210px;
height: 45px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
}
.boton_personalizado_1
{
background-color: rgb(0, 119, 230);
color: rgb(255, 255, 255);
border-radius: 20px;
width: 220px;
height: 45px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
font-weight: bold;
}
.boton_personalizado_2
{
background-color: #fcf3f3;
color: rgb(3, 3, 3);
border-radius: 20px;
width: 190px;
height: 40px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 15px;
font-weight: bold;
text-align: center;
}
 .boton_personalizado_1:hover
{
background-color: rgb(189, 63, 252);
color: azure;
border-radius: 20px;
width: 210px;
height: 45px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
}
.boton_personalizado_1
{
background-color: rgb(0, 119, 230);
color: rgb(255, 255, 255);
border-radius: 20px;
width: 220px;
height: 45px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
font-weight: bold;
}
.boton_personalizado_3
{
background-color: rgb(254, 11, 11);
color: rgb(255, 255, 255);
border-radius: 20px;
width: 220px;
height: 45px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
font-weight: bold;
}
.boton_personalizado_3:hover
{
background-color: rgb(255, 255, 255);
color: rgb(255, 0, 0);
border-radius: 20px;
width: 210px;
height: 45px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
}

#contenedor{
	position:relative;
	margin:5vh auto;
	width:1000px;
	height:500px;
}
#contenedor_1{
	position:relative;
	margin:5vh auto;
	width:1000px;
	height:0px;
}

#lienzo{
	border-radius: 10px;
	background-color: rgb(255, 255, 255);
}

#contenedor button{
	display:block;
	position: relative;
	margin:5px 0;
	padding:10px;
	cursor:pointer;
}

#vertical{
	display:none;
}

@media all and (orientation: portrait){

	#contenedor{
		display:none;
	}

	#vertical{
		display:block;
		position:fixed;
		width:100%;
		height:100vh;
		z-index:1;
		background:url(../img/rotarVertical.svg);
		background-size:cover;
		background-position:center;
	}

}