/*
	Theme Name: Rooky
	Template URI: 
	Description: 
	Author:
	Author URI: 
	License: GNU General Public License version 3.0
	License URI:
	Version: 1.0
	

	1. Header
		1. Nav
	2. Top-pan
	3. Title-Page
	4. Section-One
		1. Four-Box-Pan
	5. Section Two
		1. Video
		2. Slider
	6. Section Three
		1. Pricing
	7. Section Four
		1.Team
	8. Section Five
		1. Subscribe Form
	9. Section Six
		1. Contact Form
		2. Map
	10. Footer
	11. selbst erstellte
		
*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

input, textarea {
	-webkit-appearance: none;
	-webkit-border-radius: 0;}

button, html input[type="button"],/* 1 */ input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
 	*overflow:visible;}



html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, main {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	border: 0;
	outline: 0;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img, main {
	display: block}

audio, canvas, video {
	display: inline-block;
	*display:inline;
 	*zoom:1}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;}

.clear {
	clear: both;
	line-height: 0;
	height: 0;}

a {
	text-decoration: none;
	outline: none;
	color: #010101;
	transition-delay: 0s;
	transition-duration: 0.6s;
	transition-property: all;
	transition-timing-function: ease;}

a:focus, img:focus, button:focus, .btn:focus {
	outline: none;}


::-moz-selection {
 background-color:#FF6000;
 color:#fff;
 text-shadow:none;}

::selection {
	background-color: #FF6000;
	color: #fff;
	text-shadow: none;}

@font-face {font-family: 'Raleway', sans-serif;}
/*===== Header ===*/
header[role="header"].header-top,header[role="header"].header-top figure{ position:relative; height:100%; }
header[role="header"].header-top .container{ position:absolute; left:0; right:0; top:0;z-index:2;padding-top:41px}
header[role="header"].header-top figure::after{ content:""; position:absolute; left:0; right:0; top:0; bottom:0; background-color:rgba(29,23,36,0.0); z-index:1}
header[role="header"].header-top hgroup h1{ padding:0; margin:0; position:relative; z-index:2}
/*===== Nav ===*/
header[role="header"].header-top hgroup nav{ background-color:transparent; min-height:inherit; border:none; text-align:right; margin-bottom:0; padding-top:18px}
header[role="header"].header-top hgroup nav ul{ text-align:right; padding:0; margin:0; float:none}
header[role="header"].header-top hgroup nav ul > li{ float:none; display:inline-block; text-transform:uppercase; font-size:16px; font-weight:600; letter-spacing:2px}
header[role="header"].header-top hgroup nav ul > li > a{ color:#FFF; line-height:29px; padding-bottom:5px; padding-top:0; padding-left:11px; padding-right:12px; border-bottom:3px solid transparent;}
header[role="header"].header-top hgroup nav ul > li:hover a,header[role="header"].header-top hgroup nav ul>li.active a,header[role="header"].header-top hgroup nav ul>li.active:hover a{ border-color:#FF6000; background-color:transparent!important;color:#FFF!important;}
header[role="header"].header-top hgroup nav ul>li>a:focus{color:#FFF;}

header[role="header"].header-top hgroup.navbar-fixed-top,header[role="header"].header-top hgroup,header[role="header"].header-top hgroup h1,header[role="header"].header-top hgroup h1 img,header[role="header"].header-top hgroup nav ul,header[role="header"].header-top hgroup nav ul > li,.four-box-pan figure,.four-box-pan figure i,.four-box-pan section,.section-two section,.section-two section figure,.section-two section figure>img,.pricing>section input[type="button"],.pricing>section,.team-pan figure,.team-pan figure img,.subscribe-form button,.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea,.contact-form input[type="submit"]{
	transition-delay:0.8s;
	transition-duration: 0.8s;
	transition-property: all;
	transition-timing-function: ease;}

h1 img{width: 250px;}
header[role="header"].header-top .navbar-fixed-top{background-color:rgba(0,0,0,1); padding:5px 0}
header[role="header"].header-top .navbar-fixed-top .container{ padding-top:0; position:static}
header[role="header"].header-top .navbar-fixed-top h1 img{ width:100%}
header[role="header"].header-top .navbar-fixed-top nav{ padding-top:7px}

header[role="header"].header-top section{position:absolute; left:0; right:0; top:35%;z-index:2;}
header[role="header"].header-top section h2,header[role="header"].header-top section p{ color:#FFF}
header[role="header"].header-top section h2{ font-size:75px; line-height:50px; font-weight:400}
header[role="header"].header-top section p{ font-size:19px; line-height:20px; font-weight:500; padding-top:15px}
header[role="header"].header-top section a.button-header{ display: inline-block; text-align:center; margin:0 auto; line-height:63px; font-size:16px; font-weight:400; padding:0 53px; color:#FFF; background-color:#FF6000; border-radius:4px; text-transform:uppercase}
header[role="header"].header-top section a.button-header:hover{background-color:#5ea246; text-decoration:none}
header[role="header"].header-top section a.video-button,.video-pan header a.video-button{ margin:67px auto; margin-bottom:60px; display:block; cursor:pointer; outline:none; background-color:transparent; border:3px solid #FFF; border-radius:100%; width:94px; height:94px; line-height:94px; font-size:60px; text-align:center; color:#FFF;}
header[role="header"].header-top section a.video-button i,.video-pan header a.video-button i{ padding-left:10px}
header[role="header"].header-top section a.video-button:hover,.video-pan header a.video-button:hover{ border-color:#FF6000}
.video-wrapper-popup .modal-content{ background-color:#000}
.video-wrapper-popup .modal-content .modal-body{ padding-bottom:5px}
/*== Top Pan ==*/

.top-pan{ overflow:hidden; background-color:#f7f7f8; padding-top:62px; padding-bottom:47px}

.top-pan ul{ padding:0; margin:0; list-style:none}

.top-pan li{line-height: 72px;height: 72px; text-transform:uppercase; font-size:17px; color:#161620; font-weight:800}

.top-pan li img {vertical-align: middle; text-align:center; max-width:100%; display:block; margin:0 auto;display: inline-block;}

/*== Title-Page ==*/

header[role="title-page"] h4,header[role="title-page"] h4,header[role="title-page"] h4{ font-size:19px; line-height:20px; color:#71717c; text-transform:uppercase; font-weight:600}

header[role="title-page"] h4:after,header[role="title-page"] h4:after,header[role="title-page"] h4:after{ content:""; display:block; margin:0 auto; width:79px; height:2px; background-color:#FF6000; margin:17px auto; margin-bottom:0}

header[role="title-page"] h2,header[role="title-page"] h2{ color:#000; font-size:31px; line-height:36px; font-weight:600; padding-top:2px}

/*== Section One ==*/

.section-one{ padding-top:87px; background-color: #FFF;padding-bottom: 10vh;}

.section-one article{ padding-top:36px}

.section-one article p{ font-size:15px; line-height:27px; color:#5e5e64; font-weight:500}

/*== Four Box Pan ==*/

.four-box-pan{ overflow:hidden; padding-top:81px}

.four-box-pan figure{ margin:0 auto; display:block; border-radius:100%; width:98px; height:98px; border:2px solid #FF6000; text-align:center; line-height:98px; color:#FF6000; font-size:40px}

.four-box-pan section figure i{color:#FF6000}

.four-box-pan section:hover figure{ background-color:#FF6000; color:#FFF}

.four-box-pan section:hover figure i{ color:#FFF}

.four-box-pan section h5{ text-transform:uppercase; font-size:15px; line-height:16px; font-weight:700; color:#000; padding-top:26px}

.four-box-pan section p{ line-height:27px; font-weight:500; padding-top:5px; color:#5e5e64}

/*== Video ==*/

.video-pan{ min-height:528px; position:relative}

.bg-container-youtube{ position:absolute;left: 0px;top: 0px;width: 100%;overflow: hidden;height:528px;}

.video-pan:after{ content:""; position:absolute; left:0; right:0; top:0; height:100%; background-color:rgba(29,23,36,0.3)}

.video-pan header{ position:relative; z-index:2; padding-top:200px}

.video-pan header h4{ font-size:19px; color:#FFF; font-weight:700; padding:0; margin:0}

.video-pan header a.video-button{ margin:0 auto; margin-bottom:20px}

/*== Slider ==*/

.slider-pan{ padding-top:87px;padding-bottom:91px}

.slider-pan section article{ font-size:21px; line-height:36px; font-weight:400; padding-top:38px}

.slider-pan section article:before{content:"\f10d";font-family:'FontAwesome'; color:#5e5e64}

.slider-pan section article:after{content:"\f10e";font-family:'FontAwesome';color:#5e5e64}

.slider-pan section header h5,.slider-pan article header h6{ font-size:15px; line-height:16px; padding:0; margin:0; font-weight:400}

.slider-pan section header h5{ text-transform:uppercase; font-weight:700; color:#000; padding-bottom:8px}

.slider-pan section header{ padding-top:38px;}

.slider-pan .owl-buttons{ display:none}

.slider-pan .owl-pagination{ text-align:center; padding-top:18px}

.slider-pan .owl-pagination .owl-page{ display:inline-block; border-radius:100%; width:9px; height:9px; background-color:#c9c9c9; margin:0 3px;}

.slider-pan .owl-pagination .owl-page.active{ background-color:#FF6000}

/*== Section Three ==*/

.section-three{ background-color:#FF6000; padding-top:87px; padding-bottom:156px}

.section-three header[role="title-page"]{ padding-bottom:83px}

.section-three header[role="title-page"] h4,.section-three header[role="title-page"] h2{color:#FFF}

.section-three header[role="title-page"] h4:after{ background-color:#FFF}

.pricing{ text-align:center;}

.pricing>section{ display:inline-block; max-width:350px; height: 50vh; border:2px solid #FFF; color:#FFF; margin:0 31px; padding-bottom:24px}

.pricing>section>header{ border-bottom:2px solid #FFF; padding-top:37px; padding-bottom:15px}

.pricing>section>header>h4{ text-transform:uppercase; font-size:19px; font-weight:700}

.pricing>section>h2{ font-weight:500; margin-top:7px; margin-bottom:29px; border-bottom:2px solid #FFF; padding-bottom:12px;}

.pricing>section ul{ padding:0; margin:0; list-style:none}
.pricing>section p{ padding:20px;}

.pricing>section ul>li{ font-size:16px; line-height:36px; font-weight:400}

.pricing>section input[type="button"]{ margin:27px auto; display:block; text-align:center; text-transform:uppercase; color:#FFF; outline:none; cursor:pointer; line-height:53px; font-size:14px; font-weight:700; color:#FF6000; background-color:#FFF; padding:0 32px}

.pricing>section input[type="button"]:hover{ background-color:#ef5300; color:#FFF}

.pricing>section:hover{ background-color:#ef5300;-webkit-transform:scale(0.5);

transform:scale(1.1);}

/*== Section Three ==*/


/*== Footer ==*/

.footer{ background-color:#333333; padding-top:101px; padding-bottom:104px; text-align:center}

.socil-icons a{ display:inline-block; text-align:center; color:#333333; font-size:22px; line-height:50px; width:50px; height:50px; border-radius:100%; background-color:#4a4a4a; margin:0 4.9px}

.socil-icons a:hover{background-color:#FF6000; color:#FFF}

.footer nav { padding-top:34px}

.footer nav a{color:#b6b6b6; font-size:14px; line-height:17px; display:inline-block;font-weight:300; padding-left:6px}

.footer nav a:first-child{ border-right:1px solid #b6b6b6; padding-right:8px}

.footer nav a:hover{ text-decoration:none; color:#FF6000}

.footer .copy{ padding:0; margin:0; color:#b6b6b6; font-size:13px; line-height:17px; font-weight:300; padding-top:7px; letter-spacing:1px}
.footer .copy a{color:#b6b6b6;}
.footer .fa-heart { color: #e84545; font-size: 11px; margin: 0 2px;}

/* selbst erstellte */
.banner_sp {display: none;}
.fernwartung{ position: fixed; top: 50%; right: 0; width: 40px; height: 200px; z-index: 500; background-color: #ff6000; border-bottom-left-radius: 8px; border-top-left-radius: 8px; text-align: center; box-shadow: -3px 3px 100px rgba(0,0,0,0.5);}
.rotateText90{ transform: rotate(90deg); color: #FFF; padding-left: 50px; font-size: 20px;}
.picleidenschaft{ margin: auto; width: 250px; transform: rotate(25deg);}

* { box-sizing:border-box; }

.document { max-width:600px; margin:0 auto; background:#fff url(http://examples.php-rocks.de/bg.jpg) center top repeat-y; }
.timeline { display:flex; flex-direction:column; justify-content:flex-start; }
.rowtl { display:flex; flex-direction:row; justify-content:space-between; margin:25px 0; }


.text { display:flex; flex-direction:row; justify-content:space-between; padding:10px 0; margin-left:25px; border-top:3px solid #FF6000; }
.text .year { flex:1; font-size:2em; font-weight:bold; color:#FF6000; }
.text .info { flex:4; padding-left:50px; text-align: left;}

.rowtl.ltr { flex-direction:row; }
.rowtl.ltr .text{margin-left: 100px;}
.rowtl.rtl { flex-direction:row-reverse; }
.rowtl.rtl .text { flex-direction:row-reverse; margin-right:100px; margin-left:0; }
.rowtl.rtl .info { flex:4; padding-right:50px; padding-left:0; }
.rowtl.rtl .year { text-align:right; }
.rowtl figure{ margin:0 auto; display:block; width:98px; height:98px; text-align:center; line-height:98px; color:#FF6000; font-size:80px}


.pulinkcenter { text-align: left;}
.pulinkblock a{color: #000; cursor: pointer;}
.pulinkblock {display: flex; justify-content: center;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10vh; /* Location of the box */
  left: 0;
  top: -0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}
/* Modal Content */
.modal_content{ background-color: #ff9; margin: auto; padding: 20px; width: 420px; height: 420px; box-shadow: 4px 4px #fc4;transform: rotate(5deg); overflow: auto;}
.modal_block { display: flex; justify-content: center; margin:auto;}
.modal_text {text-align: left; color: #111; font-size: 25px;line-height: 35px; }
/* The Close Button */
.closeit {font-size: 40px; color: #444; float: right; font-weight: bold;}
.closeit:hover, .closeit:focus {color: #000; text-decoration: none; font-size: 40px; cursor: pointer;}

.video_bg { width: 100%; text-align: center;}
.video_home {margin: 20px auto 20px auto; width: 70%;margin-left: 0;}

.kontakt{color: #000; line-height: 20px;}
.impressumetc{color:#222; padding: 30px 20vw;}

.kontaktcenter { text-align: left; font-size: 20px;}
.kontaktcenter h4{ font-size: 25px;}
.kontaktblock {display: flex; justify-content: center; height: 450px; align-items: center;}