/* Xolutions Stylesheet */

/* For Desktop computers */
.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%;}

@media only screen and (max-width: 768px) {
/* For Mobile phones */
[class*="col-"] {
width: 100%;
}
}

html {
height: 100%;
width: 100%;
margin-top: 5px;
margin-left: 0px;
background-image: url( );
background-position: top left;
background-repeat: no-repeat;
}

img {
max-width: 75%;
height: auto;
}

body, p, td, th {
min-height: 100%;
font-family: Tahoma;
font-size: 14px; 
}

h1 {
font-weight: bold;
color: #0A5393;
text-shadow: 2px 2px 2px #3366CC;
}

h2 {
color: #1A3E5D;
}

h3 {
color: #4B8DA8;
}

h4 {
color: #A1S6E2;
}

h5 {
color: #0A5393;
}

h6 {
color: #1A3E5D;
}

.p {
color: #4B8DA8;
}

/* Dotted border */
hr.dotted {
border: 0.25px dotted #999999;
width: auto;
}

/* HORIZONTAL NAVIGATION */
.horizontal-navbar body {
margin: 0;
padding: 0;
}

.horizontal-navbar h2, p {
margin: 10px;
}

.horizontal-navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0A5393;
}

.horizontal-navbar ul li {
float: left;
}

.horizontal-navbar ul li a {
display: block;
color: #F6F6F6;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.horizontal-navbar ul li a:hover {
background-color: #0A5393;
color: #D6D6D6;
}

/* PAGE LINKS */
a:link {
  color: #1A3E5D; /* Default color for unvisited links */
}

a:visited {
  color: #1A3E5D; /* Color for visited links */
}

a:hover {
  color: #4B8DA8; /* Color when the user hovers over the link */
}

a:active {
  color: #1A3E5D;; /* Color the moment the link is clicked */
}


#rcorners1 {
border-radius: 10px;
background:#0099AA;
padding: 1px; 
width: 100%;
height: auto;
}

#rcorners2 {
border-radius: 10px;
border: 1px dotted #999999;
padding: 1px; 
width: 100%;
height: auto;
}

#rcorners3 {
border-radius: 10px;
background: url();
background-position: left top;
background-repeat: repeat;
padding: 1px; 
width: 100%;
height: auto;
}

/* <p id="rcorners1"> */

.popup-box {
display: none; /* Hidden by default */
position: absolute;
background-color: #f1f1f1;
border: 1px solid black;
padding: 10px;
z-index: 1; /* Ensures the popup is on top of other content */
}

.hover-area:hover .popup-box {
display: block; /* Show the box when the parent area is hovered */
}

/* SlideShow Stylesheet */

* {box-sizing: border-box;}
body {font-family: Arial;}
.mySlides {display: none;}
img {vertical-align: top;}

.slideshow-container {
/* Horizontal offset, Vertical offset, Blur radius, Spread radius, Color */
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
padding: 10px; /* Essential for the shadow to have space to be seen */
}

/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}

/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active {
background-color: #ffffff;
}

/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

/* On smaller screens, decrease text size @media only screen and (max-width: 300px)*/
{
.text {font-size: 11px}
}