@import url('../common/fontello/css/fontello.css');

:root {--main-color: #066; --main-dark-color: #033; --main-light-color: #099; --main-middle-color: #77c5d3; --font-main-size: 18px; --font-main: 'Montserrat', sans-serif; --font-hdr: 'Noto Serif', sans-serif; --font-news: 'Noto Serif', serif;}

html, body	{width: 100%; height: 100%; padding: 0; margin: 0; scroll-behavior: smooth;}
body	{ background: #fff; width: 100%; font-size: 18px; font-family: var(--font-main); color: var(--main-dark-color);}
td, th {font-size: 15px;}
p {margin: 0 0 1em 0;}

* {box-sizing: border-box; max-width: 100%;}

.wrap {width: 900px; margin: 0px auto; position: relative;}

.f20 {font-size: 20px;}
.f28 {font-size: 28px;}
.f32 {font-size: 32px;}
.f36 {font-size: 36px;}
.f44 {font-size: 44px;}
.f66 {font-size: 66px;}


.w50p {width: 50%; float: left;}
.w33p {width: 33.3%; float: left;}

.pdv10 {padding: 10px 0 !important;}
.pdv20 {padding: 20px 0 !important;}
.pdv30 {padding: 30px 0 !important;}
.pdv40 {padding: 40px 0 !important;}
.pdh10 {padding: 0 10px !important;}
.pdh20 {padding: 0 20px !important;}

.pdt20 {padding-top: 20px;}
.pdt40 {padding-top: 40px;}
.pdl40 {padding-left: 40px;}

.mrb10 {margin-bottom: 10px;}
.mrb20 {margin-bottom: 20px;}

.mt-20 {margin-top: -20px;}

.bold {font-weight: bold;}

.block  {display: block;}
.iblock {display: inline-block;}

.fleft  {float: left;}
.fright {float: right;}
.clear {clear: both;}
.clearfix::after {content: ""; clear: both; display: table;}

.upp {text-transform: uppercase;}

.ovfh {overflow: hidden;}

.anim {opacity: 0;}

h1, h2, h3, h4, h5, h6 {margin: 0 0 .8em 0; color: var(--main-color);}
h1 {font-weight: bold; font-size: 36px; margin: 0; padding: 10px 0 25px 0; text-align: center;}

.cnt, .cnt * {text-align: center;}

.ani, .ani * {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}


header {width: 100%; height: 400px; top: 0; left: 0; padding: 20px 0 10px; border-top: 10px solid var(--main-color); background: url(../img/header.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; position: fixed;}
header div {position: relative;}

#content {background: #fff; margin-top: 0; z-index: 2; position: relative;}

#top-menu {text-align: center;}
#top-menu a {display: inline-block; color: #000; font-weight: bold; text-align: center; background: rgba(255,255,255,.5); padding: 10px 20px; border-radius: 25px; text-decoration: none; box-shadow: 0 5px 10px rgba(0,0,0,.5); margin: 5px 10px; text-shadow: 0 0 25px #fff, 0 0 15px #fff;}
#top-menu a:hover {background: #fff; box-shadow: 0 5px 25px rgba(0,0,0,1);}

footer {background: var(--main-color); color: #fff; text-align: center; padding: 50px 0; z-index: 2; position: relative;}
footer h2 {color: #fff;}
footer a {color: #fff;}

.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.flexb {
	background-color: #fff;
	width: 280px;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
}

.flexb span.ttl {position: absolute; top: 20px; background: #fff; font-weight: bold; border-radius: 25px; padding: 5px 10px; box-shadow: 0 5px 15px rgba(0,0,0,.5);}
.flexb i {position: absolute; bottom: 20px; font-style: normal; font-weight: bold; background: #fff; border-radius: 25px; padding: 5px 10px; box-shadow: 0 5px 15px rgba(0,0,0,.5);}
.flexb span.dscr {position: absolute; top: 120px; padding: 5px 15px; font-size: 15px; font-weight: bold; font-family: Pragmatica, Arial, Helvetica; width: 240px; background: linear-gradient(to right, 
        rgba(255, 255, 255, 0) 0%,  /* 100% прозорість зліва */
        rgba(255, 255, 255, 0.75) 15%,  /* 50% прозорість всередині */
        rgba(255, 255, 255, 0.75) 85%,  /* 50% прозорість всередині */
        rgba(255, 255, 255, 0) 100%  /* 100% прозорість справа */
    );}
.tabac .flexb span.ttl {top: 50px;}
.tabac .flexb i {bottom: 50px;}

.flexb:hover span.dscr {opacity: 0;}
.flexb:hover span.ttl {top: 0px; opacity: 0.5;}
.flexb:hover i {bottom: 0px; opacity: 0.5;}

.tabac .flexb:hover span.ttl {top: 30px; opacity: 0.5;}
.tabac .flexb:hover i {bottom: 30px; opacity: 0.5;}


.flexx {float: left; margin: 10px; width: 280px; text-align: center;}
.flexx > div {font-weight: bold; }
.flexx > img {margin-top: 20px;}
.flexx:hover img {transform: scale(1.15);}

.tLeft  {font-size: 120px; display: inline-block; line-height: .75; float: left; margin-right: 10px; font-family: Pragmatica, Arial, Helvetica;}
.tRight {font-size: 120px; display: inline-block; line-height: .75; float: right; margin-left: 10px; font-family: Pragmatica, Arial, Helvetica;}


.col {float: left; padding: 0 25px; width: 50%; position: relative;}

.qurve  {width: 100%; height: 90px; background: url(../img/qurve.svg) center center no-repeat;  background-size: cover; margin-top: 320px; position: relative;}
.qurve2 {width: 100%; height: 90px; background: #fff url(../img/qurve2.svg) center center no-repeat; background-size: cover; margin: 0; z-index: 2; position: relative;}

.bgMiddle {margin: 20px 0; background: var(--main-color); border-radius: 20px; color: #fff; padding: 50px 30px;}

.buttReg {border-radius: 10px; padding: 10px 20px; background: var(--main-color); color: #fff; text-decoration: none; font-weight: bold; font-size: 20px; margin: 5px 0; display: inline-block;}
.buttReg:hover {background: var(--main-dark-color); transform: scale(1.1); box-shadow: 0 0 50px var(--main-middle-color);}

a.link {color: #36d; border-bottom: 1px dotted #36d; text-decoration: none;}
a.link:hover {color: #c00; border-bottom: 1px solid #c00;}


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

}

@media only screen and (max-width: 340px) {
	h3 {font-size: 19px;}

}

@media only screen and (max-width: 640px) {
	.wrap {width: 90%;}

	header {background-size: 340%; background-position: center top;}

	#content {margin-top: 350px;}
	.qurve {display: none;}
	.mt-20 {margin: 0;}
	.col {float: none; width: 100%; padding: 0;}

	.bgMiddle {padding: 20px 0;}
	.bgMiddle h2 {font-size: 22px;}
	h1 {font-size: 28px;}
	
	#top-menu a {margin: 5px 30px;}
	
	.flexb, .flexx {width: 100%;}
}

@media only screen and (max-width: 1020px) {
	.wrap {width: 90%;}

}