/* BASIC SETTINGS */

@font-face {
    font-family: 'Larsseit';
    src: local('Larsseit Regular'), local('Larsseit-Regular'),
        url('../font/Larsseit.woff2') format('woff2'),
        url('../font/Larsseit.woff') format('woff'),
        url('../font/Larsseit.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

body {
	font-family: Larsseit;
	overflow-x: hidden;
	scroll-behavior: smooth;
}
body, p, ul, li, span {
	margin: 0;
	padding: 0;
}
.container {
	width: 980px;
	margin: 0 auto;
}
img {
	width: 100%;
}

/* HEADER */

.header {
	background: linear-gradient(to right, #F4F9E2 77%, #fff 23%);
	padding-top: 30px;
	padding-bottom: 75px;
	width: 100%;
}
.header-top-line {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.header-burger {
	width: 40px;
	height: 40px;
	position: fixed;
	right: 40px;
	top: 40px;
}
.header-top-line-burger {
	display: none;
	justify-content: space-between;
}
.header-top-line-burger p {
	font-size: 24px;
	line-height: 27px;
	font-weight: 400;
	letter-spacing: -0.035em;
	color: #62D0DF;
}
.header-top-line-mobile {
	display: none;
	justify-content: space-between;
	width: 100%;
}
.header-top-line-nav-mobile {
	display: none;
	transition: top 1s ease-out 0.5s;
}
.header-top-line p {
	font-size: 24px;
	line-height: 27px;
	font-weight: 400;
	letter-spacing: -0.035em;
	color: #62D0DF;
}
.header-top-line-mobile p {
	font-size: 24px;
	line-height: 27px;
	font-weight: 400;
	letter-spacing: -0.035em;
	color: #62D0DF;
}
.header-top-line-nav {
	display: flex;
	justify-content: space-between;
	z-index: 1;
}
.header-nav-active a {
	border-bottom: 1px solid #22356F;
	font-weight: 600;
}
.header-top-line-nav-item {	
	padding: 5px;
	padding-bottom: 15px;
}
.header-top-line-nav-item a {
	font-size: 14px;
	line-height: 16px;
	color: #22356F;
	text-decoration: none;
}
.header-top-line-nav-item a:hover {
	border-bottom: 1px solid #22356F;
	font-weight: 600;
}
.header-top-line-button {
	font-size: 14px;
	line-height: 16px;
	display: flex;
	align-items: center;
	color: #FFF;
	padding: 20px 30px;
	text-decoration: none;
	text-transform: uppercase;
	background: #62D0DF;
	border-radius: 50px;
	z-index: 1;
}
.header-main-content {
	padding-top: 175px;
}
.header-main-content-subtitle {
	font-size: 24px;
	line-height: 27px;
	letter-spacing: -0.035em;
	color: #62D0DF;
	padding-bottom: 40px;
}
.header-main-content-title {
	font-size: 48px;
	line-height: 53px;
	letter-spacing: -0.035em;
	color: #22356F;
	text-transform: uppercase;
	width: 485px;
	font-weight: 900;
	padding-bottom: 70px;
}
.header-main-content-text {
	font-size: 24px;
	line-height: 42px;
	color: #22356F;
	width: 470px;
	margin-bottom: 65px;
}
.header-main-content-button-box {
	display: flex;
	justify-content: space-between;
	width: 340px;
}
.header-main-content-button-1 {
	background: #F9B640;
	font-size: 16px;
	line-height: 23px;
	display: flex;
	align-items: center;
	letter-spacing: 0.1em;
	text-decoration: none;
	color: #FFFFFF;
	text-transform: uppercase;
	width: 150px;
	height: 50px;
	justify-content: center;
	font-weight: 600;
}
.header-main-content-button-2 {
	width: 190px;
	height: 50px;
	display: flex;
	align-items: center;
	text-decoration: none;
	justify-content: center;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: 0.1em;
	color: #FAB63E;
	text-transform: uppercase;
	font-weight: 600;
}
.header-img {
	position: absolute;
	width: 807.71px;
	height: 544.93px;
	left: 900px;
	top: -52.57px;
	background: #FFE2DE;
	border-radius: 312.159px;
	transform: matrix(-0.87, 0.5, 0.5, 0.87, 0, 0);
}
.header-rect {
	position: absolute;
	width: 807.71px;
	height: 544.93px;
	left: 700px;
	top: -170.66px;
	background: #EDFDFF;
	border-radius: 312.159px;
	transform: matrix(-0.5, 0.87, 0.87, 0.5, 0, 0);
}

/* WHY THRIVE? */

.why {
	display: flex;
	justify-content: space-between;
}
.why-content {
	background-color: #62D0DF;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.why-title {
	font-size: 36px;
	line-height: 27px;
	letter-spacing: -0.006em;
	color: #FFFFFF;
	margin-bottom: 75px;
	width: 555px;
}
.why-text {
	font-size: 24px;
	line-height: 35px;
	color: #FFFFFF;
	width: 555px;
}
.why-text-bold {
	font-weight: 600;
}

/* ABOUT US */


.about {
	padding-top: 155px;
}
.about-first-box-content {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-bottom: 75px;
}
.about-first-title {
	font-size: 16px;
	line-height: 23px;
	letter-spacing: 0.06em;
	color: #22356F;
	text-transform: uppercase;
}
.about-first-text {
	font-size: 24px;
	line-height: 34px;
	letter-spacing: 0.005em;
	color: #22356F;
	width: 590px;
}
.about-services-box-mobile {
	display: none;
}
.about-services-title {
	font-size: 16px;
	line-height: 19px;
	text-align: center;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(34, 53, 111, 0.5);
	margin-bottom: 25px;
}
.about-services-section-1 {
	display: flex;
	margin-bottom: 120px;
}
.about-services-item-small {
	height: 360px;
	width: 100%;
	padding-top: 70px;
	padding-left: 50px;
	padding-right: 50px;
}
.about-services-item-small p {
	font-size: 32px;
	line-height: 34px;
	letter-spacing: -0.006em;
	color: #FFFFFF;
	padding-top: 25px;
	border-top: 1px solid #fff;
}
.about-services-item-marker {
	color: #E9B730;
	width: 9px;
	height: 9px;
}
.about-weight-lifting {
	background-color: #FFE2DE;
}
.about-running-spinning {
	background-color: #C4E769;
}
.about-pumping-iron {
	background-color: #62D0DF;
}
.about-pumping-iron-else {
	background-color: #0052C1;
}
.about-services-section-2 {
	display: flex;
}
.about-services-item-big {
	height: 480px;
	width: 100%;
	padding-top: 95px;
	padding-left: 70px;
	padding-right: 70px;
}
.about-services-item-big p {
	font-size: 32px;
	line-height: 34px;
	letter-spacing: -0.006em;
	color: #FFFFFF;
	padding-top: 30px;
	border-top: 1px solid #fff;
}
.about-services-item-big p span {
	color: #E9B730;
	width: 12px;
	height: 12px;
}
.about-physical-health {
	background-color: #22356F;
}
.about-mental-health {
	background-color: #0052C1;
}
.about-nutrition {
	background: url('../img/about-nutrition.png') no-repeat;
	background-size: 100% 100%;
}
.about-services-section-3 {
	display: flex;
	margin-bottom: 20px;
}
.about-gymnastics {
	background-color: #62D0DF;
}
.about-crossfit {
	background-color: #DEE1FF;
}
.about-aerobics {
	background-color: #8F00FF;
}
.about-services-section-4 {
	display: flex;
	justify-content: space-between;
}
.about-services-item-trans {
	height: 240px;
	width: 100%;
	padding-top: 55px;
}
.about-services-item-trans-title {
	font-size: 28px;
	line-height: 33px;
	letter-spacing: -0.03em;
	color: #22356F;
	margin-left: 105px;
}
.about-services-item-trans-subtitle {
	font-size: 16px;
	line-height: 25px;
	letter-spacing: -0.03em;
	color: rgba(34, 53, 111, 0.5);
	width: 300px;
	margin-left: 105px;
	margin-top: 30px;
}
.about-services-section-5 {
	display: flex;
	justify-content: space-between;
}
.about-also {
	display: flex;
	justify-content: space-between;
}
.about-also-content {
	width: 100%;
	padding: 105px 175px 50px 105px;
}
.about-also-title {
	font-size: 16px;
	line-height: 12px;
	letter-spacing: 0.06em;
	color: #22356F;
	text-transform: uppercase;
	margin-bottom: 225px;
}
.about-also-text {
	font-size: 36px;
	line-height: 53px;
	letter-spacing: -0.01em;
	color: #22356F;
	font-weight: 600;
}
.about-also-text span {
	color: #62D0DF;
}
.about-also-footer {
	font-size: 16px;
	line-height: 23px;
	letter-spacing: 0.1em;
	color: #FAB63E;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 150px;
}

/* CONTACT US */

.contacts {
	display: flex;
	justify-content: space-between;
}
.contacts-content {
	width: 100%;
	background-color: #22356F;
	padding: 105px 200px 60px 180px;
}
.contacts-subtitle {
	font-size: 16px;
	line-height: 12px;
	letter-spacing: 0.06em;
	color: #FFFFFF;
	text-transform: uppercase;
	margin-bottom: 230px;
}
.contacts-title {
	font-size: 64px;
	line-height: 94px;
	letter-spacing: -0.01em;
	color: #FFFFFF;
	margin-bottom: 75px;
}
.contacts-text {
	font-size: 36px;
	line-height: 53px;
	letter-spacing: -0.005em;
	color: #FFFFFF;
	margin-bottom: 75px;
}
.contacts-footer {
	text-transform: uppercase;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: 0.1em;
	color: #62D0DF;
}

/* FOOTER */

.footer-wrapper {
	display: flex;
	justify-content: space-between;
}
.footer-content {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 100px 150px 100px 70px;
}
.footer-content-section {
	width: 210px;
	display: flex;
	flex-direction: column;
}
.footer-content-title {
	text-transform: uppercase;
	font-size: 14px;
	line-height: 11px;
	letter-spacing: -0.006em;
	color: #22356F;
	margin-bottom: 55px;
}
.footer-content-text {
	font-size: 14px;
	line-height: 23px;
	letter-spacing: -0.006em;
	color: rgba(34, 53, 111, 0.5);
}
.footer-content-text a {
	text-decoration: none;
	color: skyblue;
}
.footer-content-text a:hover {
	text-decoration: underline;
}
.footer-copyright {
	display: flex;
	height: 80px;
	background-color: #62D0DF;
	align-items: center;
	padding-left: 180px;
}
.footer-copyright p {
	font-size: 14px;
	line-height: 11px;
	letter-spacing: -0.006em;
	color: #FFFFFF;
}

/* MEDIA QUERIES */

@media screen and (max-width: 1200px) {
	.header-rect, .header-img {
		display: none;
	}
	.why img {
		display: none;
	}
	.contacts img {
		display: none;
	}
	.about-services-item-small {
		height: 200px;
	}
	.about-services-item-big {
		height: 280px;
	}
	.about-services-item-marker {
		display: none;
	}
	.about-services-item-big span {
		display: none;
	}
	.about-also img {
		display: none;
	}
	.footer img {
		display: none;
	}
	.why-content {
		display: block;
		padding: 10px;
	}
	.header-top-line-mobile {
		display: flex;
	}
	.header-top-line {
		display: none;
	}
	.about-first-box-content {
		flex-direction: column;
	}
	.about-first-title {
		padding-bottom: 20px;
	}
	.about-services-box {
		display: none;
	}
	.about-services-box-mobile {
		display: block;
	}
	.about-also-content {
		padding: 10px;
	}
	.contacts-content {
		padding: 10px;
	}
	.footer-content-section {
		width: 150px;
	}
	.header {
		background: #fff;
		background-size: 100%;
	}
	.about-first-box .container {
		width: 100%;
	}
	.about-first-box {
		padding: 10px;
	}
	.footer-copyright {
		padding: 0;
	}
	.footer-copyright p {
		margin: 0 auto;
	}
}
@media screen and (max-width: 992px) {
	.container {
		width: 760px;
	}
	.header-top-line-mobile {
		display: none;
	}
	.header-top-line-burger {
		display: flex;
	}
	.footer-content-section {
		margin-bottom: 40px;
	}
	.header-top-line-nav-mobile {
		position: fixed;
		right: 20px;
		top: 20px;
		width: 200px;
		height: auto;
		background-color: #000;
		flex-direction: column;
		padding: 20px;
		z-index: 10;
		border-radius: 10px;
	}
	.header-top-line-nav-mobile a {
		color: #fff;
	}
	.header-top-line-nav-burger-exit a {
		font-size: 14px;
		line-height: 16px;
		color: #fff;
		text-decoration: none;
		padding: 6px;
	}
	.why-content {
		display: flex;
		text-align: center;
	}
	.about-first-box {
		text-align: center;
		justify-content: center;
		display: flex;
	}
	.about-first-text {
		margin: 0 auto;
	}
	.about-also {
		text-align: center;
	}
	.contacts {
		text-align: center;
	}
}
@media screen and (max-width: 768px) {
	.container {
		width: 400px;
	}
	.about-services-item-big p {
		font-size: 14px;
	}
	.about-services-item-small p {
		font-size: 14px;
	}
	.about-services-item-small {
		height: 120px;
		padding: 10px;
	}
	.about-services-item-big {
		padding: 10px;
		height: 120px;
	}
	.footer-content {
		flex-direction: column;
	}
	.header-main-content-subtitle {
		font-size: 12px;
		width: 70%;
	}
	.header-main-content-title {
		font-size: 24px;
		width: 70%;
	}
	.header-main-content-text {
		font-size: 12px;
		width: 70%;
	}
	.why-title {
		font-size: 24px;
		width: 70%;
	}
	.why-text {
		font-size: 15px;
		width: 60%;
	}
	.why-content {
		width: 100%;
	}
	.about-first-text {
		width: 70%;
	}
	.about-also-text {
		width: 70%;
		margin: 0 auto;
	}
	.contacts-title {
		font-size: 30px;
	}
	.contacts-text {
		width: 70%;
		margin: 0 auto;
		margin-bottom: 20px;
		font-size: 24px;
	}
}
@media screen and (max-width: 450px) {
	.container {
		width: 320px;
	}
	.about-services-item-big {
		height: 120px;
	}
}