@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700");

@font-face {
  font-family:  LogoTilteFont;
  src:          url(fonts/Abys-Regular.otf);
}

@font-face {
  font-family:  SFCompactDisplay-Semibold;
  src:          url(fonts/SFCompactDisplay-Semibold.otf);
}
@font-face {
  font-family:  SFCompactDisplay-Thin;
  src:          url(fonts/SFCompactDisplay-Thin.otf);
}
@font-face {
  font-family:  SFCompactDisplay-Ultralight;
  src:          url(fonts/SFCompactDisplay-Ultralight.otf);
}
@font-face {
  font-family:  SFCompactDisplay-Heavy;
  src:          url(fonts/SFCompactDisplay-Heavy.otf);
}
@font-face {
  font-family:  SFCompactDisplay-Light;
  src:          url(fonts/SFCompactDisplay-Light.otf);
}
@font-face {
  font-family:  SFCompactDisplay-Medium;
  src:          url(fonts/SFCompactDisplay-Medium.otf);
}
@font-face {
  font-family:  SFCompactDisplay-Regular;
  src:          url(fonts/SFCompactDisplay-Regular.otf);
}
@font-face {
  font-family:  SFCompactDisplay-Black;
  src:          url(fonts/SFCompactDisplay-Black.otf);
}
@font-face {
  font-family:  SFCompactDisplay-Bold;
  src:          url(fonts/SFCompactDisplay-Bold.otf);
}
@font-face {
  font-family:  Avenir-Next;
  src:          url(fonts/Avenir-Next.ttc);
}

.confTitle{
    font-family: Avenir-Next;
}
.confTitle_landing{
    font-family: LogoTilteFont;
}

.footer button{
    border: none;
    cursor: pointer;
    background-color: transparent;
    width: 40;
}
.footer button img{
    cursor: pointer;
}
.fix-landing-logo{
    height: 272px;
    width: 300px;
    max-height: 272px;
    max-width: 300px;
}

a {
  color: #2F68BD;
}

:root {
    --bs-gray-100        : #f8f9fa;
    --bs-gray-200        : #e9ecef;
    --bs-gray-300        : #dee2e6;
    --bs-gray-400        : #ced4da;
    --bs-gray-500        : #adb5bd;
    --bs-gray-600        : #6c757d;
    --bs-gray-700        : #495057;
    --bs-gray-800        : #343a40;
    --bs-gray-900        : #212529;
    --bs-blue            : #3f78e0;
    --bs-purple          : #747ed1;
    --bs-violet          : #a07cc5;
    --bs-pink            : #d16b86;
    --bs-red             : #e2626b;
    --bs-orange          : #f78b77;
    --bs-yellow          : #fab758;
    --bs-green           : #6bbea3;
    --bs-leaf            : #7cb798;
    --bs-aqua            : #54a8c7;
    --bs-navy            : #343f52;
    --bs-ash             : #9499a3;
    --bs-white           : #fff;
    --bs-light           : #fefefe;
    --bs-gray            : #f6f7f9;
    --bs-dark            : #262b32;
    --bs-primary         : #3f78e0;
    --bs-secondary       : #aab0bc;
    --bs-success         : #6bbea3;
    --bs-info            : #54a8c7;
    --bs-warning         : #fab758;
    --bs-danger          : #e2626b;
    --bs-blue-rgb        : 63, 120, 224;
    --bs-purple-rgb      : 116, 126, 209;
    --bs-violet-rgb      : 160, 124, 197;
    --bs-pink-rgb        : 209, 107, 134;
    --bs-red-rgb         : 226, 98, 107;
    --bs-orange-rgb      : 247, 139, 119;
    --bs-yellow-rgb      : 250, 183, 88;
    --bs-green-rgb       : 107, 190, 163;
    --bs-leaf-rgb        : 124, 183, 152;
    --bs-aqua-rgb        : 84, 168, 199;
    --bs-navy-rgb        : 52, 63, 82;
    --bs-ash-rgb         : 148, 153, 163;
    --bs-white-rgb       : 255, 255, 255;
    --bs-light-rgb       : 254, 254, 254;
    --bs-gray-rgb        : 246, 247, 249;
    --bs-dark-rgb        : 38, 43, 50;
    --bs-primary-rgb     : 63, 120, 224;
    --bs-secondary-rgb   : 170, 176, 188;
    --bs-success-rgb     : 107, 190, 163;
    --bs-info-rgb        : 84, 168, 199;
    --bs-warning-rgb     : 250, 183, 88;
    --bs-danger-rgb      : 226, 98, 107;
    --bs-white-rgb       : 255, 255, 255;
    --bs-black-rgb       : 0, 0, 0;
    --bs-body-color-rgb  : 96, 105, 123;
    --bs-body-bg-rgb     : 254, 254, 254;
    --bs-font-sans-serif : "Manrope", sans-serif;
    --bs-font-monospace  : SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient        : linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-root-font-size  : 20px;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size  : 1rem;
    --bs-body-font-weight: 500;
    --bs-body-line-height: 1.7;
    --bs-body-color      : #444D5F;
    --bs-body-bg         : #fefefe;
}

/* NAVBAR SECTION ------------------------------------------------------------------------------------------------ */

#navbar_transparent {
    background: rgba(255, 255, 255, 0.0);
    z-index   : 2;
}

/* JUMBOTRON IMAGE BACKGROUND SECTION ---------------------------------------------------------------------------- */

#top-jumbotron {
    background        : url('../img/large/athens-royalty-free-1-large.jpeg') center center no-repeat;
    /*background      : no-repeat center center;*/
    background-size   : cover;
    position          : relative;
    z-index           : 0;

    -webkit-background-size: cover;
    -moz-background-size: cover;
}

#top-jumbotron-small {
    background        : url('../img/large/athens-royalty-free-2-large.jpeg') center center no-repeat;
    /*background      : no-repeat center center;*/
    background-size   : cover;
    position          : relative;
    z-index           : 0;
}

#top-jumbotron-committee {
    background        : url('../img/large/athens-committees-bg-large.jpeg') center center no-repeat;
    /*background      : no-repeat center center;*/
    background-size   : cover;
    position          : relative;
    z-index           : 0;
}

#top-jumbotron-conduct{
    background        : url('../img/large/athens-sponsor-bg-large.jpeg') center center no-repeat;
    /*background      : no-repeat center center;*/
    background-size   : cover;
    position          : relative;
    z-index           : 0;
}

#top-jumbotron-sponsor{
    background        : url('../img/large/athens-conduct-bg-large.jpeg') center center no-repeat;
    /*background      : no-repeat center center;*/
    background-size   : cover;
    position          : relative;
    z-index           : 0;
}

#top-jumbotron-cfp {
    background        : url('../img/large/athens-cfp-bg-large.jpeg') center center no-repeat;
    /*background      : no-repeat center center;*/
    background-size   : cover;
    position          : relative;
    z-index           : 0;
}

#top-jumbotron-a11y {
    background        : url('../img/large/athens-accessibility-bg-large.jpeg') center center no-repeat;
    /*background      : no-repeat center center;*/
    background-size   : cover;
    position          : relative;
    z-index           : 0;
}

@media (min-width: 768px) {
  /* for desktop ony */
  .image-wrapper {
    background-attachment: fixed !important;
  }
}

/* 
.image-wrapper:not(.mobile) {
    
} */

.image-wrapper.bg-overlay:before {
    content : "";
    display : block;
    position: absolute;
    top     : 0;
    left    : 0;

    width     : 100%;
    height    : 100%;
    background: rgba(30, 34, 40, 0.3);
}

.image-wrapper.bg-overlay:not(.bg-content) *,
.image-wrapper.bg-overlay.bg-content .content {
    position: relative;
    z-index : 2;
}

#jumbotron_bottom_text {
    margin-top: 0.5em;
    margin-bottom: 4em;
}
#jumbotron_bottom_text div {
    margin-bottom: -1em;
}

/* CALLOUT SECTION ---------------------------------------------------------------------------- */

/*
.callout_section_0 {

} */

.callout_section_1 {
    background: #f5f5fc
}

.callout_section_2 {
    background: #ECECF9
}

.main-callout {
    background: #ECECF9;
    padding-top: 20px;
}

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

.footer {
    color:              white;
    text-align:         center;
    background:   url('../img/footer-bg/footer-bg-tint.png') center center no-repeat;
    background-size   : cover;
    position          : relative;
    z-index           : 0;
}

/* OTHER ---------------------------------------------------------------------------- */

h3 {
    color: #65446D;
    margin-top: 5px;
    margin-bottom: 20px;
}

h5 {
    padding-top: 10px;
}

.sponsor-img img {
    display: inline;
    /*max-height: 80px;*/
    /*max-width: 100%;*/
    /*border-radius: 50%;*/
}

.img-center {
  display: block;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  max-height: 120px;
  max-width: 90%;
  /*width: 50%;*/
}

/* BASIC TABLE ---------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
}

table td,
table th {
  border-bottom: 2px solid #65446D;
  padding: 5px;
  padding-right: 15px;
  text-align: left;
}

table thead {
  background-color: #65446D;
  /*color: white;*/
  color:  #444D5F;
}

table td {
  vertical-align: top;
  padding-bottom: 15px;
}

/* SIDEBAR ---------------------------------------------------------------------------- */

.toc-div {
  background-color: white;
  border-radius   : 25px;
  border          : 2px solid #DCDAE9;
  width           : 225px;
  padding         : 10px;

  position   : absolute;
  margin-top : 10px;
  margin-left: 15px;

  display: none;
}

.toc-div p {
  padding-left: 20px;
  color       : #65446D;
}

@media (max-width: 1250px) {
  .toc-div {
    display    : none;
    /* position: relative; TODO */
  }
}

/*===============================================*/
/*             STYLES FOR PROGRAM PAGEs           */
/*===============================================*/

.program {
    text-align: left;
    vertical-align: top;
    border-collapse: collapse;
    border: 1px solid #262626;
    max-width: 80%;
    margin: auto;
    /*display: block;*/

}

.program-overview {
  text-align: left;
  vertical-align: top;
  border-collapse: collapse;
  max-width: 80%;
  margin: auto;
  
}

/* Table headers */
.program-overview thead th {
  background-color: #f5f5fc;
}

.program-overview th {
  padding-left: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: none;
  border-left: 2px solid #ececf9;
  border-right: 2px solid #ececf9;
}

.program-overview tbody th {
  vertical-align: top;
  padding-top: 5px;
}

/* Rest of Table */
.program-overview td {
  border-bottom: none;
  border-left: 2px solid #ececf9;
  border-right: 2px solid#ececf9;
  padding-left: 10px;
}

.program-overview tr:nth-child(odd) {
  background-color: #fefefe;
}

.program-overview tr:nth-child(even) {
  background-color: #f5f5fc;
}

/*#content .program ul li ul li {
    list-style-type: disc;
}*/

#content .program ul li {
    /*list-style-type: none;*/
    padding-left: 0;
    margin-left: 0;
    /*padding-bottom: 1rem;*/
}

.program th,
.program td {
    padding: 15px 20px;
    border: 2px solid white; /*#65446D;*/
}

.program button {
    margin-top: 5px;
    margin-bottom: 5px;
}

#content .program th p {
    font-weight: 700;
}

tr:nth-child(odd) {
  background-color: #ececf9;
}

tr:nth-child(even) {
  background-color: #f5f5fc;
}

.track-name {
    color: #7b3f8a; /*855e8f*/ /*#65446D;*/
}

.back-to-top {
    margin-left: 10%;
}

.list_chairs {
    list-style: none;
}

a#monday,
a#tuesday,
a#wednesday {
    font-size: 21pt;
}

#content .program_h2 {
    color: #32394c;
    /*font-size: 26pt;*/
}

/*#keynote_speaker{
float: right; 
padding-left: 10px; 
max-width: 90%;
}*/

#keynote_speaker_profile_pic {
    display: inline;
}

#keynote_speaker_profile_pic img {
    float: left;
    width: 40%;
    padding: 5px;
    padding-right: 20px;
    max-height: 240px;
    max-width: 240px;
}

#keynote_announcement {
    display: block;
    margin-bottom: 5px;
    

    /*border: solid 1px #ff0000;*/
    zoom: 1;
    /* IE6&7 */
}

#keynote_announcement:before,
#keynote_announcement:after {
    content: "";
    display: table;
}

#keynote_announcement:after {
    clear: both;
}

#about_speaker {
    display: block;
    margin-top: 5px;

    /*border: solid 1px #ff0000;*/
    zoom: 1;
    /* IE6&7 */
}

#uxp_logos {
    text-align: center;
}

#uxp_logos img {
    display: inline-block;
    max-width: 30%;
}

button {
    font-weight: 700;
    /*font-size: medium;*/
    font-size:large;
    /*background-color: #a07cc5;*/
    background-color: #7953a0; /*#65446D*/
    border-radius: 10px;
    border-style: none;
    padding: 10px;
    color:#fff;
    /*width: 100%;*/
    /*font-size: 1.3em !important;*/

}
.button-content {
    background-color: rgba(160, 124, 197, 0.12);
    padding: 25px 65px;
    /*font-size: 16pt;*/
    display: none;  
    overflow: auto;
    /*font-size: 1.1em !important;*/
}

button:hover{
    cursor: pointer;
}

table button{
    width: 100%;
}

span button{
    padding: 0px 10px;
}