/*
 * Author  : Olivier Toscano
 * Society : WebCMS S.à r.l.
 * Contact : info@webcms.lu
 * ©WebCMS @2016
 */

/*	DEPENDANCES
---------------------------------*/
@charset "utf-8";

/* WEBCMS */
@import "webcms/webcms.css";

/* Template */
html, body {
    /*font-family: "Open Sans", Helvetica, Arial, sans-serif;*/
    font-family: 'Muli', "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 12pt;

	background-color: #262b38;
	color: #b3b3b3;

    width: 100%;
    height: 100%;
}

a { color: #333; }
a:hover { color: #eee; text-decoration: none; }

hr { height: 1px; border: 1px solid #b3b3b3; border-style: solid none none; }

/* Rules */
.msgok { color: green; border: 1px solid #d8d8d8; background-color: #ffffcc; padding: 2px; }
.msgnok { color: red; border: 1px solid #d8d8d8; background-color: #ffffcc; padding: 2px; }
.cb, .clearfix { clear: both; }
.noborder { border:none; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }

section.content { padding-top: 30px; padding-bottom: 30px; }

.bg-grey {
	background-color: #b3b3b3;
	color: #262b38;
}

.bg-grid {
	background: transparent url(../images/grid.png) repeat 0 -3px;
	padding: 10px 15px;
}

/* Nav
--------------------*/

div#logo { display: none; }

.nav-dha { list-style-type: none; padding: 0; margin: 0; }
.nav-dha li, .nav-dha li a { padding-top: 5px; padding-bottom: 5px; }
.nav-dha li a { color: #b3b3b3; text-decoration: none; }
.nav-dha li a:hover { color: #fff; }
.social-top { display: none; }

.navbar-default .navbar-brand { width: 75%; height: 60px; }
.navbar-fixed-top { position: relative; }

@media (min-width: 460px) {
	body { padding-top: 109px; }
	.navbar-fixed-top { position: fixed; padding-top: 20px; padding-bottom: 20px; margin:0; }
	.nav-dha li, .nav-dha li a { padding:0; }
}

@media (min-width: 767px) {
	.collapse.navbar-collapse { padding-left: 60px; background: transparent url(../images/sep.png) no-repeat 0 0; }
	.collapse.navbar-collapse { float: right; text-align: right; margin-right: 20px; }
	.social-top { float: right; display: block; }
	.navbar-default .navbar-brand { width: auto; padding: 0 15px; }
}

.navbar-default { background: none; background-color: rgba(38,43,56,.9); border: none; box-shadow: inherit; }

.navbar-default .navbar-toggle { border-color: #888 }
.navbar-default .navbar-toggle:hover { background-color: #b3b3b3; border-color: #262b38; }
.navbar-default .navbar-toggle:hover .icon-bar { background-color: #262b38; }

/* Content
--------------------*/
.content h1 { margin-bottom: 30px; }

/* COVER
--------------------*/
.cover {
    display: table;
    position: relative; z-index: 1;
    width: 100%;
    height: 300px;
    /*height: 60%;
    background: url(../images/banner-60.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;*/
}
.cover > div { display: table-cell; height: 100%;  }
.cover-go-next {
    position: absolute; bottom: 0; z-index: 2;
    text-align: center;
    width: 100%;
}
.cover-go-next a {
    display: inline-block;
    font-size: 3em; color: white;
    opacity: .5;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.cover-go-next a:hover { opacity: 1; }

@media (min-width: 767px) {
    .cover-go-next a { font-size: 5em; }
}

.cover-description {
	display: none;
    position: absolute; bottom: 30%; left: 10%; z-index: 9; max-width: 80%;
}
.cover-description h1,
.cover-description p { color: #fcfcfc; }
@media (min-width: 767px) {
    .cover-description h1,
    .cover-description p { color: #fcfcfc; }

    .cover-description { top: 50%; left: 55%; }
}
/* cover logo */
.cover-logo { display: none; position: absolute; z-index: 1; top: 50%; width: 100%; text-align: center; }
.cover-logo img { margin: 0 auto; }

.cover-papillon {
	display: inline-block; width: 100%; height: auto;
	position: absolute; bottom: 0; z-index: 1;
}
.cover-papillon img { width: 100%; }


/* Lightbox */
#imagelightbox
{
    position: fixed;
    z-index: 9999;
 
    -ms-touch-action: none;
    touch-action: none;
}

/* Footer */
footer.footer { margin-top: 1em; padding-top: 1em; padding-bottom: 1em; }

/* Team */
.team { margin-top: 10px; margin-bottom: 10px; }
.team-item { text-align: center; margin-top: 20px; min-height: 275px; }
.team-item img { margin: 0 auto; }
.team-item h2 { font-size: 12pt; font-weight: bold; margin-top: .5em; margin-bottom: 0; }
.team-item p { padding-bottom: 0; }

@media (min-width: 767px) {
	.team-item { height: auto; }
}

/* Grid */
#projects {}
#projects .isoFilters { list-style-type: none; padding: 0; margin-top: 30px; margin-bottom: 20px; }
#projects .isoFilters li,
#projects .isoFilters li a { display: inline-block; }
#projects .isoFilters li a { color: #b3b3b3; text-decoration: none; }
#projects .isoFilters li a.active,
#projects .isoFilters li a:hover { color: #fff; text-decoration: none; }

#projects .isoFilters li:after { display: inline-block; content: "/"; margin-left: .25em; }
#projects .isoFilters li:last-child:after { display: none; }

/* project page */
.gallery { margin-bottom: 30px; }
.gallery .thumbnail {
    border: 0 none;
    box-shadow: none;
    padding: 0; margin: 0; border-radius: 0;
}
.gallery p,
.gallery p a { display: block; }
.gallery .thumbnail { width: 100%; height: 225px; object-fit: cover; }

.gallery .col-xs-6,
.gallery .col-sm-4,
.gallery .col-md-3 { padding: 0; }
.gallery p { padding: 0; margin: 0; }

/* fluid 5 columns */
.grid-item { width: 50%; }
@media (min-width: 767px) {
	.grid-item { width: 25%; }
	#projects .isoFilters li:after { margin-left: .5em; margin-right: .5em; }
}
@media (min-width: 1280px) {
	.grid-item { width: 20%; }	
}

/* 2 columns */
.grid-item-width2 { width: 40%; }

	.grid-item {
		position: relative;
		overflow: hidden;
	}
	.grid-item .grid-image {
		overflow: hidden;
		display: block;
		position: relative;
	}
	.grid-item .grid-image img {
		width: 100%;
		height: auto;
	}
	.grid-item:hover .project-overlay {
		opacity:1;
		transition:all 0.4s ease 0s;
		-moz-transition:all 0.4s ease 0s;
    	-webkit-transition:all 0.4s ease 0s;
    	-ms-transition:all 0.4s ease 0s;
		-o-transition:all 0.4s ease 0s;
	}

	.project-overlay {
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		opacity:0;
		transition:all 0.3s ease 0s;
		-moz-transition:all 0.3s ease 0s;
    	-webkit-transition:all 0.3s ease 0s;
    	-o-transition:all 0.3s ease 0s;
		cursor:pointer;
	}


	.open-project-link {
		width:100%;
		height:100%;
		position:absolute;
		z-index:100;
	}

	.project-info {
		position:absolute;
		height:100px;
		width:100%;
		top:50%;
		margin-top:-50px;
		text-align:center;
	}
	
	.project-name {
		color:#fff;
		text-transform:uppercase;
		margin-top:50px;
		opacity:0;
		transition:all 0.2s ease 0s;
		-moz-transition:all 0.2s ease 0s;
    	-webkit-transition:all 0.2s ease 0s;
    	-ms-transition:all 0.2s ease 0s;
		-o-transition:all 0.2s ease 0s;
	}
	
	.grid-item:hover .project-name { 
		opacity:1;
		-webkit-transition: opacity .4s .5s;
		-moz-transition: opacity .4s .5s;
		-ms-transition: opacity .4s .5s;
		-o-transition: opacity .4s .5s;
		transition: opacity .3s .5s;
	}
	
	.project-categories {
		font-size:13px;
		color:#fff;
		opacity:0;
		margin-top:13px;
		transition:all 0.2s ease 0s;
		-moz-transition:all 0.2s ease 0s;
    	-webkit-transition:all 0.2s ease 0s;
    	-ms-transition:all 0.2s ease 0s;
		-o-transition:all 0.2s ease 0s;
		
	}
	
	.grid-item:hover .project-categories {
		opacity:0.9;
		-webkit-transition: opacity .4s .8s;
		-moz-transition: opacity .4s .8s;
		-ms-transition: opacity .4s .8s;
		-o-transition: opacity .3s .8s;
		transition: opacity .3s .8s;		
	}

	.zoom-icon {
		left: 50%;
		margin-left:-20px;
		position:inherit;
		width:40px;
		height:40px;
		margin-top:40px;
		opacity:0;
		background:url(images/zoom.png);
		background-size:40px 40px;
		transition:all 0.3s ease 0.1s;
		-moz-transition:all 0.3s ease 0.2s;
    	-webkit-transition:all 0.3s ease 0.2s;
    	-ms-transition:all 0.3s ease 0.2s;
		-o-transition:all 0.3s ease 0.2s;	
	}
	
	.grid-item:hover .zoom-icon {
		opacity:1;
		margin-top:0px;
		-webkit-transition: opacity .3s .2s, margin-top .3s .2s;
		-moz-transition: opacity .3s .2s, margin-top .3s .2s;
		-ms-transition: opacity .3s .2s, margin-top .3s .2s;
		-o-transition: opacity .3s .2s, margin-top .3s .2s;
		transition: opacity .3s .2s, margin-top .3s .2s;
		
	}

p.grid-image { margin: 0; }
.grid-item:hover .open-project-link a { display: block; width: 100%; height: 100%; }
.grid-item:hover .open-project-link { background: rgba(0,0,0,0.6); }
.project-info { z-index: 101; }
.project-name a, .project-name a:hover { color: #fff; text-decoration: none; }
.zoom-icon a { display: block; width: 100%; height: 100%; }


/*  Scroll to top 
-----------------------------------*/
#scrollToTop {
    display: none;
    position:fixed; bottom: 5px; right: 5px; z-index:999;
    padding:0;margin:0;
}
#scrollToTop a {
    display: inline-block;
    text-decoration: none; text-transform: uppercase;
    padding: 0;
    color: #454545;
    opacity: .5;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
#scrollToTop a:hover { opacity: 1;  }
#scrollToTop a img { width: 35px; }
@media (min-width: 767px) {
    #scrollToTop a img { width: 50px; }
}

/*  Slider
-----------------------------------
.carousel-fade {
    .carousel-inner {
        .item {
            transition-property: opacity;
        }
        
        .item,
        .active.left,
        .active.right {
            opacity: 0;
        }

        .active,
        .next.left,
        .prev.right {
            opacity: 1;
        }

        .next,
        .prev,
        .active.left,
        .active.right {
            left: 0;
            transform: translate3d(0, 0, 0);
        }
    }

    .carousel-control {
        z-index: 2;
    }
}
*/

.carousel-fade .carousel-inner .item {
            transition-property: opacity;
        }
        
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
            opacity: 0;
        }

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
            opacity: 1;
        }

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
            left: 0;
            transform: translate3d(0, 0, 0);
        }
    

.carousel-fade .carousel-control {
        z-index: 2;
        background-image: none;
        top: 40%;
    }


.carousel-indicators { display: none; }

.carousel, 
.carousel-inner, 
.carousel-inner .item {
    height: 100%;
}
.carousel-inner .item {  }
.carousel-inner .item img { object-fit: cover; height: 300px; width: 100%; }
.carousel-control { background: none; }

.carousel-caption { bottom: inherit; top: 20px; }

/* carousek height */
@media (min-width: 460px) {
	.cover,
	.carousel-inner .item img { height: 360px; }
}
@media (min-width: 767px) {
	.cover,
	.carousel-inner .item img { height: 550px; }
}
@media (min-width: 1280px) {
	.cover,
	.carousel-inner .item img { height: 650px; }
}