header, .bluecontainer {
    background-color: #2364AA;
    color: white;
}

.title {
    color: #2364AA
}

#logo {
    height: 10%;
    width: 10%;
    margin: 0 auto
}

#logonavbar {
    height: 5%;
    width: 5%;
    margin: 0 auto
}

.navbar {
    background-color: #2364AA;
}

.navbar-nav > li > a:link {
    color: white;
}

h3, h4 {
    color: #2364AA
}

#panoramacontainer {
    position: relative;
    text-align: center;
    color: white;
}

#panoramasmall {
    display: none;
}

.textoverpicture {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#panoramawide {
    max-width: 100%;
    max-height: 100%;
}

#mobileInformation {
    display : none
}

.hide{
    border : 2px solid #2364AA;
    border-radius: 10px;
    position: absolute
}

#phphide {
    display: none;
}

#phppicture:hover + #phphide {
    display: block;
}

#htmlhide {
    display: none;
}

#htmlpicture:hover + #htmlhide {
    display: block;
}

#csshide {
    display: none;
}

#csspicture:hover + #csshide {
    display: block;
}

#bootstraphide {
    display: none;
}

#bootstrappicture:hover + #bootstraphide {
    display: block;
}

#jshide {
    display: none;
}

#jspicture:hover + #jshide {
    display: block;
}

#mysqlhide {
    display: none;
}

#mysqlpicture:hover + #mysqlhide {
    display: block;
}


#bioresponsive {
    display: none;
}

#bio {
    background-image: url(pictures/photohugo2.jpeg);
    background-size: cover;
    background-position: center center;
    max-width: 100%;
    max-height: 100%;
    filter: brightness(110%);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

#bio:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

#photomobile {
    display: none;
}

#contact {
    min-width: 250px;
    max-width: 500px;
}

/*règles pour écrans de taille inférieure à une tablette*/
@media only screen and (max-width: 766px) {
    #logo {
        height: 20%;
        width: 20%;
        margin: 0 auto
    }

    #logonavbar {
        height: 15%;
        width: 15%;
        margin: 0 auto
    }

    #panoramacontainer img {
        width: 100%;
        height: auto;
    }

    #artisan {
        color: #2364AA;
    }

    #panoramasmall {
        display: block;
    }

    #panoramawide {
        display: none;
    }

    .hide {
        position: relative;
    }

    #mobileInformation {
        display : block
    }
    #bioresponsive {
        display: block;
    }

    #photoresponsive {

    }

    #bio {
        display: none
    }

    #coordonnees {
        color: white
    }
}

.carousel-indicators,
.carousel-control-next,
.carousel-control-prev {
    filter: invert(100%);
    /*background-color: #2364AA;*/
    /*color: #2364AA; */
}

.carousel-caption-text {
    background-color: #2364AA;
}