closetsgonzalez.com.mx Open in urlscan Pro
162.241.105.83  Public Scan

URL: https://closetsgonzalez.com.mx/templates/www/less/main.less
Submission: On November 17 via api from US — Scanned from DE

Form analysis 0 forms found in the DOM

Text Content

@charset "utf-8";
/* CSS Document
* @package http://www.keygraphics.mx by keygraphics.mx
* @version 2017
* @author Keygraphics http://www.keygraphics.mx
***********************************************************************************
    __                                     __    _           
   / /_____  __  ______  _________  ____  / /_  (_)__________   ________________
  / //_/ _ \/ / / / __ `/ ___/ __ `/ __ \/ __ \/ // ___/ ___/  _______________
 / ,< /  __/ /_/ / /_/ / /  / /_/ / /_/ / / / / // /__(__  )  ______________
/_/|_|\___/\__, /\__, /_/   \__,_/ .___/_/ /_/_/ \___/____/  ____________
          /____//____/          /_/    

*********************************************************************
* @copyright Copyright (C) 2007 - 2017 keygraphics, LLC
* @license webmaster@keygraphics.mx
*/

body{ color:@gray; position:relative;}
a{ color:@red;
 &:hover{ color:@red; }
 }

*:hover{ transition:all 0.5s ease-out; }

/*#########################START HADER#########################*/
/*----------top---------------*/
/*----------sub-top---------------*/
/*----------menu--------------*/
#mod-main-navegation{ background:rgba(0,0,0,0.8); color:@white; position:fixed; top:-100%; display:block; width:95%; z-index:999;}
#mod-main-navegation .logo{ width:15%; text-align:left;}
#mod-main-navegation .logo img{ display:block; width:100%;}
#mod-main-navegation .info{ width:70%; text-align:center;}
#mod-main-navegation .menu{ width:15%; text-align:right;}
#mod-main-navegation .menu button{ background:none; border:none; font-size:4rem; color:@orange;transition:all 0.5s ease-out; 
&:hover{ color:@white; cursor:pointer;}
}







/*----------showcase----------*/
#showcase{ }
#showcase .modules-container{ width:100%; position:relative; display:block;}
#mod-main-showcase{ width:100%; height:45vw; overflow:hidden;  position:relative;}

#video{position: relative;background: transparent;}
.ytplayer-container{  position: absolute;  top: 0; z-index: -1;}

#mod-main-showcase .main-curtain{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3)}

[id*=showcase] .main-menu{ display:block; width:100%; position:absolute; top:0; right:0; }
[id*=showcase] .main-menu > ul{ margin:0 auto;}
[id*=showcase] .main-menu > ul li{ float:left; margin:2vw}
[id*=showcase] .main-menu > ul li  > a{ font-family: @custom-b; font-size:2rem; color:@white;}
[id*=showcase] .main-menu > ul li .ico{ display:block; width:100%; height:2px; background:@orange;  transform: scale(0.0); }
[id*=showcase] .main-menu > ul li.active .ico{ display:block; width:100%; height:2px; background:@orange;  transform: scale(1); }

[id*=showcase] .main-menu .nav-child  { position:absolute; background:@orange; overflow:hidden; height:0; width:40vw; z-index:999 }

[id*=showcase] .main-menu .nav-child li { float:left;margin:0.5vw 0; width:50%; text-align:center; }
[id*=showcase] .main-menu .nav-child li a{ font-size:1.2rem; color:@white;}
[id*=showcase] .main-menu .nav-child li.item-112 a{ font-size:1.5rem; color:@white; font-family: @custom-b; font-weight:bold; text-align:center; }
[id*=showcase] .main-menu .nav-child li.item-113 a{ font-size:1.5rem; color:@white; font-family: @custom-b; font-weight:bold; text-align:center; }

[id*=showcase] .main-menu .nav-child li a:hover { color:@red;  }
[id*=showcase] .main-menu .nav-child li:nth-child(odd){ clear:both}
[id*=showcase] .main-menu .nav-child li.item-111{ clear:both}
[id*=showcase] .main-menu .nav-child li.item-125{ clear:both}

#mod-main-showcase .main-title{ position:absolute; bottom:1%; right:1%; width:30vw;}
#mod-main-showcase .main-title img{ width:100%;}



#mod-sections-showcase{ width:100%; height:20vw; overflow:inherit;  position:relative; background:#000;}
#mod-sections-showcase .main-curtain{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3)}
#somos #mod-sections-showcase{ background:url(../../../images/quienes_somos/header.jpg); background-position:center; background-size:cover; padding:5vw 0;}
#hacemos #mod-sections-showcase{ background:url(../../../images/que_hacemos/header.jpg); background-position:center; background-size:cover; padding:5vw 0;}
#productos #mod-sections-showcase{ background:url(../../../images/que_hacemos/productos/header.jpg); background-position:center; background-size:cover; padding:5vw 0;}
#servicios #mod-sections-showcase{ background:url(../../../images/que_hacemos/servicios/header.jpg); background-position:center; background-size:cover; padding:5vw 0;}
#proyectos #mod-sections-showcase{ background:url(../../../images/proyectos/header.jpg); background-position:center; background-size:cover; padding:5vw 0;}
#contacto #mod-sections-showcase{ background:url(../../../images/contacto/header.jpg); background-position:center; background-size:cover; padding:5vw 0;}




/*----------showcase----------*/
 

/*----------feature-----------*/

#mod-features{  background:@orange; color:@white;padding:2vw 0;}
#mod-features .mod-content{width:90%; margin:0 auto;position:relative; }
#mod-features .cell{ width:25%; text-align:center; padding:2vw}
#mod-features h3{ color:@white;}
#mod-features .icono{ display:block; width:10vw; height:10vw; margin:2vw auto; padding:2vw; border:solid 3px @white; border-radius:100%;}
#mod-features .icono i{ font-size:4rem;}


#mod-somos{ background:url(../../../images/sections/bg_somos.jpg); background-position:center; background-size:cover; padding:5vw 0;}
#mod-somos .mod-content{width:90%; margin:0 auto;position:relative; }
#mod-somos .left{ width:50%;}
#mod-somos .center{ width:20%;}
#mod-somos .right{ width:30%;}
#mod-somos { text-align: center;}
#mod-somos .firma{ margin:2vw 0;}
#mod-somos .firma img{ width:30%;}
#mod-somos hr{ width:50%; margin:0 auto; background:@red; height:1px}



#mod-servicios{ background:url(../../../images/sections/bg_servicios.jpg); background-attachment:fixed; background-position:center; background-size:cover; padding:5vw 0;}
#mod-servicios hr{ width:50%; margin:2vw auto; background:@white; height:1px}

#mod-servicios .mod-title{ text-align:center; color:@white;}
#mod-servicios .mod-content{width:90%;  margin:0 auto;position:relative; }
#mod-servicios .left{ width:25%;}
#mod-servicios .center{ width:5%;}
#mod-servicios .right{ width:70%;height:30vw; padding-right:10vw;}
#mod-servicios .title h2{ text-align:center; color:@orange;}
#mod-servicios .intro{ margin:2vw; text-align:justify; color:@white;}
#mod-servicios .readmore{ text-align:center; padding:1vw 0; }
#mod-servicios img{ width:100$; border-radius:20px;}

#mod-servicios .servicios-slick {  }
#mod-servicios .slick-list{}
#mod-servicios .slick-dots{ position:absolute; right:0; top:0;}
#mod-servicios .slick-dots li{ margin:1.5vw 0;}
#mod-servicios .slick-dots button{ display:block; width:2vw; height:2vw; background:@orange; border: solid 2px @white; border-radius:100%; color:@white;
&:hover{ cursor:pointer; background:@red;}
}

#mod-servicios .slick-active button{ background:@red;}

#mod-ages{ background-color:@orange; background-image:url(../../../images/sections/bg_30.png); color:@white; background-position:center; background-size:cover; padding:1vw 0; clear:both;}
#mod-ages .mod-content{width:90%; margin:0 auto;position:relative; }
#mod-ages h2{ font-family:@custom-b; color:@white;}
#mod-ages h4{ font-family:@custom-a; color:@white; font-size:1.5rem;}
#mod-ages .left{ width:70%;}
#mod-ages .center{ width:5%;}
#mod-ages .right{ width:25%; text-align:right;}
#mod-ages .right img{ width:100%;}


#mod-projects{ background:none; padding:5vw 0;}
#mod-projects .mod-title{ text-align:center; color:@red;}
#mod-projects .mod-content{width:90%;  margin:0 auto;position:relative; }

#mod-projects .category-moduleprojects{ width:100%; position:relative; display:table; clear:both;}
#mod-projects .category-moduleprojects .item{ width:25%; float:left; padding:2vw; }
#mod-projects .category-moduleprojects .item-wrapper{ display:block; width:18vw;height:18vw;position:relative;  cursor:pointer;}
#mod-projects .category-moduleprojects .item-curtain { display:block; width:18vw; height:18vw; position:absolute; top:0; left:0; background:@orange-transparent;}
#mod-projects .category-moduleprojects .item-image { display:inline-block; margin:0 auto; width:5vw; height:5vw;position:relative; border-radius:100%; overflow:hidden;}
#mod-projects .category-moduleprojects .item-image img{ width:100%;}
#mod-projects .category-moduleprojects .item-title{ position:relative; font-family:@custom-b; font-size:1rem; color:@white;}
#mod-projects .category-moduleprojects .item-intro{ position:relative; font-family:@custom-a; font-size:0.8rem; color:@white;}
#mod-projects .category-moduleprojects .item-readmore a{ display:inline-block; position:relative; font-family:@custom-b; font-size:0.8rem; color:@red; background:@white; border-radius: 20px; padding:0.5vw 1vw;
&:hover{ background:@red; color:@white; cursor:pointer; }
}


#mod-projects .category-moduleprojects .front, #mod-projects .category-moduleprojects .back
{
  position:absolute; text-align:center; overflow:hidden; width:18vw; height:18vw; background:@black; vertical-align:middle; padding:2vw; border-radius:20px;
}


/*#########################END HEADER#########################*/

/*#########################START MAIN#########################*/
/*----------sideleft----------*/
/*----------maintop-----------*/
/*----------mainbody----------*/
#main-conteainer{ width:80%; margin:0 auto; padding:5vw 0;}

.item-pagesomos .text{ width:60%; vertical-align:top;}
.item-pagesomos .spacer{  width:10%; vertical-align:top;}
.item-pagesomos .image{ width:40%; vertical-align:top;}
.item-pagesomos img{ max-width:100%;}



.item-pagehacemos .left{ width:40%; vertical-align:top;}
.item-pagehacemos .center{  width:10%; vertical-align:top;}
.item-pagehacemos .right{ width:40%; vertical-align:top;}
.item-pagehacemos hr{ width:50%; height:1px; background:@red; margin:1vw 0;}
.item-pagehacemos li { list-style:disc; margin-left:5%; font-size:1rem; color:@gray;}
.item-pagehacemos li a{ list-style:disc; margin-left:5%; font-size:2rem; color:@red;}

#proyectos #main-conteainer{ width:95%; margin:0 auto; position:relative; }
#proyectos .item-pageproyectos{ width:80%; margin:0 auto;  text-align:justify;}
#proyectos .item-pageproyectos img{ display:block; max-width:80%;}




.blogproyectos{ display:table;}
.blogproyectos .span3{ display:table-cell; padding: 1vw; width:25%;}

.blogproyectos .item{ text-align:justify;}
.blogproyectos .item .title{ font-weight:bold; font-size:1.2rem; text-align:center;}
.blogproyectos .item  .image{ width:100% !important; position:relative; border-radius:20px; overflow:hidden;}
.blogproyectos .item  .image .date{ position:absolute; top:2%; right:2%; font-size:0.7rem; .text-shadow; color:@white;}
.blogproyectos .image img{ width:100%; display:block; }

.blogproyectos .readmore .btn{ display:block; width:100%; text-align:center; color:@white; background:@red; padding:0.5vw 1vw;
&:hover{ background:@black;}
}

.pagination { display:table-footer-group; width:100%;}
.pagination .counter { display:inline-block; margin:0 auto;}
.pagination ul{ display:table; margin:5vw auto;}
.pagination li{ display:table-cell; padding:0 0.1vw; }
.pagination li span{ padding:0.5vw 1vw; background:@gray; color:@black;border-radius:10px;}
.pagination li a{ padding:0.5vw 1vw; background:@red; color:@white;border-radius:10px;
&:hover{ background:@black;}
}


#contacto{}
#contacto .item-pagecontacto .left{ width:45%; color:@red; font-size:1.5rem; vertical-align:top;}
#contacto .item-pagecontacto .center{ width:10%}
#contacto .item-pagecontacto .right{ width:45%; vertical-align:top;}
#contacto .item-pagecontacto #map{ width:100%; height:30vw;}


#contacto .item-pagecontacto .top .formlabel{ width:30%; padding:0.5vw 0;}
#contacto .item-pagecontacto .top .formbody{ width:70%; padding:0.5vw 0;}

#contacto .item-pagecontacto .bottom .formlabel{ width:100%; padding:0.5vw 0;}
#contacto .item-pagecontacto .bottom .formbody{ width:100%; padding:0.5vw 0;}

#contacto .item-pagecontacto .formbody input{ width:100%; border-radius:5px; border: solid 1px @gray; font-family:inherit;}
#contacto .item-pagecontacto .formbody textarea{ width:100%; border-radius:5px; border: solid 1px @gray; font-family:inherit;}
#contacto .item-pagecontacto .rsform-submit-button{ background:@orange; padding:0.5vw 1vw; width:auto; border:none !important; color:@white;
&:hover{ background:@red;}
}
#contacto .item-pagecontacto .rsform-error{ background:red; color: @white;}
#contacto .item-pagecontacto .hidden{ display:none !important}
/*home*/
/*user controlls*/
/*----------FABRIK--------*/
/*----------mainbottom--------*/
/*----------sideright---------*/
/*#########################END MAIN###########################*/

/*#########################START FOOTER#######################*/
/*----------bottom------------*/

#mod-contact{   background:url(../../../images/sections/bg_servicios.jpg); background-attachment:fixed; background-position:center; background-size:cover;}
#mod-contact h3{ color:@white;}
#mod-contact .top{width:100%; background:@red-transparent; }
#mod-contact .top .cell{width:90%; margin:0 auto;position:relative; text-align:center; vertical-align:middle; padding:3vw 0; color:@white; font-size:1.5rem; font-family:@custom-b; }
#mod-contact .middle{width:100%; margin:0 auto;position:relative; }
#mod-contact .bottom{width:100%; background:@red-transparent; }
#mod-contact .bottom .cell{width:90%; margin:0 auto;position:relative; text-align:center; vertical-align:middle; padding:3vw 0; color:@white; font-size:1.5rem; font-family:@custom-a; }
#mod-contact .full{ width:100%;}
#mod-contact #map{ display:block; width:100%; height:25vw;}
#mod-contact hr{ background:@white; height:1px; width:70%; margin:0 auto;  }

#mod-sitemap{  background:@orange; padding:5vw; color:@white;}
#mod-sitemap .mod-content{width:90%; margin:0 auto;position:relative; }
#mod-sitemap li{ list-style:disc; margin-left:2vw;}
#mod-sitemap h3{ color:@white;}
#mod-sitemap hr{ background:@white; height:1px; width:70%; margin:1vw 0;  }
#mod-sitemap .productos{ width:20%;}
#mod-sitemap .servicios{ width:20%;}
#mod-sitemap .directorio{ width:30%;}
#mod-sitemap .sociales{ width:30%;}
#mod-sitemap .cell{ vertical-align:top;}

#mod-sitemap .sociales ul{ display:inline-block; margin:0 auto;}
#mod-sitemap .sociales li{ float:left;background:@white; list-style:none; margin:2vw 0.5vw; border-radius:100%;}
#mod-sitemap .sociales li a{ display:block; height:4vw; width:4vw;  padding:1vw; text-align:center; }
#mod-sitemap .sociales li i{ font-size:2vw; }



/*----------footer------------*/
/*----------copyright---------*/

#mod-copyright{  background:@red; padding:0.5vw; color:@white; font-size: 0.8rem;}
#mod-copyright .mod-content{width:100%; margin:0 auto;position:relative; text-align:center; }
#mod-copyright .mod-content a{ color:@orange;}
/*----------debug-------------*/
/*#########################END FOOTER#########################*/

/*#########################START SYSTEM#######################*/

/*#########################END SYSTEM#########################*/