body{
    margin:0px;
}

.whitebg{
    background:#fff;
}

.greyfont{
    color:#707070;
}

.whitefont{
    color:#fff;
}

.trajan-reg{
    font-family: trajan-pro-3, serif;
    font-weight: 100;
    font-style: normal;
}

.trajan-bold{
    font-family: trajan-pro-3, serif;
    font-weight: 700;
    font-style: normal;
}

.acumin{
    font-family: acumin-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.synthese{
    font-family: synthese, sans-serif;
    font-weight: 200;
    font-style: italic;
}

/* Hero Section */
#hero{
    background-image:url('images/hero.jpg');
    background-size:cover;
    background-position:center;
    height:100vh;
    max-height:1280px;
    position:relative;
}

.hero-title{
    max-width:670px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
    font-size:50px;
    line-height:1.3;
}

@media only screen and (max-width:767px){
    .hero-title{
        font-size:38px;
    }
}

/* Introduction */
.introcopy{
    max-width:775px;
    text-align:center;
    font-size:18px;
    margin:36px auto;
}

/* Animal Profiles */

.flexsect{
    display:flex;
    flex-direction:row;
    height:760px;
    position:relative;
    padding:62px 0;
}

.onethird{
    width:25%;
    height:100%;
    padding:36px;
    display:block;
    box-sizing:border-box;
}

.twothird{
    width:75%;
    height:100%;
    padding:0 36px;
    display:block;
    box-sizing:border-box;
}

.animal-img{
    width:100%;
    height:100%;
    min-height:720px;
    background-size:cover;
    background-position:center;
    display:block;
    box-sizing:border-box;
}

.animal-name{
    font-size:30px;
    position:relative;
}

.animal-name:before{
    position:absolute;
    height:7px;
    width:174px;
    background:#000;
    top:50%;
    transform:translatey(-50%);
    left:-220px;
    content:'';
}

.rightimg .animal-name:before{
    position:absolute;
    height:7px;
    width:174px;
    background:#000;
    top:50%;
    transform:translatey(-50%);
    left:unset;
    right:-220px;
    content:'';
}

.animal-info{
    line-height:1.5;
    margin:0;
    font-size:16px;
}

.animal-bio{
    font-size:16px;
}

.spacer{
    height:36px;
    display:block;
}

@media only screen and (max-width:1280px){
    .onethird{
        width:50%;
    }

    .twothird{
        width:50%;
    }
}

@media only screen and (max-width:960px){
.flexsect{
    height:auto;
    min-height:720px;
}


.onethird{
    width:33%;
    height:100%;
    padding:36px;
    display:block;
    box-sizing:border-box;
}

.twothird{
    width:66%;
    height:100%;
    padding:0 36px;
    display:block;
    box-sizing:border-box;
}

.animal-name{
    font-size:20px;
    position:relative;
}


.flexsect{
    display:flex;
    flex-direction:row;
    height:auto;
    min-height:720px;
    position:relative;
    padding:62px 0;
}

.animal-img.realign{
    background-position:20% center;
}

}

@media only screen and (max-width:767px){
.flexsect{
    flex-direction:column;
    height:auto;
    min-height:720px;
}

.onethird{
    width:100%;
    order:2;
}

.twothird{
    width:100%;
    order:1;
}

.right-img{
    order:0 !important;
}

.animal-img{
    width:100%;
    height:100%;
    min-height:480px;
    background-size:cover;
    background-position:center;
    display:block;
    box-sizing:border-box;
}

.animal-name{
    font-size:28px;
    max-width:280px;
}

.rightimg .animal-name:before, .animal-name:before{
    right:-520px;
    left:unset;
    width:500px;
}

.animal-info{
    line-height:1.5;
    margin:0;
    font-size:16px;
}

.animal-bio{
    font-size:16px;
}

.spacer{
    height:36px;
    display:block;
}
}

/* Maps */

.mapsect{
    margin:0 36px;
    background:rgba(0,0,0,0.2);
    box-sizing:border-box;
}

.owl-carousel{
    max-width:1280px;
    margin:auto;
    box-sizing:border-box;
}

.owl-dots{
    display:none;
}

.month{
    color:#fff;
    background:rgba(0,0,0,0.6);
    padding:18px 24px;
    font-size:24px;
    position:absolute;
    bottom:0px;
    left:50%;
    transform:translatex(-50%);
    min-width:240px;
    text-align:center;
    font-family: trajan-pro-3, serif;
    font-weight: 700;
    font-style: normal;
    margin:0;
}

.owl-prev{
    position:absolute;
    top:50%;
    transform:translatey(-50%);
    left:0px;
    background:rgba(255,255,255,0.6) !important;
    height:100%;
}

.owl-next{
    position:absolute;
    top:50%;
    transform:translatey(-50%);
    right:0px;
    background:rgba(255,255,255,0.6) !important;
    height:100%;
}

.owl-prev span, .owl-next span{
    font-size:120px;
    padding:24px !important;
    font-family: trajan-pro-3, serif;
    font-weight: 100;
    font-style: normal;
}

.owl-prev:hover, .owl-next:hover{
    background:rgba(255,255,255,1) !important;
}

@media only screen and (max-width:979px){

.owl-prev span, .owl-next span{
    font-size:48px;
    padding:14px !important;
    font-family: trajan-pro-3, serif;
    font-weight: 100;
    font-style: normal;
}

.month{
    color:#fff;
    padding:16px 18px;
    font-size:18px;
    background:rgba(0,0,0,0.4);
    min-width:120px;
}

}

@media only screen and (max-width:1366px){
    .owl-carousel{
        max-width:860px;
        margin:auto;
        box-sizing:border-box;
    }
}



/* Footer */
.foottitle{
    font-size:30px;
    text-align:center;
    margin-bottom:24px;
}

ul.share-buttons{
    list-style: none;
    padding: 0;
    margin: auto;
    width: auto;
    display: flex;
    max-width: 80px;
    justify-content: space-around;
}

.footlink{
    text-align:center;
    margin: 24px auto 36px auto;
    font-size:24px;
    color:#707070;
    text-decoration:none;
    display:block;
}

ul.share-buttons li{
  display: inline;
}

ul.share-buttons .sr-only{
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}