/* CSS files add styling rules to your content */

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  background: #fafafa;
}

.browser-container{
 padding: 2em; 
  background: #fafafa;
  display: inline-block;
}

.scrim{
   position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(255, 255, 255, .4);
  
  z-index: 1;
  display: none;
}

.visible{
  display:block !important;
}

.fake-browser{
  display: inline-block;
   border: 1px solid #ccc;
   border-radius: 8px;
   background: white;
   box-shadow: 2px 4px 4px 3px rgba(0, 0, 0, .12);
}

.fake-browser-nav{
  height: 32px;
 border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: row;
  padding-left: 24px;
  
}

.nav-button{
 cursor: pointer;
  color: #ccc;
  font-family: Arial;
  padding: 8px;
  font-size: 24;
  border-radius: 4px
}

.nav-button:hover{
 background: #fcfcfc; 
}

.nav-search{
 flex-grow: 1;
  margin-left: 32px;
  margin-right: 32px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 4px;
  margin-bottom: 4px;
  position: relative;
  
  
}

.nav-search::after{
 content: 'https://www.foodh.ype/news/latest';
  position: absolute;
  color: #ccc;
  font-size: 12px;
  font-family: Arial;
  line-height: 24px;
  padding-left: 8px;
}

.fake-browser-content{
    padding: 32px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

#headline{
   color: #222;
  font-family: Proxima Nova,Helvetica,Arial,sans-serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
}

.article{
  max-width: 600px;
  flex-grow: 1;
}

.fake-header{
  display: flex;
  flex-direction: row;
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;
}

.masthead{
  font-size: 24px;
  font-family: "Helvetica";
  color: red;
  font-weight: 800;
}

.fake-button{
  margin-left: 20px;
  margin-right: 20px;
  padding: 8px;
  height: 24px;
  line-height: 24px;
  font-family: "Arial";
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
}

.fake-button:hover{
 background: #eee; 
}



.next-wrapper{
  display: flex;
  flex-direction: row;
  /*justify-content: flex-end;*/
}

.share-button{
  cursor: pointer;
  line-height: 42px;
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 4px;
  padding: 0px 20px;
}

@media (max-width: 600px) {
    .share-button{
      display: none !important;  
    }
}

.flex-grow{
  flex-grow: 1;
}

.next-button{
  padding: 12px 16px;
  border-radius: 6px;
  color: white;
  /*background: #ff3232;*/
  background: #999;
  cursor: pointer;
  user-select: none;
}

.next-button.disabled{
  pointer-events: none; 
}

#author{
 color: #999;
  font-size: 18px;
}

#image-popup{
  position: absolute;
  width: 400px;
  height: 400px;
  
  left: 0px;
  top: 0px;
  transform: translate(50%, 75px);
  
  background: white;
  z-index: 2;
  
  border: 3px solid rgba(200, 200, 200, 50);
  
  display: none;
}

.popup-topbar{
  height: 20px;
  background: rgba(200, 200, 200, 50);
  display: flex; 
  flex-direction: row;
  justify-content: flex-end;
}

.popup-close{
  font-size: 12px;
  padding: 4px;
  cursor: pointer;
  font-family: Helvetica, Arial;
}

.popup-close:hover{
  background: white;
}

.popup-instructions{
 font-family: Courier;
  padding: 12px;
}

.popup-instructions a{
  color: black;
}

.popup-instructions a:hover{
  opacity: 0.6;  
}

#img-save{
  text-decoration: underline; 
  cursor: pointer;
}

#img-save:hover{
 opacity: 0.6; 
}

#image-holder{
  /* */
}

.hidden-promo{
  display: none;
}

.fake-browser-content.capture .share-button,
.fake-browser-content.capture .next-button
{
   display: none; 
}

.fake-browser-content.capture .hidden-promo{
   display: block; 
}