/* STYLE */
:root {
--color-1: rgb(0,0,0);
--color-a-1-1: rgba(0,0,0,0.2);
--color-a-1-2: rgba(0,0,0,0.3);
--color-a-1-3: rgba(0,0,0,0.8);
--color-a-1-4: rgba(0,0,0,0.1);
--color-a-1-5: rgba(0,0,0,0.5);

--color-2: rgb(255,255,255);
--color-a-2-1: rgba(255,255,255,0.9);
--color-a-2-2: rgba(255,255,255,0.8);
--color-a-2-3: rgba(255,255,255,0.3);
--color-3: rgb(200,0,0);

--color-4: rgb(220,40,30);
--color-a-4-1: rgba(220,40,30,0.8);

--color-5: rgb(230,230,235);
--color-a-5-1: rgba(230,230,235,0.8);
--color-6: rgb(220,220,225);
--color-7: rgb(240,240,245);

--color-8: rgb(240,240,245);
--color-a-8-1: rgba(240,240,245,0.8);

--color-9: rgb(245,190,0);

--color-10: rgb(30,30,30);

--color-11: rgb(220,220,225);

--color-12: rgb(150,150,150);



--background: var(--color-2);
--font-color: var(--color-1);
--font-family1: "Poppins", sans-serif;
--font-size: 18px;
--font-weight: 400;
--bold-font-weight: 600;
--font-style: normal;
--line-height: normal;
--min-width: 320px;
--link-color: var(--color-10);
--link-weight: 500;
--link-decoration: none;
--link-color-hover: var(--color-4);
--link-decoration-hover: none;
--transition-duration: 0.3s;
--transition-timing: ease;
--svg-arrow-v-n-width: 80px;
--svg-arrow-v-n-height: 100px;
--svg-arrow-h-n-width: 100px;
--svg-arrow-h-n-height: 80px;
--svg-arrow-v-w-width: 100px;
--svg-arrow-v-w-height: 80px;
--svg-arrow-h-w-width: 80px;
--svg-arrow-h-w-height: 100px;
--svg-okey-width: 90px;
--svg-okey-height: 100px;
--svg-close-width: 100px;
--svg-close-height: 100px;

/* Intersection Observer */
--io-transition-duration: 0.5s;
--io-transition-timing: ease;
--io-transition-delay: 0.3s;
--io-scale: 50%;
--io-left: -50%;
--io-right: 50%;
--io-up: -50px;
--io-down: 100px;
--io-blur: 10px;
/* End Intersection Observer */
}
@media (min-width: 1500px){
:root {
--cont-width: 1450px;
}
}
@media (min-width: 1200px){
:root {
--space-main: 130px;
--space-big: 80px;
--space-mid: 50px;
--space-low: 30px;
--width-big: 5%;
--ratio-big: 0.05;
--width-mid: 10%;
--ratio-mid: 0.1;
--width-low: 20%;
--ratio-low: 0.2;
--factor-mid: 0.8;
--factor-low: 0.6;
}
}
@media (min-width: 1200px) and (max-width: 1499px){
:root {
--cont-width: 1160px;
}
}
@media (min-width: 992px) and (max-width: 1199px){
:root {
--cont-width: 950px;
}
}
@media (min-width: 768px) and (max-width: 1199px){
:root {
--space-main: 110px;
--space-big: 60px;
--space-mid: 40px;
--space-low: 15px;
--width-big: 2.5%;
--ratio-big: 0.025;
--width-mid: 5%;
--ratio-mid: 0.05;
--width-low: 10%;
--ratio-low: 0.1;
--factor-mid: 0.9;
--factor-low: 0.8;
}
}
@media (min-width: 768px) and (max-width: 991px){
:root {
--cont-width: 730px;
}
}
@media (max-width: 767px){
:root {
--space-main: 90px;
--space-big: 40px;
--space-mid: 30px;
--space-low: 10px;
--width-big: 0%;
--ratio-big: 0;
--width-mid: 0%;
--ratio-mid: 0;
--width-low: 0%;
--ratio-low: 0;
--factor-mid: 1;
--factor-low: 1;
}
}
@media (min-width: 576px) and (max-width: 767px){
:root {
--cont-width: 550px;
}
}
@media (min-width: 576px){
:root {
--cont-margin: calc(50% - (var(--cont-width) / 2));
}
}
@media (max-width: 575px){
:root {
--cont-width: 95%;
--cont-margin: 2.5%;
}
}
/* END STYLE */





/*ELEMENTS*/

/* Buttons */
.button {
--button-color: var(--color-2);
--button-background: var(--color-4);
--button-background-color-hover: var(--color-10);
--button-font-weight: 400;
--button-color-hover: var(--color-9);
--button-text-transform: none;
--button-box-shadow-hover: none;
--svg-stroke: var(--color-2);
--svg-arrow-h-w-scale: 0.12;
--svg-okey-scale: 0.15;
--svg-close-scale: 0.15;
}
@media (min-width: 1200px){
:root {
--button-height: 46px;
--button-radius: 0px;
--button-padding: 25px;
--button-gap: 15px;
--button-font-size: 16px;
--button-font-spacing: 0px;
}
}
@media (min-width: 768px) and (max-width: 1199px){
:root {
--button-height: 44px;
--button-radius: 0px;
--button-padding: 20px;
--button-gap: 13px;
--button-font-size: 15px;
--button-font-spacing: 0px;
}
}
@media (max-width: 767px){
:root {
--button-height: 40px;
--button-radius: 0px;
--button-padding: 15px;
--button-gap: 10px;
--button-font-size: 14px;
--button-font-spacing: 0px;
}
}
/* End Buttons */


/* Arrows */
:root {
--arrow-stand-background: var(--color-4);
--arrow-stand-background-hover: var(--color-3);
--arrow-stand-background-inactive: var(--color-10);
}
@media (min-width: 1500px){
:root {
--arrow-stand-size: 70px;
--arrow-stand-img-ratio: 3.5;
}
}
@media (min-width: 1200px) and (max-width: 1499px){
:root {
--arrow-stand-size: 70px;
--arrow-stand-img-ratio: 3.5;
}
}
@media (min-width: 992px) and (max-width: 1199px){
:root {
--arrow-stand-size: 60px;
--arrow-stand-img-ratio: 3.5;
}
}
@media (min-width: 768px) and (max-width: 991px){
:root {
--arrow-stand-size: 60px;
--arrow-stand-img-ratio: 3.5;
}
}
@media (min-width: 576px) and (max-width: 767px){
:root {
--arrow-stand-size: 40px;
--arrow-stand-img-ratio: 3.25;
}
}
@media (max-width: 575px){
:root {
--arrow-stand-size: 40px;
--arrow-stand-img-ratio: 3.25;
}
}
/* End Arrows */


/* Link special */
.link-special {
--link-special-color: var(--color-4);
--link-special-font-weight: 600;
--link-special-color-hover: var(--color-3);
--link-special-text-transform: uppercase;
}
@media (min-width: 1200px){
.link-special {
--link-special-font-size: 14px;
--svg-arrow-h-w-scale: 0.11;
}
}
@media (min-width: 768px) and (max-width: 1199px){
.link-special {
--link-special-font-size: 14px;
--svg-arrow-h-w-scale: 0.10;
}
}
@media (max-width: 767px){
.link-special {
--link-special-font-size: 13px;
--svg-arrow-h-w-scale: 0.10;
}
}
/* End Link special */


/* Grid Photo Text */
@media (min-width: 1500px){
.grid-photo-text {
--grid-photo-text-gap: 100px;
--grid-photo-text-margin: 0;
}
}
@media (min-width: 1200px) and (max-width: 1499px){
.grid-photo-text {
--grid-photo-text-gap: 60px;
--grid-photo-text-margin: 0;
}
}
@media (min-width: 992px) and (max-width: 1199px){
.grid-photo-text {
--grid-photo-text-gap: 40px;
--grid-photo-text-margin: 0;
}
}
@media (min-width: 768px) and (max-width: 991px){
.grid-photo-text {
--grid-photo-text-gap: 50px;
--grid-photo-text-margin: 0 15% 0 15%;
}
}
@media (min-width: 576px) and (max-width: 767px){
.grid-photo-text {
--grid-photo-text-gap: 30px;
--grid-photo-text-margin: 0 10% 0 10%;
}
}
@media (max-width: 575px){
.grid-photo-text {
--grid-photo-text-gap: 25px;
--grid-photo-text-margin: 0 5% 0 5%;
}
}
/* End Grid Photo Text */


/* Social */
:root {
--social-count: 2;
}
/* End Social */


/* Form contact */
:root {
--form-contact-border: none;
--form-contact-color: var(--color-1);
--form-background: var(--color-8);
--form-contact-textarea-height: 15em;
--form-contact-label-empty-color: var(--color-12);
--form-contact-label-color: var(--color-4);
--form-contact-label-background: transparent;
--form-contact-label-add-color: var(--color-12);
}
/* End Form contact */


/* Cookies */
.cookies {
--cook-background: var(--color-a-1-3);
--cook-font-color:var(--color-2);
--cook-link-color: var(--color-8);
--cook-link-color-hover: var(--color-9);
--cook-button-color: var(--color-2);
--cook-button-color-hover: var(--color-1);
--cook-button-background: var(--color-4);
--cook-button-background-hover: var(--color-9);
--cook-button-stroke: var(--color-2);
--cook-button-stroke-hover: var(--color-1);
}
@media (min-width: 1200px){
.cookies {
--cook-font-size: 16px;
}
}
@media (min-width: 768px) and (max-width: 1199px){
.cookies {
--cook-font-size: 15px;
}
}
@media (max-width: 767px){
.cookies {
--cook-font-size: 14px;
}
}
/* End Cookies */


/* Gallery */
.gallery {
--grid-width: var(--cont-width);
--aspect-ratio: 66.66667%;
--grid-gap: 20px;
--grid-count: 4;
--gallery-font-weight: 500;
--gallery-color: var(--color-1);
--gallery-color-hover: var(--color-3);
}
@media (min-width: 1500px){
.gallery {
--grid-count: 5;
--grid-gap: 20px;
}
.width-low .gallery {
--grid-count: 4;
}
.a-r-1x1 {
--grid-count: 5;
}
.width-low .a-r-1x1 {
--grid-count: 4;
}
.a-r-3x2, .a-r-4x3, .a-r-16x9 {
--grid-count: 4;
}
.width-low .a-r-3x2, .width-low .a-r-4x3, .width-low .a-r-16x9 {
--grid-count: 3;
}
.a-r-2x3, .a-r-3x4 {
--grid-count: 5;
}
.width-low .a-r-2x3, .width-low .a-r-3x4 {
--grid-count: 4;
}
.a-r-9x16 {
--grid-count: 6;
}
.width-low .a-r-9x16 {
--grid-count: 5;
}
}
@media (min-width: 1200px) and (max-width: 1499px){
.gallery {
--grid-count: 4;
--grid-gap: 20px;
}
.width-low .gallery {
--grid-count: 3;
}
.a-r-1x1 {
--grid-count: 4;
}
.width-low .a-r-1x1 {
--grid-count: 3;
}
.a-r-3x2, .a-r-4x3, .a-r-16x9 {
--grid-count: 3;
}
.width-low .a-r-3x2, .width-low .a-r-4x3, .width-low .a-r-16x9 {
--grid-count: 2;
}
.a-r-2x3, .a-r-3x4 {
--grid-count: 4;
}
.width-low .a-r-2x3, .width-low .a-r-3x4 {
--grid-count: 3;
}
.a-r-9x16 {
--grid-count: 5;
}
.width-low .a-r-9x16 {
--grid-count: 4;
}
}
@media (min-width: 992px) and (max-width: 1199px){
.gallery {
--grid-count: 3;
--grid-gap: 20px;
}
.width-low .gallery {
--grid-count: 2;
}
.a-r-1x1 {
--grid-count: 3;
}
.width-low .a-r-1x1 {
--grid-count: 3;
}
.a-r-3x2, .a-r-4x3, .a-r-16x9 {
--grid-count: 3;
}
.width-low .a-r-3x2, .width-low .a-r-4x3, .width-low .a-r-16x9 {
--grid-count: 3;
}
.a-r-2x3, .a-r-3x4 {
--grid-count: 3;
}
.width-low .a-r-2x3, .width-low .a-r-3x4 {
--grid-count: 3;
}
.a-r-9x16 {
--grid-count: 4;
}
.width-low .a-r-9x16 {
--grid-count: 4;
}
}
@media (min-width: 768px) and (max-width: 991px){
.gallery {
--grid-count: 3;
--grid-gap: 10px;
}
.width-low .gallery {
--grid-count: 2;
}
.a-r-1x1 {
--grid-count: 3;
}
.width-low .a-r-1x1 {
--grid-count: 2;
}
.a-r-3x2, .a-r-4x3, .a-r-16x9 {
--grid-count: 3;
}
.width-low .a-r-3x2, .width-low .a-r-4x3, .width-low .a-r-16x9 {
--grid-count: 2;
}
.a-r-2x3, .a-r-3x4 {
--grid-count: 3;
}
.width-low .a-r-2x3, .width-low .a-r-3x4 {
--grid-count: 2;
}
.a-r-9x16 {
--grid-count: 4;
}
.width-low .a-r-9x16 {
--grid-count: 3;
}
}
@media (min-width: 576px) and (max-width: 767px){
.gallery {
--grid-count: 2;
--grid-gap: 10px;
}
.a-r-1x1 {
--grid-count: 2;
}
.a-r-3x2, .a-r-4x3, .a-r-16x9 {
--grid-count: 2;
}
.a-r-2x3, .a-r-3x4 {
--grid-count: 2;
}
.a-r-9x16 {
--grid-count: 3;
}
}
@media (max-width: 575px){
.gallery {
--grid-cell-width: 250px;
--grid-gap: 10px;
}
.a-r-1x1 {
--grid-cell-width: 250px;
}
.a-r-3x2, .a-r-4x3, .a-r-16x9 {
--grid-cell-width: 250px;
}
.a-r-2x3, .a-r-3x4 {
--grid-cell-width: 250px;
}
.a-r-9x16 {
--grid-cell-width: 150px;
}
}
.width-mid .gallery {
--grid-width: calc(var(--cont-width) * var(--factor-mid));
}
.width-low .gallery {
--grid-width: calc(var(--cont-width) * var(--factor-low));
}
@media (min-width: 576px){
.gallery {
--grid-cell-width: calc((var(--grid-width) - (var(--grid-gap) * (var(--grid-count) - 1))) / var(--grid-count));
}
}
@media (min-width: 1200px){
.gallery {
--gallery-font-size: inherit;
}
}
@media (min-width: 768px) and (max-width: 1199px){
.gallery {
--gallery-font-size: inherit;
}
}
@media (max-width: 767px){
.gallery {
--gallery-font-size: inherit;
}
}
/* End Gallery */


/* Zoom */
#zoom-layer {
--zoom-background: var(--color-1);
--zoom-control-color: var(--color-10);
--zoom-control-background: var(--color-a-8-1);
--zoom-control-background-hover: var(--color-4);
--zoom-counter-font-weight: 400;
--svg-stroke: var(--color-1);
--svg-stroke-hover: var(--color-2);
--shifting-transition-duration: 0.5s;
}
@media (min-width: 1200px){
#zoom-layer {
--zoom-control-pos: 15px;
--zoom-close-size: 45px;
--svg-close-scale: 0.2;
--zoom-arrow-size: 100px;
--svg-arrow-h-w-scale: 0.2;
--zoom-counter-size: 30px;
--zoom-counter-font-size: 16px;
}
}
@media (min-width: 768px) and (max-width: 1199px){
#zoom-layer {
--zoom-control-pos: 10px;
--zoom-close-size: 35px;
--svg-close-scale: 0.15;
--zoom-arrow-size: 80px;
--svg-arrow-h-w-scale: 0.15;
--zoom-counter-size: 25px;
--zoom-counter-font-size: 15px;
}
}
@media (max-width: 767px){
#zoom-layer {
--zoom-control-pos: 10px;
--zoom-close-size: 30px;
--svg-close-scale: 0.12;
--zoom-arrow-size: 60px;
--svg-arrow-h-w-scale: 0.12;
--zoom-counter-size: 20px;
--zoom-counter-font-size: 14px;
}
}
/* End Zoom */

/* Slider */
.slider {
--slider-dot-color: var(--color-5);
--slider-dot-hover-color: var(--color-3);
--slider-dot-active-color: var(--color-4);
--svg-arrow-h-w-scale: 0.125;
--shifting-transition-duration: 0.5s;
}
@media (min-width: 1200px){
.slider {
--slider-dot-size: 12px;
}
}
@media (min-width: 768px) and (max-width: 1199px){
.slider {
--slider-dot-size: 11px;
}
}
@media (max-width: 767px){
.slider {
--slider-dot-size: 10px;
}
}
/* End Slider */

/* Fade */
section.fade {
--fade-transition-duration: 1s;
}
/* End Fade */

/*END ELEMENTS*/