@charset "UTF-8";
body {
background : #303030;
color : #fff;
font-family : 'Open Sans', sans-serif;
font-weight : 300;
overflow-x : hidden;
}
a {
color : #47C6F8;
}
a:hover {
color : #0FF;
}
h2 {
text-align : center;
font-size : 40px;
padding-bottom : 40px;
}
h2 span {
color : #32538a;
font-weight : 700;
}
#phy, #ueber_mich, #meinjob, #gallerie, #kontakt {
padding-top : 60px;
padding-bottom : 40px;
}
header {
min-height : 20px;
padding-top : 18px;
padding-bottom : 10px;
}
header .fa {
color : #32538a;
}
header span {
font-weight : 700;
padding-right : 10px;
padding-left : 4px;
}
header a {
color : #999;
font-weight : 600;
}
header .social-icon {
text-align : right;
}
header .social-icon li a {
border : none;
width : 20px;
height : 20px;
line-height : 20px;
text-align : center;
}
.navbar-default {
background : #fff;
border : none;
box-shadow : none;
margin : 0 !important ;
}
.navbar-default .navbar-brand {
font-weight : 500;
font-size : 30px;
height : 70px;
line-height : 40px;
padding : 12px 0 0 12px;
}
.navbar-default .navbar-nav li a {
font-weight : 700;
font-size : 13px;
height : 70px;
line-height : 40px;
}
.navbar-default .navbar-nav > li > a.current {
color : #32538a;
}
.templatemo-nav {
top : 0;
width : 100%;
border-radius : 0;
width : 100%;
z-index : 1000;
}
.sticky {
position : fixed;
left : 0;
top : 0;
}
#home {
background : url(../images/erste.jpg) no-repeat;
background-size : cover;
padding-top : 160px;
padding-bottom : 100px;
min-height : 650px;
}
#home h1 {
font-weight : 300;
font-size : 70px;
padding-bottom : 10px;
text-align : center;
}
#home p {
font-size : 13px;
text-align : center;
}
#home h1 span {
color : #32538a;
font-weight : 700;
}
#home .btn {
background : transparent;
border-radius : 2px;
color : #fff;
font-size : 16px;
font-weight : 700;
margin-top : 20px;
width : 180px;
height : 60px;
padding-top : 18px;
transition : all 0.4s ease-in-out;
}
#home .btn:hover {
background : #32538a;
border-color : transparent;
}
.element {
height : 60px;
font-size : 16px;
}
#phy .media-heading-wrapper {
padding-bottom : 32px;
}
#phy .media-heading-wrapper .fa {
border : #32538a solid 2px;
border-radius : 2px;
color : #fff;
font-size : 24px;
width : 60px;
height : 60px;
line-height : 60px;
text-align : center;
margin-bottom : 20px;
margin-right : 20px;
}
#phy .media-heading-wrapper h3 {
font-size : 18px;
font-weight : 700;
padding-top : 20px;
padding-left : 52px;
}
#ueber_mich {
background : #202020;
}
#ueber_mich .ueber_mich-wrapper {
background : #404040;
padding-bottom : 10px;
transition : all 0.4s ease-in-out;
position : relative;
}
#ueber_mich .ueber_mich-wrapper:hover {
cursor : pointer;
opacity : 0.4000000059604644775390625;
bottom : 4px;
}
#ueber_mich .ueber_mich-wrapper .ueber_mich-des {
padding : 20px;
}
#ueber_mich .ueber_mich-wrapper .ueber_mich-des span {
color : #32538a;
display : block;
font-weight : 700;
padding-bottom : 12px;
}
#meinjob .col-md-4 {
padding : 40px;
transition : all 0.4s ease-in-out;
}
#meinjob .col-md-4:hover {
background : #505050;
}
#meinjob .active {
background : #505050;
padding : 40px;
}
#meinjob .fa {
border : #32538a solid 3px;
border-radius : 2px;
color : #fff;
font-size : 50px;
width : 100px;
height : 100px;
line-height : 100px;
text-align : center;
}
#meinjob h4 {
color : #fff;
font-weight : 600;
padding-top : 10px;
padding-bottom : 14px;
}
#gallerie {
padding-bottom : 80px;
}
#gallerie .col-md-3 {
padding : 0;
}
.gallerie-thumb, .gallerie-overlay {
max-width : 450px;
}
#gallerie .gallerie-thumb {
overflow : hidden;
padding : 0;
margin : 0 auto;
}
#gallerie .gallerie-thumb .gallerie-overlay {
background : #32538a;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
opacity : 0;
position : absolute;
padding : 20px 10px 20px 20px;
margin-left : auto;
margin-right : auto;
transition : all 0.4s ease-in-out;
}
#gallerie .gallerie-thumb .gallerie-overlay h4 {
font-weight : 700;
padding-bottom : 10px;
}
#gallerie .gallerie-thumb .gallerie-overlay .btn {
background : none;
border : #fff solid 1px;
border-radius : 2px;
color : #fff;
font-weight : 700;
}
#gallerie .gallerie-thumb:hover .gallerie-overlay {
cursor : pointer;
opacity : 0.800000011920928955078125;
}
#kontakt {
background : #202020;
}
#kontakt .form-control {
background : transparent;
border : #32538a solid 1px;
border-radius : 2px;
box-shadow : none;
color : #fff;
margin-top : 6px;
margin-bottom : 16px;
}
#kontakt label {
font-weight : 500;
}
#kontakt input {
height : 50px;
}
#kontakt input[type="submit"] {
background : #32538a;
font-weight : 700;
transition : all 0.4s ease-in-out;
}
#kontakt input[type="submit"]:hover {
background : transparent;
}
#kontakt address {
border-bottom : 1px solid #505050;
padding-top : 30px;
}
#kontakt address .address-title {
font-weight : 700;
font-size : 20px;
padding-bottom : 10px;
}
#kontakt address span {
display : block;
padding-bottom : 30px;
}
#kontakt address .fa {
border : #fff solid 1px;
border-radius : 2px;
width : 40px;
height : 40px;
line-height : 40px;
text-align : center;
margin-right : 10px;
margin-bottom : 10px;
}
#copyright {
padding : 20px;
}
#copyright p {
font-weight : 400;
}
.social-icon {
position : relative;
padding : 0;
margin : 0;
}
.social-icon h4 {
display : inline-block;
padding-right : 20px;
}
.social-icon li {
display : inline-block;
list-style : none;
}
.social-icon li a {
border : #32538a solid 1px;
border-radius : 2px;
color : #fff;
width : 40px;
height : 40px;
line-height : 40px;
text-align : center;
text-decoration : none;
transition : all 0.4s ease-in-out;
margin-right : 10px;
}
.social-icon li a:hover {
background : #32538a;
border-color : transparent;
}
@media only screen and (max-width:1199px) and (min-width:992px) {
#gallerie .gallerie-thumb .gallerie-overlay {
padding : 0 8px;
}
}
@media only screen and (max-width:980px) {
#ueber_mich .ueber_mich-wrapper {
margin-top : 40px;
}
#gallerie .gallerie-thumb .gallerie-overlay {
background : #32538a;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
opacity : 0;
position : absolute;
padding : 40px 10px 20px 20px;
transition : all 0.4s ease-in-out;
}
}
@media only screen and (max-width:767px) {
#home {
min-height : 300px;
padding-top : 80px;
padding-bottom : 60px;
}
#home h1 {
font-size : 52px;
}
.templatemo-nav {
position : fixed;
top : 0;
}
header {
margin-top : 70px;
}
header .social-icon {
text-align : left;
}
.navbar-toggle {
margin-top : 15px;
}
.navbar-collapse {
max-height : 300px;
overflow-y : auto;
}
.navbar-default .navbar-nav li a {
height : 45px;
padding-top : 5px;
padding-bottom : 5px;
line-height : 35px;
}
}
@media only screen and (max-width:360px) {
header .social-icon {
text-align : left;
}
#home {
min-height : 200px;
padding-top : 60px;
padding-bottom : 40px;
}
#home h1 {
font-size : 32px;
}
}