/*
Theme Name: FRABA
Theme URI: https://www.fliesenbau-fraba.de
Author: Benjamin Klar
Author URI: https://www.bennitalent.com
Description: Benutzerdefiniertes Theme fuer FRABA Fliesenbau.
Version: 1.0
Tags: 
Text Domain: fraba
*/

@import url("fonts.css?t=20220925");

* { margin:0px;padding:0px;-webkit-box-sizing:border-box;box-sizing:border-box; }

:root {
  --color-main:#325DA8;
  --color-secondary:#26A65B;
  --color-third:#D65036;
  --transition-default:all 1s ease-in-out;
  --transition-faster:all 0.75s ease-in-out;
  --transition-slow:all 1.75s ease-in-out;
  --transition-fastest:all 0.25s ease-in-out;
}

html, body { position:relative;height:100%;background:#ffffff;font-family:'Roboto Condensed',sans-serif;font-size:20px;line-height:1.75em;color:#32302e;font-weight:300; }
              
a img { border:none; }
.clearboth { float:none !important;clear:both !important;line-height:1px !important;height:1px !important;font-size:1px !important;color:transparent !important; }

label { display:block;margin:0 0 15px 0; }
label > span { display:block; }

a.button { display:inline-block;text-decoration:none;background:var(--color-main);border-radius:5px;border:none !important;color:#ffffff !important;padding:13px 17px 11px;font-size:16px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; }
strong { font-weight:500; }

.wrapper { width:100%;margin:0 auto; }

.header { background:var(--color-main); }
.header .wrapper { width:1370px;display:grid;grid-template-columns:200px auto; }
.header .wrapper .logo { padding:25px 0; }
.header .wrapper .logo a { display:block;width:100%; }
.header .wrapper .logo a img { display:block;width:100%; }

.header .wrapper .mobile { display:none; }
.header .wrapper .mobile > a > i { -webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
.header .wrapper .mobile-close { display:none; }
.header .wrapper .container-navigation { text-align:right;padding:25px 0;-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
.header .wrapper .container-navigation.navopen { display:block;grid-column:span 2;width:calc(100% + 50px);margin:-25px; }
.header .wrapper .menu-header-menu-container { height:100%; }
.header .wrapper .menu-header-menu-container ul { list-style-type:none;height:100%; }
.header .wrapper .menu-header-menu-container > ul { display:flex;gap:1px;justify-content:flex-end; }
.header .wrapper .menu-header-menu-container > ul a { color:#ffffff;text-decoration:none; }
.header .wrapper .menu-header-menu-container > ul > li { height:100%; }
.header .wrapper .menu-header-menu-container > ul > li > a { display:grid;padding:0 20px;height:100%;align-items:center;background:rgba(255,255,255,.1);font-size:18px;text-transform:uppercase;font-weight:700;letter-spacing:.08em;-webkit-transition:var(--transition-fastest);-moz-transition:var(--transition-fastest);-ms-transition:var(--transition-fastest);-o-transition:var(--transition-fastest);transition:var(--transition-fastest); }
.header .wrapper .menu-header-menu-container > ul > li.current-menu-item > a { background:rgba(255,255,255,.3) }
.header .wrapper .menu-header-menu-container > ul > li > a:hover { background:#26a65b; }
.header .wrapper .menu-header-menu-container > ul > li > .sub-menu { display:none; }

.header .wrapper .navopen .menu-header-menu-container > ul { display:block; }
.header .wrapper .navopen .menu-header-menu-container > ul > li > a { padding:0 45px; }



.main { min-height:calc(100vh - 428px); }

.main .shadow { display:block;position:absolute;top:0px;left:0px;width:100%;height:100%;background:linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);z-index:1; }

.main .wrapper { width:1370px;padding:50px 0; }
.main .wrapper.frontpage { width:100%;padding:0; }

.main .wrapper h1 { font-size:42px;font-weight:700;color:var(--color-main);text-align:center;margin:0 0 35px 0;text-transform:uppercase;letter-spacing:.05em; }
.main .wrapper h2 { font-size:32px;font-weight:400;color:var(--color-main);text-align:center;margin:0 0 25px 0;text-transform:uppercase;letter-spacing:.05em; }
.main .wrapper h2:after { content:"";display:block;background:var(--color-secondary);height:3px;width:35px;margin:20px auto; }
.main .wrapper h3 { font-size:30px;font-weight:300;color:var(--color-main);text-align:center;margin:0 0 15px 0;text-transform:uppercase;letter-spacing:.05em; }
.main .wrapper p { margin:0 auto 25px auto; }
.main .wrapper a { display:inline-block;text-decoration:none;color:var(--color-main);border-bottom:2px solid var(--color-main); }
.main .wrapper ul { margin:0 0 25px 25px; }
.main .wrapper hr { border:none;border-bottom:10px solid #ececec;margin:35px auto;width:100%; }
.main .wrapper.frontpage p { width:70%;margin:0 auto 25px auto; }

.main .wrapper.meldung { width:100%;padding:50px 0;background:#cecece; }
.main .wrapper.meldung.color-blau { background-color:var(--color-main); }
.main .wrapper.meldung.color-gruen { background-color:var(--color-secondary); }
.main .wrapper.meldung.color-rot { background-color:var(--color-third); }
.main .wrapper.meldung .meldung-title { font-size:42px;font-weight:500;color:#ffffff;text-align:center;width:90%;margin:0 auto 35px auto; }
.main .wrapper.meldung .meldung-title:after { content:"";display:block;background:#ffffff;height:3px;width:35px;margin:35px auto;  }
.main .wrapper.meldung .meldung-text { font-size:21px;line-height:1.4em;font-weight:400;color:#ffffff;text-align:center;width:90%;margin:0 auto 35px auto; }
.main .wrapper.meldung .meldung-link { width:90%;margin:0 auto;text-align:center; }
.main .wrapper.meldung .meldung-link a.button { background:#ffffff;color:#32302e !important;font-size:21px;line-height:21px; }
.main .wrapper.meldung.color-blau .meldung-link a.button { color:var(--color-main) !important; }
.main .wrapper.meldung.color-gruen .meldung-link a.button { color:var(--color-secondary) !important; }
.main .wrapper.meldung.color-rot .meldung-link a.button { color:var(--color-third) !important; }

.main .teaser-fix { position:relative;margin:0 0 50px 0; }
.main .teaser-fix > ul { display:block;height:55vh;width:100%;position:relative;list-style-type:none;margin:0; }
.main .teaser-fix > ul > li { display:none;position:absolute;width:100%;height:100%;background-size:cover;background-position:center; }
.main .teaser-fix > ul > li:first-of-type { display:block; }
.main .teaser-fix > .teaser-fix-main { position:absolute;bottom:0px;left:calc(50vw - 685px);width:685px;height:100%;padding:50px 0;display:flex;align-items:flex-start;justify-content:flex-end;flex-direction:column;gap:25px; }
.main .teaser-fix > .teaser-fix-main .teaser-fix-content { background:rgba(255,255,255,.95);padding:25px 35px;border-radius:5px;box-shadow:0px 0px 25px -2px rgba(0,0,0,.2);font-size:18px;line-height:1.4em;font-weight:300;z-index:99; }
.main .teaser-fix > .teaser-fix-main .teaser-fix-title { z-index:99; }
.main .teaser-fix > .teaser-fix-main .teaser-fix-title > h1 { color:#ffffff;font-size:42px;font-weight:700;line-height:1.2em;text-shadow:0px 0px 20px rgba(0,0,0,.6);text-align:left;margin:0; }

.main .teaser-slider {  }
.main .teaser-slider > ul { display:block;list-style-type:none;position:relative;width:100%;height:55vh;margin:0; }
.main .teaser-slider > ul > li { position:absolute;width:100%;top:0px;left:0px;height:100%;background:#cecece;display:none; }
.main .teaser-slider > ul > li:first-of-type { display:block; }
.main .teaser-slider > ul > li.hasimage { background-size:cover;background-position:center; }
.main .teaser-slider > ul > li .teaser-item { width:1370px;margin:0 auto;padding:25px 0;display:grid;grid-template-columns:2fr 3fr;gap:50px;height:100%;align-content:center;align-items:center; }
.main .teaser-slider > ul > li .teaser-item .teaser-main { background:rgba(255,255,255,.95);padding:25px 35px;border-radius:5px;box-shadow:0px 0px 25px -2px rgba(0,0,0,.2);z-index:99; }
.main .teaser-slider > ul > li .teaser-item .teaser-main h3 { font-size:21px;text-align:left;line-height:1.4em; }
.main .teaser-slider > ul > li .teaser-item .teaser-main .teaser-content { font-size:18px;line-height:1.4em; }
.main .teaser-slider > ul > li .teaser-item .teaser-slogan { z-index:99; }
.main .teaser-slider > ul > li .teaser-item .teaser-slogan > h1 { color:#ffffff;font-size:40px;font-weight:400;line-height:1.2em;text-shadow:0px 0px 20px rgba(0,0,0,.2);text-align:left;margin:0; }
.main .teaser-slider > ul > li .teaser-item .teaser-slogan strong { font-weight:700; }
.main .teaser-slider > ul > li .teaser-item .teaser-link { z-index:99; }

.main .list-3-spalten { display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin:0 0 25px 0; }
.main .list-3-spalten ul.list-3-spalten-spalte { list-style-type:none;margin:0; }
.main .list-3-spalten ul.list-3-spalten-spalte li { border-bottom:2px solid #ececec;padding:10px 0; }
.main .list-3-spalten ul.list-3-spalten-spalte li:last-of-type { border-bottom:none; }

.main .rows-w-image > ul { list-style-type:none;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:25px; }
.main .rows-w-image > ul > li {  }
.main .rows-w-image > ul > li > .rwi-image { display:block;position:relative;background-size:cover;background-position:center;height:18vh;border-radius:5px;border:none;text-decoration:none;-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
.main .rows-w-image > ul > li > .rwi-image .shadow { border-radius:5px; }
.main .rows-w-image > ul > li > .rwi-image:hover { filter:grayscale(1); }
.main .rows-w-image > ul > li > .rwi-image > h3 { display:grid;align-items:center;position:absolute;width:100%;height:100%;padding:15px;color:#ffffff;font-weight:700;text-shadow:0px 0px 20px rgba(0,0,0,.5);z-index:99; }
.main .rows-w-image > ul > li > .rwi-text { text-align:center;font-size:18px;line-height:1.4em;margin:25px 0 0 0; }

.main .rows-image { margin:0 0 35px 0; }
.main .rows-image > ul { list-style-type:none;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:25px; }
.main .rows-image > ul > li > .ri-image { display:block;position:relative;background-size:cover;background-position:center;height:20vh;border-radius:5px;border:none;text-decoration:none;-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
.main .rows-image > ul > li > .ri-image .shadow { border-radius:5px; }
.main .rows-image > ul > li > .ri-image:hover { filter:grayscale(1); }
.main .rows-image > ul > li > .ri-image > h3 { display:grid;align-items:center;position:absolute;width:100%;height:100%;padding:15px;color:#ffffff;font-weight:700;text-shadow:0px 0px 20px rgba(0,0,0,.5);z-index:99; }

.main .col-list { display:flex;justify-content:space-evenly;gap:25px;align-content:flex-start;text-align:center;flex-wrap:wrap; }

.main ul.gallery { list-style-type:none;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;width:90%;margin:0 auto 50px auto; }
.main ul.gallery li { display:block;height:25vh;background-size:cover;background-position:center;flex:0 0 calc(25% - 10px);-webkit-transition:var(--transition-faster);-moz-transition:var(--transition-faster);-ms-transition:var(--transition-faster);-o-transition:var(--transition-faster);transition:var(--transition-faster); }
.main ul.gallery li:hover { filter:grayscale(1); }
.main ul.gallery li a { display:block;height:100%;width:100%;border-bottom:0; }

.footer .footer-cols { background:#2c2d30;color:#cccccc; }
.footer .footer-cols a { color:#E74D3C;text-decoration:none; }
.footer .footer-cols .wrapper { width:1370px;letter-spacing:.08em;display:grid;grid-template-columns:repeat(4,1fr);gap:25px;font-size:13px;line-height:1.75em;padding:25px 0; }
.footer .footer-cols .wrapper .footer-col h3 { font-size:16px;margin:0 0 25px 0;font-weight:700; }
.footer .footer-cols .wrapper .footer-col p { margin:0 0 15px 0; }
.footer .footer-cols .wrapper .footer-col p:last-of-type { margin:0 0 0 0; }
.footer .footer-cols .wrapper .footer-col a.button { margin:15px 0 0 0; }
.footer .footer-cols .wrapper .footer-col ul.footer-menu { list-style-type:none; }
.footer .footer-cols .wrapper .footer-col ul.footer-menu li { border-bottom:1px solid #404040; }
.footer .footer-cols .wrapper .footer-col ul.footer-menu li a { color:#cccccc;display:block;padding:10px 0; }
.footer .footer-cols .wrapper .footer-col ul.footer-menu li a:hover { color:var(--color-secondary); }
.footer .footer-cols .wrapper .footer-col ul.footer-menu li:last-of-type { border:none; }
.footer .footer-cols .wrapper .footer-col ul.footer-menu li:last-of-type a { padding:10px 0 0 0; }
.footer .footer-cols .wrapper .footer-col ul.footer-menu li:first-of-type a { padding:0 0 10px 0; }
.footer .footer-copy { background:var(--color-secondary);color:#ffffff; }
.footer .footer-copy .wrapper { width:1370px;padding:25px 0;font-size:13px;line-height:13px;font-weight:500;letter-spacing:.05em; }

/* =WordPress Core - START */
/* -------------------------------------------------------------- */
.alignnone { margin:0; }
.aligncenter,
div.aligncenter { display: block; margin: 0px auto 0px auto; }
.alignright { float:right; margin: 4px 0px 10px 10px; }
.alignleft { float: left; margin: 4px 10px 10px 0; }
a img.alignright { float: right; margin: 4px 0px 10px 10px; }
a img.alignnone { margin:0; }
a img.alignleft { float: left; margin: 4px 10px 10px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin:0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }

/* Text meant only for screen readers. */
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }
/* -------------------------------------------------------------- */
/* =WordPress Core - END */

/* iPad Pro */
@media only screen and (max-width: 1366px) {
	.header .wrapper { width:100%;padding:0 25px; }

	.main .wrapper { width:100%;padding:50px; }
	.main .wrapper hr { margin:35px -50px;width:calc(100% + 100px); }

	.main .teaser-slider > ul { height:calc(100vh - 108px); }
	.main .teaser-slider > ul > li .teaser-item { width:100%;padding:50px;grid-template-columns:5fr 3fr; }

	.main .teaser-fix > ul { height:calc(100vh - 108px); }
	.main .teaser-fix > .teaser-fix-main { bottom:0px;left:0px;width:70vw;padding:50px; }

	.main .rows-w-image > ul > li > .rwi-image { height:22vh; }	
	.main .rows-w-image > ul > li > .rwi-image > h3 { font-size:22px; }

	.main .rows-image > ul > li > .ri-image { height:22vh; }
	.main .rows-image > ul > li > .ri-image > h3 { font-size:22px; }

	.footer .footer-cols .wrapper { width:100%;padding:25px; }
	.footer .footer-copy .wrapper { width:100%;padding:25px; }
}

/* Tablet Portrait */
@media only screen and (max-width: 1182px) {
	.header .wrapper .menu-header-menu-container > ul > li > a { font-size:15px; }

	.main .wrapper h1 { font-size:36px; }
	.main .wrapper h2 { font-size:30px; }
	.main .wrapper h3 { font-size:26px; }
}

@media only screen and (max-width: 960px) {
	.header .wrapper { justify-content:space-between;align-items:center; }
	.header .wrapper .container-navigation { display:none; }
	.header .wrapper .mobile { display:block;padding:0 20px; }
	.header .wrapper .mobile > a { display:block;color:#ffffff;font-size:40px; }

	.main ul.gallery li { flex:0 0 calc(50% - 10px); }
}

@media only screen and (max-width: 769px) {

	.main .teaser-slider > ul { height:75vh; }
	.main .teaser-slider > ul > li .teaser-item { grid-template-columns:1fr;gap:25px; }

	.main .teaser-fix > ul { height:75vh; }
	.main .teaser-fix > .teaser-fix-main { width:100%; }

	.main .list-3-spalten { display:block; }
	.main .list-3-spalten ul.list-3-spalten-spalte li:last-of-type { border-bottom:2px solid #ececec; }
	.main .list-3-spalten ul.list-3-spalten-spalte:last-of-type > li:last-of-type { border-bottom:none; }

	.main .rows-w-image > ul { grid-template-columns:repeat(2,1fr); }

	.main .rows-image > ul { grid-template-columns:repeat(2,1fr); }

	.main .col-list { display:block; }
	.main .col-list .col-list-item { margin:0 0 25px 0; }	

	.main ul.gallery li { flex:0 0 100%;height:40vh; }

	.footer .footer-cols .wrapper { grid-template-columns:repeat(2,1fr); }
}

/* SmartPhone */
@media only screen and (max-width: 480px) {
	.main .wrapper { width:100%;padding:25px; }

	.main .teaser-slider > ul { min-height:calc(100vh - 108px);height:100vh; }
	.main .teaser-slider > ul > li .teaser-item { padding:25px;position:absolute; }

	.main .teaser-fix > ul { min-height:calc(100vh - 108px);height:100vh; }
	.main .teaser-fix > ul > li { position:absolute; }
	.main .teaser-fix > .teaser-fix-main { padding:25px; }

	.main .rows-w-image > ul { grid-template-columns:repeat(1,1fr); }

	.main .rows-image > ul { grid-template-columns:repeat(1,1fr); }

	.footer .footer-cols .wrapper { grid-template-columns:repeat(1,1fr); }
}