@font-face {
font-family: 'Franklin Gothic Regular';
font-style: normal;
font-weight: normal;
src: local('Franklin Gothic Regular'), url('FranklinGothic.woff') format('woff');
}


@font-face {
font-family: 'Franklin Gothic Condensed';
font-style: normal;
font-weight: normal;
src: local('Franklin Gothic Condensed'), url('FRANKGO.woff') format('woff');
}


@font-face {
font-family: 'Franklin Gothic Condensed';
font-style: normal;
font-weight: normal;
src: local('Franklin Gothic Condensed'), url('Franklin Gothic Condensed.woff') format('woff');
}


@font-face {
font-family: 'Franklin Gothic ITALIC';
font-style: normal;
font-weight: normal;
src: local('Franklin Gothic ITALIC'), url('FranklinGothicITALIC.woff') format('woff');
}


@font-face {
font-family: 'Franklin Gothic ITALIC';
font-style: normal;
font-weight: normal;
src: local('Franklin Gothic ITALIC'), url('fgwo____.woff') format('woff');
}
a:hover{
	text-decoration:none;
}
.bleu{
	color:#499DF3;
}

.blanc{
	color:#EEE;
}

.rose, a{
	color:#F08;
}

.orange, a:hover{
	color:#F80;
}
.navbar .nav-item .small{
	font-size:75%;
}



.button .micrologo {
	height:1em;
}

.navbar .nav-link{
	font-size:1rem;
}

.navbar-light .button, .button{
	border:2px solid #F08;
	border-radius: 1em;
	background:none;
	padding: 5px;
    padding-bottom: 8px;
	color:#000;
}

.navbar-dark .button{
	border:2px solid #F08;
	border-radius: 1em;
	background:none;
	padding: 5px;
    padding-bottom: 8px;
	color:#FFF;
}

.button:hover{
	border:2px solid #F80;
	text-decoration:none;
	color:#000;
}

.button:focus{
	outline:none;
}

.button-orange{
	border:2px solid #F80;
	color:#FFF;
}
.button-orange:hover{
	border:2px solid #F08;
	color:#FFF;
}
.section{
	padding: 12vh 10vw;
}
.section:nth-child(odd){
	background : #FFF;
}
.section:nth-child(even){
	background : #EEF;
	
}
#grid-infos .row{
	margin-right:0px;
}
.texte{
	margin-bottom:10px;
}

.thumbnail a{
	display:block;
	margin:10px;
	padding:0px;
	width:100%;
	text-align:center;
	color:#333;
}

.thumbnail a:hover{
	background-color:#EEE;
	color:#333;
}
.paragraphe{
	margin-bottom:1.5rem;	
	font-size:1rem;	
}

.paragraphe img{
	margin:5px;
	border:1px solid #999;	
}
.paragraphe-main{
	font-size:1.2rem;	
}

p img{
	width:50% !important;
	float:right !important;
}

.event:hover{
	background-color:#DDD;
	border-radius:1rem;
	text-decoration:none;
}

.planete .presentation{
	background-image:url('../img/Travel4.jpg');
	background-size:100vw;
	background-repeat:no-repeat;
	background-position:bottom;
	height:100vh;
}
.atterissage .presentation{
	background-image:url('../img/Travel3.jpg');
	background-size:100vw;
	background-repeat:no-repeat;
	background-position:bottom;
	height:100vh;
}
.fusee .presentation{
	background-image:url('../img/Travel2.jpg');
	background-size:100vw;
	background-repeat:no-repeat;
	background-position:center;
	height:100vh;
}
.decollage .presentation{
	background-image:url('../img/Travel1.png');
	background-size:100vw;
	background-repeat:no-repeat;
	background-position:center;
	height:100vh;
}

.retour .presentation{
	background-image:url('../img/Travel6.png');
	background-size:100vw;
	background-repeat:no-repeat;
	background-position:bottom;
	height:100vh;
}

.terre .presentation{
	background-image:url('../img/Travel5.jpg');
	background-size:100vw;
	background-repeat:no-repeat;
	background-position:bottom;
	min-height:100vh;
	height:auto;
	padding-bottom:0;
}
.uptoco .presentation{
	background-image:url('../img/background2.png');
	background-repeat:repeat;
	min-height:100vh;
}


#scrollup{
	position:fixed;
	bottom:10px;
	right:-100px;
	opacity:0.5;
	height:50px;
	z-index:1040;
}


.fieldset {
	background-color:#FFF;
	box-shadow:#CCC 2px 2px 2px 2px;
	margin:15px;
/* 	border-radius:10px; */
	border: solid 1px #AAA;
	font-size:11px;
	display:grid;
	grid-template-areas:"menu infos";				
	grid-template-columns: 33% 67%;
}

#grid-menu{
 	grid-area : menu;	
 	border-right: solid 1px #EEE;
}
 
#grid-infos{
	grid-area : infos;	
}

.link-icon{
	width:5vw;
	max-width:25px;
}


.container-fluid{	
	padding:0px;
}
.logo-uptoco{
	height:40px;
}

.navbar{
	background-color:rgba(240,240,243,0);
	
	transition-property: background;
	transition-duration: 0.2s;
}
.navbar-dark .navbar-nav .nav-link, .solution .navbar a, .nav-item a {
    color: rgba(255,255,255,0.5);
}


.navbar-light .nav-item a{
	color:rgba(0,0,0,0.5);
}

.opaque  .nav-item a{
	color:#000;
}

.navbar-light .nav-item a:hover{
	color:#000;
}
.nav-item a img{
	height:1.2rem;
	padding-bottom:3px;
}
.index .navbar a:hover{
	color:#555;
}

.solution .navbar a:hover{
	color:#555;
	
}
.nav-item a:hover{
	color:#FFF;
	
}
.hidden{
	display:none;
}

.nolink{
	color:#333;
	text-decoration:none;
	border: 0px;
    background-color: transparent;
}

.aslink:hover{
	color:#49F;
}

.modal-dialog{
	background-color: #FFF;
}

.collapse img{
	max-width:100%;
}
.img-presentation{
	max-height: 50vh;
}


.active-div{
	background-color: #EEE;
    border-radius: 1rem;
    text-decoration: none;
}

.opaque .active, .navbar-light .navbar-nav .nav-link.active {
	color:#49F;
}

.opaque{
	background-color:rgba(240,240,243,1);
	color:#000;
	transition: background 0.2s ;
}
.opaque .navbar-nav .nav-link, .opaque .navbar a, .index .navbar a, .solution .opaque  a  {
	color:#000;
}

.collapse div{
	margin-bottom:10px;
}

.texte {
	font-size:1.5em;
}

.section-blanc .texte{
	color:#333;
}

.fusee .presentation .texte, .retour .presentation .texte,.planete .presentation .texte,  .atterissage .presentation .texte, .terre .texte {
	color:#DDD;
	text-shadow: 0px 1px 2px #05A;
}

.titre1{
	font-weight:bold;
	font:6vw "Franklin Gothic Regular";
}
.titre2{
	font:2vw "Trebuchet MS";
}
.titre3{
	font-weight:bold;
	font:2vw "Franklin Gothic Regular";
}

.solution .presentation .titre1 {
	text-shadow: 0px 1px 5px #05A;
}

.valeurs-icon{
	float:left;
	height:5vw;
	margin-right: 10px;
}

#menu a{
	color:#333;
}

.avatar {
	display:flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	color:#FFF;
	font-weight:bold;
	margin-right:5px;
	background-color:#499DF3;
	border-radius:50%; 
	float:left;
}

.notification {
	width:100%;
	position:fixed;
	bottom:0px;
}

.tac_activate{
	background:transparent !important;
}
.grecaptcha-badge {
	bottom:70px !important;
}
	
#tarteaucitronManager{
	outline:none !important;
}

@media (max-width:990px)
{
	.section {
	    padding: 10vh;
	}
}

@media (max-width:768px)
{
	.section{
		padding: 10vh;
	}
	
	.valeurs-icon{
		height:20vw;
		margin:20px;
	}
	.fusee .presentation{
		padding-top:60Px;
		background-image:url('../img/Travel2Phone.jpg');
		height:auto;
		background-size:100vw;
		background-repeat:no-repeat;
		background-position:bottom;
	}
	
	.atterissage .presentation{
		padding-top:60Px;
		background-image:url('../img/Travel3Phone.jpg');
		height:auto;
		background-size:100vw;
		background-repeat:no-repeat;
		background-position:bottom;
	}
	
	.planete .presentation{
		padding-top:60Px;
		background-image:url('../img/Travel4Phone.jpg');
		height:auto;
		background-size:100vw;
		background-repeat:no-repeat;
		background-position:bottom;
	}
	
	.decollage .image-presentation{
		background-image:url('../img/Travel1Phone.jpg');
		background-size:100vw;
		height:100vw;
		background-repeat:no-repeat;
		padding-top:250px;
		background-position:top;
	}
	
	.terre .presentation{
		padding-top:60Px;
		background-image:url('../img/Travel5Phone.jpg');
		height:100vh;
		background-size:100vw;
		background-repeat:no-repeat;
		background-position:bottom;
	}
	.uptoco .presentation{
		margin-top:50px;
	}
	
	.fieldset {
		margin:15px;
		grid-template-areas:"menu" "infos";				
		grid-template-columns: 100%;
	}
	
	#grid-menu{
		border-right:0px;
		border-bottom:solid 1px #EEE;
	}
	
}

@media(max-width:576px){
	.section{
		padding: 2vh;
	}
	
	.decollage .presentation{
		background-image:none;
		background-size:auto;
		background-position:top;
	}
	
	.index .presentation{
		background-color:#FFF;
		background-image:none;
	}
	
	
	.apropos-valeurs{
		display:block;
		justify-content: center;
	}
	
	.image-valeur{
		display:flex;
		justify-content: center;
	}
	
	.titre1{
		font-weight:bold;
		font:12vw "Franklin Gothic Regular";
	}
	.titre2{
		font:8vw "Trebuchet MS";
	}
	.titre3{
		font-weight:bold;
		font:6vw "Franklin Gothic Regular";
	}
	.valeurs-icon{
		float:none;
		height:25vw;
		margin : 20px;
	}
}