@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&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');

body 
{

margin:0;
padding:0;
font-family:Poppins,sans-serif;
}

a
{
text-decoration:none;
}

header
{

}


footer
{
background:black;
}









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

.clear
{
clear:both;
}

.center
{
margin:auto;
text-align:center;
}


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

.col3
{
width:32%;
display:inline-block;
vertical-align:top;
}

.col4
{
width:24%;
display:inline-block;
vertical-align:top;
}

.col25
{
width:20%;
display:inline-block;
vertical-align:top;
background:grey;
min-height:100px;
}

.col75
{
width:60%;
display:inline-block;
vertical-align:top;
}

@media only screen and (max-width: 600px)
{
.col75
{
width:100%;
}

.col25
{
width:100%;
}

}




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

.webcol
{
width:24%;
display:inline-block;
vertical-align:top;
}

@media screen and (max-width:600px)
{
.webcol
{
width:48%;
}
}








/* img */
.mapsymbol
{
transition:transform .2s;
}

.mapsymbol:hover
{
transform:scale(1.5);
}

#usericon
{
object-fit:cover;
height:40px;
width:40px;
border:1px solid black;
border-radius:50%;
}

#proicon
{
object-fit:cover;
height:80px;
width:80px;
border:2px solid black;
border-radius:50%;
}


@media screen and (max-width:600px) 
{
#logo
{
height:50px;
}
}

.fitwebsite
{
width:100%;
max-width:100%;
border-radius:50%;
object-fit:cover;
}

.fit
{
width:100%;
max-width:100%;
}

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

.ofc200
{
object-fit:cover;
height:200px;
width:200px;
}


.client
{
transition:transform .2s;
}

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













/* sidenav */
#sidenav
{
display:none;
}
/* 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???? */
.mainxxx
{
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;}
}







/* menu */
#menucont
{
width:100%;
/*
background-color:#4C0082;*/
background-color:black;
}



ul {
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
/*background-color:#4C0082;*/
background-color:black;
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*/
.dropdown-content 
{
display: none;
position: absolute;
/*background-color: #4C0082;*/
background:white;

min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

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

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

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








/* input */
input
{
padding:9px;
border-radius:5px;
border:2px solid black;
font-size:20px;
}

select
{
padding:9px;
border-radius:5px;
border:2px solid black;
font-size:20px;
}

textarea
{
padding:9px;
border-radius:5px;
border:2px solid black;
}

input[type="radio"] {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
  transform: scale(1.5);
}

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














/* buttons */
.blackbutton
{
display:inline-block;
background:black;
color:white;
padding:9px;
font-size:20px;
font-weight:600;
border-radius:7px;
}

.redbutton
{
display:inline-block;
background:red;
color:white;
padding:9px;
font-size:20px;
font-weight:600;
border-radius:7px;
}

.whiteoutlinebutton
{
display:inline-block;
border:2px solid white;
color:white;
padding:9px;
font-size:20px;
font-weight:600;
border-radius:7px;
}










/* text */
.w
{
color:white;
}

.poppins2
{
font-family:Poppins;
font-weight:700;
font-size:2vw;
}

.detail
{
color:grey;
font-size:0.8vw;
}

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