/* CSS IMPORT */
@import url("fonts.css");
@import url("font-awesome.min.css");
@import url("animate.css");
@import url("lightbox.css");

html { 
	height: 100%; 
	width: 100%; 
}
body { 
	position: relative;
	height: 100%; 
	width: 100%; 
	font-family: 'Poppins', sans-serif; 
	padding: 0 0 0 50px; 
	margin: 0px; 
	background-color: #444;
	background-image: url(../img/bg.jpg); 
	background-attachment: fixed; 
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: auto; 
	font-size: 18px;
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 { 
	color: #fff; 
	font-weight: 300; 
	margin: 15px 0; 
	line-height: 1.5;
}
h1 small, 
h2 small, 
h3 small, 
h4 small, 
h5 small, 
h6 small { 
	display: block; 
	color: #eee; 
	font-size: 65%; 
	margin-top: 10px; 
}
p { 
	line-height: 1.8; 
	margin: 10px 0; 
	-webkit-hyphens: auto; 
	-moz-hyphens: auto; 
	-ms-hyphens: auto; 
	hyphens: auto; 
	text-align:justify;
}

a { 
	color: #5db12e; 
	cursor: pointer; 
} 
a:hover, 
a:focus { 
	color: #56883a; 
	text-decoration: none; 
}

.btn { border-radius: 0px; border:0; }
.img-thumbnail { margin: 5px 0; border-radius: 0px; }
.img-kunden { background: none; border: none; }

/* LIST */
ul.ul { 
	list-style:square ; 
	padding: 0px; 
	margin: 0px 0px 0px 40px; 
}
ul.ul li { 
	margin-bottom: 50px; 
	margin-top: 25px; 
	font-size: 20pt; 
}

/* LOGO */
.logo {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 550px;
	padding: 15px;
}

/** NAVABR **/
.left-navbar { width: 75px; height: 100%; background: #111; box-shadow: 15px 0px 80px 5px rgba(0,0,0,0.5); position: fixed; left: 0; top: 0; bottom: 0; z-index: 500; }

.left-navbar ul.nav li { border-bottom: 1px dashed #444; }
.left-navbar ul.nav li:last-child { border-bottom: 0px; }

.left-navbar ul.nav li a { display: block; width: auto; padding: 15px 15px; font-size: 25px; color: #888; text-align: center; transition: 0.2s; -webkit-transition: 0.2s; }
.left-navbar ul.nav li a:hover, ul.nav li a:focus { background: #000; color: #5db12e; transition: 0.2s; -webkit-transition: 0.2s; }

/* TOOLTIP */
.tooltip-inner {
	padding: 10px 15px;
}

/** SECTIONS / CONTAINER / CONTENT **/
section { min-height: 100%; width: 100%; padding: 60px 0; }

section#start { background-image: url(../img/homeBg.jpg); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: auto; }
section#leistungen { background-image: url(../img/leistungenBg.jpg); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: auto; }
section#kontakt { background-image: url(../img/kontaktBg.jpg); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: auto; }

.content { padding: 30px; background: rgba(11,11,11,0.85); color: #fff; border: 2px dashed #444; }
.content p:first-child {
	margin-top: 0;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

/** FOOTER **/
footer { padding: 15px 0; background: #111; }
footer p { font-size: 12pt; }

.nav-pills>li>a { padding: 12px 18px; font-size: 12pt; background: rgba(0,0,0,0.2); margin-right: 5px; border-radius: 0px; }
.nav-pills>li>a:hover, .nav-pills>li>a:focus { background: #000; }


/* FORM */
label, .help-block { color: #fff; font-weight: 300; }

.form-control { height: 45px; margin-bottom: 5px; border-radius: 0px; }
.form-control:focus { box-shadow: 0 0 10px 0 rgba(93, 177, 46, 0.5); border-color: #5db12e; }

.form-group {margin-bottom:0;}

.form-group.has-error label,
.form-group.has-error .help-block { color: #ff0000; }
.form-group.has-error input { border: 1px solid #ff0000; }

.has-error .form-control::-webkit-input-placeholder {
  color: #ff0000;
}
.has-error .form-control:-moz-placeholder {
  color: #ff0000;
}
.has-error .form-control::-moz-placeholder {
  color: #ff0000;
}
.has-error .form-control:-ms-input-placeholder {
  color: #ff0000;
}
.has-error .form-control::-webkit-input-placeholder, .has-error .form-control::-webkit-input-placeholder {
  color: #ff0000;
}
.has-error .form-control:-moz-placeholder, .has-error .form-control:-moz-placeholder {
  color: #ff0000;
}

#danke { 
	display:none; 
}

/* BUTTONS */
.btn {
	transition: all .25s;
	font-size: 18px;
}
.btn-primary {
	background-color: #5db12e;
	border: none;
}
.btn-primary:hover {
	background-color: #5db12e;
}
.btn-default {
	background-color: transparent;
	border: 0;
	color: #5db12e;
	padding: 10px 15px;
}
.btn-default:hover {
	background-color: #5db12e;
	border: 0;
	color: #000;
}

/* MODAL */
.modal-content { background: #222; color: #fff; border-radius: 0px; }
.modal-header .close { font-size: 25pt; color: #fff; margin-top: -15px; margin-right: -10px; }


#topBtn {
	position: fixed;
	right: 30px;
	bottom: 83px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #5db12e;
	color: #fff;
	width: 48px;
	height: 48px;
}

/* CCM19 */
.ccm-settings-summoner {
	display: none !important;
}

.captcha,
.captcha label {
	color: #222;
}

/** MEDIA QUERIES **/
@media screen and (max-width: 1250px) {
    /** SECTIONS / CONTAINER / CONTENT **/
    .container { width: 940px; }   
}

@media screen and (max-width: 1050px) {
    /** SECTIONS / CONTAINER / CONTENT **/
    .container { width: 720px; }   
}

@media screen and (max-width: 820px) {
    body { padding: 0 0 50px 0; }
    
    /** SECTIONS / CONTAINER / CONTENT **/
    .container { width: 100%; }
    
    
    /** NAVABR **/
    .left-navbar { width: 100%; height: auto; box-shadow: 0px 15px 80px 5px rgba(0,0,0,0.8); position: fixed; top: auto; right: 0; text-align: center; }   
    .left-navbar ul.nav { display: inline-block; }
    .left-navbar ul.nav li { display: inline-block; border-bottom: 0px; }
    .left-navbar ul.nav li a { padding: 10px 15px; display: inline-block; }
    
    
    /** FOOTER **/
    footer { margin-bottom: 50px; }
}



/* responsiv text-align */
.text-center-xs { text-align: center; }
.text-right-xs { text-align: right; }
.text-left-xs { text-align: left; }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .text-center-sm { text-align: center; }
    .text-right-sm { text-align: right; }
    .text-left-sm { text-align: left; }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .text-center-md { text-align: center; }
    .text-right-md { text-align: right; }
    .text-left-md { text-align: left; }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .text-center-lg { text-align: center; }
    .text-right-lg { text-align: right; }
    .text-left-lg { text-align: left; }
}