.projectSlider{
height: 100%;
width: 90%;
overflow: hidden;
}
.projectSlider .swiper-wrapper {
display: flex;
align-items: center;
}
.projectSlider .swiper-slide {
height: auto;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.projectSlider.swiper-vertical > .swiper-scrollbar {
position: absolute;
right: 10%;
top: 5%;
z-index: 50;
width: 10px;
height: 90%;
}
.projectSlider .swiper-scrollbar-drag {
cursor: pointer;
}
.d-block{
display:block !important;
}
.d-inline-block{
display:inline-block;
}
#projectList .info-title,#projectList .info-desc{
color:#fff;
}
#projectList .d-inline-block{
margin-right:8px;
}
.footermenu{
list-style: none;
margin-bottom: 1.5em;
padding: 0;
}
.footerBtn {
display: inline-block;
outline: medium none;
text-decoration: none;
bottom: 0;
font-size: 1.6rem;
font-weight: 400;
padding-bottom: 8px;
position: relative;
transition: all 0.3s ease-in 0s;
margin-right: 22px;
color: #f0efec;
}
.titreChiffres *{
font-size: 2rem;
line-height: 1.25;
margin-bottom: 5px;
}
#extramenu{
display:none;
}
.vh50{
max-height:50vh;
}
.userloggedoff header .menu-item-object-projects{
display:none;
}
/*****************************************************************************
* LEGAL
*****************************************************************************/
.blugbg{
background: rgb(68,80,124);
background: linear-gradient(180deg, rgba(68,80,124,1) 0%, rgba(177,185,217,1) 100%);
}
.bgwhite{
background: #fff;
}
.legalNote {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items:flex-start;
padding: 13% 20% 10%;
min-height:calc(100vh - 360px);
}
.legalNote h1{
color: #b7c2f7;
font-family: var(--font-titre);
font-size: calc(1.6rem + 1.3vw);
line-height: 1.25;
letter-spacing: 0.05em;
font-weight: 400;
margin-bottom: 40px;
}
.legalNote h4{
margin-bottom: 15px;
}
.legalNote p{
margin-bottom: 15px;
}
/*****************************************************************************
* LOGIN
*****************************************************************************/
.loginBloc {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items:center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url("../images/covers/cover-projet.jpg");
}
.loginBloc_container{
position: relative;
text-align: center;
background-color: rgb( 33, 41, 66 );
border-radius: 9px;
border-top: 10px solid #b7c2f7;
width: 400px;
height: auto;
padding-bottom: 5%;
box-shadow: 1px 1px 108.8px 19.2px rgb(25,31,53);
}
.box h4 {
color: #5c6bc0;
font-size: 18px;
margin-top:94px;;
}
.box h4 span {
color: #dfdeee;
font-weight: lighter;
}
.box h5 {
font-size: 13px;
color: #a1a4ad;
letter-spacing: 1.5px;
margin-top: -15px;
margin-bottom: 70px;
}
.box #email, .box #password,.box #user_login,.box #pass1,.box #pass2 {
display: block;
margin: 20px auto;
background: #262e49;
border: 0;
border-radius: 5px;
padding: 14px 10px;
width: 100%;
outline: none;
color: #d6d6d6;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
::-webkit-input-placeholder {
color: #565f79;
}
.box {margin-top: 100px; padding: 0 10%;}
.box #email:focus,.box #password:focus,.box #user_login.focus,.box #pass1:focus,.box #pass2:focus {
border: 1px solid #79A6FE;
}
.box a{
color: #b7c2f7;
font-size: 1.4rem;
text-decoration: none;
}
.box a:hover {
text-decoration: underline;
}
.box input[type = "checkbox"] {
display: none !important; /* hide the default checkbox */
}
/* style the artificial checkbox */
.box span {
height: 13px;
width: 13px;
border: 2px solid #464d64;
border-radius: 2px;
display: inline-block;
position: relative;
cursor: pointer;
float: left;
left: 0;
}
.btn1 {
border:0;
background: #7f5feb;
color: #dfdeee;
border-radius: 100px;
width: 100%;
height: 49px;
font-size: 16px;
transition: 0.3s;
cursor: pointer;
margin-top: 30px;
}
.btn1:hover {
background: #5d33e6;
}
.rmb {
position: absolute;
margin-left: -22.5%;
margin-top: 0px;
color: #dfdeee;
font-size: 1.4rem;
}
.forgetpass {
position: relative;
float: right;
right: 0;
}
.dnthave{
position: absolute;
top: 92%;
left: 24%;
}
[type=checkbox]:checked + span:before {/* <-- style its checked state */
font-family: FontAwesome;
font-size: 16px;
content: "\f00c";
position: absolute;
top: -4px;
color: #896cec;
left: -1px;
width: 13px;
}
.wrapeye{
position: relative;
}
.typcn {
position: absolute;
right: 5px;
top: 4px;
color: #3b476b;
font-size: 22px;
cursor: pointer;
}
.typcn.active {
color: #7f60eb;
}
.error {
background: #ff3333;
text-align: center;
width: 80%;
height: auto;
padding: 5px 2px;
border: 0;
border-radius: 5px;
margin: 10px auto 10px;
position: absolute;
top: 26px;
left: 10%;
color: white;
display: none;
}
/*****************************************************************************
* CONTACT
*****************************************************************************/
#blocContact {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width:100%;
height:100vh;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url("../images/covers/cover-contact.jpg");
}
#blocContact:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width:100%;
height: 100vh;
background-color:rgba(14,18,46,0.6) ;
}
.blocContact_Col1 {
width:40%;
padding: 0 5% 0 12%;
z-index: 0;
text-align: left;
order:0;
}
.blocContact_Col1 h2 {
color: #fff;
font-size: calc(1.6rem + 2.5vw);
line-height: 1.25;
font-weight: 300;
}
.blocContact_Col2 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 60%;
height: 100%;
background: rgba(24,21,37,1);
margin-right: 0;
z-index: 0;
padding: 0 10%;
overflow: hidden;
order:1;
}
.contact-form {
list-style-type: none;
}
.contact-form li div {
margin-bottom: 2.5em;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
width: 100%;
margin: 0;
padding-bottom: 0.7em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 3px solid slategrey;
background: transparent;
color: lightgrey;
font-weight: 400;
font-size: 1.7rem;
transition: ease-in-out 0.25s;
}
.contact-form select {
cursor: pointer;
background: #181525;
/*
font-size: 12px;
color: slategrey;
text-transform: uppercase;
font-weight: 400;
*/
}
.contact-form textarea {
min-height: 50px;
max-height: 500px;
white-space: pre-wrap;
word-wrap: break-word;
resize: vertical;
overflow: hidden;
}
.contact-form ::-webkit-input-placeholder {
font-size: 12px;
color: slategrey;
text-transform: uppercase;
font-weight: 400;
}
.contact-form label {
font-size: 12px;
color: slategrey;
text-transform: uppercase;
font-weight: 400;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.contact-form button:focus {
outline: none;
resize: none;
border-bottom: 3px solid #f6c4c4;
}
.contact-form button {
cursor: pointer;
color: lightgrey;
background: rgba(34, 34, 34, 0);
border: 3px solid #f6c4c4;
border-radius: 100px;
height: 64px;
width: 200px;
float: right;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
transition: ease-in-out 0.25s;
}
.contact-form button span {
transition: ease-in-out 0.25s;
}
.contact-form button:hover {
background: #f6c4c4;
color: #090322;
}
.contact-form button:hover span {
padding-left: 10px;
color: white;
}
.sliderTeam {
position: relative;
z-index: 2;
width: 100%;
height:100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
overflow: hidden;
}
.sliderTeam .slider__wrap {
display: flex;
align-items: flex-start;
position: relative;
z-index: 2;
}
.sliderTeam .slider__wrap .swiper-slide {
width: 100%;
flex-shrink: 0;
opacity: 0;
height: 100%;
pointer-events: none;
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}
.sliderTeam .slider__wrap .swiper-slide-active, .sliderTeam .slider__wrap .swiper-slide-prev, .sliderTeam .slider__wrap .swiper-slide-next {
opacity: 1;
pointer-events: auto;
}
.sliderTeam .slider__controls {
/*position: relative;*/
z-index: 12;
}
.sliderTeam .slider__controls .slider__pagination {
text-align: center;
margin-top: 25px;
}
.sliderTeam .slider__controls .slider__pagination .swiper-pagination-bullet {
width: 13px;
height: 10px;
display: inline-block;
background: #fff;
opacity: 0.2;
margin: 0 5px;
border-radius: 20px;
transition: opacity 0.5s, background-color 0.5s, width 0.5s;
transition-delay: 0.5s, 0.5s, 0s;
}
.sliderTeam .slider__controls .swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.sliderTeam .slider__controls .slider__pagination .swiper-pagination-bullet-active {
opacity: 1;
background: #ffffff;
width: 100px;
transition-delay: 0s;
}
.sliderTeam .slider__controls .slider__button-next, .sliderTeam .slider__controls .slider__button-prev {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.sliderTeam .slider__controls .slider__button-prev {width:40px; height:40px; left:0; color:black; background-size: 20px 20px; background-image: url("../images/fleche-gauche.png"); background-color: rgba(174, 133, 133, 0.7); margin-top: -80px;}
.sliderTeam .slider__controls .slider__button-next {width:40px; height:40px; right:0; color:black; background-size: 20px 20px; background-image: url("../images/fleche-droite.png"); background-color: rgba(174, 133, 133, 0.7); margin-top: -80px;}
.sliderTeam .slider__controls .slider__button-prev:focus, .sliderTeam .slider__controls .slider__button-next:focus {
outline: none !important;
}
/*****************************************************************************
* RESPONSIVE
*****************************************************************************/
/**********
iPad 3
**********/
/* Ipad (Paysage) ----------- */
@media only screen and (min-device-width : 810px) and (max-device-width : 1080px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
header {
height: 90px;
padding: 0 7%;
}
#logo {
max-width: 180px;
}
/* About
*****************************************/
.about_bloc1 {
height: 100%;
padding: 15% 0 10%;
}
.about_bloc1::before {
height: 100%;
}
.about_bloc1-txt {
position: relative;
width: 50%;
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
margin-left: 7%;
}
.about_bloc1-txt h1{
font-size: calc(1.6rem + 1.6vw);
}
.about_bloc2 {
width: 100%;
padding: 10% 7%;
margin-top: 0px;
}
.about_bloc2-txt h2{
font-size: calc(1.6rem + 1.6vw);
margin-bottom: 40px;
}
.about_bloc2 dl {
padding-left: 0vw;
padding-right: 0vw;
}
.about_bloc2 dt {
font-size: 1.8rem;
}
.about_bloc2 dd {
margin-left: 1.5vw;
margin-bottom: 4vh;
font-size: 1.7rem;
}
.about_bloc3::before {
width: 62%;
height: 75vh;
}
.sliderTeam .slider__controls .slider__button-prev {
margin-top: -145px;
}
.sliderTeam .slider__controls .slider__button-next {
margin-top: -145px;
}
.bloc_txt {
padding: 0 5% 0 8%;
}
/* Contact
*****************************************/
.blocContact_Col1 {
padding: 0 5% 0 8%;
}
.blocContact_Col2 {
padding: 0 5%;
}
.grid .ml-2 {
margin-left: 12.66666667%;
}
.ratio-5-4 {
padding-top: 110%;
}
.logoFooter {
max-width: 180px;
}
.cursor, .cursor2, .cursor3 {
display: none;
}
}
/* Ipad (Portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Header *******************************/
header {
padding: 3% 7% !important;
align-items: flex-start;
}
#logo {
width: 100%;
max-width: 180px;
}
/* Home *******************************/
.home_bloc1 {
height: 70vh;
}
.home_bloc1-txt {
width: 80%;
}
.home_bloc1-txt h1{
font-size: calc(1.6rem + 2vw);
margin-bottom: 10px;
}
.home_bloc1-txt h3{
font-size: 1.4rem;
font-weight: 700;
}
.home_bloc2 {
height:100%;
}
.home_bloc2:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width:50vw;
height: 100vh;
background-color:#4c516a ;
}
.bloc2_Col1 {
width:50%;
padding: 15% 7% 10%;
z-index: 0;
text-align: left;
order:0;
}
.bloc2_Col1 p {
font-size: 1.5rem;
}
.bloc2_Col2 {
width:50%;
padding: 5% !important;
}
.bloc2_Col2 img {
height:auto !important;
margin: auto;
}
/* About
*****************************************/
.about_bloc1 {
height: 75vh !important;
padding: 0;
}
.about_bloc1::before {
height: 75vh !important;
}
/* Page Projet
*****************************************/
.projet_bloc1 {
height: 75vh !important;
}
/* Contact
*****************************************/
.blocContact_Col1 {
width: 100%;
padding: 25% 8% !important;
}
/* Login
*****************************************/
.loginBloc {
height: 70vh !important;
padding: 0 !important;
}
/* Autres
*****************************************/
.w-50, .w-60 {
width: calc(100% - 30%) !important;
}
.logoFooter {
max-width: 200px !important;
}
.cursor, .cursor2, .cursor3 {
display: none;
}
}
/**********
Smartphones
**********/
/* Smartphones (Paysage) ----------- */
@media only screen and (min-width: 481px) and (max-width: 991px) {
/* Header *******************************/
header {
padding: 0 7%;
align-items: center;
}
#logo {
width: 100%;
max-width: 180px;
}
/* Home *******************************/
.home_bloc1-txt {
width: 80%;
}
.home_bloc1-txt h1{
font-size: calc(1.6rem + 2vw);
margin-bottom: 10px;
}
.home_bloc1-txt h3{
font-size: 1.4rem;
font-weight: 700;
}
.home_bloc2 {
height:100%;
}
.home_bloc2:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width:50vw;
height: 100vh;
background-color:#4c516a ;
}
.bloc2_Col1 {
width:50%;
padding: 15% 7% 10%;
z-index: 0;
text-align: left;
order:0;
}
.bloc2_Col1 p {
font-size: 1.5rem;
}
.bloc2_Col2 {
width:50%;
padding: 0 7% 15%;
}
.bloc2_Col2 img {
height:80vh;
margin: auto;
}
/* About
*****************************************/
.about_bloc1 {
height: 100%;
padding: 15% 0 10%;
}
.about_bloc1::before {
height: 100%;
}
.about_bloc1-txt {
position: relative;
width: 84%;
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
margin-left: 7%;
}
.about_bloc1-txt h1{
font-size: calc(1.6rem + 2vw);
}
.about_bloc2 {
width: 100%;
padding: 10% 7%;
margin-top: 0px;
}
.about_bloc2-txt h2{
font-size: calc(1.6rem + 1.7vw);
margin-bottom: 40px;
}
.about_bloc2 dl {
padding-left: 0vw;
padding-right: 0vw;
}
.about_bloc2 dt {
font-size: 1.8rem;
}
.about_bloc2 dd {
margin-left: 1.5vw;
margin-bottom: 4vh;
font-size: 1.7rem;
}
.about_bloc3 {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 0 10%;
background-color: #fff;
}
.about_bloc3::before {
background-color: #fff;
}
.bloc3_col1{
width: 100%;
padding: 0 7% 5%;
}
.bloc3_col2{
width: 100%;
padding: 0 7%;
}
.about_bloc3 h2 {
color: #060b2b;
font-family: var(--font-titre);
font-size: calc(1.6rem + 1.7vw);
line-height: 1.25;
letter-spacing: 0.05em;
font-weight: 400;
margin-top: 40px;
}
.teamer p {color:#060b2b;}
.sliderTeam .slider__controls .slider__button-prev {
margin-top: -57px;
}
.sliderTeam .slider__controls .slider__button-next {
margin-top: -57px;
}
/* LISTE PROJETS
*******************************************/
.bloc_txt {
padding: 0 7%;
}
.bloc_txt h2 {
font-size: calc(1.6rem + 1.6vw);
}
.bloc_list {
height: 100vh;
padding: 5% 3%;
}
.swiper-horizontal > .swiper-scrollbar {
position: absolute;
left: 8%;
bottom: 15%;
z-index: 50;
height: 10px;
width: 84%;
}
/* Page Projet
*****************************************/
.projet_bloc1 {
height: 100vh;
}
.projet_bloc1-txt {
position: relative;
width: 86%;
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
margin-left: 7%;
}
.titreMini {
margin-bottom: 15px;
}
.projet_bloc1-txt h1 {
font-size: calc(1.6rem + 2.6vw);
margin-bottom: 15px;
}
.titreChiffres {
font-size: 1.6rem;
}
.projet_bloc2 {
width: 100%;
padding: 10% 7%;
margin-top: 0px;
}
/* Contact
*****************************************/
#blocContact {
flex-direction: column;
height: 100% !important;
}
#blocContact::before {
height: 100% !important;
}
.blocContact_Col1 {
width: 100%;
padding: 20% 8% 10%;
}
.blocContact_Col2 {
width: 100%;
height: 100%;
padding: 10% 5%;
}
.contact-form button {
width: 100%;
float: none;
margin: auto;
display: block;
}
/* Login
*****************************************/
.loginBloc {
height: 100%;
padding: 15% 0 8%;
}
.box {
margin-top: 100px;
padding: 0 5%;
}
.mtPaysage_100 {margin-top: 100px;}
.ratio-5-4 {
padding-top: 110%;
}
.logoFooter {
margin-bottom: 10px;
max-width: 180px;
}
.grid .ml-7 {
margin-left: 35%;
}
.grid .c-5 {
width: 65%;
}
.onPaysage {width: 100% !important; margin-left: 0 !important;}
.w-80 {width: calc(100% - 11%);}
.cursor, .cursor2, .cursor3 {
display: none;
}
}
/* Smartphones (portrait) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
/* Header
*****************************************/
header {
padding: 0 8%;
height: 80px;
align-items: center;
}
#logo {
width: 100%;
max-width: 180px;
}
/* Home
*****************************************/
.home_bloc1-txt {
width: 86%;
}
.home_bloc1-txt h1{
font-size: calc(1.6rem + 2.5vw);
}
.home_bloc1-txt h3{
font-size: 1.4rem;
font-weight: 700;
}
.home_bloc2 {
flex-direction: column;
height:100%;
}
.home_bloc2:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width:100vw;
height: 50vh;
background-color:#4c516a ;
}
.bloc2_Col1 {
width:100%;
padding: 15% 7% 10%;
z-index: 0;
text-align: left;
order:0;
}
.bloc2_Col1 p {
font-size: 1.5rem;
}
.bloc2_Col2 {
width:100%;
padding: 0 7% 15%;
}
.bloc2_Col2 img {
height:60vh;
margin: auto;
}
/* About
*****************************************/
.about_bloc1-txt {
position: relative;
width: 84%;
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
margin-left: 8%;
}
.about_bloc1-txt h1{
font-size: calc(1.6rem + 2.4vw);
}
.about_bloc2 {
width: 100%;
padding: 15% 8% 12%;
margin-top: 0px;
}
.about_bloc2-txt h2{
font-size: calc(1.6rem + 2vw);
margin-bottom: 40px;
}
.about_bloc2 dl {
padding-left: 0vw;
padding-right: 0vw;
}
.about_bloc2 dd {
margin-left: 1.5vw;
margin-bottom: 4vh;
font-size: 1.7rem;
}
.about_bloc3 {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 0 10%;
background-color: #fff;
}
.about_bloc3::before {
background-color: #fff;
}
.bloc3_col1{
width: 100%;
padding: 0 8% 12%;
}
.bloc3_col2{
width: 100%;
padding: 0 8%;
}
.about_bloc3 h2 {
color: #060b2b;
font-family: var(--font-titre);
font-size: calc(1.6rem + 2.4vw);
line-height: 1.25;
letter-spacing: 0.05em;
font-weight: 400;
margin-top: 40px;
}
.teamer p {color:#060b2b;}
.sliderTeam .slider__controls .slider__button-prev {
margin-top: -57px;
}
.sliderTeam .slider__controls .slider__button-next {
margin-top: -57px;
}
#projectList {
flex-direction: column;
height: 100%;
}
#projectList::before {
height: 100%;
}
.bloc_txt {
width: 100%;
padding: 0 8%;
height: 50vh;
display: flex;
align-items: center;
}
.bloc_list {
width: 100%;
height: 50vh;
padding: 8%;
}
.swiper-horizontal > .swiper-scrollbar {
position: absolute;
left: 8%;
bottom: 15%;
z-index: 50;
height: 10px;
width: 84%;
}
.slide-inner--info {
width: 80%;
}
/* Page Projet
*****************************************/
.projet_bloc1 {
height: 100vh;
}
.projet_bloc1-txt {
position: relative;
width: 84%;
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
margin-left: 8%;
}
.projet_bloc1-txt h1 {
font-size: calc(1.6rem + 2.6vw);
margin-bottom: 15px;
}
.titreChiffres {
font-size: 1.6rem;
}
.projet_bloc2 {
width: 100%;
padding: 10% 0;
margin-top: 0px;
}
/* Contact
*****************************************/
#blocContact {
flex-direction: column;
height: 100%;
}
#blocContact::before {
height: 100%;
}
.blocContact_Col1 {
width: 100%;
padding: 40% 8% 30%;
}
.blocContact_Col2 {
width: 100%;
height: 100%;
padding: 10% 0;
}
.contact-form button {
width: 100%;
float: none;
margin: auto;
display: block;
}
/* Login
*****************************************/
.loginBloc_container {
width: 84%;
}
.box {
margin-top: 100px;
padding: 0 5%;
}
/* Footer
*****************************************/
.logoFooter {
margin-bottom: 10px;
max-width: 180px;
}
/* Custom Cursor (désactivé sur mobile)
*****************************************/
.cursor, .cursor2, .cursor3 {
display: none;
}
/* Autres
*****************************************/
.mBotSmart20 {margin-bottom: 20%;}
.titreBloc {
font-family: var(--font-titre);
font-size: calc(1.6rem + 7vw);
line-height: 1;
font-weight: 400;
margin-bottom: 0.6em;
}
.textBloc {
font-size: 1.5rem;
}
.ratio-5-4 {
padding-top: 100%;
}
.expanded-timeline {
width: 35vh;
}
.slider .slider__controls .slider__pagination {
text-align: center;
margin-top: 30px !important;
}
}