body, html{
  max-width: 100%;
  /* overflow: hidden; */
}

body {
   background-color:  #1a2037;
  }

  body.background-image {
    /* background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/snow-bg.svg) no-repeat top center #82d8cb; */
    /* background: url(../images/MicrosoftTeams-image.png) no-repeat top center #1a2037; */
    background-size: cover;
  }
  
  /* title graphic */
  .title {  
    display: flex;
    align-items: center;
    justify-content: center; 
  }
  
  .title img{
    width:98%;
  }
  
  .title h1 {
    color: #fff;
    font-family: 'Harri Extra Bold';
    font-size: 2.4rem;
  } 
  .title h1 span{
    font-size: 3.4rem;
  }

  .m-400 {
    max-width: 400px;
  }

    .mbt-10 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
     .mbt-20 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .imgBox {
    min-height: 330px;
  }

  .videoBox {
    min-height: 330px;
  }

  @media only screen and (min-width: 400px) {
    .imgBox {
        min-height: 330px;
    }
    
    .videoBox {
      min-height: 330px;
    }
  }

  .hidden {
    display:none;
  }

  /* mobile first grid layout */
  .grid-1 {
    display: grid;
    width: 96%;
    max-width: 900px;
    margin: 2% auto;
    
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-gap: 25px;
    
    grid-template-areas:    "t        t       t"
                            "d23      d20     d12"
                            "d2       d14     d4"
                            "d5       d22     d16"
                            "d1       d7      d9"
                            "d10      d11     d18"
                            "d13      d3      d15"
                            "d6       d17     d8"
                            "d19      d24     d21";
  }
  
  /* media query */
  @media only screen and (min-width: 500px) {
    
    .grid-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-template-areas: "t     t     t     d2      d7      d8"
                           "t     t     t     d4      d11     d12"
                           "t     t     t     d19     d9      d13"
                           "d6    d1    d24   d24     d21     d20"
                           "d17   d18   d24   d24     d5      d22"
                           "d3    d23   d16   d14     d10     d15";
    }
    
  }
  

  .grid-1 label {
      display: flex;
      margin-bottom: auto;
  
  }
  
  /* individual items */
    .title {
      grid-area: t;
    }
    .day-1 {
    grid-area: d1;
    }
    .day-1 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/child.svg);
    }
    .day-2 {
      grid-area: d2;
    }
    .day-2 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/donut.svg);
    }
    .day-3 {
      grid-area: d3;
    }
    .day-3 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/santa.svg);
    }
    .day-4 {
      grid-area: d4;
    }
    .day-4 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/child-3.svg);
    }
    .day-5 {
      grid-area: d5;
    }
    .day-5 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/book.svg);
    }
    .day-6 {
      grid-area: d6;
    }
    .day-6 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/snowflake.svg);
    }
    .day-7 {
      grid-area: d7;
    }
    .day-7 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/gift.svg);
    }
    .day-8 {
      grid-area: d8;
    }
    .day-8 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/stocking.svg);
    }
    .day-9 {
      grid-area: d9;
    }
    .day-9 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/gift.svg);
    }
    .day-10 {
      grid-area: d10;
    }
    .day-10 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/bird.svg);
    }
    .day-11 {
      grid-area: d11;
    }
    .day-11 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/snowman.svg);
    }
    .day-12 {
      grid-area: d12;
    }
    .day-12 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/child-2.svg);
    }
    .day-13 {
      grid-area: d13;
    }
    .day-13 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/holly.svg);
    }
    .day-14 {
      grid-area: d14;
    }
    .day-14 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/horse.svg);
    }
    .day-15 {
      grid-area: d15;
    }
    .day-15 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/book.svg);
    }
    .day-16 {
      grid-area: d16;
    }
    .day-16 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/bird.svg);
    }
    .day-17 {
      grid-area: d17;
    }
    .day-17 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/stocking.svg);
    }
    .day-18 {
      grid-area: d18;
    }
    .day-18 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/donut.svg);
    }
    .day-19 {
      grid-area: d19;
    }
    .day-19 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/child.svg);
    }
    .day-20 {
      grid-area: d20;
    }
    .day-20 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/holly.svg);
    }
    .day-21 {
      grid-area: d21;
    }
    .day-21 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/snowflake-2.svg);
    }
    .day-22 {
      grid-area: d22;
    }
    .day-22 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/santa.svg);
    }
    .day-23 {
      grid-area: d23;
    }
    .day-23 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/child-2.svg);
    }
    .day-24 {
      grid-area: d24;
    }
    .day-24 .back {
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/tree.svg);
    }
  
  
  /* door styles */
  
  .grid-1 input {
    display: none;
  }
  
  .grid-1 label {
    perspective: 1000px;
    transform-style: preserve-3d;
    cursor: pointer;
  
    display: flex;
    min-height: 100%;
    width: 100%;
    height: 120px;
  }
  
  .door {
    width: 100%;
    transform-style: preserve-3d;
    transition: all 300ms;
    border: 2px dashed transparent;
    border-radius: 10px;
  }

  input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}
    .door div {
      position: absolute;
      height: 100%;
      width: 100%;
      backface-visibility: hidden;
      color: white;
      -webkit-perspective: 0;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translate3d(0,0,0);
      visibility:visible;
      border-radius: 6px;
  
      display: flex;
      align-items: center;
      justify-content: center;
      
      /* typography */
      font-family: 'Kalam', cursive;

      /*color: #e6e6e6;*/
       color: #385052; 
      font-size: 2em;
      font-weight: bold;
      text-shadow: 1px 1px rgba(0, 0, 0, 0.9);
    }
  
    .door .back {
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #ffffff;
       /* background-color: #1a2037;*/
        /* background-color: #2e313d; */
        transform: rotateY(180deg);
        background-size: 100%;
    }
  
    label:hover .door {
      border-color: #e6e6e6;
    }

    .form-group label {
      height: auto;
      display: inline-block;
      padding-left: 10px;
    }
  
    :checked + .door,.door.open {
      transform: rotateY(180deg);
    }
  
  
  /* footer styles */
  footer {
    text-align: center;
    padding: 2em 0 5em;
  }  
    footer a {
        color: #e6e6e6;
    } 
      footer a:hover {
            text-decoration: none;
            color: #eee;
      }

#cconsent-bar button {
  font-size: 12px !important;
  padding: 8px 8px !important;
}

.modal-dialog{
  margin-bottom: 10em;
}

.form-inline{
    display: block !important;
}
.row{
    margin: 0 !important;
}
td{
    vertical-align: top;
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 576px !important;
    }
}
.modal{
    padding-right: 0px !important;
}

.white {
    background-color: #fff;
}
.text-white {
    color: #fff;
}
.text-shadow {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}


@media all and (max-width: 1230px) {
  #cconsent-bar .ccb__left {
    -ms-flex: 0 0 50% !important;
    -webkit-box-flex: 0 !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  #cconsent-bar {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  footer {
    padding-bottom: 8em;
  }
  .modal-dialog{
    margin-bottom: 10em;
  }
}

@media all and (max-width: 576px) {
  #cconsent-bar .ccb__left {
    margin: 10px 0 !important;
    -ms-flex: 0 0 50% !important;
    -webkit-box-flex: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  footer {
    padding-bottom: 10em;
  }
  .modal-dialog{
    margin-bottom: 10em;
  }
}

@font-face{
  font-family: "Harri Extra Bold";
  src: url("fonts/HarriText-ExtraBold.ttf");
}

/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/raleway-v22-latin/raleway-v22-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/raleway-v22-latin/raleway-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/raleway-v22-latin/raleway-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/raleway-v22-latin/raleway-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/raleway-v22-latin/raleway-v22-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Mansalva';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/mansalva.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* LOGIN / FOOTER / HEADER */
.admin{
  font-family: 'Raleway';
  background-color:  #fff;
}

#footer{
  left: 0;
  bottom: 0;
  width: 100%;
  background-color:  #1a2037;
  padding: 1rem;
  color: #fff;
}

#footer a{
  color: #fff;
  font-family: 'Raleway' !important;
}

#footer a:hover{
  /* color: #f5e3bb */
  color: lightgray;
}

#header{
  left: 0;
  top: 0;
  width: 100%;
  background-color:  #1a2037;
  padding: 1rem 1rem 0 1rem;
  color: #000;
  font-family: 'Raleway' !important;
}

#header h1{
  font-family: 'Mansalva';
  font-size: 60px;
}

.btn-primary-admin{
  color: #fff !important ;
  background-color: #2d3c79;
  border-color: #2d3c79;
}

.btn-primary:hover, .btn-primary-admin:hover{
  opacity: 0.8 !important;
}

.center{
  margin: 0;
  padding: 1.875rem;
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-10%, -10%);
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background-color: #1a2037;
  color: rgb(240, 240, 240);
  font-family: 'Raleway';
}

.center h2{
  font-family: 'Mansalva';
}

.openDaysModal:hover{
  cursor: pointer;
}

.btn-header{
  color: #000;
  background-color: #999;
  border-radius: 5px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  margin-left: 0.3rem;;
}

.btn-header:hover{
  background-color: #fff;
  text-decoration: none;
}

.btn-header-active{
  background-color: #fff;
}

.config-label{
  font-weight: bold;
}
select[name="DataTables_Table_0_length"]{
  margin: 5px;
}

.password-container-margin{
  margin-top: 8rem !important;
}

.nav-mr{
  margin-right: 5%;
}