#banner {
    background-color: #3F51B5;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#container {
    min-height: 100%;
    position: relative
}
#banner,
#footer {
    position: absolute
}
h1, .h2_cycles, .titre-audio {
    color: #FFF;
	padding:5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    text-align: center;
	background-color: #3F51B5;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	width: auto;
}
body,
html {
    background-color: #eeeeee;
    margin: 0;
    padding: 0;
    height: 100%
}
.circle,
.menuText,
.site_title {
    text-decoration: none;
    color: #000;
    line-height: 30px;
	padding: 5px;
    margin-left: 12px;
}
.site_title {
    color: #FFF;
}

.footer_text {
    color: #000;
    font-family: 'Montserrat', sans-serif, Arial;
    font-size: 12px;
    padding: 5px;
    text-align: justify
}
#banner,
#banner-content,
.circle,
.menuText {
    text-align: left;
}
#footer, .content{
	text-align: center;
}
.site_title{
	font-family: 'Montserrat', sans-serif;
    font-size: 20px;
	margin-left: 150px;
}
.menuText {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px
}
.circle,
.redac {
    font-size: 14px
}
#border_menu {
    display: inline-block;
    padding: 10px 0
}
.content {
    margin-left: auto;
    margin-right: auto;
    width: 700px
}
#content {
    padding-bottom: 180px;
}
#main_content{
	background-color: #FFF;
	padding: 20px 0 20px 0;
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#sec_content{
	background-color: #FFF;
	padding: 20px 0 20px 0;
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.main_content_audio{
	background-color: #FFF;
	padding: 20px 0 20px 0;
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	max-width:100%;
}
#footer_text {
    margin: 0 auto;
    width: 100%;
	float: left;
}
#banner {
    top: 0;
    left: 0;
    width: 100%
}
#banner-content {
    width: 800px;
    padding: 5px 10px
}
#banner-content img {
    vertical-align: middle
}
#footer {
    width: 100%;
    padding: 5px 0;
    bottom: 0;
	background-color: #FFF;
}
#stache {
	text-align: center;
	position: absolute;
    width: 100%;
    bottom: 0;
	background-color: transparent;
	margin-bottom: 60px;
}
#footer a {
    margin: 0 10px 0 10px;
}
#give_advice,
#give_advice_alarm,
#news,
#alarmclock,
.redac {
    margin: 0 auto
}
.redac {
    color: #000;
    font-family: 'Montserrat', Arial, sans-serif;
    text-align: justify
}
#link_name,
#alarmclock,
#news {
    color: #fff;
    width: 201px;
    text-align: center;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px
}
#news,
#alarmclock {
    background-color: #3F51B5;
    padding: 5px 10px 5px 10px;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#link_name a {
    text-decoration: none;
    color: #000
}
#link_name {
    padding-left: 5px
}
.some_elements_moveable {
    background: linear-gradient(to right, transparent 34%, #5e74b7 65%);
    background-size: 300% 100%;
    background-position: left bottom;
    transition: all 1.2s ease;
    border-radius: 10px
}
#give_advice,
#give_advice_alarm {
    color: #000;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    width: 200px;
    text-align: justify
}
.right_panel {
    background-color: #fff;
    width: 220px;
    margin-left: 10px;
    margin-bottom: 10px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
}
.main_content,
.redac {
    width: 92%;
}

.responsive_ad,
nav,
nav>input,
nav>label {
    display: none
}
.non_responsive_ad {
    display: block
}

#white_banner{
	background-color:#FFF;position:absolute;width:100%;height:77px;box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.content-audios {
	text-align:center;
	width:100%;
	height:auto;
	border:0px blue solid;
}
.image-audio {
	max-width: 90%;
	height: auto;
	width: auto;
	margin-top:4px;
	border-radius: 4px 4px 0 0;
}
.text-all-audios {
	max-width:99%:
	height:35px;
	margin-top:13px;
	font-family: 'Montserrat', sans-serif;
	font-size:14px;
	color: #428bca;
}
.text-audio {
	width:180px;
	height:35px;
	font-size:14px;
	text-align:center;
	margin-top:7px;
	font-family: 'Montserrat', sans-serif;
	color: #555;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration:none;
}

.link-audio {
	text-decoration:none;
}
.audios {
	margin-top:7px;
	display: inline-block;
	width:32%;
	height:auto;
	border:0px solid green;
}
.audio-mobile {
	display:none;
}
@media (max-width: 1072px) {
    .content,
    .responsive_ad,
    nav>label {
        text-align: center
    }
    nav>label,
    nav>label:before {
        z-index: 1;
        border: 0;
        -webkit-tap-highlight-color: transparent
    }
    h1, .h2_cycles, .titre-audio {
        margin-top: 40px;
    }
    .content,
    .main_content,
    .redac {
        width: 100%;
    }
	
	#outer_resultat {
		width:  97vw;
	}
	
    .right_panel {
        display: none
    }
    .non_responsive_ad {
        display: none
    }
    .responsive_ad {
        width: 99%;
        height: 20%;
        margin-bottom: 10px;
        margin-top: 105px;
        display: block
    }
    .footer_text,
    #header {
        display: none
    }
	#banner{
		height: 40px;
	}
	#white_banner{
		height: 80px;
	}
	#banner-content {
		width: 100%;
		padding: 0;
	}
    nav,
    nav a,
    nav>label {
        display: block
    }
    #footer {
        position: relative
    }
    #footer a {
        margin: 0;
    }
    #content {
        padding-top: 0;
        padding-bottom: 0
    }
    .content {
        margin-left: auto;
        margin-right: auto
    }
    nav ul {
        transform: translateZ(0);
        -webkit-transition: max-height .4s, overflow .4s;
        transition: max-height .4s, overflow .4s;
        will-change: max-height, overflow;
        margin: 0;
        padding: 0;
        list-style: none
    }
    nav a {
        padding: 1.2rem;
        color: #FFF;
		font-family: 'Montserrat';
        background: #3F51B5;
        text-decoration: none;
		border-top: white 1px solid;
		border-bottom: white 1px solid;
        
    }
    nav a:active,
    nav a:focus,
    nav a:hover {
        background: #3F51B5
    }
    nav>input:not(:checked)~ul {
        max-height: 0;
        overflow: hidden
    }
    nav>input:checked~ul {
        max-height: 20em;
        overflow: visible
    }
    nav>label {
        position: absolute;
        right: 1rem;
        background: 0 0;
        font-size: 10px;
        line-height: 1.6;
        color: #FFF;
        -webkit-transition: .2s -webkit-transform cubic-bezier(0, 1.8, 1, 1.2);
        transition: .2s transform cubic-bezier(0, 1.8, 1, 1.2)
    }
    nav>label:before {
        content: "";
        display: block;
        height: 1.6rem;
        width: 2rem;
        background-color: transparent;
        background-image: -webkit-gradient(linear, left top, right top, from(#FFF), to(#FFF)), -webkit-gradient(linear, left top, right top, from(#FFF), to(#FFF)), -webkit-gradient(linear, left top, right top, from(#FFF), to(#FFF));
        background-image: -webkit-linear-gradient(left, #FFF, #FFF), -webkit-linear-gradient(left, #FFF, #FFF), -webkit-linear-gradient(left, #FFF, #FFF);
        background-image: linear-gradient(to right, #FFF, #FFF), linear-gradient(to right, #FFF, #FFF), linear-gradient(to right, #FFF, #FFF);
        background-position: center top, center, center bottom;
        background-repeat: no-repeat;
        -webkit-background-size: 2rem .3rem;
        background-size: 2rem .3rem;
        margin: .8em auto 0;
        padding: 0;
        outline: 0;
        cursor: pointer;
        -webkit-transition: .2s cubic-bezier(0, 1.8, 1, 1.2);
        transition: .2s cubic-bezier(0, 1.8, 1, 1.2);
        transition-property: background
    }
    nav>input:checked+label {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
    nav>input:checked+label::before {
        background-position: center, center, center
    }
    .visually-hidden {
        position: absolute!important;
        clip: rect(1px, 1px, 1px, 1px);
        overflow: hidden;
        height: 1px;
        width: 1px
    }
	#stache {
	 display: none
	}
	.content-audios {
		width:650px;
	}
	.audios {
		width:30%;
	}
	.audio-mobile {
	display:block;
	height: 80px;
	width:100%;
	background-color:white;
	margin-bottom : 15px;
	text-align:center;
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	.audio-mobile-titre {
	font-family: 'Montserrat', sans-serif;
	color:#3F51B5;
	font-size:18px;
	margin-bottom: -3px;
	}
	.audio-mobile-texte {
	color: #555;
	font-family: 'Montserrat', sans-serif;
	font-size:14px;
	}

}
@media (max-width: 750px) {
	.audios {
		width:45%;
	}
}
@media (max-width: 700px) {
	.content-audios {
		width:100%;
	}
}
@media (max-width: 322px) {
    #footer a {
        margin: 0
    }
}
@media (max-width: 430px) {
	.site_title{
		display: none;
	}
	
	.audios {
		width:90%;
	}
}