/* CSS Document */

/**********************************************************************************/
/*                                                                                */
/*                    Andreas Hampl Malerbetrieb - Website-CSS                    */
/*                                                                                */
/*     Farben:       Grün:        	#00FF4C     0, 255, 76		                    */
/*                   Rot:     			#9B0000     155, 0, 0                         */
/*                   Blau:      		#3E2EA1     62, 46, 161                 		  */
/*                   Schwarz:  			#000000     0, 0, 0                    			  */
/*                   Weiß:          #FFFFFF     255, 255, 255                  		*/
/*                                                                                */
/*     Schrift:      Normal:        #333333     51, 51, 51                        */
/*                   Hover:         #00FF4C     0, 255, 76                        */
/*                                                                                */
/*                                                                                */
/*                                                                                */
/**********************************************************************************/
@media all {
	/********************************************************************************/
	/*****     Schriften                                                        *****/

	@font-face {
		font-family: 'Kalam-Bold';
		font-weight: 600;
		src: local('Kalam-Bold'), local('Kalam-Bold'), url('../fonts/Kalam-Bold.ttf') format('truetype');
	}

	.headline {
		color: #000000;
		font-family: 'Kalam-Bold', sans-serif, cursive;
		font-size: 2.5rem;
		-webkit-text-stroke:1px #FF00FF;
	}

	/********************************************************************************/
	/*****       Seiteneinstellungen                                            *****/

	html,
	body {
		height: 100%;
		margin: 0;
	}

	body {
		position: relative;
	}

	section {
		padding: 140px 0;
	}

	.container {
		height: 100%;
	}

	.row {
		height: 80%;
	}

	hr {
		background-color: #000;
		border: solid #000 1px;
	}

	.border {
		border: solid #EEE 4px;
	}

	button {
		margin-top: 30px;
	}

	.bg-black {
		background-color: rgba(09, 17, 24, 0.95);
	}

	.bootom_20 {
		padding-bottom: 20px;
	}

	.bootom_30 {
		padding-bottom: 30px;
	}

	/********************************************************************************/
	/*****     Text                                                             *****/

	body,
	p {
		font-family: 'Verdana', sans-serif;
		font-weight: 100;
		line-height: 1.3;
		padding-bottom: 4px;
		text-decoration: none;
		margin-bottom: 0;
		text-rendering: optimizeLegibility;
		text-align: justify;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: 'Verdana', sans-serif, cursive;
		font-weight: 600;
	}

	strong {
		font-weight: 900;
	}


	.text-right {
		text-align: right !important;
	}

	.text-green {
		color: #000000;
		-webkit-text-stroke: 1px #FF00FF;
	}

	.text-white {
		color: white;
	}

	a:hover,
	a:visited,
	a .text-white:hover,
	a.text-white:hover {
		text-decoration: none;
	}

	.center {
		text-align: center;
	}

	.figure-caption {
		font-size: 0.75rem;
		/* 12px */
		font-weight: 100;
		line-height: 1.3;
		color: #000;
		padding-top: 2px;
		padding-left: 15px;
		padding-right: 15px;
		text-align: justify;
		text-decoration: none;
		margin-bottom: 0;
		text-rendering: optimizeLegibility;
	}

	/********************************************************************************/
	/*****     Bilder                                                           *****/

	#home {
		background: url("../grafics/bg-start_3.jpg") 50% 50% fixed no-repeat;
		min-height: 100vh;
		background-size: cover;
	}

	#boden {
		background: url("../grafics/boden-bg.jpg") 50% 50% fixed no-repeat;
		min-height: 100vh;
		background-size: cover;
	}

	#innen {
		background: url("../grafics/innen-bg.jpg") 50% 50% fixed no-repeat;
		min-height: 100vh;
		background-size: cover;
	}

	#aussen {
		background: url("../grafics/aussen2-bg.jpg") 50% 50% fixed no-repeat;
		min-height: 100vh;
		background-size: cover;
	}

	.start-bg {
		background: url('../grafics/bg-info.jpg') 50% 50% fixed no-repeat;
		min-height: 100vh;
		background-size: cover;
	}

	#ueberuns .container {
		height: 100%;
	}

	.infoA-bg {
		background: url('../grafics/bg-info.jpg') 50% 50% fixed no-repeat;
		min-height: 100vh;
		background-size: cover;
	}

	.infoB-bg {
		background: url("../grafics/bg-info2.jpg") 50% 50% fixed no-repeat;
		min-height: 100vh;
		background-size: cover;
	}

	.infoC-bg {
		background: url('../grafics/bg-info.jpg') 50% 50% fixed no-repeat;
		min-height: 100vh;
		background-size: cover;
	}

	.infoD-bg {
		background: url("../grafics/bg-info2.jpg") 50% 50% fixed no-repeat;
		min-height: 100vh;
		background-size: cover;
	}

	/********************************************************************************/
	/*****     Back-to-Top Button                                               *****/

	#back-to-top-button {
		display: none;
		position: fixed;
		bottom: 65px;
		right: 50px;
		color: #222222;
		font-weight: 900;
		z-index: 1;
	}

	#back-to-top-button .bi {
		height: 40px;
		color: #FF00FF;
		border: 2px solid #FF00FF;
		border-radius: 10%;
		background-color: #222222;
	}

	#back-to-top-button .bi:hover {
		color: #00FF4C;
		border: 2px solid #00FF4C;
		border-radius: 10%;
		background-color: rgba(0, 0, 0, .8);
	}
	
	.svg-color{
    filter: invert(63%) sepia(94%) saturate(468%) hue-rotate(79deg) brightness(101%) contrast(115%);
	}

	/********************************************************************************/
	/*****     Bugfixing                                                        *****/

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.font-alt,
	p,
	button,
	a {
		filter: blur(0);
	}
}

@media (max-width: 767px) {
	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.75em;
	}

	h3 {
		font-size: 1.5em;
	}

	h4 {
		font-size: 1.25em;
	}

	h5 {
		font-size: 1em;
	}

	h6,
	p {
		font-size: 0.85em;
	}
}