.trigger-menu {
	display: block;
	position: relative;
	z-index: 5;
	float: right;
	padding: 14px 12px 15px;
	cursor: pointer;
	-webkit-transition: all .35s ease-out;
	transition: all .35s ease-out;
}
	.trigger-menu .inner {
		position: relative;
		width: 24px;
		height: 19px;
	}
	.trigger-menu span {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #585d63;
		opacity: 1;
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: all .35s ease-out;
		transition: all .35s ease-out;
	}
		.trigger-menu span:nth-child(1) {
			top: 0px;
		}
		.trigger-menu span:nth-child(2), .trigger-menu span:nth-child(3) {
			top: 8px;
		}
		.trigger-menu span:nth-child(4) {
			top: 16px;
		}
.trigger-menu.open span {
	background-color: #fff;
}
	.trigger-menu.open span:nth-child(1), .trigger-menu.open span:nth-child(4) {
		top: 8px;
		left: 50%;
		width: 0%;
	}
	.trigger-menu.open span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.trigger-menu.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

@media (min-width: 980px) {
	.trigger-menu {
		display: none;
	}
}

@media (max-width: 979px) {
	.container {
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}

	#navigation {
		display: block;
		position: fixed;
	    z-index: 5;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    float: none;
	    margin: 0;
	    padding: 75px 0;
	    width: 100%;
	    background-color: rgba(88,93,99,.98);
	    text-align: center;
	    text-shadow: none;
	    visibility: hidden;
	    opacity: 0;
	    overflow-x: auto;
	    overflow-y: scroll;
	    -ms-transform: translate(100%,0);
	    -webkit-transform: translate(100%,0);
	    transform: translate(100%,0);
	    -webkit-transition: all .35s ease-in-out;
    	transition: all .35s ease-in-out;
	}
	#navigation > ul > li {
		float: none;
		border: 0;
		padding: 0;
	}
	#navigation > ul > li > a {
		float: none;
		padding: 21px 10px;
		background: transparent !important;
		color: #fff;
	}

	#navigation ul ul {
		display: none !important;
		position: relative;
		top: auto;
		margin: 0;
		padding: 0;
		text-align: center;
		-moz-border-radius: 0;
	    -webkit-border-radius: 0;
	    border-radius: 0;
	    -moz-box-shadow: none;
	    -webkit-box-shadow: none;
	    box-shadow: none;
	    filter: none;
    	-ms-filter: none;
	}
	#navigation ul ul li {
		margin: 0;
		padding: 0;
	}
	#navigation ul ul li a {
		display: block;
		padding: 15px 10px;
	}

	#navigation > .sublvl > li.expanded {
        position: relative;
    }
    #navigation > .sublvl > li > .expand {
        display: block;
        position: absolute;
        z-index: 5;
        top: 0;
        right: 0;
        width: 60px;
        height: 60px;
        background-color: rgba(255,255,255, .1);
        cursor: pointer;
    }
    #navigation > .sublvl > li > .expand:before {
		content: '+';
		display: block;
		position: absolute;
		top: 50%;
		margin-top: -12px;
		width: 100%;
		color: #fff;
		font-size: 24px;
		line-height: 1em;
		text-align: center;
    }
    #navigation > .sublvl > li.open > a {
    	background: #1c2022 !important;
    }
    #navigation > .sublvl > li.open .expand:before {
		content: '-';
	}
    #navigation > .sublvl > li.open > ul {
    	display: block !important;
    }

	body.open-menu {
	    height: 100%;
	    overflow: hidden;
	}
	body.open-menu #navigation {
		visibility: visible;
	    opacity: 1;
	    -ms-transform: translate(0,0);
	    -webkit-transform: translate(0,0);
	    transform: translate(0,0);
	}

	#lang {
		float: right;
		display: block;
		margin: 0;
		border: 0;
		padding: 10px;
		width: 40px;
	}
	#lang > ul {
		height: auto;
	}
	
	.sequence-prev {
		left: 10px;
		margin-left: 0;
	}
	.sequence-next {
		right: 10px;
		margin-right: 0;
	}

	#sequence {
		max-width: 100%;
	}
	#sequence > .sequence-canvas {
		margin: 0;
	}
	#sequence > .sequence-canvas > li {
		margin: 0;
		padding: 0;
		background: none;
	}
	.title, .subtitle {
		padding-left: 10px;
		padding-right: 10px;
		max-width: calc(100% - 20px);
	}
	.title {
		top: 370px;
	}
	.subtitle {
		top: 520px;
		width: 43%;
	}
	.model {
		top: auto;
		bottom: -260px;
		max-width: 100%;
	}
	#sequence > .sequence-canvas > li > div.overflow {
		max-width: 100%;
	}
	.rond {
		right: -15px;
		max-width: 100%;
	}
	.fond {
		max-width: 100%;
	}
	.sequence-pagination {
		right: 10px;
	}
	div.sequence5 #sequence > .sequence-canvas .title {
		top: 480px;
	}
	div.sequence5 #sequence > .sequence-canvas .subtitle {
		top: 630px;
	}
	div.sequence5 #sequence > .sequence-canvas .model {
		top: 333px;
		bottom: auto;
	}
	body.fr div.sequence3 #sequence > .sequence-canvas .subtitle {
		top: 555px;
	}

	#realisations_list {
		height: auto;
		font-size: 0;
	}
	#realisations_list li {
		float: none;
		display: inline-block;
		vertical-align: top;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	#realisations_list li a span {
		margin-top: 100px !important;
		font-size: 14px;
	}

	#devis_infos h3,
	#devis_infos p {
		padding: 0 10px;
	}
	#devis_form .seven.columns p {
		padding-right: 20px;
	}
	form.devis select,
	form.devis textarea,
	form.devis input[type="text"], form.devis input[type="password"], form.devis input[type="email"], form.devis textarea, form.devis select {
		width: 100%;
		box-sizing: border-box;
	}

	#content iframe, #content audio {
		max-width: 100%;
	}
	.separ {
		background-position: 30px 0 !important;
	}

	#banner_rond {
		margin-top: 90px;
	}

	.video iframe:nth-child(2n+2) {
	    margin-right: 0;
	}

	#content input[type="text"], #content input[type="password"], #content input[type="email"], #content textarea, #content select {
		width: 100%;
		box-sizing: border-box;
	}
}

@media (max-width: 767px) {
	#bt_devis {
		right: -112px;
	}

	.title {
	    top: 363px;
	    /* These are technically the same, but use both */
		overflow-wrap: break-word;
		word-wrap: break-word;

		-ms-word-break: break-all;
		/* This is the dangerous one in WebKit, as it breaks things wherever */
		word-break: break-all;
		/* Instead use this non-standard one: */
		word-break: break-word;

		/* Adds a hyphen where the word breaks, if supported (No Blink) */
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.subtitle {
		top: 551px;
		width: 70%;
	}
	.model {
		display: none;
	}
	body.fr div.sequence3 #sequence > .sequence-canvas .subtitle {
		top: 551px;
	}
	div.sequence5 #sequence > .sequence-canvas .title {
		top: 363px;
	}
	div.sequence5 #sequence > .sequence-canvas .subtitle {
		top: 551px;
	}

	h2.lines, p.lines {
		background: none;
	}
	h2.lines span, p.lines span {
		padding: 0;
		background: none;
	}

	#devis_form p {
		padding-left: 10px;
		padding-right: 10px;
	}
	#devis_form .seven.columns p {
		padding-right: 10px;
	}
	form.devis input.submit {
		float: none;
		margin-left: 10px;
		margin-right: 0;
	}

	.separ {
		background: none;
	}
}
@media (max-width: 767px) and (min-width: 480px) {
	.container {
		width: 440px;
	}
}

@media (max-width: 479px) {
	body.home #bt_devis {
		display: none;
	}

	.container {
		max-width: 100%;
	}
	.container .one.column, .container .one.columns,
	.container .two.columns,
	.container .three.columns,
	.container .four.columns,
	.container .five.columns,
	.container .six.columns,
	.container .seven.columns,
	.container .eight.columns,
	.container .nine.columns,
	.container .ten.columns,
	.container .eleven.columns,
	.container .twelve.columns,
	.container .thirteen.columns,
	.container .fourteen.columns,
	.container .fifteen.columns,
	.container .sixteen.columns,
	.container .one-third.column, .container .two-thirds.column {
		max-width: 100%;
	}

	#logo {
		padding: 9px 0;
		width: 145px;
		height: 30px;
		background-position: left top 9px !important;
		background-size: 100% auto !important;
	}
	
	.title {
		font-size: 2em;
	}
	.subtitle {
		top: 503px;
		width: 100%;
	}
	body.fr div.sequence3 #sequence > .sequence-canvas .subtitle {
		top: 503px;
	}
	div.sequence5 #sequence > .sequence-canvas .subtitle {
		top: 503px;
	}
	.fond {
		display: none;
	}
	#sequence > .sequence-canvas > li > div.overflow {
		display: none;
	}
	.sequence-pagination {
		display: none !important;
	}

	#footer {
		padding: 10px 0;
		height: auto;
		line-height: 1.5;
	}

	#content img.align-left {
		float: none;
	}
}