/*@import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";

@import "https://daneden.github.io/animate.css/animate.min.css";*/



body {

  position: relative;

  overflow-x: hidden;

  font-family: 'texgyreadventorregular';

  letter-spacing: 0.5px;

  background-color: #e2e2e2;

}



body,

html {

  height: 100%;

  background-color: #e2e2e2;

  letter-spacing: 0.5px;

}



/*SKIN*/

.skin{

  height: 320px;

  margin-top: -17px;

  /*background: url(../img/corporativo/skin-corporativo.jpg) #f0238d center center no-repeat;*/

}

.barSkin{

  height: 30px;

  background-color: #000;

}



/*INTRODUCCIÓN*/

.introduccion{

  padding: 20px 50px 40px 50px;

}

.introduccion h1{

  font-size: 40px;

  color: #000;

}

.introduccion p{

  font-size: 16px;

}



/*TIMELINE*/

.TL{

  padding: 0 50px;

  margin-top: -40px;

}

.timeline {

  list-style: none;

  padding: 80px 0 20px;

  position: relative;

}

.timeline:before {

  top: 0;

  bottom: 0;

  position: absolute;

  content: " ";

  width: 3px;

  background-color: #D6D6D6;

  left: 50%;

  margin-left: -1.5px;

}

.timeline > li {

  margin-bottom: 60px;

  position: relative;

  width: 50%;

  float: left;

  clear: left;

}

.timeline > li:before,

.timeline > li:after {

  content: " ";

  display: table;

}

.timeline > li:after {

  clear: both;

}

.timeline > li:before,

.timeline > li:after {

  content: " ";

  display: table;

}

.timeline > li:after {

  clear: both;

}

.timeline > li > .timeline-panel {

  width: 95%;

  float: left;

  border: 0px solid #d4d4d4;

  background-color: #fff;

  /*border-radius: 2px;*/

  /*padding: 20px;*/

  position: relative;

  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

}

.timeline > li > .timeline-panel:before {

  position: absolute;

  top: 26px;

  right: -15px;

  display: inline-block;

  border-top: 15px solid transparent;

  border-left: 15px solid #ccc;

  border-right: 0 solid #ccc;

  border-bottom: 15px solid transparent;

  content: " ";

}

.timeline > li > .timeline-panel:after {

  position: absolute;

  top: 27px;

  right: -14px;

  display: inline-block;

  border-top: 14px solid transparent;

  border-left: 14px solid #fff;

  border-right: 0 solid #fff;

  border-bottom: 14px solid transparent;

  content: " ";

}

.timeline > li > .timeline-badge {

  color: #fff;

  width: 24px;

  height: 24px;

  line-height: 50px;

  font-size: 1.4em;

  text-align: center;

  position: absolute;

  top: 16px;

  right: -12px;

  /*background-color: #999999;*/

  z-index: 100;

  /*border-top-right-radius: 50%;

  border-top-left-radius: 50%;

  border-bottom-right-radius: 50%;

  border-bottom-left-radius: 50%;*/

}

.timeline > li.timeline-inverted > .timeline-panel {

  float: right;

}

.timeline > li.timeline-inverted > .timeline-panel:before {

  border-left-width: 0;

  border-right-width: 15px;

  left: -15px;

  right: auto;

}

.timeline > li.timeline-inverted > .timeline-panel:after {

  border-left-width: 0;

  border-right-width: 14px;

  left: -14px;

  right: auto;

}

.timeline-badge a {

  color: #C5C7C5 !important;

}

.timeline-badge a:hover {

  color: #000 !important;

}

.timeline-title {

  margin-top: 0;

  color: inherit;

}

.timeline-body {

  padding: 40px;

}

.timeline-body p{

  font-size: 12px;

}

.timeline-body h1{

  font-size: 20px;

  line-height: 1.1;

  letter-spacing: 0.5px;

  color: #000;

  padding: 0;

  margin-top: 0;

}

.timeline-body p,

.timeline-body ul {

  padding:0;

  margin-bottom: 0;

}

.timeline-body > p + p {

  margin-top: 5px;

}

.timeline-footer{

  padding:20px;

  background-color:#fff;

  text-align: center;

}

.tooltip{

  position:absolute;

  z-index:2000;

  display:block;

  visibility:visible;

  padding:5px;  

  opacity:0;

  filter:alpha(opacity=0);    

}

.tooltip.top{

  margin-top:-2px;

}

.tooltip.right{

  margin-left:0px;

}

.tooltip.bottom{

  margin-top:2px;

}

.tooltip.left{

  margin-left:0px;

}

.tooltip-inner{

  width:200px;

  padding:3px 8px;

  color:#fff;

  font-size:14px;

  letter-spacing: 0.5px;

  font-family: 'texgyreadventorregular';

  text-align:center;

  text-decoration:none;

  background-color:#000 !important;

  -webkit-border-radius:0px;

  -moz-border-radius:0px;

  border-radius:0px !important;

  opacity: 0.75;

}

.tooltip.top .tooltip-arrow {

  margin-left: -9px;

  border-width: 9px 9px 0;

  border-top-color: #000 !important;

  opacity: 0.75;

}

.tooltip.bottom .tooltip-arrow {

  margin-left: -9px;

  border-width: 0 9px 9px;

  border-bottom-color: #000 !important;

  opacity: 0.75;

}

.timeline li.timeline-inverted{

  float: right; 

  clear: right;

  margin-top: 40px;

  margin-bottom: 20px;

}

.timeline li.timeline-inverted > .timeline-badge{

  left: -12px;

}



@media (max-width: 767px) {

  ul.timeline:before {

    left: 40px;

  }

  ul.timeline li {

    margin-bottom: 40px;

    position: relative;

    width:100%;

    float: left;

    clear: left;

  }

  ul.timeline li .timeline-panel {

    width: calc(100% - 90px);

    width: -moz-calc(100% - 90px);

    width: -webkit-calc(100% - 90px);

  }

  ul.timeline li .timeline-badge {

    left: 28px;

    margin-left: 0;

    top: 16px;

  }

  ul.timeline li .timeline-panel {

    float: right;

  }

  ul.timeline li .timeline-panel:before {

    border-left-width: 0;

    border-right-width: 15px;

    left: -15px;

    right: auto;

  }

  ul.timeline > li > .timeline-panel:after {

    border-left-width: 0;

    border-right-width: 14px;

    left: -14px;

    right: auto;

  }    

  .timeline > li.timeline-inverted{

    float: left; 

    clear: left;

    margin-top: 20px;

    margin-bottom: 20px;

  }

  .timeline > li.timeline-inverted > .timeline-badge{

    left: 28px;

  }

}



.btn-card {

  color: #fff;

  background-color: #98272c;

}

.btn {

  padding: 5px 10px !important;

  font-size: 23px;

  font-weight: 400;

  line-height: 1.4;

  border: none;

  border-radius: 25px !important;

  -webkit-transition: border .25s linear,color .25s linear,background-color .25s linear;

  transition: border .25s linear,color .25s linear,background-color .25s linear;

  -webkit-font-smoothing: subpixel-antialiased;


}



.timeline-footer .modal iframe{

  width: 100%;

  height: 350px;

}

.timeline-footer .modal-header p{

  margin-bottom: 0;

  color: #fff;

  font-size: 25px;

}

.timeline-footer .modal-body {

    background-color: #FFF;

}



/*MISION VISION VALORES*/

.MVV{

  background-color: #98272c !important;

  padding: 50px;

  overflow: auto;

  border-radius: 50px;

}



.MVV h1{

  font-size: 30px;

  color: #000;

  margin-top: 0;

}

.MVV p{

  font-size: 16px;

  margin-bottom: 0;

}

.mvv {

  background-color: #fff;

  margin-left: 20px;

  margin-bottom: 20px;

  padding: 30px;

}

.mvv ul{

  margin-left: -15px;

  margin-bottom: 0;

}

.mvv ul li{

  font-size: 16px;

}



/*DIRECCION*/

.google iframe {

  width: 90%;

  height: 300px;

  margin: 5% 5% 0 5%;

  border: 2px #fff solid;

}

.direccion{

  padding: 50px 30px;

  width: 90%;

  margin: 0 5% 5% 5%;

  text-align: center;

  background-color: #98272c !important;

  color: #fff;

  border-radius: 25px;

}

.direccion p{

  margin-bottom: 0;

  font-size: 16px;

}

/*MODAL*/

.modal-content{

  border-radius: 0px;

}

.modal-header{

  background-color: #d63650;

}

.modal-title{

  color: #FFF;

}

.modal-header .close {

  margin: 5px;

  font-size: 30px;

  font-weight: normal;

  color: #FFF;

  opacity: 1;

  text-shadow: 1px 1px 3px rgba(150, 150, 150, 0.0);

}

.close:hover{

  font-size: 30px;

  color: #000;

  opacity: 1;

  text-shadow: 1px 1px 3px rgba(150, 150, 150, 0.5);

}



/*------------------------------------------------------*/

/* RESPONSIVE

/*------------------------------------------------------*/

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

}



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

}



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

}



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

}



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

}



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

}



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

}



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

  .skin{height: 107px;background-size: 800px 107px;margin-top: 37px;}

}



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

}



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

  .skin{height: 102px;background-size: 768px 102px;margin-top: -17px;}

  .introduccion {padding: 20px 30px 0px 30px;}

  .introduccion h1{font-size: 30px; margin-top: 10px;}

  .introduccion p{font-size: 12px;}

  .timeline-body h1 {font-size: 20px;margin: 0 10px;padding: 0;}

  .timeline-body p {font-size: 12px;padding:20px 10px 0 10px;}

  .TL{margin-top: 0;padding: 0 30px;}

  .timeline-body {padding: 20px;}

  .timeline-footer{padding: 0 10px 10px;}

  .timeline { padding: 30px 0 20px;}

  .MVV {padding: 30px;}

  .MVV h1 {font-size: 20px;}

  .MVV p {font-size: 14px;}

  .mvv ul li {font-size: 14px;}

  .direccion p {font-size: 14px;}

}



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

}



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

}



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

}



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

}



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

}



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

}



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

}  



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

}



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

}



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

  .TL {padding: 0 20px;}

  ul.timeline li {margin: 20px 0;}  

  .mvv{margin-left: 0;}

}



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

  .skin{height: 55px;background-size: 414px 55px;margin-top: -17px;}

}



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

}



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

  .TL {padding: 0 10px;}  

}



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

}



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

  .TL {padding: 0 10px;}

  .MVV p {font-size: 12px;}

  .mvv ul li {font-size: 12px;}

}



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

  .timeline-body {padding: 20px 10px;}

  .timeline-body h1 {font-size: 14px;}

  .timeline-body p {font-size: 10px;}

  .TL {padding: 5px;}

  .introduccion {padding: 20px 20px 0px 20px;}

  .introduccion h1 {font-size: 25px;}

  .introduccion p {font-size: 10px;}

  .MVV {padding: 10px;}

  .MVV h1 {font-size: 16px;}

  .MVV p {font-size: 10px;}

}