* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 2px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

html {
    font-family: "Montserrat", "arial", "Helvetica", sans-serif;
    line-height: 1.6;
    font-size: 14px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}
body {
    margin: 0px;
    text-align: center;
    color: yellow;
    animation-name: buttonFlash;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
#bd1 {
    text-align: center;
    color: yellow;
}
.backstretch {
    opacity: 0.6;
}
.sidePanel {
    background-color: black;
    top: 10px;
}
.header {
    background-color: lightblue;
    padding: 0px;
}
IMG.displayed {
    display: block;
    margin: 0 auto;
}
li {
    color: #E3C6B4;
}
 /* unvisited link */
a:link {
    color: black;
}
/* visited link */
a:visited {
    color: blue;
}
/* mouse over link */
a:hover {
}
/* selected link */
a:active {
    color: blue;
}
/* The animation code used to flash buttons*/
@keyframes buttonFlash {
    from {color: yellow;}
    to {color: red;}
}

.stdButton {
    background-color: black;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 8px 5px 8px 5px;
    text-align: center;
    text-decoration: none;
    overflow: auto;
    font-size: 14px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.38);
    transition-duration: 0.4s;
    border: 1px solid grey;
    margin-left: 0.4vw;
    margin-right: 0.4vw;
}
.stdButton:hover {
    background-color: grey; 
    color: black;
}
.stdButton:active {
    z-index:-100;
}
.chatButton {
    background-color: black;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    overflow: auto;
    font-size: 14px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.38);
    transition-duration: 0.4s;
    border: 1px solid grey;
    width: 110px;
    margin-left: 2%;
    margin-right: 2%;
}
.chatButton:hover {
    background-color: grey; 
    color: black;
}
.chatButton:active {
    z-index:-100;
}

li {
    color: black;
}

.zoomin img { 
    transition: all 2s ease; 
    overflow: hidden;
  } 
.zoomin img:hover { 
    transform: scale(3);
  } 

.zoomin2 img { 
    transition: all 2s ease; 
    text-align: center;
    display:block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  } 
.zoomin2 img:hover { 
    transform: translate(-1px,-100px) scale(4);
    position: relative;
    z-index: 9999993;
  } 

.zoomin-left img { 
    transition: all 2s ease; 
    text-align: center;
    display:block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  } 
.zoomin-left img:hover { 
    transform: translate(-120px,-100px) scale(7);
    position: relative;
    z-index: 9999993;
  } 

.zoomin-farleft img { 
    transition: all 2s ease; 
    text-align: center;
    display:block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  } 
.zoomin-farleft img:hover { 
    transform: translate(-180px,-100px) scale(7);
    position: relative;
    z-index: 9999993;
  } 

.zoomin-right img { 
    transition: all 2s ease; 
    text-align: center;
    display:block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  } 
.zoomin-right img:hover { 
    transform: translate(+200px,+150px) scale(7);
    position: relative;
    z-index: 9999993;
  } 

  table, th, td {
    color: black;
    border: 1px solid black;
    padding: 2px;
}
th {
    background-color:#ffdab9;
    font-size: 20px;
}
tr {
    font-size: 14px;
}
table {
    border-collapse: collapse;
}
.messagesDiv {
    color:white;
    font-size:14px;
    overflow:auto;
    padding:0px 5px 0px 8px;
    height:370px;
    text-align:left
}
.scrollRooms {
    height: 475px;
    overflow-y: scroll;
    text-align: center;
    margin-left: 2px;
}
#mobileMainPicText {
    display: none;
}
#first-column-mob {
    display: none;
}
#camRoomButtMob {
    display: none;
}

@media only screen and (max-width: 468px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    #mainPicText {
        display: none;
    }
    #mobileMainPicText {
        display: none;
    }
    #first-column {
        display: none;
    }
    #first-column-mob {
        display: block;
    }
    #picLikeThumb {
        display: none;
    }
    #camRoomButtMob {
        display: block;
    }
}