@charset "utf-8";
/* CSS Document */

body {
    font-family: futura-pt, "Futura", "Trebuchet MS", Arial, sans-serif;
    font-size:16px;
    line-height:1.4;
    font-weight:300;
    letter-spacing: .8px;
}
p {font-weight:100;}
h4 {
    font-weight:400;
}
h3 {
    font-size:1.2em;
    font-weight:400;
}
h2 {
    font-size:1.4em;
    font-weight:400;
}
h1 {
    font-size:2.3em;
    font-weight:400;
    margin-bottom: 25px;
}
.fa.fa-facebook-official {font-size: 1.6em;margin-top:5px;}
.on {border-bottom: 3px #fff solid;}
.navbar-text a {color:#fff;font-size:1.2em;}
.navbar-fixed-top {
  top: -70px; /* you'll have to figure out the exact number here */
}
.navbar-default .navbar-toggle .icon-bar {background-color:#fff;}
.navbar-fixed-top, .navbar-fixed-bottom {
  position: relative; /* this can also be static */
}
.btn {border-radius: 0px; border-color:#000; padding: 15px 30px;   font-size: .7em;}
.btn-default {background-color:transparent; }

.section, .section-footer1 {
    padding:60px 0;} 
.section-footer1 {font-size: .7em;}
.section-footer {
    padding:30px 0; font-size: .7em;} 
    .section-slim {
    padding:30px 0;} 
.section-white {
    background-color:#fff;
}

.navbar-collapse {  background-color:#555;}
.section-grey {
    background-color:#eee;

}
.section-dark-grey {
    background-color:#555;

}
.section-grey a {
    color:#000;
    text-transform: uppercase;

}
.section-dark-grey {
    color:#fff;
    font-size: .7em;


}
.section-dark-grey a {
    color:#fff;
        text-transform: uppercase;
 
}
.section-black {
    background-color:#000;
}

.section-black {
    background-color:#ccc;
}
.navbar-brand {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: 0 auto;
     font-size:1em;

}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left:0;} 

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color:#fff; 
}
.navbar-default {background-color:transparent;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {border: 0;}
.navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a {
    color:#fff;
    height:auto;
}
.navbar-default .navbar-text {color:#fff;}
.navbar-nav>li>a {
    padding-top:40px;
    font-weight: 400;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color:#fff;
}
.nav>li>a:focus, .nav>li>a:hover {
    background-color:transparent;
}
.navbar {
    background-color: transparent;
    border: 0px;
    border-bottom: none;
    font-size: .7em;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    text-transform: uppercase;
    text-shadow: 0px 0px 8px rgba(150, 150, 150, 1);
      top:0px;
      margin-bottom:0;
}
.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;

}

.section-bee-hero {
    background-image: url(../img/bees-on-yellow-flowers.jpg);
    background-size: cover;
    height:75vw;
    top:0;
    position: fixed;
    left: 0;
    right: 0;
    position: absolute;
    z-index: -39;
}


.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.tilefour {
    transition: all 0.8s ease;
    height: 48vw;
    background-size: cover;
    color: #fff;
    display: table;
    background-position: center center;}

p.tile {color:#fff;font-size:1.2em; letter-spacing: 1px; text-shadow: 0px 0px 8px rgba(120, 120, 120, 1)}

a .tile {
    opacity: 1;
    transition: visibility 0s, opacity 0.5s linear;
    margin-top:10vw;
    border-radius: 0px;
    font-weight: 400;
}

 p.tile  {border-color: #fff;
    padding: 15px 30px;
    border:1px;
}

a:hover .tile {
    visibility: visible;
    opacity: 1;

}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .navbar-collapse {  background-color:transparent;}
.section-bee-hero {height:38vw;}
.navbar { height: 38vw;}
.tilefour {
        height:26vw;
    }
 
}


a:hover .tile1
{
    background-image:url('../img/get-hives.jpg'); opacity: .7;
}
a:hover .tile2{
    background-image:url('../img/honey-jars.jpg'); opacity: .7;
}
a:hover .tile3{
    background-image:url('../img/learn-bees.jpg'); opacity: .7;
}
a:hover .tile4{
    background-image:url('../img/get-bees.jpg'); opacity: .7;
}
a:hover .tile5{
    background-image:url('../img/contact.jpg'); opacity: .7;
}
a:hover .tile6{
    background-image:url('../img/about-us.jpg'); opacity: .7;
}
a:hover .tile7{
    background-image:url('../img/gallery.jpg'); opacity: .7;
}
a:hover .tile8{
    background-image:url('../img/facebook.jpg'); opacity: .7;
}


a .tile1    {
    background-image:url('../img/get-hives.jpg');
    background-size:cover;
    background-position:center center;
    padding:10px 0 30px 0;
    height:25vw;
    transition: visibility 0s, opacity 0.5s linear;
    
    
}
a .tile2    {
    background-image:url('../img/honey-jars.jpg');
    background-size:cover;
    background-position:center center;
    padding:10px 0 30px 0;
    height:25vw;
    transition: visibility 0s, opacity 0.5s linear;
    
    
}
a .tile3    {
    background-image:url('../img/learn-bees.jpg');
    background-size:cover;
    background-position:center center;
    padding:10px 0 30px 0;
    height:25vw;
    transition: visibility 0s, opacity 0.5s linear;
    
    
}
a .tile4    {
    background-image:url('../img/get-bees.jpg');
    background-size:cover;
    background-position:center center;
    padding:10px 0 30px 0;
    height:25vw;
    transition: visibility 0s, opacity 0.5s linear;
    
    
}

a .tile5    {
    background-image:url('../img/contact.jpg');
    background-size:cover;
    background-position:center center;
    padding:10px 0 30px 0;
    height:25vw;
    transition: visibility 0s, opacity 0.5s linear;
    
    
}
a .tile6    {
    background-image:url('../img/about-us.jpg');
    background-size:cover;
    background-position:center center;
    padding:10px 0 30px 0;
    height:25vw;
    transition: visibility 0s, opacity 0.5s linear;
    
    
}
a .tile7    {
    background-image:url('../img/gallery.jpg');
    background-size:cover;
    background-position:center center;
    padding:10px 0 30px 0;
    height:25vw;
    transition: visibility 0s, opacity 0.5s linear;
    
    
}
a .tile8    {
    background-image:url('../img/facebook.jpg');
    background-size:cover;
    background-position:center center;
    padding:10px 0 30px 0;
    height:25vw;
    transition: visibility 0s, opacity 0.5s linear;
    
    
}

/* Small devices (tablets, 768px and down) */
@media (max-width: 767px) {

    h1 {
        font-size:1.8em;
        font-weight:400;
    }
    .section {
        padding:40px 0;
    }
    .tile1 , .tile2, .tile3, .tile4, .tile5, .tile6, .tile7, .tile8  {
        height:100vw !important;
    }

a .tile {
        margin-top:40vw;
}
.section-bee-hero {
    background-image: url(../img/bees-on-yellow-flowers-xs.jpg);
 
 }
 .navbar-brand {padding:0;}
 .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {background-color: transparent;}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
    .navbar-nav>li>a {
        padding-top:79px;
    }
    .navbar-nav>li>a.instagram {
        padding-top:74px;
    }
    .navbar-nav>li>a.facebook {
        padding-top:74px;
    }
    .tile1 , .tile2, .tile3, .tile4, .tile5, .tile6, .tile7, .tile8 {
        height:50vw!important;
    }
a .tile {
        margin-top:20vw;
}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .navbar-nav>li>a {
        padding-top:40px;
    }
    .navbar-nav>li>a.instagram {
        padding-top:35px;
    }
    .navbar-nav>li>a.facebook {
        padding-top:35px;
    }
    .tile1 , .tile2, .tile3, .tile4, .tile5, .tile6, .tile7, .tile8 {
        height:25vw!important;
    }
    a .tile {
        margin-top:10vw;
}
}