/* CSS Document */

body
{
  font-family: Futura, sans-serif !important;
  text-align: center;
  color: #818078;
  background-color:#fcfcfa!important;
  padding:1em !important;
}
.white
{
  background-color:#FFFFFF;
}
.header
{
     position: fixed;
     top: 0;
	 width:100%;
}
.menu
{
    /*#006699*/
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 11%, rgba(14,110,159,1) 63%, rgba(0,102,153,1) 66%); 
}
a{ text-decoration:none;}
.img
{
   background-image:url('../img/f2.jpg');
   background-attachment:fixed; 
   background-zise:cover;
   opacity: .7;
}
.img2
{
   background-image:url('../img/f4.jpg');
   background-attachment:fixed; 
   background-zise:cover;
   opacity: .7;
}
.img3
{
   background-image:url('../img/f7.jpg');
   background-attachment:fixed; 
   background-zise:cover;
}
.img4
{
   background-image:url('../img/f8.jpg');
   background-attachment:fixed; 
   background-zise:cover;
   padding:5em 0 5em 0;
}
.hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  text-align: center;
  height: 1.5em;
  opacity: .5;
  &:before {
    content: '';
    // use the linear-gradient for the fading effect
    // use a solid background color for a solid bar
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
  }
  &:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;

    padding: 0 .5em;
    line-height: 1.5em;
    // this is really the only tricky part, you need to specify the background color of the container element...
    color: #818078;
    background-color: #fcfcfa;
  }
}
.fg{ color:#FFFFFF;}
ul li a{color:#FFF  !important; font-weight:bold;}
.ani-text
{
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}
.text-shadow
{
  color: white;
  text-shadow: 2px 2px 4px #2471A3;
}
.box
{
   box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px 0px;
}
.box1
{
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 2px 0px;
}
.box2
{
 box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px 0px, rgba(17, 17, 26, 0.05) 0px 8px 32px 0px;
}
p{ color:#666666;}
h5{ font-weight:500; color:#006699;}
h4{animation-timing-function:ease;}
@keyframes mymove {
  from {left: 10px;}
  to {left: 60px;}
}
.form-text
{
  text-transform:uppercase;
  text-shadow:#FF6633;
  font-size:2em;
  opacity: 1;
}
.card-bg{background-color:color:#fdf2e9 !important;}
#footer
{
   width:100%;
   bottom:0;
   left:0;
   border-top:.1em solid #2471A3;
   height:6em;
   }



* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

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

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

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

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

.active {
  background-color: #717171;
}

/* 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}
}

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

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

.active, .dot:hover {
  background-color: #717171;
}

/* 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) {
  .prev, .next,.text {font-size: 11px}
}
* {
  scrollbar-width: thin;
  scrollbar-color: #FFF #CCC;
}

/* Works on Chrome, Edge, and Safari */
		*::-webkit-scrollbar {
		  width:.5em;
		}
		
		*::-webkit-scrollbar-track {
		  background:#FFF;
		}
		
		*::-webkit-scrollbar-thumb {
		  background-color:#999999;
		  border-radius: 5em;
		  border: .5em solid #CCC;
		}