/************************* Vertical Tabs ******************************************/
* {box-sizing: border-box}

/* Style the tab */
.tab {
    float: left;
    border: 2px solid #727475;
    background-color: whitesmoke;
    width: 20%;
    height: 1200px;
}

/* Style the buttons that are used to open the tab content */
    .tab button {
        display: block;
        background-color: #F1F1F1;
        color: black;
        padding: 12px 12px;
        width: 100%;
        border: none;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 15px;
    }

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: darkgrey;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: lightsteelblue;
}

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 12px 12px;
    border: 1px solid #727475;
    width: 75%;
    border-left: none;
    height: 1200px;
    overflow-y: auto;
    color: #303132;
    background-color: white;
}

/************************** Flip Card *****************************************/

.flip-card {
  background-color: transparent;
  width: 380px;
  height: 180px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
    background-color: #5F906C;
    color: white;
    transform: rotateY(180deg);
}


/************************** Slide in Overlay from the Left *****************************************/
.SIOLcontainer {
    position: relative;
    width: 50%;
    width: 380px;
    height: 180px;
}

.SIOLimage {
    display: block;
    width: 100%;
    height: auto;
}

.SIOLoverlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #5571F9;
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: .5s ease;
}

.SIOLcontainer:hover .SIOLoverlay {
    width: 100%;
}

.SIOLtext {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    text-align: center;
}


/************************** Tabbed Image Gallery *****************************************/
/* The grid: equal columns that floats next to each other */
.TIGcolumn {
    float: left;
    width: 20%;
    padding: 10px;
}

/* Style the images inside the grid */
.TIGcolumn img {
    opacity: 0.8;
    cursor: pointer;
}

    .TIGcolumn img:hover {
        opacity: 1;
    }

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

/* The expanding image container */
.TIGcontainer {
    position: relative;
    display: none;
}

/* Closable button inside the expanded image */
.TIGclosebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
    background-color: #F44D22;
}


/************************** Image Gallery With Horizontal Scroll *****************************************/
div.IMGscroll-container {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    padding: 10px;
}

div.IMGscroll-container img {
    padding: 10px;
}