body
{
	margin: 0;
	padding: 0;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
}

#header{
	height: 100vh;
	background: radial-gradient(rgba(133, 133, 121, 0.6),rgba(53, 53, 51, 0.6)),url(img/pic1.png);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

.user-box{
	top:40%;
	left:50%;
	transform: translate(-50%, -50%);
	position: absolute;
    color: #fff;
}

.user-box h1{
	color: #fff;
	font-weight: bold;
	margin: 10px;
}

.scroll-btn{
	bottom: 15px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border: 1px solid #fff;
	padding: 10px 10px 20px;
	border-radius: 30px;
    animation: mover 4s;
}

.scroll-bar span{
	border: 2px solid #fff;
	font-size: 10px;
	border-radius: 30px;
}

@keyframes mover {
    from {bottom: 46px;}
    to {bottom: 15px;}
}

/*--------------nav----------*/
.nav-bar{
	top: 0;
	position: sticky;
	z-index: 2; /*bleibt immer oben am rand über allem*/
}

.navbar-brand img{
	height: 55px; /*logo*/
    margin: 3px 0px 3px 30px;
}

.nav-bar .fa-bars{
	font-size: 35px;
}

.navbar-toggler{
	outline: none !important; /*outline ist linie drum rum*/
}

.navbar-nav{
	float: right;
	text-align: right;
    padding-right: 30px;
}

/********** finanz **************/
.section-1 {
	padding-top: 5rem;
	padding-bottom: 25rem;
	scroll-margin-top: 50px;
  }
  
  .section-1 .row .col-lg-6 .bild img {
	width: 100%;
	border-radius: 10px;
  }
  
  .section-1 .row .col-lg-6:last-child {
	position: relative; /*Das Element wird vom normalen Fluss aus verschoben und hat 
	keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird*/
  }
  
  .section-1 .row .col-lg-6 .panel {
	position: absolute; /*Das Element wird aus dem normalen Fluss gelöst und unabhängig verschoben. Dabei können andere Elemente verdeckt werden. 
	Diese verhalten sich so, als ob das Element nicht vorhanden wäre und lassen keinen Platz für das Element.*/
	top: 5vmin; /*damit sich kasten bewegt beim vergrößern/verkleinern vom bildschirm*/
	left: -15vmin; /*--Überlappung von Bild und TextContainer--*/
	background: white;
	border-radius: 3px;
	text-align: left;
	padding: 6vmin 8vmin 8vmin 12vmin; /*top, right, bottom, left*/
	box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2); /*--Shadow Boxrand--*/
	z-index: 1;
  }
  
  .section-1 .row .col-lg-6 .panel h1 {
	font-weight: bold;
	padding: 0.4em 0;
	font-size: 2em;
  }
  
  .section-1 .row .col-lg-6 .panel p {
	font-size: 0.9em;
	color: rgba(0, 0, 0, 0.5);
  }



/*media queries müssen von oben nach unten geordnet sein, wegen max!!!!!*/
@media only screen and (max-width: 1200px) {
	.section-1{
		padding-bottom: 30rem;
		padding-top: 8rem;
	}
}

@media only screen and (max-width: 992px) {
	.section-1 .row .col-lg-6 .panel {
	 position: initial; /*initial setzt Wert (height) zurück auf 100% (nicht 80%)*/
	 width: initial;
	 height: initial;
   }
   .section-1{
	   padding-bottom: 5rem;
	   padding-top: 3rem;
   }
   .panel{
	   margin-top: 1rem;
   }
}


/*----------skills ----------------*/
#skills{
	padding-top: 1rem;;
	padding-bottom: 3rem;
}
#skills h2{
	padding-bottom: 20px;
}

#skills .services-box{
	background: #f9f9f9;
}

#skills .services-box:hover{
	background: #000;
	color: #fff;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	transition: 1s;
}

#skills .services-box:hover p{
	color: #fff;
}

.services-box{
	background: #fff;
	padding: 10px;
	margin-top: 20px;
	border-top-right-radius: 50px;
	border-bottom-left-radius: 50px;
}

.services-box .fa{ /*kasten um boxen*/
	margin: 0 10px;
	font-size: 20px;
}

.services-box span{ /*schrift von überschrift*/
	margin: 3px;
	font-size: 20px;
	font-weight: bold;
}

.services-box p{
	font-size: 15px;
	margin-top: 20px;
	color: #777;
}

.services-box:hover{
	background: #000;
	color: #fff;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	transition: 1s;
}

.services-box:hover p{
	color: #fff;
}

/*------------versicherung------------------*/
.section2{
    background: #f9f9f9;
    margin-top: 1rem;
	scroll-margin-top: 50px;
}

.section2 .row .col-lg-6 .bild img {
    height: 60vh;
	width: 100%;
	object-fit: cover;
	display: flex;
	align-items: center;
}

.section2 .row .col-lg-6:last-child {
    padding: 4vmin 8vmin 4vmin 8vmin; /*top, right, bottom, left*/
}

  .section2 .row .col-lg-6 h1 {
	font-weight: bold;
	padding: 0.4em;
	font-size: 2em;
    padding-bottom: 3rem;
  }
  
  .section2 .row .col-lg-6 p {
	font-size: 0.9em;
	color: rgba(0, 0, 0, 0.5);
  }

  @media (max-width: 992px) {
    .section2 .bild img {
        height: auto;
    }
}
/*------------------immo------------------------*/
#social{
	padding-top: 60px;
	padding-bottom: 60px;
}

#social h1{
	padding-bottom: 30px;
}

#social h3{
	padding-bottom: 10px;;
}

/*for box design and hover see services-box*/


/*---contact----*/
.contact{ /* hintergrundbild */
	padding-top: 50px;
	background: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(img/hintergrund.jpg);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	color: #fff;
}

.contact .row{
	padding: 30px 0;
	font-size: 15px;
}

.contact .col-md-4 .fa{
	padding: 10px;
	font-size: 30px;
}

.contact .btn{
	padding: 10px 25px 10px 25px;
	margin: 5px;
	border-radius: 30px;
	border: 2px solid #fff;
	background: transparent;
}

.contact .btn{
	box-shadow: none !important;
}

.contact .btn:hover{
	border: 2px solid #000 !important;
	background: #000 !important;
	transition: 0.6s;
}

.contact .btn .fa{
	margin-right: 10px;
}

.footer{
	background: #000;
	height: 50px;
	margin-top: 50px;
}