@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

body 
{
border:0;
margin:0;
font-family:'Lato',sans-serif;
/*background:#E8E8E8;*/
background:#E7E7E7;
}





a 
{ 
text-decoration:none;
}



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

header
{
z-index:1;
position:fixed;

width:100%;

background:#fff;
color:#000;

-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
border:0px solid red;
}




footer
{
position:relative;
top:160px;

width:100%; 
height:auto; 
text-align:center; 
vertical-align:top;
border-top:0px solid white; 
color:white;
background-color:black;
}







#content
{
background:white;
max-width:1200px;
position:relative;
top:160px;

}




/* menu */
#menucont
{
position:relative;


width:100%;
background-color:#4C0082;

-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}

#menu
{
margin:auto;
}





/* divs */
.next
{
display:inline-block;
vertical-align:top;
}


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

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

.clear
{
clear:both;
}






/* img */
#logo 
{

text-align:left;

height:60px;
vertical-align:top;

transform: scale(1.0);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}


#loginicon
{
transform: scale(1.0);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}




#gal
{
background:grey;
margin:0;
padding:8px;
}







/* sticky */
#sticky
{
display:none;
position:fixed;
bottom:20px;
right:20px;
height:50px;
width:50px;
text-align:center;
border-radius:50%;
background-color:grey;
color:white;
}








.client
{
object-fit:cover;
width:100px;
height:100px;
border-radius:50%;
border:1px solid #ccc;
margin:5px;

transition: transform .4s;;
}

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

.client40
{
object-fit:cover;
width:40px;
height:40px;
border-radius:50%;
border:1px solid #000;
margin:5px;

transition: transform .4s;;
}

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






.proimgdiv
{
height:100px;
width:100px;
margin-bottom:23px;
display:inline-block;
vertical-align:top;
}

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






#save 
{
background:orange; 
color:black;
	
transition: transform .2s;


display:none;
text-align:center;

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

border-radius:10px;
border:1px solid #000000;

width:100px;
height:50px;

line-height:50px;


}

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











.orangebox
{
font-size:16px;
color:white;
display:inline-block;
padding:8px;
border:1px solid transparent;	
border-radius:3px;
background:orange;
}

.greenbox
{
font-size:16px;
color:white;
display:inline-block;
padding:8px;
border:1px solid #008000;	
border-radius:3px;
background:green;
}

.blackbutton
{
font-size:28px;
color:white;
display:inline-block;
padding:8px;
border:1px solid transparent;	
border-radius:3px;
background:#000;

}

.blackbutton:hover
{
font-size:28px;
color:black;

background:#fff;
border:1px solid black;
}






/* input */
input[type=date]
{
font-size:14px;
padding:7px;
}

input[type=text]
{
font-size:14px;
padding:7px;
}
input[type=password]
{
font-size:14px;
padding:7px;
}

select
{
font-size:14px;
padding:7px;	
}

input[type=select]
{
font-size:14px;
padding:7px;
}

input[type=radio] 
{
transform:scale(2);
position:relative;
top:-20px;
}





/* menu */
ul {
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
background-color:#4C0082;
  
font-size:20px;
}

li 
{
float: left;
}

li a, .dropbtn 
{
display:inline-block;
padding:12px;
color:white;
text-align:center;

text-decoration:none;
}

li a:hover, .dropdown:hover .dropbtn 
{
background-color: red;
}

li.dropdown 
{
display: inline-block;
}

li>a:after 
{ 
content:' ▼'; 
}

li>a:only-child:after 
{ 
content:''; 
}






/* */
.dropdown-content 
{
display: none;
position: absolute;
background-color: #4C0082;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a 
{
color:white;
padding:12px 16px;
text-decoration:none;
display:block;
text-align:left;
}

.dropdown-content a:hover 
{
background-color: red;
}

.dropdown:hover .dropdown-content 
{
display: block;
}











/* Fixed sidenav, full height */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
  background-color: green;
  color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}