@charset "UTF-8";
/* Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
/*font-family: 'Oswald', 
sans-serif;
font-family: blockhead-plain, sans-serif;
font-family: blockhead-dark-side, sans-serif;
font-style: normal;
font-family: blockhead-black-face, sans-serif;
font-style: normal;
font-weight: 400;
font-family: blockhead-unplugged, sans-serif;
font-style: normal;
font-weight: 400;
*/
/*colors
dark blue = #2d457b
light blue = #72d0f4
grey = #363636
teal= #6ebbaa
*/

/* General For All
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.navbox {width:1024px;
        height: 106px;
        background-color:#ffffff; 
        margin: auto;
        padding-bottom: 20px;
}

nav {width: 1024px;
    height: 104px;
    font-family: blockhead-plain, sans-serif;
    font-size: 24px;
    text-align: center;
    padding-top: 15px;
    box-sizing: border-box;
    position: fixed;
    margin: auto;
    z-index: 1000;
}

nav a {color:#363636;
        text-decoration: none;
        margin: auto;
        box-sizing: border-box;
        padding: 30px;    
}

nav a:hover {text-decoration: underline;}


.column {width: 33%;
        float:left;
}

.logo a:hover {opacity: .7;}

header {width: 100%;
        height: 800px;
        margin: auto;
        background-image: url(images/mountainlandscape2.png);
        background-size:cover;
        text-align: center;
        background-position: center bottom;
}

.headline {width: 500px;
            height: 700px;
            margin: auto;
            box-sizing: border-box;
            padding-top: 120px;
}

h1 {font-family: blockhead-black-face;
    font-size: 100px;
    text-align: center;
    color:#363636;
    line-height: 80px;
    margin: auto;
    font-size: 90px;
    text-align: center;
    color:#363636;
}

.border {width: 200px;
        height: 70px;
        margin: auto;
        border-style: dotted;
        color: #ffffff;
        margin-top: -215px;
}

.border a {font-family: blockhead-dark-side, sans-serif;
      font-size: 36px;
      color: #ffffff;
        text-decoration: none;
}

.border a:hover{text-decoration: underline;}

h2 {font-family: blockhead-plain, sans-serif;
    color:#363636;
    font-size: 100px;
    text-align: center;
    margin-bottom: 25px;
    }
.leftarrow {float: left;}
.rightarrow {float: right;}


h3 {font-family: blockhead-plain, sans-serif;
    color:#6ebbaa;
    font-size: 100px;
    text-align: center;
    margin-bottom: 25px;
    
}

.products {width: 1024px;
            height: 1000px;
            margin: auto;
            margin-top: 20px;
}

.title {width: 1024px;
        height:200px;
        margin: auto;
        }

.slider {width:700px;
        height: 700px;
        margin: auto;
        }

.container {width: 1024px;
            height: 800px;
            margin: auto;
}



.arrow1 {width:200px;
        height:200px;
        float: right;
        margin-top: -250px;
        margin-right: 200px;}

.ourstory {width: 1024px;
            height: 700px;
            margin: auto;
}
.column1 {width:100px;
            float: left;
            }

.column2 {width:700px;
            margin:auto;
            font-family: blockhead-unplugged, sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 35px;
            text-align: center;
}

.column3 {width: 100px;
            float: right;
            margin-top: -125px;
}



h4 {font-family: blockhead-dark-side, sans-serif;
    color:#ffffff;
    font-size: 100px;
    text-align: center;
    margin-top: 45px;
    margin-bottom: 25px;}
.video {width:100%; position: relative;
            }
#overlay {
    background-color: #72d0f4;opacity: .8;
    position: absolute;/* Sit on top of the page content */
    
    width: 1050px; /* Full width (cover the whole page) */
    height: 600px; /* Full height (cover the whole page) */
    top:150px;
    margin: auto;
    left: 18%;
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

p {font-family: blockhead-unplugged, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    color: #ffffff;
    text-align: center;
}

.contactus {width: 100%;
            height: 600px;
            background-color:#2d457b;
            box-sizing: border-box;
            padding-top: 25px;
            margin-top: -45px;
            line-height: 5px;
}

.contactus a {text-decoration: none;
            font-family: blockhead-unplugged, sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 24px;
            color: #ffffff;
            text-align: center;
            }

.contactus a:hover {text-decoration: underline;}

h5 {font-family: blockhead-black-face, sans-serif;
    font-style: normal;
    color:#ffffff;
    font-size: 100px;
    text-align: center;
}

.columnredarrow {width: 1024px;
                    height:400px;
                    float:left;
                    margin-top: 150px;
    
}
.columnarrow {width:170px;
                height: 225px;
                float:right;
                margin-top: -100px;
}

footer {width: 100%;
        height: 260px;
        margin: auto;
}

.footerbox {width:1024px;
            height: 260px;
            margin: auto;}

.columnlogo {width:500px;
            height:200px;
            float: left;
            margin-top: 25px;
            
}

.socialmedia {width:500px;
                height: 200px;
                float: right;
                margin-top: 75px;
    
}

.socialmedia a:hover {opacity: .7;}






header img {width: 200px;
            mix-blend-mode: multiply;}



header {animation-delay: 2s;}
.one {animation-delay: 1s;}
.two {animation-delay: 2s;}
.three {animation-delay: 3s;}
.four {animation-delay: 4s;}
.five {animation-delay: 5s;}