/* 
Custom CSS for...
'Modern Business' HTML Theme by Start Bootstrap

All Start Bootstrap themes are licensed under Apache 2.0. 
For more info and more free Bootstrap 3 HTML themes, visit http://startbootstrap.com!
*/

/* Global Styles */

html, body {
  height: 100%;
}

body {
  padding-top: 50px;
 /* body padding for fixed top nav */
}

/* HOME */
#home-services {background-color: #ebebeb; padding-top: 20px}

article { background-color: #fff; -webkit-border-radius: 5px;
-moz-border-radius: 5px; border-radius: 5px; box-shadow: 0px 3px 3px #ccc; padding: 15px 0; transition: 0.3s; margin-bottom: 20px }
article img { width: 100%; display: block; margin: 15px 0}
article > a { width: 100%; height: 100%; display: block; text-decoration: none}
article > a:hover {text-decoration: none}
article h3 { margin:0 15px; color: #577395; font-size: 18px; font-weight: 600; transition: 0.3s; display: inline-block; vertical-align: middle;}
article p {margin: 0 15px; font-size: 13px; text-align: left; color: #3A3C33; transition: 0.3s}
article .link-more {color: #b5694e; font-weight: 700; display: block; text-align: right; margin: 0 15px 0 0; transition: 0.3s; margin-top: 4px}
article .link-more .link-arrow { background: url(../images/link-arrow-out.png) no-repeat; width: 19px; height: 11px; display: inline-block; transition: 0.3s}
article .home-icon { background: url(../images/sprite_iconos_home.png) no-repeat; width: 20px; height: 19px; display: inline-block; vertical-align: bottom; margin-right: 5px; transition: 0.3s}
article .home-icon.medios { background-position: 0 0}
article .home-icon.expo { background-position: -20px 0}
article .home-icon.workshops { background-position: -40px 0}
article .home-icon.eventos { background-position: -60px 0}
article:hover {background-color: #577395; cursor: pointer}
article:hover h3 {color: #fff}
article:hover p {color: #fff}
article:hover .link-more {color: #fff}
article:hover .link-more .link-arrow { background: url(../images/link-arrow-over.png) no-repeat;}
article:hover .home-icon.medios { background-position: 0 -19px}
article:hover .home-icon.expo { background-position: -20px -19px}
article:hover .home-icon.workshops { background-position: -40px -19px}
article:hover .home-icon.eventos { background-position: -60px -19px}

section#logoslider { height: 140px}
section#logoslider #owl-demo { margin-top: 20px}
/* PAGE */
#main-title { text-align: center; position: relative; background-color: #ebebeb; padding: 20px 0}
#main-title .section-title { width: 162px; height: 34px; background-color:#577395; position: absolute; top: -18px; left: 50%; margin-left: -81px; color: #fff; font-size: 18px; padding-top: 4px; letter-spacing: 2px  }
#main-title h2 { color:#577395; font-size: 48px; font-weight: 400; letter-spacing: -3px; margin-top: 14px; margin-left: -18px}
hr { width: 50px; height: 3px; background-color: #577395; border: none}
#main-title img {vertical-align: baseline; margin-right: 5px}
@media (max-width: 767px) {
#main-title img { margin: 0 auto; display: block}
#main-title h2 {margin-left: 0}
}

#main-title p { width: 60%; font-size: 16px; color: #8b97a6; text-align: center; margin: 20px auto}
article img.art-logo {width: auto; margin: 0 auto 10px}
#int-cont {background-color: #ebebeb; }
@media (min-width: 1205px) {
  #int-cont article { height: 400px}
  #int-cont article .link-more {position: absolute; bottom: 36px; right: 15px;}
}
@media only screen and (min-width : 1002px) and (max-width : 1204px) {
#int-cont #eventos article { height: 460px}
#int-cont #eventos article .link-more {position: absolute; bottom: 36px; right: 15px;}
}
@media only screen and (min-width : 778px) and (max-width : 1001px) {
#int-cont #eventos article { height: 402px}
#int-cont #eventos article .link-more {position: absolute; bottom: 36px; right: 15px;}
}

/* SERVICES */
#services {background-color: #a4acb6; padding:20px 0;}
#services h2 { color:#fff; font-size: 48px; font-weight: 400; letter-spacing: -3px; margin-top: 10px; text-align: center;}
#services h3 { font-size: 18px; color: #fff; font-weight: 400; margin-bottom: 5px}
#services p { font-size: 12px; color: #48607B; font-weight: 600; margin-bottom: 10px}
#services .service-icon { width: 20px; height: 18px; display: inline-block; margin-right: 5px; vertical-align: top}
#services .service-icon.medios {background: url(../images/sprite_iconos_home.png) 0 -18px;}
#services .service-icon.expo {background: url(../images/sprite_iconos_home.png) -20px -18px;}
#services .service-icon.workshops {background: url(../images/sprite_iconos_home.png) -40px -20px;}
#services .service-icon.eventos {background: url(../images/sprite_iconos_home.png) -60px -18px;}
#services .service-icon.enterteinment {background: url(../images/sprite_iconos_home.png) -79px -18px;}
#services .more-btn { width: 107px; height: 24px; background: url(../images/conocenos/more-btn.png) no-repeat 0 0; display: block; color: #c8d0d9; font-size: 12px; font-weight: bold; padding: 2px 0 0 7px; margin-bottom: 40px}
#services .more-btn:hover {background: url(../images/conocenos/more-btn.png) no-repeat 0 -24px; color: #fff; text-decoration: none}

/* CONOCENOS */
.carousel-conocenos img {  display: block; margin: 0 auto; max-width: 100%}
.carousel-conocenos .fill { padding: 50px}
#mapa {position: relative;}
#mapa .map-caption {position: absolute; z-index: 100; font-size: 24px; color: #fff; letter-spacing: -1px; line-height: 21px; padding: 20px; top: 200px; left: 15%}
#mapa .map-caption span { font-size: 18px}
#mapa .map-caption .map-caption-bg { background-color: #000; opacity: 0.5; -webkit-border-radius: 5px;
-moz-border-radius: 5px; border-radius: 5px; width: 100%; height: 100%; display: block; position: absolute; top: 0; z-index: -1; left: 0}
#map_canvas { width: 100%; height: 360px}

/* FOOTER */
footer {background-color: #d9dbdd; margin: 0; padding: 20px 0 0 0 }
footer .container {width: 730px }
footer ul {width: 230px; display: inline-block; color: #577395; font-size: 14px; font-weight: 600; vertical-align: top}
footer ul#adress {color: #8a8c90}
footer ul li { margin: 15px 0; display: table}
.img-home-portfolio,
.img-customer,
.portfolio-item {
  margin-bottom: 30px;
}
footer ul li a { color: #577395; text-decoration: none}
footer ul li a:hover { color: #6c9ad1; text-decoration: none}
footer ul li .footer-icon { width: 15px; height: 14px; background: url(../images/sprite_iconos_footer.png) no-repeat; display: inline-block; vertical-align: middle; background-position: 0 0}
footer ul li.medios:hover .footer-icon {background-position: 0 -14px}
footer ul li.expo .footer-icon {background-position: -15px 0px}
footer ul li.expo:hover .footer-icon {background-position: -15px -14px}
footer ul li.workshops .footer-icon {background-position: -30px 0px}
footer ul li.workshops:hover .footer-icon {background-position: -30px -14px}
footer ul li.eventos .footer-icon {background-position: -45px 0px}
footer ul li.eventos:hover .footer-icon {background-position: -45px -14px}
footer .lastbar {height: 34px; background-color: #c5c8cc; text-align: center; font-size: 14px; color: #686c72; padding-top: 8px}

@media (max-width: 767px) {
  footer .container { width: 100%}
  footer ul {width: 100%}
  footer ul li {width: 100%; text-align: center;}
  #first-column { display: none}
  #second-column { display: none}
  #logoslider {display: none}
}

.tab-pane {
  margin-top: 15px;
}


.section-colored {
  background-color: #e1e1e1;
 /* change this to change the background color of a colored section */
}

.sidebar {
  margin-top: 40px;
}

.sidebar ul {
  border-radius: 5px;
  padding: 5px;
  border: 1px solid #cccccc;
}

/* Half Page Height Carousel Customization */
.carousel {height: 40%;}
.carousel-fixed {height: 275px;}
.carousel-fixed img {  display: block; margin: 0 auto}
.carousel-fixed .fill { padding-top: 50px}

.item,
.active,
.carousel-inner {
  height: 100%;
  /*cursor: pointer;*/
}

.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

/* Social Icons Styles */
.list-social-icons {
  margin-bottom: 45px;
}

.tooltip-social a {
  text-decoration: none;
  color: inherit;
}

.facebook-link a:hover {
  color: #3b5998;
}

.linkedin-link a:hover {
  color: #007fb1;
}

.twitter-link a:hover {
  color: #39a9e0;
}

.google-plus-link a:hover {
  color: #d14836;
}

/* Service Page Styles */
.service-icon {
  font-size: 50px;
}

/* 404 Page Styles */
.error-404 {
  font-size: 8em;
}

/* Pricing Page Styles */
.price {
  font-size: 4em;
}

.price-cents {
  vertical-align: super;
  font-size: 50%;
}

.price-month {
  font-size: 35%;
  font-style: italic;
}


/* Responsive Styles */
@media (max-width: 767px) {
.carousel { height: 70%;}
.carousel-fixed img {  display: block; margin: 0 auto; max-width: 100%}
#main-title p {width: 80%}
#mapa .map-caption {position: absolute; z-index: 100; font-size: 24px; color: #fff; letter-spacing: -1px; line-height: 21px; padding: 20px; top: 220px; left:50%; margin-left:-149px }
}

#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}