* {
	margin: 0px;
	padding: 0px;
}



:root {
	--header-bg-width: 400px;
	
	--background-light-gray: #f8f8f8;
	--background-footer-light-gray: #EEEFF1;
	--text-color: #505050;
	
	--selection-color:#4A4E63;
	--selection-text-color:#EEEFF1;
	
	--link-hover-color: #00AFFF; 	/*#7AD700*/
	--link-visited-color: #9200E2; 	/*#6600B1*/
	
	--speed-animation: 0.6s;
	
	--download-button-normal-state-background-color: #0086FF;
	--download-button-hover-state-background-color: #FF0092;
	--download-button-normal-state-text-color: white;
	--download-button-hover-state-text-color: white;
}

::selection {
    color: var(--selection-text-color);
    background-color: var(--selection-color);
}



html {
	font-family: "Helvetica Neue";
	font-size: 12pt;
	color: var(--text-color);
}

body {
	background-color: var(--background-light-gray);
}

body a {
	outline: none;
	text-decoration: none;
    
    color: var(--text-color);
	
    transition: color var(--speed-animation) ease;
}

body a:hover {
	color: var(--link-hover-color);
}

body a:visited {
	color: var(--link-visited-color);
}

body ul li {
	list-style-type: none;
	display: inline-block;
	padding-inline-start: 0px;
    vertical-align: middle;
	margin: 0;
	padding: 0;
}



header {
    width:100%;
    text-align: center;
}

header ul {
	padding: 25px;
}

header ul li {
	display: block;
}

#header-bg {
	text-align: center;
	display: block;
	justify-content: center;
	margin: auto;
	margin-top: -35px;
	
	width: var(--header-bg-width);
	object-fit: contain;
}

main {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

section {
	text-align: center;		/* <-- ЦЕНТРИРОВАНИЕ */
	display: table;			/* <-- ЦЕНТРИРОВАНИЕ */
	margin: 0 auto;			/* <-- ЦЕНТРИРОВАНИЕ */
	padding: 0px;
}



.uppercase {
	text-transform: uppercase;
}



#title {
	font-family: "HelveticaNeue Condensed Bold";
	font-size: 170%;
}

#subtitle {
	font-family: "Menuet script";
	font-size: 150%;
}



button {
	
    width: 150px;
    height: 40px;
	margin-bottom: 80px;

	background: none;
	border: none;
	outline: none;
	
	font-family: "HelveticaNeue Condensed Bold";
	font-size: 85%;
	text-transform: uppercase;
    color: var(--download-button-normal-state-text-color);
    
	border-radius: 20px;  
    background-color: var(--download-button-normal-state-background-color);
    transition: all var(--speed-animation) ease;
	/*padding: 3px 0px;*/
}

button span:after {
	display: inline-table;
	content: '\279C'; 		/* <-- ДРУГИЕ СИМВОЛЫ МОЖНО НАЙТИ НА СТР.: */
	position: absolute; 	/* https://www.w3schools.com/charsets/ref_utf_punctuation.asp (ИСПОЛЬЗОВАТЬ hex ЗНАЧЕНИЕ) */
	opacity: 0;				/* НЕКОТОРЫЕ ВАРИАНТЫ СИМВОЛОВ:  2B07 25B6 21E2 276F 279C 27A4 */
	height: 100%;
	right: 10px;
	color: var(--download-button-hover-state-text-color);
	transition: var(--speed-animation);	
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}

button:hover {
	background-color: var(--download-button-hover-state-background-color);
}

button:hover span {
	color: var(--download-button-hover-state-text-color);
	padding-right: 15px;
}

button span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: var(--speed-animation);
}

button:hover span:after {
	opacity: 1;
	right: -5px;
}


footer {
	font-family: "HelveticaNeue Condensed Bold";
	font-size: 80%;
	
	position:fixed;
    left:0px;
    bottom:0px;
    
    width:100%;
    text-align: center;
	
	background-color: var(--background-footer-light-gray);
	
	border-top: 1px;
	border-color: #8f8f8f;
	border-top-style: solid; 
}

footer ul {
	padding: 10px;
}

footer ul li {
	margin: 5px 10px;
}

footer ul li div {
	display: inline-block;
    vertical-align: middle;
}

footer ul li div:first-child {
	padding-right: 10px;
}



.svg-icons {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-mode: alpha;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-mode: alpha;
}



#phone {
	width: 12px;
	height: 15px;
	mask-image: url(../images/svg/phone.svg);
	-webkit-mask-image: url(../images/svg/phone.svg);
	background-color: var(--text-color);
}

#email {
	width: 16px;
	height: 13px;
	mask-image: url(../images/svg/email.svg);
	-webkit-mask-image: url(../images/svg/email.svg);
	background-color: var(--text-color);
}

#support {
	width: 12px;
	height: 15px;
	mask-image: url(../images/svg/support.svg);
	-webkit-mask-image: url(../images/svg/support.svg);
	background-color: var(--text-color);
}

#privacy {
	width: 12px;
	height: 15px;
	mask-image: url(../images/svg/doc.svg);
	-webkit-mask-image: url(../images/svg/doc.svg);
	background-color: var(--text-color);
}



@media screen and (max-width: 480px) {
	
	#header-bg {
		width: 80vw;
	}
	
}