@charset "UTF-8";
/* Body */
html, body {
    font-family: jost;
	color: #0a406d;
    margin-left: 2vw;
	margin-right: 2vw;
}

.headertext {
	color: #6f61b5;
	font-weight: 600;
	margin-left: 5%;
	margin-right: 5%;
	text-align: center;
}

.headertexties {
	font-weight: 600;
	margin-top: 0;
	margin-left: 5%;
	margin-right: 5%;
	text-align: center;
}
.text{
	margin-left: 5%;
	margin-right: 5%;
	font-weight: 200;
	text-align: center;
}

.imageies {
	
	}

/* Mobile */
@media (max-width: 320px) {

.headertexties {
	font-size: 2rem;
	}
	
.headertext {
	font-size: 2rem;
	}

.grid-container {
	display: grid;
  	grid-template-columns: 100%;
  	grid-template-rows: 20vh auto auto;
  	gap: 0% 0%;
  	grid-template-areas:
    	"."
    	"Image"
    	"Text";
	}
.Image { 
	grid-area: Image;
	align-self: center;	
}
	
.Text { 
	grid-area: Text;
	text-align: center;
	}
}


/* Small Tablets */
@media (min-width: 321px)and (max-width: 480px) {
	
.headertexties {
	font-size: 2rem;
	}
	
.headertext {
	font-size: 2rem;
	}

.grid-container {
	display: grid;
  	grid-template-columns: 100%;
  	grid-template-rows: 20vh auto auto;
  	gap: 0% 0%;
  	grid-template-areas:
    	"."
    	"Image "
    	"Text";
	}
	
.Image { 
	grid-area: Image;
	transform-origin: center;
	transform: scale(0.5);
	align-items: center;
}
	
.Text { 
	grid-area: Text;
	text-align: center;
	}
}
	
@media (min-width: 481px)and (max-width: 600px) {
	
.headertexties {
	font-size: 3rem;
	}
	
.headertext {
	font-size: 3rem;
	text-align: center;
	}

.text {
	text-align: center;	
	}
	
.grid-container {
	display: grid;
  	grid-template-columns: 100%;
  	grid-template-rows: 20vh auto auto;
  	gap: 0% 0%;
  	grid-template-areas:
    	"."
    	"Image "
    	"Text";
	}

.Image { 
	grid-area: Image;
	transform-origin: center;
	transform: scale(0.5);
	align-items: center;
}
	
.Text { 
	grid-area: Text;
	text-align: center;
	}
}

@media (min-width: 601px)and (max-width: 1279px) {
	
.headertexties {
	font-size: 3rem;
	}
	
	
.headertext {
	font-size: 3rem;
	text-align: center;
	}

.text {
	text-align: center;	
	}
	
.grid-container {
	display: grid;
  	grid-template-columns: 100%;
  	grid-template-rows: 20vh auto auto;
  	gap: 0% 0%;
  	grid-template-areas:
    	"."
    	"Image "
    	"Text";
	}

.Image { 
	grid-area: Image;
	transform-origin: center;
	transform: scale(0.5);
	align-items: center;
}
	
.Text { 
	grid-area: Text;
	text-align: center;
	}
	
}

@media (min-width: 1280px) {

.headertext {
	text-align: left;
	font-size: 3rem;
}	
	
.headertexties {
	font-size: 5rem;
	text-align: left;
	}

.text {
	text-align: left;
	}
	
.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 20vh auto auto;
  gap: 0% 0%;
  grid-template-areas:
    ". . "
    "Image Text"
    ". .";
}
.Image { 
	grid-area: Image;
	transform-origin: center;
	transform: scale(0.5);
	align-items: center;
	
}
	
.Text { 
	grid-area: Text;
	text-align: left;
	align-self: center;
}
}