/* External CSS */

@import url("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

html {
  scroll-behavior: smooth;
}

body {
background: #fff;
font-family: 'Raleway', sans-serif;
font-weight:400;
font-size:17px;
color:#707463;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
margin:0;
padding:0;
}

img {
max-width:100%;
}

.clear {
clear:both;
}


.alignleft {
float:left;
}

.alignright {
float:right;
}

.centered {
display:block;
margin:10px auto;
}

h2.centered {
text-align:center;
}

.w50 {
width:49%;
}

h2.title-caps {
font-size:30px;
text-transform:uppercase;
text-align:center;
}

h2.title {
font-size:30px;
margin-top:40px;
text-align:center;
}

h2.title.no-margin {
margin-top:0px;
}

.title {
line-height:1.5;
}

#header {
display:block;
padding:20px 30px 8px 30px;
position:relative;
}

#header img {
display:block;
width:160px;
float:left;
}

#header ul {
margin:70px 0 0 0;
padding:0;
text-align:right;
float:right;
}

#header ul li {
list-style:none;
display:inline-block;
margin:0 20px;
}

#header ul li a {
text-decoration:none;
text-transform:uppercase;
color:#85754E;
font-weight:bold;
font-size:17px;
transition: all 0.5s linear;
}

#header ul li a:hover {
color:#000;
}

.section {
position:relative;
min-height:400px;
margin:0 0 100px 0;
}

.wrapper {
margin:auto;
}

.wrapper.s {
width:85%;
max-width:995px;
}

.wrapper.m {
width:90%;
max-width:1180px;
}

.wrapper.l {
width:95%;
max-width:1250px;
}

#story {
width:60%;
float:right;
background: url(../images/bg-story.png) left bottom no-repeat;
}

#story div {
margin:0 0 0 100px;
}

#story h1 {
font-size:120px;
margin:-28px 0 0 -10px;
letter-spacing:15px;
}

#story h3 {
font-size:35px;
margin:-20px 0 0 -3px;
letter-spacing:3px;
font-weight:400;
}

#story p {
line-height:1.7;
}

#story p:last-child {
margin-bottom:-5px;
}

#banner1, #banner2 {
width:100%;
height:394px;
background-size:100% !important;
}

#banner1 {
background: url(../images/banner1.jpg) center top no-repeat;
background-attachment: fixed;
}

#banner2 {
background: url(../images/banner2.jpg) center top no-repeat;
background-attachment: fixed;
}


#brands .wrapper {
display:flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: row;
text-align:center;
}

#brands .wrapper .container {
position:relative;
box-sizing: border-box;
display:block;
width:228px;
max-width:100%;
height:228px;
margin:20px;
background-size:100% !important;
background:#D7D7D7;
display:flex;
flex-direction: row;
text-align:center;
}

#brands .wrapper .container .filter {
position:absolute;
background:#fff;
width:228px;
max-width:100%;
height:228px;
opacity:0.4;
z-index:1;
transition: all 0.5s linear;
}

#brands .wrapper .container img {
width:70%;
display:block;
align-self:center;
margin:auto;
opacity:1;
z-index:2;
transition: all 0.5s linear;
}

#brands .wrapper .container a {
position:absolute;
width:228px;
max-width:100%;
height:228px;
z-index:3;
}

#brands .wrapper .container:hover .filter{
opacity:0;
}

#brands .wrapper .container:hover img {
opacity:0.4;
}


#brands .wrapper .clairefontaine {
background: url(../images/brands-clairefontaine.jpg) center center no-repeat;
}

#brands .wrapper .rhodia {
background: url(../images/brands-rhodia.jpg) center center no-repeat;
}

#brands .wrapper .decopatch {
background: url(../images/brands-decopatch.jpg) center center no-repeat;
}

#brands .wrapper .avm {
background: url(../images/brands-avm.jpg) center center no-repeat;
}

#brands .wrapper .silverbrush {
background: url(../images/brands-silverbrush.jpg) center center no-repeat;
}

#brands .wrapper .pebeo {
background: url(../images/brands-pebeo.jpg) center center no-repeat;
}

#brands .wrapper .maildor {
background: url(../images/brands-maildor.jpg) center center no-repeat;
}

#brands .wrapper .chronicle-gifts {
background: url(../images/brands-chronicle-gift.jpg) center center no-repeat;
}

#brands .wrapper .chronicle-sta {
background: url(../images/brands-chronicle-sta.jpg) center center no-repeat;
}

#brands .wrapper .laurenceking-gifts {
background: url(../images/brands-laurenceking-gifts.jpg) center center no-repeat;
}

#brands .wrapper .pepin-press {
background: url(../images/brands-pepin.jpg) center center no-repeat;
}


#partner {
text-align:center;
}

#partner form {
width:90%;
margin:20px auto;
text-align:left;
}

#partner form label {
display:block;
margin:30px 0 15px 0;
font-weight:bold;
text-transform:uppercase;
}

#partner form input[type="text"],
#partner form textarea {
border:1px solid #cccccc;
width:100%;
padding:20px;
box-sizing: border-box;
}

#partner form textarea {
height:300px;
}

#partner form input[type="submit"] {
clear:both;
background:#85754E;
color:#fff;
margin:20px 0;
padding:10px 25px;
border:0px;
float:right;
opacity:1.0;
}

#partner form input[type="submit"]:disabled {
opacity:0.3;
}

#partner .g-recaptcha {
float:right;
margin:20px 0 0 0;
}

#success {
display:none;
clear:both;
width:100%;
text-align:center;
color:green;
}

.back-to-top {
font-family:"FontAwesome";
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #fff;
background: #707463;
font-size: 25px;
padding: 7px 15px;
display: none;
z-index:999;
cursor: pointer;
}

.back-to-top:before {
content: "\f106";
}

.back-to-top:hover {
background: #000;
}

@media only screen and (max-width: 1024px) {

#header img {
margin:10px auto;
float:none;'
}

#header ul {
margin:10px auto;
padding:0;
text-align:center;
float:none;
}

#header ul li {
display:block;
margin:20px 0;
}

.alignleft {
float:none;
}

.alignright {
float:none;
}

.w50 {
width:100%;
}

.title {
text-align:center;
}

}

@media only screen and (max-width: 767px) {

#story {
width:100%;
float:none;
}

#story div {
margin:0 0 0 70px;
}

#brands .wrapper .container {
width:315px;
height:315px;
margin:10px;
}

#brands .wrapper .container .filter {
width:315px;
height:315px;
}

#brands .wrapper .container a {
width:315px;
height:315px;
}

@media only screen and (max-width: 480px) {

#brands .wrapper .container {
width:355px;
height:355px;
margin:10px auto;
}

#brands .wrapper .container .filter {
width:355px;
height:355px;
}

#brands .wrapper .container a {
width:355px;
height:355px;
}

}