html {
   font-family: Segoe UI, Sans-serif;
   font-size: 12px;
   word-wrap: break-word;
   color: #cccccc;
   overflow: no-scroll;
}

* {
   box-sizing: border-box;
}

body {
   background: #131517;
   margin: 0;
   margin-height: 0;
   margin-width: 0;
   padding: 0;
}

body.design {
   background: #333537;
   margin: 0;
   margin-height: 0;
   margin-width: 0;
   padding: 0;
}

#header {
   margin: -20px 0px 0px 0px;
   padding: 32px 40px 20px 40px; 
   background: #000000;
}

#section {
   margin: 0px 20px 40px 40px;
}

.footer {
   position: bottom;
   left: 0;
   bottom: 0;
   padding: 20px 0px 40px 40px;
   text-align: left;	 	 
}

.cf:before, .cf:after {
   content: " ";
   display: table;
}

.cf:after {
   clear: both;
}

[class*="col-"] {
   float: left;
   padding: 0;
}

.row {
   width: 100%;
   margin: 0;
   max-width: none;
   padding: 0;
}


.columns {
   padding-left: 0;
   padding-right: 0;
   float: left;
}

.col-12 {
   width: 100%;
}

.col-11 {
   width: 91.666666666667%;
}

.col-10 {
   width: 83.333333333333%;
}

.col-9 {
   width: 75%;
}

.col-8 {
   width: 66.66666%;
}

.col-7 {
   width: 58.333333333333%;
}

.col-6 {
   width: 50%;
}

.col-5 {
   width: 41.666666666667%;
}

.col-4 {
   width: 33%;
}

.col-3 {
   width: 25%;
}

.col-2 {
   width: 16.666666666667%; 
}

.col-1 {
   width: 8.333333333333%; 
}

h1, h2, h3, h4, h5, h6, p {
   margin: 0;
   font-weight: 150;
}

h1 {
   font-size: 4.0rem;
   line-height: 5.2rem;
   padding: 24px 0px 8px 0px;
}

h2 {
   font-size: 2.4rem;
   line-height: 3.2rem;
}

h3 {
   font-size: 2.0rem;
   line-height: 2.8rem;
}

h4 {
   font-size: 1.6rem;
   line-height: 2.4rem;
}

h5 {
   font-size: 1.4rem;
   line-height: 2.2rem;
}

h6 {
   font-size: 1.1rem;
   line-height: 1.8rem;
   color: #9999999;
   padding-bottom: 1.2rem;
}

p {
   font-size: 1.6rem;
   line-height: 2.8rem;
   padding: 8px 0px 8px 0px;
}

a:link, a:visited {
   color: #bdaa63; 
   text-decoration: none;
   border: 0;
}

a:hover, a:active {
   color: #f6d643; 
   text-decoration: none;
}

a.available {
   color: #009B88;
}

a.sold {
   color: #F04242;
}

div.tile {
   float: left;
   margin: 40px;
   border: 0px;
}

div.tile a:hover {
   text-decoration: none;
}

div.titleBlock {
   margin: 0;
   padding: 0px 0px 0px 0px;
   border: 0;
   overflow: hidden;
}

div.captionBlockShort {
   margin: 0;
   padding: 0;
   border: 0;
   height: 150px;
   overflow: hidden;
}

div.captionBlockTall {
   margin: 0;
   padding: 0;
   border: 0;
   height: 200px;
   overflow: hidden;
}

div.img {
    float: left;
    vertical-align: top;
    text-align: center;
    display: table-cell;
    padding: 20px;
    max-width 448px;
}

div.parent { 
    border: 0;
    border-radius: 4px;
    display: table; 
    padding: 0px; 
    width: 100%;
    background: #000000;
    max-width: 1096px;
    margin: 40px;
}

div.text { 
    vertical-align: top;
    text-align: left;
    display: table-cell;  
    padding: 16px 28px 16px 20px;
    max;
    max-width: 648px;
}

div.img img { 
    height: auto;
    max-width: 400px; 
}

img {
   width: 100%;
   height: 100%;
   border: 0;
}

.icon {
   width: 24px;
   height: 24px;
   border: 0;
   margin: 0px -20px -2px 0px;
}

ul li { 
   font-size: 2.4rem;
   font-weight: 100;
   line-height: 3.2rem;
   display: inline;
   text-decoration: none;
   padding: 0px 40px 0px 0px;
}

li#doodImHere {
   font-color: #ffffff;
}

@media only screen and (max-width: 1580px) {

.col-4 {
   width: 50%;
}

.col-8 {
   width: 75%;
}

#section {
   margin: 0px 40px 40px 40px;
}

div.titleBlock {
   padding: 0px 0px 0px 0px;
}

}

@media only screen and (max-width: 1024px) {

html {
   font-size: 12px;
}

#header {
   margin: -20px 0px 0px 0px;
   padding: 20px 32px 8px 0px; 
   background: #000000;
}

#section {
   margin: 0px 20px 20px 20px;
}

.footer {
   padding: 20px 0px 40px 20px;	 	 
}

.col-4 {
   width: 50%;
}

.col-8 {
   width: 80%;
}

h1, h2, h3, h4, h5, h6, p {
     font-size: 1.6rem;
margin: 0;
   font-weight: 100;
}

h1 {
   font-size: 2.8rem;
   line-height: 4.0rem;
   padding: 16px 0px 16px 0px;
}

h2 {
   font-size: 2.0rem;
   line-height: 3.2rem;
}

h3 {
   font-size: 1.6rem;
   line-height: 2.8rem;
}

h4 {
   font-size: 1.4rem;
   line-height: 2.4rem;
}

h5, p {
   font-size: 1.2rem;
   line-height: 2.2rem;
}

h6 {
   font-size: 1.0rem;
   line-height: 1.8rem;
}

div.tile {
   float: left;
   margin: 20px;
   border: 0px;
}

div.titleBlock {
   padding: 0px 0px 0px 0px;
}

}

@media only screen and (max-width: 768px) {

html {
   font-size: 12px;
}

.col-4 {
   width: 100%;
}

.col-8 {
   width: 100%;
}

#header {
   margin: -20px 0px 0px -40px;
   padding: 24px 16px 8px 20px; 
   background: #000000;
}

#section {
   margin: -10px 0px 0px 0px;
}

div.tile {
   float: left;
   margin: 20px;
   border: 0px;
}

div.titleBlock {
   padding: 0px;
}

div.captionBlockShort {
   height: 100px;
}

div.captionBlockTall {
   height: 150px;
}

ul {
   margin: 0;
}

ul li { 
   font-size: 1.4rem;
   font-weight: 150;
   line-height: 2.8 rem;
   display: inline;
   text-decoration: none;
   padding: 0px 12px 0px 0px;
}

.icon {
   width: 16px;
   height: 16px;
   border: 0;
   margin: 0px 4px -1px 0px;
}

h1 {
   font-size: 2.0rem;
   line-height: 2.8rem;
   padding: 16px 0px 16px 0px;
}

}