@import url(../fonts/stylesheet.css);
* { margin:0; padding:0; text-decoration:none; list-style:none; border:none; outline:none; }
html, body, #container { width:100%; height:100%; min-height:100%; }
img { display:block; }
.centre { width:100%; max-width:1300px; padding:0 50px; margin:auto; box-sizing:border-box; position:relative; }
hr { border:1px solid #FFF; border-top:1px solid #E5E5E5; }
/* -------------------- Header -------------------- */
header { width:100%; height:110px; text-align:center; position:relative; background:#FFF; z-index:99999; }
header #logo { width:100%; position:absolute; top:38px; z-index:100; }
header .logo { position:relative; display:inline-block; }
header .logo div, header .logo div:before { height:35px; background:url(../../images/thirst-logo.png); background-size:auto 100%; background-repeat:none; float:left; opacity:1; }
header .logo .left { width:19px; margin-right:-1px; background-position:top left; }
header .logo .middle { width:119px; background-position:top center; }
header .logo .right { width:19px; margin-left:-1px; background-position:top right; }
header .logo div:before { content:""; width:100%; background-image:url(../../images/thirst-logo-hover.png); opacity:0; }
header .logo .left:before { background-position:bottom left; }
header .logo .right:before { background-position:bottom right; }
.back { padding:0 12px; font:bold 12px/36px 'Montserrat',sans-serif; color:#888 !important; letter-spacing:.7px; background:#EEE; box-shadow: 1px 1px 0 rgba(0,0,0,.12); position:absolute; top:35px; left:50px; z-index:9999999 !important; }
.back i { margin-right:10px; font-size:10px; color:#777; }
.hover .back:hover { background:#79C8AC; color:#FFF !important; box-shadow:none; }
.hover .back:hover i { color:#FFF; }
header i.fa-bars { padding:10px; color:#888; font-size:21px !important; position:absolute !important; top:35px; right:40px; cursor:pointer; display:block; z-index:9999999 !important; }
header i.fa-bars.active { color:#888 !important; }
.hover header i.fa-bars:hover { color:#79C8AC !important; }
.home header { position:absolute; background:none; }
.home header #logo { width:100%; position:absolute; top:60px; }
.home header i.fa-bars { color:rgba(255,255,255,.5); top:57px; }
/* Nav */
nav { width:100%; height:100%; background:rgba(255,255,255,.9); position:fixed; top:0; left:0; z-index:9999; display:none; -webkit-transform: translateZ(0); }
nav ul { width:100%; position:absolute; top:47%; transform:translate(0, -41%); -webkit-transform:translate(0, -41%); }
nav li { text-align:center; }
nav a { font:200 40px/70px 'Montserrat',sans-serif; color:#79C8AC; letter-spacing:-.8px; display:block; }
nav.active ul { top:50%; }
#contactlink { cursor:pointer; }
.hover nav a:hover { color:#FFF; background:#ED3F61; }
/* -------------------- Hero -------------------- */
#hero { width:100%; height:calc(100% - 190px); max-height:660px; min-height:350px; background:#3E4249; position:relative; overflow:hidden; }
#hero .heading { width:100%; position:absolute; top:50%; transform:translate(0, -30%); -webkit-transform:translate(0, -30%); z-index:1; }
#hero h1 { width:90%; margin:auto; font:100 34px/50px 'Montserrat',sans-serif; color:rgba(255,255,255,.7); letter-spacing:-.5px; text-align:center; }
#hero .main { opacity:.2; }
.hero { height:calc(100% - 300px); max-height:550px; min-height:350px; color:#FFF; background:#3E4249; position:relative; }
.hero .title { width:100%; padding:0 20px; color:#FFF; text-transform:uppercase; text-align:center; position:absolute; top:50%; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); box-sizing:border-box; z-index:1; }
.hero h1, .hero .h1 { max-width:700px; margin:0 auto 3px; font:100 40px/50px 'Montserrat',sans-serif; letter-spacing:1px; }
.hero p { font:bold 12px/20px 'Montserrat',sans-serif; letter-spacing:1.2px; }
.hero .main, #hero .main { width:100%; height:100%; position:absolute; top:0; left:0; background-attachment:scroll; background-position:top center; background-size:cover; }
.page-template-template-services .hero .main, .page-template-default .hero .main { opacity:.4; }
/* -------------------- General -------------------- */
main { display:block; }
main img, article img { width:100%; height:auto; }
.more { width:100%; padding-top:50px; text-align:center; clear:both; display:block; }
.more a { height:50px; padding:0 30px; font:bold 14px/45px 'Montserrat',sans-serif; letter-spacing:.8px; color:#79C8AC; text-transform:uppercase; border:3px solid #79C8AC; display:inline-block; box-sizing:border-box; }
.more a:hover { color:#FFF !important; background:#79C8AC; }
main#content { padding:55px 0 25px; font:200 14px/22px 'Montserrat',sans-serif; color:#888; letter-spacing:.3px; }
main#content h1 { margin-bottom:20px; font:40px/35px 'Montserrat',sans-serif; color:#79C8AC; letter-spacing:-1.2px; text-align:center; }
main#content h1 span { margin:5px 0 25px; font:200 16px/22px 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.5px; display:block; }
main#content.general .centre { max-width:900px; }
main#content.general p.intro { text-align:left; }
main#content.general h2 { margin-bottom:30px; font:bold 20px/25px 'Montserrat',sans-serif; color:#79C8AC; letter-spacing:0; }
main#content.general a { color:#79C8AC; border-bottom:1px solid #E5E5E5; }
main#content #tags { margin-bottom:60px; }
.cols { margin-bottom:30px; }
.cols:after { content:""; clear:both; display:block; }
.cols .col { width:50%; float:left; box-sizing:border-box; }
.cols .col:first-of-type { padding-right:30px; }
.cols .col:last-of-type { padding-left:30px; }
main#content p { margin-bottom:30px; }
main#content p.intro { max-width:850px; margin:0 auto 50px; font:20px/26px 'Montserrat',sans-serif; color:#52555C; letter-spacing:-.2px; text-align:center; }
.hover main#content.general a:hover { color:#444; }
/* Quotes */
#quotes { width:100%; padding:60px 0 55px; background:#F2F2F2; position:relative; }
#quotes .slider { width:100%; }
#quotes .item { width:100%; padding:0 100px; text-align:center; left:0; background:#F2F2F2; box-sizing:border-box; float:left; }
#quotes .item img { display:inline-block; opacity:.4; }
#quotes .item p.quote { max-width:650px; margin:20px auto; font:100 25px/32px 'Montserrat',sans-serif; color:#888; letter-spacing:-.7px; }
#quotes .item p.quote i { margin:0 5px; font-size:14px; position:relative; top:-5px; color:#BBB; }
#quotes .item p.name { font:bold 12px/19px 'Montserrat',sans-serif; color:#888; letter-spacing:.4px; text-transform:uppercase; }
#quotes .item p.name span { font-weight:200; text-transform:none; }
#quotes #quotenav { width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; }
#quotes #quotenav .centre { height:100%; }
#quotes .nav { margin-top:-30px; font-size:60px; color:#CCC; position:absolute; top:50%; cursor:pointer; }
#quotes .nav.prev { left:50px; }
#quotes .nav.next { right:50px; }
.hover #quotes .nav:hover { color:#777; }
/* -------------------- About Us -------------------- */
.page-template-template-about .hero .main { opacity:.4; }
.page-template-template-about h2 { margin:55px 0 -20px; font:bold 26px/26px 'Montserrat',sans-serif; color:#79C8AC; text-align:center; }
#team { padding-top:60px; clear:both; }
#team:after { content:""; clear:both; display:block; }
.profile { width:25%; padding:0 25px 25px; text-align:center; float:left; box-sizing:border-box; }
.profile a { color:#888; display:block; }
.profile .face { width:60%; max-width:120px; margin:0 auto 25px; position:relative; cursor:pointer; }
.profile .face:after { content:""; width:calc(100% - 2px); height:calc(100% - 2px); position:absolute; top:-3px; left:-3px; border:4px solid #FFF; z-index:1; border-radius:100px; }
.profile .face span { display:block; border-radius:100px; overflow:hidden; background:#79C8AC; transform:scale(1); }
.profile h3 { margin-bottom:10px; font:200 18px/19px 'Montserrat',sans-serif; color:#79C8AC; }
.profile h3 span { font-size:12px; font-weight:bold; color:#888; text-transform:uppercase; letter-spacing:1px; }
.hover .profile a:hover img { opacity:.5; }
#instagram { margin:0 60px 35px; }
#instagram p { margin-bottom:-29px !important; text-align:center; }
#instagram p i { width:50px; height:50px; font-size:20px; line-height:50px; color:#FFF; background:#79C8AC; border-radius:100px; border:5px solid #FFF; }
#instagram p a { padding:0 10px; color:#52555C; display:inline-block; }
#instagram #feed:after { content:""; clear:both; display:block; }
#instagram img { width:20%; float:left; }
.hover #instagram p a:hover i { background:#3E4249; }
#profile { max-width:800px; margin:auto; }
#profile p:first-of-type { font:20px/27px 'Montserrat',sans-serif; color:#52555C; letter-spacing:-.2px; }
#profile #tags { margin:55px auto 30px !important; }
#profile #tags a { width:70px; line-height:50px; padding:0; text-align:center; font-size:20px; }
#articles { margin-bottom:-3px; padding:60px 0 80px; text-align:center; background:#3E4249; position:relative; }
#articles:after { content:""; clear:both; display:block; }
#articles h2 { padding-bottom:55px; font:bold 22px/22px 'Montserrat',sans-serif; color:#FFF; letter-spacing:.5px; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.1); }
#articles .article { width:50%; padding:80px 0 0 60px; font:200 14px/22px 'Montserrat',sans-serif; color:rgba(255,255,255,.4); letter-spacing:.3px; text-align:left; float:left; box-sizing:border-box; }
#articles .article:first-of-type { padding:80px 60px 0 0; border-right:1px solid rgba(255,255,255,.08); }
#articles .article h3 { font:200 18px/22px 'Montserrat',sans-serif; letter-spacing:.6px; }
#articles .article h3 a { padding:5px 5px 5px 0; color:#FFF; }
#articles .article p.date { margin-bottom:15px; font-weight:bold; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; }
#articles .article p a { padding-bottom:1px; color:rgba(255,255,255,.4); border-bottom:1px solid rgba(255,255,255,.1); }
.hover #articles .article h3 a:hover, .hover #articles .article p a:hover { color:#79C8AC; }
/* -------------------- Services -------------------- */
#services { width:100%; margin:60px 0 55px; position:relative; }
#services .centre:before { content:""; width:60%; height:3px; background:#EEE; position:absolute; top:35px; left:20%; }
#services .centre:after { content:""; display:block; clear:both; }
#services .col { width:33.33%; padding:0 20px; font:200 14px/23px 'Montserrat',sans-serif; color:#888; letter-spacing:.3px; text-align:center; float:left; box-sizing:border-box; }
#services .col:first-of-type { padding:0 40px 0 0; }
#services .col:first-of-type i { font-size:32px; }
#services .col:last-of-type { padding:0 0 0 40px; }
#services .col .icon { height:70px; margin-bottom:15px; padding:0 25px; display:inline-block; background:#FFF; position:relative; }
#services .col .circle { width:64px; height:64px; border:3px solid #79C8AC; border-radius:100px; }
#services .col span { width:66px; height:66px; margin:-1px 0 0 -1px; font-size:28px; color:#FFF; background:#79C8AC; display:block; border-radius:100px; }
#services .col i { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); }
#services .col.execution i { transform:translate(-55%, -50%); -webkit-transform:translate(-55%, -50%); -ms-transform:translate(-55%, -50%); }
#services .col a { color:#888; display:block; position:relative; }
#services .col a:after { margin-top:12px; content:"Find out more"; font:bold 14px/20px 'Montserrat',sans-serif; color:#79C8AC; display:none; }
#services .col h3 { margin:8px 0 12px; font:200 22px/22px 'Montserrat',sans-serif; color:#79C8AC; letter-spacing:-.2px; }
#ourwork { position:absolute; bottom:18px; }
.hover #services .col a:hover span, #services .col.active span { width:58px; height:58px; margin:3px 0 0 3px; background:#52555C; }
.hover #services .col a:hover .circle, #services .col.active .circle { border-color:#52555C; }
.hover #services .col a:hover h3, #services .col.active h3 { color:#52555C; }
.page-template-template-services main#content { margin-bottom:-3px; padding-bottom:0; }
.page-template-template-services main#content h1 { max-width:900px; margin:0 auto 50px; font:25px/32px 'Montserrat',sans-serif; color:#52555C; letter-spacing:-.3px; text-align:center; }
.page-template-template-services #services { margin:60px 0 0; }
.page-template-template-services #services .col .icon { margin-bottom:0; }
.page-template-template-services #services .col .circle { border-color:#52555C; }
.page-template-template-services #services .col span { background:#52555C; }
.page-template-template-services #tags { max-width:900px; }
.hover .page-template-template-services #services .col a:hover span, .page-template-template-services #services .col.active span { background:#79C8AC; }
.hover .page-template-template-services #services .col a:hover .circle, .page-template-template-services #services .col.active .circle { border-color:#79C8AC; }
.hover .page-template-template-services #services .col a:hover h3, .page-template-template-services #services .col.active h3 { color:#79C8AC; }
#featured { width:100%; height:500px; background:#3E4249; position:relative; }
#featured:after { content:""; clear:both; display:block; }
#featured .centre { height:100%; }
#featured .image { width:50%; height:100%; position:absolute; top:0; right:0; background-attachment:scroll; background-position:top center; background-size:cover; }
#featured .details { width:50%; padding:0 100px 10px 0; color:rgba(255,255,255,.4); box-sizing:border-box; position:absolute; top:50%; transform:translate(0,-50%); -webkit-transform:translate(0,-50%); }
#featured .details h2 { margin-bottom:30px; font:26px/30px 'Montserrat',sans-serif; color:#FFF; letter-spacing:.5px; }
#featured .details h2 span { margin-bottom:-10px; font-size:12px; font-weight:normal; letter-spacing:1px; text-transform:uppercase; display:inline-block; }
#featured .details .more { padding-top:5px; text-align:left; }
/* -------------------- Work -------------------- */
#work { max-width:1300px; margin:auto; padding:50px 40px; box-sizing:border-box; }
#work:after { content:""; clear:both; display:block; }
#work figure { width:25%; padding:10px; float:left; position:relative; box-sizing:border-box; }
#work figure a { width:100%; height:100%; background:#79C8AC; display:block; }
#work figure .imgcontainer { overflow:hidden; }
#work figure img { width:100%; height:auto; display:block; }
#work figure.featured a:before { content:"FEATURED"; padding:0 12px; font:bold 12px/36px 'Montserrat',sans-serif; color:#FFF; letter-spacing:1.2px; background:#79C8AC; display:block; position:absolute; top:10px; left:10px; z-index:100; }
#work .caption { width:calc(100% - 40px); font:100 25px/25px 'Montserrat',sans-serif; text-align:center; letter-spacing:-.2px; color:#FFF; position:absolute; top:52%; left:20px; border-radius:0 4px 0 0; box-sizing:border-box; transform:translate(0,-50%); -webkit-transform:translate(0,-50%); opacity:0; z-index:10; }
#work .caption span { margin-top:7px; font-size:12px; line-height:16px; font-weight:bold; letter-spacing:1.2px; text-transform:uppercase; display:block; }
section#work { max-width:none; padding:50px 0; clear:both; background:#F2F2F2; }
section#work .centre { padding:0 40px; }
section#work figure { width:16.65%; }
section#work .caption { font:100 18px/20px 'Montserrat',sans-serif; letter-spacing:.2px; transform:translate(0,-51%); -webkit-transform:translate(0,-51%); }
section#work .caption span { margin-top:4px; font-size:11px; }
.hover #work figure a:hover img { transform:scale(1.05); }
.hover #work figure a:hover .imgcontainer { opacity:.2; }
.hover #work figure a:hover .caption { top:50%; opacity:1; }
.hover #work figure a:hover .count { bottom:29px; opacity:1; }
.hover #work figure a:hover:before { opacity:0; }
/* Projects */
#project { position:relative; }
#project .centre:after { content:""; display:block; clear:both; }
#project .intro { padding:55px 0; margin-bottom:60px; font:20px/26px 'Montserrat',sans-serif; color:#52555C; letter-spacing:-.2px; text-align:center; box-sizing:border-box; border-bottom:3px solid #EEE; }
#project .intro h1 { margin-bottom:20px; font:40px/35px 'Montserrat',sans-serif; color:#79C8AC; letter-spacing:-1.2px; }
#project .intro h1 strong { margin-top:-3px; font-size:12px; color:#52555C; letter-spacing:1px; text-transform:uppercase; display:block; }
#project .intro p { max-width:900px; margin:auto; }
#project .details { width:306px; height:100%; margin-bottom:60px; padding-right:60px; font:200 14px/22px 'Montserrat',sans-serif; color:#888; letter-spacing:.3px; float:left; box-sizing:border-box; z-index:10; }
#project .details p { margin-bottom:30px; }
#project .details ul { border-top:1px solid #E5E5E5; }
#project .details li { padding:8px 0; font:bold 14px/21px 'Montserrat',sans-serif; letter-spacing:.2px; border-bottom:1px solid #E5E5E5; }
#project .details h2 { margin:35px 0 15px; font:200 22px/22px 'Montserrat',sans-serif; color:#79C8AC; letter-spacing:-.2px; }
#project .details .more { margin-top:10px; }
#project .details .more a { width:100%; max-width:300px; }
#project .images { width:calc(100% - 306px); margin-bottom:40px; float:left; }
#project .images img { margin-bottom:20px; }
#project .quote { margin:40px 0 20px; padding:60px 60px 40px; font:200 16px/23px 'Montserrat',sans-serif; color:rgba(255,255,255,.8); letter-spacing:-.2px; background-position:center; background-size:cover; position:relative; }
#project .quote i { margin:0 35px 25px 0; font-size:35px; color:rgba(255,255,255,.3); float:left; }
#project .quote p { margin-bottom:20px; }
#project .quote p:first-of-type { font-size:20px; font-weight:normal; color:#793D00; line-height:25px; letter-spacing:-.5px; display:block; }
#project .quote p.name { font:bold 12px/19px 'Montserrat',sans-serif; letter-spacing:.4px; text-transform:uppercase; }
#project .quote p.name span { font-weight:200; text-transform:none; }
#project .imggroup img { width:calc(50% - 10px); float:left; }
#project .imggroup img:first-child { margin-right:20px; }
#project .imggroup:after { content:""; clear:both; display:block; }
#project .images.logos { width:100%; margin-bottom:60px; }
#project .images.logos img { width:33.33%; margin:0; float:left; border-bottom:1px solid #E5E5E5; }
#project .images.logos br { display:none; }
.single-work .hero { height:calc(100% - 380px); max-height:none; }
.embed-container { margin-bottom:40px; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#project #scroll { width:246px; margin-top:-5px; }
#project #scroll.fixed { position:fixed; top:137px; -webkit-transform: translateZ(0); }
#project #scroll.absolute { position:absolute; top:auto; bottom:60px; }
/* Filter */
#filter { width:calc(100% - 40px); margin:0 20px 10px 10px; padding:20px 0 0 0; float:left; z-index:99999; }
#filter li { font:12px/26px 'Montserrat',sans-serif; color:#444; letter-spacing:1px; text-transform:uppercase; float:left; }
#filter li a { margin-left:10px; padding:0 8px; font-weight:bold; color:#444; text-transform:uppercase; display:inline-block; background:#F2F2F2; text-align:left; }
#filter li a:before { content:"\f0c9"; margin-right:7px; font-family:'FontAwesome'; font-weight:normal; font-size:11px; color:#BBB; }
#filter li ul { position:absolute; z-index:100; display:none; }
#filter li ul li { font-size:12px; line-height:36px; letter-spacing:.8px; float:none; }
#filter li ul li a { padding:0 15px 0 12px; color:#666; font-weight:normal; text-transform:none; display:block; border-bottom:1px solid #D5D5D5; white-space:nowrap; }
#filter li ul li a:before { content:"\f105"; margin-right:8px; }
#filter li ul li:last-of-type a { border:none; }
.hover #filter li a:hover, #filter li a.active { background:#DDD; }
/* -------------------- Blog -------------------- */
#post { position:relative; }
article#post .centre { max-width:900px; }
article#post .centre:after { content:""; display:block; clear:both; }
.single-post .hero .title { margin-top:-30px; }
#blog .hero.archive { height:200px; min-height:0 !important; }
#blog .hero .author { width:100%; font:200 11px/16px 'Montserrat',sans-serif; color:#FFF; letter-spacing:.2px; text-align:center; position:absolute; bottom:-38px; z-index:10; text-transform:uppercase; }
#blog .hero .author .thumb { width:60px; height:60px; margin-top:15px; border-radius:100px; overflow:hidden; display:inline-block; background:#FFF; border:5px solid #FFF; transform:scale(1); }
#blog .hero .author a { color:#FFF; }
#blog .hero .author strong { font-weight:normal; }
#blog .hero .author img { width:100%; height:100%; filter:url("data:image/svg+xml;utf8,#grayscale"); filter:gray; -webkit-filter: grayscale(100%); }
#blog .hero .main { opacity:.4; }
#blog.single-post .hero p { padding:0; }
#blog.single-post .hero p a { padding:5px; display:inline-block; color:#FFF; }
#blog.overview .hero .title { margin-top:0; }
.hover #blog .hero .author .thumb:hover img { filter:url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(0%); }
.hover #blog .hero p a:hover { color:rgba(255,255,255,.5); }
#post #copy { margin:55px auto; font:200 14px/23px 'Montserrat',sans-serif; color:#888; letter-spacing:.3px; }
#post #copy p { margin-bottom:30px; }
#post #copy p:first-of-type { margin-top:50px; font:20px/27px 'Montserrat',sans-serif; color:#52555C; letter-spacing:-.2px; }
#post #copy p.feature { padding:0 80px; font:200 25px/32px 'Montserrat',sans-serif; color:#79C8AC; letter-spacing:-.2px; text-align:center; }
#post #copy h2 { margin-bottom:30px; font:bold 20px/25px 'Montserrat',sans-serif; color:#79C8AC; letter-spacing:0; }
#post #copy a { color:#79C8AC; border-bottom:1px solid #E5E5E5; word-wrap:break-word; }
#post #copy img { margin:40px 0; }
#post #copy img.app { width:82px; height:auto; margin:5px 25px 20px 0; float:left; }
#post #copy li { margin-bottom:30px; padding-left:30px; position:relative; }
#post #copy li:before { content:"\f18e"; font-family:'FontAwesome'; font-size:16px; color:#79C8AC; position:absolute; top:0; left:0; }
#post #copy hr { margin:40px 0; }
.hover #post #copy a:hover { color:#444; }
/* Categories */
#categories { width:100%; }
#categories ul { width:100%; display:table; border-bottom:1px solid #E5E5E5; }
#categories li { display:table-cell; border-left:1px solid #E5E5E5; }
#categories li:last-of-type { border-right:1px solid #E5E5E5; }
#categories li a { padding:0 30px; font:bold 14px/60px 'Montserrat',sans-serif; color:#52555C; letter-spacing:.5px; text-align:center; display:block; }
.hover #categories li a:hover { background:#F7F7F7; }
/* Tags */
#tags { margin:25px auto 0; display:table; text-align:center; }
#tags li { margin:0; padding:0; display:inline-block; }
#tags li a, #tags li span { margin:0 5px 10px 5px; padding:0 15px; font:bold 14px/40px 'Montserrat',sans-serif; color:#52555C !important; letter-spacing:.3px; background:#EEE; display:block; box-shadow:1px 1px 0 rgba(0,0,0,.12); }
#tags li:before { display:none; }
#post #copy #tags li { margin:0 !important; padding:0 !important; }
.single-post #tags { margin:0 auto -5px; padding:20px 0 0; }
.hover #tags li a:hover { background:#DDD; box-shadow:1px 1px 0 rgba(0,0,0,.18); }
/* Article List */
#thoughts { padding:60px 0; background:#FFF; }
#thoughts .centre { padding:0 30px; }
#thoughts article { width:33.33%; padding:0 20px; float:left; box-sizing:border-box; }
#thoughts article a { background:#79C8AC; display:block; }
#thoughts article .top { position:relative; }
#thoughts article .imgcontainer { overflow:hidden; }
#thoughts article img { width:100%; height:auto; }
#thoughts article .container { padding:37px 0 0; font:200 14px/23px 'Montserrat',sans-serif; color:#888; letter-spacing:.3px; text-align:center; background:#FFF; position:relative; }
#thoughts article h3 { margin-bottom:10px; font:200 22px/25px 'Montserrat',sans-serif; color:#79C8AC; letter-spacing:-.4px; }
#thoughts article .category { margin-bottom:28px; font:bold 12px/16px 'Montserrat',sans-serif; letter-spacing:1px; text-transform:uppercase; }
#thoughts article .date { width:56px; height:56px; margin-left:-28px; color:#52555C; background:#FFF; border-radius:100px; position:absolute; top:-22px; left:50%; box-shadow:1px 1px 0 rgba(0,0,0,.12); opacity:0; }
#thoughts article .date .day { width:100%; font:bold 20px/20px 'Montserrat',sans-serif; text-align:center; position:absolute; top:11px; left:0; }
#thoughts article .date .month { width:100%; font:11px/11px 'Montserrat',sans-serif; letter-spacing:.5px; text-align:center; text-transform:uppercase; position:absolute; top:34px; left:0; }
#thoughts .more { padding-top:55px; }
#thoughts.related { padding-top:70px !important; background:#FFF; position:relative; z-index:999; }
#thoughts.related:after { content:""; clear:both; display:block; }
.hover #thoughts article a:hover img { transform:scale(1.04); }
.hover #thoughts article a:hover .imgcontainer { opacity:.5; }
.hover #thoughts article a:hover .date { top:-29px; opacity:1; }
#blog #thoughts { padding:60px 0 0; }
#blog #thoughts article { padding-bottom:55px; }
#blog.single-post #thoughts { padding-top:0; }
#blog.single-post #thoughts article { width:25%; padding-bottom:30px; }
#blog.single-post #thoughts article .container { padding:30px 0 0; }
#blog.single-post #thoughts article h3 { font:200 18px/22px 'Montserrat',sans-serif; letter-spacing:0; }
#blog.single-post #thoughts article .category { font-size:11px; }
/* -------------------- Blog Bar -------------------- */
#bar { width:100%; height:70px; position:fixed; bottom:-70px; left:0; background:#3E4249; z-index:99; -webkit-transform: translateZ(0); }
#bar .centre { max-width:900px; border-radius:4px 4px 0 0; }
#bar p { width:100%; font:bold 16px/70px 'Montserrat',sans-serif; color:#FFF; text-align:center; letter-spacing:.5px; position:absolute; top:0; left:0; }
#bar.show { bottom:0; }
/* Subscribe */
#bar.overview #subscribe { margin-left:-162px; right:auto; left:50%; }
#subscribe { font:bold 14px/70px 'Montserrat',sans-serif; color:#FFF; letter-spacing:.5px; text-align:center; position:absolute; right:15px; }
#subscribe i { color:#AAA; position:absolute; top:27px; left:15px; }
#subscribe form { margin:15px 0 0 0; display:table; float:left; }
#subscribe input { width:200px; height:40px; padding:0 12px; font:12px/20px 'Montserrat',sans-serif; color:#666; letter-spacing:.5px; text-indent:30px; background:#FFF; display:inline; float:left; -webkit-border-radius:0; border-radius:0; }
#subscribe button { height:40px; padding:0 15px; font:bold 11px/35px 'Montserrat',sans-serif; letter-spacing:.8px; color:#FFF; text-transform:uppercase; background:#79C8AC; display:inline; float:left; cursor:pointer; border-left:1px solid #FFF; }
.hover #subscribe button:hover { color:#79C8AC; background:#FFF; border-left:1px solid #E5E5E5; }
/* Share */
#socialshare { padding-top:10px; text-align:center; }
.ssba.ssba-wrap { width:350px; display:inline-block; }
.ssba img { width:30px; height:30px; }
.ssba a { margin-left:20px; padding-right:30px; display:inline-block; position:relative; z-index:1; }
.ssba .ssba_sharecount { height:30px; margin-left:-30px; padding:0 10px; font:11px/30px 'Montserrat',sans-serif; color:#888; border-radius:0; display:inline-block; box-sizing:border-box; top:1px; border-left:none; }
.ssba .ssba_sharecount:before, .ssba .ssba_sharecount:after { display:none; }
.hover .ssba a:hover { opacity:.6; }
#share #socialshare { padding:0; position:absolute; top:19px; left:50%; transform:translate(-50%,0); -webkit-transform:translate(-50%,0); }
#share .ssba .ssba_sharecount { background:none; color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.15); }
/* -------------------- Subscribe Box -------------------- */
#subscribebox { clear:both; }
#subscribebox .centre { max-width:none; margin:65px auto 0; padding:70px 0 78px; text-align:center; background:#3E4249; z-index:1000; }
#subscribebox p.title { margin:0 20px 25px; font:200 24px/30px 'Montserrat',sans-serif; color:#FFF; letter-spacing:-.2px; }
#subscribebox #subscribe { width:100%; position:relative; right:auto; display:block; }
#subscribebox #subscribe form { margin:auto; float:none; position:relative; }
#subscribebox #subscribe i { top:18px; left:20px; }
#subscribebox #subscribe input { width:260px; height:50px; padding:0 20px; font-size:14px; letter-spacing:.2px; }
#subscribebox #subscribe button { height:50px; padding:0 20px; font-size:12px; }
.blog #subscribebox { margin:-60px 0 -3px; }
/* -------------------- 404 -------------------- */
#notfound.hero { height:calc(100% - 110px); max-height:none; }
#notfound.hero h1 { margin:0 auto 40px; font:100 80px/80px 'Montserrat',sans-serif; letter-spacing:0; }
#notfound.hero p { font-size:30px; line-height:30px; font-weight:100; letter-spacing:1.2px; color:rgba(255,255,255,.3); }
#notfound.hero p.copy { margin-top:-5px; font:200 16px/24px 'Montserrat',sans-serif; letter-spacing:.7px; text-transform:none; }
/* -------------------- Co-work -------------------- */
.page-template-template-cowork #hero { min-height:520px; background:#5A9B89; }
.page-template-template-cowork .heading { padding:0 30px; transform:translate(0, -50%) !important; -webkit-transform:translate(0, -50%) !important; box-sizing:border-box; }
.page-template-template-cowork .heading img { width:100%; height:auto; max-width:449px; margin:0 auto 25px; }
.page-template-template-cowork .heading h1 { width:100% !important; padding:0 !important; }
.page-template-template-cowork #hero .button { width:180px; margin-left:-90px; color:#FFF; font:bold 14px/50px 'Montserrat',sans-serif; text-align:center; border:none; background:#79C8AC; text-transform:uppercase; letter-spacing:.8px; cursor:pointer; display:block; position:absolute; bottom:68px; left:50%; }
.page-template-template-cowork #content { padding-bottom:0 !important; }
.page-template-template-cowork #copy { max-width:770px; margin:10px auto 60px; font:200 20px/30px 'Montserrat',sans-serif; text-align:center; }
.page-template-template-cowork #boxes:after { content:""; clear:both; display:block; }
.page-template-template-cowork #boxes .box { width:25%; height:260px; margin-bottom:80px; padding:0 35px !important; font:200 16px/26px 'Montserrat',sans-serif; text-align:center; float:left; box-sizing:border-box; }
.page-template-template-cowork #boxes .box h3 { margin-bottom:15px; font:bold 18px/25px 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:1px; }
.page-template-template-cowork #boxes .box img { width:auto; height:100px; margin:0 auto 40px; }
.page-template-template-cowork footer { background:#F2F2F2; border:none; }
.page-template-template-cowork footer #coworkmap { width:27%; height:100%; background:url(../../images/cowork-map.png) right no-repeat; background-size:auto 100%; position:absolute; top:0; left:0; }
.page-template-template-cowork footer form { margin-bottom:0; padding-bottom:60px; }
.page-template-template-cowork footer form input, .page-template-template-cowork footer form textarea, footer #twitter .bubble p { border-color:#DDD !important; }
.page-template-template-cowork footer form button { background:#79C8AC; }
.page-template-template-cowork footer p.title { height:auto; padding-bottom:5px; }
.page-template-template-cowork footer p.title span { font:300 14px/20px 'Montserrat',sans-serif; color:#888; letter-spacing:.4px; }
.page-template-template-cowork #photos { width:100%; box-sizing:border-box; position:relative; }
.page-template-template-cowork #photos img { width:auto; height:450px; float:left; }
.page-template-template-cowork #photos .nav { height:40px; width:65px; background:#FFF; box-shadow:1px 1px 0 rgba(0,0,0,.1); position:absolute; bottom:50px; right:50px; z-index:1; opacity:.3; }
.page-template-template-cowork #photos .nav a { width:50%; height:100%; font-size:15px; line-height:40px; color:#000; text-align:center; float:left; display:block; cursor:pointer; opacity:.4; }
.page-template-template-cowork #pricing { padding:35px 20px 37px; font:100 27px/35px 'Montserrat',sans-serif; color:#FFF; text-align:center; background:#79C8AC; position:relative; z-index:99999; box-shadow:0 -7px 7px rgba(0,0,0,.1),0 -1px 0 rgba(0,0,0,.1); }
.page-template-template-cowork #pricing span { font-size:16px; line-height:27px; letter-spacing:.7px; font-weight:normal; display:block; }
.page-template-template-cowork #pricing:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: #79C8AC; border-width: 20px; margin-left: -20px; }
.page-template-template-cowork footer #twitter { top:73px; }
.hover .page-template-template-cowork #photos:hover .nav { opacity:1; }
.hover .page-template-template-cowork #photos .nav a:hover { opacity:1; }
.hover .page-template-template-cowork #hero .button:hover { background:#3E4249; }
/* -------------------- Footer -------------------- */
footer { padding-top:60px; border-top:3px solid #EEE; clear:both; position:relative; background:#FFF; z-index:999; }
#thankyou { width:100%; font:16px/50px 'Montserrat',sans-serif; color:#FFF; letter-spacing:.2px; text-align:center; background:#79C8AC; position:absolute; top:120px; left:0; display:none; z-index:1; }
body.single-work footer { border:none; }
footer #details { font:200 14px/24px 'Montserrat',sans-serif; color:#888; letter-spacing:.3px; position:absolute; top:58px; }
footer #details a, footer #details i { color:#888; }
footer #details a.tel { color:#888 !important; }
footer #details strong { font-size:18px; letter-spacing:.5px; }
footer #details .social { margin-top:27px; font-size:20px; }
footer #details .social a { margin-right:5px; }
footer form { width:600px; margin:0 auto 60px; position:relative; }
footer form .fields { margin-bottom:40px; display:block; }
footer form .fields:after { content:""; clear:both; display:block; }
footer form .col { width:50%; padding:0 25px; float:left; box-sizing:border-box; }
footer form .col.left { padding-left:0; }
footer form .col.right { padding-right:0; }
footer form p.title { width:100%; height:36px; margin-bottom:25px; font:bold 26px/26px 'Montserrat',sans-serif; color:#52555C; text-align:center; }
footer form p.title span { color:#79C8AC; }
footer form p.title i { font-size:16px; color:#79C8AC; position:relative; top:-3px; }
footer form input, footer form textarea, footer form button { width:100%; height:42px; font:200 14px/20px 'Montserrat',sans-serif; letter-spacing:.3px; background:none; color:#888; border-bottom:1px solid #E5E5E5; box-sizing:border-box; position:relative; -webkit-appearance:none; -webkit-border-radius:0; border-radius:0; }
footer form input:first-of-type { border-top:1px solid #E5E5E5; }
footer form input.error { background:url(../../images/required.png) right no-repeat; }
footer form input#ThirstyTest { position:absolute; left:-9999px; }
footer form textarea { height:168px; line-height:22px; padding:11px 0; display:block; border-top:1px solid #E5E5E5; resize:none; }
footer form button { width:auto; height:50px; margin:auto; padding:0 30px; color:#FFF; font-size:14px; font-weight:bold; border:none; background:#79C8AC; text-transform:uppercase; letter-spacing:.8px; cursor:pointer; display:block; }
footer form.success #fields { opacity:.5; }
footer form.success button { background:#E5E5E5 !important; }
footer #twitter { position:absolute; top:56px; right:50px; }
footer #twitter .bubble { width:205px; padding-bottom:30px; font:200 12px/21px 'Montserrat',sans-serif; color:#888; letter-spacing:.2px; box-sizing:border-box; word-wrap:break-word; }
footer #twitter .bubble p { margin-bottom:32px; padding-bottom:30px; border-bottom:1px solid #E5E5E5; }
footer #twitter .bubble a { color:#888; }
footer #twitter .bubble .date { margin:-2px 0 0 15px; font:12px/18px 'Montserrat',sans-serif; letter-spacing:.5px; color:#888; float:left; }
footer #twitter .bubble .date span { font-size:11px; text-transform:uppercase; }
footer #twitter .bubble i { font-size:30px; float:left; }
footer #links { height:70px; font:200 12px/70px 'Montserrat',sans-serif; color:rgba(255,255,255,.4); letter-spacing:.7px; text-align:center; background:#3E4249; clear:both; }
footer #links a { margin-left:15px; color:rgba(255,255,255,.4); }
.hover footer #details a:hover, .hover footer #details a:hover i { color:#79C8AC; }
.hover footer form button:hover { background:#3E4249; }
.hover footer #twitter .bubble a:hover { color:#79C8AC; }
.hover footer #links a:hover { color:#FFF; }
/* -------------------- Scroll -------------------- */
#container.scroll header #logo { padding:20px 0 16px; background:#FFF; position:fixed; top:0; -webkit-transform: translateZ(0); }
#container.scroll header #logo.shadow { box-shadow:0 0 15px rgba(0,0,0,.15),0 0 1px rgba(0,0,0,.2); }
#container.scroll header .logo { cursor:pointer; }
#container.scroll header .logo .middle { width:7px; opacity:0; }
#container.scroll header:before, #container.scroll header:after { opacity:1; }
#container.scroll header i.fa-bars { color:#888; position:fixed !important; top:17px; -webkit-transform: translateZ(0); }
#container.scroll .back { color:#888; position:fixed !important; top:19px; -webkit-transform: translateZ(0); opacity:1; }
#container.scroll .creative { opacity:0; }
.hover #container.scroll header .logo:hover div:before { opacity:1; }
.hover header .logo.active div:before { opacity:0 !important; }
/* -------------------- Transitions -------------------- */
a, button, #services .col .icon span, i, #services .col h3, #services .col .circle, .hero .author .thumb img, .profile .face img, .page-template-template-cowork #photos .nav { transition:.2s ease; }
nav a { transition:.15s ease; }
header i.fa-bars { transition:color .2s ease; }
.back { transition:.2s ease; transition-property:background, opacity, color, box-shadow; }
#work figure a { transition:box-shadow .3s ease; }
#work .caption, #work, header .logo div:before, #work figure.featured a:before, #thoughts article .date, #thoughts article .caption, nav ul, #bar { transition:.3s ease; }
#work figure img, #thoughts article img { transition:transform .6s ease; }
#work figure .imgcontainer, #thoughts article .imgcontainer, .hero { transition:.6s ease; }
header, .logo div, #work, header .creative { transition:.4s ease; transition-property:width, opacity; }
.logo .left, .logo .right { transition-property:padding; }
/* -------------------- Responsive -------------------- */
@media only screen and (max-height:900px) {
.single-work .hero { height:calc(100% - 100px); }
}
@media only screen and (max-height:800px) {
nav a { font:200 30px/55px 'Montserrat',sans-serif; letter-spacing:0; }
#hero { height:calc(100% - 190px); }
}
@media only screen and (max-height:850px) and (min-width:700px) {
#services .col .icon { margin-bottom:45px; }
}
@media only screen and (max-height:600px) {
#hero { height:100%; }
nav a { font:200 20px/40px 'Montserrat',sans-serif; letter-spacing:.2px; }
}
@media only screen and (max-width:1500px) {
.page-template-template-cowork #photos, .page-template-template-cowork #photos .caroufredsel_wrapper, .page-template-template-cowork #photos img { height:350px !important; }
footer form { width:43%; }
.page-template-template-cowork footer #coworkmap { width:30%; }
}
@media only screen and (max-width:1300px) {
#services .col { padding:0 15px; }
#services .col:first-of-type { padding:0 30px 0 0; }
#services .col:last-of-type { padding:0 0 0 30px; }
section#work figure { width:20%; }
section#work figure:last-of-type { display:none; }
#instagram img { width:25%; }
#instagram img:nth-child(1n+5) { display:none; }
#thankyou { padding:15px 20px; font:200 14px/20px 'Montserrat',sans-serif; letter-spacing:.5px; box-sizing:border-box; }
}
@media only screen and (max-width:1200px) {
#categories li a { padding:0 10px; }
#categories li a span { display:none; }
#hero h1 br { display:none; }
.page-template-template-cowork #hero h1 br { display:block; }
.page-template-template-cowork #boxes .box { width:33.33%; }
}
@media only screen and (max-width:1024px) {
#hero #video { background:url('http://demosthenes.info/assets/images/polina.jpg') no-repeat; background-size:cover; }
#hero video { display:none; }
.home #services .col a:after { display:block; }
#work figure { width:33.33%; }
#work figure:nth-child(1n+10) { display:none; }
#blog.single-post #thoughts article { width:33.33%; }
#blog.single-post #thoughts article:last-of-type { display:none; }
.page-template-template-cowork #photos, .page-template-template-cowork #photos .caroufredsel_wrapper, .page-template-template-cowork #photos img { height:300px !important; }
.page-template-template-cowork #photos .nav { opacity:1; }
}
@media only screen and (max-width:1000px) {
#post article p.feature { padding:0; }
#project .details, #project #scroll { width:100%; padding:0; float:none; }
#project .images { width:100%; margin-bottom:60px; float:none; }
section#work figure { width:25%; }
section#work figure:nth-child(1n+5) { display:none; }
#thoughts article { width:50%; }
.home #thoughts article:last-of-type { display:none; }
footer form { width:100%; max-width:400px; }
footer form .col { width:100%; padding:0; }
footer form textarea { border-top:none; }
footer #details { width:100%; margin-bottom:60px; text-align:center; position:relative; top:auto; }
footer #twitter { display:none; }
#share #socialshare { width:auto; left:0; transform:translate(0); -webkit-transform:translate(0); }
.page-template-template-cowork footer form { padding-bottom:0 !important; }
.page-template-template-cowork footer #coworkmap { width:100%; height:400px; position:relative; top:auto; left:auto; border-top:1px solid #E2E2E2; background-position:center; }
}
@media only screen and (max-width:800px) {
#work { border-bottom:1px solid #E5E5E5; }
#work figure { width:50%; }
#work figure:nth-child(1n+7) { display:none; }
section#work figure { width:33.33%; }
section#work figure:nth-child(1n+4) { display:none; }
#project .col { width:100% !important; display:block; float:left; }
#project .col.single-work { padding:45px 0; }
#project .imggroup img { width:100%; margin-right:0 !important; }
#post #copy p.feature { padding:0; }
#instagram img { width:50%; }
#blog.single-post #thoughts article { width:50%; }
#blog.single-post #thoughts article:nth-child(1n+3) { display:none; }
#quotes { display:none; }
#project .images.logos img { width:50%; }
.page-template-template-cowork #boxes .box { width:50%; }
.page-template-template-cowork #photos, .page-template-template-cowork #photos .caroufredsel_wrapper, .page-template-template-cowork #photos img { height:250px !important; }
.page-template-template-cowork #photos { margin:0; padding:0; }
.page-template-template-cowork #photos .nav { right:30px; bottom:30px; }
.page-template-template-cowork .heading h1 br { display:none !important; }
}
@media only screen and (max-width:700px) {
#hero h1 { font:100 28px/40px 'Montserrat',sans-serif; letter-spacing:-.3px; }
.home #services { margin-bottom:10px; }
.home #services .centre:before { display:none; }
.home #services .col { width:100%; padding:0 0 50px !important; }
#services .centre:before { top:24px; }
.page-template-template-services #services .col .icon { height:50px; padding:0 5px; }
.page-template-template-services #services .col .circle { width:44px; height:44px; }
.page-template-template-services #services .col span { width:46px; height:46px; margin:-1px 0 0 -1px; font-size:20px; }
.hover .page-template-template-services #services .col a:hover span, .page-template-template-services #services .col.active span { width:46px; height:46px; margin:-1px 0 0 -1px; font-size:20px; }
#project .hero img { width:671px; height:250px; left:50%; margin-left:-335px; position:relative; }
#project .quote { padding:40px 40px 20px; font:14px/22px 'Montserrat',sans-serif; }
#project .quote p:first-of-type { font-size:18px; line-height:23px; }
#bar #subscribe { margin-left:-150px !important; right:auto; left:50%; }
#subscribe input { width:175px; }
#subscribebox #subscribe i { top:12px; left:15px; }
#subscribebox #subscribe input { width:175px; height:40px; padding:0 12px; font:12px/20px 'Montserrat',sans-serif; letter-spacing:.5px; }
#subscribebox #subscribe button { height:40px; padding:0 15px; font:bold 11px/35px 'Montserrat',sans-serif; }
#share { display:none; }
main#content .cols { margin-bottom:55px; }
main#content .col { width:100%; padding:0 !important; float:none; }
#featured { height:auto; }
#featured .image { width:100%; height:250px; position:relative; }
#featured .details { width:100%; padding:50px 0 1px; text-align:center; position:relative; top:auto; transform:none; -webkit-transform:none; }
#featured .details .more { margin-bottom:60px; text-align:center; }
#categories { display:none; }
}
@media only screen and (max-width:600px) {
.back { display:none; }
section#work figure { width:50%; }
section#work figure:nth-child(1n+3) { display:none; }
#thoughts article { width:100%; margin-bottom:20px; }
.home #thoughts article { margin-bottom:35px; }
.home #thoughts article:last-of-type { margin:0; display:block; }
#blog #thoughts article { padding-bottom:30px; }
#instagram img { width:50%; }
#articles .article { width:100%; padding:60px 0 0 !important; border:none !important; }
.page-template-template-cowork #boxes .box { width:100%; height:auto; margin-bottom:30px; padding:0 !important; }
}
@media only screen and (max-width:500px) {
#work figure { width:100%; }
#work figure:nth-child(1n+5) { display:none; }
section#work { display:none; }
#project .visit a { display:block; }
.more a { width:calc(100% - 20px); }
footer form button { width:100%; }
#quotes .item { padding:0 50px; }
#quotes #quotenav { display:none; }
footer #links span { display:none; }
body.single-work footer { border-top:3px solid #EEE; }
.profile { width:100%; padding:0; }
#blog.single-post #thoughts article { width:100%; padding:0 20px !important; }
main#content h1, #project .intro h1 { font:35px/35px 'Montserrat',sans-serif; letter-spacing:-1.2px; }
.hero h1, .hero .h1 { font:100 35px/45px 'Montserrat',sans-serif; letter-spacing:.8px; }
#project .images.logos img { width:100%; }
.page-template-template-cowork #copy { margin:20px auto 50px; font:200 18px/26px 'Montserrat',sans-serif; }
.page-template-template-cowork #photos, .page-template-template-cowork #photos .caroufredsel_wrapper, .page-template-template-cowork #photos img { height:200px !important; }
}
@media only screen and (max-width:400px) {
.centre { padding:0 30px; }
header i.fa-bars { right:20px; }
#work { padding-left:20px; padding-right:20px; }
#thoughts .centre { padding-left:10px; padding-right:10px; }
section#work h2 { margin-bottom:15px; }
#project .col.single-work { padding:25px 0; }
#project h1 { font-size:32px; line-height:38px; letter-spacing:-.7px; }
#project h1 span { margin-top:6px; }
#project img { margin-bottom:30px; }
#project .visit { margin:0 0 30px; }
#quotes .item { padding:0 30px; }
#instagram { margin:15px 30px 35px; }
footer form p.title { height:30px; font:bold 22px/22px 'Montserrat',sans-serif; }
.ssba.ssba-wrap { width:300px; }
.ssba a { margin-left:12px; }
}