.offset-block{color:#FEE6D5;font-size:22px;margin-bottom:5vw;overflow:hidden;padding:5vw;position:relative;}
.offset-block--left{margin-left:-1000px;padding-left:calc(5vw + 1000px);text-align:left;}
.offset-block--right{margin-right:-1000px;padding-right:calc(5vw + 1000px);text-align:right;}
.offset-block--red{background-color:#F04E4B;}
.offset-block--blue{background-color:#559AC4;}
.offset-block--turq{background-color:#48A095;}
.offset-block--purp{background-color:#723866;}

.offset-block__content{position:relative;width:70%;}
.offset-block__content--left{margin-right:auto;}
.offset-block__content--right{margin-left:auto;}
.offset-block__content--flexed{display:flex;align-items:flex-start;}
.offset-block__content--flexed > *{flex:1;}
/*silly rule to push content down to align with second tab*/
.offset-block__content--flexed .offset-block__panels{padding-top:64px;}

.offset-block__panels{position:relative;}
.offset-block__panel{position:absolute;opacity:0;transition:1s all;pointer-events:none;}
.offset-block__panel--left{transform:translateX(-400px);}
.offset-block__panel--up{transform:translateY(-200px);}
.offset-block__panel--down{transform:translateY(200px);}
.offset-block__panel--active{opacity:1;transform:translateX(0px) translateY(0px);pointer-events:default;}

.offset-block__photo{mix-blend-mode: multiply;background-size:contain;background-repeat:no-repeat;position:absolute;top:-10%;bottom:-10%;left:0;right:0;}
.offset-block__photo--left{background-position:bottom right;}
.offset-block__photo--right{background-position:bottom left;}

.offset-block__tabs{font-family:'Roboto Mono';font-size:22px;margin:0 -20px;text-align:left;}
.offset-block__tabs--flexed{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;}


.offset-block__tab{cursor:pointer;flex: 0 1 auto;opacity:0.75;padding:20px;line-height:1.3em;transition:0.5s all;}
.offset-block__tab--half{box-sizing:border-box;flex:0 0 50%;}
.offset-block__tab--large{font-size:36px;margin-left:40px;padding:10px 20px;}
.offset-block__tab--active{opacity:1;}

@media( max-width: 1185px ) {
  .offset-block__content{width:90%;}
  .offset-block__photo--left{right:-10%;}
  .offset-block__photo--right{left:-10%;}
}
@media( max-width: 960px ) {
  .offset-block{font-size:18px;}
  
  .offset-block__content{width:70%;}
  .offset-block__photo{top:20%;}
  .offset-block__photo--left{right:-3%;}
  .offset-block__photo--right{left:-3%;}
  .offset-block__tabs{font-size:18px;}
  .offset-block__tab{box-sizing:border-box;flex:1 1 50%;}
  .offset-block__tab--large{font-size:28px;}
}
@media( max-width: 760px ) {
  .offset-block{margin-bottom:30px;}
  .offset-block__content{width:100%;}    
  .offset-block__photo{opacity:0.5;}
  .offset-block__tab--large{font-size:22px;}
  
  .offset-block--left{padding-left:1000px;}
  .offset-block--right{padding-right:1000px;}
  
  .offset-block__panel--left{}
}
@media( max-width: 480px ) {
  .offset-block__tabs{margin:0 -10px;}
  .offset-block__tab{font-size:14px;padding:10px;}
  .offset-block__tab svg{width:36px;}
  .offset-block__tabs{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;}
  
  .offset-block__tab--large{font-size:15px;margin:0;display:inline-block;text-align:right;}
  .offset-block__content--flexed{display:block;}
}