@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Raleway', sans-serif;
	
}
html {	
	
}

body {
	z-index: 1;
	height: 100%;
	display: grid;
    grid-template-areas:
    	"header"
    	"container"
    	"footer";
    grid-template-rows: 2fr 12fr 1fr;
    grid-template-columns: 1fr;
    
}

body, .header, .container, .footer {

	color: white;
	/*border: 2px solid cyan;*/
	background: rgba(0,0,0,0.6);
}
.bg-image {
	background-image: url("../Images/opZetBuild_no-text.jpg");  
    background-repeat: repeat;
    background-size: contain;
   
}

.container {
	grid-area: container;
	justify-items: center;
	height: 100%; 
	/*border: 2px solid yellow;*/
	
}
.text-blur {
	background: #e1e1df / 1; 
    backdrop-filter: blur(4rem);
    padding: 0 0.4em;
    display: inline-block;
}

.btn {
	display: inline-block;
	color: #072a2d;
	background: #fcea43;
	font-size: 0.8rem;
	margin-top: 2em;
	padding: 1em 2em;
	border-radius: 2em;
	/*text-transform: uppercase;*/
	text-decoration: none;
	text-align: center;
	letter-spacing: 0.05em;
	width: 15em;

}

.btn:hover, focus {
  opacity: .75;
}

/*  ---- Showcase page css  */
.show-list {
	width: 90%;
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: 40% 60%;
	grid-auto-rows: 2em;
	font-weight: bold;
	grid-gap: 0.3em;
	padding: 1em;
	background: rgba(0, 0, 29, 0.9);
	margin: auto;
	margin-top: 3em;
	justify-content: center;
	/*border: 2px solid white;*/
}
.show-head {
	background-color: #092777;
	color: yellow;
	align-content: center;
	/*border: 2px solid white;*/
}
.show-content {
	background-color: white;
	color: #0b35a6;
	width: auto;
	align-content: center;
	/*text-align: left;
	align-self: center;*/
	/*padding: 0.3em 0 0.3em 0.8em;*/
	/*border: 2px solid cyan;*/
}

.show-empty {
	background-color: black;
	/*border: 2px solid red;*/
}
.proj-frame {
	display: grid;
	grid-template-areas:
    	"header info";
    	
	grid-template-rows: 100%;
    grid-template-columns: 40% 60%;
    grid-gap: 1em;
   /* min-height: 500px;*/
    /*border: 2px solid yellow;*/
}
.proj-head {
	grid-area: header;
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: 40% 60%;
	/*border: 2px solid red;*/
}
.proj-info {
	grid-area: info;
	/*border: 2px solid red;*/
}
.stage-frame {
	display: grid;
	grid-template-areas:
    	"header photos"
    	"info photos";
    	
	grid-template-rows: 20% 80%;
    grid-template-columns: 60% 40%;
    grid-gap: 1em;
    min-height: 500px;
    /*border: 2px solid yellow;*/
}
.stage-head {
	grid-area: header;
	display: grid;
	width: 60%;
	margin: 1em auto;
	grid-auto-flow: row;
	grid-template-columns: 40% 60%;
	/*border: 2px solid red;*/
}
.stage-info {
	grid-area: info;
	/*border: 2px solid red;*/
}
.stage-photos {
	grid-area: photos;
	/*background-color: black;*/
	/*border: 2px solid red;*/
}

.stage-list {
	width: 60%;
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: 40% 60%;
	grid-auto-rows: 2em;
	font-weight: bold;
	grid-gap: 0.3em;
	padding: 1em;
	background: rgba(0, 0, 29, 0.9);
	margin: auto;
	margin-top: 3em;
	justify-content: center;
	/*border: 2px solid white;*/
}
/*  ---- Testimonial page css  */
.testimonial-grid {
	display: grid;	
	grid-template: 1fr 1fr / 1fr 1fr;
	/*grid-auto-rows: 200px;*/
	gap: 1.5rem;
	/*border: 2px solid yellow;*/
	justify-items: center; 	
}
.testimonial {
  	/*font-size: var(--fs-400);*/
  /*	padding: 2rem;*/
  	border-radius: 0.5rem;
  	/*box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25);*/
  	/*border: 2px solid red;*/
}
.testimonial img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or "contain" */
}

@media screen and (min-width: 38em) {
  	.testimonial-grid {
	}  
}

/*  Contact Form - HTML code */
form { 
	max-width:420px; 
	margin:50px auto; 
	background-color: #000000;
	border-radius: 1em;
	padding: 1em;
	
}

.feedback-input {
	color: #adadad;
	/*  font-family: Helvetica, Arial, sans-serif;*/
	font-weight:500;
	/*font-size: 18px;*/
	border-radius: 5px;
	line-height: 22px;
	background-color: transparent;
	border:1px solid #fff;
	transition: all 0.3s;
	padding: 13px;
	margin-bottom: 15px;
	width:100%;
	box-sizing: border-box;
	outline:0;
}

.feedback-input:focus { 
	border:2px solid #adadad;
}

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  /*font-family: 'Montserrat', Arial, Helvetica, sans-serif;*/
  width: 30%;
  background:#fff;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color: #000000;
  /*font-size:24px;*/
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background: #adadad; }

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #adadad;
  opacity: 0.8; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #adadad;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #adadad;
}
/*  End of Contact Form  */

.main-text {
	text-align: center;
	line-height: 1em;
	/*position: relative;*/
	
	/*border: 2px solid green;*/
}

h1 {
	line-height: 1em;
	font-size: 4.0em;
	font-weight: 800;
	/*color: #fcea43;*/

	/*text-transform: uppercase;*/
}
h2 {
	line-height: 1em;
	font-size: 2.5rem;
	font-weight: 800;
	/*color: #fcea43;*/
	
	text-transform: uppercase;
}
h3 {
	margin-top: 0.5em;
	line-height: 1em;
	font-size: 2.0rem;
	font-weight: 700;
	
	
	/*text-transform: uppercase;*/
}

h4 {
	margin-top: 0.5em;
	line-height: 1em;
	font-size: 1.6rem;
	font-weight: 700;
	/*color: #fcea43;*/
	
}
h5 {
	line-height: 1em;
	font-size: 1.1rem;
	font-weight: 700;
	/*color: #fcea43;*/
		
}
h6 {
	line-height: 1em;
	font-size: 1rem;
	/*font-weight: 700;*/
	/*color: #fcea43;*/
		
}
p {
	font-size: 1rem;
	/*color: #fff;*/
	margin-left: 20%;
	margin-right: 20%;
	font-weight: 400;
	line-height: 1em;
	text-align: left;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	
}
a {
	color: #0b35a6;
	/*background: #fff; */
	font-size: 1rem; 
	text-decoration : none;
	padding: 0 0.5em;	
}

a:focus, a:hover {
	color: #f8f22e;
	background: #0b35a6;
	padding: 0 0.5em;	
}

/* --------------------------------------------------------------

/* SCREEN SIZES - 5 Different Viewports

/*  1 - Extra Small < 576px	 -  DEFAULT SIZE*/

@media (min-width: 300px) and (max-width: 575px) {
	.container {
		font-size: 0.75em;
    	/*border: 2px solid red;*/
  	}
  	
  	
  	/*.col {
		border: 1px solid cyan;
	}*/
  /*
  	h1 {
		font-size: 1.8rem;
	}    

	h2 {
	    font-size: 1.4rem;  
	}

	h3 {
		font-size: 1.1rem;  
	}

	h4 {
		font-size: 0.9rem;  
	}*/
	h6 {	
		font-size: 0.8rem;	
	}
	p {
	    font-size: 0.8rem;
	}
    a {
		font-size: 0.8rem; 
	
	}
}

/*  2 - Small >= 576px	to 767px  */
@media (min-width: 576px) and (max-width: 767px) {
	body {
		/* grid-template-areas:
    	"header header"
    	"container header"
    	"footer footer";
    	grid-template-rows: 2fr 12fr 1fr;
    	grid-template-columns: 6fr 1fr;*/
	}
     .container {
    	font-size: 0.8em;
    	/*border: 2px solid magenta;*/
  	}
 	
	h1 {
		font-size: 2.5em;		
	}
	h2 {
		font-size: 2em;		
	}
	h3 {
		font-size: 1.8rem;		
	}
	h4 {
		font-size: 1.4rem;				
	}
	h5 {
		font-size: 1.1rem;				
	}
	h6 {
		font-size: 0.9rem;		
	}
	p {
		font-size: 1rem;		
	}
	a {
		font-size: 0.9rem; 
	
	}
  	
}

/*  3 - Medium >= 768px	to 991px  */
@media (min-width: 768px) and (max-width: 991px) {
	body {
		 grid-template-areas:
    	"header"
    	"container"
    	"footer";
    	grid-template-rows: 2fr 12fr 1fr;
    	grid-template-columns: 1fr;
	}
   	.container {  
   		font-size: 0.85em;   
      	/*border: 1px solid green;*/
  	}
  	.show-list {
  		grid-template-columns: 30% 70%;
		width: 80%;		
	}
	.stage-list {
  		grid-template-columns: 30% 70%;
		width: 50%;		
	}
  	h1 {
		font-size: 3em;	
	}
	h2 {
		font-size: 2.5em;		
	}
	h3 {
		font-size: 2rem;		
	}
	h4 {
		font-size: 1.5rem;				
	}
	h5 {
		font-size: 1.2rem;				
	}
	p {
		font-size: 1rem;		
	}
	
}  	
  
/*  4 - Large >= 992px	to 1200px  */
@media (min-width: 992px) and (max-width: 1199px) {
	body {
		 grid-template-areas:
    	"header"
    	"container"
    	"footer";
    	grid-template-rows: 2fr 12fr 1fr;
    	grid-template-columns: 1fr;
	}
    .container {
    	font-size: 0.95em;
    	/*background-color: pink;*/
    	/*border: 1px solid  pink;*/
  	}
  	.show-list {
  		grid-template-columns: 30% 70%;
		width: 70%;		
	}
	.stage-list {
  		grid-template-columns: 30% 70%;
		width: 40%;		
	}
  	h1 {
		font-size: 4em;		
	}
	h2 {
		font-size: 3em;		
	}
	h3 {
		font-size: 2rem;	
	}

	h4 {
		font-size: 1.5rem;				
	}
	h5 {
		font-size: 1rem;			
	}
	p {
		font-size: 1rem;	
	}
	
}
	
/*  5 - Extra Large >= 1200px	*/ 
@media (min-width: 1200px) {
	body {
		 grid-template-areas:
    	"header"
    	"container"
    	"footer";
    	grid-template-rows: 2fr 12fr 1fr;
    	grid-template-columns: 1fr;
	}
    .container {
    	font-size: 1em;
    	/*border: 1px solid yellow;*/
  	} 
  	.show-list {
		grid-template-columns: 30% 70%;
		width: 70%;
	}
  	.stage-list {
  		grid-template-columns: 30% 70%;
		width: 30%;		
	}
  	h1 {
		font-size: 4.5em;		
	}
	h2 {
		font-size: 3.5em;		
	}
	h3 {
		font-size: 3rem;		
	}

	h4 {
		font-size: 2rem;				
	}
	h5 {
		font-size: 1.5rem;				
	}
	p {
		font-size: 1.2rem;		
	}
	
}