/*This is the css style sheet for the Eiteog website

#32CD32 is Limegreen / Lime green / Crayola - Lime 

#FFFFFF is white

#7A991A is medium dark shade of yellow-green
#696969 HTML Dim Gray
*/


/*Using header h3.print for page breaks*/
@media print {h3.print {page-break-after:always;}}

body {margin-left:10%; margin-right:10%; background-image:url("https://www.eiteog.com/EiteogIcon.jpg");}

h1 {face:arial; color:#32CD32;}

h2 {face:arial; color:#32CD32;}

p {display:block; color:#696969; font-size:16px; font-family:"arial";text-align:justify;text-justify:inter-word;}

p.centre{display:block; color:#696969; font-size:16px; font-family:"arial";text-align:center;}

span {display:block; color:#fffff; font-size:16px; font-family:"arial";background-color:#fffff;border-radius: 25px; padding:4px}

em {font-family:"Times New Roman"; font-size:16px;}

ul {list-style-type:none; margin:0; padding:0;padding-top:6px;padding-bottom:6px; font-size:16px; font-family:"arial"; color:#696969;}

ul.summary{list-style-type:disc; font-size:16px; font-family:"arial"; color:#696969;}

ol {font-family: "Times New Roman", Times, serif; font-size:16px; font-family:"arial"; color:#696969;}


table, th, td { 
border: 1px solid black;
border-collapse: collapse;
} 


/*Hyperlinks for the general use*/
a.normal:link {font-weight:bold;color:#32CD32;}    /* unvisited link */
a.normal:visited {font-weight:bold;color:#32CD32;} /* visited link */
a.normal:hover {font-weight:bold;color:#7A991A;}   /* mouse over link */
a.normal:active {font-weight:bold;color:#32CD32;}  /* selected link */

a.download{
    display: block;
    width: 200px;
    position: relative;
    margin: 20px auto;
    text-align: center;
    background-color: #32CD32;
    border-radius: 20px;
    border: 2px solid #696969;
    color: #ffffff;
    text-decoration: none;
    padding: 16px 16px;
    z-index: 2;
}

a.calculator{
    display: inline;
    width: 200px;
    position: relative;
    margin: 20px auto;
    text-align: center;
    background-color: #32CD32;
    border: 2px solid #696969;
    border-radius: 20px;
    color: #ffffff;
    text-decoration: none;
    padding: 16px 16px;
    z-index: 1;
}

/*The menu style hyperlinks*/
a.menu:link, a.menu:visited {display:block; font-weight:bold; color:#ffffff; background-color:#32CD32; width:120px;
       text-align:center; padding:0px; text-decoration:none; text-transform:uppercase;}

a.menu:hover, a.menu:active {color:#ffffff;background-color:#32CD32;}

span.menu:link, span.menu:visited {float:center; display:inline; font-weight:bold; color:#fffff; background-color:#32CD32; border-radius: 25px; width:340px; 
       text-align:center; padding:4px; text-decoration:none;}

span.menu:hover, span.menu:active {background-color:#fffff;border-radius: 25px; padding:4px}

div.container {text-align:left;position:relative;}

div.center_div {margin-left:10%; margin-right:10%; width:80%; background-color:#ffffff; text-align:left;
       padding:8px; position:relative;}

div.menu_container {text-align:left; <img src="EiteogTitleJul2021.jpg" alt="Eiteog title">; background-color:#32cd32;}
/*z-index:-1;*/
div.menu_center_div { margin-left:auto; margin-right:auto; width:auto; background-color:#32cd32; text-align:right;
       padding:8px; position:relative;}

/* Dropdown Button */
div.dropbtn {
    background-color: #32cd32;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
div.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
div.dropdown-content {
    display: none;
    position: absolute;
    right: 10px;
    background-color: #32cd32;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    text-align:left;
}

/* Links inside the dropdown */
div.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align:left;
}

/* Change color of dropdown links on hover */
div.dropdown-content a:hover {background-color:#7A991A}

/* Show the dropdown menu on hover */
div.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
div.dropdown:hover .dropbtn {
    background-color: #32cd32;
} 

@media screen{
    div.divHeader{
    display:none;
    }
}

@media print{
    div.divHeader{
    position:fixed;
    top:0;
    }
}

@media print{
    div.divFooter{
    position:fixed;
    bottom:0;
    }
}

/*Adding popup to download free introductry UAV guide*/
.popup{
    background-color: #ffffff;
    width: 420px;
    padding: 30px 40px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-style: solid;
    border-radius: 8px;
    border-color: #32cd32;
    border-width: 5px;
    font-family: "Poppins",sans-serif;
    display: none; 
    text-align: center;
    z-index: 2
}
.popup button{
    display: block;
    margin:  0 0 20px auto;
    background-color: transparent;
    font-size: 30px;
    color: #ffffff;
    background: #32cd32;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 2
}
.popup h2{
  margin-top: -20px;
}
.popup p{
    font-size: 14px;
    text-align: justify;
    margin: 20px 0;
    line-height: 25px;
}

* {box-sizing:border-box}

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

/* Hide the images by default */
.mySlides1, .mySlides2 {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

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

.fa {
  padding: 5px;
  font-size: 20px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  /margin: 2px 2px;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}