@font-face {
    font-family: 'GothamHTF-Medium';
    src: url('/fonts/gotham-medium-webfont.woff2') format('woff2'),
         url('/fonts/gotham-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html, body {overflow-x:hidden;}
body {font-family: 'Libre Baskerville', serif;-moz-font-smoothing: antialiased;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color:#553C2E;}
h1, h2, h3, h4, h5 {font-family:'Bungee Inline', sans-serif;}
h3 {font-size: 24px;letter-spacing: 2px;margin-bottom:30px;}
h4 {letter-spacing: 1.28px;margin: 30px 0 15px;}
img {max-width:100%;}
p, span, a {font-family: 'GothamHTF-Medium';font-size: 18px;line-height: 35px;}
p+p {margin-top:35px;}
p+h3 {margin-top: 50px;}
a, a:focus, a:hover {text-decoration:none;color:#553C2E;}
ul {padding:0;}
ul li {list-style: none; font-family: 'GothamHTF-Medium';font-size: 18px;color: #FFFFFF;line-height: 46px;}
hr {margin:0;border: 0;border-top: 1px solid #553C29;}
.caps {text-transform:uppercase;}
.center {text-align:center;}
.cleaner {clear:both;}
.container {width:1040px;}
.btn {font-size: 16px;text-transform: uppercase;padding: 15px 30px;border: 2px solid #553C2E;border-radius: 0;margin-top: 30px; font-family: 'Open Sans'; font-weight:700; letter-spacing: 1.33px;transition: all 0.3s ease 0s;}
.btn:hover {background:rgba(237,223,207,.5);}

nav {height:80px; width:100%; background:#fff;position:fixed; z-index:420; box-shadow: 2px -2px 14px rgba(0,0,0,.5);}
nav .container {width:1300px;}
nav img.nav-logo {max-width:65px;padding:22px 0;cursor:pointer;}
nav .main-menu {float:right;width:66%;}
nav .nav {float:left !important;}
nav .nav li {display: inline-block; padding: 12px 35px;position:relative;}
nav .nav li:last-of-type {padding-right:0;}
nav .nav li a {font-family: 'Bungee Inline';font-size: 14px;color: #553C2E;letter-spacing: 1px;transition: all 0.3s ease 0s;}
nav .nav li a:hover::after, nav .nav li a.active:after {content: url('/imgs/hoverbean.png');display:block;position:absolute;left:43%;margin-top:-10px;transition: all 0.3s ease 0s;}
nav .social {margin:22px 0 0 60px;display:inline-block;}
nav .social a {display: inline-block;margin-left:15px;}
nav .nav-toggle {display:none;}

#slider {position:relative;padding-top:80px;}
#slider #slider-logo {position: absolute;max-height: 150px;z-index: 69;margin: auto;left: 0;right: 0;top: 0;bottom: 0;}
#slider .jumbotron img {width:100%;}
#slider .item {height:720px;background-position:center center !important;}
#slider #slide1 {background:url('/imgs/coffeetopia-slide-1.jpg');background-size:cover;}
#slider #slide2 {background:url('/imgs/coffeetopia-slide-1.jpg');background-size:cover;}
#slider #slide3 {background:url('/imgs/coffeetopia-slide-1.jpg');background-size:cover;}

.banner#beans-banner {height:430px;background-size:cover;padding-top:60px;}
.banner#beans-banner img {width:68px;}
.banner#beans-banner h3, .banner#beans-banner p {color:#fff;}
.banner#beans-banner h3 {margin-top:30px;}
.banner#beans-banner p {max-width:700px; margin:15px auto;}

.banner#girl-banner {}

section#coffee, section#more {padding:80px 0; position:relative; max-width:1440px;margin:auto;}
section#coffee .text {max-width:490px; margin-left:150px;float:left;}
section#coffee img {max-width:600px;float:left;}
section#coffee .coffee-stain {background:url('/imgs/coffee-stain-1.png');position:absolute;background-size: 114px 192px;width: 114px;height: 192px;position: absolute;right: 87px;bottom: 26px;}

section#more img {max-width:600px;float:right;}
section#more .text {max-width:490px;margin:0 150px 0 200px;float:left;}
section#more .coffee-stain {background:url('/imgs/coffee-stain-2.png');position:absolute;background-size: 228px 295px;width: 228px;height: 295px;position: absolute;left:0;bottom: 62px;}

section#menu {}
section#menu .container {max-width:730px; margin:auto;}
section#art {padding:60px 0 80px 0; position: relative;max-width: 1440px;margin: auto;}
section#art p {max-width: 700px;margin: auto;}
section#art .block .desc {margin-top:40px;}
section#art .coffee-stain.med {background: url(/imgs/coffee-stain-3.png);position: absolute;background-size: 132px 105px;width: 132px;height: 105px;position: absolute;left: 0;}
section#art .coffee-stain.small {background: url(/imgs/coffee-stain-small.png);position: absolute;background-size: 25px 25px;width: 25px;height: 25px;position: absolute;right: 0;bottom:275px;}

section#locations {padding:60px 0 80px 0;position: relative;max-width: 1440px;margin: auto;}
section#locations h3 {margin-bottom:10px;}
section#locations .coffee-stain {background: url(/imgs/coffee-stain-4.png);position: absolute;background-size: 175px 250px;width: 175px;height: 250px;position: absolute;left: 0; bottom:110px;}

section#contact {padding:60px 0 80px;position: relative;max-width: 1440px;margin: auto;}
section#contact h3 {margin-bottom: 60px;}
section#contact .coffee-stain.small {background: url(/imgs/coffee-stain-small.png);position: absolute;background-size: 25px 25px;width: 25px;height: 25px;position: absolute;right: 50px;bottom:350px;}
section#contact .coffee-stain.med {background: url(/imgs/coffee-stain-med.png);position: absolute;background-size: 55px 55px;width: 55px;height: 55px;position: absolute;right: 0;bottom:250px;}
section#contact form {max-width:600px; margin:auto;font-family: 'GothamHTF-Medium';font-size: 18px;color: #553C2E;}
section#contact form input, section#contact form select {height:50px; width:100%;margin-bottom:30px;}
section#contact form input, section#contact form select, section#contact form input, section#contact form textarea {opacity: 0.42;border:1px solid #553C2E; border-radius:0; background:rgba(229,215,199,.25);padding:12px 20px; -webkit-appearance: none;}
section#contact form input.btn {opacity:1;width:160px; margin:30px auto 0;background:none;}
section#contact form textarea {width:100%;height:215px;}
section#contact form select {background: url(/imgs/arrows.png) no-repeat 96% rgba(229,215,199,.25);background-size: 10px 18px;}
::-webkit-input-placeholder {
   color: #553C2E;
}

:-moz-placeholder { /* Firefox 18- */
   color: #553C2E;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #553C2E;  
}

:-ms-input-placeholder {  
   color: #553C2E;  
}

section#instagram {padding:10px 0 80px;}
section#instagram .gallery-item {width: 15%;float: left;margin: 0 10px;}
section#instagram .gallery-item:first-of-type {margin-left:0;}
section#instagram .gallery-item:last-of-type {margin-right:0;}

section#missing {padding: 150px 0 130px;background: url(/imgs/404-background-stain.png);background-size: cover;width: 100%;}
section#missing .container {position:relative;}
section#missing img {max-width:80px;}
section#missing a {text-decoration:underline;}
section#missing .coffee-stain.large {background: url(/imgs/coffee-stain-2.png);position: absolute;background-size: 200px 295px;width: 200px;height: 295px;position: absolute;left: 0;top: -105px;}
section#missing .coffee-stain.small {background: url(/imgs/coffee-stain-1.png);position: absolute;background-size: 114px 192px;width: 114px;height: 192px;position: absolute;right: 0;bottom: -115px;}

.block {text-align:center;float:left;width:300px;margin:50px 18px 0;}
.block:last-of-type {margin-right: 0;}
.block:first-of-type {margin-left: 0;}
.block span {display:block;}

#map {height: 420px;width: 100%;}

footer {background:url('/imgs/footer-beans-bg.jpg'); background-size:cover;padding:40px 0 70px;}
footer img {width: 65px;margin: auto;display: block;}
footer p, footer p a {font-family: 'GothamHTF-Medium', serif;letter-spacing: 0.5px;line-height: 27px;color:#fff;}
footer p {font-size:14px;}
footer p a {font-size:12px;}
footer #footer-menu {margin:45px auto; max-width:550px;}
footer #footer-menu ul li {display: inline-block; font-weight:900;padding: 0 23px;border-left:1px solid #fff;}
footer #footer-menu ul li:first-of-type {padding-left: 0;border-left:none;}
footer #footer-menu ul li:last-of-type {padding-right: 0;}
footer #footer-menu ul li a {color:#fff; font-size:13px;font-family: 'Open Sans'; font-weight:700;letter-spacing: 0.92px;}
footer .social i {color: #fff;margin: 0 10px;font-size: 15px;}



#nav-icon3{
  width: 30px;
  height: 19px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
    z-index:999;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #553C2E;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


/* Icon 3 */

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 8px;
}

#nav-icon3 span:nth-child(4) {
  top: 16px;
}

#nav-icon3.open span:nth-child(1) {
  top: 10px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 10px;
  width: 0%;
  left: 50%;
}

.navbar-custom.top #nav-icon3 span {background:#fff;}
.navbar-custom.top .open#nav-icon3 span {background: #553C2E;}

/*FANCY*/
.fancybox-prev span {background-image: url('fancybox-left.png');left:-55px;}
.fancybox-next span {background-image: url('fancybox-right.png');right:-55px;}
.fancybox-close {background:url('fancybox-x.png') ; background-size: 58px 58px; position: absolute; top: -20px;right: -20px;width: 58px;height: 58px;}
.fancybox-skin {background:none;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;padding:0 !important; margin:15px;}
.fancybox-nav span {visibility:visible;background-size:25px 54px; width:25px; height:54px;background-position:center center;}
.fancybox-title-float-wrap, .fancybox-title-float-wrap .child {width:100%;}
.fancybox-title-float-wrap {margin-bottom:0;}
.fancybox-title-float-wrap .child {padding: 30px 20px;background: rgba(35,35,35,.6);-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;white-space: nowrap;font-size: 20px;color: #FFFFFF;line-height: 35px;}




@media (min-width: 1440px) {
  section#coffee .container, section#more .container {width:1440px;padding:0;}
}

@media (max-width: 1440px) {
  nav .main-menu {width:75%;}
  
  section#coffee .text {max-width:490px; margin-left:50px;float:left;}
  section#coffee img {max-width:460px;float:left;}

  section#more img {max-width:460px;float:right;}
  section#more .text {max-width:490px;margin:0 50px 0 0;float:left;}
  section#more .coffee-stain, section#locations .coffee-stain {display:none;}
}

@media (max-width: 1200px) and (min-width: 1081px) {
	#blocks .block {width: 225px;margin: 0px 11px;}
	#blocks .block h5 {line-height: 17px;font-size:10px;}

  nav .container {width:950px;}
  nav .main-menu {width: 85%;}
  nav .nav li {display: inline-block;padding: 12px 25px;}

}

@media (max-width: 1080px) {
  .container {width:640px;}
  .block {width:100%;}
  .block img {float: left;max-width:300px;}
  .block.mid img {float: right;}
  
  nav img.nav-logo {max-width: 65px 0;padding: 22px 0;}
  nav .nav {display: none;}
  nav .nav {background:#fff;width:100%;padding-bottom:20px;}
  nav .nav li {display: block;padding: 10px 0;text-align: center;}
  nav .nav li a:hover::after, nav .nav li a.active:after {display:none;}
  nav .container {width: 100%;position: relative;padding: 0;margin: 0;}
  nav .navbar-header {display: inline-block;margin: 0 40px !important;}
  nav .main-menu {float: none; width:100%;}
  nav .nav-toggle {display:inline-block;margin-left:40px;position:relative;top:4px;}
   nav .social-toggle {position:absolute;top:0;right:40px;}

  #slider .item {height:340px;}
  #slider #slider-logo {max-height:80px;top:90px;}
  .owl-theme .owl-controls {margin: -95px 30px;}

  section#coffee, section#more {padding:40px 0;}
  section#coffee .container, section#more .container {display:flex; flex-direction:column;}
  section#coffee img, section#more img {max-width:600px;float:none;order:2;}
  section#coffee .text, section#more .text {float:none;margin: auto;text-align: center;padding-bottom:40px;order:1;}
  section#coffee .coffee-stain {right: 50px;bottom: 448px;}

  section#art, section#locations {padding: 50px 0 30px 0;}
  section#art .coffee-stain.med {left:-50px;}
  section#art .block {margin:30px 0;}
  section#art .block .desc {margin-top: 140px;}

  section#locations .block {margin:15px 0;}
  section#locations h3 {margin-bottom: 40px;}
  section#locations h4 {margin: 45px 0 15px;}

  section#menu {padding:60px 0;}

  section#instagram .gallery-item {width:30%;margin:0 15px;}
  section#instagram .gallery-item:nth-child(3) {margin-right: 0;}
  section#instagram .gallery-item:nth-child(4), section#instagram .gallery-item:nth-child(5), section#instagram .gallery-item:nth-child(6) {display: none;}

  #blocks, #mission {padding: 35px 0;}
  #blocks .container {width: 560px;}
  footer ul li {display: block;padding: 4px 0;text-align: center;}


  /*FANCY*/

  .fancybox-close {background:url('fancybox-x.png') ; background-size: 40px 40px; position: absolute; top: -20px;right: -20px;width: 40px;height: 40px;}

}

@media (max-width: 767px) {
  h3 {font-size: 16px;letter-spacing: 1.14px;line-height:20px;margin-bottom:20px;}
  p, span, a {font-size: 12px;line-height: 26px;}
  p+h3 {margin-top: 35px;}
  p+p {margin-top: 20px;}
  ul li {font-size:12px;line-height:26px;}
  .container {width: 310px;}
  .block img {width:100%;float: none !important;}

  nav .social {display:none;}
  nav .navbar-header {margin:0 20px !important;}
  nav .social-toggle {position:absolute;top:30px;right:20px;}
  nav .nav-toggle {top:0;}

  #slider #slider-logo {max-height: 55px;}
  #slider .item {height:175px;}
  .owl-theme .owl-controls .owl-page span {width:9px;height:9px;}
  .owl-theme .owl-controls {margin: -75px 15px;}

  #map {height: 185px;}

  .banner#beans-banner {height: 300px;padding-top: 30px;}
  .banner#beans-banner img {width: 50px;}
  .banner#beans-banner h3 {margin:30px 0 20px 0;}
  .banner#girl-banner {height:200px;}

  section#coffee, section#more {padding:20px 0 30px;}
  section#coffee .text, section#more .text {padding-bottom:30px;}
  section#coffee img, section#more img {max-width: 100%;}
  section#coffee .coffee-stain {right: -25px;bottom: 211px;}
  section#more .coffee-stain, section#locations .coffee-stain {display:none;}
  section#more h3 {max-width: 220px;margin-left: auto;margin-right: auto;}

  section#menu {padding: 20px 0;}

  section#art .block {margin: 20px 0;}
  section#art .block .desc {margin-top: 20px;}
  section#art .coffee-stain.small {display:none;}

  section#locations, section#art {padding:20px 0 10px;}
  section#locations h3 {margin-bottom: 20px;}
  section#locations h4 {font-size:14px; margin:30px 0 15px;}

  section#contact{padding:20px 0 40px;}
  section#contact h3 {margin-bottom: 40px;}
  section#contact form input.btn {font-size:16px;margin:15px auto 0;}
  section#contact form input, section#contact form select, section#contact form input, section#contact form textarea {font-size:12px;}
  section#contact .coffee-stain.med {right:-25px; bottom:-25px;}
  section#contact .coffee-stain.small {bottom:75px;}

  section#instagram {padding:0 0 20px 0;}
  section#instagram .gallery-item {margin:0 7px;}
  section#instagram h4 {font-size:12px; margin:30px 0;}

  footer {padding:35px 0;}
  footer #footer-menu {margin: 20px auto;}
  footer #footer-menu ul li {border: none;display: block;text-align: center;margin: auto;padding: 5px 0;}
  footer p {margin: 0;}
  footer p, footer p a {font-size: 12px;line-height: 24px;}
  footer .social {margin-top: 20px;}

  .fancybox-close {background-size: 30px 30px;width: 30px;height: 30px;}
  .fancybox-nav span {background-size: 16px 32px;width: 16px;height: 32px;}
  .fancybox-prev span {left: -26px;}
  .fancybox-next span {right: -26px;}
  .fancybox-title-float-wrap .child {font-size:12px;}
}

.alert_style1 {
	display:none;
	line-height:18px;
	color:#C33925;
	margin:-25px 0px 15px 0px;
	text-align:left;
}
.alert_style2 {
	display:none;
	line-height:18px;
	color:#C33925;
	margin:3px 0px 15px 0px;
	text-align:left;
}
.unauthorize {
	text-align:center;
	font-size:18px;
	padding-top:50px;
	padding-bottom:50px;
}
.unauthorize1 {
	text-align:center;
	font-size:18px;
}
.robotic { display: none; }