/*
--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 
Medium: 
Semi-bold: 
Bold: 

- Line heights

Default : 1
medium : 1.2
high : 1.5
higher : 1.8
- Letter spacing

--- 02 COLORS

- header: #eeedf2
- Tints:
- Shades: 

- Accents:
- Greys : #868686
          #6c6c6c

--- 05 SHADOWS
box-shadow: 0 0 6px #bbbbbb;

--- 06 BORDER-RADIUS

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/


/* Default padding / Margin */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    height: 100%;
    -ms-overflow-style: scrollbar;
}
 
/*====================*/
/* BG BODY SECTION */
/*====================*/
 
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1;
    color: #000000;
    font-weight: 400;
 background-image: url("https://image.email.groupeseb.com/lib/fe3611717564047d721177/m/2/66b763c0-b1b4-4cb4-b742-ca75bb2de0c2.png");
    width: 100% !important;
    background-color: #414F5E;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
 background-position-y: 2.6042vw;
}
*:focus {
    outline: none;/* outline: 4px dotted #e67e22; *//* outline-offset: 8px; *//* box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); */
}
img {
    vertical-align: middle;
    width: 100%;
}

/*====================*/
/* LOGO SECTION */
/*====================*/

.logoimg-container {
    max-width: 30.521vw;
    position: relative;
    margin: auto;
    padding: 1.04167vw 0 1.0120vw;
}
.logo-img {
    align-content: center;
    display: inline-block;
}
.logo_head {
    background-color: #414F5E;
    background-size: cover;
    background-position: 70%;
    background-repeat: no-repeat;
}

 
/*====================*/
/* BOX SECTION */
/*====================*/

.main-box {
    padding-bottom: 3.5417vw !important;
    padding-top: 3.5417vw !important;
}
.Box-background-color {
 width: 43.990vw;
    height: 34.7271vw;
    background-color: #FFFFFF;
    padding: 0.78125vw 0.6771vw;
    margin-left: 10.209vw;
    margin-right: 43.8027vw;
    margin-top: 0;
    text-align: center;
}
 
/*====================*/
/* TEXT & CTA SECTION */
/*====================*/
 
.heading_text p {
    font-family: 'Roboto', sans-serif;
    font-size: 2.604vw;
    line-height: 1.22;
    color: #000000;
    text-align: center;
    font-weight: bold !important;
    padding-bottom: 3.125vw;
 margin-top: 4.1667vw;
}
.body_text p {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1.771vw;
    line-height: 1.05;
    color: #242F3A;
    text-align: center;
    font-weight: 400;
    padding: 0 6.875vw 2.8125vw 5.417vw;
}
.submit_btn {
    background-color: #414F5E;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    border: 1px solid #141414;
    font-weight: 400;
    text-transform: uppercase;
    width: 22.545vw;
    padding: 0.78125vw 0;
    border-radius: 0;
    cursor: pointer;
    margin-bottom: 7.1875vw;
    font-size: 1.198vw;
}

/*====================*/
/* MEDIA QUERIES */
/*====================*/
@media (max-width:74em)  {

.logo-img {
    width: 100% !important;
    align-content: center;
    display: inline-block;
}
.logoimg-container {
    width: 100% !important;
 max-width: 390px;
    position: relative;
    margin: auto;
    padding: 1.6rem 0 0;
}
.Box-background-color {
    width: 100% !important;
    height: auto !important;
    background-color: #414F5E;
    padding: 0rem;
    max-width: 60rem;
    margin: 7.922rem auto 0 auto;
}
.bg_color {
 background-image: none;
    background-color: #414F5E;
}
.content-section {
    background-image: none;
    width: 100% !important;
    background-color: #414F5E;
 height: 100vh;  
}
.em_txt_white {
    color: #ffffff !important;
}
.main-box {
    width: 100% !important;
    margin: auto;
    padding-top: 0rem !important;
}
.submit_btn {
    background-color: #FFFFFF;
    color: #414F5E;
    border: 1px solid #141414;
    width: 320px;
    padding: 1.8rem 0rem;
    margin-bottom: 13rem;
    font-size: 2rem;
 font-weight: bold;
}
.heading_text p {
    
    font-size: 4.2rem;
    line-height: 1.2;
    text-align: center;
    margin-top: 0;
 padding-top: 0;
    padding-bottom: 6rem;
}
.body_text p {
    
    font-size: 3rem;
    line-height: 1.2;
    
    text-align: center;
    
    padding: 0 4.2rem 6rem;
}
} 


@media (max-width:48em)/* 48em = 768 px */ {
.logo-img {
    width: 100% !important;
    align-content: center;
    display: inline-block;
}
.logoimg-container {
    width: 100% !important;
 max-width: 320px;
    position: relative;
    margin: auto;
    padding: 1.6rem 0 0;
}
.Box-background-color {
    width: 100% !important;
    height: auto !important;
    background-color: #414F5E;
    padding: 0rem;
    max-width: 55rem;
    margin: 7.922rem auto 0 auto;
}
.bg_color {
    background-color: #414F5E;
}
.content-section {
    background-image: none;
    width: 100% !important;
    background-color: #414F5E;
 height: 100vh;  
}
.em_txt_white {
    color: #ffffff !important;
}
.main-box {
    width: 100% !important;
    margin: auto;
    padding-top: 0rem !important;
}
.submit_btn {
    background-color: #FFFFFF;
    color: #414F5E;
    border: 1px solid #141414;
    width: 300px;
    padding: 1.8rem 0rem;
    margin-bottom: 13rem;
    font-size: 1.8rem;
 font-weight: bold;
}
.heading_text p {
    
    font-size: 3.9rem;
    line-height: 1.2;
    text-align: center;
    margin-top: 0;
 padding-top: 0;
    padding-bottom: 6rem;
}
.body_text p {
    
    font-size: 2.6rem;
    line-height: 1.2;
    
    text-align: center;
    
    padding: 0 4.2rem 6rem;
}
.submit_btn {
    font-weight: bold;
    width: 280px;
    padding: 1.6rem 0rem;
    margin-bottom: 13rem;
    font-size: 1.7rem;
}
}


@media (max-width:38em)/* 38em = 608 px */ {
.heading_text p{
    
    font-size: 3.5rem;
 line-height: 1.2;
    padding-bottom: 4rem;
 
}
.body_text p {
    
    font-size: 2.2rem ;
    line-height: 1.2;
    padding: 0 2.2rem 4.377rem 2.2rem;
}
.submit_btn {
    font-weight: bold;
    width: 280px;
    padding: 1.6rem 0rem;
    margin-bottom: 13rem;
    font-size: 1.7rem;
}
}

@media (max-width:30em)/* 30em = 480 px */ {
.heading_text p {
    
    font-size: 2.9rem;
 line-height: 1.2;
    padding-bottom: 3rem;
 
}
.body_text p {
    
    font-size: 1.8rem ;
    line-height: 1.2;
    padding: 0 2.2rem 4.377rem 2.2rem;
}
.submit_btn {
    
    width: 250px;
    padding: 1.2rem 0rem;
    font-weight: bold;
    font-size: 1.5rem;
}
}

@media (max-width:23em)/* 23em = 368 px */ {
.content-section {
    width: 100% !important;
    background-color: #414F5E;
}
.heading_text p {
    font-size: 2.5rem;
 line-height: 1.2;
    padding-bottom: 3.7rem;
}
.body_text p {
    
    font-size: 1.6rem;
    line-height: 1.2;
    padding: 0 1.9rem 4.377rem 1.8rem;
}
.submit_btn {
    
    width: 240px;
    padding: 1.212rem 0.922rem;
    margin-bottom: 13rem;
    font-size: 1.5rem;
 font-weight: bold;
}

}