/*********************************************************************************/
/* Movil (<= 480px)                                                             */
/*********************************************************************************/

/* comun */
	@media screen and (max-width: 736px) {

	body {
		
	}

	h2 {
		font-size: 1.2em;
	}

	h3 {
		font-size: 1.2em;
	}

	h4 {
		font-size: 1em;
	}
	h22 { /*palabras destacadas */
		display: none;
	}
/* Reusable */

	ul.small-image-list img {
		width: 75px;
	}

	ul.medium-image-list img {
		
	}
	

ul.big-image-list li {
			overflow: hidden;
			border-radius: .5em;
			height:40vh;
		}
		ul.big-image-list img {
			height: 60vh;
			
		}	
		
	ul.link-list {
		margin: 0 0 2em 0;
	}

	section, article {
		
	}
	article.blog-post .comments {
		display: block;
		position: relative;
		top: -0.5em;
		margin: 0 0 0.5em 0;
	}

	article.blog-post h2 {
	}

	.button {
		font-size: 1em;
	}

	.blog-post-image {
		width: 100%;
	}
	#header {
		display: none;
	}
	#logopagint { /* logo pag. interiores */
		display: none;
	}	
	#logofellersi {
		display: none;
	}
		
	#nav { /* para que saque la lista del menú y no aparezca 
		display: none;*/
	}
	#divimgizq
	{ /* para que saque la imagen de la izquierda en la versión móvil*/
		display: none;
	}
	.ocmob /*oculta div de detalle de las clasificaciones en móvil*/
		{display: none !important;}
/* Header */
	#header-wrapper { /* cambiado todo */
		background: #397ab7;position:fixed;top:0;z-index:1000;width:100%;height:45px;
		box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.20); /* era #c8d2bc url(images/bg1.png) */ 
		/*display: none;*/	
	}
	#copyrightfix {
		position: unset;
	}
/* Banner */		

	#banner-wrapper {
		margin-top:40px;
	}
	#banner-wrapper p {
    
    font-size: 1.6em;
    letter-spacing: 1px;
}
.triangle:before {
  
left: -30%;
    top: 0px;
    right: 0;
    bottom: 0px;
    width: 200%;
    height: 350px;
    transform: rotateZ(351deg);
    transform-origin: 0% 0;
    outline: 1px solid transparent;
    backface-visibility: hidden;

}
.linkimg {
    
    overflow: hidden;
    height: 40vh;
}
	#main section, #main article {
		padding: 10px 10px 0px 10px;
		border-bottom: solid 1px #ced0b7;
	}
	#varios section
		{
			padding: 0px 15px 0px 15px;
			margin: 0px 15px 0px 15px;
			border-bottom: solid 1px #cccccc;
		}
	#features section
		{
			padding: 5% 15px 5% 15px;
			
		}
	
		
	#varios section ul, #footer-wrapper section ul,  #main section ul{ /* agregado */
		padding:1em 0.5em 0em 0.5em;
	}
	 /* #divsection para poder usar el last-child tuve que poner este ID a los div que usan 3u y 4u porque no 
	funciona el css de otro modo; no me sirve usar section:last-child porque está dentro de otro div. Pero ahora lo saqué*/
	
	#varios section:last-child, #features section:last-child, #footer-wrapper section:last-child,#main section:last-child
		{
			border-bottom: solid 0px #cccccc;
		}
	#footer-wrapper section, #footer-wrapper article {
		border-bottom: solid 1px #ced0b7;
	}
	#logomovil {
		position:relative;left:70px;top:5px;
	}
	#logo{
		display: none;
	}
	#menuicon  {
		position:absolute;top:10px;left:15px;
	}
	#menuicon i {
		color:#ffffff;border: solid .1em rgba(105, 175, 233, 0.8);
	}
	#menuicon i:hover{
		color: rgba(105, 175, 233, 0.8);
	}
	#menutop {
		position:fixed;
		/*overflow-y: auto;*/
		width:80%;
    	max-height: 100%;
		top:40px;
		z-index:1000;
		background:rgba(255,255,255,0.95);
		border:1px solid rgba(180, 180, 180,1);
		-webkit-box-shadow: 1px 0px 6px 5px rgba(50, 50, 50, 0.2);
		-moz-box-shadow:    1px 0px 6px 5px rgba(50, 50, 50, 0.2);
		box-shadow:         1px 0px 6px 5px rgba(50, 50, 50, 0.2);
	}	

/* páginas internas wrapper */
	#pagint-wrapper
	{
		margin-top: 40px; /*para que se vea el titulo, si no, el logo fijo del sitio movil lo tapa*/
		padding: 0 0 25px 0;
		border-top:none;
	}
	.main-image/* agreagado por mi*/
	{
		display: block;
		text-align: center;
		max-width: none !important; width: 100%; margin:-30% 0 -40% 0; _margin-bottom:-100px;  /* para cortar la imagen en mobile*/
	}
	section.crop-img {/* clase creada para cortar la imagen en mobile*/
		max-width: 100%;
		overflow: hidden;
		margin: 0 auto;
		padding: 0;
		position: relative;
	} 


/* Mobile UI */
	
	#titleBar { /* en skel-panels.min.js  está el alto de el div fijo para Movil. Era 44 en un inicio*/
		text-align: center;
		color: #000;  /* fff */
		font-size: 1.25em;
		/*background-image: -moz-linear-gradient(top, #fff, #fff);era 008ead y 007b9d 
		background-image: -webkit-linear-gradient(top, #fff, #fff);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fff));
		background-image: -ms-linear-gradient(top, #fff, #fff);
		background-image: -o-linear-gradient(top, #fff, #fff);
		background-image: linear-gradient(top, #fff, #fff);*/
		box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.20);/* agregado */
		
		/*AGREGADO OJO - en skel-panels.min.js borré que se refiriera al logo del index e hice estos arreglos para que se vea otro logo en versión móvil */
		background: #005293 url('/images/logocertbco.png') no-repeat;
		background-position: center;
		background-size: 250px;
	}

		#titleBar .title {
			line-height: 75px; /*  era 44*/
		}
		
		/*esto no sirve ahora ya que no uso el mismo logo del index, uso un background image:
		#titleBar .title img{max-height: 59px; max-width: 327px;margin-left:10px;}/* agregado por mi para q en el movil pueda ser, por ej 80% ; en movil  está en title bar*/

		#titleBar .toggle {
			position: absolute;
			top: 0;
			left: 0;
			width: 80px;
			height: 60px;
		}
		
			#titleBar .toggle:after { /* cuadradito de menu del movil*/
				content: '';
				position: absolute;
				left: 4px;
				top: 4px;
				color: #fff;
				text-align: center;
				line-height: 31px;
				font-size: 0.8em;
				width: 25px;
				height: 35px;
				border-radius: 5px;
				box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.25), inset 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 6px 13px 0px rgba(255,255,255,0.2), 0px 2px 2px 0px rgba(255,255,255,0.1);
			}
			
			#titleBar .toggle:before {/* imagen del cuadradito de menu del movil*/
				content: '';
				position: absolute;
				width: 18px;
				height: 15px;
				background: url('images/togglerayas.png');background-size: 10px 15px;			
				top: 13px;
				left: 7px;
			}

			#titleBar .toggle:active:after {
				background: rgba(0,0,0,0.2);
			}

/*********************************************************************************/
	#navPanel {
		background: #005293;
		box-shadow: inset -10px 0px 40px 0px rgba(0,0,0,0.5);
		border-right: solid 1px #3c3c3c;
		font-weight: 100;
		letter-spacing: 0.3px;
		font-size: 0.8em;
		font-family: 'verdana'; 
		color: #fff;
	}

		#navPanel .link {
			display: block;
			color: #fff;
			text-decoration: none;
			border-top: solid 1px rgba(255,255,255,0.1);
			border-bottom: solid 1px rgba(0,0,0,0.2);
			height: 30px;
			line-height: 1.8em;
			padding: 2px 15px 0px 15px;/* espaciado entre items del menu movil*/
		}
		
		#navPanel .link:first-child {
			border-top: 0;
		}
			
		#navPanel .link:last-child {
			border-bottom: 0;
		}
		#navPanel .link.depth-0
		{
			font-weight: 400;
			color: #fff;
			font-size:1.1em;
		}
		#navPanel .indent-1 { display: inline-block; width: 1.5em; } /* indentado de los sublinks*/
		#navPanel .indent-2 { display: inline-block; width: 2em; }
		#navPanel .indent-3 { display: inline-block; width: 3em; }
		#navPanel .indent-4 { display: inline-block; width: 4em; }
		#navPanel .indent-5 { display: inline-block; width: 5em; }
		#navPanel .depth-0 { color: #fff; }
}

@media screen and (max-width: 570px) {
/* comun */

	ul.big-image-list img {
		
		 
	}
}