@charset "UTF-8"; /* CSS Document */ p { font-family: 'PT Sans', arial, verdana;} a, a:focus, a:hover { text-decoration: none; outline: none; } html { position: relative; min-height: 100%; } body {margin-bottom: 120px;} h3 { margin-top: 0px; margin-bottom: 50px; font-family: 'Oswald', sans-serif; font-size: 2.5em; color: #121417; text-transform: uppercase; } /*Preloader*/ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 10000; } .pre-bg { background: #111; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .spinner{ width: 80px; height: 80px; border: 2px solid #223F7B; border-top:3px solid #21a0db; border-radius: 100%; position: absolute; top:0; bottom:0; left:0; right: 0; margin: auto; animation: spin 1s infinite linear; z-index: 10001; } @keyframes spin { from{ transform: rotate(0deg); }to{ transform: rotate(360deg); } } /*Navbar*/ .navbar-default { margin-bottom: 0px; width: 100%; height: 50px; background-color: rgba(0,0,0,0.8); border: 0px; border-radius: 0 !important; } .nav-container { max-width: 1170px; margin: 0 auto; } .navb_logo {float: right;} .logo { width: 50px; height: 50px; background-image: url(../img/Zoesch_Logo_white.png); background-size: 30px 30px; background-position: right; background-repeat: no-repeat; } .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { padding-top: 0px; padding-bottom: 0px; padding-left: 7px; padding-right: 0px; } .navbar-right {margin-right: 15px} .navbar-default .navbar-collapse, .navbar-default .navbar-form {border: none;} .navbar-nav li a { height: 50px; line-height: 50px; padding: 0 25px; background-color: transparent; font-family: 'PT Sans', sans-serif; font-size:1em; text-align: center; color: #fff; } .navbar-default .navbar-nav>li>a { color: #fff;} .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #fff; border-bottom: 3px solid #fff; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: #fff; background-color: transparent; border-bottom: 3px solid #fff; } button.navbar-toggle.collapsed, .navbar-default .navbar-toggle{ width: 40px; height: 40px; background-color: transparent; border: 0px; padding: 3px; margin: 5px 8px; } .navbar-default .navbar-toggle:focus {background-color: transparent;} .navbar-default .navbar-toggle:hover {background-color: rgba(0,0,0,0.2);} .list-icon i { color: #fff; font-size: 1.5em; vertical-align: middle; } /*test*/ .test { height: 100%; width: 100%; margin: 0px; padding: 0px; color: #121417; } .test-content { margin-top: 200px; width: 100%; max-width: 1170px; height: 100%; min-height:1200px; margin: 0 auto; } /*Header*/ header { width: 100%; background: url(../img/header_felix.jpg) left top no-repeat; background-size: cover; } .header-content { width: 100%; max-width: 1170px; height: 100%; min-height:1200px; margin: 0 auto; } .welcome h2 { font-size: 6em; color: #fff; font-family: 'Oswald', sans-serif; text-align: right; margin-top: 500px; margin-right: 2%; } /* About me */ .about { height: 100%; width: 100%; margin: 0px; padding: 0px; color: #121417; } .about-content { width: 100%; max-width: 1170px; margin: 0 auto; padding: 60px 30px; } .about-content h4 { font-family: 'Oswald', sans-serif; font-size: 1.8em; color: #121417; text-transform: uppercase; } .about-content h4 small { color: #121417; font-size: .6em; border-left: 1px solid #121417; padding-left: 5px; margin-left: 5px; text-transform: uppercase; } .about-content p { color: #121417; font-size: 1.5em; } .about-content a, .about-content i { color: #494747; font-size: 0.8em; } .about-content a:hover, .about-content a:focus {color: #4496DE;} /* Offers */ .offers { height: 100%; width: 100%; margin: 0px; padding: 0px; background-color: #2C3034; } .offers-content { width: 100%; max-width: 1170px; margin: 0 auto; padding: 60px 30px; color: #fff; } .offers-content h3 {color: #fff;} .offers i { display: block; text-align: center; font-size: 3.5em; margin-top: 15px; } .offers h4 { text-align: center; font-family: 'Oswald', sans-serif; font-size: 2em; text-transform: uppercase; margin-bottom: 15px; } .offers p { font-family: 'PT Sans', sans-serif; font-size: 1em; text-align: left; padding: 0 15px; margin-bottom: 25px; } .btn-primary { display: block; max-width: 70%; margin-left: auto; margin-right: auto; margin-bottom: 50px; color: #fff; background-color: #4496DE; border: none; outline: none; } .btn-primary:hover, .btn-primary:focus { background-color: #4496DE; -webkit-box-shadow: 0px 0px 7px 1px #3498db; -moz-box-shadow: 0px 0px 7px 1px #3498db; box-shadow: 0px 0px 7px 1px #3498db; } /* gallery */ .gallery { height: 100%; width: 100%; margin: 0px; padding: 0px; } .gallery-content { width: 100%; max-width: 1170px; margin: 0 auto; padding: 60px 30px 0px 30px; } /* Clients */ .clients { height: 100%; width: 100%; min-height: 500px; margin: 0px; padding: 0px; background-color: #2C3034; } .clients-content { width: 100%; max-width: 1170px; margin: 0 auto; padding: 60px 30px; } .clients-content h3 {color: #fff;} .clients img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } /* Contact */ .contact { height: 100%; width: 100%; margin: 0px; padding: 0px; background-color: #fff; } .contact-content { width: 100%; max-width: 1170px; margin: 0 auto; padding: 60px 30px; } .contact-content h3 {color: #121417;} .form-bg {padding: 0px;} .contact form {width: 100%;} .contact .first_input, .contact .email, .contact .telefon { height: 50px; width: 100%; padding: 0px 20px; vertical-align: top; border-radius: 5px; color: #484848; font-family: 'Roboto', arial, verdana; font-size: 1.3em; background-color: #E3E3E3; } .email, .telefon {margin-top: 20px;} .contact textarea { width: 100%; max-width: 1070px; height: 220px; padding: 10px 20px; vertical-align: top; border-radius: 5px; margin: 20px 0px; color: #484848; font-family: 'Roboto', arial, verdana; font-size: 1.3em; background-color: #E3E3E3; } .contact input:hover, .contact input:focus, .contact textarea:hover, .contact textarea:focus { border: 2px solid #3498db; -webkit-box-shadow: 0px 0px 7px 1px #3498db; -moz-box-shadow: 0px 0px 7px 1px #3498db; box-shadow: 0px 0px 7px 1px #3498db; } .has-error .form-control { border: 2px solid #a94442; -webkit-box-shadow: 0px 0px 7px 1px #a94442; -moz-box-shadow: 0px 0px 7px 1px #a94442; box-shadow: 0px 0px 7px 1px #a94442; } .cap, .snd { margin-bottom: 30px; margin-top: 20px; padding: 0px; min-height: 78px; } .send { width: 304px; margin-top: auto; margin-bottom: auto; height: 60px; color: #fff; font-family: 'Oswald', sans-serif; font-size: 1.3em; padding: 0px 20px; vertical-align: middle; border: none; border-radius: 5px; outline: none; background-color: #3498db; float: right; } .space { width: 50px; padding: 0px; } .contact .adr {padding: 0px;} .zlogo { height: 45px; width: 45px; line-height: 45px; display: inline-block; vertical-align: middle; margin-bottom: 20px; margin-top: 0px; margin-left: -5px; } .contact .adr h4 { color: #2D2F32; font-family: 'Roboto', arial, verdana; font-size: 1.8em; line-height: 45px; margin-bottom: 20px; margin-top: 0px; display: inline-block; vertical-align: middle; } .contact .adr .first { color: #3498db; font-size: 1.6em; padding-right:18px; text-align: center; vertical-align: top; } .contact .adr td {padding-bottom: 8px;} .contact .adr p { color: #2D2F32; font-family: 'Roboto', arial, verdana; font-size: 1.3em; margin: 0px; } .contact .adr a { color: #2D2F32; font-family: 'Roboto', arial, verdana; font-size: 1.3em; text-decoration: none; } .contact .adr a:hover, .contact .adr a:focus { color: #3498db; font-family: 'Roboto', arial, verdana; font-size: 1.3em; text-decoration: none; } /*Dialog Contact*/ .ui-widget.contact-dialog { font-family: 'Oswald', sans-serif; font-size: 1.3em; } .ui-widget-content.contact-dialog { background: rgba(0,0,0,0.6); border: none; color: #fff; } .ui-dialog.contact-dialog { left: 0; outline: 0 none; padding: 0 !important; position: absolute; top: 0; } .ui-dialog.contact-dialog .ui-dialog-content { background: none repeat scroll 0 0 transparent; border: 0 none; overflow: auto; position: relative; padding: 0.5em; margin: 0; } .ui-dialog.contact-dialog .ui-widget-header { background: rgba(0,0,0,0.5); border: 0; color: #fff; font-weight: normal; } .ui-dialog.contact-dialog .ui-dialog-titlebar { padding: 0.1em .5em; position: relative; font-size: 1.3em; font-family: 'Oswald', sans-serif; } .ui-dialog.contact-dialog .ui-dialog-titlebar-close {display: none;} .ui-dialog .ui-dialog-buttonpane { background: transparent; border: none; margin-top: 0px !important; padding: 0 3px 3px 0px!important; } .ui-dialog .ui-dialog-buttonpane button { width: 60px; height: 30px; margin: 0px; padding: 2px; color: #fff; background-color: #272727; outline: none; border: none; border-radius: 5px; text-align: center; font-family: 'Oswald', sans-serif; font-size: .8em; text-shadow: 4px 4px 0px rgba(0,0,0,0.1); cursor: pointer; } /*Dialogs*/ .ui-widget { font-family: 'Oswald', sans-serif; font-size: 1.3em; } .ui-widget-content { background: rgba(0,0,0,0.6); border: none; color: #fff; } .ui-dialog { left: 0; outline: 0 none; padding: 0 !important; position: absolute; top: 0; } .ui-dialog .ui-dialog-content { background: none repeat scroll 0 0 transparent; border: 0 none; overflow: auto; position: relative; padding: 0.5em; margin: 0; } .ui-dialog .ui-widget-header { background: rgba(0,0,0,0.5); border: 0; color: #fff; font-weight: normal; } .ui-dialog .ui-dialog-titlebar { padding: 0.1em .5em; position: relative; font-size: 1.3em; font-family: 'Oswald', sans-serif; } .ui-dialog .ui-dialog-titlebar-close {display: none;} .ui-dialog .ui-dialog-buttonpane { background: transparent; border: none; margin-top: 0px !important; padding: 0 3px 3px 0px!important; } .ui-dialog .ui-dialog-buttonpane button { width: 60px; height: 30px; margin: 0px; padding: 2px; color: #fff; background-color: #272727; outline: none; border: none; border-radius: 5px; text-align: center; font-family: 'Oswald', sans-serif; font-size: .8em; text-shadow: 4px 4px 0px rgba(0,0,0,0.1); cursor: pointer; } /*Footer*/ footer { position: absolute; bottom: 0; height: 120px; width: 100%; } .footer1 { width: 100%; height: 70px; background-color: #121417; } .footer2 { width: 100%; height: 50px; background-color: #000; } .foot1 { max-width: 1170px; margin: 0 auto; height: 70px; } .foot2 { max-width: 1170px; margin: 0 auto; height: 30px; } .foot1-left { text-align: left; line-height: 70px; vertical-align: middle; padding-left: 15px; } .blzk { vertical-align: middle; width: 100%; height: 70px; line-height: 70px; } .blue-button { display: inline-block; font-family: 'Roboto', arial, verdana; font-size: 1.3em; background-color: #4496DE; border: 0; margin: 0px; } .blue-button:hover, .blue-button:focus { background-color: #2b75b6; } .foot1-right { text-align: right; line-height: 70px; vertical-align: middle; padding-left: 15px; } .foot1-right a {color: #fff;} .foot1-right i { color: #fff; font-size: 3em; vertical-align: middle; margin-left: 10px; } .foot2-left { color: #fff; font-family: 'PT Sans', sans-serif; font-size: 1em; text-align: left; line-height: 50px; vertical-align: middle; padding-left: 15px; } .foot2-left a, .foot2-right a {color: #fff;} .impr, .daten {margin-right: 5px;} .daten {margin-left: 5px;} .foot2-right p { color: #fff; font-size: 1em; line-height: 50px; text-align: right; vertical-align: middle; margin: 0px; } .fa-heart { color: #F00; font-size: 1em; } /*Dialogboxen Impressum & Datenschutz*/ .impressum_dialog, .datenschutz_dialog {display: none;} /*Back to Top*/ .cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1); overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(0,0,0,0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%; border-radius: 5px; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { visibility: visible; opacity: 1; } .cd-top.cd-fade-out { opacity: .5; } .no-touch .cd-top:hover { background-color: #272727; opacity: 1; } @media (max-width: 767px) { .navb_logo {float: left;} .navb {padding: 0px;} .navbar-nav li>a { text-align: left; font-size: 1em; padding-left: 40px; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { background: rgba(0,0,0,0.9); color: #fff; border: none; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { background: rgba(0,0,0,0.8); padding: 0px; max-height: 500px; overflow: hidden; border: none; } .header-content {min-height: 600px;} .welcome h2 {font-size: 3em;} .cap, .snd { margin-left: auto; margin-right: auto; } .g-recaptcha > div {margin: 0 auto;} .send { display: block; margin-left: auto; margin-right: auto; float: none; } .foot1-right i { font-size: 2em; margin-left: 5px; } .blue-button {font-size: 1em;} .foot2-left, .foot2-right p, .fa-heart {font-size: 0.6em;} .cd-top {right: 20px; bottom: 20px;} }