@import "./reset.css";
@import "./fonts.css";
@import "./cookieConsent.css";


*,
:after,
:before {
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.clearfix:before,
.clearfix:after {
content:'';
display:table;
}
.clearfix:after {
clear:both;
}
* {
outline:none;
}
html {
font-size: 100%;
}
body {
position: relative;
font-size:1em;
line-height:1em;
font-family:'Oxygen','Helvetica Neue',Helvetica,Arial,sans-serif;
padding-top:5em;
background-color:#000;
-webkit-font-smoothing:antialiased;
text-rendering: geometricPrecision;
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
}
#preload01 { 
background: url(../images/logo-white.png) no-repeat -200em -2000em; 
}
 

/* desktop navigation ------------------------------------------------ */

nav.desktop {
position:fixed;
top:0;
left:0;
width:100%;
min-height:4em;
z-index:1000;
background-color:#000000;
}
nav.desktop ul {
margin:0 auto;
padding:0;
box-sizing: border-box;
text-align: left;
}
nav.desktop ul li {
display:inline-block;
position:relative;
font-family:'Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:1em;
line-height:6em;
font-weight:700;
text-align: center;
text-transform:uppercase;
margin:0;
margin-left:-.2em;
}
nav.desktop ul li a {
color:#ffffff;
display:block;
padding:0 3em;
}
nav.desktop ul li.icon {
width:20em;
background-image: url('../images/WA_Logo_Horizontal_WHITE.png');
background-repeat: no-repeat;
background-size: 15em auto;
background-position-x: 2.5em;
background-position-y: center;
}
/* nav.desktop ul li.icon:hover {
background-image: url('../images/logo-white.png');
} */
nav.desktop ul li.icon a {
color: transparent;
}
nav.desktop ul li a:active {
background-color:#d42e12;
color:#ffffff;
}
nav.desktop ul li:hover {
background-color:#d42e12;
color:#ffffff;
}
nav.desktop span:after {
font-family: 'FontAwesome';
content:'\f078';
padding-left:.2em;
color:rgba(255,255,255,.5);
}
/* second level */
nav.desktop ul li ul {
background-color:#000000;
width:100%;
display:none;
position:absolute;
top:98%;
left:0;
}
nav.desktop ul li:hover ul {
display:block;
overflow: hidden;
}
nav.desktop ul li ul li {
display: block;
text-align: left;
line-height: 300%
}
nav.desktop ul li ul a {
padding:0 2em;
white-space: nowrap;
color:#ffffff;
}
nav.desktop ul li:hover,
nav.desktop ul li ul a:hover,
nav.desktop ul li ul:not(:hover) li.active a {
background-color:#d42e12;
color:#ffffff;
}


/* mobile navigation ------------------------------------------------ */

div.mobile {
display:none;/* this hides mobile nav on desktop */
}

@media screen and (max-width: 61em) {
nav.desktop,
a.logo {
display:none;/* this hides desktop menu on mobile */
}
div.mobile {
display:block;
*zoom:1;
font-family:'Futura','Helvetica Neue',Helvetica,Arial,sans-serif;	
position:fixed;
height:6em;
top:0;
left:0;
box-sizing:border-box;
width:100%;
z-index:1000;
background-color:#000000;
background-image:url('../images/WA_Logo_Vertical_WHITE.png WA_Logo_Horizontal_WHITE.png');
background-repeat: no-repeat;
background-size: auto 70%;
background-position-x: 98%;
background-position-y: .8em;
}
div.mobile * {
box-sizing:border-box;
}
/* mobile nav button */
div.mobile a.button {
position:relative;
display:table;
vertical-align:middle;
padding: 0 4em;
font-size: 1.1em;
line-height:550%;
cursor:pointer;
}
div.mobile a.button span.menuText {
display:block;
color:#ffffff;
text-transform: uppercase;
font-weight:700;
}
div.mobile a.button.open span.menuText {
color:#ffffff;
}
div.mobile a.button span.menuText::before {
position: absolute;
top:0;
left:.6em;
font-family: 'FontAwesome';
content:'\f0c9';
font-size: 2em;
padding-right:.7em;
color:#d42e12;
}
div.mobile a.button.open span.menuText::before {
content:'\f00d';
color:#777;
}
/* mobile nav elements */
nav.mobile {
position: relative;
width:100%;
margin:0;
padding:0;
overflow:hidden;
background-color:#000000;
}
nav.mobile a {
font-size: 1em;
line-height: 300%;
color:#aaaaaa;
display: block;
width:100%;
box-sizing: border-box;
padding:0;
}
nav.mobile a:hover {
color:#ffffff;
}
nav.mobile ul {
position: relative;
margin:0;
padding:0;
}
nav.mobile ul li.icon {
display:none;
}
nav.mobile ul li {
display:block;
list-style:none;
text-transform: uppercase;
font-family:'Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: 700;
margin:0;
padding:0;
}
nav.mobile ul li:hover {
background-color:#d42e12;
}
nav.mobile ul li > a {
padding-left:1.5em;
}
nav.mobile ul li.parent.collapsed::after,
nav.mobile ul li.parent.open:after {
font-family: 'FontAwesome';
font-size: 1.2em;
content: '\f054';
position: absolute;
left:6em;
top:.6em;
color:#fff;
-webkit-transition: 300ms ease all;
-moz-transition: 300ms ease all;
-o-transition: 300ms ease all;
transition: 300ms ease all
}
nav.mobile ul li.parent.collapsed:hover::after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 300ms ease all;
-moz-transition: 300ms ease all;
-o-transition: 300ms ease all;
transition: 300ms ease all;
}
nav.mobile ul li.parent.open::after {
content: '\f078';
}
nav.mobile ul li.parent.open,
nav.mobile ul li.parent.open:hover {
background-color:#333;
}
nav.mobile ul li.parent.open a {
color:#ffffff;
}
nav.mobile ul li.parent.open ul a {
padding-left:3em;
}

}/* end mobile nav */


/* typography ------------------------------------------------ */

h1 {
font-family: 'Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 4.5em;
line-height: 110%;
/* line-height: 5rem; */
text-transform: uppercase;
letter-spacing: -.05em;
font-weight: 700;
margin:0;
padding: 0;
color:#ffffff;
}

h2,h3,h4,h5,h6 {
font-family: 'Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 1.5em;
line-height:120%;
font-weight:600;
color:#ffffff;
margin-bottom:.7em;
letter-spacing: -.01em;
}
h6 {
font-size: 1.2em;
line-height: 130%;
margin-bottom:.3em;
}

p,li {
font-family:'Oxygen','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:1.1em;
line-height:150%;
color:#ffffff;
margin-bottom:.7em;
}
ul li ul li {
font-size:inherit;
}
a {
font-size:inherit;
color:#fff;
text-decoration: none;
transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
}

a.button2 {
font-family: 'Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
display: block;
font-size: 1.2em;
color:rgba(255,255,255,.8);
font-weight: bold;
background: #d42e12;
background: linear-gradient(90deg, rgba(212,46,18,1) 0%, rgba(183,46,18,1) 100%);
border-radius: .2em;
text-align: center;
padding:1em;
text-decoration: none !important;
text-transform: uppercase;
-webkit-transition:  all 0.2s ease-in-out;
-moz-transition:  all 0.2s ease-in-out;
-o-transition:  all 0.2s ease-in-out;
-ms-transition:  all 0.2s ease-in-out;
transition:  all 0.2s ease-in-out;
}
a.button2:hover {
color:#ffffff;
background: #d42e12;
background: linear-gradient(90deg, rgba(183,46,18,1) 100%, rgba(212,46,18,1) 0%);
-webkit-transition:  all 0.2s ease-in-out;
-moz-transition:  all 0.2s ease-in-out;
-o-transition:  all 0.2s ease-in-out;
-ms-transition:  all 0.2s ease-in-out;
transition:  all 0.2s ease-in-out;
}


.intro-heading {
  margin-bottom: 1.2em; 
}

/* global positioning classes ------------------------------------------------ */

.hide {
display:none;
}
.left {
float:left;
}
.hideMobile {
display:inherit;
}
.mobileOnly {
display: none;
}

/* image exceptions ------------------------------------------------ */

img.hero {
position: relative;
display: block;
height:auto;
margin:0 auto;
width:90%;
z-index: 1;
}
img.hero.oversized {
width:150%;
margin-left:-50%;
}
img.waLogo {
width:13em; 
height:auto; 
margin:0 1.5em 0 0;
}
img.emtIcon {
width:5em; 
height:auto; 
margin:0 1em 0 0;
}
img.emtIcon {
width:5em; 
height:auto; 
margin:0 1em 0 0;
}

/* swap two hero images. activated above 35em found at: css3.bradshawenterprises(dot)com/cfimg/ ----------------*/

div.imgSwap2 img.lower {
display:none;/* hides the second image on small screens */
}

@media all and (min-width: 35em)
and (max-width: 120em) {

div.imgSwap2 {
position:relative;
height:35em;
width:100%;
margin:0 auto;
}
div.imgSwap2 img {
position:absolute;
left:0;
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
transition: opacity 5s ease-in-out;
}
div.imgSwap2 img.lower {
display: block;
}
div.imgSwap2 img.upper {
animation-name: swapper;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}
@keyframes swapper {
	0% {
	opacity:1;
	}
	45% {
	opacity:1;
	}
	55% {
	opacity:0;
	}
	100% {
	opacity:0;
	}
}

}/* end @media*/


/* section styles ------------------------------------------------ */

section {
position: relative;
width:100%;
box-sizing: border-box;
overflow: hidden;
z-index: 1;
}
section::before {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
z-index: -1;
}
/* section themes */

section.blue::before {
background-color: rgba(58,76,121,.8);
}
section.gold::before {
background-color: rgba(211,152,0,.8);
}
section.green::before {
background-color: rgba(77,96,25,.8);
}
section.red::before {
background-color: rgba(212,46,18,.8);
}
section#intro img.hero {
margin-top:1em;
}






/* background images ------------------------------------------------ */

div.bgImage {
position:absolute;
top:0;
left:0;
width:100%;
height:25em;
z-index: -2;
box-sizing: border-box;
padding:0;
}
div.bgImage.front {
z-index:0;
}
div.bgImage.short {
height:10em;
}
div.bgImage.press {
position:relative;
width:100%;
z-index: 0;
height:40em;
}




/* columns ------------------------------------------------ */

div.column {
position: relative;
float:left;
padding:0;
margin:0;
box-sizing: border-box;
clear:none;
}
div.column.left {
width:35%;
margin-right:2%;
}
div.column.right {
width:55%;
}



/* section articles ------------------------------------------------ */

div.content {
width:100%;
max-width:51em;
margin:0 auto;
padding:2em 3em;
box-sizing: border-box;
z-index: 1;
}
div.content iframe {
position: relative;
width:100%;
height:14em;
margin:0;
margin-bottom:1em;
background-color: transparent;
}
div.content h1 {
padding-top:.5em;
height:5.5em;
}
div.content h1.short {
padding-top: 0;
height:auto;
margin-bottom: 1em;
}
div.content h1 span {
display: block;
font-size: .22em;
line-height: 200%;
letter-spacing: .2em;
}
div.content h1.exception2019May {
text-transform: none;
font-size: 1.8em;
letter-spacing: -.02em;
line-height: 105%;
height:auto !important;
margin-bottom:.6em;
}


div.content a {
text-decoration: underline;
}
div.linkGroup {
position: relative;
font-size: 1em;
padding:1em 0;
}
div.linkGroup h3 {
font-size: 1.2em;
}
div.linkGroup p {
font-family:'Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: .9em;
line-height: 100%;
font-weight: 700;
text-transform: uppercase;
margin-bottom:0;
}
div.linkGroup p::before {
display:inline-block;
font-family: 'FontAwesome';
content:'\f054';
margin-right: .5em;
-webkit-transition:  all 0.2s ease-in-out;
-moz-transition:  all 0.2s ease-in-out;
-o-transition:  all 0.2s ease-in-out;
-ms-transition:  all 0.2s ease-in-out;
transition:  all 0.2s ease-in-out;
}
div.linkGroup p:hover::before {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-webkit-transition:  all 0.2s ease-in-out;
-moz-transition:  all 0.2s ease-in-out;
-o-transition:  all 0.2s ease-in-out;
-ms-transition:  all 0.2s ease-in-out;
transition:  all 0.2s ease-in-out;
}
div.linkGroup p a {
text-decoration: none;
line-height: 250%;
color:rgba(255,255,255,.7);
}
div.linkGroup p a:hover {
color:#ffffff;
}
div.download {
display: table;
width:100%;
margin-top:2em;
margin-bottom:2em;
box-sizing: border-box;
}
div.download a {
display: inline-block;
margin-right:.2em;
outline: none;
}
div.download a img {
width:10em;
height:auto;
}


/* tables ------------------------------------------------ */

table {
position: relative;
display: block;
width:100%;
color:#ffffff;
text-align: left;
}
table * {
border-collapse: collapse;
}
table tr {
display: table-row;
border-top: 1px solid rgba(255,255,255,.2);
border-collapse: collapse;
}
table th,
table td {
display: table-cell;
vertical-align: top;
padding:1em;
}
table th {
font-family:'Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
text-transform: uppercase;
font-weight: 700;
}
table td {
line-height: 130%;
}
table td ul {
position: relative;
margin:0;
padding:0;
}
table td ul li {
font-size: 1em;
margin-bottom: .3em;
line-height: 130%;
list-style: disc;
}

/* specs table */
table.specs {
margin-top:1em;
}
table.specs span {
display: block;
margin-bottom:.2em;
}
table.specs th {
line-height: 100%;
}
table.specs td.heading {
font-size: 1.2em;
}
table.specs tr th:nth-child(1) {
width:20%;
}
table.specs tr th:nth-child(2),
table.specs tr th:nth-child(3) {
width:40%;
}
table.specs tr td:nth-child(1) {
font-family:'Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
text-transform: uppercase;
font-weight: 700;
line-height: 1.3;
}
table.specs th img {
display: block;
width:50%;
min-width: 70px;
height:auto;
margin-left:-20%;
margin-bottom:.5em;
}









/* footer ------------------------------------------------ */
footer {
width:100%;
background-color:#000000;
box-sizing: border-box;
padding:0 2em 2em 2em;
}
footer p {
font-size:.8em;
color:#999;
margin:0;
margin-bottom:.7em;
text-align:center;
}
footer p:first-of-type {
margin-top:3em;
}
footer p:last-of-type {
margin-bottom:3em;
color:#444;
}
footer a {
color:#d42e12;
}
footer a:hover {
color:#fff;
}




/* social media icons ------------------------------------------------ */

ul.social {
position: relative;
font-size: 1em;
overflow: hidden;
margin:0 auto;
padding-top:1em;
box-sizing: border-box;
text-align: center;
}
ul.social::before {
content: 'Connect with Wildlife Acoustics';
color:#ffffff;
display: block;
padding-bottom:1.5em;
text-transform: uppercase;
font-size: .8em;
font-weight: bold;
letter-spacing: .3em;
}
ul.social li {
color:rgba(255,255,255,.5);
display: inline-block;
text-transform: uppercase;
font-size: .8em;
line-height: 100%;
font-weight: bold;
margin: 0 .5em;
}
ul.social li:hover {
color:rgba(255,255,255,1);
}
ul.social li a {
color:inherit;
display: inline-block;
text-decoration: none;
}
ul.social li a::before {
font-family: 'FontAwesome';
display: block;
font-size: 1.5em;
text-align: center;
margin-bottom:.6em;
}
ul.social li.facebook a::before {
content:'\f09a';
}
ul.social li.twitter a::before {
content:'\f099';
}
ul.social li.youTube a::before {
content:'\f167';
}
ul.social li.instagram a::before {
content:'\f16d';
}
ul.social li.blog a::before {
content:'\f040';
}




/* press section ------------------------------------------------ */


div.press h1 {
display: block;
width: 100%;
margin:.5em 0;
text-align: center;
}

div.press div.bx-wrapper {
position: relative;
display: block;
position: relative;
box-sizing: border-box;
width:100%;
margin:0 auto;
padding:0 3em;
}
div.press div.bx-wrapper div.bx-viewport {
position: relative;
display: block;
width:100%;
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider {
display: block;
box-sizing: border-box;
background: red;
margin:0;
padding:0;
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li {
box-sizing: border-box;
font-size: 1em;
line-height: 120%;
padding: 1em;
background-color: rgba(0,0,0,.4);
text-align: center;
-webkit-transition:  all 0.2s ease-in-out;
-moz-transition:  all 0.2s ease-in-out;
-o-transition:  all 0.2s ease-in-out;
-ms-transition:  all 0.2s ease-in-out;
transition:  all 0.2s ease-in-out;
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li iframe {
width:auto;
max-width: 20em;
height:auto;
box-sizing: border-box;
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li:hover {
background-color: rgba(0,0,0,.6);
-webkit-transition:  all 0.2s ease-in-out;
-moz-transition:  all 0.2s ease-in-out;
-o-transition:  all 0.2s ease-in-out;
-ms-transition:  all 0.2s ease-in-out;
transition:  all 0.2s ease-in-out;
}

div.press div.bx-wrapper div.bx-viewport ul.bxslider li img {
width:auto;
max-height:5em;
min-height: 4em;
margin:0 auto;
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li span {
display: block;
box-sizing: border-box;
width:100%;
margin:0 auto;
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li span.pub {
font-family: 'Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 1em;
line-height: 95%;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -.02em;
padding:1.5em 0 1em 0;
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li span.quote {
width:90%;
margin-bottom:1.5em;
font-style: italic;
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li span.quote::before {
content:open-quote;
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li span.quote::after {
content:close-quote;
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li span.cta {
font-family: 'Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: .9em;
text-transform: uppercase;
line-height: 100%;
font-weight: 700;
background-color: rgba(0,0,0,.4);
margin-top: 1.2em;
padding:.8em;
color:#ffffff
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li:hover span.cta {
background-color: rgba(212,46,18,.7);
}



/* controls wrapper */

div.press div.bx-wrapper div.bx-controls {
position: relative;
display: block;
width:100%;
box-sizing: border-box;
margin:0;
padding:0;
margin-top:1em;
font-size: 1.2em;
}

/* back/forth controls */
div.press div.bx-wrapper div.bx-controls div.bx-controls-direction {
position: absolute;
top:0;
width:100%;
font-size: 1.7em;
z-index: 2;
}
div.press div.bx-wrapper div.bx-controls div.bx-controls-direction a {
font-family: 'FontAwesome';
line-height: 100%;
color:rgba(266,255,255,.5);
}
div.press div.bx-wrapper div.bx-controls div.bx-controls-direction a:hover  {
color:#ffffff;
}
div.press div.bx-wrapper div.bx-controls div.bx-controls-direction a.bx-prev::before {
content:'\f137';
position: absolute;
top:0;
left:.5em;
}
div.press div.bx-wrapper div.bx-controls div.bx-controls-direction a.bx-next::before {
content:'\f138';
position: absolute;
top:0;
right:.5em;
}


/* pager dots */
div.bx-controls div.bx-pager {
position: relative;
display: block;
width: 100%;
text-align: center;
margin-bottom:10em;
}
div.bx-controls div.bx-pager div.bx-pager-item {
display: inline-block;
margin:.3em;
}
div.bx-controls div.bx-pager div.bx-pager-item a {
display: block;
width:1.2em;
height:1.2em;
background-color: rgba(0,0,0,.5);
text-indent: -9999999px;
border:.1em solid #999;
border-radius: 50%;
}
div.bx-controls div.bx-pager div.bx-pager-item a:hover {
border:.1em solid #fff;
}
div.bx-controls div.bx-pager div.bx-pager-item a.active {
background: red;
border:.1em solid #fff;
}




div.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top:0;
	height: 0;
	margin-bottom:2.4em !important;
	/* border:1px solid rgba(255,255,255,.5); */
}
div.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}