/* Generic layout styles */
.tri-custom-wrapper {
    position: relative;
}

.tri-custom-wrapper .tri-content {
    position: relative;
}

.tri-custom-wrapper .tri-content-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.tri-custom-wrapper .tri-content-row .tri-content-col {
    width: 100%;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
        flex-shrink: 1;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    margin: 0 5px;
}

.tri-custom-wrapper .tri-content.no-margin > .tri-content-row  > .tri-content-col,
.tri-custom-wrapper .tri-content-row.no-margin > .tri-content-col,
.tri-custom-wrapper .tri-content-row > .tri-content-col.no-margin {
	margin: 0;
}

.tri-custom-wrapper .tri-content.margin .tri-content-row .tri-content-col,
.tri-custom-wrapper .tri-content-row.margin .tri-content-col,
.tri-custom-wrapper .tri-content-row .tri-content-col.margin {
	margin: 0 5px;
}

@media (min-width: 768px) {
	.tri-custom-wrapper .tri-content-row {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
			-ms-flex-flow: row nowrap;
				flex-flow: row nowrap;
	}
	
	.tri-custom-wrapper .tri-content-row .tri-content-col-25 {
		width: 25%;
		-webkit-box-flex: 0;
			-ms-flex-positive: 0;
				flex-grow: 0;
		-ms-flex-negative: 1;
			flex-shrink: 1;
		-ms-flex-preferred-size: 25%;
			flex-basis: 25%;
	}

	.tri-custom-wrapper .tri-content-row .tri-content-col-33 {
		width: 33.33%;
		-webkit-box-flex: 0;
			-ms-flex-positive: 0;
				flex-grow: 0;
		-ms-flex-negative: 1;
			flex-shrink: 1;
		-ms-flex-preferred-size: 33.33%;
			flex-basis: 33.33%;
	}

	.tri-custom-wrapper .tri-content-row .tri-content-col-40 {
		width: 40%;
		-webkit-box-flex: 0;
			-ms-flex-positive: 0;
				flex-grow: 0;
		-ms-flex-negative: 1;
			flex-shrink: 1;
		-ms-flex-preferred-size: 40%;
			flex-basis: 40%;
	}

	.tri-custom-wrapper .tri-content-row .tri-content-col-50 {
		width: 50%;
		-webkit-box-flex: 0;
			-ms-flex-positive: 0;
				flex-grow: 0;
		-ms-flex-negative: 1;
			flex-shrink: 1;
		-ms-flex-preferred-size: 50%;
			flex-basis: 50%;
	}
	
	.tri-custom-wrapper .tri-content-row .tri-content-col-60 {
		width: 60%;
		-webkit-box-flex: 0;
			-ms-flex-positive: 0;
				flex-grow: 0;
		-ms-flex-negative: 1;
			flex-shrink: 1;
		-ms-flex-preferred-size: 60%;
			flex-basis: 60%;
	}

	.tri-custom-wrapper .tri-content-row .tri-content-col-66 {
		width: 66.6%;
		-webkit-box-flex: 0;
			-ms-flex-positive: 0;
				flex-grow: 0;
		-ms-flex-negative: 1;
			flex-shrink: 1;
		-ms-flex-preferred-size: 66.6%;
			flex-basis: 66.6%;
	}

	.tri-custom-wrapper .tri-content-row .tri-content-col-75 {
		width: 75%;
		-webkit-box-flex: 0;
			-ms-flex-positive: 0;
				flex-grow: 0;
		-ms-flex-negative: 1;
			flex-shrink: 1;
		-ms-flex-preferred-size: 75%;
			flex-basis: 75%;
	}
}



/* Global stylings */
.tri-custom-wrapper.tri-projet-section {
    background-color: #8E8E8E;
    padding-top: 3em;
    padding-bottom: 4em;
}

.tri-custom-wrapper.tri-projet-section:nth-child(2n) {
    background-color: #717171;
}

.tri-custom-wrapper.tri-projet-section:nth-child(2n+3) {
    background-color: #2F3032;
}

.tri-custom-wrapper.tri-projet-section .tri-content {
	width: 94%;
	max-width: 1360px;
	margin: 0 auto;
}

.tri-custom-wrapper.tri-projet-section .tri-projet-section-en-tete {
    text-align: center;
    color: white;
    font-size:  30px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 0.75em;
}


.tri-custom-wrapper.tri-projet-section .tri-projet-section-description {
    max-width: 640px;
    font-size: 20px;
    color: white;
    line-height: 1.2em;
    text-align: center;
    margin: 0 auto; 
    padding-bottom: 0.75em !important;
}


.tri-custom-wrapper.tri-projet-section .tri-projet-image-popup-link {
    display: block;
	position: relative;
}

.tri-custom-wrapper.tri-projet-section .tri-projet-image-vedette {
    vertical-align: top;
}

.tri-custom-wrapper.tri-projet-section .tri-vedette-overlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    font-size: 2em;
    color: #acc42d;
    background: rgba(0,0,0,0.3);
    -webkit-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.tri-custom-wrapper.tri-projet-section .tri-vedette-overlay:hover {
    opacity: 1;
}

.tri-custom-wrapper.tri-projet-section .tri-projet-wrapper {
    padding: 5.885%;
}

/* Technologies used section */
.tri-projet-complet-technologies {
    font-size: 16px;
    color: white;
}

.tri-projet-complet-technologies .tri-projet-technologies-en-tete {
    color: white;
    text-transform: uppercase;
    font-size: 1.3em;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tri-projet-complet-technologies ul {
    padding: 0;
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    width: 100%;
    margin-left: 0.5em;
    text-shadow: 1px 1px 2px black;
}

.tri-projet-complet-technologies ul > li {
    margin-right: 1em;
}

.tri-projet-complet-technologies .tri-projet-technologie-nom > span {
    display: inline-block;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.5em;
}

.tri-projet-complet-technologies .tri-projet-technologie-article > a {
    color: #acc42d;
    border-bottom: 2px solid transparent;
    -webkit-transition: border-color 0.2s ease-in-out;
    -o-transition: border-color 0.2s ease-in-out;
    transition: border-color 0.2s ease-in-out;
}


.tri-projet-complet-technologies .tri-projet-technologie-article > a:hover {
    border-bottom-color: #acc42d;    
}


/* Section tabs */
.tri-projet-complet-wrapper .tri-project-onglets-sections {
    line-height: 1em;
    padding: 0;
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    font-size: 16px;
    font-weight: 700;
}

.tri-projet-complet-wrapper .tri-project-onglets-sections .tri-project-onglet {
    margin-bottom: 1em;
}

@media (min-width: 768px) {
    .tri-projet-complet-wrapper .tri-project-onglets-sections .tri-project-onglet {
        width: 33.3%;
    }
}

.tri-projet-complet-wrapper .tri-project-onglet > a {
    display: inline-block;
    text-align: center;
    color: #ACC42D;
    background: transparent;
    min-width: 128px;
    padding: 0.625em 1.25em;
    border: 2px solid white;
    border-radius: 1.25em;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.tri-projet-complet-wrapper .tri-project-onglet > a:hover {
    color: white;
    background: #ACC42D;
    border-color: #ACC42D;    
}


/* Image gallery */


/* Video gallery */
.tri-custom-wrapper.tri-projet-complet-videos .tri-projet-video .tri-projet-video-thumbnail-lien {
    display: block;
	position: relative;
}

.tri-custom-wrapper.tri-projet-complet-videos .tri-projet-video img {
    vertical-align: top;
}

.tri-custom-wrapper.tri-projet-complet-videos .tri-projet-video .tri-projet-video-thumbnail-overlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    font-size: 2em;
    color: #acc42d;
    background: rgba(0,0,0,0.3);
    -webkit-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.tri-custom-wrapper.tri-projet-complet-videos .tri-projet-video .tri-projet-video-thumbnail-overlay:hover {
    opacity: 1;
}


/* 3D Model section */
.tri-custom-wrapper.tri-projet-complet-3d-models .tri-projet-3d-model iframe {
    width: 100%;
}


/* i360 section */
.tri-custom-wrapper.tri-projet-complet-i360 .tri-content {
    max-width: 1080px;
}
.tri-custom-wrapper.tri-projet-complet-i360 .tri-projet-section-en-tete {
	text-transform: lowercase;
}

.tri-custom-wrapper.tri-projet-complet-i360.tri-projet-section .tri-projet-wrapper {
	padding: 0;
    padding-top: 56.6%;
    position: relative;
}

.tri-custom-wrapper.tri-projet-complet-i360.tri-projet-section .tri-projet-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}