section#contenedor      {  border: 0px solid green;
/*background: pink;*/
margin: 0 auto;

padding: 0;
text-align:justify;
width: 100%;
}

main
{	border: 0px solid purple;	
    background: url(../../../app/images/body/contenedor_2.jpg);
	display: block;					
	width: 90%; 	
	margin: auto; 
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5); 
    background-color:#fff;
	margin: 0 auto;
	padding: 0px;
	height:auto;
	opacity:0.80;
}

main .container { border: 0px solid Magenta;
 background: #fff; 
 width: 100%;
 margin: 10px 0px 0px 0px;  
}

.imgpost img{
	max-width: 50%;
    vertical-align: middle;
    float: right;
    
}


.course-list li
{					border: 0px solid green;
	margin: 10px 0px 0px 0px;				
	padding: 2px;
	background: #fff;
    width: 100%;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
	
}
	
.course-list li:hover {	border: 0px solid green;
	background-color: #fff; 	
	box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5); 
	opacity: 0.9;
	
	}

.course-list a
{
	display: block;
	text-decoration: none;
	color: #222;
}


.course-list img{  border: 0px solid yellow;
	max-width: 300px; 	
	border-radius: 3px;
	margin: 10px auto;
	}
	
.img-contenedor img {
	margin: 10px auto;
    -webkit-transition:all .9s ease; /* Safari y Chrome */
    -moz-transition:all .9s ease; /* Firefox */
    -o-transition:all .9s ease; /* IE 9 */
    -ms-transition:all .9s ease; /* Opera */
    width:100%;
}

.img-contenedor:hover img {
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform:scale(1.25);
}

.img-contenedor2{/*Ancho y altura son modificables al requerimiento de cada uno*/
    margin: 10px auto;
	max-width: 300px; 
    /*overflow:hidden; */
}

/*Ejemplo 2*/
.img-contenedor2 img {
    -webkit-transition:all 1.9s ease; /* Safari y Chrome */
    -moz-transition:all 1.9s ease; /* Firefox */
    -o-transition:all 1.9s ease; /* IE 9 */
    -ms-transition:all 1.9s ease; /* Opera */
    width:100%;
}
.img-contenedor2:hover img {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);
}




.course-list h1, h3{ 
font-weight: 500;
font-size: 17px;
color: #000;
line-height: 1.2em;
padding: 8px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.course-list p { 
padding: 8px;
text-align: justify;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
color: #222;
white-space: nowrap;
}

.course-list h1:hover, a:hover, A:link  {		
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	text-decoration: none;
	text-decoration:underline;
	text-decoration:none;
	color: #222;
	}
section h1, A:visited{	border: 0px solid red; 	
	font-family: 'adihausbold',Arial,Helvetica,Verdana,sans-serif;
    text-decoration:none;color:#222;       
}

/*~~~~~~~~~~~~~~~~~~ ocultar deslizar*/

h1.title, h2.title, h3.title, h4.title, h5.title {
    position: relative;
    padding-bottom: 25px;
    border-bottom: 1px solid #e3e6e6;
}
h2.title {
    font-size: 18px;
    font-weight: 600;
	color: #222;
	padding:10px;
	text-align: center;
}
.contserv {  	
	
	background: #fff;
	box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
	opacity: 0.9;
	filter:  alpha(opacity=50);
	
}
.contserv div > * { margin: .3rem auto; }




/*finde ocultar deslizar*/







/**
 * Responsive
 ----------------------------------------*/ 
 @media screen and (min-width: 15em){ 
.memo   { 				
	
	margin: 0.3rem auto; 
	text-decoration: none;	
	color: #fff;
	line-height: 1.5em;
	padding: 0px 50px 0px 50px;

	}
.descserv{		
	margin: 0rem auto; 
	text-decoration: none;	
	color: #222;
	padding: 10px;
	text-align: justify;
}
}

/* @media screen and (min-width: 320px){ */
@media screen and (min-width: 16em){ 
	.course-list img{ border: 0px solid orange;	
	max-width: 250px;	
	}
	.course-list
	{						border: 0px solid magenta;	
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-content: center;
	}
	.course-list li
	{ 				border: 0px solid pink;	
		flex: 1 30%;
		margin: .5rem;
	}
	
	section#principal, aside {  border: 0px solid orange;
/*background: violet;*/
border-radius: 0.5em;
display: inline-block; 
margin: 0  auto;
min-height: auto;
padding: 0;
text-align: center;
vertical-align: top;
width: 100%;
}
aside
{
width: 100%;
border-bottom: 0px solid red;
/*background: grey;*/
}
article{   border: 0px solid red; 
color:#222;
text-align: justify;
margin: 10  auto;
border-radius: 0.5em;
width: 90%;
line-height: 1.5em;
}
.descserv{
	margin: 0rem auto; 
	text-decoration: none;	
	color: #222;
	line-height: 1.5em;
	padding: 10px;
	text-align: left;
	width: 90%;
}
}
 /* @media screen and (min-width: 560px){ */
@media screen and (min-width: 35em){ 
	.course-list img{ border: 0px solid Magenta;	
	max-width: 210px;	
	}
	.course-list
	{						border: 0px solid magenta;	
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-content: center;
	}
	.course-list li
	{ 				border: 0px solid orange;	
		flex: 1 30%;
		margin: .5rem;
	}
	aside
{
width: 100%;
border-bottom: 0px solid red;
/*background: red;*/
}
	section#principal, aside{  border: 0px solid yellow;
/*background: violet;*/
border-radius: 0.5em;
display: inline-block; 
margin: 0  auto;
min-height: auto;
padding: 0;
text-align: center;
vertical-align: top;
width: 68%;
}

	

}

/* @media screen and (min-width: 768px){ */
@media screen and (min-width: 48em){
	.course-list img{ border: 0px solid Magenta;	
	max-width: 220px;	
	}
	.course-list
	{						border: 0px solid magenta;	
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-content: center;
	}

	.course-list li
	{ 				border: 0px solid red;	
		flex: 1 30%;
		margin: .5rem;
	}
	
	section#principal, aside {  border: 0px solid yellow;
/*background: violet;*/
border-radius: 0.5em;
display: inline-block; 
margin: 0  auto;
min-height: auto;
padding: 0;
text-align: center;
vertical-align: top;
width: 68%;
}
aside
{
width: 30%;
border-bottom: 0px solid red;
/*background: grey;*/
}

}
 
/* @media screen and (min-width: 1024px){ */
@media screen and (min-width: 64em){
	
.course-list li{ 
flex: 1 30%; }

section#principal, aside {  border: 0px solid yellow;
/*background: violet;*/
border-radius: 0.5em;
display: inline-block; 
margin: 0  auto;
min-height: auto;
padding: 0;
text-align: center;
vertical-align: top;
width: 68%;
}
aside
{
width: 30%;
border-bottom: 0px solid red;
/*background: grey;*/
}

.contserv div
	{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-content: center;
	}
	
	.contserv div > *
	{
		flex: 1 30%;
		margin: 2rem auto;
	}


}

/* @media screen and (min-width: 1200px){ */
@media screen and (min-width: 75em){
	
.course-list li{ 
flex: 1 25%; } /* PARA CUATRO ARTS flex: 1 20%; }*/

section#principal, aside {  border: 0px solid yellow;
border-radius: 0.5em;
display: inline-block; 
margin: 0  auto;
min-height: auto;
padding: 0;
text-align: center;
vertical-align: top;
width: 68%;
}
aside
{
width: 30%;
border-bottom: 0px solid red;
/*background: grey;*/
}
}