/* USER VARIABLES SECTION */

:root {
	--brand: #D90368;
	--accent: #F7F7F7;
	--text: #3C3C4B;
	--regular-text: 16px;
	--lineheight: 1.65;
	--userfont: roboto-st, sans-serif;
	--additionalfont: arantxa-st, sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* BOOTSTRAP SETTINGS SECTION */

/* gutter 20px (10px + 10px). Comment this code for default gutter start at 1.5rem (24px) wide. */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: .625rem; }
.row, .row > * { --bs-gutter-x: 1.25rem; }

/* FONTS LOAD SECTION */

@font-face { src: url("../fonts/roboto-regular-webfont.woff2") format("woff2"); font-family: "roboto-st"; font-weight: 400; font-style: normal; }
@font-face { src: url("../fonts/roboto-italic-webfont.woff2") format("woff2"); font-family: "roboto-st"; font-weight: 400; font-style: italic; }
@font-face { src: url("../fonts/roboto-bold-webfont.woff2") format("woff2"); font-family: "roboto-st"; font-weight: 700; font-style: normal; }
@font-face { src: url("../fonts/roboto-bolditalic-webfont.woff2") format("woff2"); font-family: "roboto-st"; font-weight: 700; font-style: italic; }

@font-face { src: url("../fonts/arantxa-black-webfont.woff2") format("woff2"); font-family: "arantxa-st"; font-weight: 400; font-style: normal; }

/* GENERAL CSS SETTINGS */

::placeholder { color: #666; }
::selection { background-color: var(--accent); color: #fff; }
input, textarea { outline: none; }
input:focus:required:invalid, textarea:focus:required:invalid { border-color: red; }
input:required:valid, textarea:required:valid { border-color: green; }

body {
	background-color: #f7f7f7;
	font-family: 'Roboto Slab', serif;
	/* font-family: var(--userfont); */
	font-size: var(--regular-text);
	line-height: var(--lineheight);
	color: var(--text);
	min-width: 320px;
	position: relative;
	overflow-x: hidden;
}

/* USER STYLES */

.image {
	max-width: 100%;
	margin-bottom: var(--bs-gutter-x);
	border-radius: 4px;
}

.accent {
	color: var(--accent);
	font-weight: bold;
}

.container {
	max-width: 980px;
	padding-left: 20px;
	padding-right: 20px;
}

h1 {
	margin: 0 0 20px;
	color: var(--brand);
	font-family: var(--additionalfont);
	font-size: 20px;
	line-height: 24px; 
}

h2 {
	margin: 0 0 20px;
	color: var(--brand);
	font-family: var(--additionalfont);
	font-size: 20px;
	line-height: 24px; 
}

.error{
	display: none;
	margin-bottom: 30px !important;
	color: #D90368 !important;
}
.error.show{
	display: block;
}

.app img{
	height: 28px;
}

	.container {
  	max-width: 1054px;}
		footer .f_top .f_top_wrap p{
			margin-right: 40px;
			white-space: nowrap;
		}
		footer .links{
			display: flex;
			align-items: center;
		}
		footer .links a {
			white-space: nowrap;
		}
		footer .group {
			display: flex;
			gap: 2px;
			flex-direction: column;
		}
		footer .group a{
			margin: 0 !important;
			white-space: nowrap;
		}
		footer .app {
			display: flex;
		}
		@media(max-width: 1100px){
			footer .f_top .f_top_wrap{gap: 60px}
			footer .f_top .f_top_wrap .links{flex-direction: column; align-items: flex-start; gap: 2px;}
			footer .f_top .f_top_wrap{justify-content: flex-start;}
			footer .f_top .f_top_wrap .f_col:last-child{width: calc(100% - 200px);}
			footer .app {margin-left: auto;}
		}
		@media (max-width: 996px) {
			footer .f_top .f_top_wrap .links {
				align-items: center;
				justify-content: center;
				width: 100%;
			}
			footer .app{
				margin-left: unset;
				margin: 0 auto; 
			}
			footer .f_top .f_top_wrap .f_col:last-child{width: 100%;}
			footer .group{gap: 6px; justify-content: center; text-align: center;}
			footer .f_top .f_top_wrap p {
				margin-right: unset; margin: 0 auto; 
			}
			 footer .f_top .f_top_wrap {
    gap: 0;
  }
		}

		@media (max-width: 850px) {
			footer .f_top .f_top_wrap .links{
				margin-bottom: 12px !important;
			}
  footer .f_top .f_top_wrap .f_col {
    align-items: center !important
  }
}