/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */


}

// pour l'orientation paysage

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portait) {
/* Styles */


}



body{
	/*font-family: 'Titillium Web', sans-serif;*/
	font-family: 'Roboto Condensed', sans-serif;*/
	
}


.logoFrontoffice{
	/*max-width:50px;*/
	max-height:80px;
}






/* MENU */

/*

.navbarOverload a{
	color:#FFFFFF;	
	font-weight:bolder;
}
.navbarOverload .nav-link{
	color:#FFFFFF;	
	font-weight:bolder;
}

.navbarOverload .dropdown-menu{
	background-color:rgba(0,0,0,0.5);
}

*/

/* change the background color */
.navbar-custom-background{
	background-color:rgba(0,0,0,0.5);
}
.navbar-custom .dropdown-menu{
	background-color:rgba(0,0,0,0.5);
}
.navbar-custom {
    /*background-color: #ff5500;*/
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
    font-weight:bolder;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #08abd4;
}

.navbar-custom a{
	color:#FFFFFF;	
	font-weight:bolder;
}

@media (min-width: 979px) {
	/* IN js menu.tpl
  .navbar-custom ul.navbar-nav li.dropdown:hover > div.dropdown-menu {
    display: block;
  }
  */
}

/* Portrait phones and smaller */
@media (max-width: 480px) {
	.navbar-custom{
		padding:0;
	}
}
/* !END MENU */



/* FOOTER */
.footer{
	/*background-color:#272729;*/
	background-color:#757a77;
	color:#FFFFFF;
	font-size:12px;
	padding-top:10px;
	padding-bottom:5px;
	
}
.footer i{
	font-size:26px;	
}


.footer	.btn-perso{
	margin:5px;
	padding:5px;
	padding-left:8px;
	padding-right:8px;

}

/* !END FOOTER */


/* BOXES */

.boxContent1{
	background-color:#f5f5f5;
}
.boxContent1Capture{
	height:160px;
	background-size: cover !important;
	background-position:center center;
	/*overflow:hidden;*/
}

.boxContent1Text{
	height:300px;
	background-color:#f5f5f5;
	padding:15px;
}

.boxContent1Tag{
	height:50px;
	background-color:#f5f5f5;
	padding:15px;
}
/* !END BOXES */


/* GLOBAL */
a{
	color:#08abd4;
}
a:hover{
	color:#084552;
}

.btn-perso{
	color: #fff;
	background-color: #08abd4;
	border-color: #08abd4;
	/*font-size:1rem;*/
}
.btn-perso:hover{
	color: #fff;
	background-color: #084552;
	border-color: #084552;
}

.fullWidthHeightBackground {
	/*width: calc(100vw - 10px);*/ /*si pas de scrooll*/
	/*width: calc(100vw - 0px);*/
	width: calc(100vw - (100vw - 100%)/2);
	position: relative;
	left: 50%;  
	margin-left: -50vw;
	/*height: 100vh;*/
	
	/*height:calc(100vh - 74px);*/
	
	/*
	height:calc(100vh - 86px);
	height: calc(var(--vh, 1vh) * 100 - 85px);
	*/
	/* for chmod mobile use --vh*/
	height: calc(var(--vh, 1vh) * 100 - 86px);
	
	/*deduction footer*/
	/*
	top: 50%;  
	margin-top: -50vw;
	*/  
	background-size: cover;
	background-position:center center;
	min-height:200px;
}
/*https://stackoverflow.com/questions/10812093/is-there-a-google-chrome-only-css-hack*/

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {  
	.fullWidthHeightBackground {
    	height: calc(var(--vh, 1vh) * 100 - 87px);
	}
	
}

/*
@media screen and (-webkit-min-device-pixel-ratio:0) { 
	
	.fullWidthHeightBackground {
    height:calc(100vh - 86px);
	}
}
*/
.fullWidthHeightBackground header{
	position: absolute;
	width:100%
}
.fullWidthHeight50PBackground {
	
	/*width: calc(100vw - 10px);*/ /*si pas de scrooll*/
	/*width: calc(100vw - 0px);*/
	width: calc(100vw - (100vw - 100%)/2);
	position: relative;
	left: 50%;  
	margin-left: -50vw;
	height: 50vh;
	background-size: cover;
	background-position:center center;
}
.fullWidthHeight50PBackground header{
	position: absolute;
	width:100%
}


.fullWidthHeight50PBackgroundContent{
    text-align: center;
    max-width: 600px;
    margin: auto;
    /*border: double rgba(204, 204, 204, 0.47);*/
    border: solid rgba(204, 204, 204, 0.47);
    padding: 1%;
    font-size: 15px;
    background-color: rgba(34, 34, 34, 0.23);
    position: relative;
    overflow: hidden;
    /*margin-top:0.5rem;*/

}

.fullWidthHeight50PBackgroundContent h1{
	color:#FFFFFF;
	font-size:2em;	
	margin-bottom: 0.0rem;
}





.fullHeight50P {

	min-height: calc(var(--vh, 1vh) * 50 - 86px);
}


@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {  
	.fullHeight50P {
		min-height: calc(var(--vh, 1vh) * 50 - 87px);
	}
	
}





.full-width-image {
  width: 100vw;
  position: relative;
  left: 50%;  
  margin-left: -50vw;
}

.full-width-image img {
  width: 100%;
}



.myAuto{
	margin-top: auto;
	margin-bottom: auto;
}


/* Portrait phones and smaller */
@media (max-width: 991px) and (orientation: landscape) {
	/*
	.fullWidthHeight50PBackgroundContent{
		border:1px solid red !important;
	}
	*/

	.myAuto{
		margin-top: auto;
		margin-bottom: 10px;
	}
}

.al-bg-mask-div{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    /*z-index: -1;*/
}

.buttonRoundPlay{
	height: 60px;
	width: 60px;
	background-color: #08abd4;
	border-radius: 50%;
  	display: inline-block;
  	text-align:center;
  	margin-top:15%;
  	cursor:pointer;
  	
}
.buttonRoundPlay:hover{
	background-color:#084552;
}

.buttonRoundPlay i{
	color:#FFFFFF; 
	/*padding-top:15%;*/
	font-size:60px;
	padding-left:10px;
}

.spacer20{
	height:20px;
}

.bgGray1{
	background-color:#f5f5f5;
}
.bgRed{
	background-color: #08abd4;
}
.padding15{
	padding:15px;
}

@media (min-width: 768px) and (max-width: 991px) {
	#navbarNavDropdown{
		background-color:#000000;
		z-index:1000;
		padding-left:10px;
	}
	
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
	#navbarNavDropdown{
		background-color:#000000;
		z-index:1000;
		padding-left:10px;
	}
}
@media (max-width: 480px) {
	#navbarNavDropdown{
		background-color:#000000;
		z-index:1000;
		padding-left:10px;
	}
}
/* !END GLOBAL */