/******************************************************************
Theme Name: Aspen Square
Theme URI: 
Author: Forest White
Author URI: http://www.forestwhite.com
Description: Custom responsive theme for Aspen Square.
Text Domain: aspen-square
Tags: full-width-template
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 1.0
*****************************************************************

Colors :

     orange = #d12200
       grey = #333

*/


/* WordPress Fixes  */

.wp-caption,
.screen-reader-text,
.wp-caption-text,
.sticky,
.gallery-caption,
.bypostauthor {}

#wp-admin-bar-wp-logo,
#wp-admin-bar-customize,
#wp-admin-bar-comments,
#wp-admin-bar-new-content,
#wp-admin-bar-search {
    display: none!important;
}


/* OVERALL WIDTH */

.wrap {
    width: 100%!important;
    max-width: 100%!important;
}


/* GLOBAL */

html,
body {
    width: 100%;
}

body {
    background-color: #fff!important;
    color: #555;
    -moz-osx-font-smoothing: grayscale;
}

.home #inner-content {
    margin-top: 0px;
}

.hentry {
    border-radius: 0;
    border: none!important;
    margin: 0 15px;
}

h1,
h2,
h3,
h4 {
    font-family: 'Droid Serif', cursive !important;
    color: #333;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #666666;
    text-decoration: none!important;
    cursor: pointer;
}

h1 {
    font-size: 34px!important;
    font-weight: 400!important;
}

h2 {
    font-size: 36px!important;
    margin-top: 0!important;
    line-height: 1!important;
}

h3 {
    font-size: 24px!important;
    margin-bottom: 0;
}

h4 {
    font-size: 23px!important;
    font-weight: 300!important;
    font-style: italic;
}

h5 {
    font-size: 24px!important;
    font-weight: normal!important;
    letter-spacing: 1px!important;
    text-transform: capitalize!important;
    margin-bottom: 0;
}

input[type="submit"] {
    background: #ce3700;
    color: #fff;
    padding: 15px 30px 13px 30px!important;
    font-size: 18px;
    border: 0;
    font-weight: 700;
    display: block;
    text-transform: uppercase;
}

img {
    max-width: 100%;
}

hr {
    border-top: 1px dashed #ccc!important;
    border-bottom: none!important;
    margin: 30px 0;
}

p {
    font-size: 16px;
    line-height: 1.5;
}


/* HEADER */

#mobile-nav {
    display: none;
}

.page-id-10 a#spaces-banner {
    display: none!Important;
}

a#spaces-banner {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 340px;
    height: auto;
    z-index: 10001;
}

a#spaces-banner img {
    width: 100%;
    height: auto;
}

#header {
    background: #444 url('images/background-header.jpg') right top !important;
    background-size: cover;
    width: 30%;
    height: 101%;
    top: 0;
    bottom: -2px;
    left: 0;
    z-index: 10000;
    border-bottom: 1px solid #eee;
    position: fixed;
    text-align: center;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.5);
}

#inner-header {
    padding: 25px 0;
    transition: all 0.25s ease!important;
    -moz-transition: all 0.25s ease!important;
    -webkit-transition: all 0.25s ease!important;
}

#logo {
    background-size: 100% auto;
    width: 100%;
    max-width: 200px;
    margin: 50px 0!important;
    display: inline-block;
    transition: all 0.25s ease!important;
    -moz-transition: all 0.25s ease!important;
    -webkit-transition: all 0.25s ease!important;
    vertical-align: middle;
    line-height: 1.3;
    color: #efefef;
    font-size: 23px;
    font-family: 'Droid Serif';
    font-weight: 400;
    letter-spacing: -.25px;
}

#logo span {
    font-size: 20px;
    width: 100%;
    display: inline-block;
}

#logo img {
    margin-bottom: 10px;
}

#logo-mobile img {
    height: 60px;
    width: auto;
    display: inline-block;
    transition: all 0.25s ease!important;
    -moz-transition: all 0.25s ease!important;
    -webkit-transition: all 0.25s ease!important;
    margin: 10px 0 0 20px;
}

#header-right {
    width: 50%;
    float: right;
    text-align: right;
    display: block;
    margin: 20px 20px 0 0;
}

#header-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    padding-bottom: 15px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

#phone {
    display: inline-block;
    width: 80%;
    color: #fff;
    font-family: 'Droid Serif';
    margin: 30px 0;
}

#phone-mobile {
    display: block;
    width: 40px;
    margin: 20px 0 0 0;
    position: absolute;
    right: 80px;
    top: 0
}

#phone img {
    width: 40px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin: -3px 10px 0 0;
}

#phone span {
    display: inline-block;
    font-size: 34px;
    vertical-align: middle;
    letter-spacing: -1px;
}

#phone fw {
    width: 100%;
    display: inline-block;
    font-size: 30px;
}

#copyright {
    opacity: 0.5;
    font-size: 11px;
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

#copyright a {
    color: #666
}

#inner-footer {
    padding: 0 20px 0 10px;
}


/* Navigation */

#nav {
    width: 75%;
    display: inline-block;
    float: none;
    margin: 50px 0;
    background: rgba(255, 255, 255, 0.15);
    padding: 20px 0;
}

#nav li a {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #fff!important;
    font-size: 28px;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    font-weight: 700;
}

#nav li a:hover {
    color: #ce3700!important;
}

ul.nav {
    float: none;
    margin: 0 auto;
    width: 190px;
}

.nav li {
    text-align: left;
    float: none!important;
    width: 100%;
}

.nav li:last-child {
    border-right: none;
}

.nav li a {
    line-height: 46px;
    padding: 0 !important;
}

.nav li ul {
    width: 200%;
}

.nav li ul li a {
    line-height: 1.5!important;
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}

.sub-menu {
    background: #fff;
    padding-bottom: 15px;
    padding-top: 10px;
    padding-left: 10px;
    margin-left: -12px;
}

.sub-menu li a {
    text-align: left!important;
}


/* BODY */

#container {
    margin-left: 30%;
    overflow-x: hidden;
}

#content {
    margin-top: 0!important;
}

#inner-content {
    margin: 0 auto 30px auto!important;
    border: 0;
    background: none;
    padding: 0;
    max-width: 1000px;
}

.page #main {
    padding: 60px 0 60px 0;
    text-align: center;
}

.home #main {
    width: 100%;
    padding: 0 7% 30px 7%;
    display: inline-block;
}

#main p {}

.page-template-page-full #main,
.home #main {
    max-width: 100%;
    text-align: center!important;
}

.page .entry-content {
    padding: 0!important;
}

.page .entry-content p {
    line-height: 22px;
    margin-bottom: 15px;
    font-size: 13px;
}


/* HOMEPAGE */

.metaslider .flexslider {
    margin-bottom: 0!important;
}


/* Metaslider Buttons */

.flex-direction-nav li a {
    max-width: 30px!important;
    height: 50px!important;
    margin: -20px 0 0;
    background: url(images/slider-arrows.png) no-repeat 0 0!important;
    background-size: 60px 100%!important;
    opacity: 0.0!important;
    overflow: hidden;
    padding: 0;
}

.flex-direction-nav li a:hover {
    opacity: 0.7!Important;
}

.flex-direction-nav .flex-disabled {
    cursor: default;
    pointer-events: none;
}

.flex-direction-nav .flex-prev,
.flex-direction-nav .flex-prev .flex-disabled {
    left: 20px!important;
}

.flex-direction-nav .flex-next,
.flex-direction-nav .flex-next .flex-disabled {
    background-position: right!important;
    right: 20px!important;
}

.flex-control-nav {
    line-height: 11px;
}

.home ol.flex-control-nav {
    text-align: center;
    margin: 15px 0;
    width: 100%;
    z-index: 100;
    position: absolute;
    bottom: 0px;
    display: block;
}

.home .flex-control-paging li a.flex-active {
    background: rgba(255, 255, 255, 0.9)!important;
}

.home .flex-control-paging li a {
    background: rgba(255, 255, 255, 0.5)!important;
}

a.home-links {
    width: 33%;
    display: inline-block;
    margin: 20px 0;
}

a.home-links img {
    max-width: 80%;
}

.home #main {
    width: 100%;
}

.home #main,
.page-template-page-full #main {
    width: 100%;
}

.home h1 {
    font-size: 46px!important;
    line-height: 1.2!important;
}

#home-text p {
    font-size: 13px;
    line-height: 22px;
    max-width: 80%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#traffic {
    padding: 50px 8%;
    text-align: center;
}

#traffic img {
    margin-right: 5%;
    width: 44%;
    max-width: 400px;
    display: inline-block;
    vertical-align: middle;
}

#traffic div {
    width: 49%;
    display: inline-block;
    vertical-align: middle;
}

#traffic a {
    font-size: 14px;
    line-height: 1.25;
    display: block
}

#traffic a img {
    float: right;
    max-width: 100px;
    padding-top: 5px
}

#floor-plan-box,
#photos-box {
    padding: 50px 0;
    text-align: center;
}

ul.home-list {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    text-align: left;
    padding: 40px 5% 0 5%;
    font-weight: 400;
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    font-family: 'Droid Serif', cursive !important;
}
ul.home-list li {
    list-style-type: disc;
    padding: 10px 20px;
    display: inline-block;
    background: url('images/dot.svg') left top 15px/9px no-repeat;
}

/* Photos */

.gallery-item {
    width: 33.33%;
    display: inline-block;
    padding: 0 10px;
    color: #333;
    font-size: 12px;
    transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    margin-bottom: 0!important;
}

.gallery-item:hover {
    opacity: 0.7;
}

.gallery-item img {
    width: 100%;
}

.page-id-47 #gallery-1 {
    margin-top: 60px!important;
}

#units-box{
    padding: 50px 0;
    text-align: center;
}
#units-box h2 {
    padding: 0 10%;
}

#contact-box {
    padding: 50px 6%;
    text-align: center;
}

#spaces-box {
    border-top: 10px solid #ce3700;
    border-right: 30px solid #ce3700;
    border-bottom: 30px solid #ce3700;
    border-left: 30px solid #ce3700;
    width: 100%;
    display: inline-block;
    padding: 30px 80px 0 80px;
    z-index: 1000;
    position: relative;
}

h2.spaces-h2,
#lower-box h2 {
    font-size: 50px!important;
    display: inline-block;
    background: #ce3700;
    color: #fff;
    line-height: 2!important;
    padding: 5px 0 0 0;
    width: 100%;
    margin: 30px 0 0 0!important;
    z-index: 1001;
    position: relative;
    font-family: 'Open Sans Condensed'!important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: -1px;
}

h2.spaces-h2 {
    margin: 30px 0 0 0!important;
}

.item-box {
    text-align: left;
    margin-bottom: 30px;
}

.item-box:last-child {
    border: none!important;
}

.item-thumb {
    width: 13%;
    margin-right: 2%;
    display: inline-block;
    vertical-align: middle;
}

.item-thumb img {
    width: 70px;
    height: auto;
}

.item-box-text {
    width: 80%;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid #ccc;
    background: #eee;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px;
}

.item-box-text p,
.item-box-text h3 {
    margin-top: 0;
}

.item-box-text p {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    margin-bottom: 0;
    font-size: 13px;
}

#floor-plan-box {}


/* CONTACT */

#contact-box {
    text-align: center;
    margin-bottom: 100px;
    padding: 0 10%;
}

#contact-box h2 {
    line-height: 1.2!important;
}

.page-id-95 h2 {
    margin-top: 50px!important;
}

.page-id-95 .wpcf7,
#contact-box .wpcf7 {
    width: 90%!Important;
    text-align: left;
    display: inline-block;
    margin-top: 60px;
}

.page-id-95 .wpcf7 input,
#contact-box .wpcf7 input {
    float: none!important;
    display: inline-block;
}

.page-id-95 .wpcf7 div,
#contact-box .wpcf7 div {
    text-transform: uppercase;
    float: left;
    letter-spacing: 1px;
    font-size: 12px;
}

.page-id-95 .wpcf7 .your-unit input,
#contact-box .wpcf7 .your-unit input {
    max-width: 60px;
    margin-left: 15px;
    margin-bottom: 0;
}

.page-id-95 .wpcf7 input[type="submit"],
#contact-box .wpcf7 input[type="submit"] {
    margin-top: 30px!important;
}


/****** RESPONSIVE ******/

@media only screen and (max-width: 1140px) {
    #phone span {
        font-size: 30px;
    }
    .home h1 {
        font-size: 40px!important;
    }
}

@media only screen and (max-width: 1060px) {
    #nav li a {
        font-size: 22px;
        line-height: 36px;
    }
    a#spaces-banner {
        width: 280px;
    }
    #logo {
        max-width: 170px;
        margin: 40px 0!important;
        font-size: 20px;
    }
    #logo span {
        font-size: 18px;
    }
    .metaslider {
        width: 120%!important;
        margin-left: -10%!important;
    }
    .page-id-21 #main {
        padding: 60px 0;
    }
    #phone span {
        font-size: 26px;
    }
}

@media only screen and (max-width: 800px) {
    #header,
    #nav {
        display: none;
    }
    #container {
        margin-left: 0;
        margin-top: 80px;
    }
}

@media only screen and (max-width: 560px) {
    
    .item-thumb {
        display: none;
    }
    .metaslider {
        width: 160%!important;
        margin-left: -30%!important;
    }
    #traffic {
        padding: 20px 2%;
    }
    #units-box {
        padding-top: 0!important;
    }
    #spaces-box {
        padding: 60px 20px 0 20px;
    }
    #traffic img,
    #traffic div {
        width: 90%;
        margin: 0;
    }
    #traffic img {
        margin-bottom: 20px;
    }
    .gallery-item {
        width: 90%;
    }
    .home h1 {
        font-size: 26px!important;
    }
    #floor-plan-box h2 {
        padding: 0 10%;
    }
    h2.spaces-h2,
    #lower-box h2 {
        line-height: 1!important;
        font-size: 40px!important;
        padding: 5px 20px;
    }
    .item-box-text {
        width: 100%;
    }
    
    .item-box-text p {
        column-count: 1;
        -moz-column-count: 1;
        -webkit-column-count: 1;
    }
    .page-id-95 .wpcf7 div,
    #contact-box .wpcf7 div {
        width: 90%!important;
        margin: 0 0 0 5%!important;
    }
    .page-id-95 .wpcf7,
    #contact-box .wpcf7 {
        width: 100%!Important;
    }
    ul.home-list {
        column-count: 1;
        -moz-column-count: 1;
        -webkit-column-count: 1;
    }
}


/* HEIGHT CSS */

@media only screen and (max-height: 810px) {
    #nav li a {
        font-size: 22px;
        line-height: 36px;
    }
    #phone {
        margin: 0 0 10px 0;
    }
}

@media only screen and (max-height: 900px) {
    #nav {
        margin: 0;
    }
}


/* SLIDEOUT NAV */

.navigation {
    list-style: none;
    background: #333;
    width: 300px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    margin: 0;
    display: none;
    padding-left: 30px;
}

.navigation li a {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #fff!important;
    font-size: 28px;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    font-weight: 700;
}

.navigation .sub-menu {
    background: none!important;
    margin: 0!important;
    padding: 0 0 20px 20px!important;
}

.navigation .sub-menu li a {
    line-height: 35px;
}

#mobileBody {
    min-width: 100%;
    min-height: 100%;
    background: #fff;
    position: relative;
    top: 0px;
    bottom: 100%;
    right: 0;
    z-index: 1;
    display: block;
}

.nav-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    display: none;
}

label[for="nav-trigger"] {
    position: fixed;
    display: none;
    top: 0;
    right: 0;
    z-index: 2000;
    width: 100%;
    max-width: 100%;
    height: 80px;
    cursor: pointer;
    padding: 0!important;
    background: url(images/menu.svg) right 20px center/40px no-repeat, url('images/background-header.jpg') center bottom;
    transition: all 0.25s ease!important;
    -moz-transition: all 0.25s ease!important;
    -webkit-transition: all 0.25s ease!important;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.5);
}

.nav-trigger:checked+label {
    right: 300px;
}

.nav-trigger:checked~#mobileBody {
    right: 300px;
    overflow: hidden;
}

.nav-trigger:checked~.navigation {
    display: block!important;
}

.nav-trigger+label,
#mobileBody {
    transition: right 0.25s;
}

@media only screen and (min-width: 801px) {
    .navigation {
        display: none!important;
    }
    .nav-trigger:checked~#mobileBody {
        right: 0px;
    }
}

@media only screen and (max-width: 800px) {
    .nav-trigger,
    label[for="nav-trigger"] {
        display: block
    }
}