@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');


/* ------------------------------- Start General ----------------------------------------- */
* { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;padding: 0;margin: 0}

body, {font-family: 'Source Sans Pro', sans-serif;font-size: 16pt;line-height: 1.65em;max-width: 100%;overflow-x: hidden;}
	
li {list-style: none;}

ul, ol {list-style: none; margin: 0}

a:hover,
a:visited,
a:focus;
a {text-decoration: none;}

.blue{color: #007bad;}

#secction{ text-align: center; font-size: 3em; line-height: 1.6em}
#secction_write{ color:#ffffff; text-align:center;font-size: 3em; line-height: 1.6em; }

/* WRAPPER */
	.wrapper {padding: 3em 0;}
	.wrapper.style2 {background: rgb(0, 123, 173); padding: 3em 0; min-height:800px; height: auto;}
	
/* CONTAINER */

.container {margin: 0 auto; width: 1400px;}

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


/* MENU FIJO */

	#main-header {
	background: #fff;
	width: 100%;
	height: 150px;
	left: 0;
	top: 0;
	position: fixed;
	z-index: 30;
	padding-bottom: 0px;
}	


/* ------------------------------- Start Header ------------------------------------------------- */

.header .overlay {
    width: 100%;
    height: 100%;
}

/* ------------------------------- End Header --------------------------------------------------- */

/* ------------------------------- Start nav-one ------------------------------------------ */

.nav-one {
    text-align: right;
    margin-bottom: 7px
}
.nav-one li {
    display: inline-block;
    min-width: 50px;
    text-align: center;
    font-size: 16px;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
.nav-one li:hover {
    background: rgb (0,123,173, 0.3);
    color: #ffec01;
}
.nav-one li a {
    font-size: 14px;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 10px;
}


/* ------------------------------- End nav-one ------------------------------------------ */


/* ------------------------------- Start logo ------------------------------------------ */

.logo {
    float: left
}


.logoPhone{ float:left;
	display: none
}

/* ------------------------------- Start logo-nav ------------------------------------------ */

.logo-nav {height: 70px;
    position: relative
}

.logo-nav > .fa {display: none}

.nav-two {
    float: right;
    position: relative;
}
.nav-two li {
    height: 70px;
    line-height: 70px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 18px;
    color: #007bad;
    padding: 45px 0px 0 40px;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.nav-two li:first-of-type:hover ~ .slide,
.nav-two li:first-of-type.active ~ .slide {
    width: 52px; left: 7px
}
.nav-two li:nth-of-type(2):hover ~ .slide,
.nav-two li:nth-of-type(2).active ~ .slide {
    width: 55px; left: 77px
}
.nav-two li:nth-of-type(3):hover ~ .slide,
.nav-two li:nth-of-type(3).active ~ .slide {
    width: 102px; left: 156px
}
.nav-two li:nth-of-type(4):hover ~ .slide,
.nav-two li:nth-of-type(4).active ~ .slide {
    width: 108px; left: 280px
}
.nav-two li:nth-of-type(5):hover ~ .slide,
.nav-two li:nth-of-type(5).active ~ .slide {
    width: 48px; left: 410px
}
.nav-two li:nth-of-type(6):hover ~ .slide,
.nav-two li:nth-of-type(6).active ~ .slide {
    width: 75px; left: 480px
}
.nav-two li:nth-of-type(7):hover ~ .slide,
.nav-two li:nth-of-type(7).active ~ .slide {
    width: 25px; left: 575px
}


/*LOGO*/

.logo{ text-align: center; margin-top: 30px}


/*BANNER*/

#banner{background: url( "../img/slide-one.jpg") no-repeat; width: auto; height: 450px; margin-top: 150px;}

/*COLMUNAS*/

#col3{width: 33%; text-align: center; color: #FFFFFF; float: left; padding:0 1.5% 40px 1.5%}
#col3d{width: 33%; text-align: center; color: #FFFFFF; float: left; padding:0 1.5% 40px 1.5%}

.col2{width: 50%; float: left}

/*INTRO FLIP*/

.aireflip{margin:0 30px}
.aireflipback{margin:60px 30px 0 30px; color:#007BAD}

.flip-card {
  width: 100%;
  height: 330px;
  background: #FFFFFF;
  
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
  -webkit-transition: 0.6s;
  transition: transform 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
}

.flip-card:hover .flip-card-inner {
-webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 330px;
   -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
  
}

.flip-card-front {
  background-color: #ffffff;
  color: #8A8A8A
  ;}

.flip-card-back {
-webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background-color: #EEEEEE;
}

.button {
		background-color: #38C86C;
		border-radius: 5px;
		border: 0;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		padding: 0 1.5em;
		line-height: 2.75em;
		min-width: 9em;
		text-align: center;
		text-decoration: none;
		font-weight: 600;
		letter-spacing: -0.025em;
	}


/*EQUIPO*/

******************************
ACORDEON
********************************/

#container-main{
	margin:40px auto;
	width:95%;
	min-width:320px;
	max-width:960px;
}

#container-main h1{
	font-size: 40px;
	
}

.accordion-container {
	width: 100%;
	margin: 0 0 20px;
	clear:both;
}

.accordion-titulo {
	position: relative;
	display: block;
	text-decoration: none;
	padding: 20px;
	text-align: left; 
}
.accordion-titulo.open {
  
	color: #fff;
}
.accordion-titulo:hover {
	
}

.accordion-titulo span.toggle-icon:before {
	content:"+";
}

.accordion-titulo.open span.toggle-icon:before {
	content:"-";
}

.accordion-titulo span.toggle-icon {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 38px;
	font-weight:bold;
	color:#bed342;
}

.accordion-content {
	display: none;
	overflow: auto;
	text-align: left;
    margin: 35px;
	font-size: 16px;
}

.accordion-content p{
	margin:0;
}

.accordion-content img {
	display: block;
	float: left;
	margin: 0 15px 10px 0;
	width: 50%;
	height: auto;
}

.team {
    padding-bottom: 60px;
}

.team h2 {
    font-size: 50px;
    color: #007bad;
    margin-top: 50px;
}
.team h4 {
    font-size: 20px;
	line-height: 30px;
    color: #737373;
    margin-bottom: 45px;
}

.single-member {
    margin: 0;
    padding: 0;
}
.person img {
    width: 100%;
}
.person-detail {
    background: #2a2a2a;
    position: relative;
    transition: all .7s ease 0s;
    -webkit-transition: all .7s ease 0s;
    -moz-transition: all .7s ease 0s;
    -o-transition: all .7s ease 0s;
    -ms-transition: all .7s ease 0s;
	font-weight: bold;
}
.arrow-top {
    position: absolute;
    width: 20px;
    height: 20px;
    background:#2a2a2a;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    bottom: -10px;
    left: 46%;
    transition: all .7s ease 0s;
    -webkit-transition: all .7s ease 0s;
    -moz-transition: all .7s ease 0s;
    -o-transition: all .7s ease 0s;
    -ms-transition: all .7s ease 0s;
}
.arrow-bottom {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #2a2a2a;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    top: -9px;
    left: 46%;
    transition: all .7s ease 0s;
    -webkit-transition: all .7s ease 0s;
    -moz-transition: all .7s ease 0s;
    -o-transition: all .7s ease 0s;
    -ms-transition: all .7s ease 0s;
}
.person-detail h3 {
    font-size: 20px;
    color: #fff;
}
.person-detail p {
    font-size: 13px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}
.single-member:hover .person-detail {
    background: #007bad;
}
.single-member:hover .arrow-top {
    background: #007bad;
}
.single-member:hover .arrow-bottom {
    background: #007bad;
}


/*CONTACTO*/

.datos_contacto{padding-bottom:10px}

.contact-form h3 {
    padding-left: 0;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    font-weight: normal;
    border-bottom: 1px solid #ffffff;
    padding-bottom: 12px;
    margin-bottom: 0;
}
.contact-info ul {
    margin: 0;
    padding: 0;
}
.contact-info ul li {
    font-size: 14px;
    color: #fff;
}
.contact-info i.fa {
    font-size: 16px;
    padding-right: 12px;
    width: 25px;
    height: 38px;
}

.contact-info ul li span {
    font-weight: bold;
}

.contact-form input {
    width: 100%;
    height: 40px;
    background: #fff;
    font-size: 13px;
    color: #084a5c;
    padding: 10px;
    border: 0;
    margin-bottom: 12px;
	border-radius: 5px;
}

.cbox1 input { width: 20px; height: 20px}

.contact-form textarea {
    padding: 12px;
	font-size: 13px;
    width: 100%;
    height: 140px;
    border: 0;
    margin-bottom: 12px;
	border-radius: 5px;
}


.info-detail {
	color: #FFFFFF;
}


.form {
    padding-top: 15px;
}


.contact-form input.submit-btn {
    width: 180px;
    height: 50px;
    float: right;
    font-size: 20px;
    color: #fff;
	background: #bed342;
    padding: 0;
}

.contact {
    position: absolute;
    width: 100%;
	left: 0;
    margin-top: 50px;
    background: #017BAC;
}
.contact-caption {
    margin-top: 50px !important;
}

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

.container {width: 1200px;}

}

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

.container {width: 960px;}

}

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

.container {width: 95%;}
}

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

.container {width: 95%;}
}


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

body {
		color: #474747;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 14pt;
		line-height: 1.65em;
	}

.container {width: 85%;}

/*LOGO*/

	.logo{
		display: none
	}

	.logoPhone{ 
		display: block;
	}

	.logoPhone img {
		width: 25%;
		height: 25%;
		padding-top: 10px;
	}



/* MENU FIJO */

	#main-header {
		height: 0px;
}	


/*MENU NAVEGACION*/

	.header .overlay {
		cursor: default;
		background-color: #333;
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		height: 55px;
		margin-top: 0px;
	}
	
	.nav-two {
        width: 100%;
        float: none;
        position: absolute;
        right: 0;
        top: 60px;
        display: none
    }
	
    .nav-two li {
        width: 100%;
        height: 50px;
		padding: 0px 10px 0 10px;
        line-height: 30px;
        background-color: #333;
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
        text-align: right;
        margin-bottom: 2px;
        font-size: 16px;
        font-weight: normal
    }
	
    .nav-two li:hover {
        padding-right: 25px;
        background: rgba(0,123,173,.8);
        color: #ffffff;
    }
	

    .logo-nav > .fa {
        display: block;
        position: absolute;
        right: 10px;
        bottom: 30px;
        color: #fff
    }
	
	.logo-nav > .fa img {
	
		width: 50%;
		height: auto;
	}
	
    .logo-nav > .fa:hover {
        cursor: pointer
    }


/*BANNER*/

#banner{background: url( "../img/slide-one736.jpg") center center no-repeat; width: 100%; height: 450px; margin-top: 30px}


/*FLIP CARD*/

.flip-card-front img{ width: 70%; height: auto}

.flip-card {
  width: 100%;
  height: 300px;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 300px;
  backface-visibility: hidden;
  
}


/*COLMUNAS*/

#col3{width: 100%; text-align: center;  float: none; padding:0 0 40px 0}
#col3d{width: 100%; text-align: center;  float: none; padding:0 0 40px 0}
.col2{width: 100%; float: none; padding-bottom: 15px}


.contact-form input {
    width: 100%;
    height: 40px;
    background: #fff;
    font-size: 12px;
    padding: 8px;
    margin-bottom: 12px;
}

.contact-form input.submit-btn {
    width: 50%;
    height: 50px;
    float: none;
	margin: 0 auto;
    font-size: 12px;
    padding: 0;
}


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


body, {color: #474747;font-family: 'Source Sans Pro', sans-serif;font-size: 14pt;line-height: 1.65em;}

.container {width: 85%;}

#secction{ text-align: center; font-size: 2em; line-height: 1.1em}
.wrapper.style2 {height: 800px}

/*LOGO*/

	.logo{
		display: none
	}

	.logoPhone{ 
		display: block;
	}

	.logoPhone img {
		width: 25%;
		height: 25%;
		padding-top: 10px;
	}


/* MENU FIJO */

	#main-header {
		height: 0px;
}	


/*MENU NAVEGACION*/

	.header .overlay {
		cursor: default;
		background-color: #333;
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		height: 60px;
		margin-top: 0px;
	}
	
	.nav-two {
        width: 100%;
        float: none;
        position: absolute;
        right: 0;
        top: 60px;
        display: none;
		border-radius: 5px;
    }
	
    .nav-two li {
        width: 100%;
        height: 50px;
		padding: 0px 10px 0 10px;
        line-height: 30px;
        background-color: #333;
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
		background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), ;
        text-align: right;
        margin-bottom: 2px;
        font-size: 16px;
        font-weight: normal;
		color:#ffffff;
		border-radius: 5px;
    }
	
    .nav-two li:hover {
        padding-right: 25px;
        background: rgba(0,123,173,.8);
        color: #ffffff;
    }
	
	
    .logo-nav > .fa {
        display: block;
        position: absolute;
        right: 10px;
        bottom: 30px;
        color: #fff
    }
	
	.logo-nav > .fa img {
	
		width: 50%;
		height: auto;
	}
	
    .logo-nav > .fa:hover {
        cursor: pointer
    }


/*FLIP CARD*/

.flip-card-front img{ width: 100%; height: auto}


.flip-card {
  width: 100%;
  height: 300px;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 300px;
  backface-visibility: hidden;
  
}
/*COLMUNAS*/

#col3{width: 100%; text-align: center;  float: none; padding:0 0 40px 0}
#col3d{width: 100%; text-align: center;  float: none; padding:0 0 40px 0}
.col2{width: 100%; float: none; padding-bottom: 15px}}



.contact-form input {
    width: 100%;
    height: 40px;
    background: #fff;
    font-size: 12px;
    padding: 8px;
    margin-bottom: 12px;
}

.contact-form input.submit-btn {
    width: 50%;
    height: 50px;
    float: none;
	margin: 0 auto;
    font-size: 12px;
    padding: 0;
}


}