html {
	font-family: "Roboto", sans-serif;
}

.main {
	box-sizing: border-box;
}

.main *, .main *:before, .main *:after {
	box-sizing: inherit
}

.container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}


/*
							   =================================================
							   ====================  HEADER  ===================
							   =================================================
*/
.main-header .logo {
	margin: 15px 15px 0 0;
	display: inline-block;
	float: left;
}

.main-header nav {
	display: inline-block;
	border-left: 1px solid #3a3a3a;
}

.main-header nav li {
	display: inline-block;
}

.main-header nav a {
	display: inline-block;
	height: 62px;
	font-size: 16px;
	color: #3a3a3a;
	padding: 20px 20px;
	margin: 0 20px;
	font-weight: 700;
}

.main-header nav a:hover {
	text-decoration: none;
}


/*
							   =================================================
							   ====================  CONTENT  ==================
							   =================================================
*/
.bg-1 {
	background: url('/image/custom-layouts/valeo/header-1.jpg') no-repeat;
}

.bg-2 {
	background: url('/image/custom-layouts/valeo/header-2.jpg') no-repeat;
}

.head-bg {
	background-size: 100% auto;
	padding-top: .1px;
}

.main-title {
	margin-bottom: 40px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
}

.main-title h1 {
	background: #fff;
	display: inline-block;
	font-size: 40px;
	color: #3a3a3a;
	padding: 10px 20px;
	text-transform: uppercase;
	font-weight: 700;
}

.box-in {
	padding: 40px;
	background: #fff;
	margin-top: 490px;
	position: relative;
}

.text h3 {
	font-size: 180%;
	color: #3a3a3a;
	margin: 40px 0 20px;
}

body .main .bttn {
	height: 68px;
	display: inline-block;
	line-height: 30px;
	vertical-align: middle;
	padding: 19px 50px;
	border: 2px solid #83e400;
	color: #3a3a3a;
	text-align: center;
}

.row {
	margin: 0 -15px;
}

.row:after {
	content: '';
	display: block;
	clear: both;
}

.col-3 {
	display: inline-block;
	width: 33.3%;
	float: left;
}

.title2, .list-offers .title2 {
	color: #49697e;
	font-size: 24px;
	margin: 60px 0 40px 120px;
	font-weight: 700;
}

/*
							   =================================================
							   =====================  VYPIS  ===================
							   =================================================
*/
#kriteria label {
	font-size: 18px;
	line-height: 31px;
}

#kriteria select {
	font-size: 16px;
	padding: 5px 15px;
	width: 300px;
}

#suitableForGraduate {
	margin-top: 8px;
}

#kriteria .box-bot {
	text-align: center;
}

#kriteria .bttn {
	background: none;
	font-size: 16px;
	width: 300px;
	margin-top: 30px;
}


.list-offers ul {
	list-style: none;
}

.list-offers ul li {
	padding: 0;
	background: none;
}

.list-offers li a {
	display: block;
	padding: 20px 30px;
	margin: 15px;
	background: #f9b50a;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	height: 130px;
}

.list-offers li a:hover {
	text-decoration: none;
}

.list-offers li a.cat-0 {
	background: #83e600;
}

.list-offers li a.cat-1 {
	background: #4e6b7b;
}

.list-offers li a.cat-2 {
	background: #f9b50a;
}

/*
							   =================================================
							   =====================  DETAIL  ==================
							   =================================================
*/
#detail-simple {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

#detail-simple .detail-title-2 {
	color: #49697e;
	font-size: 30px;
}

#detail-simple .ref {
	float: right;
	color: gray;
	font-size: 12px;
}

#detail-simple .ds-left-box {
	margin-bottom: 80px;
}

#detail-simple .summary {
	margin-top: 50px;
}

.summary .label {
	width: auto;
	padding-right: 20px;
}

#contact .bttn {
	width: 340px;
	margin: 50px auto;
	display: block;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	padding-left: 20px;
	padding-right: 20px;
}


/*
							   =================================================
							   ===================  MAIN PAGE  =================
							   =================================================
*/
.main-cat-box {
	margin: 60px 15px 0;
}

.main-cat-box.cat-1 {
	background-color: #83e600
}

.main-cat-box.cat-2 {
	background-color: #4e6b7b
}

.main-cat-box.cat-3 {
	background-color: #f9b50a
}

.main-cat-box header img {
	width: 100%;
}

.main-cat-box .content {
	padding: 25px 30px;
	font-size: 16px;
	color: #3a3a3a;
}

.main-cat-box h2 {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	line-height: 28px;
	height: 56px;
}

.main-cat-box p {
	margin: 15px 0;
}

.main-cat-box .link {
	text-decoration: underline;
	color: #3a3a3a;
}

.person-stories-list-item {
	padding: 40px;
	background: #3a3a3a;
	text-align: center;
	margin-bottom: 50px;
	display: block;
}

.person-stories-list-item .person {
	border-radius: 50%;
	width: 200px;
}

.person-stories-list-item .text {
	display: inline-block;
	max-width: 400px;
	color: #fff;
}

.person-stories-list-item i {
	font-size: 18px;
}

.person-stories-list-item .name {
	margin-top: 15px;
	display: block;
	font-size: 15px;
}

.person-stories-list-item .profession {
	display: block;
	color: #71e311;
	font-size: 14px;
}

.virtual-tour {
	margin-top: 80px;
	position: relative;
	min-height: 70px;
}

.virtual-tour img {
	width: 100%;
}

.virtual-tour a {
	font-size: 48px;
	display: block;
	color: #86d82b;
	text-shadow: 0 0 10px #000;
	text-decoration: underline;
	font-weight: 700;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	margin-top: -30px;
}

/*
							   =================================================
							   ===================  ABOUT US  ==================
							   =================================================
*/
.about-us {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.about-us h2 {
	font-size: 30px;
	margin: 60px 0 40px;
	color: #496980;
	font-weight: 700;
}

.about-us h2 + p {
	margin-bottom: 40px;
}

.about-us p {
	font-size: 16px;
}

.about-us .collapse {
	position: relative;
}

.about-us .collapse h3 {
	font-size: 24px;
	position: relative;
	margin-bottom: 20px;
	margin-top: 10px;
}

.about-us .collapse h3::after {
	content: '';
	display: block;
	position: absolute;
	height: 2px;
	left: -10px;
	width: 102%;
	bottom: -15px;
	background: #384241;
	transition: .5s width;
}

.about-us .collapse::after, .about-us .collapse::before {
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	width: 1px;
	height: 16px;
	background: #384241;
	margin-right: 0;
	transition: .5s right;
	right: 10px;
}

.about-us .collapse::after {
	transform: rotate(45deg);
}

.about-us .collapse::before {
	transform: rotate(-45deg);
	right: 21px;
}

.about-us .collapse p {
	max-height: 0;
	overflow: hidden;
	transition: .5s max-height;
}

.about-us .collapse.open h3::after {
	width: 0;
}

.about-us .collapse.open::before {
	right: 10px;
}

.about-us .collapse.open p {
	max-height: 100px;
}

.benefits {
	text-align: center;
	font-size: 16px;
}

.benefits .col-3 {
	padding: 40px 40px 10px;
	height: 340px;
}

.benefits strong {
	display: block;
	margin: 30px 0 10px;
}

.contact-table {
	width: 100%;
	font-size: 14px;
	border: 1px solid black;
	border-spacing: 0;
}

.contact-table td {
	padding: 30px;
	border-right: 1px solid black;
}

.contact-table tr td:last-of-type {
	border-right: none;
}

.contact-table tr:first-of-type td {
	background: #f7f7f7;
}

/*
							   =================================================
							   ==================  USER STORY  =================
							   =================================================
*/
.user-story {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	font-size: 16px;
}

.user-story .photo {
	float: left;
	margin: 0 20px 60px 0;
	width: 300px;
}

.user-story .name {
	display: block;
	margin-bottom: 20px;
}

.user-story .questions {
	clear: both;
}

.user-story .question {
	margin-bottom: 20px;
}

.user-story .question-title {
	font-size: 18px;
	display: block;
	margin-bottom: 10px;
}

.user-story .question-text span {
	color: #86d82b;
	font-weight: 700;
}




@media (max-width: 1280px) {

	body {
		min-width: initial;
	}

	.wrapper {
		mix-width: 980px;
		width: 100%;
	}

	.box-in {
		margin-top: 35vw;
	}

	.main-title h1 {
		font-size: clamp(1.3rem, calc(1rem + 1.5vw), 2.5rem);
	}

	.k-form {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 20px;
		transform: translate(-25px, 10px);
	}

	.k-form > .w33 {
		width: auto;
	}

	.checkbox-box {
		align-self: center;
	}

	.box-bot {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60px;
	}
}

@media (max-width: 980px) {

	.main-cat-box h2 {
		height: auto;
	}

	.list-offers li a {
		height: auto;
		font-size: clamp(20px, calc(.8rem + .1vw), 24px);
	}

}

@media (max-width: 768px) {
	.header-wrapper {
		display: flex;
		justify-content:  flex-start;
	}

	.main-header nav a {
		padding: 20px 1vw;
		margin: 0;
	}


	.flex-col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.flex-col > .col-3 {
		width: 75%;
	}

	.title2 {
		margin-left: 0;
	}

	.person-stories-list-item .person {
		width: clamp(150px,100px +  10vw,200px);

	}

	.virtual-tour a {
		font-size: clamp(1.2rem, calc(1rem + 2vw), 3rem);
	}

	.col-3 {
		width: 100%;
	}

	.title2, .list-offers .title2 {
		text-align: center;
		margin: 0;
		margin: 24px 0;
	}
}

@media (max-width: 480px) {
	.flex-col > .col-3 {
		width: 100%;
	}

	.box-in {
		margin-top: 60%;
	}

	.head-bg {
		background-size: 100% auto;
	}

	.box-in {
		padding: 10px;
	}
}