/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/

@font-face {
    font-family: 'ricourregular';
    src: url('../fonts/ricour-regular-webfont.woff2') format('woff2'),
         url('../fonts/ricour-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#portfolio {
	overflow:hidden;
	margin-left: 15%!important;
	margin-right: 15%!important;
	text-align: center;
}

#canvas-basic {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index:-9999999!important;
    opacity:1;
}


#canvas-basic-01 {
	position: absolute;
	display: none;
    width: 99.2%;
    height: 90%;
     top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    opacity:1;
    z-index:1;
	background-color: #FFF;
	-moz-transform-origin: left bottom!important;
    -webkit-transform-origin: left bottom!important;
    -ms-transform-origin: left bottom!important;
    -o-transform-origin: left bottom!important;
    transform-origin: left bottom!important;
    -webkit-transition: all .4s ease, opacity .3s ease!important;
	-o-transition: all .4s ease, opacity .3s ease!important;
	transition: all .4s ease, opacity .3s ease!important;
}

.index-header, #primary-menu li {
	z-index:10;
}

.canvas-basic-01-small {
	width: 99%!important;
    height: 83%!important;

}

#primary-menu div {
	color:#000!important;
}

#primary-menu div:not(.icon-div):hover {
	opacity:0.5;
}


#header.dark.transparent-header.floating-header .container, 
.dark #header.sticky-header:not(.transparent-header) #header-wrap:not(.not-dark), .dark #header.sticky-header.transparent-header #header-wrap:not(.not-dark), .dark #header.transparent-header.floating-header .container, .dark #header.transparent-header.floating-header.sticky-header .container, #header.dark.sticky-header:not(.transparent-header) #header-wrap:not(.not-dark), #header.dark.sticky-header.transparent-header #header-wrap:not(.not-dark), #header.dark.transparent-header.floating-header .container, #header.dark.transparent-header.floating-header.sticky-header .container, .dark .responsive-sticky-header #header-wrap, .responsive-sticky-header.dark #header-wrap {
	background-color: transparent;
}

#header.sticky-header #header-wrap {
	box-shadow:none!important;
	}

#header {
	    border-bottom: 0px solid #F5F5F5;
	
}
	
#logo {
	font-family: 'ricourregular';
	line-height: 2.5em;
	letter-spacing: 0.05em;
}

#logo {
	-moz-transform-origin: left top!important;
    -webkit-transform-origin: left top!important;
    -ms-transform-origin: left top!important;
    -o-transform-origin: left top!important;
    transform-origin: left top!important;
    -webkit-transition: all .4s ease, opacity .3s ease!important;
	-o-transition: all .4s ease, opacity .3s ease!important;
	transition: all .4s ease, opacity .3s ease!important;
}

.smallogo {
    -ms-transform: matrix(0.75, 0, 0, 0.75, 0, 0); /* IE 9 */
    -webkit-transform: matrix(0.75, 0, 0, 0.75, 0, 0); /* Safari */
    transform: matrix(0.75, 0, 0, 0.75, 0, 0);

	}
	
.portfolio-overlay h3 {
	font-family: 'Crimson Text', serif;
	font-weight: 300!important;
	font-size: 3em;
}

.portfolio-wrapper {
	text-align: left!important;
/* 	max-width: 660px; */

}

.portfolio-filter {
float:none!important;
display: inline-block;
border:0px;
}

.portfolio-filter li a {
	border:0px;
}

.portfolio-filter li.activeFilter a {
	background-color: transparent!important;
	color:#000!important;
	font-weight: 700;
	border-bottom: 1px solid;
	margin: 0px 0;
	}

.portfolio-filter li a:hover {
	color:#000;
	opacity:0.8!important;
}

.portfolio-filter li:first-child a, .portfolio-filter li:last-child a {
	border-radius: 0px!important;
}

.portfolio-desc h3 {
	font-family: 'ricourregular';	
}


/* lightbox arrow style and more */
.mfp-bg {
	background: #fff!important;
	opacity:0.9!important;
	}
	
.mfp-close {
	color:#000;
}

/*
	.mfp-arrow:after {
		border-top-width: 19px;
		border-bottom-width: 19px;
		top: 3px;
		opacity: 0.3;

			}
	.mfp-arrow:before {
		border-top-width: 22px;
		border-bottom-width: 22px;
		opacity: 0.1;
		}
*/
		
.mfp-arrow-right {
		right: 15px; }

.mfp-arrow-left {
		left:15px;
}

/*
.mfp-arrow-right:after {
		border-left: 20px solid #eeeeee;
		margin-left: 39px; 
		}
.mfp-arrow-right:before {
		margin-left:39px!important;
		border-left: 23px solid #eeeeee; 
		}

.mfp-arrow-left:after {
		border-right: 0px solid #eeeeee;
		margin-right: 0px; 
		}
.mfp-arrow-left:before {
		margin-left:0px;
		margin-right:0px!important;
		border-right: 0px solid #eeeeee; 
		}
*/

.mfp-arrow:hover {
		opacity: 1;
			}
			
.mfp-title {
	color:#000;
	font-size: 1.1em;
	margin-top: 0px;
}

.mfp-title a {
	color:#5c5c5c;
	border-bottom: 1px #5c5c5c solid;
}

.mfp-arrow-left { background:url(../images/arrow_left_03.png) no-Repeat top left !important; width:60px; height:60px; opacity:0.5;}
.mfp-arrow-right { background:url(../images/arrow_right_03.png) no-Repeat top left !important; width:60px; height:60px; opacity:0.5;}
.mfp-arrow-left::before, .mfp-arrow-left::after, .mfp-arrow-right::before, .mfp-arrow-right::after { display: none; }


.icon-div {
	padding-top:30px;
	line-height:22px;
	margin-left:6px;
	display:block;
}

#header.sticky-header:not(.static-sticky) #primary-menu > ul > li > .icon-div {
	padding-top:11px;
} 

.modal-body {
	font-size: 1.08em
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 8px 0;
	}

/* 	pour que le menu responsive soit accessible au clic */
#primary-menu-trigger {
	z-index : 100!important;
}

/* pour que les menus overlay soient visibles sur touch */
.forceoverlay {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.3);
}

/* modification des ombres portées des lightbox */
	.mfp-figure:after {
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
		}

img.mfp-img {
	max-height: 900px!important;
}

.portfolio-filter li.activeFilter a {
	border:0px;
	padding: 10.5px 18px;

}



	.portfolio .portfolio-item, .portfolio:not(.portfolio-1) .portfolio-item  {
	width:100%!important;
	}



@media (min-width: 991px) {
	
	.portfolio-wrapper {
		text-align: center!important;
	}
	
	.portfolio-filter li {
		float:left!important;
		width: 16%;
		margin-bottom: 20px;	}

	.portfolio-filter li a {
		padding: 10.5px 18px;
	}

	.portfolio-filter li.activeFilter a {
		margin: 0px 0;
		padding: 10px 18px;
	}

	#portfolio {
	margin-left: 28%!important;
	margin-right: 28%!important;
	}

}


@media (max-width: 991px) {
	.icon-div {
		margin-top:4px;
		float: left!important;
	}
	
	.portfolio-wrapper {
	text-align: center!important;
	}
	
	.portfolio-filter li {
		width: 25%;
		margin-bottom: 20px;
	}
	
		#portfolio {
	margin-left: 20%!important;
	margin-right: 20%!important;
	}
}

@media (max-width: 767px) and (min-width: 480px) {
	#logo {
		font-size:27px;
		line-height: 3.5em;
	}
	
		#portfolio {
	margin-left: 5%!important;
	margin-right: 5%!important;
	}
	
	.portfolio:not(.portfolio-1) .portfolio-desc h3 {
		font-size:3em;
	}
	
/*
		
.portfolio-item .portfolio-overlay,
.iportfolio .portfolio-overlay { opacity: 1; }
*/
}

@media (max-width: 767px) {
	.portfolio-filter li {
	margin-bottom: 10px!important;
	}
	
	#page-menu, #page-menu-wrap {
		height:22px;
	}
	
	.icon-div {
		margin-left:37%!important;
		margin-right:30%;
	}
	
		#primary-menu-trigger {
		margin-left: 45%!important;
		margin-right:40%!important;
		}

}

@media (max-width: 479px) {
	#logo {
		font-size:30px;
		line-height: 1.1em;
		padding-top: 10px!important;
	}
	
	#page-menu, #page-menu-wrap {
		height:22px;
	}
	
	.portfolio-wrapper {
		text-align: center!important;
	}
	
	.portfolio-filter li {
		float:left!important;
		width: 50%;
		margin-bottom: 5px!important;	}

	.portfolio-filter li a {
		padding: 8.5px 10px!important;
	}

	.portfolio-filter li.activeFilter a {
		margin: 0px 0;
		padding: 8px 10px!important;
	}
	
	#primary-menu-trigger {
		margin-left: 41%!important;
		margin-right:41%!important;
		}
	
	.icon-div {
		margin-left:30%!important;
		margin-right:30%;
	}
	
			#portfolio {
	margin-left: 2%!important;
	margin-right: 2%!important;
	}
	
	.portfolio:not(.portfolio-1) .portfolio-desc h3 {
		font-size:2em;
	}
}

@media (max-width: 991px) {
		
		#primary-menu-trigger {
		top: 75px;
		margin-top: 0;
		margin-left: 47%;
		margin-right:47%;
		}
		
		#primary-menu ul > li, #primary-menu.style-2 > div > ul > li {
			text-align: center!important;
		}
		
		#primary-menu ul > li:first-child{
			padding-top:25px;
		}

	
	.icon-div {
		margin-left:42%;
		margin-right:30%;
		margin-top:0px;
		padding-top:12px;
	}
}