@media only screen and (max-width: 430px) {
.hero-container{
    margin: 5% 0 0 0;
    height: 100vh;
    }
section {
        margin: 20% 0!important;
    }
.header {
    width: 96%;
    margin-left: 2%;
}
.sub-title-universe {
    margin: 5% 0 10% 0;
    font-size: 52px;
}
.nav {
    width: 96%;
    top:5%;
    height: 55px;
}
.header.small {
    top: 5%;
    height: 55px;
}
#canvas {
    top: 41vh;
}
.nav-link-about, .nav-link-work {
    font-size: 14px;
}
.nav-about, .nav-work {
    top: 7px;
}
.nav-about {
    margin-left: 2%;
}
.nav-work {
    margin-left: -4%;
}
.menu-fill {
    padding: 13px 20px 11px 20px;
}
.menu-fill-second {
    padding: 13px 20px 11px 20px;
}
.menu-loca {
 visibility: hidden;
}
.new-logo-landing {
    height: 64%;
    top: 18%;
    display: inline;
    margin: 0 0px 0 0px;
}
.new-logo-about {
    height: 64%;
    top: 18%;
    display: inline;
     margin: 0 0px 0 0px;
}
.header.small .logo-header{
    left: 96.5%;
    width: 34px!important;
    height: 34px !important;
}
.title-index {
    font-size: 68px!important;
}
.name-index, .name-index-2 {
  font-size: 2em;
}
.title-word-2 {
    left: 5%;
    top: 32vh;
}
.paragraph-index {
    width: 34%;
    top: 175px;
    left: 5%;
}
.title-word-1 {
    right: 5%;
    top: 18vh;
}
.name-index-2 {
    top:42vh;
    right: 5%;
}
.title-word-3 {
    left: 23%;
    top: 50.5vh;
}
.name-index {
    top: 62.3vh;
    left: 5%;
}
.title-word-4 {
    left: 18%;
    bottom: 190px;
}
.paragraph-index-2 {
    width: 75%;
    bottom: 47px;
    right: 5%;
}
.index-content-center h2 {
    font-size: 42px;
    margin: 22% 0 5% 0;
}
.index-content-center p {
    width: 80%;
    margin: 10% 10% 25% 10%;
}
.detail-title {
    width: 92%;
    margin: 19vh 0% 5% 4%;
}
.detail-title h1 {
    margin: 0 0 0 0%;
}
.content-detail-title {
    font-size: 24px;
}
.img-wrapper {
    height: 110px;
    width: 0;
}
.img-hover-effect-link {
    padding: 5% 0 5% 0;
    font-size: 15px;
}
.index-list-name {
    left: 19%;
}
.index-list-year {
    right: 26%;
}
.index-list-subeyebrow {
    width: 41%;
    margin: 6% 0px 0px 18.5%;
}
.index-list-subeyebrow {
    display: -webkit-box;
}
.index-list-number, .index-list-name, .index-list-year, #readable-p, .nda-icon {
    -webkit-text-stroke: 0.1px #FDF8E6;
}
.index-list-subeyebrow li {
    padding: 8px 15px;
    font-size: 13px;
    margin: 10px 8px 0 0;
}
.img-container {
    margin: 12% 0 25% 0;
}
#index-list-title-container {
    padding: 10% 0% 15% 0;
}
.me-icon img {
    width: 41px;
    left: 14px;
}
.index-icon-container {
    padding: 0 0 75% 0;
}
.index-icon {
    width: 100%;
}
.branding-eyebrow-left, .branding-eyebrow-right {
    font-size: 14px;
    width: 100%;
    text-align: center;
    -webkit-text-stroke: 0.2px;
}
.branding-pov {
    width: 100%;
    font-size: 7vw;
    margin: 5% 0;
    -webkit-text-stroke: 0.2px;
}
.hidden-imag-mobile {
    width: 100%;
    display: block;
    visibility: visible;
    margin: 5% 0 0 0;
}
.button-list span:after {
    opacity: 1;
    right: 5px;
    -webkit-text-stroke: 0px;
}
.button-list-request span:after {
    opacity: 1;
    right: 1px;
    -webkit-text-stroke: 0px;
}
.button-list-cs span:after {
    opacity: 1;
    right: 1px;
    -webkit-text-stroke: 0px;
}
.button-list span {
    font-size: 30px;
    bottom: 9px;
    right:0px;
}
.button-list-cs span {
    font-size: 15px;
    width: 31%;
}
.button-list-request span {
    font-size: 15px;
}
.nda-icon img {
    width: 25px;
    margin: -2px 0 0 25px;
}
.image-deck {
    height: 110px;
    width: 110px;
    margin: 2.6%;
}
.paragraph-index-3 {
    width: 92%;
    bottom: 17vh;
    right: 5%;
    position: absolute;
}
.me-icon {
    width: 380px;
    right: -10px;
    margin: 6% 0!important;
}
.me-icon span {
    -webkit-text-stroke: 0.2px #FDF8E6;
}
.me-icon img {
    margin: 0px 0 0 13px;
}
.footer-freelance-title {
    font-size: 48px;
}
.footer-freelance {
    width: 70%;
    top: 30vh;
    margin: 0;
}
.icon-footer {
    width: 31px;
    margin: 0 1.6%;
}
.footer-link-line {
    width: 91%;
    margin: 0% 4.5%;
    bottom: 23%;
}
.footer-link-line-second{
    width: 91%;
    margin: 0% 4.5%;
    bottom: 23%;
}
.footer-link {
    width: 19.12%;
}
.footer-link-second{
    width: 19.12%;
}
#footer-link-mobile{
    border-right: none;
  }
  #footer-link-mobile-second{
    border-right: none;
  }
  .footer-link-email {
    width: 100%;
    border-bottom: 1px solid #DE5634;
}
.footer-link-email a {
    left: 51%;
}
.footer-link-email-second {
    width: 100%;
    border-bottom: 1px solid #FDF8E6;
}
.footer-link-email-second a {
    left: 51%;
}
.about-list-bottom-title {
    font-size: 76px;
    margin: 0% 3% 3% 3%;
}
.about-list-key-container-2 {
    font-size: 10px;
    padding: 14px 4px 0 4px;
}
.branding-image-container {
    margin: 25% 0 10% -4.3%;
    width: 109%;
}
.video__block {
    margin: 13% 0 13% 0;
}
.grid-2 {
    width: 18%;
}
.grid-1 {
    width: 10.2%;
}
.about-icon-list {
    margin: 0 2.5% 0 1%;
}
.loading-about, .loading-lush, .loading-dq, .loading-at, .loading, .loading-tfs, .loading-rfrs, .loading-tridge{
    background: url("../img/loading_3.gif");
    background-repeat: no-repeat;
    background-size: 100% auto;
} 
.slide {
    width: 86%;
    transform: translate(-50%, -39%);
}
.about-bottom-text-left {
    width: 100%!important;
    font-size: 15px;
    line-height: 125%;
    margin: 0 0 10% 0;
}
.about-bottom-text-right {
    width: 100%!important;
    font-size: 15px;
    line-height: 125%;
}
.about-top-text {
    padding: 42% 0 15% 0;
}
.about-top-text-line-1, .about-top-text-line-2, .about-top-text-line-3, .about-top-text-line-4, .about-top-text-line-5 {
    font-size: 50px;
    margin: 6% 0;
}
.about-top-text-1 {
    margin-right: 11%;
    margin-left: 1%;
}
.about-top-text-2 {
    margin-right: 8.6%;
    margin-left: 0.7%;
}
.about-top-text-3 {
    margin-left: -65%;
}
.about-top-text-4 {
    margin-right: 69.2%;
    margin-left: 1.5%;
}
.about-top-text-5 {
    margin-right:40%;
    margin-left: 0%;
}
.about-bottom-text {
    padding: 0% 0 75% 0;
}
.horizontal-scroll-section h2 {
    font-size: 36px;
}
.horizontal-scroll-section__content-section {
    display: inline;
    padding: 75% 0% 0 18%;
    min-width: 111vw;
}
#freelance-about {
    font-size: 14px;
    top: -68%;
    right: 1%;
    width: 92%;
    text-align: right;
    letter-spacing: 1px;
    background-color: transparent;
}
.spacer {
    padding: 45% 0 0 0;
}
.spacer > h3{
    width: 750vw;
font-size: 72px;
letter-spacing: 3px;
}
.horizontal-scroll-section img {
    max-height: 40%;
    margin: 0% 0% 10% 7%;
}
.about-list-container-2 {
    margin: 0 0 20% 0;
}
.tag {
    top: -2em;
}
.eyeblow {
    margin: 1.5% 0% 5% 0%;
    font-size: 12px;
}
.content-detail-title{
    -webkit-text-stroke: 0.2px;
}
.content-detail-description {
    font-size: 16px;
}
.list-title-top {
    width: 92%;
    margin: 50% 4% 14% 4%;
}
.detail-job li {
    padding: 8px 15px;
    font-size: 15px;
}
.detail-role {
    width: 100%;
    margin: 7% 0 0% 0%;
}
.detail-job {
    margin: 0 0% 42% 0%;
}
.button {
    -webkit-text-stroke: 0.2px;
}
.list-title-top h1 {
    font-size: 9vw;
    margin: 0 0 0 0%;
}
.list-detail-container {
    width: 100%;
    position: relative;
    right: -1%;
}
.circle-to-square_container {
    width: 94%;
    margin: 0 3%;
    flex-direction: column;
}
.list-border {
    font-size: 12px;
}
.list-half {
    width: 100%;
    display: block;
}
.list-title h3 {
    margin: 13% 1% 5% 1%;
}
.list-title p {
    width: 80%;
    margin: 5% 10% 27% 10%;
    font-size: 16px;
}
.circle-to-square_container:nth-child(odd) {
    flex-direction: column-reverse;
}
.list-img {
    margin-bottom: -2px;
    margin-left: 0px;
    right: 0px;
}
#list-grid-fix-2 {
    right: 0px;
    top: -3px;
}
#list-grid-fix-1 {
    left: 0px;
    top: -2px;
}
#list-grid-fix-8 {
    left: 0px;
}
#list-grid-fix-9 {
    left: 0px;
    top: -1px;
}
#list-grid-fix-2-1 {
    left: 0px;
    top: -1px;
}
#list-grid-fix-1-1 {
    left: 0px;
    top: -2px;
}
#list-grid-fix-2-2 {
    left: 0px;
    top: -5px;
}
#list-grid-fix-1-2 {
    left: 0px;
    top: -4px;
}
#list-grid-fix-2-3 {
    left: 0px;
    top: -3px;
}
#list-grid-fix-1-3 {
    left: 0px;
    top: -4px;
}
#list-grid-fix-3-2 {
    margin-top: -4px;
}
#list-grid-fix-3-3 {
    margin-top: -5px;
}
#list-grid-fix-10 {
    left: 0px;
}
#list-grid-fix-40 {
    left: 0px;
}
.list-box-title-1 {
    width: 100%;
    background-color: #DE5634;
    border-bottom: 2px solid #FDF8E6;
}
.list-box-title-2 {
    width: 100%;
    background-color: #DE5634;
}
#list-grid-fix-4 {
    left: 0;
    top: -3px;
}
.list-box-title {
    color: #FDF8E6;
}
.circle-to-square_container-last {
    width: 94%;
    margin: 0 3%;
}
.circle-to-square_container-last {
    width: 94.38%;
    margin: 0 3% 0 2.95%;
}
.item-second {
    padding: 45% 2% 2% 2%;
}
.list-title-second h3 {
    margin: 25% 10% 0% 10%;
    -webkit-text-stroke: 0.2px;
}
.list-eyebrow {
    margin: 8% 3% 3% 3%;
}
#mobile-eyebrow-list span {
    margin: 10% 4% 0% 4%;
    display: flow-root;
}
.list-title-second {
    height: 280px;
}
.list-title-second p {
    line-height: 125%;
}
.list-border {
    padding: 8px 23px;
}
  .cursor-scroll::-webkit-scrollbar{
   visibility: visible;
   width: 12px;
  }
  .cursor-scroll::-webkit-scrollbar-track{
   visibility: visible; 
   background-color: #DE5634;
  }
  .cursor-scroll::-webkit-scrollbar-thumb{
   visibility: visible;
   background-color: #FDF8E6;
  }
  .sub-name-color{
    font-size: 11px;
  }
  .laptop-wrapper-2 {
    margin: 3% 0 0 4%;
  }
  .laptop-wrapper-3 {
    margin: 10% 0% 0 4%;
}
  .laptop::-webkit-scrollbar{
    visibility: visible;
    width:11px;
   }
   .laptop::-webkit-scrollbar-thumb{
    visibility: visible;
     background-color: #FDF8E6;
   }
   .laptop::-webkit-scrollbar-track{
    visibility: visible;
    background-color: #DE5634;
   }
   .scroll-custom::-webkit-scrollbar{
    visibility: visible;
    height: 10px;
  }
   .scroll-custom::-webkit-scrollbar-thumb{
    visibility: visible;
    background-color: #FDF8E6;
  }
   .scroll-custom::-webkit-scrollbar-track{
    visibility: visible;
    background-color:#DE5634;
  }
   .laptop-2::-webkit-scrollbar{
    width: 11px;
    visibility: visible;
   }
   .laptop-3::-webkit-scrollbar{
    width: 11px;
    visibility: visible;
   }
   .laptop-2::-webkit-scrollbar-track{
    background-color: #DE5634;
    visibility: visible;
   }
   .laptop-3::-webkit-scrollbar-track{
    background-color: #DE5634;
    visibility: visible;
   }
  .laptop-2::-webkit-scrollbar-thumb{
    background-color: #FDF8E6;
    visibility: visible;
  }
  .laptop-3::-webkit-scrollbar-thumb{
    background-color: #FDF8E6;
    visibility: visible;
  }
   .laptop-4::-webkit-scrollbar-track{
    visibility: visible;
     background-color: #DE5634;
   }
   .laptop-4::-webkit-scrollbar-thumb{
    visibility: visible;
     background-color: #FDF8E6;
   }
   .laptop-4::-webkit-scrollbar{
    visibility: visible;
    width: 11px;
   }
   .mg-mobile-xlg {
    margin-top: 110%;
   }
   #detail-tfs-phone {
    bottom: -320%;
}
.comment-detail-20 {
    right: 10%;
}
#carousel {
    height: 44vh;
}
.branding-font-rfrs-main-ex, .branding-font-rfrs-second-ex, .branding-font-adaptive-ex, .branding-font-dq-second-ex, .branding-font-dq-main-ex, .branding-font-lush-ex {
    font-size: 24px;
}
.branding-color-container {
    margin: 12% 0% 9% 0%;
}
#detail-full-bleed-crop {
    margin: 15% 0 10% 0;
}
.email-tfs {
    margin: 10% 0;
}
.tfs-sub-title {
    font-size: 16px;
    margin: 3px 0 0 3%;
}
.laptop-wrapper {
    margin: 10% 4%;
}
.comment-detail-23 {
    margin: 5% 0 10% 0;
}
.vid-size-full {
    width: 90%;
    margin: 10% 0 0 5%!important;
}
.odd-title-lush-text-second {
    width: 40%;
    right: -58%;
}
.odd-title-lush-text-3 {
    position: relative;
    right: -9%; 
}
.odd-title-lush-text-4 {
    position: relative;
    right: -50%;
}
.branding-container {
    margin: 15% 0 0 0;
width: 100%;
}
.lush-green, .lush-navy, .lush-red, .lush-yellow, .lush-grass {
    height: 150px;
    margin: 5px 5px 50px 5px;
}
.rfrs-green, .rfrs-orange, .rfrs-yellow, .rfrs-purple, .rfrs-seagrass {
    height: 150px;
    margin: 5px 5px 50px 5px;
}
.dq-yellow, .dq-red, .dq-orange, .dq-blue, .dq-green, .dq-pink {
    height: 150px;
    margin: 5px;
}
.adaptive-orange, .adaptive-blue-2, .adaptive-blue-3, .adaptive-navy, .adaptive-green {
    height: 150px;
    margin: 5px;
}
.branding-image-title {
    font-size: 32px;
    margin-top: 20px;
    -webkit-text-stroke: 0.2px;
}
.branding-image-paragraph {
   line-height: 125%;
}
.branding-font-container {
    margin: 18% 0% 14% 0%;
}
.branding-image-eyebrow {
    margin-top: 25px;
}
.branding-image-paragraph {
    margin-top: 20px;
    font-size: 15px;
}
#carousel img {
    width: 100%;
    margin-top: 15px;
}
.comment-detail-7 {
    width: 80%;
    right: -13%;
    position: relative;
    margin: 12% 0 6% 0;
}
#carousel-narrow {
    width: 260px;
    margin: 0 15px 0% 15px;
}
#carousel li {
    margin-right: 5px;
    padding: 0 15px 0 10px;
    width: 260px;
    height: 333px;
}
#carousel-content-desktop li {
    width: 400px;
}
#carousel-content-desktop-apple li {
    width: 400px;
}
#carousel-content-desktop-dq li {
    width: 400px;
}
#carousel-content-desktop-without-comment li {
    width: 370px!important;
}
#carousel-content-apple-2 li{
    width: 400px!important;
    margin-right: 5%;
}
#carousel-content-mobile li {
    width: 230px;
    height: 500px;
    margin: 0 5% 0 0%;
}
#carousel-content-mobile-dq li {
    width: 230px;
    height: 235px;
    margin: 0 5% 0 0%;
}
#carousel-content-apple li{
    width: 400px;
    margin: 0 5% 0 0;
  }
.carousel-image-mobile {
    width: 180px!important;
}
#carousel-content-mobile-wdth-fix{
    width: 240px!important;
  }
  /* lush web */
#carousel-content-desktop {
    height:39vh;
}
#carousel-content-desktop-apple {
    height:34vh;
}
#carousel-content-desktop-dq {
    height:33vh;
}
#carousel-content-apple {
    height: 52vh;
}
#carousel-content-apple-2 {
height: 50vh;
}
/* dream queen branding */
#carousel-content-desktop-without-comment {
    height: 41vh;
}
/* lush mobile */
#carousel-content-mobile {
    margin: 0 0;
    height: 61vh;
}
#carousel-content-mobile-dq {
    margin: 0 0;
    height: 61vh;
}
#adaptive-banner {
    width: 100%;
    margin: 0% 0% 0% 0%;
}
.adpative-web {
    width: 100%;
    margin-left: 0%;
}
.adpative-web-2 {
    width: 100%;
    margin-left: 0%;
    margin-top: 10%;
}
#half-right {
    width: 90%;
    margin: 8% 5% 0% 5%;
}
.branding-font-lush-name, .branding-font-dq-second-name, .branding-font-rfrs-main-name, .branding-font-rfrs-second-name, .branding-font-adaptive-name {
    font-size: 14px;
    float: left;
    margin: 4% 0 0% 0;
}
.branding-font-dq-main-name{
    margin: 4% 0 10% 0;
}
.branding-font-rfrs-main-name {
    margin: 4% 0 10% 0;
}
#caption-loca {
    text-indent: 4em;
    letter-spacing: 1px;
}
section .comment-sticky {
    height: 29vh;
    margin-top: -23%;
}
section .comment-sticky-2 {
    height: 33vh;
    margin-top: -40%;
}
#comment-detail-dq-odd {
    margin-top: 76%;
}
.next-title-container {
    width: 100%;
    margin: 30% 0;
}
.comment-detail-8 {
    top: 3%;
}
.comment-detail-16 {
    margin: 10% 0;
}
.apple-container-2 {
    margin: 15% 2.5%;
}
.apple-container-3 {
    width: 100%;
    margin: 0 0%;
    display: grid;
}
.apple-img {
    width: 100%;
    margin: 0 0 10% 0%;
}
.apple-img-twic {
    width: 100%;
    margin: 0 0 10% 0%;
}
.apple-img-social{
    width: 100%;
    margin: 0 0 10% 0%;
  }
.comment-detail-28 {
    width: 80%;
    margin-left: 10%;
}
.apple-comment {
    padding: 23% 0 0 0;
}
section .comment-sticky-3 {
    margin: -20% 8% 25% 10%;
}
.icon-adaptive {
    width: 15%;
    margin: -9% 0% 5% 91%;
}
.comment-detail-25 {
    margin: 10% 0% 5% 0%;
}
.comment-detail-12 {
    margin: 0 0 10% 0;
}
#adaptive-video {
    width: 100%;
    margin: 10% 0 0 0%;
}
#detail-long-3 {
    width: 100%;
    margin-left: 0%;
}
.laptop-wrapper-4 {
    width: 90%;
    margin-left: 5%;
    height: 29vh;
}
#detail-7 {
    width: 100%;
    margin-left: 0%;
}
#detail-7-left {
    width: 100%;
    margin-left: 0%;
}
#detail-rfrs-1 {
    width: 100%;
    margin: 0 0 0 0%;
}
#detail-rfrs-2 {
    width: 80%;
    margin: 5% 10%;
}
.apple-cp-1 {
    width: 50%;
    margin: 0;
}
.apple-cp-2 {
    width: 47.5%;
    margin: 0 0 0 2.5%;
}
.apple-cp-3 {
    width: 47.5%;
    margin-right: 0;
}
.apple-half {
    width: 100%;
    margin: 0 0%;
}
 .more-work-marquee a {
        font-size: 50px;
        margin: 0 20px;
    }
    .track .text {
        margin: 0;
    }
    .more-work-marquee {
        height: calc(100px + 3rem);
    }
    .more-work-marquee img {
        max-height: 80px;
    }
    .comment-detail-27 {
        width: 80%;
        margin: 10% 10% 15% 0%;
    }
    .apple-grid-2 {
        margin-left: 0%;
        width: 48.5%;
    }
    .apple-third {
        margin-left: 0%;
        width: 48.5%;
    }
    .apple-grid-1 {
        width: 48.7%;
        margin-left: 0;
    }
    #apple-grid-odd-1 {
        margin: 15.6% 0% 0 2.5%;
    }
    #apple-grid-odd-4 {
        margin: 0% 0% 0 2.5%;
    }
    #apple-grid-odd-5 {
        margin: 0% 0% 0 2.5%;
    }
    .gird-float {
        width: 48.6%;
        margin: 0;
    }
    #apple-grid-odd-2 {
        margin: 0 0 0 0%;
    }
    #apple-grid-odd-4 {
        margin: 0% 0% 0 2.9%;
    }
    .track .text {
        -webkit-animation: marquee 40000ms linear infinite;
                animation: marquee 40000ms linear infinite;
      }
      .track .text.-twox {
        -webkit-animation-duration: 17000ms;
                animation-duration: 17000ms;
      }
      .nexttoproject {
        bottom: 0px;
      }
      .footer-container {
        margin: -3px 0 -3px 0;
    }.tridge-container {
        width: 98%;
        margin: 0 1%;
    }
    .tridge-four {
        width: 50%;
        margin: 0 0 -20px 0;
    }
    .tridge-five {
        width: 33.33%;
        float: left;
        margin: 0 0 -17px 0;
    }
    .tridge-half {
        width: 100%;
        margin: 0% 0 -5% 0;
    }
    .tridge-container-odd{
        width: 97%;
        margin: 0 0 0 2%;
    }
    .tridge-four {
        width: 45%;
    }
    #social-tride {
        margin-left: 3%;
    }
    .tridge-five {
        width: 45%;
    }
}








@media only screen and (max-width: 415px) {
    .new-logo-landing {
        margin: 0 0px 0 -17px;
    }
    .new-logo-about {
        margin: 0 0px 0 -17px;
    }
    .header.small .logo-header {
        left: 98%;
    }
    .branding-image-container {
        margin: 25% 0 10% -4.5%;
        width: 108.8%;
    }
    .detail-job li {
        padding: 8px 13px;
    }
    .paragraph-index-2 {
        width: 78%;
    }
    .footer-link {
        width: 19.09%;
    }
    .wrapper-index-icon {
        height: 68vh;
    }
    .image-deck {
        height: 105px;
        width: 105px;
    }
    .name-index, .name-index-2 {
        width: 35%;
    }
    .title-word-3 {
        top: 50vh;
    }
    .name-index {
        top: 61.3vh;
    }
    .title-word-4 {
        /* bottom: 21.5vh; */
    }
    .index-icon-container {
        margin: 8% 3% 0 3%;
        padding: 0 0 75% 0;
    }
    .paragraph-index-3 {
        width: 90%;
        bottom: 22%;
        right: 5%;
    }
    .me-icon {
        width: 360px;
        right: -5px;
    }
    .index-list-name {
        left: 17.5%;
    }
    .index-list-year {
        right: 27%;
    }
    .index-list-subeyebrow {
        margin: 6% 0px 0px 17%;
    }
    .nda-icon img {
        width: 23px;
    margin: -2px 0 0 24px;
    }
    .about-top-text-line-1, .about-top-text-line-2, .about-top-text-line-3, .about-top-text-line-4, .about-top-text-line-5 {
        font-size: 48px;
        margin: 4% 0;
    }

    .about-top-text-1 {
        margin-left: 0%;
        margin-right: 11%;
    }
    .about-top-text-2 {
        margin-right: 9%;
        margin-left: 0%;
    }
    .about-top-text-3 {
        margin-left: -65%;
    }
    .about-top-text-4 {
        margin-right: 68%;
        margin-left: 1%;
    }
    .about-top-text-5 {
        margin-right: 39%;
        margin-left: -0.2%;
    }
    .about-bottom-text {
        padding: 0% 0 77% 0;
    }
    #freelance-about {
        top: -55%;
        width: 95%;
    }
    .footer-link-second {
        width: 19.08%;
    }
    .about-icon-list {
        width: 12%;
    }
    .about-list-key-container-2 {
        height: 54px;
        padding: 12px 2px 0px 2px;
    }
    .grid-2 {
        width: 17%;
    }
    .grid-1 {
        width: 11%;
    }
    .list-title-top {
        margin: 55% 0% 15% 4%;
    }
    .list-border {
        padding: 8px 21px;
    }
    .list-title-second {
        height: 300px;
    }
    #detail-tfs-phone {
        bottom: -325%;
    }
    .tfs-sub-title {
        font-size: 14px;
    }
    .laptop-wrapper {
        height: 56vh;
    }
    .apple-container {
        margin: 0 2.5% 5% 2.5%;
    }
    .comment-adopt {
        font-size: 14px;
        line-height: 125%;
    }
    .apple-comment {
        font-size: 14px;
        line-height: 125%;
    }
}







@media only screen and (max-width: 390px) {
    #canvas {
        top: 42vh;
    }
    #index-list-title-container {
        padding: 10% 0% 10% 0;
    }
    .header.small .logo-header {
        left: 101.5%;
    }
    .branding-container {
        margin: 20% 0 0 0;
    }
    #carousel-content-desktop-apple {
        height: 35vh;
    }
    #carousel-content-apple {
        height: 54vh;
    }
    #carousel-content-apple-2 {
        height: 52vh;
    }
    .index-content-center h2 {
        margin: 25% 0 5% 0;
    }
    .title-index {
        font-size: 64px!important;
    }
    .name-index, .name-index-2 {
        font-size: 1.8em;
    }
    .paragraph-index {
        width: 36%;
        /* top: 20.5%; */
    }
    .hidden-imag-mobile {
        margin: 7% 0 0 0;
    }
    .img-hover-effect-link {
        padding: 8% 0 8% 0;
        font-size: 13px;
    }
    .me-icon img {
        padding: 0 0 27px 0px;
    }
    .button-list-cs span {
        font-size: 13px;
    }
    .button-list-request span {
        font-size: 13px;
        bottom: 0px;
    }
    .button-list span {
        font-size: 33px;
        bottom: 12px;
        right: 0px;
    }
    .sub-title-universe {
        font-size: 46px;
    }
    #carousel li {
        height: 360px;
    }
    .index-list-subeyebrow {
        margin: 6% 0px 0px 17%;
    }
    .index-list-subeyebrow li {
        padding: 7px 12px;
    }
    .index-list-subeyebrow li {
        margin: 10px 5px 0 0;
    }
    .index-icon-container {
        margin: 8% 3% 0 3%;
        padding: 0 0 80% 0;
    }
    .image-deck {
        height: 100px;
        width: 100px;
        margin: 2.6%;
    }
    .paragraph-index-3 {
        width: 93%;
        bottom: 21%;
        right: 3%;
    }
    .me-icon {
        width: 345px;
        right: 0px;
    }
    .me-icon img {
        width: 42px;
        margin: 0px 0 0 10px;
        left: 16px;
    }
    .title-word-3 {
        top: 49vh;
    }
    .name-index {
        top: 60.5vh;
    }
    .title-word-4 {
        /* bottom: 22vh; */
    }
    .paragraph-index-2 {
        width: 83%;
        /* bottom: 10vh; */
    }
    .about-top-text-line-1, .about-top-text-line-2, .about-top-text-line-3, .about-top-text-line-4, .about-top-text-line-5 {
        font-size: 42px;
    }

    .about-bottom-text {
        padding: 0% 0 80% 0;
    }
    .spacer {
        padding: 36% 0 0 0;
    }
    .spacer > h3 {
        width: 800vw;
        font-size: 64px;
        letter-spacing: 2px;
    }

    .about-top-text-1 {
        margin-left: 0.5%;
        margin-right: 13.6%;
    }
    .about-top-text-2 {
        margin-right: 11.9%;
        margin-left: 0.5%;
    }
    .about-top-text-5 {
        margin-right: 38.4%;
        margin-left: -0.7%;
    }
    #freelance-about {
        width: 76%;
        top: -75%;
    }
    .grid-2 {
    width: 15.5%;
    }
    .grid-1 {
        width: 11.5%;
    }
    #carousel {
        height: 57vh;
    }
    .eyeblow {
        margin: 4.5% 0% 3.5% 0%;
        font-size: 14px;
    }
    .content-detail-my-role-container {
        margin-top: 7%;
    }
    section {
        margin: 25% 0!important;
    }
    section .comment-sticky-3 {
        margin: -20% 8% 35% 10%;
    }
    .detail-title {
        margin: 25vh 0% 5% 4%;
    }
    .detail-job li {
        padding: 8px 9px;
    }
    .detail-job {
        margin: 0 0% 43% 0%;
    }
    .comment-detail-14, .comment-detail-13, .comment-detail-12, .comment-detail-18, .comment-detail-19, .comment-detail-21, .comment-detail-10, .comment-detail-9, .comment-detail-15, .comment-detail-16, .comment-detail-4, .comment-detail-5{
        width: 90%;
        left: 5%;
    }
    section .comment-sticky-3 {
        margin: -20% 8% 25% 5%;
        width: 90%;
    }
    #detail-quater, .comment-detail-26, .comment-detail-28 {
        width: 90%;
        margin-left: 5%;
    }
    .comment-detail-20 {
        right: 5%;
        width: 90%;
    }
    .mg-mobile-xlg {
        margin-top: 120%;
    }
    #detail-tfs-phone {
        bottom: -350%;
    }
    .comment-detail-23 {
        width: 90%;
        margin: 5% 0% 10% -5%;
    }
    .comment-detail-22, .comment-detail-11, .comment-detail-3, .comment-detail-24 {
        width: 90%;
        right: -5%;
    }
    #carousel-content-mobile {
        height: 80vh;
    }
    #carousel-content-desktop {
        height: 40vh;
    }
    section .comment-sticky {
        width: 90%;
        margin-left: 5%;
        height: 31vh;
    }
    section .comment-sticky-2 {
        height: 37vh;
        width: 90%;
        margin-left: 5%;
    }
    #carousel-content-mobile-dq {
        height: 72vh;
    }
    #detail-full-bleed-crop {
        margin: 10% 0 10% 0;
    }
    .comment-detail-27 {
        width: 90%;
        margin: 10% 5% 15% 0%;
    }
    .comment-detail-29 {
        width: 90%;
        margin: 5% 5% 0 0;
    }
    .footer-link-second {
        width: 19.03%;
    }
    .footer-link {
        width: 19.03%;
    }
    .list-title p {
        width: 80%;
        margin: 6% 10% 30% 10%;
        font-size: 16px;
    }
    .list-border {
        padding: 8px 18px;
    }
    .button {
        font-size: 14px;
    }
    .list-title-second h3 {
        font-size: 22px;
    }
    .list-title-second p {
        width: 86%;
        margin: 10% 7% 0% 7%;
        font-size: 13px;
    }
    .list-box-title {
        font-size: 14px;
    }
.tfs-sub-title-small {
    font-size: 13px;
    float: left;
}
.video__block {
    margin: 20% 0 13% 0;
}
.about-list-container-2 {
    margin: 0 0 25% 0;
} 
}








@media only screen and (max-width: 375px) {
    .nav{
        width: 96%;
    }
    section .comment-sticky-3 {
        margin: -20% 8% 30% 5%;
    }
    #carousel-content-mobile-dq {
        height: 80vh;
    }
    .new-logo-landing {
        margin: 0 0px 0 -15px;
    }
    .new-logo-about {
        margin: 0 0px 0 -15px;
    }
    .header.small .logo-header {
        left: 97%;
    }
    .footer-link, .footer-link-email, .footer-link-second, .footer-link-email-second {
        height: 6vh;
    }
    .circle-2 {
    width: 6px;
    height: 6px;
    margin-right: 7px;
    }
    .nav-work {
    margin-left: -6%;
}
    .footer-link {
        width: 19.06%;
    }
    .list-title-top {
    width: 94%;
    margin: 60% 0% 12% 3%;
    }
    .footer-freelance {
    top: 25vh;
    }
    .footer-link-line-second {
    height: 6vh;
    }
    .footer-freelance-title {
    font-size: 40px;
    }
    .icon-footer {
        width: 27px;
    }
    .me-icon {
        margin: 7% 0!important;
        width: 317px;
    }
    .me-icon span {
        font-size: 18px;
    }
    .branding-container {
        margin: 25% 0 0 0;
        width: 100%;
    }
    .image-deck {
        height: 96px;
        width: 96px;
        margin: 2.6%;
    }
    .index-list-name {
        left: 15.5%;
    }
    .index-list-subeyebrow {
        margin: 6% 0px 0px 15%;
    }
    .index-list-subeyebrow li {
        padding: 8px 11px;
        font-size: 12px;
        margin: 10px 5px 0 0;
    }
    .img-hover-effect-link {
        font-size: 13px;
    }
    .button-list-request span {
        font-size: 13px;
    }
    .button-list-cs span {
        font-size: 13px;
    }
    .button-list span {
        bottom: 11px;
    }
    .title-word-4 {
        bottom: 147px;
    }
    .name-index {
        top: 60.2%;
    }
    .paragraph-index-2 {
        bottom:40px;
    }
    .footer-freelance-eyebrow {
        font-size: 16px;
    }
    .footer-link-second {
        width: 18.99%;
    }
    .footer-link {
        width: 18.99%;
    }
    .list-border {
        padding: 8px 16px;
    }
    .about-top-text {
        padding: 32% 0 7% 0;
    }
    .horizontal-scroll-section h2 {
        font-size: 32x;
    }
    .horizontal-scroll-section p {
        width: 90%;
        line-height: 135%;
    }
    #freelance-about {
        width: 77%;
        top: -77%;
    }
    .about-list-container-2 {
        margin: 0px 0px 25% 0;
    }
    .about-list-bottom-title {
        font-size: 73px;
    }
    .about-icon-list {
        width: 12.5%;
    }
    .paragraph-index-2 {
        width: 90%;
    }
    .paragraph-index {
        width: 38%;
        top: 125px;
    }
    .title-index {
        font-size: 70px!important;
    }
    .name-index, .name-index-2 {
        font-size: 32px;
    }
    .index-content-center p {
        font-size: 14px;
        line-height: 135%;
    }
    .nda-icon img {
        width: 21px;
    margin: -1px 0 0 22px;
    }
    .index-icon-container {
        margin: 8% 3% 0 3%;
        padding: 0 0 80% 0;
    }
    .me-icon {
        height: 49px;
        padding: 13px 12px 0;
    }
    .paragraph-index-3 {
        width: 91%;
        right: 5%;
    }
    .about-top-text-3 {
        margin-left: -66%;
    }
    .about-top-text-1 {
        margin-left: -0.6%;
        margin-right: 11.9%;
    }
    .about-top-text-4 {
        margin-right: 67.7%;
        margin-left: 0%;
    }
    .about-top-text-2 {
        margin-right: 9.9%;
        margin-left: -0.8%;
    }
    .about-top-text-5 {
        margin-right: 38%;
        margin-left: -1.6%;
    }
    .content-detail-description {
        line-height: 135%;
    }
    #carousel-content-mobile-dq li {
        width: 240px;
        height: 520px;
        margin: 0 10% 0 0%;
    }
    #carousel-content-mobile li {
        width: 240px;
        height: 520px;
        margin: 0 10% 0 0%;
    }
    .comment-detail-8 {
        top: 6%;
    }
    #comment-detail-dq-odd {
        margin-top: 85%;
    }
    #carousel-content-desktop-dq {
        height: 39vh;
    }
    #carousel-content-desktop-dq li {
        width: 450px;
    }
    #carousel-content-desktop li {
        width: 450px;
    }
    #carousel-content-desktop-without-comment {
        height: 48vh;
    }
    #carousel-content-desktop-apple li {
        width: 450px;
    }
    #carousel-content-desktop {
        height: 44vh;
    }
    #carousel-content-desktop-apple {
        height: 42vh;
    }
    .detail-job {
        margin: 0 0% 45% 0%;
    }
    .detail-job li {
        width: 48.5%;
        padding: 8px 15px;
        font-size: 14px;
    }
    .detail-title {
        width: 93%;
        margin: 25vh 0% 0% 3%;
    }
    #detail-role-fix {
        margin: 2% 3% 2% 0%;
    }
    section .comment-sticky {
        height: 35vh;
    }
    section .comment-sticky-2 {
        height: 40vh;
    }
    .track .text {
        margin: 2px 0 0 0;
    }
    #carousel-content-apple {
        height: 57vh;
    }
    #carousel-content-apple-2 {
        height: 53vh;
    }
    #detail-tfs-phone {
        bottom: -360%;
    }
    .branding-image-container {
        margin: 25% 0 10% -4.3%;
        width: 108.3%;
    }
    .about-bottom-text {
        padding: 0% 0 83% 0;
    }
    .horizontal-scroll-section__content-section {
        padding: 61% 0% 0 20%;
    }
}









@media only screen and (max-width: 360px) {
    .new-logo-landing {
        margin: 0 0px 0 -22px;
    }
    .new-logo-about {
        margin: 0 0px 0 -22px;
    }
    .header.small .logo-header {
        left: 100%;
    }
     .spacer > h3 {
        width: 800vw;
        font-size: 54px;
        letter-spacing: 2px;
    }
    .horizontal-scroll-section__content-section{
        min-width: 110vw;
        padding: 75% 0% 0 20%;
    }
    .footer-link-second {
    width: 18.95%;
}
.about-top-text-line-1, .about-top-text-line-2, .about-top-text-line-3, .about-top-text-line-4, .about-top-text-line-5 {
    font-size: 42px;
}
.about-top-text {
    padding: 32% 0 6% 0;
}
.about-list-container-2 {
    margin: 0px 0px 35% 0;
}
.index-icon-container {
    width: 98%;
    margin: 8% 0% 0 1%;
    padding: 0 0 80% 0;
}
.paragraph-index-3 {
    right: 3%;
    width: 95%;
    bottom: 23%;
}
.footer-link-line {
    width: 94%;
    margin: 0% 3%;
    height: 6vh;
}
.footer-link-second {
    height: 6vh;
    font-size: 12px;
}
.about-top-text-3 {
    margin-left: -67%;
}
.about-top-text-4 {
    margin-right: 69.5%;
    margin-left: 0.2%;
}
.about-top-text-5 {
    margin-right: 38.9%;
    margin-left: -2%;
}
.footer-link {
    width: 18.95%;
}
#canvas {
    top: 43vh;
}
.about-bottom-text {
    padding: 0% 0 90% 0;
}
.about-bottom-text-left {
    font-size: 14px;
    margin: 0 0 14% 0;
}
.about-bottom-text-right {
    font-size: 14px;
}
.horizontal-scroll-section img {
    max-height: 35%;
}
.horizontal-scroll-section p {
    width: 80%;
    font-size: 14px;
}
#freelance-about {
    font-size: 16px;
    top: -105%;
}
.about-list-bottom-title {
    font-size: 70px;
    margin: 0% 3% 3% 3%;
}
.list-border {
    padding: 8px 14px;
}
.me-icon {
    width: 337px;
    right: -3px;
}
.wrapper-index {
    height: 105vh;
}
.description-index {
    font-size: 14px;
}
.nda-icon img {
    width: 20px;
    margin: -1px 0 0 21px;
}
.title-index {
    font-size: 58px!important;
}
.title-word-1 {
    top: 19vh;
}
.title-word-2 {
    top: 33vh;
}
.name-index-2 {
    top: 42.5vh;
}
.title-word-3 {
    top: 51vh;
}
.name-index {
    top: 63.5vh;
}
.title-word-4 {
    bottom: 175px;
    left: 23%;
}
.paragraph-index-2 {
    width: 89%;
    bottom: 58px;
}
.paragraph-index {
    top:22.5vh;
}
.detail-job li {
    width: 49%;
    padding: 8px 12px;
}
.sub-title-universe {
    font-size: 42px;
}
.comment-detail-9, .comment-detail-10, .comment-detail-8, .comment-detail-7, .comment-detail-12, .comment-detail-11, .comment-detail-0, .comment-detail-1, .comment-detail-2, .comment-detail-3, .comment-detail-4, .comment-detail-5, .comment-detail-6, .comment-detail-17, .comment-detail-18, .comment-detail-19, .comment-detail-20, .comment-detail-21, .comment-detail-22, .comment-detail-23, .comment-detail-24, .comment-detail-13, .comment-detail-14, .comment-detail-15, .comment-detail-16, .comment-detail-25 {
    font-size: 13px;
    line-height: 120%;
}
#detail-tfs-phone {
    bottom: -410%;
}
#detail-role-fix {
    margin: 2% 2% 2% 0%;
}
.detail-title {
    width: 96%;
    margin: 25vh 0% 5% 2%;
}
#carousel {
    height: 60vh;
}
#carousel-content-desktop {
    height: 54vh;
}
#carousel-content-mobile {
    height: 90vh;
}
section .comment-sticky {
    height: 42vh;
}
section .comment-sticky-2 {
    height: 47vh;
}
#carousel-content-mobile-dq {
    height: 86vh;
}
#carousel-content-desktop-dq {
    height: 49vh;
}
#carousel-content-desktop-without-comment {
    height: 58vh;
}
.branding-image-container {
    width: 104.7%;
    margin: 25% 0 10% -2.7%;
}
section .comment-sticky-3 {
    height: 39vh;
}
#carousel-content-desktop-apple {
    height: 51vh;
}
#carousel-content-apple {
    height: 70vh;
}
#carousel-content-apple-2 {
    height: 69vh;
}
.tfs-sub-title {
    margin: 3px 0 0 4%;
}
}