* {margin: 0; padding: 0;}
a {text-decoration: none;}
body {font-family: 'Open Sans';}
nav {background-color: #454543; overflow: auto; width: 100%; position: fixed; z-index: 999;}
nav img {float: left; margin-right: 20px; margin-top: 10px; margin-bottom: 10px; }
nav > div {width: 1000px; display: block; margin: auto;}
nav ul {list-style-type: none; overflow: auto; float: left; background-color:#60605c;}
nav li {float: left;}
nav .menu a {padding: 10px;padding-right: 25px; padding-top: 50px; text-transform: uppercase; display: block; color: white; border-left: 2px solid #858582; }
nav a:hover {background-color: #858582 ;}

main {display: block; padding-top: 80px;}

#banner {background-image: url(img/background.jpg); background-size: 100%; padding-top: 25%}

#chelsea { width: auto;  display: block; position: absolute; margin-top: -133px; width: 100%; z-index: 20;}
#chelsea img {margin:auto; display: block;}

article {padding-top: 30px; padding-bottom: 20px; overflow: auto;}
article.light {background-color:#dededc; color: #666;}
article.dark {background-color:#858582; color: white;}
article.white {background-color: white;}
article hr {width: 150px; border: 0; background-color: white; height: 1px;  margin-bottom: 15px; display: block; margin-left: auto; margin-right: auto;}
article.light hr {background-color: #666; margin:auto; }
article > div {width: 1000px; margin: auto;}
article > header {text-align: center;}
article h1 {font-weight: normal; text-transf;orm: uppercase; text-align: center; margin-bottom: 10px;}

.menu {float: left; display: inline;};
article p {margin-top: 1em; margin-bottom: 1em;}

#collectors p, #bespoke p, #forsale p {width: 700px; margin: auto; margin-top: 1em; margin-bottom: 1em;}

#bespoke img {display: block;}
#bespoke ul {list-style-type: none; overflow: auto;}
#bespoke li {float: left; margin: 8px; border: 3px solid #60605c;}

/* #collectors img {border: 3px solid white;} */


#forsale img {display: block;}
#forsale ul {list-style-type: none; overflow: auto;}
#forsale li {float: left; margin: 8px; border: 3px solid #60605c;}


#story img {border: 3px solid white; float: left; margin-top: 40px;}

#story .scrolldown {float: left; width: 450px; margin-left: 30px;}
#story .scrolldown div {height: 300px; overflow: hidden;}

.scrolldown a.up {width: 76px; height: 16px; display: block; cursor: pointer; background-image: url(img/scroll-up-dark.png); margin: auto; margin-top: 10px; margin-bottom: 10px; opacity: 0;}
.scrolldown a.down { width: 76px; height: 16px; display: block; cursor: pointer;background-image: url(img/scroll-down-dark.png); margin:auto; margin-top: 10px;}

.scrolldown p {margin-top: 0;}

#latest img {margin-bottom: 10px;}
#latest time {font-style: italic;}
#latest h2 {font-size: 1.2em; margin-top: 10px;}
#latest img {border: 3px solid white; float: left}
#latest .scrollitem {width: 250px; float: left; display: block; overflow: auto;margin-left: 25px; margin-right: 25px;}
#latest .scrollelement {width: 880px; overflow: hidden; float: left;}
#latest .scrollitem .info {font-size: 0.9em;}

#latest .sidescroller {overflow: auto; display: block; margin: auto; width:1000px; margin-left: 0px; margin-right: 0;}

.sidescroller .left {cursor: pointer; width: 16px; height: 76px; display: block; float: left; background-image: url(img/left.png); margin-top: 150px; margin-left: 20px; margin-right: 20px;}
.sidescroller .right {cursor: pointer; width: 16px; height: 76px; display: block; float: left; background-image:url(img/right.png); margin-top: 150px; margin-left: 20px; margin-right: 20px;}

#contact a {color: #333;}
#contact .left {width: 48%; float:left; display: block;}
#contact .right {width: 48%; float:right; display: block;}

#contact .scrollelement {width: 500px; overflow: hidden;}
#contact .scrollitem {width: 500px; float: left;}
#contact a.left, #contact a.right {display: none;}

form {padding-top: 50px;}
form label {float: left; width: 100px; clear: left;}
form textarea {height: 100px;}
form input, form textarea {float: left; margin-left: 10px; margin-bottom: 10px; width: 250px; padding: 5px;}

form input[type="submit"] {border: 0; background-color: #858582; color: white; font-weight: bold; width: auto; text-transform: uppercase; padding: 10px; clear: both ;margin-left: 110px;}

footer {display: block; background-color: #333333; color: white; padding: 10px; min-height: 50vh; }
footer > div {width: 1000px; margin: auto;}


#forsale .info {position: absolute; width: 310px; height:230px; display: block; color: white; overflow: hidden;}
#forsale .info p {width: auto; padding: 0px; padding-left: 10px; padding-right: 10px; background-color: rgba(0,0,0,0.5); margin: 0; height: 0px; margin-top: 190px; overflow: hidden;
transition: height: 1s, margin-top: 1s, padding-top: 1s;
-webkit-transition: height: 1s, margin-top: 1s, padding-top: 1s;
transition: 0.5s;
}

#forsale h2 {font-weight: normal; width: auto;  background-color: rgba(0,0,0,0.5); height: 40px; text-align: center; font-size: 1.2em; padding-top: 6px;}

#forsale .info:hover p {transition: 0.5s; height: 180px; margin-top: 0; padding-top: 10px; }




#bespoke .info {position: absolute; width: 310px; height:230px; display: block; color: white; overflow: hidden;}
#bespoke .info p {width: auto; padding: 0px; padding-left: 10px; padding-right: 10px; background-color: rgba(0,0,0,0.5); margin: 0; height: 0px; margin-top: 190px; overflow: hidden;
transition: height: 1s, margin-top: 1s, padding-top: 1s;
-webkit-transition: height: 1s, margin-top: 1s, padding-top: 1s;
transition: 0.5s;
}

#bespoke h2 {font-weight: normal; width: auto;  background-color: rgba(0,0,0,0.5); height: 40px; text-align: center; font-size: 1.2em; padding-top: 6px;}

#bespoke .info:hover p {transition: 0.5s; height: 180px; margin-top: 0; padding-top: 10px; }

/*ADDED BY CHRIS*/

.grid-item {
    float: left;
    width: 33.3333%;
    width: calc(100% / 3);
    list-style: none;
}
  
.grid-item img{
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
      display: block;
}

/**
 * Featherlight - ultra slim jQuery lightbox
 * Version 1.7.13 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/
html.with-featherlight{overflow:hidden}.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight link.featherlight-inner,.featherlight script.featherlight-inner,.featherlight style.featherlight-inner{display:none}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font-family:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000;border:0;padding:0}.featherlight .featherlight-close-icon::-moz-focus-inner{border:0;padding:0}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0;-webkit-overflow-scrolling:touch}.featherlight iframe{border:0}.featherlight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:0;margin-right:0;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}@media print{html.with-featherlight>*>:not(.featherlight){display:none}}

/**
 * Featherlight Gallery – an extension for the ultra slim jQuery lightbox
 * Version 1.7.13 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/
.featherlight-next,.featherlight-previous{display:block;position:absolute;top:25px;right:25px;bottom:0;left:80%;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:rgba(0,0,0,0)}.featherlight-previous{left:25px;right:80%}.featherlight-next:hover,.featherlight-previous:hover{background:rgba(255,255,255,.25)}.featherlight-next span,.featherlight-previous span{display:none;position:absolute;top:50%;left:5%;width:82%;text-align:center;font-size:80px;line-height:80px;margin-top:-40px;text-shadow:0 0 5px #fff;color:#fff;font-style:normal;font-weight:400}.featherlight-next span{right:5%;left:auto}.featherlight-next:hover span,.featherlight-previous:hover span{display:inline-block}.featherlight-first-slide.featherlight-last-slide .featherlight-next,.featherlight-first-slide.featherlight-last-slide .featherlight-previous,.featherlight-loading .featherlight-next,.featherlight-loading .featherlight-previous,.featherlight-swipe-aware .featherlight-next,.featherlight-swipe-aware .featherlight-previous{display:none}@media only screen and (max-device-width:1024px){.featherlight-next:hover,.featherlight-previous:hover{background:0 0}.featherlight-next span,.featherlight-previous span{display:block}}@media only screen and (max-width:1024px){.featherlight-next,.featherlight-previous{top:10px;right:10px;left:85%}.featherlight-previous{left:10px;right:85%}.featherlight-next span,.featherlight-previous span{margin-top:-30px;font-size:40px}}