/* Kronos Home - CSS sheet */ /* Responsive sheets */ @import url('mixins.less'); @import url('responsive.less'); @import url('fonts.less'); /* General document */ html { scroll-behavior: smooth !important; } /* Bootstrap overrides */ .btn.disabled, .btn[disabled], fieldset[disabled] .btn { cursor: default; } body, .cc-revoke, .cc-window { font-family: @light-font !important; background: #FFFFFF; //@bg-color; min-width: 320px; font-size: 17px; color: #333333; //@bg-text-color; } p { line-height: 30px; } a { color: @bg-text-color; } a:hover, a:focus, a:active { color: @main-color; text-decoration: none; } .picker--time .picker__list-item--disabled { display: none; } .ios-selection .contact-form.compressed .form-control { margin-bottom: 0; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-top: 0; color: @main-color; } b { font-family: @bold-font; } .form-group { position: relative; } .block { width: 100%; } .btn { border-radius: 50px; text-transform: uppercase; font-size: 9px; letter-spacing: 0.05em; font-family: @bold-font; font-weight: bold; border-color: @main-color; border-width: 1px; background: transparent; padding: 12px 15%; color: @main-color; margin-top: 10px; margin-bottom: 10px; } .btn.block { margin-top: 0; margin-bottom: 0; width: 100%; } .btn:hover, .btn:active, .btn:focus { background: @kronos-color; color: @bg-color; } .btn.more { font-size: 12px; font-family: @bold-font; } .btn.more.disabled { opacity: 0.2; filter: alpha(opacity=20); cursor: none; } .btn.white { border-color: @bg-color; color: @bg-color; } .btn.white:hover, .btn.white:active, .btn.white:focus { background: @bg-color; color: @kronos-color; } .btn.overwhite { background: @bg-color !important; border-color: @bg-color !important; color: @kronos-color !important; } .btn.overwhite:hover, .btn.overwhite:active, .btn.overwhite:focus { background: @kronos-color; color: @bg-color; } .btn.search { padding: 5px 15%; font-family: @bold-font; font-size: 10px; transition: 0.5s; } /* Custom titles */ h2.title { font-family: @black-font; color: @kronos-color; font-size: 50px; padding-bottom: 0px; border-bottom: 0.5px solid @kronos-color; position: relative; font-weight: bold; padding-top: 50px; letter-spacing: -0.05em; } .modal-content h2.title { font-size: 35px; border-bottom: 1px solid white; } h2.title.arrow-center { text-align: center; padding-bottom: 25px; } h2.title:before { font-family: 'Glyphicons Halflings'; font-size: 12px; content: "\e252"; position: absolute; bottom: -14px; } h2.title.arrow-center:before { left: 50%; margin-left: -6px; } h2.title.no-arrow:before { content: ""; } h2.title i { font-family: @light-font; font-style: normal; font-size: 50px; } .contact.contact-phone h2.title { font-size: 28px!important; font-weight: normal!important; font-family: @light-font!important; } h3.title { font-size: 175%; } h3.title.bolder { font-family: 'Conv_GothaProReg'; font-size: 30px; text-transform: uppercase; display: table; margin: auto; } h3.title.bolder.special { padding: 0 40px 10px 40px !important; border-bottom: 0.5px solid #6a3677; font-size: 28px; margin-bottom: 35px; } .projects h3.title.bolder.special { margin-bottom: 0px; } #blog-archive h3.title.bolder.special { padding:0 20px 10px 20px !important; } h4.subtitle { font-size: 12px; color: @main-color; } .slide-box h3.title.bolder { font-family: @bold-font !important; font-weight: bold; text-transform: capitalize; margin-bottom: 20px; } .slide-box h4 { font-family: @bold-font !important; font-weight: bold; text-transform: uppercase; } .slide-box .btn { padding: 20px 40px; } /* Navigation */ .nav>li>a>img { max-width: 15px; } .navbar { margin-bottom: 6px !important; } .navbar-toggle.menu-toggle { margin-right: 0px; margin-top: 0px; padding-top: 0; padding-right: 0; } /*.affix .navbar-toggle.menu-toggle { margin-right:0px; margin-top:10px; padding:0; }*/ .navbar-toggle .icon-bar { border: 1px solid white; } .navbar-toggle.collapsed i { font-size: 20px; color: @bg-color; background: transparent; padding: 15px; margin: -15px 0 -15px 0; } .main-menu { text-transform: uppercase; font-weight: bold; padding-top: 9px !important; padding-bottom: 1px !important; font-size: 12px; } /*.affix .main-menu { padding-top:25px !important; }*/ .main-menu li { padding-left: 10px; padding-right: 10px; max-width: 200px; margin: auto; } .main-menu li>a { color: @bg-color; border-bottom: 2px solid transparent; padding-left: 0; padding-right: 0; margin-bottom: 14px; } .collapse li>a { margin-bottom: 0px; } .collapse .nav>li>a { padding: 15px; } .main-menu li>a:hover, .main-menu li>a:focus, .main-menu li>a:active, .main-menu li.active>a { background-color: transparent; border-bottom-color: @bg-color; color: @bg-color !important; margin-bottom: 14px; } .main-menu li.lang { margin-right: 0px; padding-right: 0; display: inline-block; position: relative; width:95px; } .main-menu li.separator { border-right: 1px solid white; height: 35px; margin-left: 10px; padding-left: 0; margin-right: 15px; margin-top: 8px; } .main-menu li.lang span.ddrop-item.open:before { color: @main-color !important; transform: rotate(-180deg); } /*.main-menu li.lang span.ddrop-item.active:before { font-family: 'Glyphicons Halflings'; transition: 0.5s; font-size: 8px; color: @bg-color; padding-top: 1px; content: "\e252"; float: right; }*/ .main-menu li.social { padding: 0px; } .main-menu li.social>a { border: none; padding: 8px 11px; border: 0.5px solid transparent; border-radius: 100px; margin: 7px; width: 38px; text-align: center; font-size: 18px; } .main-menu li.social>a:hover, .main-menu li.social>a:focus, .main-menu li.social>a:active { background: @bg-color; border-color: @bg-color; border-radius: 100px; } .main-menu li.social>a i { color: @bg-color; } .main-menu li.social>a:hover i, .main-menu li.social>a:focus i, .main-menu li.social>a:active i { color: @main-color; } /* Nav submenu */ #navbar { position: relative; z-index: 12; } .main-menu ul { border: 0.5px solid @bg-color; border-radius: 50px; padding: 5px 10px; height: 40px; overflow: hidden; margin-top: 5px; cursor: pointer; } .main-menu ul li { padding: 5px 10px 5px 5px; list-style: none; } .main-menu ul li span { color: @bg-color; } .subnav { background: @bg-color; } footer .subnav { margin-top: 1px; } /* Affix Nav */ header { padding-top: 30px !important; background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); position: relative; left: 0; right: 0; height: 300px; } .post-template-default header { height: 90px; } #affix { padding: 0; /*0px 70px 0 70px;*/ } /*.affix-top { background: rgba(255, 255, 255, 0.0); }*/ .affix, .affix-aux { background: @main-color; left: 0; right: 0; top: 0; z-index: 99; padding-top: 0 !important; /*padding: 0 70px;*/ height: 65px; } .affix-aux { margin-top:-30px !important; } .affix-aux .logo { margin-top:20px !important; } .affix.affix-aux { margin-top:0px !important; } .fixed-top .projects-search { top:93px; } /* Home gallery */ #site-gallery { background-repeat: no-repeat; background-size: cover; background-position: top; min-height: 320px; position: relative; } #busqueda { z-index: 11; position: absolute; left: 0; top: 0; right: 0; } #site-gallery .menu { position: absolute; top: 0px; left: 0px; right: 0px; z-index: 11; } #site-gallery .swiper-container { background: @bg-text-color; } #site-gallery .swiper-container a { color:@bg-color; text-transform: uppercase; } #site-gallery .swiper-container-horizontal>.swiper-pagination-bullets, #site-gallery .swiper-pagination-custom, #site-gallery .swiper-pagination-fraction { bottom: 30px; } #site-gallery .swiper-pagination-bullet-active, #site-gallery .swiper-pagination-bullet { width: 15px; height: 15px; } /*.logo { margin-top: 25px; width: 200px; margin-left: 60px; }*/ #site-gallery .logo { margin-top: 20px !important; width: 120px !important; } .affix .projects-search { position: fixed !important; } .affix-aux .logo, .affix .logo { padding-top: 0; margin-top: 20px; width: 120px; } .affix .collapse .nav > li > a { padding-bottom:7px; } .affix-aux .lang .ddrop-item.active, .affix .lang .ddrop-item.active { margin-top: 7px; padding: 10px; } .navbar-toggle { margin-top: 9px !important; } #site-gallery h1 { color: @bg-color; font-size: 140px; letter-spacing: -0.07em; margin: 0px 0px 70px 0px; } #site-gallery h1 b { font-family: @bold-font; } /* Site backgrounds */ /*#site-gallery.bg-home { background-image: url('../images/gallery-bg-1.jpg'); }*/ #site-gallery.bg-home .swiper-container { height: 101%; } #site-gallery.bg-home .swiper-container .caption { color: @bg-color; font-weight: bold; position: absolute; font-size: 14px !important; bottom: 40px; right: 35px; border-bottom: 2px solid rgba(255, 255, 255, 0.5); height: 20px } .slide { background-repeat: no-repeat; background-size: cover; background-position: bottom !important; } .sl-0 { background-image: url('../images/puredesign/gallery-bg-7.jpg'); } .sl-1 { background-image: url('../images/gallery-bg-6.jpg'); } .sl-2 { background-image: url('../images/gallery-bg-7.jpg'); } .sl-3 { background-image: url('../images/gallery-bg-1.jpg'); } .hm-1 { background-image: url('../images/home/1-edge.jpg'); } .hm-2 { background-image: url('../images/home/2-eden.jpg'); } .hm-3 { background-image: url('../images/home/3-finca.jpg'); } .hm-4 { background-image: url('../images/home/4-the-collection.jpg'); } .hm-5 { background-image: url('../images/home/5-h2o.jpg'); } .hm-6 { background-image: url('../images/home/6-ikon.jpg'); } .hm-pt-1 { background-image: url('../images/home/palmares.jpg'); } .hm-pt-2 { background-image: url('../images/home/amendoeira.jpg'); } .hm-pt-3 { background-image: url('../images/home/belmar.jpg'); } .hm-pt-4 { background-image: url('../images/home/lisboa.jpg'); } #carousel_video.waterwheel { width: 100%; margin: auto; height: 800px; position: relative; clear: both; overflow: hidden; background: @bg-color; margin-top: 0px; } #carousel_video.waterwheel img { width: 70%; visibility: visible; /* hide images until carousel can handle them */ cursor: pointer; /* otherwise it's not as obvious items can be clicked */ box-shadow: 0px 0px 50px #777777; } #carousel_logos.waterwheel { width: 300px !important; text-align: center; margin: auto; margin-top: -80px; margin-bottom: -30px; } #carousel_logos.waterwheel img { width: 200px; margin: auto; } #site-gallery.bg-projects, #site-gallery.bg-default-proyectos { height: 750px; background-image: url('../images/gallery-bg-2.jpg'); background-position: center; } #site-gallery.bg-madrid { height: 750px; background-image: url('../images/custom-bg/gallery-bg-madrid.jpg'); background-position: center; } #site-gallery.bg-costa-del-sol { height: 750px; background-image: url('../images/custom-bg/gallery-bg-costa-del-sol.jpg'); background-position: center; } #site-gallery.bg-andaluzia, #site-gallery.bg-andalucia { height: 750px; background-image: url('../images/custom-bg/gallery-bg-andalucia.jpg'); background-position: center; } #site-gallery.bg-alicante { height: 750px; background-image: url('../images/custom-bg/gallery-bg-alicante.jpg'); background-position: center; } #site-gallery.bg-catalunha, #site-gallery.bg-cataluna { height: 750px; background-image: url('../images/custom-bg/gallery-bg-cataluna.jpg'); background-position: center; } #site-gallery.bg-portugal { height: 750px; background-image: url('../images/custom-bg/gallery-bg-portugal.jpg'); background-position: center; } #site-gallery.bg-valencia { height: 750px; background-image: url('../images/custom-bg/gallery-bg-valencia.jpg'); background-position: center; } #site-gallery.bg-valladolid { height: 750px; background-image: url('../images/custom-bg/gallery-bg-valladolid.jpg'); background-position: center; } #site-gallery.bg-none { height: 0; min-height: 100px !important; } #menu-menutop { display: none; } .post-template-default .main-container, .category .main-container { margin-top: 0 !important; position: relative; z-index: 8; } #site-gallery.bg-projects-detail { height: 750px; background-image: url('../images/gallery-bg-7.jpg'); } #site-gallery.bg-projects-detail.colmenar { background-position-y: bottom; } #site-gallery.bg-projects-detail.lisboa { background-position-y: bottom; } #site-gallery.bg-projects-detail.mijas { background-position-y: bottom; } #site-gallery.bg-contact { height: 750px; background-image: url('../images/gallery-bg-3.jpg'); } #site-gallery.bg-home { height: 100vh !important; /*background-image: url('../images/gallery-bg-6.jpg');*/ /*margin-bottom: 30px;*/ } #site-gallery.bg-puredesign { height: 750px; background-image: url('../images/puredesign/gallery-bg-4.jpg'); } #site-gallery.bg-notaprensa { height: 750px; background-image: url('../images/gallery-bg-5.jpg'); } #site-gallery.bg-legal { height: 750px; background-image: url('../images/gallery-bg-8.jpg'); } /* Home search */ #search { border-radius: 50px; background: @bg-color; width: 100%; float: left; padding: 20px 0; position: relative; z-index: 2; box-shadow: 0px 20px 50px #777; } #search label { font-family: @bold-font; font-size: 12px; padding: 0; text-transform: uppercase; color: @main-color; padding-left: 20px; } #search select { border: none; outline: none; margin-left: 20px; background: @bg-color; position: absolute; bottom: 0; } #search button { font-family: @bold-font; background: @main-color; float: right; border-radius: 0; border-bottom-right-radius: 50px; border-top-right-radius: 50px; padding: 25px 30px; color: @bg-color; border: none; font-size: 24px; margin: -20px 0; } .search-legend { padding-top: 250px; } .search-legend label { color: @bg-color; text-align: center; padding: 10px; font-size: 18px; } /* Projects results */ .projects #site-gallery h1 { text-align: center; // padding: 300px 0; font-size: 177px; } #projects h2 { font-family: @black-font; color: @kronos-color; margin: 100px auto 120px auto; width: 60%; border-bottom: 0.5px solid @kronos-color; .one-bottom; max-width: 500px; padding-top: 20px; text-transform: uppercase; } #projects h2 i { font-family: @light-font; } #projects .text { font-family: @light-font; background-color: white; padding: 80px 9% 70px 9%; order: 2; position: relative; } #projects .text h3 { margin-top: 8px; font-size: 32px; font-family: @bold-font; color: @darkgrey-color; margin-bottom: 25px; } #projects .text h4 { .one-bottom; padding-bottom: 20px; font-size: 23px; margin-bottom: 25px; } #projects .text h4>div { display: inline-block; white-space: nowrap; } #projects .text h4, #projects .text p { .one-bottom; // line-height: 28px; color: @link-footer-nav-color; } #projects .text h4 b { font-family: @regular-font; white-space: nowrap; } #projects .text p { // font-size: 20px; max-width: 500px; line-height: 35px; } #projects .text .btn, #project-detail .btn-sm, .modal .btn, .modal .btn-sm { border-radius: 50px; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em; font-family: @bold-font; background-color: @kronos-color; border: none; padding: 15px 25px 14px 25px; color: @bg-color; margin-top: 0px; margin-bottom: 10px; } #projects .future-project { display: inline-block; margin: 15px; } #affix .close, #affix.open .navbar-toggle.menu-toggle { display: none; } .close,.close:focus, .close:hover { outline:none; color:@bg-color; /*margin: -5px 5px;*/ } .projects-search .close { display: none; } .projects-search.scroll .close { display: block; } #busqueda .close { margin:-55px -50px !important; } #project-detail .ms-icon { height: 55px; width: 55px; border-radius: 100px; border: 0.5px solid @link-footer-separator-color; clear: both; transition: 0.5s; overflow: hidden; // margin: 10px -2px; margin: auto; display: block; position: relative; } #project-detail .ms-icon span { margin: auto; display: block; } #projects .text .btn:hover, #projects .text .btn:active, #projects .text .btn:focus, #project-detail .btn-sm:hover, #project-detail .btn-sm:active, #project-detail .btn-sm:focus { background-color: #95358b; } #project-detail .map iframe { height:inherit; margin-top:0px !important; width: 100%; border:0; } #project-detail .map { overflow: hidden; position: relative; z-index: 9; } #project-detail .map-wrapper { overflow: hidden; height: 75vh !important; position: relative; min-height: 100% !important; } #project-detail a.map-more { position: absolute; background: @bg-color; bottom: 50px; left: 50%; width: 200px; padding: 15px 10px; margin-left: -100px; } #project-detail a.map-more:hover, #project-detail a.map-more:active, #project-detail a.map-more:focus { color: @bg-color; background: @main-color !important; } #project-detail .map-menu { position: absolute; z-index: 9; background: rgba(120, 50, 120, 0.75); right: 0px; padding: 40px 60px; margin-top: 50px; top: 60%; transform: translateY(-50%); } #project-detail .map-menu ul { margin: 0; padding: 0; } #project-detail .map-menu li { list-style: none; } #project-detail .map-menu .btn { min-width: 150px; } #project-detail .logo-project { // float: none; // position: absolute; // width: 200px; // left: 50%; // margin-left: -100px; // top: -75px; // text-align: center; max-width: 300px; // max-height: 270px; max-height: 250px; margin: auto; margin-top: -50px; } #project-detail .imagen-logo-secundario { max-width: 170px; margin: auto; } #project-detail .col-imagen-secundario { padding-bottom: 30px; } #project-detail .texto-premio { color: #6a3676; font-size: 22px; line-height: 1.1; font-family: 'Conv_GothaProBla'; } #project-detail .contenedor-texto-premio { margin: auto; max-width: 560px; padding-bottom: 30px; } #projects .row { .flex; margin-bottom: 100px; } section { position: relative; } #projects .row:nth-child(even) .picture { order: 1; } #projects .row:nth-child(odd) .picture { order: 5; } #projects .text .future:before { content: "!"; font-size: 20px; font-family: @bold-font; border: 2px solid @bg-text-color; border-radius: 50px; width: 32px; height: 32px; line-height: 29px; text-align: center; margin-right: 10px; display: inline-block; } #projects .text .future { display: inline-block; font-family: @bold-font; font-weight: bold; line-height: 28px; font-size: 10px; margin-left: 20px; text-transform: uppercase; } #projects .text .future span { display: block; line-height: 33px; float: right; } #projects .picture { cursor: pointer; background-color: #eaeaea; background-size: cover; background-position: center center; order: 1; } #projects .picture.pr-1 { background-image: url('../images/projects/pr-1.jpg'); } #projects .picture.pr-2 { background-image: url('../images/projects/pr-2.jpg'); } #projects .picture.pr-3 { background-image: url('../images/projects/pr-3.jpg'); } #projects .picture.pr-4 { background-image: url('../images/projects/pr-4.jpg'); } #projects .picture.pr-5 { background-image: url('../images/projects/pr-5.jpg'); } #projects .picture.pr-6 { background-image: url('../images/projects/pr-6.jpg'); } #projects .picture.pr-7 { background-image: url('../images/projects/pr-7.jpg'); } #projects .text, #projects .picture { min-height: 600px; } .projects .logo-icon { position: absolute; bottom: 0; width: 220px; z-index: 1; height: 140px; background: transparent; } .projects .logo-icon-top { position: absolute; top: 0; width: 150px; z-index: 1; height: 400px; background: transparent; } #projects .top-movil-small { display: none; } .projects .logo-icon img { width: 75%; left: 50%!important; transform: translate(-50%, -50%); position: absolute; top: 50%; bottom: 0; } .projects .logo-icon-top img { width: 64%; left: 64%!important; transform: translate(-50%, -50%); position: absolute; top: 42%; } .projects .top-movil-small { top: 20% !important; width: 80% !important; } #projects .row:nth-child(odd) .logo-icon, #projects .row:nth-child(odd) .logo-icon img { left: 0px; right: auto; } #projects .row:nth-child(even) .logo-icon, #projects .row:nth-child(even) .logo-icon img { right: 0px; left: auto; } #projects .row:nth-child(odd) .logo-icon-top, #projects .row:nth-child(odd) .logo-icon-top img { left: 0px; right: auto; } #projects .row:nth-child(even) .logo-icon-top, #projects .row:nth-child(even) .logo-icon-top img { right: 50px; left: auto; } #project-detail .features h5, #project-detail .features h6 { letter-spacing: 0.02em; border-bottom: 0.5px solid @main-color; .one-bottom; margin-bottom: 25px; font-weight: bold; } #project-detail .features h6 { border-bottom: 0; margin: 0; padding: 0 15px; .flex; align-self: stretch; font-size: 16px; } #project-detail .ms-icon { min-width: 80px; height: 80px; padding: 0; margin: 0; line-height: 85px; justify-content: center; .flex; align-self: center; align-items: center; margin-bottom: 20px; } #project-detail .ms-icon span { background-size: cover; background-repeat: no-repeat; background-position: center center; width: 43px; height: 43px; margin: 0 0 0 0; } #project-detail .features p, #project-detail .features .zones-content span { text-align: center; vertical-align: middle; .flex-center; line-height: 20px; min-height: 60px; margin-bottom: 0; } #project-detail .features .zones-content span { display: none; } #project-detail .features-container { .flex-center; } #project-detail .features p.big { font-size: 25px; } #project-detail .feature { float: none; .flex; align-items: center; justify-content: center; } #project-detail .specs { .flex; align-items: center; justify-content: center; } #project-detail .features-containter a { font-size: 19px; .flex; align-items: center; justify-content: center; align-self: auto; flex-direction: column; } #project-detail .feature-data { float: none; display: inline-table; width: 22%; border: 0.5px solid @link-footer-separator-color; padding-top: 30px; padding-bottom: 30px; margin-right: 1.5%; margin-left: -0.5%; font-size: 12px; background-color: white; } #project-detail .feature-data h5 { border: none; margin-bottom: 0px; } #project-detail .feature-data .big { white-space: nowrap; } .btn-200 { width: 200px; } #project-detail .zones-content { display: none; } #project-detail .feature .more { cursor: pointer; color: @main-color; font-size: 20px; } #project-detail .feature .more:hover, #project-detail .feature .more:active, #project-detail .feature .more:focus { color: @secondary-color; } #project-detail .tipology .btn-xs { padding: 5px 35px !important; display: block !important; margin: 30px 0px 0px 10px !important; } #project-detail .tipology:before { color: @main-color; position: absolute; left: 22px; top: 25px; content: "\e259"; transition: 0.5s; transform: rotate(-90deg); font-family: 'Glyphicons Halflings'; } #project-detail .tipology.open:before { /*content:"\e258";*/ transform: rotate(0deg); } #project-detail .tipology { border: 0.5px solid @main-color; padding: 23px 30px 10px 65px; position: relative; font-size: 18px; transition: 0.5s; background: @bg-color; margin-bottom: 25px; float: left; width: 100%; } #project-detail .tipology:hover { background: #f3f3f3; transition: 0.5s; } #project-detail .tipology .legend { text-transform: uppercase; color: @main-color; font-family: @bold-font; font-size: 12px; position: static; left: 45px; float: none; clear: both; margin-top: 0px; display: inline; } #project-detail .tipology .tipology-data.share { display: none; } #project-detail .tipology .tipology-data { padding: 0px; margin-top: 10px; color: @main-color ; } .indicator { list-style: none; } .indicator:before { width: 25px; height: 25px; margin-right: 10px; margin-top: 0px; content: ''; display: block; float: left; background-repeat: no-repeat; background-position: center center; background-size: contain; } .indicator.measures:before { background-image: url('../images/icon/icon-meas.svg'); } .indicator.price:before { background-image: url('../images/icon/icon-pric.svg'); } .indicator.rooms:before { background-image: url('../images/icon/icon-bedr.svg'); } .indicator.ward:before { background-image: url('../images/icon/icon-ward.svg'); } .indicator.bath:before { background-image: url('../images/icon/icon-bath.svg'); } .indicator.leaf:before { background-image: url('../images/icon/icon-leaf.svg'); } #project-detail .tipology .tipology-data.indicator { padding: 5px; color: @main-color; padding-right: 0; padding-left: 0; display: inline-block; font-size: 15px; line-height: 25px; } #social-blocks hr { border-top: 0.5px solid @main-color; .two-bottom; } #project-detail .separator { width: 0.5px; background: @main-color; height: 50px; float: left; margin-left: -25px; margin-top:-8px !important; display: block; } hr.separator-special { width: 100%; background:@main-color; float: left; position: static; height: 0.5px; padding: 0; border: none; } #project-detail .tipology .actions { text-align: center; } #project-detail .tipology .btn { margin-top: -6px; display: inline-block !important; float: none; } #project-detail .tipology .share:before { content: "\f1e0"; font-family: 'FontAwesome'; padding: 7px 10px; display: block; } #project-detail .tipology .share { border-radius: 50px; margin-top: 0px; margin-right: 30px; width: 40px; border: 1px solid @main-color; background: white; height: 40px; float: right; position: relative; transition: 0.8s; } #project-detail .tipology .share:before:hover, #project-detail .tipology .share:before:focus, #project-detail .tipology .share:before:active { color: @main-color; } #project-detail .tipology .share:hover, #project-detail .tipology .share:active, #project-detail .tipology .share:focus { background: @main-color; color: white; } #project-detail .tipology .share:hover .share-list { visibility: visible; opacity: 1 !important; } #project-detail .tipology .share-list { background: @main-color; position: absolute; left: -30px; width: 100px; bottom: -38px; border-radius: 50px; color: @bg-color; padding: 3px 5px; opacity: 0 !important; visibility: hidden; transition: 0.8s; } #project-detail .tipology .share-list li { list-style: none; float: left; font-size: 10px; margin: 0px 1px; } #project-detail .tipology .share-list li i { transition: 0.5s; color: white; border: 1px solid transparent; padding: 2px 5px; } #project-detail .tipology .share-list li:hover i, #project-detail .tipology .share-list li:focus i, #project-detail .tipology .share-list li:active i { color: lighten(@secondary-color, 25%); } #project-detail .tipology-details ul { margin: 25px 18px 0 18px; padding: 0; } #project-detail .tipology-details li { font-size: 12px; margin-bottom: 15px; } #project-detail .tipology-details .indicator:before { margin-top: 0px; float: left; } #project-detail .tipology-details .indicator { line-height: 26px; } #project-detail .tipology-details .indicator span { padding-left: 10px; display: inline-block; } #project-detail .tipology-details .indicator.measures span { margin-top: -5px; line-height: 18px; } #project-detail .tipology-details .details { padding-bottom: 10px; min-height: 390px; bottom: 25px; top: 0; right: 30px; left: 30px; padding: 10px 10px 10px 20px; margin-top:9px; } #project-detail .tipology-details .image.long-section { .medium-section; } #project-detail .tipology-details .image { padding: 10px 35px 15px 0; } #project-detail .tipology-details .image img { width: 100%; border: 0.5px solid #ccc; padding: 5px; margin-left: 15px; } //#project-detail .tipology-details .detail-content { position: absolute; top:20px; bottom:0px; right:0px; } #project-detail .tipology-details.open { border-top: 0.5px solid #ccc; } #project-detail .tipology-details { color: @main-color; overflow: hidden; float: left; position: relative; width: 100%; margin-top: 15px; padding: 10px 0; font-size: 14px; display: none; } #project-detail .tipology-details b { font-family: @bold-font; font-size: 10px; text-transform: uppercase; } #project-detail .tipology-details p { padding: 15px 15px 0px 15px; color: @main-color; line-height: 20px; } .projects-search { z-index: 15; position: absolute; top: 125px; right: 20px; width: 650px; padding: 10px; padding-top: 25px; font-size: 12px; } .projects-search .btn.search { outline: none; background: @main-color; color: @bg-color; padding: 7px; font-size: 9px !important; border: 0.5px solid transparent; margin: 0 !important; } .projects-search .btn.search:hover { border-color: @bg-color; } .projects-search.scroll { position: fixed; top: 93px; } .projects-search label { color: @bg-color; } .projects-search .form-group { margin-right: 10px; } .projects-search .ddrop-item { position: relative; outline: none; display: block; padding: 10px; padding-top: 7px; /*width: 100%;*/ width: 97%; padding-bottom: 7px; } .projects-search .ddrop-item.active { margin-bottom: 0; padding-left: 15px !important; font-family: @light-font; color: @main-color; background: url('../images/dropdown-arrow.png') no-repeat right 15px center @bg-color; border: 0.5px solid #ccc !important; padding: 5px; width: 100%; margin-bottom: 15px; } .projects-search .ddrop-item.open { background: @bg-color; color: @main-color; border-bottom-color: @bg-color !important; } .projects-search .ddrop-item.active:hover { background: url('../images/dropdown-arrow-white.png') no-repeat right 15px center @main-color; color: @bg-color; cursor: pointer; } .projects-search .ddrop-item:hover { background: @main-color; color: @bg-color; cursor: pointer; } /*.projects-search .ddrop-item:first-child { border-top: 0.5px solid #ccc !important; }*/ .projects-search .ddrop-item.active.open { padding: 5px; background: url('../images/dropdown-arrow-up.png') no-repeat right 15px center @bg-color; color: @main-color; } .projects-search .ddrop { background: @bg-color; padding: 10px; right: 0px; z-index: 1; float: left; padding-top: 0px; padding-left: 10px; display: none; position: absolute; left: 0; border: 0.5px solid #ccc; border-top: none; padding-bottom: 4px; margin-top: -6px; padding-top: 5px; max-height: 155px; top:34px; } .simplebar-horizontal { display: none; } .projects-search .simplebar-scrollbar { margin-top: 0px; right: 0px !important; } .projects-search .simplebar-track { overflow: hidden; margin-top: 10px; margin-bottom: 5px; width: 9px !important; margin-right: 5px; } /* Puredesign */ #puredesign-carousel, #puredesign2-carousel { background-color: @bg-color; position: relative; } #puredesign-carousel {margin-bottom: 20px;} #puredesign-carousel .slide, #puredesign2-carousel .slide { background-position: center center; } .video { padding-top: 0 !important; padding-bottom: 50px !important; } .video .bee3D--inner { background-color: rgba(50, 50, 50, 0.50); transition: 0.5s; } .video .bee3D--inner:hover { background-color: transparent; } .video .bee3D--slide { width: 900px; height: 300px; margin-top: -150px; margin-left: -450px; box-shadow: 0 20px 65px #afafaf; } .video .bee3D--slide__active { opacity: 1; z-index: 99; } .video .bee3D--nav__prev, .swiper-button-prev { background-image: url(../images/angle-left.svg) !important; left: 3%; } .video .bee3D--nav__next, .swiper-button-next { background-image: url(../images/angle-right.svg) !important; right: 3%; } .video .bee3D--nav__prev, .swiper-button-prev.carousel_logos { background-image: url(../images/angle-left.svg) !important; left: 3%; } .video .bee3D--nav__next, .swiper-button-next.carousel_logos { background-image: url(../images/angle-right.svg) !important; right: 3%; } .video .swiper-button-prev { background-image: url(../images/angle-left.svg) !important; left: 100%; } .video .swiper-button-next { background-image: url(../images/angle-right.svg) !important; right: 100%; } // new swiper // .swiper-button-prev::after, .swiper-button-next::after { // content: ""!important; // display: none!important; // } .video .bee3D--nav, .swiper-button { position: absolute; cursor: pointer; top: 50%; font-size: 8em; color: rgba(0, 0, 0, 0.45); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: color 0.7s ease; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: transparent; background-repeat: no-repeat; background-size: contain; width: 30px; height: 50px; // new swiper height: 60px!important; z-index: 9; } .swiper-container-blog .swiper-button { width: 17px !important; height: 30px !important; } .swiper-container-blog .swiper-container-blog { padding-left: 100px !important; padding-right: 100px !important; } .swiper-container-blog .swiper-button.swiper-button-prev { left: 0%; } .sw-white-left { // position: absolute; background: white; left: 0; width: 50px; z-index: 10; bottom: 0; top: 0; } .sw-white-right { // position: absolute; background: white; right: 0; width: 50px; z-index: 10; bottom: 0; top: 0; } .position_absolute { position: absolute; } #puredesign-carousel .sw-white-left, #puredesign-carousel .sw-white-right { position: absolute; background: white; left: 0; width: 120px; z-index: 10; bottom: -80px; top: 0; } #puredesign-carousel .sw-white-right { left: initial; right:0; } .projects #slider .sw-white-left, .projects #slider .sw-white-right { position: absolute; background: white; left: 70px; width: 120px; z-index: 10; bottom: -80px; top: 0; } .projects #slider .sw-white-right { left: initial; right:70px; } .swiper-container-blog .swiper-wrapper { padding: 0 0px; } .swiper-container-blog .swiper-slide { padding: 0 5px; margin-left: 0px; } .swiper-container-blog .swiper-slide article { margin-bottom: 55px; /*margin-right: 50px; margin-left: -50px; width: 80%;*/ } .swiper-container-blog .swiper-button.swiper-button-next { right: 0%; } #puredesign-carousel .slide, #puredesign2-carousel .slide { background-size: cover !important; position: relative; } #puredesign-carousel .slide p, #puredesign2-carousel .slide p { max-width: 900px; letter-spacing: 1px; font-size: 30px; line-height: 35px; } #puredesign2-carousel .slide p { max-width: 881px; letter-spacing: 1px; font-size: 30px; line-height: 43px; padding: 0 30px; } #puredesign-carousel .slide, #puredesign2-carousel .slide { font-family: @bold-font; font-size: 250%; color: @bg-color; } #puredesign-carousel .video .bee3D--inner { .flex; justify-content: space-around; align-items: center; } #puredesign-carousel .logo, #puredesign2-carousel .logo { background: @bg-text-color; height: 60px; bottom: -70px; position: absolute; width: 150px; left: 375px; } .parallax-bg { position: absolute; left: 0; top: 0; width: 130%; height: 100%; -webkit-background-size: cover; background-size: cover; background-position: center; } body .swiper-button-next, body .swiper-button-prev { background-size: cover !important; width: 20px; height: 40px; display: block; outline: none !important; // display: none; } .d-none { display: none !important; } #puredesign-carousel .swiper-button-next, #puredesign-carousel .swiper-button-prev, .projects #slider .swiper-button-next, .projects #slider .swiper-button-prev { display: block; } .logo-arquitectos img { z-index: 1; position: relative; max-width: 300px; } .swiper-container-architect, .slide-arquitectos { min-height: 300px !important; } .swiper-container-architect img, .swiper-container-pics img, .swiper-container-video img { width: 100%; } .swiper-container, .swiper-container-boxes, .swiper-container-blog { height: 500px; width: 100%; position: relative; overflow: hidden; } .swiper-container-architect { padding-bottom: 100px; max-height: 570px; height: 60vh !important; padding: 100px 35px !important; } .swiper-container-pics { padding-bottom: 100px; height: 80vh !important; } .swiper-container-video { padding-bottom: 100px; height: 70vh !important; } .swiper-container-architect-logo, .swiper-container-video-logo { height:100px; width: 100%; overflow: hidden; } .swiper-container-architect.small { height: 400px !important; } .swiper-container-architect, .swiper-container-pics, .swiper-container-video { padding-bottom: 50px; padding-top:75px; overflow:hidden; } .swiper-container-architect .swiper-slide, .swiper-container-video .swiper-slide { background-size: cover !important; background-repeat:no-repeat !important; background-position: center; } .slide-video-1 { background:url('../images/video/thumbnail-video-acero.jpg'); } .slide-video-2 { background:url('../images/video/thumbnail-video-cesar.jpg'); } .slide-video-3 { background:url('../images/video/thumbnail-video-enricsoler.jpg'); } .slide-video-4 { background:url('../images/video/thumbnail-video-jesusgallego.jpg'); } .slide-video-5 { background:url('../images/video/thumbnail-video-joanpascual.jpg'); } .slide-video-6 { background:url('../images/video/thumbnail-video-rafael.jpg'); } .slide-video-7 { background:url('../images/video/thumbnail-video-oua.jpg'); } .swiper-container-puredesign { height: 800px; } .swiper-container-architect .swiper-button, .swiper-container-pics .swiper-button, .swiper-container-video .swiper-button { margin: 0 100px; } .swiper-container-blog { width: 88%; margin: 0 6%; margin-top: 2%; padding-bottom: 3%; height: auto; } .swiper-container .swiper-slide, .swiper-container-boxes .swiper-slide, .swiper-container-pics .swiper-slide, .swiper-container-architect .swiper-slide, .swiper-container-video .swiper-slide, .swiper-container-blog .swiper-slide { text-align: center; font-size: 18px; /* Center slide text vertically */ .flex-center; } .swiper-container-boxes { height: 900px; } .swiper-container-blog .swiper-slide { text-align: left; font-size: inherit; width: 100%; } #puredesign2 { padding-bottom: 40px; } .combotron.puredesign { display: block; justify-content: center; text-align: left; margin: 80px 0; color: @darkgrey-color; // font-size: 18px; padding-right: 40px; } .combotron.puredesign h4 { display: table; margin-bottom: 25px; color: @kronos-color; font-family: @medium-font; font-weight: normal; font-size: 21px; } .combotron.puredesign .icon { background-position: center center; background-repeat: no-repeat; background-color: transparent; background-size: cover; display: inline-block; height: 43px; width: 43px; color: @kronos-color; } .combotron.puredesign .ms-icon { color: #6a3677; float: left; text-align: center; justify-content: center; margin: -8px 20px 0 0px; width: 43px; height: 43px; } .interaction { width: 85px; } .contacto .interaction { display: none; } /* Press note / Nota de prensa */ .article { padding: 0 35px; } .news-text { margin-bottom: 35px; } .news-text h3 { min-height: 45px; } //.news-text .news-content {} .news-link { text-transform: uppercase; font-size: 9px; letter-spacing: 0.05em; font-family: @bold-font; font-weight: bold; color: @main-color; } .news-link:hover, .news-link:active, .news-link:focus { color: #95358b; } #notaprensa .video-play img { zoom:0.4; } #notaprensa .date { position: absolute; top: -10px; color: #FFF; } #notaprensa .date.video { top: 15px; font-size: 11px; } #notaprensa .pictures { width:100%; overflow:hidden; } //#notaprensa #videos .pictures { margin-bottom:35px; } #notaprensa .picture, #notaprensa .picture .elem-img img { width:100%; } #notaprensa .picture .elem-img img { height: auto; display: block; } #notaprensa .news-text { margin-bottom: 0 !important; } #notaprensa .news-text { padding:25px 25px 0 25px; margin-bottom:25px !important; overflow:hidden; } #notaprensa .pictures .news-content h3 a, #notaprensa .pictures h3 a { color:#FFF; font-size:18px; display:block; font-weight:bold; line-height: 30px; } //#notaprensa #videos .pictures h3 a { clear:both; color:@main-color !important; padding:25px 0 !important; margin-bottom:75px; } #notaprensa .pictures .news-content { position:absolute; left:0px; right:25px; bottom:-120%; max-height:150px; transition: 1s; z-index:2; } #notaprensa .pictures .picture { background:#000; z-index:1; position:relative; } #notaprensa .pictures .picture .elem-img img { opacity:1; transition: 0.5s; } #notaprensa .pictures .picture:hover .elem-img img { opacity:.15; } #notaprensa ul { padding: 35px; margin-top: 100px; } #notaprensa ul li { list-style: none; float: left; } #notaprensa ul li a { color:@main-color !important; border-bottom-color:@main-color;border-bottom-width:0.5px; padding: 15px 35px 16px 35px; font-size: 18px; } #notaprensa ul li a.selected,#notaprensa ul li a:hover { border-bottom-width:3px; } #notaprensa ul li a:hover { padding: 15px 35px 15px 35px; } #notaprensa ul li a.selected { font-family:@medium-font; padding: 15px 35px 14px 35px; } #notaprensa .pictures .news-content { display: block; transition: 0.5s; padding:35px; width: 100%; } #notaprensa .news-text .picture:hover .news-content { bottom:0; } .prensa #site-gallery { height: 150px; } /* Legal */ .legal .interaction { display: none; } .prensa .main-menu li > a { padding-bottom:7px !important; } /* Blog section */ #blog-archive article { margin-bottom: 55px; } .swiper-container-blog article { margin: auto; width: 90%; padding-left: 30px; padding-right: 30px; } #blog-archive img.thumb { width: 100%; } #blog-archive .categorie .btn { position: absolute; top: 50%; margin-top: -30px; left: 50px; right: 50px; padding: 20px 1px; white-space: normal; } #blog-archive .categorie img { margin: auto; transition: 0.5s; opacity: .7; } #blog-archive .categorie a:first-child { background: #000000; display: block; padding-bottom: 0; } #blog-archive .categorie:hover img { opacity: 1; transition: 0.5s; } #blog-archive .categorie { position: relative; margin-bottom: 25px; overflow: hidden; } #blog-archive .categorie h4 { min-height: 45px; } #blog-archive h5 { font-size: 10px; color: #777; } #blog-archive h6 { text-transform: uppercase; font-size: 18px; line-height: 22px; min-height: 50px; } #blog-archive p { font-size: 14px; line-height: 22px; } #blog-archive .date { font-style: italic; font-size: 10px; color: #777; } #blog-archive .likes:before { font-family: 'Glyphicons Halflings'; content: "\e143"; line-height: 17px; display: block; float: left; padding-right: 5px; } #blog-archive .likes { font-size: 10px; color: #777; float: right; width: 70%; margin-top:7px; line-height: 18px; padding-left: 20px; } /* Social blocks */ #social-blocks { background: #EAEAEA; } #social-blocks ul { .flex; justify-content: center; padding: 0; margin: 0; } #social-blocks li.social { float: left; list-style: none; margin: 15px; font-size: 25px; } #social-blocks li.social i { color: @main-color; } #social-blocks .social-block { .one-bottom; } //#social-blocks .social-block:nth-child(odd) {} #social-blocks .social-block .title { padding: 0 0 60px 0; } /* Contact form */ .contact-phone .btn { font-family: @black-font !important; padding: 10px 80px !important; } .contact-phone .c-info p { margin-bottom: 0; } .contact-phone .more { margin-top: 25px; } #contact { position: relative; border-bottom: 0.5px solid @main-color !important; } .contacto #busqueda.busqueda-open { display: block !important; } .contacto #site-gallery, .contacto footer .copy { float: left !important; width: 100% !important; } .contacto section.grey { background: transparent !important; } //.contacto header { } .contacto .modal-like { color: #FFFFFF; background: rgba(68, 34, 94, 0.9); margin-bottom:250px; padding-bottom:75px; } .contacto .modal-like .modal-padding { padding-bottom:50px; padding-top: 35px; } .contacto .modal-like .addr-box { text-align:center; } .contacto .modal-like .addr-box, .contacto .modal-like .addr-box b, .contacto .modal-like .addr-box p, .contacto .modal-like .addr-box a, .contacto .modal-like input, .contacto .btn, .modal-like button, .contacto .modal-like textarea, .contacto .modal-like label, .contacto .modal-like h2 { color: #FFFFFF !important; border-color:#FFFFFF !important; } .contacto .addr-box p { line-height:20px; } .contacto .addr-box i { font-style:normal !important; padding:0 10px; font-size:15px; display:inline-block; } .contacto .addr-box b { display:inline-block; margin-bottom:25px; } .contacto .modal-like input, .contacto .modal-like button, .modal-dialog .form-group button, .projects-search.scroll button, .contacto .modal-like textarea { background:transparent !important; border:0.5px solid !important; } .modal-dialog .form-group button:hover { color: #6a3676 !important; background-color: white !important; } .contacto .f-address,.contacto .interaction,.contacto .subnav { display:none; } #inputMeetUs { display: none; } #contact label, .modal-content label { text-transform: uppercase; font-family: @bold-font; color: #555555; font-weight: bold; font-size: 11px; letter-spacing: -0.04rem; } #contact h2.title { font-family: @regular-font; color: @main-color; font-size: 45px; padding-bottom: 35px; border-bottom: 0.5px solid @main-color; position: relative; font-weight: bold; letter-spacing: 0.08em; text-transform: uppercase; font-size: 25px !important; } #contactLegal { vertical-align: text-bottom; } #lblcontactLegal { display: inline !important; } #project-detail #lblcontactLegal a { color: #000; } #contact .btn { padding: 20px 80px; font-size: 14px; transition: 0.5s; } #contact .btn:hover { color:@kronos-color !important; background-color: white !important; } .white #contact { background: url('../images/fg-bg-contact.png') no-repeat center 270px white; background-size: contain; } .white-letters { background: url(../images/bg-by-kronos-homes.png); background-color: #FFFFFF; background-size: auto; background-position: ~"calc(50% - 500px) bottom"; background-repeat: no-repeat; } .white-letters2 { .white-letters; background-position: bottom; } .white #contact .back-to-top { display: none; } .white #contact input, .white #contact textarea, .modal .contact-form input, .modal .contact-form textarea { background: darken(@bg-color, 5%); border: 0.5px solid darken(@bg-color, 10%); } .contact-form .form-control { box-shadow: none; background: @bg-color; border-radius: 0; border-color: #caacc600; font-size: 12px; margin-bottom: 25px; padding: 20px; } .contact-form a { color: #FFF; text-decoration: underline; } //.contact-form.compressed {} .contact-form.compressed .form-control { margin-bottom: 5px; } #contact-addresses { background: url('../images/addresses-bg.jpg') no-repeat; background-size: cover; padding: 100px 0; position: relative; } #contact-addresses .address-box .addr { padding: 10px; } #contact-addresses .address-box .addr-box { padding: 10px; padding-top: 35px; height: 220px !important; background: white; } #contact-addresses .address-box .addr-box p { text-align: center; width: 100%; margin: 0; } #contact-addresses .address-box .addr-box p b { margin-bottom: 15px; display: block; color: @main-color; font-size: 120%; } section .separatore { border-top: 0.5px solid @main-color; bottom: 0; position: absolute; left: 0; right: 0; } /* Footer */ footer { border-top: 0.5px solid @link-footer-separator-color; } footer .interaction { position: fixed; right: 10px; top: 42%; z-index: 12; } footer .interaction ul { display: block; width: 100%; } footer .interaction li { height: 52px; width: 52px; background-color: @main-color; border-radius: 100px; border: 0.5px solid white; list-style: none; clear: both; transition: 0.5s; overflow: hidden; margin: 10px -2px; float: right; position: relative; } //footer .interaction li:hover {} footer .interaction>ul>li { margin: 10px 20px !important; } footer .interaction li.share i { color: #FFF; font-size: 20px; display: block; padding: 0 0px; } footer .interaction.landscape li.share i { color: #FFF; font-size: 35px; display: block; padding: 0 0px; } footer .interaction li.share:hover ul { opacity: 1; } footer .interaction li.share ul { transition: 0.5s; padding: 0 !important; opacity: 1; margin-top: 12px; margin-left: 12px; } footer .interaction li.share ul li { color: white !important; width: auto; border-radius: 0; height: 25px; width: 45px; margin: 8px 0px; text-align: center; clear: none; float: left; border: none; background: none; } footer .interaction li.share { transition: 0.5s; position: relative; background: #9e8fb8; overflow: hidden; z-index: 10; } /*footer .interaction li.share:hover { width: 200px; }*/ footer .interaction li.share:hover img { opacity: 1; } footer .interaction li.share ul { padding: 1px 18px; } //footer .interaction li.share:hover ul {} footer .interaction li.share ul li:first-child { margin-left: -8px; margin-right: -3px; } footer .interaction li.share:hover ul li { border: none; background: none; color: white; } footer .interaction li img { position: absolute; background: @main-color; border-radius: 100px; right: 1px; top: 1px; width: 50px; padding: 5px; z-index: 10; } footer .interaction.landscape li img { position: absolute; background: transparent; border-radius: 100px; right: -10px; top: 1px; width: 60px; padding: 5px; z-index: 10; } #site-gallery .video-play { position: static; } #site-gallery.landscape { padding-bottom: 50px; } .interaction.landscape li { margin: 0; } footer .interaction.landscape li img { width: 50px !important; height: 51px !important; top: 0px !important; right: 1px !important; background:@main-color !important; } footer .interaction li a:focus img, footer .interaction li a:hover img { background:@main-color !important; } footer .interaction.landscape li.share i { font-size: 23px; } footer p { font-family: @light-font !important; margin-bottom: 20px; line-height: 30px; } footer b { color: @link-footer-location-color !important; font-size: 17px; font-family: @medium-font !important; font-weight: normal !important; margin-bottom: 0px !important; display: inline-block; } footer .nav { margin-top: 70px; margin-bottom: 40px; } footer ul { .flex; justify-content: space-between; } footer .nav li { text-transform: uppercase; text-align: center; } footer .nav li a { font-family: "Conv_GothaProLig"; color: @link-footer-nav-color; white-space: nowrap; } footer .f-address b { color: #aaa; } footer .nav li a:hover, footer .nav li a:active, footer .nav li a:focus, footer li a:hover b, footer li a:active b, footer li a:focus b, footer li:hover, footer li:active, footer li:focus, footer .nav li a:hover { background-color: transparent; color: @main-color !important; } footer .separator { border-bottom: 0.5px solid @link-footer-separator-color; width: 100%; margin-left: auto; margin-right: auto; .one-bottom; margin-bottom: 25px; // float: left; } footer a { color: @link-footer-location-color; transition: 0.5s; } footer .f-address { text-align: center; padding-bottom: 100px; color: #ccc; } footer .f-address b, footer .f-address p { color: #ccc; } footer .f-address p { padding-top: 100px; line-height: 28px !important; margin-bottom: 0px !important; } footer .copy { background: url('../images/footer-icon.png') no-repeat left center @footer-copy-color; font-family: @light-font; height: 89px; } footer .copy .separator { border-bottom: 0.5px solid @link-footer-separator-color; width: 80%; margin: auto; padding: 1px 0 0 0 !important; } footer .copy p, footer .copy a { font-size: 12px; line-height: 50px; margin-bottom: 0 !important; color: @link-footer-color; } footer .copy div p a { text-decoration: underline; white-space: nowrap; } footer .copy div p span { white-space: nowrap; } footer .copy a:hover, footer .copy li a:hover { color: @link-footer-color-hover; } footer .legal-links { height: 100%; } footer .legal-links ul { display: -ms-flexbox; display: -webkit-flex; .flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; } footer .copy ul { margin: auto; padding-left: 0; // float: right; } footer .copy li { display: inline-block; list-style: none; margin: auto 10px; } footer .copy li a { font-size: 10px; color: @link-footer-color; } /* Breadcrumbs */ .breadcrumb { background: transparent; color: @darkgrey-color; } .breadcrumb>li, .breaddata { font-family: @medium-font; } .breadcrumb>li:last-child { font-family: @light-font; } .breadcrumb li:nth-child(2) { content: "\\\00a0"; color: @darkgrey-color; } .breaddata { padding: 8px 15px; } /* Auxiliary/common items */ .nowrap { white-space: nowrap; } .grey { background: #F5F5F5; } ::placeholder { color: #caacc6 !important; } body .swiper-container-pics .swiper-button-next, body .swiper-container-pics .swiper-button-prev { top: 51% !important; margin: 0px !important; } .swiper-pagination-bullet-active, .swiper-pagination-bullet { border: 2px solid white; background: white; height: 12px; width: 12px; opacity: 1; } .swiper-pagination-main { position: relative; bottom: 80px !important; z-index: 9; text-align: center; } .swiper-container .swiper-pagination-bullet, .swiper-container-architect-logo .swiper-pagination-bullet, .swiper-container-video-logo .swiper-pagination-bullet, .swiper-container-pics .swiper-pagination-bullet, .swiper-container-blog .swiper-pagination-bullet, .swiper-container-boxes .swiper-pagination-bullet { outline: none; background: #ccc; border-radius: 0; border: none; height: 3px !important; width: 25px !important; margin: 0 3px -15px 10px !important; } .swiper-pagination-architect-logo, .swiper-pagination-video-logo { bottom: 130px !important; position: absolute; left: 0; right: 0; width: 100%; z-index: 9; text-align: center; } .swiper-container-boxes .swiper-pagination-bullet { background: #FFFFFF; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { text-align: center; } .swiper-container-boxes .swiper-pagination-boxes { bottom: 80px !important; position: absolute; left: 0; right: 0; width: 100%; z-index: 9; text-align: center; } .swiper-pagination-bullet-active { background: @main-color !important; } .boxes .slide { background-position: 0 bottom; } .boxes .slide .slide-box h3 { display: inline-block; text-align: left; width: 100% } .boxes .slide .slide-box { background: rgba(255, 255, 255, 0.8); width: 500px; padding: 40px 60px; right: 20%; position: absolute; } .invisible { visibility: hidden; margin: 10px; } .small-section { .one-top; .one-bottom; } .medium-section { padding-top: 50px; padding-bottom: 50px; } .normal-section { padding-top: 75px; padding-bottom: 75px; } .long-section { padding-top: 150px; padding-bottom: 150px; } .no-shadow { background:none; } .no-margin { margin: 0 !important; } .mg-top-20 { margin-top: 20px !important; } .mg-top-40 { margin-top: 40px !important; } .mg-top-60 { margin-top: 60px !important; } .no-padding { padding: 0 !important; } .no-top { padding-top: 0 !important; } .no-bottom { padding-bottom: 0 !important; } .one-top { padding-top: 20px; } .two-top { padding-top: 45px; } .one-bottom { padding-bottom: 20px; } .two-bottom { padding-bottom: 45px; } .flex { display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex-center { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; .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; } .flex-center-v { .flex-center; flex-direction: column; height: 100%; } .big-section { padding-top: 100px; padding-bottom: 100px; } .combotron { margin: 75px 0 75px 0; display: block; justify-content: center; text-align: left; } .combotron h4 { font-size: 115%; font-family: @regular-font; font-weight: bold; display: table; margin-bottom: 25px; color: @kronos-color; } .combotron .icon { background-position: center center; background-repeat: no-repeat; color: @main-color; background-color: transparent; background-size: cover; height: 28px; width: 28px; display: inline-block; } .text-small { font-size: 85%; } .future-project-text { display: inline-block !important; white-space: nowrap; } .icon-future-project { background-image: url('../images/icon/icon-future-project.png'); float: none !important; display: inline-block !important; width: 30px !important; height: 30px !important; vertical-align: middle !important; margin-left: 10px !important; } .icon-life { background-image: url('../images/icon/icon-life.svg'); } .icon-arch { background-image: url('../images/icon/icon-arch.svg'); } .icon-excl { background-image: url('../images/icon/icon-excl.svg'); } .icon-imag { background-image: url('../images/icon/icon-imag.svg'); } .icon-calid { background-image: url('../images/icon/icon-calid.svg'); } .icon-locl { background-image: url('../images/icon/icon-locl.svg'); } .icon-doss { background-image: url('../images/icon/icon-doss.svg'); } .icon-obra { background-image: url('../images/icon/icon-obra.svg'); } .icon-tour { background-image: url('../images/icon/icon-tour.svg'); } .ms-icon { width: 30px; height: 30px; color: #6a3677; float: left; text-align: center; justify-content: center; margin: -8px 10px 0 0px; } .projects .ms-icon { width: 20px; height: 20px; float: left; text-align: center; justify-content: center; margin: -2px 10px 0 0px; } .ms-icon.white { background: transparent; /*border:1px solid @main-color;*/ width: 70px; height: 70px; } .ms-icon span { background-size: contain; background-repeat: no-repeat; background-position: center center; width: 33px; height: 50px; margin: 0 0 0 0; } .bg-text { font-family: @bold-font; font-size: 250%; color: @bg-color; height: 450px; .flex-center; padding: 35px; } .bg-text p { max-width: 800px; text-align: center; } .bg-text.bg-notaprensa { background: url('../images/slider/notaprensa-sl-1.jpg') no-repeat center center; } .clr { clear: both; } .back-to-top { position: absolute; bottom: 0; left: 50%; z-index: 10; margin-left: -32px; width: 0px; height: 0px; border-left: 32px solid transparent; border-right: 32px solid transparent; border-bottom: 32px solid @main-color; cursor: pointer; } .back-to-top:before { font-family: 'Glyphicons Halflings'; font-size: 19px; margin-left: -10px; content: "\e260"; position: absolute; bottom: -30.5px; z-index: 3; color: @bg-color; } .vertical-center { .flex; align-items: top; } .phone-tab { position: fixed; right: 0; top: 33%; z-index: 3; } .c-info { padding: 40px 0px 40px 0!important; line-height: 21px; column-count: 1; column-gap: 40px; } .c-info p { margin-bottom: 20px; } .c-info-2-col { column-count: 2; } .c-info-3-col { column-count: 3; } .c-info-4-col { column-count: 4; } .r-0 { right: 0; } /* Dropdown */ #ddrop-holder { position: relative; top: -30px; padding-top: 0px; left: 10px; } .ddrop { background: @bg-color; padding: 20px; right: 0px; z-index: 1; float: left; padding-top: 30px; padding-left: 25px; display: none; position: absolute; top: 60px; left: 30px; } .lang .ddrop { top:35px; } .ddrop-item { float: left; width: 90%; margin-bottom: 5px; } .ddrop-item:hover { font-weight: bold; color: @bg-text-color; cursor: pointer; } .ddrop-item.active { margin-bottom: 0; padding-left: 20px; font-weight: bold; color: @bg-text-color; background: url('../images/dropdown-arrow.png') no-repeat right; } /* Modal */ .modal-header { border-bottom: none; } #video .modal-header .close { opacity:.5; } #video .modal-header { padding: 5px 13px; position: absolute; z-index: 99999; bottom: 50%; margin-bottom:-30px; right: 0; left:100%; margin-left:-60px; width:60px; background: rgba(0,0,0,0.2); text-align: center; } .modal-dialog { width: 800px; } .modal-lg.modal-dialog { max-width: 892px; } #plano.modal-dialog { width: 60vw; } #plano.modal-lg.modal-dialog { max-width: 60vw; } .modal-padding { padding-left: 45px; padding-right: 45px; } .modal-content { border-radius: 0; } .modal-body { padding: 0; } .modal #contact .col-md-6.col-md-offset-3 { width: 100%; margin: 0; } .modal { text-align: center; padding: 0!important; } .modal #video { background: #000; } .modal #video .modal-body * { height: 500px; } .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; /* Adjusts for spacing */ } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } /* Contact addresses auxiliary */ #contact-addresses .back-to-top { border-bottom-color: @bg-color; bottom: 0px; } #contact-addresses .back-to-top:before { color: @main-color; } .modal-content { background: rgba(68, 34, 94, 0.9); } .modal-content h2.title { color: #FFF; font-family: @light-font; text-transform: uppercase; letter-spacing: 0.2rem; font-weight: bold; font-size: 30px; color: #FFFFFF; padding-top: 0; padding-bottom: 25px; } .modal-content label { padding-bottom: 10px; } .modal-content { color: #FFFFFF; padding-bottom: 0; } .modal-content input, .modal-content textarea { background: transparent !important; color: white; font-size: 14px; } .modal-content label { color: white; } .close { float: right; font-size: 40px; padding: 0 20px; font-weight: 100; line-height: 1; color: #fff; text-shadow: 0 0px 0 transparent; filter: alpha(opacity=1); opacity: 1; } #busqueda .close { display: none; } .horz #busqueda .close { display: block !important; } .meet-us .ddrop, .modal-content .ddrop { width: 100%; left: 0; max-height: 150px; font-size: 12px; top: 77px; border: 0.5px solid white; border-top: none; background: rgba(68, 34, 94, 0.9); position: absolute; } .meet-us .ddrop { top:64px !important; } #contacto .meet-us .ddrop { top:77px !important; } .meet-us .ddrop-item.active, .modal-content .ddrop-item.active { color: #FFF; border: 0.5px solid white; padding: 11px; background: url('../images/dropdown-arrow-white.png') no-repeat right 15px center; width: 100%; } .meet-us .simplebar-scrollbar:before, .modal-content .simplebar-scrollbar:before { background: white; } .meet-us .ddrop-item, .modal-content .ddrop-item { margin-top: 0; margin-bottom: 10px; width: 100%; padding: 5px; font-size: 13px; } .meet-us .ddrop-item:hover, .modal-content .ddrop-item:hover { color: #FFF; background-color: rgba(255, 255, 255, 0.2); } .meet-us .simplebar-content, .modal-content .simplebar-content { padding: 8px !important; } /* iOS date selector */ div.ios-selector { padding-top: 10px; padding-bottom: 10px; } div.ios-selection { .flex; flex-direction: row-reverse; } div.ios-selection .form-a input, div.ios-selector { border: 0.5px solid @link-footer-separator-color; } div.ios-selection .form-a input::placeholder { color: @link-footer-color!important; } #project-detail #lblcontactLegal { font-size: 13px; } div.ios-selection .form-a, div.ios-selection .form-b { display:table; } div.ios-selection .form-a { order: 2; } div.ios-selection .form-b { order: 1; } div.drum { font-weight: bold; } div.date_wrapper { width: 100%; } div.date_wrapper .date_header { height: 25px; font-weight: 400; text-align: center; } div.date_wrapper .date_header span.title { color: @main-color; } div.date_wrapper .date_header span.selection { float: right; text-align: right; color: @main-color; } div.date_wrapper form { position: relative; } div.date_wrapper .lines { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-top: solid 1px #CCC; border-bottom: solid 1px #CCC; position: absolute; top: 93px; left: 0px; width: 100%; height: 24px; } div.date_wrapper .lines div { margin-left: 220px; display: none; line-height: 21px; } div.drum-wrapper { float: left; position: relative; } div.drum figure { text-align: left; } #drum_hours figure, #drum_date figure { text-align: right; } #drum_date, #drum_to_date { margin-left: 10px; margin-right: 5px; } #drum_hours, #drum_minutes, #drum_meridiam { width: 14%; } #drum_hours { margin-left: 10px; } #drum_minutes { margin-left: 4px; } #drum_month { width: 35%; } #drum_date { width: 10%; } #drum_fullYear { width: 16%; } #drum_hours .dial div { margin: 0 7px; } #drum_minutes .dial div { margin: 0 2px; } .img-wrapper { overflow: hidden; height: 270px; background-repeat: no-repeat; background-size: cover; background-position: center center; } #instafeed { padding-top: 40px; padding-bottom: 75px; .flex; flex-flow: wrap; justify-content: center; } .instapic { position: relative; height: 290px; width: 290px; overflow: hidden; float: left; } .instapic a { bottom: 15px; top: 15px; left: 15px; right: 15px; position: absolute; float: left; display: block; overflow: hidden; } #social-blocks img.thumb { width: auto; background:#000; margin-left:-25%; } .insta-counts { position: absolute; bottom: 5px; left: 5px; right: 5px; //background: rgba(120, 50, 120, 0.75); color: @bg-color; padding: 5px 10px; text-align: center; font-size: 12px; line-height: 12px; } .insta-counts>span { margin-left: 5px; margin-right: 15px; } .insta-counts i { font-size: 10px; line-height: 15px; display: inline-block; } .sep-row { padding: 0 5px; } .lang select, #busqueda select { display: none; } .lang .ddrop-item { outline: none; display: block; line-height: 15px; padding: 12px 6px 0 6px; /*width: 65px !important;*/ z-index: 10; position: relative; text-align: center; font-size: 13px; } /* Lang selector */ .lang .ddrop-item.active { text-align: center; margin-bottom: 0; padding-left: 15px !important; font-family: @light-font; color: @bg-color; padding: 0px 6px 0 6px; border: 0.5px solid #fff !important; padding: 15px; width: 100%; margin-bottom: 2px; margin-top: 3px; border-radius: 100px; background: transparent; } .lang .ddrop-item.open { background: @bg-color; font-family: @bold-font; color: @main-color; border-bottom-color: @bg-color !important; } .lang .ddrop-item.active:hover, .lang .ddrop-item.active:focus, .lang .ddrop-item.active:active { color: @main-color !important; background: @bg-color; cursor: pointer; } .lang .ddrop-item.active:hover:before, .lang .ddrop-item.active:focus:before, .lang .ddrop-item.active:active:before { color: @main-color !important; } .lang .ddrop-item:hover { cursor: pointer; } //.lang .ddrop-item:first-child { } .lang .ddrop-item.active.open { color: @main-color; background: #FFF !important; margin-top: 0px; padding-bottom: 15px; padding-top: 15px; border-radius: 25px; } .lang .ddrop { padding: 10px; right: 0px; float: left; font-family: @light-font; padding-left: 10px; display: none; position: absolute; left: 10px; color: #999; border-top: none; padding-bottom: 4px; margin-top: -10px; padding-top: 10px; z-index: 8; max-height: 155px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; padding-bottom: 10px; box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.3); } .lang .ddrop-item.active:hover { font-family: @light-font; } .lang .ddrop-item.active.open, .lang .ddrop-item:hover { font-family: @bold-font; color: @main-color; } ul.lang-aux { font-family: 'Conv_GothaProLig'; .flex-center; margin: 35px 0; border-top: 1px solid rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.7); padding: 35px 0; } ul.user-aux { bottom:161px; border-bottom: none !important; } .lang-aux li { padding: 0 30px; list-style: none; } .lang-aux a { color: white; } .lang-aux a b { font-family: 'Conv_GothaProReg'; } .architect-logo img, .video-logo img { margin:auto; display:block; width: 300px !important; } .busqueda-closed .scroll .close, .busqueda-closed .close { display: none !important; } .video-play img { z-index:2; outline: none; width:150px; height: 150px; margin: auto; position: absolute; left:50% !important; margin-left:-75px; top:50%; margin-top:-75px !important; } .slide-colaboracion .video-play img { margin-top: -75px; } .alert-warning { margin: auto; margin-bottom: 50px; display: table; padding:30px 30px; } #modal_action .modal-dialog { position:relative; } #modal_action .modal-dialog .alert { position:absolute; z-index:20; display:block; left:25px; right:25px !important; width:auto; top:0; } .modal .alert-warning, .contacto .alert-warning { opacity:0.9; transition: 0.5s; background:@main-color; color:@bg-color; } /* Animations temporarily removed */ .collapsing { -webkit-transition: none !important; transition: none !important; display: none !important; } /* Special XS Container */ .col-xxs-1, .col-xxs-10, .col-xxs-11, .col-xxs-12, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxxs-1, .col-xxxs-10, .col-xxxs-11, .col-xxxs-12, .col-xxxs-2, .col-xxxs-3, .col-xxxs-4, .col-xxxs-5, .col-xxxs-6, .col-xxxs-7, .col-xxxs-8, .col-xxxs-9 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xxs-1, .col-xxs-10, .col-xxs-11, .col-xxs-12, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxxs-1, .col-xxxs-10, .col-xxxs-11, .col-xxxs-12, .col-xxxs-2, .col-xxxs-3, .col-xxxs-4, .col-xxxs-5, .col-xxxs-6, .col-xxxs-7, .col-xxxs-8, .col-xxxs-9 { float: left; } .white #contact input.error-field, .white #contact textarea.error-field, .modal .contact-form input.error-field, .modal .contact-form textarea.error-field, .contacto .modal-like input.error-field, .contacto .modal-like textarea.error-field, .error-field { border: 1px solid red !important; } input[type=radio] { display: none; } .sslider { height: 700px; position: relative; perspective: 1000px; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; } .sslider label img { height:auto; max-width: 300px; } .sslider label { display: flex; align-content: center; justify-content: center; height: 100vh; margin-top: 20px !important; max-height: 560px; min-height: 300px; margin: auto; max-width: 65%; border-radius: 0px; position: absolute; left: 0; right: 0; cursor: pointer; background-size: cover; box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); opacity: 1; transition: 0.4s ease; } .projects .sslider { margin-top:35px; margin-bottom:150px; } .projects .sslider label { max-height: 700px; max-width: 75%; } /* #s1:checked ~ #slide4, #s2:checked ~ #slide5, #s6:checked ~ #slide3, #s3:checked ~ #slide1, #s4:checked ~ #slide2, #s5:checked ~ #slide3 { display:none; transform: translate3d(-30%,0,-200px); } #s1:checked ~ #slide6, #s2:checked ~ #slide1, #s3:checked ~ #slide2, #s4:checked ~ #slide3, #s5:checked ~ #slide4,#s6:checked ~ #slide5 { height:38vh; opacity:.3; transform: translate3d(-5%,0, 0); } #s1:checked ~ #slide1, #s2:checked ~ #slide2, #s3:checked ~ #slide3, #s4:checked ~ #slide4, #s5:checked ~ #slide5, #s6:checked ~ #slide6 { transform: translate3d(0,0,0); opacity: 1; z-index: 5; } #s1:checked ~ #slide2, #s2:checked ~ #slide3, #s3:checked ~ #slide4, #s4:checked ~ #slide5, #s5:checked ~ #slide6, #s6:checked ~ #slide1 { height:38vh; opacity:.3; transform: translate3d(5%,0, 0); } #s1:checked ~ #slide3, #s2:checked ~ #slide4, #s3:checked ~ #slide5, #s4:checked ~ #slide6, #s5:checked ~ #slide3, #s6:checked ~ #slide2 { display:none; transform: translate3d(30%,0,-200px); } */ .sslider.logos { height: 100px; position: relative; perspective: 1000px; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; margin-top: 0px; } .sslider.logos label { display: block; align-content: center; justify-content: center; height: auto !important; margin-top: 20px !important; min-height: 50px; margin: auto; max-width: 300px; border-radius: 0px; position: absolute; left: 0; right: 0; cursor: pointer; overflow: hidden; background:#FFF; background-size: cover; box-shadow: none; opacity: 1; padding: 0px; } // Inactivo de la izquierda (SUMAMOS +3 al de la derecha, SOLO TOCAR LOS DOS ULTIMOS) #ss1:checked ~ #sslide4, #ss2:checked ~ #sslide5, #ss3:checked ~ #sslide6, #ss4:checked ~ #sslide7, #ss5:checked ~ #sslide8, #ss6:checked ~ #sslide1, #ss7:checked ~ #sslide2, #ss8:checked ~ #sslide3 { display:none; transform: translate3d(-100%,0,-200px); } // Izquierda del activo (MODIFICA EL PRIMERO y AGREGAR ULTIMO) #ss1:checked ~ #sslide7, #ss2:checked ~ #sslide1, #ss3:checked ~ #sslide2, #ss4:checked ~ #sslide3, #ss5:checked ~ #sslide4, #ss6:checked ~ #sslide5, #ss7:checked ~ #sslide6 { height:30vh; opacity:.3; transform: translate3d(-100%,0, 0); } // Activo (AGREGAR ULTIMO) #ss1:checked ~ #sslide1, #ss2:checked ~ #sslide2, #ss3:checked ~ #sslide3, #ss4:checked ~ #sslide4, #ss5:checked ~ #sslide5, #ss6:checked ~ #sslide6, #ss7:checked ~ #sslide7 { transform: translate3d(0,0,0); opacity: 1; z-index: 1; } // Derecha del activo (AGREGAR OTRO IGUAL AL PENULTIMO Y MODIFICAR ULTIMO sslideX) #ss1:checked ~ #sslide2, #ss2:checked ~ #sslide3, #ss3:checked ~ #sslide4, #ss4:checked ~ #sslide5, #ss5:checked ~ #sslide6, #ss6:checked ~ #sslide7, #ss7:checked ~ #sslide1 { height:30vh; opacity:.3; transform: translate3d(100%,0, 0); } // Inactivo de la derecha (SUMAMOS +2 al de la derecha, SOLO TOCAR LOS DOS ULTIMOS) #ss1:checked ~ #sslide3, #ss2:checked ~ #sslide4, #ss3:checked ~ #sslide5, #ss4:checked ~ #sslide6, #ss5:checked ~ #sslide7, #ss6:checked ~ #sslide1, #ss7:checked ~ #sslide2 { display:none; transform: translate3d(100%,0,-200px); } .sslider.proyecto { height: 100px; position: relative; perspective: 1000px; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; margin-top: -40px; } .sslider.proyecto label { display: block; align-content: center; justify-content: center; height: auto !important; margin-top: 20px !important; min-height: 50px; margin: auto; max-width: 200px; border-radius: 4px; position: absolute; left: 0; right: 0; cursor: pointer; background-size: cover; box-shadow: none; opacity: 1; padding: 0px; } .sslider.proyecto #s3:checked ~ #slide4, .sslider.proyecto #s4:checked ~ #slide5, .sslider.proyecto #s5:checked ~ #slide1 { height:1vh; opacity:.3; transform: translate3d(100%,0, 0); } .sslider.proyecto #s1:checked ~ #slide5, .sslider.proyecto #s2:checked ~ #slide1, .sslider.proyecto #s3:checked ~ #slide2, .sslider.proyecto #s4:checked ~ #slide3, .sslider.proyecto #s5:checked ~ #slide4 { height:1vh; opacity:.3; transform: translate3d(-100%,0, 0); } .sslider.proyecto #s1:checked ~ #slide1, .sslider.proyecto #s2:checked ~ #slide2, .sslider.proyecto #s3:checked ~ #slide3, .sslider.proyecto #s4:checked ~ #slide4, .sslider.proyecto #s5:checked ~ #slide5 { transform: translate3d(0,0,0); opacity: 1; z-index: 1; } .sslider.proyecto #s1:checked ~ #slide1 img, .sslider.proyecto #s2:checked ~ #slide2 img, .sslider.proyecto #s3:checked ~ #slide3 img, .sslider.proyecto #s4:checked ~ #slide4 img, .sslider.proyecto #s5:checked ~ #slide5 img { width: 200px !important; } .sslider.proyecto #s3:checked ~ #slide4 img, .sslider.proyecto #s4:checked ~ #slide5 img, .sslider.proyecto #s5:checked ~ #slide1 img, .sslider.proyecto #s1:checked ~ #slide5 img, .sslider.proyecto #s2:checked ~ #slide1 img, .sslider.proyecto #s3:checked ~ #slide2 img, .sslider.proyecto #s4:checked ~ #slide3 img, .sslider.proyecto #s5:checked ~ #slide4 { width: 230px !important; height: 70px; } .sslider label { background-position: center; } .viewbox-container{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.9 ); z-index: 700; } .viewbox-body{ position: absolute; top: 50%; left: 50%; background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); overflow: auto; } .viewbox-header{ margin: 10px; } .viewbox-content{ margin: 10px; width: 300px; height: 300px; } .viewbox-footer{ margin: 10px; } .viewbox-content .viewbox-image{ width: 100%; height: 100%; } /* buttons */ .viewbox-button-default{ cursor: pointer; height: 64px; width: 64px; } .viewbox-button-default > svg{ width: 100%; height: 100%; background: inherit; fill: inherit; pointer-events: none; transform: translateX(0px); } .viewbox-button-default { fill: #fff; filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); } .viewbox-button-default:hover{ fill: #fff; } .viewbox-button-close{ position:absolute; top:10px; right: 10px; z-index:9; } .viewbox-button-next, .viewbox-button-prev{ position:absolute; top: 50%; height: 128px; width: 128px; margin: -64px 0 0; z-index:9; } .viewbox-button-next{ right: 10px; } .viewbox-button-prev{ left: 10px; } /* loader */ .viewbox-container .loader{ widows: 100%; position: absolute; left: 50%; top: 50%; margin:-25px 0 0 -25px; } .viewbox-container .loader *{ margin: 0; padding: 0; } .viewbox-container .loader .spinner{ width: 50px; height: 50px; position: relative; margin: 0 auto; } .viewbox-container .loader .double-bounce1, .viewbox-container .loader .double-bounce2{ width: 100%; height: 100%; border-radius: 50%; background-color: #999; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .viewbox-container .loader .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .pagination { width:100%; text-align: center; } .pagination a, .pagination strong { padding:10px; } .pagination strong { background:#EAEAEA; } .pagination a:hover { background: #f0f0f0; } .pagination strong { font-weight: bold; } li.social a .tooltip-special { left: 50%; width: 150px; display: block; text-align: center; position: absolute; margin-left: -75px; font-family: @regular-font; background: #FFF; border-radius: 100px; color:@bg-text-color; font-size:12px; padding: 10px; bottom:-50px; visibility: hidden; opacity: 0; transition: visibility 0.5s, opacity 0.5s linear; } li.social a:hover .tooltip-special, li.social a:hover .tooltip-special:before { opacity:1; visibility: visible; transition: visibility 0.5s, opacity 0.5s linear; } li.social a:hover .tooltip-special:before { font-family: 'Glyphicons Halflings'; font-size: 12px; content: "\e253"; position: absolute; top: -11px; color: #FFF; left: 50%; margin-left: -6px; opacity:1; visibility: visible; transition: visibility 0.5s, opacity 0.5s linear; } @-webkit-keyframes sk-bounce{ 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce{ 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } #rct .video iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .titular-archiquectos { margin-top:50px; } .picker__holder { top:40px; }