@charset "utf-8";

body,div,dl,dt,dd,p,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,blockquote,form{margin:0;padding:0;}
ul,ol{list-style:none;}
img,a img{border:none;display:block;}
*:link,*:visited{text-decoration:none;}
*:active,*:focus{outline:0;}
table{border-collapse:collapse;border-spacing:0;}
label,button{cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:inherit;padding:0;margin:0;vertical-align:middle;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;margin:0;padding:0;}

::-moz-selection { background-color: #111; color: #FFF; }
::selection { background-color: #111; color: #FFF; }

@font-face {
  font-family: 'Graphik';
  src: url('Graphik-Regular-Web.eot');
  src: url('Graphik-Regular-Web.eot?#iefix') format('embedded-opentype'),
       url('Graphik-Regular-Web.woff2') format('woff2'),
       url('Graphik-Regular-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Graphik';
  src: url('Graphik-Medium-Web.eot');
  src: url('Graphik-Medium-Web.eot?#iefix') format('embedded-opentype'),
       url('Graphik-Medium-Web.woff2') format('woff2'),
       url('Graphik-Medium-Web.woff') format('woff');
  font-weight:  500;
  font-style:   normal;
  font-stretch: normal;
}

/*fade in effects*/
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in { opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;animation-duration:0.5s; }

html 					{ overflow-y: scroll; }
body 					{ background-color: #eeeff1; color: #111; font-family: Georgia, Times, "Times New Roman", serif; font-size: 15px; line-height: 1; }
body.noscroll			{ overflow: hidden; }
.page-layout 			{ min-width: 960px; padding-top: 60px; position: relative; }
.page-content           { background-color: #FFF; padding: 80px 0; }
.inner 			        { margin: 0 auto; max-width: 1440px; }
.inner:after			{ clear: both; content: ""; display: table; }
.clear:after			{ clear: both; content: ""; display: table; }
.half 			        { float: left; width: 50%; }
.right                  { float: right; }
.half:nth-child(even)   { float: right; }
.mob-header				{ display: none; }
.mob-nav				{ display: none; }

/* PAGE HEADER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page-header *                  { -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; -webkit-transition: all .1s ease-out; transition: all .1s ease-out; }
.page-header                    { font-family: "Graphik", sans-serif; font-weight: 500; height: 84px; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; }
.page-header .bar               { background-color: #eeeff1; height: 60px; position: absolute; top: 0; left: 0; width: 100%; z-index: 1; }
.page-header a.logo             { display: block; margin: 0 auto; position: absolute; bottom: 0; left: 0; right: 0; height: 45px; width: 150px; z-index: 2; }
.page-header a.logo:hover img   { opacity: 0.5; }


.page-header .hamburger { position: absolute; top: 0; left: 0; z-index: 999; padding: 20px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; }
.page-header .hamburger:hover { opacity: 0.5; }
.page-header .hamburger-box { width: 30px; height: 20px; display: inline-block; position: relative; vertical-align: middle; }
.page-header .hamburger-inner { display: block; top: 50%; margin-top: -2px; }
.page-header .hamburger-inner,
.page-header .hamburger-inner::before,
.page-header .hamburger-inner::after { width: 30px; height: 2px; background-color: #000; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
.page-header .hamburger-inner::before,
.page-header .hamburger-inner::after { content: ""; display: block; }
.page-header .hamburger-inner::before { top: -8px; }
.page-header .hamburger-inner::after { bottom: -8px; }
.page-header .hamburger--minus .hamburger-inner::before, 
.page-header .hamburger--minus .hamburger-inner::after { transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; }
.page-header .hamburger--minus.is-active .hamburger-inner::before, 
.page-header .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; }
.page-header .hamburger--minus.is-active .hamburger-inner::before { top: 0; }
.page-header .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; }
.page-header .hamburger .hamburger-label { display: inline-block; margin-left: 10px; vertical-align: middle; font-size: 16px; letter-spacing: 0.05em; padding-bottom: 2px; }

.page-nav                { color: #111; display: none; font-size: 18px; font-weight: 500; letter-spacing: 0.1em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; text-transform: uppercase; z-index: 2; }
.page-nav ul li          { display: inline-block; }
.page-nav ul li a        { color: #111; display: block; height: 50px; line-height: 50px; padding: 0 22px; text-decoration: none; }
.page-nav ul li a:hover  { color: #c1c1c1; text-decoration: none; }
.page-nav ul li.on a     { color: #c1c1c1; text-decoration: none; }

.page-header-active a.logo    { display: none; }
.page-header-active .page-nav { display: block; }
.page-header-active .menu     { opacity: 0.2; }


/* PAGE FOOTER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page-footer *          { -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; -webkit-transition: all .1s ease-out; transition: all .1s ease-out; }
.page-footer            { background-color: #eeeff1; font-family: "Graphik", sans-serif; padding: 60px 20px 40px; }

.page-footer section	{ float: left; width: 25%; }

.page-footer h2         { color: #111; font-size: 14px; font-weight: 500; line-height: 1; margin: 0 0 20px; }
.page-footer p			{ color: #111; font-size: 13px; font-weight: 300; line-height: 1.6; margin: 0 0 20px; }
.page-footer a			{ color: #111; text-decoration: underline; }
.page-footer a:hover    { color: #666; text-decoration: underline; }

/* CONTENT
-------------------------------------------------------------------------------------------------*/
main * { -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; -webkit-transition: all .1s ease-out; transition: all .1s ease-out; }

/*elements*/
.page-content h1			{ color: #111; font-family: "Graphik", sans-serif; font-size: 30px; font-weight: 500; letter-spacing: 0.025em; line-height: 60px; margin: 0; text-transform: uppercase; }
.page-content h2			{ color: #111; font-size: 40px; font-weight: 300; line-height: 1.25; margin: 0 0 15px; }
.page-content h3			{ color: #111; font-family: "Graphik", sans-serif; font-size: 18px; font-weight: 500; letter-spacing: 0.025em; line-height: 1; margin: 0 0 20px; text-transform: uppercase; }
.page-content h4			{ color: #111; font-family: "Graphik", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.25; margin: 0 0 20px; }
.page-content p				{ color: #111; font-size: 16px; line-height: 1.5; margin: 0 0 20px; }
.page-content a				{ color: #111; text-decoration: underline; }
.page-content a:hover		{ color: #666; text-decoration: underline; }

.page-content figure:last-child,
.page-content p:last-child,
.page-content ol:last-child,
.page-content ul:last-child{ margin-bottom: 0; }
.page-content figure:only-child,
.page-content h2:only-child,
.page-content h3:only-child,
.page-content h4:only-child,
.page-content p:only-child,
.page-content ol:only-child,
.page-content ul:only-child{ margin-bottom: 0; }

/*lists*/
.page-content ul, 
.page-content ol			{ font-size: 16px; line-height: 1.5; margin: 0 0 20px 20px; }
.page-content ul ul,
.page-content ul ol,
.page-content ol ol,
.page-content ol ul 		{ font-size: 100%; margin: 5px 0 5px 20px; }
.page-content ul 			{ list-style-type: square; }
.page-content ul ul 		{ list-style-type: disc; }
.page-content ul ul ul 		{ list-style-type: circle; }
.page-content ol 			{ list-style-type: decimal; }
.page-content ol ol 		{ list-style-type: lower-alpha;	}
.page-content ol ol ol		{ list-style-type: lower-roman; }
.page-content li			{ margin-bottom: 5px; }

.page-content .text-left			    { text-align: left; }
.page-content .text-right			    { text-align: right; }
.page-content .text-center			    { text-align: center; }

/*layout*/
.page-content .content-block 	        { margin: 0 auto; min-height: 440px; position: relative; }
.page-content .content-block:after      { clear: both; content: ""; display: table; }

.page-content .content-block .text      { padding: 80px 110px 60px; }
.page-content .content-block figure     { height: 100%; position: absolute; top: 0; left: 0; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; }
.page-content .content-block figure.right { left: 50%; }

.page-content header.heading 	        { min-height: 140px; }
.page-content header.heading h1         { position: absolute; bottom: -30px; left: 80px; z-index: 999; }
.page-content header.position-right h1  { left: 50%; margin-left: 80px; }

.page-content .background-grey          { background-color: #eeeff1; }
.page-content .background-pink          { background-color: #e9d8d9; }
.page-content .background-coffee        { background-color: #ebe1d7; }

.page-content .faq *                { -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
.page-content .faq                  { margin: 40px 0; min-height: 100px; }
.page-content .faq h3               { height: 40px; line-height: 40px; margin: 0; position: relative; }
.page-content .faq h3 span          { cursor: pointer; position: absolute; top: 0; left: 20px; z-index: 2; }
.page-content .faq h3:before        { background: #dcdcdc; content: ''; height: 1px; width: 100%; position: absolute; top: 20px; left: 0; z-index: 1; }
.page-content .faq h3:hover:before  { background: #111; }
.page-content .faq h3.on            { color: #111; }
.page-content .faq .answer          { display: none; max-width: 980px; padding: 40px 80px; }

.page-content .quote                { margin: 80px 0; min-height: 80px; text-align: center; }
.page-content .quote h2             { margin: 0 auto 15px; width: 600px; }
.page-content .quote h2.size-small  { font-size: 22px; line-height: 1.35; }
.page-content .quote h4             {  }

.page-content .quote + header       { margin-top: -100px; }

/* HOME
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.home-content                     { background-color: #FFF; padding: 0; }
.home-content .inner              { max-width: 100%; }

.home-content .home-intro h2      { font-size: 65px; line-height: 1.1; margin: 0 auto; padding: 150px 0; text-align: center; width: 600px; }
.home-content .home-blocks a        { position: relative; text-decoration: none; }
.home-content .home-blocks img      { height: auto; width: 100%; }
.home-content .home-blocks a div    { background: rgba(255,255,255,0.8); display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; }
.home-content .home-blocks a strong { color: #111; display: block; font-family: Georgia, Times, "Times New Roman", serif; font-size: 26px; font-weight: normal; line-height: 1.4; padding: 50px 50px 30px; width: 300px; }
.home-content .home-blocks a span   { color: #111; display: block; font-family: "Graphik", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; padding: 0 50px 30px; text-decoration: underline; text-transform: uppercase; }
.home-content .home-blocks a:hover *  { color: #111;  }
.home-content .home-blocks a:hover div { display: block; }

/* CONTACT
------------------------------------------------------------------------------------------------------------------------------------------------------*/


/* MEDIA QUERIES
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* iPad - Portrait */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {
	.page-layout {  } 
}

/* Mobile - Landscape */
@media screen and (min-device-width: 414px) and (max-device-width: 736px)  {
	.page-layout {  }
}

/* Mobile - Portrait */
@media only screen and (max-width: 479px) {
	html { overflow-y: visible; }
    .page-header { display: none; }
	.page-layout { min-width: 300px; padding-top: 50px; width: auto; }
    .inner {  }
    .half { float: none !important; width: auto; }
    .page-content { padding: 30px 0; }

    .mob-header { background: #eeeff1; display: block; position: fixed; top: 0; left: 0; height: 50px; width: 100%; z-index: 999; }
	.mob-header .logo { height: 30px; margin: 10px auto; width: 100px; }
	.mob-header .logo a { display: block; height: 100%; width: 100%;}
	
    .mob-header .hamburger { padding: 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; border: 0; overflow: visible; position: absolute; top: 0; left: 0; } 
    .mob-header .hamburger-box { width: 20px; height: 18px; display: inline-block; position: relative; }
    .mob-header .hamburger-inner { display: block; top: 50%; }
    .mob-header .hamburger-inner, 
    .mob-header .hamburger-inner::before, 
    .mob-header .hamburger-inner::after { width: 20px; height: 1px; background-color: #111; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
    .mob-header .hamburger-inner::before,
    .mob-header .hamburger-inner::after { content: ""; display: block; }
    .mob-header .hamburger-inner::before { top: -6px; }
    .mob-header .hamburger-inner::after { bottom: -6px; }
    .mob-header .hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    .mob-header .hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
    .mob-header .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    .mob-header .hamburger-active .hamburger-inner { transform: rotate(45deg);  transition-delay: 0.12s;  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    .mob-header .hamburger-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
    .mob-header .hamburger-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
    
	.mob-nav { background-color: #eeeff1; border-top: 1px solid #FFF; display: none; font-family: "Graphik", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0.05em; overflow-y: auto; position: fixed; top: 50px; left: 0; bottom: 0; right: 0; width: 100%; z-index: 999; }
	.mob-nav ul li a { border-bottom: 1px solid #FFF; color: #111; display: block; height: 49px; line-height: 49px; overflow: hidden; padding: 0 15px; position: relative; text-transform: uppercase; }
	.mob-nav ul li.toggle { position: relative; }
	.mob-nav ul>li.on>a { color: #AAA; }
    
    .page-footer { padding: 20px; }
    .page-footer section { float: none; width: auto; }
    .page-footer h2 { font-size: 13px; margin: 20px 0 10px; }
    .page-footer p { font-size: 12px; line-height: 1.5; margin: 0 0 10px; }
    
    .page-content h1 { font-size: 20px; line-height: 30px; }
    .page-content h2 { font-size: 24px; }
    .page-content h3 { font-size: 14px; }
    .page-content h4 { font-size: 13px; }
	.page-content p { font-size: 14px; line-height: 22px; margin: 0 0 20px; }
	.page-content ul, 
	.page-content ol { font-size: 14px; line-height: 22px; margin: 0 0 20px 20px; }
	
	.page-content .content-block { min-height: 20px; }
    .page-content .content-block .text { min-height: 190px; padding: 40px 30px 30px; }
    .page-content .content-block figure { height: 250px; position: relative; top: auto; left: auto; }
    .page-content .content-block figure.right { left: auto; }
    
    .page-content header.heading { min-height: 60px; }
    .page-content header.heading h1 { bottom: -15px; left: 30px; }
    .page-content header.position-right h1 { left: 30px; margin-left: 0; }
    
    .page-content .faq { border-top: 1px solid #dcdcdc; margin: 30px 0; min-height: 50px; }
    .page-content .faq h3 { border-bottom: 1px solid #dcdcdc; height: auto; line-height: 20px; margin-bottom: 0; padding: 10px 30px; }
    .page-content .faq h3 span { position: relative; top: auto; left: auto; }
    .page-content .faq h3:before { display: none; }
    .page-content .faq h3.on { border-bottom: 1px solid #FFF; color: #111; }
    .page-content .faq .answer { border-bottom: 1px solid #dcdcdc; width: auto; margin-bottom: 15px; padding: 5px 30px 15px; }

    .page-content .quote { margin: 30px 40px; min-height: 40px; }
    .page-content .quote h2 { width: auto; }
    .page-content .quote h2.size-small { font-size: 18px; }
    .page-content .quote br { display: none; }
    .page-content .quote + header { margin-top: -50px; }
    .home-content { padding: 0; }
    .home-content .home-intro { min-height: 40px; }
    .home-content .home-intro h2 { font-size: 35px; padding: 100px 30px; width: auto; }
    
    .home-content .home-blocks a { position: relative; }
    .home-content .home-blocks img { height: auto; width: 100%; }
    .home-content .home-blocks a div { background: none; display: block; padding: 30px 20px; position: relative; top: auto; left: auto; width: auto; height: auto; }
    .home-content .home-blocks a strong { font-size: 20px; padding: 0 0 20px; width: auto; }
    .home-content .home-blocks a span { font-size: 12px; padding: 0;}
    .home-content .home-blocks a:hover * { color: #111;  }
    .home-content .home-blocks a:hover div { display: block; }

}