html,
body {
    margin: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
}
body {
	background-color: #000000;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  font-size: 1em;
}
#myCanvas {
	
}
#non-modern {
  display: none;
}
#non-modern h1,
#non-modern p {
  color: #FFF;
}
#share {
	position: absolute;
  top: 0px;
  
  margin: 25px;
  background: rgba(51,51,51,0.65);
  
  display: none;
  
}
.mobile #share {
  margin: 10px;
}
.desktop .grid [class*='col-'] {
  float: left;
}
.desktop .col-1 {
  width: 66.66%;
}
.desktop .col-2 {
  width: 33.33%;
}
.desktop .grid:after {
  content: "";
  display: table;
  clear: both;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.desktop [class*='col-'] {
  padding-right: 20px;
}
.desktop [class*='col-']:last-of-type {
  padding-right: 0;
}
.mobile .grid {
  position: relative;
}
.mobile {
}
.mobile .col-1 {
    
}
.mobile .col-2 {
    
    position: absolute;
    right: 10px;
}
.mobile.landscape .col-1 {
    
}
.mobile.landscape .col-2 {
    
    position: absolute;
    
    right: 10px;
}
#close-text:hover,
#save-desktop a {
    text-decoration: none;
}
#share {
  clear: both;
}
#socialImage {
  border: none;
}
#start-prompt {
  display: none;
}
#start-prompt {
  pointer-events:none;
  position: absolute;
  top: 35%;
  
  
  max-width:70%;
  
  
  
  overflow: hidden;
  margin: 0 auto;
  left:0;
  right:0;
  
  
  
  background: #fff; 
  border: solid 1px #000; 
  border: 3px solid #fff;
  background-color: rgba(0,0,0,0.6);
  border-color: rgba(255,255,255,0.9); 
}
#start-prompt p {
  pointer-events:none;
  text-align: center;
  font-size: 1.3em;
  
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.color-1 {
  
}
.color-2 {
  background: #f06060;
}
.btn {
  display: block;
  width: 100%;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  
  cursor: pointer;
  padding: 25px 80px;
  
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  outline: none;
  
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.mobile .btn {
  font-size: 60%;
}
.mobile .btn {
  padding: 8px 2px;
}
.btn:after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.btn:before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
.btn-1 {
  margin: 0 0 15px 0px;
  background: none;
  border: 3px solid #fff;
  color: #fff;
}
.btn-1a:hover {
  
}
.btn-1a:hover,
.btn-1a:active {
  color: #0e83cd;
  background: #fff;
}
#content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
}
#close-banner {
  clear: both;
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 25px;
  
  
    
}
.mobile #close-banner {
  margin: 10px;
}
.btn-2i {
  position: absolute;
  
  
  background: none;
  border: 3px solid #fff;
  width: 50px;
  height: 50px;
  padding: 0;
  color: #fff;
  font-size: 30px;
}
.mobile .btn-2i {
  width: 40px;
  height: 40px;
  font-size: 15px;
}
.btn-2i:hover {
  
  background: #fff;
  color: #f06060;
  
}
.btn-2i:active {
  
  background: #fff;
  color: #f06060;
  
}
#share-left {
  margin-top: 20px;
  float: left;
    
    
    
}
#share-right {
  margin-top: 20px;
  
  float: right;*/
    
}
#share-image {
    
    
    
}
#share-image-container {
    position: relative;
    
    text-align: left;
    background:url(spin.gif) no-repeat center center;
    min-height: 200px;
    width: 100%;
}
#share-image-container img{
    
}
.cover {
   object-fit: cover;
}
.cover {
   object-fit: contain;
}
#share-image-mobile-instructions {
  pointer-events:none;
  position: absolute;
  bottom: 10%;
  
  
  width:95%;
  
  
  
  
  margin: 0 auto;
  left:0;
  right:0;
  
  
  
  
  
  */
  border-color: rgba(0,0,0,0.2); 
  text-shadow: 0px 2px #888;
  color: #ffffff;
  display: none;
}
#sharemain #share-image-mobile-instructions p {
  color: #fff;
  text-align: center;
  font-size: 1.3em;
  
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#sharemain {
    padding: 25px;
    max-width: 100%;
}
.mobile #sharemain {
  padding: 10px;
}
#sharemain h1 {
    color: #cdcdcd;
    font-weight: 300;
    text-transform: uppercase;
}
#sharemain .lightbulb-title {
  color: #fff;
  margin-right: 15px;
}
#sharemain h1 .title{
    
    
}
#sharemain p,
#copyright-exhibition-details {
    color: #cdcdcd;
}
#share-title-text p {
    
}
#share-left a {
  color: #fff;
}
#twitter a,
#facebook a {
    color: #fff;
    
}
#mobile-share-more-info {
  display: none;
}
.portrait #share-left {
  float: left;
  height: 20%;
}
.portrait #share-right {
  float: left;
  clear: both;
  
}
.portrait #share-image-mobile-instructions {
  top: 85%;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  
  body {
    font-size: 1.25em;
  }
  h1 {
    font-size: 1.5em;
    margin: 0.5em 0 1.5em 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  
  body {
    font-size: 1.2em;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (-o-min-device-pixel-ratio: 3/1), (min--moz-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  
  body {
    font-size: 1em;
  }
}
@media (-webkit-min-device-pixel-ratio: 4), (-o-min-device-pixel-ratio: 4/1), (min--moz-device-pixel-ratio: 4), (min-device-pixel-ratio: 4) {
  
  body {
    font-size: 0.9em;
    h1 {
      font-size: 0.7em;
      margin: 0.1em 0 0.3em 0;
    }
  }
}
@media only screen and (max-width: 736px) {
  body {
    font-size: 1em;
  }
  #start-prompt {
    font-size: 1.5em;
  }
  #share-title-text {
   idth: 80%;
  }
  #share-description {
    display: none;
  }
  .portrait #share-image-mobile-instructions {
    top: 70%;
  }
}
@media only screen and (max-width: 480px) {
  .landscape.mobile #share-title-text {
    max-width: 90%;
    font-size: 0.9em;
  }
}
.mobile #share-title-text {
  
  width: 100%;
}
.mobile #sharemain h1 {
    margin: 0 0 10px 0;
    padding: 0px;
    font-size: 1.5em;
}
.portrait.mobile .lightbulb-title {
  float: left;
}
.portrait.mobile .artist-title {
  float: left;
  clear: both;
  max-width: 80%;
}
.mobile .portrait #share-description {
  display: none;
}
#share-left-right-container {
  
  clear: both;
}
.mobile .landscape #share-image-container {
  width: 70%;
}
.mobile .landscape #share-right.col-2 {
  width: 25%;
}
.desktop #share-image-container {
  width: 100%;
}
.desktop #share-image-container img {
  width: 100% !important; 
}
.mobile #exhibition-details {
  display: none;
}
.mobile #copyright-details {
  font-size: 0.8em;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 420px) and (-webkit-min-device-pixel-ratio: 1.5) {
  body {
    font-size: 0.8em;
  }
  h1 {
    font-size: 1.2em;
    margin: 0.2em 0 0.8em 0;
  }
}
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) {
  body {
    font-size: 1.5em;
  }
  .portrait #share-image-mobile-instructions {
    top: 70%;
  }
}
@media only screen and (device-width: 1280px) and (orientation: landscape) {
  body {
    font-size: 1em;
  }
}
@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) {
  body {
    font-size: 3em;
  }
}
@media only screen and (min-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {
  body {
    font-size: 3em;
  }
}