@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Birthstone&family=Gravitas+One&display=swap');
 
/* Reset der Browseransicht */

*{
margin: 0;
padding: 0;
-mozbox-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* Clearfix */

.row:before,
.row:after {
content: " ";
display: table;
}
 
.row::after {
clear: both;
}

/* Gestaltung der Spalten */

.column {
float: left;
margin: 25px 0 25px 5%;
}

.column:first-child{
margin-left: 0;
}

.col_1{
width: 100%;
}
 
.col_1_2{
width: 47.5%;
}

.col_1_3{
width: 30%;
}
 
.col_2_3{
width: 65%;
}
 
.col_1_4{
width: 21.25%;
}
 
.col_3_4{
width: 73.75%;
margin-top: 35px;
text-align: center;
}

/* Allgemeine Einstellungen */

.wrapper{
max-width: 1250px;
padding: 0 25px;
margin: 0 auto;
}

body{
font-size: 20px;
background-color: #3C4341;
color: #ffffff;
}

h1{
    color: #ED6339;
    font-family: "Gravitas One", serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 40px;
    border-top: 2px solid #ED6339;
    border-bottom: 2px solid #ED6339;
    padding: 10px 0;
}
h2{
    color: #ED6339;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 30px;
}

h3{
    color: #ED6339;
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 24px;
}

section{
    margin: 20px 0;
}

/* Gestaltung des Headers und des Footers */

header, footer{
  background-color: #579887;
}

header h1, footer h1{
    color: #ffffff;
    font-size: 48px;
    border-style: none;
}

header p{
  margin-top: 75px;
  margin-bottom: 75px;
}

.netzwerk{
  color: white;
  font-size: 20px;
  text-shadow: 2px 2px 0 black, 2px -2px 0 black, -2px 2px 0 black, -2px -2px 0 black, 2px 0px 0 black, 0px 2px 0 black, -2px 0px 0 black, 0px -2px 0 black;
  margin: 20px;
  text-decoration: none;
}

/* Gestaltung der Navigation */

#navigation{ 
text-align: center;
border-top: 3px solid #3C4341;
border-bottom: 3px solid #3C4341;
padding-top: 10px;
padding-bottom: 10px;
}

#navigation li{
display: inline;
list-style: none;
margin-left: 35px;
padding: 10px;
}

#navigation li a{
text-decoration: none;
text-transform: uppercase;
font-size: 24px;
color: #ffffff;
padding: 5px;
text-shadow: 2px 2px 0 #3C4341, 2px -2px 0 #3C4341, -2px 2px 0 #3C4341, -2px -2px 0 #3C4341, 2px 0px 0 #3C4341, 0px 2px 0 #3C4341, -2px 0px 0 #3C4341, 0px -2px 0 #3C4341
}

#navigation li a:hover{
background-color: #ED6339;
}

/* Responsive Navigation */

.nav-toggle {
	display: none;
}

.nav-toggle {
background: #ED6339;
padding: 10px 15px;;
color:white;
display: none;
text-decoration: none;
}
 
.nav-toggle:hover {
background: white;
text-decoration:none;
color: #ED6339;
}

/* Gestaltung der Einleitung */
#unterschrift{
 font-family: "Birthstone", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
}
.certificate{
  width: 100%;
  height: 800px;
  border-radius:0%;
}

/* Gestaltung der Vorschau */
#teaser{
  background-color: #6E5851;
}

.vorschau{
  background-color: #3C4341;
  padding: 10px;
  text-align: center;
}
.infos{
  background-color: #ED6339;
  color: #ffffff;
  padding: 10px;
  border: 2px solid #000000;
  text-decoration: none;
}

#nav1 a{
    text-decoration: none;
    color: #ED6339;
}

img{
    border-radius: 50px;
    filter: drop-shadow();
}

section p{
  margin-bottom: 10px;
}
span{
  color: #39EDBE;
}
hr{
  border: 2px dashed #ED6339;
}


/* Gestaltung Section Werdegang */

table{
  background-color: white;
  border-collapse: collapse;
  border-spacing: 15px;
  width: 100%;
}
thead{
  background-color: #ED6339;
  color: white;
}
tbody{
  color:#000000;
}
th{
  border-right: #ED6339 2px solid;
}
td{
  border-right: #ED6339 2px solid;
  border-bottom: #ED6339 2px solid;
  padding-left: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 20px;
}
.ende{
  border-right: none ;
}
.schluss{
  border-bottom: none;
}

/*Gestaltung der Section Kenntnisse */

.bezeichner{
  display: inline;
  float: left;
  width: 20px;
  margin-right: 75px;
}

.balken{
  display: inline;
  float: left;
  width: 20px;
  background: #ED6339;
  margin-right: 10px;
  color:#ED6339;
}
.endbalken{
  background: white;
  color: white;
}

.softskills{
  margin-left: 20px;
}

/*Gestaltung der Beispiele */
video{
  width:100%;
  height: auto;
}

.bsp{
    margin: 20px;
    height: 416px;
    display: block;
    width: 480px;
    border-radius: 0px;
    border: 2px solid #ED6339;
}
footer{
  font-size: 24px;
}

.carousel {
            overflow: hidden;
            /*border: 2px solid #ccc;*/
            position: relative;
        }

.carousel-track {
    display: flex;
    animation: slide 12s infinite;
}

.carousel-item {
    /*background-color: #f4f4f4;*/
    padding: 20px;
    box-sizing: border-box;
}

 /* Slider Animation */       

 @keyframes slide {
            0% { transform: translateX(0); }
            25% { transform: translateX(-560px); }
            50% { transform: translateX(-1120px); }
            75% { transform: translateX(-1680px); }
            100% { transform: translateX(0); }
        }    

/* Media Queries */


/* kleinere Monitore */
@media only screen and (max-width: 1250px) {

  .bsp{
      margin: 20px;
      height: 374.4px;
      display: block;
      width: 432px;
      border-radius: 0px;
      border: 2px solid #ED6339;
  }

}

/* Tablets */
@media only screen and (max-width: 1064px) {
 
.bezeichner{
  display: inline;
  float: left;
  width: 200px;
  margin-right: 75px;
}

}

/* Smartphones */
@media only screen and (max-width: 950px) {

.carousel-track {
    display: block;
    animation: none;
}

header h1, footer h1{
  font-size: 30px;
}

h1{
  font-size: 30px;
}
h2{
  font-size: 25px;
}
h3{
  font-size: 20px;
}

.is-hidden{
  display: none;
  }

table, tr, td {
		padding:0;
		border:1px solid #ED6339;
    font-size: 9px;
	}

	table {
		border:none;
	}

	thead {
		display:none;
	}

	tr {
		float: left;
		width: 100%;
		margin-bottom: 2em;
	}

	td {
		float: left;
		width: 100%;
		padding:1em;
	}

	td::before {
		content:attr(data-label);
		word-wrap: break-word;
		background: #ffffff;
		border-right:2px solid #ED6339;
		width: 20%;
		float:left;
		padding:1em;
		font-weight: bold;
		margin:-1em 1em -1em -1em;
	}
  
 .bsp{
      margin: 5px 0;
      height: 280.8px;
      display: block;
      width: 100%;
      border-radius: 0px;
      border: 2px solid #ED6339;
  }

.bezeichner{
  display: block;
  float: left;
  width: 20px;
}

.col_1, .col_1_2, .col_1_3, .col_2_3, .col_1_4, .col_3_4, .col_1_2 {
width: 100%;
}
.column{
margin-left: 0;
}

/* Responsive Navigation */

.nav-responsive{
  font-size: 15px;
}

nav {
		height: 0;
		transition:height .2s ease-in-out;
		overflow: hidden;
	}
	.nav-toggle {
		display: block;
	}
	#nav-open:target .nav-closed {
		display: block;
	}
	.nav-closed,
	#nav-closed:target .nav-closed,
	#nav-open:target .nav-open {
		display: none;
	}
	#nav-open:target nav {
		height: 320px;
	}
	#navigation {
		margin-top: 15px;
		float: none;
		border-bottom: 1px solid #ccc;
	}
	#navigation li {
		display: block;
		margin-left: 0;
		text-align: left;
		border-top: 1px solid #ccc;
font-size:10px;
	}
	#navigation li a {
		margin-left: 0;
		display: block;
		padding: 15px 30px;
	}
}