:root {
	--color: #333;
	--font_size: 19px;
	--color_1: rgb(65, 191, 206);
	--color_2: rgb(22, 44, 60);
	--grey_bg: #f3f3f3;
	--header_h: 100px;
	--header_scroll_h: 60px;
}


/* ELEMENTS */
* {margin:0; padding:0; box-sizing:border-box}
html {background-color:#fff; scroll-behavior:smooth !important}
body {height:100%; font-family:'Nunito',sans-serif; font-size:var(--font_size); line-height:1.6; color:var(--color)}
h1, h2, h3 {font-weight:400}
h1 {}
h2 {font-size:38px; margin-bottom:var(--font_size); text-align:center; color:var(--color_1)}
h3 {font-size:30px; margin-bottom:var(--font_size); text-align:center}
p {padding-bottom:var(--font_size)}
img {max-width:100%; height:auto}
strong {font-weight:600; color:#000}
a {text-decoration:none; color:var(--color_2); transition:color 0.5s}
a:hover {color:var(--color_1)}
iframe {max-width:100%}
button.plain {margin:0; padding:0; border:none; background-color:transparent; cursor:pointer; font-size:var(font_size); color:var(--color)}


section ul {margin:0 0 0 16px; padding:0; list-style-type:square}
	section ul li {margin:0 0 16px 0; padding:0}


/* CLASSES */
.oh {overflow:hidden}
.tac {text-align:center}
.fl {float:left}
.fr {float:right}
.cb {clear:both}
.fsi {font-style:italic}
.pr {position:relative}
.pa {position:absolute}
.pf {position:fixed}
.rounded {border-radius:10px}
.dn {display:none}
.db {display:block !important}
.df {display:flex}
.df.vc {align-items:center}
.df.hc {justify-content:center}
.df.sb {justify-content:space-between}

.grey_bg {background-color:var(--grey_bg)}

@media screen and (max-width: 991px) {
	.mobile {display:block}
	.desktop {display:none}
}

@media screen and (min-width: 992px) {
	.mobile {display:none}
	.desktop {display:block}
}


/* LAYOUT */
.wrap {padding-left:16px; padding-right:16px; margin:0 auto}
.cols {display:flex}
	.cols .col {flex-grow:0; flex-shrink:0; flex-basis:auto}

@media screen and (max-width: 991px) {
	.cols {flex-direction:column; align-items:center}
	.col_2 {padding-top:8px}
}

@media screen and (min-width: 992px) {
	.wrap {width:992px}
	.cols {flex-direction:row; align-items:center}
}


/* *****
THEME
***** */
header {position:fixed; z-index:10; top:0; left:0; width:100%; padding:0; background-color:#fff; box-shadow:0 3px 5px rgba(57, 63, 72, 0.3)}
	header .wrap {display:flex; justify-content:space-between; align-items:center}
		header .logo {padding:10px 0}
			header .logo img {display:block; height:73px; transition:height 0.5s}

	/* desktop */
	header .desktop .nav ul {margin:0; padding:0; list-style-type:none}
		header .desktop .nav ul li {display:inline-block; margin:0 0 0 16px; padding:0}
			header .desktop .nav ul li a {display:block; position:relative; line-height:1; color:var(--color_1)}
			header .desktop .nav ul li a:after {content:""; display:block; position:absolute; bottom:-8px; width:0; height:3px; background-color:var(--color_1); transition:width 0.3s ease-out}
			header .desktop .nav ul li a:hover:after {width:100%}

	/* mobile */
	header .mobile .nav {position:fixed; z-index:999; top:16px; left:16px; right:16px; background-color:#fff; border:1px solid #ccc}
		header .mobile .nav .close_menu {display:flex; justify-content:end; padding:16px}
				header .mobile .nav .close_menu img {display:block}

		header .mobile .nav ul {margin:0; padding:0; list-style-type:none}
			header .mobile .nav ul li {margin:0; padding:0}
				header .mobile .nav ul li a {display:block; padding:16px; line-height:1; color:var(--color_1); text-align:center}

/* shrinked header */
body.shrinked_header header .logo img {height:50px}

section {padding:80px 0}

ul.s1 {margin:0; padding:0; list-style-type:none}
	ul.s1 li {background-image:url(media/circle-light-16x16.svg); background-repeat:no-repeat; background-position:left center; padding-left:28px}

/* welcome */
#welcome {padding:93px 0 0 0; background-color:#a0d8e1; background-image:url(media/bg.svg); background-repeat:no-repeat; background-position:center center}

	/* desktop */
	#welcome .desktop {}
		#welcome .desktop .wrap {height:500px; position:relative}
			#welcome .desktop .wrap > .cell_1, #welcome .desktop .wrap > .cell_2, #welcome .desktop .wrap > .cell_3 {position:absolute; top:50px; width:200px; height:400px; background-image:url(media/about.jpg); background-repeat:no-repeat}
			#welcome .desktop .wrap > .cell_1 {left:16px; background-position:0 0; border-radius:10px 0 0 10px}
			#welcome .desktop .wrap > .cell_2 {left:232px; background-position:-200px 0}
			#welcome .desktop .wrap > .cell_3 {left:448px; background-position:-400px 0; border-radius:0 10px 10px 0}

			#welcome .desktop .wrap > .cell_4, #welcome .desktop .wrap > .cell_5 {position:absolute; right:16px; width:312px; height:192px; font-size:25px; color:#fff}
			#welcome .desktop .wrap > .cell_4 {top:50px; height:192px; background-color:var(--color_2)}
			#welcome .desktop .wrap > .cell_5 {bottom:50px; height:192px; background-color:var(--color_1)}

	/* mobile */
	#welcome .mobile {}
		#welcome .mobile .wrap {padding-top:32px; padding-bottom:32px}
		#welcome .mobile img {display:block}
		#welcome .mobile .text_1, #welcome .mobile .text_2 {position:absolute; padding:8px 16px; font-size:22px; color:#fff; border-radius:8px}
		#welcome .mobile .text_1 {top:16px; left:16px; background-color:rgba(22, 44, 60, 0.9)}
		#welcome .mobile .text_2 {bottom:16px; right:16px; background-color:rgba(65, 191, 206, 0.9)}

/* about */
@media screen and (max-width: 991px) {
	#about .cols .col_2 {padding-top:16px}
}

@media screen and (min-width: 992px) {
	#about .cols {padding-bottom:16px}
		#about .col_1 {width:50%; padding-right:16px}
		#about .col_2 {width:50%; padding-left:16px}
}

/* what we do */
@media screen and (max-width: 991px) {
	#what-we-do .col_2 {margin-top:16px}
}

@media screen and (min-width: 992px) {
	#what-we-do {background-image:url(media/bg-1000x1000.svg); background-repeat:no-repeat; background-position:center top}
	#what-we-do .col_1 {width:50%; padding-left:48px; padding-right:16px}
		#what-we-do .col_1 > div {float:right}
	#what-we-do .col_2 {width:50%; padding-left:16px}
}

/* references */
@media screen and (max-width: 991px) {
	#references .cols .col_2 {padding-top:16px}
}

@media screen and (min-width: 992px) {
	#references .col_1 {width:50%; padding-right:16px}
	#references .col_2 {width:50%; padding-left:16px}
}

/* contact */
#contact {background-image:url(media/globe.svg); background-repeat:no-repeat; background-position:center center}
	#contact .col {padding:8px}

@media screen and (max-width: 991px) {
	#contact .cols {display:flex; justify-content:center}
}

@media screen and (min-width: 992px) {
	#contact .cols.first .col.first {width:66.666%}
	#contact .cols.first .col.second {width:33.333%}

	#contact .cols.second {margin-top:48px; flex-shrink:1}
		#contact .cols.second .col {width:33.333%}
}

.contact_row {display:flex; align-items:center}
	.contact_row .icon {padding-right:16px}
	.contact_row .text {}

footer {padding:16px 0; background-color:#333; color:#f5f5f5; font-size:16px}
	footer .cols {justify-content:space-between}
	footer a {color:#f5f5f5}
	footer a:hover {color:var(--light_blue)}