/* roboto-100 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; src: url('webfonts/roboto-v18-latin-100.eot'); /* IE9 Compat Modes */ src: local('Roboto Thin'), local('Roboto-Thin'), url('webfonts/roboto-v18-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/roboto-v18-latin-100.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/roboto-v18-latin-100.woff') format('woff'), /* Modern Browsers */ url('webfonts/roboto-v18-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/roboto-v18-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-100italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 100; src: url('webfonts/roboto-v18-latin-100italic.eot'); /* IE9 Compat Modes */ src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url('webfonts/roboto-v18-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/roboto-v18-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/roboto-v18-latin-100italic.woff') format('woff'), /* Modern Browsers */ url('webfonts/roboto-v18-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/roboto-v18-latin-100italic.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-300 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('webfonts/roboto-v18-latin-300.eot'); /* IE9 Compat Modes */ src: local('Roboto Light'), local('Roboto-Light'), url('webfonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */ url('webfonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/roboto-v18-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-300italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 300; src: url('webfonts/roboto-v18-latin-300italic.eot'); /* IE9 Compat Modes */ src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url('webfonts/roboto-v18-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/roboto-v18-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/roboto-v18-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('webfonts/roboto-v18-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/roboto-v18-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: normal; src: url('webfonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Roboto'), local('Roboto-Regular'), url('webfonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */ url('webfonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: normal; src: url('webfonts/roboto-v18-latin-italic.eot'); /* IE9 Compat Modes */ src: local('Roboto Italic'), local('Roboto-Italic'), url('webfonts/roboto-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/roboto-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/roboto-v18-latin-italic.woff') format('woff'), /* Modern Browsers */ url('webfonts/roboto-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/roboto-v18-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-700 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('webfonts/roboto-v18-latin-700.eot'); /* IE9 Compat Modes */ src: local('Roboto Bold'), local('Roboto-Bold'), url('webfonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/roboto-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/roboto-v18-latin-700.woff') format('woff'), /* Modern Browsers */ url('webfonts/roboto-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/roboto-v18-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-700italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url('webfonts/roboto-v18-latin-700italic.eot'); /* IE9 Compat Modes */ src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('webfonts/roboto-v18-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/roboto-v18-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/roboto-v18-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('webfonts/roboto-v18-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/roboto-v18-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-900 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url('webfonts/roboto-v18-latin-900.eot'); /* IE9 Compat Modes */ src: local('Roboto Black'), local('Roboto-Black'), url('webfonts/roboto-v18-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/roboto-v18-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/roboto-v18-latin-900.woff') format('woff'), /* Modern Browsers */ url('webfonts/roboto-v18-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/roboto-v18-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-900italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 900; src: url('webfonts/roboto-v18-latin-900italic.eot'); /* IE9 Compat Modes */ src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url('webfonts/roboto-v18-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/roboto-v18-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/roboto-v18-latin-900italic.woff') format('woff'), /* Modern Browsers */ url('webfonts/roboto-v18-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/roboto-v18-latin-900italic.svg#Roboto') format('svg'); /* Legacy iOS */ } body { font-family: Roboto, sans-serif; overflow-x: hidden; margin:0; background-color:#E52421; font-size:1.5em; } h1,h2,h3,h4,h5 { font-weight: 900; } #header img { width:70vw; } #header { display: block; text-align: center; width: 108%; margin-left:-4%; padding:30vh 0; border-bottom: 25px solid black; top:0; background: white; } #container { border-bottom: 25px solid black; margin-left: -4%; width:108%; padding-top: 34vh; } #container .content { margin-top:30px; background-color:white; width:38%; margin:0px 28% 60px 28%; padding:3%; } .boite { display:flex; justify-content: center; } .boite a { width:40%; text-decoration:none; color:black; text-align:center; } .boite img { max-width:150px; width:80%; margin:auto; } footer { background-color:white; padding: 1em; } a { color: #E52421; text-decoration:none; } a:hover { opacity:0.8; } #passele { display: block; margin: auto; } img#passele { width: 38vw; } .centerimg { width:100% } .centerimg img, .centerimg a { width: 122px; margin: 1em auto; display: block; color:black; text-align:center; } footer div { width:50%; margin:auto; align-items:stretch; } footer { text-align:center; padding-top:2em; } #loin { height:0; display:none; transition: height 1s ease; margin-top: -200px; padding-top: 200px; } #loin:target { height:auto; display:block; transition: height 1s ease; } .rs img { width: 42%; margin: 2%; border: solid 4px black; } .cit img { width:96%; margin: 2%; border: solid 4px black; } #title { display:inline; } #title2 { display:none; } /* Media Queries : version mobile */ @media (max-width: 1100px) { #container .content { width: 82%; margin: 0px 6% 60px 6%; } } @media (orientation: portrait){ body { font-size:3em; } #title2 { display:inline; } #title { display:none; } img#passele { width: 57vw; } }