/* CSS */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../font/ppns/poppins-regular-webfont.woff2') format('woff2'),
         url('../font/ppns/poppins-regular-webfont.woff') format('woff');
    
  }
 
body,h1,h2,h3,h4,h5 {
  font-family: "Poppins", sans-serif;
}
body {
  font-size:16px;
}
.vd-half img{
  margin-bottom:-6px;
  margin-top:16px;
  opacity:0.8;
  cursor:pointer;
}
.vd-half img:hover{
  opacity:1;
}

/*------------------------
This is the rrr color
hex:#7FD5C6
rgb(127, 213, 198)
------------------------*/
.vda-rrr-teal {
  color: #000000;
  background-color: #7FD5C6;
}

.vda-rrr-hr {
  width:50px;
  border:5px solid #7FD5C6;
}


/*------------------------
This is the styling for a 
responsive YouTube video
------------------------*/
.embedtool {
  position: relative;
  height: 0;
  padding-top: 56%;
  overflow: hidden;
  max-width: 100%;
} 
.embedtool iframe, .embedtool object, .embedtool embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
} 
.embedtool .fluid-vids {
  position: initial !important
}

/*------------------------
Max width of paragraph 
for readability
------------------------*/
p {
  max-width: 80ch;
}

.vda-languages {
  font-weight: 200;
  font-size: 12px;
  font-style: italic;
}

.vda-subscript {
  color: #666666;
}

.vda-no-underline {
  text-decoration: none;
  border-bottom: none;
}

/*------------------------
Make google maps 
responsive
------------------------*/
.google-maps,
.youtube-vid {
  position: relative;
  padding-bottom: 75%; /* This is the aspect ratio */
  height: 0;
  overflow: hidden;
}
.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.youtube-vid iframe {
  position: absolute;
  top: 0;
  padding-left: 16px;
  padding-right: 16px;
  width: 100% !important;
  height: 100% !important;
}


/*------------------------
Nicer link underlines
source: 
https://www.disabilityrightswa.org/
------------------------*/
a {
  color: #000;
  border-bottom: 2px dotted #000;
  /*border-bottom: 2px dotted #0c4169;*/
  transition: .2s ease-out;
  text-decoration: none;
}



/*------------------------
Instagram follow button 
source: https://codepen.io/stanflint/pen/EpoKLR
------------------------*/
.link{
  text-decoration: none;
}

a.img {
  text-decoration: none;
}