:root {
    --font: 'Poppins', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --main: #0C63E7;
    --accent: #FFD670;
    --padding: 6.16667vw 8.16667vw;
    --dark-text: #444545;
    --light-text: #7E879E;
}

*, *:focus, *:hover {
    outline: none;
}
a, a:hover {
    text-decoration: none;
}
textarea, select, input, button { outline: none; }

:focus {
    outline-color: transparent;
    outline-style: none;
  }
/******************************/
/*     01. General Styles     */
/******************************/
body, html {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
.flex {
	display:flex;
}
.flex-column {
	flex-direction:column;
}
.margin-top-auto {
	margin-top: auto;
}
body, p {
    color: var(--dark-text);
    font: 400 1rem/1.625rem "Open Sans", sans-serif;
}

.p-large {
    font: 400 2.125rem "Poppins", sans-serif;
}

.p-small {
    font: 400 0.875rem/1.5rem "Open Sans", sans-serif;
}

h1 {
    color: #fff;
    font: 700 6.5rem/5.125rem "Poppins", sans-serif;
}

h2 {
    font: 400 3rem/3.625rem "Poppins", sans-serif;
    letter-spacing: -0.2px;
}

h3 {
    color: #333;
    font: 700 1.625rem/2.125rem "Open Sans", sans-serif;
    letter-spacing: -0.2px;
}

h4 {
    color: #333;
    font: 700 1.375rem/1.75rem "Open Sans", sans-serif;
    letter-spacing: -0.1px;
}

h5 {
    color: #333;
    font: 700 1.125rem/1.5rem "Open Sans", sans-serif;
    letter-spacing: -0.1px;
}

h6 {
    color: #333;
    font: 700 1rem/1.375rem "Open Sans", sans-serif;
    letter-spacing: -0.1px;
}

.contact {
    display:flex;
    font-size:15px;
}
.contact h3 {
    color:#fff;
    font-family: var(--font);
    text-transform: uppercase;
    margin-bottom: 15px;
}
.contact p {
    color:rgba(255,255,255,0.7)
}
.contact .icons {
    margin-top:50px;
}
.contact .icons li {
    margin-bottom:20px;
}
.contact .icons li:last-child {
    margin-bottom:0px;
}
.contact svg {
    width:24px;
    height:24px;
    margin-right: 15px;
}
.contact svg path {
    fill:#fff;
}
.contact .contact-section {
    flex:3;
}
.contact #map {
    flex:2;
}
.contact-section {
    padding:60px;
    background:var(--main);
    display:flex;
    color: rgba(255,255,255,0.7);
}
.contact-data {
    flex-grow:1;
    padding:30px 90px 30px 60px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.contact-data a {
    color: rgba(255,255,255,0.7);
}
.contact-data p {
    font-size: 14px;
}
.contact-form {
    padding: 30px;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 10px;
    width: 450px;
    background:#fff;
}
.contact-form button {
    display:block;
    width: 100%;
    font-size:13px;
    text-transform: uppercase;
    padding:12px;
    font-weight: bold;
}
.contact-form label {
    color:var(--dark-text);
    font-size:13px;
    margin-bottom: 3px;
    font-weight: bold;
}
.contact-form input, .contact-form textarea {
    border-color:#dee2e6;
    font-size:14px;
}
.contact-form textarea {
    background:#F9F9FB;
    border:none;
}
.contact-form .help-block {
    font-size:11px;
    margin-bottom:0px;
}
.contact-form .help-block.help-block-error {
    color:#ff6b6b;
}
.alert.alert-success {
    color: #fff;
    font-size: 14px;
    border:none;
    background-color: #38d9a9;
}
/******************************/
/*     Items     */
/******************************/

section.items {
    position: relative;
    padding:6em 0;
    display: flex;
    flex-direction: column;
}

    section h2 {
        color: var(--main);
    }

    section.items > div img {
        width: 100%;
    }


.slick-nav {
    padding: 3em var(--padding);
}

.items-arrows svg {
    width: 52px;
    height: 52px;
    border: 1px solid var(--main);
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
}

    .items-arrows svg:hover {
        background: var(--main)
    }

        .items-arrows svg:hover path {
            fill: #fff;
        }

    .items-arrows svg:first-child {
        margin-right: 20px;
    }

    .items-arrows svg path {
        fill: var(--main)
    }

.items-arrows div.slick-arrow.slick-disabled svg {
    fill: #dee2e6;
    border: 1px solid var(--light-text);
    cursor: default;
}

    .items-arrows div.slick-arrow.slick-disabled svg path {
        fill: var(--light-text);
    }

    .items-arrows div.slick-arrow.slick-disabled svg:hover {
        background: transparent;
    }

/******************************/
/*     Categories     */
/******************************/
#categories {
    background: #868e96;
    padding: var(--padding);
}
.category {    
    background:#fff;
    position: relative;
    box-shadow: 0px 5px 20px rgba(0,0,0,0.075);
    margin-bottom:30px;
}
.category > div:first-child {
    padding:30px 20px;
    display: flex;
    flex-direction: column;
    
    font-size: 13px;
    color: var(--light-text);
    line-height: 1.45;
    flex:3;
}
.category > div:first-child span {
    font-family: var(--font);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
    margin-bottom:20px;
    color: var(--dark-text);
}
.category > div:last-child {
    flex:2;
}
.category .item-image img {
    width:100%;
}
section.categories h2 {
    color:#fff !important;
} 
.category a {
    display:block;
    height:100%;
    background-size: cover;
    background-position: center center;
}
/******************************/
/*     Item     */
/******************************/
#items {
    background: #f1f3f5;
    padding: var(--padding);
}

.item {
    background:#fff;
    height:100%;
    position: relative;
    box-shadow: 0px 5px 20px rgba(0,0,0,0.075)
}
    
.item .item-data {
    padding:20px;
}

.item-price {
    padding:20px;
    margin-top:auto;
}
    .item .name {
        font-family: var(--font);
        text-transform: uppercase;
        font-weight: bold;
        font-size: 20px;
    }

    .item .description {
        font-size: 13px;
        color: var(--light-text);
        line-height:1.45;
    }

.item .discount {
    font-size: 16px;
    background: var(--accent);
    border-radius: 2px;
    font-weight: bold;
    padding: 3px 10px;
}

.item .tag {
    position: absolute;
    top: 40px;
    left: -15px;
    box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
    font-size: 14px;
    padding: 8px 15px;
    border-radius: 2px;
    font-family: 'Poppins';
    border-bottom: 3px solid #e9ecef;
    color: #000;
    font-weight: bold;
    background-color: #fff;
}

        .item .tag span {
            display: block;
            z-index: 2;
        }


.item .price {
    font-size: 16px;
    line-height: 14px;
    font-weight: bold;
}

    .item .price span {
        font-size: 11px;
        margin-bottom:5px;
        line-height:10px;
        color: var(--light-text);
        font-weight: normal;
        text-decoration: line-through;
    }

    .item .priceEur {
        color: var(--dark-text)
    }

/*************************/
/*     Hero     */
/*************************/
.hero {
    margin:0;
    margin-top:117px;
    height: 70vh;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    background: url("../images/2F6A4358.jpg") center center;
    background-size:cover;
}

.hero {
    color:#fff;
    font-size:24px;
    line-height:1.4;
}

.hero-text {
    padding: 70px 150px;
    z-index:3;
    background: rgba(12, 99, 231, 0.8);
}

.hero-text h2 {
    display:block;
    font-size:40px;
    font-weight: bold;
    margin-bottom:0;
    color:#fff !important;
}


.hero-image {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 68vw;
    background-size: cover;
    background-repeat: no-repeat;
}

/**************************/
/*     03. Navigation     */
/**************************/
.navbar-custom {
    background-color: transparent;
    /* background-color: var(--main); */
    box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
    font: 700 0.875rem/0.875rem "Open Sans", sans-serif;
    transition: all 0.2s;
}

    .navbar-custom .container {
        max-width: 87.5rem;
    }

    .navbar-custom .navbar-brand.logo-image img {
        width: 12rem;
        height: auto;
    }

    .navbar-custom .navbar-brand.logo-text {
        font: 700 2rem/1.5rem "Open Sans", sans-serif;
        color:var(--main);
        text-decoration: none;
    }

    .navbar-custom .navbar-nav {
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .navbar-custom .nav-item .nav-link {
        padding: 0.625rem 0.75rem 0.625rem 0.75rem;
        color: var(--main);
        opacity: 0.8;
        text-decoration: none;
        transition: all 0.2s ease;
    }

        .navbar-custom .nav-item .nav-link:hover,
        .navbar-custom .nav-item .nav-link.active {
            color: #fff;
            opacity: 1;
        }

        
/**************************/
/*     Map     */
/**************************/


/**************************/
/*     Gallery     */
/**************************/

.gallery {
    padding: var(--padding); 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-gap: 5px;
    background: rgba(65, 105, 225, 0.2);
    grid-template-areas: 'img-1 img-2 img-3 img-3' 'img-1 img-4 img-5 img-6' 'img-7 img-7 img-8 img-6';
}

    .gallery > div {
        min-height: 400px;
        background-size: cover;
        background-position: center center;
    }

.img-1 {
    grid-area: img-1;
    background-image: url(../images/gallery/image1.jpg);
}

.img-2 {
    grid-area: img-2;
    background-image: url(../images/gallery/image2.jpg);
}

.img-3 {
    grid-area: img-3;
    background-image: url(../images/gallery/2F6A4358.jpg);
}

.img-4 {
    grid-area: img-4;
    background-image: url(../images/gallery/2F6A4406.jpg);
}

.img-5 {
    grid-area: img-5;
    background-image: url(../images/gallery/image4.jpg);
}

.img-6 {
    grid-area: img-6;
    background-image: url(../images/gallery/image5.jpg);
}

.img-7 {
    grid-area: img-7;
    background-image: url(../images/gallery/image_66.jpg);
}

.img-8 {
    grid-area: img-8;
    background-image: url(../images/gallery/2F6A4416.jpg);
}

.show-on-small {
    display:none;
}

::-webkit-input-placeholder { /* Edge */
    color: #ced4da !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ced4da !important;
}
  
::placeholder {
color: #ced4da !important;
}

footer {
    background: var(--dark-text);
    padding:100px 200px;
    color:#fff;
    font-size: 14px;
}
footer p {
    color:#fff;
}
footer a, footer a:hover {
    color:#fff;
}
footer a {
    margin-bottom:10px;
}
footer svg {
    width:24px;
    height:24px;
    display:block;
    margin-right:8px;
}
footer svg path {
    fill:#fff;
}
footer .title {
    font-size:13px;
    font-weight: bold;
    text-transform: uppercase;
}
footer p {
    font-size:13px;
}
.icons {
    padding:0;
    list-style: none;
}
.icons li {
    display:flex;
    align-items: center;
    margin-bottom: 15px;
}
/* Min-width width 992px */
@media (min-width: 767px) {

    /* Navigation */
    .navbar-custom {
        padding: 2.125rem 1.5rem 2.125rem 2rem;
        background: transparent;
        box-shadow: none;
    }

        .navbar-custom .navbar-nav {
            margin-top: 0;
            margin-bottom: 0;
        }

        .navbar-custom .nav-item .nav-link {
            padding: 0.25rem 0.75rem 0.25rem 0.75rem;
        }

            .navbar-custom .nav-item .nav-link:hover,
            .navbar-custom .nav-item .nav-link.active {
                opacity: 1;
            }

        .navbar-custom.top-nav-collapse {
            padding: 0.5rem 1.5rem 0.5rem 2rem;
            background-color: var(--main);
            box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
        }

        .navbar-custom.top-nav-collapse .show-on-small {
            display:block;
        }

        .navbar-custom.top-nav-collapse .hide-on-small {
            display:none;
        }

            .navbar-custom.top-nav-collapse .nav-item .nav-link:hover,
            .navbar-custom.top-nav-collapse .nav-item .nav-link.active {
                color: #fff;
            }

        .navbar-custom .dropdown-menu {
            padding-top: 1rem;
            padding-bottom: 1rem;
            border-top: 0.25rem solid rgba(0, 0, 0, 0);
            border-radius: 0.25rem;
        }

        .navbar-custom.top-nav-collapse .dropdown-menu {
            border-top: 0.25rem solid rgba(0, 0, 0, 0);
            box-shadow: 0 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.02);
        }

        .navbar-custom .dropdown-item {
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
        }

        .navbar-custom .dropdown-items-divide-hr {
            width: 84%;
        }

        .navbar-custom .nav-item .btn-outline-sm {
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 1rem;
        }
    /* end of navigation */


    /* Header */
    .header .header-content {
        text-align: left;
    }

    .header .text-container {
        margin-top: 4rem;
        margin-bottom: 0;
    }

    .header .image-container {
        position: relative;
        margin-top: 3rem;
    }

        .header .image-container .img-wrapper {
            position: absolute;
            display: block;
            width: 470px;
        }

    .header-frame {
        height: 8rem;
    }
    /* end of header */
}
/* end of min-width width 992px */

@media only screen and (max-width: 1500px) {
    .contact-form {
        width:400px;
    }
}
@media only screen and (max-width: 1400px) {
    .contact-data {
        padding:30px;
    }
}
@media only screen and (max-width: 1300px) {
    .contact {
        flex-direction: column;
    }

    .contact #map {
        flex:none;
        height:400px;
    }
}
@media only screen and (max-width: 900px) {
    .contact-section {
        padding: 30px;
    }

    .contact-data {
        padding: 0 30px 0 0;
    }
}

@media only screen and (max-width: 850px) {
    footer {
        padding:100px;
    }
}

@media only screen and (max-width: 765px) {
    .hero {
        margin-top: 65px;
    }    
    .follow {
        margin-bottom:30px;
    }
    section h2 {
        font-size: 36px;
    }
    .contact-section {
        flex-direction: column;
        align-items: center;
    }
    .contact .icons {
        margin-top:15px;
    }

    .navbar-custom {
        background:rgba(255,255,255, 0.9);
    }

    .contact-form {
        margin-top:30px;
    }

    .information {
        margin-top:25px;
    }
}

@media only screen and (max-width: 700px) {
    .hero {
        justify-content:center;
        font-size:20px;
    }
    .hero-text {
        width:80vw;
        padding:20px;
        display:flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
    }
    .hero-text h2 {
        font-size: 28px;
        font-weight:bold;
        display:block;
    }
}

@media only screen and (max-width: 600px) {
    #categories {
        padding:0;
    }
    .category {
        margin-bottom:15px;
    }

    .contact-form {
        width:100%;
    }
    section.categories h2 {
        margin-bottom: 0px !important;
    }

    .navbar-custom .navbar-brand.logo-image img {
        width:9rem;
    }
    .hero {
        margin-top: 55px;
    }
}

@media only screen and (max-width: 450px) {
    .hero {
        font-size:14px;
    }
    .hero-text h2 {
        font-size: 20px;
    }
    section h2 {
        font-size: 22px;
    }
    footer {
        padding:30px;
        font-size:13px;
    }
}
.advertisements {
	height: 100vh;
	width: 100vw;
}
.adv {
	height: 100vh !important;
	width: 100vw;
	background-position: center center;
	background-repeat:no-repeat;
	background-size: cover;
	position:relative;
}
.adv .title {
	font-size: 80px;
	font-weight: 700;
	line-height: 1;
	color:#0c63e7;
    box-sizing: border-box;
    padding: 30px 60px;
    max-width: 80%;
    margin: 80px 0 0 0;
    font-family: 'Poppins';
    background: rgba( 255, 255, 255, 0.6 );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.08 );
	backdrop-filter: blur( 5.5px );
	-webkit-backdrop-filter: blur( 5.5px );
    border-radius: 0 20px 20px 0;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.adv .title > span {
	text-transform:uppercase;
	display: block;
	margin-bottom: 20px;
}
.adv .title.fadeInLeft {
	animation: fadeInLeft; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}
.adv .price.fadeInRight {
	animation: fadeInRight; /* referring directly to the animation's @keyframe declaration */
  	animation-duration: 2s; /* don't forget to set a duration! */
}
.adv .description {
	font-size: 26px !important;
	font-weight: 400 !important;
	line-height: 1.45;
	color:#0c63e7 !important;
    box-sizing: border-box;
    font-family: 'Open Sans';
}
.adv .description p {
	font-size: 26px !important;
	font-weight: 400 !important;
	line-height: 1.45;
	color:#0c63e7 !important;
    box-sizing: border-box;
    font-family: 'Open Sans';
}
.adv .price {
	line-height: 1;
	position:absolute;
	bottom: 80px;
	right: 0%;
	font-family: 'Poppins';
	background: rgba(12, 99, 231, 0.8);
	color:#fff;
    box-sizing: border-box;
	backdrop-filter: blur( 3.5px );
	padding: 30px 60px;
	-webkit-backdrop-filter: blur( 5.5px );
	box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.08 );
	display: flex;
	justify-content: flex-start;
	border-radius: 20px 0 0 20px;
}
.adv .price .price-integer {
	font-size: 130px;
	font-weight: 700;
}
.adv .price .price-decimal {
	font-size: 65px;
	font-weight: 700;
}
.adv .price .price-currency {
	font-size: 45px;
	font-weight: 700;
}
.adv .price .price-from {
	font-size: 30px;
	font-weight: 700;
    margin-bottom: 18px;
}
.price-in-kn {
	font-size:32px;
	font-weight: 300;
    margin-bottom: 18px;
    font-family: 'Open Sans';
    margin-left: 26px;
}
.old-price {
	font-size: 22px;
	text-decoration:line-through;
    align-self: flex-end;
    margin-bottom: 12px;
}
.price-discount {
    font-size: 52px;
    font-weight: 700;
    background: #ffd43b;
    color: #000;
    padding: 20px;
    border-radius: 20px 0 0 20px;
    width: auto;
    position: absolute;
    top: -34%;
    right: 0;
}
@-webkit-keyframes fadeInLeft{
    0%{
        opacity:0;
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0)
    }
    to{
        opacity:1;
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
}
@keyframes fadeInLeft {
    0%{
        opacity:0;
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0)
    }
    to {
        opacity:1;
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
}

@-webkit-keyframes fadeInRight {
    0%{
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }
    to{
        opacity:1;
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
}
@keyframes fadeInRight {
    0%{
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }
    to{
        opacity:1;
        -webkit-transform:translateZ(0);
        transform:translateZ(0)
    }
}
.adv.rotated .title {
    transform-origin: top left;
    transform: rotate(90deg);
    position: absolute;
    top: -18%;
    left: 90%;
    right: -40%;
}
.slick-track {
	height: 100vh;	
}
.adv.rotated .price {
    transform-origin: top left;
    transform: rotate(90deg);
    position: absolute;
    top: 46%;
    left: 32%;
    right: 37%;
    bottom: 30%;
}
.adv.rotated1 {
	position: fixed !important;
    top: -280px !important;
    bottom: 0px !important;
    left: 280px !important;
    right: 0px !important;
    transform: rotate(-90deg);
    height: 100vw !important;
    width: 100vh !important;
}