/************************/
/*	PARAMETRES GENERAUX */
/************************/
/* top right bottom left */

html, body{
font-family: Calibri, Helvetica, sans-serif; 
font-size: 16px;
text-align: left;
background: rgba(0, 0, 0, 0.6) url('/Images/background.jpg') no-repeat;
background-size: cover;
background-blend-mode: darken;
background-attachment: fixed;
padding: 0;
}

html{
height: auto;
}

body{
min-height: 100vh;
margin: 0;
}

#main_container{
width: 100%;
margin: 0 auto; padding: 0;
display: center;
align-content: center;
box-sizing: border-box;
}

#header{
width: 600px;
margin: auto;
text-align: center;
}
    
#header img{
width: 65%;
height: auto;
}

#search{
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
margin-bottom: 45px;
}

#search img{
width: 150px;
margin-right: 10px;
vertical-align: middle;
}

#search .font{
position: relative;
display: inline-block;
}

#search .font i{
position: absolute;
top: 44px; left: 15px;
color: rgb(150, 150, 150);
}

#search input.text{
width: 350px;
height: 40px;
border: 1px solid rgb(95, 95, 95);
border-radius: 50px;
background-color: rgba(39, 39, 39, 1);
margin-right: 10px;
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
padding-left: 40px;
vertical-align: middle;
z-index: 5;
}

#search input.text:hover, #search input.text:focus, #search input.text:active{
outline: none;
background-color:rgb(65, 65, 65);
border:1px solid rgb(65, 65, 65);
}

#search input.button{
width: 154px;
height: 36px;
line-height: 30px;
vertical-align: middle;
border: 1px solid rgb(50, 50, 50);
border-radius: 4px;
background-color: rgb(50, 50, 50);
color: white;
font-size: 14px;
}

#search input.button:hover{
border: 1px solid grey;
}

.container_top{
width: 100%;
height: auto;
margin: auto;
}

.container_bottom{
padding : 50px 0 0 0;
width: 100%;
height: auto;
margin: auto;
}

.title{
width: 100%;
height: 50px;
line-height: 50px;
font-family: DejaVu Sans Mono, monospace;
font-size: 24px;
vertical-align: middle;
color: white;
margin: auto;
padding: 0;
background: rgba(0,0,0,0.7);
text-align: center;
}

.affichage{
width: 100%;
height: auto;
margin: 0 auto;
}

.affichage ul li{
list-style-type: none;
display: inline-block;
}

.affichage li{
margin-right: 20px;
}

.affichage li+li{
margin-top: 20px;
}

.affichage a{
text-decoration: none;
text-align: center;
font-family: DejaVu Sans Mono, monospace;
font-size :larger;
color: rgb(175, 175, 175);
outline:none;
list-style: none;
width: 200px;
height: 200px;
display: inline-block;
margin-left: -3px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background-color: rgba(95, 95, 95, 0.1);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.affichage a+a{
margin: 0 auto 0 20px;
}

.affichage a img{
width: 150px;
height: 150px;
border-radius: 10px;
}

.affichage a span{
display: inline-block;
text-align: center;
}

.affichage a:hover, .affichage a:focus, .affichage a:active{
background-color: rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(255, 255, 255, 0.7);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

#footer{
margin : 75px 0 0 0;
box-shadow: 0px 0px 7px rgba(150, 150, 150, 0.5);
background-color: rgba(0,0,0,0.7);
width: 100%;
height: 50px;
font-size : 20px;
bottom: 0;
}

#footer p{
padding: 0; margin: 0;
font-family: DejaVu Sans Mono, monospace;
font-size: 24px;
line-height: 50px; vertical-align: middle;
color: rgb(175, 175, 175);
text-align: center;
}


/**************/
/* responsive */
/**************/

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
}

/* iPads 3  ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}