html, body {
    margin: 0;
	 width: 100%;
    height: 100%;
    background-color: #ffffff;
/*    font-family: "chaparral-pro-caption";*/
  font-family: 'Rubik', sans-serif;

    font-weight: 300;
    color: #999;
/*    font-style: italic;*/
    -webkit-font-smoothing: antialiased;
    background-image: url(../img/tiles.png);
    background-repeat: repeat;
    overflow-x: hidden;
    
    
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.selected {
    z-index: 999 !important;
}

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

#content {
    width: 100%;
  overflow: hidden;
    margin: auto;
    padding: 40px 60px;
    box-sizing: border-box;
}

#cover {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #FFFFFF;
    z-index: 10000;
    pointer-events: none;
    background-image: url(../img/loading.gif);
    background-size: 84px;
    background-repeat: no-repeat;
    background-position: center;
    left: 0px;
    top: 0px;
    -webkit-transition: opacity 100ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 100ms cubic-bezier(0.19, 1, 0.22, 1);
}

#top_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    background-color: #FFFFFF;
    -webkit-transition: background-color 600ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: background-color 600ms cubic-bezier(0.19, 1, 0.22, 1);
}

.invert #top_bg {
    background-color: #000000;
    -webkit-transition: background-color 600ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: background-color 600ms cubic-bezier(0.19, 1, 0.22, 1);
}

#all_text, #all_text_copy {
    font-size: 40px;
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0px;
    top: 0px;
    padding: 30px;
    box-sizing: border-box;
}

#all_text {
    background-color: #FFFFFF;
    -webkit-transition: background-color 600ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: background-color 600ms cubic-bezier(0.19, 1, 0.22, 1);
}

.invert #all_text {
    background-color: #000000;
    -webkit-transition: background-color 600ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: background-color 600ms cubic-bezier(0.19, 1, 0.22, 1);
}

#all_text_copy {
    z-index: 1000;
    pointer-events: none;
}

#all_text_copy.filler, #all_text.filler {
    pointer-events: none;
}


.bold {
    color: #000000;
    font-style: normal;
}

.bolded {
    color: #000000;
    font-weight: bold;
}

.invert .bold {
    color: #FFFFFF;
    font-style: normal;
}

.invert .bolded {
    color: #FFFFFF;
    font-weight: bold;
}

.link {
    cursor: pointer;    
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -4px 0 white, inset 0 -6px 0 #CCCCCC;
    -webkit-transition: background-color 1600ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: background-color 1600ms cubic-bezier(0.19, 1, 0.22, 1);
}

.invert .link {
    box-shadow: inset 0 -2px 0 white, inset 0 -6px 0 black;
}

.link.selected {
    color: #FFFFFF;
    background-color: #ffcc00;
    box-shadow: inset 0 -4px 0 #ffcc00, inset 0 -6px 0 #ffcc00;
    -webkit-transition: background-color 300ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: background-color 300ms cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    opacity: 1;
}

.link.selectedIntro {
    color: #FFFFFF;
    background-color: #ffcc00;
    box-shadow: inset 0 -4px 0 #ffcc00, inset 0 -6px 0 #ffcc00;
    -webkit-transition: background-color 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: background-color 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    opacity: 1;
}

#all_text_copy .filler, #all_text_copy .link { opacity: 0; }
#all_text_copy .link.selected { opacity: 1; }

.more_details {
    font-size: 17px;
    line-height: 24px;
    width: 40%;
    max-width: 560px;
    background-color: #000000;
    color: #FFFFFF;
    padding: 20px;
    position: absolute;
    top: 100%;
    font-style: normal;
    /* border: 3px solid #ffffff; */
    box-sizing: border-box;
    box-shadow: 2px 3px 5px rgb(0 0 0 / 50%);
    z-index: 99;
    cursor: move;
}


.more_details.selected {
    pointer-events: none;
}

.more_details.selected.locked {
    pointer-events: all;
}

.mobile .more_details.selected {
    pointer-events: all !important;
}

.sub_details {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px !important;
    line-height: 20px;
    width: 40%;
    padding: 20px;
    cursor: move;
    color: #CCCCCC;
}

.skills {
    font-size: 20px;
    padding: 10px 16px;
    font-style: normal;
    cursor: move;
    background-color: #000000;
    color: white;
    display: inline-block;
    width: auto;
}

.quote {
    font-size: 20px;
    width: 25%;
    padding: 10px 20px;
    line-height: 10px;
    cursor: move;
    background-color: #EEE;
    color: black;
}

.quote_text {
    font-size: 14px;
    line-height: 1px;
    position: relative;
    top: -5px;
}

.quotes {
    font-size: 60px;
    line-height: 10px;
    position: relative;
    top: 20px;
    padding-right: 5px;
    color: #CCCCCC;
}

.quotee {
    text-align: right;
    font-size: 16px;
    position: relative;
    bottom: 4px;
}

.smallPic {
    width: 250px;
    height: 250px;
    padding: 0px !important;
/*    border: 0px;*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: move;
}

.smallerPic {
    width: 100px;
    height: 100px;
    left: 20px;
    padding: 0px !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: move;
/*    border: 0px;*/
}

.smallPic.selected, .smallPicer.selected {
    pointer-events: none;
}

.smallPic video {
    width: 103%;
    position: relative;
    left: -4px;
    top: -4px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateZ(.1deg);
}

.smallPic.proud video {
    width: 102%;
    left: -2px;
    top: -2px;
}

.smallPic.aboutMe.me1 { background-image: url("../img/me1.jpg"); border-radius: 100%;}
.smallPic.aboutMe.me2 { background-image: url("../img/me2.jpg"); border-radius: 100%;}
.smallPic.aboutMe.me3 { background-image: url("../img/me3.jpg"); border-radius: 100%;}
.smallPic.aboutMe.me4 { background-image: url("../img/MRIsm.gif"); border-radius: 100%;}
.smallPic.nyc { background-image: url("../img/nyc.jpg"); border-radius: 100%;}
.smallPic.phone { background-image: url(../img/s22ultra.png); width: 400px; height: 225px; margin-top: 180px; }
.smallPic.phone2 { background-image: url(../img/iphone14pro.jpg); width: 400px; height: 225px; margin-top: 180px; }
.smallPic.drone { background-image: url(../img/drone.jpg); width: 225px; height: 400px; margin-top: 100px; }
.smallPic.work-UXUI { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px; }
.smallPic.work-AR { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px;  }
.smallPic.work-3D { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px; }
.smallPic.work-data { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px; }
.smallPic.work-espn { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px;}
.smallPic.work-museum { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px;}
.smallPic.work-nytimes { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px;}
.smallPic.work-tmobile { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px;}
.smallPic.work-google { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px;}
.smallPic.work-elf { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px;}
.smallPic.work-android { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px;}
.smallPic.work-iphone { background-color: white; width: 400px; height: 225px; overflow: hidden; background-image: url(../img/loading.gif); background-size: 50px;}
.smallPic.proud { background-color: black; width: 300px; height: 126px; overflow: hidden; border-radius: .5rem; url(../img/loading.gif); background-size: 50px;}
.smallPic.computer { width: 400px; height: 400px; border: none; box-shadow: none; background-color: transparent; background-image: url(../img/pc.png);}
.smallPic.pc { background-image: url(../img/pc.png); width: 400px; height: 400px; 
    border: none;
    box-shadow: none;
    background-color: transparent; }
.smallerPic.dropUnited { background-image: url(../img/dropUnited.jpg); margin-left: -60px; }
.smallPic.snapchat { background-image: url(../img/kourtney.gif); height: 420px;}
.smallPic.nosemouth { background-image: url(../img/nosemouth.gif); width: 300px; height: 182px}
.smallPic.clash { background-image: url(../img/clash.gif); width: 400px; height: 150px; }
.smallPic.vcd { background-image: url(../img/ksu.jpg); width: 300px; height: 300px; }
.smallPic.ampergram { background-image: url(../img/ampergram.jpg); width: 250px; height: 250px; }
.smallerPic.GHAB_poster { background-image: url(../img/giveHerABreak.jpg); width: 160px; height: 200px; margin-left: -120px; }
.smallerPic.oscar { background-image: url(../img/oscar.png); width: 96px; height: 150px; border: none; margin-left: -170px; margin-top: 80px; background-color: transparent; box-shadow: none; z-index: 100; }
.smallPic.david { background-image: url(../img/david.png); width: 150px; height: 300px; border: 0px; box-shadow: none; background-color: transparent; margin-top: -150px; margin-left: 70px; }
.smallPic.MAL { background-image: url(../img/mal.jpg); width: 130px; height: 130px; border-radius: 100%; background-size: 125%; border: none;}
.smallPic.MALapple { background-image: url(../img/malapple.jpg); width: 130px; height: 130px; border-radius: 100%; background-size: 125%; border: none; margin-top: -20px; margin-left: 15px;}
.smallPic.mojo { background-image: url(../img/mojo.png); width: 130px; height: 130px; border-radius: 100%; background-size: 125%; border: none;}
.smallPic.droga { background-image: url(../img/droga.png); width: 130px; height: 130px; background-color: white; border: none; border-radius: 100%; background-size: 80% }
.smallPic.vmlyr { background-image: url(../img/vmlyr.jpg); width: 130px; height: 130px; background-color: white; border: none; border-radius: 100%; background-size: contain;}
.smallPic.squarespace { background-image: url(../img/squarespace.jpg); width: 130px; height: 130px; background-color: white; border: none; border-radius: 100%; background-size: contain;}
.smallPic.forsmanLogo { background-image: url(../img/forsman.jpg); width: 130px; height: 130px; background-color: transparent; border-radius: 100%;  border: none; }
.smallPic.MRIpic { background-image: url(../img/MRIsm.gif); width: 150px; height: 150px; background-color: transparent; }
.smallPic.potus { background-image: url(../img/potus.jpg); width: 300px; height: 150px; }
.smallerPic.curb { background-image: url(../img/larry.png); width: 100px; height: 100px; border: 0px; box-shadow: none; background-color: transparent; margin-left: -60px; }

.smallPic.photography1 { background-image: url("../img/photo1-.jpg")}
.smallPic.photography2 { background-image: url("../img/photo2-.jpg")}
.smallPic.photography3 { background-image: url("../img/photo3-.jpg")}
.smallPic.photography4 { background-image: url("../img/photo4-.jpg")}
.smallPic.photography5 { background-image: url("../img/photo5-.jpg")}
.smallPic.photography6 { background-image: url("../img/photo6-.jpg")}
.smallPic.photography7 { background-image: url("../img/photo7-.jpg")}
.smallPic.photography8 { background-image: url("../img/photo8-.jpg")}
.smallPic.photography9 { background-image: url("../img/photo9-.jpg")}
.smallPic.photography10 { background-image: url("../img/photo10-.jpg")}
.smallPic.photography11 { background-image: url("../img/photo11-.jpg")}
.smallPic.photography12 { background-image: url("../img/photo12-.jpg")}
.smallPic.photography13 { background-image: url("../img/photo13-.jpg")}
.smallPic.photography14 { background-image: url("../img/photo14-.jpg")}
.smallPic.photography15 { background-image: url("../img/photo15-.jpg")}
.smallPic.photography16 { background-image: url("../img/photo16-.jpg")}
.smallPic.photography17 { background-image: url("../img/photo17-.jpg")}
.smallPic.photography18 { background-image: url("../img/photo18-.jpg")}
.smallPic.photography19 { background-image: url("../img/photo19-.jpg")}
.smallPic.photography20 { background-image: url("../img/photo20-.jpg")}


.selected.logos {
/*  box-shadow: none;*/
}

.smallPic.logo1 { background-image: url("../img/logos/google.png"); }
.smallPic.logo2 { background-image: url("../img/logos/hbo.png"); }
.smallPic.logo3 { background-image: url("../img/logos/nytimes.png"); }
.smallPic.logo4 { background-image: url("../img/logos/apple.png"); }
.smallPic.logo5 { background-image: url("../img/logos/newMuseum.png"); }
.smallPic.logo6 { background-image: url("../img/logos/tmobile.png"); }
.smallPic.logo7 { background-image: url("../img/logos/adidas.png"); }
.smallPic.logo8 { background-image: url("../img/logos/mattressFirm.png"); }
.smallPic.logo9 { background-image: url("../img/logos/motorola.png"); }
.smallPic.logo10 { background-image: url("../img/logos/altice.png"); }
.smallPic.logo11 { background-image: url("../img/logos/moonshot.png"); }
.smallPic.logo12 { background-image: url("../img/logos/airwick.png"); }
.smallPic.logo13 { background-image: url("../img/logos/chase.png"); }
.smallPic.logo14 { background-image: url("../img/logos/paypal.png"); }
.smallPic.logo15 { background-image: url("../img/logos/android.png"); }
.smallPic.logo16 { background-image: url("../img/logos/target.png"); }
.smallPic.logo17 { background-image: url("../img/logos/saucony.png"); }
.smallPic.logo18 { background-image: url("../img/logos/wawa.png"); }
.smallPic.logo19 { background-image: url("../img/logos/plymouth.png"); }
.smallPic.logo20 { background-image: url("../img/logos/odom.png"); }
.smallPic.logo21 { background-image: url("../img/logos/johnsonville.png"); }
.smallPic.logo22 { background-image: url("../img/logos/chobani.png"); }
.smallPic.logo23 { background-image: url("../img/logos/hennessy.png"); }
.smallPic.logo24 { background-image: url("../img/logos/prudential.png"); }

.logos { 
  width: 150px !important;
  height: 100px !important;
  background-color: white;
  background-size: contain;
  box-shadow: 2px 3px 5px rgb(0 0 0 / 50%);
  border: 1px solid #EEEEEE;
}

.photos { 
    width: 166px;
    height: 250px;
    border-radius: 11px;
    box-shadow: 2px 3px 5px rgb(0 0 0 / 50%);
    /* border: 4px solid black; */
}

.horiz {
    width: 250px;
    height: 166px;
}

.smallPic.leap { background-image: url("../img/leap.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 100px;}
.smallPic.pixel { background-image: url("../img/pixel2.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 175px;}
.smallPic.xs10 { background-image: url("../img/xs10.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 175px;}
.smallPic.produo { background-image: url("../img/produo.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 170px;}
.smallPic.fossil { background-image: url("../img/watch.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 150px;}
.smallPic.mate9 { background-image: url("../img/mate9.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 180px;}
.smallPic.x70 { background-image: url("../img/x70.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 180px;}
.smallPic.iphonex { background-image: url("../img/iphone14.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 200px;}
.smallPic.tabA { background-image: url("../img/ipad.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 200px;}
.smallPic.insta { background-image: url("../img/instaOneX2.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 200px;}
.smallPic.moment { background-image: url("../img/moment.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 200px;}
.smallPic.oura { background-image: url("../img/oura.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 200px;}
.smallPic.smove { background-image: url("../img/smove.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 200px;}
/*.smallPic.lytro { background-image: url("../img/lytro.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 200px;}*/
.smallPic.s10 { background-image: url("../img/s22.png"); border: 0px; box-shadow: none; background-color: transparent; background-size: contain; width: 150px; height: 200px;}

a {
    color: #FFFFFF;
    text-decoration: underline;
    font-weight: bold;
}

.cta {
    font-size: 16px;
    color: #000;
    background-color: #FFFFFF;
    border: 6px solid #d3b024;
    box-sizing: border-box;
    box-shadow: 5px 5px 20px rgba(0,0,0,.2);
    z-index: 1001;
    display: inline-block;
    position: absolute;
    padding: 4px 10px;
    left: 0px;
    top: 0px;
    pointer-events: none;
    background-image: url(../img/outbound.png);
    background-repeat: no-repeat;
    background-position: 97%;
    background-size: 15px;
    padding-right: 25px;
    opacity: 0;
}

.bigCTA {
    font-size: 30px !important;
    padding: 7px 10px !important;
    font-weight: 100 !important;
    
}

.caption {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    padding: 5px 20px;
    border: none;
    color: white;
    background-color: black;
}

.close {
    z-index: 102;
    position: absolute;
    background-color: #000000;
    border-radius: 100px;
    width: 30px;
    height: 30px;
    left: -15px;
    top: -15px;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 18px;
    padding: 5px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    pointer-events: all !important;
    background-image: url(../img/lock.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
}

.close_text {
    background-color: black;
    color: white;
    font-style: normal;
    padding: 3px 8px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    position: relative;
    top: 30px;
    left: -25px;
    opacity: 0;
    pointer-events: none;
}

.close:hover .close_text {
    opacity: 1;
}

.caps {
    text-transform: uppercase;
}

.loader {
    position: absolute;
    left: -3px;
    bottom: 0px;
    width: 3px;
    height: 0%;
    background-color: #d3b024;
}

.label {
    background-color: #777;
    color: white;
    font-size: 13px;
    line-height: 21px;
    display: inline-block;
    padding: 2px 10px;
    white-space: nowrap;
    position: absolute;
    z-index: 104;
}

/*.color_clash { background-color: #42aab9; }*/
/*.color_curb { background-color: #F6640F; }*/


.mobile #content {
    height: auto;
}

.reel {
    padding: 0px !important;
    z-index: 1002;
    pointer-events: all;
    background-image: url(../img/reel.jpg);
    background-size: cover;
    background-position: center;
    max-width: none;
}

.reel iframe {
    pointer-events: none;
}

.reel.selected, .reel.selected iframe {
    pointer-events: all !important;
}
    
#behind {
    width: 100%;
    text-align: left;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-left: 2em;
    box-sizing: border-box;
    padding-top: 10px;
    border-top: 1px dashed #DDD;
    color: #FFF;
    font-style: normal;
    z-index: 1;
    background: #000000;
    height: 34px;
}

.lighter {
    color: #FFF;
    font-size: 10px;
}

.mobile #mobile_dark.active {
    width: 200%;
    height: 200%;
    position: fixed;
    pointer-events: none;
    background-color: rgba(0,0,0,.7);
    z-index: 10;
    left: 0px;
    top: 0px;
    display: block;
}

.mobile #mobile_dark {
    display: none;
}

.mobile #mobile_close.active {
    position: fixed;
    width: 40px;
    height: 40px;
    top: 20px;
    right: 20px;
    border-radius: 100%;
    background-color: #FFF;
    color: #000;
    z-index: 1100;
    padding-top: 5px;
    vertical-align: top;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 2px 3px 5px rgb(0 0 0 / 50%);
    border: 2px solid #666666;
    cursor: pointer;
    pointer-events: all !important;
    display: block;
}

.mobile #mobile_close {
    display: none;
}

#footer {
    position: fixed;
    bottom: 6px;
    right: 2em;
    font-size: .8em;
    z-index: 100;
    padding: .2em .4em;
}

#footer a {
    color: #999;
    font-weight:200;
}

.cta.hide {
    display: none !important;
    pointer-events: none;
}

@media (max-width: 1300px) { 
  .logos {
    width: 100px !important;
    height: 66px !important;
  }
}

@media (max-width: 1200px) { 
    
    .more_details {
        font-size: 15px;
        width: 60%;
        padding: 15px;
        /* border: 2px solid white; */
        box-sizing: border-box;
        box-shadow: 2px 3px 5px rgb(0 0 0 / 50%);
    }
    
    .skills {
        font-size: 14px;
        padding: 5px 10px;
        font-style: normal;
        font-weight: bold;
        cursor: move;
        background-color: #000000;
        color: white;
        display: inline-block;
        width: auto;
    }
  
  .close {
    width: 25px;
    height: 25px;
    background-size: 13px;
  }
    
    
    .smallPic.snapchat {        height: 300px !important; width: 180px !important; }
    .smallPic.nosemouth {       width: 300px !important; height: 150px !important; }
    .smallPic.clash {           width: 400px !important; height: 200px !important; }
    .smallPic.vcd {             width: 200px !important; height: 200px !important; }
    .smallPic.MRIpic {          width: 200px !important; height: 200px !important; }
    .smallPic.ampergram {       width: 200px !important; height: 200px !important; }
    .smallPic.david {           width: 100px !important; height: 200px !important; margin-top: 50px; }
    .smallPic.nyc {             width: 100px !important; height: 100px !important; }
    .smallPic.potus {           width: 300px !important; height: 150px !important; }
    .smallerPic.dropUnited {    width: 70px !important; height: 70px !important; margin-left: -40px; }
    .smallerPic.curb {          width: 70px !important; height: 70px !important; margin-left: -40px; }
    
    
    .smallPic.glass {           width: 150px !important; height: 150px !important;}
    .smallPic.iphone6s {        width: 150px !important; height: 150px !important;}
    .smallPic.xps12 {           width: 150px !important; height: 150px !important;}
    .smallPic.moto360 {         width: 150px !important; height: 150px !important;}
    .smallPic.mate9 {           width: 150px !important; height: 150px !important;}
    .smallPic.iphonex {         width: 150px !important; height: 150px !important;}
    .smallPic.tabA {            width: 150px !important; height: 150px !important;}
    .smallPic.re {              width: 150px !important; height: 150px !important;}
    .smallPic.gear360 {         width: 150px !important; height: 150px !important;}
    .smallPic.fitbit {          width: 150px !important; height: 150px !important;}
    .smallPic.smove {           width: 150px !important; height: 150px !important;}
    .smallPic.oneplus {         width: 150px !important; height: 150px !important;}
    .smallerPic.d5120 {         width: 220px !important; height: 140px !important; margin-left: 0px; }
    .smallPic.phone {           width: 400px !important; height: 225px !important;}
    
    .aboutMe { 
        width: 180px;
        height: 180px;
    }

    .photos { 
        width: 120px;
        height: 180px;
    }

    .horiz {
        width: 188px;
        height: 120px;
    }

    
    .quote {
        width: 40%;
    }
    
    .bigCTA {
        margin-top: -35px;
    }
    
}


@media (max-height: 800px) { 
    
    .more_details {
        max-width: 500px;
        font-size: 17px;
    }
    
    .sub_details {
        font-size: 15px;
    }
    
    .smallPic.ampergram {
        width: 150px;
        height: 150px;
    }
    
    .smallPic.snapchat { height: 300px !important; width: 180px !important; }
    .smallPic.phone { width: 300px !important; height: 169px !important; }
    .smallPic.vcd { width: 200px !important; height: 200px !important; }
    .smallPic.MRIpic { width: 200px !important; height: 200px !important; }
    .smallPic.david { width: 100px !important; height: 200px !important; margin-top: 50px; margin-left: -20px; }
    
    .photos { 
        width: 120px;
        height: 180px;
    }

    .horiz {
        width: 188px;
        height: 120px;
    }
    
    .skills {
        font-size: 16px;
        padding: 7px 10px;
    }
    
    .reel {
        width: 480px !important;
        height: 270px !important;
    }
    
    .reel iframe {
        width: 100% !important;
        height: 100% !important;
    }
    
    .cta {
        font-size: 14px;
        padding-left: 10px;
    }
  
    
    
}
    
@media (max-width: 800px) { 

    .quote_text {
        line-height: 8px;
    }
    
    .link {
        box-shadow: inset 0 -2px 0 white, inset 0 -3px 0 #CCCCCC;
    }

    .link.selected {
        box-shadow: 2px 3px 5px rgb(0 0 0 / 50%);
    }
    
    .smallPic.david { width: 100px !important; height: 200px !important; margin-top: -120px; margin-left: 92px; }
    .smallPic.phone { width: 300px !important; height: 169px !important; margin-top: 0px; }
    .smallPic.phone2 { width: 300px !important; height: 169px !important; margin-top: 0px; }
    .smallPic.pc { width: 200px !important; height: 200px !important; }
    .smallerPic.dropUnited {    width: 70px !important; height: 70px !important; margin-left: 0px; }
    .smallerPic.curb {          width: 70px !important; height: 70px !important; margin-left: 0px; }
    .smallPic.ampergram { width: 100px; height: 100px; }
    .smallPic.MRIpic { width: 100px !important; height: 100px !important; left: auto !important; }
  
    .more_details {
        font-size: 14px;
        letter-spacing: 0px;
        /* width: 60%; */
        background-color: black;
        color: white;
        padding: 10px;
        position: absolute;
        top: 100%;
        font-style: normal;
        /* border: 2px solid white; */
        box-sizing: border-box;
        box-shadow: 2px 3px 5px rgb(0 0 0 / 50%);
        z-index: 99;
        cursor: move;
    }

    .sub_details {
        font-size: 12px !important;
        line-height:  20px !important;
        letter-spacing: 0px;
        width: 60%;
        padding: 10px;
        cursor: move;
        color: #CCCCCC;
        font-weight: bold;
    }

    .skills {
        padding: 5px 10px;
        font-style: normal;
        font-weight: bold;
        cursor: move;
        background-color: #000000;
        color: white;
        display: inline-block;
        width: auto !important;
        font-size: 14px !important;
    }

    .quote {
        font-size: 15px;
        width: 70% !important;
        padding: 10px 15px;
        font-style: italic;
        cursor: move;
        background-color: #EEE;
        color: black;
    }

    .quotes {
        font-size: 50px;
        line-height: 2px;
        position: relative;
        top: 20px;
        padding-right: 4px;
    }

    .quotee {
        text-align: right;
        font-size: 16px;
    }
    
    
    /* .smallPic {
        width: 100px !important;
        height: 100px !important;
    } */

    .smallPic.drone {
        margin-top: 0px;
    }
    
    .smallerPic {
        width: 80px;
        height: 80px;
        left: -25px;
    }
    
    .smallPic.clash {
        width: 330px !important;
        height: 140px !important;
    }
    
    .close {
        font-size: 14px;
        width: 20px;
        height: 20px;
        left: -10px;
        top: -10px;
        padding: 2px;
    }
    
    .cta {
        font-size: 12px;
        border: 2px solid #d3b024;
        box-shadow: 2px 3px 5px rgb(0 0 0 / 50%);
        padding: 1px 2px;
        top: 30px;
        position: relative;
    }

    .caption {
        font-size: 12px;
        padding: 5px 10px;
        border: 0px;
        letter-spacing: 0px;
    }
    
    
    .label {
        font-size: 12px;
        padding: 1px 8px;
    }

   
    
    .mobile .more_details.story,
    .mobile .more_details.work {
        width: 90%;
        font-size: 15px;
        line-height: 24px;
        left: 0px;
/*        pointer-events: none !important;*/
    }

    .mobile .more_details.work {
        height: calc(90vw*(9/16));
    }

    .photos { 
        width: 120px !important;
        height: 180px !important;
    }

    .horiz {
        width: 188px !important;
        height: 120px !important;
    }

    .smallPic.drone {
        height: 400px;
        width: 225px;
    }
    
    .more_details.aboutMe {
        width: 150px;
        height: 150px;
    }
    
    .mobile .more_details.selected.locked {
/*        pointer-events: none !important;    */
    }
    
    .mobile #all_text, #all_text_copy {
        font-size: 20px;
        line-height: 33px;
        padding: 20px;
        padding-bottom: 80px;
        /* border-radius: 30px; */
    }
    
    .mobile .close {
        background-size: 12px;
    }
    
    .mobile .cta {
        font-size: 13px;
        padding: 2px 26px 2px 6px;
        pointer-events: all;
        position: absolute !important;
    }

    .cta.hide {
        display: none !important;
        pointer-events: none;
    }
    
    .mobile .bigCTA {
        font-size: 20px !important;
    }
    
    .reel {
        width: 300px !important;
        height: 169px !important;
    }
    
    .reel iframe {
        width: 100% !important;
        height: 100% !important;
    }
  
  
    .logos { 
      width: 100px !important;
      height: 66px !important;
      background-color: white;
    }

  .oscar {  
    width: 60px !important;
    height: 100px !important;
    margin-left: 0px !important;
    z-index: 1000 !important;
    margin-top: 0px !important;
  }
  
  .GHAB_poster {
    width: 160px !important;
    margin-left: 0px !important;
  }

    
}