/* CSS Document */
	@font-face {
    font-family: 'RobotoCondensed-Light';
    src: url('fonts/RobotoCondensed-Light-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}
	@font-face {
    font-family: 'RobotoCondensed-Bold';
    src: url('fonts/RobotoCondensed-Bold-webfont.woff') format('woff');
	font-weight: normal;
    font-style: normal;
}
* {-webkit-tap-highlight-color:transparent}
a, button, input, textarea, [tabindex] {-webkit-tap-highlight-color:transparent}
a, button, input {outline: none; -webkit-focus-ring-color:transparent}
a {text-decoration:none; color:#2b2a2d}
ul, ol, li, p, h1, h2, h3, h4, h5, form {padding:0; margin:0}
h1, h2, h3, h4, h5 {font-weight:normal}
h1, h2, h3, strong {font-family:'RobotoCondensed-Bold', Arial, Helvetica, sans-serif; font-weight:normal}
li {list-style-type:none}
div {box-sizing:border-box}
html {height:100%}
body {height:calc(100% - 100px)}
#global {height:100%}
body > #global {height:auto; min-height:100%; background:#FFF}
body {font-family:'RobotoCondensed-Light', Arial, Helvetica, sans-serif; font-weight:normal; font-size:18px; color:#2b2a2d; word-break:keep-all; padding-top:85px}
#cont {padding-bottom:195px}

#header {height:85px; background:#FFF; z-index:900; width:100%; position:fixed; top:0; -webkit-box-shadow: 0px 7px 40px 2px rgba(0,0,0,0.1); box-shadow: 0px 7px 40px 2px rgba(0,0,0,0.1)}
#cont-page {min-height:450px}

.nom {margin:0 15%}
.nom div {position:absolute; top:-50px; width:100%}
.nom, .nom div {border-top:50px solid #f5bfb5; border-left: 25px solid transparent; border-right: 25px solid transparent; height:0; text-align:center; position:relative}
.nom div {margin:0 auto}
.nom > div {border-top:50px solid #e69381}
.nom > div > div {border-top:50px solid #b52505}
.nom h1 {font-family:'RobotoCondensed-Light', Arial, Helvetica, sans-serif; color:#FFF; font-size:30px; margin-top:-46px; text-transform:uppercase;}
.logo, .fsgt {position:absolute}
.fsgt {right:15px; top:5px}
.logo {top:15px; left:15px}
.logo a, .fsgt a {display:block; background-repeat:no-repeat; background-size:contain}
.logo a {background-image:url("../imgs/logo_cosk.png"); width:120px; height:70px}
.fsgt a {background-image:url("../imgs/Logo_FSGT.svg"); background-position:right top; width:110px; padding-right:68px; height:43px; padding-top:23px}
.fsgt a {box-sizing:border-box; font-size:10px; line-height:10px; text-transform:uppercase; text-align:right; color:#b52505}
.fsgt a:hover {color:#2b2a2d}
.logo {top:2px; left:10px}
.logo a {width:90px; height:50px}

#menu-mob {width:25px; height:37px; position:absolute; z-index:100; top:12px; right:25px}
.menu-mob {top:6px; cursor:pointer}
.menu-mob, .menu-mob div, .menu-mob div span, .menu-mob div::before, .menu-mob div::after {display:block; width:25px; position:absolute}
.menu-mob, .menu-mob div {height:25px}
.menu-mob div:before, .menu-mob div:after {content: ""}
.menu-mob div span, .menu-mob div:before, .menu-mob div:after {height:5px; background:#b52505; left:0}
.menu-mob div:before {top:0}
.menu-mob div span {top:10px}
.menu-mob div:after {top:20px}
.menu-mob.change div:before {animation:btmenu1 0.25s 0s both}
.menu-mob.change div:after {animation:btmenu2 0.25s 0s both}
.menu-mob.change div span {animation:btmenu3 0.25s 0s both}
.menu-mob div:before {animation:btmenu4 0.25s 0s both}
.menu-mob div:after {animation:btmenu5 0.25s 0s both}
.menu-mob div span {animation:btmenu6 0.25s 0s both}
@keyframes btmenu1 {0% {top:0} 50% {top:10px; transform:rotate(0deg)} 100% {transform:rotate(-45deg); top:10px}}
@keyframes btmenu2 {0% {top:20px} 50% {top:10px; transform:rotate(0deg)} 100% {transform:rotate(45deg); top:10px}} 
@keyframes btmenu3 {0% {opacity:1} 50% {opacity:1} 51% {opacity:0} 100% {opacity:0}}	
@keyframes btmenu4 {0% {transform: rotate(-45deg); top:10px} 50% {top:10px; transform:rotate(0deg)} 100% {top:0}}
@keyframes btmenu5 {0% {transform: rotate(45deg); top:10px} 50% {top:10px; transform:rotate(0deg)} 100% {top:20px}} 
@keyframes btmenu6 {0% {opacity:0} 50% {opacity:0} 51% {opacity:1} 100% {opacity:1}}

.menu {position:absolute; width:100%; top:0; z-index:-1; background:#FFF}
.menu > ul {margin:0 auto; background:#FFF; box-sizing:border-box; padding-top:55px}
.menu > ul > li {z-index:0}
.menu li a {display:block; padding:0 15px; font-size:18px; height:30px; cursor:pointer; position:relative}
.menu li a:before {content:""; position:absolute; height:6px; width:6px; border-radius:50%; background:#c75b43; top:10px; left:-10px; opacity:0}
/*.menu li a, .menu li a:before {transition:all 0.25s ease-out}*/
.menu li a:hover, .menu li a.select {color:#c75b43}
.menu .lmenu:hover > a:before, .menu li a:hover:before, .menu li a.select:before {left:5px; opacity:1}

#footer {font-size:16px; width:100%; min-height:210px; margin-top:-195px; color:#CCC; background:#39383c; z-index:1; position:relative}
#footer .col3 {column-gap:30px}
.footer {max-width:1200px; margin:0 auto; padding:50px 0}
.footer a {color:#CCC}
.footer address {font-style: normal}
.footer h3 {text-transform:uppercase; font-size:18px; padding-left:20px; position:relative}
.footer h3:before {width:16px; height:16px; display:block; position:absolute; top:0; left:0}
.footer address h3:before {content:url("../imgs/localisation.svg")}
.footer div:nth-of-type(1) h3:before {content:url("../imgs/permanence.svg")}
.footer div:nth-of-type(2) h3:before {content:url("../imgs/Logo_FSGT_blanc.svg"); width:35px; top:-4px}
.footer div:nth-of-type(2) h3 {padding-left:40px}

.col {display:grid}
.col2 {grid-template-columns:repeat(2, 1fr)}
.col3 {grid-template-columns:repeat(3, 1fr)}

.bt-upload a {display:block; width:220px; font-size:21px; background:#e69381; color:#FFF; padding:5px 10px 5px 25px; margin:0 auto; transition:all 0.25s ease-out; margin-top:15px; position:relative; text-align:center}
.bt-upload a:before {content:url("../imgs/upload.svg"); position:absolute; top:10px; left:10px; width:20px; height:20px}
.bt-upload a:hover:before {animation: bt-upload 0.5s ease-in-out infinite}
@keyframes bt-upload {0% {top:7px} 50% {top:13px} 100%{top:7px}}
.bt-upload a:hover {background:#b52505}
.map {height:300px}

@media screen and (max-width:639px) {
.nom > div > div:nth-of-type(1) {display:none}
.nom > div, .nom > div > div {position:absolute; left:-10px}
.nom {width:calc(100% - 180px); margin:0 auto}
.nom > div {width:calc(100% + 20px)}
.nom > div > div {width:calc(100% + 20px)}
.nom h1 {margin-top:-45px}
.footer {padding:30px}
.footer div {margin-top:30px}
#footer .col3 {display:inherit}
}
@media screen and (min-width:640px) {
.nom > div > div:nth-of-type(2) {display:none}
}
@media screen and (min-width:640px) and (max-width:767px) {
.nom h1 {font-size:21px; margin-top:-38px}
}
@media screen and (min-width:640px) and (max-width:799px) {
.footer {padding:40px}
}
@media screen and (max-width:767px) {
.footer {font-size:14px}
}
@media screen and (min-width:768px) and (max-width:900px) {
.nom h1 {font-size:24px; margin-top:-40px}
}
@media screen and (min-width:800px) {
.footer {padding:50px}
}
@media screen and (max-width:1200px) {
body {padding-top:60px; height:calc(100% - 60px)}
#header {height:60px}
.fsgt {position:relative}
.menu {padding-left:25px; height:100vh; left:-100%}	
.menu > ul {text-align:left}
.menu > ul > li > a {text-transform: uppercase}
.menu li {width:fit-content; padding:5px 0}
.smenu {padding:0 25px}
.move {animation: move 0.5s ease-in-out both}
	@keyframes move {0% {left:-100%} 100% {left:0}}
.unmove {animation: unmove 0.5s ease-in-out both}
	@keyframes unmove {0% {left:0} 100% {left:-100%}}
}
@media screen and (min-width:1201px) {
#menu-mob {display:none}
.menu {height:85px; left:0}
.menu > ul {text-align:center; height:85px}
.menu > ul > li {height:30px; display:inline-block}
.smenu {position:absolute; width:100%; background:#FFF; left:0; top:-200px; padding:5px 25px 15px 25px; z-index:-1; transition:all 0.25s ease-in-out;}
.smenu li {text-align:left; width:fit-content}
.s1 ul {margin-left:calc(50vw - 309px)}
.lmenu:hover .smenu {top:85px !important; -webkit-box-shadow: 0px 7px 40px 2px rgba(0,0,0,0.1); box-shadow: 0px 7px 40px 2px rgba(0,0,0,0.1)}
}