body {
}

/* Background slideshow container */
#bg-slideshow {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* Optional dark overlay to help text readability */
#bg-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.0);
  pointer-events: none;
}

/* Each slide */
.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05) translate3d(-2%, 0, 0);
  animation: bg-slide-anim 78s linear infinite;
  will-change: opacity, transform;
}

/* Keyframes for fade + zoom + pan */
@keyframes bg-slide-anim {
  0% {
    opacity: 0;
    transform: scale(1.05) translate3d(-2%, 0, 0);
  }
  4% {
    opacity: 1;
  }
  20% {
    opacity: 1;
    transform: scale(1.12) translate3d(2%, 0, 0);
  }
  24% {
    opacity: 0;
    transform: scale(1.15) translate3d(4%, 0, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1.15) translate3d(4%, 0, 0);
  }
}


table
{
position:absolute;
left:300px;
top:150px;
width:60%;
height:auto;
opacity:1;
z-index:0;
}

#thumbtable
{
position:absolute;
  margin-left: auto;
  margin-right: auto;
  Justify-content:space-evenly;
left:0px;
top:150px;
width:auto;
height:auto;
opacity:1.0;
z-index:0;
background-color:#ffffff;
}

#persontable
{
position:absolute;
left:0px;
top:150px;
width:auto;
height:auto;
opacity:1;
z-index:5;
background-color:#ffffff;
}

td
{
position:relative;
left:0px;
top:0px;
align-content:top;
font-family:Arial,sans-serif;font-weight:normal;font-style:normal;font-size:14px;
}

a
{
text-decoration:none; color:#ffffff;font-weight:500;
}

a:visited
{
text-decoration:none; color:#ffffff; 
}

a:hover
{
text-decoration:none; color:#169a16; 
}

a:active
{
text-decoration:none; color:#169a16;
}

a:hover img
{
opacity:1; 
}

h1 {color:#252525;text-decoration:underline;font-weight:500;font-family:Arial,sans-serif;font-weight:normal;text-transform:uppercase;font-style:normal;font-size:17px;}

#logobox
{
position:fixed;
background-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
left:0px;
top:0px;
width:100%;
height:128px;
padding-top:22px;
  padding-bottom:0px;
  padding-left:22px;
z-index:10;
overflow:hidden;
opacity:0.8;
}

#mainnavbar
{
position:fixed;
left:75%;
top:11px;
width:25%;
height:50;
padding:11px;
opacity:0.8; 
text-align:left; 
font-family:Arial,sans-serif;font-weight:normal;text-transform:uppercase;font-style:normal;color:#ffffff;font-size:16px;
  
z-index:15;
}

#projecttypebar
{
position:fixed;
left:75%;
top:50px;
width:25%;
height:50px;
padding:11px;
opacity:0.8; 
text-align:left; 
font-family:Arial,sans-serif;font-weight:normal;text-transform:uppercase;font-style:normal;color:#252525;font-size:16px;
z-index:15;
}

#practicebar
{
display:visible;
position:fixed;
right:0px;
top:50px;
width:415px;
height:28px;
padding:11px;
opacity:0.8; 
text-align:right; 
font-family:Arial,sans-serif;font-weight:normal;text-transform:uppercase;font-style:normal;color:#252525;font-size:16px;
z-index:15;
}

#All
{
  display:inline;


}

#Dev, #Res, #Con, #Com, #Wip
{
  display:none;


}

#textbox, #infobox
{
	position:fixed;
	left:0px;
	top:150px;
	width:278px;
 	height:90%;
	overflow:hidden;
	padding:11px;
	z-index:4;
	opacity:0.8;
	background-color:#ffffff;
  text-align:left;
  	font-family:Verdana, sans-serif; color:#000000; font-size:16.0px; line-height:1.17em;
}

#col01, #col02, #col03, #col04, #col05
{
  	position:fixed;
	top:100px;
	width:18%;
 	height:90%;
	padding:2%;
	z-index:4;
	opacity:0.8;
	background-color:#ffffff;
  text-align:left;
  	font-family:Verdana, sans-serif; color:#000000; font-size:16.0px; line-height:1.17em;
}

#col01
{
	left:0px;
}

#col02
{
	left:20%;
}

#col03
{
	left:40%;
}

#col04
{
	left:60%;
}
#col05
{
	left:80%;
}

#smalltext
{
  	font-family:Verdana, sans-serif; color:#000000; font-size:11.0px; line-height:1.25em;
}

#smalltext2
{
  	font-family:"Verdana", sans-serif; color:#000000; font-size:11.0px; line-height:1.25em;
}

.thumbwrap
{
position: relative;
width:44%;
text-align:Center;
height:auto;
display:inline;
overflow:hidden;
}

#thumb
{
width:44%;
height:auto;
Padding:2%;
  display:inline;
filter:grayscale(0%);
border-radius: 66px;
}

#personpic
{
width:90%;
height:auto;
  Padding:2%;
filter:grayscale(0%);
opacity:1;
border-radius: 44px;
}

#officepic
{
width:100%;
height:auto;
filter:grayscale(0%);
  opacity:1;
}

.personwrap
{
position: relative;
width:90%;
height:auto;
display:inline;
overflow:hidden;
margin:0%;
}

.title
{
position: absolute;
width:auto;
height:auto;
bottom:50%;
left:50%;
  translate: -50% -500%;
padding:11px;
visibility: hidden;
overflow:hidden;
opacity: 0;
font-family:Arial,sans-serif;font-weight:bold;text-transform:uppercase;font-style:normal;color:#ffffff;font-size:22px;filter:difference;
text-align:center;
z-index:50;
border-radius: 11px;
}

.persontitle
{
position: absolute;
width:66%;
height:66%;
bottom:0px;
left: 0px;
padding:11%;
background-color: #ffffff;
visibility: hidden;
overflow:hidden;
opacity: 0;
font-family:Arial,sans-serif;font-weight:normal;text-transform:uppercase;font-style:normal;color:#169a16;font-size:14px;filter:difference;
text-align:center;
z-index:50;
border-radius: 33px;
}

.thumbwrap:hover .title
{
visibility: visible;
opacity: 1;
z-index:50;
}

#thumb:hover
{
filter: brightness(50%)
}

#thumb:not(:hover)
{
filter: brightness(100%) 
}
  

.personwrap:hover .persontitle
{
visibility: visible;
opacity: 1;
z-index:50;
}

#personpic:hover
{
visibility: visible;
opacity: 1;
z-index:50;
}

#personpic:not(:hover)
{

}

#mediumimage
{
border: 2px solid white;
width:95%;
height:auto;
padding:2%;
float:left;
      border-radius: 44px;
}

#mediumimageportrait
{
border: 2px solid white;
width:45%;
height:auto;
padding:2%;
float:left;
      border-radius: 44px;
}

#largeimage
{
position:fixed;
left:0px;
top:0px;
float:left;
width:100%;
height:auto;
}

#map
{
	position:absolute;
	left:300px;
	top:150px;
	width:66%;
	height:77%;
	overflow:hidden;
	padding:0px;
	z-index:1;
	color:#ffffff;
	background-color:#000000;
	opacity:1.0;
        border-radius: 44px;
  -webkit-filter: grayscale(1) invert(0%) opacity(1.0);
  filter: grayscale(1) invert(0%) opacity(1.0);
}

#arb-riba-logobox
{
	position:absolute;
	left:0px;
	bottom:0px;
	width:auto;
	height:75px;
	overflow:hidden;
	z-index:5;
	color:#ffffff;
	opacity:1.0;
	padding:0px;
}
#socialmedia
{
position:fixed;
right:11px;
top:0px;
width:28px;
height:28px;
opacity:0.8;
padding:11px;
z-index:50;

}

#instagram
{
width:100%;
height:auto;
}

#copyright
{
	position:fixed;
	left:0px;
	bottom:0px;
	width:100%;
	height:11px;
	padding:5px;
	overflow:hidden; 
	background-color:#000000;
	z-index:10;
	opacity:1.0;
  	font-family:Verdana, sans-serif; color:#ffffff; font-size:9.0px; line-height:1.17em;
}