@charset "utf-8";
/* CSS Document */

.recuadro{
    text-align: center;
    border: 2px solid #000;
    box-shadow: 0px 4px 0px 0px #CCCCCC;
    min-height: 200px;
    width:40%;
    background:#fff;
    margin-bottom: 15px;
    padding: 20px 26px;
    }
    .fondo-gris{
    background:rgba(210,210,210,.8);
    background-size:100% 100%;
    }
    
 .recuadro2{
    text-align: center;
    border: 2px solid #333;
    box-shadow: 0px 4px 0px 0px #CCCCCC;
    min-height: 270px;
    margin-bottom: 15px;
    padding: 20px 26px;
    }
    #lista3 {
    counter-reset: li; 
    list-style: none; 
    *list-style: decimal; 
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

#lista3 ol {
    margin: 0 0 0 2em; 
}

#lista3 li{
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    transition: all .3s ease-out;   
}

#lista3 li:hover{
    background: #eee;
}   

#lista3 li:before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #fa8072;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}

#lista3 li:after{
    position: absolute; 
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;               
}

#lista3 li:hover:after{
    left: -.5em;
    border-left-color: #fa8072;             
}
/*-----------VENTANAS O TABS--------------------------*/
.wrap{
	width: 800px;
	max-width: 100%;
	margin: 30px auto;
}

ul.tabs{
	width: 100%;
	background: #FFF;
	list-style: none;
	display: flex;
		margin-bottom:0px;
}

ul.tabs li{
	width: 18%;
}

ul.tabs li a{
	color: #666;
	text-decoration: none;
	font-size: 16px;
	text-align: center;
	display: block;
	padding: 10px 0px;
}

.active2{
	border: 1px solid #ddd;
	border-bottom:none;
	font-weight:bold;
	background:#ECECEC;
}

ul.tabs li a .tab-text{
	margin-left: 8px;
}

.secciones{
	width: 100%;
	border:1px solid #ddd;
	margin-top:0px;
}

.secciones article{
	padding: 30px;
}

.secciones article p{
	text-align: justify;
}


@media screen and (max-width: 700px){
	ul.tabs li{
		width: none;
		flex-basis: 0;
		flex-grow: 1;
	}
}

@media screen and (max-width: 450px){
	ul.tabs li a{
		padding: 15px 0px;
	}

	ul.tabs li a .tab-text{
		display: none;
	}

	.secciones article{
		padding: 20px;
	}
}


.secciones article li p{
	font-family:Arial, Helvetica, sans-serif;
	margin:5px 0px;
	text-align:justify;
}

.secciones article ul li{
  list-style-type:square;
}