@font-face {
    font-family: 'Gotham'; 
    src: url("/media/microsite/ademe/fonts/Gotham-Medium.otf") format("opentype");
}
@font-face {
    font-family: 'GothamLight'; 
    src: url("/media/microsite/ademe/fonts/Gotham-Thin.otf") format("opentype");
}

* {
    font-family: GothamLight;
    font-weight: 700;
}

header {
    margin: 20px 20px 20px 20px;
}

footer ul {
    list-style: none;
    background-color: rgb(255,116,0);
    padding: 5px;
    margin: 0;
}

footer li {
    margin-right: 15px;
    display: inline-block;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    color: black;
}

h4 {
    font-family: Gotham;
    font-weight: 400;
    font-size: 1.2em;
}

h5 {
    color: rgb(255 116 0);
    font-family: 'Gotham';
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

body {
    margin: 0;
}

.textLeft {
    text-align: left;
}

#logoContainer > img {
    height: 75px;
}
#visual {
    height: calc(100vh - 100px);
    background-image: url('/media/microsite/ademe/auto/images/bg_img.jpg');
    background-size: cover;
    background-position-y: center;
}

.buttonContainer {
    display: inline-block;
    float: right;
}

#visualWhiteVeil {
    background-color: rgba(255,255,255,0.5);
    width: 100%;
    height: calc(100vh - 100px);
    position: absolute;
}

#visualContent {
    width: 100%;
    position: absolute;
    text-align: center;
    padding-top: 160px;
}

#visualContent > div {
    width: 100%;
}

#logoContainer {
    display: inline-block;
}

.buttonContainer .button {
    display: inline-block;
    color: white;
    background-color: rgb(255,116,0);
    text-transform: uppercase;
    padding: 5px 30px 5px 30px;
    transition-duration: 0.4s;
}

.buttonContainer .button:hover {
    color: rgb(255,116,0);
    background-color: white;
    cursor: pointer;
    transition-duration: 0.4s;
}

.container{
    padding: 25px;
}

.col {
    margin-bottom: 20px;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, 
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: rgb(0,191,191);
    text-align: center;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    outline: none;
    transition: 0.4s;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .accordion:hover {
    background-color: rgb(42, 131, 131);
  }
  
  /* Style the accordion panel. Note: hidden by default */
  .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease-out;
  }