/*
	Theme Name: GFB Webseite
	Date: January 2017
	Description: Basic layout for PC screen
	Version 1.0
	Author: Pawel Reinbach
	Author URL: "http://budde-edv.de"
*/


/***********************************************/
/****************** GLOBAL *********************/
/***********************************************/

.body {
    background: url("../img/background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
    height: 1px;
    min-height: 100vh;
	width: 100%;
	font-size: 95%;
	font-family: Tahoma, Geneva, sans-serif;
	line-height: 1;
	text-align: left;
}

/*p, li, h1, h2, h3, h4  {
	color: #fff;
	font-weight: normal;
}*/

input{
	max-width: 300px;
}

textarea {
	width: 380px;
}


/****************************************************/
/****************** MAIN HEADER *********************/
/*************** LOGO & NAVIGATION ******************/
/****************************************************/

.mainHeader {
	background: rgba(0, 0, 0, 1);
	float: top;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 10% 0 10%;
}

.logo{
    max-width: 275px;
}

.logo img{
	width: 100%;
}

.navigation {
    width: 850px;
}

.navigation nav{
	padding: 60px 0 60px 0;
}

.navigation nav ul {
	list-style: none;
    margin: 0 auto;
}

.navigation nav ul li {
	display: inline;
	font-size: 130%;
	margin-right: 18px;
	letter-spacing: 0px;
	-webkit-font-smoothing: antialiased;
}

.navigation nav a:link, .navigation nav a:visited {
	color: #fff; 
	display: inline-block;
	text-decoration: none;
}

.navigation nav a:hover, .navigation nav a:active, .navigation nav .active a:link, .navigation nav .active a:visited {
	color: #6ec0e6; 
	text-shadow: none;
}


/****************************************************/
/********************** TILES ***********************/
/****************************************************/

.content-wrap {
    min-height: calc(100% - 179px);
}

.tilesSpot {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 40px 10% 40px 10%;
}

.tile {
    width: 32%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.first {
	background: rgba(110, 192, 230, 0.9);
}

.second {
	background: rgba(209, 97, 153, 0.9);
}

.third {
	background: rgba(245, 153, 61, 0.9);
}

.iconBox {
    display: flex;
    justify-content: center;
}

.iconBox img{
	width: auto;
	height: 125px;
}

.descriptionBox h2{
    text-align: center;
}

.descriptionBox ul{
    padding: 10px 5% 10px 5%;
}

.descriptionBox ul li{
    margin-left: 7%;
    margin-top: 20px;
}

.descriptionBox {
    height: 430px;
}

.underBox {
    height: 100px;
    background: rgba(255, 255, 255, 1); 
}

.underBox p {
    padding: 10px 7% 10px 7%;
}


/****************************************************/
/****************** MAIN CONTENT ********************/
/***************** TEXT AND STUFF *******************/
/****************************************************/

.mainContent-home {
    width: 100%;
	background: rgba(110, 192, 230, 0.9);
	overflow: hidden;
	line-height: 21px;
}

.content-home {
	margin-top: 3%;	
	margin-bottom: 5%;
	padding: 0 10% 0 10%;
	display: inline-block;
}

.left{
	width: 40%;
	padding: 0 0 0 10%;
}

.right{
	float: right;
	width: 40%;
	padding: 0 10% 0 0;
	text-align:right; 
}

.mainContent {
    width: 100%;
    min-height: calc(100% - 179px);	
	background: rgba(230, 230, 230, 0.9);
	overflow: hidden;
	line-height: 21px;
}


.contact {
	height: auto;
}

.mainContent p, .mainContent h1, .mainContent h2, .mainContent h3, .mainContent h4 {
	color: #000;
}

.mainContent h4 {
	font-weight: bold;
}

.content {
	float: left;
	margin-top: 3%;	
	margin-bottom: 5%;
	padding: 0 10% 0 10%;
}

/****************************************************/
/********************** FOOTER **********************/
/****************************************************/

.mainFooter {
    width: 100%;
	height: 40px;
	background: rgba(0, 0, 0, 0.9);
}

.mainFooter p{
	text-align: left;
	padding: 15px 0 0 10%;	
	margin: 0 auto;
	font-size: 80%;
	color: #fff; 
}

.mainFooter a{
	color: #fff; 
	text-decoration: none;
}






/****************************************************/
/****************************************************/
/****************************************************/
/******************* ADJUSTMENTS ********************/
/****************************************************/
/****************************************************/
/****************************************************/

@media only screen and (max-width: 1424px) {
    .content-wrap {
        min-height: calc(100% - 313px);
    }

    .mainContent {
        min-height: calc(100% - 313px);	
    }
}

@media only screen and (max-width: 1330px) {
    .descriptionBox {
        height: 480px;
    }
    
    .underBox {
        height: 130px;
        background: rgba(255, 255, 255, 1); 
    }
}