/* Headings: */

h1.dvt-heading-bordered {
  color: #9f0f30;
  margin-top: 36px;
  padding-bottom: 0 !important; }

h2.dvt-heading-bordered {
  padding-bottom: 6px !important; }
  
h2 {
  color: #9f0f30;
  padding-bottom: 6px !important; }

  
/* Boxes: */

.outer_box { 
    margin: auto;
    background-color:#ffffff;
    width: 80%;
    border: 0px solid grey;
    padding: 80px;
    box-shadow: 1px 2px 2px 1px #888888;
} 
.vanish_box {
    position: relative;
    background-color:#fff;
    width: 95%;
    border: 1px solid grey;
    padding: 50px;
    font-size: 16px;
} 
/* On screens that are 900px wide or less: */
@media screen and (max-width: 900px) {
    .outer_box {
      width: 95%;
      padding: 20px;
      font-size: 12px;
    } 
    .outer_box h1{
      font-size: 32px;
    }
    .outer_box h2{
      font-size: 22px;
    }
    .outer_box h3{
      font-size: 16px;
    }
   .vanish_box {
      width: 100%;
      padding: 5px;
      border: 0px solid grey;
      font-size: 12px;
    }
}
/* On screens that are 600px wide or less: */
@media screen and (max-width: 600px) {
    .outer_box {
      width: 90%;
      padding: 20px;
      font-size: 12px;
    } 
    .outer_box h1{
      font-size: 18px;
    }
    .outer_box h2{
      font-size: 16px;
    }
    .outer_box h3{
      font-size: 14px;
    }
    .vanish_box h1{
      font-size: 18px;
    }
    .vanish_box h2{
      font-size: 16px;
    }
    .vanish_box h3{
      font-size: 14px;
    }
}

.sh_box {
    margin: auto;
    background-color:#ffffff;
    width: 50%;
    border: 1px solid grey;
    padding: 10px;
    box-shadow: 1px 2px 2px 3px #aaaaaa;
}
.wh_box_l {
    position: relative;
    margin: auto;
    background-color:#ffffff;
    width: 50%;
    border: 1px solid grey;
    padding: 40px;
    font-size: 18px;
}
.wh_box_left {
    position: relative;
    background-color:#ffffff;
    width: 50%;
    border: 1px solid grey;
    padding: 5px;
    font-size: 16px;
}

.card_box {
    margin: auto;
    background-color:#ffffff;
    width: 80%;
    border: 0px solid grey;
    padding: 60px;
    box-shadow: 1px 2px 2px 1px #888888;
}
.card_box h1{
    font-size: 42px;
}
.card_box h2{
    font-size: 32px;
}

/* On screens that are 992px wide or less: */
@media screen and (max-width: 992px) {
    .card_box {
      width: 98%;
      padding: 10px
      font-size: 13px;
    }
    .card_box h1{
      font-size: 28px;
    }
    .card_box h2{
      font-size: 20px;
    }
    .card_box h3{
      font-size: 14px;
    }

}
/* On screens that are 600px wide or less: */
@media screen and (max-width: 600px) {
    .card_box {
      width: 100%;
      padding: 4px;
      font-size: 11px;
    }
    .card_box h1{
      font-size: 16px;
    }
    .card_box h2{
      font-size: 14px;
    }
    .card_box h3{
      font-size: 12px;
    }
    .wh_box_l {
      width: 100%;
      margin: 0;
      padding: 0;
    }
    .wh_box_left {
      width: 100%;
      margin: 0;
      padding: 0;
    }
}

/* H1234 color */

h1 {color: #666666;}
h2 {color: #666666;}
h3 {color: #666666;}
h4 {color: #666666;}


/* responsive tables 1 */

* {
    box-sizing: border-box;
}
/* Create several (two) equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
    padding: 15px;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
    .column {
        width: 100%;
    }
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

/* responsive tables 2 */
/* Create two unequal columns that float next to each other */
* {
    box-sizing: border-box;
}

.column {
    float: left;
    padding: 40px 10px 10px 0px;
}

.left {
  width: 20%;
  padding: 10px 10px 10px 15px;
}

.right {
  width: 80%;
}

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

/* On screens that are 900px wide or less, go from four columns to two columns */
@media screen and (max-width: 900px) {
    .left {
        width: 100%;
    }
    .right{
        width: 100%;
    }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .left {
        width: 100%;
        padding: 5px 5px 5px 5px;
    } 
   .right {
        width: 100%;
        padding: 5px 5px 5px 5px;
    }
}

.fwrp {
  /* Force wrap, esp. for long URLs: */
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* Footer: */
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #aaa;
   color: white;
   text-align: center;
}
.footer a {
   color: white;
}
@media screen and (max-width: 600px) {
   .footer {
   background-color: #fff;
   color: #999;
  } 
  .footer a {
   color: #999;
  }

}

/* FLEX- Container:  */

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: #aaa;
}

.flex-container > div {
  background-color: #aaa;
  width: 180px;
  height: 3em;
  margin: auto;
  text-align: center;
  line-height: 55px;
  font-size: 16px;
}
@media screen and (max-width: 600px) {
  .flex-container {
    background-color: #fff;
  }
 .flex-container > div {
  padding-top: 1em;
  background-color: #fff;
  line-height: 25px;
  font-size: 15px;
  }

}