@font-face {
    font-family: 'MyFont';
    src: url('../fonts/Lulo Clean One.otf') format('opentype');
    font-weight: normal;
    font-style: normal;   
}

html, body {
 	/*font-family: 'MyFont', sans-serif;*/ 
	font-family: Roboto, sans-serif;
	
}
*,
*::before,
*::after {
    box-sizing: content-box;
}
/* ----  Layout   ----  */

main {
  	/* color: #E9A34B;  				
  	/* background-color: #E9A34B;   */
  	color: #000;  					/* black */		   
 	background-color: #00e3c8;		/*  turquoise  */
  	margin: 0 auto;
  	
 	/*border: 2px red solid; */
}

img {
	align-items: center;
	/*margin-bottom: 1em;*/
	max-width: 100%;
}

.AG-header {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
 	/*display: flex;
 	align-items: center;*/
 	/*border: 2px yellow solid;*/
 
}
.img-AG, .AG-content {
	grid-row: 1 / 3;
	
}
.img-AG {
	align-items: center;
	width: 100%;
	grid-column: 1 / 6;
}
.AG-content {
	display: grid;
	/*flex-direction: column;*/
	grid-column: 1 / 6;
	grid-row: 2 / 3;
	margin-bottom: 20%;
	align-self: center;
	/*border: 2px red solid;*/
}
.AG-title {
	
	/*bottom: 20%;*/
	letter-spacing : 1rem;
	font-size: 5rem;
	font-weight: bold;
	text-transform: uppercase;  
	color: #fff;
	margin: auto;
	align-items: center;
}

.AG-label {
  	
 	/*bottom: 10%;*/
 	letter-spacing : 0.5rem;
  	font-size: 1.5rem;
  	/*font-weight: bold;*/
   	color: #fff;
}

.about-me {
	background-color: #00e3c8;		/*  turquoise  */
	display: grid;
	grid-template-columns: 50% 50%;
  	grid-template-rows: auto;
  	grid-template-areas:
	    "image title"
	    "image desc";
	
	margin: 1em 10%;
	align-self: center;
	/*border: 2px yellow solid;*/
}
.about-img{
	grid-area: image; 
	padding-top: 1em;
	align-items: center;
	align-content: center;
}

.img-about-me {
	/*display: flex;*/
	/*margin-top: 2em;*/
}
.about-title {
	/*display: flex;*/
	grid-area: title; 
	margin-top: 2em;
	align-items: center;
	align-content: center;
	
}
.about-desc {
	/*display: flex;*/
	grid-area: desc;
	margin: 0 10%; 
	/*margin-top: 2em;*/
	align-items: center;
	align-content: center;
	
}

.home-link {
	
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: repeat(3, 1fr);
	margin: 0 auto;
	/*border: 2px yellow solid;*/

}

.img-home-link, .home-link-content {
	grid-column: 1 / 8;
	grid-row: 1 / 4;
	max-height: 600px;
	
}
.img-home-link {
	height: 100%;
	width: 100%;
	grid-column: 1 / 8;
	grid-row: 1 / 4;
}	

.home-link-content {
	
	display: grid;
	flex-direction: column;
	grid-column: 3 / -3;
	grid-row: 2 / 0;
	align-self: center;
	
	/*border: 2px magenta solid;*/
}

.home-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	place-content: center;
	
	/*border: 2px brown solid;*/
}
.home-VO-rep {
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 700;
	/*border: 2px yellow solid;*/
}
.home-VO-rep p {
	font-size: 1.6rem;
	font-weight: 800;
}
.VO-container {
	
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: (auto-fit, 8% 5% 22% 21% 21% 15% 8%);
	/*margin: 0.67em auto;*/
	height: 100%;
	/*border: 2px yellow solid;*/

}
.VO-title {
	color: white;
	grid-column: 2 / -2;
	grid-row: 1 / 1;
	height: auto;
	margin: 0.67em auto;
	
	/*border: 2px red solid;*/
}
.img-one-voice {
	height: 12em;
}	

.VO-link {
	color: white;
	/*border: 2px white solid;*/
	grid-column: 1 / 1;
	grid-row: 1 / 1;
	align-content: flex-start;
}

.img-VO, .VO-content {
	grid-column: 1 / 9;
	grid-row: 1 / 8;
		
}
.img-VO {
	height: 100%;
	width: 100%;
	
	/*border: 2px cyan solid;*/
}	

.VO-content {
	
	display: grid;
	/*flex-direction: column;*/
	grid-column: 3 / -3;
	grid-row: 3 / 3;
	color: white;
	/*align-content: flex-start;*/
	margin-top: 1em;
	/*border: 2px magenta solid;*/
}
.VO-item {
	
	display: grid;
	grid-template-columns: 80% 20%;
	padding: 1em 5em; 
	align-items: center;
	justify-content: center;
	position: relative;
	
    /*display: inline-block;*/
	/*border: 2px white solid;*/
}

.VO-item:hover .img-VO-icon {
	/*height: 2em;*/
	display: none;
    position: relative;
	
}
.VO-item .img-VO-icon_hover {
    display: none;
    position: relative;
    
}
.VO-item:hover .img-VO-icon_hover {
    display: grid;
  	    
}
.VO-item2 {
	
	display: grid;
	grid-template-rows: 1fr 1fr;
	padding: 0 2em; 
	align-items: center;
	text-align: center;
	justify-content: center;
	margin: 1.5em auto;
	/*position: relative;*/
    display: inline-block;
	/*border: 2px white solid;*/
}
.VO-video-level1 {
	
	display: flex;
	flex-direction: row; 
	width: 100%; 
	/*height: 100%;  */
	overflow: hidden;
	justify-content: space-around;
	margin-top: 1.5em;
	grid-column: 2 / 8;
	grid-row: 4 / 4;
	color: white;
	align-self: center;
	
	margin-bottom: 2em;
	/* border: 2px cyan solid; */
}	
.VO-video1 {
	color: white;
	width: 100%;
	grid-column: 1 / 4;
	grid-row: 4 / 4;
	/*border: 2px yellow solid;	*/
}
.VO-video2 {
	color: white;
	width: 100%;
	grid-column: 6 / 9;
	grid-row: 4 / 4;
	/*border: 2px yellow solid;*/
}
.VO-video-level2 {
	
	display: flex;
	flex-direction: row; 
	width: 100%; 
	/*height: 100%;  */
	overflow: hidden;
	justify-content: space-around;
	grid-column: 2 / 8;
	grid-row: 5 / 5;
	color: white;
	align-self: center;
	
	margin-bottom: 2em;
	/* border: 2px yellow solid; */
}	
.VO-video3 {
	color: white;
	width: 50%;
	grid-column: 4 / 6;
	grid-row: 5 / 5;
	/* border: 2px red solid;	 */
}
.VO-video-level3 {
	
	display: flex;
	flex-direction: row; 
	width: 100%; 
	/*height: 100%;  */
	overflow: hidden;
	justify-content: space-around;
	grid-column: 2 / 8;
	grid-row: 6 / 6;
	color: white;
	align-self: center;
	
	margin-bottom: 2em;
	/* border: 2px yellow solid; */
}	
.VO-video4 {
	color: white;
	width: 50%;
	grid-column: 4 / 6;
	grid-row: 6 / 6;
	/* border: 2px red solid;	 */
}
.VO-slides {
	
	height: 20em;  
	/*overflow: hidden;
	justify-content: space-around;*/
	/*display: grid;
	/*flex-direction: column;*/
	grid-column: 4 / 6;
	grid-row: 7 / 7;
	color: white;
	/*background-color: gray;*/
	align-self: center;
 
	margin: 0 auto;
	margin-bottom: 4em;
	/* border: 2px cyan solid; */
}	

/*   buttons  */

.btn {
	display: inline-block;
	color: black;
	margin: 2rem auto;
	border: 0.4em solid black;
	width: 50%;
    padding: 8px 20px;
    text-align: center;
	text-transform: uppercase;
	font-weight: 800;
    text-decoration: none;
    
	
}

.btn:hover, .btn:focus {
    color: yellow;
    background: blue;
}

.btn-film {
	background: #d1fefe;
	
}

.btn-vo {
	background: #00e3c8;
	
}

.btn-gracefilms {
	background: #649f88;
	
}

.btn-in_touch {
	display: inline-block;
	color: black;
	background: #d1fefe;
	margin: 2rem auto;
	/*border: 0.4em solid black;*/
	width: 50%;
    padding: 8px 20px;
    text-align: center;
	text-transform: uppercase;
	font-weight: 800;
    text-decoration: none;
	
	
}
.btn-home {
	color: white;
	background: #d28715;
	
}
.footer {
	background-color: #00e3c8;		/*  turquoise  */
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: repeat(60% 30% 10%);
	margin: 0 auto;
	grid-column: 3 / -3;
	/*border: 2px blue solid;*/
}
.footer-title {
	
	grid-column: 3 / -3;
	grid-row: 1 / 1;
	align-self: center;
	text-align: center;
  	width: 100%;
  	
 	/*border: 1px solid magenta;*/	
}

.img-footer-icon {
	height: 4rem;
	align-self: center;
/*	border: 2px red solid;*/
}	

.footer-icon {
	
	grid-column: 3 / -3;
	grid-row: 2 / 3;
	display: flex;
	flex-direction: row;
	gap: 3em;
	align-items: center;
	place-content: center;
	padding-top: 2em;
	/*border: 2px yellow solid;*/
}
.footer-copy {
	
	grid-column: 3 / -3;
	grid-row: 3 / 3;
	text-align: center;
	
	/*border: 2px black solid;*/
}
.columns {
	display: flex;
	margin: 1em 0;
	background-color: #ffffff;
	justify-content: space-between;	
	
/*	border: 2px magenta solid; */
	
}


/* ----  Typography   ----  */
h1, h2, p {
	
	text-align: center;
	font-weight: bold;
	
}

h1 {
	font-size: 3vw;
    font-size: 3rem;
    
  /*  font-size: 200vm;  
    padding: 0.2em; */
    text-align: center;    
}
/*
h1 span, h2 span, h3 span, h4 span {
	color: #ce210f;
}  */

h2 {
    font-size: 2rem;  
}

h3 {
	font-size: 1.5rem; 
	
}

h4 {
	font-size: 1.3rem;  
}
p {
    font-size: 1.1rem;
    font-weight: 400;
    text-align: left;
  	margin-top: 20px;
}

a {
	color: #000;  
	text-decoration : none;
}

a:focus, a:hover {
	color: blue;	
}
.VO-para {
	margin: 0.67em auto;
 	/*text-align: center;*/
	/*-webkit-text-fill-color: #fff;
    -webkit-text-stroke-width: 0.01em;
    -webkit-text-stroke-color: #000;*/
}

.bkgd-blur {
    backdrop-filter: blur(10rem);	
    width: max-content; 
	
}
.bkgd-blur-title {
    backdrop-filter: blur(10rem);	
    width: max-content; 
	
}

/* SCREEN SIZES - 5 Different Viewports
1 - Extra Large >= 1200px		Default: 
 

2 - Large >= 992px	to 1200px  */
@media (min-width: 992px) and (max-width: 1199px) {
    main {
    	/*border: 2px solid green;*/
  	}
}
/*
3 - Medium >= 768px	to 991px  */
@media (min-width: 768px) and (max-width: 991px) {
   	main {
      	/*border: 2px solid yellow;*/
  	}
  	
  	h1 {
		font-size: 2.5rem;
		
	}    

	h2 {
	    font-size: 1.8rem;  
	}

	h3 {
		font-size: 1.3rem;  
	}

	h4 {
		font-size: 1.1rem;  
	}
	p {
	    font-size: 0.9rem;
	    text-align: left;
	  	margin-top: 1em;
	} 
	
	.AG-title {
		
		letter-spacing : 0.9rem;
		font-size: 3rem;
		
	}
	.AG-label {
  	
	 	letter-spacing : 0.6rem;
	  	font-size: 1.2rem;
	  	
	}
	.home-VO-rep {
		font-size: 1.1rem;
		/*border: 2px yellow solid;*/
	}
	.home-VO-rep p {
		font-size: 1.4rem;
	}
	.VO-video-level1 {
	
		grid-column: 1 / 9;
		
		/* border: 2px cyan solid; */
	}	
	.VO-video1 {
		color: white;
		width: 100%;
		grid-column: 1 / 5;
		grid-row: 4 / 4;
		/* border: 2px yellow solid;	 */
	}
	.VO-video2 {
		color: white;
		width: 100%;
		grid-column: 5 / 9;
		grid-row: 4 / 4;
		/* border: 2px red solid; */
	}
	.VO-video-level2 {
	
		grid-column: 1 / 9;
		
		/* border: 2px cyan solid; */
	}	
	.VO-video3 {
		color: white;
		width: 100%;
		grid-column: 5 / 9;
		grid-row: 5 / 5;
		/* border: 2px cyan solid;  */
	}
	.VO-video-level4 {
	
		grid-column: 1 / 9;
		
		/* border: 2px cyan solid; */
	}	
	.img-one-voice {
		height: 10em;
		
	}
	.btn-home {
		margin: 1rem auto;
		border: 0.3em solid black;
		width: 40%;
	    padding: 8px 20px;
	    font-size: 0.8rem;
		font-weight: 800;
		
	}	
	.footer-title {
	
		grid-column: 2 / -2;		
		/*border: 2px magenta solid;*/
	}
    
}
/*
4 - Small >= 576px	to 767px  */
@media (min-width: 576px) and (max-width: 767px) {
     main {
    	/*border: 2px solid magenta;*/
  	}
  	
	h1 {
		font-size: 2.0rem;
	}    

	h2 {
	    font-size: 1.5rem;  
	}

	h3 {
		font-size: 1.2rem;  
	}

	h4 {
		font-size: 1rem;  
	}
	p {
	    font-size: 0.75rem;
	    text-align: left;
	  	margin-top: 1em;
	}
	
	.AG-title {
		
		letter-spacing : 0.8rem;
		font-size: 2.5rem;
		
	}
	.AG-label {
  	
	 	letter-spacing : 0.5rem;
	  	font-size: 0.9rem;
	  	
	}
	.home-link-content {
	
		grid-column: 2 / -2;		
		/*border: 2px magenta solid;*/
	}
	.home-VO-rep {
		font-size: 1.0rem;
		/*border: 2px yellow solid;*/
	}
	.home-VO-rep p {
		font-size: 1.2rem;
	}
  		
	.VO-container {
		grid-template-rows: (auto-fit, 7% 5% 17% 17% 17% 17% 12% 8%);
		min-height: 60em;
		/*border: 2px yellow solid;*/

	}
	.img-VO, .VO-content {
		grid-row: 1 / 9;
			
	}
	.VO-content {	
		grid-column: 1 / -1;
		/*max-height: 20em;*/
		align-content: flex-start;
		grid-row: 3 / 3;
		/*border: 2px green solid;*/
	}
	.img-one-voice {
		height: 9em;
		
	}	
	.VO-video-level1 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start; 
		width: 100%; 
		height: 100%;  
		grid-column: 1 / -1;
		grid-row: 4 / 5;
			
		/* border: 2px green solid; */
	}	
	.VO-video1 {		
		grid-column: 2 / 7;
		grid-row: 4 / 4;
						
	}
	.VO-video2 {
		grid-column: 2 / 7;
		grid-row: 5 / 5;
		padding-top: 1.5em;		
	}
	.VO-video-level2 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start; 
		width: 100%; 
		height: 100%; 
		grid-column: 1 / -1;
		grid-row: 6 / 6;
		
		/*border: 2px magenta solid;*/
	}	
	.VO-video3 {
		grid-column: 3 / 7;
		grid-row: 6 / 6;
		width: 100%; 
		/* border: 2px magenta solid;	 */
	}
	.VO-video-level3 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start; 
		width: 100%; 
		height: 100%; 
		grid-column: 1 / -1;
		grid-row: 7 / 7;
		
		/* border: 2px magenta solid; */
	}
	.VO-video4 {
		grid-column: 3 / 7;
		grid-row: 7 / 7;
		width: 100%; 
		/* border: 2px magenta solid;	 */
	}
	.VO-slides {
	
		grid-column: 4 / 6;
		grid-row: 8 / 8;
		
		align-self: center;
		/*border: 2px yellow solid;*/
	}	
	.btn-home {
		margin: 1rem auto;
		border: 0.3em solid black;
		width: 40%;
	    padding: 6px 15px;
	    font-size: 0.7rem;
		font-weight: 600;
		
	}
	.footer-title {
	
		grid-column: 2 / -2;		
		/*border: 2px magenta solid;*/
	}	
}
/*
5 - Extra Small < 576px	 */
@media (min-width: 300px) and (max-width: 575px) {
	main {
    	/*border: 2px solid brown;	*/		
  }
  	h1 {
		font-size: 1.8rem;
	}    

	h2 {
	    font-size: 1.4rem;  
	}

	h3 {
		font-size: 1.1rem;  
	}

	h4 {
		font-size: 0.9rem;  
	}
	p {
	    font-size: 0.75rem;
	    text-align: left;
	  	margin-top: 1em;
	}
   	
	.AG-title {
		
		letter-spacing : 0.7rem;
		font-size: 2rem;
		
	}
	.AG-label {
  	
	 	letter-spacing : 0.4rem;
	  	font-size: 0.8rem;
	  	
	}
	.about-me {
		display: grid;
		grid-template-columns: 100%;
	  	grid-template-rows: auto;
	  	grid-template-areas:
		    "title"
		    "image"
		    "desc";
		margin: 0 10%;
		padding: 0 5%;
		/*border: 2px yellow solid;*/
	}
	.img-about-me {
		width: 70%;
		margin: 0 auto;
		
	}
	.about-title {
		/*display: flex;*/
		/*margin-bottom: 1em;*/
		
	}
	.about-desc {
		/*display: flex;*/
		margin-bottom: 1em;
		
	}
	.home-link-content {
	
		grid-column: 2 / -2;		
		/*border: 2px magenta solid;*/
	}
	.home-VO-rep {
		font-size: 0.9rem;
		/*border: 2px yellow solid;*/
	}
	.home-VO-rep p {
		font-size: 1.1rem;
	}	
	.VO-container {
		grid-template-rows: (auto-fit, 7% 5% 17% 17% 17% 17% 12% 8%);
		min-height: 60em;
		/*border: 2px yellow solid;*/

	}
	.img-VO, .VO-content {
		grid-row: 1 / 9;
			
	}
	.img-one-voice {
		height: 8em;
		
	}	
	.VO-content {	
		grid-column: 1 / -1;
		/*margin-top: 12em;*/
		align-content: flex-start;
		grid-row: 3 / 3;
		/*border: 2px magenta solid;*/
	}
	.VO-link {
		grid-column: 1 / 1;
		
	}
	.VO-video-level1 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start; 
		width: 100%; 
		height: 100%;  
		grid-column: 1 / -1;
		grid-row: 4 / 5;
			
		/*border: 2px magenta solid;*/
	}	
	.VO-video1 {		
		grid-column: 2 / 7;
		grid-row: 4 / 4;
						
	}
	.VO-video2 {
		grid-column: 2 / 7;
		grid-row: 5 / 5;
		padding-top: 1.5em;		
	}
	.VO-video-level2 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start; 
		width: 100%; 
		height: 100%; 
		grid-column: 1 / -1;
		grid-row: 6 / 6;
		
		/*border: 2px magenta solid;*/
	}	
	.VO-video3 {
		grid-column: 3 / 7;
		grid-row: 6 / 6;
		width: 100%; 
		/* border: 2px red solid;	  */
	}
	.VO-video-level3 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start; 
		width: 100%; 
		height: 100%; 
		grid-column: 1 / -1;
		grid-row: 7 / 7;
		
		/* border: 2px green solid; */
	}
	.VO-video4 {
		grid-column: 3 / 7;
		grid-row: 7 / 7;
		width: 100%; 
		/* border: 2px magenta solid;	 */
	}
	.VO-slides {
	
		grid-column: 3 / 7;
		grid-row: 8 / 8;
		
		align-self: center;
		/*border: 2px magenta solid;*/
	}	
	.btn-home {
		margin: 1rem auto;
		border: 0.3em solid black;
		width: 40%;
	    padding: 6px 15px;
	    font-size: 0.7rem;
		font-weight: 600;
		
	}
	.bkgd-blur-title { 
		backdrop-filter: blur(0rem);	
   		width: auto;
   		text-align: center;
	}
	.footer-title {
	
		grid-column: 2 / -2;		
		/*border: 2px magenta solid;*/
	}
	
}