@charset "UTF-8";
/* CSS Document */
	
/****************
SITE
****************/

    p   {
            font-family: 'Rokkitt', "Lucida Console", Monaco, monospace;
    }
	
/****************
HOMEPAGE
****************/

	body.TG2	{
		width:100vw;
		height:90vh;
		overflow:visible;
		margin:0;
        text-align: center;
	}
	
	body.TG	{
		overflow:scroll;
/*        background-image: url(images/home/dia-01.jpg);*/
		background-position: 50% 50% fixed;
		background-repeat: no-repeat;
		-moz-background-size: cover;           /* Gecko 1.9.2 (Firefox 3.6) */
        -o-background-size: cover;           /* Opera 9.5 */
   		-webkit-background-size: cover;           /* Safari 3.0 */
        background-size: cover;
	}

    div.container2.homeslide2   {
        width: 100vw;
        height: 92vh;
        margin: 0;
		background-position: 50% 50% fixed;
		background-repeat: no-repeat;
		-moz-background-size: cover;           /* Gecko 1.9.2 (Firefox 3.6) */
        -o-background-size: cover;           /* Opera 9.5 */
   		-webkit-background-size: cover;           /* Safari 3.0 */
        background-size: cover;
        background-color: rgba(0,0,0,1);
        display: block;
        position: relative;
        text-align: center;
        /*border: 1px solid rgba(255,255,0,1);*/
    }

    div.container2.homeslide2#two  {
        height: 100vh;
/*        background-image: url(images/home2/TGBD00B.jpg);*/
    }

@media screen and (max-width:800px) {
    div.container   {
        padding-top: 12vh;
    }
}

    div.contenu {
        display: inline-block;
        overflow: visible;
        width: 90%;
        max-width: 1366px;
        height: 100%;
        /*border: 1px solid rgba(255,0,255,1);*/
    }

    div.contenu.home2 {
        width: 100vw;
        max-width:none;
        margin-top: 62vh;
        height: auto;
        text-align: left;
/*        border: 1px solid rgba(255,255,255,0.6);*/
    }

    div.contenu.home2#three {
        margin-top: 75vh;
        height: 120px;
/*        overflow: hidden;*/
    }

    div.contenu#slogan0    {
        padding: 10px 0;
        display: inline-block;
        text-align: left;
        width: 95vw;
        height: auto;
        max-width: 1210px;
        font-family: 'Milligram-Bold', sans-serif;
        color: rgba(0,0,0,0.5);
        font-size: 1em;
        letter-spacing: -0.03em;
/*        border: 1px solid rgba(0,0,0,0.6);*/
    }

    span.slogan0    {
        display: inline-block;
        height: auto;
        margin-top: 20vh;
        text-align: left;
        font-family: 'Milligram-Bold', sans-serif;
        color: rgba(255,255,255,0.7);
        text-transform: none;
        font-size: 0.5em;
        line-height: 0.8em;
        letter-spacing: -0.03em;
/*        border: 1px solid rgba(0,0,0,0.6);*/
    }

@media screen and (max-width:800px) {
    span.slogan0    {
        margin-top: 70px;
        font-size: 0.6em;
        line-height: 0.9em;
    }
}

@media screen and (max-height:800px) {
    div.contenu#home   {
        margin-top: 50vh;
    }
}

@media screen and (max-width:800px) {
    div.contenu#home   {
        margin-top: 40vh;
    }
}

    div.contenu#map-menu {
        margin-top: 1vh;
        height: auto;
        text-align: left;
/*        border: 1px solid rgba(255,255,255,0.6);*/
    }

    div.contenu#homeSuite   {
        width: 75%;
        height: auto;
        max-width: 1120px;
        margin-top: 15vh;
        padding: 50px 100px;
        text-align: left;
        border: 1px solid rgba(255,255,255,0.4);
        background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0.1) 10%);
    }

@media screen and (max-height:800px)    {
    div.contenu@homeSuite   {
       margin-top: 8vh; 
    }
}

    a.logoHome  {
        display: inline-block;
        vertical-align: middle;
        width: 60px;
        height: 60px;
        margin: 0 0 20px 0;
        background: url(images/TG-logo_2022-white.png) center no-repeat;
        background-size: cover;
        background-color: rgba(74,87,0,1);
        border-radius: 35px;
    }

@media screen and (max-width:800px) {
    a.logoHome   {
        margin-top: -10px;
        vertical-align: middle;
        width: 50px;
        height: 50px;
    }
}

    img.logoH   {
        margin:4px 0 0 3px;
        width: auto;
        height: 140px;
    }

    p.titre0    {
        width: 70%;
        margin: -75px 0 60px -45px ;
        font-family: 'Helvetica', 'Arial', sans-serif;
        font-weight: 800;
        color: rgba(255,255,255,1);
        font-size: 2em;
    }
	
	p.texte	{
		font-size:1.2em;
		font-weight:300;
		line-height:1em;
	}

    p.texte#home  {
        width: 60%;
        margin: 0 0 70px 0 ;
        font-family: 'Rokkitt', serif;
        font-weight: 200;
        color: rgba(255,255,255,0.7);
        font-size: 1.2em;
        line-height: 1.2em;
    }

    span.titre1 {
        display: inline-block;
        margin: 0 70px 10px -2px;
        font-family: 'Helvetica', 'Arial', sans-serif;
        color: rgba(255,255,255,0.9);
        font-weight: 200;
        font-size: 1.2em;
    }

    p.h1#home  {
        margin: 0 0 0 79px;
        font-family: 'Helvetica', 'Arial', sans-serif;
        font-weight: 200;
        color: rgba(255,255,255,1);
        font-size: 1.6em;
    }

@media screen and (max-width:800px)    {
    p.h1#home    {
        margin: 0 0 0 25px;
        font-size: 1em;
        line-height: 1em;
    }
}

    span#titleHome {
        margin: 0 0 0 -10px;
        font-family:'Helvetica', 'Arial', sans-serif;
        font-size: 4.7em;
        font-weight: 200;
        line-height: 1em;
        color: rgba(255,255,255,1);
    }

@media screen and (max-width:800px)    {
    span#titleHome    {
        margin: 0 0 0 -3px;
        font-size: 3em;
        line-height: 0.8em;
    }
}

    span.h2#home    {
        display:inline-block;
        width:75%;  
        margin-top:20px;
        font-family:'Rokkitt', serif;
        font-size:0.8em; 
        line-height:1em;
        letter-spacing: 0.03em;
        font-weight:200; 
    }

    p#titleHome {
        display: inline-block;
        width: 100%;
        max-width: 600px;
        font-size: 2em;
        color: rgba(255,255,255,1);
    }

    span.nameTG {
        display:inline-block; 
        margin:20px 0 0 0;
        padding:0 20px; 
        font-family: Helvetica, Arial, sans-serif;
        text-transform: uppercase;
        font-size:0.7em; 
        font-weight: 400;
        line-height:1.1em; 
        letter-spacing:0.1em; 
        color: rgba(154,165,0,0.8);
/*        border-top:1px solid rgba(255,255,255,0.8); */
/*        opacity:0.6;*/
    }

@media screen and (max-width:800px)    {
    span.nameTG    {
        width: 60vw;
        height: 50px;
        padding: 0 0 0 20px;
        font-size: 0.6em;
        line-height: 1.1em;
/*        border: 1px solid rgba(255,255,255,1);*/
    }
}

    a.reload {
/*        display: inline-block;*/
        display: block;
        position: absolute;
        top: 45vh;
        left: 50vw;
        transform: translateX(-50%);
        width: 50px; 
        height: 50px;
        background: url(images/bouton-play.png) center;
        background-size: contain;
        background-color: rgba(0,0,0,0.2);
        cursor: pointer;
        opacity: 0.7;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.6);
    }

    a.reload:hover {
        opacity: 1;
    }

@media screen and (max-width:800px) {
    a.reload    {
        top: 25vh;
        width: 30px; 
        height: 30px;
    }
}

@media screen and (max-width:800px) {
    a.voir2.menuu    {
        display: inline-block;
    }
}

    a.voir.menuu:hover > div.container#map-menu  {
        display: block;
        top: 70vh;
/*        opacity: 1;*/
    }
	
	a.voir:hover	{
        background-color: rgba(0,0,0,0.4);
        opacity: 1;
	}

/********************
MAP MENU
********************/

    a.voir2.menuu:hover > div.container#map-menu  {
        display: block;
        height: 19vh;
        transition: 1s;
/*        opacity: 1;*/
    }

    div.container#map-menu  {
        display: none;
        position: absolute;
        bottom: 0;
        width: 100vw;
        height: 19vh;
        z-index: 1000;
        background-color: rgba(255,255,255,0.7);
/*        opacity: 0;*/
    }

@media screen and (max-width:800px) {
    div.container#map-menu  {
        display: block ;
    }
}

    div.contenu#map-menu    {
        width: 100vw;
        max-width: 1180px;
    }

    a.voir2.map {
        font-size: 1.2em;
        color: rgba(0,0,0,1);
    }