/*
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Montserrat', sans-serif;
*/





/*******************************************************************************************************/
/*                                                                                                     */
/*      PRELOAD                                                                                        */
/*                                                                                                     */
/*******************************************************************************************************/


.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    z-index: 1001;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #e74c3c;

        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #f9c922;

        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    @-webkit-keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #000;
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    
    .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;
    }
    
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {
        display: none;
    }
    .no-js h1 {
        color: #222222;
    }


/* Helper classes  */

/* Image replacement */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}






/*******************************************************************************************************/
/*                                                                                                     */
/*      MENU ET MODAL                                                                                  */
/*                                                                                                     */
/*******************************************************************************************************/


#hamburger span:nth-child(1) {
	top: 0px;
}

#hamburger span:nth-child(2),#hamburger span:nth-child(3) {
	top: 12px;
}

#hamburger span:nth-child(4) {
	top: 24px;
}

#hamburger.open span:nth-child(1) {
	top: 12px;
	width: 0%;
	left: 50%;
}

#hamburger.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}

#hamburger.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}

#hamburger.open span:nth-child(4) {
	top: 12px;
	width: 0%;
	left: 50%;
}

#hamburger {
	position: fixed;
	width: 40px;
	height: 36px;
	right:35px;
	margin: 20px auto;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	z-index:3000;
}

#hamburger span {
	position: fixed;
	width: 40px;
	height: 4px;
	display: block;
	background: #aaa;
	border-radius: 4px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}


#hamburger {
	-webkit-animation-duration: 3s;
	   -moz-animation-duration: 3s;
		-ms-animation-duration: 3s;
		 -o-animation-duration: 3s;
			animation-duration: 3s;
	
    -webkit-animation-delay: 1s;
       -moz-animation-delay: 8s;
        -ms-animation-delay: 8s;
         -o-animation-delay: 8s;
            animation-delay: 1s;
}


body.modal-open {overflow:inherit; padding-right:inherit !important;}

.modal.fade .modal-dialog {
	-webkit-transition: -webkit-transform 1s ease-out;
	   -o-transition:      -o-transform 1s ease-out;
		  transition:         transform 1s ease-out;
	-webkit-transform: translate(0, 0);
	  -ms-transform: translate(0, 0);
	   -o-transform: translate(0, 0);
		  transform: translate(0, 0);
}

.modal.in .modal-dialog {
	-webkit-transform: translate(0, 0);
	  -ms-transform: translate(0, 0);
	   -o-transform: translate(0, 0);
		  transform: translate(0, 0);
}

.modal-dialog {
	width: 100%;
	height: 100%;
	padding: 0;
	margin:0;
}

.modal-content {
    height: 100%;
    min-height: 100%;
    xheight: auto;
    border-radius: 0;
	background-color: rgba(0, 0, 0, 0.80);
	padding:0;
}

.modal-body {
    height: 100%;
	text-align:center;
}


.menuliste  li {
	text-align:center;
	list-style:none;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
}

.menuliste  li a {
	color:#4470af;
}

.menuliste  li a:hover, 
.menuliste  li a:focus {
	color:#fff;
	background-color: #4470af;
	text-decoration:none;
	xtransition: 0.5s all linear;
}

.menuliste .point {
	color:#a89c50;
}

@media (min-width: 768px) {
	.modal-open[style] {
		padding-right: 0px !important;
		xoverflow: visible;
	}
	.modal-dialog {
		xposition: relative;
		width: auto;
		margin: 0px -15px 0 0;
	}
}

@media (max-width: 767px) {
	
	#hamburger {
		width: 35px;
		height: 35px;
		right:25px;
		margin: 25px auto;
	}
	
	#hamburger span {
		height: 4px;
		background: #ccc;
		border-radius: 4px;
	}

	.modal-dialog {
		xposition: relative;
		width: auto;
		margin: 0px -15px 0 0;
	}
}


/* MOBILE : Dimension du menu */


@media (min-width: 768px) and (min-height: 876px) {
	.menuliste  li {font-size: 80px; letter-spacing: 10px;}
	.menuliste  li a {padding: 49px 0;}
}

@media (min-width: 768px) and (max-height: 875px) {
	.menuliste  li {font-size: 80px; letter-spacing: 10px;}
	.menuliste  li a {padding: 36px 0;}
}

@media (min-width: 768px) and (max-height: 775px) {
	.menuliste  li {font-size: 75px; letter-spacing: 10px;}
	.menuliste  li a {padding: 27px 0;}
}

@media (min-width: 768px) and (max-height: 675px) {
	.menuliste  li {font-size: 70px; letter-spacing: 8px;}
	.menuliste  li a {padding: 18px 0;}
}

@media (min-width: 768px) and (max-height: 575px) {
	.menuliste  li {font-size: 62px; letter-spacing: 7px;}
	.menuliste  li a {padding: 12px 0;}
}

@media (min-width: 768px) and (max-height: 475px) {
	.menuliste  li {font-size: 55px; letter-spacing: 6px;}
	.menuliste  li a {padding: 4px 0;}
}

@media (min-width: 768px) and (max-height: 375px) {
	.menuliste  li {font-size: 45px; letter-spacing: 5px;}
	.menuliste  li a {padding: 0px 0;}
}

@media (max-width: 767px) {
	.menuliste  li a:hover, 
	.menuliste  li a:focus {background-color: transparent;}
	.menuliste  li a {padding: 0px 0;}
}

@media (min-width: 600px) and (max-width: 767px) {
	.menuliste  li {font-size: 65px; letter-spacing: 8px;}
}

@media (min-width: 500px) and (max-width: 599px) {
	.menuliste  li {font-size: 55px; letter-spacing: 6px;}
}

@media (min-width: 400px) and (max-width: 499px) {
	.menuliste  li {font-size: 45px; letter-spacing: 4px;}
}

@media (max-width: 399px) {
	.menuliste  li {font-size: 35px; letter-spacing: 2px;}
}

@media (max-width: 767px) and (max-height: 375px) {
	.menuliste  li {font-size: 35px; letter-spacing: 2px;}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  PARALLAXE                                                                          */
/*                                                                                                     */
/*******************************************************************************************************/


@media (min-width : 1200px) {

	html {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  overflow: visible !important;
	  overflow-x: hidden;
	}
	
	
	body {
		font-size: 18px;
		font-family: 'Ubuntu',sans-serif;
		color: #777777;
		background: #ffffff;
		overflow: visible;
		overflow-x: hidden;
		position: relative;
		width: 100%;
		/*min-height: 100%;*/
		height: 100%;
	}

	#box_wrapper {
		height: 100%;
		position: relative;
	}
	
	
	#land {
		position: relative;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;  
		background-image: url(../00_images/mosaique1.jpg);
		text-align:center;
		color:#FFF;
	}
	
	.xrow + .xrow {
	  margin-top: 20px;
	}
	
	.title_section .row, #land .container {
	  display: table;
	  xpadding: 50px 0;
	}
	
	#land .container {
	  height: 100%;
	}
	
	.title_section [class*="col-"], #land .row {
	  display: table-cell;
	  vertical-align: middle;
	  float: none;
	}
	
	.parallax {
	  background-attachment: fixed !important;
	  -webkit-background-size: cover !important;
	  -moz-background-size: cover !important;
	  -o-background-size: cover !important;
	  background-size: cover !important;
	  overflow: hidden;
	  background-position: 50% 50%;
	  background-repeat: no-repeat;
	  position: relative;
	}
	
	.parallax > .container, .gradient > .container {
	  z-index: 3;
	  position: relative;
	}

}







/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  MOSAIQUE                                                                           */
/*                                                                                                     */
/*******************************************************************************************************/


.section-mosaique a {
	color: #ccc;
	text-decoration: none;
}

.section-mosaique a:active, 
.section-mosaique a:hover {
	color: #ca9a2e;
}


.section-mosaique a:focus {
	color: #ccc;
}

.section-mosaique .sous-titre {
	height:50px; 
	margin:25px 30px 25px 30px;
}

.section-mosaique .sous-titre h1 {
	color:#CCC; 
	line-height:0px;
	font-size:14px;
	font-family: 'Montserrat', sans-serif;
	letter-spacing:1px;
	margin:auto;
}

#decouvrir {
	-webkit-animation-duration: 3s;
	   -moz-animation-duration: 3s;
		-ms-animation-duration: 3s;
		 -o-animation-duration: 3s;
			animation-duration: 3s;
	
    -webkit-animation-delay: 4s;
       -moz-animation-delay: 4s;
        -ms-animation-delay: 4s;
         -o-animation-delay: 4s;
            animation-delay: 4s;
}

.section-mosaique .decouvrir {
	font-size:13px;
	width:200px;
	border:3px solid #ca9a2e;
	height:50px; 
	padding:14px 0px 0 0;
	margin:auto;
	margin-top: 75px;
	letter-spacing:1px;
}

#fleche {
	-webkit-animation-duration: 3s;
	   -moz-animation-duration: 3s;
		-ms-animation-duration: 3s;
		 -o-animation-duration: 3s;
			animation-duration: 3s;
	
    -webkit-animation-delay: 7s;
       -moz-animation-delay: 7s;
        -ms-animation-delay: 7s;
         -o-animation-delay: 7s;
            animation-delay: 7s;
			
	-webkit-animation-iteration-count: 5;			
	   -moz-animation-iteration-count: 5;			
		-ms-animation-iteration-count: 5;			
		 -0-animation-iteration-count: 5;			
		    animation-iteration-count: 5;			
			
}

.section-mosaique .fleche {
	background-color: transparent; 
	font-size:21px;
	line-height:0; 
	padding:2px 2px 0 0;
	margin-top:30px;
}



@media (min-width : 1200px) {

	xxhtml {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  overflow: visible !important;
	  overflow-x: hidden;
	}
	
	
	body {
		font-size: 18px;
		font-family: 'Ubuntu',sans-serif;
		color: #777777;
		background: #ffffff;
		overflow: visible;
		overflow-x: hidden;
		position: relative;
		width: 100%;
		/*min-height: 100%;*/
		height: 100%;
	}

	#box_wrapper {
		height: 100%;
		position: relative;
	}
	
	
	#land {
		position: relative;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;  
		background-image: url(../00_images/mosaique1.jpg);
		text-align:center;
		color:#FFF;
	}
	
	.title_section .row, #land .container {
	  display: table;
	}
	
	#land .container {
	  height: 100%;
	}
	
	.title_section [class*="col-"], #land .row {
	  display: table-cell;
	  vertical-align: middle;
	  float: none;
	}
	
	.parallax {
	  background-attachment: fixed !important;
	  -webkit-background-size: cover !important;
	  -moz-background-size: cover !important;
	  -o-background-size: cover !important;
	  background-size: cover !important;
	  overflow: hidden;
	  background-position: 50% 50%;
	  background-repeat: no-repeat;
	  position: relative;
	}
	
	.parallax > .container, .gradient > .container {
	  z-index: 3;
	  position: relative;
	}

}






/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  ENTETE                                                                             */
/*                                                                                                     */
/*******************************************************************************************************/


.section-entete {
	height:500px;
	background-image:url(../00_images/mosaique1.jpg); 
	background-position: 50% 50%; 
	background-repeat:no-repeat; 
	background-size:cover;
	padding:0px;
}

.section-entete a {
	color: #ccc;
	text-decoration: none;
}

.section-entete a:active, 
.section-entete a:hover {
	color: #ca9a2e;
}

.section-entete a:focus {
	color: #ccc;
}


@media (min-width: 992px) and (max-width: 1199px) {
	.section-entete .boite {
		top:100px;
		padding:0px;
		text-align:center;
	}
	.section-entete .logo {
		background-image:url(../00_images/logo-syclone1.png);
		background-repeat:no-repeat;
		background-position:center;
		width: 300px;
		height: 220px;
		display: inline-block;
	}
	.section-entete .sous-titre {
		height:50px; 
		margin:25px 30px 25px 30px;
	}
	.section-entete .sous-titre h2 {
		color:#CCC; 
		line-height:0px;
		font-size:14px;
		font-family: 'Montserrat', sans-serif;
		letter-spacing:1px;
		margin:auto;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.section-entete .boite {
		top:75px;
		padding:0px;
		text-align:center;
	}
	.section-entete .logo {
		background-image:url(../00_images/logo-syclone1.png);
		background-repeat:no-repeat;
		background-position:center;
		width: 300px;
		height: 220px;
		display: inline-block;
	}
	.section-entete .sous-titre {
		height:50px; 
		margin:25px 30px 25px 30px;
	}
	.section-entete .sous-titre h2 {
		color:#CCC; 
		line-height:0px;
		font-size:14px;
		font-family: 'Montserrat', sans-serif;
		letter-spacing:1px;
		margin:auto;
	}
}

@media (max-width: 767px) {
	.section-entete .boite {
		text-align:center; 
		top:80px;
		text-align:center;
	}
	.section-entete .logo {
		background-image:url(../00_images/logo-syclone2.png);
		background-repeat:no-repeat;
		background-position:center;
		width: 200px;
		height: 140px;
		display: inline-block;
	}
	.section-entete .sous-titre {
		height:50px; 
		margin:25px 0px 25px 0px;
	}
	.section-entete .sous-titre h2 {
		color:#CCC; 
		line-height:0px;
		font-size:14px;
		font-family: 'Montserrat', sans-serif;
		letter-spacing:0px;
		margin:auto;
	}
	.section-entete .decouvrir {
		font-size:12px;
		width:150px;
		border:2px solid #ca9a2e;
		height:40px; 
		padding:9px 0px 0 0;
		margin:auto;
		margin-top: 25px;
		letter-spacing:1px;
	}
	.section-entete .fleche {
		background-color: transparent; 
		margin-top:30px;
	}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  SERVICES                                                                           */
/*                                                                                                     */
/*******************************************************************************************************/


.section-services {
	background-color: #f4f1ea; 
	height:500px; 
	padding-top:60px; 
	text-align:center;
}

.section-services h3 {
	line-height: 0px; 
	padding-bottom:20px;
	font-family: 'Montserrat', sans-serif;
	font-size:22px;
}

.section-services .numerique h3 {color: #f08573;}
.section-services .design h3 {color: #02b2ca;}
.section-services .edition h3 {color: #68b9a0;}


@media (min-width: 768px) and (max-width: 991px) {
	.section-services h3 {
		font-size:20px;
	}
}


@media (max-width: 767px) {
	.section-services {
		height:1350px; 
	}
	
	.section-services .design,
	.section-services .edition  {
		padding-top: 75px;
	}
	
	.section-services h3 {
		padding-bottom:15px;
	}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  CAROUSSEL                                                                          */
/*                                                                                                     */
/*******************************************************************************************************/


.section-caroussel {
    background-color: #fff; 
	height:auto; 
	padding-bottom:40px;
}

.carousel-inner {
  	margin-bottom: 20px;
	-webkit-transform-style: preserve-3d;
}

.carousel-indicators {
	bottom: -30px;
	width: 80%;
	left: 40%;
}

.carousel-indicators li {
	width: 13px;
	height: 13px;
	border-radius: 13px;
	background-color:#eee;
	margin-bottom:1px;
	margin: 0 20px;
}
.carousel-indicators .active {
	width: 16px;
	height: 16px;
	border-radius: 16px;
	background-color:#d6d6d6;
	margin: 0 20px;
}

.carousel-control {
	width: 0px;
	height: auto;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
	filter: alpha(opacity=20);
	opacity: .2;
}

.carousel-control.left,
.carousel-control.right {
	background-color:#d6d6d6;
	width: 50px;
	height: 50px;
	border-radius:25px;
	padding:0 0 19px 0;
	background-image: none;
	top: 40%;
	line-height:0;
	font-size:20px;
	text-shadow: none;
}

.carousel-control.left {
	right: auto;
	left: 0;
}

.carousel-control.right {
	right: 0;
	left: auto;
}

.carousel-control:hover,
.carousel-control:focus {
  color: #fff;
  text-decoration: none;
  filter: alpha(opacity=50);
  opacity: .5;
  outline: 0;
}

.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-menu-left,
.carousel-control .glyphicon-menu-right {
  top: 50%;
}

.carousel-control .icon-prev,
.carousel-control .glyphicon-menu-left {
  left: 0;
  margin-left: 0px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-menu-right {
  right: 0;
  margin-right: 0px;
}

@media (min-width: 992px) and (max-width: 1199px) {
	.carousel-indicators {bottom: -30px;}
	.section-caroussel {padding-bottom:45px;}
}

@media (min-width: 768px) and (max-width: 991px) {
	.carousel-indicators {bottom: -40px;}
	.section-caroussel {padding-bottom:50px;}
}

@media (max-width: 767px) {
	.carousel-indicators {bottom: -60px;}
	.section-caroussel {height:auto; padding: 0 20px 75px 20px;}
}

@media (max-width: 400px) {
	.carousel-indicators li {margin: 0 12px;}
	.carousel-indicators .active {margin: 0 12px;}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  STATS                                                                              */
/*                                                                                                     */
/*******************************************************************************************************/


.section-stats {
	background-color: #000; 
	height:350px; 
	background-image:url(../00_images/background-stats.jpg); 
	background-attachment:fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  	background-position:center;
	font-family: 'Montserrat', sans-serif;
}

.section-stats .zone {
	text-align:right; 
	padding-top: 155px;
}

.section-stats .chiffre {
	font-size:120px; 
	line-height:20px;
}

.section-stats .description {
	font-size:20px; 
	padding:40px 3px 0 0;
}

@media (max-width : 1199px) {
	.section-stats {
		background-attachment: scroll; 
	 }
}

@media (max-width: 767px) {
	.section-stats {
		height:625px; 
	}
	.section-stats .zone {
		text-align: center; 
		padding-top: 100px;
	}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  CLIENTS                                                                            */
/*                                                                                                     */
/*******************************************************************************************************/


.section-clients {
	background-color: #fff; 
	height:auto; 
	color:#c9bfb5; 
	padding-top: 60px;
	padding-bottom: 60px;
	text-align:center;
}

.section-clients h2 {font-family: 'Montserrat', sans-serif;	letter-spacing: 2px; font-size:24px; margin-bottom:30px;}
.section-clients .alignement {padding: 20px 10px 0 0;}
.section-clients .cellule {text-align:center; padding:0;}

.logo_client {width: 100px; height: 100px; text-indent: -99999px;}
.logo_client:hover {background-position: 0 -100px;}

.logo_ASA {background: url('../00_images/logoclients/logo-client_ASA.jpg') top;}
.logo_BDC {background: url('../00_images/logoclients/logo-client_BDC.jpg') top;}
.logo_CCNQ {background: url('../00_images/logoclients/logo-client_CCNQ.jpg') top;}
.logo_CDUFSL {background: url('../00_images/logoclients/logo-client_CDUFSL.jpg') top;}
.logo_ClubSoda {background: url('../00_images/logoclients/logo-client_ClubSoda.jpg') top;}
.logo_CMM {background: url('../00_images/logoclients/logo-client_CMM.jpg') top;}
.logo_desjardins {background: url('../00_images/logoclients/logo-client_desjardins.jpg') top;}
.logo_FBack {background: url('../00_images/logoclients/logo-client_FBack.jpg') top;}
.logo_hanes {background: url('../00_images/logoclients/logo-client_hanes.jpg') top;}
.logo_hilton {background: url('../00_images/logoclients/logo-client_hilton.jpg') top;}
.logo_ICCanada {background: url('../00_images/logoclients/logo-client_ICCanada.jpg') top;}
.logo_Montreal {background: url('../00_images/logoclients/logo-client_Montreal.jpg') top;}
.logo_purolator {background: url('../00_images/logoclients/logo-client_purolator.jpg') top;}
.logo_sheraton {background: url('../00_images/logoclients/logo-client_sheraton.jpg') top;}
.logo_spectra {background: url('../00_images/logoclients/logo-client_spectra.jpg') top;}
.logo_TeleQuebec {background: url('../00_images/logoclients/logo-client_TeleQuebec.jpg') top;}
.logo_TV5 {background: url('../00_images/logoclients/logo-client_TV5.jpg') top;}
.logo_Vtele {background: url('../00_images/logoclients/logo-client_Vtele.jpg') top;}


@media (min-width: 992px) and (max-width: 1199px) {
	.section-clients .alignement {padding: 30px 20px 0 0;}
}

@media (min-width: 768px) and (max-width: 991px) {
	.section-clients .alignement {padding: 30px 40px 0 0;}
}

@media (max-width: 767px) {
	.section-clientsx {height:1200px;}
	.section-clients .celluleG {text-align:center; padding-left:20%;}
	.section-clients .celluleD {text-align:center; padding-right:20%;}
}

@media (max-width: 399px) {
	.section-clients .celluleG {padding-left:0;}
	.section-clients .celluleD {padding-right:0;}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  GO                                                                                 */
/*                                                                                                     */
/*******************************************************************************************************/


.section-GO {
	background-color: #000; 
	height:250px; 
	background-attachment:fixed; 
	background-size:cover; 
	background-position:center; 
	text-align:center;
}

.section-GO.projets {background-image:url(../00_images/background-projets.jpg);}
.section-GO.resume {background-image:url(../00_images/background-projets.jpg);}

.section-GO .bordure {border:2px solid #ccc; padding:10px 50px;}
.section-GO h2 {line-height:0px; padding-top: 19px; font-size:55px; font-family: 'Montserrat', sans-serif;}

.section-GO .fa {line-height:0px; padding: 0 0 0 25px; font-size:50px;}
.section-GO.projets .fa {color: #a79d55;}
.section-GO.resume .fa {color: #02b2ca;}

.section-GO a,
.section-GO a:focus {color: #ccc; text-decoration: none;}
.section-GO.projets a:active, 
.section-GO.projets a:hover {color: #a79d55;}
.section-GO.resume a:active, 
.section-GO.resume a:hover {color: #02b2ca;}


@media (max-width : 1199px) {
	.section-GO {background-attachment: scroll;}
}

@media (max-width: 500px) {
	.section-GO h1 {font-size:38px;}
	.section-GO .fa {padding: 0 0 0 10px; font-size:34px;	}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  COMPETENCES                                                                        */
/*                                                                                                     */
/*******************************************************************************************************/


.section-competences {
	background-color: #000; 
	height:700px; 
	color:#999; 
	padding-top: 70px;
	text-align:center;
	background-image:url(../00_images/background-competence.png);
	background-repeat:no-repeat;
	background-position:center;

}

.section-competences h2 {
	color: #ca9a2e;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 2px;
	font-size:24px;
	margin-bottom:25px;
}

.section-competences .zone_cadran {
	padding:15px; 
	width:170px;
}

#canvas .circle {
	display: inline-block;
	margin: 0;
	padding:0;
}


.circles-text {
	color:#999;
	font-weight:bold;
}

@media (max-width: 767px) {
	.section-competences {
		background-color: #000; 
		height: auto; 
		color:#999; 
		padding: 60px 0; 
	}
	.section-competences .zone_cadran {
		padding:15px; 
		width:150px;
	}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  ÉTUDES                                                                             */
/*                                                                                                     */
/*******************************************************************************************************/


.section-etudes {
	text-align:center;
	background-color:#fff;
	padding-top:0px;
	padding-bottom:0px;
}

.section-etudes .etude {height:400px;}
.section-etudes .cas_CS {background-image:url(../00_images/background-cas_CS.jpg); background-size:cover; background-position:50% 40%; border-color:#FFF; border-width:50px 25px 25px 50px; border-style:solid;}
.section-etudes .cas_VM {background-image:url(../00_images/background-cas_QMS.jpg); background-size:cover; background-position:50% 30%;  border-color:#FFF; border-width:50px 50px 25px 25px; border-style:solid;}
.section-etudes .cas_JMM {background-image:url(../00_images/background-cas_JMM.jpg); background-size:cover; background-position:100% 40%; border-color:#FFF; border-width:25px 25px 50px 50px; border-style:solid;}
.section-etudes .cas_MT {background-image:url(../00_images/background-cas_MT.jpg); background-size:cover; background-position:20% 40%; border-color:#FFF; border-width:25px 50px 50px 25px; border-style:solid;}

.section-etudes .zone-photo {height:325px;}
.section-etudes .zone-texte {background-color: rgba(245, 245, 245, 0.9); height:325px;	padding-top:30px; text-align:center;}

.section-etudes .zone-texte .theme {
	border: 1px solid #ca9a2e;
	padding: 7px 5px 5px 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 15px;
	color: #02b2ca;
}

.section-etudes .zone-texte .chiffre {
	text-align:center;
	width:36px;
	height:36px;
	border-radius:18px;
	background-color:#ca9a2e;
	font-size:26px;
	line-height:0px;
	color:#FFF;
	padding-top:18px;
	position:relative;
	margin:auto;
}

.section-etudes .zone-texte .nom {
	font-size:21px;
	line-height: 21px;
	color:#333;
	padding-top:10px;
}

.section-etudes .zone-texte .tag {
	font-size:16px;
	color:#999;
	padding-top:10px;
}

.section-etudes .zone-texte .bouton {
	position: absolute;
	width:100%;
	bottom:30px;
	margin:0 -15px;
}

.btn-etudes {
	color: #fff;
	background-color: #02b2ca;
	border-color: transparent;
	border-radius: 5px;
	padding-top:6px;
}

.btn-etudes:hover,
.btn-etudes:focus,
.btn-etudes.focus,
.btn-etudes:active,
.btn-etudes.active,
.open > .dropdown-toggle.btn-etudes {color: #fff; background-color: #92d4d3;}


@media (min-width: 768px) and (max-width: 991px) {
	.section-etudes .etude {height:400px;}
	.section-etudes .cas_CS {background-position:50% 40%; border-width:40px 20px 20px 40px;}
	.section-etudes .cas_VM {background-position:50% 30%;  border-width:40px 40px 20px 20px;}
	.section-etudes .cas_JMM {background-position:100% 40%; border-width:20px 20px 40px 40px;}
	.section-etudes .cas_MT {background-position:20% 40%;  border-width:20px 40px 40px 20px;}
	.section-etudes .zone-photo {height:340px;}
	.section-etudes .zone-texte {height:340px;}
	.section-etudes .zone-texte .theme {font-size: 13px;}
	.section-etudes .zone-texte .nom {font-size:18px; line-height: 18px;}
	.section-etudes .zone-texte .tag {font-size:15px;}
}


@media (max-width: 767px) {
	.section-etudes {padding-top:15px; padding-bottom:15px;}
	.section-etudes .etude {height:380px;}
	.section-etudes .cas_CS {background-position:50% 40%; border-width:20px 30px;}
	.section-etudes .cas_VM {background-position:50% 30%;  border-width:20px 30px;}
	.section-etudes .cas_JMM {background-position:100% 40%; border-width:20px 30px;}
	.section-etudes .cas_MT {background-position:20% 40%;  border-width:20px 30px;}
	.section-etudes .zone-texte {height:340px;}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  CONTACT                                                                            */
/*                                                                                                     */
/*******************************************************************************************************/


.section-contact {
	background-color: #000; 
	height: auto; 
	background-image:url(../00_images/background-contact.jpg); 
	background-attachment:fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position:center;
	padding-top: 40px;
	padding-bottom: 60px;
	border-bottom:#999 1px solid;
}

.section-contact .presentationG {
	font-size:14px;
	padding: 20px 50px 20px 80px;
	text-align:justify;
}

.section-contact .presentationD {
	font-size:14px;
	padding: 20px 80px 20px 50px;
	text-align:justify;
}

.section-contact h2 {color:#eee; font-weight:500; font-size:40px; line-height:0; margin:0 0 40px 0; padding-top:15px;}

.section-contact h2 a {color:#eee; text-decoration: none;}

.section-contact h3 {
	color:#ccc;
	font-size:18px;
	font-weight: normal;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	margin-bottom:40px;
}

.section-contact .presentationG h3 {padding:0 0 30px 0;}
.section-contact .presentationD h3 {padding:0 0 30px 7px;}

.section-contact h4 {color:#ccc; font-size:24px;}
.section-contact h5 {line-height: 23px;	color:#999; font-size:16px;}

.form-control {
	height: 34px;
	padding: 6px 12px;
	font-size: 12px;
	color: #009ddc;
}

.form-group .control-label {
	text-align:left;
	margin:8px 0 20px 10px; 
	font-size:14px;
}

.form-group .champ-acces {
	padding:0px 15px;
	padding-left:0;
	padding-right:0;
}

.form-group .texte {
	color:#666;
	font-size:13px;
	line-height: 18px;
	font-weight:500;
	padding:0 15px;
}

.form-group .donnees {
	color:#009ddc;
	font-size:14px;
	line-height:13px;
	font-weight:500;
}

@media (max-width : 1199px) {
	.section-contact {background-attachment: scroll;}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.section-contact .presentationG {padding: 20px 40px 20px 60px;}
	.section-contact .presentationD {padding: 20px 60px 20px 40px;}
}

@media (min-width: 768px) and (max-width: 991px) {
	.section-contact .presentationG {padding: 20px 30px 20px 40px;}
	.section-contact .presentationD {padding: 20px 40px 20px 30px;}
}

@media (max-width: 767px) {
	.section-contact .presentationG {padding: 20px 15px;}
	.section-contact .presentationD {padding: 20px 10px;}
	.section-contact h3 {xfont-size:24px; padding:0 0 10px 0;}
	.form-group .donnees {font-weight:500; padding-top:8px;}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      ACCUEIL  -  FOOTER                                                                             */
/*                                                                                                     */
/*******************************************************************************************************/


.section-liens {
	background-color: #000; 
	min-height:70px; 
	text-align:center;
}

.section-liens ul {
	list-style: none;
	padding:0;
	padding-top:30px;
	line-height:25px;
}

.section-liens li {
	display:inline;
	padding:0 15px;
}


.section-liens li a {
	color:#666;
	font-size:13px;
}

.section-liens li a:active,
.section-liens li a:focus,
.section-liens li a:hover {
	color: #4470af;
	text-decoration:none;
}


.section-footer {
	background-color: #000; 
	height:250px; 
	text-align:center;
	padding-top: 77px;
}

.logo_syclone {
	display: inline-block;
	width: 160px;
	height: 100px;
	text-indent: -99999px;
	margin:0 10px;
	background: url('../00_images/logo-syclone_footer.png') top;
	background-size:cover;
}

.logo_syclone:hover {background-position: 0 -100px; background-repeat:no-repeat;}



@media (min-width: 500px) and (max-width: 767px) {.section-liens li {padding:0 10px;}}
@media (max-width: 499px) {.section-liens li {padding:0 5px;}}







/*******************************************************************************************************/
/*                                                                                                     */
/*      PAGES SECONDAIRES  -  ENTETE                                                                   */
/*                                                                                                     */
/*******************************************************************************************************/


.nom-syclone {position: fixed; top:23px; padding:0 40px; z-index:31;}
.page-top {position:fixed; height:70px; background-color:#000; width:100%; z-index:30;}

.header {position: relative; height:380px; background: url('../00_images/mosaique2.jpg') no-repeat; background-size: 100%; background-size: cover; overflow: hidden;}
.header .container {position: fixed; width:100%; z-index: 2;}
.header .row {position: absolute; top:160px; left:0; width:100%; margin:0; text-align:center;}

.header h1 {line-height:0px; font-size:60px; font-family: 'Montserrat', sans-serif; font-weight:700; color: rgba(0,107,183,.3); text-transform:uppercase;}
.header .bordure {border: 3px solid #ca9a2e; padding:40px 40px 50px 40px; z-index:60;}

#main-content{position: relative; background: #fff;	box-shadow: 0 -5px 5px rgba(0,0,0,.2); z-index: 10; xpadding-top:20px;}

@media (max-width: 767px) {
	.nom-syclone {padding:0 20px;}
	.header {height:285px;}
	.header .row {top:120px;}
	.header h1 {font-size:40px;}
	.header .bordure {padding:35px 20px 45px 20px;}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      PAGE SERVICES                                                                                  */
/*                                                                                                     */
/*******************************************************************************************************/


.services {padding-top:40px; padding-bottom: 20px; text-align:left; font-size:14px; line-height:23px; color:#aaa;}
.services h2 {padding: 10px 0 20px 0; text-transform:uppercase;}
.services .numerique h2 {color:#f08573;}
.services .design h2 {color:#02b2ca;}
.services .edition h2 {color:#68b9a0;}
.services .numerique {padding:0px 45px 15px 70px; text-align:left; border-right:2px #b2d2e9 dashed; height:750px;}
.services .design {padding:0px 70px 15px 45px; text-align:left; border-right:2px #b2d2e9 dashed; height:750px;}
.services .edition {padding:0px 70px 15px 45px; text-align:left;}

.services .rondelle {
	width:60px; 
	height:60px; 
	color:#FFF; 
	border-radius:30px; 
	margin-bottom:40px; 
	text-align:center; 
	left:40px; 
	padding-top:32px; 
	font-size:22px; 
	line-height:0; 
	position: relative;
}

.services .rondelle.nu {background-color:#f08573;}
.services .rondelle.ds {background-color:#02b2ca;}
.services .rondelle.ed {background-color:#68b9a0;}


@media (min-width: 768px) and (max-width: 991px) {
	.services .rondelle {xleft:0px;}
	.services .numerique,
	.services .design,
	.services .edition {padding:0px 60px 20px 60px; height: auto; border-right:none; margin-bottom:40px;}
}


@media (max-width: 767px) {
	.services .rondelle {xleft:0px;}
	.services .numerique,
	.services .design,
	.services .edition {padding:0px 30px 30px 80px; border-right: none; height:auto; margin-bottom:40px;}
}


@media (max-width: 499px) {
	.services .numerique,
	.services .design,
	.services .edition {padding:0px 30px 30px 60px; text-align:left}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      PAGE ÉQUIPE                                                                                    */
/*                                                                                                     */
/*******************************************************************************************************/


.equipe {padding-top:40px; padding-bottom: 20px; text-align:left; font-size:14px; line-height:23px; color:#aaa;}
.equipe .syclone {padding:0px 45px 15px 70px; text-align:left;}
.equipe .andre {padding:0px 70px 30px 45px; text-align:left; border-bottom:2px #b2d2e9 dashed; border-left:2px #b2d2e9 dashed;}
.equipe .gregoire {padding:30px 70px 30px 45px; text-align:left; border-bottom:2px #b2d2e9 dashed; border-left:2px #b2d2e9 dashed;}
.equipe .fred {padding:30px 70px 0 45px; text-align:left; border-left:2px #b2d2e9 dashed;}

.equipe .rondelle {
	width:60px; 
	height:60px; 
	color:#FFF; 
	border-radius:30px; 
	margin-bottom:40px; 
	text-align:center; 
	left:40px; 
	padding-top:32px; 
	font-size:22px; 
	line-height:0; 
	position: relative;
}

.equipe .rondelle.sy {background-color:#02b2ca;}
.equipe .rondelle.ad {background-color:#d85f59;}
.equipe .rondelle.gb {background-color:#d85f59;}
.equipe .rondelle.fc {background-color:#d85f59;}

@media (min-width: 768px) and (max-width: 991px) {
	.equipe .rondelle {left:0px;}
	.equipe .syclone {padding:20px 60px;}
	.equipe .andre, 
	.equipe .gregoire,
	.equipe .fred {padding:20px 60px; border-bottom:none; border-left: none;}
}


@media (max-width: 767px) {
	.equipe {text-align: center;}
	.equipe .rondelle {left:0px;}
	.equipe .syclone {padding:20px 50px;}
	.equipe .andre, 
	.equipe .gregoire,
	.equipe .fred {padding:20px 50px; border-bottom:none; border-left: none;}
}


@media (max-width: 499px) {
	.equipe .syclone {padding:0px 30px 30px 30px; text-align:left}
	.equipe .andre, 
	.equipe .gregoire,
	.equipe .fred {padding:0px 30px 30px 30px; text-align:left; border-bottom:none; border-left: none;}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      PAGE PROJETS                                                                                   */
/*                                                                                                     */
/*******************************************************************************************************/


.container.projets {text-align:center; margin-bottom:100px;}
.container.projets .btn-group {margin: 60px auto 20px auto;}
.container.projets .btn-group .btn {padding:7px 20px; font-size: 16px; border-color:#b9c4cC; color:#858a95;	-webkit-transition: all .2s ease-out; transition: all .2s ease-out;}
.container.projets .btn-group .btn:hover {color:#39444C;}
.container.projets .btn-group .btn.active {color:#00CCCB; background:#fff; box-shadow: none;}
.container.projets .btn-group .btn:first-child {border-top-left-radius: 7px; border-bottom-left-radius: 7px;}
.container.projets .btn-group .btn:last-child {border-top-right-radius: 7px; border-bottom-right-radius: 7px;}

.portfolioFilter a {color:#666; text-decoration:none; background-color:#fcfcfc;}
.portfolioFilter a.current {background-color:#eee;}

.portfolioContainer {margin: 0 auto; width:960px; padding-top:10px;}
.portfolioContainer .item { }
.portfolioContainer .item img {width:150px; height:150px; margin:45px; border:1px solid #dedede; xcursor: zoom-in;}
.portfolioContainer .item.design img {border:0px solid #dedede; cursor: zoom-in;}
 
.portfolioContainer .tooltip {z-index: 50;}
.portfolioContainer .tooltip.in {filter: alpha(opacity=100); opacity: 1;}
.portfolioContainer .tooltip.top {padding: 0px 0 0 0px; margin-top: -72px;}

.portfolioContainer .tooltip-inner {
	max-width: 200px;
	padding: 7px 10px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background-color: #ccc;
	border-radius: 5px;
	font-size:12px;
}
.portfolioContainer .tooltip-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}
.portfolioContainer .tooltip.top .tooltip-arrow {
	top: 33px;
	left: 50%;
  	margin-left: -5px;
	border-width: 5px 5px 0;
	border-top-color: #666;
}

.isotope-item {z-index: 2;}
.isotope-hidden.isotope-item {pointer-events: none; z-index: 1;}

.isotope,
.isotope .isotope-item {
	-webkit-transition-duration: 0.8s;
       -moz-transition-duration: 0.8s;
            transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
       -moz-transition-property: height, width;
            transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
       -moz-transition-property: -moz-transform, opacity;
            transition-property: transform, opacity;
}


@media (min-width: 992px) and (max-width: 1199px) {
	.portfolioContainer{margin: 0 auto; width:920px;}
	.portfolioContainer .item img {margin:40px;}
}

@media (min-width: 680px) and (max-width: 991px) {
	.portfolioContainer{margin: 0 auto; width:640px;}
	.portfolioContainer .item img {margin:30px;}
}

@media (min-width: 520px) and (max-width: 679px) {
	.portfolioContainer{margin: 0 auto; width:480px;}
	.portfolioContainer .item img {margin:30px 45px;}
}

@media (min-width: 380px) and (max-width: 519px) {
	.container.projets .btn-group .btn {padding:7px 15px;}
	.portfolioContainer {margin: 0 auto; width:350px;}
	.portfolioContainer .item img {margin: 20px 12px;}
}

@media (max-width: 379px) {
	.container.projets .btn-group .btn {padding:7px 15px;}
	.portfolioContainer{margin: 0 auto; width:150px;}
	.portfolioContainer .item img {margin:0 0 45px 0;}
	.portfolioContainer .item.design img {margin:0 0 1px 0;}
}

@media (max-width: 767px) {
	.tooltip {visibility: hidden;}
	.container.projets .btn-group {margin: 30px auto 30px auto; display: inherit; vertical-align: middle;}
	.container.projets .btn-group > .btn {float: none; margin: 5px 10px; width:260px;}
	.container.projets .btn-group .btn:first-child {border-top-left-radius: 0; border-bottom-left-radius: 0;}
	.container.projets .btn-group .btn:last-child {border-top-right-radius: 0; border-bottom-right-radius: 0;}
}













/*******************************************************************************************************/
/*                                                                                                     */
/*      EXTRAS                                                                                         */
/*                                                                                                     */
/*******************************************************************************************************/



.row.text-center > div {
    display: inline-block;
    float: none;
}


.btn-principal {
	color: #fff;
	background-color: #ca9a2e;
	border-color: transparent;
	border-radius: 5px;
	padding:10px 20px;
}

.btn-principal:hover,
.btn-principal:focus,
.btn-principal.focus,
.btn-principal:active,
.btn-principal.active,
.open > .dropdown-toggle.btn-principal {
	color: #fff;
	background-color: #666;
}



.T10 {padding-top:10px;}
.T20 {padding-top:20px;}
.T30 {padding-top:30px;}
.T40 {padding-top:40px;}
.T60 {padding-top:60px;}
.B10 {padding-bottom:10px;}
.B20 {padding-bottom:20px;}
.B30 {padding-bottom:30px;}
.B40 {padding-bottom:40px;}
.B60 {padding-bottom:60px;}



#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 25px;
    background: rgb(0, 0, 0);
    background: rgba(200, 200, 200, 0.6);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	z-index:100;
}

#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 10px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	z-index:100;
}



@media screen and (min-color-index:0) 
and(-webkit-min-device-pixel-ratio:0) { @media
{
    .xsection-entete_safari {padding-right: 15px;}
    .xsection-equipe_safari {border-right-width:22px;}
}}


@media (max-width : 1199px) {}

@media (min-width: 992px) and (max-width: 1199px) {

}

@media (min-width: 768px) and (max-width: 991px) {

}

@media (max-width: 767px) {

}


@media (min-width: 600px) and (max-width: 767px) {}
@media (min-width: 500px) and (max-width: 599px) {}
@media (min-width: 400px) and (max-width: 499px) {}
@media (max-width: 399px) {}