/* ========================================================================== Author's custom styles ========================================================================== */ .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } @media (min-width: 768px) { .col-sm-5ths { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-5ths { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; } } body { font-family: 'Open Sans', sans-serif; font-size: 15px; color:#222; background-color: #fff; } hr { border-top: 1px solid #d9d9d9; } .black { color: #000; } .yellow { color: #fde002; } .white { color: #fff; } .blue { color: #008bc6; } .light-blue { color: #64c5ef; } .bg-blue { background: #008bc6!important; color: #fff; } .btn.bg-blue { background: #008bc6!important; color: #fff!important; } .btn.bg-light-blue { background: #64c5ef!important; color: #fff!important; } .bg-yellow { background: #fde002!important; } .bg-white { background: #fff; } .bg-gray { } .bg-green { background: #37b41a!important; } .border-round { border-radius: 100%; } h2 { font-size: 25px; font-style: italic; font-weight: 400; } h3 { font-size: 20px; text-transform: uppercase; font-weight: 600; } h2:after { display: block; content: ''; background: #65c7ee; height: 4px; width: 170px; margin: 20px 0 45px 0; } #header { background:#fff; border-bottom: 4px solid #008bc6; position: fixed; z-index: 100; width: 100%; top: 0; } #page { margin-top: 64px; } #logo { margin: 0; } #menu { overflow: hidden; height: 94px; display: table; width: 100%; padding: 0; margin: 0; } #menu li { display: flex; align-items: center; text-align: center; padding: 0; margin: 0; height: 92px;} #menu a { color: #008bc6; text-decoration: none; font-size: 15px; cursor: pointer; } #menu a img { margin-top: -10px; } #menu a.menu-link { padding: 10px; border: 1px solid #fff; display: flex; flex-direction: column; height: 92px; justify-content: flex-end; align-items: flex-start;} #menu a.menu-link > span:last-child { font-size: 12px; padding-top: 5px; text-align: left;} #menu a.webshop-link { padding: 10px; color: #fff; background-color: #008bc6; border-radius: 4px; padding-left: 0; overflow: hidden; box-shadow: inset 1px 0 #64c5ef; } #menu a.webshop-link span { background: #64c5ef; display: inline-block; padding: 0 10px 0 15px; margin: 0 5px 0 0; box-shadow: 0px -13px 0 #64c5ef, 0px 12px 0 #64c5ef; border-top-left-radius: 4px; border-bottom-left-radius: 4px;} #submenu { position: absolute; left: 0; right: 0; padding: 30px 0 10px 0; top: 90px; z-index: 1000; display: none; color: #fff; } #submenu a { display: block; padding: 10px 0 30px 80px; overflow: hidden; color:#fff; text-decoration: none; } #submenu a img { float: left; margin: -8px 0 0 -78px; width: 60px; height: 60px; } #submenu a:hover img { border: 2px solid #008bc6;; box-shadow: 1px 1px 0 #fde002, -1px 1px 0 #fde002, 1px -1px 0 #fde002, -1px -1px 0 #fde002; } #submenu a:hover { color: #fde002; } #usageList p { position: relative; padding: 34px 30px 30px 30px; font-weight: bold; font-style: italic; } #usageList p:before { display: block; position: absolute; top: 17px; left: 50%; margin: 0 0 0 -15px; content:""; height: 1px; background: #2e2e2e; width: 30px; } #calculator { padding: 40px 0 60px 0; color: #fff; } #calculator .form-group { position: relative; padding-bottom: 10px; } #calculator .form-group:before { content:''; display: block; position: absolute; top: 0; bottom: 0; left: 0; margin-left: -80px; width: 46px; background: #7cd7ff url('../img/calc.png') no-repeat center bottom; border-radius: 4px; text-align: center; line-height: 40px; font-size: 22px; color:#fff; } #calculator #calc-group-1:before { content:'1.'; } #calculator #calc-group-2:before { content:'2.'; } #calculator #calc-group-3:before { content:'3.'; } #calculator #calc-group-4:before { content:'4.'; background: #7cd7ff; } #calculator form:before { content:''; display: block; position: absolute; top: -30px; bottom: -10px; left: -120px; width: 1px; background:#fff; } #calculator label { font-weight: normal; } #questionListBody { background: url(../img/buli.jpg) no-repeat center -185px; padding: 100px 0; color:#fff; } #questionListBody .number { display: inline-block; width: 125px; line-height: 125px; border-radius: 100%; border: 2px solid #fde002; font-size: 50px; margin: 0 0 20px 0; } #questionListBody p { padding: 0 50px; } #featureList b { font-size: 80px; } #featureList p { font-weight: bold; font-style: italic; } #webshop { padding: 80px 0; } #webshop h1 { line-height: 1; padding: 0; margin: 10px 0 5px 0; text-transform: uppercase; font-size: 29px; font-weight: bold; } #webshop .btn { padding: 20px 40px!important; font-size: 20px; } #webshop small { font-size: 14px; color:#ddd; } #lugositas { background: url(../img/lugositas.jpg) no-repeat center center; background-size: cover; padding: 60px;} .productItem a { color: #222; text-decoration: none; } .productItem img { border: 1px solid #e0e0e0; } #productList .productItem { webkit-transition: all .5s ease; transition: all .5s ease; box-shadow: inset 1px 1px 0 #e1e1e1, inset -1px -1px 0 #e1e1e1; } #productList .productItem:hover { box-shadow: inset 1px 1px 0 #7cd7ff, inset -1px -4px 0 #7cd7ff; } .blog-post img { width: 120px; height: 120px;} .blog-post a { color: #444; text-decoration: none; display: block; padding: 16px; line-height: 1.2; overflow: hidden; webkit-transition: all .5s ease; transition: all .5s ease; box-shadow: inset 1px 1px 0 #e1e1e1, inset -1px -1px 0 #e1e1e1; margin: 0 0 30px 0; } /*.blog-post a:hover { box-shadow: inset 1px 1px 0 #7cd7ff, inset -1px -4px 0 #7cd7ff; }*/ .readmore { font-size: 24px; } .blog-post a:hover .btnlink { color: #f29b31; } .blog-post-portlet a { padding-right: 38px; position: relative; } .blog-post-portlet a:after { vertical-align: middle; content:''; display: block; position: absolute; top: 0; right: 0; bottom: 0; background: #65c7ee; width: 22px; text-align: center; color:#fff; font-size: 22px; background: #65c7ee url('data:image/gif;base64,R0lGODlhDgAXAOYAAAAAAP////v9//3+//j8/vz+/9fw+2XH7mbH7mfI7mnI7mvJ723K727K73HL73XN8HfN8HzP8YHR8YPS8YfT8ojU8onU8o7W84/W85DX85fZ9Jja9JfZ86Dc9KHd9ang9rLj97Pj97Tk97zn+L3n+MXq+cbq+c3t+s/t+tPv+uT1/Of2/On3/e/5/fT7/vf8/nLM73fO8HrP8ILS8ZXZ857c9Kng9dXw+try+97z++P1/OX2/Or4/e75/fP7/vH6/fr9/vD6/fn9/v7//////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEQALAAAAAAOABcAAAeEgD8pDAeFhocHIQE6D4iOHgM9Eo6IGS8vGJSHMy0FHZqGECoBIgigBw03ASYKpwolAQYNpwggATsxpwc1BUETuhcvBBm6NAFCpxU+AhugGkAuFqA2QzwRmgkkATkwmgsoAScLmjA5ASMJmhE8QzagFi5AHKAbAj4UoB8BLDKnKzgOdAUCADs=') no-repeat center center; } #footer { background: #008bc6; color: #fff; padding: 20px 0; font-style: italic; } /*MOBILE-MENU*/ #menu-toggler { margin-top: 3px; width:50px; height:50px; cursor:pointer; } #menu-toggler .bars{width:32px; height:2px; background:#008bc6; margin-right:auto; margin-left:auto; border-radius:2px; transition-duration:0.5s; } .first-bar{margin-top:16px;} .second-bar{margin-top:5px; margin-bottom:5px;} .third-bar{margin-top:0px;} .rotate{ -o-transform:rotate(45deg); -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg); margin-top:24px; -webkit-transform: translateZ(0), rotate(45deg); } .rotate-min{ -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg); margin-top:-2px; -webkit-transform: translateZ(0), rotate(-45deg); } nav#menu-mobil-nav{position:fixed; background:#184f8e; width:0px; height:0%; padding-top:14px; color:#fff; transition-duration:0.5s; overflow:hidden; font-size:14px; z-index:500; top:50px; right:0; -webkit-transform: translateZ(0); } nav#menu-mobil-nav ul{list-style-type:none; margin:0px; padding:0px;} nav#menu-mobil-nav ul a{display:block; padding:12px 0px 12px 35px; width:200px; border-bottom:1px solid #222; color:#fff;} nav#menu-mobil-nav a:hover{background:#222;} nav#menu-mobil-nav a.active{color:#fff;} .carousel-indicators.carousel-indicators-inline { position: relative; left: inherit; width: auto; bottom: inherit; } .carousel-indicators.carousel-indicators-inline, .carousel-indicators.carousel-indicators-inline li { display: block; margin: 0; padding: 0; list-style: none; text-align: center; } .carousel-indicators.carousel-indicators-inline li { cursor: pointer; display: inline-block; width: 21px; height: 20px; margin: 0 5px; background: url(../img/pager.png); border-radius: 0; border: 0px none; } .carousel-indicators.carousel-indicators-inline li.active { background: url(../img/pager-active.png); } hr+.carousel-indicators.carousel-indicators-inline { margin-top: -35px; } hr+.carousel-indicators.carousel-indicators-inline li { background-color: #fff!important; box-shadow: 7px 0 0 #fff, -7px 0 0 #fff; } hr+.carousel-indicators.carousel-indicators-inline li:first-child { box-shadow: -20px 0 0 #fff, 7px 0 0 #fff; } hr+.carousel-indicators.carousel-indicators-inline li:last-child { box-shadow: 20px 0 0 #fff, -7px 0 0 #fff; } .border-half { border-top-right-radius: 20px; border-bottom-left-radius: 20px; } .spacing-bottom { margin-bottom: 50px; } #home-carousel { background: url(../img/main-banner.jpg) fixed; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.1); } #home-carousel { left: 0; top: 0; min-height: 100%!important; min-width: 100%!important; height: 100vh!important; background-size: 100% 100%; background-repeat: no-repeat; background-position: left top;} #home-carousel, #home-carousel .item { height: auto; } #home-carousel .item { color: #fff; font-size: 15px; padding: 20px 20px 80px 20px; } #home-carousel h1 { font-weight: bold; font-size: 24px; text-transform: uppercase; } #home-carousel h1:after { background: #64c5ef; height: 5px; width: 100%; max-width: 200px; content: ""; display: block; margin-top: 25px; position: absolute; } #home-carousel h4 { font-weight: bold; font-size: 18px; margin: 30px 0; } #home-carousel .featured-product-box { border-top: 15px solid #008bc6; color:#333; padding: 30px; font-size: 14px; line-height: 1.1; background: #f9f9f9; } #product-carousel a { color: #333;} .btn { border: 1px solid rgba(0,0,0,0); border-radius: 4px; padding: 10px 30px; font-style: italic; text-transform: uppercase; color: #008bc6!important; display: inline-block; } #product-carousel a:hover .btn { border: 1px solid #008bc6; } .btn-submit { background: #31bc16; color: #fff!important; } .btn-green { background: #31bc16!important; color: #fff!important; } .google-maps { position: relative; padding-bottom: 35%; height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } @media (max-width: 768px) { .text-center-sm { text-align: center; } .pull-center-sm { float: none!important; margin-left: auto!important; margin-right: auto!important; } #home-carousel h1:after { left: 50%; margin-left: -100px; } } @media (min-width: 768px) { #footer { background: url('../img/footer.jpg') no-repeat center center; padding: 60px 0; } #home-carousel .item { height: 485px; color: #fff; font-size: 18px; padding: 50px; } #home-carousel h1 { font-weight: bold; font-size: 52px; text-transform: uppercase; } #home-carousel h4 { font-weight: bold; font-size: 30px; margin: 30px 0; } } @media (min-width: 992px) { #header { height: 94px; } #page { margin-top: 94px; } #home-carousel, #home-carousel .item { height: 485px; } #home-carousel .item { color: #fff; font-size: 18px; padding: 60px; } #home-carousel h1 { font-weight: bold; font-size: 52px; text-transform: uppercase; } #home-carousel h4 { font-weight: bold; font-size: 30px; margin: 30px 0; } #footer { padding: 100px 0; } } @media (min-width: 1170px) { #home-carousel, #home-carousel .item { height: 485px; } #home-carousel .item { color: #fff; font-size: 15px; } #home-carousel h1 { font-weight: bold; font-size: 52px; text-transform: uppercase; } #home-carousel h4 { font-weight: bold; font-size: 30px; margin: 30px 0; } } #mobile-menu ul { list-style: none; padding: 0; margin: 10px -15px -10px -15px; } #mobile-menu ul li { border-left: none; border-right: none; border-radius: 0; padding: 6px 6px 6px 25px; } #mobile-menu ul li:last-child { border-bottom: none; } #mobile-menu a { color:#008bc6; text-decoration: none; } .sidr { transform: translate3d(0,0,0); display:none; position:absolute; position:fixed; top:0; height:100%; z-index:999999; width:260px; overflow-x:none; overflow-y:auto; background:#f8f8f8; color:#333;-webkit-box-shadow:inset 0 0 5px 5px #ebebeb;-moz-box-shadow:inset 0 0 5px 5px #ebebeb;box-shadow:inset 0 0 5px 5px #ebebeb} .sidr .sidr-inner{padding:0 0 15px} .sidr .sidr-inner>p{margin-left:15px;margin-right:15px} .sidr.right{left:auto;right:-260px} .sidr.left{left:-260px;right:auto} #accordion * { border-radius: 0!important; } #accordion .panel-heading a { border-radius: 0; text-decoration: none; color: #fff; display: block; position: relative; z-index: 1; line-height: 22px; } #accordion .panel-heading { position: relative; background: #008bc6; } #accordion .panel-heading:after { display: block; color: #fff; text-align: center; content: '+'; border: 1px solid #fff; border-radius: 100%!important; text-align: center; line-height: 24px; font-size: 20px; position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; z-index: 0; } #accordion .panel.active .panel-heading:after { content:'-'; line-height: 20px; } #accordion .panel { border-color: #7cd7ff; background: none; margin-bottom: 10px; } .tab-title { display: block; text-transform: uppercase; font-size: 17px; font-weight: bold; color:#2e2e2e; border-color: #fff!important; border-bottom: 1px solid #969696!important; border-radius:0!important; } .tab-title:hover { background: #d5d5d5!important; } .active .tab-title { color: #0089d0!important; border-color: #969696!important; border-bottom: 1px solid #fff!important;} .active .tab-title:hover { background: #fff!important; } .tabContent { padding: 20px; border: 1px solid #969696; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } #formContainer { position: relative; } #formContainer:before { content:''; position: absolute; left: 50%; top: 0px; display: block; width: 0; height: 0; border-top: 16px solid #fff; border-left: 16px solid #0089d0; border-right: 16px solid #0089d0; } #productTabs { border: 1px solid #969696; border-bottom: 0px none; padding: 15px; overflow: visible; } @media (max-width:767px) { .img-sm-full { float: none!important; margin-left: 0px!important; margin-right: 0px!important; width: 100%!important; height: auto!important; } }