/* Imports */
@import 'https://fonts.googleapis.com/css?family=Montserrat:400,700';
@import 'https://fonts.googleapis.com/css?family=Roboto:400,400i';

/* Media Queries*/
@media all (max-width: 600px) {

}

/* --------------------------------------------------------------------------- */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;

}

body h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
}
body a {
    text-decoration: none;
    color: inherit;
}


    /* ---------------------  Container------------------------ */
    #container {
      width: 100%;
    }
        #navScroll {
            position: absolute;
            color; #fff;
            position: fixed;
            right: 1%;
            top: 45%;
            z-index: 1;
            background: #8E0E00;
            border-radius: 5px;
          }
            #navScroll ul {
            list-style-type: none;
            padding-right: 20px;
            padding-left: 20px;
        }
            #navScroll li {
                margin-bottom: 2%;
                text-align: left;
              }
                #navScroll a {
                text-decoration: none;
                color: #fff;
                font-family: 'Montserrat', sans-serif;
                text-transform: uppercase;
            }
        /* ----------------------- Header -----------------------*/
        header {
            background: #8E0E00;
            background: -webkit-linear-gradient(to left, #8E0E00 , #1F1C18);
            background: linear-gradient(to left, #8E0E00 , #1F1C18);
            color: rgb(255,255,255);
            width: 100%;
            height: 280px;
            display: flex;
            justify-content:  space-around;
            /*position: absolute;*/
            /*z-index: 999*/
        }
            /* ---------------Titre + Logo --------------------- */
            #titre {
                padding: 2%;
                width: 50%;
                /*display: flex;
                justify-content:center;
                align-items: center;*/
            }
                #logoDiv {
                }
                    #logo {
                        height: 100%;
                        float: left;
                    }
                #titre h1 {
                    display: inline-block;
                    height: 100%;
                    padding: 8% 2%;
                    box-sizing: border-box;
                    margin: 0 auto;
                    text-align: center;
                    letter-spacing: 6px;
                }

            /* ----------------------- Navigation --------------------- */
            #navigation {
                width: 50%;
                display: flex;
                align-items: center;
            }
                #navigation ul {
                    list-style-type: none;
                    overflow: hidden;
                }
                    #navigation li {
                        display: inline-block;
                        margin: 5px 30px;
                        letter-spacing: 6px;
                    }
                        #navigation a {
                            text-decoration: none;
                            color: inherit;
                        }
                            #navigation li.dropdown {
                                 display: inline-block;
                            }
                            .dropdown:hover .dropdown-content  {
                                display: block;
                                color: #8E0E00;
                            }
                            .dropbtn {
                                display: inline-block;
                                text-align: center;
                                padding: 14px 16px;
                                text-decoration: none;
                            }
                                .dropdown-content {
                                    display: none;
                                    position: absolute;
                                    background-color: #f9f9f9;
                                    min-width: 160px;
                                    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                                }
                                    .dropdown-content a {
                                        color: black;
                                        padding: 12px 16px;
                                        text-decoration: none;
                                        display: block;
                                        text-align: left;
                                    }
                                        .dropdown-content a:hover {
                                            background-color: #f1f1f1;
                                        }


        /*---------------------- Wrap - Partie principale du site --------------------*/

        #wrap h1, h2 {
            color: #8E0E00 ;
            padding-bottom: 10%;
        }
        #wrap {
          width: 100%;
        }
        #wrap a {
            text-decoration: none;
            color: #16a085;
            font-weight: bold;
        }
            /* --------- Div Video ------------ */
            #video img {
                width: 30%;
                font-size: 3em;
                color: #fff;
                position: absolute;
                animation: heartBeat 10s infinite;
                top: 50%;
                left: 36%;
            }
                /* ------ Animation  heartBeat -------- */
                @keyframes heartBeat {
                    0% {
                    transform: scale(none);
                    -webkit-transform: scale(none);
                    }
                    20% {
                    transform: scale(1.2);
                    -webkit-transform: scale(1.2);
                    }
                    30% {
                    transform: scale(1.05);
                    -webkit-transform: scale(1.05);
                    }
                    45% {
                    transform: scale(1.25);
                    -webkit-transform: scale(1.25);
                    }
                    50% {
                    transform: scale(1.05);
                    -webkit-transform: scale(1.05);
                    }
                    75% {
                        transform: scale(1.2);
                        -webkit-transform: scale(1.2);
                    }
                    100% {
                    transform: scale(none);
                    -webkit-transform: scale(none);
                    }
                }

                /*FIXME Positionnement à revoir */
                #videoText {
                    font-size: 3em;
                    color: #fff;
                    position: absolute;
                    animation: heartBeat 10s infinite  ;
                    top: 50%;
                    left: 50%;
                }
            /* Intro */
            #intro {
                margin: 10% 2%;
                text-align: center;
                padding: 0 15% 5%;
                box-shadow: -15px 15px 35px rgba(50,50,93,.4), 15px 5px 15px rgba(0,0,0,.07);
                border-radius: 5px;
                background: #F3F3F6;
                height: 600px;
            }
                #intro h1 {
                    text-transform: uppercase;
                    padding-top: 7%;
                    margin-bottom: 5%;
                }
            /* --------------------- Section ---------------------*/
            section {
              display: flex;
            }
                /*---------------- H2 de toute la Section ------------------ */
                section h2 {
                    text-transform: uppercase;
                    text-align: center;
                }
                /* Dimensions et Styles communs de la Div Left et de la Div Right   */
                .side {
                }
                    /* Dimensions et Styles communs à chaque Slide, de droite ou de gauche */
                    .slide {
                        width: 100%;
                        height: 900px;
                        margin: 4% 0;
                    }
                    /* --------------  Effet Carte sur les Visuels --------------- */
                    .card {
                      box-shadow: -15px 15px 35px rgba(50,50,93,.4), 15px 5px 15px rgba(0,0,0,.07);
                      border-radius: 15px;
                      background: #F3F3F6;
                    }
                /* Partie Gauche */
                #left {
                  width: 50%;
                }
                /* Partie Droite */
                #right {
                    width: 50%;
                }
                /*  Slides Textuelles  */
                .texte {
                    padding: 2% 4%;
                }
                #attribut h3 {
                  margin-bottom: 2%;
                }
                    .texte ul p {
                        font-size: 1em;
                        margin: 0;
                    }
                .visual {
                        transition:background-color 0.5s ease;
                        margin: 0 auto;
                        margin-top: 20px !important;
                        width: 70%;
                        height: 70%;
                        border-radius: 10px;
                        border-bottom-left-radius: 0px !important;
                        border-bottom-right-radius: 0px !important;
                    }

                    /* Lecteur mp3 */
                    #mp3 {
                        border: 1px solid black;
                        width: 60%;
                        height: 80%;
                        background: #FCE9BF;
                        border-radius: 6px 6px 0 0;
                        margin: auto;
                        -webkit-box-shadow: 2px -2px 0px 2px rgba(0,0,0,0.75);
                        -moz-box-shadow: 2px -2px 0px 2px rgba(0,0,0,0.75);
                        box-shadow: 2px -2px 0px 2px rgba(0,0,0,0.75);
                        }
                        #ecranmp3 {
                        border: 1px solid black;
                        width: 88%;
                        height: 70%;
                        margin: 4% auto;
                        background: white;
                        overflow: scroll;
                        }
                        #volume {
                        background: black;
                        width: 10%;
                        height: 8%;
                        border-radius: 4px;
                        position: relative;
                        top: 5%;
                        left:10%;
                        }
                        #touch {
                        background: black;
                        width: 20%;
                        height: 15%;
                        border-radius: 4px;
                        position: relative;
                        top: -5%;
                        left:40%;

                        }
                        #lecture {
                        background: black;
                        width: 10%;
                        height: 8%;
                        border-radius: 4px;
                        position: relative;
                        top: -18%;
                        left: 80%;
                        }
                    /* Fin lecteur mp3 */
                    /*     Lecteur audio dans Partie Audio   */
                    #audio {
                        width: 350px;
                        margin: auto;
                        padding-top: 23%;
                        padding-left: 26%;
                    }

                #attribut_Illust .texte {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                }
                #formats_img {
                  width: 60%;
                  padding-top: 15%;
                }
                .content_table {
                    padding-top: 10%;
                    width: 100%;
                }
                #frameworks h3 {
                  margin-left: 5%;
                }

                #Contenu{
                  /*text-align: center;*/
                  margin: auto;
                }
                    #Bandeau{
                        width : 100%;
                        height : auto;
                        border-radius: 20px;
                        background-color: black;
                        border: 15px solid;
                        margin: auto;
                        overflow: hidden;
                    }

                #historyVideo {
                  margin: 0 auto;
                  padding-top: 25%;
                }
                #historyVideo video {
                    width:100%;
                    height:100%;
                    margin:auto;
                    position: relative;
                    top: 0;
                }
                .phone {
                  padding: 0;
                  margin: 0;
                }
                /* iPhone  */
                #phone {
                  border: 1px solid grey;
                  background: #F3DBC3;
                  width: 550px;
                  height:250px;
                  border-radius: 15px;
                  margin: auto;
                  -webkit-box-shadow: 2px -2px 0px 2px rgba(0,0,0,0.75);
                  -moz-box-shadow: 2px -2px 0px 2px rgba(0,0,0,0.75);
                  box-shadow: 2px -2px 0px 2px rgba(0,0,0,0.75);
                  /*position: relative;
                  top: 13%;
                  left: 20%;*/
                }
                #screen {
                  border: 1px solid black;
                  background: grey;
                  position: relative;
                  width: 70%;
                  height:90%;
                  top: 4.5%;
                  left: 15%;
                }
                    #audios {
                        border: 1px solid black;
                        width: 1%;
                        height: 20%;
                        background: black;
                        position: absolute;
                        left: -13%;
                        top: 40%;
                    }
                    #home {
                        border: 1px solid black;
                        width: 12%;
                        height: 20%;
                        background: black;
                        position: absolute;
                        right: -17%;
                        top: 40%;
                        border-radius: 50%;
                    }

                #videoHistory2 .texte {
                  padding: 0;
                }
                #playerVero {
                  margin-left: 30%;
                  margin-top: 10%;
                }
                #earth {
                  width: 300px;
                  margin-left: 20%;
                }
                #audioHistory1 .texte {
                  height: 100%;
                  padding-top: 10%;
                  padding-left: 10%;
                }
        /*  Tableau des formats */
          table {
                border-collapse: collapse;
                margin: auto;
          }
                caption {
                    text-transform: uppercase;
                    font-weight: bold;
                    color:
                }
                [scope=col] {
                    background: grey;
                }
        /*  Frameworks */
        #frameScreen {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
            #audiojsScreen {
                width: 100%;
                height: 25%;
                background: url('../img/audioJS.JPG') no-repeat fixed;
                background-size: cover;
            }
            #videojsScreen {
                width: 100%;
                height: 25%;
                background: url('../img/videoJS.JPG') no-repeat fixed;
                background-size: cover;
            }
            #popcornjsScreen {
                width: 100%;
                height: 25%;
                background: url('../img/popcornJS.JPG') no-repeat fixed;
                background-size: cover;
            }
            #projekktorScreen {
                width: 100%;
                height: 25%;
                background: url('../img/projekktorJS.JPG') no-repeat fixed;
                background-size: cover;
            }
            /*#mediajsScreen {
                width: 100%;
            }*/
            /* Conclusion */
            #crea {
                font-family: 'Montserrat', sans-serif;
                color: #8E0E00 ;
                text-transform: uppercase;
                text-align: center;
                letter-spacing: 6px;
                margin-top: 9%;
                margin-bottom: 7%
            }
            #conclusion {
              margin: 5% 0;
              display: flex;
              justify-content: center;
            }

            #up {
                width: 50px;
                height: 50px;
                position: relative;
                bottom: -300px;
                left: 0;
            }
            /* Détails du travail éffectué lorsque l'on zappe */
            #description {
                width: 16%;
                height: 70px;
            }
            .descriptionStyle {
              font-family: 'Montserrat', sans-serif;
                box-shadow: -15px 15px 35px rgba(50,50,93,.4), 15px 5px 15px rgba(0,0,0,.07);
                border-radius: 15px;
                background: #F3F3F6;
                text-align: center;
                padding: 3% 0;
            }
            #contenu{
                width: 50%
            }
            #bandeau{
                width : 75%;
                height : 50vh;
                border-radius: 20px;
                background-color: black;
                border: 15px solid;
                margin: auto;
                overflow: hidden;
            }
            /* FIXME gérer le responsive et du coup la hauteur de la vidéo */
            #contenu-ecran {
                position: relative;
                padding-bottom: 56.25%;
                padding-top: 30px; height: 0; overflow: hidden;
            }
            #bas-ecran{
                margin-top: 2px;
                margin: auto;
                border: 10px solid;
                width: 80%;
                border-radius: 0 0 40% 40%;
            }
            /* TV commande */
            #zapping {
              padding-top: 10%;
              width: 15%;
              height: 15%;
              display: flex;
              flex-direction: column;
              align-items: center;
            }
            /*--css de l'iframe--*/
            .iframePosition {
              position: absolute;
              top:6%;
              left: 0;
              width: 100%;
              height: 100%;
              overflow: hidden;
            }

            #chaines {
              display: flex;
              justify-content: space-between;
            }
            .boutons {
              width: 50px;
              height: 50px;

            }
            #switch {
              width: 15%;
              height: 15%;
            }
              #onOff {
                position: relative;
                width: 55px;
                height: 40px;
                border-radius: 50%;
                margin: auto;
              }

        /* Footer */
        footer {
            background: #8E0E00;
            background: -webkit-linear-gradient(to left, #8E0E00 , #1F1C18);
            background: linear-gradient(to left, #8E0E00 , #1F1C18);
            color: rgb(255,255,255);
            width: 100%;
            height: 150px;
        }
            #copyright {
                text-align: center;
                position: relative;
                top: 75px;
                letter-spacing: 5px;
            }
            #design {
                text-align: center;
            }