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

.container {
	margin: 0 auto;
	overflow: visible;
}

.navbar{
	background-color: #14284D;
	padding: 0px
}
.navbar .flex{
	height: 100%;
}
.navbar ul{
	display: flex ;
	width: 100%;
	list-style-type: none;
	
}
.navbar li{
	padding: 30px;
	text-align: center;
}
.navbar li:last-child{
	margin-left: auto;
}
.navbar a{
	color: white;
	text-decoration: none;
	}
.navbar a:hover{
	color: white;
	text-decoration: underline;
}
.showcase{
	padding:30px 60px;
}

.grid {
	overflow: visible;
	display: grid;
	grid-template-columns: 80% 20%;

}
.grid-1{
	margin: 0 60px
}
.grid-2{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin: 30px 60px;
	}
	
	.grid-22{
	display: grid;
	grid-template-columns: 45% 55%;
	gap: 30px;
	margin: 30px 60px;
	}
.grid-3{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.Tage{
	margin-top:30px;
}
.Tag{
   padding: 30px;
   text-align: center;
   border: 2px solid #f07f24 ;
   border-radius: 10px
}
.flex{
	display: flex;
	justify-content:space-around;
}
.flex2{
	display: flex;
	justify-content:space-around;
	margin: 30px 60px;
	flex: 2 1;
}

.img1{
	width:40% ; 
	margin-top:30px ;
	display: none;
	padding: 10px;
	border:3px solid #f07f24 ;
	border-radius: 50%
}
.img2{
	float:right;
	width: 100%;
	
}
.img3{
	width:100%;
}

.webhid{}
.webhid2{
	display: none
}
.iframe{
	width:100%;
	height: 80%;
	border-style: none
}

table{
	width: 100%;
	height: 80%;
	font-family: Century Gothic;
    }
 th{ 
    background-color: rgba(240, 127, 36);
	color: white
    }
th,td{
	border-bottom: 1px solid #ddd;
	padding: 10px;
	text-align: center;
	vertical-align: center;
	border-radius: 8px;
    }	
 tr:hover {
	background-color: rgba(240, 127, 36,0.2);
    }


footer{
	background-color: #14284D;
	padding: 20px 30px;
	margin-top: 20px
}
a.foo{
	color: white;
	text-decoration: none;
}

a.foo:hover{
	text-decoration: underline;
}
a.text5{
  color: white;
  text-decoration: none;
}
a.text5:hover{
  color: white;
  text-decoration: underline;
}
.footul{
	list-style-type: none; 
	float:right; 
	text-align:center;
}
.profiles{
	text-align: center;
}
.icon1{
	color:white; 
	padding-left: 10px
}

.headline{
	font-family: Century Gothic;
	font-size: 50px;
	font-weight: bold;
	color: #14284D;
}
.text{
  font-family: Century Gothic;
  font-size: 25px;
  font-weight: bold;
  color: #14284D;
}
.text2{
  font-family: Century Gothic;
  font-size: 25px;
  font-weight: bold;
  color:#f07f24;
  margin-top: 10px;
}
.text3{
  font-family: Century Gothic;
  font-size: 15px;
  line-height:170%
}
.text4{
  font-family: Century Gothic;
  font-size: 15px;
  font-style: italic;
  color: white;
}
.text5{
  font-family: Century Gothic;
  font-size: 15px;
  color: white;
}
.y{
 margin-right:30px;
}
a.tt{
	color: #14284D;
	text-decoration: none;
}
a.tt:hover{
	color: #14284D;
	text-decoration: underline;
}

@media (max-width:1300px){
	.grid-2{
		grid-template-columns: 1fr;
  }
  .webhid2{
	display: block;
    }
	.webhid{
	display: none
}
}
/*Tablets and under*/
@media(max-width:1100px){
  .grid{
    grid-template-columns: 100% 0%;
  }
  .img1{
		display:block;
		margin-left: auto;
		margin-right: auto;
  }
	
  .grid-22{
		grid-template-columns: 1fr;
  }
  
	  .grid-3{
		flex-direction: column;
  }
  .showcase{
		height: auto;
	}
	.navbar ul{
		flex-wrap: wrap;
		justify-content:flex-start;
		padding:30px
	}
	.navbar li{
		padding: 0px 15px 
	}
	.navbar li:last-child{
	 margin: 0px
}
	.headline{ font-size: 40px
	}
	.text{ font-size:20px
	}
	.flex, .flex2{
		flex-direction: column;

	}
	.x{
		margin-top: 30px;
	}
	.y{ margin: 0px}
	
	.iframe{
		height: 65%;
	}
    table{
		font-size: 15px;
	}
	td{
		padding:10px 1px
	}
	
}

@media (max-width: 500px){
	.navbar ul{
		flex-direction: column;
		
	}
	
}