/*!
Theme Name: Crestview Manor
Author: Miller Media, Inc
Author URI: http://www.millermediainc.com
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crestview-manor
Tags:
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Compass
## Reset
# Utilities
## Variables
## Mixins
# Components (Navigation, Footer, Header)
# Layouts
# Pages (styles unique to specific pages)
# Vendors (external styles/files)

/*--------------------------------------------------------------
# Compass
--------------------------------------------------------------*/
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/*--------------------------------------------------------------
# Utilities (Variables, Mixins)
--------------------------------------------------------------*/
/* Breakpoints */
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/******
---Navigation Styles---
******/
.main-navigation { display: block; width: 100%; }
.main-navigation .menu-toggle { background: none; border: none; padding: 0; margin-left: calc(100% - 45px); }
@media screen and (min-width: 1030px) { .main-navigation .menu-toggle { display: none; } }
.main-navigation .menu-toggle div { transition: 0.4s all; width: 35px; height: 5px; margin: 5px; background-color: black; }
.main-navigation ul { display: none; }
@media screen and (min-width: 1030px) { .main-navigation ul { display: block; position: absolute; bottom: 10px; right: 0; } }
.main-navigation ul li { text-align: center; padding: 10px; border-bottom: 1px solid black; }
@media screen and (min-width: 1440px) { .main-navigation ul li { font-size: 20px; } }
@media screen and (min-width: 1030px) { .main-navigation ul li { display: inline-block; padding: 0; border: none; }
  .main-navigation ul li:first-child { border-top: none !important; }
  .main-navigation ul li a { font-weight: normal !important; } }
.main-navigation ul li:first-child { border-top: 1px solid black; }
.main-navigation ul li a { color: black; font-weight: bold; }
@media screen and (min-width: 1030px) { .main-navigation ul .divider { margin: 0 12px; } }
@media screen and (min-width: 1440px) { .main-navigation ul .divider { margin: 0 20px; } }

.toggled ul { display: block; }
.toggled .menu-toggle div:first-child { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); }
.toggled .menu-toggle div:nth-of-type(2) { opacity: 0; }
.toggled .menu-toggle div:last-child { -webkit-transform: rotate(45deg) translate(-8px, -6px); transform: rotate(45deg) translate(-8px, -6px); }

#text-3 .textwidget, #text-2 .textwidget { font-size: 15px; text-align: center; }
@media screen and (min-width: 1440px) { #text-3 .textwidget, #text-2 .textwidget { font-size: 20px; } }

#contact-navigation { position: absolute; top: 0; right: 0; }
@media screen and (min-width: 1440px) { #contact-navigation { font-size: 20px; } }
#contact-navigation li { display: inline-block; }
#contact-navigation li i, #contact-navigation li span { color: black; }
#contact-navigation .hide-text .fontawesome-text { display: none; }

.divider { display: none; }
@media screen and (min-width: 1030px) { .divider { display: inline-block; } }

/******
---Header Styles---
******/
.custom-logo { width: 100px; height: auto; }
@media screen and (min-width: 1030px) { .custom-logo { width: auto; } }

@media screen and (min-width: 1030px) { #masthead { height: 130px; }
  #masthead .custom-logo-link { float: left; }
  #masthead #text-3, #masthead #text-2 { float: left; margin-top: 15px; margin-left: 60px; } }

/******
---End Header Styles---
******/
#colophon { display: none; }
@media screen and (min-width: 1030px) { #colophon { display: block; }
  #colophon .custom-logo-link { display: block; margin: 25px 0; text-align: center; }
  #colophon #primary-menu { width: 910px; margin: 0 auto; }
  #colophon #primary-menu li { display: inline-block; }
  #colophon #primary-menu li a { color: black; }
  #colophon #primary-menu .divider { pointer-events: none; margin: 0 20px; } }

.site-info { text-align: center; }

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
html { font-family: 'Open Sans', sans-serif; max-width: 1920px; margin: 0 auto; }

a { text-decoration: none; }

.entry-header { display: none; }

.skip-link { display: none; }

.clearfix { clear: both; content: ''; display: table; margin: 0 auto; width: 100%; }

.container { width: 320px; margin: 0 auto; position: relative; }
@media screen and (min-width: 481px) { .container { width: 480px; } }
@media screen and (min-width: 768px) { .container { width: 768px; } }
@media screen and (min-width: 1030px) { .container { width: 1030px; } }
@media screen and (min-width: 1440px) { .container { width: 1440px; } }

/*--------------------------------------------------------------
# Pages
--------------------------------------------------------------*/
/*******
---Homepage Styles---
*******/
hr { background: #425262; border: none; height: 3px; width: 75px; }

#intro-text { padding: 30px 0; }
#intro-text h3 { font-size: 24px; font-weight: bold; margin: 16px 0; text-align: center; }
#intro-text p { margin-bottom: 16px; text-align: center; }

.blue-bar { background-color: #425262; height: 110px; }
@media screen and (min-width: 768px) { .blue-bar { height: 130px; }
  .blue-bar .container { height: 130px !important; } }
.blue-bar .container { height: 110px; }
.blue-bar .application-text { padding: 10px 0 !important; }
.blue-bar p { color: white; font-size: 18px; text-align: center; }
.blue-bar p img { width: 150px; height: auto; }
.blue-bar p:first-child { padding: 15px 0; }
@media screen and (min-width: 768px) { .blue-bar p { font-size: 25px; position: absolute; top: 50%; transform: translateY(-50%); }
  .blue-bar p img { width: 250px; }
  .blue-bar p:first-child { padding: 0; }
  .blue-bar p:nth-of-type(2) { right: 0; } }
@media screen and (min-width: 1030px) { .blue-bar p { font-size: 38px; }
  .blue-bar p img { width: auto; } }

@media screen and (min-width: 1030px) { #things-to-do { width: 1030px; position: relative; } }
@media screen and (min-width: 1440px) { #things-to-do { width: 1430px; } }
#things-to-do h3 { font-size: 24px !important; }
@media screen and (min-width: 1030px) { #things-to-do .lapeer-things { width: 509px; display: inline-block; vertical-align: top; } }
@media screen and (min-width: 1440px) { #things-to-do .lapeer-things { width: 738px; } }
#things-to-do .ezcol { text-align: center; }
@media screen and (min-width: 1440px) { #things-to-do .ezcol:first-child { margin-bottom: 30px; } }
#things-to-do .ezcol figure { margin: 0 auto; padding: 16px; text-transform: uppercase; width: 121px !important; }
#things-to-do .ezcol figure figcaption { margin-top: 8px; }

@media screen and (min-width: 1030px) { #benefits { background-image: url("/wp-content/uploads/2017/04/ParkBG.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: bottom; } }
#benefits .ezcol { text-align: center; }
#benefits .ezcol figure { margin: 0 auto; }
#benefits .ezcol figure figcaption { background: rgba(255, 255, 255, 0.8); padding: 5px 0; text-transform: uppercase; }
#benefits h3 { font-size: 40px !important; }
#benefits h3.section-title { font-size: 24px !important; }

#pictures, #benefits { text-align: center; }
#pictures h3, #benefits h3 { margin-top: 16px; font-weight: bold; font-size: 28px; }
@media screen and (min-width: 768px) { #pictures h3, #benefits h3 { font-size: 32px; } }
#pictures p, #benefits p { font-size: 18px; margin-bottom: 16px; }

.section-title { text-align: center; margin: 16px 0; font-weight: bold; font-size: 28px; }
@media screen and (min-width: 768px) { .section-title { font-size: 32px; } }

#pictures img { height: auto; margin-bottom: 16px; }

#get-in-touch { display: none; background-image: url("/wp-content/uploads/2017/03/Contact-BG.png"); background-repeat: no-repeat; background-size: 100% 100%; color: white; height: 230px; text-align: center; }
@media screen and (min-width: 1030px) { #get-in-touch { display: block; } }
#get-in-touch .container { height: 230px; position: relative; }
#get-in-touch .ezcol-one-third { font-size: 20px; line-height: 2; position: absolute; top: 50%; transform: translateY(-50%); }
#get-in-touch .ezcol-one-third:nth-of-type(2) { left: 50%; transform: translate(-50%, -50%); }
#get-in-touch .ezcol-one-third:nth-of-type(3) { right: 0; }

.internal-page { padding: 20px 0; text-align: center; line-height: 1.75; }
.internal-page h3 { font-size: 28px; margin: 18px 0; }
.internal-page a { font-size: 20px; font-weight: bold; }
.internal-page .ezcol { margin-bottom: 16px; }
.internal-page .ezcol img { width: 100%; height: auto; }
.internal-page ul { list-style: disc; list-style-position: inside; }
.internal-page .text a { font-size: 16px; color: black; text-decoration: underline; }
.internal-page .features-font { font-size: 20px; }

/*--------------------------------------------------------------
# Vendors
--------------------------------------------------------------*/