@import 'fonts/fontsRoman.css';
@import 'fonts/fontsItalic.css';

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background-color: #fafaf0;
    color: #525252;
}

.content {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}

.lato {
    font-family: strawford, sans-serif;
}

.bg-mockup-blue {
    background-color: #316999;
}

.mockup-blue {
    color: #316999;
}

.mockup-red {
    color: #DB4237;
}

.turn-white {
    fill: white;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fcebd0;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    text-align: left;
    font-size: .875rem;
    display: block;
}

.dropdown-content a:hover {
    background-color: #fcddb6;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.menu {
    margin-top: 16px;
    margin-bottom: 16px;
}

@media only screen and (min-width: 515px) {}

@media only screen and (min-width: 371px) and (max-width: 514px) {
    main {
        padding-bottom: 111px;
    }
}

@media only screen and (min-width:335px) and (max-width: 370px) {
    main {
        padding-bottom: 99px;
    }
}

@media only screen and (max-width: 334px) {
    main {
        padding-bottom: 143px;
    }
}

.organizers {
    display: grid;
    justify-items: stretch;
    align-items: stretch;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.offer {
    justify-content:space-between ;
    align-items: center;
}

.agenda {
    text-align: center;
    vertical-align: top;
    border-collapse: collapse;
    max-width: 100%;
    cursor: default;
}

.agenda td,
.agenda th {
    border: 1px solid #ddd;
    padding: 5px;
}

.agenda .rooms {
    margin-bottom: 5px;
}

.agenda td.active {
    background-color: #f5f5f5;
}

.agenda td.special {
    vertical-align: middle;
    background-color: #DAE5FF;
}

.agenda .square {
    width: 10px;
    height: 10px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, .2);
}

.agenda .red {
    background-color: #ff2525;
}

.agenda .blue {
    background-color: #0088ff;
}

.agenda .yellow {
    background-color: #f8ff2d;
}

.agenda .purple {
    background-color: #800080;
}

.agenda .green {
    background-color: #008000;
}

.agenda .talk {
    cursor: pointer;
}

.agenda .talk>.speaker {
    font-style: italic;
}

.agenda .talk>.keynote {
    font-weight: 700;
}

.agenda .separator {
    border: none;
    padding: 2px;
    background-color: #384452;
    height: 3px;
}

.agenda td.talk.workshops {
    background-color: #d1eace;
}

@media (max-width: 650px) {
    .agenda td {
        padding: 1px !important;
    }
}

.tippy-tooltip.pycon-theme {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    padding: 9px 14px;
    max-width: 400px;
    white-space: normal;
    text-align: start;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.tippy-tooltip.pycon-theme.leave {
    opacity: 0;
}

.heading {
    font-family: strawford;
    font-size: 40px;
}

.heading2 {
    font-size: 30px;
    margin-bottom: -0.1cm;
}

.heading3 {
    font-size: 24px;
    margin-bottom: -0.1cm;
}

.ps {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 100px
}

.ps2 {
    width: 100%;
    position: absolute;
    padding-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
}

.ps3 {
    width: 100%;
    position: absolute;
    padding-bottom: 100px;
}

.topbanner {
    z-index: 500;
    padding-top: (-50px);
}

.lvl1 {
    width: 100%;
    height: 100px;
}

.fs {
    width: 1000px;
    font-size: 80;
}

.dhotel {
    width: 600px;
    margin-left: 100px;
    font-size: 30px;
}

.photel {
    width: 500px;
}

.list {
    font-size: 24px;
    margin-left: auto;
    margin-right: auto;
}

.postcard {
    float: left;
    display: inline-block;
    width: 1000px;
    height: 375px;
    padding: 10px;
    text-align: center;
    margin: 20px;
    grid-gap: 20px;
    max-width: 20rem;
    background-color: #fffde9;
    border-color: #f5a741;
}

.boxpost {
    float: left;

}

.pnote {
    width: 350px;
    padding: 10px;
    margin: auto;
}

.lines {
    width: 30em;
    position: relative;

}

.button {
    z-index: 1000;
    font-size: 20px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.pt4 {
    padding-top: 2.2rem;
}

.cw {
    margin: 0 auto;
    width: 100%;
    height: 200px;
}

.s1 div {
    text-align: center;
}

.s1 div a {
    margin-top: -17%;
    flex: 1 0 auto;
}

.cu {
    font-size: 24px;
    color: #f5a741;
    ;
    font-family: strawford;
}

.shr {
    border-color: rgb(49, 105, 153);
}

.pre-formatted {
    white-space: pre-line;
}

.default-shadow {
    box-shadow: 8px 8px 0 rgba(0, 0, 0, .10);
}

.default-radius {
    border-radius: 12px;
}

#header--popup.active {
    width: 30%;

}

@media screen and (max-width: 940px) {
    #header--popup.active {
        width: 40%;
    }
}

@media screen and (max-width: 750px) {
    #header--popup.active {
        width: 50%;
    }
}

@media screen and (max-width: 600px) {
    #header--popup.active {
        width: 60%;
    }
}



#header--popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    transition: width .3s ease-in-out;
    background-color: white;
    display: inline-block;
    overflow: hidden;
    z-index: 1000;
    overflow-y: auto;
}

.header--popup--list a {
    white-space: nowrap;
    text-decoration: none;
    color: black;
    font-size: 20px;
    font-weight: 500;
    margin-left: 1.25rem;
}

.header--popup--list>li>a:hover {
    --specialOrange: rgb(245, 167, 65);
    color: var(--specialOrange);
    font-weight: 600;
}

.x--button {
    padding: 0.25rem;
    position: absolute;
    border-radius: 9999px;
    cursor: pointer;
    top: 1.25rem;
    right: 1.25rem;
    width: 32px;
    height: 32px;
}

.x--button:hover {
    background-color: rgb(244 244 245/ 1);
}

.h-6 {
    height: 1.5rem;
}

.w-6 {
    width: 1.5rem;
}

.header--popup--list {
    list-style: none;
    padding: 40px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 50px;
}

#overlay.active {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #787878;
    opacity: 0.5;
    z-index: 999;
}

.hamburger {
    cursor: pointer;
}

.outer--space--photo {
    object-fit: cover;
    max-height: 500px;
    height: 100%;
    width: auto !important;
}

/* It makes shadow visible */
.slick-list {
    box-sizing: initial;
    padding: 10px !important;
}

.slick-track{
    display: flex !important;
    align-items: center;
}

.lang--change--popup {
    position: absolute;
    top: 1.25rem;
    left: 30px;
}

@media screen and (max-width: 500px) {
    .header--popup--list a {
        font-size: 16px;
        margin-left: 5px;
    }

    #header--popup.active {
        width: 75%;
    }

    .header--popup--list {
        padding: 40px 5px;
    }

    .lang--change--popup {
        left: 10px;
    }
}

.saturated-speaker{
    display:flex;
    justify-content: center;
    width: 100%;
    color: #fafaf0;
    background-color: #F5A741;
    position:relative;
    overflow:hidden;
}

.bright-speaker{
    display:flex;
    justify-content: center;
    width: 100%;
    color:#525252;
    background-color: #fafaf0;
    position:relative;
    overflow:hidden;
}

.saturated-speaker .name-above-bio{
    color:#fafaf0 !important;
}
.saturated-speaker .name-above-photo{
    color:#fafaf0 !important;
}

@media only screen and (min-width: 970px) {
    .speaker-photo {
        padding-bottom: 0;
    }

    .speaker-bio{
       justify-content:left;
       width:40%;
       padding-left: 2rem;
       flex-direction: column;
       align-items: unset;
    }
    .name-above-bio{
        display: block;
        text-align:left;
    }
    .name-above-photo{
        display:none;
    }
}

@media only screen and (min-width: 768px) {
    .speaker-container{
        width:70%;
    }
    .speaker-photo {
        width:400px;
    }
}

@media only screen and (min-width: 600px) and (max-width: 768){
    .speaker-container{
        width:90%;
    }
    .speaker-photo {
       width:70%;
       height:auto;
     }
}

.speaker-type{
    font-size: 4rem;
    font-weight: 300;
}