/*@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');*/

/*@media only screen and (min-width: 320px){
  h1{
      color:blue;
  }
}

@media only screen and (min-width: 768px){
  h1{
      color:green;
  }
}

@media only screen and (min-width: 980px){
  h1{
      color: yellow;
  }
} FOR REFERENCE*/

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .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 (min-width: 150px){
  .index{
    max-width: 90%;
    margin: 0 auto;
    padding-top: 10px;
}
.navbar{
  max-width: 90%;
  margin: 0 auto;
  padding-top: 50px;

  /*text-align: center;
  display: inline;*/
}
  .container{
      max-width: 90%;
      margin: 0 auto;
      padding-top: 10px;
      text-align: left;
      color: white;
      vertical-align: top;
      position: relative;
      color: #ffffff;
      z-index: 4; /* Show content above video */
  }

  h1,h2,h3,h4,h5,h6{
    color:rgb(219, 219, 219);
    font-size: "3";
    font-family: 'Lato', sans-serif;
}
p{
    line-height: 1.5;
    color: rgb(255, 255, 255);

    font-size: 13px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0.1em;
}
#Heading{
  font-size: 80%;
  font-weight: bold;
}
/*CSS for Resources*/

.Videos{
  padding: 50px 0% 50px 0%;
  align-content: center;
  text-align: start;
}
.textbox{
  padding: 0% 0% 0% 0%;
}
iframe{
  border: none;
  padding-top: 50px;
  display: block;
  margin: 0 auto;
  height: 400px;
  width: 100%;
}
}

@media only screen and (min-width: 1800px){
  .index{
    max-width: 40%;
    margin: 0 auto 0 auto;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .navbar{
    max-width: 50%;
  }
  .container{
    max-width: 70%;
    margin: 0 auto;
    padding-top: 40px;
    text-align: left;
    color: white;
    vertical-align: top;
    position: relative;
    color: #ffffff;
    z-index: 4; /* Show content above video */
  }

  h1,h2,h3,h4,h5,h6{
    color:rgb(219, 219, 219);
    font-size: "6";
    font-family: 'Lato', sans-serif;
}
p{
    line-height: 1.5;
    color: rgb(255, 255, 255);

    font-size: 16px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0.1em;
}
#Heading{
  font-size: 100px;
  font-weight: bold;
}
/*CSS for Resources*/

.Videos{
  padding: 0px 25% 100px 25%;
  align-content: center;
  text-align: start;
}
.textbox{
  padding: 0% 16% 0% 40%;
}
iframe{
  border: none;
  padding-top: 50px;
  display: block;
  margin: 0 auto;
  width: 1280px ;
  height: 720px;
}
footer{
  padding-bottom: 100px;
}
}


#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: white; /* Set a background color */
  color: black; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}



html{
    scroll-behavior: smooth;
}
body{
    background-image: url('StrathVeganLogoBackground.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    background: #222;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
}
/*header{
    background: #6ad13a
}*/
nav{
    float: right;
}
nav ul, ul{
    margin:0;
    padding:0;
    list-style:none;
}
nav li{
    display: inline-block;
    margin-left: 15;
    padding-top:24;
}
nav ul > li > a, nav ul > li > a:visited {
    /*color: rgb(255, 255, 255);*/
    text-decoration: none;
    text-transform: capitalize;
    font-size: 20px;
    display: inline-block;
    padding-left: 5px;
}
nav ul > li > a:active {
  color: rgb(255, 255, 255);
}
nav a:hover{
    color:rgb(255, 255, 255);
}
/*nav a::before{
    content:'';
    display: block;
    height: 5px;
    background-color: #a7a7a7;
}*/
nav a:hover::before{
    width: 50%;
    background-color: rgb(255, 255, 255);
}
a:hover{
    color:rgb(255, 255, 255);
    background-color:transparent;
    text-decoration: none;
    font-weight: bold;
}
a/*, a:visited*/ {
    background-color: transparent;
    text-decoration: none;
    color: rgb(160, 160, 160)
}
a:active{
    color: white;
}


.index>ul>li{
    color: #ddd;
}

li>a{
  /*color: whitesmoke;*/
  text-decoration: none;
  position: relative;
}
#Heading a:link{
    float: left;
    padding: 10px 0;
    color:grey;
}
#Heading a{
  color:white;
}
#Heading a:hover{
    color: rgb(160, 160, 160);
}

/*Neon light text*/
:root {
  --shadow-color: #FF9E9E;
  --shadow-color-light: white;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Archivo", sans-serif;
}

.logo {
  margin: calc(10vh - 40px) auto 0 auto;
  font-size: 65px;
  text-transform: uppercase;
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-weight: normal;
  display: block;
  height: auto;
  text-align: center;

  color: white;
  animation: neon 3s infinite;
}

@keyframes neon {
  0% {
    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
    0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
    0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
  }
  50% {
    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
    0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
    0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
  }
  100% {
    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
    0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
    0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
  }
}

/* for menu */

*,*::after,*::before{
  box-sizing: border-box;
}
.menu-btn {
  font-size: 15px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  /*background-color: rgb(31, 78, 41); 
  opacity: 0.5;
  /*color: white;*/
  padding: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border: none;
  width: 100%;
}
.dropdown-menu {
  position: relative;
  display: inline-block;
  
}
.menu-content {
  display: none;
  position: absolute;
  width: 100%;
  /*background-color:  linear-gradient(to right, rgb(63, 99, 79) 34%, rgb(13, 78, 27) 65%);*/
  min-width: 160px;
  z-index: 1;
}
nav{
  /*background: linear-gradient(to right, rgb(2, 34, 16) 34%, rgb(31, 78, 41) 65%);*/
  width: 100%;
}
.links,.links-hidden{
  display: inline-block;
   color: rgb(255, 255, 255);
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}
.links-hidden:hover,.links:hover,.dropdown-menu:hover .menu-btn {
  background-color:  black;
  opacity: .5;
}
.dropdown-menu:hover .menu-content {
  display: block;
  background-color: black;/*rgb(31, 78, 41);*/
  opacity: .5;
}
.veganhamburger {
  color: white;
  font-weight: bolder;
  display: none;
  font-size: large;
}
@media screen and (max-width: 880px) {
     nav a:not(:first-child) {
     display: none;
  }
  nav a.veganhamburger {
     float: right;
     display: block;
     padding: 12px;
  }
  .dropdown-menu{
     display: none;
  }
  nav.openNav a.veganhamburger {
     position: relative;
  }
  nav.openNav a {
     float: none;
     display: block;
     text-align: center;
  }
}
nav.openNav div.dropdown-menu{
  display: block;
  width: 100%;
}

*{
  margin: 0;
  padding: 0;
}

#map{
  height: 500px;
  width: 100%;
}

.jumbotron{
  position: relative;
  overflow: hidden;
  height: 600px;
}

#video-background{ 
 position: absolute;
 height: auto;
 width: auto;
 min-height: 100%;
 min-width: 100%;
 left: 50%;
 top: 50%;
 -webkit-transform: translate3d(-50%, -50%, 0);
 transform: translate3d(-50%, -50%, 0);
 z-index: 1;
}



.container-overlay{
  position: relative;
  width: 500px;
  float: left;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: black;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: .1;
}

.container-overlay:hover .overlay {
  bottom: 0;
  height: 100%;
  opacity: .5;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

label{
  color: white;
}

button:hover{
  color:white;
}