/* changing the header tags color for the home page modules*/
.overlay h1 {
    color: #ffffff;
    text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

.overlay h3 {
    color: #ffffff;
    text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

.overlay h6 {
    color: #ffffff;
    text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

/* change the primary link colors */
:root {
    --cassiopeia-color-primary: #8b308d;
    --cassiopeia-color-link: #99ffff;
    --cassiopeia-color-hover: #ccffff;

}

/* eliminating gradient and changing height on menu bar at top */
.container-header {
  background-color: #2E526B;
  background-image: none;
}

/* making text on main menu larger */
.container-header .mod-menu {
    color: #fff;
    font-size: x-large;
    font-variant-caps: titling-caps; 
    vertical-align: middle;
    padding: 8px 0px;
}

/* realigning to vertical center phone number in top bar - not working */
#mod-custom110.mod-custom.custom {
    vertical-align: middle;
}

/* changing background color for home page custom banner modules */
.container-banner .banner-overlay .overlay {
    align-items: center;
    background-color: rgb(100,100,100,.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 1em;
    text-align: center;
}

/* changing the height for the home page banner modules */
.container-banner .banner-overlay {
  height: max(340px, 50vh); /* by default is 50vh in Cassiopeia */

 /* This piece of css above is limiting the height of the container 'Max' sets the max height.	/*
/* Overwriting some css elements below to show the difference. */
 
}

/* changing background color for home page custom banner module 02 with the background photo of the house - trying to change this module ONLY - the above rules apply to ALL custom banner modules - doesnt work  */
.mod-custom custom banner-overlay #mod-custom115 {
    background-color: rgba(0,0,0,.5);
}

/* creating circular images for tenant and owner login within the custom banner test module */
/* this one applied directly to a div in the module editor - not using at this time */
.img-circular {
    background-image: url("http://www.warhorserealty.com/dev/images/category_icon_clipboard.jpg");
    border-radius: 50%;
    width: 280px;
    height: 280px;
}

/*this one applied to a div in the module editor - text should be centered within the circle but is not - not using at this time */
.testcircle {
  background: #99cccc;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  text-align: center;
}

/* using button code to get a circle that will change on moouseover */
.d{
background-color: #fff;
padding:15px 20px;
text-decoration:none;
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
border:1px solid #2e526b;
color: #2e526b;
align-items: center;
text-align: center;
}
.d:hover{
background-color:#2e526b;
border:1px solid #fff;
color:white;
}
.d:visited{
  color: #2e526b;
}
.d:visited:hover{
  color: #fff;
}
  

/* making side by side divs for the circle links in the dots module - cant get circle links centered within the float-child div - text is centered but not the circle links created with the button code above*/
.float-container {
    border: none;
    padding: 20px;
    width: 70%;
    text-align: center;
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
    border: none;
    text-align: center;    
}  

/* box container for tenant instructions below circular login */
.tenantnote {
  width: 80%;
  background-color: #646464;
  padding: 10px;
  margin: 10px;
  font-size: large;
  border-radius: 18px;
}

/* changing background color of footer module */
.footer {
    background-color: #2e526b;
    background-image: none;
    color: #fff;
    margin-top: 1em;
}


/* NEW CHANGES 09/10/2022 - Steven */

/* Parent div of circle needs to be a flex container to center  */

#mod-custom111 > div > div.float-container > div:nth-child(1) > div {
  display: flex;
  justify-content: center;
}

#mod-custom111 > div > div.float-container > div:nth-child(2) > div {
  display: flex;
  justify-content: center;
}

/* Parent div to Phone number to be centered vertically needs to be a flexbox */
#mod-custom110 {
  display: flex;
  align-items: center;
}

/* Setting a min-width on the iframe so that your module width never goes under its original size. */

#mod-custom116 > div > p > iframe {
	min-width: 66vw;
}


/* overwriting height on first two sections */
#mod-custom111 {
  height: 100%;
}

#mod-custom115 {
  height: max(400px,50vh);
}

/* changing bottom section with third party code module */
#mod-custom116 > div {
  padding-top: 50px;
}

#mod-custom116 {
  height: max(380px, 50vh);
}

@media only screen and (max-width : 991.5px) {
  #mod-custom110 {
    display: none;
  }
}