@import url(bootstrap.css);
@import url(logo_slider.css);
@import url(poppins.css);
@import url(fonts.css);

body {
	font-family: Raleway;
	color: #062e3b;
	font-size: 1.2rem;
	font-weight: 300;
	overflow-x: hidden;
}

a {color: #5f6d6c; text-decoration: none;}
a:hover {color: #6d645f;}
p {margin-bottom: 1.5rem;}

.menu {background: #72c2bd; border-bottom: 2px solid white;}
/*.row {margin: 0;}*/
.logo {
	background: #d4bdab;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	align: center;
	}

/* Menu */
.navbar {padding: 0;}
.navbar-nav {flex-direction: unset; padding-right: 1rem;}
.navbar-dark .navbar-nav .nav-link {
	color: #062e3b;
	font-family: Raleway;
	font-size: 1.2rem;
	padding-right: 3rem;
	padding-top: .75rem;
	padding-bottom: .75rem;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {color: #062e3b;}


h2, h4, h5 {font-family: Caladea; font-weight: 400;}
h3 {font-weight: normal;}
h4 {font-weight: bold; margin-bottom: .2rem;}


b {
	font-weight: 600;
	
}

h2 {
	font-size: 3rem;
	text-transform: uppercase;
	margin: 3.8rem 0 1.5rem 0;
	
}

h3 {
	color: #ad8764;
	font-size: 2rem;
	text-transform: uppercase;
	font-family: Allison;
	margin-top: 2.2rem;
	margin-bottom: 1.8rem;
}
h5 {
	color: #c28d72;
	font-weight: bold;
	font-size: 1rem;
	margin-bottom: 0;
}

h4 {
	font-family: allura;
	font-size: 2.5rem;
	margin-bottom: 0rem;
}

.cryptmail {
  display: none;
}


#Konzept {padding-bottom: 5rem;}
#Intro, #Ablauf, #Termine, #Anmeldung, #Uber-mich  {padding-bottom: 5rem;}
#Orte {padding-bottom: 5rem;}
#Use-Cases h2 {margin-top: 5.5rem;}

#Konzept h2 {color: #ad8764;}
#Ablauf h2 {color: #ad8764;}
#Termine h2 {color: #ad8764;}
#Orte h2 {color: #ad8764;}
#Anmeldung h2 {color: #ad8764;}
#Uber-mich h2 {color: #ad8764;}

.row.leftspace {padding-left: 2.5rem;}
.col-md-6.topsapce {padding-top: 5.2rem;}


.center {
  margin: auto;
  width: 70%;
}


/* Boxes */
#Infoboxes {background: #f2eeea; padding-bottom: 8.5rem;}
#Infoboxes a {color: #172842; display: contents;}
.col-md-4.teaser {margin-top: -12%;}

.teaser:nth-child(1) .text {border-top: 10px solid #72c2bd;}
.teaser:nth-child(2) .text {border-top: 10px solid #72c2bd;}
.teaser:nth-child(3) .text {border-top: 10px solid #72c2bd;}

.teaser {transition: transform .2s;}


.teaser h2 {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	font-size: 1.7rem;
	line-height: 1.5rem;
	font-weight: 600;
	margin: 3rem 0 2.5rem 0;
}
.teaser .text {
	position: relative;
	text-align: center;
	background: white;
	padding-bottom: 1.5rem;
}
.teaser p {padding: 0 3rem;}

/*Flex items*/
.col-md-4.teaser {display: flex;}

@media all and (min-width: 40em) {
	.col-md-4.teaser{
		width: 50%;
	}
}
@media all and (min-width: 60em) {
	.col-md-4.teaser { 
		width: 33.33%;
	}
}
.teaser .text {width: 100%;}



#Intro {
	padding: 3.5rem 0 2.5rem;
}
#Über mich {padding-bottom: 14.5rem;}


}

#Use-Cases .progress {margin-bottom: 1.3rem;}

figure, .figure-img {margin: 0 0 0 0;}


footer {
	color: #062e3b;
	background: #ad8764;
	padding: 5rem 0 9rem;
}
footer b {font-size: 1.4rem;}
footer a {color: #125d75; text-decoration: underline;}
footer a:hover {color: #125d75; text-decoration: none;}

/* toTop Link */
#toTop {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 55px;
	right: 10px;
	overflow: hidden;
	width: 54px;
	height: 53px;
	border: none;
	text-indent: 100%;
	background: url(../img/ui.totop.png) no-repeat left top;
}

#toTopHover {
	background: url(../img/ui.totop.png) no-repeat left top;
	width: 54px;
	height: 53px;
	display: block;
	overflow: hidden;
	float: left;
	opacity: 0;
	-moz-opacity: 0;
	filter: alpha(opacity=0);
}

#toTop:hover {opacity: 0.5 !important;}

#toTop:active, #toTop:focus {outline: none; opacity: 0.5;}



/* Responsive */

@media (min-width: 992px) {
	.navbar-toggleable-md .navbar-toggler {display: none;}
	.navbar-toggleable-md .navbar-collapse {
		display: -webkit-box !important;
		display: -webkit-flex !important;
		display: -ms-flexbox !important;
		display: flex !important;
		width: 100%;
	}
}

@media screen and (min-width: 992px) and (max-width: 1400px) {

}

@media screen and (min-width: 1200px) and (max-width: 1400px) {

}
@media screen and (min-width: 992px) and (max-width: 1200px) {

}

/* Medium devices (tablets, less than 992px) */
@media screen and (min-width: 767.98px) and (max-width: 991.98px) {
	.navbar-dark .navbar-toggler {display: none;}
	.navbar-collapse {display: block !important;}
	.col-md-4.teaser {width: 100%; display: contents;}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
	.logo {
	  background: #d1c5b7;
	  position: fixed;
	  top: 0;
	  z-index: 3;
	  width: 100%;
	}	
	.logo img {width: 20%;}
	
	.navbar-dark .navbar-toggler {
		position: fixed !important;
		right: 15px !important;
		top: 45px !important;
	}
	.navbar-nav {
		position: fixed;
		width: 100%;
		z-index: 4;
		top: 80px;
		margin-top: 40px;
		padding-bottom: .5rem;
		flex-direction: column; 
		background: #172842;
		padding-right: 0;
	}
	
	.navbar-dark .navbar-toggler {
		position: absolute;
		z-index: 5;
		right: 0;
		top: 10px;
		border: none;
		background: #172842;
		padding: .25rem .5rem;
	}
	.navbar-dark .navbar-nav .nav-link {color: white; text-align: center;}
	.navbar-dark .navbar-nav .nav-link:hover {color: white; opacity: .8;}
	.navbar-toggler:focus {box-shadow: unset;}
	.navbar-nav {left: 0;}
	
	.col-md-4.teaser {margin-top: 0;}
	header .figure {margin-top: 19%;}
	
	.col-md-4.teaser {width: 100%;}
	
	#Impressum-Datenschutz{margin-top: 12rem;}
	.col-md-6.topsapce {padding-top: 0;}
}

@media (max-width: 600px) {
	header .figure {margin-top: 25%;}
}

@media (max-width: 520px) {
	header .figure {margin-top: 28%;}
}