/*
 ************************************
 *                                  *
 * Prehome personnalisable          *
 * Feuille de style                 *
 * Version : 2.1                    *
 * Date de la version : 13/04/2018  *
 * Par : alteriade                  *
 *                                  *
 ************************************
 */

@import url('https://fonts.googleapis.com/css?family=Poppins:400,700');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:800');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');
/* NB. Si on utilise un import de type @font-face, il est nécessaire d'autoriser via le .htaccess l'import de ressources par le domaine du client (pour Firefox) */
/*@font-face {
	font-family: "AhkioBold";
	font-weight:bold;
	font-style:normal;
    src: url("fonts/AhkioBold/AhkioBold.eot");
    src: 	url("fonts/AhkioBold/AhkioBold.eot") format("embedded-opentype"),
			url("fonts/AhkioBold/AhkioBold.woff2") format("woff2"),
			url("fonts/AhkioBold/AhkioBold.woff") format("woff"),
			url("fonts/AhkioBold/AhkioBold.ttf") format("truetype"),
			url("fonts/AhkioBold/AhkioBold.otf") format("opentype"),
			url("fonts/AhkioBold/AhkioBold.svg#AhkioW00-Bold") format("svg");
}*/

@font-face {
    font-family: 'BrandonGrotesque';
    src: url('fonts/BrandonGrotesque/BrandonGrotesque.eot');
    src: url('fonts/BrandonGrotesque/BrandonGrotesque.eot?#iefix') format('embedded-opentype'),
         url('fonts/BrandonGrotesque/BrandonGrotesque.woff') format('woff'),
         url('fonts/BrandonGrotesque/BrandonGrotesque.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'BrandonGrotesque';
    src: url('fonts/BrandonGrotesque/BrandonGrotesqueBold.eot');
    src: url('fonts/BrandonGrotesque/BrandonGrotesqueBold.eot?#iefix') format('embedded-opentype'),
         url('fonts/BrandonGrotesque/BrandonGrotesqueBold.woff') format('woff'),
         url('fonts/BrandonGrotesque/BrandonGrotesqueBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}


/* police par défaut */
#contenuPH {
	font-family:'Poppins',sans-serif;
    font-weight:700;
	color:#000000;
	font-size:14px;
	line-height:16px;
    cursor:pointer;
}
#contenuPH img { max-width:100%; }


#dialog-overlay {

	/* set it to fill the whil screen */
	width:100%;
	/*height:100%;*/
	
	/* transparency for different browsers */
	filter:alpha(opacity=80); 
	-moz-opacity:0.8; 
	-khtml-opacity: 0.8; 
	opacity: 0.8; 
	background:#000; 

	/* make sure it appear behind the dialog box but above everything else */
	position:absolute; 
	top:0; left:0; 
	z-index:3000; 

	/* hide it by default */
	display:none;
}

#dialog-flex {
	position:fixed;
	top:0;
	left:0;
	z-index:5000;
	
	justify-content:center;
	align-items:center;
	
	/* hide it by default */
	display:none;
}

#dialog-box {
    display:block;
    height: auto;
    border:none;
    
	/*margin:0 auto;*/
	width:700px;
	max-width:100%;
	
	top:0; left:0;
    background:none;
	background-color: transparent;
	/* make sure it has the highest z-index */
	position:relative;
	z-index:5000;
	/*border-radius: 25px;*/
}

div#dialog-close {
	position:absolute;
	top:15px;
	right:15px;
	z-index:9999;
	
	width:22px;
	height:22px;
	display:block;
	cursor:pointer;
	
	/* styles for button */
	
	/*background-color:#e6a424;*/
	background-image:url('../IMAGES/croixfermer.png');
	background-position: center center;
	background-repeat:no-repeat;
	
/*	border-radius:5px;*/
	
	-webkit-transition:background-color 0.2s linear;
	-moz-transition:background-color 0.2s linear;
	-o-transition:background-color 0.2s linear;
	transition:background-color 0.2s linear;	
	
}

div#dialog-close:hover {
	/*background-color:#f13811;*/
}

#contenuPH { 
	text-decoration:none;
	/*color:#ffffff;*/
	background-color:#ffffff;
	margin:0px;
	padding:30px;
	position:relative;
	height:100%;
	z-index:100; 
	text-align:left;
    background-image: url('../IMAGES/fond.jpg');
    background-size:cover;
    background-position: center center;
	background-repeat:no-repeat;
	
/*	display:flex!important;*/
	align-items:stretch;
	justify-content:space-between;
    border:5px solid #FFFFFF;
}

#textePH {
    position:relative;
    width:450px;
    margin-top:30px;
    margin-bottom:60px;
}

#accrochePH {
    width:450px;
	height:204px;
	background-image: url('../IMAGES/accroche.png');
	background-size:450px;
    background-position: bottom center;
    background-repeat: no-repeat;
    margin-bottom:30px;
}

#boutonsPH {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content: space-around;
    align-items: center;
}

#boutonsPH a {
    position:relative;
    border-radius:20px;
    text-transform: uppercase;
    text-decoration:none;
    padding:12px 40px;
    z-index:1000;
}

#boutonsPH a.videoPH {
    background-color:#FCC653;
    color:#000000;
}
#boutonsPH a.videoPH:hover,
#boutonsPH a.videoPH:active,
#boutonsPH a.videoPH:focus {
    background-color:#FFFFFF;
}

#boutonsPH a.donPH {
    background-color:#E92E00;
    color:#FFFFFF;
}
#boutonsPH a.donPH:hover,
#boutonsPH a.donPH:active,
#boutonsPH a.donPH:focus {
    background-color:#FFFFFF;
    color:#E92E00;
}


/* Préhome calendrier */
#contenuPH.contenuPH2 {
    font-family:'Fira Sans Condensed',sans-serif;
    font-weight:800;
    background:#FFFFFF !important;
    font-size:48px;
    line-height:50px;
    text-transform: uppercase;
}
.dialog-box2 div#dialog-close {
    background-color:#E5261B;
}
.contenuPH2 #textePH {
    position:relative;
    width:auto;
    margin-top:0;
    margin-bottom:0;
}
.contenuPH2 p {
    margin:0;
}
.contenuPH2 .rouge { color:#E5261B; }

.contenuPH2 #logodenierPH { margin-bottom:20px; }

.contenuPH2 #calendrierPH {
    position:absolute;
    right:15px;
}

.contenuPH2 #boutonsPH { 
    margin-top:20px; 
    display:block;
}
.contenuPH2 #boutonsPH a {
    font-size:20px;
    line-height:18px;
    border-radius:5px;
    background-color:#E5261B;
    color:#FFFFFF;
    padding:10px 20px;
}
.contenuPH2 #boutonsPH a.donPH:hover,
.contenuPH2 #boutonsPH a.donPH:active,
.contenuPH2 #boutonsPH a.donPH:focus {
    background-color:#000000;
    color:#FFFFFF;
}


/* Préhome urgent */
#dialog-box.dialog-box3 { width:520px; }
#contenuPH.contenuPH3 {
    position:relative;
    font-family:'BrandonGrotesque',sans-serif;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: space-between;
    background:#FFFFFF;
    color:#2E0900;
    font-size:19px;
    padding:0;
    text-align: center;
    border:none;
    line-height:26px;
}
.dialog-box3 div#dialog-close {
    top: 45px;
    background-color:#FFFFFF;
    background-image: url('../IMAGES/croixfermer-noir.png');
}
.contenuPH3 #urgentPH {
    position:absolute;
    top:-10px;
    z-index:100;
    width:100%;
}
.contenuPH3 #textePH {
    position:relative;
    width:auto;
    margin-top:0;
    margin-bottom:0;
}
.contenuPH3 #textePH p { margin:0; }
.contenuPH3 #textePH #texteHautPH {
    position:relative;
    background-color:#E92E00;
    color:#FFFFFF;
    font-weight:700;
    font-size:60px;
    text-transform: uppercase;
    padding:80px 30px 30px;
    line-height:64px;
    margin-top:30px;
}
.contenuPH3 #textePH #texteBasPH {
    position:relative;
    font-family:'Roboto', sans-serif;
    padding:30px;
    font-weight: 400;
}
.contenuPH3 a.donPH {
    position: relative;
    display: inline-block;
    font-family:'BrandonGrotesque',sans-serif;
    font-weight:900;
    font-size:14px;
    line-height:16px;
    border-radius:20px;
    background-color:#E92E00;
    border:1px solid #E92E00;
    color:#FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    padding:12px 30px 10px;
    margin-top:25px;
}
.contenuPH3 a.donPH:hover,
.contenuPH3 a.donPH:active,
.contenuPH3 a.donPH:focus {
    background-color:transparent;
    color:#E92E00;
}


/* Préhome sablier */
#dialog-box.dialog-box4 { width:600px; }
#contenuPH.contenuPH4 {
    position:relative;
    font-family:'BrandonGrotesque',sans-serif;
    background:#FCC653;
    color:#000000;
    font-size:19px;
    text-align: center;
    border-color:#FCC653;
    line-height:26px;
    padding:0;
}
.dialog-box4 div#dialog-close {
    background-color:#FFFFFF;
    background-image: url('../IMAGES/croixfermer-noir.png');
}
.contenuPH4 #textePH {
    position:relative;
    width:auto;
    margin-top:0;
    margin-bottom:0;
    padding:30px;
}
.contenuPH4 #textePH p { margin:0; }
.contenuPH4 #textePH img {
    display:inline-block;
}
.contenuPH4 #textePH #texteHautPH {
    position:relative;
    font-weight:700;
    font-size:50px;
    text-transform: uppercase;
    line-height:54px;
    margin-top:15px;
}
.contenuPH4 #textePH #texteBasPH {
    position:relative;
    font-family:'Roboto', sans-serif;
    font-weight: 400;
}
.contenuPH4 a.donPH {
    position: relative;
    display: inline-block;
    font-family:'BrandonGrotesque',sans-serif;
    font-weight:900;
    font-size:14px;
    line-height:16px;
    border-radius:20px;
    background-color:#E92E00;
    border:1px solid #E92E00;
    color:#FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    padding:12px 30px 10px;
    margin-top:25px;
}
.contenuPH4 a.donPH:hover,
.contenuPH4 a.donPH:active,
.contenuPH4 a.donPH:focus {
    background-color:#FFFFFF;
    border-color:#FFFFFF;
    color:#000000;
}



/** Responsive **/

@media screen and (max-width:699px) {
		
	div#dialog-flex {
		/*position:absolute;*/
	}
	
	div#dialog-box {
		max-height:95vh;
		overflow:scroll;
	}
	
	div#dialog-close {
		/*position:fixed;*/
		right:6%;
		top:6%;
	}
	
	#contenuPH {
		margin-left:auto;
		margin-right:auto;
		/*max-height:95vh;*/
		/*width:95%;*/
        max-width:95%;
        max-height:95%;
	}
    
    #textePH,
    #accrochePH,
    #boutonsPH {
        max-width:100%;
    }
    #boutonsPH a {
        padding:12px 20px;
    }
    
    #accrochePH {
        background-size:100%;
    }
    
    #textePH { margin:0; }
    
    
    /* Préhome calendrier */
    #contenuPH.contenuPH2 {
        font-size:36px;
        line-height:40px;
    }
    .contenuPH2 #calendrierPH {
        max-width:30%;
    }
    
    /* Préhome urgent */
    .contenuPH3 #textePH #texteHautPH {
        font-size: 46px;
        line-height: 50px;
    }

}

@media screen and (max-width:319px) {
 
    #accrochePH {
        height:120px;
    }
    
    #boutonsPH {
        flex-direction:column;
    }
    #boutonsPH a.donPH { margin-top:15px; }
    
    /* Préhome urgent */
    .contenuPH3 #textePH #texteHautPH {
        font-size: 36px;
        line-height: 40px;
    }
    
}