/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

body { line-height: 1.5; }

table { border-collapse: separate; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; }

table, td, th { vertical-align: top; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }

blockquote, q { quotes: "" ""; }

a img { border: none; }

/* apply a natural box layout model to all elements, but allowing components to change */
html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

/* typography.css */
body { font-size: 87.5%; color: #222; font-family: "Roboto", "Verdana", "Helvetica Neue", Helvetica, Arial, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }

h2 { font-size: 2em; margin-bottom: 0.75em; }

h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }

h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }

h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }

h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }

p { margin: 0 0 1.5em; }

p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus, a:hover { color: #000; }

a { color: #009; text-decoration: underline; }

blockquote { margin: 0 0 0 1.5em 0; color: #666; font-style: italic; }

strong { font-weight: bold; }

em, dfn { font-style: italic; }

dfn { font-weight: bold; }

sup, sub { line-height: 0; }

abbr, acronym { border-bottom: 1px dotted #666; }

address { margin: 0 0 1.5em; font-style: italic; }

del { color: #666; }

pre { margin: 1.5em 0; white-space: pre; }

pre, code, tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

li ul, li ol { margin: 0 1.5em; }

ul, ol { margin: 0 1.5em 1.5em 1.5em; }

ul { list-style-type: disc; }

ol { list-style-type: decimal; }

dl { margin: 0 0 1.5em 0; }

dl dt { font-weight: bold; }

dd { margin-left: 1.5em; }

table { margin-bottom: 1.4em; width: 100%; }

th { font-weight: bold; }

thead th { background: #c3d9ff; }

th, td, caption { padding: 4px 10px 4px 5px; }

tr.even td { background: #e5ecf9; }

tfoot { font-style: italic; }

caption { background: #eee; }

hr { background: #ddd; color: #ddd; clear: both; float: none; width: 100%; height: .1em; margin: 0 0 1.45em; border: none; }

hr.space { background: #fff; color: #fff; }

.clearfix:after, .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }

.clearfix, .container { display: block; }

/* general */
body { background-color: #F2F2F0; font-size: 100%; }

@media screen and (min-width: 640px) { body { font-size: 112.5%; } }
.container { max-width: 1360px; margin: 0 auto; padding-left: .5rem; padding-right: .5rem; }

.container--small { max-width: 300px; }

.footer { padding-top: 1.5em; padding-bottom: 1.5em; text-align: center; font-size: .75em; color: #dadad5; background-color: #5c5a5e; }

.underline { text-decoration: underline; }

/* blog */
.post { margin-bottom: 3em; border-left: .5em solid white; padding-left: 2em; }

.post__header { border-left: .5em solid white; padding-left: 2em; }

.post__meta { font-size: .75em; color: #5c5a5e; }

.post__content img, .post__content iframe { width: 100%; height: auto; max-width: 640px; }

.post__author { text-transform: uppercase; letter-spacing: .005em; }

/* sidebar */
.sidebar { padding-top: 3em; padding-bottom: 1em; font-size: .75em; line-height: 1.25em; background-color: #dadad5; color: #5c5a5e; border-bottom: 1em solid #E7501E; }

.side.twitter { margin-bottom: 2em; }

.side > p { margin-bottom: 1em; }

.find_us { margin-bottom: 4em; }

/* Headings */
h1 { margin: 0 0 1em 0; padding-top: 0; font-family: "Braggadocio", "Roboto", "Verdana", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #E7501E; font-size: 3em; text-transform: uppercase; letter-spacing: .005em; text-align: left; }
h1 span { display: block; font-size: .75em; text-transform: none; }

h2 { color: #5c5a5e; font-weight: bold; line-height: 1.2em; }

h3 { font-size: 1.25em; font-weight: bold; margin-bottom: .5em; color: #E7501E; }

.subheader { margin-bottom: 2em; padding-top: 2em; padding-bottom: 2em; background-color: #f9f9f8; }

.btn { padding: .5em 1em; display: inline-block; background-color: #E7501E; color: #FFF; border-radius: 5px; font-size: 1rem; }
.btn:hover, .btn:focus { background-color: #f19677; color: #FFF; text-decoration: none; }

.teaser { max-width: 640px; margin: 0 auto; font-size: 1.25em; font-weight: bold; }

.logo { width: 161px; height: 111px; margin: 60px 0 130px -81px; }

.logo a { display: block; width: 161px; height: 111px; text-indent: -9000px; background: #F2F2F0 url("../images/coup-logo.svg") no-repeat 0 100%; background-size: 161px; }
.logo a:hover { transform: rotateY(360deg); transition: .6s ease-in-out; transform-style: preserve-3d; }

.header { background-color: #FFF; padding-top: 3em; font-size: .75em; text-align: center; overflow: hidden; }

.header__logo { width: 140px; margin: -.75em auto 2em; }
.header__logo a { display: block; }
.header__logo svg { width: auto; }

.header__info { width: 260px; margin: 0 auto 2em; color: #5c5a5e; }

.header__info--01, .header__info--02 { display: inline-block; width: 48%; text-align: left; }

.header__info--01 { padding-right: 1em; }

.header__info--02 { padding-left: 1em; }

@media screen and (min-width: 800px) { .header__logo { float: left; margin-right: 3em; }
  .header__info { float: left; }
  .navigation { float: right; } }
.navigation { overflow: hidden; list-style: none; }
.navigation a { display: inline-block; position: relative; margin-bottom: 2em; padding: 1.5em 1.2em 1em 1.2em; text-decoration: none; text-align: center; color: #5c5a5e; text-transform: uppercase; letter-spacing: .005em; }
.navigation a:after { content: ''; display: block; width: .5em; height: .5em; position: absolute; bottom: 0; left: calc(50% - .25em); background-color: #F2F2F0; border-radius: 50%; }
.navigation a:hover, .navigation a:focus { text-decoration: none; }
.navigation a:hover:after, .navigation a:focus:after { background-color: #5c5a5e; }
.navigation a.active:after { background-color: #E7501E; }

/* main */
.main { max-width: 640px; margin-right: auto; margin-left: auto; padding: 3em 0; }

/* links */
a { -webkit-transition-property: color, background-color; -webkit-transition-duration: 0.2s; color: #E7501E; text-decoration: none; }

a:hover, a:active { color: #E7501E; text-decoration: underline; }

/* on_black links */
a.on_black:link, a.on_black:visited { color: #FFF; }

a.on_black:hover, a.on_black:active { color: #E7501E; text-decoration: underline; }

/* grey links (footer) */
a.grey_link:link, a.grey_link:visited { color: #89878a; }

a.grey_link:hover, a.grey_link:active { color: #f19677; }

/* help links */
a.help_link { cursor: help; color: #000; text-decoration: none; border-bottom: 1px dotted #f19677; }

a.help_link:hover { color: #E7501E; }

/* Events */
.big_list { list-style: none; margin: 0; padding: 0; overflow: hidden; }

.event { overflow: hidden; color: #000; background-color: #FFF; background: #FFF url("../images/bg_events.png") no-repeat 100% 100%; margin-bottom: 1em; padding: 10px; }

.event .left, .event .right { padding: 0; }

.event .left { width: 110px; float: left; }

.event .right { width: 340px; margin-left: 120px; }

/* contact page */
.contact { overflow: hidden; color: #000; background-color: #FFF; padding: 10px; margin-bottom: 1em; }

.contact .left, .contact .right { width: 220px; padding: 0; margin-bottom: 1em; }

.contact .left { float: left; }

.contact .right { width: 210px; margin-left: 240px; border-left: 1px dotted #E7501E; padding-left: 10px; }

hr.orange { border: 1px dotted #E7501E; margin: 0; background-color: transparent; }

/* widgets */
.twitter .bird { height: 40px; margin: -1em 0 -1em -3em; padding: 0; background: transparent url("../images/coup_twitterbird.png") no-repeat 10px 100.5%; }

/* facebook like button */
.side iframe { display: block; float: right; margin: 0 0 1.5em 0; }

/* upstream link */
.upstream { min-height: 40px; padding-top: 5px; padding-left: 70px; cursor: pointer; color: #000; background: transparent url("../images/logos_sidebar.png") no-repeat 0 -126px; }

/* cobot link */
.cobot { min-height: 50px; padding-left: 70px; cursor: pointer; color: #000; background: transparent url("../images/logos_sidebar.png") no-repeat 0 -386px; }

.tweets { clear: both; }

/* hallenprojekt badge */
.hallenprojekt_badge ul.coworkers { list-style: none; margin: 0 0 1em 0; padding: 0; }

.hallenprojekt_badge ul.coworkers li { margin-bottom: 1em; }

.hallenprojekt_badge ul.coworkers li a:link, .hallenprojekt_badge ul.coworkers li a:visited { text-decoration: none; }

.logo_hallenprojekt { height: 45px; width: 62px; float: left; margin: 14em 0 0 0; padding: 0; background: transparent url("../images/logos_sidebar.png") no-repeat 100% 0; }

/* pricing */
.pricing { border: 4px solid #FFF; border-collapse: collapse; font-size: .65em; }
.pricing td, .pricing th { width: 25%; border-bottom: 1px dotted #f19677; background: #FFF; }
.pricing th { background: #FFF; }
.pricing .last td, .pricing .last th { border-bottom: none; }

.table_caption { font-size: .75em; line-height: 1.25; color: #5c5a5e; }

@media screen and (min-width: 640px) { .pricing { border-width: 10px; font-size: 1em; } }
/* photos */
ul.photos { list-style-type: none; margin-left: 0px; margin-right: 0px; }

ul.photos li { display: inline-block; margin-right: 10px; margin-bottom: 10px; opacity: 0.4; -webkit-transition-property: opacity; -webkit-transition-duration: 0.5s; }

ul.photos li:hover { opacity: 1; }

/* about / coworker list */
#coworkers_widget ul { list-style: none; margin: 0 0 1.5em 0; padding: 0; }

#coworkers_widget ul li { margin: 0 0 0.75em 0; overflow: hidden; line-height: 2.4; }

#coworkers_widget ul li img, #coworkers_widget ul li p { float: left; margin: 0 1em 0 0; }

#coworkers_widget ul li span { color: #999; }

.iframe-container { position: relative; padding-bottom: 75%; padding-top: 35px; height: 0; overflow: hidden; }
.iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/** jQuery lightBox plugin This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) and adapted to me for use like a plugin from jQuery. @name jquery-lightbox-0.5.css @author Leandro Vieira Pinho - http://leandrovieira.com @version 0.5 @date April 11, 2008 @category jQuery plugin @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin */
#jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; }

#jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }

#jquery-lightbox a img { border: none; }

#lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#lightbox-container-image { padding: 10px; }

#lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

#lightbox-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#lightbox-container-image-box > #lightbox-nav { left: 0; }

#lightbox-nav a { outline: none; }

#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; }

#lightbox-nav-btnPrev { left: 0; float: left; }

#lightbox-nav-btnNext { right: 0; float: right; }

#lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; }

#lightbox-container-image-data { padding: 0 10px; color: #666; }

#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; }

#lightbox-image-details-caption { font-weight: bold; }

#lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; }

#lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: 0.7em; }