board.css

/*
- Currently activated CSS for board.html
*/


/*font declration*/
@font-face{
    font-family: "DINOT-Bold";
    src: url(DINOT-Bold.otf);
}
@font-face{
    font-family: "DINOT-BoldItalic";
    src: url(DINOT-BoldItalic.otf);
}
@font-face{
    font-family: "DINOT-CondMediIta";
    src: url(DINOT-CondMediIta.otf);
}
@font-face{
    font-family: "DINOT-Italic";
    src: url(DINOT-Italic.otf);
}
@font-face{
    font-family: "DINOT-LightItalic";
    src: url(DINOT-LightItalic.otf);
}
@font-face{
    font-family: "DINOT";
    src: url(DINOT.otf);
}

html {
  font-family: "DINOT-Bold", "DINOT-BoldItalic", "DINOT-CondMediIta", "DINOT-Italic", "DINOT-LightItalic", "DINOT";
}

body {
  overflow:hidden;
  background-color: #FFFFFF;
  font-family: "DINOT";
}

/*navbar settings*/
nav {
  /*box margin*/
  background-color:#009BDF;

  font-family: "DINOT-BoldItalic";
  /*transform: skewX(-20deg);*/
}

nav .brand-logo{
  font-size: 50px;
}


/*navbar clock setting*/
#clock{
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -webkit-flex;
  height: inherit;
  right:0.1vh;
  position: absolute;
  top: calc(50% - 30px);
  width: 600px;
}
.unit{
  color: #FFFFFF;
  font-size: 3.3rem;
  height: 100%;
  margin: 0 10px;
  text-align: center;
}
.unit#dateToday{
  font-size:2.0rem;
}

/*general slideshow settings*/
#slideshow {
  /*materialize carousel has unwanted fixed default height*/
  float:left;
  height: 94vh !important;
}
.slideshow-buttons {
  float:right;
  position:relative;
  top : -70px;
  right: 20px;
}
.flag-buttons {
  float:left;
  position:relative;
  top : -70px;
  right: -20px;
}
.main-button{
  opacity:0.7;
}
.main-button:hover{
  opacity:1.0;
}
.slideshow-buttons > a {
  opacity:0.7;
}
.slideshow-buttons > a:hover {
  opacity:1;
}
.flag-buttons > a {
  opacity:0.7;
}
.flag-buttons > a:hover {
  opacity:1.0;
}

.description {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  padding: 1rem 7rem 3rem;
}
  .description p {
    font-size: 1.5rem !important;
    color: white;
    font-weight: 900;
  }

.lables{
  float: right;
}
span.badge.new {
  height:35px;
  line-height:35px;
  font-size:1.3rem;
  position:absolute;
  top: -40px;
  right:5px;
  background-color: #F47920;
}

/*slideshow content(individual carousels items)*/
.carousel-item {
  position: absolute !important;
}

.text-bobble {
  background: rgba(#a7a9ac, 0.22);
}
.quote-bobble {
  background: rgba(#a7a9ac, 0.22);
}
.quote-bobble p.author {
  color: black;
  text-align: right;
  margin-top: 1rem;
  font-style: italic;
}

.text-bobble, .quote-bobble {
  padding: 1rem;
}
.quote-bobble p, .text-bobble p {
  font-size: 4rem !important;
  /* Dang ol Materialize is quite specific, we will SASS soon! */
  line-height: 4rem;
  font-weight: 400;
  color: rgba(#a7a9ac, 0.22);;
}


div.image-holder {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(#a7a9ac, 0.22);;
}

.quote-holder {
  position: relative;
  max-width: 800px;
  font-size: .75em;
}

.quote-holder p {
  color: black;
  text-align: center;
}

.text-holder {
  position: relative;
  padding: 10px 30px;
  background: #009BDF;
  border-radius: 25px;
  margin-bottom: 20px;
  font-size: .75em;
  color: black;
  float: left;
}

.text-holder p {
  color: #fff;
}

.text-holder:before {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -2px;
  left: -7px;
  height: 20px;
  border-right: 20px solid #009BDF;
  border-bottom-right-radius: 16px 14px;
  -webkit-transform: translate(0, -2px);
}

.text-holder:after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: -2px;
  left: 4px;
  width: 26px;
  height: 20px;
  background: rgba(#a7a9ac, 0.22);
  border-bottom-right-radius: 10px;
  -webkit-transform: translate(-30px, -2px);
}
.video-bobble{
  text-align:center;
}

video {
    text-align:center;
    max-width:100%;
    height: 100%;
}

.row .left-aside.col{
  padding: 0;
}
.row .right-aside.col{
  padding: 0;
}
/*events today*/
.events {
  overflow-y: hidden;
  height: 48vh !important;
}
.events .collection.with-header .collection-header{
  transform: skewX(-20deg);
  background-color:#000000;
  font-family: "DINOT-Bold";
  font-size:31px;
  width:100%;
  margin-left:1.4vh;
}
.events.featured .collection.with-header .collection-header{
  background-color:#ED037C;
  font-family: "DINOT-Bold";
}
.events .nav-wrapper a.brand-logo{
  color:#FFFFFF;
}
.events .collection{
  margin:0px;
  border:0px;

}
.row .events.col{
  padding:0;
}

.eventItems > .collection{
  height: 40vh;
  overflow-y:auto;
}
.collection-header{
  font-size:1rem;
}
.collection-item > p{
  margin-bottom:0px;
}
.collection-item > span{
  font-size:1.7rem;
  line-height:1.7rem;
  font-family: "DINOT-Bold";
}
.collection-item > p.date{
  font-size:1.4rem;
  line-height:1.4rem;

}
.collection-item > p.location{
  float:right;
  font-size:1.4rem;
  line-height:1.4rem;
  font-style:italic;
}
.collection-item > *{
  font-size:1.4rem;
  line-height:1.4rem;
}
/*featured events*/
.events.featured {
  overflow-y: hidden;
  height: 55vh !important;
}
.events.featured .eventItems > .collection{
  height: 45vh;
  overflow-y:auto;
}

.events img{
  height:30vh;
  float:left;
  display:inline-block;
}
.events span.clear { clear: left; display: block; }

/*//hide scroll bar*/
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}