/* hpw  */

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=DM+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')



*
{
font-family:'DM Sans',sans-serif;
}



body 
{


font-family:'DM Sans',sans-serif;
border:0;
margin:0;

}


.innercont
{
width:90%;
max-width:1200px;
margin:auto;
}

#hiddenmenu
{
text-align:center;
display:none;
}

header
{
width:100%;
background:white;
}

.headertop
{
width:100%;

}

@media screen and (max-width:600px)
{
#logoicon
{
height:100px;
}
.logoicon
{
height:100px;
}
}


footer 
{
background-color:black;
border-top:0px solid #f2f2f2;
height:auto;
min-height:200px;
color:white;
}



.next
{
display:inline-block;
vertical-align:top;
text-align:center;
}	
	

.center
{
margin:auto;
text-align:center;
max-width:300px;
}



.ctrframe
{
background:white;
text-align:center;
width:100%;
max-width:1000px;
margin:auto;
}



#sticky
{
position:fixed;
bottom:20px;
right:20px;
height:50px;
width:50px;
text-align:center;
border-radius:50%;
background-color:yellow;
}



.par
{
/* Set a specific height */
height:400px;

/* Create the parallax scrolling effect */
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
/*background-size:cover;*/

text-align:center;


}

.par1
{
background-image:url("style/b1.png");
}

.par2
{
background-image:url("style/b2.png");
}

.par3
{
background-image:url("style/b3.png");
}



@media only screen and (max-width:600px)
{
.par
{
height:200px;
}
}






#confirm
{
background:green;
position:fixed;
top:0;
right:0;
color:white;
visibility:hidden;
display:inline-block;
padding:12px;
}





.band
{

width:100%;
min-height:200px;
}


a
{
font-family:'DM Sans',sans-serif;
text-decoration:none;
color:black;
}
  
/*
a:link {
  color:black;
}


a:visited {
  color: black;
}


a:hover {
  color: black;
}


a:active {
  color: black;
}
*/








.imgcont
{
position:relative;
}

.topright
{
font-family:'Poppins',sans-serif;
font-size:2vw;
color:white;
font-weight: 700;
position:absolute;
top:100px;
right:200px;
}

.topleft
{
font-family:'Poppins',sans-serif;
font-size:2vw;
color:white;
font-weight: 700;
position:absolute;
top:20px;
left:20px;
}

.fit
{
max-width:100%;
}

.fitbanner
{
width:100%;
max-width:100%;
display:block;
}








.round
{
border-radius:50%;
}








	


.menuitem
{
display:inline-block;
padding:12px;
font-family:'Poppins';
color:white;
}

.menuitem:hover
{
background:black;
color:white;
}

#menu
{
width:100%;
background:dodgerblue;
}









input[type=text]
{
border:3px solid black;

border-radius:8px;

font-size:20px;
font-family:'DM Sans', sans-serif;
padding:9px;
}

input[type=password]
{
border:3px solid black;

border-radius:8px;

font-size:20px;
font-family:'DM Sans', sans-serif;
padding:9px;
}

input[type=radio] 
{
border:0px;
width:100%;
height:1em;
}

input[type=submit]
{
background-color: black;
border: none;
color: white;
font-size:22px;
padding:7px;
font-family:'DM Sans', sans-serif;
}

input[type=checkbox]
{
transform: scale(2);
}

select
{

border:3px solid black;

font-size:22px;
padding:7px;
font-family: 'DM Sans', sans-serif;
}

textarea
{

box-sizing:border-box;
	border:3px solid black;
	border-radius:8px;
width:100%;
min-height:100px;
font-size:22px;
font-family:'DM Sans', sans-serif;
padding:7px;
}













table
{
border-collapse: collapse;
width:100%;
}


td
{
border:1px solid #ccc;
height:100px;
}









.clear
{
clear:both;
}










#save 
{
transition: transform .2s;


display:none;
text-align:center;

position:fixed;
z-index:2;
top:50px;
right:20px;

border-radius:10px;
border:4px solid yellow;

width:100px;
height:50px;

line-height:50px;

background:black; 
}




#save:hover 
{
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}








.col2
{
display:inline-block;
width:24%;
border:0px solid green;
vertical-align:top;
}

.col3
{
display:inline-block;
width:32%;
border:0px solid green;
vertical-align:top;
}








.blackframe
{
border:4px solid #000000;
max-width:100%;
}

.blackframe:hover
{
filter:brightness(90%);
}






.bluebutton
{
transition: transform .2s;


display:inline-block;
border-radius:15px;
background:blue;
color:white;
padding:15px;
line-height:30px;
height:30px;
text-align:center;
margin:auto;
}

.blackbutton
{
transition: transform .2s;


display:inline-block;
border:3px solid black;
border-radius:15px;
background:white;
padding:15px;

text-align:center;

}

.blackbutton:hover 
{
transform: scale(1.1);
}

.orangebutton
{
color:black;
background:orange;
display:inline-block;
padding:12px;
border-radius:0px;
border:0px solid yellow;

text-align:center;
}

.orangebutton:hover
{
opacity:0.5;
filter:alpha(opacity=50);
}


.yellowbutton
{
color:black;
background:yellow;
display:inline-block;
padding:8px;
border-radius:15px;
border:4px solid yellow;

text-align:center;
}

.yellowbutton:hover
{
opacity:0.5;
filter:alpha(opacity=50);
}

.whitebutton:hover
{
opacity:0.5;
filter:alpha(opacity=50);
}

.whitebutton
{
	color:white;
display: inline-block;
top:40%;
border-radius:15px;
border:4px solid white;
width:200px;
line-height:40px;
height:40px;
text-align:center;
}

.whitebutton:hover
{
opacity:0.5;
filter:alpha(opacity=50);
}












#icon
{
width:75px;
height:75px;
object-fit:cover;
border-radius:50%;
}

#iconsmall
{
width:30px;
height:30px;
object-fit:cover;
border-radius:50%;
}





























.red
{background:red;
}




.pink
{
color:#FF40FF;
}

.cyan
{
color:#00C0C0;
}

.pg
{
/*color:#00C0C0;*/
color:pink;
}
 












  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

 


.ofc
{
height:100px;
width:100px;
object-fit:cover;
}

.ofc300
{
object-fit:cover;
width:300px;
}

















#msg
{
	display:none;
	
	z-index:2;
position:fixed;
top:20px;
right:20px;
padding:5px;
background:green;
height:40px;
line-height:40px;
text-align:center;
border:1px solid white;
border-radius:5px;
}


























hr.grey
{
	    border-style: solid;
		border-color:#606060;
background-color:#606060;	
	border-top: 1px solid #606060;
}









.tit
{
font-size:6vw;
}

@media screen and(max-width:600px)
{
.tit
{
font-size:4vw;
}
}


h1 {

font-size: 28px;
color: #000000;
font-weight: bold;

padding: 0px;
margin: 0px;

display: inline;
}

h2 {

font-size: 16px;
color: #000000;
font-weight: normal;

padding: 0px;
margin: 0px;

display: inline;
}
h3 {

font-size: 12px;
color: #000000;
font-weight: normal;

padding: 0px;
margin: 0px;

display: inline;
}

.h1w
{
color:white;
}
.h2w
{
color:white;
}
.h3w
{
color:white;
}
.h1g
{
color:#606060;
}
.h2g
{
color:#606060;
}
.h3g
{
color:#606060;
}



.g
{
color:grey;
}

.w
{
color:white;
}

.db
{
color:blue;
}