@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'Din';
    src: url('../fonts/D-DIN.otf') format('opentype');
    font-weight:normal;
}
@font-face {
    font-family: 'Din';
    src: url('../fonts/D-DIN-Bold.otf') format('opentype');
    font-weight:bold;
}
@font-face {
    font-family: 'Din';
    src: url('../fonts/D-DINCondensed.otf') format('opentype');
    font-weight:100;
}
@font-face {
    font-family: 'Din';
    src: url('../fonts/D-DINCondensed-Bold.otf') format('opentype');
    font-weight:200;
}
@font-face {
    font-family: 'Din';
    src: url('../fonts/D-DIN-Italic.otf') format('opentype');
    font-weight:300;
}


body {
	background-color: #ebebeb;
	background-image: url("../images/assets/background-fijatec.png");
	background-size: 100px;
	font-family: "Din";
}
h1, h2, h3, h4, h5 {letter-spacing: -1px; font-weight: 100; text-transform: uppercase; width: 100%;}

.icon-locate {
	list-style-type: none;
	background: url("../images/iconos/icon-place.svg") no-repeat;
	background-position: left 3px;
	padding: 3px 0 3px 38px;
	background-size: 28px;
	margin-bottom: 7px;
}
.icon-email {
	list-style-type: none;
	background: url("../images/iconos/icon-mail.svg") no-repeat;
	background-position: left 3px;
	padding: 3px 0 3px 38px;
	background-size: 28px;
	margin-bottom: 7px;
}
.icon-whatsapp {
	list-style-type: none;
	background: url("../images/iconos/whatsapp.svg") no-repeat;
	background-position: left 3px;
	padding: 3px 0 3px 38px;
	background-size: 28px;
	margin-bottom: 7px;
}
.icon-time {
	list-style-type: none;
	background: url("../images/iconos/icon-time.svg") no-repeat;
	background-position: left 3px;
	padding: 3px 0 3px 38px;
	background-size: 28px;
	margin-bottom: 7px;
}

.container-frame-nordlock {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 4rem;
	/*background-image: url("../images/assets/nordlock/background-nordlock.jpg");*/
	background-size: cover;
	border-radius: 0.5rem;
	background-position:center;
}
.container-frame-nordlock > div {flex:1;}
.container-frame-nordlock > .frame-descripcion {
	margin: 30px;
	color: #FFFFFF; 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	font-size: 17px;
}
.color-nordlock {color:#7b99cc; font-weight: 200;}
.container-frame-nordlock > .frame-descripcion {color: #000000; line-height: 1.1;} 
.container-frame-nordlock > .frame-imagen {
	display: flex; 
	justify-content: center; 
	align-items: flex-end; 
	overflow: hidden;
}
.container-frame-nordlock > .frame-imagen > img {
	max-height: 375px; 
	max-width: 100%;
	width: auto;
	height: auto;
	/*filter: drop-shadow(10px 20px 10px rgba(0,0,0,.60));*/
}
.container-contacto {display: flex; flex-direction: column; align-items: center;}

.enc-nordlock {border-bottom: solid 2px #7b99cc; background-color: #FFFFFF; color: #000000;}

.bg-fijatec-c1 {background-color: #403985;}
.bg-fijatec-c2 {background-color: #7b99cc;}
.bg-nordlock, .btn-nordlock {background-color: #7b99cc; color: #FFFFFF;}

.font-condensed {font-weight: 200;}

.card-producto {width:238px;}

.frame-whatsapps {
	display:flex;
	flex-direction: column;
	margin: 5px;
}
.frame-whatsapps > a > span {display:block;}

.nav-tabs {border: 0 !important; padding-bottom: 15px !important;}
.nav-link {border-radius: 10px !important; border:0 !important; color: #403985 !important; margin: 3px;}
.nav-link:hover {background-color: #7b99cc !important; color: #FFFFFF !important;}
.nav-link.active {background-color: #403985 !important; color: #FFFFFF !important;}
.btn-nav-link-spax {color: #00894d; margin: 3px;}
.btn-nav-link-spax:hover {background-color: #00894d; color: #FFFFFF;}
.btn-nav-link-spax.active {background-color: #00894d !important; color: #FFFFFF;}

.luz {margin-left:0 !important;
	animation: luz 3s 1s 3;
}

@keyframes luz {
	10% {background-color:#403985; color:#fff;}
	20% {background-color:#FFF;}
	30% {background-color:#403985; color:#fff;}
}
.btn-fijatec-c1 {background-color: #7b99cc; color: #FFFFFF; border: solid 1px #7b99cc}
.btn-fijatec-c1:hover {background-color: #8cd2ef; color: #403985; border: solid 1px #7b99cc}
.btn-fijatec-whats {
	text-decoration: none;
	height: 39px;
	background-color:#ebebeb;
	padding: 5px;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 3px;
}

.btn-spax {background-color: #00894d; color: #FFFFFF; border: solid 1px #00894d}
.btn-spax:hover {background-color: #FFFFFF; color: #00894d; border: solid 1px #00894d}

.frame-top {display:flex; justify-content: space-between;}
.frame-logo{justify-content: space-between; display: flex; flex-wrap: nowrap; align-items: center; align-content: center;}
.frame-logo > h5 {padding-left: 1rem; max-width: 200px; border-left:solid 1px #000000; padding-left: 1rem;}
.logo-marca {width: auto; height: 48px; padding-right: 1rem;}
.logo-fijatec-tornillo {width: auto; height: 76px; padding-right: 1rem;}


.frame-pie {justify-content: space-between; display: flex; flex-wrap: wrap; align-items: center; background-color: #403985; color: #FFFFFF;}

.frame-beneficios {display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.frame-beneficios > div {padding: 2rem; min-width: 190px; margin: 0; flex: 1; line-height: 1; background-color: #FFFFFF; color: #000000;}
.frame-beneficios > div:nth-child(1) {opacity: 0.5;}
.frame-beneficios > div:nth-child(2) {opacity: 0.6;}
.frame-beneficios > div:nth-child(3) {opacity: 0.7;}
.frame-beneficios > div:nth-child(4) {opacity: 0.8;}
.frame-beneficios > div:nth-child(5) {opacity: 0.9;}
.frame-beneficios > div > span {font-size: 22px; font-weight: bold;}

.frame-contacto {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 900px;
	padding: 20px 20px 0 20px;
}
.logo-fijatec {width:80%; height: auto;}
.imagen-chattec {width:100%; height: auto;}

.frame-sucursales {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background-color: rgba(119,146,193,.3);
	padding: 30px 20px;
	width: 100%;
}
.frame-sucursales > h4 {text-align: center;} 
.card-sucursal {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	background-color: #FFFFFF;
	border-radius: 5px;
	padding: 25px;
	margin: 10px;
}
.card-sucursal .mapa {width: 100%; height: auto; min-height: 300px; margin-bottom: 30px;}
.card-sucursal > img {width: 160px; margin: 30px;}

@media only screen and (max-width: 991px) {
	.container-frame-nordlock {flex-direction: column;}
}

@media only screen and (max-width: 767px) {
	.container-frame-nordlock {	padding: 0 1rem;}
	.container-frame-nordlock > .frame-descripcion {margin: 20px 10px;}
	.card-producto, .card-sucursal {min-width:90%;}	
	.frame-sucursales {padding:30px 0;}
	.frame-pie {flex-direction: column;}
}
@media only screen and (max-width: 767px) {
	.frame-top {flex-direction: column;}
	.frame-logo {justify-content: center;}
	.frame-logo > h3 {display:none;}
	.frame-whatsapps {flex-direction: row; justify-content: center;}
	.frame-whatsapps > a {flex-direction: row-reverse;}
	.frame-whatsapps > a > span {display:none;}
	.btn-fijatec-whats {height: 49px;}
	.frame-contacto {padding:30px;}
	.imagen-chattec {display: none;}
	.card-sucursal {padding: 25px 0;}
}