/*
Theme Name: Journeau
Description: Theme enfant de MH Magazine lite. Vous pouvez maintenant effectuer vos modifications en toute sécurité.
Author: YallahWeb
Author URI: https://yallah-web.com
Template: mh-magazine-lite
Version: 1.0
*/

/************************************
 * Close button
************************************/
#closebt-container {
	position: relative;
	width:100%;
	text-align:right;
	margin-top:40px;
	display:none
}

.closebt {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	cursor:pointer;
	margin-right: 49px;
}

.closebt:hover {
	transform:rotate(90deg);
}

#item > p  {
	margin:0px;
	color:#E74B3D;
}

/************************************
 * Modal Styles
************************************/
#modal-container {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/************************************
 * SVG ANIMATIONS
************************************/
#browser-container {
	position:relative;
	top:500px;
}


#btn-openModal {
    -webkit-transform-origin: center center;
            transform-origin: center center;
	opacity:0;

}


#cursor{
	position:relative;
	top:-100px;
}

#modal {
    -webkit-transform-origin: center center;
            transform-origin: center center;
	opacity:0;
}

#modal-btn-close {
    -webkit-transform-origin: center center;
            transform-origin: center center;
	opacity:0;
}

#el-01,
#el-02,
#el-03  
{
    -webkit-transform-origin: center center;
            transform-origin: center center;
	opacity:0;
}

.col-lg-8 {
    width: 66.66666667%;
}

.col-lg-4 {
    width: 33.33333333%;
}

.thumb{
	position: relative;
	float: left;
    padding: 0 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.playbt {
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -116%);
	width: 50px;
	cursor: pointer;
    z-index: 999;
}
.thumb video{width: 100%; max-height:190px }

#modal-container .hide{display:none}
#modal-container .show{display:block;width:100%!important}
#modal-container .show video {height:auto}

.hide{
	display:none;
}
.show.hide{
	display:block !important;
}    

.no-close .ui-dialog-titlebar-close {
display: none;
}


@media (max-width: 575.98px) { 
	.col-lg-4 {
		width: 100%;
	}
 }

@media (max-width: 767.98px) { 
	.col-lg-4 {
		width: 100%;
	}
}

.text-video{
	text-align: center;
	color:white;
	margin-bottom: 2.5em;
	font-size: 1.25rem;
	display: block;
}

.titre-video{
	text-align:center;
	color:white;
	margin-top: 25px;
	margin-bottom: 25px;
}

.fermer {
	position: absolute;
	left: 1em;
	top: 1em;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	display: flex;
	align-items: center;
}

.fermer img {
	margin-right: 1rem;
}

.fermer:hover,
.fermer:focus {
	color: #fff;
}

@media (max-width: 767.98px) { 
	.closebt{
		margin-right:2px
	}
	.fermer img {
		max-width: 30px;
	}
	#modal-container {
		transform: translate(-50%,-45%);
	}
	.titre-video {
		font-size: 0.9rem;
		font-weight: normal;
		margin-top: 5px;
		margin-bottom: 15px;
	}
	.text-video{
		text-align: center;
		font-size: 0.9rem;
		margin-bottom: 1em;
		line-height: 1.25em;
	}
}
.iPhoneEight{display:none;}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { 

	.iPhoneEight{
		display: block!important;
		height: 50px;
		width: 100%;
	}

}