@font-face {
    font-family: 'Raleway';
    src: local('Raleway Bold'), local('Raleway-Bold'),
        url('fonts/Raleway-Bold.woff2') format('woff2'),
        url('fonts/Raleway-Bold.woff') format('woff'),
        url('fonts/Raleway-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }


body {font-family: PT Sans;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.002em;
	margin: 0% !important;
}
section {padding: 80px 5px 80px 40px !important}
header {padding-bottom: 70px}
.container {max-width: 1280px; margin: 0 auto}

h1, h2, h3, h4 {font-family: 'Raleway'; font-style: normal; font-weight: bold; margin: 15px 0;}

h1 {font-size: 64px; line-height: 72px; letter-spacing: 0.02em; color: #F27130;}
h2 {font-size: 46px; line-height: 60px; letter-spacing: 0.014em;color: #0081BA;}
h3 {font-size: 28px; line-height: 34px; letter-spacing: 0.01em; color: #054D6D;}
h3.red {color: #F27130;}
h4 {font-size: 20px; line-height: 24px; letter-spacing: 0.02em; color: #054D6D; }

header #utp {display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, 47%);}
header #utp h4 {margin: 10px 0;}
header #utp h4.no-union:before {display: none;}
header #utp h4:before {content: ""; background-image: url(img/union.png); background-repeat: no-repeat; width: 25px; height: 25px;	padding-right: 10px; display: block; float: left;}
header #utp .utp-text h1 {margin-top: 0; margin-bottom: 30px}
header #utp .utp-img {text-align: center;}
header #utp button {cursor: pointer; background: #F2B91B; border: none; box-shadow: 0px 4px 0px #CC9C17; padding: 14px 60px; color: #ffffff;	font-family: Raleway; font-size: 20px;	line-height: 24px;	text-align: center;	letter-spacing: 0.05em;	text-transform: uppercase;}

.utp-text {padding: 0px 5px 0px 40px;}

#moduls {background: #F1ECE8;}
#moduls h3 {color: #0081BA;}
#moduls-items {display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, 30%);}

#security {background: #054D6D; color: #fff;}
#security h3 {color: #F2B91B;}
#security-items {display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, 45%);}

#clients {background: #FFFCFA;}
#clients a {color: #0081BA; text-decoration: none;}
#clients-items {display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, 30%);}

#abonentplata {background: #F1ECE8;}
#abonentplata h2+h3 {min-height: 100px;}
#abonentplata-items {display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, 30%);}

footer {background: #383A3B; padding: 80px 5px 80px 40px;}
footer .container {display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, 23%);}
footer p {color: #FFFFFF;}
footer h4 {color: #FFFFFF; opacity: 0.8;}
footer a {color: #CCE2FF; text-decoration: none;}

.license {
 font-size: 46px;
    line-height: 60px;
    letter-spacing: 0.014em;
    color: #0081BA;
	text-decoration: none;
}
a:hover .license {
    color: #0081BA; 
}


@media (max-width: 750px) {
	header #utp, #moduls-items, #security-items, #clients-items, #abonentplata-items, 
    footer .container {grid-gap: 10px; grid-template-columns: repeat(auto-fit, 100%) !important;}

	#moduls, #security, #clients, #abonentplata, footer {padding: 40px 15px;}
	
}

@media (max-width: 450px) {
	h1 {font-size: 33px; line-height: 42px; letter-spacing: 0.02em; color: #F27130;}
	h2 {font-size: 30px; line-height: 32px; letter-spacing: 0.014em;color: #0081BA;}
	h3 {font-size: 27px; line-height: 24px; letter-spacing: 0.01em; color: #054D6D;}
	h4 {font-size: 19px; line-height: 24px; letter-spacing: 0.02em; color: #054D6D;}

	header #utp, #moduls-items, #security-items, #clients-items, #abonentplata-items, footer .container 
	{ grid-gap: 10px; grid-template-columns: repeat(auto-fit, 100%) !important;}

	#moduls, #security, #clients, #abonentplata, footer {padding: 40px 15px;}
    header img { width: 100%;  object-fit: none;  height: 70px;}
	header .utp-img img {object-fit: cover; width: 100%; height: 100%;}
	
}