/* Add a black background color to the top navigation */
.topnav {
  background-color: #e7e7e6;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #7f7f7f;
  text-align: center;
  vertical-align: middle;
  padding: 14px 16px;
  text-decoration: none;
  font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
  font-size: 2.0em;
}


/* Add an active class to highlight the current page */
.active {
  background-color: #2c9c42;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  color: #7f7f7f;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;  
  font-size: 2.0em;
  border: none;
  outline: none;
  color: #7f7f7f;
  padding: 14px 16px;
  background-color: inherit;
/*  font-family: inherit; */
  margin: 15px auto auto auto;
}

.droptab {
  margin: 15px auto auto auto;
}

li.dropdown a  li.dropbtn a {
  vertical-align: middle; 
  margin: 0;
  padding: 0;
  text-decoration: none;
  background-color: #2c9c42;
  color: white;
}

li.dropdown li.dropbtn {
  display: inline;
  margin: 0;
  padding: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
  font-size: 2.0em;
  float: none;
  color: #7f7f7f;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  vertical-align: middle;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #2c9c42;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #2c9c42;
  color: white;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
    margin: 15px auto auto auto;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
  }
}



#logo {
    height: 80px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    #logo {
     height: 65px;
    }
}

#logo_bot {
    height: 80px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    #logo_bot {
     height: 50px;
    }
}


/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
  background-color: #e7e6e6;
  overflow: hidden;
/*  position: fixed; */
  bottom: 0;
  width: 100%;
}

/* Style the links inside the navigation bar */
.navbar a {
  font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: 1.75em;
  float: left;
  display: block;
  color: #7f7f7f;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  margin: 15px auto auto auto;
}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: #2c9c42;
  color: white;
}

/* Add a green background color to the active link */
.navbar a.activebot {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the navbar on small screens */
.navbar .iconbot {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.iconbot {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsivebot a.iconbot {
    position: fixed;
    right: 10px;
    bottom: 35px;
  }
  .navbar.responsivebot a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* -------------------  */
/* homepage.css section */
/* -------------------  */
.body_container {
/*    background-color: rgba(231, 230, 230, 0.95);  */
    margin: 0px;
}

* {
    box-sizing: border-box;
}
.mySlides {
    display: none;
/*      width: 1280px; */
     max-width: 100%;
}
.slide_image {
/*   width: 1280px;     */
     max-width: 100%;
     text-align: center;
}

/* Slideshow container */
.slideshow-container {
/*     width: 1280px; */
    max-width: 100%;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    opacity: 0.95;
}

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

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

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

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

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

/*.active {
  background-color:#e7e6e6;
} */

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

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

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

/* On smaller screens, decrease text size */
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .text {
    font-size: 0.75em;
  }
}


h1 {
    font-size: 2.0em;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
    font-weight: normal;
    text-align: center;
        color: #7F7F7F;
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    h1 {
     font-size: 1.75em;
    }
}

h2 {
    font-size: 1.75em;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
    font-weight: normal;
    text-align: center;
        color: #7F7F7F;
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    h2 {
     font-size: 1.5em;
    }
}

h3 {
    font-size: 1.5em;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
    font-weight: normal;
    text-align: center;
        color: #7F7F7F;
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    h3 {
     font-size: 1.25em;
    }
}

p {
    color: #7F7F7F;
    font-size: 1.5em;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
    font-weight: normal;
    text-align: center;
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    p {
     font-size: 1.25em;
    }
}


.centered {
    text-align: center;
}


.info {
    /* background-color: rgba(231, 230, 230, 0.95); */
    display: flex;
    justify-content: center;
    align-items: center;
/*    height: 450px; */
    width: 100%;
/*      max-width: 1400px; */
    margin: 20px 0px 20px 0px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .info {
     margin: 5px 0px 5px 0px;
    }
}

.info_text {
    width: 60%;
/*    height: 400px; */
    padding: 20px;
    text-align: center;
    justify-content: center;
    align-items: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .info_text {
     width: 85%;
     padding: 4px;
    }
}

.info_image {
    display: flex;
    max-width: 100%;
/*    height: 400px;*/
    margin: 10px auto 10px auto;
    padding: 10px;
    justify-content: center;
    align-items: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .info_image {
     width: 275px;
     margin: auto;
     padding: 0px;
    }
}

.info_header_icon {
    display: flex;
    max-width: 80%;
/*    height: 400px;*/
    margin: auto;
    padding: 0px;
    justify-content: center;
    align-items: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .info_header_icon {
     width: 95px;
     margin: auto;
     padding: 0px;
    }
}

.howto_image {
    display: flex;
    max-width: 80%;
/*    height: 400px;*/
    margin: auto;
    padding: 0px;
    justify-content: center;
    align-items: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .howto_image {
     max-width: 100%;
     margin: auto;
     padding: 0px;
    }
}

.social_media_icon {
    height: 50px;
    margin: 10px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .social_media_icon {
     height: 35px;
     margin: 5px;
    }
}

.device {
    display: flex;
    margin: 10px auto 10px auto;
    padding: 10px;
    max-width: 40%;
/*    margin: auto 50px auto 50px; */
/*    margin: 10px 10px 10px 10px; */
    justify-content: center;
    align-items: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .device {
     margin: 4px auto 4px auto;
     padding: 4px;
    }
}

.icons {
    display: flex;
    margin: auto;
    max-width: 80%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .icons {
     max-width: 80%;
    }
}

#HowToSignup {
    background: #2c9c42;
    color: white;
    margin: 10px 10px;
    padding: 10px 25px;
    border: 3px solid black;
    border-radius: 10px;
    text-align: center;
    font-size: 1.5em;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
}
#HowToSignup:hover {
    background: #7f7f7f;
}




.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9)
}

.modal-content{
margin: auto;
display: block;
width: 80%
max-width: 1500px;
/*   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  */
}

.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden
}

.modal-hover-opacity:hover {
opacity:0.60;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}


.close {
text-decoration:none;float:right;font-size:24px;font-weight:bold;color:white
}
.container1 {
width:200px;
display:inline-block;
}

.modal-content, #caption {

    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}


@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}



/* -------------------  */
/* about.css section    */
/* -------------------  */
body{
  background: url({% static '/images/Home_Background1.png' %}) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.body_container {
/*    background-color: rgba(231, 230, 230, 0.95);  */
    margin: 0px;
}

.info_container {
/*    background-color: rgba(231, 230, 230, 0.95); */
/*    border-top: solid white 0px; */
/*    border-bottom: solid white 0px; */
/* background-color: rgba(231, 230, 230, 0.95); */
    display: block;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0px 20px 0px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .info_container {
     margin: 5px 0px 5px 0px;
    }
}

#about_title {
        color: #7F7F7F;
    font-size: 2.5em;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
    font-weight: normal;
    margin: 20px 20px 20px 20px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    #about_title {
     font-size: 2.25em;
     margin: 5px 0px 5px 0px;
    }
}

.info_title {
        color: #7F7F7F;
    font-size: 2.5em;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
    font-weight: normal;
    text-align: center;
    margin: 20px 0px 20px 0px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .info_title {
     font-size: 2.25em;
     margin: 5px 0px 5px 0px;
    }
}

.about_text {
    color: #7F7F7F;
    text-align: center;
    font-size: 1.75em;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
    font-weight: normal;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .about_text {
     font-size: 1.5em;
     margin: 5px 0px 5px 0px;
    }
}


.centered {
    text-align: center;
}

.about_image {
    display: flex;
    max-width: 100%;
/*    height: 400px;*/
    margin: auto;
    padding: 0px;
    justify-content: center;
    align-items: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .about_image {
     max-width: 100%;
     margin: auto;
     padding: 0px;
    }
}

.about_image_icon {
    display: flex;
    max-width: 65%;
/*    height: 400px;*/
    margin: auto;
    padding: 0px;
    justify-content: center;
    align-items: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .about_image_icon {
     max-width: 80%;
     margin: auto;
     padding: 0px;
    }
}

.about_header_icon {
    display: flex;
    height: 150px;
/*    height: 400px;*/
    margin: auto;
    padding: 0px;
    justify-content: center;
    align-items: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .about_header_icon {
/*     max-width: 50%; */
     height: 150px;
     margin: auto;
     padding: 0px;
    }
}

.about_footer_icon {
    display: flex;
    height: 125px;
/*    height: 400px;*/
    margin: auto;
    padding: 0px;
    justify-content: center;
    align-items: center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .about_footer_icon {
     max-width: 80%;
     height: auto;
/*     height: 150px; */
     margin: auto;
     padding: 0px;
    }
}

.social_media_icon {
    height: 50px;
    margin: 10px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .social_media_icon {
     height: 35px;
     margin: 5px;
    }
}

#GZ_signup {
    background: #2c9c42;
    color: white;
    margin: 10px 10px;
    padding: 10px 25px;
    border: 3px solid black;
    border-radius: 10px;
    text-align: center;
    font-size: 2.0em;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
}
#GZ_signup:hover  {
    background: #7f7f7f;
}