*, *::before, *::after {				/* Нормалізація розрахунку розмірів блочних елементів */
    -webkit-box-sizing: border-box;		/* Розміри усіх блочних елементів */
    -moz-box-sizing: border-box;		/* включають в себе внутрішні відступи */
    box-sizing: border-box;				/* та ширину рамки (border) */
    margin: 0;							/* Загальне обнулення усіх відступів */
    padding: 0;							/* та обнулення усіх рамок */
    outline: none;
    border: none;
}

/* Основні змінні */
/* Змінні для кольорової палітри */
:root {
    --bg-color-1: #fff;
    --bg-color-2: #ddd;
    --bg-color-3: #ccc;
    --txt-color-1: #111;
    --txt-color-2: #fff;
    --lnk-color-1: #f29624;
    --lnk-color-2: #f3a735;
    --lnk-color-3: #fff;
    --logo-color: #f29624;
    --border-radius: 24px;

/* Змінні для обмежень ширин певних елементів */
    --max-width: 940px;        		/* Максимальна ширина основного контейнера */
    --max-txt-width: 580px;     		/* Максимальна ширина текстових параграфів */
    --button-max-width: 220px;     		/* Максимальна ширина текстових параграфів */

/* Змінні для внутрішніх відступів */
    --mob-padding: 30px;        		/* Внутрішні відступи для мобільних пристроїв */
    --ipad-padding: 50px;       		/* Внутрішні відступи для планшетів */
}

html {
    scroll-behavior: smooth;			/* Плавна прокрутка при скролі */
}

body {
    overflow-x: hidden;         		/* Заборонити горизонтальну прокрутку для body */
    background-color:var(--bg-color-1); /* Колір фону для body */
    max-width: 100vw;             
}

#wrapper {
    height: 100%;						/* Властивості загального контейнера #wrapper сторінки */
    margin: 0 auto;						/* Центрування по-горизонталі */
    width: 100%;
    max-width: 100vw;
    display: flex;						/* Зробити загальний контейнер flex-овим */
    flex-direction: column;				/* висотою не менше висоти в'юпорта */
    min-height: 100vh;          		/* для того, щоб була можливість притиснути колонтитул до низу */
}

.inside {
	position: relative;					/* Відносне позиціонування усіх блоків з класом .inside */
}

/* Блок властивостей, які задають верстку секцій макету з обмеженням ширини відповідних блоків */
#header .inside,
#footer .inside,						/* Властивості основних блоків контенту */
.custom .inside,						/* в #header, .custom, #footer */
#main .inside > .mod_article > *,
#main .inside > .xl-parallax > .mod_article > * {		/* а також всередині секції main */
	margin-left: auto;
	margin-right: auto;
    padding-left: var(--ipad-padding);	/* Внутрішні відступи зліва, як для планшетів */
    padding-right: var(--ipad-padding); /* Внутрішні відступи справа, як для планшетів */
    max-width: var(--max-width);		/* Обмеження ширини для великих екранів */
}

.xl-parallax {
	min-height: 0;
}

.xl-parallax .mod_article {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 55dvh;
}

/* Властивості секції HEADER */
#header {
	background-color: transparent;/* Фон для header */
	padding-top: 2rem;					/* Внутрішні відступи в хедері по вертикалі */
	padding-bottom: 2rem;				/* Внутрішні відступи в хедері по вертикалі */
	position: relative;
    position: absolute;
    width: 100%;
	z-index: 9;
}

#header .inside {
	display: flex;
	justify-content: space-between;
	align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.custom {
	background-color: #fff;/* Фон для header */
}

/* Властивості секції FOOTER */
#footer {
    background-image: url("../img/footer/bg_footer.svg");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 1760px;
	background-color: #fff;
	margin-top: auto;
	padding-top: 0;
	padding-bottom: 2em;
}

#footer a {
    color: var(--lnk-color-2);  		/* Колір посилань у футері */
    text-decoration: none;
}

#footer {
	font-size: .8rem;
	color: var(--txt-color-3);
}

.mod_article {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 5dvh;
    padding-bottom: 5dvh;
}

#footer .mod_article {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.desktop_invisible {
	width: 0;
    height: 0;
    line-height: 0.1;
    visibility: hidden;
    display: none;
}

.mod_changelanguage {
	margin-left: auto;
	margin-right: 15px;
	margin-top: .6em;
}

.mod_changelanguage ul li {
	display: inline-block;
	margin-right: 5px;
}

.mod_changelanguage ul li a {
	color: var(--logo-color);
	font-size: .8em;
	font-weight: 700;
	padding: 5px;
	text-decoration: none;
	display: inline-block;
}

.mod_changelanguage ul li a:hover {
	color: #fff;
	text-decoration: none;
}

/* Брейкпойнти */
@media screen and (max-width: 1340px) {

	#main .inside > .mod_article.fullwidth > * {
    	padding-left: 0;	/* Внутрішні відступи зліва */
    	padding-right: 0;	/* Внутрішні відступи справа */
    	max-width: none;
    	margin-left: auto;
    	margin-right: auto;
	}

}

@media screen and (max-width: 960px) {

}

@media screen and (max-width: 740px) {
	
	/* Блок властивостей, які задають верстку секцій макету з обмеженням ширини відповідних блоків */    
    #header .inside,
	#footer .inside,
	.custom .inside,
    #main .inside > .mod_article > *,
    #main .inside > .xl-parallax > .mod_article > * {
    	padding-left: var(--mob-padding);	/* Внутрішні відступи зліва, як для смартфонів */
    	padding-right: var(--mob-padding); /* Внутрішні відступи справа, як для смартфонів */
	}
	
	/* За допомогою класу .fullwidth можна організовувати (якщо потрібно) верстку блоків без відступів зліва та справа */
	/* Такі блоки можна використовувати для верстки галерей або окремих зображень */
	/* на всю ширину в'юпорта смартфона (тобто без полів) */
	#main .inside > .mod_article.fullwidth > * {
    	padding-left: 0;	/* Внутрішні відступи зліва */
    	padding-right: 0; /* Внутрішні відступи справа */
	}
}

@media screen and (max-width: 600px) {
	
	.desktop_invisible {				/* Елементи з класом .desktop_invisible */
        height: inherit;				/* стають видимі на екранах шириною < 960px */
        line-height: inherit;
        visibility: visible;
        display: block;
    }
    
    .mobile_invisible {					/* Елементи з класом .mobile_invisible */
        height: 0;						/* стають НЕвидимі на екранах шириною < 960px */
        line-height: 0.1;
        visibility: hidden;
        display: none;
    }
}