/*
 *  Desarrollo por Branding Emocion - Queremos fanaticos !
 * 
 *  Version 1.0
 * 
 */

/* VALORES POR DEFECTO */
@font-face{
	font-family: regular;
	src: url('../fonts/OpenSans-Light.ttf');
}
@font-face{
	font-family: medium;
	src: url('../fonts/OpenSans-Regular.ttf');
}
@font-face{
	font-family: Awesome;
	src: url('../fonts/fontawesome-webfont.ttf');
}

.main-container{
	max-width:1100px;
	width:100%;
	margin:0 auto;
	box-shadow:0 0 5px gray;
}
body{
	background-color:#FBFBFB;
}
*{
	padding:0;
	margin:0;
	box-sizing:border-box;
	font-family:regular;
}
a{
	text-decoration:none;
}
h1, h2, h3, h4, h5, h6{
	font-family:medium;
}

p{
    line-height: 26px;
    padding: 6px 0;
    font-size: .95em;
    color:#484848;
}
.block li{
    line-height: 26px;
    padding: 3px 0;
    font-size: .95em;
    color:#484848;
}
img{
	margin-bottom:-4px;
}
.responsive-img{
	max-width:100%;
	/*margin-top:20px;*/
}

.header,
.logo-menu,
.content,
footer{
	width:100%;
	max-width:1100px;
	margin:0 auto;
}
.service-icon::before,
.logo-menu::before,
.wrap-title::before{
    display: table;
    content: " ";
}
.service-icon::after,
.logo-menu::after,
.wrap-title::after{
	display: table;
    content: " ";
	clear:both;
}

.content li{
    line-height: 26px;
    font-size: .95em;
    margin-left:18px;
}



/* ANIMACIONES */
/*a{
	-webkit-transition:all 200ms linear;
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-ms-transition:all 200ms linear;
	transition:all 200ms linear;
}*/
.service-icon *,
.gallery li a img{
	-webkit-transition:all 400ms linear;
	-moz-transition:all 400ms linear;
	-o-transition:all 400ms linear;
	-ms-transition:all 400ms linear;
	transition:all 400ms linear;
}

.responsive-img{
	/* ANIMACION COMPLETA */
  	-webkit-animation-name: cf4FadeInOut;
  	-webkit-animation-timing-function: ease-in-out;
  	-webkit-animation-duration: 300ms;
  	
  	-moz-animation-name: cf4FadeInOut;
  	-moz-animation-timing-function: ease-in-out;
  	-moz-animation-duration: 300ms;
  	
  	-o-animation-name: cf4FadeInOut;
  	-o-animation-timing-function: ease-in-out;
  	-o-animation-duration: 300ms;
  	
  	-ms-animation-name: cf4FadeInOut;
  	-ms-animation-timing-function: ease-in-out;
  	-ms-animation-duration: 300ms;
  	
  	animation-name: cf4FadeInOut;
  	animation-timing-function: ease-in-out;
  	animation-duration: 300ms;
}

@keyframes cf4FadeInOut {
 	0% {
   		margin-top:40px;
   		opacity:.1;
 	}
 	100% {
   		margin-top:20px;
   		opacity:1;
 	}
}

/* COLORES */
.bg-color-primary{
	background-color:#f0ca26;
}
.bg-color-secondary{
	background-color:#000;
}
.ft-color-primary{
	color:red;
}
.ft-color-secondary{
	color:blue;
}
.br-color-top{
	border-top:6px solid #FFC107;
}


/* HEADER */
.wrap-header{
	
}
.header{
	overflow: hidden;
	padding:10px 0;
	font-size:0.8em;
}
.header,
.header a{
	color:#fff;
}
.header .bullet-img{
	float:left;
	margin-right:5px;
	margin-bottom:20px;
	margin-top:4px;
}

.top-menu{
	float:right;
}
.top-menu ul li{
	float:left;
	list-style-type:none;
}
.top-menu ul li a{
	color:#fff;
	text-transform:uppercase;
	display:block;
	padding:2px 10px;
	font-size:.9em;
}

/* LOGO MENU */
.logo-menu{
	padding:10px;
	text-align: center;
	position:relative;
}

.logo {
    display: block;
    float: left;
    margin:15px 0px 15px 40px;
}

.menu{
	float:right;
	margin-top:30px;
}

/* SLIDE */
.wrap-slide{
	/*max-width:1100px;*/
	width:100%;
	margin:0 auto;
	overflow:hidden;
}
.slide{
	height:352px;
}
.camera_caption{
	background-color:#73A822;
	opacity: .8;
	right:0;
	position:absolute;
	width:100%;
	max-width:600px;
	top:60%;
	right:calc(50% - 300px);
	text-align:center;
}
.camera_caption h2{
	font-size:2em;
	color:#fff;
	padding:5px 15px;
}

/* BLOQUE CENTRAL */

.block{
	background-color:#fff;
	padding:10px 10px;
}
.block .servimg-respon{
	max-width:360px;
	width:100%;
}
.block li{
	list-style-image: url('../img/list-dot.jpg');
}
.title-1 {
    font-size: 2em;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: center;
    padding: 15px 0 30px 0;
    color:#333;
}
.subtitle-1 {
    color: #FFC107;
    padding: 5px 0;
}
.subtitle-2 {
    color: #FF9800;
    padding: 15px 0;
    font-style:italic;
}

.subtitle-3 {
	color: #00569F;
    padding: 5px 0 0 12px;
    background: url('../img/list-dot.jpg') no-repeat 0px 12px;
    
}
.subtitle-4 {
	color: #79787D;
    padding: 5px 0 0 12px;
    font-family:Arial;
    font-weight:bold;
}
.subtitle-4 .capital{
	background-color:#0055A2;
	padding:1px 6px;
	display:inline-block;
	color:#fff;
	font-family:Arial;
    font-weight:bold;
}

.service-icon li{
	float:left;
	width:25%;
	list-style-type:none!important;
	list-style-image:none!important;
	margin-left:0!important;
}
.service-icon a{
	display:block;
	padding:10px 4px;
	min-height: 184px;
}
.service-icon a div.icon-image{
	display:block;
	max-width:80px;
	margin:0 auto;
	position:relative;
}
.service-icon a div.icon-image .icon-img-back{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity: 0;
}
.service-icon a div.icon-image img{
	width:100%;
}
.service-icon a span.icon-title{
	text-align:center;
	width:100%;
	display:block;
	color: #FFC107;
    font-size: 1.1em;
	font-weight:bold;
	padding:20px 0 0;
}
.service-icon a span.icon-text{
	text-align:center;
	width:100%;
	display:block;
	font-size:.9em;
	color:gray;
	padding: 10px 10px;
    text-align: justify;
}
.service-icon a:hover{
	background-color:#f0ca26;
}
.service-icon a:hover span.icon-title,
.service-icon a:hover span.icon-text{
	color:#fff;
}
.service-icon a:hover img.icon-img-front{
	opacity: 0;
}
.service-icon a:hover img.icon-img-back{
	opacity: 1;
}
	
/* CONTACTO WRAP */
.contacto{
	margin:0 auto;
	max-width:880px;
	width:100%;
	color:#fff;
	padding:25px 0;
}
/* INFO - MAP CONTACTO */
.infomap{
	padding:15px 0;
}

.infomap iframe{
	width:100%;
	border:0px;
	height:300px;
}

/* FORM CONTACTO */
.frmcontacto input[type="text"],
.frmcontacto input[type="email"],
.frmcontacto textarea{
	border: 1px solid #D2D2D2;
	width:100%;
	padding:8px 10px;
	margin:10px 0;
	font-size:.9em;	
}
.frmcontacto input[type="text"]:hover,
.frmcontacto input[type="email"]:hover,
.frmcontacto textarea:hover{
	border:1px solid gray;
}
.frmcontacto button{
	margin:10px 0;
	float:right;
	border:1px solid #E3E4E5;
	padding:6px 8px;
	color:gray;
	background-color:#fff;
}
.frmcontacto button:hover{
	border:1px solid gray;
}


/* FOOTER */
.wrap-footer{
	padding:0 10px;
}
.wrap-footer a{
	color:#E6E6E6;
	font-weight:bold;
	text-decoration:underline;
}
.wrap-footer p{
	color:#fff;
	font-size:.85em;
}

/* BUTTON GO TOP*/
.scrollToTop{
	width:48px; 
	height:48px; 
	position:fixed;
	bottom:40px;
	right:40px;
	display:none;
	background: url('../img/to-top.png') no-repeat;
	z-index:1;
}


/* REDES SOCIALES */
.follow_icon2 {
	padding: 0;
	margin: 0 20px 0 0;
	list-style: none;
	float: right;
	overflow: hidden;
}
.follow_icon2 li {
	float: left;
	margin: 0 0 0 21px;
}
.follow_icon2 li:first-child {
	margin: 0;
}
.follow_icon2 li a {
	font-size: 18px;
	line-height: 25px;
	color: #fff;
	-webkit-transition: all 0.25s;
	-o-transition: all 0.25s;
	transition: all 0.25s;
}
.follow_icon2 li a:hover {
	color: #ffffff;
	text-shadow:0px 0px 5px #fff;
}
.fa {
  display: inline-block;
  font-family: Awesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-facebook:before {
    content: "\f09a";
}
.fa-google-plus:before {
  content: "\f0d5";
}
.fa-rss:before {
  content: "\f09e";
}
.fa-linkedin:before {
  content: "\f0e1";
}
.fa-pinterest:before {
  content: "\f0d2";
}

/* BLOQUE INTRO */
.info-intro h5{
	color:#81A736;
	font-size:1.1em;
	position: relative;
}
.info-intro h5:before{
	content: "";
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    top: 5px;
    left: -19px;
    background-image: url('../img/list-dot.png');
}
.info-intro p{
	margin-bottom:15px;
}

.info-intro h1{
	text-align: center;
    padding: 15px 0;
    font-size: 2.5em;
}
.info-intro .title2{
	text-align:center;
	padding:10px 0;
	font-family:LucidaCalligraphyItalic;
	font-size:1.8em;
	display:block;
}
.info-intro .title3{
	color:#9D4C37;
	text-align:center;
	padding:10px 0;
	font-family:BrushScriptMtItalic;
	font-size:2.1em;
	display:block;
}
.info-intro .title4{
	text-align:center;
	padding:10px 0;
	display:block;
	text-transform:uppercase;
	font-weight:bold;
	font-size:1.2em;
}
/* COLUMNAS DE PIE DE PAGINA */
.box-footer{
	padding:10px 15px;
	color:#fff;
	font-size:.9em;
	border-right:1px solid #00569F;
	min-height:160px;
	margin:15px 0;
}
.box-footer:last-child{
	border-right:0!important;
}
.box-footer p{
	color:#fff;
	font-size:.85em;
}
.box-footer a{
	color:#fff;
}
.box-footer a:hover{
	text-decoration:underline;
}
.box-footer h3{
	color:#fff;
	font-size:1.3em;
	font-weight:bold;
	text-align:center;
	padding:5px 0 15px;
}

/*  NOSOTROS  BANNER */
.slide-static img {
    max-width: 100%;
    width: 100%;
}

.boton {
    background-color: #73A822;
    color: #fff;
    padding: 8px 15px;
    border-radius: 10px;
    font-size:1.2em;
}

/* GALLERY INICIAL */
.gallery{
	/*padding:10px 5px;*/
}
.gallery li{
	list-style-type:none;
	width:16.66%;
	padding:8px;
	float:left;
	margin-left: 0!important;
    list-style-image: none!important;
    line-height:0px!important;
}
.gallery li a img{
	width: 100%;
    max-height: 87px;
}
.gallery li a{
	display:block;
	border:2px solid #D4D4D4;
	overflow:hidden;
}
.gallery li a:hover img {
    transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
}
/* TITLE PAGE */
.wrap-title{
	border-bottom:1px solid gray;
	padding-top:15px!important;
	padding-bottom:15px!important;
}
.wrap-title h4{
	font-style:italic;
	color:gray;
}
.wrap-title h2{
}
.wrap-title img{
	max-width:80px;
	width:100%;
	float:right;
}
a.logo img {
    max-width: 100px;
}
.block.line-top {
    padding: 20px 40px 60px;
}
a.link-zoho {
    font-size: 1.2em!important;
    font-weight: bold;
}

.img {
    width: 100%;
    max-width: 270px;
    height: 280px;
    margin: 10px auto;
    background-size: cover;
    background-position: center center;
}
.cols-3-lg .img {
    max-width: 230px;
    height: 190px;
}