@charset "utf-8";
/* CSS Document */

@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Thin.woff') format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-BoldItalic.woff') format('woff');
font-weight: 700;
font-style: italic;
}




@font-face {
font-family: 'RobotoCondensed';
src: url('../fonts/RobotoCondensed-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'RobotoCondensed';
src: url('../fonts/RobotoCondensed-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'RobotoCondensed';
src: url('../fonts/RobotoCondensed-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'RobotoCondensed';
src: url('../fonts/RobotoCondensed-BoldItalic.woff') format('woff');
font-weight: 700;
font-style: italic;
}



@font-face {
font-family: 'Icomoon';
src: url('../fonts/icomoon6.woff') format('woff');
font-weight: normal;
font-style: normal;
}

[class*="icon"],
*::before,
*::after {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
/*line-height: 1;*/
}


html {
height: 100%;
box-sizing: border-box;
font-size: 17px;
}

*, *::before, *::after {
box-sizing: inherit;
}

:root {
--black: #000000;
--yellow: #f1c619;
--blue: #36a5ef;
--red: #d4327e;
--green: #8ab444;

--header_bg: #f7f7f7;
--navigation_bg: #4b515b; /*3F547C, 404c63, 35496f, 344463*/
--navlink: #fff;
--navlink_hover: #ffde00; /*ffcc00, FEDB12, ffd200, fdd82d*/
--sidebar: #000;
--sidebar_bg: #cccfd3; /*626a79, 90949b, c6cad1*/
--link: #0D5188;
--link_hover: #000;
--article_link_hover: #168AE9;
--toplink_hover: #168AE9; /*f1c619*/
}


body {
min-height: 100vh;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #000;
hyphens: manual;
background-color: #333;
}

/*** main containers ***/

.wrapper {
max-width: 1920px;
margin: 0 auto;
min-height: 100vh;
display: grid;
background-color: #333;
}

.content {
display: grid;
grid-template-rows: auto 1fr auto;
background-color: var(--yellow);
}

header {
padding: 60px;
background: #000 url(../img/headerbg1.jpg) no-repeat right top;
background-size: contain;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
}

main {
position: relative; /* ? */
}

#navmain {
background-color: var(--navigation_bg);
color: var(--navlink);
}

.page_content {
padding: 50px 50px 60px 50px; 
}

footer {
padding: 60px 70px 100px;
background-color: var(--header_bg);
display: flex;
flex-flow: row wrap;
gap: 60px;
}


/*** end main containers ***/

img {
display: block;
border: none;
}
a {
color: #168AE9;
text-decoration: none;
}
.readmore a {
font-weight: 500;
line-height: 1;
color: #168AE9;
}
a:hover {
color: #E2001A;
}

.subtitle {
margin-left: 10px;
font: normal 700 21px 'RobotoCondensed';
color: #fff;
white-space: nowrap;
}
header .left {
padding-right: 6vw;
}
header .right {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 24px 30px;
padding: 57px 300px 0 0;
}





.blog {
padding: 70px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
}

.item {
display: grid;
grid-template-rows: auto 1fr auto;
padding: 30px;
line-height: 1.4;
gap: 25px;
background: #fff url(../img/bg_reflexion.svg) no-repeat right bottom;
background-size: contain;
filter: drop-shadow(10px 10px 20px rgba(0,0,0,.25));
}
.image {
min-height: 56px;
}
.readmore a {
font-weight: 500;
line-height: 1;
}

.readmore a::before {
content: "\e934";
font-size: 26px;
color: #000;
float: left;
vertical-align: middle;
margin-right: 6px;
}


.fp_text {
max-width: 880px;
margin: 10px auto 70px;
padding: 0 40px;
text-align: center;
line-height: 1.4;
}
.fp_text::before {
content: "";
display: block;
max-width: 200px;
height: 1px;
margin: 0 auto 30px;
background: #000;
}

.fp_text a {
font-weight: 500;
color: #E2001A;
}
.fp_text a:hover {
color: #000;
text-decoration: underline;
}

footer h3 {
margin: 0;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
}
footer p {
margin: 0 0 1em;
}



/** logos **/

img#oks {
max-width: 160px;
}
img#ram {
min-width: 140px;
}
img#qh {
min-height: 56px;
}
img#jet {
min-height: 52px;
}
img#whm {
min-height: 40px;
}
img#dec {
min-width: 160px;
}







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

.blog {
grid-template-columns: 1fr 1fr;
}


}



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

header .right {
padding: 57px 250px 0 0;
/*display: grid;
grid-template-columns: min-content min-content min-content;*/
}


}


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

header {
padding: 40px;
}
header .left {
padding-right: 50px;
}
header .right {
padding: 57px 200px 0 0;
}

.blog {
padding: 50px;
}

footer {
padding: 60px 50px 100px;
}

}



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

/*header .right {
padding: 57px 21vw 0 0;
}*/

}




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

header {
padding: 10px 20px 30px;
}
header .right {
padding: 57px 135px 0 0;
}

.blog {
padding: 40px 30px 60px;
gap: 30px;
}

footer {
padding: 60px 30px 80px;
gap: 40px
}


}

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

header .right {
display: none;
}

}

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

.contact_label {
flex: 1 0 100%;
}

}



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

.blog {
grid-template-columns: 1fr;
padding: 50px 40px;
gap: 40px;
}
header {
padding: 10px 30px 30px;
}

footer {
padding: 60px 40px 80px;
}

}




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

footer {
gap: 30px 40px;
}

}


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

.blog {
padding: 40px 20px;
gap: 30px;
}
header {
padding: 10px 20px 30px;
}

footer {
padding: 60px 20px 80px;
}

}


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

header {
background-image: none;
}
header .left {
padding-right: 0;
}

.item {
padding: 30px 20px;
gap: 20px;
}
.fp_text {
padding: 0 20px;
}

}

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

.blog {
padding: 40px 0;
}


}