/***********/
/* Imports */
/***********/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;800&display=swap');
@import url('//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');

/****************/
/* Reset Styles */
/****************/
body {
    margin:0;
    font-family: 'Montserrat', 'Verdana', sans-serif;
    color: #222221;
}

/*****************/
/* Global Styles */
/*****************/
.button {
    display: inline-block;
    padding: 20px 25px;
    text-decoration: none;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .1em;
    cursor:pointer;
    border: none;
    background-image: linear-gradient(#306042, #306042), linear-gradient(#222221, #222221);
    background-size: 0 5px, auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    transition: all .2s ease-out;
}

.button:hover {
    background-size: 100% 5px, auto;
}

::selection {
    background: #306042; /* WebKit/Blink Browsers */
    color: #FFF;
}
::-moz-selection {
    background: #306042; /* Gecko Browsers */
    color: #FFF;
}

/**********/
/* Header */
/**********/
header, #header {
    background: #fcf9f0;
    padding:25px 15px;
}

#logo {
    margin:0 auto;
    display:block;
}

#header .content {
    display:flex;
    justify-content: space-between;
    margin:50px 120px;
}

.left-image {
    position:relative;
    height:580px;
}

.left-image .hero {
    width:660px;
}

.left-image .welcome-icon {
    position: absolute;
    width: 100px;
    bottom: 31%;
    left: 11%;
    z-index:1;
    -webkit-animation: rotating 15s linear infinite;
    -moz-animation: rotating 15s linear infinite;
    -ms-animation: rotating 15s linear infinite;
    -o-animation: rotating 15s linear infinite;
    animation: rotating 15s linear infinite;
}

.right-text {
    padding: 0 100px;
    margin-top: 50px;
    max-width:510px;
}

.right-text h1 {
    text-transform: uppercase;
    text-align:center;
}

.right-text button {
    margin:45px auto 0 auto;
    display:block;
}

@media (max-width:1390px) {
    #header .content {
        margin-left:0;
        margin-right:0;
    }
}

@media (max-width:1120px) {
    #header .content {
        display:block;
        text-align:center;
    }

    .left-image {
        height: auto;
    }

    .right-text {
        max-width: unset;
        padding: 0;
        width: 60%;
        margin: 0 auto;
        text-align: left;
    }

    .left-image .welcome-icon {
        left:24%;
        bottom:17%;
    }
}

@media (max-width:940px) {
    .left-image .welcome-icon {
        left:18%;
    }

    .right-text {
        width: 100%;
    }
}

@media (max-width:770px) {
    .left-image .hero {
        width:100%;
    }

    .left-image .welcome-icon {
        left:10%;
    }
}

@media (max-width:770px) {
    .left-image .welcome-icon {
        width:70px;
    }
}

/********************/
/* Announcement Bar */
/********************/
#announcement-bar {
    position:relative;
    overflow:hidden;
    background-color:#306042;
    display:flex; 
    align-items:center;
    overflow-x: hidden;
}

.scroll-text-bar {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    padding: 0;
    will-change: transform;
}

#announcement-bar p {
    color:#FFF;
    font-size:30px;
    letter-spacing:5px;
    font-weight:100;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:100px;
    display: inline-block;
}

/***********/
/* Reasons */
/***********/
#reasons {
    margin:25px 50px;
    display:flex;
    justify-content:space-between;
}

#reasons .col {
    background:#d9e4da;
    padding:50px 20px;
    margin:0 15px;
    width: calc(58% / 6);
    text-align:center;
}

#reasons .col img {
    height:90px;
    margin: 10px 0;
}

#reasons .col p {
    font-size:12px;
}

@media(max-width:1160px) {
    #reasons {
        flex-wrap:wrap;
        margin:25px 15px 0px 15px;
        justify-content: center;
    }

    #reasons .col {
        width: 20%;
        margin-bottom:25px;
    }
}

@media(max-width:569px) {
    #reasons .col {
        width: calc(44% - 30px);
        padding:20px 10px;
    }

    #reasons .col img {
        height:50px;
    }
}

/************/
/* Examples */
/************/
#examples {
    background:#fcf9f0;
    position:relative;
}

#examples .options {
    margin:0 auto;
    display:block;
    position:relative;
    z-index:1;
    max-width:100%;
}

#examples .blob {
    position:absolute;
    right:0;
    bottom:11%;
}

@media(max-width:1330px) {
    #examples .blob {
        display:none;
    }
}

/********/
/* Find */
/********/
#find {
    display:flex;
    margin:25px 50px;
    justify-content:space-between;
}

#find .title {
    width:25%;
}

#find .locations {
    width:75%;
    padding-left:40px;
}

#find .title h2 {
    color:#a7a7a7;
    font-weight:800;
    text-transform:uppercase;
    text-align:right;
    font-size:40px;
    margin:0;
}

#find .locations .slick-list {
    float:left;
    width:92%;
}

#find .locations .slick-slide {
    text-align:center;
}

#find .locations .slick-list img {
    display:block;
    margin:0 auto;
    max-width:100%;
}

#find .locations .slick-list img.planet-organic {
    height:74px;
    margin-top:10px;
}

#find .locations .slick-list img.zapp,
#find .locations .slick-list img.gorillas {
    margin-top:23px;
    width:140px;
}

#find .locations .slick-list img.selfridges {
    margin-top:22px;
}

#find .locations .slick-list img.atis {
    margin-top:15px;
}

#find .locations .slick-list img.nathalie {
    margin-top:35px;
}

#find .locations .slick-list img.wholefoods {
    height:80px;
}

#find .locations .slick-prev {
    float:left;
}

#find .locations .slick-prev,
#find .locations .slick-next {
    background:none;
    border:none;
    cursor:pointer;
    margin-top:32px;
}

#find .locations .slick-prev img,
#find .locations .slick-next img {
    height:30px;
}

#find .locations .slick-next {
    float:right;
}

#find .locations .slick-next img {
    -webkit-transform:rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

@media (max-width:1250px) {
    #find .title h2 {
        font-size:30px;
    }

    #find .locations {
        width:72%;
    }
    
    #find .locations .slick-list {
        width:89%;
    }

    #find .locations .slick-prev,
    #find .locations .slick-next {
        margin-top:20px;
    }

    #find .locations .slick-list img.planet-organic {
        margin-top:0px;
    }

    #find .locations .slick-list img.zapp,
    #find .locations .slick-list img.gorillas {
        margin-top:13px;
        width:120px;
    }
    
    #find .locations .slick-list img.selfridges {
        margin-top:14px;
    }

    #find .locations .slick-list img.atis {
        margin-top:7px;
    }
    
    #find .locations .slick-list img.nathalie {
        margin-top:27px;
    }
    
    #find .locations .slick-list img.wholefoods {
        height:73px;
    }
}

@media (max-width:912px) {
    #find {
        margin: 25px 15px;
    }
    #find .title h2 {
        font-size:20px;
        margin-top:10px;
    }

    #find .locations .slick-list {
        width:82%;
    }

    #find .locations .slick-prev,
    #find .locations .slick-next {
        margin-top:23px;
    }

    #find .locations .slick-prev img,
    #find .locations .slick-next img {
        height:20px;
    }

    #find .locations .slick-list img.planet-organic {
        height:60px;
    }

    #find .locations .slick-list img.zapp,
    #find .locations .slick-list img.gorillas {
        margin-top:7px;
        width:110px;
    }
    
    #find .locations .slick-list img.selfridges {
        margin-top:6px;
        width:200px;
    }

    #find .locations .slick-list img.atis {
        margin-top:0;
    }
    
    #find .locations .slick-list img.nathalie {
        margin-top:15px;
    }
    
    #find .locations .slick-list img.wholefoods {
        height:60px;
    }
}

@media (max-width:600px) {
    #find .title {
        width:35%;
    }

    #find .title h2 {
        font-size:16px;
    }

    #find .locations {
        padding-left:10px;
        width:65%;
    }

    #find .locations .slick-list {
        width:69%;
    }
}

/************/
/* Stockist */
/************/
#stockist {
    display:flex;
}

#stockist .reason, #stockist .form {
    width:50%;
    padding:100px 50px;
}

#stockist .reason {
    background:#fcf9f0;
}

#stockist .reason h2 {
    font-size:40px;
    text-align:center;
    text-transform:uppercase;
}

#stockist .reason .content {
    width:70%;
    display:block;
    margin:0 auto;
}

#stockist .reason .button {
    margin:50px auto 0 auto;
    display:block;
}

#stockist .form {
    background:#d9e4da;
    position:relative;
    overflow:hidden;
}

#stockist form {
    width: 80%;
    display: block;
    margin: 0 auto;
    margin-top:50px;
}

.field {
    margin-bottom:20px;
    display:block;
}

label {
    color:#306042;
    font-weight:800;
    margin-bottom:5px;
    display:block;
    text-transform:uppercase;
    font-size:19px;
}

input {
    display: block;
    border: none;
    width: 100%;
    padding: 10px 5px;
    box-sizing: border-box;
}

.field small {
    font-style:italic;
    color:#306042;
}

#error-msg {
    color:#a6151c;
    display:block;
    margin:10px 0;
    font-weight:800;
}

#success-msg {
    color:#306042;
    display:block;
    margin:10px 0;
    font-weight:800;
}

#submit-btn {
    display: block;
    margin: 30px auto 0 auto;
    padding: 20px 80px;
}

.field.website {
    position:absolute;
    left:500000px;
}

@media(max-width:1080px) {
    #stockist {
        display:block;
    }

    #stockist .reason, #stockist .form {
        width:auto;
        padding:50px 15px;
    }
}

@media(max-width:960px) {
    #stockist .reason .content {
        width:auto;
    }

    #stockist form {
        width: auto;
        margin-top:0;
    }
}

/************/
/* Products */
/************/
#products {
    margin:50px;
}

#products .slider div {
    text-align:center;
}
#products .slider div img {
    width:90%;
    display:block;
    margin:0 auto;
}
#products .slider div h3 {
    text-transform:uppercase;
    margin-bottom:0;
}
#products .slider div p {
    margin-top:5px;
    font-size:12px;
}

#products .slick-list {
    width:95%;
    margin:0 auto;
}

#products .slick-prev,
#products .slick-next {
    background:none;
    border:none;
    cursor:pointer;
    position:absolute;
    top:40%;
    z-index:1;
}

#products .slick-disabled {
    opacity:.2;
}

#products .slick-prev img,
#products .slick-next img {
    height:50px;
}

#products .slick-next {
    right:0;
}

#products .slick-prev {
    left:0;
}

#products .slick-next img {
    -webkit-transform:rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

@media (max-width:912px) {
    #products {
        margin: 25px 15px;
    }
}

/***********/
/* Seen In */
/***********/
#seen_in {
    background: #c0c0c0;
    display:flex;
    padding:50px;
    justify-content:space-between;
}

#seen_in .title {
    width:25%;
}

#seen_in .locations {
    width:75%;
    padding-left:40px;
}

#seen_in .title h2 {
    color:#FFFFFF;
    font-weight:800;
    text-transform:uppercase;
    text-align:right;
    font-size:45px;
    margin:0;
}

#seen_in .title h2.mobile {
    display:none;
}

#seen_in .slick-list img.vf-london {
    width: 60%;
    margin: 0 auto;
}

#seen_in .slick-list img.porter {
    width: 80%;
    margin:14px auto 0 auto;
}

#seen_in .slick-list img.vogue {
    width: 55%;
    margin: 0 auto;
}

#seen_in .slick-list img.tatler {
    width: 55%;
    margin: 0 auto;
}

#seen_in .slick-list img.evening-standard {
    width: 90%;
    margin: 10px auto 0 auto;
}

#seen_in .slick-list img.gq {
    width: 36%;
    margin: 0 auto;
}

#seen_in .slick-list {
    width:95%;
    margin:0 auto;
}

#seen_in .slick-prev,
#seen_in .slick-next {
    background:none;
    border:none;
    cursor:pointer;
    position:absolute;
    top:25%;
    z-index:1;
}

#seen_in .slick-disabled {
    opacity:.2;
}

#seen_in .slick-prev img,
#seen_in .slick-next img {
    height:30px;
}

#seen_in .slick-next {
    right:0;
}

#seen_in .slick-prev {
    left:0;
}

#seen_in .slick-next img {
    -webkit-transform:rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

@media (max-width:1347px) {
    #seen_in .title h2 {
        font-size:40px;
    }
}

@media (max-width:1228px) {
    #seen_in .title h2 {
        font-size:30px;
        margin-top:11px;
    }
}

@media (max-width:989px) {
    #seen_in {
        padding: 25px 15px;
    }

    #seen_in .title h2 {
        margin-top:4px;
    }
}

@media (max-width:912px) {
    #seen_in .title h2 {
        margin-top:0px;
    }

    #seen_in .title h2.mobile {
        display:block;
    }

    #seen_in .title h2.desktop {
        display:none;
    }

    #seen_in .title {
        width:35%;
    }
    
    #seen_in .locations {
        width:65%;
        margin-top:5px;
    }
}

@media (max-width:599px) {
    #seen_in .locations {
        padding-left:5px;
    }
}

@media (max-width:500px) {
    #seen_in .title h2 {
        margin-top:0px;
        font-size:20px;
    }
}

/**********/
/* Footer */
/**********/
footer, #footer {
    margin:25px 50px 50px 50px;
}

#contact {
    text-align: center;
    margin:0 auto;
}

#contact a {
    color: #306042;
}

/**************/
/* Animations */
/**************/
@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}