@charset "utf-8";
/* CSS Document */
/*<!--☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻ Start Header Styles ☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻-->*/
.material-symbols-outlined {/*FOR HOME ICON*/
font-variation-settings:  'FILL' 0,  'wght' 400,  'GRAD' 0,  'opsz' 80;
font-size:24px !important;
line-height:30px !important;
}
/*☼☼☼☼☼☼☼☼☼ Start Standard Header Styles ☼☼☼☼☼☼☼☼☼*/
.HeaderRow{
width:100%;
height:150px;
float:left;
}
.Header{
width:100%;		
height:140px;
position:absolute;
z-index:500;
top:0px;
left:0px;
background-color: #21496a;	
box-shadow: 5px 5px 10px rgba(120,144,156,0.65);	
border-bottom-color:#EF5350;	
border-bottom-style: solid;
border-bottom-width: thick; 
}
#HeaderRibbon{
width:100px;		
height:152px;
position:absolute;
z-index:580;
top:-30px;
left:10%;	
background-image:url("https://svamytest.frogwebbworks.com/wp-content/uploads/LogoRibbon.png");
background-repeat: no-repeat;	
background-size: contain;	
}

#HeaderTextA{
width:100%;		
height:50px;
font-size:45px;
line-height:50px;	
font-weight:bold;	
text-align:center;
color:white;	
text-transform: uppercase;
float:left;
}
#HeaderTextB{
width:100%;		
height:35px;
font-size:30px;
line-height:35px;	
font-style:italic;
color:white;
text-align:center;
float:left;
}

/*%%%%%%%%%%%% Start Header Menu Styles %%%%%%%%%%%%*/
#MenuBarRow{
width: 100%;
height: 30px;
position: relative;
float:left;
}
#MenuBar{
width: auto;
height: 30px;
border-radius: 10px;
display: inline-block;
vertical-align: top;
background-color: white;
}
#MenuBarButtons{
width: auto;
height: 30px;
float:left;
}

.MobileSubMenuButton{
display:none;
}
.MenuBarButton{
width: auto;
height:30px;
line-height: 30px;
cursor: pointer;
font-size: 20px;	
text-align: center;
padding-left:10px;
padding-right:10px;
margin-right:1vw;
display: inline-block;
vertical-align: top;	
position: relative;
color: #EF5350;	
font-weight:bold;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */	
}
.MenuBarButton:first-of-type{
border-top-left-radius:10px;
border-bottom-left-radius:10px;	
}	
.MenuBarButton:last-of-type{
margin-right:0px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;		
}	
.MenuBarButton:hover{
background-color:rgba(33,73,106,0.20);
}
#MenuPhotosList{
text-align: left;
padding-left:0px;
padding-right:0px;	
}

.SubMenu{
width:100%;	
display:none;
position:absolute;
top:30px;
left:0px;	
z-index: 800;
box-sizing: border-box;	
border-style: solid;
border-width: 1px;	
border-color:rgba(61,61,61,0.30); 	
background-color:white;
}	

.ArrowLink{
padding-left:10px;
padding-right:10px;
}
.SubMenuLink{
font-size: 16px;
font-weight: normal;
text-align: center;
}
/*Start Hamburger Menu Button For Mobile Styles*/
#HamburgerMenuButton{
height:30px;
width:30px;
cursor:pointer;
position:absolute;
top:0px;
right:10px;
z-index:99999999;
display:none;
}

#HamburgerMenuButtonInner{
height:30px;
width:25px;
position:absolute;
top:50%;
left:50%;	
margin-top:-12.5px;
margin-left:-12.5px;
}	
.Bar1, .Bar2, .Bar3 {
width: 25px;
height: 2px;
margin: 6.3px 0;
background-color: white;
transition: 0.4s; 
}
.MakeX .Bar1 {
transform: translate(0px, 5px) rotate(-45deg);
}

.MakeX .Bar2 {opacity: 0;}

.MakeX .Bar3 {
transform: translate(0px, -10.5px) rotate(45deg);
}
/*End Hamburger Menu Button For Mobile Styles*/
/*%%%%%%%%%%%% End Header Menu Styles %%%%%%%%%%%%*/

/*///////////////START MOBILE STYLES//////////////////*/

/*///////////////END MOBILE STYLES//////////////////*/



/*☼☼☼☼☼☼☼☼☼ Start Mobile Header Styles ☼☼☼☼☼☼☼☼☼*/

@media screen and (max-width: 990px){
#HeaderRibbon{
left:1% !important;	
}	
}
@media screen and (max-width: 962px){
#MenuBar{
margin-left:100px;	
}
}
@media screen and (max-width: 781px){
#HeaderTextA{
padding-left:calc(1% + 100px);
box-sizing: border-box;	
}
#HeaderTextB{
padding-left:calc(1% + 100px);
box-sizing: border-box;	
}
}

@media screen and (max-width: 675px){
#MenuBar{
width:100vw;
height:auto;
margin-top:0px;	
top: 0px;
left: 0px;
background-color: red;
padding-left:0px;	
}	
	
#MenuBarButtons{
width:100%;		
height:auto;
display:none;
position:absolute;
right:0px;
top:60px;
background-color: white;
box-shadow: 5px 5px 10px rgba(120,144,156,0.20);	
}
#MenuBarButtons .MenuBarButton{
width:100%;		
float:left;
}
#MenuBarButtons .MenuBarButton:nth-child(even) {
background-color:rgba(120,144,156,0.05);
}	

.MenuBarButton{
width: 100%;
height: auto;
font-size: 16px;	
text-align: left;
text-indent: 10px;		
display:block;
border-top-style: solid;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style:hidden;	
border-width: 1px;	
margin-right:0px;	
border-color:rgba(61,61,61,0.30);
float:left;
}
#MenuPhotosList{
width: 100%;
border-bottom-style:solid !important;
}	

.MenuBarButton:hover{
background-color:white;
}

.MobileMenuButton{
text-indent: 10px;	
float:left;	
}	
.MobileMenuButton .PageLink{
float:left;
}	
.MobileSubMenuButton{
width:30px;
height:30px;
line-height:30px;
font-size: 16px;
font-weight: 700;
position: relative;
color:black;
float:right;
display:block;
}
.MobilePlusButton{
width: 30px;
height: 30px;
float:left;
}
.PlusBar{
position: absolute;
transition: 300ms;
border-radius: 2px;
top: 25%;
bottom: 25%;
left: 45%;
width: 10%;
background-color:black;	
}		
.MinusBar{
position: absolute;
transition: 300ms;
border-radius: 2px;
top: 45%;
height: 10%;
background-color:black;	
}
.MinusBarShow{
left: 25%;
right: 25%;
}	
.MinusBarHide{
left: 50%;
right: 50%;
}		
/* Morph the shape when the  MobileSubMenuButton is hovered over */
.RotateBar {
transform: rotate(90deg);
}
	
#MenuBarButtons{
width: 100%;
height: auto;
}
#PhotosSubMenu{
width:100%;	
}	
.ArrowLink{
width: calc(100vw - 60px);
height:30px;
display: block;
float:left;
}

.ArrowLink:after {
display:none;
}	
.SubMenuLink{
width:100%;
height:30px;	
line-height:30px;
border-top-style: inset;
border-top-width: thin;
border-top-color: darkgrey;
text-align: left;	
text-indent: 25px;	
float:left;
}	
	
.SubMenuLink:hover{
background-color:white;
}	
	
.SubMenu{
position:static;
top:30px;
left:0px;
border-style: none !important;
}
#HamburgerMenuButton{
display:block;
}

}

@media screen and (max-width: 663px){
#HeaderTextA{
font-size:35px;	
}
}

@media screen and (max-width: 541px){
#HeaderTextA{
font-size:30px;	
}	
}

@media screen and (max-width: 477px){
#HeaderRibbon{
width:66px;		
height:100px;
top:-30px;
}
#HeaderTextA{
padding-left:calc(1% + 60px);
box-sizing: border-box;	
}
#HeaderTextB{
padding-left:calc(1% + 60px);
box-sizing: border-box;	
}	
}
@media screen and (max-width: 435px){
.HeaderRow{
height:190px;

}
.Header{
height:180px;
}	
	
#HeaderTextA{
height:auto;
}		
	
#HeaderTextB{
height:25px;
font-size:20px;	
}	
}
/*☼☼☼☼☼☼☼☼☼ End Mobile Header Styles ☼☼☼☼☼☼☼☼☼*/

/*<!--☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻ End Header Styles ☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻☻-->*/


/*<!--☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺ Start Footer Styles ☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺-->*/	
/*☼☼☼☼☼☼☼☼☼ Start Standard Footer Styles ☼☼☼☼☼☼☼☼☼*/
/*######@@@@@@ Start Bottom Row @@@@@@######*/
#BottomRow{
width:100%;	
height:30px;
background-color:#78909C;
font-size: 12px;
line-height:30px;
text-align: center;	
float:left;
user-select: none;	
}
#BottomRow a:link {
color: #FFFFFF ;
}

/* visited link */
#BottomRow a:visited {
color: #FFFFFF ;
}

/* mouse over link */
#BottomRow a:hover {
color:#EF5350;
}

/* selected link */
#BottomRow a:active {
color:#FFFFFF ;
} 

/*######@@@@@@ End Bottom Row @@@@@@######*/
/*☼☼☼☼☼☼☼☼☼ End Standard Footer Styles ☼☼☼☼☼☼☼☼☼*/

/*☼☼☼☼☼☼☼☼☼ Start Mobile Footer Styles ☼☼☼☼☼☼☼☼☼*/
@media screen and (max-width: 642px){

}/*☼☼☼☼☼☼☼☼☼ End Mobile Footer Styles ☼☼☼☼☼☼☼☼☼*/
/*<!--☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺ End Footer Styles ☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺☺-->*/