/* CSS de la maquette Buzz - Projet personnel */

/****************************************** GLOBAL *************************************/
*{
    box-sizing: border-box;
}

img,iframe,video{
    max-width: 100%;
    vertical-align: middle;
}

a {
    cursor : pointer;
    text-decoration: none;
}


/****************************************** CONTENU PRINCIPAL *************************************/
body {
    margin:0px;
    padding:0px;
    font-family:'Open sans', sans-serif;
    color:#1d3634;
    font-family: 'Avenir';
}

.flex {
    display:flex;
}

.conteneur {
    width:1200px;
    margin : 0 auto;
}

.clearfix:before, .clearfix:after {
    content: " ";
    display : table;
}

.clearfix:after {
    clear:both;
}

/* POLICES utilisées */
@font-face {
    font-family: 'HVDBodedo';
    src: url(../typos/HVDBodedo\ Medium.TTF);
    font-weight: normal;
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'Bokka';
    src: url(../typos/Bokka\ Solid\ Regular.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir';
    src: url(../typos/AvenirLTStd-Book.otf);
    src: url(../typos/AvenirLTStd-BookOblique.otf);
    src: url(../typos/AvenirLTStd-Heavy.otf);
    src: url(../typos/AvenirLTStd-HeavyOblique.otf);
    src: url(../typos/AvenirLTStd-Light.otf);
    src: url(../typos/AvenirLTStd-LightOblique.otf);
    src: url(../typos/AvenirLTStd-Medium.otf);
    src: url(../typos/AvenirLTStd-MediumOblique.otf);
    src: url(../typos/AvenirLTStd-Oblique.otf);
    src: url(../typos/AvenirLTStd-Roman.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DIN';
    src: url(../typos/DINPro-Black.otf);
    src: url(../typos/DINPro-Bold.otf);
    src: url(../typos/DINPro-CondBold.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Museo';
    src: url(../typos/MuseoSans\ 300.otf);
    src: url(../typos/MuseoSans\ 500.otf);
    src: url(../typos/MuseoSans\ 700.otf);
    font-weight: normal;
    font-style: normal;
}

/* Styles des textes */
h1 {
font-family: 'Avenir';
font-size : 12px;
text-align : center;
}

h2 {
    font-family: 'Avenir';
    font-size : 12px;
    text-align : center;
    }

    h3 {
        font-family: 'Avenir';
        font-size : 11px;
        text-align : center;
        }

        p {
            font-family: 'Avenir';
            font-size : 13px;
            text-align : center;
            letter-spacing:0.5px;
            }


/* Icones Material Design */
@import "@material/icon-button/mdc-icon-button";

/****************************************** HEADER *************************************/
.banniere{
    background-color: #223639;
    margin-bottom : 30px;
}

.entete{
    margin-top : 45px;
    margin-bottom : 50px;
    width:100%;
}

/* LOGO Blago */
.logoBlago img{
    padding : 12px;
    width : 200px;
    margin:0px 20px 0px 10px;
}

/* MENU NAVIGATION */

.sommaire ul{
    display:flex;
    margin: 0 auto;
    padding:0px 0px 0px 40px;
    align-content: space-between;
}

.sommaire li {
    list-style: none;
    text-decoration: none;
}

.sommaire a {
    font-family: 'Avenir';
    text-align: center;
    text-decoration: none;
    font-size:22px;
    padding:10px;
    color:#FFF;
    font-weight: bold;
    opacity :0.5;
    letter-spacing:1px;
}

span {
    font-size:26px;
    font-weight: 500;
}

.sommaire .scale1 a:hover{
    background-color : #2fb8c5;
    border-radius: 10px;
    color:#FFF;
    opacity :1;
    text-decoration: none;
}

.sommaire h1{
   font-size : 16px;
    color:#FFF;
    text-align: left;
    margin : 0px 0px 15px 10px;
}

.sommaire h2{
    font-size : 16px;
     color:#FFF;
     text-align: left;
     margin : 0px 0px 0px 20px;
     opacity : 0.5;
     letter-spacing:1px;
 }

/****************************************** INDEX *************************************/

/* INTRO */
li{
    list-style: none;
}

a {
    text-decoration : none;
}

a:hover {
    opacity : 0.5;
}

/* Accroche */
.accroche {
    width : 350px;
    margin : 0 auto;
}

/* Section audios */
.box {
    margin: 0 auto;
    width : 400px;
    margin-bottom : 30px;
}

.boxCase {
    margin: 0 auto;
    width : 400px;
    margin-bottom : 30px;
}

.case {
    width : 100px;
    cursor: pointer;
    margin-right:5px;
}

.case1 {
    width : 100px;
    cursor: pointer;
    margin-right:5px;
    margin-left:8px;
}
  
  #controles {
    position: relative;
    opacity: 0.65;
    transition: opacity 0.3s ease-in-out;
  }
  
  #controles:hover {
    opacity: 0.85;
  }
  
  button {
    -webkit-appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    width: 110px;
    height: 60px;
    cursor: pointer;
    background-color: #fff;
    border : 10px solid grey;
    color: #000;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    background-color: #FFF;
    box-sizing: none;
    margin: 30px;
    font: 400 13.3333px Arial;
    padding: 1px 6px;
    border-width: 10px;
    border-style: outsetnone;
    border-color: buttonface;
    border-image: initial;
}
  
  button:hover {
    background-color: #fff;
    opacity : 0.5;
  }
  
  button.checked {
    background-color: #000;
    color: #fff;
    opacity : 1;
  }

.ligne {
    display: flex;
    flex-direction: row;
    margin : 0 auto;
    width : 500px;
    justify-content:space-between;
}

.batterie button {content:url(../img/batterie.png)}

.buzzer button:before {content:url(../img/hamburger.png)}

/* Ancre haut de page */
.hautdepage p, .hautdepage a {
text-decoration: none;
color : #000;
}

.hautdepage p:hover, .hautdepage a:hover {
    text-decoration: none;
    opacity : 0.5;
    }


/* Captain Bouclette */
.bouclette {
    padding:0px 0px 0px 75px;
    width : 300px;
    margin : 0 auto;
}

/****************************************** FOOTER *************************************/
/* Liens */

.liens {
    text-align: center;
    padding:0px 0px 20px 0px;
    margin-top:0px;
    width: 300px;
}

.liens a {
    font-size:12px;
    text-decoration: none;
    opacity:0.5;
}

.liens a:hover {
    opacity:1;
    text-decoration: none;
    color : #000;
}

.contact {
    width:300Px;
    margin:0 auto;
}

footer ul{
    padding-left:0px;
}

footer li{
    min-height:30px;
    list-style:none;
}

footer a{
    text-align:center;
    font-size:16px;
    padding:10px;
    color:rgb(78, 78, 78);
    font-weight: bold;
}

footer a:hover{
    opacity:0.5;
}

.pied {
    background-color: #223139;
    padding:30px;
}

/* Réseaux sociaux */
.blocreseaux {
    width:300px;
    margin : 0 auto;
}

.reseaux{
    width:300x;
    margin : 0 auto;
}

.follow{
    opacity:0.7;
    color:#ffffff;
    margin-left:50px;
    margin-right:5px;
    padding-top:10px;
    letter-spacing: 2px;
    font-weight:100;
}

.reseaux ul{
    display:flex;
    justify-content: space-between;
}

.reseaux li{
    list-style: none;
    min-height: 40px;
    width:35px;
    margin-right:0px;
}

.reseaux a{
    text-decoration: none;
    display: block;
    font-size: 18px;
    font-weight: 100;
    opacity: 0.5;
    color: #ffffff;
    background-position: top right;
    background-repeat: no-repeat;
    min-height: 40px;
}

.copyright{
padding-top:10px;
color:#FFF;
text-align:center;
opacity:0.5;
}

.copyright p, .copyright a{
    color:#FFF;
    font-size: 12px;
    }

.copyright a:hover{
        opacity:0.5;
           }

.insta {
    margin-left:10px;
}

/****************************************** CREDITS *************************************/

.credits {	
	color : rgb(0, 0, 0);
	width : 300px;
	margin : 0 auto;
	margin-top: 50px;
}

.credits h1 {
	font-size : 36px;
	font-weight:100;
}

.credits h2 {
	font-size : 22px;
	padding-bottom:20px;
}

.credits h3 {
	font-size : 18px;
}

.credits p {
	font-size : 16px;
	line-height:22px;
	font-weight:100;
}

/****************************************** COULEURS *************************************/
/* Unité 1 */

.orange {
    background-color:#eb6212;
}

.jaune {
    background-color:#ffd600;
}

.cyan {
    background-color:#2fb8c5;
}

.violet {
    background-color:#87197c;
}

.bleumarine {
    background-color:#00508c;
}

.vert {
    background-color:#76b82a;
}

.bleudico {
    background-color:#2fb8c5;
}

.bleu {
    background-color: #007fa1;
}

.rose {
    background-color: #d376a8;
}

.beige {
    background-color: #f8f8f6;
}