/*
Theme Name: Blank Theme
Description: A custom theme by Ebbeka Design
Author: Ebbeka Design
Author URI: www.ebbekadesign.com
Version: 1.0
*/

a, button, .button, a:hover, button:hover, .button:hover, button.mobile_btn::after, img {
  -webkit-transition:all .45s ease;
  -moz-transition:all .45s ease;
  -ms-transition:all .45s ease;
  -o-transition:all .45s ease;
  transition:all .45s ease;
  outline: none;
}

body {
  margin-bottom: 150px;
  display: table;
  width: 100%;
}
body#home {
  margin: 0px;
}

/* =============================================================================
   Foundation Resets                                                               
============================================================================= */

.off-canvas-content {
  box-shadow: none;
}
.row { max-width: 65em; }
.columns.collapse { padding: 0px; }

iframe { width: 100%; }

/* =============================================================================
   Typeography                                                              
============================================================================= */
body, p { font-family: 'Geneva', Arial, Helvetica, sans-serif; }

a,h1,h2,h3,h4,h5,h6 { font-family: 'Montserrat', sans-serif; }

h5, h4 {
  color: #336666;
  text-transform: uppercase;
  font-size: 14px; 
  letter-spacing: 2px;
  font-weight: bold
}
h4 {
  color: #222;
}

h6 {
  text-transform: uppercase;
  letter-spacing: 2px;
}

p {
  font-size: 12px;
}

a:link, a:visited {
  color: #222;
}
a:hover, a:focus {
  color: rgba(34, 34, 34, 0.85);;
}


/* =============================================================================
   Header                                                              
============================================================================= */

/* Menu Main */
#interior header {
  margin-bottom: 85px;
  display: table;
  width: 100%;
}
.menu-main-container ul {
  margin: 0;
  padding:0;
  list-style: none;
}
#menu-main a {
  display:block; 
  color: #fff; 
  padding: 0.8em 1.8em;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  position: relative;
  text-align: center;
  background: #336666;
}
#menu-main li {
  position: relative;
}
#menu-main > li { 
  display: inline-block; 
} 
#menu-main > li > a { 
  
}
#menu-main > li:hover, 
#menu-main > li:hover > a { 
  color: #222;
  background: #fff;  
}
.menu-main-container button.mobile_btn {
  display: none;
}
/* Sub-Menu */
#menu-main ul {
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  left: -99999em;
  background: rgba(255,255,255, .85);
  text-align: left;
}
#menu-main ul li a:hover {
  color: #333;
}
#menu-main > li:hover > ul {
  left: auto;
  min-width: 100%;
}
#menu-main > li li:hover > ul { 
  left: 100%;
  margin-left: 1px;
  top: -1px;
}

/* Sub-menu */
#menu-main li ul.sub-menu li a:hover {
  color: #222;
  background: #fff;
}

/* Dropdown Arrow */
/*#menu-main li > a:after {
    color: #666;
    content: url(image/down.png);
    position: absolute;
    top: -2px;
    padding-left: 3px;
}

#menu-main li > a:hover:after {
    color: #666;
    content: url(image/down.png);
}

#menu-main li > a:only-child:after {
    content: '';
}*/

  /* Mobile Menu */
  .off-canvas {
    background: #888;
    height: 100%;
    min-height: 100vh;
    display: none;
  }
  .mobile.button {
    display: none;
  }
  .off-canvas-wrapper {
    overflow: visible;
  }
  .mobile-nav {
    width: 100%;
    position: relative;
    height: auto;
  }
  .mobile-nav #menu-main {
    border-top: 1px solid #333;
    margin: 0px;
  }
  .mobile-nav #menu-main li {
    width: 100%;
    position: relative;
  }
  .mobile-nav #menu-main li a:hover {
    background: #666;
  }
  .mobile-nav #menu-main a {
    width: 100%;
    color: #fff;
    display: block;
    text-decoration: none;
    padding: 10px 5%;
    height: 45px;
    position: relative;
    border-bottom: 1px solid #333;
    font-size: 14px;
    background: transparent;
    text-align: left;
  }
  .mobile-nav #menu-main a:hover, .mobile-nav #menu-main a:focus, 
  .mobile-nav #menu-main li:hover, .mobile-nav #menu-main li:focus,
  .mobile-nav #menu-main li .sub-menu a:hover, .mobile-nav #menu-main li .sub-menu a:focus, 
  .mobile-nav #menu-main li .sub-menu li:hover, .mobile-nav #menu-main li .sub-menu li:focus { 
    background: transparent; 
  }

  /* Sub-Menu */
  .mobile-nav #menu-main ul {
    position: relative;
    white-space: nowrap;
    z-index: initial;
    left: 0;
    background: transparent;
    text-align: left;
  }
  .mobile-nav ul.sub-menu li ul.sub-menu {
    margin: 0px;
    display: none;
  }
  .mobile-nav ul li a:hover {
    color: #fff !important;
  }
  .mobile-nav #menu-main > li li:hover > ul {
    left: 0px;
  }
  .mobile-nav #menu-main > li:hover, #menu-main > li:hover > a {
    border-color: #333;
  }
  .mobile-nav #menu-main > li > .sub-menu > li > ul.sub-menu li a {
    padding: 10px 15%;
  }
  .mobile-nav #menu-main > li > .sub-menu > li > ul.sub-menu > li > ul.sub-menu li a {
    padding: 10px 20%;
  }
  .mobile-nav #menu-main > li > .sub-menu {
    display: none;
    margin: 0px;
  }
  .mobile-nav #menu-main > li > .sub-menu li a {
    padding: 10px 10%;
  }

  /* Mobile Btn */
  .mobile-nav li button.mobile_btn {
    height: 45px;
    width: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background: #333;
    background-size: 10px;
  }
  button.mobile_btn::after {
    content: ' ';
    position: absolute;
    top: 0;
    background: url(image/mobile_arrow.png) no-repeat center center;
    background-size: 10px;
    width: 100%;
    height: 100%;
    right: 0;
  }
  .mobile-nav li button.mobile_btn.active::after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

/* =============================================================================
   Body                                                              
============================================================================= */
  #logo img.small {display:none;}

  #home #logo img.large {
    width: 720px;
    margin: 30px;
  }
  #home #logo { margin-bottom: 135px; }

  #interior #logo img.large {
    /*width: auto;*/
    margin: 0;
  }
  #interior #logo {margin-top:15px;margin-bottom:15px;}

  h4#title::after  {
    content: ' ';
    display: block;
    width: 50%;
    border: 4px solid #f6e097;
    margin: 15px 0;
  }
  .staff h4#title::after { margin: 5px 0 25px 0; }
  h4#title span, h4#title span {
    color: #336666;
    font-size: 13px;
    letter-spacing: 2px;
    display: block;
    font-weight: 100;
  }
  h4.sub-title {}

  .pad-top { margin-top: 15px; }

  /* Homepage */
  #logo img.large {
    width: 720px;
    margin: 30px;
  }
  #logo { margin-bottom: 135px; }

  #home .menu-main-container #menu-main { margin-top: 25px; }
  #home .menu-main-container #menu-main li {
    display: block;
    text-align: center;
  }
  #home .menu-main-container #menu-main li a {
    color: #000;
    background: transparent;
  }
  #home .menu-main-container #menu-main li .sub-menu {
    display:none;
  }

  ul#home, ul#address {
    list-style: none;
    margin: 0px;
    text-transform: uppercase;
  }
  ul#home {
    font-family: 'Sorts Mill Goudy', serif;
    display: table;
  }
  ul#home li {
    line-height: .65;
    margin: 0px;
    padding: 0px;
    opacity: .85;
    position: relative;
    letter-spacing: 8px
  }
  ul#home li:first-child {
    color: #6b7a6d;
    font-size: 4.5em;
    left: 125px;
  }
  ul#home li:nth-child(2) {
    color: #aab989;
    font-size: 6em;
    left: 205px;
  }
  ul#home li:last-child {
    color: #777;
    font-size: 10em;
    left: 45px;
  }

  ul#address {
    margin-top: 115px;
    margin-right: 30px;
  }
  ul#address li {
    color: #222;
    font-size: 10px;
    letter-spacing: 5px;
  }
  ul#address li span {
    font-family: 'Sorts Mill Goudy', serif;
    letter-spacing: 1px;
    color:#444;
    font-size: 16px;
  }

  /* About Us */
  .border {
    border: 1px solid #222;
    display: table;
  }
  .about.staff .border {
    display:block;
  }
  .about .border, .portfolio .border {
    margin: 0px auto;
    background: #000;
  }
  .about .border a, .portfolio .border a {
    background: #000;
    height: 100%;
    display: block;
    border: 5px solid #fff;
  }
  .about .border a:hover img, .portfolio .border a:hover img {
    opacity: .65;
  }
  .about h6, .portfolio h6 {
    margin: 20px 0;
    font-size: 12px;
  }
  .portfolio h6 a.button {
    background: #336666;
    font-size:12px;
    letter-spacing:2px;
    color:#fff;
    margin-bottom:0;
    border:1px solid #fff;
  }
  .portfolio h6 a.button:hover {
    background: #fff;
    color:#336666;
    border:1px solid #336666;
  }
  .about ul.tabs, .staff ul.tabs, .contact ul.tabs, .portfolio ul.tabs {
    margin: 0px;
  }
  .about ul.tabs img, .staff ul.tabs img, .contact ul.tabs img, .portfolio ul.tabs img {
    margin: 0px auto;
    display: block;
    width: 100%;
  }
  .about ul.tabs li, .staff ul.tabs li, .portfolio ul.tabs li {
    width: 75px;
    height: 75px;
    margin: 15px auto;
    overflow: hidden;
    border: 1px solid #222;
  }
  .about ul.tabs li:hover, .staff ul.tabs li:hover, .portfolio ul.tabs li:hover {
    background: #ccc;
    cursor: pointer;
  }
  .about ul.tabs, .staff ul.tabs, .contact ul.tabs, .portfolio ul.tabs {
    border: none;
    background: transparent;
  }
  .about ul.tabs li a, .staff ul.tabs li a, .contact ul.tabs li a, .portfolio ul.tabs li a {
    background: #000;
    height: 100%;
    display: block;
  }
  .portfolio ul.tabs li a {
    border: 1px solid #222;
  }
  .about ul.tabs li a img, .staff ul.tabs li a img, .contact ul.tabs li a img, .portfolio ul.tabs li a img {
    opacity: .75;
  }
  .about ul.tabs li.is-active a img, .about ul.tabs li a:hover img, 
  .staff ul.tabs li.is-active a img, .staff ul.tabs li a:hover img, 
  .portfolio ul.tabs li.is-active a img, .portfolio ul.tabs li a:hover img {
    opacity: 1;
  }
  .about p#title, .staff p#title, .portfolio p#title {
    font-family: 'Montserrat', sans-serif;
    margin: 15px 0 15px;
    color: #336666;
    font-size: 13px;
    letter-spacing: 2px;
  }

  /* Staff */
  .staff img#headshot {
    width: 250px;
    border: 1px solid #222;
    padding: 0;
    margin-right: 15px;
  }

  /* Contact Us */
  .contact ul.tabs li a img {
    width: 75px;
    opacity: 1;
    border: 1px solid #222;
  }
  .contact ul.tabs li a:hover img {
    opacity: .65;
  }
  .contact ul.tabs li a {
    color:#336666;
    width: 75px;
    height: 75px;
  }
  .contact ul.tabs li:hover {
    background: transparent;
  }
  .contact ul.tabs li p { margin: .75em 0 2em; }
  .contact ul.tabs li p a {
    width: auto;
    height: auto;
    background: transparent;
  }

  /* Portfolio */
  .portfolio .border {
    height: 143px;
    width: 100%;
    overflow: hidden;
    display: block;
  }
  .portfolio .border a {
    /*height: 183px;*/
    overflow: hidden;
    position: relative;
  }
  .portfolio ul.tabs li {
    width: 50%;
    height:50%;
    border:none;
  }
  .portfolio ul.tabs li:hover {
    background: transparent;
  }
  .portfolio ul.tabs { display: inline-block; }
  .portfolio .tabs#pics li {
    display: inline-block;
    background:transparent;
    /*border: 1px solid #222;*/
    width: 45px;
    height: 45px;
    margin: 0 8px 25px;
  }
  .portfolio .tabs#pics li:first-child { margin: 0 5px 25px 0; }
  .portfolio .tabs#pics li:last-child { margin: 0 0 25px 5px; }
  .portfolio .tabs#pics li a {
    background:transparent;
    display: inline-block;
    padding: 0px;
  }
  .portfolio .tabs#pics li a img {
    border:none;
    height:43px;
  }
  .portfolio .tabs-content {
    float: right;
    border: none;
  }
  .portfolio .tabs-panel { padding-top: 0px; }
  .portfolio .tabs-content .tabs-panel img { width: 450px;border:1px solid #222; }
  .portfolio ul.tabs li a img { /*height: 85px;*/ }
  .portfolio .medium-2 .border img {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
  }

  .float-right.border { margin: 10px 0 20px 20px; }

  .float-left.border { margin: 10px 20px 20px 0; }

/* =============================================================================
   Footer                                                              
============================================================================= */






/* =============================================================================
   Mobile                                                              
============================================================================= */

@media only screen and (max-width: 1200px) {
  
  ul#home li:first-child { font-size: 3em }
  ul#home li:nth-child(2) { font-size: 4em }
  ul#home li:last-child { font-size: 8em; line-height: .75; }

} 

@media only screen and (max-width: 1040px) {
  .portfolio .medium-2 .border img {
    position: static;
    height: 100%;
    width: 100%;
    left:auto;
  }
  .portfolio .medium-2 .border, .portfolio .medium-2 .border a {
    height:auto;
    width:auto;
  }
}


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

  #home .menu-main-container #menu-main li { display: inline-block; }
  #home .menu-main-container #menu-main {
    margin: 50px auto;
    width: 100%;
    text-align: center;
    border: 1px solid #222;
    border-left: 0;
    border-right: 0;
  }
  #home #logo, #interior #logo { margin: 0px; }
  #home #logo img.large, #interior #logo img.large { margin-bottom: 0px; }

}

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

  .off-canvas {
    display: block;
  }
  #interior .mobile.button { margin-left: 15px; }
  .mobile.button {
    display: block;
    position: relative;
    top: -30px;
    background: #6b7a6d;
    border-radius: 5px;
  }
  .menu-main-container {
    display: none;
  }
  .mobile-nav h2 {
    text-align: center;
    margin: 20px 0;
  }

  #interior header {
    margin-bottom: 0px;
  }

  .staff ul.tabs li, .portfolio ul.tabs li {
    display: inline-block;
  }

  .staff img#headshot {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
  }

  .medium-3.show-for-large-only-custom {display:none;}
  .about .medium-9,
  .staff .medium-9,
  .portfolio .medium-9 {width:100%;}

  #logo img.large {display:none;}
  #logo img.small {display:inline;margin:1rem 15px 0 0;width:30%;max-width:200px;float:right;}
  
  /*#home #logo img, #interior #logo img {
    width: 70%;
    float: right;
    margin-right: 0px;
    margin-left: 0px;
  }*/

  h4#title::after {width: 100%;}

  ul#home li:first-child { left: 0 }
  ul#home li:nth-child(2) { left: 0 }
  ul#home li:last-child { left: 0 }

  img.float-right, img.float-left {
    float: none !important;
    display: block;
  }

  .portfolio .text-right, .portfolio .text-left {
    text-align: center !important;
  }
  .portfolio h6 { margin: 0px; }
  .portfolio .border a, .portfolio .border { background: transparent; }
  .portfolio .border { margin-bottom: 20px; }

  .portfolio .tabs-content { float: none; }

  .portfolio .tabs-panel {padding-top:0px;padding-right:0px;padding-left:0px;}

}

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

  ul#home li:first-child { font-size: 2em }
  ul#home li:nth-child(2) { font-size: 2em }
  ul#home li:last-child { font-size: 2em; }

  ul#address { margin-top: 50px; }

}

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

  .float-right.border { margin:10px auto 20px auto;float:none!important; }

  .float-left.border { margin:10px auto 20px auto;float:none!important; }

  .about .medium-9 .medium-3 {margin-bottom:1rem;}
  .about .medium-9 .medium-3 .border {width:50%;}
  .about.staff .medium-9 .medium-3 .border {width:42%;}

  .about .text-left {
    text-align: center !important;
  }

  .portfolio .medium-2 .border {
    width:50%;
  }

  .portfolio ul.tabs#pics {display:none;}

  .portfolio .tabs-panel {text-align:center;display:block;}
}