/*
Theme Name: MYSCHNAPZ.DE
Theme URI: http://www.myschnapz.de
Description: 
Author: Andy Hanne
Author URI: http://www.andyhanne.de
*/

@import url('bootstrap/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css?family=Oswald:300,700|Roboto:400,400i,700,700i');

body {
	border-top:5px solid #c90000;
	background-color:#fff;
	font-size:16px;
	padding:0;
	margin:0;
	color:#1d2a35;
	font-family: 'Roboto', sans-serif;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
	padding:0;
	margin:0;
}
h1, .h1 {
	font-family: 'Oswald', sans-serif;
	font-size:60px;
	line-height:66px;
	font-weight:700;
	text-transform:uppercase;
	margin:0;
	padding:0;
}
@media (max-width: 1280px) {
h1, .h1 {
	font-size:54px;
	line-height:60px;
}
}
@media (max-width: 1024px) {
h1, .h1 {
	font-size:48px;
	line-height:54px;
}
}
@media (max-width: 768px) {
h1, .h1 {
	font-size:42px;
	line-height:48px;
}
}
@media (max-width: 640px) {
h1, .h1 {
	font-size:36px;
	line-height:42px;
}
}
h2, .h2 {
	font-family: 'Oswald', sans-serif;
	font-size:48px;
	line-height:54px;
	font-weight:700;
	text-transform:uppercase;
	margin:0;
	padding:0;
}
@media (max-width: 1280px) {
h2, .h2 {
	font-size:48px;
	line-height:54px;
}
}
@media (max-width: 1024px) {
h2, .h2 {
	font-size:42px;
	line-height:48px;
}
}
@media (max-width: 768px) {
h2, .h2 {
	font-size:36px;
	line-height:42px;
}
}
@media (max-width: 640px) {
h2, .h2 {
	font-size:30px;
	line-height:36px;
}
}
h3, .h3 {
	font-family: 'Oswald', sans-serif;
	font-size:30px;
	line-height:36px;
	font-weight:700;
	text-transform:uppercase;
	margin:0;
	padding:0;
}
@media (max-width: 1280px) {
h3, .h3 {
	font-size:28px;
	line-height:34px;
}
}
@media (max-width: 1024px) {
h3, .h3 {
	font-size:24px;
	line-height:30px;
}
}
@media (max-width: 768px) {
h3, .h3 {
	font-size:20px;
	line-height:36px;
}
}
@media (max-width: 640px) {
h3, .h3 {
	font-size:18px;
	line-height:24px;
}
}
h4, .h4 {
	font-family: 'Oswald', sans-serif;
	font-size:30px;
	line-height:36px;
	font-weight:700;
	text-transform:uppercase;
	margin:0;
	padding:0;
}
@media (max-width: 1280px) {
h4, .h4 {
	font-size:28px;
	line-height:34px;
}
}
@media (max-width: 1024px) {
h4, .h4 {
	font-size:24px;
	line-height:30px;
}
}
@media (max-width: 768px) {
h4, .h4 {
	font-size:20px;
	line-height:36px;
}
}
@media (max-width: 640px) {
h4, .h4 {
	font-size:18px;
	line-height:24px;
}
}
h5, .h5 {
	font-family: 'Oswald', sans-serif;
	font-size:24px;
	line-height:36px;
	font-weight:normal;
	margin:0;
	padding:0;
}
@media (max-width: 1280px) {
h5, .h5 {
	font-size:22px;
	line-height:34px;
}
}
@media (max-width: 1024px) {
h5, .h5 {
	font-size:20px;
	line-height:26px;
}
}
@media (max-width: 768px) {
h5, .h5 {
	font-size:18px;
	line-height:24px;
}
}
@media (max-width: 640px) {
h5, .h5 {
	font-size:16px;
	line-height:24px;
}
}
h6, .h6 {
	font-family: 'Roboto', sans-serif;
	font-size:18px;
	line-height:30px;
	margin:0;
	padding:0;
	font-weight:700;
}
@media (max-width: 1024px) {
h6, .h6 {
	font-size:16px;
	line-height:24px;
}
}
@media (max-width: 640px) {
h6, .h6 {
	font-size:14px;
	line-height:20px;
}
}
p {
	font-size:18px;
	line-height:30px;
	font-weight:300;
	margin:0;
}
@media (max-width: 1024px) {
p {
	font-size:16px;
	line-height:24px;
}
}
@media (max-width: 640px) {
p {
	font-size:14px;
	line-height:20px;
}
}
ul, ol {
	font-size:18px;
	line-height:30px;
	font-weight:300;
}
@media (max-width: 1024px) {
ul, ol {
	font-size:16px;
	line-height:24px;
}
}
@media (max-width: 640px) {
ul, ol {
	font-size:14px;
	line-height:20px;
}
}
label {
	font-size:14px;
	
}
input, textarea, select {
	background-color:#d4dee6;
	border:0;
	font-size:16px;
	padding:25px;
	color:#63727f;
	font-weight:300;
}
@media (max-width: 640px) {
input, textarea, select {
	font-size:14px;
	padding:10px 15px;
}
}
input:focus, textarea:focus, select:focus {
	background-color:#adbcca;
}
a {
	color:#c90000;
	text-decoration:none;
}
a:hover,
a:focus {
	color:#e60101;
	text-decoration:none;
}
a, button, input[type="submit"] {
	cursor: pointer;
}
button, input[type="submit"] {
	background:none;
    color:#1d2a35;
	font-size:16px;
	padding:15px 25px;
	border:4px solid #c90000;
	font-weight:400;
}
button:hover, 
input[type="submit"]:hover {
	background-color:#c90000;
	color:#fff;
	border-color:#c90000;
}
@media (max-width: 1024px) {
button, input[type="submit"] {
	font-size:16px;
	padding:10px 20px;
}
}
@media (max-width: 640px) {
button, input[type="submit"] {
	font-size:14px;
	padding:10px 15px;
}
}
input[type="radio"],
input[type="checkbox"] {
	width:auto;
}
.btn {
	background:none;
    color:#7c8a96;
	font-size:16px;
	padding:15px 25px;
	border:4px solid #394756;
	font-weight:400;
}
.btn:hover, 
.btn:focus {
	background-color:#394756;
	color:#fff;
	border:4px solid #394756;
}
strong, b {
	font-weight:700;
}
.mark, mark {
	background-color:#eaf0fd;
	color:#746e85;
}

.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}

/*********************************************************************************************/
/**********************************************WRAPPER*************************************************/
/*********************************************************************************************/
.container {
	width:100%;
	max-width:1230px;
	padding-left:30px;
	padding-right:30px;
}
@media (max-width: 768px) {
.container {
	padding-left:15px;
	padding-right:15px;
}
}
/*********************************************************************************************/
/**********************************************HEAD*************************************************/
/*********************************************************************************************/
header {
	background-image:url(bilder/bg-darkgrey.png);
	background-repeat:no-repeat;
	background-size:100%;
	background-position:center bottom;
	height:335px;
}
@media (max-width: 768px) {
header {
	height:330px;
}
}
.page-template-default header {
	background-image:url(bilder/bg-darkgrey-page-default.png);
}
@media (max-width: 768px) {
.page-template-default header {
	height:200px;
}
}
#head {
	position:relative;
}
@media (max-width: 768px) {
#head {
	display:none;
}
}
#head-mobile {
	display:none;
	position:relative;
}
@media (max-width: 768px) {
#head-mobile {
	display:block;
}
}
/**********************************************HEAD LOGO*************************************************/
#logo-area {
	float:left;
	padding-top:12px;
	padding-bottom:12px;
}
@media (max-width: 1440px) {
#logo-area {
	max-width:250px;
	height:auto;
}
#logo-area img {
	max-width:100%;
	height:auto;
}
}
@media (max-width: 1024px) {
#logo-area {
	float:none;
}
}
/**********************************************HEAD NAV*************************************************/
#nav-area {
	float:left;
	font-family: 'Oswald', sans-serif;
	text-transform:uppercase;
}
@media (max-width: 1024px) {
#nav-area {
	float:none;
}
}
@media (max-width: 768px) {
#nav-area {
	display:none;
}
}
#nav-area ul {
	list-style:none;
	font-size:18px;
	line-height:24px;
	font-weight:700;
	margin-top:90px;
}
@media (max-width: 1024px) {
#nav-area ul {
	margin-top:20px;
	margin-left:0;
	padding-left:0;
}
}
#nav-area ul li {
	display:inline-block;
	margin:0 10px;
}
#nav-area a {
	color:#1d2a35;
}
#nav-area a:hover,
#nav-area .current_page_item a,
#nav-area a:focus {
	color:#c90000;
}
/**********************************************HEAD NAV MOBILE*************************************************/
#nav-area-mobile {
	display:none;
}
@media (max-width: 768px) {
#nav-area-mobile {
	display:block;
	padding-top:10px;
}
}
/**********************************************HEAD SOCIAL MEDIA*************************************************/
#social-media-area {
	position:absolute;
	top:15px;
	right:0;
	z-index:10000;
}
@media (max-width: 768px) {
#social-media-area {
	top:10px;
}
}
#social-media-area ul {
	margin:0;
	padding:0;
	list-style:none;
}
#social-media-area ul li {
	display:inline-block;
	margin-left:5px;
}
#social-media-area ul li:first-of-type {
	display:inline-block;
	margin-left:0;
}
#social-media-area ul a {
	display:block;
	font-size:14px;
	font-weight:normal;
	width:40px;
	height:40px;
	line-height:34px;
	text-align:center;
	border:3px solid #c90000;
	color:#1d2a35;
}
@media (max-width: 640px) {
#social-media-area ul a {
	width:40px;
	height:40px;
	line-height:38px;
	font-size:14px;
}
}
#social-media-area ul li a:hover,
#social-media-area ul li a:focus {
	color:#fff;
	background-color:#c90000;
	border-color:#c90000;
}
/*********************************************************************************************/
/**********************************************LEISTUNGEN*************************************************/
/*********************************************************************************************/
#leistungen {
	background-image:url(bilder/bg-lightgrey.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-color:#1d2a35;
	background-size:100%;
}
.leistungen-row {
	display:table;
	width:100%;
	margin-top:-134px;
}
.leistung-col {
	display:table-cell;
	width:33.33333333333333%;
}
@media (max-width: 1024px) {
.leistung-col.leistung-col-1 {
	float:left;
	display:block;
	width:50%;
}
.leistung-col.leistung-col-2 {
	float:left;
	display:block;
	width:50%;
}
.leistung-col.leistung-col-3 {
	display:block;
	width:100%;
}
}
@media (max-width: 768px) {
.leistung-col.leistung-col-1 {
	float:none;
	width:100%;
}
.leistung-col.leistung-col-2 {
	float:none;
	width:100%;
}
}
.leistung-col.leistung-col-1 {
	background-image:url(bilder/01-maler-verputzer.jpg);
	background-size:cover;
}
.leistung-col.leistung-col-2 {
	background-image:url(bilder/02-gelaenderbau.jpg);
	background-size:cover;
}
.leistung-col.leistung-col-3 {
	background-image:url(bilder/03-terrassenbau.jpg);
	background-size:cover;
}
.leistung-col-color {
	position:relative;
	color:#fff;
	padding:25px;
	height:810px;
	overflow:hidden;
}
@media (max-width: 1024px) {
.leistung-col-color {
	height:400px;
}
}
@media (max-width: 768px) {
.leistung-col-color {
	height:250px;
}
}
.leistung-col-1 .leistung-col-color {
	background: rgba(201,0,0,0.7);
}
.leistung-col-2 .leistung-col-color {
	background: rgba(29,42,53,0.7);
}
.leistung-col-3 .leistung-col-color {
	background: rgba(29,42,53,0.7)
}
.leistung-col-content {
	position:absolute;
	bottom:50px;
}
.leistung-col-1 a:hover .leistung-col-color {
	background: rgba(201,0,0,0.6);
} 
.leistung-col-2 a:hover .leistung-col-color {
	background: rgba(29,42,53,0.6)
} 
.leistung-col-3 a:hover .leistung-col-color {
	background: rgba(29,42,53,0.6)
} 
/*********************************************************************************************/
/**********************************************ABOUT*************************************************/
/*********************************************************************************************/
#about {
	position:relative;
	background-color:#63727f;
	color:#fff;
}
#about-row {
	display:table;
	width:100%;
}
#about-left {
	padding-top:25px;
	display:table-cell;
	width:50%;
	vertical-align:bottom;
}
@media (max-width: 640px) {
#about-left {
	display:none;
}
}
#about-left-mobile {
	display:none;
}
@media (max-width: 640px) {
#about-left-mobile {
	display:block;
	padding-top:25px;
	width:100%;
}
}
#about-right {
	padding-top:100px;
	display:table-cell;
	width:50%;
	vertical-align:top;
}
@media (max-width: 1024px) {
#about-right {
	padding-bottom:200px
}
}
@media (max-width: 640px) {
#about-right {
	padding-top:50px;
	padding-bottom:0;
	display:block;
	width:100%;
}
}
#about-footer {
	position:absolute;
	bottom:0;
}
#about-footer img {
	width:100%;
	height:auto;
}
/*********************************************************************************************/
/**********************************************CONTACT*************************************************/
/*********************************************************************************************/
#kontakt {
	padding:50px 0 100px;
}
#contact-left {
	padding-top:100px;
}
@media (max-width: 768px) {
#contact-left {
	padding-top:50px;
}
}
#contact-right {
	padding-top:100px;
}
@media (max-width: 768px) {
#contact-right {
	padding-top:25px;
}
}
.contact-row {
	margin-bottom:5px;
}
#kontakt input, 
#kontakt textarea {
	width:90%;
}
@media (max-width: 768px) {
#kontakt input, 
#kontakt textarea {
	width:100%;
}
}
#kontakt input[type=submit] {
	width:auto;
}
/*********************************************************************************************/
/**********************************************CONTENT*************************************************/
/*********************************************************************************************/
#content {
}
/*********************************************************************************************/
/**********************************************BREADCRUMB*************************************************/
/*********************************************************************************************/
.breadcrumb {
    background-color: #fff;
    border-radius: 0;
    list-style: outside none none;
    margin-bottom:0;
	text-align:right;
    padding:20px 0 0;
	font-size:14px;
	color:#7f7f7f;
}
.breadcrumb a {
	color:#7f7f7f;
}
.breadcrumb a:hover {
	color:#63727f;
}
/*********************************************************************************************/
/**********************************************PAGE DEFAULT*************************************************/
/*********************************************************************************************/
#content-single-page {
	position:relative;
}
#content-single-page #page-container {
	padding:25px 0 100px;
	margin:0;
}
@media (max-width: 640px) {
#content-single-page #page-container {
	padding:25px 0 50px;
	margin:0;
}
}
#content-single-page iframe {
	width:100%;
}
/*********************************************************************************************/
/**********************************************CONTENT LEISTUNG PAGE*************************************************/
/*********************************************************************************************/
#leistung-page #leistungen {
	background-image:url(bilder/bg-white.png);
}
.leistung-col {
	background-position:center;
}
#leistung-page .leistung-col-color {
	height:380px;
}
@media (max-width: 1024px) {
#leistung-page .leistung-col.leistung-col-1,
#leistung-page .leistung-col.leistung-col-2,
#leistung-page .leistung-col.leistung-col-3{
	width:100%;
}
#leistung-page .leistung-col-color {
	height:280px;
}
}
@media (max-width: 768px) {
#leistung-page .leistung-col-color {
	height:200px;
}
}
#leistung-page #page-container {
	padding:25px 0 100px;
	margin:0;
}
@media (max-width: 640px) {
#leistung-page #page-container {
	padding:25px 0 50px;
	margin:0;
}
}
#leistung-menu ul {
	padding:0;
	margin:0;
	list-style:none;
	display:table;
	width:100%;
}
#leistung-menu li {
	display:table-cell;
}
#leistung-menu a {
	display:block;
	background-color:#fff;
	border:4px solid #c90000;
	color:#1d2a35;
	text-align:center;
	padding:30px;
	font-family: 'Oswald', sans-serif;
	font-size:18px;
	line-height:24px;
	text-transform:uppercase;
	font-weight:bold;
}
@media (max-width: 1024px) {
#leistung-menu a {
	border:4px solid #c90000;
	padding:30px;
	font-size:16px;
	line-height:24px;
}
}
@media (max-width: 640px) {
#leistung-menu a {
	border:2px solid #c90000;
	padding:20px;
	font-size:14px;
	line-height:24px;
}
}
#leistung-menu a:hover {
	background-color:#c90000;
	color:#fff;
}
#leistung-menu li:first-of-type a {
	border-right:2px solid #c90000;
}
#leistung-menu li:last-of-type a {
	border-left:2px solid #c90000;
}
@media (max-width: 640px) {
#leistung-menu li:first-of-type a {
	border-right:1px solid #c90000;
}
#leistung-menu li:last-of-type a {
	border-left:1px solid #c90000;
}
}
#leistung-menu li a:before {
   font-family: FontAwesome;
   display: inline-block;
   padding-right: 3px;
   font-size:14px;
   top:-2px;
   position:relative;
}
#leistung-menu li:first-of-type a:before {
	content: "\f0c0";
}
#leistung-menu li:last-of-type a:before {
	content: "\f013";
}


/*********************************************************************************************/
/**********************************************PAGE*************************************************/
/*********************************************************************************************/
#page-container {
	background-color:#fff;
	padding:100px 0;
}
@media (max-width: 1024px) {
#page-container {
	margin-top:75px;
	padding:50px;
}
}
@media (max-width: 768px) {
#page-container {
	margin-top:50px;
	padding:30px;
}
}
#page-container h1 {
	margin:0 0 50px;
	color:#070b0e;
}
@media (max-width: 1024px) {
#page-container h1 {
	margin:0 0 30px;
}
}

#page-container-dark {
	margin-top:100px;
	padding:50px;
	color:#5f7384;
	border-bottom:1px solid #5f7384;
}
@media (max-width: 1024px) {
#page-container-dark {
	margin-top:75px;
	padding:50px;
}
}
@media (max-width: 768px) {
#page-container-dark {
	margin-top:50px;
	padding:30px;
}
}
#page-container-dark h1 {
	margin:0 0 50px;
	color:#fff;
}
@media (max-width: 1024px) {
#page-container-dark h1 {
	margin:0 0 30px;
}
}
/*********************************************************************************************/
/**********************************************WHATSAPP PAGE*************************************************/
/*********************************************************************************************/
#whatsapp-nummer {
	border:3px solid #5ed169;
	color:#5ed169;
	padding:15px;
	font-size:24px;
	line-height:30px;
	margin-top:10px;
	text-align:center;
}
@media (max-width: 1024px) {
#whatsapp-nummer {
	font-size:20px;
	line-height:30px;
}
}
@media (max-width: 640px) {
#whatsapp-nummer {
	font-size:18px;
	line-height:24px;
}
}
/*********************************************************************************************/
/**********************************************FOOTER*************************************************/
/*********************************************************************************************/
footer {
	background-color:#c90000;
	padding:20px 0;
	color:#fff;
}
#footer-copy {
}
#footer-copy-left {
	float:left;
}
#footer-copy-right {
	float:right;
}
#footer-copy a {
	display:inline-block;
	margin:0 5px;
	color:#fff;
}
#footer-copy a:hover,
#footer-copy a:focus {
	color:#fff;
}
/**********************************************MOBILE NAVIGATION*************************************************/
#head-mobile-navi-button {
	float:left;
	margin-top:10px;
}
#head-mobile-navi-button span {
	display:block;
	font-size:14px;
	font-weight:normal;
	width:40px;
	height:40px;
	line-height:34px;
	text-align:center;
	border:3px solid #c90000;
	color:#1d2a35;
	cursor:pointer;
}
#head-mobile-navi-button span:hover,
#head-mobile-navi-button span:focus {
	background-color:#c90000;
	color:#FFF;
}

 /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #c90000; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.sidenav ul {
	margin:0;
	padding:0;
	list-style:none;
}
.sidenav ul ul a {
	font-size: 14px;
	padding: 8px 8px 8px 45px;
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    display: block;
    transition: 0.3s;
}
.sidenav ul a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16px;
    color: #fff;
    display: block;
    transition: 0.3s;
	border-bottom:1px solid #fff;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 24px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 14px;}
}