/*Contact Page Specific*/

   .overrideRelative{
        position: relative !important;
        bottom: inherit !important;
   }       

   .outOfTheBox{
       margin-left: -2em;
       margin-right: -2em;
   }
   
   .flat-input{
       border-width: 0px 0px 2px 0px !important;
   }
   
   .spacer-list{
       margin-top: 2em;
   }
   .spacer-list li{
       margin-bottom: 1em;
       font-size: 1.2em;
   }
   
   .prez-blocks{
       margin-left: 3.5em;
       margin-top: -3em;
       vertical-align: text-top;
   }


/*                */


* {
    transition: font-size 0.2s;
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Nunito Sans', sans-serif;
    line-height: 1.3em;
    font-size: 16px; /* Standardizes fonts using 'em' units */
}
h1{
    font-size: 1.4em;
    color: #4F4F4F;
}
h2, h3, .buttonlink{
    line-height: 1.2em;
}

h3 + ul{
    margin-top: 2.2em;
}

header{
    padding: 1em;
}

nav div a{
    text-decoration: none !important;
    color: #000 !important;
    font-weight: 600;
    padding-right: 0.3em;
        font-size: 14px; 
}

h1 a{
    color: #4F4F4F;
    text-decoration: none;
}

.bold{
    font-weight: 700;
}
.demibold{
    font-weight: 600;
}

.body-text{
  font-size: 1.3em;
  line-height: 1.4em;
}

.invisible{
    visibility: hidden;
}

.va-middle{
    vertical-align: middle;
}

.largeheader{
    font-size: 2.5em;
}
.midheader{
    font-size: 2em;
}

#banner-dates{
    font-size: 1.8em;
    margin-bottom: 0.4em;
}
.banner-subtext{
    font-weight: 600;
    margin-top:0.2em;
    font-size: 1.3em;
}
  
#submitted{
    display: grid;
    grid-template-columns: auto;
    justify-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}
#contact-form{
    opacity: 100;
    transition: opacity 0.3s;
}

input[type="text"], input[type="email"], textarea{
    border: 1px solid black;
}
input[type="checkbox"]{
    border: 2px solid white;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    width: 1.5em;
    height: 1.5em;
    color: black;
    position: relative;
}
input[type="checkbox"]:checked{
   background-color: white;
   border-radius: 0.1em;
}

.spacer-list li label{
    vertical-align: top;
}

ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.balanced-table{
    border-spacing: 0em 0.5em;
}
.balanced-table td{
    width: 50%;
    text-align: center;
}
.balanced-table tr td:first-child{
    border-radius: 0.3em 0em 0em 0.3em;
}
.balanced-table tr td:nth-child(2){
    border-radius: 0em 0.3em 0.3em 0em;
}

.balanced-table th{
    text-align: left;
}

input::placeholder, input::-webkit-input-placeholder{
    opacity: 1;
    color: black;
    font-weight: 600;
    font-size: 1.1em;
    font-family: 'Nunito Sans', sans-serif;
}

.relative{
    position: relative;
}

.font-smaller{
    font-size: smaller;
}

.uppercase{
    text-transform: uppercase;
}

.inline-block{
    display:inline-block;
}
.block{
    display:block;
}
.text-center{
    text-align:center;
}
.text-right{
    text-align:right;
}

.no-underline{
    text-decoration: none;
}

.lightest-back{
    background-color: #FFD5C3;
    background-image: none !important;
}
.light-back{
    background-color: #FFC0A6;
}
.back{
    background-color: #FF9D73;
}
.dark-back{
    background-color: #FA7F4B;
}
.darkest-back{
    background-color: #E76027;
}
.half-back{
    background-image: linear-gradient(#FA7F4B 60%, rgba(0,0,0,0.001) 25%);
}

.lightest-text{
    color: #FFD5C3;
}
.light-text{
    color: #FFC0A6;
}
.text{
    color: #FF9D73;
}
.dark-text{
    color: #FA7F4B;
}
.darkest-text{
    color: #E76027;
}

.border{
    border: solid 3px #FF9D73 !important;
}
.dark-border{
    border: solid 3px #FA7F4B !important;
}

.light-highlight, nav div a:hover{
    display: inline;
    background-image: linear-gradient(rgba(0,0,0,0.001) 40%, #FFC0A6 35%);
}
.highlight{
    display: inline;
    background-image: linear-gradient(rgba(0,0,0,0.001) 40%, #FF9D73 35%);
}
.dark-highlight{
    display: inline;
    background-image: linear-gradient(rgba(0,0,0,0.001) 40%, #FA7F4B 35%);
}


.white-back{
    background-color: rgb(255, 255, 255);
    background-image: none !important;
}
.white-text{
    color: rgb(255, 255, 255);
}
.white-border{
    border: solid 3px white;
}
.white-highlight{
    display: inline;
    background-image: linear-gradient(rgba(0,0,0,0.001) 40%, #FFF 35%);
}
.black-text{
    color: #4F4F4F;
}
.grey-text{
    color: #828282;
}
.light-grey-text{
    color: #BDBDBD;
}

.row{
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.box{
    padding: 1em;
}
.box-margin{
    margin-bottom: 3em;
}
.box-padding{
    padding: 2em;
}

.text-box{
    max-width: 24em;
}
.text-box p{
    max-width: 23em;
    font-weight: 600;
    line-height: 1.5em;
}
#emailtext{
    min-width: 20em;
}

.buttonlink{
    padding: 0.8em 2.5em 0.8em 2.5em;
    text-decoration: none;
    border: 0px;
    font-size: 1.2em;
}

.buttonlink-sm{
    padding: 0.5em 1.5em 0.5em 1.5em;
    text-decoration: none;
    border: 0px;
    font-size: 1.2em;
}

#trigram-of-heaven, .buttonlink, .buttonlink-sm{
   cursor: pointer;   
}

.header-grid{
    display: grid;
    grid-template-columns: 6fr 1fr;
}

.nav-grid{
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1 em;
    /*grid-template-columns: auto !important;
        grid-gap: 1em;
        margin-top: 0.5em;
        text-align: left !important;*/
}
.nav-grid-main{
    grid-template-columns: auto !important;
        grid-gap: 1em;
        margin-top: 0.5em;
        text-align: left !important;
}
.nav-grid div {
    margin-bottom: 10px;
    margin-left: 10px;
}

.grid-center{
    align-items: center;
}

.fullWidthImage, .speakerImage{
    width: 100%;
    height: auto;
}

.speakerImage{
    margin-bottom: 0.5em;
}

.video-container-16x9{
    position: relative; 
    overflow: hidden; 
    width: 100%; 
    padding-top: 56.25%;
}
.video-16x9{
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    height: 100%;
}

.banner-catchphrase span{
   margin-bottom: 0.4em;
}

.bannerGrid{
    display: grid;
    grid-template-columns: 53vw 42vw;
    position: absolute;
    bottom: 18%;
    width: 100%;
}

.bannerGrid div:first-child{
    font-weight: 700;
    font-size: 3.5em;
    padding-left: 1em !important;
    padding-right: 1em;
}
.bannerGrid div{
    padding: 0em 2em 0em 2em;
    margin-top: auto;
    margin-bottom: auto;
}

.speakerGrid{
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 2.5em;
}

.twoToOneGrid{
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 2.5em;
}

.threeToOneGrid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2em;
}

.fourToOneGrid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 2em;
}

.twoThirdsGrid, .twoThirdsGrid-reverse{
   display: grid; 
   grid-template-columns: 1fr 2fr;
   grid-gap: 10.5em;
}
.twoThirdsGrid-reverse{
     grid-template-columns: 2fr 1fr;
     grid-gap: inherit;
}

.list-inline li{
    display: inline;
    margin-left:0.2em;
    margin-right: 0.2em;
}

.rectangle-list li{
    padding-left: 0;
    margin-bottom: 1em;
    font-weight: 600;
    margin-left: 1.5em;
    text-indent: -1.5em;
}
.rectangle-list li:before{
    content: "\25AE";
    padding-right: 8px;
    color: #FF8A59;
}

.xdfooter{
    max-width: 50%;
    height: auto;
}
.xdheader{
    height: 2.0em;
    width: auto;
    vertical-align: middle;
    padding-left: 0.5em;
}
#nav-links {
    transition: max-height 0.3s ease-in;
    margin-bottom: -0.2em;
    text-align: center;
/*    max-height: 0;
        overflow: hidden;*/
}

.nav-links-main {
    max-height: 0;
        overflow: hidden;
}

#email-signup{
    opacity: 100;
    transition: opacity 1s;
}

.ending-fade{
    padding: 2em 2em 0em 2em;
    background-image: linear-gradient(rgba(0,0,0,0.001) 25%, #FF8A59 20%);
}


/* Small Screen */
@media (min-width: 830px) and (max-width: 1000px)
{

    .speakerGrid{
      grid-template-columns: auto auto auto;
    }

    .bannerGrid div:first-child{
        font-size: 2.2em;
    }
    
    .row{
        max-width: 90%;
    }
}


/* Tablet */
@media (min-width: 576px) and (max-width: 870px)
{
    .bannerGrid div:first-child{
        font-size: 1.55em;
        text-align: inherit !important;
        padding-right: 0em !important;
    }
    
    .banner-header{
        margin-right: 1em;
    }
     
    .bannerGrid-center{
        grid-template-columns: 1fr 1fr !important;  
    }
    
    .bannerGrid-center div:nth-child(2){
        padding-right: 0em;
    }
    
}


/* Mobile */
@media (max-width: 576px)
{  

    .speakerGrid{
      display: grid;
      grid-template-columns: auto;
    }
    
    .bannerGrid {
        grid-template-columns: auto;
        bottom: 1%;
    }
    .bannerGrid div{
        padding: 0.4em 0em 0.4em 0em;
    }
    
    .hideSmallMobile{
        display: none !important;
    }
       
    .bannerGrid div:first-child, #banner-dates{
        font-size: 1.3em;
        text-align: inherit;
    }
    .bannerGrid div:nth-child(2) {
        line-height: 0.3em;
    }
    .bannerGrid div:nth-child(2) span{
        font-size: 1.2em;
    }
       
    .banner-subtext{
        font-weight: 600;
        font-size: 1.2em;
    }
}


/* *************************** */

/* Anything below large screen */
@media (max-width: 1000px)
{
    .ending-fade{
        background-image: linear-gradient(rgba(0,0,0,0.001) 15%, #FF8A59 10%);
    }
    
    .xdfooter{
        max-width: 20%;
        height: auto;
    }
    
    .xdheader{
        max-height: 1.6em;
    }
    
    h1{
        font-size: 1.6em;
    }
}

/* Anything below laptop screen */
@media (max-width: 870px)
{   
    h2{
       font-size: 1.4em; 
    }
    
    h3.invisible + ul{
        margin-top: 0em;
    }
    

    textarea{
        width: 90%;
    }
    
    .largeheader{
        font-size: 2em;
    }
    
    .box-margin{
        margin-bottom: 0em;
    }

    .row{
        max-width: 98%;
    }
  
    .header-grid{
        grid-template-columns: 9fr 1fr;
    }
    .nav-grid{
        grid-template-columns: auto !important;
        grid-gap: 1em;
        margin-top: 0.5em;
        text-align: left !important;
    }
    .nav-grid div {
        margin-bottom: 10px;
        margin-left: 10px;
    }
    /*.nav-grid div{
        padding-left: 1em;
    }*/
    #nav-links{
        max-height: 0;
        overflow: hidden;
    }
    
    .hideMobile{
        display: none !important;
    }
    
    #tagline{
        display: block;
        margin-left: 0.5em;
        margin-top: -1em;
        margin-bottom: -0.6em;
    }
      
    .relative.box-margin{
        margin-bottom: 0em !important;
        background-color: #E0EBFF;
    }
    
    .text-box, .text-box p{
        max-width: inherit;
    }
    #emailtext{
        width: 90%;
    }
    
    .overview-offset{
        margin-left: 1.5em !important;
    }
  
    .ending-fade{
        background-image: linear-gradient(rgba(0,0,0,0.001) 15%, #FF8A59 10%);
    }
    
    .speakerGrid{
      grid-template-columns: auto auto;
    }
    
    .twoToOneGrid, .threeToOneGrid, .fourToOneGrid, .twoThirdsGrid, .twoThirdsGrid-reverse{
        grid-template-columns: auto;
        grid-gap: 0;
    }
       
    .schedule-grid{
        grid-template-columns: auto !important;  
    }
    
    /*Fix tomorrow */
    .schedule-speakers-grid{
        grid-template-columns: 1fr 4fr !important;
        grid-gap: 0.5em;
    }
    
    .banner-header{
        font-size: 1.8em;
    }
    
}

/* Anything above laptop screen */
@media (min-width: 870px)
{
    .hideDesktop{
        display: none !important;
    }

    .hideDesktopMain{
        display: none !important;
    }

    .bannerGrid-center{
        grid-template-columns: 1fr 1fr !important;  
    }
    
    .banner-header{
        font-size: 2em;
    }
    
    /*For Design Leaders Podcast*/
    .nav-grid div:nth-child(6){
        /*text-align: right !important;*/
    }

}

/* Navigation-specific changes */
@media (max-width: 968px){
    
    .nav-grid{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    
    h1{
        font-size: 0.9em;
    }
}


/*=============================*/
/* Footer Specific Details */

#footer{
        border: 2px solid white;
    }

    .footer-grid{
        display: grid;
        grid-template-columns: 14.75em 3fr 3fr 3fr 1fr;
    }
    
    #uxstrat{
        padding-left: 2em;
    }
    
    .center-margin-desktop{
        margin-left: auto;
        margin-right: auto;
        padding: 2em 0em 2em 2em;
    }
    
    .footer-grid ul li{
        margin-top:0.2em;
        margin-bottom: 0.2em;
        font-size: 0.9em;
    }
    
    .footer-headers{
        font-size: 1.15em;
        margin-bottom: 0.5em;
    }
    
    .footer-grid ul li a{
        text-decoration: none;
        color: white;
    }
    
    .invert-mobile{
        filter: brightness(0) invert(1);
    }
    
    .produced-by{
        color: #797373
    }
    
    @media (max-width: 870px)
    {
        .center-margin-desktop{
            margin-left: 0em;
            margin-right: inherit;
        }
        
        .footer-grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            justify-items: start;
        }
        
        .footer-logo-grid{
            display:grid;
            grid-template-columns: auto;
        }
        
        #contact-footer{
                order: 3;
        }
    }



#slideshow1{
        position: absolute;
        left: 100%;
        top: 0%;
        width: 100%;
    }
    
    #catchphrase{
        transition: opacity 500ms;
	line-height: 0.4em;
    }
    
    .slide-overlay{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 10;
        background: linear-gradient(180deg, rgba(215, 215, 215, 0.4) 0%, rgba(255, 255, 255, 0.00416667) 99.99%, rgba(255, 255, 255, 0) 100%, rgba(0, 0, 0, 0) 100%);
    }
    
    .normal-ul{
        margin: 1em;
        list-style-type: disc;
    }
    
    .picture-links{
        position: absolute; 
        border: 3px solid #66EDFF; 
        width: 90%; 
        top: 25%; 
        left: 5%; backdrop-filter: blur(2px); 
        -webkit-backdrop-filter: blur(2px); 
        padding-top: 5em; 
        padding-bottom: 5em;
        color: black !important;
    }
    
    .sponsors-grid{
        display: grid;
        grid-gap: 1.5em;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
    }

    .round-input{
        border-radius: 1.5em;
    }
    
    .overflowX{
       overflow-x: hidden; 
    }
    
    .description-arrow{
        position: relative;
        align-self: end;
        cursor: pointer;
    }
    .description-arrow > :first-child{
        position: absolute;
        bottom: 0;
    }
    
    .schedule-header{
        font-weight: 600;
        margin-bottom: 1em;
        font-size: 1.4em;
    }
    
    .schedule-grid{
        display: grid;
        grid-template-columns: 1fr 3fr;
    }
    .speaker-row{
        border-bottom: 2px solid #8CB6FF;
        margin-bottom: 0.2em;
    }
    
    .schedule-speakers-grid{
        display: grid;
        grid-template-columns: 2fr 3fr 2fr 3fr 1fr;
        grid-gap: 1em;
    }
    
    .schedule-header{
        grid-column-start: 1;
        grid-column-end: 5;
    }
    
    .header-space{
        margin-left: 1em;
        margin-right: 1em;
    }
    
    .grid-center{
        align-items: center;
    }
    
    .collapsed{
        transition: max-height 0.2s ease-out;
    }
    
    .in{
        max-height: 0;
        overflow: hidden; 
    }
    
    .toggle-program{
        cursor: pointer;
    }
    .toggle-program:hover{
        background-color: #B3CEFF;
    }
    
    .arrow{
      transition: transform 0.3s;
      transform-origin: center;
    }
    
    .full-margin{
        margin-left: -3em;
        margin-right: -3em;
    }
    
    .top-no-margin{
        margin-top:0em;
    }
    
    
/* Anything above laptop screen */
@media (min-width: 830px)
{    
    
    .extra-margin{
        padding-left: 4em;
        padding-right: 4em;
    }

}

/* Anything below laptop screen */
@media (max-width: 830px)
{
    
  .schedule-speakers-grid{
        grid-template-columns: 2fr 4fr 1fr !important;
        grid-gap: 1em;
  }  
  .speaker-photo1 { order: 1; }
  .speaker-info1 { order: 2; }  
  .speaker-photo2 { order: 4; }  
  .speaker-info2 { order: 5; }  
  .arrow-spacer {order: 3; }
  .description-arrow { order: 6; text-align: right}  
  
  .time-offset{
     margin-left: 1.5em;
     text-align: left !important;
     padding-bottom: 0.5em;
     margin-top: -1em;
  }
  
  .schedule-header{
      grid-column-end: 3;
  }
  
  .full-margin{
        margin-left: -1em;
        margin-right: -1em;
    }
  
}