:root {
  /*--myblue: rgb(0,119,221);/*rgb(128, 0, 32);/*#006633;*/


  /*--myskyblue: rgb(122,196,189);*/
  --myskyblue: rgb(129,177,205);
  --myskybluedark: rgb(77,106,123);
  --mybaselchurchred: rgb(217,118,71);
  --myneuchatelblue: rgb(77,108,139);
  --mycloudwhite: rgb(235,207,223);
  --mywaterblue: rgb(171,216,224);
  --myflagwhite: rgb(228,242,245);
  --myflagwhite2: rgb(214,238,243);
  --myhousebrown: rgb(232,181,100);
  --myskygreen: rgb(187,220,151);
  --myskybg: rgb(163,209,172);/*rgb(121,197,197);*/
  --myintensecloudpink: rgb(210, 100, 170);

  /*--mycitycol: var(--mybaselred);*/
  --mybaselred: var(--myintensecloudpink);
  --myblue: var(--myskyblue);
  --mylightgray: var(--mycloudwhite);
  --mydarkgray: #555;
  --mylightgray: #f2f2f2;
  --mylinkcol: var(--myskybluedark);
  --mytextbg: white;
  --mybodybg: #7dc2bd;
}
* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin:auto;
  font-family: "Work Sans", sans-serif;

  /*font-family: Arial, Helvetica, sans-serif;*/
  background-color: var(--mybodybg);

}


article {
  padding: 20px;
  padding-bottom: 50px;
  max-width: 800px;
  padding-top: 70px;
  margin:auto; /*centers the div*/
  width:80%;
  /*background-color: #f1f1f1;*/
  /*overflow: scroll;*/
  /*height: 300px; /*only for demonstration, should be removed */
  /*height: 80vh; /* 80% of window height*/
}

.section {
  width: 70%;
  margin: auto;
  padding-bottom: 20px;
}

.sectiontitle{
  background-color: var(--myblue);
  margin-bottom: 10px;
  color: var(--mylightgray);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom:5px;
  text-align: center;
  /*border-radius:10px 10px 10px 10px;*/
}

.introtext{
  margin-bottom: 10px;
  /*color: var(--mylightgray);*/
  /*padding-left: 20px;
  padding-right: 20px;*/
  padding-top: 50px;
  padding-bottom:5px;
  /*font-style: italic;*/
}



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

.savethedate{
  display: block;
  position: relative;
  width:120px;
  transform:rotate(-20deg);
  left: -8px;
  top:-25px;
  border: 0px;
  color: var(--mybaselred);
}

.polaroidcontainer {
  position:relative;
}

.polaroid {
  width: 50%;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  box-shadow: 10px 10px 5px #aaaaaa;
  position: relative; /*needed for z-index*/
}

img.polaroidpic {
  border-radius: 0px;
  width:100%;
  height: 200px;
  object-fit: cover;
}

img.flippable {
  transition: 0.3s ease;
}

img.flipped {
  transform: rotate(180deg);
}

div.rotate_right {
  float: left;
  transform: rotate(7deg);
}

div.rotate_left {
  float: left;
  transform: rotate(-8deg);
}

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



.withbackgroundpic {
  padding:10px;
  margin-bottom: 10px;
  /*display:flex;*/
  /*justify-content:center;*/
  /*align-items:center;*/
  /*object-fit:cover;*/
  text-shadow: 0px 1px 2px black;/* offset-x | offset-y | blur-radius | color */
}

.poster{
  text-align: center;
}

.posterpic{
  width:50%;
  /*display:inline-block;*/
  /*float:left;*/
  border-radius:5px 5px 5px 5px;
  object-fit: scale-down;
  /*margin:auto; for horizontal centering*/
}



.card {
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  border-radius:0px;
}

.card-speakers {
  padding-top:70px;
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.30),0 2px 10px 0 rgba(0,0,0,0.7);
  color: black;/*white;*/
  padding: 0px;
  /*vertical-align:middle;*/
  /*float:left;*/
  margin:auto;
  width:100%;
  /*display:flex;*/
  /*justify-content:center;*/
  margin-bottom:30px;
  border-color: rgb(128, 0, 32);
  border-style: solid;
  border-width:0px;
  border-radius:10px;

  background-color: var(--mytextbg);/*inherit;/*rgba(var(--mygreenR),var(--mygreenG),var(--mygreenB),1);/*#006633;*/

}



.cardpic {
  width:50%;
  display:inline-block;
  float:left;
  border-radius:10px 0px 0px 10px;
  object-fit: cover;
}

#cardpic1 {
  display: block;
}




.cardtxt {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: auto;
  margin-bottom: 10px;
  margin-top: 10px;
}

.cloudbg {
  text-align: center;
  background-color: transparent;
  /*background-image: url("pics/cloud1.png");*/
  background-repeat: no-repeat;
  background-size: contain; /*contain;*/
  background-position: 50% 50%;
  padding-top: 50px;
  padding-bottom: 50px;

  justify-content:center;display:flex;
}


.card-contact {
  padding-top:70px;
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.30),0 2px 10px 0 rgba(0,0,0,0.7);
  background-color: inherit;/*rgba(var(--mygreenR),var(--mygreenG),var(--mygreenB),1);/*#006633;*/
  color: black;/*white;*/
  padding: 0px;
  vertical-align:middle;
  float:left;
  margin:auto;
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:30px;
  border-color: rgb(128, 0, 32);
  border-style: solid;
  border-width:0px;
  border-radius:10px;
}
.card-contact::after {
  clear: both;
  content:"";
  display:table;
}



.topnav {
  overflow: hidden;
  background-color: var(--mydarkgray);/*#333;*/
  position:fixed;
  width:100%;
  z-index:3;
  top:0;
  left:0;
}

.topnav a {
  float: left;
  color: var(--mylightgray);
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: var(--myblue);/*#006633; /*087061*/
  /*background-color: #04AA6D;*/
  color: white;
}

.topnav .icon {
  display: none;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: var(--mygreen); /*006633*/
  color: white;
}

li a:hover:not(.active) {
  background-color: var(--mydarkgray);
  color: white;
}



.marquee {
  height: 50px;
  overflow: hidden;
  position: relative;
  /*background: #fefefe;*/
  color: #777;
  /*border: 1px solid #4a4a4a;*/
}
.marquee p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
        }

@keyframes scroll-left {
                    0% {
                        -moz-transform: translateX(100%);
                        -webkit-transform: translateX(100%);
                        transform: translateX(100%);
                    }
                    100% {
                        -moz-transform: translateX(-100%);
                        -webkit-transform: translateX(-100%);
                        transform: translateX(-100%);
                    }
                }



img.logo {
  max-height:60px;
  padding-left: 0px;
  padding-right: 0px;

}

.footer {
  text-align:center;
  background-color: inherit;
  /*margin: auto;*/
  padding: 0px;
  color: white;
  /*text-align:center;*/
  /*border: 1px solid;*/
  /*height: 90px;*/
  /*display:table;*/
  /*width: 100%;*/
  /*position: fixed;*/
  bottom: 0px;
  /*border-bottom: 10px solid #f1f1f1;
  border-right: 0px solid #f1f1f1;*/

  max-width: 800px;
  margin:auto; /*centers the div*/
  width:80%;
}


.math {
  font-family: serif;
  font-style: oblique;
  letter-spacing: 2px;
}
a.button {
  /*background-color: yellow;*/
  margin: 10px;
  font-size: 9px;
  color:black;
  text-decoration: none;
  border: 1px solid;
  border-radius: 10px;
  border-color: #ccc;
  padding: 3px 8px ;
  width: 20px;
  height: 0px;
  vertical-align: middle;
  font-variant:normal;
}
a.button.active {
  background-color: var(--mygreen);/*#006633;*/
  color: white;
}

a.button:hover:not(.active) {
  background-color: var(--mydarkgray);
  color: white;
}

a.link {
  color: var(--mylinkcol);
  text-decoration: none;
}

/*a.link.active {
  background-color: var(--mylinkcol);
  color: white;
}*/

a.link:hover:not(.active) {
  background-color: var(--mydarkgray);
  color: white;
}




table {
  border-spacing:10px 8px;
}
td {
  vertical-align: top;
}
td:first-child {
  text-align: right
}



.table {
  display: table;
  width:100%;

}

.table:hover {
  background-color: var(--mydarkgray);
  color: white;
}

.activity_link {
  /*color: #087061;*/
  color: inherit;
}
.activity_link:hover:not(.active) {
  color: #10dec0;
}



sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub {
  top: 0.4em;
}



/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media screen and (max-width: 800px) { /*SMALL screen*/
  nav, article {
    width: 100%;
    height: auto;
  }
  div.section {
    width: 90%;
  }
  /*
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }*/
  .footer {
    /*position: relative;*/
    /*background-color: rgb(1,1,1);*/
  }
  .card-contact {
    justify-content: initial;
    display:inline-block;
    margin-bottom: 20px;
  }
  .cardpic {
    width: 100%;
    height: 150px;
    display:inline-block;
    float:left;
    border-radius:10px 10px 0px 0px;
    margin-bottom: 10px;
  }
  .cardtxt {
    width: 100%;
    vertical-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .polaroidcontainer {
    margin: 40px 0px 40px 0px;
  }
  .polaroid {
    width: 100%;
    margin-bottom: 0px;
    padding-bottom: 0px;
  }
  img.polaroidpic {
    height: 100px;
  }

  div.rotate_right {
    transform: rotate(5deg);
  }
  div.rotate_left {
    transform: rotate(-6deg);
  }
  div.savethedate {
    display:none;
  }
}
@media screen and (min-width: 960px) { /*BIG screen*/
  body, .footer {
    /*width: 960px;*/
    margin: auto;
  }
}