/* ---------------------------------------------------------------------- */
/*	Media Queries
/* ---------------------------------------------------------------------- */

@media only screen and (max-width: 1270px){
	.slider { max-height: 700px;}
}

@media only screen and (max-width: 1235px){

	.slider{ max-height: 685px;}
}

@media only screen and (max-width: 1222px){
	
	header h1{ width: 20%;}
	.menus{width: 75%;}
	.slider { max-height: 665px; }
}

@media only screen and (max-width: 1160px){
	.slider { max-height: 630px;}
	
	.caption {top: 350px;}
	
	.slider .owl-controls { top: 200px; }
}

@media only screen and (max-width: 1135px){
	
	header h1 a.logo { width: 240px;} 
	
	.slider {max-height: 620px;}
	
	
	
	
}

@media only screen and ( max-width: 1085px){
	ul#menu2{ padding: 0; }
	
	.slider{ max-height: 590px;}
	
	.top-menu{ width:70%;}
	
	#btns2{width: 475px;}
	
	#redesp { width: 20%; }
	
	#redesp li { margin: 0 5px; }
}

@media only screen and (max-width: 1045px){
	.wrap { width: 95%;}
	
	.menus { width: 70%; }
	
	.top-menu { width: 475px; }
	
	#menu2 { display: none!important; }
	
	.menu-bars {display: block; text-align: right; padding: 9px 8px; width: 100%; margin: 45px 0 0 ; }
	
	.menu-bars a { color: #FFF; }  
	
	#redesp { width: 95px; }
	
	#btns2 {float: right; width: 345px;}
	
	#menu100 { background: #27334e none repeat scroll 0 0; text-align: center; width: 100%; float: left; padding:15px 21px 2px;}
	
	#menu100 li a {color: #ffffff; font-family: "Helvetica"; padding: 5px 19px;}
	
	#menu100 li {padding: 8px 10px; border-right:1px solid #48ae4b; float: left;}
	
	#menu100 li a:hover{ text-decoration: underline;}
	
	#publico .wrap {width: 850px;}
	
	.view {width: 245px; height: 250px; margin: 19px;}
	
	.view .mask{width: 245px; height: 250px; margin: 0; background-size: 100% auto;}
	
	.mask > p{font-size: 30px; padding: 80px 0 0;}
	
	.mask .fa-stack.fa-lg{margin: 10px 0 0 0;}
	
	.mask .fa.fa-circle.fa-stack-2x { font-size: 2em;}
	
	.fa.fa-plus.fa-stack-1x.fa-inverse { margin: 1px 0;}
	
	.curso-info img {width: 40%;}
	
	.info-curso { width: 55%; margin: 0 2.5%; }
	
	#servicios h4 { background-size: 6% auto; padding: 19px;}
	
	.servicios { padding: 90px 0 80px}
	
	#curso, #publico { padding: 75px 0 50px;}
	
	.blog { width: 90%; margin: 0 5%;}
	
	.datosc.col-md-4 {display: none;}
	
	.wrap2 { width: 100%;}
}

@media only screen and (max-width: 980px){
	.top-menu { width: 455px;}
	
	#servicios h4 { text-indent: 50px;}
	
	.temas { width: 100%;}
	
	.servicios ul.temas li { margin: 0 1%; width:18%; text-align: center;}
	
	.servicios ul li a{ padding: 13px 0;}
	
	.termasr ul li{ text-align: left!important;}
	
	#servicios h4 { background-size: 7% auto; padding: 25px 0;}	
}

/* Standard 960 or larger (browsers) */

@media only screen and (max-width: 960px) {
	
	#contacto .datosc{width: 90%; margin: 0 5%;}
	
	#contacto .map-cont{ width: 90%; margin: 0 5%;}
	
	#menu100{padding-left: 0; padding-right: 0;}
	
	#touch ul li { margin: 0 25px;}
	
	footer #social { margin: 0 22%;}
	
	a.tekoestudio { width: 190px; height: 50px; background-size: 100% auto;}
	
	#certificacionese { margin-top: 40px;}
	
	.slider { max-height: 530px;}
	
	.slider .owl-controls { top: 160px;}
	
	.caption { top: 300px;}
	
}

@media only screen and (max-width: 915px){
	.menus {width: 65%;}
	
	#menu100 li { width: 100%; padding: 10px 0; border: none; font-size: 15.5px; border-bottom: 1px solid #334264;}
	
	#servicios h4 { text-indent: 80px;}
	
	#horarios img {width: 50%;}
}

@media only screen and (max-width: 890px){
	#publico .wrap { width: 700px;}
	
	.view{ width: 260px; height: 270px; margin: 20px 45px;}
	
	.view .mask { width: 260px; height: 270px;}
	
	#servicios h4 { background: none; text-indent: 0; padding: 20px;}
	
	header h1 a.logo{ width: 200px; background-size: 100% auto;}
	
	.temas { display: none;}
	
	.temas-responsive {display: block; padding: 13px 13px; width: 220px; text-align: center; margin: 0 auto; }
	
	#servicios { padding: 15px 0 0;}
	
	.curso-info img { display: none;}
	
	.info-curso { margin: 0 5%; width: 90%; }
}



/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 790px) {
	
	.slider{ max-height: 475px;}
	
	.slider .owl-controls { top: 120px;}
	
	.caption{ top: 250px;}
	
	.servicios { padding: 65px 0 80px;}
	
	#servicios {padding: 10px 0 0;}
	
	#curso img { padding: 0;}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 767px) {
	
	.form-group .col-sm-4, .form-group .col-sm-8 {width:100%; padding:0px;}

	.top-menu div > a.btn2{ display: none;}
	
	#btns2 { width: 135px; float: right;}
	
	#btns2 .icon { display: block; float: left; width: 45px;}
	
	.top-menu{ margin-top: 8px; }
	
	#redesp{ float: right; }
	
	.menu-bars { padding: 9px 13px;}	
	
	#curso img { width: 75%; margin: 0 10%;}
	
	.right { width: 100%;}
	
	.btnContacto.btnInscribete , a.cont{ width: 50%; margin: 20px 25% 0;}
	
}

@media only screen and (max-width: 715px) {
	
	#servicios h4 { padding: 14px 0;}
	
	header h1 a.logo { width: 160px; margin: 27px 0 0;}
	
	#servicios h4{margin-left: 0; text-indent: 0; background-position: left; background-size: 11% auto; padding: 27px 0px 27px;}
	
	.view, .view .mask{ width: 230px; height: 230px;}
	
	.view{ margin: 20px 30px;}
	
	.slider { max-height: 425px;}
	
	.caption{top: 200px;}
	
	.caption p { font-size: 1.8em;}
	
	.caption p.greeny { font-size: 1.6em;}
	
	.slider .owl-controls { top: 85px;}
	
	#contacto h3 { font-size: 30px;}
	
	#contacto p { font-size: 16px;}
	
	#contacto p.iniciar { font-size: 20px;}
	
	a.cont { margin: 20px 30% 0; width: 40%; }
	
	#touch2 { width: 33%;}
	
	#touch h3{ font-size: 22px; margin: 10px 0 20px;}
	
	footer #social { margin: 0 0;}
	
	a.tekoestudio { width: 140px;}
	

	
}
@media only screen and (max-width: 670px) {
	
	.publico {display:none;}
	
	.tipos-responsive {display: block; padding: 13px 13px; width: 220px; text-align: center; margin: 20px auto 20px auto; }
	
}

@media only screen and (max-width: 640px){
	
		.btn-default {
    background-color: #0a255e;
    border-color: #cccccc;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Lato";
    margin: 0 20%;
    width: 60%;
    text-align: center;
    box-sizing: border-box;
    height: 45px;
}
	
	.view{ width: 30%; height: 185px;}
	
	.view{ margin: 20px 9.5%;}
	
	.view .mask { width: 100%;}
	
	.mask > p { font-size: 20px; padding: 50px 0 0; }	
	
	.slider { max-height: 370px;}
	
	.slider .owl-controls { top: 60px;}
	
	.caption { top: 155px;}
	
	.caption p { font-size: 22px; margin: 0 0 10px;}
	
	.caption p.greeny { font-size: 19px; }
	
	.owl-theme .owl-controls .owl-buttons div { font-size: 9px;}
	
	#publico .wrap { width: 95%;}
	
	.info-sec { margin: 0;}
	
	#servicios { padding: 20px 0 0; }
	
	.wrap3 { width: 90%;}
}

@media only screen and (max-width: 540px){
	.menus {width: 52%;}
	
	section .wrap { width: 90%;}
	
	#curso h3, #publico h3 { font-size: 21px;}
	
	#curso, #publico, .servicios { padding: 75px 0 50px;}
	
	.infoder2 { width: 100%;}
	
	#horarios img { width: 50%; margin: 0 25%;}
	
	#metodologia, #horarios { padding: 80px 0;}
	
	.mask > p { padding: 35px 0 0; line-height: 23px;}
	
	.mask .fa-stack.fa-lg { margin: 0;}
	
	.view { width: 32%; height: 175px; margin: 20px 8.5%;}
	
	.fade-it, .fade-ito { opacity: 1!important;}
	
	#inicio{ max-height:none !important;}
	.slider .owl-controls {top: 65%;}
	.owl-item .caption.izquierda,.owl-item .caption.derecha{position: initial;top:100%;width:100%;}
	
	footer #touch .wrap.limpiar > div.footer-third{ width: 100%; display: inline-block; text-align: center !important;}
	#certificacionese img { width: 70%;}

	
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 450px) {
	
	img { max-width: 100%; }
	
	.caption {width:100%; bottom:0px; }
	
	.caption .greeny {margin:0px!important;}
	
	.slider {position: relative; padding:64px 0 0 0; }
	#contacto-urg {display:block;}
	
	.view { margin: 20px 26.5%; width: 45%; height: 195px;}
	
	.mask .fa-stack.fa-lg { margin: 15px 0 0;}
	
	.mask > p { font-size: 24px; padding: 40px 0 0;}
	
	.top-menu { width: 240px;}
	
	header h1 a.logo { margin: 20px 0 0; width: 135px;}
	
	#btns2 .icon { width: 38px;}
	
	#redesp { display: none}
	
	#btns2 { width: 114px; float: left;}
	
	#servicios { padding: 0;}
	
	.servicios > h3 { font-size: 27px; margin-bottom: 25px;}
	
	h1.logo { margin: 0 25%; padding: 0 15px; width: 50%; }
	
	header h1 a.logo { margin: 10px auto 0; width: 100%; height: 46px;}
	
	.menus { width: 100%; }
	
	.top-menu { float: left; width: 210px; margin-top: 8px;}
	
	.menu-bars { padding: 9px 13px; display: block; float: right; margin: 0; text-align: right; width: 54px; }
	
	header { height: 127px;}
	
	.btnContacto.btnInscribete, a.cont { width: 80%; margin: 20px 10% 0;}
	
	#metodologia h3, #horarios h3 { font-size: 21px;}
	
	#curso, #publico, .servicios { padding: 50px 0;}
	
	#metodologia img { padding: 20px 0 0; width: 350px;}
	
	#contacto h3 { font-size: 25px; margin: 0 0 20px;}
	
	#servicios h4 { background-size: 15% auto;}
	
	.info-sec h4{ font-size: 20px!important;}
	
	#servicios h4{padding: 28px 0px 18px;}
	
	#curso img { width: 95%; margin: 0;}
	
	#curso h3, #publico h3 { font-size: 19px; margin: 0 0 25px;}
	
	div#social { float: none;}
	
	a.tekoestudio { width: 115px; margin: 20px 32% 0;}
	
	#touch { padding: 20px 0;}
	
	#touch h3 { font-size: 19px;}
	
	#certificacionese { float: left; width: 60%; margin: 0 20% 5px; }
	
	#touch2 { margin: 0 10%; width: 80%;}
	
	a.mascal, a.masinfo { width: 100%;}
	
	a.mascal { margin: 25px 0;}
	
	header { height: 65px;}
	
	h1.logo { margin: 0 25%; padding: 0 15px; position: absolute; width: 50%; }
	
	.menus { position: absolute; top: 12px; padding: 0;}
	
	.top-menu { float: right; margin-top: 3px; width: 90px; }
	
	#btns2 { float: right; width: 78px; }
	
	.menu-bars { background-color:#48ae4b; display: block; float: left; margin: 0; padding: 5px 10px; text-align: right; width: 43px; }
	
	#btns2 .icon.phoneicon{display: none;}
	
	#menu100{margin-top: 60px;}

}


@media only screen and (max-width: 450px) { 
	

.view {
    height: auto;
    margin: 20px 20%;
    width: 60%;
}




}	

@media only screen and (max-width: 420px) { 
	

.caption {top:50%; bottom:none;}
	
}	


@media only screen and (max-width: 320px) {
	
	.caption {display:none;}
	
	.top-menu { width: 205px;}
	
	.mask > p { font-size: 20px;}
	
	.view { height: 185px; margin: 10px 20%;}
	
	header h1 a.logo { margin: 20px auto 0; }
	.slider .owl-controls {top: 61%;}

}