/* ================================================================== Start Body ================================================================= */
body
{ 
	padding-bottom: 500px;
	color: white;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	line-height: 1.75;
}

#container_wrapper
{
	/*min-height:200vh;*/
	/*position: relative;*/
	background-color: #19191b;
	z-index: 1;
	
	/* Start "Background_image" */
	/*
	background: url('../../Images/background_img.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	*/
	/* End "Background_image" */
}

/* ====================================================== Start Container ======================================================== */
#container
{
	
}

/* ========================================= Start header ======================================= */
.navbar
{
	background-color: black;
	opacity: ;
	z-index: 500; /* I added this after I added the "preloader": because when I'm not at the page's top and I refresh the page, the "navbar" still appears while the "preloader" is loading */
}
.navbar .navbar-header .navbar-brand
{
	color: white;
	
	/* Start "center the content verticaly and horizontaly" */
	display: flex;
	align-items: center; /*  centers the content verticaly */
	/*justify-content: center;*/ /* centers the content horizontaly */
	/* End "center the content verticaly and horizontaly" */	
}
.navbar .navbar-header .navbar-brand img
{
	width: 80px;
}

.navbar .collapse 
{
	position:absolute; 
	right:50px;
}
.navbar .collapse ul li a
{
	color: white;
}



/* I got this from "bootstrap/dist/css/bootstrap.min.css" and changed it */
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #9d9d9d;
  background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #9d9d9d;
  background-color: transparent;
}	


/* start "languages_buttons" */
#languages_buttons .dropdown a span
{
	color: grey;
	padding-left: 10px;
	padding-right: 10px;
}
#languages_buttons .dropdown a span:hover 
{
	color: white;
}
#languages_buttons .dropdown a span b img
{
	height: 10px;
	width: 18px;
}
#languages_buttons .dropdown ul
{
	background-color: black; 
	color: white; 
}
#languages_buttons .dropdown ul li b
{
	/* Start "center the content verticaly and horizontaly" */
	display: flex;
	align-items: center; 
	justify-content: center; 
	/* Start "center the content verticaly and horizontaly" */
}
#languages_buttons .dropdown ul li b a
{
	text-decoration: none;
	color: grey;
	display: block;       /* To be able to give <a> a height */
	height: 40px;
	/* Start "center the content verticaly and horizontaly" */
	display: flex;
	align-items: center; 
	justify-content: center; 
	/* Start "center the content verticaly and horizontaly" */
	/* ********** */
}
#languages_buttons .dropdown ul li b a:hover
{
	color: white;	
}
#languages_buttons .dropdown ul li b a img
{
	height: 10px;
	width: 18px;
	margin-right: 5px;
}
/* End "languages_buttons" */
/* ========================================= End header ======================================= */



/* =================================================== Start Div_Keywords ============================================ */
#div_keywords
{
	opacity: 1;
	overflow: auto;
	height: 0;
}
/* =================================================== End Div_Keywords ============================================ */	



/* ========================================= Start hero_div ======================================= */
#hero_div
{

}
#hero_div #hero_div_pc_desktop	
{	
	height: 100vh;
	width: 100%;
	background-color: red;
	padding-left: 15vh;	
	padding-right: 15vh;	
				
	/* Start "Background_image" */	
	background: url('../../Images/hero_image_pc_desktop.webp') no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	o-background-size: cover;				
	/* End "Background_image" */				
}	
#hero_div #hero_div_pc_desktop #tws_div_pc_desktop 
{
	font-weight: bold; 
	font-size: 250%;
	padding-top: 35vh;	
	line-height: 120%;
}
#hero_div #hero_div_pc_desktop #slogan_div_pc_desktop 
{
	font-weight: bold;
	font-size: 120%;	
	color: gray;
}	
#hero_div #hero_div_pc_desktop a #contact_button_pc_desktop
{
	margin-right: 20px;
	color: black;
}
#hero_div #hero_div_pc_desktop a #services_button_pc_desktop
{
	background-color: transparent;
	color: gray;
}
/* ========================================= End hero_div ======================================= */
	




/* =================================================== Start Content ============================================ */
/* =================================================== End Content ============================================ */






/* ====================================================== End Container ======================================================== */


/* ========================================== Start extention for "inclined line" ============================================== */
#extention
{
	height: 500px; 
	background-color: #19191b; 
	color: ; 
	transform: skew(0deg, -5deg); /*Pour pencher */
	margin-top: -200px;
	padding: 20px;
}
#extention a h4
{
	transform: skew(0deg, 5deg); /*Pour rendre droit */
	margin-bottom: 25px;
}
#extention h5
{
	transform: skew(0deg, 5deg); /*Pour rendre droit */
	padding-left: 10%;
	padding-right: 10%;
	font-size: 17%;
	color: #6c757d; 
	font-style: italic;
	font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; 
	line-height: 1.75;
}
#extention a span
{
	transform: skew(0deg, 5deg); /*Pour rendre droit */
}

/* ********************** Start lightbox ******************************** */
#lightbox_newsletter .modal-body
{
	height: 300px;
	padding: ;
	/* Start "center the content verticaly and horizontaly" */
	display: flex;
	align-items: center; /*  centers the content verticaly */
	justify-content: center; /* centers the content horizontaly */
	/* End "center the content verticaly and horizontaly" */	
}
#lightbox_newsletter .modal-body form #newsletter_email
{
	height: 70px;
	font-weight: bold;
}


#lightbox_newsletter .modal-body form #newsletter_submit_button
{
	height: 70px;
	width: 100%;
	font-weight: bold;
	background-color: grey;
	color: white;
}
/* ********************** End lightbox ******************************** */

#alert_newsletter
{
	transform: skew(0deg, 5deg); /*Pour rendre droit */
	margin-top: -200px;
}
/* ========================================== End extention for "inclined line" ================================================ */


/* ========================================================== Start Footer ===================================================== */

/* ***************** Start "old footer" (The links don't work because of z-index)****************** */
/*
footer
{	
	position: fixed;
	bottom:0;
	left:0;
	width: 100%;
	height: 700px; 
	z-index: -1;
	background: linear-gradient(to bottom, transparent, black);
	background-color: #000080; 
	color:#fff;
	padding-top: 250px; 
}

footer div a
{
	color: white; 
}
footer div span
{
	font-size: 100px;
}
footer #footer_div1
{
	padding-bottom: 90px;
}
footer #footer_div1_div1
{
	background-color: ; 
	height:200px;
	padding-top: 60px;
}
footer #footer_div1_div2
{
	background-color: ; 
	height:200px;
	padding-top: 60px;
}
footer #footer_div1_div3
{
	background-color: ;
	height:200px;
	padding-top: 60px;
}
#copyright
{
	text-align: center; 
	padding: 5px;
	color: #778899;
}
#WebSolution
{
	text-align: center;
	padding: 5px;
	color: #778899;
}
#WebSolution #a1
{
	color: red;		
}
#WebSolution #a2
{
	color: #778899;
}
*/
/* ***************** End "old footer" (The links don't work because of z-index)****************** */


/* ***************** Start "new footer" ****************** */
footer
{	
	position: fixed;
	bottom:0;
	left:0;
	width: 100%;
	height: 720px; 
	z-index: -1;
	background-color: white; 
	color: black;
	padding-top: 250px; 
}
footer #footer_div1 
{
	padding-top: 100px;
	padding-bottom: 100px;
}
footer #footer_div1 h2
{
	
}

#copyright
{
	text-align: center; 
	padding: 5px;
	color: ;
}
#WebSolution
{
	text-align: center;
	padding: 5px;
	color: ;
}
#WebSolution #a1
{
	color: #6c757d;		
}
#WebSolution #a2
{
	color: #6c757d;
}

#Logo
{
	text-align: center;
	margin-top: -10px;
}
/* ***************** End "new footer" ****************** */

/* ========================================================== End Footer ======================================================= */


/* ================================================================== End Body ================================================================= */