@charset "utf-8";

/* CSS Document */
#service{background-color: ghostwhite;padding-top: 100px;padding-bottom: 100px;}
.row-1 .ser-col-4{border-right:solid 1px #ccc;border-bottom: solid 1px #ccc;}
.row-1 .ser-col-4-l{border-bottom: solid 1px #ccc;}
.row-2 .ser-col-4{border-right:solid 1px #ccc;border-bottom: solid 1px #ccc;}
.row-2 .ser-col-4-l{border-bottom: solid 1px #ccc;}
.row-3 .ser-col-4{border-right:solid 1px #ccc;}


@media (max-width:768px){
    .ser-col-4-l{border-right:solid 1px #ccc;border-bottom: solid 1px #ccc;border-left:solid 1px #ccc;}
    .ser-col-4{border-left:solid 1px #ccc;border-bottom: solid 1px #ccc;}
}

.ser-col{width:100%;height:auto;text-align: center;padding:20px;position: relative;}
.icon-col{width:80px;height:80px;border-radius: 50%;text-align: center;margin-left: auto;margin-right: auto;}
.icon-col i{font-size: 35px;padding: 20px;}
.circle {
    position: absolute;
    bottom: -11px;
    right: -24px;
    z-index: 99;
}
.circle i{color:#ccc;font-size: 18px;background-color:#fff;}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    color: red;
    background-image: none;
    border: 1px solid red;
    border-radius: 0px;
}
.ser-col h2{color:#777;
    margin-bottom: 20px;}

.ser-col p{color:#3e3b3b;
    margin-bottom: 20px;}

/*====== service 1 ====*/
.ser-1 .icon-col {border: solid 5px white;}
.ser-1 .icon-col i{color:white;}
.ser-1 .btn{color:white;border: 5px solid white;}

/*====== service 2 ====*/
.ser-2 .icon-col {border: solid 5px white;}
.ser-2 .icon-col i{color:white;}
.ser-2 .btn{color:white;border: 5px solid white;}

/*====== service 3 ====*/
.ser-3 .icon-col {border: solid 5px white;}
.ser-3 .icon-col i{color:white;}
.ser-3 .btn{color:white;border: 5px solid white;}

/*====== service 4 ====*/
.ser-4 .icon-col {border: solid 5px white;}
.ser-4 .icon-col i{color:white;}
.ser-4 .btn{color:white;border: 5px solid white;}

/*====== service 5 ====*/
.ser-5 .icon-col {border: solid 5px white;}
.ser-5 .icon-col i{color:white;}
.ser-5 .btn{color:white;border: 5px solid white;}

/*====== service 6 ====*/
.ser-6 .icon-col {border: solid 5px white;}
.ser-6 .icon-col i{color:white;}
.ser-6 .btn{color:white;border: 5px solid white;}

/*====== service 7 ====*/
.ser-7 .icon-col {border: solid 1px mediumseagreen;}
.ser-7 .icon-col i{color:mediumseagreen;}
.ser-7 .btn{color:mediumseagreen;border: 1px solid mediumseagreen;}

/*====== service 8 ====*/
.ser-8 .icon-col {border: solid 1px salmon;}
.ser-8 .icon-col i{color:salmon;}
.ser-8 .btn{color:salmon;border: 1px solid salmon;}

/*====== service 9 ====*/
.ser-9 .icon-col {border: solid 1px gold;}
.ser-9 .icon-col i{color:gold;}
.ser-9 .btn{color:gold;border: 1px solid gold;}

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");

.panel-pricing {
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
.panel {
  
  color: #045F98;
}
.panel-pricing:hover {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
}
.panel-pricing .panel-heading {
  padding: 20px 10px;
  color: #EDEDED;
}
.panel-pricing .panel-heading .fa {
  margin-top: 10px;
  font-size: 58px;
}
.panel-pricing .list-group-item {
  color: #EDEDED;
  border-bottom: 1px solid rgba(250, 250, 250, 0.5);
}
.panel-pricing .list-group-item:last-child {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.panel-pricing .list-group-item:first-child {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
.panel-pricing .panel-body {
  background-color: #fff;
  font-size: 15px;
  color: #186E99;
  padding: 20px;
  margin: 0px;
}

ul.check { list-style-image:url(../images/SEHOGAR-CHECK-SERVICIOS.png); }

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 2px 0;
  margin: 5px 0;
}
.hr-warning{
  background-image: -webkit-linear-gradient(left, rgba(210,105,30,.8), rgba(210,105,30,.6), rgba(0,0,0,0));
}
.hr-success{
  background-image: -webkit-linear-gradient(left, rgba(15,157,88,.8), rgba(15, 157, 88,.6), rgba(0,0,0,0));
}
.hr-primary{
  background-image: -webkit-linear-gradient(left, rgba(66,133,244,.8), rgba(66, 133, 244,.6), rgba(0,0,0,0));
}
.hr-danger{
  background-image: -webkit-linear-gradient(left, rgba(244,67,54,.8), rgba(244,67,54,.6), rgba(0,0,0,0));
}

.breadcrumb {
  background: rgba(245, 245, 245, 0); 
  border: 0px solid rgba(245, 245, 245, 1); 
  border-radius: 25px; 
  display: block;
}

.btn-bread{
    margin-top:10px;
    font-size: 12px;
    
    border-radius: 3px;
}

.texto-describe{
	
    color: #186E99; font-size:15px; text-transform:uppercase; font-weight:normal; font-family: 'Roboto-medium';
}

.texto-pres{
	
    color: #045F98; font-size:15px; font-weight:normal; font-family: 'Roboto-medium';
}


.texto-amor{
	
    color: #A1332B; font-size:20px;  font-family: 'Roboto-medium';
}

.enfer {
  display: flex;
  justify-content: center;
}

.button {
    background-color: transparent;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    border: 3px solid;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    padding: 10px 30px 8px;
    font-size: 25px;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    letter-spacing: 0.2rem;
    line-height: 1;
    text-transform: uppercase;
}
.button:hover{
    text-decoration: none;
    cursor: pointer;
    color: #000;
}

.button-neutral{
    color: #000;
    border-color: #000;
}
.button-neutral:hover{
    color: #fff;
    background-color: #000;
}

.button-primary{
    color: #44A2B0;
    border-color: #44A2B0;
}
.button-primary:hover{
    color: #fff;
    background-color: #44A2B0;
}

/*======ICONOS REDES SOCIALES ====*/


.icon-circle .fa{
    font-size           : 25px;
    color               : #e84700;
    margin              : 0 auto;
    height              : 80px;
    width               : 80px;
    border-radius       : 50%;
    border              :2px solid #e84700;
    line-height         : 80px;
    cursor              : pointer;
    -webkit-transition  : all  ease-in-out 0.35s;
    -moz-transition     : all  ease-in-out 0.35s;
    -o-transition       : all  ease-in-out 0.35s;
    -ms-transition      : all  ease-in-out 0.35s;
    transition          : all  ease-in-out 0.20s,background-color ease-in-out 0.05s;
}

.icon-circle  .fa:hover{
    
    background-color        : #e84700;    
    color                   : #fff;
    border                  : 1px solid #e84711;
    -moz-box-shadow         : inset 0px 0px 0px 5px #ffffff;
    -o-box-shadow           : inset 0px 0px 0px 5px #ffffff;
    -ms-box-shadow          : inset 0px 0px 0px 5px #ffffff;
    -webkit-box-shadow      : inset 0px 0px 0px 5px #ffffff;
    box-shadow              : inset 0px 0px 0px 5px #ffffff;
    -ms-transform           : scale(1.2,1.2); 
    -webkit-transform       : scale(1.2,1.2);
    -moz-transform          : scale(1.2,1.2); 
    -o-transform            : scale(1.2,1.2); 
    transform               : scale(1.2,1.2);  
}

.icon-circle  i:before{
    margin-left         : 0px;
    font-size           : 40px;
}

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


 .icon-circle .fa{
    font-size           : 15px;
    color               : #e84700;
    margin              : 0 auto;
    height              : 40px;
    width               : 40px;
    border-radius       : 50%;
    border              :2px solid #e84700;
    line-height         : 40px;
    cursor              : pointer;
    -webkit-transition  : all  ease-in-out 0.35s;
    -moz-transition     : all  ease-in-out 0.35s;
    -o-transition       : all  ease-in-out 0.35s;
    -ms-transition      : all  ease-in-out 0.35s;
    transition          : all  ease-in-out 0.20s,background-color ease-in-out 0.05s;
}

.icon-circle  .fa:hover{
    
    background-color        : #e84700;    
    color                   : #fff;
    border                  : 1px solid #e84711;
    -moz-box-shadow         : inset 0px 0px 0px 5px #ffffff;
    -o-box-shadow           : inset 0px 0px 0px 5px #ffffff;
    -ms-box-shadow          : inset 0px 0px 0px 5px #ffffff;
    -webkit-box-shadow      : inset 0px 0px 0px 5px #ffffff;
    box-shadow              : inset 0px 0px 0px 5px #ffffff;
    -ms-transform           : scale(1.2,1.2); 
    -webkit-transform       : scale(1.2,1.2);
    -moz-transform          : scale(1.2,1.2); 
    -o-transform            : scale(1.2,1.2); 
    transform               : scale(1.2,1.2);  
}

.icon-circle  i:before{
    margin-left         : 0px;
    font-size           : 20px;
}   
}

.ifacebook .fa{
    color               :#3B5998;
    border              :2px solid #3B5998;
}

.ifacebook .fa:hover{
    
    background-color        : #3B5998;    
    color                   : #fff;
    border                  : 1px solid #3B5998;
	
}

.iEmail .fa{
    color               : #33ccff;
    border              :2px solid #33ccff;
}

.iEmail .fa:hover{
    
    background-color        : #33ccff;    
    color                   : #fff;
    border                  : 1px solid #33ccff;

}

.iInstagram .fa{
    color               : #BD3518;
    border              :2px solid #BD3518;
}

.iInstagram .fa:hover{
    
    background-color        : #BD3518;    
    color                   : #fff;
    border                  : 1px solid #BD3518;

}

.WhatsApp .fa{
    color               : #67C15E;
    border              :2px solid #67C15E;
}

.WhatsApp .fa:hover{
    
    background-color        :#67C15E;    
    color                   : #fff;
    border                  : 1px solid #67C15E;

}

.Messenger .fa{
    color               : #67C15E;
    border              :2px solid #67C15E;
}

.Messenger .fa:hover{
    
    background-color        :#67C15E;    
    color                   : #fff;
    border                  : 1px solid #67C15E;

}
.social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: 0; /* Establecemos la barra en la izquierda */
	top: 200px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
	 top: 150px;
	}
 
	.social ul {
		 list-style: none;
		   margin: 0;
		   padding: 0;
	}
 
	.social ul li a {
		display: inline-block;
		color:#fff;
		background: #000;
		padding: 10px 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-instagram {background: #00abf0;}
	.social ul li .icon-whatsapp {background: #0DC143;}
 
	.social ul li a:hover {
		background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}
	
	/* --------- EFECTO HOVER IMG EQUIPO DE TRABAJO----------*/
	
	/* --------- Global ----------*/
.transition{
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}
.img-responsive{
    width:80%;
}

	
	/* --------- Simple Zoom Effects ----------*/
.equipo-div1{
    position:relative;
    overflow:hidden;
}
.equipo-div1:hover img{
    transform: scale(1.1);
}
img{
    transform: scale(1);
}

/* --------- Text View ----------*/
.equipo-div2{
    position:relative;
    overflow:hidden;
}
.equipo-div2:hover .text-view{
     top: 50%;
     opacity:1;
}
.equipo-div2:hover img{
    opacity:.8;
}
.text-view{
    position:absolute;
    top: 60%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity:0;
}