body {
	overflow-x: hidden;
	font-family: "Exo";

	font-size: 1rem;
	
}

@font-face {
	font-family: "Exo";
	src: url('../fonts/exo/Exo-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Exo";
	src: url('../fonts/exo/Exo-Bold.ttf');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Exo";
	src: url('../fonts/exo/Exo-BoldItalic.ttf');
	font-weight: bold;
	font-style: italic;
}


:root {

	--spid-1-color: #d9dad9;
	--spid-2-color: #878787;
	--spid-3-color: #262526;
	--spid-4-color: #7b7979;

	--spidelec-1-color: #d9dad9;
	--spidelec-2-color: #e08332;
	--spidelec-3-color: #4c9ad2;
	--spidelec-4-color: #4c9ad2;

	--spidvisio-1-color: #d9dad9;
	--spidvisio-2-color: #9a3043;
	--spidvisio-3-color: #262526;
	--spidvisio-4-color: #9a3043;

	--spidtherm-1-color: #d9dad9;
	--spidtherm-2-color: #add7f4;
	--spidtherm-3-color: #2c6435;
	--spidtherm-4-color: #2c6435;

	--spidenr-1-color: #d9dad9;
	--spidenr-2-color: #f7cd39;
	--spidenr-3-color: #262526;
	--spidenr-4-color: #f7cd39;

	--bg-black: #231f20;
	--bg-black-text: #FFF;

	--bg-white: #FFF;
	--bg-white-text: #231f20;
}

#flows .flow-1,
#flows .flow-2,
#flows .flow-3,
#logo .text,
#logo .icon {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#flows.spid .flow-1,
#flows.actualites .flow-1,
#flows.contact .flow-1,
#flows.partenaires .flow-1,
#flows.footer .flow-1 {
	fill: var(--spid-1-color);
}

#flows.spid .flow-2,
#flows.actualites .flow-2,
#flows.contact .flow-2,
#flows.partenaires .flow-2,
#flows.footer .flow-2 {
	fill: var(--spid-2-color);
}
#flows.spid .flow-3,
#flows.actualites .flow-3,
#flows.contact .flow-3,
#flows.partenaires .flow-3,
#flows.footer .flow-3 {
	fill: var(--spid-3-color);
}

#logo.spid .text,
#logo.actualites .text,
#logo.contact .text,
#logo.partenaires .text,
#logo.footer .text {
	fill: var(--spid-4-color);
	transform: matrix(0.99998931,0,-0.00174021,-1,214.7982,90.2217);
}

#g34 path {
	stroke: #FFF;
	stroke-width: 10px;
	/*stroke-dasharray: 2,2;*/
	stroke-linejoin: round;
}

/* Spidelec */
#flows.spidelec .flow-1 {
	fill: var(--spidelec-1-color);
}
#flows.spidelec .flow-2 {
	fill: var(--spidelec-2-color);
}
#flows.spidelec .flow-3 {
	fill: var(--spidelec-3-color);
}
#logo.spidelec .text {
	fill: var(--spidelec-4-color);
	transform: matrix(0.99998931,0,-0.00174021,-1,114.7982,90.2217);
	stroke: #FFF;
	stroke-width: 15px;
	stroke-linejoin: round;
	paint-order: stroke;
}

/* Spidvisio */
#flows.spidvisio .flow-1 {
	fill: var(--spidvisio-1-color);
}
#flows.spidvisio .flow-2 {
	fill: var(--spidvisio-2-color);
}
#flows.spidvisio .flow-3 {
	fill: var(--spidvisio-3-color);
}
#logo.spidvisio .text {
	fill: var(--spidvisio-4-color);
	transform: matrix(0.99998931,0,-0.00174021,-1,114.7982,90.2217);
	stroke: #FFF;
	stroke-width: 15px;
	stroke-linejoin: round;
	paint-order: stroke;
}

/* Spidtherm */
#flows.spidtherm .flow-1 {
	fill: var(--spidtherm-1-color);
}
#flows.spidtherm .flow-2 {
	fill: var(--spidtherm-2-color);
}
#flows.spidtherm .flow-3 {
	fill: var(--spidtherm-3-color);
}
#logo.spidtherm .text {
	fill: var(--spidtherm-4-color);
	transform: matrix(0.99998931,0,-0.00174021,-1,114.7982,90.2217);
	stroke: #FFF;
	stroke-width: 15px;
	stroke-linejoin: round;
	paint-order: stroke;
}

/* Spidenr */
#flows.spidenr .flow-1 {
	fill: var(--spidenr-1-color);
}
#flows.spidenr .flow-2 {
	fill: var(--spidenr-2-color);
}
#flows.spidenr .flow-3 {
	fill: var(--spidenr-3-color);
}

#logo.spidenr .text {
	fill: var(--spidenr-4-color);
	transform: matrix(0.99998931,0,-0.00174021,-1,114.7982,90.2217);
	stroke: #FFF;
	stroke-width: 15px;
	stroke-linejoin: round;
	paint-order: stroke;
}

#logo .icon {
	stroke: #FFF;
	stroke-width: 5px;
	stroke-linecap: round;
	stroke-linejoin: round;
	paint-order: stroke;
	display: none;
}

#flows svg {
    position: fixed;
    top:0;
    left:0;
    height:100%;
}

#logo svg {
    position: fixed;
    top:0;
    left:0;
    height:70%;
}

#icon svg {
    position: fixed;
    top:0;
    left:0;
    height:100%;
}

p {
	line-height: 1.75
}

a,
a:hover {
	color: #FFF;
}

h2 p {
	line-height: normal;
}

.container {
	max-width: 100%!important;
	padding-left: 1.5rem!important;
	padding-right: 1.5rem!important;
}

.container .row {
	margin-bottom: 2rem;
}

.container-static {
	max-width: 1200px!important
}

@media (min-width:991px) {
	.content {
		display: table-cell;
		vertical-align: middle
	}
}

.head-info {
    position: fixed;
    top: 0;
    background-color: var(--spidelec-2-color);
    right: 0;
    margin-top: 1.5rem;
    margin-right: 1.5rem;
    padding: 10px 40px 10px 40px;
    font-size: 1.4rem;
	filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .5));
	border-radius: 2rem;
	z-index: 1;
	font-weight: bold;
}

nav .head-info {
	position: inherit;
	filter: inherit;
	background-color: var(--bg-black);
}

.splx-bg-black h2 {
	font-size: 4rem;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 20px;
	color: var(--bg-black-text);
}

.splx-bg-black h1 {
	color: var(--bg-black-text);
}

#contact,
#partenaires {
	padding-bottom: 40px
}


.splx-bg-white h2 {
	font-size: 4rem;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 20px;
	color: var(--bg-white-text);
}

.splx-bg-white h1 {
	color: var(--bg-white-text);
	margin-bottom: 3.5rem;
}

.splx-bg-black {
	background-color: var(--bg-black);
	color: var(--bg-black-text);
	outline: 1px solid var(--bg-black);
    margin: 1px 0px 1px 0px;
}

.splx-bg-black .detail-content a {
	color: var(--bg-black-text);
	font-weight: 700
}

.splx-bg-black .detail-content a:hover {
	color: var(--bg-black-text);
	text-decoration: none;
}

::-moz-selection {
	background: var(--spidelec-2-color);
	text-shadow: none
}

::selection {
	background: var(--spidelec-2-color);
	text-shadow: none
}

img::-moz-selection {
	background: 0 0
}

img::selection {
	background: 0 0
}

img::-moz-selection {
	background: 0 0
}

.img-thumbnail {
	border-radius: 0;
	padding: 0;
	border: 2px solid #000!important;
	min-width: 100%
}

#mainNav {

	width: 100vw;
    
	transition: padding-top .3s, padding-bottom .3s, background-color .3s;
	border: none;

    font-size: 0.8rem!important;

	text-align: right;

    position: fixed;
    /* right: 0; */
    z-index: 1030;

	bottom: 0;
}

#mainNav .navbar-nav .nav-item .nav-link {
	padding: 1.1em .5em!important;
    margin-right: 10px;
}

#mainNav.navbar-shrink {
	filter: none!important;
	transition: background-color .3s;
}

#mainNav.navbar-shrink .nav-link {
    text-shadow: none;
}

#mainNav.navbar-shrink .nav-link:hover,
#mainNav.navbar-shrink .nav-link.active {
	color: #FFF!important;
    transition: 0.3s;
	text-decoration: underline;
}

#mainNav .navbar-toggler {
	margin-top: 20%;
	font-size: 150%;
	right: 0;
	padding: 13px;
	text-transform: uppercase;
	color: #FFF;
	border: 0;
	background-color: #262526;
	border-radius: 0
}

.navbar-toggler:focus,
.navbar-toggler:hover {
	text-decoration: none!important;
	outline: 0!important
}


#mainNav .navbar-nav .nav-item .nav-link {
	font-size: 1.5em;
	padding: .75em 0;
	letter-spacing: 0;
	color: #fff;
}

/**
 *	Format Web
 */
@media (min-width:991px) {

	
	#mainNav {
		height: 4rem;
		top: unset;
		bottom: 0;
		background-color: var(--spidelec-2-color);
	}

	#mainNav.navbar-shrink {
		background-color: var(--spidelec-2-color);
	}
	
	#mainNav .navbar-nav .nav-item .nav-link,
	#mainNav .navbar-nav .nav-item .nav-link.active,
	#mainNav .navbar-nav .nav-item .nav-link:hover {
		color: var(--bg-black-text)!important;
		font-weight: bold;
	}

	/*header,*/
	section {
		padding-top: 100px;
		padding-bottom: 5rem;
	}


	@media (max-width: 1450px) {
		#mainNav .navbar-nav .nav-item .nav-link {
			font-size:1.2em
		}

		#flows svg {
			margin-left: -10%;
		}
	
		#logo svg {
			margin-left: -10%;
		}

		.text-intro {
			font-size: 130%!important;
		}

		.splx-bg-black h2,
		.splx-bg-white h2 {
			font-size: 3.5rem;
		}

		.splx-bg-black h1,
		.splx-bg-white h1 {
			font-size: 2.0rem;
		}

		.address {
			font-size: 1.5rem!important;
		}
	}
	@media (max-width:1195px) {
		#mainNav .navbar-nav .nav-item .nav-link {
			font-size: 1.1em
		}

		#flows svg {
			margin-left: -15%;
		}
	
		#logo svg {
			margin-left: -15%;
		}

		.text-intro {
			font-size: 120%!important;
		}

		.splx-bg-black h2,
		.splx-bg-white h2 {
			font-size: 3rem;
		}

		.splx-bg-black h1,
		.splx-bg-white h1 {
			font-size: 1.5rem;
		}

		.address {
			font-size: 1.1rem!important;
		}
	}
	@media (max-width:1135px) {
		#mainNav .navbar-nav .nav-item .nav-link {
			font-size: 1.0em
		}

		#flows svg {
			margin-left: -20%;
		}
	
		#logo svg {
			margin-left: -20%;
		}

		.text-intro {
			font-size: 110%!important;
		}

		.splx-bg-black h2,
		.splx-bg-white h2 {
			font-size: 2.5rem;
		}

		.splx-bg-black h1,
		.splx-bg-white h1 {
			font-size: 1.5rem;
		}

		.address {
			font-size: 1.1rem!important;
		}
	}
	@media (max-width:1080px) {
		#mainNav .navbar-nav .nav-item .nav-link {
			font-size: 0.9em
		}

		#flows svg {
			margin-left: -25%;
		}
	
		#logo svg {
			margin-left: -25%;
		}

		.text-intro {
			font-size: 100%!important;
		}

		.splx-bg-black h2,
		.splx-bg-white h2 {
			font-size: 2rem;
		}

		.splx-bg-black h1,
		.splx-bg-white h1 {
			margin-bottom: 1.5rem;
		}

		.address {
			font-size: 1.0rem!important;
		}
	}
}

/**
 *	Format Mobile
 */
@media (max-width:991px) {

	#flows {
		position: fixed;
		z-index: 1050;
	}
	#flows svg {
		height: 5rem;
		margin-top: 10px;
		margin-left: 10px;
	}

	#logo {
		position: fixed;
		z-index: 1050;
		
	}

	#logo svg {
		height: 5rem;
		margin-top: 10px;
		margin-left: 10px;
	}


	#mainNav {
		top: 0;
		bottom: unset;
		background-color: #FFF;
		min-height: 6rem;
		align-items: flex-start;
	}


	#mainNav .navbar-nav .nav-item .nav-link {
		font-size: 1.2em;
		color: var(--bg-white-text)!important;
	}

	#mainNav .navbar-nav .nav-item .nav-link.active,
	#mainNav .navbar-nav .nav-item .nav-link:hover {
		color: var(--bg-white-text)!important;
	}


	header,
	section {
		padding-top: 140px;
		padding-bottom: 5rem;
	}

	.splx-btn {
		font-size: 1rem!important;
	}

	.detail-content {
		margin: 30px 0
	}
	nav .head-info {
		margin-top: 1em
	}
	
	.navbar-collapse {
		margin-bottom: 40px;
	}

	.sendmail .btn {
		margin-top: 15px;
		float: none
	}
	#g-recaptcha {
		float: none
	}

	
	#legalModal .modal-body {
		height: 400px
	}

	.text-intro {
		text-align: center !important;
		font-size: 120%!important;
	}

	.quicklinks {
		margin-bottom: 3rem;
	}
}



#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav .navbar-nav .nav-item .nav-link:hover {
    transition: 0.3s;
	text-decoration: underline;
	text-decoration-thickness: 3px;
}

#mainNav .navbar-nav {
	margin-left: 0!important;
}

header {
	color: var(--bg-black-text);
	padding-bottom: 5rem;
}

.btn-black {
	font-size: 150%;
	
	background-color: var(--bg-white-text);
	color: #fff!important;
	padding: 15px;
	padding-top: 17px;
	display: inline-block;
}

.btn-black:focus,
.btn-black:hover {
	color: #fff;
	background-color: var(--bg-white-text);
	text-decoration: none;
}


.splx-btn {
	font-size: 1.5rem;
	color: #fff!important;
	padding: 15px;
	padding-top: 17px;
	display: inline-block;
	border-radius: 2rem;
	font-weight: 700;
}

.splx-btn:focus,
.splx-btn:hover {
	text-decoration: underline;
}

.splx-btn.splx-black {
	background-color: var(--bg-white-text);
	filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .5));
}

.splx-btn.splx-orange {
	background-color: var(--spidelec-2-color);
	filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .5));
}

.carousel-control-next-icon,
.carousel-control-prev-icon,
.carousel-indicators>li {
	filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 1))
}

.carousel {
	overflow: hidden;
	border-radius: 1rem;
	filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .5));
}

.carousel-item {
	overflow: hidden
}

.carousel-indicators li {
	width: 50px!important;
	height: 5px!important
}

.text-shadow {
    text-shadow: -1px 1px 0 #363634, 1px 1px 0 #363634, 1px -1px 0 #363634, -1px -1px 0 #363634;
}


.offer-tiles .row {
	margin-bottom: 2rem;
}

.offer-tile {
	text-align: center;
	position: relative;
	background-position: 50% 50%;
	background-size: cover;
	height: 350px;
	border-radius: 1rem;
}

.offer-tile .box-content,
.offer-tile:after {
	width: 100%;
	position: absolute;
	left: 0;
	border-radius: 1rem;
}

.offer-tile:after {
	content: "";
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .08) 69%, rgba(0, 0, 0, .76) 100%);
	top: 0;
	transition: all .5s ease 0s
}

.offer-tile .post,
.offer-tile .title,
.offer-tile .detail,
.offer-tile .price {
	margin-top: 25px;
	transform: translateY(82px);
	transition: all .4s cubic-bezier(.13, .62, .81, .91) 0s
}


.offer-tile .post {
	display: block;
	padding: 8px 0;
	font-size: 15px
}

.offer-tile .title,
.offer-tile .detail,
.offer-tile .price {
	text-shadow: -1px 1px 2px #000, 1px 1px 2px #000, 1px -1px 0 #000, -1px -1px 0 #000
}


.offer-tile:hover:after {
	background: linear-gradient(to bottom, rgba(0, 0, 0, .01) 0, rgba(0, 0, 0, .09) 11%, rgba(0, 0, 0, .12) 13%, rgba(0, 0, 0, .19) 20%, rgba(0, 0, 0, .29) 28%, rgba(0, 0, 0, .29) 29%, rgba(0, 0, 0, .42) 38%, rgba(0, 0, 0, .46) 43%, rgba(0, 0, 0, .53) 47%, rgba(0, 0, 0, .75) 69%, rgba(0, 0, 0, .87) 84%, rgba(0, 0, 0, .98) 99%, rgba(0, 0, 0, .94) 100%)
}

.offer-tile img {
	width: 100%;
	height: 245px
}

.offer-tile .box-content {
	color: #fff;
	top: 0;
	z-index: 1;
	border-radius: 1rem;
}



.offer-tile .desc li a,
.offer-tile .icon li a {
	font-size: 20px;
	color: #000
}

.offer-tile:hover .post,
.offer-tile:hover .title,
.offer-tile:hover .detail,
.offer-tile:hover .price {
	transform: translateY(0)
}

.offer-tile .desc {
	margin-top: 30px;
	padding-left: 0;
	list-style: none;
	opacity: 0;
	position: relative;
	transform: perspective(500px) rotateX(-90deg) rotateY(0) rotateZ(0);
	transition: all .6s cubic-bezier(0, 0, .58, 1) 0s
}


.offer-tile:hover .desc {
	opacity: 1;
	transform: perspective(500px) rotateX(0) rotateY(0) rotateZ(0)
}

.offer-tile .desc li a {
	transition: all .3s ease 0s
}

.offer-tile .desc li a.btn-black {
	margin-top: 15px
}

.offer-tile .desc li:last-child a {
	margin-right: 0
}

@media only screen and (max-width:990px) {
	.offer-tile .title {
		font-size: x-large
	}
	.tour-item {
		margin-bottom: 30px
	}
}

.splx-bg-white {
	background-color: var(--bg-white);
    color: var(--bg-white-text);
	outline: 1px solid var(--bg-white);
    margin: 1px 0px 1px 0px;
}

@media (min-width:991px) {
	#contact,
	#partenaires {
		display: table;
		width: 100%
	}
}

#contact .tel {
	text-decoration: none!important
}

.icon {
	vertical-align: middle
}

@media only screen and (max-width:990px) {
	h2 {
		font-size: 2rem!important;
	}
	h1 {
		font-size: 1.5rem!important;
	}
}

.text-intro {
	font-size: 150%;
}

.detail-main {
	display: flex;
	flex-flow: column;
	height: 100%
}

.detail-content {
	margin-bottom: 30px;
	letter-spacing: 1px
}

@media (min-width:991px) {
	.detail-content {
		text-align: justify
	}
}

.detail-content ul {
	list-style: circle inside none
}

.detail-empty {
	flex-grow: 1
}

.detail-btn a {
	text-align: center;
	width: 100%
}

.text-outro {
	margin-top: 40px
}

.uk-slideset
{
    padding-left: 0px;
}

#partenaires img {
	/*max-width: 140px;*/
	max-height: 190px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%)
}

#partenaires img:hover {
	transition: filter .3s ease-in-out;
	-webkit-filter: grayscale(0);
	filter: grayscale(0)
}

#partenaires li {
	margin: 30px
}

#partenaires ul {
	display: inline-flex;
	align-items: center;
	list-style-type: none
}

#partenaires .fas {
	font-size: 30px
}

.sendmail .btn {
	width: 100%;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.sendmail .btn:focus,
.sendmail .btn:hover {
	box-shadow: none;
	background-color: var(--bg-white-text);
}

.sendmail .btn.success {
	background-color: var(--success);
}

.sendmail .btn.fail {
	background-color: var(--danger);
}

#g-recaptcha {
	float: left
}

/*
@media (max-width:991px) {
	.sendmail .btn {
		margin-top: 15px;
		float: none
	}
	#g-recaptcha {
		float: none
	}
}
*/

.form-control {
	border: solid 1px #000;
	margin-bottom: 20px;
	height: auto;
	padding: 12px 20px;
	color: #000
}

.form-double input {
	width: calc(50% - 10px);
	float: left
}

.form-double input:last-child {
	float: right
}

footer {
	padding: 70px 0;
	text-align: center
}

footer span.copyright {
	font-size: 90%;
	text-transform: none;
	/*font-family: Roboto, sans-serif*/
}

footer ul.quicklinks {
	line-height: 40px;
	text-transform: none;
}

.cookiealert {
	clear: both;
	align-items: center;
	justify-content: center;
	padding: .75rem 1.25rem;
	color: #FFF;
	background-color:  var(--spidelec-2-color);
	font-size: 1.2em;
}

.cookiealert.show {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 1s
}

.cookiealert a {
	text-decoration: underline
}

.cookiealert .acceptcookies {
	margin-left: 10px;
	vertical-align: baseline;
	padding: 10px;
	font-size: 120%;
	border-radius: 0
}

.modal {
	padding-right: 0!important
}

.modal-dialog {
	overflow-y: initial!important
}

.modal-content {
	
	color: #000;
	border: 1px solid #000
}

.modal-header {
	border-bottom: 1px solid #000
}

#legalModal .modal-body {
	height: 550px;
	overflow-y: auto
}

/*
@media (max-width:991px) {
	#legalModal .modal-body {
		height: 400px
	}
}
*/

.modal-footer .btn {
	color: #000
}

.modal-footer {
	border-top: 1px solid #000
}

.totop {
	margin-bottom: 20px;
	margin-right: 20px
}

#return-to-top {
	border: 3px solid #262526;
	background: #FFF;
	width: 50px;
	height: 50px;
	display: block;
	display: none;
	text-decoration: none;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	text-align: center
}

#return-to-top i {
	color: #262526;
	margin: 0;
	position: relative;
	top: 10px;
	font-size: 19px;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease
}

#return-to-top:hover {
	background-color: #262526;
	border: 3px solid #FFF;
}

#return-to-top:hover i {
    color: #FFF;
}

.up-right {
	float: right;
	display: flex;
	margin-bottom: 20px;
	margin-right: 20px
}

.overlay {
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 2500;
}

.address {
	font-size: 1.5rem;
}

.address li:first-child {
	font-weight: bold;
}

footer li:first-child {
	font-weight: bold;
}

#map {
	height: 30rem;
}

.fade-in.vertical {
    transform: translateY(1.5rem);
    opacity: 0;
    transition: opacity cubic-bezier(0.4,0,0.2,1) 500ms,transform .5s cubic-bezier(0.4,0,0.2,1);
}

.fade-in.lateral {
    transform: translateX(1.5rem);
    opacity: 0;
    transition: opacity cubic-bezier(0.4,0,0.2,1) 500ms,transform .5s cubic-bezier(0.4,0,0.2,1);
}

.fade-in-active.vertical {
    transform: translateY(0);
    opacity: 1;
}

.fade-in-active.lateral {
    transform: translateX(0);
    opacity: 1;
}