/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.4rem;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
strong{ font-weight: bold;}
i{ font-style: italic;}
.quote_author{
	display: inline-block;
	padding-right: 10px;
}

/* end reset */
@font-face {
	font-family: 'Phosphate_RR';
	src: url('../fonts/Phosphate_RR.ttf')  format('truetype');
  }
:root{
  --primaryColor: #D80404;
  --secondaryColor: #363533;
  --textColor: #363533;
  --backColor: #F4F0EC;
  --lightColor: #fff;
  --darkColor: #2d2c2a;
  --neutralColor: #a2a2a2;
  --maxWidth: 900px;
}
*{
  margin: 0; padding: 0;
}
.colour_stroke_svg{
	fill: var(--secondaryColor);
}
.colour_fill_svg{
	fill: var(--lightColor);
}
ul{ list-style: none;}
body{
  font-family: 'Titillium Web', sans-serif;
  color: var(--secondaryColor);
  background: var(--backColor);
  font-size: 20px;
  line-height: 1.4em;
}
h2{
  font-family: 'Phosphate_RR';
  font-size: 30px;
}
h3{
	font-size: 24px;
	font-weight: 600;
}
h1{ font-size: 20px; letter-spacing: 10px;}

.domain{
	width: 100%; text-align: center; padding: 20px 0;
}
.hero{
	width: 100%;
	background-color: var(--secondaryColor);
	font-family: 'Phosphate_RR';
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px 0;
	color: var(--backColor);
	font-size: 56px;
	letter-spacing: 2px;
	line-height: 1.2em;
}
.cnt_txt{
	display: flex;
    flex: 0 0 680px;
	padding-left: 90px;
}
.emphatize{
	color: var(--primaryColor);
}

.sections{
	margin: 80px auto;
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	gap: 60px;
	padding: 0 20px;
	overflow: hidden;
}
.section_standard{
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.section_columns{
	display: flex;
	gap: 40px;
}
.section_columns--cards{
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
.section_text{
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.section_text h2{
	padding-bottom: 4px;
}
.logos_slider{
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	overflow: hidden;
}
.logos_slider img{
	height: 20px;
	width: auto;
}

.v_list{
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
}
.v_list li{
background: url(../img/icon_t.svg) no-repeat left 9px; padding-left: 24px; padding-bottom: 5px;
background-size: 13px auto;
}

/* Cases cards */
.card_case{ 
	border-radius: 5px; 
	background: var(--lightColor);
	padding: 20px;
	border: 1px dashed var(--textColor);
	background: var(--lightColor);
	background-size: cover;
	flex: 1 0 40%;
	background: linear-gradient(to left, var(--lightColor) 50%, var(--textColor) 50%) right;
    background-size: 200%;
    transition: background-position .1s ease-out;
	text-decoration: none;
	color: var(--textColor);
	cursor: pointer;
}

.card_case__content{
 padding: 20px;
 background: url(../img/cases/default.png) no-repeat center center var(--lightColor);
background-size: cover;
height: calc(100% - 40px);
 display: flex;
 flex-direction: column;
 gap: 10px;
 font-size: 18px;
}
a.card_case:hover, a.card_case:focus{
	background-position: left;
	transition: background-position 1s ease-out;
	color: var(--lightColor);
}
a.card_case:hover .card_case__content  {
	background: none;
}
.map_process img{
	width: 100%;
	height: auto;
	border: 1px dashed var(--textColor);
    border-radius: 5px;
    background: var(--lightColor);
}

.big_quote{
	font-size: 24px;
	display: inline-block;
	padding: 10px 0;
	text-align: left;
}
/* footer */
.footer__wrapper{
	background: var(--secondaryColor);
	color: var(--backColor);
	text-align: center;
}
.footer__contact{
	max-width: 1000px;
	display: flex;
	justify-content: left;
	gap: 40px;
	margin: 0 auto;
	padding: 40px 20px;
}
.footer__image{
	width: 15%;
}
.footer__text{
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: left;
	align-items: start;
}
.footer__close{
	padding: 20px;
	background: var(--darkColor);
}



/* buttons */
.cnt_button{
	text-align: center;
}
.cta_button{
	background-color: var(--primaryColor);
	color: var(--lightColor);
	font-size: 20px;
	display: inline-flex;
	padding: 15px 15px;
	border: 0;
	border-radius: 3px;
	font-weight: 800;
	cursor: pointer;
	text-decoration: none;
}
.secondary_button{
	background-color: var(--backColor);
	color: var(--textColor);
	font-size: 20px;
	display: inline-flex;
	padding: 15px 15px;
	border: 3px solid var(--textColor);
	border-radius: 3px;
	font-weight: 800;
	cursor: pointer;
	background: linear-gradient(to left, var(--backColor) 50%, var(--textColor) 50%) right;
    background-size: 200%;
    transition: .2s ease-out;
	text-decoration: none;
}
.secondary_button:hover, .secondary_button:focus{
	background-position: left;
	color: var(--lightColor);
}
.cta_button:hover{
	-webkit-animation: shake-vertical 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-vertical 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	opacity: .9;
}
.cta_button:active, .cta_button:focus{
	opacity: .8;
	color: var(--textColor);
	background: var(--lightColor);
}




/******************* Media queries  ********************/

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

	body{
		font-size: 18px;
	}
	.hide_mobile{
		display: none;
	}
	.sections{
		margin: 40px auto;
	}
	.domain{
		padding: 10px 0;
	}
	h1{ font-size: 14px; letter-spacing: 10px;}
	h3{ font-size: 20px;}
	.hero{
		padding: 50px 0;
		font-size: 26px;
	}
	.cnt_txt{
		flex: 0 0 auto;
		padding-left: 0;
	}
	.section_image{
		text-align: center;
	}
	.v_list{
		column-count: 1;
	}
	.card_case{
		padding: 10px;
	}
	.big_quote{
		font-size: 20px;
	}
}

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

	body{
		font-size: 18px;
	}
	.hide_mobile{
		display: none;
	}
	.sections{
		margin: 40px auto;
	}
	.section_columns, .section_columns--cards{
		flex-direction: column;
		gap: 20px;
	}
	.domain{
		padding: 10px 0;
	}
	h1{ font-size: 14px; letter-spacing: 10px;}
	.hero{
		padding: 50px 0;
		font-size: 26px;
	}
	.cnt_txt{
		flex: 0 0 auto;
		padding-left: 0;
	}
	.section_image{
		text-align: center;
	}
	.v_list{
		column-count: 1;
	}
	.card_case{
		padding: 10px;
	}
	.svg_adapt_mobile{
		width: 50%;
		height: auto;
	}
}

/******************* END Media queries  ********************/

/* animation*/


/* ----------------------------------------------
 * Generated by Animista on 2023-3-6 10:45:48
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
 /* ----------------------------------------------
 * Generated by Animista on 2023-3-6 10:46:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-vertical
 * ----------------------------------------
 */
@-webkit-keyframes shake-vertical {
	0%,
	100% {
	  -webkit-transform: translateY(0);
			  transform: translateY(0);
	}
	10%,
	30%,
	50%,
	70% {
	  -webkit-transform: translateY(-8px);
			  transform: translateY(-8px);
	}
	20%,
	40%,
	60% {
	  -webkit-transform: translateY(8px);
			  transform: translateY(8px);
	}
	80% {
	  -webkit-transform: translateY(6.4px);
			  transform: translateY(6.4px);
	}
	90% {
	  -webkit-transform: translateY(-6.4px);
			  transform: translateY(-6.4px);
	}
  }
  @keyframes shake-vertical {
	0%,
	100% {
	  -webkit-transform: translateY(0);
			  transform: translateY(0);
	}
	10%,
	30%,
	50%,
	70% {
	  -webkit-transform: translateY(-8px);
			  transform: translateY(-8px);
	}
	20%,
	40%,
	60% {
	  -webkit-transform: translateY(8px);
			  transform: translateY(8px);
	}
	80% {
	  -webkit-transform: translateY(6.4px);
			  transform: translateY(6.4px);
	}
	90% {
	  -webkit-transform: translateY(-6.4px);
			  transform: translateY(-6.4px);
	}
  }