/*
Theme Name: Tonina
Author: Appliable
Description: Tonina website.
Version: 1.0
Text Domain: Tonina
*/

@font-face {
    font-family: 'Helvetica Neue';
    src: url("./fonts/helveticaneue.ttf");
    font-weight: 400;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url("./fonts/helvetica-neue-light.ttf");
    font-weight: 300;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url("./fonts/helvetica-neue-thin.ttf");
    font-weight: 200;
}

/*===Global styles==*/
:target { top: -70px; position: relative; visibility: hidden; }
html { scroll-behavior: smooth; }
body { font-family: 'Helvetica Neue', sans-serif; font-weight: 400; overflow-x: hidden; }
img { max-width: 100%; }
* { box-sizing: border-box; }
input[type=submit] { cursor: pointer; }
a, a:hover, a:focus { text-decoration: none; }
img { max-width: 100%; height: auto; }
* { box-sizing: border-box; }
input[type=submit], button { cursor: pointer; }
h1, h2, h3, h4 { font-weight: 300; text-transform: uppercase; }
strong { font-weight: 700; }
h2 { font-size: 80px; line-height: 92px; margin-bottom: 8px; color: #4A2A79; letter-spacing: -1.2px; }
h3 { font-size: 40px; line-height: 46px; margin-bottom: 26px }
p, span, strong, li, a {font-size: 20px; line-height: 23px; }
strong, p { color: black; }

#page-content li {  }
#page-content ul { padding-top: 10px; margin-bottom: 30px; }
#page-content ul li { padding-left: 35px; position: relative; }
#page-content ul li::before { content: ''; background: #2956a9; width: 6px; height: 6px; display: block; border-radius: 6px; position: absolute; left: 17px; top: 14px; }
.container { max-width: 1670px; width: 100%; }
.beyond { max-width: 1920px; margin: auto; }

.box-shadow { box-shadow: 0 3px 6px rgba(0,0,0,0.15); }
body { position: relative; overflow-x: hidden; }
.site-background-container { opacity: 0.77; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; z-index: -10;}
.site-background-container .container { display: flex; }
.site-background { position: relative; background: linear-gradient(to bottom, #FFAB80 0%, rgba(255,255,255,0) 59%) top, linear-gradient(to bottom, rgba(255,255,255,0) 68.2%, #FFAB80 100%) top; width: 100%; }

.parallax-background-image1 { background-image: url("images/bg1.png"); background-size: contain; background-position: right center; background-repeat: no-repeat; left: -44.4%; right: 0; top: 16%; position: absolute; padding-top: 122%; }
.parallax-background-image2 { background-image: url("images/bg2.png"); background-size: contain; background-position: left center; background-repeat: no-repeat; right: -44.4%; left: 0; bottom: 3%; position: absolute; padding-top: 122%;}

.navtoggle-container { display: none; }
.navtoggle { margin-left: auto; padding-left: 7px; padding-top: 10px; cursor: pointer; height: 40px; width: 40px; }
.navtoggle-inner {  overflow: hidden; position: relative; height: 20px; width: 26px; }
.navtoggle span {background-color: white; display: block; width: 26px; height: 4px; transition: transform 0.3s linear, top 0.2s linear, left 0.2s linear; transition-delay: 0s; position: absolute; }
.navtoggle span:nth-child(2n+0) { transition-delay: 0.3s; top: 50%; left: 0; transform: translateY(-50%); }
.navtoggle span:first-child { left: 0; top: 0; }
.navtoggle span:last-child { left: 0; top: 16px; }
.navtoggle.open span:first-child { transform: translate(-50%, -50%) rotate( 45deg ); left: 50%; top: 50%; transition-delay: 0.2s; }
.navtoggle.open span:nth-child(2n+0) { transform: translate(100%, -50%); transition-delay: 0s;}
.navtoggle.open span:last-child { transform: translate(-50%, -50%) rotate( -45deg ); left: 50%; top: 50%; transition-delay: 0.2s;}

/*===header===*/
.custom-logo-link{display: flex; flex-shrink: 0; }
.custom-logo-link img {height: 100%; width: auto; }
.header-container { display: flex; }
.header-hero-container { background-size: cover; background-position: center; flex-grow: 1; height: 738px; display: flex; align-items: end; width: 100%; }
.header-menu { transition: all 0.3s linear; width: 100%; margin-bottom: 0; padding-left: 110px; padding-right: 320px; background-color: rgba(255, 98, 17, 0.72); display: flex; justify-content: space-around; }
.header-menu li {display: inline-block; }
.header-menu li a { color: white; font-size: 20px; line-height: 37px; text-transform: uppercase; display: inline-block; font-weight: normal; }
.header-menu-container { transition: all 0.3s linear; width: 100%; margin-top: auto; }
.header-menu-container.fixed{ position: fixed; left: 0; right: 0; top: -37px; z-index: 20; transform: translateY(100%); }
.fixed .header-menu { padding-left: 15%; padding-right: 15%; }

/*===basic text block===*/
.basic-text-block{ width: 100%; padding-top: 68px; padding-bottom: 138px; }
.basic-text-block-headline { max-width: 850px;  width: 100%; margin-left: 17.4%; margin-right: auto; }
.basic-text-block-text { margin-left: auto;  max-width: 663px;  width: 100%; margin-right: 20.8%; }

/*===google map block===*/
.google-map-outer { margin-bottom: 72px; }
.google-map-inner { margin: auto; max-width: 1364px; width: 100%; }
.map-content { max-width: 767px; width: 100%; background-color: white; padding-top: 156px; padding-left: 60px; padding-bottom: 33px; }
.map-content p, .map-content a { font-weight: 200; }
.map-content h2 { margin-bottom: 45px; }
.google-map-container { height: 675px; width: 59.5%; margin-left: auto; margin-top: -337px; }

/*===about===*/
.about-container { background-color: black; display: flex; margin-bottom: 492px;}
.about-container h2 { color: white; margin-bottom: 82px; }
.about-container p { color: white; text-align: right; }
.about-container .first-col {width: 43.2%; padding-left: 65px; padding-top: 130px; padding-bottom: 60px; }
.about-container .second-col{width: 40%; padding-left: 52px; padding-top: 114px;}
.about-container .third-col {width: 301px; position: relative; }
.about-container .second-col img { margin-bottom: -268px; width: 100%; }
.about-container .third-col img { position: absolute; left: 0; right: 0; }

/*===opening hours===*/
.opening-hours { background-color: white; margin: 0 auto 60px; max-width: 1364px; width: 100%; padding-bottom: 70px; }
.opening-hours .opening-hours-title { margin-left: 137px; transform: translateY(-50%); }
.opening-hours-content { margin: auto; }
.opening-hours .part1 { width: 280px;}
.opening-hours .part2 { width: 320px; }
.opening-hours .part3 { width: 330px; }
.opening-hours .single-line { display: flex; justify-content: center; }
.opening-hours p { font-size: 37px; font-weight: 400; line-height: 1.5; margin: 0; }

/*===expandable block===*/
.block-with-expandable-text-inner img { margin-bottom: 20px; }
.block-with-expandable-text-inner { position: relative; z-index: 5; margin-left: 138px; }
.expandable-text-container { min-height: 253px; display: flex; padding-left: 46px; padding-right: 66px; background-color: white; max-width: 812px; position: absolute; left: 414px; top: 202px; }
.expandable-text-container .headline-container { display: flex; margin-top: -46px; }
.expandable-text-container-inner { position: relative; padding-bottom: 28px; width: 100%; }
.expandable-text-container h2 { margin-left: auto; margin-right: 166px; margin-bottom: 0; }
.expandable-text-container p { margin: 0; font-weight: 300; }
.expandable-text-container li { font-weight: 300; }
.expandable-part p { font-size: 20px; }

.expand-button { margin-top: 57px; cursor: pointer; user-select: none; display: inline-block; }
.expand-button svg { transition: transform 0.3s linear; }
.open .expand-button svg { transform: rotate(180deg); }
.expand-button span { font-size: 20px; line-height: 38px; display: inline-block; margin-left: 10px; font-weight: 300; }
.expandable-text-hidden-part { overflow: hidden; display: none; }
.single-price-item { margin-left: 35px; display: flex; }
.single-price-item p { line-height: 38px; }
.single-price-item_text{width: 65%}
.single-price-item_price{width: 35%; display: flex;}
.single-price-item_price p { color: #4A2A79; margin-top: auto; }

/*===gallery1===*/
.gallery1-container-inner { display: flex;}
.img-margin { margin-right: 20px; margin-bottom: 20px; }
.gallery1-first-col { width: 33.9% }
.gallery1-second-col { width: 66.1%; }
.gallery1 .second-col-top { width: 100%; }
.second-col-bottom { display: flex; }
.gallery1 .block-with-expandable-text-inner { margin-left: 0; }
.gallery1 .block-with-expandable-text-inner img { margin-right: 0; }
.gallery1 .expandable-text-container { width: 812px; left: unset; right: 522px; top: 265px; }
.gallery1 .expandable-text-container h2 { margin-left: 0; }

/*===gallery2===*/
.gallery2 { margin-bottom: 155px; }
.gallery2-first-row { margin-right: 138px; display: flex; }
.gallery2 .block-with-expandable-text-inner { margin-left: 0; }
.expandable-text-container { right: -122px; top: 105px; }

/*===Custom single column===*/
.custom-single-column { max-width: 910px; padding: 80px 15px 80px 15px; margin: auto; }

/*===footer===*/
.footer-block .site-logo { flex-grow: 1; display: flex; align-items: center; justify-content: center; width: 210px; height: 295px; background-color: black; padding: 30px 40px 38px; }
.footer-block .site-logo img { width: 98px; height: auto; }
.footer-menu-container { margin-top: auto; padding-right: 133px; background-color: black; height: 140px; width: 100%; display: flex; align-items: center; justify-content: end; }
.footer-block { display: flex; align-items: end; }
.footer-menu-container ul { margin: 0 0 0 auto; }
.footer-menu-container ul li { display: inline-block; margin-left: 77px; }
.footer-menu-container ul li a { font-size: 25px; font-weight: 300; color: white; }

@media (max-width: 1640px){
    .container { padding-left: 0; padding-right: 0; }
    .row { margin: 0; }
    .col { padding-left: 0; padding-right: 0; }
}

@media (max-width: 1640px){
    .header-menu { padding: 0; }
}

@media (max-width: 1500px) {
    .gallery1 .expandable-text-container { top: 100px; }
}

@media (max-width: 1400px){
    .block-with-expandable-text-inner { margin-left: 0; }
    .gallery1 .expandable-text-container { right: 40%; }
}

@media (max-width: 1250px) {
    .expandable-text-container { right: 20px; }
    .about-container { margin-bottom: 250px; }
}

@media (max-width: 1200px){
    .basic-text-block-headline { margin-right: auto; margin-left: auto; }
    .basic-text-block-text { margin-right: auto; }
    .gallery2-first-row { margin-right: 0; }
    .about-container .first-col { padding-left: 30px; padding-top: 30px;}
    .about-container .second-col { padding-left: 30px; padding-top: 30px; }
    .map-content { padding-top: 30px; left: 30px; }
    .google-map-container { margin-top: -214px; }
}


@media (max-width: 991px){
    body { padding-top: 40px; }
    .header-hero-container { height: 500px; }
    .custom-logo-link { height: 500px; }
    .custom-logo-link img { width: auto; }
    .basic-text-block { padding-right: 15px; padding-left: 15px; }
    .expandable-text-container { left: 100px; top: 327px; }
    .second-col-first-col { width: 33%; }
    .second-col-second-col { width: 67%; }
    .gallery1 .expandable-text-container { margin-top: -40px; margin-left: -50vw; margin-bottom: 12px; margin-right: 15px; width: 90vw; position: relative; top: unset; left: unset; right: unset; }
    .about-container { flex-direction: row-reverse; margin-bottom: 100px; }
    .about-container p { text-align: left; }
    .about-container .second-col img { margin-bottom: 20px; }
    .about-container .third-col { display: none; }
    .about-container .first-col, .about-container .second-col { width: 50%; padding-right: 30px; }
    .about-container .second-col { padding-right: 30px; }
    .about-container h2 { margin-bottom: 40px; font-size: 40px; line-height: 44px; }
    .opening-hours .opening-hours-title { margin-left: 15px; margin-right: 15px; }
    .opening-hours-content { padding-right: 15px; padding-left: 15px; }
    .opening-hours p { font-size: 28px; }
    .footer-menu-container { padding-right: 30px; }
    .header-hero-container { position: relative; }
    .navtoggle-container { width: 100%; position: fixed; top: 0; right: 0; left: 0; height: 40px; padding-right: 4px; display: block; z-index: 19; background: black; }
    .js-main-menu-mobile-container { transform: translatex(-100%) !important; transition: 0.4s ease-in-out; }
    .js-main-menu-mobile-container.visible { transform: translatex(0%) !important; }
    .header-menu-container { width: 260px; height: 100vh; padding-top: 40px; position: fixed; z-index: 20; top: 0; left: 0; background: black;}
    .header-menu { display: block; background-color: transparent; }
    .header-menu li { display: block; }
    .header-menu li a { display: block; text-align: center; padding: 5px 0; }
    .header-menu-container.fixed{ left: 0; right: 0; top: 0; }
    .fixed .header-menu { padding-right: 0; padding-left: 0; }
}

@media (max-width: 767px){
    .header-hero-container { height: 300px; }
    .custom-logo-link { height: 300px; }
    h3 { font-size: 36px; line-height: 40px; }
    h2 { font-size: 44px; }
    .basic-text-block { padding-top: 40px; padding-bottom: 40px; }
    .expandable-text-container { margin-right: 15px; margin-left: 15px; margin-top: -27px; margin-bottom: 12px; padding-left: 20px; padding-right: 20px; left: 20px; position: relative; top: unset; left: unset; right: unset; }
    .expandable-text-container .headline-container { margin-top: 0; }
    .expandable-text-container h2 { font-size: 44px; margin-left: 0; }
    .block-with-expandable-text-inner img { margin-bottom: 12px; }
    .img-margin { margin-right: 12px; margin-bottom: 12px; }
    .img2-container.img-margin, .img4-container.img-margin, .img6-container.img-margin{ margin-right: 0; }
    .gallery2 { margin-bottom: 60px; }
    .opening-hours { padding-bottom: 40px; }
    .opening-hours-title h2 { line-height: 50px; }
    .opening-hours-content .single-line { flex-wrap: wrap; }
    .single-line { margin-bottom: 15px; max-width: 500px; margin-left: auto; margin-right: auto; }
    .single-line .part1 { width: 50%; }
    .single-line .part2 { text-align: right; width: 50%; }
    .single-line .part3 { width: 100%; text-align: right; }
    .map-content { padding-top: 15px; padding-left: 15px; }
    .map-content h2 { margin-bottom: 20px; }
    .footer-menu-container { padding: 0; justify-content: center; }
    .footer-menu-container ul { margin: auto; }
    .footer-menu-container ul li { display: block; margin-left: 0; margin-bottom: 12px; text-align: center;}
    .custom-single-column { max-width: 810px; padding-top: 40px; }
    .block-with-expandable-text-inner img { width: 50%; }
    .gallery1 .block-with-expandable-text-inner img { width: unset; }
}

@media (max-width: 650px){
    .about-container { flex-wrap: wrap; flex-direction: column-reverse; }
    .about-container .second-col img { max-width: 200px; }
    .about-container .first-col, .about-container .second-col { width: 100%; }
    .google-map-container { width: auto; margin-right: 30px; margin-left: 30px; height: 300px; margin-top: 0; }
    .single-price-item { display: block; }
    .single-price-item_text, .single-price-item_price { width: 100%; }
}

@media (max-width: 500px){
    .about-container { margin-bottom: 70px; }
    .opening-hours-title h2 { font-size: 36px; }
    .opening-hours p { font-size: 22px; }
}