/* * Vludiant Corp de Mexico - (http://www.vludiant.com) * Project for: SOLOIMPRIME - (http://www.corp.vludiant.com) * Copyright 2012-2020 Vludiant Corp de Mexico * Licensed under MIT */ /****************************************************************************************************************************** MAIN STYLE HEADER MAIN CONTAINER PORTFOLIO SKILLS CONTACT FOOTER *******************************************************************************************************************************/ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * MAIN STYLE * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* EXTERNAL */ /*GOOGLE FONT ROBOTO*/ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /*GOOGLE MATERIAK DESIGN FONT ICONS*/ @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); /*INTERNAL*/ /*@font-face { font-family: 'AvenirNext'; src: url(fonts/AvenirNext-Regular.woff2);}*/ /* SOURCE */ html,body{ letter-spacing: 0em; overflow: auto;cursor: url('../../site/img/cursor/arrow.cur'), pointer;} /* LINK */ a, a:hover, a:focus{ text-decoration: none; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } button:hover{ opacity: .8; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; } button:focus{outline:0;} ::-webkit-scrollbar { background:#000000;width:13px;} ::-webkit-scrollbar-thumb { -webkit-box-shadow:inset 0 0 0px rgba(0, 0, 0, 0.3); box-shadow:inset 0 0 0px rgba(0, 0, 0, 0.3); background:#01062c; } #map { width: 100%; height: 450px; } .material-icons { font-size: inherit; vertical-align: middle; padding-bottom: 0.6%; } .with-separation-top, .with-separation-topB, .with-separation-bottom, .with-separation-bottomB{ position: relative; } .with-separation-bottom:after{ content: ""; background-image: url("../../site/img/extras/breaker.svg"); background-repeat: no-repeat; background-size: cover; background-position: center bottom; position: absolute; bottom: -20px; left: 0; z-index: 3; width: 100%; height: 90px; } .with-separation-bottomB:after{ content: ""; background-image: url("../../site/img/extras/breaker-black.svg"); background-repeat: no-repeat; background-size: cover; background-position: center bottom; position: absolute; bottom: -20px; left: 0; z-index: 9; width: 100%; height: 90px; } .with-separation-top:before{ content: ""; background-image: url("../../site/img/extras/breaker-bottom.svg"); background-repeat: no-repeat; background-size: cover; background-position: center -40px; position: absolute; top: -20px; left: 0; z-index: 4; width: 100%; height: 90px; } .with-separation-topB:before{ content: ""; background-image: url("../../site/img/extras/breaker-bottom-black.svg"); background-repeat: no-repeat; background-size: cover; background-position: center -40px; position: absolute; top: -20px; left: 0; z-index: 99999999999999999999; width: 100%; height: 90px; } ::selection{color: #FFF;} ::-moz-selection{color: #FFF;} /*PAGE LOADER*/ #loader{overflow: hidden; position: fixed; z-index: 100; height: 100%; width: 100%; text-align: center; background-color: #010212; background-image: url("../../site/img/backgrounds/slider-bg.jpg"); background-size: cover; background-repeat: no-repeat; } #loading-logo{ position: relative; top: 33%; margin: 0 auto; } /*DURING PAGE LOADING*/ #loader #loading-logo{ /*background-image: url("../../site/img/intro.svg");*/ width: 387px; height: 387px; margin: 0 auto; z-index: 3; background: #00000a; border: 1px solid rgba(255,255,255,.2); border-radius: 100%; padding: 3%; } #loader .logo-loader-vludiant{ max-width: 233px; } /*svg { margin: 30px auto; width:100%; }*/ .logo-loader-vludiant path{ /* fill: transparent;*/ stroke-dasharray: 475; /*stroke-dasharray: 1600;*/ stroke-dashoffset: -1950; /*stroke-dashoffset: 0;*/ stroke-width: 2; /*stroke: #00a4f1;*/ animation: 7s draw ease-in-out alternate infinite; } @keyframes draw { 100% { stroke-dasharray: 80000; stroke-dashoffset: 0; stroke-width: 133px; fill:#616161; } 80% {fill:#616161;} } @-webkit-keyframes text { 0% {opacity: 1;} 100% {opacity: 0.7;} } .Loader-text { transform: translateY(-50%); margin-top: 33px; } .Loader-text h3{ color: #ffffff; font-size: 17px; animation: none; } .Loader-text h3 span{ animation: text 1s ease-out 0s infinite alternate; -webkit-animation: text 1s ease-out 0s infinite alternate; -moz-animation: text 1s ease-out 0s infinite alternate; } svg:hover path { /* animation: 50s draw linear forwards; stroke-dasharray: 0; stroke-dashoffset: 5; stroke-width: 200px;*/ } /*BOXED LAYOUT*/ body.boxed #page{ width: 95%; margin: 0 auto; overflow: hidden; box-shadow: 0 0 5px 2px rgba(0,0,0,.3); position: relative; background: #FFF; } body.boxed #page #navigation{ width: 95%; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * SECCIONES * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ section {float: left; width: 100%;} .section-black { /*background-image: url(../../site/img/extras/bg_grey.svg);*/ background-repeat: repeat; background-attachment: fixed; background-color: #000000; background-position: center; padding: 3% 0; text-align: center; } .section-white { /*background-image: url(../../site/img/extras/bg_grey.svg);*/ background-repeat: repeat; background-attachment: fixed; background-color: #FFFFFF; background-position: center; padding: 3% 0; } /*BG CIRCLES*/ .section_bg_circles { background: url('../../site/img/extras/bg_circles.png') no-repeat; background-size: cover; background-position: center; padding: 3% 0; text-align: justify; } .section-productos { padding: 3% 0; background: url('../../site/img/extras/blob-middle.svg') no-repeat; background-size: auto; background-position: center; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * SECCIONES EXTRAS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ .section-black h2{ color:#FFFFFF; background-image: -webkit-linear-gradient(#ffffff 0,#ffffff 100%); } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * HEADER * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #header, #header a{ color: #FFF; } #header{ width: 100%; position: relative; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; font-size: 1em; } #header-canvas{ position: relative; z-index: 3; width: 100% !important; height: 65vh; } #header-slider{ width: 100%; z-index: 0; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } #header-slider img{ width: 100%; } #sliderPrev, #sliderNext{ font-size: 2.7em; position: absolute; top: 50%; margin-top: -15px; z-index: 4; opacity: 1; color: #ffffff; } #sliderPrev:hover, #sliderNext:hover{ opacity: .4; } #sliderPrev{ left: 50px; } #sliderNext{ right: 50px; } #section-header{ /*max-height: 100vh;*/ overflow: hidden; } #section-header img{width: 100%;} #section-header.big{ height: 65vh; } #section-header.medium{ height: 33vh; } #section-header.small{ height: 250px !important; } /*HEADER VIDEO*/ #header-video{ width: 100%; z-index: 0; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } #header-video video{ width: 100% !important; } .section-video{ width: 100%; position: relative; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; font-size: 1em; padding: 8% 0;} .section-video h2{color:white;} /* TOP NAVIGATION */ #top-navigation { } #top-navigation ul{ text-align: center; width: 100%; position: fixed; top: 0; z-index: 11; margin: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,.2); background:rgba(0, 0, 0, 0.33); } #top-navigation ul li{ list-style-type: none; display: inline-block; line-height: 30px; padding: 0 10px; font-size: .9em; margin: 0; border-left: 1px solid rgba(255,255,255,.2); opacity: 1; position: relative; } #top-navigation ul li:first-child{ border-left: none; } #top-navigation ul li:hover { opacity: 1; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } #top-navigation ul li i{ padding: 0 8px 0 8px; } #top-navigation ul li.menu-item-has-children ul{ display: none; } #top-navigation ul.sub-menu{ position: absolute; right: -15px; border-bottom: 0; width: 120px; top: 30px; } #top-navigation ul.sub-menu.open{ display: block; } #top-navigation ul.sub-menu li{ font-weight: normal; line-height: 20px; opacity: 1; } #top-navigation span.navigation-social{ padding-right: 6px; } /* SEARCHFORM */ #header #search-container{ display: none; } #header #search-container.clicked{ display: inline-block; } #header #search-toggle{ display: inline-block; } #header #search-toggle i:before{ content: "\f002"; } #header #search-toggle.clicked i:before{ content: "\f00d"; } #header #search-container input, #header #search-container button{ background: transparent; border: 0; padding: 0; } #header #search-container button:hover{ opacity: .6; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } /* MENU */ #navigation{ position: fixed; z-index: 10; top: 55px; width: 100%; /* background: rgba(0, 0, 0, 0.33);*/ height: 56px; } #left-navigation{ text-align: right; padding-left: 0; position: relative; display: block; width: 38%; float: left; background:rgba(0,0,0,.33); border:1px solid rgba(255,255,255,.2); } #right-navigation{ text-align: left; padding-left: 0; position: relative; display: block; width: 38%; float: left; background:rgba(0,0,0,.33); border:1px solid rgba(255,255,255,.2); } #navigation ul li{ display: inline-block; list-style-type: none; margin: 0 20px; padding: 10px 0 16px 0; text-align: center; position: relative; /*text-shadow: 0px 0px 10px rgba(0,0,0,.2);*/ } #navigation ul li.current-menu-item, #navigation ul li:hover{ border-bottom: 1px solid #ffffff; } #navigation ul li a i.fa{ padding-right: 6px; } #navigation ul li a:after { opacity: .7; content: attr(data-description); font-size: .8em; display: block; line-height: 0; margin: 10px 0 -3px; text-align: center; text-transform: uppercase; } #navigation ul li a:hover,#navigation ul li a:hover:after{ opacity: .4; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } /* SUBMENU */ #navigation ul.sub-menu .menu-item-has-children{ position: relative; } #navigation ul.sub-menu{ display: none; position: absolute; top: 67px; width: 160px; padding-left: 0; z-index: 3; background: #01062c;border-radius: 13px; } #navigation ul.sub-menu::before{ width: 100%; content: ''; display: inline-block; position: absolute; top: -17px; right: 0; height: 20px; } #navigation ul.sub-menu::after{ width: 0; height: 0; content: ''; display: inline-block; position: absolute; border-color: transparent; border-style: solid; -webkit-transform: rotate(360deg); transform: rotate(360deg); border-width: 0 8px 8px; border-bottom-color: #01062c; top: -8px; left: 9px; left: auto; right: 50%; margin-right: -7px; } #navigation.navigation-fixed ul.sub-menu li a { color: #ffffff; } #navigation ul.sub-menu.open{ display: block; } #navigation ul.sub-menu li, #top-navigation ul.sub-menu li{ position: relative; text-shadow: none; margin: 0; height: auto; text-align: left; float: none; width: 100%; display: block; padding: 0; list-style: none; z-index:99; } #navigation ul.sub-menu li:last-child, #navigation ul.sub-menu li:last-child:hover, #top-navigation ul.sub-menu li:last-child, #top-navigation ul.sub-menu li:last-child:hover{ border-bottom: 0; } #navigation ul.sub-menu li a, #top-navigation ul.sub-menu li a{ text-transform: inherit; font-size: 0.8em; width: 100%; line-height: 1.1em; display: block; margin: 0; padding: 12px 10px 10px 10px; } #navigation ul.sub-menu li a:hover, #top-navigation ul.sub-menu li a:hover{ opacity: 1; } #navigation ul.sub-menu li:hover, #top-navigation ul.sub-menu li:hover{ border-bottom: 1px solid; } #navigation ul.sub-menu li:hover:after { border: 0; border-color: transparent; } /* LANGUAGE SWITCHER IN MAIN MENU */ #navigation ul li.language-switcher{ border-bottom: 0 !important; } #navigation ul li.language-switcher:after{ border: 0 !important; } #navigation ul li.language-switcher a{ top: -10px; position: relative; } #logo-navigation span{ /* opacity: .9;*/ position: absolute; font-size: .9em; bottom: -7px; display: block; text-shadow: 0px 0px 4px rgba(0,0,0,.5); width: 100%; } /* NAVIGATION FIXED*/ #navigation.navigation-fixed{ background: #01062c; z-index: 11; top: 0; height: 56px; } #navigation.navigation-fixed:before{ content: ""; background-image: url("../../site/img/extras/breaker-fixed-header.svg"); background-repeat: no-repeat; background-size: cover; background-position: center top; position: absolute; top: 47px; z-index: 0; width: 100%; height: 35px; right:0; } #navigation.navigation-fixed #logo-navigation span{ display: none; } /*#navigation.navigation-fixed a#logo-navigation{ top: 0; }*/ #navigation.navigation-fixed #left-navigation, #navigation.navigation-fixed #right-navigation{ margin-bottom: 0; border:none; background: none; } #navigation.navigation-fixed ul li{ padding: 0; line-height: 55px; } #navigation.navigation-fixed ul.sub-menu li{ line-height: 26px; } #navigation.navigation-fixed ul li{ text-shadow: none; } #navigation.navigation-fixed ul li a:after{ display: none; } #navigation.navigation-fixed ul.sub-menu li a, #navigation.navigation-fixed ul li.current-menu-item a, #navigation.navigation-fixed ul li a:hover{ opacity: 1; } #navigation.navigation-fixed ul li.language-switcher a{ top: 0; } #navigation.navigation-fixed ul.sub-menu{ z-index: 10; right: -60px; } .logo-vludiant{ border-color: transparent; box-shadow: none; border-top: 0;} /* MOBILE MENU */ #navigation-mobile, #close-navigation-mobile, #show-mobile-menu{ display: none;} #show-mobile-menu{ position: fixed; z-index: 13; /* padding-left: 17px; padding-top: 23px;*/ padding: 10px 0px 13px 10px; font-size: 2.2em; top: 0px; /*width: 100%;*/ cursor: pointer; -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); } /*#navigation */#show-mobile-menu.mobile-button-left{ left: 267px;} #navigation-mobile.display-nav-menu{ left: 0px; background:#01062c; overflow: hidden;} #navigation-mobile{ position: fixed; width: 250px; z-index: 12; top: 0; height: 100%; padding: 30px 10px; left: -400px; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-y: scroll; -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); } #header a#close-navigation-mobile{ position: fixed; z-index: 10; padding-left: 17px; padding-top: 23px; font-size: 2.2em; top: 0px; cursor: pointer; left: 240px; display: block; } #header a#close-navigation-mobile:hover{ color: #FFF; } #navigation-mobile #left-navigation, #navigation-mobile #right-navigation{ float: none; text-align: left; width: 100%; list-style-type: none; } #navigation-mobile li{ line-height: 30px; } #header #navigation-mobile li a{ display: block; padding: 5px 0; /*border-bottom: 1px solid rgba(255,255,255,.2);*/ } #header #navigation-mobile li a:hover, #header #navigation-mobile li.current-menu-item a{ color: #FFF; } #header #navigation-mobile li a span{ background: #060A20; width: 33px; height: 33px; text-align: center; line-height: 2; margin-right: 13px;} #header #navigation-mobile ul.sub-menu li{ list-style-type: none; font-size: .9em; line-height: 20px; } #header #navigation-mobile #logo-navigation{display: none;} #header #navigation-mobile ul.sub-menu li a{ border-bottom: 0; } /* SCROLL BOTTOM */ #scroll-bottom{ position: fixed; bottom: 0; width: 100%; z-index: 4; text-align: center; } #scroll-bottom a{ } #scroll-bottom .scroll { width: 60px; height: 60px; animation: down 1.5s infinite; -webkit-animation: down 1.5s infinite;margin: 0 auto; } @keyframes down { 0% { transform: translate(0); } 20% { transform: translateY(15px); } 40% { transform: translate(0); } } @-webkit-keyframes down { 0% { transform: translate(0); } 20% { transform: translateY(15px); } 40% { transform: translate(0); } } #scroll-bottom .scroll:hover{ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } /* - Scroll Top Button */ .scroll-botom-button { position: fixed; right: 17px; bottom: 40px; z-index: 20; cursor: pointer; -webkit-transition: 300ms ease-in-out; -o-transition: 300ms ease-in-out; transition: 300ms ease-in-out; -webkit-transition-property: opacity, visibility; -o-transition-property: opacity, visibility; transition-property: opacity, visibility; color: #000; } .scroll-botom-button i { position: absolute; top: 50%; left: 50%; color: #fff; font-size: 16px; margin-top: -.5em; margin-left: -.5em; -webkit-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; z-index: 2; } .scroll-botom-button svg { display: block; fill: #CECECE; -webkit-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .scroll-botom-button .label { position: absolute; font-family: 'Roboto Condensed'; font-size: 12px; font-weight: 700; text-transform: uppercase; white-space: nowrap; left: 50%; bottom: 100%; color: #000000; -webkit-transform: rotate(-90deg) translateX(-30px); -ms-transform: rotate(-90deg) translateX(-30px); transform: rotate(-90deg) translateX(-30px); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; opacity: 0; pointer-events: none; z-index: -1; background: rgba(255,255,255,.33); border: 1px solid rgba(0,0,0,.2); padding: 5px; border-radius: 5px; } .scroll-botom-button:hover svg { fill: #131313; -webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.29)); filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.29)); } .scroll-botom-button:hover .label { opacity: 1; -webkit-transform: rotate(-90deg) translateX(0px); -ms-transform: rotate(-90deg) translateX(0px); transform: rotate(-90deg) translateX(0px); } .scroll-botom-button.white { color: #fff; } .scroll-botom-button.white svg { fill: #414141; } .scroll-botom-button.white:hover i { color: #000; } .scroll-botom-button.white:hover svg { fill: #fff; } /* TEXT TICKER */ #ticker{ position: absolute; z-index: 2; width: 60%; text-align: center; top: 33%; color: white;padding: 0px 13%; } #ticker h2{ font-weight: 300; margin-bottom: 13px; position: relative; font-size: 27px; margin-top: 13px; } #ticker h3{ font-weight: 300; margin-bottom: 13px; position: relative; font-size: 27px; } #ticker-text ul li{ text-align: center; padding: 0 40px; list-style-type: none; font-size: 33px; } #ticker-text ul{ width: 100%; } #header .with-breaker:after{ display: none; } #header .with-breaker{ margin-bottom: 20px; padding-bottom: 10px; } #header .with-breaker:before{ width: 80px; margin-left: -40px; bottom: -10px; opacity: .6; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * MAIN CONTAINER * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ .main-container{ padding: 0px 0 0px 0; z-index: 2; position: relative; } .main-container h1, .main-container h2, .main-container h3, .main-container h4{ margin: 40px 0 20px 0; } .with-breaker{ margin-bottom: 30px; text-align: center; position: relative; color: #01062c; background-image: -webkit-linear-gradient(-45deg,#060A20 0,#01062c 100%); background-image: -moz-linear-gradient(-45deg,#060A20 0,#01062c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; background-clip: text; text-fill-color: transparant; } .with-breaker:before{ width: 140px; height: 2px; z-index: 3; display: block; content: ""; left: 50%; margin-left: -70px; background: #E7E7E7; position: absolute; bottom: 14px; } h1.with-breaker:before{ bottom: 21px; } h2.with-breaker:before{ bottom: 18px; } h3.with-breaker:before{ bottom: 14px; } h4.with-breaker:before{ bottom: 11px; } h4.with-breaker:after{ margin-top: 8px; } .with-breaker:after{ content: "\f02e"; font-weight: normal; font-style: normal; font-family: "FontAwesome"; display: block; margin-top: 15px; font-size: .6em; } .with-breaker span{ display: block; font-size: .65em; text-transform: none; margin-top: 10px; letter-spacing: normal; } .main-container p{ line-height: 1.7em; text-align:justify; text-transform:capitalize; } /*.main-container a:hover{ opacity: .4; }*/ .main-container code { font-size: .8em; position: relative; top: -1px; color: #FFF; border-radius: 2px; } .main-container hr{ border: 0; margin: 40px auto; width: 60px; border-top: 2px solid; } .main-container hr.align-left{ border: 0; margin: 0px 0 20px 0; width: 60px; border-top: 2px solid; } .main-container ul, .main-container ol{ margin: 20px 0; } .main-container li{ line-height: 2em; } .main-container blockquote{ border: none; font-size: 1.2em; line-height: 1.9em; margin: 30px 0 20px 0; padding: 0; } .main-container blockquote:before{ content: "\f10d"; font-family: "FontAwesome"; font-style: normal; font-size: 1.4em; float: left; margin: 0 20px -18px 0; } .main-container pre{ border: none; } .main-container .center{ text-align: center; } /*.main-container .btn{ margin: 10px; border: 0; padding: 15px 30px 14px 30px; font-size: .9em; }*/ .main-container .btn i{ padding-right: 6px; } .main-container .icon{ font-size: 3em; text-align: center; margin: 20px 0 0 0; } .main-container .surline{ background: #FBFF9E; padding: 2px 3px; border-radius: 1px; } .main-container .dropcap{ font-size: 2.5em; float: left; margin: 10px 20px 10px 0; } .main-container .welcome-message{ text-transform: none; margin-top: 20px; margin-bottom: 50px; padding: 0 10%; line-height: 1.5em; } /* FAQ */ .main-container .faqs-container{ padding: 0 20px; } .main-container li.faq{ list-style-type: none; } .main-container h4.faq-link{ border-bottom: 1px solid; padding: 16px 0; margin: 20px 0; } .main-container h4.faq-link a:hover i{ -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } .main-container h4.faq-link i{ padding-right: 10px; position: relative; } .main-container .faq-content{ display: none; } /* SOCIAL ICONS */ .main-container ul.social-list{ margin-top: 10px; padding-left: 0; } .main-container ul.social-list li{ display: inline-block; padding-right: 15px; font-size: 1.2em; } .main-container ul.social-list li:hover a{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity: 1; } .main-container ul.share-buttons{ padding-left: 0; text-align: center; list-style-type: none; margin: 0; } .main-container ul.share-buttons li{ display: inline; } .main-container ul.share-buttons li a.button-facebook{ background: #3B5998; color: #FFF; } .main-container ul.share-buttons li a.button-twitter{ background: #00ACED; color: #FFF; } /* SEARCHFORM */ #container-search-container{ text-align: center; width: 80%; margin: auto; } #container-search-container #s{ width: 100%; display: inline-block; padding-top: 23px; padding-bottom: 23px; width: 50%; box-shadow: none; top: 2px; position: relative; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * SKILLS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* SKILLS TABS */ .tabs-container{ width: 90%; margin: 40px auto; } .nav-tabs{ width: 25%; float: left; border-right: 1px solid #E7E7E7; border-bottom: 0; position: relative; z-index: 2; } .nav-tabs>li:nth-of-type(even){ background: #F8F8F8; } .nav-tabs>li{ display: block; float: none; margin-bottom: 0; } .nav-tabs>li>a{ border-radius: 0; border-bottom: 1px solid #E7E7E7; text-align: right; padding: 25px; margin-right: 0; } .nav-tabs>li>a i{ padding-right: 5px; } .nav-tabs>li>a:hover{ opacity: .9; } .nav-tabs > li:last-child > a{ border-bottom: 0; position: relative; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{ border-left: 0; border-right: 0; border-top: 0; } .nav-tabs>li.active>a:after, .nav-tabs>li.active>a:hover:after, .nav-tabs>li.active>a:focus:after{ content: ""; width: 0; height: 0; position: absolute; bottom: 0; right: 0; border-style: solid; border-width: 0 0 10px 10px; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{background: inherit;} .tab-pane{ width: 75%; padding: 50px; float: left; display: block; z-index: 1; position: relative;; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-animation-duration: 0.7s; -o-animation-duration: 0.7s; -moz-animation-duration: 0.7s; animation-duration: 0.7s; } .tab-pane h2{ margin-top: 0; margin-bottom: 15px; } h2 i, h1 i{ margin-right: 18px; font-size: 1.6em; position: relative; bottom: -2px; } /* SKILLS SHORTCODE */ .skills{ margin: 40px auto 30px auto; width: 100%; } .skills-row{ width: 100%; } .skill{ border: 1px solid #E7E7E7; padding: 20px 40px; width: 33%; text-align: center; } .skill:hover{ -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; color: #FFF; cursor: pointer; } .skill:hover h4 i{ position: relative; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } .skill h4{ margin-top: 0; margin-bottom: 15px; } .skill h4 i{ margin-right: 18px; font-size: 1.6em; position: relative; bottom: -2px; } .skill h4 span{ margin-right: 18px; font-size: 1.6em; position: relative; bottom: -2px; } .skills .skills-row:first-child .skill{ border-top: 0; } .skills .skills-row:last-child .skill{ border-bottom: 0; } .skills .skills-row .skill:first-child{ border-left: 0; } .skills .skills-row .skill:last-child{ border-right: 0; } .skill-button{ margin-bottom: 60px; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * PORTFOLIO * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ .main-container h1.project-title{ margin-bottom: 20px; } /* PORTFOLIO FILTERS */ #portfolio-filters{ text-align: center; /* margin-bottom: 50px;*/ background:#000; } /* SINGLE PAGE */ .flexslider.image-slider{ margin: 25px 0 10px 0; } .flexslider.image-slider img{ max-width: 100%; border-radius: 5px; } /*POSTMETADATAS*/ .main-container ul.post-metadatas{ padding-left: 0; list-style-type: none; margin-top: 0; } .main-container ul.post-metadatas li i{ padding-right: 8px; } /* PORTFOLIO SHORTCODE (http://tympanus.net/Development/HoverEffectIdeas/)*/ #portfolio-container{ width: 100%; /*margin: 0px auto 10px auto;*/ position: relative; zoom: 1; text-align: center; } #portfolio-container figure { position: relative; z-index: 1; display: inline-block; overflow: hidden; text-align: center; cursor: pointer; /*width: 25%;*/ } #portfolio-container figure img { position: relative; display: block; height: auto; max-width: 100%; background:#FFF; } #portfolio-container figure figcaption { padding: 2em; color: #fff; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color:rgba(0, 3, 3, 0.5); } #portfolio-container figure:hover figcaption { background-color:transparent; background: -moz-linear-gradient(bottom, rgba(0,0,0,.5) 1%, rgba(0,0,0,.1) 45%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(bottom, rgba(0,0,0,.5) 1%, rgba(0,0,0,.1) 45%, rgba(255,255,255,0) 100%); background: -o-linear-gradient(bottom, rgba(0,0,0,.5) 1%, rgba(0,0,0,.1) 45%, rgba(255,255,255,0) 100%); background: -ms-linear-gradient(bottom, rgba(0,0,0,.5) 1%, rgba(0,0,0,.1) 45%, rgba(255,255,255,0) 100%); background: linear-gradient(to top, rgba(0,0,0,.5) 1%, rgba(0,0,0,.1) 45%, rgba(255,255,255,0) 100%); } #portfolio-container figure figcaption::before, #portfolio-container figure figcaption::after { pointer-events: none; } #portfolio-container figure figcaption, #portfolio-container figure a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #portfolio-container figure a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; } figure.effect-sadie figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 75%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 75%); content: ''; opacity: 1; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); } figure.effect-sadie h4 { position: absolute; top: 50%; left: 0; opacity: 0; font-size: 1.2em; width: 100%; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } figure.effect-sadie figcaption::before, figure.effect-sadie p { position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; opacity: 1; text-transform: none; font-size: .9em; color: #FFF; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } figure.effect-sadie:hover h4 { color: #fff; opacity: 1; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0); } figure.effect-sadie:hover figcaption::before , figure.effect-sadie:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /*.portfolio-button{ position: relative; margin-bottom:25px; }*/ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * CUSTOM SECTION SHORTCODE * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ .custom-section-container{ padding: 20px 0 10px 0; color: #FFF; position: relative; } .custom-section-container .container:before{ content: "\f0c0"; font-family: "FontAwesome"; position: absolute; font-size: 15em; opacity: .2; left: -30px; top: -20px; } .custom-section-container .container{ padding: 40px 0 35px 0; } .custom-section-text, .custom-section-buttons{ width: 50%; float: left; } .custom-section-text{ padding-right: 10%; border-right: 1px solid #FFF; } .custom-section-text p{ opacity: .7; } .custom-section-text h2{ margin: 15px 0 15px 0; } .custom-section-buttons{ text-align: right; padding-top: 20px; position: relative; } .custom-section-buttons:before{ content: "\f0da"; position: absolute; font-family: "FontAwesome"; left: -0.5px; top: 50%; } .main-container .custom-section-buttons .btn{ background: transparent; z-index: 10; position: relative; border: 1px solid #FFF; color: #FFF;padding: 15px 30px 14px 30px; font-size: .9em; } .main-container .custom-section-buttons a.btn:hover{ background: #FFF; border-color: #FFF; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * BOTONES * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ .v_material_btn { display: block; position: absolute; background: rgba(200, 200, 200, 0.2); opacity: 1; -webkit-border-radius: 50%; border-radius: 50%; pointer-events: none; -webkit-transform: scale(0); transform: scale(0); } .v_material_btn.v_material_animate { -webkit-animation: material .8s linear; animation: material .8s linear; } @keyframes material { 100% { opacity: 0; transform: scale(2.5); } } /*BOTON GENERAL*/ .btn { background-image: none; overflow: hidden; position: relative; -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ABOUT * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* TEAM SHORTCODE */ .team-single{ text-align: center; margin-top: 20px; } .team-single img{ border-radius: 50%; width: 140px; } .team-single h3{ margin-top: 25px; margin-bottom: 15px; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * PARTNERS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ .partners-slide img{ max-width: 100%; } .partners-slide a{ opacity: 0.7; width: 70%; display: block; margin: 10px auto; -webkit-filter:grayscale(100%); } .partners-slide a:hover{ opacity: 1; -webkit-filter:grayscale(0%); } #partners-slider .flex-direction-nav a{ margin: -40px 0 0; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * BLOG * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* BLOG GRID */ .main-container ul.blog-grid { list-style-type: none; padding-left: 0; margin: 0px 0; } .blog-grid li.blog-post:first-child{ border-radius: 5px 5px 0 0 ; } .blog-grid li.blog-post:first-child img{ border-radius: 0px 5px 0px 0px; } .blog-grid li.blog-post{ height: 300px; } .blog-grid>li:nth-of-type(odd){ background: #F8F8F8; } .blog-grid>li:nth-of-type(odd) .blog-thumbnail{ float: right; margin-right: 0; margin-left: 45px; } .blog-grid>li:nth-of-type(odd) .blog-content{ text-align: right; } .blog-grid>li:nth-of-type(odd) .blog-button{ text-align: left; } .blog-grid>li:nth-of-type(odd) .blog-sum-up{ text-align: right; } .blog-grid .blog-thumbnail{ height: 300px; float: left; margin-right: 45px; } .blog-grid .blog-thumbnail a{ max-width: 100%; overflow: hidden; } .blog-grid .blog-thumbnail a img{ height: 300px; } .blog-grid .blog-content{ padding: 35px 50px 0 50px; height: 300px; } .blog-sum-up{ text-align: left; } .main-container a.blog-post-title h2{ margin: 0; padding-bottom: 10px; } .main-container .blog-grid ul.post-metadatas{ margin-bottom: 10px; } .blog-button{ text-align: right; } /* BLOG SINGLE */ .single-post ul.post-metadatas{ margin-bottom: 10px; } .single-post .blog-content{ padding-top: 40px; } #comments-container{ background: #F8F8F8; padding: 80px 0; } .main-container ol.comment-list{ padding-left: 0; width: 80%; margin: auto; } .comment-list li{ background: #FFF; list-style-type: none; border-radius: 3px; padding: 40px 40px 30px 40px; position: relative; margin-bottom: 50px; } .comment-list li p{ padding-left: 95px; } .comment-list li:last-child{ margin-bottom: 0; } .comment-author img{ border-radius: 50%; float: left; margin: 10px 20px 20px 0; width: 75px; } .comment-meta{ padding: 0px 0 10px 0; } .comment-list li:before { font-size: 5em; position: absolute; left: 30px; top: 65px; } .comment-list .children li:before{ font-family: "FontAwesome"; content: "\f064"; font-size: 2em; top: 80px; left: -20px; } #comment-form{ margin: 50px auto !important; width: 50%; } /* BLOG SHORTCODE */ #blog-container:after{ bottom: 0; } #blog-container .flexslider .blog-post{ background: #F8F8F8; } #blog-container .flexslider .blog-post:nth-of-type(odd){ background: #FFF; } #blog-container .blog-thumbnail{ height: 200px; text-align: center; display: block; overflow: hidden; } #blog-container .blog-thumbnail img{ width: 100%; height: auto; } #blog-container .blog-thumbnail i{ font-size: 4em; position: relative; top: 40%; } #blog-container .blog-thumbnail:hover{ opacity: .4; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; } #blog-container .blog-content{ padding: 20px 40px 20px 40px; } #blog-container .blog-sum-up{ text-align: justify; } #blog-container .blog-post-title h2{ margin: 0; font-size: 1.6em; } #blog-container a.blog-post-title{ padding: 10px 20px 15px 20px !important; display: block; } #blog-container .post-content{ padding: 5px 20px; } #blog-container .blog-button{ padding-bottom: 30px; text-align: center; } #blog-container .blog-button .btn.btn-default{ background: transparent; border: 1px solid; } #blog-container ul.post-metadatas{ margin-bottom: 10px; } #blog-container ul.post-metadatas li{ padding-left: 0; } .blog-button{ margin-bottom: 20px; margin-top: 10px; } #blog-container .blog-button a.btn.btn-default:hover{ opacity: 1 !important; color: #FFF; } .common { box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.07); padding: 40px 47px; border-radius: 4px; } .search-wrap form { position: relative; overflow: hidden; border-radius: 4px; } .search-wrap form [type=search] { border: 1px solid #ececec; color: #444444; padding: 14px 20px; width: 100%; font-weight: 300; outline: none; } .search-wrap form ::-webkit-input-placeholder { color: #444; } .search-wrap form ::-ms-input-placeholder { color: #444; } .search-wrap form ::placeholder { color: #444; } .search-wrap form button { background: transparent; border: medium none; color: #222222; position: absolute; display: block; right: 0; top: 50%; transform: translateY(-50%); height: 100%; padding: 0 20px; font-size: 20px; cursor: pointer; transition: all 0.5s ease 0s; outline: none; } .search-wrap form button:hover { background: #FF6D00; color: #ffffff; } .recent-post .recent-post-widget { display: flex; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-bottom: 15px; margin-bottom: 15px; } .recent-post .recent-post-widget .post-img { width: 100px; } .recent-post .recent-post-widget .post-img img { width: 100%; border-radius: 3px; } .recent-post .recent-post-widget .post-desc { padding-left: 25px; } .recent-post .recent-post-widget .post-desc a { color: #222222; font-weight: 500; } .recent-post .recent-post-widget .post-desc a:hover { color: #FF6D00; } .recent-post .recent-post-widget .post-desc .date { font-size: 14px; color: #555555; font-weight: 300; display: block; } .recent-post .recent-post-widget .post-desc .date i { font-size: 12px; line-height: 12px; color: #555555; font-weight: 400; } .recent-post .recent-post-widget:last-child { margin: 0; padding: 0; border: none; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * CONTACT * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* FORM PROCESSING*/ #form_processing .alert-success, #form_processing .alert-danger{ width: 100%; height: 100%; text-align: center; border: 0; padding-top: 10%; } /* CONTACT MAP */ #GoogleMap{ width: 100%; height: 290px; margin: 35px 0; border-radius: 5px; } /* CONTACT FORM */ #contact-form, #comment-form{ margin: 35px 0; } #contact-form .control-group, #comment-form .control-group { margin: 25px 0; } #contact-form input.form-control, #contact-form textarea.form-control, #contact-form select.form-control, #comment-form input.form-control, #comment-form textarea.form-control, #comment-form select.form-control{ width: 100%; display: block; box-shadow: none; } /* CONTACT SHORTCODE */ .contact-boxes{ width: 100%; table-layout: fixed; display: table; } .contact-box{ color: #FFF; display: table-cell; padding: 60px 25px 50px 25px; overflow: hidden; position: relative; text-align: center; } .contact-box:before{ font-family: "FontAwesome"; position: absolute; font-size: 15em; opacity: .4; left: -30px; top: 20px; } .contact-box.contact-box-email:before{content: "\f003";} .contact-box.contact-box-facebook:before{content: "\f09a";} .contact-box.contact-box-twitter:before{content: "\f099";} .contact-box.contact-box-google:before{content: "\f0d5";} .contact-box.contact-box-skype:before{content: "\f08c";} .contact-box.contact-box-email{background: #000000;} .contact-box.contact-box-facebook{background: #4267b2;} .contact-box.contact-box-twitter{background: #1da1f2;} .contact-box.contact-box-google{background: #dd4b39;} .contact-box.contact-box-skype{background: #007AB9;} .contact-box.contact-box-email a.btn.btn-default:hover{color: #000000;} .contact-box.contact-box-facebook a.btn.btn-default:hover{color: #4267b2;} .contact-box.contact-box-twitter a.btn.btn-default:hover{color: #1da1f2;} .contact-box.contact-box-google a.btn.btn-default:hover{color: #dd4b39;} .contact-box.contact-box-skype a.btn.btn-default:hover{color: #007AB9;} .contact-box h2{ margin: 0 0 20px 0; } .contact-box p{ color: #FFF; opacity: .8; font-size: 1em; min-height: 45px; } .contact-box a.btn.btn-default{ background: transparent; border: 1px solid rgba(255,255,255,.6); color: rgba(255,255,255,1);padding: 15px 30px 14px 30px; font-size: .9em; } .contact-box a.btn.btn-default:hover{ border: 1px solid #FFF; background: #FFF; opacity: 1; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * FOOTER * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #footer{ padding-top: 70px; background: #01062c; text-align:justify; text-transform:capitalize; } #footer a:hover{ opacity: .6; } #footer .btn{ border: 1px solid; padding: 7px; font-size: 13px; } #footer P{color: #FFFFFF;} #footer h4{color: #FFFFFF;margin-top:0px;} #footer LI{color: #FFFFFF;} /* WIDGETS */ #widgets{ padding-bottom: 45px; } .widget{ /* padding: 0 50px;*/ } .widget h4{ font-size: 1.4em; margin: 0 0 27px 0; margin-top: 13px !important; } .widget a.btn.btn-default{ margin-top: 15px; background: transparent; font-size: .9em; border-radius: 2px; } .widget a.btn.btn-default:hover{ border-color: white; } .widget a.btn.btn-default i{ padding-right: 8px; } .widget ul{ padding-left: 5px; list-style-type: none; margin: 0; } .widget ul li{ line-height: 1.8em; } .widget ul li:before{ /* content: "\f105"; padding-right: 10px; font-family: "FontAwesome";*/ } .widget ul.widget-social{ margin-top: 10px; } .widget ul.widget-social li{ display: inline-block; padding-right: 15px; } /*.widget ul.widget-social li:before{ content: ""; padding-right: 0; } .widget ul.widget-social li:hover a{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }*/ /*#widgets .widget ul li.contact-address:before, #widgets .widget ul li.contact-phone:before{ color: #FFF; } .widget ul li.contact-address:before{ content: "\f0f7"; } .widget ul li.contact-phone:before{ content: "\f095"; } .widget ul li.correo:before{ content: "\f0e0"; }*/ .widget ul li span{ padding-right: 10px; font-size: 17px; } .footer-logo{ width: 187px; margin-bottom: 30px; } /* COPYRIGHT */ #copyright{ padding: 15px 0 0 10px; font-size: .9em;border-top: 1px solid rgba(255,255,255,.2); } #copyright p{ display: inline-block; } #footer-navigation{ display: inline; padding-left: 10px; } #footer-navigation li{ display: inline-block; } #footer-navigation li:after{ content: "|"; padding: 0 10px; } #footer-navigation li:last-child:after{ content: ""; padding: 0; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * PLUGINS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* FLEXSLIDER */ /* * jQuery FlexSlider v2.2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets *********************************/ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0; padding: 0; max-width: 100%; overflow: hidden;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; list-style-type: none; float: left;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides div {display: block; overflow: hidden;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider { margin: 0px auto 0 auto;width: 100%; position: relative; zoom: 1; z-index: 3;} .flex-viewport { width: 100%; max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { margin: 0 !important; padding: 0 !important; } /* Direction Nav */ .flex-direction-nav {*height: 0;} .flex-direction-nav a { display: block; width: 40px; height: 50px; margin: -22px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .flex-direction-nav .flex-prev { left: -50px; } .flex-direction-nav .flex-next { right: -50px; text-align: right; } .flexslider:hover .flex-prev { opacity: 0.7; left: 20px; color:#fff !important;} .flexslider:hover .flex-next { opacity: 0.7; right: 20px; color:#fff !important;} .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; } .flex-direction-nav a:before { font-family: "FontAwesome"; padding-top: 15px; font-size: 40px; display: inline-block; content: "\f104"; } .flex-direction-nav a.flex-next:before { content: "\f105"; } /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: 10px; text-align: center;} .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.1); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px;} .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.3); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.3); cursor: default; } @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} .flex-direction-nav .flex-next { opacity: 1; right: 10px;} } /*PACE*/ .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace .pace-activity { display: block; position: fixed; z-index: 2000; top: 0; right: 0; width: 300px; height: 300px; background: #EEEEEE; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); transform: translateX(100%) translateY(-100%) rotate(45deg); pointer-events: none; } .pace.pace-active .pace-activity { -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); transform: translateX(50%) translateY(-50%) rotate(45deg); } .pace .pace-activity::before, .pace .pace-activity::after { position: absolute; bottom: 30px; left: 50%; display: block; border: 5px solid #01062c; border-radius: 50%; content: ''; } .pace .pace-activity::before { margin-left: -40px; width: 80px; height: 80px; border-right-color: #E0E0E0; /*circulos exteriores*/ border-left-color: #E0E0E0; /*circulos exteriores*/ -webkit-animation: pace-rotation 3s linear infinite; animation: pace-rotation 3s linear infinite; } .pace .pace-activity::after { bottom: 50px; margin-left: -20px; width: 40px; height: 40px; border-top-color: #E0E0E0; /*circulos interiores*/ border-bottom-color: #E0E0E0; /*circulos interiores*/ -webkit-animation: pace-rotation 1s linear infinite; animation: pace-rotation 1s linear infinite; } @-webkit-keyframes pace-rotation { 0% { -webkit-transform: rotate(0deg);transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg);transform: rotate(359deg); } } @keyframes pace-rotation { 0% { -webkit-transform: rotate(0deg);transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg);transform: rotate(359deg); } } /*COLOR FONT AWESOME SOCIAL ICONS */ .social-list a:hover .fa-adn{color:#504e54;} .social-list a:hover .fa-apple{color:#aeb5c5;} .social-list a:hover .fa-android{color:#A5C63B;} .social-list a:hover .fa-bitbucket,.social-list .fa-bitbucket-square{color:#003366;} .social-list a:hover .fa-bitcoin,.social-list .fa-btc{color:#F7931A;} .social-list a:hover .fa-css3{color:#1572B7;} .social-list a:hover .fa-dribbble{color:#F46899;} .social-list a:hover .fa-dropbox{color:#018BD3;} .social-list a:hover .fa-facebook,.social-list .fa-facebook-square{color:#3C599F;} .social-list a:hover .fa-flickr{color:#FF0084;} .social-list a:hover .fa-foursquare{color:#0086BE;} .social-list a:hover .fa-github,.social-list .fa-github-alt,.social-list .fa-github-square{color:#070709;} .social-list a:hover .fa-google-plus,.social-list .fa-google-plus-square{color:#CF3D2E;} .social-list a:hover .fa-html5{color:#E54D26;} .social-list a:hover .fa-instagram{color:#A1755C;} .social-list a:hover .fa-linkedin,.social-list .fa-linkedin-square{color:#0085AE;} .social-list a:hover .fa-linux{color:#FBC002;color:#333;} .social-list a:hover .fa-maxcdn{color:#F6AE1C;} .social-list a:hover .fa-pagelines{color:#241E20;color:#3984EA;} .social-list a:hover .fa-pinterest,.social-list .fa-pinterest-square{color:#CC2127;} .social-list a:hover .fa-renren{color:#025DAC;} .social-list a:hover .fa-skype{color:#01AEF2;} .social-list a:hover .fa-stack-exchange{color:#245590;} .social-list a:hover .fa-stack-overflow{color:#FF7300;} .social-list a:hover .fa-trello{color:#265A7F;} .social-list a:hover .fa-tumblr,.social-list .fa-tumblr-square{color:#314E6C;} .social-list a:hover .fa-twitter,.social-list .fa-twitter-square{color:#32CCFE;} .social-list a:hover .fa-vimeo-square{color:#229ACC;} .social-list a:hover .fa-vk{color:#375474;} .social-list a:hover .fa-weibo{color:#D72B2B;} .social-list a:hover .fa-windows{color:#12B6F3;} .social-list a:hover .fa-xing,.social-list .fa-xing-square{color:#00555C;} .social-list a:hover .fa-youtube,.social-list .fa-youtube-play,.social-list .fa-youtube-square{color:#C52F30;} .grid { position: relative; clear: both; padding: 1em 0 4em; list-style: none; text-align: center; width: 100%; } /* Common style */ .grid figure { position: relative; float: left; overflow: hidden; /* margin: 10px 1%;*/ min-height: 477px; width: 100%; height: 100%; height: auto; background: #3085a3; text-align: center; cursor: pointer; } .grid figure img { position: relative; display: block; min-height: 477px; max-width: 100%; opacity: 0.8; } .grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; } .grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*-----------------*/ /***** Apollo *****/ /*-----------------*/ figure.effect-apollo { background:#000; opacity: 1; } .port-icon { border: 2px solid #fff; font-size: 13px; height: 33px; line-height: 30px; position: absolute; right: 15px; text-align: center; width: 33px; background: rgba(0, 0, 0, 0.15); } figure.effect-apollo:hover .port-icon { background:#000; transition: .3s; -webkit-transition:.3s; -moz-transition: .3s; -o-transition: .3s; -ms-transition: .3s;} .contaico{line-height: 2em;bottom: 51px;position: absolute;float: right;right: 0; visibility:visible;} figure.effect-apollo img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale3d(1.05,1.05,1); transform: scale3d(1.05,1.05,1); width: 100%; -webkit-filter:grayscale(100%) contrast(115%); } figure.effect-apollo:hover img { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); opacity:0.8; -webkit-filter:grayscale(0%) contrast(110%); } figure.effect-apollo figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 300px; background: rgba(255,255,255,0.5); content: ''; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); } figure.effect-apollo p { position: absolute; right: 7px; bottom: -26.5px; margin: 3em; padding: 0 1em; max-width: 150px; border-right: 4px solid #fff; text-align: right; opacity: 0; font-size: 15px; color: white; line-height: 2.4em; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } figure.effect-apollo:hover p { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } figure.effect-apollo h2 { text-align: center; color: white; position:relative; font-size:1.5em; opacity:0; margin:100px 0 20px 0; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } figure.effect-apollo:hover h2 { opacity: 1; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0); } figure.effect-apollo span { color:#fff; text-transform:uppercase; } figure.effect-apollo:hover figcaption::before { -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); } /*-------------------------------------*/ /***** VLUD EFFECT VALAR DOHAERIS *****/ /*-------------------------------------*/ figure.vlud-effect-valar-dohaeris { background: #3498db;position: relative; overflow: hidden; } figure.vlud-effect-valar-dohaeris img { opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale3d(1.05,1.05,1); transform: scale3d(1.05,1.05,1); } figure.vlud-effect-valar-dohaeris figcaption { padding: 0; } figure.vlud-effect-valar-dohaeris figcaption::before { position: absolute; padding: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(41,182,246,0.5); content: ''; -webkit-transition: -webkit-transform 0.9s; transition: transform 0.9s; -webkit-transform: scale3d(2.5,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); transform: scale3d(2.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); } figure.vlud-effect-valar-dohaeris p { position: absolute; right: 0; bottom: 0; margin: 3em; padding: 0 1em; max-width: 150px; border-right: 4px solid #fff; text-align: right; opacity: 0; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.vlud-effect-valar-dohaeris h3 { width: 100%; font-weight: 300; margin: 13% auto;padding: 0 15px; position: absolute; text-align: center; bottom: 0; -webkit-transition: border .5s ease-in-out; -o-transition: border .5s ease-in-out; transition: all .5s ease-in-out; } figure.vlud-effect-valar-dohaeris:hover h3 { color: #FFFFFF; -webkit-transition: border .5s ease-in-out; -o-transition: border .5s ease-in-out; transition: all .5s ease-in-out; } figure.vlud-effect-valar-dohaeris:hover img { opacity: 0.9; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } figure.vlud-effect-valar-dohaeris:hover figcaption::before { -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); } figure.vlud-effect-valar-dohaeris:hover p { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } /*<============================= EFECTO EMPRESA ======================================>*/ .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 220px; height: 220px; display: inline-block; margin: 20px; } .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; } .ch-info-wrap, .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; } .ch-info-wrap { top: 20px; left: 20px; background: #f9f9f9 url(../../site/img/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; -webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/ } .ch-info .ch-info-front { -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .ch-info .ch-info-back { opacity: 0; background: #1B1B1B; pointer-events: none; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 0.4s ease-in-out 0.2s; -moz-transition: all 0.4s ease-in-out 0.2s; -o-transition: all 0.4s ease-in-out 0.2s; -ms-transition: all 0.4s ease-in-out 0.2s; transition: all 0.4s ease-in-out 0.2s; } .ch-img-1 { background-image: url(../../site/img/equipo/00.png); } .ch-img-2 { background-image: url(../../site/img/servicios/2.png); } .ch-img-3 { background-image: url(../../site/img/servicios/3.png); } .ch-img-4 { background-image: url("https://media.licdn.com/media/p/2/000/1ee/0ad/2599e50.jpg"); } .ch-img-5 { background-image: url(../../site/img/servicios/5.png); } .ch-img-6 { background-image: url(../../site/img/servicios/6.png); } .ch-img-7 { background-image: url(../../site/img/servicios/7.png); } .ch-img-8 { background-image: url(../../site/img/servicios/8.png); } .ch-img-9 { background-image: url(../../site/img/servicios/9.png); } .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; margin: 0 15px; padding: 40px 0 0 0; height: 80px; font-family: 'Montserrat', sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px 0; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: #000; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Montserrat', sans-serif; } .ch-info p a:hover { color: #fff; } .ch-item:hover .ch-info-front { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } .ch-item:hover .ch-info-back { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; pointer-events: auto; } /*<============================= like box ======================================>*/ div.likeboxwrap { width:300px; /* Quitar 33px al ancho del gadget */ height:295px; /* Quitar 25px al alto del gadget */ overflow:hidden; } div.likeboxwrap iframe {margin:-1px} /*<============================= like box ======================================>*/ .noacs{margin-bottom:66px;} .noacsf{margin-bottom:13px;} /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * FONTS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /*FONT 1*/ body{font-family: 'Montserrat', sans-serif;} /*FONT 2*/ #navigation ul li a:after, #logo-navigation span, #ticker h4,.with-breaker span,.main-container blockquote, .main-container .welcome-message, .main-container ul.post-metadatas li, figure.effect-sadie p, .custom-section-text p, .comment-author, .contact-box p{ font-family: 'Montserrat', sans-serif; font-weight: 400; } /*UPPERCASE FOR FONT 1*/ #navigation ul li a, #navigation ul.sub-menu li a, #top-navigation ul.sub-menu li a, #header #navigation-mobile li a, #ticker-text ul li, .main-container h1,.main-container h2,.main-container h3,.main-container h4, .main-container thead th, .main-container .btn,.nav-tabs>li>a, #portfolio-container figure figcaption, #contact-form label,#comment-form label, .widget h4, .widget a.btn.btn-default, #copyright{ text-transform: uppercase; } /*LETTER SPACING*/ .main-container h1,.main-container h2,.main-container h3,.main-container h4{ letter-spacing: -1px; } #ticker-text ul li{ letter-spacing: -4px; } .main-container .btn, figure.effect-sadie h4, .main-container a.blog-post-title h2, #blog-container .blog-post-title h2, .widget h4, #top-navigation ul.sub-menu li, #navigation ul li a, #navigation ul.sub-menu li a,#top-navigation ul.sub-menu li a{ letter-spacing: 1px; } /*FONT WEIGHT*/ .main-container .welcome-message{ font-weight: 100; } figure.effect-sadie h4,.main-container a.blog-post-title h2, #blog-container .blog-post-title h2, .widget h4{ font-weight: 300 !important; } .main-container .btn, #logo-navigation span, #navigation ul.sub-menu li a{ font-weight: 400; } .main-container .dropcap{ font-weight: 900; } .comment-list li:before, #ticker-text ul li, .main-container h1,.main-container h2,.main-container h3, .main-container h4, #navigation ul li a{ font-weight: 700; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * imagenes * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /*LOGO*/ a#logo-navigation{ height: 56px; background-image: url(../../site/img/logo/logo-header.svg); background-size: 167px; z-index: 2; text-align: center; display: block; width: 24%; position: relative; float: left; background-position: center; background-repeat: no-repeat; } a#logo-navigation:hover{ opacity: .5; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } /*DURING FIXED HEADER*/ #navigation.navigation-fixed a#logo-navigation{ background-image: url(../../site/img/logo/logo-fixed-menu.svg); background-size: 87px; top: 9px; height: 67px; z-index: 12; } /*BIG SHADE HEADER*/ #shade{ z-index: 2; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: -moz-linear-gradient(bottom, rgba(0,0,0,.7) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(bottom, rgba(0,0,0,.7) 0%, rgba(255,255,255,0) 100%); background: -o-linear-gradient(bottom, rgba(0,0,0,.7) 0%, rgba(255,255,255,0) 100%); background: -ms-linear-gradient(bottom, rgba(0,0,0,.7) 0%, rgba(255,255,255,0) 100%); background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(255,255,255,0) 100%) ; } #shade-cubes{ z-index: 1; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("../../site/img/extras/shade-cubes.png"); } #shade-inverse{ z-index: 1; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: -moz-linear-gradient(top, rgba(0,0,0,.7) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,.7) 0%, rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(0,0,0,.7) 0%, rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,.7) 0%, rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(255,255,255,0) 100%); } /*-------------------------------*/ /* Dark Overlay */ /*-------------------------------*/ .overlay { cursor:pointer; position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 12; } .overlay-zwei { cursor:pointer; position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 11; } .is-open{display: block;} .is-closed{display: none;} .no-scroll{ position: fixed; overflow: hidden;} /*FOOTER PATERN*/ /*BOXED PATERN*/ /*body.boxed{ background-image: url("../../site/img/boxed.png"); background-repeat: repeat; background-size: 798px 798px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body.boxed{ background-image: url("../../site/img/boxed@2X.png"); background-size: 798px 798px; } }*/ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * COLORS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /*MAIN TEXT COLOR*/ #navigation.navigation-fixed ul li a{color: #f9f9f9;} #navigation.navigation-fixed ul li a:hover{color: #B4B4B4} body, .main-container a.blog-post-title, #blog-container .blog-post-title a, .main-container .welcome-message span, .main-container h4.faq-link a, .main-container ul.social-list li:hover a, .nav-tabs>li>a:hover, .skill:hover p, #partners-slider a{ color: #000000; } ::-moz-selection{ background: #444; } ::selection{ background: #444; } .main-container code, .main-container pre, .main-container .btn,#navigation ul.sub-menu li a:hover, #top-navigation ul.sub-menu li a:hover{ } /*SECOND COLOR*/ .main-container a.blog-post-title:hover, .main-container .blog-grid ul.post-metadatas, .single-post ul.post-metadatas, .comment-author, .comment-list .children li:before, #blog-container .blog-post-title a:hover, #blog-container .blog-button .btn.btn-default, #blog-container ul.post-metadatas, #footer, #navigation.navigation-fixed ul li.current-menu-item a, .with-breaker span, .main-container a, .main-container blockquote, .main-container blockquote:before, .main-container .icon, .main-container .welcome-message, .main-container h4.faq-link.faq-active a, .skill:hover h4, .skill p{ color: #414144; } .widget a.btn.btn-default:hover{ color: #B4B4B4 !important; } #blog-container .blog-button .btn.btn-default, .widget a.btn.btn-default{ border-color: #B4B4B4; } #blog-container .blog-button a.btn.btn-default:hover{ background: #B4B4B4; } /*CUSTOM CONTAINER BACKGROUND (Affiliate box in the demo)*/ .custom-section-container{ background: #01062c; } .main-container .custom-section-buttons a.btn:hover{ color: #01062c; } /*OTHERS*/ #navigation ul.sub-menu li, #top-navigation ul.sub-menu li, #navigation ul.sub-menu li:hover, #top-navigation ul.sub-menu li:hover{ border-bottom-color: rgba(255, 255, 255, 0.7); } .main-container hr, .main-container hr.align-left,.main-container h4.faq-link{ border-color: #E7E7E7; } .nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{ border-bottom-color: #E7E7E7; } .nav-tabs>li.active>a:after,.nav-tabs>li.active>a:hover:after,.nav-tabs>li.active>a:focus:after{ border-color: transparent transparent #e7e7e7 transparent; } #navigation ul.sub-menu li a,#top-navigation ul.sub-menu li a, #header a#close-navigation-mobile,#header #navigation-mobile li a, #ticker h4, .with-breaker:after, .main-container pre, .main-container .btn, #footer a{ color: #E7E7E7; } #navigation ul.sub-menu li a,#top-navigation ul.sub-menu li a{ } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * PRECIOS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ .pricing { /*text-align: center;*/ /*border: 1px solid #f0f0f0;*/ color: #777; font-size: 14px; padding-left: 0; margin-bottom: 30px; margin: 0 !important;padding: 0 25px; } .pricing img { display: block; margin: auto; width: 32px; } /*.pricing li:nth-child(1), .pricing li:nth-child(7),.pricing li:nth-child(8){ padding: 20px 13px; text-align: center; }*/ .pricing li { list-style: none; font-size: 14px; margin-bottom: 10px; font-weight: 400; color: #000000; } .pricing li:last-child { text-align: center; padding: 4px 0px 5px 0px; border-top: 2px solid #e0e0e0; margin-top: 13px; } /*.pricing li + li { border-top: 1px solid #f0f0f0; }*/ .pricing big { font-size: 32px; } .pricing h3 { font-weight: 400; font-size: 21px;margin: 33px auto 0;color: #000000; text-align: left; } .pricing b { color: #000000; float: right; position: relative; font-weight: 700;font-size: 23px; width: 100%; text-align: right; } .pricing b span { font-size: 12px; color: #999; } .pricing .btn-xs { padding: 10px; margin: 17px auto; font-size: 13px; } .pricing .material-icons{ font-size: 17px; font-weight: 500; color: #000000;margin-right: 7px; } .pricing span { } /*.pricing li:nth-last-child(2) { padding: 23px 13px; }*/ .pricing button { width: auto; margin: auto; font-size: 15px; font-weight: 300; border-radius: 50px; color: #fff; padding: 9px 60px; background: #aaa; opacity: 1; transition: opacity .2s ease; border: none; outline: none; } .pricing button:hover { opacity: .9; } .pricing button:active { box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1); } /* pricing color */ .p-green .big{ color: #65D914; } .p-green button { background: #65D914; } .p-yel .big{ color: #ffbb42; } .p-yel button { background: #ffbb42; } .p-red .big{ color: #e13c4c; } .p-red button { background: #e13c4c; } .p-blue .big{ color: #31C1F6; } .p-blue button { background: #31C1F6; } .p-rose .big{ color: #F56A7F; } .p-rose button { background: #F56A7F; } .p-purple .big{ color: #AB70FC; } .p-purple button { background: #AB70FC; } /*EXTRAS SECCIÓN PRODUCTOS*/ .section-productos .thumbnail { display: block; /*padding: 0 0 34% 0;*/ margin-bottom: 20px; border: 0.5px solid #e0e0e0; border-radius: 3px; background: #FFFFFF; -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24); box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24); } .section-productos .thumbnail:hover { background: #F8F8F8; color: #FFFFFF; -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.12), 0px 8px 8px 0px rgba(0,0,0,0.24); box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.12), 0px 8px 8px 0px rgba(0,0,0,0.24); } .producto-icon-video{ position: relative; z-index: 3; text-align: right;} .producto-icon-video a{ width: 35px; height: 35px; position: absolute; right: 10px;top: 10px;} .producto-icon-video i{ overflow: hidden; width: 35px; height: 35px; font-size: 19px; text-align: center; color: #ffffff; cursor: pointer; z-index: 21; line-height: 36px; background: #000000; -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); } .producto-icon-video i:hover{ background: #FF0000; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * METODOS DE CENTRADO - MODALES * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /**/ .full-height{height: 100%} .center-middle { display: table; height: 100%; width: 100%; float: left; } .vert-middle { height: 100%; width: 100%; float: left; display: table-cell; vertical-align: middle; } .flex-parent { height: 100%; width: 100%; float: left; display: -ms-flex; display: -webkit-flex; display: flex; } .flex-child { height: 100%; width: 100%; float: left; display: -ms-flex; display: -webkit-flex; display: flex; justify-content: center; flex-direction: column; } .modal { text-align: center; padding: 0!important; } .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } .modal-content { background-color: #ededed; border-radius: 0; } button.close { -webkit-appearance: none; cursor: pointer; background: #000000; text-shadow: none; color: #FFFFFF; border: 0; padding: 5px; border-radius: 60px; width: 30px; opacity: 1; } button.close:hover { color: #FFFFFF; } .close{opacity: 1 !important;} .close i{ overflow: hidden; width: 35px; height: 35px; font-size: 19px; text-align: center; color: #ffffff; cursor: pointer; z-index: 21; line-height: 36px; background: #000000; -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); } .close:hover{opacity: 0.7 !important;} /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * INPUT CONTACTO * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ .form-control { display: block; width: 100%; /* height: 34px;*/ padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #FFFFFF; background-image: none; border: 1px solid #ededed; border-radius: 3px; outline: 0 none; -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-box-shadow: none; box-shadow: none; } .input { position: relative; z-index: 1; display: inline-block; border: 1px solid #ccc; border-radius: 4px; height: 34px; width: 100%; vertical-align: top; } .input__field { position: relative; display: block; float: right; padding: 0.8em; border: none; border-radius: 0; background: #f0f0f0; color: #000; font-family: 'Montserrat', sans-serif; -webkit-appearance: none; /* for box shadows to show on iOS */ width: 100%; height: 35PX; } .input__field:focus { outline: none; } .input__label { display: inline-block; float: right; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .input__label-content { position: relative; display: block; padding: .6em 0; width: 100%; } .graphic { position: absolute; top: 0; left: 0; fill: none; } /* Individual styles */ /* Kohana */ .input--kohana { overflow: hidden; background: #fff; padding: 0; } .input--kohana .icon { color: #444; font-size: 1.8em !important; } .input__field--kohana { width: 100%; background: transparent; padding-left: 2.5em; color: #444; } .input__label--kohana { position: absolute; width: 100%; text-align: left; pointer-events: none; color: #000; font-size: .95em; margin-top: -16px; font-weight: 300; text-transform: none !important; } .input__label-content--kohana { display: inline-block; width: auto; -webkit-transform: translate3d(-1.75em, 0, 0); transform: translate3d(-1.75em, 0, 0); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; top: -6px; } .icon--kohana { display: inline-block; -webkit-transform: translate3d(-2em, 0, 0); transform: translate3d(-2em, 0, 0); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .input__field--kohana:focus + .input__label--kohana .input__label-content--kohana, .input--filled .input__label-content--kohana { opacity: 0; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } .input__label-content--kohana, .icon--kohana, .input__field--kohana:focus + .input__label--kohana .input__label-content--kohana, .input--filled .input__label-content--kohana { -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .input__field--kohana:focus + .input__label--kohana .icon--kohana, .input--filled .icon--kohana { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*PARA PROCESO DE COMPRA*/ .btn-group .btn-group + .btn-group { margin-left: 0px; } .btn-cambiar-dimensiones .col-lg-2 { padding: 0; } /*.btn-cambiar-dimensiones .col-lg-4 { padding: 0; }*/ .btn-cambiar-dimensiones .btn-link{ background-color: #ededed; border-bottom: 0; border-top: 0; border-right: 1px solid #BDBDBD; box-shadow: none; outline: 0; } .btn-cambiar-dimensiones .btn-link{border:1px solid #000000} /*.btn-cambiar-dimensiones .btn-group:last-child .btn-link{border-right: 0;}*/ .btn-cambiar-dimensiones .btn-link:hover { background-color: #E0E0E0;} .btn-cambiar-dimensiones .btn-link p { float: right;width: 65%;padding: 0% 0px 0px 7%;color: #000000;text-align: left;} .btn-cambiar-dimensiones .btn-link.active p{color: #FFFFFF;} .btn-cambiar-dimensiones .btn {padding: 0px 12px;} .btn-cambiar-dimensiones .btn-link.active {background-color: #000000;border-bottom: 2px solid #D81B60;} .precio-smart{color: #01062c;} .check-price span { float: right;color: #01062c; font-weight: 600; } .check-price span del{color: #616161;font-weight: 400; margin-right: 7px;} /*SECCION COTIZADOR*/ .section-cotizador { padding: 0% 0;margin-top:45px; } .section-cotizador .nav-tabs { width: auto; float: initial; border: 0; margin: 0; background: #01062c; } .section-cotizador .nav-tabs > li{ border-bottom: 0; } .section-cotizador .nav-tabs > li.active { border-bottom: 0; } .section-cotizador .nav-tabs > li > a { margin-right: 0; color: #ffffff; border: 0; float: left; } .section-cotizador .nav-tabs > li > a:hover, .section-cotizador .nav-tabs > li > a:focus { text-decoration: none; background-color: #eee;color:#000000; } .section-cotizador .nav-tabs > li.active > a { background-color: transparent; color: #ffffff; border: none; border-radius: 0; margin-right: 0; } .section-cotizador .tab-content{background: #ffffff;width: 100%; float: left; padding: 0px 15px 30px 15px; -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24); box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24); } .section-cotizador .tab-pane{width: 100%; float: left; padding: 33px 13px;} .cotizador-header{float: left;width: 100%;} .cotizador-body{float: left;width: 100%; } .check-img { border: 1px solid #616161; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); padding: 2px; margin-top: 4%;} .check-orders-body { background-color: #fafafa; color: #000; padding: 0; float: left; width: 100%;margin: 15px 0;} .check-orders-body hr { margin-top: 10px; margin-bottom: 10px; } .check-orders-body .check-orders-header { background: #ededed;border-bottom: 1px solid #ededed; padding: 15px 0px; float: left; width: 100%; } .check-orders-body .check-orders-header h4 {text-align: right;margin: 0;color: #616161;font-weight: 300;margin-top: 4px;} .check-orders-body .check-orders-header h4 span{ color: #01062c; font-weight: 400; } .check-orders-body .check-orders-header h3{text-align: left; margin: 0; color: #616161; font-weight: 300;} .check-orders-body .check-orders-header h3 span{ color: #fafafa; background: #01062c; padding: 3px 6px; border-radius: 10px; font-size: 13px; font-weight: 400; top: -3px; position: relative; } .check-list-items{ float: left; width: 100%;border: 1px solid #ededed; } .check-orders-body .check-item { float: left; width: 100%; border-bottom: 1px solid #ededed; padding: 15px 0;margin-bottom: 15px;position: relative; overflow: hidden; } .check-orders-body .check-item:nth-child(2n+0) { background: #ededed; } .check-orders-body .check-item-header { float: left; width: 100%; padding: 5px 0; } .check-orders-body .check-item-header p{ margin: 0; font-size: 16px !important; color: #000000 !important; border-bottom: 0 !important; } .check-orders-body .check-item-header p button{ text-align: right;float: right; } .check-orders-body .check-item-header p .btn-link { padding: 1px; border-radius: 50%; width: 22px; height: 22px; margin: -2px 0px 0px 8px; text-align: center; } .check-orders-body .check-item-header p .btn-link i{ color: #F44336; font-size: 17px; } .check-orders-body .check-item-detail {float: left;width:100%;/* padding-top: 5px; */} .check-orders-body .check-item-detail p {margin: 0px; border-bottom: 1px solid #ededed;} .check-orders-body .check-item-detail h4 { margin: 5px 0px; font-size: 15px; color: #616161; font-weight: 300; float: left; width: 100%;} .check-orders-body .check-item-detail h4 span{ float: right; color: #01062c;font-weight: 500;} .check-orders-body .check-item-detail h4 span del {font-weight: 400;color:#616161;margin-right: 5px;} .check-orders-body .check-item-detail .btn-group-justified{ float: left;width: 100%; margin-top: 15px;} .check-orders-body .check-item-detail .btn-group-justified .btn-xs{ padding: 1px 5px; } .check-orders-header{float: left; width: 100%;} .check-price { float: left; width: 100%; background-color: #ffffff; margin: 45px 0px 15px 0px; -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24); box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24); } .check-price p{margin: 0} .check-price span{ float: right; } .check-price-header { float: left; width: 100%; background-color: #01062c; padding: 23px 15px; } .check-price-header p{color:#ffffff;font-size: 15px; text-transform: uppercase;margin-bottom: 0;} .check-price-body {float: left; width: 100%;padding: 7px 15px;} .check-price-body .list-group .list-group-item { padding: 10px 0; background: transparent;width: 100%; float: left; border: 0; border-bottom: 1px solid #ddd; } .check-price-body .list-group .list-group-item a { display: inline; padding: 8px 10px; } .check-price-body .list-group .list-group-item .alert { padding: 3px 10px; margin-bottom: 7px; margin-top: 7px; } .alert-success { color: #2E7D32; background-color: #DCEDC8; border-color: #C5E1A5; } .alert-warning { color: #F57F17; background-color: #FFF9C4; border-color: #FFF59D; } .alert-danger { color: #B71C1C; background-color: #FFCDD2; border-color: #EF9A9A; } .check-price-header-2 {float: left; width: 100%; background-color: #000000; padding: 7px 15px; font-size: 15px;} .check-price-header-2 p{color:#ffffff;} .check-price-header-2 p span{ float: right; color: white;} .check-price-header-2 p span sup{font-size: 66%;} .check-price-body-2 {float: left; width: 100%;padding: 7px 15px;} .check-price-body-2 .list-group .list-group-item { padding: 10px 0; background: transparent;width: 100%; float: left;border:0; } .cart{} .cart-img { border: 1px solid #616161; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); padding: 2px; margin-top: 15%;} .cart-body { background-color: #FFFFFF !important; color: #000; min-width: 380px !important; padding: 0;} .cart-body:after { border-bottom-color: #fafafa !important; } .cart-block{display:block;} .cart-none{display:none !important;} .cart-body .cart-title { background: #fafafa;border-bottom: 1px solid #ededed; padding: 15px 0px; float: left; width: 100%; } .cart-body .cart-title h4{text-align: right;margin: 0;color: #616161;font-weight: 300;margin-top: 4px;} .cart-body .cart-title h4 span{ color: #01062c; font-weight: 400; } .cart-body .cart-title h3{text-align: left; margin: 0; color: #616161; font-weight: 300;} .cart-body .cart-title h3 span{ color: #fafafa; background: #01062c; padding: 3px 6px; border-radius: 10px; font-size: 13px; font-weight: 400; top: -3px; position: relative; } .cart-body .cart-footer { float: left; width: 100%; padding: 15px 0px; } .cart-body .cart-item { float: left; width: 100%; border-bottom: 1px solid #ededed; padding: 15px 0; } .cart-body .cart-item:nth-child(2n+0) { background: #ededed; } .cart-body .cart-item-title { float: left; width: 100%; padding: 5px 0; } .cart-body .cart-item-title p{ margin: 0; font-size: 16px !important; color: #000000 !important; border-bottom: 0 !important; } .cart-body .cart-item-title p button{ text-align: right;float: right; } .cart-body .cart-item-title p .btn-link { padding: 1px; border-radius: 50%; width: 22px; height: 22px; margin: -2px 0px 0px 8px; text-align: center; background: #EEEEEE; } .cart-body .cart-item-title p .btn-link i{ color: #F44336; font-size: 17px; vertical-align: initial; padding: 0 !important; } .cart-body .cart-item-detail {float: left;width:100%;/* padding-top: 5px; */} .cart-body .cart-item-detail p{margin: 0px; border-bottom: 1px solid #ededed;} .cart-body .cart-item-detail h4 { margin: 5px 0px; font-size: 15px; color: #616161; font-weight: 300; float: left; width: 100%;} .cart-body .cart-item-detail h4 span{ float: right; font-weight: 500; color: #01062c;} .cart-body .cart-item-detail h4 span del{ color: #616161; margin-right: 5px; font-weight: 400; } .cart-body .cart-item-detail .btn-xs{ margin: 10px 0px; padding: 1px 5px;} .cart-list-items{float: left; width: 100%;overflow-y: scroll; max-height: 400px;} .check-envio{border: 2px solid #ddd;margin: 15px 0; text-align: center;margin-bottom: 15px; float: left; width: 100%; -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24); box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24);} .check-envio:hover{border: 2px solid #01062c; -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.12), 0px 8px 8px 0px rgba(0,0,0,0.24); box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.12), 0px 8px 8px 0px rgba(0,0,0,0.24); } .check-envio .check-envio-header{background: #ededed; font-size: 16px; padding: 5px 15px;} .check-envio .check-envio-body{text-align: left; padding: 15px; height: 170px; overflow-y: scroll;} .check-envio .check-envio-body p {margin:0} .check-envio .check-envio-footer{ padding: 5px 15px;} .check-facturacion {border: 2px solid #ddd;margin: 15px 0; text-align: center;margin-bottom: 15px; float: left; width: 100%; -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24); box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24);} .check-facturacion:hover{border: 2px solid #01062c; -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.12), 0px 8px 8px 0px rgba(0,0,0,0.24); box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.12), 0px 8px 8px 0px rgba(0,0,0,0.24); } .check-facturacion .check-facturacion-header{background: #ededed; font-size: 16px; padding: 5px 15px;} .check-facturacion .check-facturacion-body{text-align: left; padding: 15px; height: 170px; overflow-y: scroll;} .check-facturacion .check-facturacion-body p {margin:0} .check-facturacion .check-facturacion-footer{ padding: 5px 15px;} /* ========================================================================== PLUGGINS ========================================================================== */ /*-------------------------------*/ /* DROP DOWN */ /*-------------------------------*/ /*-------------------------------*/ .dropdown-menu > li > label { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333333; white-space: nowrap; } .dropdown-menu > li > label:hover, .dropdown-menu > li > label:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .dropdown-menu > li > input:checked ~ label, .dropdown-menu > li > input:checked ~ label:hover, .dropdown-menu > li > input:checked ~ label:focus, .dropdown-menu > .active > label, .dropdown-menu > .active > label:hover, .dropdown-menu > .active > label:focus { color: #ffffff; text-decoration: none; outline: 0; background-color: #428bca; } .dropdown-menu > li > input[disabled] ~ label, .dropdown-menu > li > input[disabled] ~ label:hover, .dropdown-menu > li > input[disabled] ~ label:focus, .dropdown-menu > .disabled > label, .dropdown-menu > .disabled > label:hover, .dropdown-menu > .disabled > label:focus { color: #999999; } .dropdown-menu > li > input[disabled] ~ label:hover, .dropdown-menu > li > input[disabled] ~ label:focus, .dropdown-menu > .disabled > label:hover, .dropdown-menu > .disabled > label:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .dropdown-menu > li > label { margin-bottom: 0; cursor: pointer; } .dropdown-menu > li > input[type="radio"], .dropdown-menu > li > input[type="checkbox"] { display: none; position: absolute; top: -9999em; left: -9999em; } .dropdown-menu > li > label:focus, .dropdown-menu > li > input:focus ~ label { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .dropdown-menu.pull-right { right: 0; left: auto; } .dropdown-menu.pull-top { bottom: 100%; top: auto; margin: 0 0 2px; -webkit-box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175); } .dropdown-menu.pull-center { right: 50%; left: auto; } .dropdown-menu.pull-middle { right: 100%; margin: 0 2px 0 0; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2); left: auto; } .dropdown-menu.pull-middle.pull-right { right: auto; left: 100%; margin: 0 0 0 2px; box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2); } .dropdown-menu.pull-middle.pull-center { right: 50%; margin: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .dropdown-menu.bullet { margin-top: 8px; } .dropdown-menu.bullet:before { width: 0; height: 0; content: ''; display: inline-block; position: absolute; border-color: transparent; border-style: solid; -webkit-transform: rotate(360deg); transform: rotate(360deg); border-width: 0 8px 8px; border-bottom-color: #cccccc; border-bottom-color: rgba(0, 0, 0, 0.15); top: -8px; left: 9px; } .dropdown-menu.bullet:after { width: 0; height: 0; content: ''; display: inline-block; position: absolute; border-color: transparent; border-style: solid; -webkit-transform: rotate(360deg); transform: rotate(360deg); border-width: 0 8px 8px; border-bottom-color: #242424; top: -8px; left: 10px; } .dropdown-menu.bullet.pull-right:before { left: auto; right: 9px; } .dropdown-menu.bullet.pull-right:after { left: auto; right: 10px; } .dropdown-menu.bullet.pull-top { margin-top: 0; margin-bottom: 8px; } .dropdown-menu.bullet.pull-top:before { top: auto; bottom: -7px; border-bottom-width: 0; border-top-width: 7px; border-top-color: #cccccc; border-top-color: rgba(0, 0, 0, 0.15); } .dropdown-menu.bullet.pull-top:after { top: auto; bottom: -6px; border-bottom: none; border-top-width: 6px; border-top-color: #ffffff; } .dropdown-menu.bullet.pull-center:before { left: auto; right: 50%; margin-right: -7px; } .dropdown-menu.bullet.pull-center:after { left: auto; right: 50%; margin-right: -6px; } .dropdown-menu.bullet.pull-middle { margin-right: 8px; } .dropdown-menu.bullet.pull-middle:before { top: 50%; left: 100%; right: auto; margin-top: -7px; border-right-width: 0; border-bottom-color: transparent; border-top-width: 7px; border-left-color: #cccccc; border-left-color: rgba(0, 0, 0, 0.15); } .dropdown-menu.bullet.pull-middle:after { top: 50%; left: 100%; right: auto; margin-top: -6px; border-right-width: 0; border-bottom-color: transparent; border-top-width: 6px; border-left-color: #ffffff; } .dropdown-menu.bullet.pull-middle.pull-right { margin-right: 0; margin-left: 8px; } .dropdown-menu.bullet.pull-middle.pull-right:before { left: -7px; border-left-width: 0; border-right-width: 7px; border-right-color: #cccccc; border-right-color: rgba(0, 0, 0, 0.15); } .dropdown-menu.bullet.pull-middle.pull-right:after { left: -6px; border-left-width: 0; border-right-width: 6px; border-right-color: #ffffff; } .dropdown-menu.bullet.pull-middle.pull-center { margin-left: 0; margin-right: 0; } .dropdown-menu.bullet.pull-middle.pull-center:before { border: none; display: none; } .dropdown-menu.bullet.pull-middle.pull-center:after { border: none; display: none; } .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-top-left-radius: 0; } .dropdown-submenu > a:before { display: block; float: right; width: 0; height: 0; content: ""; margin-top: 6px; margin-right: -8px; border-width: 4px 0 4px 4px; border-style: solid; border-left-style: dashed; border-top-color: transparent; border-bottom-color: transparent; } @media (max-width: 767px) { .navbar-nav .dropdown-submenu > a:before { margin-top: 8px; border-color: inherit; border-style: solid; border-width: 4px 4px 0; border-left-color: transparent; border-right-color: transparent; } .navbar-nav .dropdown-submenu > a { padding-left: 40px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > label { padding-left: 35px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 45px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 55px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 65px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 75px; } } .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a, .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:hover, .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:focus { background-color: #e7e7e7; color: #555555; } @media (max-width: 767px) { .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:before { border-top-color: #555555; } } .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a, .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:hover, .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:focus { background-color: #080808; color: #ffffff; } @media (max-width: 767px) { .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:before { border-top-color: #ffffff; } } .dropup, .dropdown { position: relative; } .dropdown-toggle:focus { outline: 0; } .dropdown-menu { position: absolute; top: 125%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #242424; color: white; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: transparent; border-radius: 2px; -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24); box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24); -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-menu:hover { -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.12), 0px 8px 8px 0px rgba(0,0,0,0.24); box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.12), 0px 8px 8px 0px rgba(0,0,0,0.24); } .dropdown-menu.pull-right { right: 0; left: auto; } .dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #424242; } .dropdown-menu > li > a { display: block; padding: 3px 35px; clear: both; font-weight: normal; line-height: 1.42857143; color: #ededed; white-space: nowrap; letter-spacing: 0px; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #ededed; text-decoration: none; background-color: #424242; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #fff; text-decoration: none; background-color: #337ab7; outline: 0; } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { color: #777; } .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { text-decoration: none; cursor: not-allowed; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .open > .dropdown-menu { display: block; } .open > a { outline: 0; } .dropdown-menu-right { right: 0; left: auto; } .dropdown-menu-left { right: auto; left: 0; } .dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #fff; white-space: nowrap; } .dropdown-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 990; } .navbar-nav > li > .dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; text-align: center; border-radius: 2px; }