@media all and (min-width: 480px)
{
	#banner
	{
		max-height: 50%;
		max-width: 30%;
	}

	#trainingTopicContainer
	{
		display: flex;
		flex-flow: row wrap;
	}
	
	#trainingTopic
	{
		width: 20%;
	}
	
	#trainingTitle
	{
		font-size: 2vw;
		text-align: center;
	}
	
	.text
	{
		text-align: center;
		font-size: 2vw;
	}
	
	/*#bannerContainer
	{
		display: flex;
        flex-direction: row;
	}*/
	#bannerContainer
	{
		display: inline-block;
	}
	
	
	#bannerDescription
	{
		max-width:60%;
		display: inline-block;
		transform: translateY(-50%);
	}
	
	#temp
	{
		margin-top:60px;
		margin-bottom:60px;
		margin-left:20px;
		margin-right:20px;
		color: rgb(176, 148, 7);
	}
	
	#flyer
	{
		height: 80%;
	}
}

@media all and (max-device-width: 480px)
{
	#banner
	{
		margin-left:10%;
		max-height: 50%;
		max-width: 80%;
	}

	#trainingTopicContainer
	{
		display: block;
	}
	
	#trainingTopic
	{
		width: 50%;
	}
	
	#trainingTitle
	{
		font-size: 3vw;
		text-align: center;
	}
	
	#text
	{
		text-align: center;
		font-size: 4vw;
	}
	
	#bannerContainer
	{
		display: flex;
        flex-direction: column;
	}
	
	#bannerDescription
	{
		max-width:100%;
		transform: translateY(0%);
	}

	.temp
	{
		margin-top:60px;
		margin-bottom:60px;
		margin-left:20px;
		margin-right:20px;
		color: rgb(176, 148, 7);
	}
	
	#flyer
	{
		width: 80%;
	}
}

body
{
  margin: 0px;
}

a 
{
  text-decoration: none;
  color: black;
}

hr
{
	height:2px;
	border-width:0;
	color:gray;
	background-color:gray;
	width:90%;
}

.underline
{
	text-decoration: underline;
	color: rgb(176, 148, 7);
}

.description
{
   text-align: center;
   margin: 30px;
   color: white;
   font-size: 1.5vw;
}

.important
{
    font-size: 2vw;
}

#welcomeContainer 
{
    display: inline-block;
    position: relative;
    width: 100%;
}

#welcomePicture 
{
    width: 100%;
}

#welcomeShadow 
{
    width: 60%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.6);
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
 }

.quote
{
    text-align: center;
    font-size: 4vw;
    margin-top:60px;
    margin-bottom:60px;
    margin-left:20px;
    margin-right:20px;
    color: rgb(176, 148, 7);
}

.left
{
  width: 33%;
  position: relative;
}

.right
{
  width: 50%;
  position: relative;
}

.trainingPicture 
{
    width: 100%;
}

.test
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2.0vw;
  text-align: center;
  background-color: rgba(51, 51, 51, 0.4);
  border-radius: 20px;
  width: 80%;
}

.flexContainer 
{
    display: flex;
    align-items: center;
    justify-content: center;
}

#trainingContainer
{
  margin-bottom: 5vw;
  margin-left: 5vw;
  margin-right: 5vw;
}

#trainingTopic
{
	background-color: rgba(51, 51, 51, 0.4);
	padding:1vw;
	text-align: center;
	margin-left: auto;
    margin-right: auto;
	margin-top:2vw;
	margin-bottom:2vw;
	border-radius:1vw;
}

#trainingTopic img
{
	width: 100%;
}

#proTraining 
{
  font-size: 1.5vw;
  margin: 3vw;
}

#proTraining img
{
  height: 20vw;
  margin-left: 3vw;
}

#allTraining 
{
  font-size: 1.5vw;
  margin: 3vw;
}

#allTraining img
{
  height: 26vw;
  margin-right: 3vw;
}

#generalDescriptionTraining 
{
  font-size: 1.5vw;
  margin: 3vw;
  text-align: center;
}

#generalDescriptionTraining img
{
  height: 26vw;
  margin-left: 3vw;
}

#trainingContainer h1
{
  text-align: center;
  font-size: 4vw;
}

#trainingContainer h2
{
  text-align: center;
  font-size: 2vw;
}

#trainingBanner img
{
  height: 26vw;
}

#contact
{
  font-size: 2vw;
  text-align: center;
}

#cv
{
  width: 80%;
  border-radius: 50%;
  font-size: 1.5vw;
  margin-left: 10%;
  line-height: 2vw;
}

#cv img
{
  height: 30vw;
  border-radius: 50%;
}

#flyer
{
	height: 80%;
}

.center
{
	text-align: center;
}