/* ESTILOS GENERALES
========================*/
@import url(https://fonts.googleapis.com/css?family=Catamaran:200,600);


body{
  font-family: 'Catamaran', sans-serif;
  background: #9082a0;
}
.little-margin-top{
  margin-top: 1rem;
}
.little-margin-bottom{
  margin-bottom: 1rem;
}
.little-padding-top{
  padding-top: 1rem;
}
.little-padding-bottom{
  padding-bottom: 1rem;
}

a{
  color: #5d2d9b
}
a:hover, a:focus {
  color: #9157dc;
}

h1,h2,h3,h4,h5
{
  font-family: 'Catamaran', sans-serif;
  color: #2F233E;
  text-shadow: 0 1px 0px rgba(255, 255, 255, 0.9);
}

h1 small, h2 small, h3 small, h4 small, h5 small{
  color: #9e9e9e;
}

a {
  transition: all 400ms ease-out;
}

a:hover, a:focus {
  transition: all 400ms ease-out;
}



/*		CONTENIDO
========================*/
.contenido{
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: #f9f9f9 url('../img/pattern.jpg') fixed;
}

/*		MENU
========================*/

.sticky, .title-bar {
  background: #fff;
}

.sticky {
  z-index: 100;
}
#contenedor-menu img{
  max-height: 90px;
  transition: all 400ms ease-out;
  margin: 6px 0 6px 6px;
}
div.title-bar > div > a > img{ /*logo del header en movil*/
  max-height: 60px;
}
.title-bar{
  color: #4e4e4e;
}

/*submenu is-dropdown-submenu*/
.menu{
  width:100%;
}

.menu-icon::after {
  background: #4e4e4e;
  box-shadow: 0 7px 0 #4e4e4e, 0 14px 0 #4e4e4e;
}


.top-bar {
  padding: 0rem;
}
.top-bar, .top-bar ul {
  background-color: #fff;
}

.top-bar-left .menu .active > a {
  background: #fff !important;
  border-bottom: 4px solid #abe2dc;
  margin-bottom: -5px;
}

.top-bar .top-bar-left{

}


.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-color: #00aa97 transparent transparent !important;
}

.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after {
  border-color: #00aa97 transparent transparent !important;
}

.menu > li > a {
  line-height: 1.2rem;
  font-size: .8rem;
  color: #5d2d9b;
  text-transform: uppercase;
}

@media screen and (max-width: 39.9375em) {
  .menu > li {
    display: block;
  }
}

@media screen and (min-width: 40em) {
  .top-bar-right{
  }
}
@media screen and (max-width: 39.9375em) {
  #example-menu > div.top-bar-left > ul > li:nth-child(2){
    display: none;
  }
}



.title-bar-title a{
  display: block;
}

.title-bar-title {
  display: inline-block;
  width: 85%;
}


@media screen and (max-width: 639px) {
  #contenedor-menu{
    height: 0px!important;
  }
}


.menu .active > a {
  background: #5d2d9b;
  color: #fefefe;
}

/*		HEADER
========================*/
div#header {
  padding: 1rem 0;
  background: #FFFFFF;
}



/*	ESTILOS DE CONTENIDO
========================*/
.callout {
  border: 0px solid rgba(255, 255, 255, 0);
}

.hero{
  background: rgba(255, 255, 255, 0.5);
  font-size: 133%;
  text-align: center;
  padding: 3rem 0;
  box-shadow: 0 0rem 7rem 0rem rgba(0, 0, 0, 0.5);
  margin-bottom: 3rem;
}
.hero h1, hero h2, hero h3{
  text-transform: uppercase;
}
.hero p{
  padding: 2rem;
  line-height: 2rem;
}
.hero strong{
}
.fondo-claro{
  background: #f9f9f9;
}
.fondo-oscuro{
  background: #2e223d;
  color: #e5e5e5;
  margin-top: 2rem;
  padding: 2rem 3rem 3rem;
}


@media screen and (max-width: 1023px) and (orientation: portrait) {

  .fondo-oscuro{
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .fondo-oscuro .left{
    border-right: none;
    padding-right: 0px;
  }

  .fondo-oscuro .right{
    padding-left: 0.7rem;
  }
}

.fondo-oscuro h2{
  color: #ffffff;
  line-height: 5rem;
}

div.content{
  background: #fafafa;
}

/*		FOOTER
========================*/
footer{
  padding: 2rem 0 4rem;
  /*border-top: solid 5px #00dac2;*/
  /* text-align: center;*/
  font-size: .8rem;
}
footer a {
  margin-bottom: 1rem;
  margin-right: 1rem;
}
footer a, footer a i{
  color: #c7c0cf;
  transition: all 400ms ease-out;
  font-size: 1rem;
}
footer a:hover, footer a:hover i{
  color:#fda32d;
  transition: all 400ms ease-out;
}
footer p{
  color: #c7c0cf;
}
footer .fa{
  color: #ff9000;
  font-size: 1rem;
  margin-right: 6px;
}
div.iconic i{
  font-size: 5rem;
  display: inherit;
  text-shadow: 0 1px 0 #fff;
}
footer img{
  opacity: 0.5;
  width: 100%;
  padding-bottom: 1rem;
}
footer h4{
  text-shadow: none;
  color: #c7c0cf;
  border-bottom: solid 1px #c7c0cf;
  /*width: 60%;*/
  text-transform: uppercase;
}

.button{
  background-color: #ff9000;
}
.button:hover, .button:focus {
  background-color: #C67000;
}