/* RESPONSIVE */
#introSidebar, #altoSidebar, #rspSidebar, #starcitySidebar, #freelanceSidebar, #endSidebar {
  opacity: 1;
}
#intro > div, #alto > div, #rennerscreenprinting > div, #starcity > div, #freelance > div, #end > div {
    margin-left: 30%;
  }
@media only screen and (max-width: 1024px) {
  #introSidebar, #altoSidebar, #rspSidebar, #starcitySidebar, #freelanceSidebar, #endSidebar {
    opacity: 0;
  }

  #intro > div, #alto > div, #rennerscreenprinting > div, #starcity > div, #freelance > div, #end > div {
    width: 100%;
    margin-left: 0;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #intro .two-column {
    columns: 1;
  }
  #alto .f1 {
    font-size: 32px;
  }
  .mobile {
    display: block;
  }
}

@media only screen and (max-width: 400px) { 
  #starcity .starcity-brand-prod {
    width: 118% !important;
  }
}

@media only screen and (max-width: 680px) { 
  .logo {
    width: 100px !important;
    right: 24px !important;
    top: 16px !important;
  }
  #intro .intro-pic {
    width: 320px;
    padding-right: 0;
    float: none;
    margin: 40px auto;
  }
  #intro .peace {
    width: 40px;
    top: 180px;
    right: 10%;
  }
  #alto .w-60 {
    width: 100%;
  }
  #alto > div > h1 {
    padding-top: 1rem !important;
    margin-top: 1rem !important;
  }
  #alto .pv7 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  #rennerscreenprinting .f-6 {
    font-size: 60px !important;
  }
  #rennerscreenprinting .w11 {
    width: 100% !important;
    padding-top: 100px !important;
  }
  #rennerscreenprinting .w7 {
    width: 100% !important;
    padding-top: 0px !important;
  }
  #rennerscreenprinting .trocchi.f3.normal.pt5.lh-title {
    padding-top: 0px;
  }
  #starcity .w7 {
    width: 100%;
  }
  #starcity .starcity-brand-prod {
    height: 800px !important;
  }
  #starcity .fl.w-25-l.center.ph4 {
    margin-bottom: 20px;
  }
  #starcity .fl.w-25-l.center.ph4 img {
    width: 80%;
  }
  #starcity .fl.w7.nt3 {
    width: 100%;
  }
  #starcity .f2 {
    font-size: 24px;
  }
  #freelance .f3 {
    font-size: 16px;
    padding-top: 0;
  }
  #freelance .canyon {
    width: 100%;
  }
  #freelance .canyon-cinema {
    width: 100%;
    margin-left: 0;
    margin-top: 80px;
  }
  #freelance .canyon-caption {
    position: relative;
    margin-left: 0px;
    width: 100%;
    margin-top: 60px;
  }
  #freelance .livongo {
    width: 100%;
    top: 82px;
    left: auto;
    height: auto;
  }
  #freelance .notable {
    left: auto;
  }
  #freelance .notable div {
    width: 100%;
  }
  #freelance .notable div.fl.pr4 {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  #freelance > div { 
    background-size: contain !important;
  }
  #freelance .jaded {
    top: 40px;
    width: 100%;
  }
  #freelance .fl.w-50-ns.w-100.pt6.mt3 {
    padding-top: 3rem;
  }
  #freelance .jaded .mb3.mt6 {
    margin-top: 0px;
  }
  #freelance .jaded .poppins.dark-green.lh-copy.mb6 {
    margin-bottom: 32px;
  }
  #end .fl.w-70.pr6.pb6.pt7 {
    padding-top: 100px;
  }
}

@media only screen and (max-width: 1440px) {
  p {
    font-size: 14px;
  }
  .f4 {
    font-size: 16px;
  }
  .f6 {
    font-size: 12px;
  }
  .f7 {
    font-size: 11px;
  }
  .f3 {
    font-size: 20px;
  }
  #introSidebar, #altoSidebar, #rspSidebar, #starcitySidebar, #freelanceSidebar, #endSidebar {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  #intro > div, #alto > div, #rennerscreenprinting > div, #starcity > div, #freelance > div, #end > div {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .sign {
    width: 150px;
  }
  #rennerscreenprinting > div {
    background-position: center -75px !important;
  }

  #rennerscreenprinting .w11 {
    width: 600px;
  }

  #rennerscreenprinting .w7 {
    width: 280px;
    padding-top: 40px;
  }

   #rennerscreenprinting .w7.pt7 {
    padding-top: 100px;
    width: 320px;
   }

  #rennerscreenprinting .f-6 {
    font-size: 72px;
  }

  #alto > div > h1 {
    padding-top: 8rem;
  }

  #starcity .tl.w-60-l.cf.mt6.ml6 {
    margin-left: 0px;
    margin-top: 40px;
  }

  #starcity .starcity-brand-prod {
    margin-top: 0px;
    margin-left: -48px;
    width: 110%;
    height: 1600px;
  }

  #starcity .cf.w-100.center.ph6.mb6.mt5, #alto .inter.cf.w-100.center.ph6.mb6.mt5 {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 1600px) {
  #starcity h1 {
    font-size: 24px;
  }

} 
@media only screen and (min-width: 1600px) {
  
  .livongo {
    width: 650px;
  }
  .notable {
    left: 664px;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1865px) {
  .livongo {
    width: 600px !important;
    top:-420px !important;
  }
  .canyon-cinema {
    width: 600px !important;
  }
  .jaded {
    width: 400px !important;
  }
}

@media only screen and (min-width: 1441px) and (max-width: 2250px) {
  #rennerscreenprinting .w11 {
   width: 800px;
  }

  #rennerscreenprinting .w7 {
   width: 400px;
   padding-top: 20px;
  }

   #rennerscreenprinting .w7.pt7 {
    width: 400px;
    padding-top: 100px;
   }

  .f3 {
    font-size: 20px;
  }
}

@media only screen and (min-width: 1441px) and (max-width: 1680px) {
  #starcity .starcity-brand-prod {
    height: 1900px;
  }
  #starcity .cf.w-100.center.ph6.mb6.mt5 {
    padding-left: 40px;
    padding-right: 40px;
  }
  #alto .fl.w-70.bg-near-white.ph7.pv7.tc {
    padding-left: 40px;
    padding-right: 40px;    
  }
  #intro .fl.w-70.bg-light-gray.ph7.pb7 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  #freelanceSidebar .f6 { font-size:12px; } 
}

@media only screen and (min-width: 1681px) and (max-width: 1920px) {
  #starcity .starcity-brand-prod {
    height: 2100px;
  }
  #alto .fl.w-70.bg-near-white.ph7.pv7.tc {
    padding-left: 40px;
    padding-right: 40px;    
  }
}

@media only screen and (min-width: 2135px) {
  #alto .fl.w-70.bg-near-white.ph7.pv7.tc {
    padding-top: 430px !important;   
  }
  #rennerscreenprinting .pt7.w11.fr {
    padding-top: 400px;
  }
  #starcity .starcity-brand-prod {
    height: 2800px;
  }
}

@media only screen and (min-width: 1921px) and (max-width: 2135px) {
  #starcity .starcity-brand-prod {
    height: 2300px;
  }
}

@media only screen and (min-width: 1921px) {
  #alto .fl.w-70.bg-near-white.ph7.pv7.tc {
    padding-top: 330px;   
  }
}

@media (max-height: 1024px) {
  .alto-bg { width: 480px !important; }
}

@media (max-height: 900px) {
  .sign { display: none; }
}

@media only screen and (min-width: 1925px) and (max-width: 2079px) {
  #freelance .livongo {
    width: 600px;
  }
}

@media only screen and (min-width: 1795px) and (max-width: 1865px) {
  #freelance .livongo {
    width: 550px;
    top: 350px !important;
  }
}

@media only screen and (min-width: 1866px) and (max-width: 1908px) {
  #freelance .livongo {
    width: 600px;
  }
}

@media only screen and (min-width: 1866px) and (max-width: 1998px) {
  #freelance .jaded {
    width: 380px;
  }
}

@media only screen and (min-width: 1441px) and (max-width: 1599px) {
  #freelance .canyon-cinema {
    width: 590px;
    margin-left: -140px;
  }
  #freelance .canyon-caption {
    width: 405px;
    margin-left: 162px;
  }
  #freelance .jaded {
    width: 350px;
    right: -80px;
  }
  #freelance .livongo {
    width: 402px;
  }
  #freelance .cf.h5 {
    height: 4rem;
  } 
}

@media only screen and (min-width: 1441px) and (max-width: 1679px) {
  #freelance .notable {
    width: 920px;
  }
}

@media only screen and (min-width: 681px) and (max-width: 1024px) {
  #freelance .poppins.highlight {
    font-size: 16px;
    padding-top:0;
    margin-top: -60px;
    margin-left: 32px;
  }
  #freelance .canyon {
    width: 100%;
  }
  #freelance .canyon-cinema {
    width: 100%;
    margin-left: 0;
    margin-top: 80px;
  }
  #freelance .canyon-caption {
    position: relative;
    margin-left: 0px;
    width: 515px;
  }
  #freelance .jaded {
    top: 40px;
    width: 100%;
  }
  #freelance .jaded .mb6 {
    margin-bottom: 0px;
  }
  #freelance .livongo {
    width: 100%;
    top: 80px;
    left: auto;
    height: auto;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1865px) {
  .canyon-caption {
    width: 425px !important;
    margin-left: 170px !important;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  #freelance .poppins.highlight {
    font-size: 16px;
    padding-top:0;
    margin-top: -60px;
    margin-left: 32px;
  }
  #freelance .canyon {
    width: 100%;
  }
  #freelance .canyon-cinema {
    width: 100%;
    margin-left: 0;
    margin-top: 80px;
  }
  #freelance .canyon-caption {
    position: relative;
    margin-left: 0px;
    width: 515px;
  }
  #freelance .jaded {
    top: 40px;
    width: 100%;
  }
  #freelance .jaded .mb6 {
    margin-bottom: 0px;
  }
  #freelance .livongo {
    width: 100%;
    top: 80px;
    left: auto;
    height: auto;
  }
  #freelance .notable {
    width: 800px;
    left: 0px;
  }
  #freelance .notable .pr4 {
    padding-right: 16px;
    width: 200px;
  }
}

@media only screen and (min-width: 1279px) and (max-width: 1440px) {
  #freelance .canyon-cinema {
    width: 500px;
    margin-left: -50px;
    margin-top: 120px;
  }
  #freelance .canyon-caption {
    width: 405px;
    margin-top: 90px;
  }
  #freelance .jaded {
    width: 350px;
    right: 0px;
    top: -400px;
  }
  #freelance .livongo {
    width: 402px;
    left: 0;
    top: 410px;
    height: auto;
  }
  #freelance .cf.h5 {
    height: 4rem;
  } 
  #freelance .notable {
    width: 800px;
    left: 0;
  }
  #freelance .notable .pr4 {
    width: 200px;
  }
  #freelanceSidebar .f6 {
    font-size: 12px;
  }
}

@media only screen and (min-width: 681px) and (max-width: 1204px) {
  #freelance .notable {
    display: none;
  }
}
/* TYPOGRAPHY */

body {
/*  background-color: #303435;*/
  background-image: url("img/spacer.gif");
  background-size: 100px 100px;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.two-column {
  columns: 2;
  column-gap: 3rem;
}

.text-bump--1 { position:relative; top:-1px }
.text-bump-1 { position:relative; top:1px  }
.text-bump--2 { position:relative; top:-2px }
.text-bump-2 { position:relative; top:2px  }

@media only screen and (min-width: 1025px) { 
  .mobile {display: none;}
}

/* Intro */

.intro-pic {
  margin-bottom: 40px;
}

.hey { 
  position:absolute; 
  left: 198px;
  top: 260px;
  opacity: .7;
}
.arrow {
  position:absolute; 
  left: 290px;
  top: 260px;
  width: 90px;
  opacity: .7;
}
.peace {
  position:absolute;
  right: 260px;
  top: 130px;
  width: 80px;
  -webkit-animation: peacerotation 2s infinite ease-in-out;;
}

@media only screen and (max-width: 1123px) {
  .hey {left: 0px;}
  .arrow {left: 40px; margin-top: 30px;}
  .intro-pic { padding-right: 9rem; margin-bottom: 40px;}
  .peace { right: 160px; }
}

@media only screen and (min-width: 1124px) and (max-width: 1287px) {
  .hey {left: 0px;}
  .arrow {left: 40px; margin-top: 30px;}
  .intro-pic { padding-right: 12rem; }
  .peace { right: 180px; }
}

@media only screen and (min-width: 1288px) and (max-width: 1440px) {
  .hey {left: 60px;}
  .arrow {left: 160px;}
}

@media only screen and (min-width: 1441px) and (max-width: 1680px) {
  .hey {left: 0px;}
  .arrow {left: 80px;}
}

@media only screen and (min-width: 1681px) and (max-width: 1800px) {
  .hey {left: -90px;}
  .arrow {left: 0px;}
}

@media only screen and (min-width: 1801px) and (max-width: 2100px) {
  .hey {left: 0px;}
  .arrow {left: 100px;}
}

@-webkit-keyframes peacerotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(3deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-3deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

.sig {
  width: 140px;
  opacity: .8;
  display: block;
}

.logo {
  width: 180px;
  position: fixed;
  right: 32px;
  top: 24px;
  z-index: 10000;
/*  left: 524px;*/
  transform: rotate(8deg);
/*  -webkit-animation: logorotation 338s infinite linear;*/
}

@-webkit-keyframes logorotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.beatles {
  width: 200px;
  transform: rotate(18deg);
  position: relative;
  left: -80px;
  margin-top: 20px;
}

#introSidebar {
  background-image: url("img/paper-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 bottom;
}

.inspiring {
  width: 175px;
}

a, a:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: dotted;
  border-width: 1px;
  border-color: inherit;
}

a:hover {
  border-bottom: solid;
}

.broken {
  width: 16px;
}

/* Alto */
.alto-bg {
  position: fixed;
  bottom: 0;
  width: 640px;
  left: 0;
}

#alto > div {
  background-image:url(img/alto1.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#altoSidebar p {
  font-size: 14px;
}

#altoSidebar h4 {
  font-size: 15px !important;
}

/* Renner Screen Printing */
#rspSidebar {
  background-color: #FFF7E4;
  color: #2D2117;
}

#rennerscreenprinting {
  color: #2D2117;
}

#rennerscreenprinting a.white {
  color: white;
}

#rennerscreenprinting > div {
  background-image:url(img/rsp1.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center -275px;
  background-color: white;
}

.sign {
  position: relative;
  z-index: 40;
  width: 200px;
  left: 25%;
  top: 20px;
}

/* Starcity */
#starcity {
  font-family: 'DM Sans', sans-serif;
}

#starcity > div {
  background-color: #F7F3EA;
}

#starcitySidebar {
  font-family: 'DM Sans', sans-serif;
}

.sc-badge {
  width: 220px;
  position: relative;
  float: right;
  margin-right: -100px;
}

.starcity-brand-prod {
  margin-top: -80px;
  width: 100%;
  height: 2600px;
  background-image: url(img/starcity-prod-brand.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-size: 120% auto;
  animation: animatedBackground 20s linear infinite alternate;
}

.starcity-communities-type {
  width: 100%;
  height: 100px;
  background-image: url(img/starcity-communities-type.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-size: 150% auto;
  animation: animatedBackground 100s linear infinite alternate;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}



/* Freelance */
#freelance > div {
  background-image:url(img/freelance-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#freelance figcaption span {
  background-color: #2f503c;
  color: #e8b12f;
}

#freelance .poppins.highlight {
  background-color: rgba(232,177,47,0.8);
}

.scamp {
  width: 200px;
  position: relative;
  left: -100px;
  top: 14px;
}

.canyon {
  position: relative;
  width: 800px;
}

.canyon-cinema {
  width: 760px;
  margin-left: -150px;
  margin-top: 150px;
}

.canyon-caption {
  position: absolute;
  width: 365px;
  margin-top: 151px;
  margin-left: 242px;
  font-size: 12px;
}

.jaded {
  width: 500px;
  position: relative;
  float: right;
  right: 0px;
  top: -500px;
  font-size: 12px;
}

.livongo {
  position: relative;
  width: 700px;
  top: 320px;
  left: -40px;
  font-size: 12px;
  display: block;
  height: 700px;
}

.notable {
  position: relative;
  left: -40px;
  font-size: 12px;
}

.notable div, .notable2 div {
  width: 230px;
}

/* End */
#endSidebar {
  background-image: url("img/paper-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 bottom;
  opacity: 0;
}

.what-else {
  width: 260px;
}

.real-talk {
  width: 220px;
}

.uber {
  width: 60px;
  margin-top: 20px;
}

.apple {
  width: 24px;
  margin-top: 20px;
}

.highlighter {
  background-image: url("img/highlighter.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 2px 4px;
  padding-right: 3px;
}

/* Center child elements */
.website-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


/* Styles for website counter container */
.website-counter {
  width: 80px;
  font-weight: 700;
  font-size: 36px;
  margin-top: 60px;
}

#reset {
  display: none;
}

/* Image reveal — html.reveal-images-pending set by inline script after <body> */
html.reveal-images-pending body img {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

html.reveal-images-pending body img.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-images-pending body img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}