/* Elementos Propios de la Pagina 
   vertinvertical.com
==================================================== */

.inter-container *{color:#333;}
.inter-container a img{width:70px;max-width:100%}
.twobars-sided-left h2 span, .twobars-sided-right h2 span{position:relative;top:-17px;}
.inter-container a.boton-ver-mas{float:right;margin:30px;}
.twobars-sided-left h2, .twobars-sided-right h2{text-align:left;font-size:40px;text-indent:22px;}
.inter-container p{text-align:left;font-size:18px;}
.inter-container ul{text-align:left;list-style-type:disc;}
.inter-container li{margin:4px 0 3px 40px;font-size:16px;font-weight:bold;}
.bxslider{margin:60px auto;}
.likeUs li.like{display:none;}
/*article:first-of-type{margin-top:115px;}*/


div.cont-links-redes{
    position:absolute;top:20px;right:-66px;width:54px;overflow:hidden;height:50px;
}
@media only screen and (max-width: 1090px){
    nav#menu a {
        padding: 8px 8px;
        font-size: 9px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 969px){
    #nav-wrap {
        width: 60%;
    }
}
@media only screen and (max-width: 767px){
    div.cont-links-redes{right:60px;}
}

div.cont-links-redes:hover{background:transparent}
div.cont-links-redes a{padding:0;}

@media only screen and (max-width:767px){ 
    .columnas h3{font-size:15px;}
}
@media only screen and (max-width:610px){    
    .twobars-sided-left h2, .twobars-sided-right h2{font-size:30px;text-indent:0;font-weight:bold}
    .twobars-sided-left h2 span, .twobars-sided-right h2 span{top:-10px;}
    .twobars-sided-left a img, .twobars-sided-right a img{width:40px;left:0;}
}
@media only screen and (max-width:480px){    
    .twobars-sided-left h2 a, .twobars-sided-right h2 a{font-size:22px;}
    .inter-container p{font-size:15px;}
    .inter-container a.boton-ver-mas{margin:30px 6% 0 5%;width:77%;}
}

#Productos img{
    -webkit-transition:all 200ms;padding:4px 12px;text-shadow:none;-moz-transition:all 200ms;
    background:rgba(255,255,255,0.4);-o-transition:all 200ms;cursor:pointer;transition:all 200ms;
}
#Productos img:hover, #espacios-vivos img:hover{
    opacity:0.8;filter:Alpha(Opacity=80);    
}
.boton-ver-mas{
    border:2px solid #555;color:#555;font-weight:700;-webkit-transition:all 100ms;padding:8px 12px;
    text-shadow:none;-moz-transition:all 100ms;background:rgba(255,255,255,0.4);-o-transition:all 100ms;
    cursor:pointer;transition:all 100ms;-webkit-border-radius:12px; -moz-border-radius:12px;border-radius:12px;
}
.boton-ver-mas:hover{background:#555;color:#fff !important;border-color:#555;}
@media only screen and (max-width:1080px){       
    .boton-ver-mas{font-size:12px;padding:4px;}
}
@media only screen and (max-width:960px){
    .boton-ver-mas{font-size:12px;padding:4px;}
}

/*** Simulador Jardin Vertical ***/
#medidas-jv input{padding:5px 0;text-indent:5%;height:17px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
    color:#666;background-color:#fff;width:26%;float:left;clear:none;margin:0 3%;}
#medidas-jv input#calcularJV{background:transparent;font-weight:700;
    padding:13px 0;border:1px solid #ccc;line-height:0;                          
    -webkit-transition:all 200ms;-moz-transition:all 200ms;-o-transition:all 200ms;transition:all 200ms;
}
#pasos-jv input#calcularJV:hover{text-indent:-5%;background:rgba(0,0,0,0.2);border-color:rgba(0,0,0,0.2);}
#pasos-jv p{text-align:center;width:80%;margin:30px auto 0 auto;}
.cont-jv{width:90%;margin:55px 5% 0 5%;float:left;}
#medidas-jv{width:100%;float:left;}
#plano-jv img{width:44%;float:left;margin:0 3%;}
#plano_instal{border:3px solid black;margin:0 0 0 20px;overflow:visible;}
#plano_siembra, #plano_render{border:3px solid black;margin:0 0 0 60px;overflow:hidden;}
.rect_kang {
    fill: white;
    stroke: black;
    stroke-width: 1;
}
.tag{
    color:darkcyan;
    font-family:"Arial", sans-serif; 
    font-weight:bold;
    font-size:20px;width:100px;position:relative;
}
.ancho{top:-35px;}
.alto{
    left:-40px;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
}
.tabla{
    width:50%;
    font-family: arial,helvetica;
    font-size: 14pt;
    cursor: default;
    margin:40px auto 30px auto;
    background: white;
    border-spacing: 0;
    border-collapse: separate;
    border-color: gray;
}
.tabla table{width:100%;}
.tabla th{
    font-weight: bold;
    text-align: center;
    margin: 0;
    vertical-align: middle;
    padding:0 3%;
    background: linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(249,250,253,1) 30%,rgba(238,242,247,1) 60%,rgba(228,233,244,1) 100%);
}
.tabla td{
    border: 1px solid #eee;
    padding:2%;
    text-align:center;
}
.center{
    text-align:center;
}
.srg_tee{
    stroke:rgb(255,0,0);stroke-width:5;
    position:relative;z-index:9999;
}
.srg_acop{
    stroke:rgb(255,0,0);stroke-width:3;
    position:relative;z-index:9999;
    fill:none;
}
.srg_mang {
    stroke: rgb(0,0,255);
    stroke-width: 3;
    position: relative;
    z-index: 999;
}
#pasos-jv #form-cont-2 {top:0;margin:30px 20% 0 20%;height:auto;width:60%;}
#pasos-jv #form-cont-2 input, #pasos-jv #form-cont-2 textArea{border:1px solid black;}
#pasos-jv #form-cont-2 textArea{height:112px;text-indent:0;overflow-y:hidden;}
#pasos-jv #form-cont-2 .boton-ver-mas{border:2px solid #aebc22;color:#aebc22;font-weight:700;
-webkit-transition:all 100ms;padding:4px 12px;text-shadow:none;}
#pasos-jv #form-cont-2 .boton-ver-mas:hover{background:#aebc22;color:#fff !important;border-color:#aebc22;padding:4px 18px;}

#pasos-jv input[type='radio']{margin:0 0 0 10%;float:left;}
#radios-srg{display:none;}
.Paisajismo .slider-veil{display:block;}
#texto-paisajismo{top:-400px;}


#ilustracion {
    height:400px;margin:0 auto;width:81%;position:relative;left:-50px;
}
#instructivo-jv{float:left;width:85%;}
.ol-propiedades{width:90%;margin:0 5%;text-align:left;list-style-type:square;}
.lista_jardin{background:url("../tilde.png") top left no-repeat;
    padding: 4px 0 0 20px;width:270px;font-size:20px;
    margin: 0px 0 10px;text-align:center;
}
select{
    font-family: 'swisse';
    width:100%;padding:14px 0;cursor:pointer;
    background:transparent;
    font-weight:bold;color:#fff;font-size:19px;border:none;
}
select option{color:#000;}

#espacios-vivos h3{font-size:25px;font-weight:600;}

#techos-verdes .p60 img{margin-top:5%;width:75%;}

/* Colores de cada seccion */
.Techos-Verdes #form-cont form{background:rgba(163,68,22,0.8);}
.Techos-Verdes nav#menu ul li.active{background:#A34416;}
.Paisajismo #form-cont form{background:rgba(101,126,65,0.8);}
.Paisajismo nav#menu ul li.active{background:#657E41;}
.Mantenimiento #form-cont form{background:rgba(129,148,172,0.8);}
.Consultoria #form-cont form{background:rgba(242,160,0,0.8);}
.Hazlo-Tu-Mismo #form-cont form{background:rgba(220,86,68,0.8);}

#ilustracion img{position:relative;left:330px;top:60px;width:300px;}
#ilustracion .lista_jardin{position:relative;}
#lj1{top:-250px;left:60px;}
#lj2{left:270px;top:-10px;}
#lj3{left:30px;top:-245px;}
#lj4{left:550px;top:-220px;}
#lj5{left:615px;top:-425px;}
#lj6{left:550px;top:-590px;}


/*Compra Exitosa*/
.precioTienda{margin:40% 0 25% 0;}
.compra-landing{max-height:500px;overflow:hidden;}
.Compra-Exitosa .divs_slider div.active div.html-caption{left:15%;top:6%;text-align:left;max-height:1000px;}
.Compra-Exitosa h1{text-align:left;font-size:42px;line-height:42px;}
.Compra-Exitosa .divs_slider div.active div.slider-veil{background:linear-gradient(to bottom, rgba(0,0,0,0.0),rgba(0,0,0,0.5),rgba(0,0,0,0.5),rgba(0,0,0,0.7),rgba(0,0,0,0.8));display:block;}
.Compra-Exitosa #form-cont{right:0;top:0;height:auto;}
.Compra-Exitosa #form-cont form{width:90%;overflow:hidden;}
.Compra-Exitosa #form-cont form select{padding:0;font-size:15px;width:80%;margin:10px auto}
.Compra-Exitosa #form-cont input{width:48%;margin:5px 1%;float:left;}
.Compra-Exitosa #form-cont p{width:48%;margin:2px 1%;float:left;color:#fff;text-align:left;}
.compra_response p{text-align:left;margin:10px 0;}
.color_matera{float:right;margin:0 5% 0 0;}

/* Media Queries */
@media only screen and (max-width:1200px){
    .separator{height:40px;}        
    .columnas h3{font-size:20px;}
    .Compra-Exitosa .html-caption h1{font-size:36px;line-height:36px;}
}
@media only screen and (max-width:969px){    
    .columnas h3{font-size:18px;}
    #techos-verdes .p60 img{margin-top:15%;width:90%;}
    #ilustracion{left:-160px;}
    .Compra-Exitosa .html-caption h1{font-size:28px;line-height:28px;}
}
@media only screen and (max-width:767px){
    #medidas-jv input{text-align:center;text-indent:0;font-size:13px;width:30%;margin:0 1%;}
    .srg_mang {stroke-width:2;}
    .tabla{width:90%;}
    #pasos-jv p{margin:10px 5% 20px 5%;width:90%;}
    #texto-paisajismo{top:-420px;}
    #texto-paisajismo.text-over-slider-left p{font-size:10px;}
    #texto-paisajismo.text-over-slider-left h2{font-size:17px;line-height:8px;}
    #Productos img{width:60%;}
    .separator{height:30px;}
    .twobars-sided .p40, .twobars-sided .p60{width:50%;margin:0;} 
    #espacios-vivos h3{font-size:22px;}
    .columnas h3{font-size:15px;}
    #techos-verdes .p60 img{margin-top:25%;}     
    #ilustracion{width:90%;margin:0 auto;left:0;text-align:center;height:auto;}
    #ilustracion img{width:50%;left:0;top:0;}
    #lj1,#lj2,#lj3,#lj4,#lj5,#lj6{top:0;left:0;}
    #ilustracion .lista_jardin{text-align:center;margin:7px auto;width:90%;padding:0;}
    .Compra-Exitosa h1{font-size:30px;}
    .Compra-Exitosa p{font-size:16px;}
    .Compra-Exitosa #form-cont{margin:10% 4%;}
}
@media only screen and (max-width:610px){
    .separator{height:20px;}
    .twobars-sided .p40, .twobars-sided .p60{width:100%;margin:0;} 
    .twobars-sided h2{font-size:30px;text-indent:0;font-weight:bold}
    .twobars-sided h2 span{top:-10px;}
    .twobars-sided a img{width:40px;left:0;}
    #espacios-vivos.twobars-sided a img{width:90px;}
    #techos-verdes .p60 img{margin-top:0%;}
    
    /* Colores de los formularios de contacto */
    .Techos-Verdes #form-cont form{background:transparent;}
    .Techos-Verdes .slider-form{background:rgba(163,68,22,0.8);}
    .Paisajismo #form-cont form{background:transparent;}
    .Paisajismo .slider-form{background:rgba(101,126,65,0.8);}
    .Mantenimiento #form-cont form{background:transparent;}
    .Mantenimiento .slider-form{background:rgba(129,148,172,0.8);}
    .Consultoria #form-cont form{background:transparent;}
    .Consultoria .slider-form.orange{background:rgba(242,160,0,0.8);}
    .Consultoria .slider-form{background:white;}
    .Hazlo-Tu-Mismo #form-cont form{background:transparent;}
    .Hazlo-Tu-Mismo .slider-form{background:rgba(220,86,68,0.8);}
    
    .precioTienda{margin:0 0 5% 0 !important;}
    .Compra-Exitosa #form-cont form{background:rgba(175,188,34,0.6);}
    .Compra-Exitosa #form-cont, .Compra-Exitosa #form-cont form{margin:0 auto;}
    .Compra-Exitosa #form-cont input{clear:none;}
    .Compra-Exitosa #form-cont input#enviarCont{top:0;padding:15px;}
}
@media only screen and (max-width:580px){
    #Productos img{width:30%;margin:35px 0 0 0;min-width:110px;}
    .columnas h3{font-size:22px;}
}
@media only screen and (max-width:530px){
    #plano-jv img{width:90%;margin:10px 5%;}
    #instructivo-jv{width:100%;}
    #texto-paisajismo{top:-300px;background:rgba(0,0,0,0.5);padding:10px 10px 70px 10px;width:94%;overflow:hidden;}
    
}
@media only screen and (max-width:480px){
    #pasos-jv #form-cont-2{width:100%;margin:0;}
    .twobars-sided h2 a{font-size:22px;}    
    .twobars-sided a img{width:40px;left:0;}
    .twobars-sided p{font-size:15px;}
    .twobars-sided a.boton-ver-mas{margin:30px 6% 0 5%;width:77%;}
    #espacios-vivos h3:first-of-type{line-height:30px;}
    #ilustracion img{width:70%;}    
}
@media only screen and (max-width:380px){
    .srg_mang {stroke-width:1;}
    .tabla th{font-size:13px;}
    .tabla td{font-size:12px;}
    .tag{font-size:17px;}
    .Paisajismo .slider-form .viewport, .Paisajismo .slider-form .queue {min-height:190px;}
    .Paisajismo .slider-form {background: rgba(0,0,0,0.8);}
    .Paisajismo .slider-form.texto-paisajismo .viewport, .Paisajismo .slider-form.texto-paisajismo .queue {min-height:520px;}
    #texto-paisajismo{top:-320px;min-height:240px;}
    .Consultoria .slider-form .viewport, .slider-form .queue{min-height:330px;}
    .Paisajismo slider-form.texto-paisajismo .slider-veil{display:none;}
    .Paisajismo .slider-form.texto-paisajismo .image-cont{width:170%;top:-210px;left:-120px;}
    .Paisajismo .tabs_nav{display:none;}
    .Paisajismo .tabs{padding-bottom:10px;}
}
@media only screen and (max-width:370px){
    .Compra-Exitosa #form-cont form{padding:10px 0;}
    .Compra-Exitosa #form-cont input#enviarCont{margin:10px 10%;width:80%;}
    .Compra-Exitosa #form-cont form select{margin: 5px auto;font-size:14px;}
    .Compra-Exitosa #form-cont input{width:90%;margin:5px 5%;}
    .Compra-Exitosa #form-cont p, .Compra-Exitosa #form-cont form select{width:90%;margin:2px 5%;}
}