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


body {margin:0px; padding: 0px; font-size: 18px; line-height: 26px; font-weight: 400; color: #4A4A4A; font-family: 'Raleway', sans-serif;}
* {box-sizing: border-box;}
html, body
{
    height: 100%;
}
h1 {font-size: 60px; line-height: 66px; font-weight: 800; color: #FFF; margin: 60px 0px 40px 0px;}
h2 {font-size: 40px; line-height: 47px; font-weight: 500; color: #006F51; margin: 0px auto 40px auto;}
h3 {font-size: 18px; line-height: 24px; font-weight: 800; color: #006F51; margin: 30px auto 40px auto; text-transform: uppercase;}

@media (max-width: 500px)  {
    h1 {font-size: 40px; line-height: 46px;  }
    h3 {margin: 15px 0px 45px 0px;}
}

p {font-size: 18px; line-height: 35px; margin: 0px auto 40px auto; max-width: 1060px;}
a {text-decoration: none;}
img {border: none; display: block;}
sup {font-size: 16px;}
ul {text-align: left;}
li {margin-bottom:20px; }

/*      COMMON ELEMENTS    */

section {width: 100%;  position: relative; }
.container {width: 100%; max-width: 1440px; margin: 0px auto; }
.content {width: 100%;  padding: 80px 5% 70px 5%; text-align: center; position: relative; }

.white {color: #FFF;}
.tan {background-color: #e9e8e2;}
.gray {color: #4A4A4A;}
.button { background-color: #006F51; color: #FFF; font-size: 12px; line-height: 54px; height: 54px; font-weight: 800; letter-spacing: 3px; border-radius: 8px;padding: 0px 62px 0px 14px; display: inline-block; background-image: url("images/arrow-circle.png") ; background-repeat: no-repeat; background-size: 42px 31px; background-position: right center; border: none !important; }
.button:hover { background-color: #065c45;}
.line-break {width: 100%; max-width: 200px; height: 10px; background-color: #5B6670; display: block; margin:0px auto 40px auto; }
.myflex {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }
.halves { width: 50%; display: inline-block; vertical-align: top;}
.eighths {width: 25%;}

@media screen and (max-width: 920px) {
    .halves { width: 100%; display: inline-block; max-width: none !important;}
}
@media screen and (max-width: 720px) {
    .eighths {width: 50%;}
}


/*   HEADER   */

header {width: 100%; background-color: #026a4f; opacity: 0.95; position: absolute; top: 0px; z-index: 10; min-height: 128px;}

/*
#logo-shell {display: table; height: 128px; width: 60%; max-width: 341px; }
#logo {float: left; height: 128px; margin:  0px; display: table-cell; vertical-align: middle;}
*/

.contact {float: right; margin:22px 0px 0px 0px; }
.contact a {font-size: 12px; line-height: 16px; color: #fff; font-weight: 700; display: inline-block; float: left;}
.contact a:hover {color: #C7DC6D;}
#phone { background: url("images/icon-phone.png") 0px 0px/16px 16px no-repeat ; padding: 0px 0px 0px 20px; color: #FFF; }
#phone:hover {color: #C7DC6D; background: url("images/icon-phone-white.png") 0px 0px/16px 16px no-repeat ; }
#email {margin-left: 14px; width: 24px; height: 16px; background: url("images/icon-email.png") 0px 0px/16px 16px no-repeat ; }
#email:hover { background: url("images/icon-email-white.png") 0px 0px/16px 16px no-repeat ;}

.menu {float: right; clear: right; margin: 38px 0px 0px 0px; display: block; border-radius: 4px;}
.menu a {color: #fff; font-size: 12px; line-height: 30px; font-weight: 800; letter-spacing: 2px; padding: 0px 23px; cursor: pointer;}
.menu a:hover {color: #C7DC6D;}
.menu .selected, #mobile-dropdown .selected, .dropdown-content .selected {color: #C7DC6D !important; cursor: default !important;}

/* DROPDOWN */
.dropdown { position: relative; display: inline-block;}

.dropdown-content {
  display: none; position: absolute; background: url("images/dropdown-bg.png") no-repeat top center;  min-width: 130px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 20px 8px 8px 8px; z-index: 1; top: 28px; left: -9px; text-align: center;
}
.dropdown-content a {color: #006F51; font-size: 10px; line-height: 14px; text-transform: uppercase; text-align: center; font-weight: 800; padding: 4px 0px; display: block;}
.dropdown-content a:hover {color: #5B6670;}

.dropdown:hover .dropdown-content {
  display: block;
}

.myHamburger {display: none; position: absolute; top:40px; right: 20px;  }
.hamburger { cursor: pointer; width: 35px;  height: 5px; background-color: #C7DC6D;  margin: 6px 0;}
#mobile-dropdown {display: none; position: absolute; top: 127px; left: 0px; height: 100vh; background-color: rgba(0, 0, 0, 0.8);}
#mobile-dropdown  a {width: 100%; color: #FFF; background-color: #026a4f; display: inline-block; font-size: 24px; font-weight: 700; line-height: 60px; border-bottom: solid 1px #fff; letter-spacing: 4px; text-transform: uppercase;}
#mobile-dropdown  a:hover { color: #FFF; background-color: #C7DC6D;  }

@media screen and (max-width: 920px) {
    .myHamburger{ display: block;}
    .menu, .contact {display: none;}
     
}

/*    HERO   */

#myhero {background-position: center center; background-size: cover; background-repeat: no-repeat; }
.hero-box {width: 100%; max-width: 770px; position: relative; margin: 225px 0px 150px 0px; left: 0px; padding:0px 7% 40px 5%;  background-color: rgba(0, 0, 0, 0.8); display: inline-block; text-align: left;}

@media (max-width: 500px)  {
    .hero-box {margin: 128px 0px 120px 0px;}
}
.hero-home {margin-top: 128px;}


/*    FOOTER        */

.contact-box {background-color: #fff; box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); padding: 38px 0px 60px 0px; width: 100%; max-width: 950px; margin: auto;}
.contact-content {width: 90%; max-width: 620px; display: inline-block; }

.form-fields { background-color: #f2f2f3; font-size: 10px; line-height: 30px; color: #4A4A4A; font-weight: 500; border-radius: 8px; width:46%;  border: none; padding:10px 20px; margin-bottom: 20px; float: right; text-align: left; height: 52px; display: table;}
.form-fields div {display: table-row;}
.form-fields div div {display: table-cell;}
.form-fields:first-of-type {margin-right:7%; float: left;}
label {width: 40px; display: table-cell;}
input {width: 100%; display: inline-block; background-color: #f2f2f3; border: none; line-height: 30px; height: 32px; padding: 0px 10px;}
input:focus, textarea:focus { outline: none !important;  border:1px solid #e6e6e8;  box-shadow: 0 0 10px #e6e6e8;}
.message {height: 140px; float: left; width: 70%; display: inline-block;}
.message label {width: 100%;}
textarea {width: 100%; float: left; background-color: #f2f2f3; border: none; line-height: 16px; padding: 0px 10px; font-size: 10px; resize: none; }

.input-field { background-color: #f2f2f3; font-size: 10px; line-height: 16px; color: #4A4A4A; font-weight: 500; border-radius: 8px; width:46%;  border: none; padding: 20px; margin-bottom: 20px; float: right; }
.input-field:first-of-type {margin-right:7%; float: left;}
.footer-button {float: right; margin-top: 87px;}

.footer {margin: 50px auto; overflow: auto; text-align: left; width: 100%; max-width: 950px;}
.footer div {float: left; color: #fff; font-size: 12px; line-height: 14px;}
.footer p {font-size: 12px; line-height: 17px; margin-top: 0px; margin-bottom: 0px;}
.footer .footer-head {font-size: 17px; line-height: 22px; font-weight:700; margin-top: 0px; margin-bottom: 10px;}
.social {float: left; margin-right: 11px; width: 21px; height: 21px; background-size: 21px 21px; background-repeat: no-repeat;}
#facebook {background-image: url(images/icon-facebook.png);}
#facebook:hover {background-image: url(images/icon-facebook-green.png);}
#twitter {background-image: url(images/icon-twitter.png);}
#twitter:hover {background-image: url(images/icon-twitter-green.png);}
#linkedin {background-image: url(images/icon-linkedin.png);}
#linkedin:hover {background-image: url(images/icon-linkedin-green.png);}

#headquarters {width: 48%; margin-right: 3%;}
#social {width:17%;  margin-right: 5%;}
#legal {width: 48%;  float: right}
#legal p {display: table; float: right;}

@media screen and (max-width: 840px) {
    #headquarters, #social, #legal, #legal p {width: 100%; margin-bottom: 20px; text-align: left; float: left;}
}
@media screen and (max-width: 700px) {
    .form-fields {width: 100%; margin-right: 0px; float: left;}
     .footer-button {float: left; margin-top: 0px;}
    
}


/*    HOME PAGE   */

.home-content {padding-top: 70px;}

@media (max-width: 500px)  {
    .home-content {padding-top: 70px;}
}

/*     SLICK SLIDER    */

.home-slider {position: absolute; left: 0px; top: 0px; width: 100%;}
.slide-wrapper {background-size: cover; background-position: center center; min-height: 920px;}

.home-slide-1 {background-image: url(images/Shake-Shack-640.jpg);}
@media screen and (min-width: 640px) {.home-slide-1 {background-image: url(images/Shake-Shack-1200.jpg);}}
@media screen and (min-width: 1200px) {.home-slide-1 {background-image: url(images/Shake-Shack-2000.jpg);}}

.home-slide-2 {background-image: url(images/guzman-640.jpg);}
@media screen and (min-width: 640px) {.home-slide-2 {background-image: url(images/guzman-1200.jpg);}}
@media screen and (min-width: 1200px) {.home-slide-2 {background-image: url(images/guzman-2000.jpg);}}

.home-slide-3 {background-image: url(images/chick-fil-a-640.jpg);}
@media screen and (min-width: 640px) {.home-slide-3 {background-image: url(images/chick-fil-a-1200.jpg);}}
@media screen and (min-width: 1200px) {.home-slide-3 {background-image: url(images/chick-fil-a-2000.jpg);}}

.bug { width: 30%; max-width: 190px; margin: 0px auto 0px auto;}

.threes {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; margin-top: 0px; }
.threes_item {text-align: center; width: 220px; margin: 0px auto; }
.threes_item img {display: inline-block;}

.thirds {width: 33.3%; height: 430px; display: inline-block; background-size: cover; position: relative; overflow: hidden;}
.third-name {background-color: rgba(0, 111, 81, 0.9); 
    font-size: 20px; font-weight: 800; letter-spacing: 2px; color: #fff; line-height: 50px; height: 50px;
    width: 430px; top: 100%; transform-origin: left top; position: absolute;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
.counting {color: #006F51; font-size: 96px; line-height: 96px; font-weight: 800; display: inline-block; margin-bottom: 10px;}

.markets {width: 33.3%; height: 430px; display: inline-block; background-size: cover; position: relative; overflow: hidden;}
.market-buttons { font-size: 20px; font-weight: 700; padding: 24px; width: 100%; background-color: #006F51; color: #fff; text-align: center; display: none; border-bottom: solid 2px #fff;}
.market-buttons:hover { background-color: #C7DC6D; }

@media (max-width: 800px)  {
    .markets {display: none;}
    .market-buttons {display: inline-block;}
}


@media (max-width: 1000px)  {
    .thirds {width: 50%; }
    
}
@media (max-width: 700px)  {
    .thirds {width: 100%; }
    .threes_item {margin: 30px auto 0px auto;}
}
/*@media (max-width: 640px)  {
.bug {margin-top: -11%;}
}*/

/*        ABOUT        */



.customers {width: 100%; max-width: 170px; margin-bottom: 70px;}
.reasons { list-style: none; margin: 0px;}
.reasons li {background-position:left center; background-repeat: no-repeat; background-size: 31px; padding-left: 50px; margin: 0px 0px 20px 0px; min-height: 32px; }

/*    YEARS SLIDER    */
    .copyshell {position: relative; width: 100%; max-width: 680px; margin:50px auto 10px auto; overflow: hidden; height: 100px;}
    #copyslide {position: absolute; width: 6120px; left: -2720px;}
.copyslide {width: 680px; text-align: center;display: inline-block;}
    #copyslide div {color: #4A4A4A; font-weight: 700; display: inline-block; padding: 0px 40px; vertical-align: top; margin: auto;}
    @media (max-width: 530px)  {
        #copyslide div {padding: 0px 10px;}
        .copyshell {height: 190px; margin-bottom: 0px;}
}
    .timeline-shell { width: 100%; max-width: 975px; height: 125px; position: relative; overflow: hidden; background-image: url(images/timeline-line.png); background-repeat: repeat-x; margin: auto;}
    .button-left, .button-right { width: 40px; height: 40px; position: absolute; top: 40px; cursor: pointer;}
    .button-left {left: 0px; }
    .button-right {right: 0px;}   
       
    .timeline { width:1125px; height: 125px; text-align:center; margin: auto;  position: absolute; top: 0px;  left: 50%; transform: translate(-50%, 0%); }
        
    .timeline .mydiv {width: 125px !important; height: 125px!important; text-align: center; display: table-cell; vertical-align: middle; position: relative;} 
    .timeline .mydiv p {display: block; width: 125px; text-align: center; position: absolute; top: 40px; color:#e9e8e2; font-size: 10px; line-height: 40px; font-weight: 800;}
    .date { width: 40px; height: 40px;  color:#e9e8e2; font-size: 10px; line-height: 40px; padding-top: 9px; background-color: #e9e8e2; border-radius: 50% !important; font-weight: 800; text-align: center;  border: 4px solid #006F51; display: inline-block; top: 0px; }
    
    #date-5 { width: 120px; height: 120px; background-color:#006F51;}
    #date-4, #date-6 {height: 80px; width:80px; background-color:#e9e8e2; }
    #mydate-5 { font-size: 24px; color: #c7dc6d;}
    #mydate-4, #mydate-6 { font-size: 16px; color: #006F51;}

@media (max-width: 510px)  {
    .timeline-shell {  height: 185px;}
    .button-left {top: 140px; ; left: 85px;}
    .button-right {top: 140px; ; right: 85px;}
}

/*       END YEARS SLIDER     */

.bio-shell {margin: 70px auto 60px auto; width: 100%; max-width: 700px; text-align: center;}
.bio {background-color: #006f51; padding: 25px 30px; margin: 0px 0px 30px 0px; color: #fff; font-size: 28px; width: 47%; max-width: 330px; display: inline-block; text-align: left;}
.bio:nth-child(odd) {margin-right: 4%;}
.title {color: #C7DC6D; font-weight: 800; font-size: 12px; line-height: 16px; letter-spacing: 1px; margin: 0px 0px 10px 0px;}

@media (max-width: 690px)  {
    .bio {width: 100%; margin-right: 0px !important;}
}


/*     RESTAURANTS     */

.restaurants {width: 33.3%; padding-bottom:33.3%; display: inline-block; background-size: cover; position: relative; background-position: center; overflow: hidden;}
.restaurant-name {font-size: 18px; line-height: 25px; font-weight: 800; color: #fff; background-color:rgba(0, 111, 81, 0.9); position:  absolute; left: 0px; bottom: 0px; padding: 16px 20px; text-align: left;}
.mybreak {display: inline;}

@media (max-width: 750px)  {
    .restaurants {width: 50%; padding-bottom: 50%;}
  
}

@media (max-width: 450px)  {
    .restaurants {width: 100%; height: 160px;}
    .restaurant-name {width: 100%; text-align: center;}
    .mybreak {display: none;}
}

.locations-link { padding: 0px 50px 0px 0px; line-height: 32px; font-size: 18px; color: #4A4A4A; background-image: url(images/arrow-grey.png); background-repeat: no-repeat; background-size: 32px; background-position: center right; display: inline-block;}

.restaurant-header {font-size: 60px; line-height: 66px; font-weight: 800; color: #FFF; margin: 0px 0px 40px 0px;}
.restaurant-header :hover {color: #006f51; background-image: url(images/arrow-green.png);}
.hero-restaurant {margin: 300px 0px; padding: 70px 7% 70px 5% !important;}
@media (max-width: 600px)  {
    .hero-restaurant {margin: 150px 0px;}
    .restaurant-header{font-size: 40px; line-height: 46px;  }
}

/*   RETAIL    */

.retail-stores {display: block; width: 33.3%; float: left;}
.retail-stores img {width: 100%; display: block;}
@media (max-width: 500px)  {
    .retail-stores { width: 100%}
}

/*   OFFICE AND CORPORATE    */

.offices {width: 33.3%;  display: inline-block; position: relative; }
.office-image {background-repeat: no-repeat; background-size: cover; background-position: center; display: inline-block; height: 430px; width: 100%;}
.office-name {color: #4A4A4A;  line-height: 20px; margin: 36px auto 50px auto;}
.office-name span {font-weight: 800;}
@media (max-width: 950px)  {
    .office-image {height: 300px;}
}

@media (max-width: 750px)  {
    .offices {width: 100%;}
    .office-image {height: 230px;}
    .office-name {color: #4A4A4A;  line-height: 18px; margin: 30px auto 40px auto;}
}