/*
==============================================
Tabla de contenido
==============================================

1. Secciones
2. Encabezados
3. Precargador
4. Barra de navegacion
5. Clases de ayuda
	a) Contenido del texto
	b) Propiedades de imagen
	c) Butones
	d) Listas
	e) Control de color
	f) Cuadro de video
	g) Paginacion
	h) Formas
6. Articulos
7. Conteos
8. Proyectos
9. Servicios
	a) Estilo clasico
	b) Estilo moderno
10. Testimonios
11. 404(Pagina)
12. Precios
13. Equipo
14. Cuadricula de blogs
15. Lista de blogs
16. Entrada en el blog
17. Contacto
18. Barras de progreso
19. Acordeones
20. Desplazarse al boton superior
21. Pie de pagina
22. Control deslizante de revolucion
23. Tablas
24. Deslizador automatico


==============================================
[Fin] Tabla de contenido
==============================================
*/


/*-----------------------------------------
1. Secciones
-------------------------------------------*/
.section-block{
	padding: 25px 0px 50px 0px;
	background-color: rgba(0, 89, 255, 0.219);
}	

.section-block-grey{
	padding: 80px 0px 80px 0px;
	background-color: #f1f0f0;
}

.section-block-parallax{
    background-size: cover;
    background-attachment: fixed;
    background-position: 50% 50%;
	padding: 70px 0px 70px 0px;    
}

.section-block-new{
	padding: 60px 0px 50px 0px;
	background-color: rgba(18, 68, 207, 0.267);
}

.section-block-counts{
	padding: 60px 0px 50px 0px;
	background-color: rgba(22, 95, 230, 0.329);
}	

.partner-section{
	background-color: #fff;
	padding: 60px 0px 60px 0px;   
}
.partner-section-grey{
	background-color: #f7f7f7;
	padding: 60px 0px 60px 0px;   
}

.partner-section-grey{
	padding: 60px 0px 60px 0px;
	background: #f7f7f7;
}

.container-convenios{
	padding: 80px 300px 80px 300px;
	background-color: rgba(233, 235, 240, 0.678);
	
}	

/*-----------------------------------------
2. Encabezados
-------------------------------------------*/
.section-heading{
	margin-bottom: 10px;
}

.heading-line{
	display: block;	
	content: "";
	width: 40%;
	height: 1px;
	background: transparent;
	margin: auto;
	margin-bottom: 15px;	
}

.heading-line:after{
	position: relative;
	display: block;	
	content: "";
	width: 60px;
	height: 2px;
	background: #2c95eb;
	margin: auto;
	margin-top: 15px;
}


.section-heading h2{
	font-size: 37px;
	font-weight: 300;
	color: #000000;
	line-height: 130%;
	margin-bottom: 10px;
}

.section-heading-left h2{
	font-size: 35px;
	font-weight: 300;
	color: #3b3b3b;
	line-height: 130%;
	margin-bottom: 10px;
}

.section-heading-left p{
	font-size: 15px;
	font-weight: 500;
	color: #eee;
	line-height: 160%;
	padding-top: 10px;
	margin-bottom: 0px;
}

.section-heading h3{
	font-size: 25px;
	font-weight: 400;
	color: #3b3b3b;
	line-height: 130%;
	margin-bottom: 10px;
}


.section-heading h4{
	font-size: 19px;
	font-weight: 400;
	color: #3b3b3b;
	line-height: 160%;
	margin-bottom: 10px;
}

.section-heading p{
	font-size: 18px;
	font-weight: 400;
	color: rgb(0, 0, 0);
	line-height: 160%;
	padding-top: 5px;
	margin-bottom: 0px;
}

.section-heading span{
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #2c95eb;
	line-height: 200%;
}

.page-title{
	padding: 170px 0px 120px 0px;
	background-color: #f7f7f7;
	background-size: cover;	
	background-position: top;
}

.page-title h1{
	font-size: 40px;
	font-weight: 300;
	color: #fff;
	text-align: center;
}

.page-title ul{
	text-align: center;
	padding-top: 10px;
	padding-left: 0px;
}

@media screen and (max-width:767px) {
	.page-title{
		padding: 200px 0px 100px 0px;
	}
	.page-title h1{
		text-align: center;
	}	
	.page-title ul{
		text-align: center;
	}	
}

.page-title ul li{
	display: inline-block;
}	

.page-title ul li a{
	font-size: 15px;
	font-weight: 500;
	color: #fff;
}
.page-title ul li:after{
	content: " / ";
	font-family: FontAwesome;
	font-size: 15px;
	font-weight: 900;
	color: #fff;
	margin: 0px 5px 0px 5px;	
}
.page-title ul li:last-child:after{
	content: none;
}
.page-title ul li a:hover{
	color: #2c95eb;	
}

.block-heading h3{
	font-size: 28px;
	font-weight: 300;
	color: #3b3b3b;
	line-height: 130%;
	margin-bottom: 10px;	
	margin-top: 30px;	
}

.heading-sm h3{
	font-size: 29px;
	font-weight: 300;
	color: #3b3b3b;	
	line-height: 150%;
	margin-bottom: 20px;
	margin-top: 30px;
}

.heading-sm h3:after{
	content: '';
	display: block;	
	border-bottom: 2px solid #2c95eb;
	width: 100px;
	padding-top: 5px;
}


.heading-sm h4{
	font-size: 22px;
	font-weight: 500;
	color: #3b3b3b;	
	line-height: 150%;
	margin-bottom: 20px;
	margin-top: 30px;
}

.heading-sm h4:after{
	content: '';
	display: block;	
	border-bottom: 2px solid #2c95eb;
	width: 100px;
	padding-top: 5px;
}

.heading-sm h5{
	font-size: 20px;
	font-weight: 500;
	color: #3b3b3b;	
	line-height: 150%;
	margin-bottom: 20px;
	margin-top: 30px;	
}
.heading-sm h5:after{
	content: '';
	display: block;	
	border-bottom: 2px solid #2c95eb;
	width: 70px;
	padding-top: 5px;
}


.heading-sm p{
	font-size: 15px;
    font-weight: 500;
    color: #979797;
    line-height: 180%;
    margin-bottom: 15px;
}



/*-----------------------------------------
3. Precargador
-------------------------------------------*/
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #fff;
    display: table;
    text-align: center;
} 

.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto 0;
  width: 70px;
  text-align: center;

}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #2c95eb;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}


/*-----------------------------------------
4. Barra de navegacion
-------------------------------------------*/
.affix {
	top: 0;
	width: 100%;
	z-index: 9999999;
}
#bs-example-navbar-collapse-1{
	padding: 0px;
}
.navbar-nav{
	margin: 0px;
}

.navbar-header-custom{
	background: white;
	padding: 25px 0px 25px 0px;
}

.navbar-logo img{
	max-width: 100%;
	margin-left: 15px;
	max-height: 50px;
}

.logo_main{
	display: none;
}

.navbar-custom{
	background: white;
	border: none;
	border-radius: 0px;
	padding: 0px 0px 0px 0px;
	margin-bottom: 0px;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s; 	
}

.navbar-custom .navbar-links-custom li {
	padding: 25px 5px 25px 5px;
}

.navbar-custom .navbar-links-custom li a{
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;	
	letter-spacing: 0.5px;
	color: rgb(15, 20, 88);
	-webkit-transition-duration: .3s;
	transition-duration: .3s;		
}

.navbar-custom .navbar-links-custom li a i{
	font-size: 9px;
	font-weight: normal;
}

.navbar-custom .navbar-toggle .icon-bar {
    background-color: #2c95eb;
}


@media screen and (max-width:964px) {
	.navbar-custom .navbar-links-custom li{
		font-size: 13px;
		font-weight: bold;
		-webkit-transition-duration: .3s;
		transition-duration: .3s;	
	    border-bottom: 1px solid #ececec;
	    padding: 0px !important;
	    margin: 0px;
	}
	.navbar-custom .navbar-links-custom li:last-child{
    	border-bottom: none;
	}
	.navbar-custom .navbar-links-custom li a{
		color: #000000 !important;
		margin: 0px;
		padding: 15px;
	}
	.navbar-default .navbar-links-custom .open .dropdown-menu>li>a {
	    color: #000000 !important;
	    font-size: 12px;
	    padding: 10px 0px 10px 30px;
	}		
}

.dropdown-menu{
	background-color: #fff;
	border-radius: 4px !important;
	padding: 5px;
}


.navbar-links-custom .dropdown ul{
	padding: 40px;
	border: none;
	margin-left: 5px;
	margin-top: 0px;
	-webkit-box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow:    0px 5px 9px 0px rgba(0, 0, 0, 0.15);
	box-shadow:         0px 5px 9px 0px rgba(0, 0, 0, 0.15);	
}

.navbar-links-custom .dropdown ul li{
	padding: 0px;
	border: none;
}

.navbar-links-custom .dropdown ul li a{
	border-radius: 0px;
	font-size: 16px;
	font-weight: 500;
	padding: 7px 12px 7px 0px;
	width: 205px;
	text-transform: none;
	text-align: left;
	color: rgb(0, 0, 0);
}

.navbar-links-custom .dropdown ul li a:hover{
	background: rgba(14, 53, 226, 0.116);
	color: #000000 !important;
}

/*ESTILOS DE ICONOS DESPLEGABLES*/
.navbar-links-custom .dropdown .dropdown-toggle:after{
	content: "\f107";
	font-family: FontAwesome;
	padding-left: 6px;
}

.active-link a{
	color: #fff !important;
}

@media screen and (max-width:767px) {
	.navbar-links-custom .dropdown ul li a:hover{
		color: #2c95eb !important;
	}	
}

.menu-icon{
	border: none;
	background: none; 	
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

/*Punto de interrupcion de la barra de navegacion*/
@media (max-width: 991px) {
	.navbar-custom{
		background: #fff;
		color: #000000 !important;
	}	
	.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
	    color: #000000 !important;
	    background-color: transparent;
	}	
	.dropdown-menu:after{
		border: none;
	}	
	.navbar-custom .navbar-links-custom{
		padding: 0px !important;
		margin: 0px;
	}	
	.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
		max-height: 100%;
	}	
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
    	color: #000000;
        padding-top: 10px;
        padding-bottom: 10px;
    }  
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: white;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }  
    .navbar-links-custom{
    	padding-bottom: 5px;
    }
	.navbar-custom .navbar-links-custom li {
		padding: 5px 0px 0px 5px;
	}    
}


.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #2c95eb !important;
    background-color: rgba(0, 0, 0, 0.356);
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.2); 
}



/*-----------------------------------------
5. Clases de ayuda
-------------------------------------------*/

/*--------------------
a) Contenido del texto
----------------------*/
.text-content p{
	font-size: 15px;
	font-weight: 400;
	color: #000000;
	line-height: 180%;	
	margin-bottom: 15px;
}

/*--------------------
b) Propiedades de imagen
----------------------*/

.rounded-border{
	border-radius: 5px;
}

.shadow-primary{
	-webkit-box-shadow: 7px 9px 22px 0px rgba(50, 50, 50, 0.3);
	-moz-box-shadow:    7px 9px 22px 0px rgba(50, 50, 50, 0.3);
	box-shadow:         7px 9px 22px 0px rgba(50, 50, 50, 0.3);		
}

.full-width{
	width: 100%;
}


/*--------------------
c) Botones
----------------------*/
.button-tag{
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	margin: 5px 5px 5px 0px;
	padding:  5px 10px 5px 10px !important;
}
.button-xs{
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
}
.button-xs i{
    font-size: 15px;
    padding-left: 7px;
}
.button-sm{
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
}
.button-sm i{
    font-size: 17px;
    padding-left: 7px;
}
.button-md{
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
}

.button-lg{
	display: inline-block;
	font-size: 17px;
	font-weight: 400;
	padding:  10px 25px 10px 25px !important;
}


.dark-button{
	position: relative;
	background: #2c95eb;
	border-radius: 25px;
	color: #fff;
	padding: 11px 19px 11px 19px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;				
}
.dark-button:hover{
	border-color: #2ce5eb;
	color: #fff;
	background: #2ce5eb;
}

.primary-button{
	position: relative;
	background: #2c95eb;
	border-radius: 25px;
	color: #fff;
	padding: 11px 19px 11px 19px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;					
}
.primary-button:hover{
	border-color: #444fa9;
	color: #fff;
	background: #444fa9;
}


/*--------------------
d) Listas
----------------------*/
.primary-list{
	padding-left: 0px;
}
.primary-list li{
    list-style-type: none;
    color: #686868;
    font-size: 15px;
    font-weight: 400;
    margin-top: 15px;  
}
.primary-list li:before{
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 15px;
	/*font-weight: 900;*/
	color: #fff;
	margin: 0px 5px 0px 5px;		
    color: #444fa9;
    padding-right: 5px;
}


.dark-list{
	padding-left: 0px;
}
.dark-list li{
    list-style-type: none;
    color: #686868;
    font-size: 14px;
    font-weight: 500;
    margin-top: 10px;  
}
.dark-list li i{
    color: #2c95eb;
    padding-right: 15px;
}

/*--------------------
e) Control de colores
----------------------*/
.primary-color h1, 
.primary-color h2, 
.primary-color h3, 
.primary-color h4, 
.primary-color h5, 
.primary-color h6, 
.primary-color p, 
.primary-color i, 
.primary-color span{
	color: #2c95eb !important;
}
.dark-color h1, 
.dark-color h2, 
.dark-color h3, 
.dark-color h4, 
.dark-color h5, 
.dark-color h6, 
.dark-color p, 
.dark-color i, 
.dark-color span{
	color: #2c95eb !important;
}

.white-color,
.white-color h1, 
.white-color h2, 
.white-color h3, 
.white-color h4, 
.white-color h5, 
.white-color h6, 
.white-color p, 
.white-color i, 
.white-color span{
	color: #fff !important;
}

/*--------------------
f) Cuadro de video
----------------------*/
.video-block-parallax{
    background-size: cover;
    background-attachment: fixed;
    background-position: 50% 50%;
    padding: 70px 0px 70px 0px;	
}
.video-button{
	text-align: center;
}
.video-play-button{
    display: inline-block;
    border-radius: 50%;
    font-size: 15px;
	color: #fff;
    width: 100px;
    height: 100px;
    opacity: 1;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;	
}

.video-box{
	position: relative;
	display: block;
	width: 100%;
	height: auto;	
}
.video-box-overlay{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .5s ease;
}

.video-box-button{
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.video-box-button button{
	color: rgba(28, 35, 48, 0.85);
	background: rgba(255, 255, 255, 0.75);
	width: 90px;
	height: 90px;
	border-radius: 50%;
	padding: 30px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;	
}

.video-box-button button:hover{
	color: rgba(28, 35, 48, 0.85);
	background: rgba(255, 255, 255, 1);
}


/*--------------------
g) Paginacion
----------------------*/
.paginator{
	display: inline-block;
	border: 2px solid #f1f1f1;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	width: 40px;
	height: 40px;
	color: #255;
	background: rgb(255, 255, 255);
	padding: 6px 15px 10px 14px;
	margin: 3px;
}
.paginator:hover{
	color: #fff;
	background: #2c95eb;
}
.paginator:focus{
	color: #fff;
	background: #2c95eb;
}
.active-page{
	color: #fff;
	background: #2c95eb;	
}


/*--------------------
h) Formas
----------------------*/
.primary-form input, .primary-form textarea {
    color: #424040;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid #eee;
    width: 100%;
    margin-top: 30px;
    padding: 11px 15px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

#search-input input{
    padding: 0px;
    border: solid 1px #f1f1f1;
    border-radius: 2px;
    background-color: #fff;
    padding: 15px;
    width: 100%;
}

#search-input input:focus{
	border-color: #eee;
}

#search-input button{
    margin: 2px 0 0 0;
    background: none;
    box-shadow: none;
    border: 0;
    outline: none !important;
    color: #2c95eb;
    padding: 0 11px 0 13px;
    border-left: solid 1px #ccc;
}

#search-input button:hover{
    border: 0;
    box-shadow: none;
    border-left: solid 1px #ccc;
}

#search-input .glyphicon-search{
    font-size: 13px;
}



/*-----------------------------------------
6. Articulos
-------------------------------------------*/
.article-box{
	margin: 10px 0px 10px 0px;
}
.article-box i{
	color: #2c95eb;
	font-size: 46px;
}
.article-box h3{
	font-size: 30px;
	font-weight: 350;
	color: #000000;
	display: inline-block;
	line-height: 140%;
	margin-left: 15px;
}
.article-box p{
	font-size: 14px;
	font-weight: 500;
	color: rgb(0, 0, 0);
	display: inline-block;
	line-height: 180%;
	margin-top: 15px;
}
.article-box ul{
	padding-left: 0px;
}
.article-box ul li:before{
	font-family: FontAwesome;
	content: '\f105';
	color: #2c95eb;
	font-size: 14px;
	margin-right: 10px;
}
.article-box ul li{
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: rgb(0, 0, 0);
	margin: 13px 0px 13px 0px;
}


/*-----------------------------------------
7. Conteos
-------------------------------------------*/
@media screen and (max-width:991px) {
	.countup-box{
		margin: 15px 0px 15px 0px;
		text-align: center;
	}
}
.countup-box h4{
	font-size: 43px;
	font-weight: 300;
	color: #000000;
}
.countup-box h4:after{
	content: '+';
	font-size: 43px;
	font-weight: 300;
	color: #000000;
}
.countup-box h5{
	font-size: 13px;
	text-transform: uppercase;
	color: #000000;
}
.countup-box i{
	font-size: 90px;
	font-weight: 300;
	color: rgba(29, 28, 28, 0.678);
}
.countup-box-left{
	width: 25%;
	float: left;
	/*padding-top: 10px;*/
}
.countup-box-right{
	width: 75%;
	text-align: center;
	float: left;	
}


/*-----------------------------------------
8. Proyectos
-------------------------------------------*/

.latest-projects{
	margin-top: 60px;
}
.overlay-container{
	position: relative;
}
.project-item img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	margin-bottom: 15px;
	margin-top: 15px;
}

.project-item-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.5);
	transition: .5s ease;
}

.overlay-container:hover .project-item-overlay {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 1;
	height: 100%;
	width: 100%;	
	height: 100%;
	transition: .5s ease;
}
.project-item-overlay h4 {
	font-size: 21px;
	font-weight: 400;	
	white-space: nowrap; 
	color: white;
	position: absolute;
	overflow: hidden;
	bottom: 35px;
	left: 20px;
}
.project-item-overlay p {
	font-size: 13px;
	font-weight: 500;	
	white-space: nowrap; 
	color: white;
	position: absolute;
	overflow: hidden;
	bottom: 5px;
	left: 20px;
}

.isotop-button{
	font-size: 13px;
	font-weight: 600;	
	background: #f3f3f3;
	border-radius: 25px;
	margin: 15px 0px 15px 0px;
	padding: 5px 15px 5px 15px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;		
}

.isotop-button:last-child:after{
	content: none;
}

.isotop-button:hover{
	color: #fff;
	background: #2c95eb;
}

.isotop-button:active,
.isotop-button.is-checked {
	color: #fff;
	background: #2c95eb;
}



/*-----------------------------------------
9. Servicios
-------------------------------------------*/

/*--------------------
a) Estilo clasico
----------------------*/
.service-box{
	background: #fff;
	border: 1px solid #e6e6e6;
	padding: 20px;
	border-radius: 5px;
	margin: 15px 0px 15px 0px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;	
}

.box-icon{
	float: left;
	width: 25%;
	text-align: center;
	padding-top: 15px;
}

.box-icon i{
	font-size: 38px;
	color: #2c95eb;
	transition: all .2s ease-in-out;		
}

.box-content{
	float: right;
	width: 75%;	
}

.box-content h5{
	font-size: 17px;
	font-weight: 400;
	color: #525252;
	line-height: 180%;	
	margin-left: 15px;
	margin-bottom: 5px;
}

.box-content p{
	font-size: 15px;
	font-weight: 400;
	color: #aaa;
	line-height: 180%;	
	margin-left: 15px;
	margin-bottom: 0px;
}

.service-box:hover{
	box-shadow: 0 0 50px 10px rgba(0,0,0,.06);
}

/*--------------------
b) Estilo moderno
----------------------*/
.modern-box{
	background: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	text-align: center;	
	padding: 20px;
	margin: 15px 0px 15px 0px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;	
}
.modern-box h5{
	color: #fff;
	font-size: 21px;
	font-weight: 400;
	margin: 10px 0px 10px 0px;
}
.modern-box i{
	font-size: 45px;
	color: #2c95eb;
}
.modern-box p{
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: 180%;
	opacity: 0.8;
}
.modern-box:hover{
	background: rgba(255, 255, 255, 0.05);
	border-radius: 2px;
	text-align: center;	
	padding: 20px;
	margin: 15px 0px 15px 0px;
}


/*-----------------------------------------
10. Testimonios
-------------------------------------------*/
.testmonial-block {
	margin: 0px 150px 0px 150px;	
}
@media screen and (max-width:767px) {
	.testmonial-block {
		margin: 0px 0px 0px 0px;	
	}	
}
.testmonial-block h4{
	font-size: 25px;
	font-weight: 400;
	color: rgb(0, 0, 0);
	text-align: center;
}
.testmonial-block h6{
	font-size: 13px;
	font-weight: 400;
	color: rgb(0, 0, 0);
	opacity: 0.6;
	text-align: center;
	text-transform: uppercase;	
	margin: 10px 0px 10px 0px;
}
.testmonial-block p{
	font-size: 16px;
	font-weight: 400;
	line-height: 180%;
	color: rgb(0, 0, 0);
	text-align: center;
}


/*-----------------------------------------
11. 404(Pagina) 
-------------------------------------------*/
.error-bg{
	width: 100%;
	height: 100%;
	background-size: cover;
}

.error{
	text-align: center;
    position: absolute;
    overflow: hidden;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);	
}

.error h1{
	font-size: 180px;
	font-weight: 600;
	background: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.7));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
}

.error h2{
	font-size: 30px;
	background: -webkit-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;	
}

.error h4{
	background: -webkit-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;	
	font-size: 20px;
	margin: 20px 0px 0px 0px;
}

@media screen and (max-width:767px) {
	.error h1{
		font-size: 100px;
	}
	.error h2{
		font-size: 25px;
	}
	.error h4{
		font-size: 18px;
	}
}


/*-----------------------------------------
12. Precios
-------------------------------------------*/
.pricing-block{
	position: relative;
	overflow: hidden;	
	border: 1px solid #eee;
	border-radius: 2px;
	margin: 10px 0px 10px 0px;
}
.pricing-block-top{
	background: #fafafa;
	text-align: center;	
	padding: 20px;
}
.pricing-block-bottom{
	padding: 30px;
}
.pricing-block h4{
	font-size: 25px;
	font-weight: 300;
	text-align: center;
	color: #3b3b3b;
}
.pricing-block h3{
	font-size: 37px;
	font-weight: 300;
	text-align: center;
	margin: 10px 0px 15px 0px;	
	color: #3b3b3b;
}
.pricing-block p{
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	color: #aaa;
	margin: 5px 0px 5px 0px;
}
.pricing-block ul{
	background: #fff;
	padding-left: 0px;
	margin-bottom: 0px;
}
.pricing-block ul li{
	list-style-type: none;
	color: #3b3b3b;
	text-align: center;	
	border-top: 1px solid #eee;	
	font-size: 15px;
	font-weight: 400;
	padding: 15px 30px;
}
.pricing-block ul li:last-child{
	border-bottom: 1px solid #eee;	
}
.pricing-block a{
	display: block;
	position: relative;
	background: #2c95eb;
	font-size: 15px;
	color: #fff;
	padding: 15px 25px 15px 25px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;	
}
.pricing-block a:hover{
	border-color: #2c95eb;
	color: #fff;
	background: #2c95eb;
}



/*-----------------------------------------
13. Equipo
-------------------------------------------*/
.team-box{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	margin: 20px 0px 20px 0px ;
}

.team-box-img img{
	display: block;
	width: 100%;
	height: auto;
}

.team-social{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background: rgba(0, 0, 0, 0.7);
}

.team-box:hover .team-social{
  opacity: 1;
}

.team-social h4{
  color: #fff;
  font-size: 25px;
  font-weight: 300;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.team-social h5{
  color: #2c95eb;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.team-social-icom {
	color: #2c95eb;
	font-size: 18px;
	font-weight: 500;
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.team-social-icom a i{
	color: #fff;
	font-size: 17px;
	margin-right: 15px;
	opacity: 0.8;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;	
}
.team-social-icom a i:hover{
	color: #2c95eb;
	opacity: 1;
}


/*-----------------------------------------
14. Cuadricula de blogs
-------------------------------------------*/

.blog-grid{
	border: 1px solid rgba(238, 238, 238, 0.658);
	background: #fff;
	margin: 15px 90px 15px 90px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;	
}


.blog-grid:hover{
	box-shadow: 0 0 50px 10px rgba(0,0,0,.06);
}

.blog-grid-img img{
	width: auto;
	height: auto;
}

.blog-grid-text{
	padding: 20px;
}

.blog-grid-text h4 a{
	font-size: 18px;
	font-weight: 500;
	color: #000000;
	margin: 5px 0px 10px 0px;
}

.blog-grid-text h4 a:hover{
	color: #2c95eb;
}

.blog-grid-category{
	margin: 10px 0px 20px 0px;
}

.blog-grid-category span{
	color: #858585;
	font-size: 14px;
	font-weight: 500;
	margin-right: 10px;
}

.blog-grid-category a{
	color: #2c95eb;
	font-size: 14px;
	font-weight: 500;
	margin-right: 10px;
}

.blog-grid-category a:hover{
	color: #3b3b3b;
	font-size: 14px;
	font-weight: 500;
	margin-right: 10px;
}

.blog-grid-text p{
	color: rgb(0, 0, 0);
	font-size: 15px;
	font-weight: 400;
	line-height: 170%;
}

.blog-grid-text p:after{
	display: block;
    content: "";
    background: #eee;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    margin-top: 15px;
}

.blog-grid-button{
	display: inline-block;
	margin-top: 10px;	
}

.blog-grid-button a{
	color: #525252;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
}

.blog-grid-button:hover a {
	color: #2c95eb;	
}

.blog-grid-button a i{
	color: #2c95eb;
	font-size: 13px;
	font-weight: 700;
	margin-left: 5px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;	
}


/*-----------------------------------------
15. Lista de blogs
-------------------------------------------*/

.blog-list{
	margin: 30px 0px 20px 0px;
}
.blog-list:first-child{
	margin: 0px 0px 20px 0px;
}

.blog-list-img img{
	width: 100%;
	height: auto;
}

.blog-list-text{
	background: #f8f8f9;
	padding: 20px;
	margin: 0px 0px 15px 0px;
}

.blog-list-text span{
	color: #858585;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
}

.blog-list-text h4{
	margin: 10px 0px 10px 0px;
}

.blog-list-text h4 a{
	color: #525252;
	font-size: 25px;
	font-weight: 400;
}
.blog-list-text h4 a:hover{
	color: #2c95eb;
}

.blog-list-text p{
	color: #a7a7a7;
	font-size: 15px;
	font-weight: 400;
	line-height: 170%;
}

.blog-list a{
	color: #2c95eb;
}

.blog-list a:hover{
	color: #3b3b3b;
}
.blog-list a:hover i{
	color: #3b3b3b;
}

	/*derecha*/

.blog-search input{
	border-radius: 3px;
	border: 2px solid #eee;
	padding: 10px;
	display: block;
	width: 100%;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;		
}
.blog-search input:focus{
	border: 2px solid #ccc;
}

.blog-list-right-titles{
	display: block;
	position: relative;
	margin: 40px 0px 15px 0px; 	
}
.blog-list-right-titles h4{
	color: #525252;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.blog-list-right-titles h4:after{
	content: "";
    position: relative;
    display: block;
    height: 2px;
    width: 50px;
    left: 0;
    bottom: 0;
    margin-top: 10px;
    background: #2c95eb;	
}
.blog-list-right-titles:first-child{
	margin-top: 0px;
}

.blog-list-right{
	background: #f8f8f9; 
	padding: 30px;
}	

.blog-list-recent{
	position: relative;
	display: block;
}

.blog-list-recent h4{
	color: #525252;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 60px 0px 20px 0px; 
}

.blog-list-recent h4:after{
	content: "";
    position: relative;
    display: block;
    height: 2px;
    width: 50px;
    left: 0;
    bottom: 0;
    margin-top: 10px;
    background: #2c95eb;	
}

.blog-list-recent-post{
	position: relative;
	display: block;
	margin-top: 30px;
}


.blog-list-recent-img img{
	width: 100%;
	height: auto;
}

.blog-list-recent-text h5{
	margin-bottom: 10px;
}

.blog-list-recent-text h5 a{
	color: #525252;
	font-size: 15px;
	font-weight: 400;
}
.blog-list-recent-text h5 a:hover{
	color: #2c95eb;
}

.blog-list-recent-text span{
    color: #858585;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.blog-list-category ul{
	display: inline-block;
	list-style-type: none;
	padding-left: 0px;
	margin: 10px 0px 20px 0px;
}

.blog-list-category ul li{
	padding: 10px 0px 10px 0px; 
}

.blog-list-category ul li a{
	color: #858585;
	font-size: 15px;
	font-weight: 400;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;	
}
.blog-list-category ul li a:hover{
	color: #2c95eb;
}

.blog-list-category ul li a i{
	color: #858585;
	margin-right: 10px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;	
}
.blog-list-category ul li a:hover i{
	color: #2c95eb;
	margin-left: 5px; 
}



/*-----------------------------------------
16. Entrada en el blog
-------------------------------------------*/
.blog-post-img{
	width: 100%;
	height: auto;
	margin: 0px 0px 15px 200px;

}

.blog-post-text{
	background: #fff;
	margin: 0px 0px 15px 200px;
}

.blog-post-text h4{
	margin: 15px 0px 15px 200px;
}

.blog-post-text h4 a{
	color: #2c2c2c;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.5px;
}
.blog-post-text h4 a:hover{
	color: #2c95eb;
}

.blog-post-text span{
	color: #2c2c2c;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1px;
	margin-right: 15px;
}

.blog-post-text span i{
	color: #2c2c2c;
	font-size: 14px;
	font-weight: 500;
	margin-right: 2px;
}

.blog-post-text p{
	color: #2c2c2c;
	font-size: 16px;
	font-weight: 400;
	line-height: 170%;
	margin: 20px 0px 20px 0px;
}


/*-----------------------------------------
17. Contacto
-------------------------------------------*/
.contact-box{
	border-bottom: 2px solid #2c95eb;
	border: 1px solid #ecebeb; 
	padding: 30px 20px 40px 20px;
	margin: 10px 0px 10px 0px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
}
.contact-box:hover{
	background: #f0eeeef1;
	border-bottom: 2px solid #2c95eb;  
}

.contact-icon{
	float: left;
	text-align: center;
	padding: 0px 15px 10px 0px;
	width: 25%;
}

.contact-icon i{
	font-size: 55px;
	color: #000000;
	margin-top: 5px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
}


.contact-info{
	float: left;
	width: 75%;
}

.contact-info h4{
	font-size: 20px; 
	font-weight: 400;
	color: #000000;
}

.contact-info p{
	font-size: 15px; 
	color: rgb(0, 0, 0);
	line-height: 170%;
	margin-top: 15px;
}

.contact-form{
	margin: 50px 0px 50px 0px;
}


.contact-form input, .contact-form textarea{
	color: rgb(0, 0, 0);
	font-size: 14px;
	font-weight: 500;
	border-radius: 2px;
	border: 1px solid rgb(155, 150, 150);
	overflow: hidden;
	width: 100%;
	margin: 15px 0px 20px 0px; 
	padding: 12px 15px 12px 15px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;    	
}

.contact-form input:focus{
	border-color: #2c95eb;
}

.contact-form textarea{
	min-height: 150px;
}

.contact-form textarea:focus{
	border: 1px solid #2c95eb;
}

#map {
	height: 330px;
	background: #eee;
}


/*-----------------------------------------
18. Barras de progreso
-------------------------------------------*/
.progress-text{
	font-size: 13px;
	font-weight: 500;
	color: #3b3b3b;
	margin-bottom: 15px;	
}

.custom-progress{
	background: #f7f7f7;
	height: 6px;
	box-shadow: none;
}

.primary-bar{
	height: 6px;
	background-color: #2c95eb;
	box-shadow: none;
	visibility: visible; 
	animation-name: slideInLeft;	
}
.dark-bar{
	height: 6px;
	background-color: #1c2330;
	box-shadow: none;
}


/*-----------------------------------------
19. Acordeones
-------------------------------------------*/
.accordion{
	background: #fff !important;
	box-shadow: none;
	border: none;
}

.accordion-heading{
	border-radius: 0px;
	padding: 0px;
	background: #fff !important;
}

.accordion-title a{	
	font-size: 14px;
	font-weight: 500;
	background: #2c95eb;
	color: #fff;
	display: block;
	border-bottom: 1px solid #f7f7f7;
	border-radius: 2px;
	padding: 15px 20px 15px 20px;
}
.accordion-title .collapsed{	
	font-size: 14px;
	font-weight: 500;
	background: #f7f7f7;
	color: #3b3b3b;
	display: block;
	border-bottom: 1px solid #f7f7f7;
	border-radius: 2px;
	padding: 15px 20px 15px 20px;
}
.accordion-title a:before{	
	content: '\f107';
	font-weight: 700;
	color: #fff;
	font-family: FontAwesome;
	font-size: 13px;
	padding-right: 15px;
}
.accordion-title .collapsed:before{	
	content: '\f105';
	font-weight: 700;
	color: #333;
	font-family: FontAwesome;
	font-size: 13px;
	padding-right: 15px;
}

.accordion-body{
    font-size: 14px;
    font-weight: 500;
    color: #979797;
    line-height: 180%;
	border: none !important;
}


/*-----------------------------------------
20. Desplazarse al boton superior
-------------------------------------------*/
.scroll-to-top{
	font-size: 13px;  
	font-weight: 600;
	line-height: 26px; 
	padding: 6px; 
	text-align:center; 
	color: #fff;
	text-decoration: none;
	position:fixed;
	bottom:80px;
	right: 10px;
	display:none;
	border-radius: 50%;
	background: #2c95eb;
	width: 40px;
	height: 40px;  
	z-index: 9999;
	outline: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;   
}
.scroll-to-top i{
	color: #fff;
}

.scroll-to-top:hover{
	color: #fff;
	background: #272727;
}
 .scroll-to-top:hover i{
	color: #fff;
}
.scroll-to-top:visited{
	color: #fff;
	text-decoration:none;
}


/*-----------------------------------------
21. Pie de pagina
-------------------------------------------*/
#footer{
	background: #1b1b1d;
	padding: 60px 0px 60px 0px;
}

#footer h2{
    font-size: 19px;
    font-weight: 400;
    color: #fff;
    line-height: 150%;
    margin-bottom: 15px;	
}
#footer h2:after{
	content: '';
	display: block;
	height: 2px;
	width: 60px;
	background: #2c95eb;
	margin: 15px 0px 20px 0px; 
}

@media screen and (max-width:767px) {
	#footer h2{	
		margin-top: 30px;
	}
}

#footer p{
	font-size: 15px;
	font-weight: 400;
	color: #878b91;
	line-height: 160%;
}

#footer ul{
	padding-left: 0px;
}
#footer ul li{
	font-size: 15px;
	padding-left: 0px;
	list-style-type: none;
	color: #878b91;
	margin: 7px 0px 7px 0px;
}
#footer ul li i{
	font-size: 18px;
	padding-left: 0px;
	list-style-type: none;
	color: #878b91;
	margin: 7px 0px 7px 0px;
}
#footer ul li:before{
	content: '\f105';
	font-family: FontAwesome;
	font-size: 15px;
	padding-right: 10px;
}

#footer ul li a{
	font-size: 15px;
	padding-left: 0px;
	list-style-type: none;
	color: #878b91;
	margin: 7px 0px 7px 0px;
}
#footer ul li:before{
	content: '\f105';
	font-family: FontAwesome;
	font-size: 15px;
	padding-right: 10px;
}
#footer ul li a:hover{
	font-size: 15px;
	padding-left: 0px;
	list-style-type: none;
	color: #2c95eb;
	margin: 7px 0px 7px 0px;
}

.footer_icon li{
	font-size: 15px;
	padding-left: 0px;
	list-style-type: none;
	color: #878b91;
	margin: 7px 0px 7px 0px;
}
.footer_icon li i{
	font-size: 18px;
	padding-left: 0px;
	list-style-type: none;
	color: #878b91;
	padding-right: 7px;	
}
.footer_icon li:before{
	content: none !important;
	font-size: 15px;
	padding-right: 10px;
}


.footer-bar{
	text-align: left;
	background: #212123;
	padding: 20px 0px 20px 0px;
}
.footer-bar span{	
	color: #878b91;
	font-size: 16px;
	font-weight: 400;
}

.footer-bar a i{
	color: #878b91;
	font-size: 32px;
	padding:0px 12px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;		
}

.footer-bar a i:hover{
	color: #2c95eb !important;
}





/*-----------------------------------------
22 Control deslizante de revolucion
-------------------------------------------*/
.rev-slider-content{
	z-index: 19 !important;
	white-space: nowrap; 
	font-size: 90px; 
	line-height: 90px; 
	font-weight: 500; 
	color: #ffffff !important; 
	letter-spacing: -5px;
}

.revolution-btn{
	z-index: 21 !important; 
	white-space: nowrap; 
	font-size: 18px; 
	line-height: 60px; 
	font-weight: 500; 
	color: rgba(255,255,255,1); 
	letter-spacing: 1px;
	border-color:rgba(0,0,0,1);
	border-radius:30px 30px 30px 30px;
	outline:none;
	box-shadow:none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	cursor:pointer;
	text-decoration: none;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
}

.tp-bannertimer{
	height: 5px; 
	background: rgb(32, 152, 221);
}

.revolution-btn-2{
	z-index: 20 !important; 
	min-width: 480px; 
	max-width: 480px; 
	white-space: normal; 
	font-size: 25px; 
	line-height: 35px; 
	font-weight: 400; 
	color: #ffffff; 
	letter-spacing: 0px;
}

.tp-bullet {
    width: 10px;
    height: 10px;
    position: absolute;
    background: rgba(255, 255, 255, 0.103);
    cursor: pointer;
}

/*-----------------------------------------
23. Tablas
-------------------------------------------*/
table {
	font-family: arial, sans-serif;
	border-collapse: transparent;
	width: 100%;
	font-size: 22px; 
  }
  
  td, th {
	border: 1px solid transparent;
	text-align: left;
	padding: 8px;
  }
  
  tr:nth-child(even) {
	background-color: transparent;
  }


  

  .containerrrr {
	display: flex;
	align-items: center;
  }
  
  .title1 {
	margin-left: 300px;
	font-weight: bold;
	font-size: 23px;
  }
  .title2 {
	margin-left: 200px;
	font-weight: bold;
	font-size: 23px;
  }
  .title3 {
	margin-left: 250px;
	font-weight: bold;
	font-size: 23px;
  }
  img {
	float: left;
  }
  



/*-----------------------------------------
IMG
-------------------------------------------*/


.cuadro {
	width: 30%;
	height: 150px;
	border: 1px solid black;
	margin: 10px;
	padding: 10px;
  }
  /* Estilos para los títulos de los cuadros */
  .cuadro h2 {
	font-size: 20px;
	font-weight: bold;
  }
  /* Estilos para las descripciones de los cuadros */
  .cuadro p {
	font-size: 16px;
  }

  .contenedor-cuadros {
    display: flex;
    flex-wrap: nowrap;
}


.cuadro {
    background-color: #ccf7f8; /* add a background color to the boxes */
    border: 2px solid #81dcf3; /* add a border to the boxes */
    border-radius: 10px; /* add rounded corners to the boxes */
    padding: 20px; /* add some padding to the inside of the boxes */
    margin: 20px; /* add some margin to the outside of the boxes */
}
.cuadro h2 {
    color: #F38181; /* change the color of the headings */
    font-size: 1.5em; /* increase the font size of the headings */
    font-family: 'Open Sans', sans-serif; /* change the font family of the headings */
}

.cuadro p {
    color: #333333; /* change the color of the paragraphs */
    font-size: 1.2em; /* increase the font size of the paragraphs */
    font-family: 'Open Sans', sans-serif; /* change the font family of the paragraphs */
}
.text-center {
    text-align: center;
}






  .card-section {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
  }
  
  .card {
	width: 30%;
	margin: 10px;
	background-color: #fff;
	border: 2px solid #333;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 2px 2px 10px #ccc;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
  }
  
  @media screen and (max-width: 768px) {
	.card {
	  width: 45%;
	}
  }
  
  @media screen and (max-width: 600px) {
	.card {
	  width: 90%;
	}
  }
  
  

  .card p {
	font-size: 16px;
	line-height: 1.5;
	margin: 0 10px 10px;
  }
  

/*-----------------------------------------
24. Deslizador automatico
-------------------------------------------*/
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.slider{
  width: 100%;
  height: 600px;
  overflow: hidden;
}
.slider ul{
    display: flex;
    animation: cambio 20s infinite alternate linear;
    width: 400%;
}
.slider li{
    width: 100%;
    list-style: none;
}
.slider img{
    width: 100%;
    height: 100%;
}
@keyframes cambio{
    0%{margin-left: 0;}
    20%{margin-left: 0;}
    
    25%{margin-left: -100%;}
    45%{margin-left: -100%;}
    
    50%{margin-left: -200%;}
    70%{margin-left: -200%;}
    
    75%{margin-left: -300%;}
    100%{margin-left: -300%;}
}
@media only screen and (min-width:320px) and (max-width:768px){
.slider, .slider ul, .slider img{
    height: 100vh;
}
}