@media (min-width: 992px){
    .typo-line{
        padding-left: 140px;
        margin-bottom: 40px;
        position: relative;
    }

    .typo-line .category{
        transform: translateY(-50%);
        top: 50%;
        left: 0px;
        position: absolute;
    }
}
.sebm-google-map-container {
  height: 300px;
}
#map{
    position:relative;
    width:100%;
    height: calc(100% - 60px);
    margin-top: 70px;
}

.places-buttons .btn{
    margin-bottom: 30px
}

.space-70{
    height: 70px;
    display: block;
}

.tim-row{
    margin-bottom: 20px;
}

.tim-typo{
    padding-left: 25%;
    margin-bottom: 40px;
    position: relative;
}
.tim-typo .tim-note{
    bottom: 10px;
    color: #c0c1c2;
    display: block;
    font-weight: 400;
    font-size: 13px;
    line-height: 13px;
    left: 0;
    margin-left: 20px;
    position: absolute;
    width: 260px;
}
.tim-row{
    padding-top: 50px;
}
.tim-row h3{
    margin-top: 0;
}

.default-rectangular-button {
	border: .5em solid #d2cfcf;
	font-size: 1em;
	line-height: 1.1em;
	color: #000;
	margin: auto;
	border-radius: 10%;
	height: 5em;
	width: 13em;
	position: relative;
	text-decoration: none;
	border-color: #d2cfcf;
}

.danger-rectangular-button {
	border: .5em solid #fcaea8;
	font-size: 1em;
	line-height: 1.1em;
	color: #ffffff;
	background-color: #f44336;
	margin: auto;
	border-radius: 10%;
	height: 5em;
	width: 13em;
	position: relative;
	text-decoration: none;
	border-color: #fcaea8;
}

.warning-rectangular-button {
	border: .5em solid #f7d29c;
	font-size: 1em;
	line-height: 1.1em;
	color: #ffffff;
	background-color: #ff9800;
	margin: auto;
	border-radius: 10%;
	height: 5em;
	width: 13em;
	position: relative;
	text-decoration: none;
	border-color: #f7d29c;
}

.active-circle-button-small-online {
	border: .1em solid #000;
	font-size: 1em;
	line-height: 1.1em;
	color: #000;
	background-color: #77DB34;
	margin: auto;
	border-radius: 50%;
	height: 15px;
	width: 15px;
	position: relative;
	text-decoration: none;
	border-color: #d2cfcf;
}

.active-circle-button-small-offline {
	border: .1em solid #000;
	font-size: 1em;
	line-height: 1.1em;
	color: #000;
	background-color: #f44336;
	margin: auto;
	border-radius: 50%;
	height: 15px;
	width: 15px;
	position: relative;
	text-decoration: none;
	border-color: #d2cfcf;
}

.active-circle-button-small {
	border: .3em solid #d2cfcf;
	font-size: 1em;
	line-height: 1.1em;
	color: #000;
	background-color: #77DB34;
	margin: auto;
	border-radius: 50%;
	height: 2em;
	width: 2em;
	position: relative;
	text-decoration: none;
	border-color: #d2cfcf;
}

.default-circle-button-small {
	border: .5em solid #d2cfcf;
	font-size: 1em;
	line-height: 1.1em;
	color: #000;
	margin: auto;
	border-radius: 50%;
	height: 2em;
	width: 2em;
	position: relative;
	text-decoration: none;
	border-color: #d2cfcf;
}

.danger-circle-button-small {
	border: .3em solid #d2cfcf;
	font-size: 1em;
	line-height: 1.1em;
	color: #000;
	background-color: #f44336;
	margin: auto;
	border-radius: 50%;
	height: 2em;
	width: 2em;
	position: relative;
	text-decoration: none;
    border-color: #d2cfcf;
    
    animation-name: flash;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	-webkit-animation-name: flash;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: flash;
	-moz-animation-duration: 2s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
}

.danger-circle-button {
	border: .5em solid #fcaea8;
	font-size: 1em;
	line-height: 1.1em;
	color: #ffffff;
	background-color: #f44336;
	margin: auto;
	border-radius: 50%;
	height: 7em;
	width: 7em;
	position: relative;
	text-decoration: none;
	border-color: #fcaea8;
}

.active-circle-button {
	border: .5em solid #d2cfcf;
	font-size: 1em;
	line-height: 1.1em;
	color: #000;
	background-color: #77DB34;
	margin: auto;
	border-radius: 50%;
	height: 7em;
	width: 7em;
	position: relative;
	text-decoration: none;
	border-color: #d2cfcf;
}

.default-circle-button {
	border: .5em solid #d2cfcf;
	font-size: 1em;
	line-height: 1.1em;
	color: #000;
	margin: auto;
	border-radius: 50%;
	height: 7em;
	width: 7em;
	position: relative;
	text-decoration: none;
	border-color: #d2cfcf;
}


.dangerBlinking-circle-button {
	border: .5em solid #fcaea8;
	font-size: 1em;
	line-height: 1.1em;
	color: #ffffff;
	background-color: #f44336;
	margin: auto;
	border-radius: 50%;
	height: 7em;
	width: 7em;
	position: relative;
	text-decoration: none;
	border-color: #fcaea8;
        
    animation-name: flash;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	-webkit-animation-name: flash;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: flash;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
}

@keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

@-moz-keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

    .onoffswitch {
        position: relative; width: 138px;
        -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-checkbox {
        display: none;
    }
    .onoffswitch-label {
        display: block; overflow: hidden; cursor: pointer;
        border: 2px solid #999999; border-radius: 13px;
    }
    .onoffswitch-inner {
        display: block; width: 200%; margin-left: -100%;
        transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block; float: left; width: 50%; height: 48px; padding: 0; line-height: 48px;
        font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
        box-sizing: border-box;
    }
    .onoffswitch-inner:before {
        content: "AUTO";
        padding-left: 7px;
        background-color: #77DB34; color: #FFFFFF;
    }
    .onoffswitch-inner:after {
        content: "MANUAL";
        padding-right: 7px;
        background-color: #EB4949; color: #FFFFFF;
        text-align: right;
    }
    .onoffswitch-switch {
        display: block; width: 50px; margin: -1px;
        background: #FFFFFF;
        position: absolute; top: 0; bottom: 0;
        right: 86px;
        border: 2px solid #999999; border-radius: 13px;
        transition: all 0.3s ease-in 0s; 
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
        right: 0px; 
    }
    
    
    #ticks {
        display: block;
        height: 300px;
        left: 40px;
        margin-bottom: -300px;
        position: relative;
        top: 30px;
        width: 800px;
        z-index: 0;
    }

    #ticks .tick {
        border-bottom: 1px solid #E7E7E7;
        height: 110px;
        position: relative;
        width: 700px;
    }
    #ticks .tick:first-child {
        border-top: 1px solid #E7E7E7;
    }
    #ticks .tick:last-child {
        border: 0;
    }

    #ticks .tick p {
        left: -3em;
        margin: 0 0 0 0.5em;
        position: absolute;
        top: -0.8em;
    }
    
    
.glass {
    margin: 30px auto;
    height: 450px;
    width: 200px;
    position: relative;
    display: block;
    border-style: none solid solid solid;
    border-width: 10px;
    border-color: lightgray;
    border-radius: 10px;
    z-index: 1;
}

.waterDTL {
    width: 100%;
    height: 10%;
    background-color: skyblue;
    position: absolute;
    bottom: 0;
}

.waterRTL {
    width: 100%;
    height: 10%;
    background-color: skyblue;
    position: absolute;
    bottom: 0;
}

#galDTL {
    position: absolute;
    margin-top: 145%;
    margin-left: 15%;
    text-align: center;
    font-size: 22px;
    color: black;
}

#galRTL {
    position: absolute;
    margin-top: 145%;
    margin-left: 15%;
    text-align: center;
    font-size: 22px;
    color: black;
}

#inchTL {
    position: absolute;
    margin-left: 20%;
     margin-top: 10%;
    text-align: center;
    font-size: 22px;
    color: black;
    z-index: 1;
}

#inchRTL {
    position: absolute;
    margin-left: 20%;
     margin-top: 10%;
    text-align: center;
    font-size: 22px;
    color: black;
    z-index: 1;
}

#pump1{
    position: absolute;
    margin-top: 220%;
    margin-left: 120%;
    width: 50px; height: 50px;
    z-index: 1;
}

#pump1Pulse{
    position: absolute;
    margin-top: 220%;
    margin-left: 120%;
    width: 50px; height: 50px;
    z-index: 1;
    -webkit-animation: pulse 1s linear infinite;
	animation: pulse 1s linear infinite;
}

#pump2{
    position: absolute;
    margin-top: 220%;
    margin-left: 120%;
    width: 50px; height: 50px;
    z-index: 1;
}

#pump2Pulse{
    position: absolute;
    margin-top: 220%;
    margin-left: 120%;
    width: 50px; height: 50px;
    z-index: 1;
    -webkit-animation: pulse 1s linear infinite;
	animation: pulse 1s linear infinite;
}

@-webkit-keyframes pulse {
 0% {
 -webkit-transform: scale(1, 1);
}
 50% {
 -webkit-transform: scale(1.1, 1.1);
}
 100% {
 -webkit-transform: scale(1, 1);
};
}

@keyframes pulse {
 0% {
 transform: scale(1, 1);
}
 50% {
 transform: scale(1.1, 1.1);
}
 100% {
transform: scale(1, 1);
};
}
/* All styling for bar graphs only when 800px or wider */
/*****************************************************************/

#fan{
    position: absolute;
    margin-top: 200%;
    margin-left: 35%;
    width: 50px; height: 50px;
    z-index: 1;
}

#fanactive{
    position: absolute;
    margin-top: 200%;
    margin-left: 35%;
    width: 50px; height: 50px;
    z-index: 1;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
    
//Water Drop
#waterDropBox
{
    position:absolute;
}



#waterDrop
{
    position:absolute;
    background-repeat:no-repeat;
    width:85px;
    height:87px;
    display:inline-block;
    top:0;
    margin-top:30px;
    margin-left:0px;
    background-image: url("../img/water_drop.gif");
    z-index: 1;
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

//End FAN

//Water Bubble
#bubbles { height: 100% }

#bubbles { padding: 50px 0 }

.bubble {
    width: 15px;
    height: 15px;
    background: #FFF;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    position: absolute;
    z-index: 1;
}

.x1 {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x2 {
    left: 120px;
     -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
    -webkit-animation: moveclouds 5s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 5s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -o-animation: moveclouds 5s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 {
    left: 80px;
     -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
    -webkit-animation: moveclouds 3s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 3s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 3s linear infinite, sideWays 4s ease-in-out infinite alternate;
}


.x4 {
    left: 40px;
     -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.35;
    -webkit-animation: moveclouds 4s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 4s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 4s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
    left: 65px;
     -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5; 
    -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}


.x6 {
    left: 70px;
     -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5; 
    -webkit-animation: moveclouds 9s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 9s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 9s linear infinite, sideWays 1s ease-in-out infinite alternate;
}

.x7 {
    left: 190px;
     -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5; 
    -webkit-animation: moveclouds 6s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 6s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 6s linear infinite, sideWays 1s ease-in-out infinite alternate;
}

.x8 {
    left: 110px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
    -webkit-animation: moveclouds 8s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 8s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 8s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x9 {
    left: 90px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
    -webkit-animation: moveclouds 4s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 4s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 4s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x10 {
    left: 40px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
    -webkit-animation: moveclouds 4s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 4s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 4s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x11 {
    left: 80px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
    -webkit-animation: moveclouds 7s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 7s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 7s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x12 {
    left: 120px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
@-webkit-keyframes moveclouds { 
    0% { 
        top: 400px;
    }
    100% { 
        top: 0px;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:40px;
    }
}

@-moz-keyframes moveclouds {     
    0% { 
        top: 400px;
    }

    100% { 
        top: 0px;
    }
}

@-moz-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:10px;
    }
}
@-o-keyframes moveclouds {
    0% { 
        top: 400px;
    }
    100% { 
        top: 0px;
    }
}

@-o-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:30px;
    }
}
//Water Bubble