* { 
	-webkit-box-sizing: border-box; 
	        box-sizing: border-box;
}
html, body {
	min-height: 100%;
	color: #000;
    font-family: 'Open Sans', sans-serif;
}
	
body {
	font-size: 18px;
	text-rendering: optimizeLegibility;
}
	
body, ul, ol, dl {
	margin: 0;
}
article, aside, audio, 
footer, header, nav, section, video {
	display: block; 
	}

.yellow {
    color:#ffd230;
}

.gold {
    color:#b88917;
}

.brown {
    color:#694f00;
}

.oxford-b {
    color:#011936;
}

.yale-b {
    color:#0D3B66;
}

.gray-1 {
    color:#F3F5F7;
}

.gray-2 {
    color:#E7EAEE;
}

.purple {
    color:#222E50;
}
.purple-1 {
    color: #1A1423;
}

.purple-2 {
    color:#3D314A;
}

.alt-black {
    color:#0D1B1E;
}
	

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lato', sans-serif;
    font-weight:700;
    margin:0;
}

h1 {
    font-size:3rem;
}

h2 {
    font-size:3rem;
}

h3 {
    font-size:1.5rem;
}

	
p { 
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
    line-height: calc(1ex / 0.32);
} 


textarea { 
	resize: vertical;
}
 
table { border-collapse: collapse; }
td {
	padding: .5rem;
}

.honeybuzz-button {
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    padding:8px 12px;
    color:#fff;
    background:#000;
    text-decoration:none;
    font-family:'Roboto', sans-serif;
    font-weight:500;
    color:#ffd230;
}
	
img { 
	border: none;
	max-width: 100%;
    display:block;
}

	

	
sub, sup { 
	line-height: 0;
}


.honeybuzz-header {
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
}

.header-inner {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}

.header-left {
    width:200px;
}

.header-right {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}


.header-left a,
.footer-logo a {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:100%;
}

.header-left a img,
.footer-logo a img {
    width:100%;
    height:auto;
}

.container {
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    padding:50px;
}

.inner {
    width:auto;
    max-width:100%;
    margin:auto;
}



nav {
    font-family:'Roboto', sans-serif;
    font-weight:500;
}


nav ul {
    list-style:none;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin:0;
    padding:0;
}

nav li {
    border-right:1px solid #b88917;
    padding:5px 0;
}

nav li a {
    padding:5px 20px;
    text-decoration:none;
    color:#000;
}

nav li:first-of-type {
    border-left:1px solid #b88917;
}

nav li a:hover {
    background:#000;
    color:#ffd230;
    -webkit-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s;
}


.hero {
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center right;
    height:600px;
}

.home-hero {
    background-image:url('../images/shutterstock_1963613125-reverse-opt.jpg');
}

.contact-hero {
    background-image:url('../images/tamanna-rumee-FtJEat_S7Q4-unsplash-cropped-3.jpg');
}

.hero-inner {
    width:100%;
    margin:auto;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
}


.hero-heading h1 {
    font-size:80px;
    color:#fff;
}

.hero-subheading h2 {
    font-size:50px;
    color:#000;
}

.hero p {
    color:#4c3900;
    font-size:20px;
    max-width:60ch;
}

.container.intro {
    padding:50px 50px 0 50px;
}


.intro-inner {
    width:100%;
}


.intro-heading h2 {
    font-size:70px;
}

.big-p p {
    font-size:40px;
    color:#b88917;
    color:#694f00;
    max-width:30ch;
    line-height:1.5;
}

.med-p p {
    font-size:26px;
}

.mobile-intro-image {
    width:100%;
    margin-top:20px;
}

.mobile-intro-image img {
    width:100%;
    height:auto;
}



footer {
    width:100%;
    padding:20px 50px;
    background:#fff;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    background:#E7EAEE;
}

.footer-inner {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin:auto;
    width:100%;
}

.footer-left,
.footer-right {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}

.footer-left {
    width:200px;
}

.footer-right {
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.footer-logo {
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
}


.footer-title {
    font-family: 'Lato', sans-serif;
    font-weight:700;
    font-size:1.1rem;
}

.copyright {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    font-size:.8rem;
    font-family:'Roboto', sans-serif;
}

.the-arrow {
    width: 64px;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
  }
  
  .the-arrow.-left {
    position: absolute;
    top: 60%;
    left: 0;
  }
  
  .the-arrow.-left > .shaft {
    width: 0;
    background-color: #694f00;
  }
  
  .the-arrow.-left > .shaft:before,
  .the-arrow.-left > .shaft:after {
    width: 0;
    background-color: #694f00;
  }
  
  .light-arrow .the-arrow.-left > .shaft:before,
  .light-arrow .the-arrow.-left > .shaft:after {
    background-color: #694f00;
  }
  
  .the-arrow.-left > .shaft:before {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  
  .the-arrow.-left > .shaft:after {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  
  .the-arrow.-right > .shaft {
    width: 64px;
    -webkit-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
  }
  
  .the-arrow.-right > .shaft:before,
  .the-arrow.-right > .shaft:after {
    width: 8px;
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  
  .the-arrow.-right > .shaft:before {
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
  }
  
  .the-arrow.-right > .shaft:after {
    -webkit-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
  }
  
  .the-arrow > .shaft {
    background-color: #694f00;
    display: block;
    height: 1px;
    position: relative;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transition-delay: 0;
    -o-transition-delay: 0;
    transition-delay: 0;
    will-change: transform;
  }
  
  .light-arrow .the-arrow > .shaft {
    background-color: #694f00;
  }
  
  .the-arrow > .shaft:before,
  .the-arrow > .shaft:after {
    background-color: #694f00;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transition-delay: 0;
    -o-transition-delay: 0;
    transition-delay: 0;
  }
  
  .light-arrow .the-arrow > .shaft:before,
  .light-arrow .the-arrow > .shaft:after {
    background-color: #694f00;
  }
  
  .the-arrow > .shaft:before {
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;
  }
  
  .the-arrow > .shaft:after {
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
  }
  
  .animated-arrow {
    display: inline-block;
    color: #000;
    text-decoration: none;
    position: relative;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
      font-family:"Roboto", Sans-serif;
    text-decoration: none;
  }
  
  .animated-arrow:hover > .the-arrow.-left > .shaft {
    width: 64px;
    -webkit-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
    background-color: #694f00;
  }
  
  .animated-arrow.light-arrow:hover > .the-arrow.-left > .shaft {
    background-color: #694f00;
  }
  
  .animated-arrow:hover > .the-arrow.-left > .shaft:before,
  .animated-arrow:hover > .the-arrow.-left > .shaft:after {
    width: 8px;
    -webkit-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
    background-color: #694f00;
  }
  
  .animated-arrow.light-arrow:hover > .the-arrow.-left > .shaft:before,
  .animated-arrow.light-arrow:hover > .the-arrow.-left > .shaft:after {
    background-color: #694f00;
  }
  
  .animated-arrow:hover > .the-arrow.-left > .shaft:before {
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
  }
  
  .animated-arrow:hover > .the-arrow.-left > .shaft:after {
    -webkit-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
  }
  
  .animated-arrow:hover > .main {
    -webkit-transform: translateX(80px);
    -ms-transform: translateX(80px);
    transform: translateX(80px);
  }
  
  .animated-arrow:hover > .main > .the-arrow.-right > .shaft {
    width: 0;
    -webkit-transform: translateX(200%);
    -ms-transform: translateX(200%);
    transform: translateX(200%);
    -webkit-transition-delay: 0;
    -o-transition-delay: 0;
    transition-delay: 0;
  }
  
  .animated-arrow:hover > .main > .the-arrow.-right > .shaft:before,
  .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
    width: 0;
    -webkit-transition-delay: 0;
    -o-transition-delay: 0;
    transition-delay: 0;
    -webkit-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
  }
  
  .animated-arrow:hover > .main > .the-arrow.-right > .shaft:before {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  
  .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  
  .animated-arrow > .main,
  .static-arrow > .main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
  }
  
  .animated-arrow > .main > .text,
  .static-arrow > .main > .text {
      color:#b88917;
    margin: 0 16px 0 0;
    line-height: 1;
    font-weight:500;
    font-size:30px;
    text-transform:uppercase;
  }
  
  .animated-arrow > .main > .the-arrow,
  .static-arrow > .main > .the-arrow {
    position: relative;
  }

  .intro-contact {
    margin-top:55px;
    padding-top:55px;
    border-top:1px solid;
    max-width:880px;
  }

  .contact-container {
    padding:50px 50px 0 50px;
  }


  .contact-duo {
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
        -ms-flex-direction:column-reverse;
            flex-direction:column-reverse;
  }

  .contact-image {
    width:100%;
    position:relative;
  }

  .contact-image img {
    width:100%;
    height:auto;
  }

  .contact-form {
    width:100%;
  }







@media (max-width: 767px) {
    .honeybuzz-header {
        padding:0;
    }
    .header-inner {
        width:100%;
    }
    .header-left {
        width:60%;
        padding:10px;
    }

    .header-left a {
        width:90%;
    }

    .header-right {
        -webkit-box-flex:unset;
            -ms-flex:unset;
                flex:unset;
        -webkit-box-pack: unset;
            -ms-flex-pack: unset;
                justify-content: unset;
        -webkit-box-align:unset;
            -ms-flex-align:unset;
                align-items:unset;
        width:40%;
        background:#000;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
    }



    nav {
        padding:10px;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        width:unset;
        -webkit-box-flex:1;
            -ms-flex:1;
                flex:1;
    }



    nav ul {
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column;
        margin:auto;
        font-size:4vw;
        
    }

    nav li a {
        color:#fff;
        padding:10px 0;
        text-decoration:underline;
        -webkit-text-decoration-color:#b88917;
                text-decoration-color:#b88917;
        text-decoration-thickness: 2px;
    }


    nav li {
        border:none;
    }
    nav li:first-of-type {
        border:none;
    }

    .hero {
        height:auto;
    }

    .hero p {
        max-width:100%;
    }

    .container {
        padding:30px 20px;
    }
    .container.intro {
        padding:30px 20px 0 20px;
    }
    h2 {
        font-size:2rem;
    }

    .hero-heading h1 {
        font-size:16vw;
    }

    .hero-subheading h2 {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column;
        font-size:11vw;
    }

    .hero p {
        font-size:5vw;
    }


    .intro-heading h2 {
        font-size:12vw;
    }

    .big-p p {
        font-size:7vw;
        line-height:1.4;
    }

    .med-p p {
        font-size:5vw;
    }

    .intro-contact {
        padding-top:35px;
        margin-top:35px;
        width:100%;
        max-width:100%;
    }



    .animated-arrow > .main > .text, .static-arrow > .main > .text {
        font-size:6vw;
    }

    footer {
        padding:20px;
    }

    .footer-inner {
        width:100%;
        -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
        text-align: center;
    }

    .footer-left,
    .footer-right {
        width:100%;
    }

    .footer-left {
        padding-bottom:20px;
        margin-bottom:20px;
        border-bottom:solid 2px #fff;
    }

    .footer-right {
        -webkit-box-flex:unset;
            -ms-flex:unset;
                flex:unset;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .footer-logo {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }


    .footer-logo a {
        width:200px;
    }

    .footer-title {
        font-size:.9rem;
        margin-bottom:4px;
    }
    .copyright {
        padding:0;
        text-align: center;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    }

    .container.contact-container {
        padding:30px 20px 0 20px;
    }

    .contact-form iframe {
        max-width:100%;
    }

    .contact-image {
        margin-top:20px;
    }

    .contact-image img {
        width:80%;
        margin:0 auto;
    }


}


@media (min-width: 768px) {
    .honeybuzz-header {
        padding:20px 35px;
    }
    .header-inner {
        width:100%;
    }
    nav li a {
        padding:5px 10px;
    }
    nav {
        font-size:.9rem;
    }

    .contact-image img {
        width:400px;
        margin:auto;
    }

    .contact-form {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

}

@media (min-width: 768px) and (orientation: portrait) {
  }

@media (min-width:1100px) {
    .header-inner {
        width:1000px;    
    }
    .header-left {
        width:200px;
    }
    nav {
        font-size:.9rem;
    }
    nav li a {
        padding:5px 20px;
    }

    .honeybuzz-header {
        padding:20px 50px;
    }

    .footer-inner {
        width:1000px;    
    }

    .contact-duo {
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
            -ms-flex-direction:row;
                flex-direction:row;
        width:1000px;
        margin:0 auto;
      }

      .contact-image {
        width:unset;
        -webkit-box-flex:1;
            -ms-flex:1;
                flex:1;
      }
    
      .contact-image img {
        position:absolute;
        width:100%;
        height:100%;
        -o-object-fit: contain;
           object-fit: contain;
        -o-object-position:bottom left;
           object-position:bottom left;
      }
    
      .contact-form {
        width:auto;
        display:block;
        -webkit-box-pack:unset;
            -ms-flex-pack:unset;
                justify-content:unset;
      }


}

@media (min-width:1200px) {
    p {
        max-width:60ch;
    }
    .header-inner {
        width:1100px;    
    }

    .hero-inner {
        width:1100px;
    }

    .footer-inner {
        width:1100px;    
    }

    .container.intro {
        padding:50px;
    }

    .intro {
        background-image:url('../images/shutterstock_250081639-reverse-4.jpg');
        background-size:50% auto;
        background-repeat:no-repeat;
        background-position:bottom left;
    }

    .intro-inner {
        margin-left:auto;
        width:50%;
        margin-top:70px;
        margin-bottom:70px;
    }

    .intro-heading h2 {
        font-size:65px;
    }
    
    .big-p p {
        font-size:36px;
    }
    
    .med-p p {
        font-size:22px;
    }

    .mobile-intro-image {
        display:none;
    }

    .contact-duo {
        width:1100px;
      }

}

@media (min-width:1300px) {
    .header-inner {
        width:1200px;    
    }

    nav {
        font-size:1rem;
    }

    .hero-inner {
        width:1200px;
    }

    .intro-inner {
        min-height:60vh;
        margin-top:80px;
        margin-bottom:80px;
    }


    .footer-inner {
        width:1200px;    
    }

    .contact-duo {
        width:1200px;
    }

}

@media (min-width:1350px) {
    .intro {
        background-image:url('../images/shutterstock_250081639-reverse-5.jpg');
        background-size:45% auto;
        background-position:bottom left;
    }

    .intro-inner {
        min-height:60vh;
        margin-top:80px;
        margin-bottom:80px;
        width:55%;
        padding-left:10px;
    }
}

@media (min-width:1450px) {
    .intro {
        background-size:40% auto;
    }

    .intro-inner {
        width:60%;
    }
}

@media (min-width:1600px) {
    .intro-heading h2 {
        font-size:70px;
    }
    
    .big-p p {
        font-size:40px;
    }
    
    .med-p p {
        font-size:26px;
    }
}

@media (min-width:1800px) {
    .intro {
        background-position:top left;
    }

}

@media (min-width:2000px) {
    .intro-inner {
        padding-left:0;
    }
}
