/* Reset and Initialization - begin */

* {
		box-sizing:border-box;
}
		

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* html{overflow-x:hidden} */

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

html, body{font-family:"Tahoma",sans-serif;font-size:15px;line-height:1.5}
html{overflow-x:hidden}
h1, h2, h3, h4, h5, h6 {font-family:"Swis721 BT",arial,sans-serif;font-weight:400;margin:10px 0}
h1{font-size:24px}
h2{font-size:18px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
 
 /* Reset and Initialization - end */
 
 b, strong {
	 font-weight: bold;
}

p {
	margin: 1em 0;
}

.info-label {
	cursor: pointer;
	
	color: rgb(100, 100, 100);
	position: fixed;
	text-align: center;
	left: 45%;
	right: 45%;
	z-index: 2;
	padding-top: 10px;
	padding-bottom: 0px;
	margin: 0
}

.info-label-ul {
	text-decoration: underline;
	color:rgb(256,30,30);
}

.info-label:hover {
	color:rgb(256,30,30);
}
	
dd.info-text {
	display: none;
}

.info-text {
     display: block;
     position: fixed;
	 text-align: left;
	 top: 12%;
	 left: 25%;
	 right: 25%;
	 color: black;
	 margin: 0;
	 font-size:14px;
	 letter-spacing: 1px;
	 z-index: 2;
	 padding: 0px 25px 10px;
	 /* padding: 10px 25px; */
	 background-color: rgba(198,198,198,0.8);
}

/* div div:hover p.info-text-center {*/
.info-text-center { 
     display: block;
     position: fixed;
	 text-align: center;
	 left: 25%;
	 right: 25%;
	 color: black;
	 margin: 0;
	 font-size:14px;
	 letter-spacing: 1px;
	 padding: 0px 25px 10px;
	 background-color: rgba(198,198,198,0.6);
}

.anime-label {
	cursor: pointer;
	
	color: rgb(100, 100, 100);
	position: fixed;
	top: 65px;
	font-size:16px;
	min-width: 150px;
	letter-spacing: 1.5px;
	text-align: center;
	left: 45%;
	right: 45%;
	z-index: 2;
	padding-bottom: 0px;
	margin: 0
}

.p_1 {
	margin: 0;
	text-align:justify;
	text-justify: inter-word;
}
	
.p_2 {
	margin: 0;
	text-align:justify;
	text-justify: inter-word;
	letter-spacing: 1px;
}
 .p_2-1 {
	 margin: 0;
	 text-align:left;
	 text-justify:none;
	 font-size:14px;
	 letter-spacing: 1px;
 }
 
.p_3 {
	padding:4px 16px!important;
	text-align:center;
}

.text-light-grey{
	color:rgb(220, 220, 220);
}
	
.text-grey{
	color:rgb(117, 117, 117);
}

.text-dark-grey {
	color:rgb(100,100,100);
}

.text-black {
	color:rgb(0,0,0);
}

.text-red {
	color:rgb(250,0,0)
}

.text-dark-red {
	color:rgb(256,30,30)
	/* color:rgb(225,30,30) */
}
.text-very-dark-red {
	color:rgb(195,30,30)
	/* color:rgb(225,30,30) */
}

.text-small{
	font-size:12px;
}

.header {
		position:fixed;
		left:0;
		width:100%;
		height:54px;
		z-index:1;
		top:0px;
		background-color:white;
		padding:0px 90px;		
}

.header-shadow {
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.2),0 2px 10px 0 rgba(0,0,0,0.12);
}

.footer-shadow {
	box-shadow:0 -2px 5px 0 rgba(0,0,0,0.2),0 -2px 10px 0 rgba(0,0,0,0.12);
}

.slide-shadow {
	box-shadow:0 0 5px 2px rgba(0,0,0,0.4);
}

.ssf_width {
	width: 75%;
}

.ssf_top_padding {
	padding-top:70px;
}

.ar-border-top{border-top:1px solid rgb(130,130,130)}
.ar-border-bottom{border-bottom:3px solid rgb(130,130,130)}

.ar-container{padding:0 16px 16px}

.pad_bank {
	padding:55px 8px 20px 16px;
}

.pad_dental {
	padding:55px 8px 24px 16px;
}
	
.pad_mixed {
	padding:48px 8px 24px 16px;
}

.pad_O_Project {
	padding: 55px 8px 24px 16px;
}

.pad_D_Project {
	padding: 55px 8px 24px 16px;
}
 
.pad_SF_House {
	padding-top:55px; /* changed from 20px */
	padding-left: 16px;
	padding-bottom:24px;
}

/************************ Beginning of DROPDOWN MENU stuff *********************/

/*Strip the ul of padding and list styling*/
   
#logo {
	font-weight: bold;
	line-height: 33px;
}

#nav-icon {
	display: none;
	cursor: pointer;
	width: 34px;
	height: 34px;
}

#nav-icon {
	background-image: url("menu-ham-black.svg");
	background-repeat: no-repeat;
	background-size: cover;
}

/* insure consistent width */

#top-nav li {
	min-width: 100px;
}
	
ul {
    list-style-type:none;
    padding:0 10px 0 0;
    position: absolute;
	display: inline-block;
	right: 0px;
	letter-spacing: 3px;
	height: 100%;
}

    /*Reset dropdown links appear if increasing to larger screen from smaller screen*/
	
	ul div {
	padding:0;
	}

 /*Create a horizontal list with spacing. This is for the menu in navigation bar.*/
li {
    display:inline-block;
    float: left;
    margin-right: 1px;
    height:54px;
}

/* style for lists in captions below images */
.list_1 {
	display: list-item;
	padding-left:.15em;	
	padding-right:.4em;
	padding-bottom:.4em;
	height:auto;
	line-height:1.25;
}

li a {
    display:block;
    min-width:100px;  /* 15 Feb. */
	height: 100%;     /* changed from 50, then 54, then 100% */
    text-align: center;
    line-height: 54px;
    font-family: "Tahoma", Arial, sans-serif;
    color: rgb(117,117,117);
    background: rgba(255,255,255,0);
    text-decoration: none;
	vertical-align: middle;    /* added */
}

li ul {
    display: none;
}

/*Make dropdown links vertical*/
/* commented out on 22 Feb. 2022   */
li ul li {
    display: block;
    float: none;
	/* height: 40px; */
	text-align: center;
}

/*Prevent text wrapping*/
/* commented out on 22 Feb. 2022   */
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0;
	text-align: center;
}

/*Display the dropdown on hover */
/*See page 67 in CSS: the Missing Manual for discussion of "+,"  which refers to adjacent sibling*/

ul li a:hover + .hidden, .hidden:hover {
    display: block;
}


ul li a:hover + .second-menu-1, .second-menu-1:hover {
    display: block;
}

.pointer {cursor: pointer;}

/************************ End of DROPDOWN MENU stuff *********************/

.show-rabbit {
		position:relative;
		left:-12px;
		top:14px;
		z-index:2;
		background-color:rgba(255,255,255,.5);
}

.no-show-rabbit {
	position:absolute;
	top:14px;
	left:28px;
	z-index:2;
	background-color:white
	display:block;
}
 
/* Lower the title so that it is  in-line with logo */

.ar-title-position {
	/* margin-top:5px; */
	margin-top:0px;
}

 .gallery_images {
	 box-shadow:0 0 5px 2px rgba(0,0,0,0.4);
	 display: block;
	 margin-left: auto;
	 margin-right: auto;
	 width:100%;
 }

/******************************** SLIDESHOW stuff starts here ****************************************/

/* Slideshow container */

.slideshow-container {
  width: 75%;
  position: relative;
  margin: auto;
}

/*    */

.picture-container {
  padding-top: 80px;
  height: auto;
}

.picture-container-top {
	padding-top: 50px;
	height: auto;
}

/* Caption text */

.ss_caption {
  font-size:15px;
  padding:4px 8px;
  position: absolute;
  width:100%;
  float:left
}

.ss_caption_center {
  font-size:15px;
  letter-spacing: 2px;
  padding:10px 8px;
  position: absolute;
  width:100%;
  text-align:center
}

.ss_caption_left {
  font-size:15px;
  letter-spacing: 2px;
  padding:10px 8px;
  position: absolute;
  width:100%;
  text-align:left
}

.none {
  cursor:none;
}

.active {
  background-color: rgb(100, 100, 100);
}

/************************************ SLIDESHOW stuff ends here ***********************************************/

/* Begin PORTFOLIO grid */

/*Code for rollover text on images  */

 .container {
  position: relative;
  max-width:100%;
  height:auto;
 }
 
 .border_shadow {
box-shadow: 0 0 5px 2px rgba(0,0,0,0.4);
border: 4px solid rgb(200,190,210);
border-right:8px solid rgb(200,190,210);
border-left:8px solid rgb(200,190,210);
border-radius: 5px;
 }

 .border_shadow_wide {
box-shadow: 0 0 5px 2px rgba(0,0,0,0.4);
border: 6px solid rgb(200,190,210);
border-right:10px solid rgb(200,190,210);
border-left:10px solid rgb(200,190,210);
border-radius: 6px;
 }

  .overlay {
  position: absolute; 
  bottom: 0; 
  left:0;
  right: 0;
  background: rgb(0, 0, 0);  /* Fallback color */
  background: rgba(256, 256, 256, 0);
  overflow: hidden;
  width: 100%;
  height: 0%;
  color: rgb(230,230,230);      /* original color: white */
  text-align: center;
 }

.container_text {
	font-size: 1vw;
    text-align: center;
	height: 100%;
 }	
	
.container:hover .overlay {
   height: 100%;
     background: rgba(50, 50, 50, 0.5);
}
 
.row {
  margin: 8px 12px;
}

/* Add padding BETWEEN each column */

.row > .column {
  padding: 1.5% 1.5%;
}

/* Create four equal columns that float next to each other */
.column {
  float: left;
  width: 25%;
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

.caption_1 {
	padding: 45px 0 16px 0;
	width:65%;
	max-width:31em;  /* Set paragraph width to about 65 characters */
	margin:auto;
	height:auto;
}

.caption_1_pad {
	padding-top:25px
}

.caption_link {
	font-size:90%;	
	text-decoration-line:none;
}

.caption_link:hover {
	color:rgb(0,0,0);
	text-decoration-line:underline;
}
 
 .caption_2 {
	padding:4px 6px;
	text-align: left;
 }
 
  .nav-anchor {
	 display: inline-block;
     position: relative;
     top: -150px;
     visibility: hidden;
 } 
 
 
/* End Portfolio grid */


/****************************************************************************/

@media only screen and (max-width: 600px) {
	
		#nav-icon {
		display: block;
		
		position:absolute;
		right:25px;
		top:6px;
		z-index:3;
	}

	#nav-icon.menu-close {
		background-image: url("menu-close-black.svg");
	}

	#top-nav {
		margin-top: 45px;
		display: none;
	}

	#top-nav.nav-active {
		display: block;
	}
	
	#second-menu-1 {
		display: none;
	}
		
	#second-menu.second-menu-active {
		color: rgb(255,0,0);
	}
	
	#second-menu-1.second-menu-1-active {
		
		display: block;
	    color: rgb(255,0,0);
	}
	
	#info-icon.info_close {
		background-image: url("menu-close-black.svg");		
	}

	.hide_small {
		display:none!important
	}
	
	div#slides {
		display: none;
	}

	div#slides_small {
		display: none;
	}
	
	img#slide {
		display: none;
	}
	
h3{font-size:20px}h4{font-size:16px}h5{font-size:14px}  h6{font-size:13px}
h3, h4, h5 {margin:0;}

h3 {
	margin-top:10px;
	margin-bottom:10px;
}

.ssf_width {
	width: 85%;
}

.ssf_top_padding {
	padding-top:60px;
}
	
.ar-padding-top {
		padding-top:20px;
	}
	
.ar-padding-bottom {
		padding-bottom:20px;
	}

/*decrease height of header on smaller devicex */	
.header {
	height:45px;
}
	
	   /*Make dropdown links appear inline*/
	
    ul {
		margin-top: 45px;
		margin-left: 20%;
		margin-right: 20%;
        display: block;
		padding: 0;
		z-index: 10;
    }
		
	ul div {
	padding:0 15%;
	}
		
 	li a {
		color: rgb(0,0,0);
        margin-bottom: 0px;
    }

	/* Dropdown menu background - small screen */
    /*Make all menu links full width*/
	
    ul li, li a {
		width: 100%;
		background: rgba(235, 235, 235, 0.7);
		display:block;
		position: relative;
		z-index: 10;
    }
	
	li ul {
		margin-top:0;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}

/* On small screens make height of secondary drop-down menu same height as primary drop-down */
	
	ul li ul li {
		height: 100%;
		background: rgba(125, 125, 125, 0.6);
	}
	
	/* Reduce size of Portfolio Gallery images and center. When width=100% the quality*/
	/* of the images is poor. Hence, width = 75% */

.gallery_images {
		width:75%;
}

/* show smaller version ArchRabbit name */

.show-rabbit {
		position:absolute;
		left:33px;
		top:6px;
		z-index:2;
		background-color:white;
}

.no-show-rabbit { 
		display:none;
}

/* On small screens the title does not have to be lowered so that it is in-line with logo */

.ar-title-position {
	margin-top:0px;
}

	/* On smaller screens, decrease text size */
.prev, .next,.text {font-size: 11px}

 .column {
    width: 100%;
  }
  
  .row > .column {
  padding: 2% 1.5%;
}

 .ss_caption {
	  float: none;
	  font-size: 12px;
	  text-align: center;
 }
 
 .ss_caption_center {
  font-size:12px;
 }
 
.caption_1 {
	 font-size:90%;
	 line-height: 1.25;
 }
 
 .caption_1_pad {
	padding-top:10px
}
 
.caption_2 {
	text-align: center;
	font-size: 12px;
 }
  
.ul_1 {
	list-style-type: disc;
	letter-spacing: 0;
	height: auto;
	padding: 0 1.5em 0 1.5em;
	position: initial;
	float:none;
	margin:0;
	display: inline-block!important;
}
 
  	.pad {
	  height: 70px;
	  white-space:normal;
  }
  
	.pad_1 {
	  padding-top:40px;
  }
  
	.pad_2 {
	padding-top: 65px;
  } 
  
	.pad_3 {
	  padding-bottom:4px;
  }
  
	.pad_4 {
	  height: 55px;
	  white-space:normal;
  }
  
   .about_padding {
	  padding: 50px 8px 16px 8px;
  }
  
  .slideshow-container {
  width: 85%;
}
  
.info-text {
	left: 10%;          /* @media only screen and (max-width: 600px)*/
	right: 10%;
	/* text-align: center; */
	/* padding: 10px 25px; */
	margin-top:20px;
}

.anime-label {
	font-size: 14px;
	top: 55px;
	left: 0;
	right:0;
}
	
 .overlay {
     font-size: 3.5vw;  /* @media only screen and (max-width: 600px)*/
     padding: 2% 5%;
}

.anime_margin_top {     /* @media only screen and (max-width: 600px)*/
	margin-top: 17%; 
}

.container_text {
	font-size: 3.5vw;
    padding: 15px 20px;
    text-align: center;
}

div#Rendering_Gallery::before {
   content: "";
   display: block;
   height: 70px;
   margin-top: -50px;
}
 
 .next_one {
	 right: -8%;
 }
 
 .prev_one {
	 left: -8%;
 }
 
}

/****************************************************************************/

@media only screen and (min-width: 601px) and (max-width: 991px) {
	
	.hide_medium {
		display:none!important
	}
	
	div#slides {
		display: none;
	}
	
	div#slides_small {
		display: none;
	}
	
	img#slide {
		display: none;
	}
	
h3{font-size:20px}h4{font-size:16px}h5{font-size:14px} h6{font-size:13px}
h3, h4, h5 {margin:0}

h3 {
	margin-top:10px;
	margin-bottom:10px;
}

ul {
	letter-spacing: 2px;
}
	
li a {	
    min-width:0;
	padding:0 .45em;
}	
	
.ar-padding-top {
		padding-top:20px;
	}
	
.ar-padding-bottom {
		padding-bottom:20px;
	}
	
	/* show smaller version ArchRabbit name */

.show-rabbit {
		position:absolute;
		left:25px;
		top:10px;
		z-index:2;
		background-color:white;
}

.no-show-rabbit {
	display:none;
}

/* On small screens make height of secondary drop-down menu same height as primary drop-down */
	
ul li ul li {
		height: 100%;
		background: rgba(125, 125, 125, 0.6);
	}

#second-menu-1 {
		display: none;
	}

#second-menu.second-menu-active {
		color: rgb(255,0,0);
		background: rgb(205,205,205);
	}
	
#second-menu-1.second-menu-1-active {
	display: block;
    color: rgb(0,0,0);
    height: 40px;
    height: 100%;
	text-align: right;
    font-size: 90%;
    letter-spacing: 0px;
}

/* #second-menu-1.second-active li { */
.second-menu-1 li {
	background: rgb(238,238,238);
}

.second-menu-1 li a {
	color: rgb(0,0,0);
}

/* Portfolio Grid changes to 2 columns*/

  .column {
    width: 50%;    /* @media only screen and (min-width: 601px) and (max-width: 991px) */
  }
 
 .row {
  margin: 3px 12px;  /*adjust top and bottom margin of rows so that spacing between adjacent rows approximately matches vertical spacing between columns in 2 column display */
}

.anime_margin_top {
	margin-top: 13%; /* @media only screen and (min-width: 601px) and (max-width: 991px) */
}

 .ss_caption {
	  float: none;
	  font-size: 12px;
	  text-align: center;
 }
 
  .ss_caption_center {
  font-size:12px;
 }
 
 	.pad {
	  height: 70px;
	  white-space:normal;
  }
    
	.pad_1 {
	  padding-top:50px;
  }
  
	.pad_2 {
	  padding-top: 70px;
  } 
  
	.pad_3 {
	  padding-bottom:4px;
  }
  
	.pad_4 {
	  /* height: 75px;	  */
	  height: 65px;
	  white-space:normal;
  }
  
	.about_padding {
	  padding: 60px 8px 16px 8px;
  }
  	
	.pad_bank {
	padding:70px 8px 20px 8px;
}
	
	.pad_dental {
	padding:70px 8px 24px 8px;
	}
	
	.pad_mixed {
	padding:70px 8px 24px 8px;
	}
	
	.pad_O_Project {
	padding: 75px 8px 24px 8px;
	}

	.pad_D_Project {
	padding: 75px 8px 24px 8px;
	}
	
	.pad_SF_House {
	padding-top:70px;
	padding-bottom:24px;
}
	
	/* @media only screen and (min-width: 601px) and (max-width: 991px) */
	
	.overlay {
     font-size: 2.5vw;
     padding: 2% 5%;
}

.container_text {
	font-size: 2vw;
    padding: 15px 20px;
    text-align: center;
}

div#Rendering_Gallery::before {
   content: "";
   display: block;
   height: 80px;
   margin-top: -65px;
}
  
.caption_1 {
	font-size: 90%!important;
}

.caption_1_pad {
	padding-top:15px
}

.info-text {
	left: 10%;
	right: 10%;
}

}     

/****************************************************************************/

@media only screen and (min-width: 992px) {
	
	.hide_large {
		display:none!important
	}
	   
	div#slides_small {
		display: none;
	}
	
	img#slide_small {
		display: none;
	}
	
	div#slides {
		display: none;
	}	   
	   
	.pad_1 {
	  padding-top:50px;
  }
  
  	.pad_2 {
	  padding-top: 65px;
  } 
   
    .pad_4 {
	  height: 65px;
	  white-space:normal;
  }
  
	.about_padding {
	  padding: 48px 8px 16px 8px;
  }
  
	.slideshow-container {
  width: 75%;
}

.anime_margin_top {  /* @media only screen and (min-width: 769px) */
	margin-top: 6%; 
}

	 .overlay {
     padding: 2% 5%;
	 font-size: 1.25vw; /* @media only screen and (min-width: 769px) */
}

.container_text {
	display: block;
	font-size: 1.25vw;
    text-align: center;
}

/* 12 Dec. 2019 */

div#Rendering_Gallery::before {
   content: "";
   display: block;
   height: 60px;
   margin-top: -70px;
}

/* ------------------------------------------------------------------------------------ */
/* Dropdown menu stuff for large screen. I moved it here because some of the emulators  */
/* for small devices seemed to be using these settings on small screens when I put them */
/* at the top of the file before any of the media setting                               */
/* ------------------------------------------------------------------------------------ */

/*Hover state for top level links*/
li:hover a {
    background: rgb(205,205,205);
 	color: rgb(255,0,0);
}

/*Style for dropdown menu */
li:hover ul a {
    background: rgb(238,238,238);
    color: rgb(0,0,0);
    /* height: 40px; */ /*Feb 18 */
    /* line-height: 40px; */ /*Feb 18 */
	/* text-align: right; */
	text-align: center;
    font-size: 90%;
    letter-spacing: 0px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: rgb(170,170,170);
	color: rgb(255,0,0);  
	text-align: center;
    font-size: 90%;
    letter-spacing: 0px;
}

/*Hide dropdown links until they are needed***********/
li ul {
    display: none;
}

Prevent text wrapping
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
    padding: 0;
	text-align: center; /* 15 Feb. */
}

/*Display the dropdown on hover */
/*See page 67 in CSS: the Missing Manual for discussion of "+,"  which refers to adjacent sibling*/

ul li a:hover + .hidden, .hidden:hover {
/* ul li a:hover + .2nd-menu-hidden, .2nd-menu-hidden:hover { */
    display: block;
}

ul li a:hover + .second-menu-1, .second-menu-1:hover {
    display: block;
}
 	  
}

/****************************************************************************/

@media only screen and (min-width: 1280px) {
	
	.overlay {
       font-size: 1.1vw;
	   padding: 2% 5%;
}

.container_text {
	padding-top: 5px;
	height: 100%;
	width: 100%;
	font-size: 1.1vw;
    line-height: 1.5;
    display: inline-block;

}
	
}