/* main.css */

/* These are the colors and fonts used throughout the webpage.
 * I've listed them here so that a user may easily
 * do a search-and-replace for these to change the site theme.
 *   'Roboto',sans-serif; Font for the title text
 *   'Roboto-Slab',serif; Font for the body text 
 *   #fafafa; Background color of the site
 *   #505050; Foreground (text) color of the site
 *   #52739e; Navy, "Template" in the logo, current page in navigation, special titles in the Program
 *   #b2132e; Reddish, "Conference" in the logo, hover color for links
 *   #813c54; Heading color, titles in the Program
 *   #b8860b; Dark Goldenrod, color for links
 */

@import url('https://fonts.googleapis.com/css?family=Roboto%7CRoboto+Slab');
@import url(responsive.css);
@import url(animate.min.css);
@import url(normalize.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(slick.css);
@import url(jquery-ui.css);
@import url(nice-select.css);



 *{
     border:0;
     font:inherit;
     font-size:1em;
     margin:0;
     padding:0;
     vertical-align:baseline;
 }
 
 body{
     background-color: #fafafa;
     background-size: cover;
     background-attachment: fixed;
     color: #505050; 
     text-align:left;
     font-family:'Gill Sans Extrabold', sans-serif;
     font-size:1em;
     line-height:1.5em;
     margin: 60px auto;
     margin-top: 80px;
     width: 1000px;
     overflow-x: hidden;
 }

 span.line {
  display: inline-block;
}
 
 consschrift {
    font-family: Consolas, "courier new";    
    font-size: 120%;
}

    /* Two columns */
 .row {
    display: flex;
  }
  
  /* Create two equal columns that sits next to each other */
  .column {
    flex: 50%;
    padding: 10px;
  }

  .left {
  width: 25%;
}

.right {
  width: 75%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

 a{color: #000000; text-decoration:none;}
 a.current{color: #33b2ec;}
 a.current:hover{color: #e82945;}
 a:hover{color: #b2132e;}
 a:active{color: #e82945;}
 h1,h2,h3,h4{clear:left; 
    color: #032c48; 
    line-height: 1.38; 
    margin:1.5em 0em 1em 0em; 
    font-family:'Gill Sans Extrabold',sans-serif; 
    text-shadow: 1px 1px 2px #d0d0d0;
    font-weight: bold;}

 h1{font-size:2.5em;}
 h2{font-size:2em;}
 h3{font-size:1.5em;}
 h4{font-size:1em;}
 /*p{list-style:none; margin:24px auto 24px auto; padding:0px; width:900px; text-align:left;}*/
 
 .flex-container {
    display: flex;
    justify-content: space-around;
}

ul{ 
    text-align:left;
}
 ul li{ 
    text-align:left;
}
 /*ul{margin:24px auto 24px auto; padding:0px; width:400px; text-align: left;}*/
 /*ul li{margin:0px auto 0px auto; padding:0px; text-align:left;}*/

 
 i,em{
    font-style:italic;
}
 b,strong{
    font-weight:bold;
}

 table{
     margin: 0px auto 0px auto;
     float: center;
     /* UNCOMMENT THIS FOR DEBUGGING THE ALIGNMENT */
     /*border: 1px solid black;*/
 }
 th,td{
     text-align: left;
     /* UNCOMMENT THIS FOR DEBUGGING THE ALIGNMENT */
     /*border: 1px solid black;*/
 }
 
 /* Website Banner */
 .bottom-left {
    color: #032c48; 
    font-size:1.5em; 
    text-align: left; 
    padding: 0px 50px 27px 0px;
}

 .contact_main {
	width: 100%;
    color: #032c48;
	float: left;
	background-color: #fafafa;
	padding-top: 40px;
}

.contact_section_2{
	width: 30%;
	margin: 0 auto;
	display: block;
	padding-top: 20px;
}

.touch_text {
	width: 40%;
	margin: 0 auto;
	text-align: center;
	border-bottom: 1px solid #000;
	color: #032c48;
	font-size: 22pt;
	font-weight: bold;
}


 /* Conference Title Logo */
 .title1{
    color: #032c48; 
    font-size: 2.5em; 
    text-align: left; 
    margin-bottom: 20px; padding-top: 10px; line-height: 1.38; font-weight: 900;
} 
 

.navbar-expand-lg .navbar-nav .nav-link {
    width: 100%;
    position: fixed;
    padding-right: 60px;
    padding-left: 0;
    color: rgba(16, 16, 73, 0.943);
    font-size: 16px;
    letter-spacing: 0.5px;
}

.navbar-nav .mr-auto {
    width: 100%;
    position: fixed;
    width: 100%;
    margin: 0;
    display: block;
    list-style-type: none;  
    padding: 0; 
    text-align:center; 
    margin: 24px auto 24px auto; 
}
ul.navbar-nav {
    text-align:center; 
    margin: 24px auto 24px auto;
    position: relative;
}

    /* overflow: hidden; 
    position:fixed; 
    margin-top:-310px; 
    background-color: #f2f2f2;*/

.navbar-nav.mr-auto li {
    width: 100%;
    position: fixed;
    float: left;
}
.navbar-nav .mr-auto li.last {
    float: left;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #fb2323;
} 
.navbar-link:hover {
    color: #fb2323;
}
.navbar-nav ul {
    display: inline-block;
    list-style-type: none;
}

.navbar-light .navbar-nav .active > .nav-link{
    color: #fb2323;
    float: left;
}

.active {
    color: #fb2323;
}

div {
    margin-right:24px
}
 
 /* The Table on the Program Page */
 td.room{padding: 4px 12px 4px 4px; width: 90%; vertical-align:bottom; font-size:1.67em; color: #52739e; height:32px;}
 td.date{white-space:nowrap; width:130px; text-align:right; vertical-align:center; padding:4px 16px 0px 0px;}
 td.title{padding: 4px 12px 4px 4px; width: 90%; vertical-align:top; font-size:1.5em; color: #813c54; height:32px; font-family:'Roboto Slab',serif; text-shadow: 1px 1px 2px #d0d0d0; }
 td.title-special{padding: 4px 12px 4px 4px; width: 90%; vertical-align:top; font-size:1em; color: #52739e; font-family:'Roboto Slab',serif;}
 td.speaker{padding: 4px 12px 4px 4px; font-style: italic; font-size:1em; max-height:999999px}
 td.abstract{padding: 4px 12px 12px 4px; font-size:1em; max-height:999999px}
 td.abstract img{display: block; margin: 4px auto 8px auto}
 table.plenary{padding-top: 8px; background: #ffffff;}
 
 /* Registration and Directions iframes and Images */
 /*iframe.registration{display:block; margin:1em auto 2em auto; width:700px; height:1400px; border:none;}
 iframe.directions{display:block; margin:1em auto 2em auto; width:800px; height:400px; border:none;}
 img.center{display:block; width:67%; margin:1em auto 2em auto;}
 */

div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


 footer{
        font-size:0.875em; 
        margin-top:15em; 
        text-align:center;
        bottom: 0%;  
    }

 /* My hacky way of making the site mobile-friendly */
 @media only screen and (max-width: 1100px) {

    h2{font-size:1.40em; text-align: left;}
    .title1{text-align: center;}
    p{font-size:1em; line-height:1.5em;}
    ul{font-size: 1em;}
    .li{font-size: 1em;}

    .headline {
        margin-left:60px;
    }

    .touch_text {
        width: 40%;
        margin: 0 auto;
        text-align: center;
        border-bottom: 1px solid #000;
        color: #032c48;
        font-size: 1.5em;
        font-weight: bold;
    }
     
     .material-icons {
            font-size:0em;
            font-variation-settings:
            'FILL' 0,
            'wght' 0,
            'GRAD' 0,
            'opsz' 0,
    }
     
     th, td, tr{font-size:.9em; line-height:2em;}
     td.date{font-size:1em; padding-top:0.5em;}
     td.navigation{font-size:1.5em; padding:0px 20px 0px 20px;}
     table.footer{font-size:0.33em;}
     a.kontakt{font-size:0.7em;}
     body {overflow: visible; width: 100%;}
     html{overflow: visible;}
     li{font-size:1em; line-height:1.5em; }
     li.checkmark{font-size: 1em; }
    
     .contact_section_2{
        width: 100%;
	    margin: 0 auto;
	    display: block;
	    padding-top: 30px;
        align-items: center;
    }
        .page .col-sm-3 {
            width: 50%;
        }
        .page .col-sm-6 {
            width: 50%;
        }
    

    .page .col-sm-2 {
        width: 50%;
    }
    .page .col-sm-10 {
        width: 50%;
    }
    .row {
        width: 100%;
        font-size: 0.9em;
        text-align: center;
    }
 }