@charset "utf-8";

@font-face {
    font-family: 'fira';
    src: url('FiraSansOT-Light.otf');
}
body {
    font-family: Arial, Helvetica, sans-serif;
   
}

.contenido {
	margin-bottom:0.2em;
	display:flex;
	flex-direction: row;
}
article {
	flex-basis: 70%
}
aside {
	flex-basis: 30%;
	margin-left:0.2em;
	border-style: double;
	padding: 0.5em;
	background-color: lightgreen;

}
footer {
	background-color:LightGray;
}

.hsm1{
	font-family: 'Caesar Dressing', cursive;
	font-size: xx-large;
}


.titulo1 {
    font-family: 'Caesar Dressing', cursive;
    border: 5px solid #39f;
    border-radius: 24px 0;
    margin: 20px;
    padding: 20px;  
    background: rgba(147,206,222,1);
    background: rgba(212,228,239,1);
    background: -moz-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(212,228,239,1)), color-stop(100%, rgba(134,174,204,1)));
    background: -webkit-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -o-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -ms-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: linear-gradient(to right, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=1 );
}
.titulo2 {
    font-family: 'Caesar Dressing', cursive;
    border: 5px solid #39f;
    border-radius: 24px;
    margin: 20px;
    padding: 20px;    
}
.marco1 {
    border: 5px solid #39f;
    border-radius: 24px 24px;
    margin: 20px;
    padding: 20px;  
    background: rgba(212,228,239,1);
    background: -moz-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(212,228,239,1)), color-stop(100%, rgba(134,174,204,1)));
    background: -webkit-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -o-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -ms-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: linear-gradient(to right, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=1 );
}

#cont1 {
    border: 5px solid #39f;
    border-radius: 24px 24px;
    margin: 20px;
    padding: 20px;  
    background: rgba(212,228,239,1);
    background: -moz-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(212,228,239,1)), color-stop(100%, rgba(134,174,204,1)));
    background: -webkit-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -o-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -ms-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: linear-gradient(to right, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=1 );

}
.marco2 {

	color:blue;
	font-size: 1.25em;
}

.marco3 {

	font-family: fira;
	font-size: 36px;
}
ol strong{
	color:orange;
	font-size: large;
}
#marco {
    background-color: white;
    padding: 10px;
    margin: 10px;
    border: 3px solid black;
}

#contenedor {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-wrap: wrap;
    flex-wrap:wrap;
}

.vertical {
  padding:3px;
  border:1px solid black;
  background-color:white;
  width:300px;
  height:400px;
}

.horizontal {
  border:1px solid white;
  background-color:white;
  width:300px;
  height:196px;
}