/* container */
.webpage{
  position: relative;
  background-color: var(--background);
  width:450px;
  box-shadow:0px 8px 17px -8px
  rgba(0,0,0,0.4);
  border:6px solid #4E9DDE;
  border-radius: 8px;
  height: 75%;
  max-height:375px;
  width: 550px;
  /* transition: background-color .35s; */
}


/* webpage header/browser buttons */
.browser-buttons-container{
  background-color:#4E9DDE;
  padding:7px 12px 12px 12px;
  border: 1px solid #4E9DDE;
}
.browser-button{
  border-radius:50%;
  width:10px;
  height:10px;
  margin-left:8px;
  background-color:var(--background);
}

/* webpage content */
/* parent wrapper (scroll manager) */
.webpage-view{
  overflow-y:scroll;
}
/* wrapper for all contents that are shown/hidden */
.webpage-content-container{
  padding:50px;
}
/* what is swapped out to change views */
.webpage-content{
  position:
  relative;
  transition: opacity .25s, height .25s;
  overflow:
  hidden;
  opacity:0;
  height:0;
}
.selected.webpage-content{
  opacity:1;
  height:auto;
}

/* webpage content */
/* sections > cols.? */
/* webpage sections */
.webpage-section{
  margin-bottom:50px;
}
.webpage-section:last-child{
  margin-bottom:0px;
}
.webpage-col{
  /* margin-right:30px; */
}
.webpage-col:last-child{
  /* margin-right:0; */
}
.webpage-small-col{
  /* margin-right:10px; */
}
.webpage-small-col:last-child{
  /* margin-right:0; */
}

/* custom webpage styles per demo */
[data-demo="landing-page"] .webpage-section{
  height:230px;
}


/* webpage shapes */
[class*="block"]{
  background-color:
  currentColor;
  transition: 0;
}
.rounded-corners{
  border-radius:100px;
}

[class*="x10w"]{
  width:10px;
}
[class*="x20w"]{
  width:20px;
}
[class*="x50w"]{
  width:50px;
}
[class*="x75w"]{
  width:75px;
}
[class*="x100w"]{
  width:100px;
}
[class*="x150w"]{
  width:150px;
}
[class*="x200w"]{
  width:200px;
}
[class*="x250w"]{
  width:250px;
}

[class*="x10h"]{
  height:10px;
}
[class*="x20h"]{
  height:20px;
}
[class*="x40h"]{
  height:40px;
}
[class*="x50h"]{
  height:50px;
}
[class*="x75h"]{
  height:75px;
}
[class*="x100h"]{
  height:100px;
}
[class*="x150h"]{
  height:150px;
}
[class*="x250h"]{
  height:250px;
}

.x10mb{
  margin-bottom:10px;
}
.x20mb{
  margin-bottom:20px;
}
.x30mb{
  margin-bottom:20px;
}
.x10mr{
  margin-right:10px;
}
.x20mr{
  margin-right:20px;
}
.x30mr{
  margin-right:20px;
}
[class*="mb"]:last-child{
  margin-bottom:0;
}
[class*="mr"]:last-child{
  margin-right:0;
}

/* special blocks */
.dashed-block{
  background-color:transparent;
  border:10px dashed currentColor;
}
.picture-frame-block{
  width:120px;
  height:120px;
}

/* **************************** */


/* responsive styles */
/*hide dotted block on shorter screens*/
@media only screen and (max-height:850px){
  #home-hero .dashed-block{
    display:none;
  }
}
@media only screen and (max-width: 700px){
  .webpage{
    width:100%;
  }
}
@media only screen and (max-width:600px){
  .webpage-content-container{
    padding:10% 7%;
  }
}
@media only screen and (max-width:540px){
  .webpage{
    height:auto!important;
    /* width:100%; */
    /* padding:7%; */
  }
  
  .hide-on-mobile{
    display:none;
  }
  .webpage-col{
    margin-right:0;
  }
  .webpage-header-section{
    flex-wrap:wrap;
  }
  /* #webpage-header-section .set-width{
    width:100%;
    flex:auto;
  } */
  .picture-frame-block{
    width:100%;
  }
}