/********************************************************************************************************************/

html{
	font-size: 16px;
	font-family: 'Oswald', sans-serif;
	font-weight: 200;
}

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
	text-decoration: none; 
}

img, fieldset {
	border: 0;
}

/* set image max width to 100% */
img {
	display: block;
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

ul li {
	list-style-type: none;
}


#human{display:none !important;}


html, body {
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
}

/* INITIALISATION ***************************************************************************************************/

.table{display:table;}
.flex{display:flex;}
.grid{display:grid;}

/********************************************************************************************************************/
/* ELEMENT CLASSES */

.col-reverse{
	flex-direction: row-reverse;
}

/* 2 Column layout style */

.col-2{
	display: flex;
	align-items: center;
	gap: 3.25rem;
}

.col-2 > *{
	flex-grow: 1;
	min-width: calc(50% - 1.625rem);
}

.col-2 img{
	border-radius: 40px;
}

.grid-2{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	padding: 2rem 0;
}

/* 3 Column layout style */

.col-3{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.col-4{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

/********************************************************************************************************************/

:root {
	--main-color: #1d70b8;
/*	--second-color: #3756af;*/
}

.wrap{position:relative; margin:0 auto; width: 680px;}
.specialheight{min-height:760px;}
.bold{font-weight:700;}
.light{font-weight:300;}
.flex{display:flex;}
body.no-scroll{overflow: hidden;}

.dark-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.2;}
.blue-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--my-color); opacity: 0.6;}
.shadow{
	width:80%; padding-bottom:7%; z-index:-1; margin: auto;
	background:url(img/shadow.png) no-repeat top center/contain;
}
.anchor{position:relative; visibility:hidden; top:-150px; display:block;}
.overlay{position: fixed; width: 100%; height: 100%; background-color: #000; visibility: hidden; opacity: 0; z-index: 500;
	transition: all 0.6s;
}
.overlay.appear{visibility: visible; opacity: 0.3;}

.mobile-img {
	display: none;
}

/********************************************************************************************************************/

body {
	color: #fff;
	background: #1d1d1d url(img/background-pattern.jpg) no-repeat center top/1300px
}

/********************************************************************************************************************/

nav{
/*	position: fixed;*/
	width: 100%;
	z-index: 1000;
	top: 0;
	transition: all 0.6s;
}

nav img {
	margin: 100px auto 0;
}

/********************************************************************************************************************/

#hero-section {
	text-align: center;
	margin: 5rem 0;
}

#hero-section .hero-box {
	background: var(--main-color);
	padding: 2.5rem 3rem;
	border-radius: 30px;
	box-sizing: border-box;
	margin: auto;
}

#hero-section .hero-box h1 {
	line-height: 1;
	margin-bottom: 1rem;
}

#hero-section .hero-box p {
	font-size: 1.5rem;
	font-weight: 300;
}

/********************************************************************************************************************/

#home-content .services {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 2.5rem 0;
}

#home-content .services h2 {
	font-size: 1.5rem;
	font-weight: 400;
	margin-bottom: 5px;
}

#home-content .services ul {
	margin-left: 20px;
}

#home-content .services ul li {
	font-size: 1.125rem;
	list-style-type: disc;
}

#home-content .services ul li::marker {
	color: var(--main-color);
}

#home-content .services ul li:not(:last-child) {
	margin-bottom: .6rem;
}

#home-content .services > img {
	object-fit: cover;
	border-radius: 30px;
}

/********************************************************************************************************************/

#home-content .contact {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	gap: 30px;
	margin: 2.5rem 0;
}

#home-content .contact .info {
	font-size: 1.125rem;
	flex: 1;
}

#home-content .contact .info h2 {
	font-size: 1.5rem;
	font-weight: 400;
}

#home-content .contact .info > :not(h2) {
	margin: 5px 0;
}

#home-content .contact .info a {
	display: block;
	color: #fff;
	transition: color .3s;
}

#home-content .contact .info a:hover {
	color: var(--main-color);
}

#home-content .contact .info .phone {
	font-size: 1.5rem;
	font-weight: 700;
}

#home-content .contact .info .message {
	font-weight: 300;
	margin-top: 3rem;
}

#home-content .contact form {
	flex-basis: 60%;
}

#home-content .contact form input,
#home-content .contact form textarea,
#home-content .contact form button {
	width: 100%;
	font-size: 1.125rem;
	border-radius: 15px;
}

#home-content .contact form input,
#home-content .contact form textarea {
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	color: #fff;
	background: none;
	border: 2px solid #fff;
	padding: 1rem 1.5rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
}

#home-content .contact form input::placeholder,
#home-content .contact form textarea::placeholder {
	color: #fff;
}

#home-content .contact form textarea {
	min-height: 120px;
}

#home-content .contact form button {
	font-family: 'Oswald', sans-serif;
	color: #fff;
	text-align: left;
	background: var(--main-color);
	padding: 1rem 1.25rem;
	border: none;
	cursor: pointer;
	transition: background .3s;
}

#home-content .contact form button:hover {
	background: #004988;
}

/********************************************************************************************************************/

footer {
	font-size: 1.125rem;
	font-weight: 300;
	text-align: center;
	background: var(--main-color);
	padding: 1.5rem 0;
	margin-top: 50px;
}

/********************************************************************************************************************/

.form-result {
	padding: 10px;
	background: var(--main-color);
	border-radius: 15px;
	margin-bottom: 1rem;
}

.form-result.error {
	background: red;
}

/********************************************************************************************************************/

/* CSS MEDIA QUERIES - WIDTH */

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

}

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

/*	.wrap{width:1100px;}*/

}

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

/*	.wrap{width:900px;}*/

}

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

/*	.wrap{width:700px;}*/

}

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

	.wrap{width:480px;}

	body {
		background: #1d1d1d url(img/background-pattern.jpg) no-repeat center top/768px;
	}

	.mobile-img {
		display: block;
	}

	.desktop-img {
		display: none;
	}

	#home-content .services {
		flex-direction: column;
	}

	#hero-section .hero-box p {
		font-size: 1.25rem;
	}

}

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

	.wrap{width: 90%;}

	#hero-section .hero-box h1 {
		font-size: 1.5rem;
	}

	#home-content .contact {
		flex-direction: column;
	}

}

/* CSS MEDIA QUERIES - HEIGHT */


@media screen and (max-height: 920px) {
	
}

@media screen and (max-height: 810px) {
	
}