/* Fonts*/ @font-face { font-family: 'RobotoBold'; src: url('../fonts/RobotoBold.eot'); src: url('../fonts/RobotoBold.eot') format('embedded-opentype'), url('../fonts/RobotoBold.woff2') format('woff2'), url('../fonts/RobotoBold.woff') format('woff'), url('../fonts/RobotoBold.ttf') format('truetype'), url('../fonts/RobotoBold.svg#RobotoBold') format('svg'); } @font-face { font-family: 'RobotoLight'; src: url('../fonts/RobotoLight.eot'); src: url('../fonts/RobotoLight.eot') format('embedded-opentype'), url('../fonts/RobotoLight.woff2') format('woff2'), url('../fonts/RobotoLight.woff') format('woff'), url('../fonts/RobotoLight.ttf') format('truetype'), url('../fonts/RobotoLight.svg#RobotoLight') format('svg'); } @font-face { font-family: 'RobotoRegular'; src: url('../fonts/RobotoRegular.eot'); src: url('../fonts/RobotoRegular.eot') format('embedded-opentype'), url('../fonts/RobotoRegular.woff2') format('woff2'), url('../fonts/RobotoRegular.woff') format('woff'), url('../fonts/RobotoRegular.ttf') format('truetype'), url('../fonts/RobotoRegular.svg#RobotoRegular') format('svg'); } @font-face { font-family: 'RobotoMedium'; src: url('../fonts/RobotoMedium.eot'); src: url('../fonts/RobotoMedium.eot') format('embedded-opentype'), url('../fonts/RobotoMedium.woff2') format('woff2'), url('../fonts/RobotoMedium.woff') format('woff'), url('../fonts/RobotoMedium.ttf') format('truetype'), url('../fonts/RobotoMedium.svg#RobotoMedium') format('svg'); } @font-face { font-family: 'Exo2Black'; src: url('../fonts/9838.eot'); src: url('../fonts/9838.eot') format('embedded-opentype'), url('../fonts/9838.woff2') format('woff2'), url('../fonts/9838.woff') format('woff'), url('../fonts/9838.ttf') format('truetype'), url('../fonts/9838.svg#9838') format('svg'); } @font-face { font-family: 'DroidSansBold'; src: url('../fonts/DroidSansBold.eot'); src: url('../fonts/DroidSansBold.eot') format('embedded-opentype'), url('../fonts/DroidSansBold.woff2') format('woff2'), url('../fonts/DroidSansBold.woff') format('woff'), url('../fonts/DroidSansBold.ttf') format('truetype'), url('../fonts/DroidSansBold.svg#DroidSansBold') format('svg'); } body { font-size: 1.4rem; } /* Bootstrap override */ .navbar { background: url(../img/header_img.png) center center; opacity: 0.95; height: 8rem; width: 100%; margin: 0 auto; } .navbar-default { border-color: black; } .navbar-default .navbar-brand a:hover { color: #ffffffd1; } .navbar-default .navbar-nav>li>a { color: white; } .navbar-default .navbar-nav>li:nth-child(2) { vertical-align: super; } .navbar-default .navbar-nav>li:nth-child(4) { vertical-align: super; } .navbar-default .navbar-nav .navbar-right>li { vertical-align: baseline; } .navbar-default .navbar-nav>li>a:hover { color: #faf7f2; opacity: 0.9; } .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 20px; color: white; line-height: 4.4rem; font-family: 'Exo2Black'; font-size: 2.9rem; font-weight: bolder; } .navbar-header { background: url(../img/hex.png) no-repeat center center; background-size: 140px; background-position-x: 24px; background-position-y: 5px; height: 9rem; } .navbar-nav { float: none; text-align: center; margin: 0 auto; } .navbar-nav li { float: none; display: inline-block; } .navbar-nav li a { line-height: 5.4rem; font-family: 'RobotoLight'; font-size: 2.2rem; } .navbar-toggle { margin-top: 22px; } .navbar-collapse { border-top: none; box-shadow: none; } .numberCircle { background: white; border-radius: 0.8em; -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; color: black; display: inline-block; font-weight: bold; line-height: 1.6em; margin-right: 5px; text-align: center; width: 1.6em; } .search { position: relative; display: inline-flex; flex-direction: row-reverse; width: 0; } .search:hover { width: 150px; } .search:active { width: 150px; } .input{ border: 0px; /*border-bottom: 2px solid #fff;*/ background: transparent; width: 0%; padding: 15px 10px; outline: none; color: #fff; font-weight: bold; transition: all 0.3s ease; } #search { cursor: pointer; color: white; } .input.active{ width: 98%; padding-left: 5px; /* transition: all 0.5s 0.8s ease;*/ } input::placeholder { color: #fff; } .splash { padding:15em 0 2em; background-image: url(../img/slider.png); background-size:cover; background-position: 30% 30%; color:#fff; text-align:center; height: 110rem; margin: 0 auto; } .splash .container>h1 { font-family: 'DroidSansBold'; font-size: 7em; } .splash .container>h2 { font-family: 'DroidSansBold'; font-size: 2em; /*margin-top: 47%;*/ line-height: 110rem; } .product-swiper-header { margin: 30px; text-align: center; } .product-swiper-header .heading { margin: 60px 0 20px; text-align: center; width: 100%; } .product-swiper-header .a-block { display: block; color: inherit; } .a-block, .button { text-decoration: none; } a.collection { text-decoration: none; color: white; } .product-swiper-header .heading-title { font-family: 'RobotoRegular'; font-size: 3em; margin: 0; text-align: center; } .product-swiper-header .product-swiper-pagination { text-align: center; margin-top: 15px; } .swiper-pagination-bullet { width: 10px; height: 10px; display: inline-block; border-radius: 100%; border: 1px solid black; position: relative; margin: -4px; } .product-swiper-header .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: #c8b08a; } .swiper-pagination-bullet:not(:last-child):after { content: ""; position: absolute; height: 0; border-top: 1px solid #606163; margin-top: -1px; } .pagination { display: contents; } .pagination .swiper-pagination-bullet:not(:last-child) { margin-right: 60px; } .pagination .swiper-pagination-bullet:not(:last-child):after { left: 9px; top: 4px; width: 60px; } .products { padding-right: 5px; padding-left: 5px; } .row { margin: 0 auto; } .container { width: auto; } .col-md-12 .col-sm-3 { background: white; margin: 0 auto; } .product-img img { height: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; max-width: 100%; max-height: 100%; margin: auto; } .content{ margin: 15px auto; overflow: hidden; } .product { height: 45rem; overflow: hidden; text-align: center; transition: all 0.5s ease 0s; display: block; position: relative; margin: 0 20px 20px 0; text-decoration: none; z-index: 0; } .products { list-style: none; margin: 0 -20px auto auto; padding: 0; } .product:hover { box-shadow: 0 0 16px rgba(0, 0, 0, 0.5); } .product-img { height: 30rem; background: #faf7f2; position: relative; padding-bottom: 100%; overflow: hidden; } .product-img:hover { opacity: 0.8; } .product-title { margin-top: 1.5em; } .product-title a { color: #000; font-weight: 400; font-size: 1.6rem; font-family: 'RobotoLight'; text-transform: uppercase; text-decoration: none; } .product-desc { max-height: 3rem; overflow: hidden; font-family: 'RobotoLight'; font-size: 2.1rem; } .product-price { bottom: 1rem; left: 0; position: absolute; width: 100%; font-family: 'RobotoMedium'; font-size: 1.8rem; font-weight: 500; } .product-img .glyphicon-heart-empty { font-size: x-large; top: 2rem; color: black; right: 2rem; } .product-img .glyphicon-shopping-cart { top: 27rem; font-size: x-large; color: black; } .product-img .glyphicon-heart-empty:hover { color: #c8b08a; } .product-img .glyphicon-shopping-cart:hover { color: #c8b08a; } .col-sm-12 .clearfix { padding-top: 15px; } .col-sm-12 { padding: 0; } .col-sm-6 { padding: 0; } .row { margin-right: -15px; margin-left: -15px; } .ornaments { background: url(../img/ornaments.png) no-repeat; background-size:cover; filter: brightness(80%); height: 55rem; color: white; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; } p.title.text-center { font-family: 'RobotoLight'; font-size: 2.2rem; font-weight: bold; letter-spacing: 4px; } p.center-block.text-center { font-family: 'RobotoBold'; font-size: 4rem; font-weight: bold; letter-spacing: 2px; } p.detail.text-center { transition: all 0.3s ease; transform: scale(1.0); } p.detail.text-center:hover, .map p.detail.text-center:hover { transform: scale(1.1); } p.detail.text-center>a { border: 1px solid white; text-decoration: none; color: white; font-family: 'RobotoRegular'; font-size: 3.2rem; font-weight: bold; letter-spacing: 2px; padding: 12px 20px 12px 20px; } .process { background: url(../img/process.png) no-repeat; background-size:cover; filter: brightness(80%); height: 55rem; color: white; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; } .process:hover, .ornaments:hover { filter: brightness(110%); } .map { background-image: url(../img/map.png); background-position: 50% 50%; background-size: cover; height: 55rem; color: white; } .map p.center-block.text-center { font-family: 'RobotoBold'; font-size: 5rem; font-weight: bold; position: relative; align-items: center; text-align: center; justify-content: center; top: 18%; } .map p.detail.text-center { position: relative; align-items: center; text-align: center; justify-content: center; top: 68%; text-decoration: none; transition: all 0.3s ease; transform: scale(1.0); } .map p.detail.text-center>a { border: 1px solid white; padding: 12px 20px 12px 20px; } .map .marker1 { position: absolute; top: 45%; left: 37%; transition: all 0.3s ease; transform: scale(1.0); } .map .marker2 { position: absolute; top: 54%; left: 42%; transition: all 0.3s ease; transform: scale(1.0); } .map .marker3 { position: absolute; top: 62%; left: 61%; transition: all 0.3s ease; transform: scale(1.0); } .map .marker4 { position: absolute; top: 52%; left: 50%; transition: all 0.3s ease; transform: scale(1.0); } .marker1:hover, .marker2:hover, .marker3:hover, .marker4:hover { transform: scale(1.2); } .form-group { margin-bottom: 30px; } .form-control { width: 25%; } .center-block.text-center.clearfix { padding: 10px 0 10px 0; font-family: 'RobotoLight'; font-size: larger; font-weight: bold; } .footer { background: black; padding: 10px 0; opacity: 0.9; } .footer a { padding: 5px; color: white; } ul.nav.navbar-nav.text-center li a { color: white; display: inline; font-family: 'RobotoLight'; font-size: 1.6rem; } li.center-block { right: 4.2%; } .fa { margin-left: 8px; } ul.nav.navbar-nav.text-center li a:hover { color: #ffffffd1; } .nav>li>a:active, .nav>li>a:hover { text-decoration: none; opacity: 0.8; background: none; } adress { padding: 10px; color: white; font-family: 'RobotoLight'; } /*Size*/ @media only screen and (max-width: 1114px) { .navbar-nav li a { font-size: 1.6rem; padding: 5px 5px; } } @media only screen and (max-width: 768px) { .navbar-nav { float: right; margin: 0 auto; background: black; opacity: 0.8; width: auto; } .input{ padding: 0; } .input.active{ padding: 0; } ul.nav.navbar-nav.text-center { float: none; margin: 0 auto; } ul.nav.navbar-nav.text-center li { display: inline-block; } ul.nav.navbar-nav.text-center li a { color: white; } .navbar-nav li { display: block; } .navbar-nav li a { line-height: 3rem; } .navbar-default .navbar-nav .navbar-right>li { display: inline-block; } .splash .container { font-size: 50%; } a.collection { font-size: 1.8em; } .product-swiper-header .heading-title { font-size: 2rem; } .product-title a { font-size: 1.2rem; } .product-desc { font-size: 1.6rem; } .product-price { font-size: 1.3rem; } .map p.center-block.text-center { font-size: 2.7rem; } ul.nav.navbar-nav.text-center li a { font-size: 1.3rem; } adress .text-center { font-size: 1.1rem; } } @media only screen and (max-width: 450px) { .navbar-nav li a { font-size: 1.2rem; padding: 3px 3px; } } @media only screen and (min-width: 450px) { .col-sm-3 { width: 50%; } } @media only screen and (min-width: 768px) { .col-sm-3 { width: 33.333%; } } @media only screen and (min-width: 1000px) { .col-sm-3 { width: 25%; } }