@charset "utf-8";
@import url("file:///C|/Users/cindy/Creative Cloud Files/Websites/Reynolds Realty/css/450max.css");
/* CSS Document */

html,  body {
    margin-top: auto;
    margin-left: auto;
    margin-bottom: auto;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 800px;
    margin-right: auto;
}
.nav {
     font-family: federo; 
	font-style: normal; 
	font-weight: 400; 
	color: white;
	text-decoration-line: none;
	
}


 .header {
    background-color: darkred;
    font-style: normal;
    font-weight: 600;
	width: 100%;
	align: right;
	color:white;
}

	.icontainer {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    height: 365;
}

.footer {
    width: 100% !important;
    background-color: darkred;
    padding: 15px 15px;
    align-text: center;
    align-text: right;
    align-content: center;
}
.footer>p{
  margin-top: calc(20px - 0.5em);
  height: auto;
color: #FFFFFF;
	text-align: center;
}

.byLine{
	 width: 100% !important;
    background-color: white;
    padding: 15px 15px;
    align-text: center;
    align-text: right;
    align-content: center;
}
.byLine>p, .byLine>a{
	 margin-top: calc(20px - 0.5em);
  height: auto;
	text-align: center;
	font-size: 12px;
}

#mainContent {
    max-width: 775px;
    margin-top: 0%;
    padding-right: 5%;
    padding-left: 5%;
    margin-bottom: 0%
}
#wrapper {max-width: 900; margin: 0 auto}
#bannerImage{
	align: center;
	padding-bottom: 10px;
}
.textBox {
    padding-right: 15px;
    padding-left: 15px;
    font-weight: bolder;
}
      	
 .quotes {
	font-size: 24px;
	padding-right: 10px;
	padding-left: 10px;
}       	

/* More Button */
		button, button:visited, button:enabled {border: 1px;
		background-color: white;
		 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
		 
		} 
		#more1, #more2, #more3, #more4, #moreRR, #moreRS, #moreMS, #moreMC, #moreRTB, #moreRTS, #moreRec,	#moreBR {display: none;}
		
		#myBtn1,#myBtn2, #myBtn3, #myBtn4, #myBtnRR, #myBtnRS, #myBtnMS, #myBtnRTB, #myBtnRTS, #myBtnRec  
			.button, .button:active, .button::before {
				display: inline;
				border: none;
				background-color: white;
				text-transform: uppercase;
	    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2), 0 4px 6px 0 rgba(0,0,0,0.19);
		
		}


		p {font-size: 18px;
		text-align: left}
		h11 {
    font-size: xx-large;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
			color: white;
		}			
		h12 {
    font-size: 20px;
    text-transform: capitalize;
    color: #3C3C3E;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
		h13 {
    font-size: 18px;
    text-transform: uppercase;
    color: #4E4D4F;
    font-weight: 800;
		}	
		h14 {
    font-size: 22px;
    color: #8E0A0C;
    font-style: normal;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif" ;
    font-weight: 400 
		}	
	h15 {
   		 font-size: x-large;
   		 text-transform: none;
    	font-style: normal;
    	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		color:white;
}
a>h14 {
    color: #FFFFFF;
    font-family: federo;
    font-style: normal;
    font-weight: 400;
}
	  
.responsive-iframe {
  position: absolute;
  top: 0;
  left: -10;
  bottom: 0;
  right: 0;
  width: 100%;
  height:50% ;
  border: none;
}
		.aSide{
  top: 0;
  left: 70%;}	
    [style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
	
			
* {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

.ExternalClass {
	width: 100%;
}
div[style*="margin: 16px 0"] {
	margin: 0 !important;
}

table,  td {
	mso-table-lspace: 0pt !important;
	mso-table-rspace: 0pt !important;
}

table, td, tr {
	border-spacing: 0 !important;
	border-collapse: collapse !important;
	table-layout: fixed !important;
	margin: 0 auto !important;
	vertical-align: top !important;
}
table table table {
    table-layout: none;
    background-color: light green;
}

img {
	-ms-interpolation-mode: bicubic;
}

.yshortcuts a {
	border-bottom: none !important;
}

a[x-apple-data-detectors] {
	color: inherit !important;
}
    
        /* What it does: Hover styles for buttons */
        .button-td,
        .button-a {
            transition: all 100ms ease-in;
			 background: #ffffff !important;
            border-color: #ffffff !important;
        }
        .button-td:hover, .button-
        .button-a:hover {
            background: #ffffff !important;
            border-color: #ffffff !important;
        }

        /* Media Queries */
        @media screen and (max-width: 600px) {
			.mainContent {
                width: 100% !important;
				text-align: left;
		
            }
       

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid,
            .fluid-centered {
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            /* And center justify these ones. */
            .fluid-centered {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: right!important;
            }
        
            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }
              
        }
	
	
	/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}


	
	
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0%;
  top: 0;
  width: 550px; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #F30A19;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #000000;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}