@charset "utf-8";
/* CSS Custom */
@import url(header.css);
@import url(middle.css);
@import url(content.css);
@import url(footer.css);
@import url(components.css);

/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
body {
	background-color: #fffff;
	margin: 0;
	padding: 0;
}
html, body, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, fieldset, form, label, legend, b, input, select, textarea, p, span {
	font-family: 'Encode Sans', Tahoma, Arial, Helvetica, "Trebuchet MS", sans-serif !important;
  /*font-family: 'Encode Sans Condensed', sans-serif;*/
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Marvel', sans-serif !important;
}
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i, 
h1 a i, h2 a i, h3 a i, h4 a i, h5 a i, h6 a i {
	font-weight: 300;
	color: #fcc215;
	margin-right: 10px;
}
p {
	color: #000;
	text-align: justify;
}
a {
	transition: all 1.0s  ease !important;
	text-decoration: none !important;
	color: #293a87;
}
a:hover {
	text-decoration: none !important;
	color: #000;
}
strong {
	font-weight: 700;
	color: #293a87;
}
/* ---------------------------------------------------------- */
/* ESTILOS PERMANENTES -------------------------------------- */
/* ---------------------------------------------------------- */
.container {
	margin: 0;
	padding: 0;
}
.containerb{
  max-width: 900px; 
  margin: auto;
}
.containerc{
  max-width: 1000px; 
  margin: auto;
}

/* ---------------------------------------------------------- */
.div-clear {
	display: block;
	clear: both;
}
/**************************************************/          
/* Small devices (landscape phones, 544px and up) */
  #contact{
    background: #fc9b29;
  }
  #contact .left-contact{
    background: #304149;
  }

  #contact .left-contact .contact-right *{
    text-align: center;
    color: #fff;
  }
  #contact .left-contact .contact-right h2{    
    font-size: 54px;
    color: #fff;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  } 
  #service{
    background: url(../../media/images/middle/download-3.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  #about .left-about,
  #eventos .bg_grey, 
  #contact .left-contact, 
  #service > div{
    min-height: 80vh; 
    width: 100%;
    display: table;
  }

  #eventos .bg_grey > div, 
  #contact .left-contact .contact-right, 
  #service > div .center-middle{
    vertical-align:middle;
    display: table-cell;
  }
  #service .link-service{
    background: #fc9b29;
    min-height: 210px;
  }
  #service .card-deck .card{
    background: #fc9b29;
    margin-right: 5px !important;
    margin-left: 5px !important;
    border-radius: 0px  !important;
  }
  #service .card-deck .card a{
    display: block;
    color: #fff;
    font-weight: block;
    text-transform: uppercase;
    text-align: center;
  }
  #about{
    background: url(../../media/images/middle/download-4.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  #about > div{
    background: rgba(48,65,73,0.7);    
  }
  #about .left-about .right{
    vertical-align:middle;
    display: table-cell;    
  }
  #about .left-about .about-center{
    max-width: 250px;
    min-width: 240px;
    margin: auto;
  }
  #about .left-about .right h2{    
    font-size: 54px;
    color: #34414A;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  #eventos .bg_grey p,  #about .left-about .right p{
    font-family: 'Open Sans', sans-serif !important;
    color: #fff;
    font-weight: normal; 
    text-align: left;     
  }
  #service h2{    
    font-size: 54px;
    color: #fff;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

#menu-principal .dropdown>.dropdown-menu {
  top: 200%;
  transition: 0.3s all ease-in-out;
}
#menu-principal .dropdown:hover>.dropdown-menu {
  display: block;
  top: 100%;
}
#menu-principal .dropdown>.dropdown-toggle:active {
  pointer-events: none;
}

/* ontactenos*/
  #contact .icon{
    width: 80px;
    height: 80px;
    color: #fff;
    font-size: 40px;
    line-height: 80px;
    background: #212529;
    text-align: center;
    margin: auto;
  }
/* Pagina de eventos **/  
  .bg_grey{
    background: #304149;
  }
  .bg_grey *, .bg_grey > div * {
    color: #fff;
  }
  #eventos h2{
    font-size: 54px;
    color: #fc9b29;
  }
  .galeria-fotos {
    margin-bottom: 20px !important;
    padding-bottom: 5px;
    border-bottom: #97a1a3 solid 1px;
  }
  .galeria-fotos a.opacity {
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: 5px !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .opacity {
    filter: alpha(opacity=1.0);
    -moz-opacity: 1.0;
    -webkit-opacity: 1.0;
    -ms-opacity: 1.0;
    -o-opacity: 1.0;
    opacity: 1.0;
    transition: all 1.0s  ease !important;
  }
  .opacity:hover{
    filter: alpha(opacity=0.5);
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
    -ms-opacity: 0.5;
    -o-opacity: 0.5;
    opacity: 0.5;
  }

section#about,
section#service,
section#contact{
  padding: 10px;
}
@media (min-width: 576px) {  
	.container {
		max-width: 100% !important;
	}
/* ---------------------------------------------------------- */
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {    
	.container {
		max-width: 100% !important;
	}
  section#about,
  section#service,
  section#contact{
    padding: 0px;
  }
/* ---------------------------------------------------------- */
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.container {
		max-width: 100% !important;
	}
/* ---------------------------------------------------------- */
	.modal-body img {
		/*float: left;
		width: 360px;
		margin-right: 20px;
		margin-bottom: 20px;*/
	}
/* ---------------------------------------------------------- */
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
	.container {
		max-width: 1248px !important;
		margin: 0 auto;
	}
/* ---------------------------------------------------------- */
}

#mixedSlider {
  position: relative;
}
#mixedSlider .MS-content {
  white-space: nowrap;
  overflow: hidden;
  margin: 0 5%;
}
#mixedSlider .MS-content .item {
  display: inline-block;
  width: 33.3333%;
  position: relative;
  vertical-align: top;
  overflow: hidden;
  height: 100%;
  white-space: normal;
  padding: 0 10px;
}

/* para el mini carousel*/
@media (max-width: 991px) {
  #mixedSlider .MS-content .item {
    width: 50%;
  }
}
@media (max-width: 767px) {
  #mixedSlider .MS-content .item {
    width: 100%;
  }
}
#mixedSlider .MS-content .item .imgTitle {
  position: relative;
}
#mixedSlider .MS-content .item .imgTitle .blogTitle {
  margin: 0;
  text-align: left;
  letter-spacing: 2px;
  color: #252525;
  font-style: italic;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  bottom: 0;
  font-weight: bold;
  padding: 0 0 2px 10px;
}
#mixedSlider .MS-content .item .imgTitle img {
  height: auto;
  width: 100%;
}

#mixedSlider .MS-controls button {
  position: absolute;
  border: none;
  background-color: transparent;
  outline: 0;
  font-size: 50px;
  top: 95px;
  color: rgba(0, 0, 0, 0.4);
  transition: 0.15s linear;
}
#mixedSlider .MS-controls button:hover {
  color: rgba(0, 0, 0, 0.8);
}
@media (max-width: 992px) {
  #mixedSlider .MS-controls button {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  #mixedSlider .MS-controls button {
    font-size: 20px;
  }
}
#mixedSlider .MS-controls .MS-left {
  left: 0px;
}
@media (max-width: 767px) {
  #mixedSlider .MS-controls .MS-left {
    left: -10px;
  }
}
#mixedSlider .MS-controls .MS-right {
  right: 0px;
}
@media (max-width: 767px) {
  #mixedSlider .MS-controls .MS-right {
    right: -10px;
  }
}