/*
Theme Name: Basani 2015 - Alquiler de Módulos y Sanitarios Portátiles para Obras y Eventos
Author: QKStudio
Author URI: http://qkstudio.com/
*/


/*-----------------------------------*/
/*************** RESET ***************/
/*-----------------------------------*/
*{ outline:none;}
h1,h2,h3,h4,h5,h6{ margin:0; padding:0; font-weight:normal;}
a img{ border:none;}
ul, figure{ margin:0; padding:0;}
ul li{list-style-position:inside }

::selection {background: #c01823;color: #fff;}
::-moz-selection {background: #c01823;color: #fff;}
:focus {text-decoration: none;}
.sprites { background-image: url('images/sprites.png') !important; background-repeat: no-repeat; background-color: transparent;}


/*-----------------------------------*/
/************** GENERAL **************/
/*-----------------------------------*/
body {margin:0;padding:0;font-family: 'Titillium Web', sans-serif;color:#232323; overflow-x: hidden;}
p {font-size: 14px;line-height: 19px;color: #333;}
.button {margin-top: 5px; display: inline-block; text-decoration: none; padding: 3px 0 3px 15px; font-size: 17px; font-weight: 600; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear;}
.button:hover,
.button:focus {background: #232323; color: #fff; padding: 3px 12px 3px 15px; text-decoration:none;}
.button i {top: -1px; margin-left: 5px; position: relative;}
.white {background: #fff; color: #121111;}
.black {background: #121111; color: #fff;}
.red {background: #c01823; color: #fff;}
.black:hover,
.black:facus {background: #000; color: #fff;}


/*-----------------------------------*/
/*************** HEADER **************/
/*-----------------------------------*/
header {background: #fff; position: relative; z-index: 99; box-shadow: 0 2px 15px rgba(0,0,0,0.2); min-height: 90px;}

header div div div .logo {margin: 0; padding: 20px 0 0 0;text-align: center; display:block; float:left; width:100%;}
header div div div .logo img {width: 85%; float:left;}

header div div .iso {display: block; float: right; margin: 14px 0 0 0;}

header div div .topInfo h2 {font-size: 18px;color: #8e8e8e; text-transform: none; font-weight: normal; font-family: 'Titillium Web', sans-serif; float: left; margin: 35px 0 0 120px; padding: 0 10px 0 0;}
header div div .topInfo h2 strong {color: #C01823; font-family: 'Titillium Web', sans-serif; padding: 0 0 0 10px;}

/*-----------------------------------*/
/************* SLIDESHOW *************/
/*-----------------------------------*/
.wr-slider {width:100%;overflow:hidden;position:relative;height:570px}
.slider div.slide {position: relative;float:left;}
.slider div.inner {width: 1125px; position: absolute;top: 0; left: 46%; margin: 0 0 0 -515px;}
.slider .texto.txt01 {width: 70%; float: left;color: #fff; font-size: 48px; margin: 55px 0 15px 0; line-height: 48px; text-align: center;}
.slider .texto.txt02 {width: 70%;float: left; color: #fff; font-size: 48px; margin: 200px 0 15px 0; line-height: 48px; text-align: center;}
.slider .texto.txt01 p,
.slider .texto.txt02 p {color: #fff;}
.slider .texto span {background: url(css/images/bg-black.png);  padding: 6px 10px;  line-height: 86px;}
.slider .texto strong {font-family: 'Titillium Web', san-serif;}
.slider .img {width: 660px;text-align: center;}
.wr-slider .buttons a {width: 35px;height: 35px;position: absolute;top: 250px;text-indent: -9999px;background: url(css/images/flechas.png);z-index: 9999;-webkit-transition: 0.2s all ease-in-out;-moz-transition: 0.2s all ease-in-out;-o-transition: 0.2s all ease-in-out;-ms-transition: 0.2s all ease-in-out;}
.wr-slider .buttons a:hover {top: 245px}
.wr-slider .buttons a.prev-main{background-position: top left;left:0;}
.wr-slider .buttons a.next-main{background-position: top right;right: 0;}


/*-----------------------------------*/
/************* COTIZADOR *************/
/*-----------------------------------*/
.cotizar {position: absolute; top: 110px; right: 16%;z-index: 1000;}
.cotizar form {width: 359px;  height: 542px; background: url(css/images/bg-form.png) no-repeat; padding: 20px 35px;}
.cotizar form h2 {color: #C01823 ;font-size: 23px;font-family: 'Titillium Web', sans-serif;text-transform: none;margin: 5px 0 20px -10px}
.cotizar label {font-size: 14px;color: #727272;display: block;}
.cotizar input, 
.cotizar textarea, 
.cotizar select {background: #f3f3f3;border:1px solid #dfdfdf;color: #C01823 ;font-family: 'Titillium Web', sans-serif;font-size: 14px;width: 280px;margin: 5px 0 10px 0;padding: 5px 5px}
.cotizar textarea {resize:none;height: 52px}
.cotizar button {background: #C01823 ;border: none;border-bottom: 4px solid #9c000a;border-radius: 2px;width: 100%;padding: 20px 0;	text-transform: uppercase;color: #fff;font-family: 'Titillium Web', sans-serif;font-size: 14px;letter-spacing: 2px;margin: 4px 0 0 0;cursor: pointer;font-weight: 700;-webkit-transition: 0.2s all ease-in-out;-moz-transition: 0.2s all ease-in-out;-o-transition: 0.2s all ease-in-out;-ms-transition: 0.2s all ease-in-out;}
.cotizar button:hover {margin: 0}
.cotizar .gracias {width: 293px;height: 542px;background:url(css/images/bg-form.png) no-repeat;position: absolute;top: 20px;right: 0;z-index: 1000;padding: 20px 35px;display:none;}
.cotizar .gracias h2 {font-size: 23px;line-height:28px;font-family: 'Titillium Web', sans-serif;text-transform: none;margin: 5px 0 20px -10px;font-weight:normal;margin-top:100px;}
.cotizar .gracias h2 strong {font-weight:700;color: #C01823;}


/*-----------------------------------*/
/************* SERVICIOS *************/
/*-----------------------------------*/
#home-content > div > div:nth-child(1) > h2 {margin: 40px 0 50px 0px; text-align: center; font-family: 'Titillium Web'; font-weight: normal; font-size: 24px; text-transform: none;}
#home-content > div > div:nth-child(1) > h2 strong { font-family: 'Titillium Web'; font-weight: 700;}
.boxService{color: #9d9d9d;font-size: 14px;line-height: 25px;float: left;text-align: center;}
.boxService p{line-height: 22px;margin: 25px;color: #696969;font-size: 16px;}
.boxService h4{color: #727272;font-size: 18px;font-family: 'Titillium Web', sans-serif; font-weight: 700;text-transform: uppercase;}
.boxService ul li{background: url(images/check.png) no-repeat 0 7px;margin: 0 0 0 35px;padding: 0 0 0 25px;text-align: left;list-style: none;}
.boxService span{width: 130px;height: 134px;display: block;margin: 0 auto 25px auto;-webkit-transition: 0.2s all ease-in-out;-moz-transition: 0.2s all ease-in-out;-o-transition: 0.2s all ease-in-out;-ms-transition: 0.2s all ease-in-out;}	
.boxService .sv1{background-position: 0 -242px;}
.boxService .sv2{background-position: -166px -242px;}
.boxService .sv3{background-position: -332px -242px;}
.boxService .sv1:hover{background-position: 0 -246px;}
.boxService .sv2:hover{background-position: -166px -246px;}
.boxService .sv3:hover{background-position: -332px -246px;}
.boxService ul li{margin: 0; font-size: 16px}
.boxService.contacto{border-left: 1px solid #eee;}
.boxService .sv4 {background-position: -318px -486px; height: 90px}
.boxService .sv4:hover {background-position: -318px -490px;}
.boxService li.arg, 
.boxService li.mex {color:#C01823 ; font-family: 'Titillium Web', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; background: none; margin: 0 0 15px 0; padding: 0}
.boxService li.arg span {background-position: 0 -440px; width: 35px; height: 28px; margin: 0 10px 0 0; float: left;}
.boxService li.mex span {background-position: -52px -440px; width: 35px; height: 28px; margin: 0 10px 0 0; float: left;}


/*-----------------------------------*/
/************ HOME-CONTENT ***********/
/*-----------------------------------*/
#home-content {padding-top: 20px; padding-bottom: 10px;}
#home-content div .top-home {margin-bottom:0px;}


/*-----------------------------------*/
/********* SLIDESHOW-SUCURSAL ********/
/*-----------------------------------*/
#slideshowSucursal{clear: both;background: #0F0F0F;height: 600px;position: relative;border-bottom: solid 5px #c01823;top: -113px;overflow: hidden;}
#slideshowSucursal .infoSlide{position: absolute;top: 190px;left: 50%;text-align: center;z-index: 99;width: 80%;margin-left: -40%;}
#slideshowSucursal .infoSlide h1{color: #fff;font-size: 40px;text-shadow: 0 3px 10px rgba(0,0,0,0.7);line-height: 40px;font-weight: 300;text-transform: uppercase;}
#slideshowSucursal .infoSlide h1 span{display: block;font-size: 50px;font-weight: 700;text-transform: uppercase;}
#slideshowSucursal .infoSlide p{color: #fff;font-weight: normal;font-family: 'Lato';font-size: 19px;width: 60%;margin: 20px auto;line-height: 21px;}
#slideshowSucursal .flex-control-nav{position: absolute;width: 100%;z-index: 99;top: 340px;text-align: center;padding: 0;}
#slideshowSucursal .flex-control-nav li{	display: inline-block;}
#slideshowSucursal .flex-control-nav a{cursor: pointer;color: #fff;display: inline-block;background: url(images/pager.png?v=sjdhajsd) 0 0 no-repeat;width: 11px;height: 9px;text-indent: -999999px;margin: 0 2px;}
#slideshowSucursal .flex-control-nav a.flex-active{background: url(images/pager-act.png?v=sjdhajsd) 0 0 no-repeat;}


/*-----------------------------------*/
/************ PODS (FOOTER) **********/
/*-----------------------------------*/
#pods article {display: inline-block;height: 171px;}
#pods div div div article .pad.prodBox {background: url(images/bg-productos.jpg) 0 0 no-repeat;}
#pods div div div article .pad.servBox {background: url(images/bg-servicios.jpg) 0 0 no-repeat;}
#pods div div div article .pad {padding: 10px 35px;}
#pods div div div article .pad p {margin: 0;width: 234px;line-height: 19px;font-size: 15px;font-weight: 300;margin-bottom: 10px;}
#pods div div div article .pad h2 {font-weight: 700;font-size: 34px;}


/*-----------------------------------*/
/********* CLINTES (FOOTER) **********/
/*-----------------------------------*/
.clientes {text-align: center; padding-top: 70px; padding-bottom: 70px; background: #eeeeee;}
.clientes div .logoclientes {position: relative;}
.clientes div div div h2 {font-family: 'Titillium Web'; font-weight: normal;font-size: 24px; text-transform: none; margin: 0 0 40px 0;}
.clientes div div div h2 strong { font-family: 'Titillium Web'; font-weight: 700;}
.clientes div div .logoclientes div div div img {display: inline-block;vertical-align: middle;max-width: 120px;}
.clientes div div .logoclientes div div div {line-height: 42px;}
.clientes div div.row {margin-right: 0; margin-left: 0;}
.clientes div div .logoclientes .flex-direction-nav {position: absolute;width: 97%;top: 15px;}
.clientes div div .logoclientes .flex-direction-nav li {display: inline-block;}
.clientes div div .logoclientes .flex-direction-nav > li {float: left;}
.clientes div div .logoclientes .flex-direction-nav li:last-child {float: right;}
.clientes div div .logoclientes .flex-direction-nav .flex-prev {float: left; left: -15px; background: url(images/prev.png) 0 0 no-repeat; position: relative;}
.clientes div div .logoclientes .flex-direction-nav .flex-next {float: right; right: -15px; background: url(images/next.png) 0 0 no-repeat; position: relative;}
.clientes div div .logoclientes .flex-direction-nav a {text-decoration: none; color: #c01823; width: 11px; height: 17px;}


/*-----------------------------------*/
/************ PRE-FOOTER *************/
/*-----------------------------------*/
#pre-footer {background: #C01823; padding-top: 70px; padding-bottom: 20px;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: bottom center;background-repeat: no-repeat;}
#pre-footer div div div div div {color: #fff;}
#pre-footer div div div div div h2 {font-size: 20px; font-weight: 600; line-height: 20px; margin-bottom: 10px;}
#pre-footer div div div div div p {font-size: 17px;font-weight: 500; margin-bottom: 38px; line-height: 20px; color: #fff;}
#pre-footer div div div div div p a {color: #fff;text-decoration: none;}
#pre-footer div div div div div p a:hover{text-decoration: underline;}
#pre-footer div div div div div figure{text-align: center;}
#pre-footer div div div div div .socialIcons {display: block;clear: both;text-align: center;width: 100%;margin-top: 30px;}
#pre-footer div div div div div .socialIcons a{margin: 0 2px;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
#pre-footer div div div div div .socialIcons a:hover{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: gray;-webkit-filter: grayscale(100%);}
.iso-2 {display: block; padding: 7px; margin:0;}



/*-----------------------------------*/
/************ RESPONSIVE *************/
/*-----------------------------------*/

@media(max-width:1400px){
	
	/* COTIZADOR */
	.cotizar {right: 8%;}

}

@media(max-width:1280px){
	
	/* COTIZADOR */
	.cotizar {right: 4%;}

}


@media(max-width:1200px){
	
	
}

@media(max-width:1024px) and (min-width:890px){
    .cotizar form{
      width: 75% !important;
      margin-left: auto;
      margin-right: auto;
    }
}

@media(max-width:890px) and (min-width:768px){
    .cotizar form{
      width: 90% !important;
      margin-left: auto;
      margin-right: auto;
    }
}

@media(max-width:1024px){
    .servicios{
      width: 100%;
    }
	
	/* HEADER */
	header div div div .logo {width: 90%; padding: 15px 0 0 0;}
	header div div div .logo img {width: 100%;}
	header div div .topInfo h2 {float: none; margin: 35px 0 0 0; padding: 0;text-align: center;}
	
	/* SLIDESHOW */
	.wr-slider {width: 100%; overflow: hidden; position: relative; height: 410px;}
	.slider div.slide {position: relative; float: left; width: 100%; height: 410px;}
	.slider div.inner {width: 100% !important; margin: 0 !important; left: 0 !important; height: 100%;}
	body > section.wr-slider > div.caroufredsel_wrapper > div > div > img {width: 36% !important; height: auto !important;  margin-left: -174px; z-index: 1;}
	.slider .texto span {line-height: 43px;}
	.slider .texto.txt01 {width: 20%; float: left; color: #fff; font-size: 38px; margin: 35px 0 15px 0; line-height: 48px; text-align: center;}
	.slider .texto.txt02 {width: 20%; float: left; color: #fff;font-size: 48px; margin: 128px 0 15px 0;line-height: 48px; text-align: center;}
	.wr-slider .buttons a {top: 177px;}
	.wr-slider .buttons a:hover{top: 182px}
	.wr-slider .buttons a.prev-main {left: 15px;}
	.wr-slider .buttons a.next-main {right: 15px;}
	
	/* COTIZADOR */
	.cotizar {position: relative;margin: 30px auto;right: 0 !important;z-index: 1000;width: 60%;top: 0;float: none;}
	.cotizar form {width: 100%;height: 670px;background: url(css/images/bg-form.png) no-repeat top center;padding: 20px 40px;background-size: 100% auto;}
	.cotizar form h2 {margin: 20px 0 20px 0;}
	.cotizar input, .cotizar textarea, .cotizar select {width: 100%;}	
	.cotizar select {width: 100%;}
	.cotizar textarea {height: 95px;}
	.boxService.contacto {border-left: 1px solid #eee;width: 100%;}
	.boxService.contacto > ul {width: 50%; margin: 0 auto 50px auto;}
	
	/* CLIENTES */
	.cliHome .clientes { background: #000;}
	.cliHome .clientes div .logoclientes .flex-direction-nav {width: 96%;}
	.clientes div .logoclientes img {max-width: 80px;}	
	.clientes div div .logoclientes div div div,
	.clientes > div > div > div.col-lg-12.col-md-12.col-ms-12.logoclientes > div > div > div {width: 130px !important;}

	/* PRE-FOOTER */
	#pre-footer {padding-top: 40px; padding-bottom: 10px;}
	#pre-footer div div div div div h3 {font-size: 23px; margin-bottom: 30px; line-height: 25px;}

}


@media(max-width:768px){	
	/* HEADER */
    header div div div .logo{
      width: 100%;
    }
    header div div div .logo img {
      max-width: 315px;
      float: none;
    }
	header div div .topInfo h2 { float: right; margin: 24px 0 0 0; padding-bottom: 20px; text-align: center;font-size: 20px; float: none;}
	header div div .topInfo h2 strong {color: #C01823;font-family: 'Titillium Web', sans-serif;padding: 0 0 0 0;clear: both;display: inherit;text-align: center; float: none;}
	
	/* SLIDESHOW */
	.wr-slider {width: 100%; overflow: hidden; position: relative; height: 410px;}
	.slider div.slide {position: relative; float: left; width: 100%; height: 410px;}
	.slider div.inner {width: 100% !important; margin: 0 !important; left: 0 !important; height: 100%;}
	body > section.wr-slider > div.caroufredsel_wrapper > div > div > img {width: 36% !important; height: auto !important;  margin-left: -174px; z-index: 1;}
	.slider .texto span {line-height: 50px;}
	.slider .texto.txt01 {width: 20%; float: left; color: #fff; font-size: 38px; margin: 35px 0 15px 0; line-height: 48px; text-align: center;}
	.slider .texto.txt02 {width: 20%; float: left; color: #fff;font-size: 48px; margin: 128px 0 15px 0;line-height: 48px; text-align: center;}
	.wr-slider .buttons a {top: 177px;}
	.wr-slider .buttons a:hover{top: 182px}
	.wr-slider .buttons a.prev-main {left: 15px;}
	.wr-slider .buttons a.next-main {right: 15px;}
	
	/* COTIZADOR */
	.cotizar {position: relative;margin: 30px auto;right: 0 !important;z-index: 1000;width: 60%;top: 0;float: none;}
	.cotizar form {width: 100%;height: 670px;background: url(css/images/bg-form.png) no-repeat top center;padding: 20px 40px;background-size: 100% auto;}
	.cotizar form h2 {margin: 20px 0 20px 0;}
	.cotizar input, .cotizar textarea, .cotizar select {width: 100%;}	
	.cotizar select {width: 100%;}
	.cotizar textarea {height: 95px;}
	.boxService.contacto {border-left: 1px solid #eee;width: 100%;}
	.boxService.contacto > ul {width: 50%; margin: 0 auto 50px auto;}
	
	/* CLIENTES */
	.cliHome .clientes { background: #000;}
	.cliHome .clientes div .logoclientes .flex-direction-nav {width: 96%;}
	.clientes div .logoclientes img {max-width: 80px;}	
	.clientes div div .logoclientes div div div,
	.clientes > div > div > div.col-lg-12.col-md-12.col-ms-12.logoclientes > div > div > div {width: 130px !important;}
	
	/* PRE-FOOTER */
	#pre-footer {padding-top: 50px; padding-bottom: 20px;}	
	#pre-footer div div div div div h2, 
	#pre-footer div div div div div h3, 
	#pre-footer div div div div div p {text-align: center !important;}
	#pre-footer div div div div div h2 {font-size: 18px; line-height: 18px; margin-bottom: 5px;}
	#pre-footer div div div div div h3 {font-size: 20px; margin-bottom: 20px; line-height: 25px;}
	#pre-footer div div div div div p {font-size: 20px; line-height: 20px; margin: 0 0 30px 0;}
	.iso-2 {display: block; padding: 7px; float: none; margin: 10px auto;}
	.isodiv{text-align:center; margin-bottom:30px;}

}


@media(max-width:640px){
	
	/* HEADER */
	header div div div .logo {width: 40%; float: none; margin: 0 auto;}
	header div div .topInfo h2 {float: none; margin: 20px auto 30px auto;padding: 0;text-align: center; font-size: 20px; display: table;}
	header div div .topInfo h2 strong {color: #C01823;font-family: 'Titillium Web', sans-serif;padding: 0 0 0 0;clear: both;display: table;text-align: center;}

	/* SLIDESHOW */
	body > section.wr-slider > div.caroufredsel_wrapper > div > div > img { width: 39% !important;}
	.slider .texto.txt01 {font-size: 36px; margin: 25px 0 15px 0;}
	.slider .texto.txt02 {font-size: 42px; margin: 100px 0 15px 0;}
	.wr-slider .buttons a {top: 177px;}
	.wr-slider .buttons a:hover {top: 182px}
	.wr-slider .buttons a.prev-main {left: 15px;}
	.wr-slider .buttons a.next-main {right: 15px;}
	
	/* HOME-CONTENT */
	#home-content {padding-top: 30px; padding-bottom: 30px;}
	
	/* COTIZADOR */
	.cotizar form { height: 570px; margin-bottom: 50px; background-size: 100% 100%;}
	.cotizar textarea { height: 60px;}
	
	/* CLIENTES */
	.clientes div div .logoclientes .flex-direction-nav {position: absolute;width: 95%;top: 15px;}
	
	/* PRE-FOOTER */
	#pre-footer {padding-top: 30px; padding-bottom: 30px;}
	#pre-footer div div div div div h2,
	#pre-footer div div div div div h3,
	#pre-footer div div div div div p,
	#pre-footer div div div div div .socialIcons {text-align:center;}
	.iso-2 {display: block; padding: 7px; float: none; margin: 0 auto 30px auto;}

}


@media(max-width:490px){
	
	/* SLIDESHOW */
	body > section.wr-slider > div.caroufredsel_wrapper > div > div > img {width: 39% !important; margin-left: -137px;}
	.slider .img {width: 53%;text-align: center;float: none;margin: 0 auto;}
	.slider .texto.txt01 {font-size: 24px; margin: 78px 0 15px 0;}
	.slider .texto.txt02 {font-size: 26px; margin: 121px 0 15px 0;}
	
	/* COTIZADOR */
	.cotizar {width: 80%;     margin-top: 0;}
	
	/* SERVICIOS */
	#home-content > div > div:nth-child(1) > h2 {margin: 0 0 50px 0px;}
	
	/* PRE-FOOTER */
	#pre-footer div div div div div h2 {font-size: 16px; line-height: 16px; margin-bottom: 5px;}
	#pre-footer div div div div div h3 {font-size: 18px; margin-bottom: 18px; line-height: 18px;}
	#pre-footer div div div div div p {font-size: 17px; line-height: 18px; margin: 0 0 23px 0;}

}


@media(max-width:360px){
	
	/* HEADER */
	header div div .topInfo h2 {font-size: 16px;}
	
	/* SLIDESHOW */
	.wr-slider {height: 305px;}
	body > section.wr-slider > div.caroufredsel_wrapper > div > div > img {width: 39% !important; margin-left: -99px !important;}
	.slider .texto.txt01 {font-size: 24px; margin: 78px 0 15px 0;}
	.slider .texto.txt02 {font-size: 26px; margin: 121px 0 15px 0;}
	.wr-slider .buttons a {top: 127px;}
	.wr-slider .buttons a:hover {top: 131px;}
	
	/* COTIZADOR */
	.cotizar {width: 100%;margin: -10px auto 0 auto;}
	.cotizar form {width: 100%;padding: 20px 30px;}
	.cotizar form h2 {margin: 10px 0 20px 0;}
	.cotizar input, 
	.cotizar textarea, 
	.cotizar select {margin: 3px 0;}
	
	/* SERVICIOS */
	#home-content {padding-top: 0; margin-top: -30px;}
	.boxService.contacto > ul {width: 57%;}

}