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

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

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

/*  ----------------------- HEADER STYLE - MATT LOSASSO ------------------------  */

/*  --------------------------- CREATED June 25 --------------------------------  */

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

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




body 
{
/*  -------MASTER FONT ---  */

 font-family: 
"Century Gothic",
"Apple Gothic",
"Helvetica Neue",/*  ---- Safari ---  */
"URW Gothic L",
"Avant Garde",
sans-serif;
/*  ----------------------  */

}

h1
{
margin-top: -20px;
color:rgb(150, 300, 150);
font-weight:normal;
text-align:center;
font-size:60px;
padding:0px 0px 9px 0px;
letter-spacing:1px;
opacity: 0.3;
}

a:link, a:visited {color: grey;}
html {scroll-behavior: smooth;}















/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  --------------------------- STANDARD TOP BAR --------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */



#topBar 	
{
position: fixed;
top: 0;
left: 0;
height: 70px;
width: 100%;
z-index: 10;
background-color:rgb(65,110, 70); 	
overflow: hidden;
}

@media screen and (max-width: 600px) 
{
#topBar:not(.filmography){background-color:transparent;}
#topBar{height: 132px;}
}







.homebtn img
{
position: absolute; 
top:calc(100% - 34px);
left:20px;
opacity:0.4;
}
.homebtn img:hover {opacity:1.0;}
@media screen and (max-width: 600px) {.homebtn img {width: 25px;top:20px;left:20px}}




#openbtn
{
position:fixed;
Display:none;
top: 10px;
right: 1%;
color: white;
font-size:20px;
cursor:pointer;
z-index: 3;
Opacity:0.7;
transition: 0.8s;
}
#openbtn:hover{opacity:1;}
@media screen and (max-width: 600px) {#openbtn {display:block;top:-10px;right:-10px;font-size:40px;padding: 8px 20px;}}




/*  -------------------------- MENU ------------------------  */

#MENU 
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: relative; 
top:calc(100% - 46px);
left:60px;
}


#MENU li 
{
Position:relative;
z-index: 100;
Left: 0px;
float: left;
width: 120px;
padding: 12px;
border:0px  solid red;
}
@media screen and (max-width: 600px) {#MENU li  {width: 100%;}}


#MENU li a 
{
font-size:20px;
letter-spacing:5px;
Font-weight:normal;
text-decoration: none;
padding: 12px 22px;
Margin-left: -12px;
color:rgb(0, 150, 0);
border:0px  solid green;
transition: 0.3s
}
#MENU li a.active {color:rgb(150, 300, 150);}
#MENU li a:hover:not(.active) {color: #f1f1f1;background-color:rgb(0, 150, 0);}
#MENU li.active {color:rgb(0, 150, 0);border:0px solid yellow;}



#menuTitle{position:relative; top: 25px;display:none}
@media screen and (max-width: 600px){#menuTitle{display:block}}

/*  --------- mobile menu ------------  */

@media screen and (max-width: 600px) 
{
#MENU {display:none}

}
/*  ---------------------------------  */




/*  ------------- logo ------------  */
.matt_logo
{position:fixed; right:45px; top: 10px;}

@media screen and (max-width: 600px) {.matt_logo
{Width:150px;opacity:0.1;top:8px;Right:45px;}}
/*  -------------------------------  */







.selectors
{position:fixed; z-index:10; right:45px; top:80px;}
@media screen and (max-width: 600px) {.selectors {display:none;}}



.selectors a
{
color:rgb(150, 300, 150);
	font-weight:normal;
	font-size:12px;
	letter-spacing:1px;
	margin: auto;
	padding:5px 19px 5px 19px;
	text-decoration: none;
	border:1px solid rgb(55,55, 55);
	text-align: center;
	background-color: rgb(55,80, 55);
	opacity:0.5;
}
.selectors a:hover{opacity:1.0;}
.selectors a.active {opacity:1; background-color:rgb(70 90 70); color:white}

@media screen and (max-width: 962px) {#rightMenu{visibility:hidden;}}











/*  ----------- aux menu -----------  */
#auxMenu
{
position: fixed;
top:75px;
right:10px;
Z-index:10;
display: inline-block;
}


.more 
{
position:fixed;
top:85px;
Right: 15px;
width: 15px;
background-color:none;
cursor: pointer;
Z-index:10;
}
@media screen and (max-width: 600px) {.more {width: 25px;top:20px; right: 2%}}

.more-content 
{
position: fixed;
right:15px;
top:95px;
background-color: rgb(50 50 50);
min-width: 100px;
Width: 150px;
overflow: auto;
z-index: 10;
  display: none;
border:1px solid rgb(100 150 100); 
}

.more-content a 
{
color:rgb(0, 150, 0);
padding: 12px 16px;
text-decoration: none;
display: block;
z-index:10;
}

.more-content a:hover:not(.active) {background-color: rgb(70 70 70); color: white;}
.more-content a.active {color:rgb(70, 100, 70);cursor:default}
#auxMenu {display:block}
#auxMenu:hover .more-content {display: block;}

/*  ----------- end aux menu -----------  */






/*  ----------- phone menu -----------  */

#phoneMenu {display:none}

@media screen and (max-width: 600px) 
{
#phoneMenu {display:block}
#auxMenu {display:none}

	#phoneMenu 
	{
	width:96%;
	left:2%;
	top: 100px;
	Position:fixed;
	overflow-x: hidden;
	overflow-y: hidden;
	list-style-type: none;
	transition: 0.5s;
	z-index: 100;


	}

	#phoneMenu li 
	{
	width:100%; 
	margin:10px 0px;
	position:relative;
	top:0px;
	float:left; 
	padding: 6px 0 8px 0;
	}

	#phoneMenu li a 
	{
	opacity: 0.5;
	font-size:25px;
	letter-spacing:5px;
	Font-weight:normal;
	width:100%;
	Height:auto;
	text-decoration: none;
	color:rgb(150, 255, 150);
	Padding: 8px 41px 10px 41px;
	background-color: rgb(55,80, 55);
	border:1px solid rgb(55,55, 55);	
	transition: 0.3s

	}

#phoneMenu li a:hover:not(.active) {opacity:1;}
#phoneMenu li a.active {opacity:1; background-color:rgb(70 90 70); color:white;cursor:default;}
	.filmoghy
	{
	margin-top:30px;	
	background-color: green;
	}
}
/*  ----------- end phone menu -----------  */

#aboutInfo{margin-top: 200px;}
#awardsInfo{position:absolute: overflow:hidden;}
#contactInfo{margin-top: 40px;}
#conTitle{display:block;;}

@media screen and (max-width: 600px) 
{
	##aboutInfo{margin-top: 200px;}
	#awardsInfo{margin-top: 250px;}
	#contactInfo{margin-top: 150px;}
	#conTitle{display:none;}
}

.title{font-size: 12px; color:white;}


/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -------------------------------- end top bar --------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */






#topBtn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #333;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#topBtn:hover {
  background-color: #555;
}



















/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  --------------------------- STANDARD FOOTER ---------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */
/*  -----------------------------------------------------------------------  */





#footer
{
Position:relative;
Bottom:-30px;
margin: 0px -10px -10px -10px;
width:100%;
Height:200px
padding: 20px;
background-color:rgb(65,110, 70); 
Overflow:hidden;
}
@media screen and (max-width: 600px) {#footer{height:300px;}}




.socialMedia{width:200px; margin:20px;}
.socialMedia a
{
  text-decoration: none;
  object-fit:none;
  padding:5px;
  Z-index:20; 
}
.socialMedia a img{width:25px;}
.socialMedia a img:hover{opacity:0.5;}
@media screen and (max-width: 600px) {.socialMedia{align:center;padding-top:20px;margin:auto;}}




#footerlist
{
padding:15px 20px 20px 0px;
margin:auto;
width: 500px;
Margin-top: 100px;
border:0px solid red;
}

#footerlist a {font-size:9px;letter-spacing:1px;padding:5px;text-decoration: none; color: white;}
#footerlist a:hover {color: grey; text-align: center;}

spacer{color:white;font-size:9px;}

@media screen and (max-width: 600px) 
{
	#footerlist 
	{
	position:relative;
	bottom: 20px;
	Left:2%;
	padding:50px 0px 0px 0px; 
	opacity: 0.4; 
	width:96%; 
	margin:auto; 
	text-align:center;
	}

	#footerlist a 
	{
	display: block; 
	padding:5px 0;
	font-size:5vw;
	letter-spacing: 2px;
	}
	spacer {visibility:hidden;}
}