/******************************************
/* SPECIFIC LUTECE DEFAULT THEME STYLES   *
******************************************/

/* Variables */
:root {
	--main-color: #071F32;
	--main-info-color: #354BCF;
	--main-danger-color: #E22C3F;
	--main-success-color: #248619;
	--main-warning-color: #D14800;
	--black-color: #000;
	--dark-color: #1A1A1A;
	--dark-lighter-color: #6D6D6D;
	--gray-dark-color: #A1A1A1;
	--gray-color: #C3C3C3;
	--gray-light-color: #D9D9D9;
	--white-strong-color: #F2F2F2;
	--white-light-color: #F0F0F0;
	--white-color: #FFF;
}

/** Imports Font Montserrat 	**/
/** 							**/
/** Fonts						**/
/**  							**/
/** Montserrat Regular 		**/
@font-face {
    font-family: "Montserrat";
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/Montserrat-Regular.eot");
    src: local("Montserrat Regular "),
		 local("Montserrat-Regular"),
		 url("../fonts/Montserrat-Regular.eot?#iefix") format('embedded-opentype'),
         url("../fonts/Montserrat-Regular.woff2") format("woff2"),
         url("../fonts/Montserrat-Regular.woff") format("woff");
}

/** Montserrat Bold **/
@font-face {
    font-family: "Montserrat";
    font-weight: 700;
    font-style: normal;
    src: url("../fonts/Montserrat-Bold.eot");
    src: local("Montserrat Bold "),
		 local("Montserrat-Bold"),
		 url("../fonts/Montserrat-Bold.eot?#iefix") format('embedded-opentype'),
         url("../fonts/Montserrat-Bold.woff2") format("woff2"),
         url("../fonts/Montserrat-Bold.woff") format("woff");
}

/* Main styles */
html {
	position: relative;
	min-height:100%;
	font-size: 62.5%;
	font-weight: 400;
	line-height: 1.15;
	scroll-behavior: smooth;
	scroll-padding-top: 100px;	
	overflow: hidden;	
}

body, table {
	min-height: 100%;
	height: 100%;
	margin: 0;
	line-height: 1.15;
}

body, header, nav, footer, table, h1, h2, h3, h4, h5, h6, p, a {
	/* IE11 Hand compat should be removed asap */
	color: #071F32;
	/* This is the right syntax using vars */
	color: var(--main-color);
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 400;
}

h1{
	font-weight: 900;
	font-size: 4.2rem;
	line-height: 1.09;
}

h2{
	font-weight: 800;
	font-size: 3.1rem
}

h3{
	font-weight: 800;
	font-size: 1.467rem;
	line-height: 2.32rem;
	color: #354BCF;
	color: 	var( --main-info-color );
}

h4{
	font-weight: 800;
	font-size: 2rem;
	line-height: 2.62rem;
}

h5{
	font-weight: 800;
	font-size: 2rem;
	line-height: 2.62rem;
}

p{
	font-size: 1.5rem;
}

ul, ol, li{
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	line-height: 20px;
	font-size: 1.5rem;
}

/* Title For Article  */
header > h2{
	padding-bottom: 2rem;
	border-bottom: 0.6rem solid rgba(195, 195, 195, 0.3);
	margin-left: -70px;
}

header > h3{
	padding-top: 2rem;
	border-top: 0.6rem solid rgba(195, 195, 195, 0.3);
}

/* Default text link */
a{
	color: #E22B3F;
	text-decoration: underline;
}

a:hover{
	color: #071F32;
}

/* Fonts */
.font-bold{
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
}

/* Colors 							 			*/
/* Main color 									*/
.main-color {
	/* This is the right syntax using vars 		*/
	color: var(--main-color) !important;
	/* IE11 Hand compat should be removed asap 	*/
	color: #071F32 !important;
	fill: #071F32 !important;
}

/* Info color 									*/
.main-info-color {
	/* IE11 Hand compat should be removed asap 	*/
	color: #354BCF !important;
	/* This is the right syntax using vars 		*/
	color: var(--main-info-color) !important;
}

/* Accessibility 								*/
.skipnav {
	text-align: left;
}

.skipnav a {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skipnav a:focus, .skipnav a:active {
	position: static;
	left: 0;
	width: auto;
	height: auto;
	overflow: visible;
	text-decoration: underline;
}
/***  Header, Banner, Footer				  ***/
.navbar a{
	text-decoration: none;;
} 

/***  Header  								 ***/
.main-header {
	background-color: var( --white-color );
	background-color: #FFF;
	-webkit-box-shadow: 0 2px 0 0 rgba(7,31,50,.1);
	box-shadow: 0 2px 0 0 rgba(7,31,50,.1);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 999;
}

.main-header .navbar{
	align-items: stretch;
	padding:  0;
	height: 100%;
	width: 100%;
	justify-content: center;
}

.main-header img{
	background-size: contain;
	height: 100%;
	height: 40px;
}

.main-header .navbar .navbar-brand{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.main-header .navbar .navbar-brand span{
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
		font-size: 1.8rem;
	padding: 0 2.5rem;
}

.main-header .navbar .navbar-brand hr{
	width: 3px;
	height: 70%;
	background-color: #071F32;
	margin-left: 2.5rem;
}

.main-header .navbar .navbar-brand img{
	margin: .9rem 0;
}

.main-header .navbar-nav,
.main-header .navbar .nav-item,
.main-header .navbar-nav .nav-link{
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 7.7rem;
	height: 77px;
}

.main-header .navbar-nav .nav-link{
	background: transparent;
	color: #071F32;
	font-size: 1.8rem;
	font-weight: 600;
	padding: 0.85rem 2.5rem;
	height: 100%;
	line-height: 1.11;
	position: relative;
	text-decoration: none;
	-webkit-transition: none;
	transition: none;
}

.main-header .navbar-nav .nav-link:hover {
	color: #071F32;
}

.main-header .navbar-nav .nav-link::before {
	background: currentColor;
	display: block;
	content: "";
	height: 0;
	left: 1rem;
	position: absolute;
	top: 0;
	right: 1rem;
	-webkit-transition: height .2s ease;
	transition: height .2s ease;
}

.main-header .navbar-light .navbar-toggler {
    border-color: #fff;
}

/* Paris Icon 								*/
.paris-icon {
	fill: #fff;
	height: 51.2px;
	height: 5.12rem;
	-webkit-transition: fill .3s ease;
	transition: fill .3s ease;
	width: 32px;
	width: 3.2rem;
}

.paris-icon-sprite{
	display: none;
} 

/*********************************************/
/** 	Components							**/
/*********************************************/
#main{
	min-height: 91vh;
	background-image: url( ../images/bg-maintenance.jpg );
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 0;
}

.maintenance{
	width: 41rem;
	height: 41rem;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.2);
	background-image: url( ../images/barrier.svg );
	background-size: 50%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	text-align: center;
}
.mh-100{
	height: 100vh;
}

/* *****************************************************	*/
/* 															*/
/* RESPONSIVE SIDE OF THE STYLES				 			*/
/* 															*/
/* *****************************************************	*/

/* Extra small devices (portrait phones, less than 576px) 	*/
@media (max-width: 575.98px) {
	.col-img, .maintenance{ display: none; }
	.mh-100{ height: auto ;}
	h4 {font-size: 1.7rem;	}
}

/* Small devices (landscape phones, 576px and 768) */
@media (min-width: 576px) and (max-width: 767.98px) {
	.mh-100{ height: auto ;}
	.maintenance{ width: 21rem; height: 21rem; }
}