@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto'); /* font-family: 'Roboto', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Raleway');

/* Header */
#logo {text-align:center}
#logo p {background: #33b2e9; color:#fff; margin:0; padding:5px; font-size:20px; font-family:Arial, Helvetica, sans-serif; text-transform: uppercase }
#slogan {background: #494947}
#slogan p {font-size:18px; font-family:Arial, Helvetica, sans-serif; text-align:center; color:#fff; padding:10px 0 ; line-height:30px; margin:0}
#slogan p a {color:#fff; text-decoration: none}
@media (max-width: 992px) {
#logo {text-align:center}
#slogan p {font-size:18px;text-align:center}
}
/*header*/


/*MENU*/
a.apeller {display:none}

.affix {
top: 0;
width: 100%; z-index:99999
}

.affix .navbar-nav { float: right; text-align:right}
  
  
 @media (max-width: 767px) { 
.affix .navbar-nav { float: none; text-align:center}
 }
  
.affix a.apeller {display:block; position:absolute; margin:0px}

.affix + .container-fluid {
      padding-top: 70px;
}



.navbar-nav {
width: 100%;
text-align: center;
}
	  .affix .navbar-nav { width: 90%;margin:0 auto}
.navbar-nav li {
float: none;
display: inline-block;
}

 @media (max-width: 767px) { 
	 
.navbar-nav {
width: auto;
text-align: center;
} 
	 
.nav > li {
    position: relative;
    display: block;
}
}


.navbar-brand {position:absolute; padding: 0px; margin: 0px}





.navbar {
    min-height: 50px;
    margin-bottom:0px;
    border:none;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent; border-radius:0px
}
.navbar.affix {min-height: 100px; background: rgba(73,73,71,0.5)}
.navbar.affix .nav > li > a {margin:25px 0;}
.navbar-default {
    background-color: #33B2E9;
    border-color: #fff;
}
.navbar-brand > img {

    margin:10px 0;

}
.nav > li > a {
	margin:5px 0;
    padding: 10px 15px;
    color: #fff;
    font-size: 18px;
	font-family: 'Roboto', sans-serif;
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
    color: #fff;
    background-color: #494947;
}

.nav > li > a.current
{
background-color: #fff;
color: #494947;
}
.dropdown-menu {
	background: #33B2E9; 
	font-family: 'Roboto', sans-serif;
}
.dropdown-menu > li {; width:100%; text-align: center}
.dropdown-menu > li > a {color:#fff; padding:5px 10px}
.dropdown-menu > li > a:hover {background: #494947; color:#fff}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
    background: #494947; color:#fff
}
/*Fin MENU*/

.carousel-caption h3 {background:rgba(255,255,255,0.9); color:#33B2E9; text-shadow: none; padding:10px 0; font-family: 'Roboto', sans-serif;font-size:30px; text-transform: uppercase}
.carousel-control:focus, .carousel-control:hover {

    color: #33B2E9;

}
h1 {font-family: 'Roboto', sans-serif;font-size:36px;border-bottom:1px solid #33B2E9;color:#494947; margin:20px 0 30px}


h2 {font-family: 'Roboto', sans-serif;font-size:24px;color:#33B2E9;}


/*footer*/
a {

    color: #333;
    text-decoration: none;

}
footer {background:#494947; padding: 20px; border-top:3px solid #33B2E9; color:#fff}
footer p a {color:#fff}
footer p a:hover {color:#33B2E9}
div#logo-distributeur > a {text-decoration:none;display:block;width:50px;height:70px;background:none no-repeat top left transparent;right:10px; position: absolute}
div#logo-distributeur > a.distal {background-image:url('../charte/logo-al.png')}
div#logo-distributeur > a.distar {background-image:url('../charte/logo-ar.png')}
div#logo-distributeur > a.distco {background-image:url('../charte/logo-co.png')}
div#logo-distributeur > a.disteo {background-image:url('../charte/logo-eo.png')}
div#logo-distributeur > a.distsi {background-image:url('../charte/logo-si.png')}


#liens-referencement {font-size:11px;text-align:center}
#liens-referencement a {color:#000}
/*fin footer*/







/* Typography */
/**************************/
#parallax-world-of-ugg h1 {font-family: 'Roboto', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color:black; padding:0; margin:0;}
#parallax-world-of-ugg h2 {font-family: 'Roboto', sans-serif; font-size:36px; letter-spacing:10px; text-align:center; color:#33B2E9; font-weight:400; text-transform:uppercase; z-index:10; opacity:.9;}
#parallax-world-of-ugg h3 {font-family: 'Roboto', sans-serif;  font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
#parallax-world-of-ugg p {font-family: 'Roboto', sans-serif;  font-weight:400; font-size:16px; line-height:24px; text-align: center; color:#fff;text-transform:uppercase; }
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}


/* Section - Title */
/**************************/
#parallax-world-of-ugg .title {background: white; padding: 60px; margin:0 auto; text-align:center;}
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}

/* Section - Block */
/**************************/
#parallax-world-of-ugg .block {background: white; padding: 60px; width:820px; margin:0 auto; text-align:justify;}
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.5;}

/* Section - Parallax */
/**************************/
#parallax-world-of-ugg .parallax-one {padding-top: 100px; padding-bottom: 100px; overflow: hidden; position: relative; width: 100%; background-image: url( ../charte/4.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}
#parallax-world-of-ugg .parallax-two {padding-top: 100px; padding-bottom: 100px; overflow: hidden; position: relative; width: 100%; background-image: url( ../charte/5.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
#parallax-world-of-ugg .parallax-three {padding-top: 100px; padding-bottom: 100px; overflow: hidden; position: relative; width: 100%; background-image: url(  ../charte/6.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}

/* Extras */
/**************************/
#parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}

/* Media Queries */
/**************************/
@media screen and (max-width: 959px) and (min-width: 768px) {
  #parallax-world-of-ugg .block {padding: 40px; width:620px;}
}
@media screen and (max-width: 767px) {
  #parallax-world-of-ugg .block {padding: 30px; width:420px;}
  #parallax-world-of-ugg h2 {font-size:30px;}
  #parallax-world-of-ugg .block {padding: 30px;}
  #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three {padding-top:100px; padding-bottom:100px;}
}
@media screen and (max-width: 479px) {
  #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
}


/*---------------------- DEBUT INTEGRATION ------------------------------ */

.text-primary {color: #33B2E9;}
h4 {font-family: 'Raleway', sans-serif;}
p {font-family: 'Raleway', sans-serif; font-size: 15px}
p a { color: #333}
ul li {font-family: 'Raleway', sans-serif; font-size: 15px}
ol li {font-family: 'Raleway', sans-serif; font-size: 15px}

.panel-default > .panel-heading { background-color: #33B2E9}
.panel-title { color: #FFF}

/******* debut animation vignette ***********/

.box a{padding:10px; text-decoration:none;  margin:-140px 0px 0px 0px; display:inline-block; opacity:0; transition:all 0.5s ease-in-out; cursor: pointer; position: absolute;}
.box .overlay:hover {opacity:0.1; transition:all 0.5s ease-in-out; width:100% }
/*.box:hover {box-shadow:0px 0px 10px #6A6A6A; transition:all 0.5s ease-in-out;}*/
.box:hover a {opacity:1; background:#33B2E9; color:#FFF; margin:-80px 0px 0px 25px; }
.box a:hover { transition:all 0.5s ease-in-out;   }


/******* fin animation vignette ***********/


/********* Galerie de photos ****************/


*
{
 
    transition: all .5s;

}

.work-item{
    margin-bottom: 15px;
    overflow: hidden;
}
.work-item a 
{
    display: block;
    overflow: hidden;
}

.work-item a img{
    margin: 0 auto; border: 0
}
.work-item>a>img:hover{
    transform: scale(1.2,1.2); opacity: 0.5
       
}

/************ FIN GALERIE DE PHOTOS **********************/