html, body{
	margin:0;
	padding:0;
    font-family: CenturyGoth;
    font-size: 18px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

@font-face {
    font-family:"Forte";
    src: url(../fonts/FORTE.TTF);
}

@font-face {
    font-family:"CenturyGoth";
    src: url(../fonts/GOTHIC.TTF);
}

@font-face {
    font-family:"Bahn";
    src: url(../fonts/bahnschrift.ttf);
}

/*barre de navigation*/

header{
    background-image: radial-gradient(magenta, blue);
    background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	padding: 2.5%;
	text-align: center;
	font-size: 18px;
}

.navbar{
	font-family: "Bahn";
	font-size: 25px;
    border: 0px;
}

.infog{
    background-color: #F8D129;
}

.audio{
    background-color: #4B9CEC;
}

.box{
	width: 300px;
	height: 300px;
	text-align: center;
	line-height: 378px;
	margin: 0.5%;
    opacity: 0%;
}

.imgbox{
    display: block;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: 0.3s;
    font-weight: bold;
    font-size: 23px;
}

/*Couleur de la barre*/
.infog2{
    background-color: #FFD119;
}

.audio2{
    background-color: #438CD4;
}

#avatar{
	border: 2px solid black;
	box-shadow:4px 4px 4px black;
	border-radius: 50%;
	width: 10%;
	height: 10%;
}

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

a:hover{
    color: white;
}

.infog li:hover{
	background-color: #F9B51F;
    transition: 0.3s;
}

.audio li:hover{
    background-color: #3C7CBC;
    transition: 0.3s;
}

.box:hover .overlay {
    opacity: 0.95;
}

/*pages contenant les travaux*/

h1{
    font-weight: bold;
    font-family: Forte;
    font-size: 50px;
}

.work{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 92%;
    width: 90%;
}

.txtwork{
    position: relative;
    text-align: right;
    right: 0px;
}

#hoverinpage:hover{
	color: blue;
}
#retour:hover{
    color: darkblue;
}

/*slider*/

.slider{ 
    position: relative;
    background-color: aliceblue;
    width: 600px;
    height: 600px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); 
}

.img{ 
    position: absolute;
    display: none; 
}

.img.curry{ 
    display: block; 
}

.boutonslide{
    position: relative;    
}

.prev{
    margin-top: -350px;
    margin-left:-100px;
}

.next{
    margin-left: 600px;
    margin-top: -100px;
}

/*les onglets d'infographie et audiovisuel s'adaptent aux petits écrans*/
@media screen and (max-width: 380px){
    .box{
        width: 350px;
    }
}

@media screen and (max-width: 500px){
    .work{
        margin-top: 120vh;
    }
    
    .txtwork{
        padding-top: 60vh;
        text-align: center;
    }
}

/*Large*/
@media screen and (min-width: 500px) and (max-width: 1200px){
    .work{
        margin-top: 80vh;
    }
    
    .txtwork{
        padding-top: 80vh;
        text-align: center;
    }
    
    .slider{
        margin-left: 13vw;
    }
    
    .boutonslide{
        margin-left: 13vw;
    }
}

/*Très large*/
@media screen and (min-width: 1200px) and (max-width: 1500px){
    .work{
        margin-top: 40vh;
    }
    
    .txtwork{
        padding-left: 15%;
        text-align: center;
    }
}

/*Organisation des projets sur les pages work*/
@media screen and (min-width: 992px) and (max-width: 1199px){
    .projets{
        margin-right: 0vh;
    }
}

@media screen and (min-width: 900px) and (max-width: 991px){
    .projets{
        margin-right: -7vh;
    }
}

@media screen and (min-width: 768px) and (max-width: 899px){
    .projets{
        margin-right: -20vh;
    }
}

@media screen and (min-width: 540px) and (max-width: 767px){
    .projets{
        padding-left: 20%;
    }
}

/*empêcher la rotation*/
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}