/*
Theme Name: Zahlenwerkstatt
Theme URI: https://www.foxcomputers.ch
Author: Fox Computers | Michael Fuchs
Author URI: https://www.foxcomputers.ch
Description: Theme für die Zahlenwerkstatt
Version: 1.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: zahlenwerkstatt

Zahlenwerkstatt WordPress Theme © 2011-2019 Fox Computers
Zahlenwerkstatt is distributed under the terms of the GNU GPL
*/

@font-face {
    font-family: 'ralewaylight';
    src: url('fonts/raleway-light-webfont.woff2') format('woff2'),
         url('fonts/raleway-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewayregular';
    src: url('fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('fonts/raleway-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewayextrabold';
    src: url('fonts/raleway-extrabold-webfont.woff2') format('woff2'),
         url('fonts/raleway-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}

.wp-caption, .wp-caption-text, .gallery-caption {
	display: none;
}
.alignright {
	float:right;
	margin:0 0 20px 20px;
}
.alignleft {
	float:left;
	margin:0 20px 20px 0;
}
.aligncenter {
	display: block;
	margin-left:auto;
	margin-right:auto;
}
.screen-reader-text {
	clip:rect(1px, 1px, 1px, 1px);
	position:absolute !important;
}
#catapult-cookie-bar {
    font-family: 'ralewaylight' !important;
}

a {
	outline:none;
}
img {
	max-width:100%;
	height:auto;
}

html {
    height: 100%;
    overflow: hidden;
}
body {
    background:#dce0e3;
    height: 100%;
    overflow: auto;
}
#wrapper {
    max-width: 1066px;
    margin:0 auto;
    height: auto; 
    min-height: calc(100vh - 75px);
    background:#4b555a;
    padding-bottom:75px;
}

#header {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index: 9999;
}
#header-inner {
    max-width:1066px;
    margin:0 auto;
    background:#fff;
    position: relative;
    height:90px;
}

#logo {
    background:#000;
    display: inline-block;
    margin-left:36px;
}
#logo img {
    display: block;
    height:90px;
    width:auto;
}
#logo-bottom {
    position: absolute;
    top:89px;
    left:36px;
    opacity:1;
    transition: opacity 1s ease;
}
#logo-bottom img {
    display: block;
    height:92.365px;
    width:auto;
}
#logo-bottom.hide {
    opacity:1;
    transition: opacity 1.5s ease;
}

#menu {
    position: absolute;
    top:50%;
    right:25px;
    margin-top:-13px;
}
#menu ul {
    text-align: right;
    font-size:0;
}
#menu ul li {
    display: inline-block;
    margin:0 2px;
}
#menu ul li a {
    font-family: 'ralewayregular';
    font-size:15px;
    line-height:27px;
    color:#000;
    text-decoration: none;
    text-transform: uppercase;
    padding:5px 7px 4px 7px;
    background:#fff;
    transition: background .3s ease;
}
#menu ul li a:hover, #menu ul li.current-menu-item a {
    background:#ffdd00;
    transition: background .3s ease;
}
#menu ul li .sub-menu {
    display: none;
}

#header-img img {
    display: block;
}

#container {
    padding-top:90px;
}

#content {
    padding-top:30px;
}
.home #content {
    padding:40px 0 10px 0;
}
#content-left {
    float:left;
    width:192px;
    padding-left:36px;
}
#content-right {
    float:right;
    width:calc(100% - 300px);
    padding:0 36px 30px 36px;
}
#content-right.work {
    padding:0 36px 10px 36px;
}

#home-block, .page-template-default article, .page-template-page-team article, .error404 article {
    padding:0 36px 10px 268px;
}

#content h1 {
    font-family: 'ralewayextrabold';
    font-size:34px;
    line-height: 43px;
    color:#ffdd00;
    margin:0 0 20px 0;
    text-transform: uppercase;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
#content h2 {
    font-family: 'ralewayextrabold';
    font-size:34px;
    line-height: 43px;
    color:#ffdd00;
    text-transform: uppercase;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
#content .home-box h2 {
    line-height: 38px;
}
#content h3 {
    font-family: 'ralewayextrabold';
    font-size:17px;
    line-height: 24px;
    color:#ffdd00;
    text-transform: uppercase;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
#content h1 a, #content h2 a, #content h3 a, #content h1 a:hover, #content h2 a:hover, #content h3 a:hover {
    color:#ffdd00;
    text-decoration: none;
}
#content .nutzen-content h2, #content .nutzen-content h3 {
    color:#ffdd00;
}
#content h3.side-title {
    color:#fff;
}
#content p {
    font-family: 'ralewaylight';
    font-size:17px;
    line-height: 24px;
    color:#fff;
    margin:0 0 30px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
#content .nutzen-content p {
    color:#ffdd00;
}
#content p a, #content ul li a, #content ol li a {
    color:#fff;
}
#content p a:hover, #content ul li a:hover, #content ol li a:hover {
    text-decoration: none;
}
#content .adress p {
    word-wrap:normal;
    overflow-wrap:normal;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
#content .adress p a {
    text-decoration: none;
}
#content .adress p a:hover {
    text-decoration: underline;
}
#content ul, #content ol {
    margin:0 0 30px 0;
    padding:0 0 0 20px;
}
#content ul li {
    font-family: 'ralewaylight';
    font-size:17px;
    line-height: 24px;
    color:#fff;
    list-style: square;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
#content ol li {
    font-family: 'ralewaylight';
    font-size:17px;
    line-height: 24px;
    color:#fff;
    list-style: decimal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
#content ul.side-links {
    padding:0;
}
#content ul.side-links li {
    list-style: none;
}

#team-block {
    display: flex;
    flex-wrap: wrap;
    padding:15px 0;
}
#team-block .team-box {
    width:calc(25% - 30px);
    margin:0 0 25px 40px;
}
#team-block .team-box:nth-child(4n+1) {
    margin:0 0 25px 0;
}
#team-block .team-box img {
    margin:0 0 5px 0;
    display: block;
}
#content #team-block .team-box h3 {
    font-family: 'ralewaylight';
    font-size:17px;
    line-height: 24px;
    color:#fff;
    text-transform: none;
}

.kontakt-content {
    display: flex;
    flex-wrap: wrap;
    padding-top:30px;
}
.kontakt-content .kc-left {
    width:calc(50% - 20px);
    margin-right:40px;
}
.kontakt-content .kc-right {
    width:calc(50% - 20px);
}
.kontakt-content .kc-right img {
    display: block;
}
.adress {
    padding-top:382px;
}
.kontakt-content .kc-right .adress {
    display: none;
}

.form-elements {
    display: flex;
    flex-wrap: wrap;
}
.form-element-label {
    width:120px;
    margin:0 0 5px 0;
}
.form-element-label label {
    font-family: 'ralewaylight';
    font-size:17px;
    line-height: 29px;
    color:#fff;
}
.form-element {
    width:calc(100% - 120px);
    margin:0 0 10px 0;
}
.wpcf7-text {
    -webkit-appearance:none;
    appearance:none;
    border-radius: 0;
    border:none;
    background:#fff;
    width:calc(100% - 10px);
    padding:3px 5px;
    font-family: 'ralewaylight';
    font-size:17px;
    line-height: 24px;
    color:#4b555a;
}
.wpcf7-textarea {
    -webkit-appearance:none;
    appearance:none;
    border-radius: 0;
    border:none;
    background:#fff;
    width:calc(100% - 10px);
    max-width:calc(100% - 10px);
    height:192px;
    padding:3px 5px;
    font-family: 'ralewaylight';
    font-size:17px;
    line-height: 24px;
    color:#4b555a;
    margin:0 0 8px 0;
}
.wpcf7-submit {
    float:right;
    -webkit-appearance:none;
    appearance:none;
    border-radius: 0;
    border:none;
    font-family: 'ralewaylight';
    font-size:17px;
    line-height: 24px;
    color:#000;
    padding:3px 40px;
    background:#ffdd00;
    cursor: pointer;
    transition: all .3s ease;
}
.wpcf7-submit:hover {
    background:#000;
    color:#ffdd00;
    transition: all .3s ease;
}
.wpcf7-not-valid-tip {
    font-family: 'ralewayregular';
    font-size:15px;
    line-height: 22px;
    padding:2px 0 0 0;
    color:#ffdd00 !important;
}
div.wpcf7-response-output {
    margin: 2em 0 1em 0 !important;
    padding: 15px !important;
    font-family: 'ralewayregular';
    font-size:15px;
    line-height: 22px;
    background:#fff;
    text-align: center;
}
div.wpcf7-mail-sent-ok {
	border: 2px solid #398f14 !important;
	color:#398f14 !important;
}
div.wpcf7-mail-sent-ng {
	border: 2px solid #f00 !important;
	color:#f00 !important;
}
div.wpcf7-spam-blocked {
	border: 2px solid #ffa500 !important;
	color:#ffa500 !important;
}
div.wpcf7-validation-errors {
	border: 2px solid #f00 !important;
	color:#f00 !important;
}
.ajax-loader {
    display: none !important;
}

#footer {
    max-width:994px;
    margin-top: -75px;
    margin-left:auto;
    margin-right:auto;
    background:#000;
    padding:28px 36px;
}
#footer #fmenu ul {
    text-align: right;
    font-size:0;
}
#footer #fmenu ul li {
    display: inline-block;
}
#footer #fmenu ul li:before {
    content:"|";
    font-family: 'ralewaylight';
    font-size:14px;
    line-height: 19px;
    color:#ffdd00;
    margin:0 10px;
}
#footer #fmenu ul li:nth-child(1):before {
    content:"";
    display: none;
}
#footer #fmenu ul li a {
    font-family: 'ralewaylight';
    font-size:14px;
    line-height: 19px;
    color:#fff;
    text-decoration: none;
    text-transform: uppercase;
}
#footer #fmenu ul li a:hover {
    color:#ffdd00;
}

#menu-toggle {
    display: none;
}
#mobile-menu {
    width:380px;
    height:100vh;
    background:#4b555a;
    position: fixed;
    top:0;
    right:-420px;
    z-index: 9999999999;
    box-shadow: 0px 0px 25px -2px #000;
    transition:all .5s ease;
}
#mobile-menu.mopen {
    right:0;
    transition:all .5s ease;
}
#mmenu {
    padding-top: 80px;
}
#mmenu ul li {
    border-bottom:1px solid #000;
}
#mmenu ul li:nth-child(1) {
    border-top:1px solid #000;
}
#mmenu ul li a {
    font-family: 'ralewaylight';
    font-size:23px;
    line-height: 48px;
    color:#fff;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    padding:0 32px;
}
#mmenu ul li.current-menu-item a, #mmenu ul li a:hover {
    background:#ffdd00;
    color:#000;
}

.responsive-map {
    overflow:hidden;
    padding-bottom:88.25%;
    position:relative;
    height:0;
}
.responsive-map iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

::-webkit-scrollbar {
    display: none !important;
}

#header-img img.tablet-img, #header-img img.mobile-img {
    display: none;
    visibility: hidden;
}

@media only screen and (max-width:1066px) {
    #header-inner {
        height: 80px;
    }
    #menu {
        display: none;
    }
    #menu-toggle {
        display: block;
        position: absolute;
        top:50%;
        right:28px;
        margin-top:-15px;
        cursor: pointer;
    }
    #logo {
        margin-left:28px;
    }
    #logo img {
        height:80px;
    }
    #logo-bottom {
        top:79px;
        left: 28px;
    }
    #logo-bottom img {
        height:82px;
    }
    #container {
        padding-top:80px;
    }
    #content-left {
        padding-left:28px;
    }
    #content-right {
        width:calc(100% - 292px);
        padding:0 28px 30px 28px;
    }
    #content-right.work {
        padding:0 28px 10px 28px;
    }
    #home-block, .page-template-default article, .page-template-page-team article, .error404 article {
        padding:0 28px 10px 260px;
    }
    #footer {
        padding:28px 28px;
    }
}
@media only screen and (max-width:1024px) {
    #content-left {
        float:none;
        width:calc(100% - 56px);
        padding-left:28px;
        padding-right:28px;
    }
    #content-right {
        float:none;
        width:calc(100% - 56px);
    }
    #home-block, .page-template-default article, .page-template-page-team article {
        padding:0 28px 10px 28px;
    }
    .error404 article {
        padding:80px 28px 10px 28px;
    }
    #team-block .team-box {
        width:calc(25% - 24px);
        margin:0 0 25px 32px;
    }
    .kontakt-content .kc-left {
        width:calc(50% - 16px);
        margin-right:32px;
    }
    .kontakt-content .kc-right {
        width:calc(50% - 16px);
    }
    .adress {
        padding-top: 0;
    }
    #content {
        padding-bottom:101px;
    }
    #content-left .adress {
        display: none;
    }
    .kontakt-content .kc-right .adress {
        display: block;
        padding-top:18px;
    }
    #logo-bottom.hide {
        opacity:0;
        transition: opacity 1.5s ease;
    }
    .responsive-map {
        padding-bottom:50.25%;
    }
}
@media only screen and (max-width:768px) {
    #team-block .team-box {
        width:calc(33.333% - 21.333px);
        margin:0 0 25px 32px;
    }
    #team-block .team-box:nth-child(4n+1) {
        margin:0 0 25px 32px;
    }
    #team-block .team-box:nth-child(3n+1) {
        margin:0 0 25px 0;
    }
    .form-elements {
        display: block;
    }
    .form-element-label {
        width:100%;
        margin:0;
    }
    .form-element-label label {
        line-height: 24px;
    }
    .form-element {
        width:100%;
        margin:0 0 10px 0;
    }
    .responsive-map {
        padding-bottom:100%;
    }
}
@media only screen and (max-width:712px) {
    #header-img img.tablet-img {
        display: block;
        visibility: visible;
    }
    #header-img img.default-img {
        display: none;
        visibility: hidden;
    }
}
@media only screen and (max-width:480px) {
    #menu-toggle {
        right:24px;
    }
    #logo {
        margin-left:24px;
    }
    #logo-bottom {
        left: 24px;
    }
    #content-right.work {
        padding:0 24px 10px 24px;
    }
    #footer {
        padding:28px 24px;
    }
    #content-left {
        padding-left:24px;
        padding-right:24px;
    }
    #content-right {
        float:none;
        width:calc(100% - 48px);
        padding:0 24px 30px 24px;
    }
    #home-block, .page-template-default article, .page-template-page-team article {
        padding:0 24px 10px 24px;
    }
    .error404 article {
        padding:80px 24px 10px 24px;
    }
    #team-block .team-box {
        width:calc(50% - 16px);
        margin:0 0 25px 32px;
    }
    #team-block .team-box:nth-child(4n+1), #team-block .team-box:nth-child(3n+1) {
        margin:0 0 25px 32px;
    }
    #team-block .team-box:nth-child(2n+1) {
        margin:0 0 25px 0;
    }
    .kontakt-content {
        display: block;
    }
    .kontakt-content .kc-left {
        width:100%;
        margin-right:0;
        margin-bottom:32px;
    }
    .kontakt-content .kc-right {
        width:100%;
    }
    .kontakt-content .kc-right .adress {
        padding-top:0;
    }
    #header-img img.mobile-img {
        display: block;
        visibility: visible;
    }
    #header-img img.tablet-img, #header-img img.default-img {
        display: none;
        visibility: hidden;
    }
}
@media only screen and (max-width:380px) {
    #mobile-menu {
        width:100%;
        height:100vh;
        background:#4b555a;
        position: fixed;
        top:0;
        right:-420px;
        z-index: 9999999999;
        box-shadow: 0px 0px 25px -2px #000;
        transition:all .5s ease;
    }
}
@media only screen and (max-width:320px) {
    #team-block .team-box {
        width:100%;
        margin:0 0 25px 0;
    }
    #team-block .team-box:nth-child(4n+1), #team-block .team-box:nth-child(3n+1), #team-block .team-box:nth-child(2n+1) {
        margin:0 0 25px 0;
    }
    #footer #fmenu ul li {
        display: block;
    }
    #footer #fmenu ul li:nth-child(1) {
        margin-bottom:5px;
    }
    #footer #fmenu ul li:before, #footer #fmenu ul li:nth-child(1):before {
        content:"";
        display: none;
    }
}