*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html {font-size: 100%; padding: 0; margin: 0;}

/*COMPONENTES*/
.cbp-fbscroller > nav {position: fixed; z-index: 9999; right: 50px; top: 50%; width: 20px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.cbp-fbscroller > nav a {display: block; position: relative; z-index: 9999; color: transparent; width: 10px; height: 10px; outline: none; margin: 12px 0; border-radius: 50%; background: #2800ff;}
.no-touch .cbp-fbscroller > nav a:hover {background: #f2294a;}
.cbp-fbscroller > nav a.cbp-fbcurrent {background: #f2294a;width: 20px; height: 20px; left: -5px;}
.no-touch .cbp-fbscroller section {width: 100%;}

/*iOS inputs*/
input[type="submit"], input[type="text"], input[type="number"], input[type="password"], input[type=""], input[type="email"], button, textarea {-webkit-appearance: none; -webkit-border-radius: 0px;}

/* Clearfix hack */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {font-family: 'Montserrat', sans-serif;}
a {color: #f0f0f0; text-decoration: none;}
a:hover {opacity: 0.8;}

.contenido {width: 1080px; margin: 0 auto;}

/*LOGO BASC*/
.logo_basc {float: left; background: url('../images/logo_basc.png') no-repeat; width: 90px; height:78px; text-indent: -9999px; display: block; margin: 30px 0; background-size:contain; border-radius:6px;}

/*LOGO E ICONOS SOCIALES*/
.header {width: 1080px; height: 155px;}
.header h1 {float: left; background: url('../images/logo.png') no-repeat; width: 247px; height:55px; text-indent: -9999px; display: block; margin: 50px 0;}

/*PAGINACION*/
.header nav {float: right; margin-top: 50px;}
.header nav a {color: #2800ff; display: inline-block; padding: 0 0 0 20px;}
.header nav a:hover {opacity: 0.6}
.header nav .font {font-size: 30px;}
.header nav .text {font-size: 18px; padding-right: 3px; background: url("../images/vertical-line.jpg") no-repeat top right; height: 34px; width: 200px; line-height: 34px;}

/*BOTONES*/
.boton-wa i {font-size: 32px; position: absolute; margin: -7px 0 0 -38px;}
.boton-wa {color:#fff; display:inline-block; font-size:14px; font-weight: 100; margin-top:30px; text-decoration:none; box-shadow: 0px 2px 4px rgba(40,0,255,0.8); border-radius: 30px; width: 260px;}
.wa {background:#2ddc2d; padding:18px 0 18px 30px; }
.blue {background:#2800ff; padding:18px 0;}
.purple {background:#cd1cfb; padding:18px 0;}

/*ALIGN*/
.text-alig-center {text-align: center;}

/*COLORES*/
.azul {color: #2800ff;}
.violeta {color: #7800ff;}
.rojo {color: #ce3047;}
.gris {background: #f4f4f4;}

/**COLUMNAS**/
.columna-izquierda {float: left;}
.columna-derecha {float: right;}
.clear {clear: both;}

/*FIXS*/
.ancho {width: 200px !important;}
.top-tec {margin-top: 30px;}
.alto-logos {height: 230px;}

/*ANCHOS*/
.sesenta {width: 60%;}
.cuarenta {width: 40%;}
.cincuenta {width: 50%;}

/**SECCION 01**/
.heigt-home {height: 564px;}
.image-home-01 {background: url("../images/home-01.jpg"); width: 424px; height: 423px; margin-left: 16px; box-shadow: -6px 6px 10px rgba(40,0,255,1.0);}
.image-home-02 {background: url("../images/home-02.png"); width: 425px; height: 354px; position: absolute; margin: 210px 0 0 200px;}
.titulo-home {background: url("../images/titulo-home.png") no-repeat; width: 387px; height: 45px; margin: 160px 0 0 15px; position: absolute;}
.form {width: 300px; border-radius: 20px; box-shadow: 0px 0px 10px rgba(40,0,255,1.0); padding: 12px;}
.form h2 {color: #8b18f8; font-size: 20px;}

/**SECCION 02**/
.heigt-section-02 {height: 680px; padding-top: 6px;}
.fila01 {width: 100%; margin: 0 auto;}
.fila01 h3 {color: #2800ff; font-size: 26px; font-weight: 100; padding-top: 20px;}
.fila01 span {font-weight: 800;}
.fila01 > p {color: #606060; font-size: 17px; width:630px; margin: 0 auto; line-height: 30px;}
.fila01 .imagen {background: url("../images/que-hacemos.jpg") no-repeat; height: 269px; width: 528px; margin: 120px auto 0;}
.sombra {background: url("../images/sombra.png"); width: 976px; height: 43px; position: absolute; margin: 226px 0 0 -224px;}
.fila01 .textos {position: absolute; font-weight: 700; text-align: left; width: 200px;}
.fila01 .textos span {width: 30px; background-image: url("../images/raya-titulo.jpg"); background-position: center bottom; background-repeat: no-repeat; color: #cd3047; height: 30px; padding-bottom: 7px; font-size: 15px; }
.textos > p {color: #2800ff; line-height: 18px; margin-top: 12px; font-size: 14px; }
.uno {margin: 170px 0 0 -140px;}
.dos {margin: 50px 0 0 -80px;}
.tres {margin: -30px 0 0 20px;}
.cuatro {margin: -60px 0 0 180px;}
.cinco {margin: -80px 0 0 360px;}
.seis {margin: 55px 0 0 550px;}
.siete {margin: 170px 0 0 550px;}

/**SECCION 03**/
.heigt-section-03 {height: 576px;}
.imagen-innovar {background: url("../images/innovar-01.jpg") no-repeat; width: 396px; height: 476px; margin-top: 100px;}
.gradient {background: rgb(40,0,255); background: linear-gradient(90deg, rgba(40,0,255,1) 0%, rgba(120,0,255,1) 30%, rgba(206,48,71,1) 100%);}
.text-inno {font-size: 14px; font-style: italic; padding: 18px 0; text-align: center; font-weight:400; letter-spacing: 2px; color: #fff; }
.fila02 {width: 100%;}
.fila02 p {color: #7800ff; font-style: italic; font-size: 15px; width: 400px; letter-spacing: 2px; margin: 20px 0;}
.fila02 h4 {font-size: 70px; font-weight: 800; color: #2800ff; padding: 0; margin: 120px 0 0 0;}
.fila02 h5 {font-size: 32px; font-weight: 600; color: #2800ff; padding: 0 0 0 100px; margin: 0; background: url("../images/linea.jpg") left center no-repeat;}
.size {width: 360px; height: 42px; margin-top: 220px !important;}
.adn {background: url("../images/adn.jpg") no-repeat; width: 78px; height: 36px; position: absolute; margin-left: 370px;}

/**SECCION 04**/
.heigt-section-04 {height: 660px; padding-top: 6px;}
.circular-wrap {width: 810px; height: 380px; margin: 0 auto;}
.circular-001,
.circular-002,
.circular-003 {width: 180px; height: 180px; border-radius:100%; position: absolute; margin: 45px; background: #fff; z-index: 999;}
.circular-001 {box-shadow: -20px 20px 20px rgba(0,0,0,0.2); background: url("../images/icon-001.jpg") no-repeat center center;}
.circular-002 {box-shadow: 20px -20px 20px rgba(0,0,0,0.2); background: url("../images/icon-003.jpg") no-repeat center center;}
.circular-003 {box-shadow: -20px 20px 20px rgba(0,0,0,0.2); background: url("../images/icon-002.jpg") no-repeat center center;}
.contornoMedioCirculo {position:relative; width:270px; height:270px; border-radius:50% 50%; float: left; margin-bottom: 40px;}
.contornoMedioCirculo::before {position:absolute; content:""; top:100%; left:100%; background-color:#f4f4f4; height:1%; width:1%; border-radius:50% 50%;}
.contornoMedioCirculo::after { position:absolute; content:""; height:50%; background-color:#f4f4f4; border:0px; top:50%; left:0; width:100%;}
.contornoMedioCirculo.abajo {transform:rotate(180deg);}
.contiene-circulos {width: 270px; height: 380px; float: left;}
.contiene-circulos .textos-internos {text-align: center; padding: 0px 26px;}

/**SECCION 05**/
.arte {background: url("../images/arte.png") no-repeat; width: 642px; height: 84px; margin: 0 auto;}
.top {padding-top: 580px;}

/**SECCION 06**/
.heigt-section-06 {height: 700px; padding-top: 100px;}
.imagen-seguridad {background: url("../images/seguridad.jpg") no-repeat; width: 489px; height: 493px;}
.subtitulo {color: #7292a3; font-style: italic; letter-spacing: 1px;}
.titulo-seguridad {font-weight: 700; color: #2800ff; font-size: 32px; background: url("../images/360.jpg") no-repeat; padding-right: 40px; background-position: right;}
.titulo-seguridad span {text-transform: uppercase;}
.refuerzo-seguridad {font-weight: 600; color: #7800ff; margin: 20px 0; width: 86%; line-height: 22px;}
.fila01 ul li {font-size: 14px; color: #2800ff; margin-bottom: 30px; padding-left: 20px; background: url("../images/punto.jpg") no-repeat 0px 4px;}
.fila01 ul {list-style: none; padding: 0px;}

/**SECCION 07**/
.heigt-section-07 {height: 660px; padding-top: 6px;}
.titulo-izq-container {background: url("../images/text-container.png"); width: 372px; height: 52px; position: relative; top: 320px; margin-left: 110px;}
.logo-der-container {background: url("../images/logo-light.png"); width: 342px; height: 75px; position: relative; top: 290px; margin-left: 200px;}

/**SECCION 08**/
.heigt-section-08 {height: 950px; padding-top: 6px;}
.bg-tecnologica {background: url("../images/tecnologica.jpg") no-repeat; width: 600px; height: 388px; margin-left: 70px;}
.text-tecno-01,
.text-tecno-02,
.text-tecno-03 {font-size: 15px; font-style: italic; width: 280px; position: absolute;}
.text-tecno-01 {margin: 50px 0 0 540px;}
.text-tecno-02 {margin: 140px 0 0 580px;}
.text-tecno-03 {margin: 230px 0 0 620px;}
.swiper-container {width: 60%; height: 160px;}
.swiper-slide {text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center;  -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 45; width: 119px;}
.logo1,
.logo2,
.logo3,
.logo4,
.logo5,
.logo6 {display:block; background-position:center center; width:119px; height:45px; background-position:center center; background-repeat:no-repeat;}
.logo1 {background-image:url('../images/01.png');}
.logo2 {background-image:url('../images/02.png');}
.logo3 {background-image:url('../images/03.png');}
.logo4 {background-image:url('../images/04.png');}
.logo5 {background-image:url('../images/05.png');}
.logo6 {background-image:url('../images/06.png');}
.bg-carrusel {background: url("../images/bg-carrusel.jpg") no-repeat top left #f4f4f4;}

/**SECCION 09**/
.heigt-section-09 {height: 600px;}
.fila09 {width: 100%;}
.fila09 p {color: #7800ff; font-style: italic; font-size: 15px; width: 500px; letter-spacing: 2px; margin: 20px 0;}
.fila09 h4 {font-size: 60px; font-weight: 800; color: #2800ff; padding: 0; margin: 120px 0 0 0;}
.fila09 h5 {font-size: 30px; font-weight: 600; color: #2800ff; padding: 0 0 0 100px; margin: 0; background: url("../images/linea.jpg") left center no-repeat;}
.logo-cj {background: url("../images/cj-logo.jpg"); width: 200px; height: 100px; margin: 12px 0 6px;}
.bg-coka-01 {background: url("../images/bg-coka-001.jpg"); width: 349px; height: 352px; margin-top: 100px; box-shadow: -6px 6px 10px rgba(40,0,255,1.0);}
.bg-coka-02 {background: url("../images/bg-coka-002.jpg"); width: 258px; height: 254px; margin: 260px 0 0 160px; box-shadow: -6px 6px 10px rgba(40,0,255,1.0); position: absolute;}

/**SECCION 10**/
.heigt-section-10 {height: 880px; padding-top: 6px;}
.fila10 {width: 100%;}
.fila10 p {color: #7800ff; font-style: italic; font-size: 14px; width: 550px; letter-spacing: 2px; margin: 20px 0;}
.fila10 h4 {font-size: 40px; font-weight: 800; color: #2800ff; padding: 0; margin: 120px 0 20px 0;}
.fila10 h5 {font-size: 26px; font-weight: 600; color: #2800ff; padding: 0 0 0 100px; margin: 0; background: url("../images/linea.jpg") left center no-repeat;}
.logo-macob {background: url("../images/macob.jpg"); width: 300px; height: 90px; margin: 20px 0 12px; box-shadow: 0px 0px 10px rgba(205,28,251,1.0);}
.bg-box {background: url("../images/box.png"); width: 440px; height: 480px; margin: 80px 0 0 0;}
.more {font-weight:800; font-size:24px; margin:-10px 0 0 0; padding: 0; color: #7800ff;}
.linea-top {width: 100%; height: 3px; margin-top: 40px;}
.left-footer {float: left; width: 33%;}
.center-footer {float: left; width: 31%; padding: 30px 0;}
.right-footer {float: right; width: 32%; padding: 30px 0;}
.logo-bottom {float: left; background: url('../images/logo.png') no-repeat; width: 247px; height:55px; text-indent: -9999px; display: block; margin: 50px 0;}
.font-footer {font-size: 14px; color:#999999; line-height: 22px;}
.padding-bottom {padding-bottom: 14px;}
.padding-logo {padding-top: 50px;}

/*REDES SOCIALES*/
.social {margin-top: 10px;}
.social a {color: #2800ff; display: inline-block; padding: 0 20px 0 0;}
.social a:hover {opacity: 0.6}
.social .foo {font-size: 20px;}

#fbsection2 {background: #f4f4f4;}
#fbsection4 {background: #f4f4f4;}
#fbsection5 {background-image: url("../images/bg_camiones.jpg"); background-size:cover; background-repeat: no-repeat; background-position: center center; height: 700px; width: 100%;}
#fbsection7 {background-image: url("../images/bg_contenedor.jpg"); background-size:cover; background-repeat: no-repeat; background-position: center center; height: 700px; width: 100%;}
#fbsection10 {background-image: url("../images/bg_macob.jpg"); background-size:cover; background-repeat: no-repeat; background-position: center center;}

/*------------------------------------------
CONTACTO
------------------------------------------*/
#contact-form {width: 100%; padding:10px 0; margin:0 auto;}
#contact-form input[type="text"],
#contact-form input[type="number"] {border-bottom:1px solid #2800ff; border-top: none; border-left: none; border-right: none; font-size:16px; color:#000; width:100%; line-height: 40px; margin-bottom: 8px; height: 40px; outline:none;}
#contact-form textarea {border-bottom:1px solid #2800ff; border-top: none; border-left: none; border-right: none; font-size:16px; color:#000; width:100%; height:100px; resize:none; line-height: 50px; outline:none;}

#contact-form input[type="submit"] {display: block; margin: 50px auto 0 auto; color:#2800ff; cursor:pointer; border:1px solid #2800ff;; background:#fff; font-size:16px; letter-spacing:1px; padding:10px 25px; border-radius: 25px; font-weight: 700;
-ms-border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-khtml-border-radius: 25px;}
#contact-form input[type="submit"]:hover{opacity: 0.80;outline:none;}

#contact-form .success {
 color:#25242c;
  display: none;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 16px;
  padding: 9px;
  width:100%; text-align:center;
}
#contact-form .error,
#contact-form .empty {
  color: #7800ff; letter-spacing:1px;
  font-size: 11px;
  line-height: 1.27em;
  display: none;
  overflow: hidden;
  margin-bottom: 5px;
  padding: 2px 4px 6px;
  float: left;
}
*::-webkit-input-placeholder {
    color: #9ac3fc;
	font-family: 'Montserrat', sans-serif;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: #9ac3fc;
	font-family: 'Montserrat', sans-serif;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: #9ac3fc;
	font-family: 'Montserrat', sans-serif;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: #9ac3fc;
	font-family: 'Montserrat', sans-serif;
}


/*-------------------------------------------
RETINA DISPLAYS
-------------------------------------------*/	
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.header h1 {background-image: url("../images/retina/logo@2x.png"); background-size: contain;}
.image-home-01 {background-image: url("../images/retina/home-01@2x.jpg"); background-size: contain;}
.image-home-02 {background-image: url("../images/retina/home-02@2x.png"); background-size: contain;}
.titulo-home {background-image: url("../images/retina/titulo-home@2x.png"); background-size: contain;}
.fila01 .imagen {background-image: url("../images/retina/que-hacemos@2x.jpg"); background-size: contain;}
.imagen-innovar {background-image: url("../images/retina/innovar-01@2x.jpg"); background-size: contain;}
.adn {background-image: url("../images/retina/adn@2x.jpg"); background-size: contain;}
.circular-001 {background-image: url("../images/retina/icon-001@2x.jpg"); background-size: contain;}
.circular-002 {background-image: url("../images/retina/icon-003@2x.jpg"); background-size: contain;}
.circular-003 {background-image: url("../images/retina/icon-002@2x.jpg"); background-size: contain;}
.arte {background-image: url("../images/retina/arte@2x.png"); background-size: contain;}
.titulo-seguridad {background-image: url("../images/retina/360@2x.jpg"); background-size: contain;}
.imagen-seguridad {background-image: url("../images/retina/seguridad@2x.jpg"); background-size: contain;}
.fila01 ul li {background-image: url("../images/retina/punto@2x.jpg"); background-size: 11px 11px;}
.titulo-izq-container {background-image: url("../images/retina/text-container@2x.png"); background-size: contain;}
.logo-der-container {background-image: url("../images/retina/logo-light@2x.png"); background-size: contain;}
.bg-tecnologica {background-image: url("../images/retina/tecnologica@2x.jpg"); background-size: contain;}
.logo1 {background-image:url('../images/retina/01@2x.png'); background-size: 119px 45px;}
.logo2 {background-image:url('../images/retina/02@2x.png'); background-size: 119px 45px;}
.logo3 {background-image:url('../images/retina/03@2x.png'); background-size: 119px 45px;}
.logo4 {background-image:url('../images/retina/04@2x.png'); background-size: 119px 45px;}
.logo5 {background-image:url('../images/retina/05@2x.png'); background-size: 119px 45px;}
.logo6 {background-image:url('../images/retina/06@2x.png'); background-size: 119px 45px;}
.logo-cj {background-image: url("../images/retina/cj-logo@2x.jpg"); background-size: contain;}
.logo-macob {background-image: url("../images/retina/macob@2x.jpg"); background-size: contain;}
.bg-box {background-image: url("../images/retina/box@2x.png"); background-size: contain;}
.logo-bottom {background-image: url("../images/retina/logo@2x.png"); background-size: contain;}
}