@charset "utf-8";
/* CSS Document */

/*-------------   TSCONF 2019   -------------*/


/*============================================*/
/*--------------- BASE STYLES ----------------*/
/*============================================*/


body {
    font-size:100%;
    text-align: center;
    font-family:'Montserrat', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    background-color:#030B16;
    background-image: radial-gradient(70vh at 30% 0%,#101822, #030B16);
    background-repeat: no-repeat;
    color:#98B6D9;
    overflow-x:hidden;
}
.wrap {
    max-width:1300px;
    padding:0px 10px;
    text-align: left;
    margin:auto;
    position: relative;
    overflow: hidden;
}
    .wrap.center {
        text-align: center;
    }
img {
    width:100%;
}
.banner {
    color:#FFF;
    font-size:1rem;
    font-weight: bold;
    padding:10px 20px;
    text-align: center;
    background:#0097FF;
    position: absolute;
    top:0;
    left:0;
    width:calc(100% - 40px);
    z-index: 100;
}


/*============================================*/
/*---------------- TYPOGRAPHY ----------------*/
/*============================================*/


h1 {
    font-size:3.4rem;
    line-height: 1.1em;
    color:#FFF;
    font-weight: 600;
    margin-bottom:40px;
}
h2 {
    color:#FFF;
    font-size:2.18rem;
    line-height: 1.2em;
    font-weight: 600;
    margin-bottom:.8em;
}
h3 {
    color:#FFF;
    font-size:1.35rem;
    line-height: 1.2em;
    font-weight: 600;
    margin-bottom:.8em;
}
h4 {
    color:#FFF;
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.2em;
    margin-bottom:.2em;
}
h5 {
    margin-top:10px;
    margin-bottom:5px;
    font-size:1rem;
    font-weight: 600;
}
p {
    font-size:1rem;
    line-height: 1.7em;
    color:#98B6D9;
    margin-bottom:2em;
}
    p.small {
        font-size:.875rem;
        line-height: 1.5em;
        margin-top:10px;
    }
ul {
    margin-bottom:2em;
}
li {
    list-style:outside;
    margin-left:20px;
    font-size:1rem;
    line-height:1.7em;
    margin-bottom:.5em;
}
a {
    color:#0097FF;
    text-decoration: none;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
a:hover {
    color:#FFF;
}
.text-link {
    display:inline-block;
    margin-right:30px;
    margin-bottom:1em;
    font-size: 1.125rem;
}


/*============================================*/
/*------------------ LAYOUT ------------------*/
/*============================================*/

.left {
    float:left;
    width:45%;
}
.right {
    float:right;
    width:45%;
}
.two-thirds {
    width:60%;
}
.one-third {
    width:33%;
}
section {
    clear:both;
}
.vertical-line {
    overflow: visible;
}
.vertical-line::before {
    content: ' ';
    width:1px;
    background:#4B4D67;
    position: absolute;
    height:400px;
    display:block;
    z-index: 100;
}
.vertical-line-down::before {
    bottom:-400px;
}
.vertical-line-up::before {
    top:-300px;
}
.vertical-line-right::before {
    right:10%;
}
.vertical-line-left::before {
    left:10%;
}
.vertical-line-small::before {
    height:200px;
}
.code-block {
    opacity: .6;
    text-align: left;
    overflow:visible;
}
.code {
    height:8px;
    margin-right:8px;
    border-radius: 4px;
    display:inline-block;
    background:#255288;
}
    .code.white {
        background:#5C7088;
    }
    .code.blue {
        background:#255288;
    }
    .code.green {
        background:#388E5C;
    }
.code-line {
    width:100%;
}
.code-line.indent {
    margin-left:32px;
}
.code-line.indent2 {
    margin-left:64px;
}


/*-------------------- NAV -------------------*/

header {
    padding-top:80px;
    margin-bottom:40px;
}
#site-logo {
    background:url('../images/tsconf-logo-horizontal.svg') center center no-repeat;
    background-size:contain; 
    overflow: hidden;
    width:120px;
    height:40px;
    display:inline-block;
}
    #site-logo a {
        text-indent: -5000px;
        display:block;
        
    }
#site-nav {
    float:right;
    max-width: calc(100% - 120px);
}
    #site-nav ul {
        margin-bottom:0;
    }
    #site-nav li {
        text-align: right;
        display:inline-block;
        line-height: 1em;
        margin-bottom:0;
        margin-left:30px;
        opacity: .6;
        padding-bottom:10px;
        padding-top:10px;
        -webkit-transition: all .2s ease-out;
        -moz-transition: all .2s ease-out;
        transition: all .2s ease-out;
    }
        #site-nav li.cta {
            opacity: 1;
        }
        #site-nav li.selected {
            border-bottom:1px solid #FFF;
            opacity: 1;
        }
        #site-nav li:hover {
            opacity: 1;
        }

        #site-nav li a {
            color:#FFF;
            text-decoration: none;
            text-transform: uppercase;
            font-size:.875rem;
        }
    #site-nav .button {
        padding:7px 10px;
    }

/*------------------- HOME -------------------*/

#home-hero {
    padding-bottom:10vh;
    min-height: 80vh;
    position: relative;
    background-image: radial-gradient(70vh at 50% 10%,#101822, #030B16);
}
#hero-line::before {
    top:-250px;
    height:300px;
}
#home-hero .wrap {
    position: absolute;
    height:100%;
    width:100%;
    max-width: none;
    overflow: visible;
    z-index: 1;
    padding:0;
    padding-top:0px;
}
#home-hero h1 {
    background:url('../images/tsconf-logo-vertical.svg') center center no-repeat;
    background-size: contain;
    max-width:70px;
    height:85px;
    margin-left:auto;
    margin-right:auto;
    text-indent: -5000px;
    overflow: hidden;
    z-index: 11;
    position: relative;
}
#washington-mask {
    mask-image: url('../images/2019-mask.svg');
    -webkit-mask-image: url('../images/2019-mask.svg');
    mask-mode: alpha;
    -webkit-mask-mode: alpha;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    mask-position: center;
    -webkit-mask-position: center;
    z-index: 1;
    position: absolute;
    top:0;
    padding-top:10%;
    left:0;
    height:65%;
    overflow:visible;
    background:url('../images/seattle-bg.png') center center no-repeat;
    background-size:cover;
    width:100%;
}
#home-hero .code-block {
    position: absolute;
    top:40vh;
    left:10vw;
    z-index: 2;
    width:30vw;
}
#home-hero .cta {
    z-index: 3;
    position: absolute;
    bottom:130px;
    width:100%;
}
    #home-hero .cta .button {
        width:20%;
        max-width:200px;
    }
#home-hero h2 {
    font-size:3.4rem;
    line-height: 1.1em;
    color:#FFF;
    font-weight: 600;
    margin-bottom:10px;
}
#home-hero p {
    font-size:1.5rem;
}
#home-hero .button {
    margin-left:5px;
    margin-right:5px;
}
#presenting-sponsor {
    color:#FFF;
    font-weight: 500;
    vertical-align: top;
    margin-top:80px;
}
    #presenting-sponsor h5 {
        display:inline;
        vertical-align: top;
        font-size:1.3rem;
    }
    #presenting-sponsor img{
        max-width:150px;
        margin-left:15px;
        vertical-align: top;
        margin-top:-7px;
        margin-right:20px;
    }
#intro {
    background:#0A2E5A;
    position: relative;
    margin-bottom:50px;
    z-index: 10;
}
.intro-content {
    background:#082140;
    padding:80px 60px;
    max-width: 45%;
    position: relative;
    z-index: 2;
}
#intro-image {
    position: absolute;
    right:0;
    top:0;
    height:100%;
    width:50%;
    background:url('../images/intro-image.jpg') center center no-repeat;
    background-size:cover;
    z-index: 1;
}
    #intro-image::after {
        content:' ';
        display:block;
        position:abolute;
        top:0;
        float:right;
        height:100%;
        width:10%;
        background:rgba(0,151,255,.7);
    }
#gallery {
    width: 75%;
    margin-bottom:110px;
    overflow: hidden;
    position: relative;
}
    #gallery img {
        display:inline-block;
        vertical-align: top;
        width:27%;
        margin-right:2.5%;
        float:left;
    }
    #gallery img :nth-child(3){
        margin-right:0;
    }
#intro-code {
    position:absolute;
    right:2vw;
    bottom:-90px;
    z-index: 10;
    width:500px;
}
#past-speakers {
    overflow:hidden;
}
#past-speakers ul {
    position: relative;
    overflow: hidden;
}
#past-speakers li {
    margin-left:0;
    width:16.4%;
    height:16.4%;
    margin-right:2px;
    display:inline-block;
    margin-bottom:2px;
    position: relative;
    vertical-align: top;
    float:left;
    overflow: hidden;
    position: relative;
}
    #past-speakers img {
        vertical-align: top;
        display:block;
    }
    #past-speakers .speaker-info {
        color:#FFF;
        background:rgba(0,107,181,.9);
        position: absolute;
        top:0;
        left:0;
        width:calc(100% - 10px);
        height:calc(100% - 10px);
        padding:5px;
        text-align: center;
        opacity:0;
        -webkit-transition: all .2s ease-out;
        -moz-transition: all .2s ease-out;
        transition: all .2s ease-out;
    }
    .speaker-info h4 {
        margin-top:calc(50% - 1rem);
        font-size:1.125rem;
    }
    .speaker-info p {
        color:#FFF;
        font-weight: 500;
    }
    .speaker-info a {
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    /* For odd amount of speakers 
    .speaker-link {
        background:rgba(0,107,181,1);
        -webkit-transition: all .2s ease-out;
        -moz-transition: all .2s ease-out;
        transition: all .2s ease-out;
    }
    .speaker-link img {
        visibility: hidden;
    }
    .speaker-link a {
        color:#FFF !important;
        display:block;
        width:100%;
        position: absolute;
        left:0;
        cursor: pointer;
        top:0;
        text-align: center;
        padding-top: calc(50% - .5em);
        padding-bottom: calc(50% - .5em);
    }
    .speaker-link:hover {
        background:#0A2E5A;
    }
    .speaker-link i {
        margin-left:3px;
        -webkit-transition: all .2s ease-out;
        -moz-transition: all .2s ease-out;
        transition: all .2s ease-out;
    }
        .speaker-link:hover i {
            margin-left:10px;
        }
*/

.speaker-link {
    text-align:right;
    margin-top:30px;
    width: auto !important;
    background:none !important;
    height: auto !important;
    float:right !important;
    margin-right:30px !important;
}
.speaker-link a {
    margin-left:20px;
}
.speaker-link img {
    display:none !important;
}

#past-speakers li:hover .speaker-info {
    opacity: 1;
}
#past-speakers .right {
    padding-top:10%;
}
#venue {
    background:url('../images/ballroom.jpg') center center no-repeat;
    background-size:cover;
    margin-top:50px;
    overflow:hidden;
    position: relative;
}
    #venue .left {
        padding:80px 60px;
        background:#082140;
        clear:both;
        overflow: hidden;
        float:none;
        margin-left:-1em;
        min-height: 300px;
        height:calc(100% - 160px);

    }
    #venue .wrap {
        overflow:visible;
        height:100%;
    }
    #venue .wrap::before {
        content:' ';
        display:block;
        position:absolute;
        top:0;
        left:calc(0px - ((100vw - 100%) / 2));
        height:100%;
        width:calc((100vw - 100%) / 2);
        background:rgba(0,151,255,.7);
        z-index: 100;
    }

#talkscript {
    margin-top:150px;
    overflow: hidden;
}
#talkscript .right img {
    width:80%;
    margin-left:auto;
    margin-right:auto;
    display:block;
}
.live-tag {
    background:#D0021B;
    display:inline-block;
    text-transform: uppercase;
    font-size:.65em;
    padding:10px 10px 10px 10px;
    line-height: .65em;
    margin-left:.2em;
    vertical-align: middle;
    margin-top:-4px;
}
    .live-tag::before {
        content:' ';
        background:#FFF;
        width:10px;
        height:10px;
        border-radius: 5px;
        display:block;
        float:left;
        margin-right:8px;
        margin-left:4px;
        margin-top:2px;
    }
#footer-cta {
    margin-top:150px;
    background:#0A2E5A;
    overflow: hidden;
    position: relative;
    z-index: 5;
}
    #footer-cta .right {
        background:#082140;
        padding:100px;
    }
    #footer-cta::after {
        content:' ';
        display:block;
        position:absolute;
        top:0;
        right:0;
        float:right;
        height:100%;
        width:5%;
        background:#98B6D9;
    }
#sponsors {
    padding:50px 0;
    position:relative;
    z-index: 100;
}
    #sponsors .text-link {
        display:block;
        margin-top:30px;
    }
#sponsors img {
    max-width: 170px;
    max-height: 50px;
    margin-top:20px;
    margin-bottom:20px;
    vertical-align: middle;
    width:inherit;
    margin-right:10px;
    margin-left:10px;
}


/*----------------- VENUE ------------------*/

#venue-hero {
    background:url('../images/ballroom.jpg') center center no-repeat;
    background-size:cover;
    padding:150px 0;
    text-align:center;
    margin-bottom:80px;
    position: relative;
}
    #venue-hero .overlay {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index: 1;
        background:rgba(0,0,0,.2);
    }
    #venue-hero h1 {
        margin-bottom:0;
        z-index: 10;
        position: relative;
    }
.venue-intro a {
    margin-right:30px;
    display:inline-block;
    margin-bottom:30px;
}
.venue-intro a i {
    margin-right:10px;
    display:inline-block;
}
#gallery .wrap {
    min-height: 200px;
    margin-top:0;
    margin-bottom:-100px;
}
#gallery {
    width:100%;
    overflow:hidden;
}
#gallery .code-block {
    position: absolute;
    top:0;
    left:0;
    z-index: 100;;
}
#gallery img {
    float:left;
    width:33.3%;
    display:inline-block;
    margin:0;
    z-index: 1;
}
#hotels {
    margin-top:60px;
    clear:both;
}
#hotels .wrap {
    text-align:center;
}
    #hotels li {
        list-style: none;
        max-width:280px;
        margin-left:40px;
        margin-right:40px;
        display:inline-block;
        vertical-align: top;
        margin-top:30px;
    }
    #hotels li img {
        max-height: 60px;
        margin-bottom:20px;
    }

/*---------------- SPEAKERS ------------------*/

#anders-hero {
    background:#0A2E5A;
    margin-top:60px;
    margin-bottom:100px;
}
    #anders-hero .wrap {
        overflow:visible;
    }
    #anders-hero .wrap::after {
        background:#082140;
        position: absolute;
        top:0;
        right: calc((100vw - 100%) / -2);
        height:100%;
        width:5%;
        content:'';

    }
    #anders-hero .left {
        background:url(../images/anders.jpg) center center no-repeat;
        background-size: cover;
        left:0;
        top:0;
        position: absolute;
        height:100%;
    }
        #anders-hero .left::after {
            content:'';
            position: absolute;
            top:0;
            left:0;
            width:18%;
            height:100%;
            background:rgba(0,151,255,.7);
        }
    #anders-hero .right {
       padding:80px 0 80px 0;
       width: 55%;
       float:none;
       margin-left:40%;
    }
.social-link {
    display:inline-block;
    margin-right:15px;
}
    .social-link i {
        margin-right:5px;
    }
#other-speakers li {
    list-style: none;
    margin-left:0;
    padding-left:0;
    margin-bottom:80px;
    overflow:hidden;
}
#other-speakers img {
    display:inline-block;
    max-width:250px;
    width:20%;
    margin-right:5%;
    vertical-align: top;
    margin-bottom:20px;
}
.speaker-description {
    display:inline-block;
    max-width: 950px;
    width:74%;
}

/*--------------- OUR SPONSORS ---------------*/

#sitepen-sponsor {
    background:#0A2E5A;
    margin-top:60px;
    margin-bottom:100px;
}
    #sitepen-sponsor .left {
        padding: 60px 0 ;
    }
    #sitepen-sponsor .right {
        position: absolute;
        top:0;
        right:0;
        height:100%;
        background:url(../images/sitepen-logo.svg) center center no-repeat;
        background-size:80%;
        background-color:#082140;
    }
.sponsor-list {
    text-align: center;
    margin-bottom:30px;
}
.sponsor-list li {
    list-style: none;
    display:inline-block;
    max-width: 300px;
    margin-bottom:50px;
    margin-left:40px;
    margin-right:40px;
}
.sponsor-list.silver-sponsors li{
    max-width: 350px;
}
.sponsor-list li img {
    max-height: 50px;
    width:inherit;
    margin-top:20px;
    vertical-align: top;
}
#call-for-sponsors {
    background:#082140;
    padding: 60px 0;
}
    #call-for-sponsors .wrap {
        text-align:center;
    }
    #call-for-sponsors p {
        max-width: 600px;
        margin-left:auto;
        margin-right:auto;
        display:block;
    }
.silver-sponsor {
    text-align: center;
}

/*----------------- SPONSOR ------------------*/

#packages {
    clear:both;
    margin-top:100px;
}
#sponsor-toggles {
    background:#082140;
    margin-bottom:50px;
}
    #sponsor-toggles .wrap {
        background:#0A2E5A;
        padding:0;
    }
    #sponsor-toggles .toggle {
        display:block;
        float:left;
        width:calc(20% - 43px);
        padding:20px 20px 20px 20px;
        overflow: hidden;
        opacity: .7;
        border-left:3px solid transparent;
        vertical-align: top;
        cursor: pointer;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
        #sponsor-toggles .toggle:hover {
            opacity: 1;
            background:#09477A;
        }
    #sponsor-toggles .toggle.selected {
        width:calc(40% - 43px);
        background:#055993;
        opacity: 1;
        border-left:3px solid #0097FF;
    }
    #sponsor-toggles h3, #sponsor-toggles h5 {
        vertical-align: top;
        line-height: 1em;
        margin-bottom:0;
        margin-right:10px;
        color:#FFF;
    }
    #sponsor-toggles h5 {
        padding-top:8px;
    }
.package-items ul {
    margin-bottom:30px;
    overflow:hidden;
}
.package-items li {
    width:calc(47% - 20px);
    margin-left:20px;
    margin-right:3%;
    list-style: outside;
    vertical-align: top;
    float:left;
}
#additional-packages {
    background: #082140;
    padding:50px 0;
    margin-top:30px;
}
    #additional-packages li {
        list-style: none;
        display:inline-block;
        background:#0A2E5A;
        padding:20px 30px 20px 30px;
        width:17.5%;
        margin-bottom:15px;
        vertical-align: top;
        text-align:center;
        min-height:290px;
        margin-left:5px;
        margin-right:5px;
    }
    #additional-packages h3 {
        margin-bottom:5px;
    }
    #additional-packages h4 {
        margin-bottom:20px;
    }
    #additional-packages li p {
        margin-bottom:0;
        color:#FFF;
        font-size:.875rem;
        line-height: 1.25em;
        margin-left:auto;
        margin-right:auto;
    }
    #additional-packages i {
        font-size: 4rem;
        color:#0097fd;
        margin-bottom:30px;
        margin-top:20px;
    }
#sponsor-cta {
    margin-top:50px;
}
iframe {
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
}
#videos li {
    list-style: none;
    margin-left:0;
    padding-left:0;
    position: relative;
    clear:both;
    margin-bottom:80px;
    overflow: hidden;
}
#videos li h4 {
    margin-bottom:20px;
}
#videos li .video-frame {
    overflow:hidden;
    position: relative;
    top:0;
    left:0;
    padding: 35% 0 0 0;
}


/*----------------- SCHEDULE -----------------*/

.schedule {
    margin-bottom:0px;
    margin-left:40px;
}
.schedule h3{
    margin-bottom:5px;
}
.schedule h5 {
    color:#0097FF;
}

.schedule li {
    list-style:none;
    margin-left:0;
    padding-left:60px;
    position: relative;
    padding-bottom:40px;
    margin-top:-10px;
    margin-bottom:0;
    vertical-align: top; 
}
    .schedule li .avatar {
        float:left;
        position: absolute;
        left:-30px;
        width:60px;
        height:60px;
        border-radius: 30px;
        font-size:30px;
        line-height:60px;
        background:#0097FF;
        color:#FFF;
        text-align: center;
    }
    .schedule li .avatar1 {
      top:-15px;
    }
    .schedule li .avatar2 {
        top:50px;
    }
.schedule li {
    border-left:1px solid #4B4D67;
}
.schedule li.last {
    border-left:none;
}


    .schedule .break {
        padding-top:0;
        margin-top:-30px;
        padding-bottom:30px;
    }

    .schedule .break h3{
        text-transform: uppercase;
        background:#0A2E5A;
        padding:6px 10px;
        margin-top:-1.3em;
        font-size:1rem;
        display:inline-block;
    }





/*----------------- SIDEPANE -----------------*/

#sidepane {
    background:#FFF;
    position: fixed;
    z-index: 1000;
    top:0;
    right:-50vw;
    width:calc(100% - 60px);
    max-width: 500px;
    padding:30px;
    height:100%;
    overflow:auto;
    text-align: left;
    max-height:calc(100vh - 40px);
    box-shadow:0px 0px 25px rgba(0,0,0,.7);
    color:#1f3056;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
    #sidepane.open {
        right:0;
    }
#sidepane header {
    margin-top:0;
    padding-top:0;
    margin-bottom:30px;
}
#sidepane h2, #sidepane p {
    color:#1f3056;
}
#sidepane input, #sidepane textarea {
    color:#333;
    font-weight: 600 !important;
}
#sidepane .close-btn {
    float:right;
    font-size:1.5rem;
    margin-top:5px;
    cursor: pointer;
    color:inherit;
}
.sponsor-button {
    cursor:pointer;
}


/*------------------ FOOTER ------------------*/

footer {
    clear:both;
    vertical-align: bottom
}
footer .wrap {
    background:url('../images/watermark.svg') no-repeat;
    background-position: left bottom;
    background-size: 305px;
    height:300px;
    position: relative;
}
footer ul {
    position: absolute;
    bottom:20px;
    right:0;
}
footer li {
    display:inline-block;
    float:right;
    text-align: right;
    margin-bottom:20px;
}
    footer li a {
        text-transform: uppercase;
        color:#98B6D9;
        font-size: .875rem;
        margin-left:20px;
    }



/*============================================*/
/*------------------- FORMS ------------------*/
/*============================================*/


input[type="text"], input[type="tel"], input[type="password"], input[type="number"], input[type="email"] {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    outline: none;
    background:none;
    border-radius: 0;
    border-bottom:1px solid #CCC;
    padding:8px 0;
    display:block;
    width:100% !important;
    color:#FFF;
    font-size: 1.125rem;
    font-weight: 700;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
    /* Hover, focus, active states for ALL types of text inputs */
    input[type="text"]:hover, input[type="tel"]:hover, input[type="tel"]:active, input[type="tel"]:focus, input[type="text"]:active, input[type="text"]:focus, input[type="password"]:hover, input[type="password"]:active, input[type="password"]:focus, input[type="number"]:hover, input[type="number"]:active, input[type="number"]:focus, input[type="email"]:hover, input[type="email"]:active, input[type="email"]:focus {
        border-bottom:1px solid #0097fd;
        color:#FFF;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    background-color:transparent !important;
    -webkit-text-fill-color: #FFF;
    transition: background-color 5000s ease-in-out 0s;
}
#sidepane input:-webkit-autofill,
#sidepane input:-webkit-autofill:hover, 
#sidepane input:-webkit-autofill:focus
#sidepane textarea:-webkit-autofill,
#sidepane textarea:-webkit-autofill:hover
#sidepane textarea:-webkit-autofill:focus,
#sidepane select:-webkit-autofill,
#sidepane select:-webkit-autofill:hover,
#sidepane select:-webkit-autofill:focus {
    background-color:transparent !important;
    -webkit-text-fill-color: #333;
    transition: background-color 5000s ease-in-out 0s;
}

.hs-form-field {
    position: relative;
    margin-bottom:15px;
    width:100%;
    padding-top:10px;
    cursor: text;
}
    .hs-form-field:hover label {
        cursor: text;
    }
label {
    font-size:1.125rem;
    color:#999999;
    font-weight: 700;
    position: absolute;
    top:20px;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
    .active label {
        font-size:.875rem;
        top:0;
        bottom:auto;
    }
    .hs-error-msgs li, .hs-feedback_ .hs-error-msgs li {
        list-style: none;
        margin-top:3px;
        margin-bottom:15px;
    }
    .hs-error-msgs label, .hs-feedback_ .hs-error-msgs label {
        position: relative;
        font-size: .75rem;
        font-weight: normal;
        color:red !important;
        top:auto;
        left:auto;
    }
.hs-feedback_ {
    padding-top:20px;
}
    .hs-feedback_ label {
        top:25px;
        left:6px;
    }
    .hs-feedback_.active label {
        top:0;
        left:0;
    }
.hs-button {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    outline: none;
    background:none;
    border:2px solid #0097fd;
    text-transform: uppercase;
    color:#FFF;
    padding:10px 20px;
    max-width: 300px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    min-width:200px;
    border-radius: 0;
    text-decoration: none;
    display:inline-block;
    text-align: center;
    margin-top:20px;
    margin-bottom:40px;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
    .hs-button:active, .hs-button:hover, .hs-button:focus {
        color:#FFF !important;
        background: #0097fd;
    }
.hs_submit_your_abstract label, .hs_how_can_we_help_ label, .hs_photo_pic label, .hs_bio label, .hs_address_full label, .hs-form-booleancheckbox label {
    display: block;
    position: relative;
    top: inherit;
    margin-bottom: 15px;
    font-size:.875rem;
}
.hs-form-booleancheckbox label {
    color:#FFF;
}
.hs-form-booleancheckbox {
    list-style:none;
    margin-left:0;
}
.hs-form-booleancheckbox input[type="checkbox"] {
    height:24px;
    width:24px;
    display:inline-block;
    margin-right:12px;
    padding:5px;
    font-size: 1.5rem;
}
.hs-form-booleancheckbox label {
    letter-spacing: .05em;
}
.hs_yes_i_will_speak_at_tsconf_ ul {
    margin-bottom:0;
}
ul.hs-error-msgs {
    margin-bottom:0;
}
.hs-error-msgs li {
    margin-left:auto;
    margin-bottom:0;
}

select {
    -ms-appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    margin:0px;
    margin-bottom:10px;
    padding:0px;
    appearance:none;
    outline: none;
    border: none;
    background: none;
}
    select:hover {

    }
textarea {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    outline: none;
    background:none;
    border-radius: 0;
    border:1px solid #CCC;
    padding:8px;
    min-height: 150px;
    display:block;
    width:calc(100% - 16px) !important;
    color:#FFF;
    font-size: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
    textarea:focus, textarea:hover, textarea:active {
        border: 1px solid #0097fd;
    }
.hs_how_can_we_help_ label {
    position:relative;
    top:inherit;
    margin-bottom:10px;
    display:block;
}
.button {
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    display:inline-block;
    padding:15px 20px;
    font-size: .875rem;
    max-width: 200px;
    color:#FFF;
    background:transparent;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
    .blue-button {
        border:1px solid #0097FF;
    }
        .blue-button:hover, .blue-button:focus, .blue-button:active {
            background:#0097FF;
            color:#FFF;
        }
    .white-button {
        border:1px solid #FFF;
    }
        .white-button:hover, .white-button:focus, .white-button:active {
            background:#FFF;
            color:#082140;
        }
    .green-button {
        border:1px solid #65E69B;
    }
        .green-button:hover, .green-button:focus, .green-button:active {
            background:#65E69B;
            color:#082140;
        }

fieldset {
    max-width: none !important;
}



/*============================================*/
/*--------------- MEDIA QUERIES --------------*/
/*============================================*/


@media screen and (max-width: 1200px) {
    #sponsor-toggles h3 span {
        display:none;
    }
    #sidepane {
        right:-100vw;
    }
    footer ul {
        right:20px;
    }

}

/*-------------- iPAD LANDSCAPE --------------*/

@media screen and (max-width: 1024px) {
    #sponsor-toggles .toggle h3  {
        font-size:1.2rem;
    }
    #sponsor-toggles .toggle {
        width:calc(21% - 43px);
    }
    #sponsor-toggles .toggle.selected {
        width:calc(35% - 43px);
    }
    #additional-packages li {
        width:37%;
        min-height:250px;
    }
    #past-speakers li {
        width:19.6%;
        height:19.6%;  
    }

}
@media screen and (max-width: 900px) {
    #sponsor-toggles .toggle h3, #sponsor-toggles .toggle h5 {
        font-size:1rem;
    }
    .package-items li {
        width:45%;
    }
    #sidepane {
        right:-150vw;
    }
    #anders-hero .left{
        float:none;
        width:auto;
        height:350px;
        background-size:contain;
        position:relative;
        width:100%;
        background-color:#082140;
        background-position: 0;
    }
    #anders-hero .left::after {
        left:auto;
        right:0;
    }
    #anders-hero .right {
        float:none;
        width:auto;
        margin:0;
        padding:40px 15px;
    }
    #anders-hero .wrap {
        padding:0;
    }
    #anders-hero .wrap::after {
        display:none;
    }
}

/*--------------- iPAD PORTRAIT --------------*/

@media screen and (max-width: 768px) {
    
    .left, .right {
        float:none;
        width:auto;
    }
    .subpage .code-block {
        display:none;
    }
    #talkscript .right img {
        display:none;
    }
    #footer-cta .right {

    }
    .banner {
        position:relative;
    }
    .intro-content {
        width:auto;
        max-width: none;
    }
    #intro-image {
        display:none;
    }
    #gallery {
        width:100%;
        margin-top:-30px;
    }
    #hero-line {
        display:none;
    }
    #home-hero .cta .button {
        width:24%;
    }
    footer ul {
        right:20px;
    }
    footer li a {
        font-size:.75rem;
    }
    #sponsor-toggles .toggle, #sponsor-toggles .toggle.selected {
        width:calc(25% - 43px);
    }
    .package-items li {
        width:inherit;
        margin-right:0;
        margin-bottom:20px;
    }
    #sponsor-toggles .toggle h5 {
        font-size:.875rem;
    }
    #washington-mask {
        mask-image: url('../images/2019-mask-vertical.svg');
        -webkit-mask-image: url('../images/2019-mask-vertical.svg');
        mask-mode: alpha;
        -webkit-mask-mode: alpha;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-size: 100%;
        -webkit-mask-size: 100%;
        mask-position: top;
        -webkit-mask-position: top;
        padding-top:10%;
        left:10%;
        top:0vh;
        height:80%;
        overflow:visible;
        background:url('../images/seattle-bg.png') center center no-repeat;
        background-size:cover;
        width:80%;
    }
    header {
        padding-top:30px;
    }
    
    #home-hero {
        margin-bottom:0;
        padding-bottom:30px;
        height:calc(90vh - 30px);
    }
    #home-hero h2 {
        font-size:2.7rem;
    }
    #home-hero .cta {
        bottom:80px;
    }
    #home-hero .code-block {
        width:90%;
    }
    footer li {
        margin-left:0;
    }
    #past-speakers li {
        width:33%;
        height:33%;  
    }

    /* For odd amount of speakers 
    .speaker-link {
        background:none !important;
        width:100% !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
        text-align:left;
    }
        .speaker-link img {
            display:none !important;
        }
        .speaker-link a {
            display:block;
            position: relative;
            padding:0;
            margin-top:10px;
            color:#0097FF !important;
        }
        */
        #other-speakers img {
            display:block;
            float:none;
            width:auto;
        }
        .speaker-description {
            width:auto;
        }
        #sitepen-sponsor .right {
            height:200px;
            top:0;
            left:0;
            background-size: 70%;
        }
        #sitepen-sponsor .left {
            margin-top:200px;
        }
        #videos li .video-frame {

            padding: 50% 0 0 0;
        }

}

@media screen and (max-width: 650px) {
    
    .button {
        font-size:.75rem;
    }
    #home-hero .cta .button {
        width:21%;
        margin-left:1%;
        margin-right:1%;
    }
    #home-hero .cta .button span {
        display:none;
    }
    #sponsor-toggles .toggle h5 {
        font-size:.75rem;
    }
    #sponsor-toggles .toggle h3 {
        font-size:.75rem;
    }
    #sponsor-toggles .toggle, #sponsor-toggles .toggle.selected {
        padding:10px;
        width:calc(25% - 23px);
        height:100%;
        min-height:3rem;
    }
    #additional-packages li {
        width:calc(100% - 60px);
        min-height:0;
        max-width:300px;
        margin-left:0;
        margin-right:0;
        padding-bottom:30px;
    }
    #home-hero .code-block {
        top:23vh;
    }
    #site-nav {
        float:none;
        width:100%;
        max-width:100%;
    }
    #site-nav li {
        margin-left:0;
        margin-right:20px;
        padding-bottom:7px;
    }
    
    .intro-content {
        padding:60px 40px;
    }
    #intro-code {
        bottom:-210px;
        z-index: 0;
        right:auto;
        left:0;
        width:90%;
    }
    #washington-mask {
        top:10vh;
    }
    #gallery {
        z-index:10;
    }
    #footer-cta .right {
        padding:60px 40px;
    }
    .vertical-line-left::before {
        left:20px;
    }
    .vertical-line-right::before {
        right:20px;
    }
    #talkscript, #footer-cta {
        margin-top:50px;
    }
    h2 {
        font-size:1.9rem;
    }
    #past-speakers li {
        width:49%;
        height:49%;  
    }
    /* For odd amount of speakers 
    .speaker-link {
        background:rgba(0,107,181,1) !important;
        width:49% !important;
        height:49% !important;
        display:inline-block !important;
        -webkit-transition: all .2s ease-out;
        -moz-transition: all .2s ease-out;
        transition: all .2s ease-out;
    }
    .speaker-link img {
        visibility: hidden;
        display:block !important;
    }
    .speaker-link a {
        color:#FFF !important;
        display:block;
        width:100%;
        position: absolute !important;
        left:0;
        cursor: pointer;
        top:0;
        text-align: center;
        margin-top:0;
        padding-top: calc(50% - .5em) !important;
        padding-bottom: calc(50% - .5em) !important;
    }
    .speaker-link:hover {
        background:#0A2E5A;
    }
    */

}


/*-------------- iPHONE PORTRAIT --------------*/


@media screen and (max-width: 420px) {
    .intro-content, #footer-cta .right {
        padding:40px 20px;
    }
    #home-hero h2 {
        font-size:2.1rem;
    }
    #site-nav li a {
        font-size:.75rem;
    }
    #home-hero .cta .button {
        width:18%;
        margin-right:.5%;
        margin-left:.5%;
    }
    #home-hero p {
        font-size:1.2rem;
        margin-bottom:1em;
    }
    #home-hero .cta {
        bottom:60px;
    }
    .button {
        padding:10px;
    }
    footer li {
        margin-left:0;
    }
    nav .cta span {
        display:none;
    }
    #sponsor-toggles h3 span {
        display:block;
    }
    footer ul {
        text-align: center;
    }
    footer li {
        float:none;
        text-align: center
    }
    #site-nav li.cta {
        position:absolute;
        top:-10px;
        right:0;
    }
}
@media screen and (max-width: 330px) {
    .code {
        height:6px;
        margin-right:6px;
        border-radius:3px;
    }
    .code-line {
        height:10px;
    }
    #intro-code {
        display:none;
    }
    #site-nav li a {
        font-size:.75rem;
    }
    #site-nav li {
        margin-right:12px;
    }

}