/*
Theme Name: Chicago School Apartments
Author URI: http://toad-design.com
*/

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td {
margin:0px; padding:0px; border:0px; outline:0px; font-style:inherit; vertical-align:baseline
}

*, *:before, *:after {
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box
}

img {
max-width:100%; height:auto
}

blockquote {
quotes:none
}

blockquote:before, blockquote:after {
content: ''; content:none
}

del {
text-decoration:line-through
}

sup,
sub { 
vertical-align: baseline;
vertical-align: bottom;
position: relative;
}

sup {
bottom:1ex 
}

sub {
top:.5ex
}

em {
font-style:italic
}

ol, ul {
list-style:none
}

a:link, a:active, a:visited {
text-decoration:underline; color:#000000;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out
}

a:hover {
text-decoration:none; color:#555555;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out
}

a img {
border:none
}

p {
margin:0px; padding-top:5px; padding-bottom:5px
}

h1, h2, h3, h4, h5 {
padding:0px; margin:0px
}

.clear {
clear:both
}

.center {
text-align:center
}

html, body {height:100%; padding:0; margin:0}

body {
font-family:'Tinos', serif; background:#f6f3ec
}

/* Header */
	
.top {
width:100%; height:auto; min-height:70px; background:#756871; position:relative; z-index:2000
}	

#title {
width:100%; max-width:700px; height:auto; min-height:70px; padding-top:15px; padding-bottom:15px; display:block; margin:auto; background:#f6f3ec
}

#title h1 {
font-size:35px; line-height:40px; color:#756871; text-align:center; text-transform:uppercase
}

#title h2, #title a {
font-size:24px; line-height:29px; color:#756871; text-align:center; text-transform:uppercase; text-decoration:none
}

/* Header */

#header-top {
width:100%; background:#686560; border-top:solid 5px #d6b08b; border-bottom:solid 5px #d6b08b; margin-top:50px; position:relative; z-index:2001
}

.header-top-body {
width:100%; max-width:1400px; height:auto; min-height:50px; margin:auto
}

.header-top-right {
width: calc(100% - 115px); float:right
}

#logo {
width:115px; height:215px; position:absolute; top:5px
}

#logo img {
width:100%; height:auto
}

.header-navigation {
width:calc(100% - 180px); padding-top:7px; padding-bottom:7px; float:left
}

#social-media {
width:95px; float:right; padding-top:8px; padding-bottom:3px; padding-left:5px; padding-right:5px
}

#social-media img {
width:35px; height:35px; margin-left:2px; margin-right:2px
}

#header-bottom {
width:100%; background:rgba(255, 255, 255, 0.8); position:relative; z-index:2000
}

.header-bottom-body {
width:100%; max-width:1400px; height:auto; min-height:50px; margin:auto
}

#header-bottom-name {
width: calc(100% - 180px); padding-top:7px; padding-bottom:7px; padding-left:120px; float:left
}

#header-bottom-name h2 {
font-size:30px; line-height:35px; color:#686560; padding:0; padding-left:5px; text-transform:uppercase
}

#header-bottom-phone {
width:180px; float:right; padding-top:8px; padding-bottom:3px; padding-left:5px; padding-right:5px
}

#header-bottom-phone a {
font-size:30px; line-height:35px; color:#686560; padding:0; text-decoration:none
}

/* Navigation */

#navigation {
width:100%; height:auto; padding-top:10px; padding-bottom:8px
}

#navigation ul {
width:100%; max-width:1050px; height:auto; display:block; margin:auto; list-style:none; position:relative; text-align:center; font-size:0;
}
 
#navigation li {
display:inline-block; text-align:center; position:relative; top:0; padding:1px
}

#navigation span {
min-width:300px; display:block; border:solid 1px #5e5c57; color:#ffffff; text-decoration:none; text-align:center; font-size:24px; text-shadow:1px 1px #333333; font-weight:800; padding:15px; margin-right:1px; margin-bottom:1px; border-radius:10px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cba880+1,ddbf8d+50,cba880+100 */
background: #cba880; /* Old browsers */
background: -moz-linear-gradient(top, #cba880 1%, #ddbf8d 50%, #cba880 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cba880 1%,#ddbf8d 50%,#cba880 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cba880 1%,#ddbf8d 50%,#cba880 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cba880', endColorstr='#cba880',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow:0 4px 4px -2px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 4px 4px -2px rgba(0, 0, 0, 0.7);
box-shadow:0 4px 4px -2px rgba(0, 0, 0, 0.7)
}

a.button:hover {
background:#cba880
}

/* Apartments */

.boxes-wrapper {
width:100%; max-width:1400px; padding-top:18%; padding-bottom:20px; height:auto; margin:auto; text-align:center; position:relative; 
display:table; border-spacing:10px
}

.box {
width:33%; min-height:370px; height:auto; padding-bottom:10px; margin-bottom:4px; text-align:center; background:#ffffff; 
border-bottom:solid 5px #edab6e; display:table-cell; position:relative; vertical-align:bottom; border-radius:10px;
-webkit-box-shadow: 5px 5px 4px 0px rgba(0,0,0,0.33);
-moz-box-shadow: 5px 5px 4px 0px rgba(0,0,0,0.33);
box-shadow: 5px 5px 4px 0px rgba(0,0,0,0.33)
}

.box-header {
position:absolute; top:0
}

.box-content {
width:90%; text-align:left; margin:auto; padding-bottom:20px; padding-top:20px
}

.box-footer {
padding-left:10px; padding-right:10px; background:#ffffff; z-index:1001; position:relative
}

.box img {
width:100%; height:auto; border:solid 10px #edab6e; border-radius:10px;
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out
}

.box img:hover {
-webkit-filter:sepia(100%); /* Safari */
filter:sepia(100%);
transform:scale(1.1);
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out
} 

.box h1, a.box-title {
width:100%; display:block; background-color:#494949; 
padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;
font-size:26px; line-height:28px; font-weight:800; color:#ffffff; text-align:center; text-decoration:none
}

.box p {
font-size:16px; line-height:20px; color:#494949
}

a.read-more {
width:100%; display:block; padding:8px; background:#494949; margin-top:5px; border-radius:5px;
font-size:18px; line-height:20px; color:#ffffff; font-weight:500; text-align:center; text-decoration:none; margin-bottom:1px
}

/* Shutter Out Horizontal */
a.read-more {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
background: #494949;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}

a.read-more:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #885b56;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}

a.read-more:hover, a.read-more:focus, a.read-more:active {
color: white;
}

a.read-more:hover:before, a.read-more:focus:before, a.read-more:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
	
.box-image {
width:100%; padding:15px; padding-bottom:10px
}

.small {
font-size:18px; font-weight:500
}

.map-responsive {
overflow:hidden; padding-bottom:70%; position:relative; height:0; margin-top:20px; border-radius:5px; border:solid 5px #edab6e
}

.map-responsive iframe {
left:0; top:0; height:100%; width:100%; position:absolute
}

.box .btn-apt {
box-shadow: 0px 10px 14px -7px #3e7327;
background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
background:#ee4b2b;
border-radius:4px;
border:1px solid #fafafa;
display:inline-block;
color:#ffffff;
font-size:20px;
font-weight:500;
padding:6px 12px;
text-decoration:none;
text-shadow:0px 1px 0px #5b8a3c;	
}

.box .btn-apt:hover {
background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
background:#aa4a44
}

/* Content */

a.btn-svigos {
max-width:300px; display:block; border:solid 1px #5e5c57; color:#ffffff; text-decoration:none; text-align:center; font-size:33px; text-shadow:1px 1px #333333;
padding:15px; margin:auto; margin-top:20px; margin-bottom:30px; border-radius:10px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cba880+1,ddbf8d+50,cba880+100 */
background: #cba880; /* Old browsers */
background: -moz-linear-gradient(top, #cba880 1%, #ddbf8d 50%, #cba880 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cba880 1%,#ddbf8d 50%,#cba880 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cba880 1%,#ddbf8d 50%,#cba880 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cba880', endColorstr='#cba880',GradientType=0 ); /* IE6-9 */
}

a.btn-svigos:hover {
background:#cba880
}

.content-body {
width:100%; max-width:1350px; margin:auto
}

#content {
width:100%; margin:auto; padding-top:30px; padding-bottom:30px; padding-left:50px; padding-right:50px; font-size:16px; font-weight:500; color:#ffffff;
position:relative; z-index:2000; margin-top:50px;
 background:url(../images/content-background.jpg) no-repeat top center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
border-top:solid 1px #ffffff; border-bottom:solid 1px #ffffff
}

#content p {
line-height:28px
}

#content h1 {
font-size:36px; font-weight:800; padding-top:10px; padding-bottom:10px; text-align:center
}

#content h2 {
font-size:26px; font-weight:800; padding-top:10px; padding-bottom:10px
}

#content h3 {
font-size:23px; font-weight:800; padding-top:10px; padding-bottom:10px
}

#content h4, #content h5 {
font-size:20px; font-weight:800; padding-top:10px; padding-bottom:10px
}

#content ul {
margin-top:20px; margin-bottom:20px; margin-left:20px
}

#content ul li {
font-size:16px; line-height:25px; margin:0px; list-style:disc; list-style-position:inside
}

#content table {
empty-cells:show; border-collapse:collapse; margin-bottom:5px; margin-left:auto; margin-right:auto; width:100%
}

#content table {
empty-cells:show; border-collapse:collapse; margin-left:auto; margin-right:auto; width:100%
}

#content td {
padding:3px; text-align:center; border:0px
}

#content th {
padding-top:5px; padding-bottom:5px; padding-left:10px
}
	
/* Footer */

#footer {
width:100%; padding:20px; background:#2a231d; border-top:solid 2px #ffffff; position:relative; z-index:2000
}

#footer p {
font-size:16px; line-height:20px; color:#8a5b30; text-decoration:none
}

#footer h2, #footer a {
font-size:24px; line-height:30px; color:#ffffff; padding-bottom:15px; text-decoration:none
}

#footer .copyright {
font-size:12px; line-height:20px; color:#8a5b30
}

#footer ul {
margin:0; padding:0
}

#footer li {
font-size:16px; line-height:20px; color:#8a5b30
}

.footer-body {
width:100%; max-width:1400px; margin:auto; position:relative
}

.footer-box {
width:33%; padding:20px; display:inline-block; vertical-align:top
} 

#footer .copy {
font-size:14px; text-align:center
}

#footer .copy a {
font-size:14px; font-weight:500; color:#a1a1a1
}
	
@media only screen and (max-width: 815px) {
.box-header {
position:relative
}
	
.box, .footer-box {
width:100%; display:block
}

.boxes-wrapper {
display:block; border-spacing:0px
}
	
.box {
width:90%; max-width:inherit; display:block; margin:auto; margin-bottom:20px
}
	
.box-content {
padding-bottom:10px
}

#header-top {
margin-top:0px; padding-top:5px
}

.header-top-right {
width:100%; float:none
}

#logo {
width:115px; height:215px; position:relative; top:0px; display:block; margin:auto; padding-top:10px
}

#header-bottom-name {
width:70%; padding-left:0px; float:left
}

#header-bottom-name h2 {
padding-left:5px; padding-right:5px
}
	
#header-bottom-phone {
width:30%; float:right; text-align:right
}
	
.header-navigation {
width:100%; float:none
}
}

@media only screen and (max-width: 600px) {
#header-bottom-name {
width:100%; float:none; text-align:center
}

#header-bottom-phone {
width:100%; float:none; text-align:center; padding-bottom:10px; padding-top:0px
}
}