@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,700);


html {
	height: 100%;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased;
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
	font-size: 16px; font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color: #1e1e1e;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased; height:100%; margin:0; 
}
h1, h2, h3, h4, h5, h6, p, ul {
	padding: 0;
	margin: 0;
}

h1 { font-size:24px; font-weight:400; margin-bottom:4px}
h2 { font-size:14px; font-weight:300}

ul, li {
	list-style: none;
}
p {
	font-size: 16px;
	color: #5b5b5b;
	line-height: 24px;
}
a,button {
	text-decoration: none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
a:hover {
	text-decoration: none;
}
.clear {
	clear: both;
}
.autoClearer:before,
.autoClearer:after {
    content: " ";
    display: table;
}
.autoClearer:after {
    clear: both;
}
input[type="radio"],
input[type="checkbox"] {

}
input[type="text"],
input[type="password"],
input[type="email"] {
}
.wrapper {  margin-right: auto; margin-left: auto;  padding: 0;  width: auto;}
iframe { border:none}


@media (min-width: 1400px) {
  .wrapper {
    width: 1400px;
  }
}
.content-mini,
.content-medium,
.content-large {
	width: auto;
	margin: 0 auto;
}
.content-full {max-width:1460px; width: 100%;	margin: 0 auto;}
@media (min-width: 1226px) {
.content-medium,
.content-large {
	width: 1160px;
	}
}
@media (min-width: 614px) {
	.content-mini {
		width: 614px;
	}
}
/************** MENU *****************/

header {width: 100%;display: block;background:#fff;	height:74px;-webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease;	-ms-transition: all 0.6s ease;	-o-transition: all 0.6s ease;	transition: all 0.6s ease; padding:10px }
.styk header {	position: fixed;	z-index: 6999;}
.styk.open header {height:40px;	background: rgba(255,255,255,1); border-bottom:#e7e7e7 1px solid}
.styk.open header .menu-nav {margin: -6px 0 0 0;}
header.open {position: fixed;	top: 0;	z-index: 99;	background:#fff;	padding: 10px 0;}

.top { position:fixed; bottom:10px; right:10px; width:40px; height:40px; display:block; z-index:6999;  opacity:0; background:#323232;-webkit-transition: all 0.3s ease;	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; transition: all 0.3s ease;font-family: fontawesome; color:#FFF; font-size:18px; text-align:center; padding-top:10px; border-radius:200px;}
.top:hover {opacity:1; }
.top.menu-active { color:#fff !important}
.display { opacity:0.7}

header .logo {	 width:415px;-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease; position:absolute; left:0px; top:0px; }
header .content-medium { position:relative}	
header .logo img{ width:100%;-webkit-transition: all 0.3s ease;	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; transition: all 0.3s ease;}
.styk.open .logo { width:220px; margin-top:-6px}

.submenu { position:absolute; top:29px; left:0px; background:#f2f2f2; opacity:0; width: 250px; height: 0px; overflow: hidden; -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease; z-index:99999}
.menu-nav li:hover .submenu { opacity:1; height: auto; z-index:99999 !important}	
.submenu li { width:100% !important; padding:0px !important; float:left; list-style:none}
.submenu a { text-transform:none !important;  padding:12px 0px 12px 18px !important; float:left; display:block !important; width:100% !important; text-align:left }
.submenu a:before { display:none}
.submenu a:hover { color:#FFF !important ; background:#3ec3f1}


.menu-nav {
	float: right;
	margin: 14px 0 0 0;-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
.menu-nav .menu {text-align: right;}
.menu-nav .menu li {	display: inline-block;	*display: inline;	zoom: 1; position:relative}
.menu-nav .menu li a:hover { color:#fff; background:#4e4e4f} 
.menu-active{ color:#fff !important; background:#4e4e4f} 
.menu-nav .menu li a {
	color: #4e4e4f; 
	letter-spacing: 1px;
	padding:6px 10px;
	text-transform: uppercase;
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow: hidden;
	font-size: 14px;
	font-weight: 300; cursor:pointer
}


/**** styky ****/
.stiky {
	background: rgba(255,255,255,1);
	width: 100%;
	height: 0;
	overflow: hidden;
	position: fixed;
	opacity: 0.5;
	top: 0;
	z-index: 99;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.stiky.open {
	opacity: 1;
	height: 30px;
}


/****************** HOME ******************/
.diapo {clear: both; position:relative; float:left; width:100%;}

.slider-home {	display: block;	padding: 74px 0 0 0;	position: relative; height:100%; background:#201917;}
.swiper-container { width: 100%;  height: 100% }
.swiper-slide {    text-align: center; display: -webkit-box; min-height:80vh; height:100%;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center; 
    }
.slide1 {background:url(../img/slider/1.jpg) no-repeat; background-size:cover}
.slide2 {background:url(../img/slider/2.jpg) no-repeat; background-size:cover}
.slide3 {background:url(../img/slider/3.jpg) no-repeat; background-size:cover}
.slide4 {background:url(../img/slider/4.jpg) no-repeat; background-size:cover}


.button-prev { background:url(../img/slider/izq.png); width:50px; height:49px; left:30px; position:absolute; top:50%;margin-top:-22px;z-index:10;cursor:pointer; opacity:0.6;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;}
.button-next { background:url(../img/slider/der.png); width:50px ; height:49px ; right:30px; position:absolute; top:50%;margin-top:-22px;z-index:10;cursor:pointer; opacity:0.6;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;}
.button-prev:hover { opacity:1}
.button-next:hover { opacity:1}
 
.swiper-slide h1{  font-weight:100;  text-transform:uppercase; font-size:60px; letter-spacing:3px; color:#FFF;}
.swiper-slide p{  font-size:30px; line-height:35px;  font-weight:100; color:#FFF; width:70%; margin:0 auto 50px auto; }
.swiper-slide a{  font-size:20px; background:#FFF; color:#5f5f61;  padding:12px 36px; }
.swiper-slide a:hover{  background:#5f5f61; color:#fff;}



/************************ G E N E R I C O S *****************************/

*:focus, a:focus {
    outline: none;
}

article {
	display: block;
}

.anuncio { background:#4e4e4f; padding:30px 60px; color:#FFF; margin-bottom:60px; font-size:18px; font-style:italic}

.somos { background:#ebebeb; padding:0px; padding-bottom:20px}
.estudio { background:none; color:#1e1e1e;text-align:center; padding:60px 0; margin:0px 0}
.estudio p { position:relative; width:70%; margin:0 auto; font-size:22px; line-height:32px }
.estudio p strong{ font-size:28px; font-weight:300}

.persona { position:relative;  width:23.5%; margin:0 0.5%; background:#FFF; text-align:center;  display: inline-grid; align-items: start}
.persona img{ width:100%}
.persona h1 { text-transform:uppercase; color:#5f5f61; font-size:22px; letter-spacing:1px; font-weight:100; margin:25px 0 8px 0; min-height: 60px; padding: 0 10px }
.persona p { width:100%; padding:0 20px; margin-bottom:55px; min-height: 170px}
.persona a.btnVer { color:#5f5f61; border:#5f5f61 1px solid; padding:8px 0px; width:60%; margin:0 auto; display:block; position:absolute; bottom:30px; left:20%}
.persona a.btnVer:hover { color:#fff; background:#5f5f61}
.persona a img {
	-webkit-transition: all 3.3s ease;
	-moz-transition: all 3.3s ease;
	-ms-transition: all 3.3s ease;
	-o-transition: all 3.3s ease;
	transition: all 3.3s ease;}
.persona a:hover img { opacity: 0.5; transform: scale(1.1)}
.persona a { overflow: hidden; display: flex}

.personaG { position:relative; float:left; width:100%;  text-align:left; padding-bottom:30px; margin-top:90px}
.personaG img{ width:40%; position:relative; float:left; margin-top:35px}
.personaG h1 { text-transform:uppercase; color:#5f5f61; font-size:25px; letter-spacing:2px; font-weight:300; margin:35px 0 28px 0 }
.personaG p { width:100%; }
.personaG div { width:60%; position:relative; float:left; padding-left:40px}

.contacto { position:relative; float:left; width:100%;  text-align:left; padding-bottom:30px; margin-top:90px}
.contacto h1 { text-transform:uppercase; color:#5f5f61; font-size:25px; letter-spacing:2px; font-weight:300; margin:35px 0 28px 0 }
.contacto p { width:100%; }
.contacto a { color:#5f5f61; border:#5f5f61 1px solid; padding:8px 0px; width:60%; margin:0 auto; display:block}
.contacto a:hover { color:#fff; background:#5f5f61}
.contacto div { width:40%; position:relative; float:left; padding-right:40px}
.contacto iframe {width:60%; position:relative; float:left; margin-top:35px; height:400px}
.contacto i { margin-right:10px}

/* Style the buttons that are used to open and close the accordion panel */

.practica { position:relative; float:left; width:100%;  text-align:left; padding-bottom:30px; margin-top:90px}
.practica h1 { text-transform:uppercase; color:#5f5f61; font-size:25px; letter-spacing:2px; font-weight:300; margin:35px 0 28px 0 }
.practica  .izq{ width:40%; position:relative; float:left; margin-top:35px}
.practica  .izq img{ width:100%; margin-bottom:10px}
.practica  p { width:100%; }
.practica  div.content { width:60%; position:relative; float:left; padding-left:40px}

button.accordion {
    background-color: #585858;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s; margin-bottom:1px
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion:hover {
    background-color: #fff; color:#585858
}
button.accordion.active {
    background-color: #dfdfdf; color:#585858
}

button.accordion:after {
    content: '+'; /* Unicode character for "plus" sign (+) */
    font-size: 16px;
    color: #fff;
    float: right;
    margin-left: 5px;
}

button.accordion:hover:after {
     color:#585858 /* Unicode character for "minus" sign (-) */
}

button.accordion.active:after {
    content: "-"; color:#585858 /* Unicode character for "minus" sign (-) */
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
div.panel p { margin:20px 0; line-height:30px}
.accordionContent { margin-top:30px; width:100%; position:relative}

footer {	display: block;	background: #0d0d0d;	padding: 44px 0; font-size:12px; color:#a9a9a9; text-align:center; position:relative; float:left; width:100%; color:#a9a9a9}
.logoFoot { position:relative; max-width:80%; width:200px; clear:both; margin-bottom:60px;}
.footRight{  width:100%; clear:both}
footer .menu { position:relative; margin:0 auto}
footer .menu li{ display:inline-block}
footer .menu li a{ position:relative; float:left; color:#a9a9a9; padding:4px 12px; text-transform:uppercase}
footer .menu li a:hover{color:#414042; background:#a9a9a9}
footer .legales { border-top:#a9a9a9 1px solid;  position:relative; float:left; width:100%; padding:20px 0 0 12px; margin-top:20px}
footer .legales span { float:right}
footer .legales a{color:#a9a9a9;}
footer .segundomenu { position:relative; margin:0 auto 20px auto}
footer .segundomenu li{ display:inline-block}
footer .segundomenu li a{ position:relative; float:left; color:#a9a9a9; padding:4px 12px;}
footer .segundomenu li a:hover{color:#414042; background:#a9a9a9}

/**************************** RESPONSIVE ***************************/

.mob { display:none}
@media (max-width: 1023px) {
.mob { display:block}	
.desk { display:none}
	
header {	height:60px; padding:10px }
.styk.open header {height:60px;}
.styk.open .logo { max-width:260px; margin-top:0px}

.close { display:none !important}

section { padding:0 20px}
	.hamburger {
		position:fixed;
		top:22px;
		float:right;
		margin:0;
		padding:0;
		cursor:pointer;
		z-index:9999;
		display:block;
		right: 10px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.hamburger.open {
		
	}
	.hamburger .hamburger-inner {
		position:relative;
		height:21px;
		width:24px;
		display:block;
		margin:0;
		padding:0
	}
	.hamburger .bar {
		width:24px;
		height:4px;
		background:#000;
		position:absolute;
		top:0;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.stk .hamburger .bar {
		background: #000;
	}
	.hamburger .bar.bar2, .hamburger .bar.bar3 {
		top:7px;
		transform: matrix(0.99999, 0, 0, 0.99999, 0, 0);
	}
	.hamburger .bar.bar4 {
		top:14px
	}
	.hamburger.open .bar1, .hamburger.open .bar4 {
		opacity: 0;
	}
	.hamburger.open .bar2 {
		height:4px;
		transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0);
	}
	.hamburger.open .bar3 {
		height:4px;
		transform: matrix(0.7071, -0.7071, 0.7071, 0.7071, 0, 0);
	}
	header {
		overflow: visible;
	}
	header .logo {
		float: none;
	}
	header .logo img {
		display: block;
		width: 220px; margin-top:-3px
	}
	header .content-medium { padding:0px !important}
	.menu-nav {
	    background: #fff none repeat scroll 0 0;
	    display: block;
	    float: none;
	    margin: 0;
	    position: absolute;
	    top: 50px; width:100%;
	    left: 0;
	    right: 0;
	    z-index: 9;
	    overflow: hidden;
	    max-height: 0;
	    -webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease; 
	}
	.styk.open header .menu-nav { margin:0px !important}
	.menu-nav.open {  max-height:500px}
	.menu-nav .menu {
		text-align: center;
	}
	.menu-nav .menu li {
	    display: block;
	    margin: 20px 0;
	}
	
	.submenu { position:relative; float:left; width:100%; top:0px; left:0px; opacity:1; height:auto; text-align:center !important }
	.submenu li { margin:0px !important}
	.submenu a { text-align:center}
	
.slider-home {	padding: 60px 0 0 0;}
.swiper-slide {  min-height:500px; }
.swiper-slide h1{  font-size:50px; letter-spacing:3px;}
.swiper-slide p{  font-size:20px; line-height:35px;   width:70%; margin:0 auto 30px auto; }
.swiper-slide a{  font-size:20px;  padding:12px 36px; }

.personaG {margin-top:60px}
.contacto { margin-top:60px}
.practica { margin-top:60px}

.top { display:none}

}

@media (max-width: 900px) {
	
	

footer { text-align:center}
.logoFoot {  float:none; margin:0 auto 30px auto; width:100%;}
.footRight{ position:relative; float:left; width:100%}
footer .menu { position:relative; float:none; text-align:center; width:100%;}
footer .menu li{ position:relative; float:left}
footer .menu li a{ float:none}
footer .legales { border-top:#a9a9a9 1px solid;  position:relative; float:left; width:100%; padding:20px 0 0 12px; margin-top:20px}
footer .legales span {clear:both; margin-top:20px; width:100%; text-align:center}
.persona {  width:49%; margin:0 0.5% 10px 0.5%; padding-bottom:20px; }

}



@media (max-width: 560px) {
section { padding:0 10px}

footer .menu { border-top:#a9a9a9 1px solid; padding-top:20px}
footer .menu li{ width:100%; text-align:center; margin:10px 0}
	
.button-prev { display:none}
.button-next { display:none}
.swiper-slide {  min-height:460px; }
.swiper-slide h1{  font-size:40px; letter-spacing:3px;}
.swiper-slide p{  font-size:18px; line-height:25px;   width:80%; margin:0 auto 30px auto; }
.swiper-slide a{  font-size:16px;  padding:8px 26px; }

.estudio { padding:30px 0; margin:30px 0}
.estudio p {  width:90%; font-size:16px; line-height:22px }
.estudio p strong{ font-size:20px; font-weight:300}

.persona {  width:100%; margin:0 auto 10px auto; padding-bottom:20px; float:none}
.persona h1 { font-size:22px; margin:20px 0 23px 0 }
.persona p { width:100%; padding:0 30px; margin-bottom:35px}
.persona a.btnVer { color:#5f5f61; border:#5f5f61 1px solid; padding:8px 0px; width:80%; margin:30px auto 0 auto; display:block; position:relative; bottom:0; left:0}

.personaG img{ width:100%; position:relative; float:left; margin-top:10px}
.personaG h1 { text-transform:uppercase; color:#5f5f61; font-size:22px; letter-spacing:2px; font-weight:300; margin:25px 0 18px 0 }
.personaG p { width:100%; }
.personaG div { width:100%; padding-left:0px; text-align:center}

.contacto h1 { text-transform:uppercase; color:#5f5f61; font-size:22px; letter-spacing:2px; font-weight:300; margin:35px 0 28px 0 }
.contacto p { width:100%; }
.contacto div { width:100%; padding-right:0px}
.contacto iframe {width:100%; position:relative; float:left; margin-top:35px; height:400px}
.contacto i { margin-right:10px}

.practica h1 { text-transform:uppercase; color:#5f5f61; font-size:22px; letter-spacing:2px; font-weight:300; margin:25px 0 18px 0 }
.practica  .izq{ width:100%;  margin-top:10px}
.practica  .izq img{ width:100%; margin-bottom:0px}
.practica  p { width:100%; }
.practica  div.content { width:100%;  padding-left:0px; text-align:center}
div.panel p { text-align:left !important}



}