@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');

* {
	/*margin: 0;
	padding: 0;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/

}

#body-faseovergang{
margin-top: 5em;
/*background-image: url("../images/faseovergang/backgroundS.jpg");*/

/*position: absolute;*/

}
#gallery h1{
/*font-family: 'Raleway', sans-serif;*/
/*font-weight: bold;*/
margin-left: 1em;
text-align: left;
color: black;
font-weight: 999;
font-size: 80px;
}
h2{
	color: black;
}
p{
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 27px;
}
.outline{
width: 80%;
margin: auto;
background-color: white;

}
.top{
background-color: #222222;
border: 1px solid black;
/*border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;*/
text-align: center;
margin-top: 1.25%;

}
.top h1{
	text-align: left;
	margin-top: 0.5em;
	font-size: 50px;
	color: white;
	text-decoration: none;
}
.logo{
width:10em; 

}
.title{
	/*width: 100%;*/
	color: black;
	border-bottom: 3px solid black;
	text-align: center;
	width: 75%;
	margin-left:12.5%;
	
	
}
.text{

}
.picture{
/*border-left: 5px solid black;*/

}
hr{
font-size: 50px;

}
.Fase-One{
background-color: white;
padding-left:2em;
padding-right: 2em;

    /*padding-left:-15555px;
	padding-right:-15555px;*/
}
.Fase-One-Text{
padding-right: 2em;
}
.Fase-One-Text h2{
text-align: center;

}
.Fase-One img{
	/*width: 45em;*/
	/*width: 100%;*/
}
.Fase-Two{
background-color: white;
padding-left:2em;
padding-right: 2em;
padding-top: 5em;



    padding-left:-15555px;
	padding-right:-15555px;
}

.Fase-Two-Text{
/*background-color: #3E961B;*/

}
.Fase-Three{
background-color: white;
padding-left:2em;
padding-right: 2em;
padding-top: 5em;



    padding-left:-15555px;
	padding-right:-15555px;
}
.Fase-Three-Text{
/*background-color: #67b42a;*/
}
.Fase-Four{
background-color: white;
padding-left:2em;
padding-right: 2em;
padding-top: 5em;

 

    padding-left:-15555px;
	padding-right:-15555px;
}
.Fase-Four-Text{
/*background-color: #3E961B;*/
}
.photo{
width: 100%;
outline-bottom: 25px black solid;

}
.app{
width: 50%;
outline-bottom: 25px black solid;

}
hr.border {
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 3px 0 0 0;
    border-radius: 190px;
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    
    margin-top: 1em;
}
.explanation h1{
padding-left: 1em;
padding-top: -8em;

}
.languages{
padding-left: 3em;
padding-top: 2em;

}
.list{
font-size: 25px;
list-style-type:square;
padding-left: 3em;
}
#whitebackground{
	background-color: white;
	margin-top: -3.15em;
	margin-left: -1em;
	margin-right: -1em;
}


#colortext{
	color: #444;
}
#colortext h1{
	
	color: #272625 !important;
}
#colortext h2{
	text-align: center;
	padding: 5px 0px 5px 0px;
	border: solid 2px black;
	background-color: grey;
	color: #272625 !important;
}


.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}