/* -------------------------------------------------- 
Media Queries
-------------------------------------------------- */

/* Small screens ----------------- */
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium screens ----------------- */
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large screens ----------------- */
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens ----------------- */
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens ----------------- */
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */

/* -------------------------------------------------------------------------------------------------- */
/* We use this media query to add styles to any device that supports media queries */
@media only screen
{
}

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) { 
  .my-summary-wrapper .panel {
    padding:6px;
  }
  h1 {
    font-size: 1.9rem;  
  }
  h2 {
    font-size: 1.7rem;
  }
  h3 {
    font-size: 1.6rem;
  }
  h4 {
    font-size: 1.4rem;
  }
}

/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 40.063em) /* min-width 641px, medium screens */
{
  .my-main-content-wrapper {
    background: url("/img/misc/beach-house-builders-bgd-left-1.jpg?d8495c08795cfb7d721cd54f47e2acabb8771c47") left bottom no-repeat;
    background-size: 500px;
    background-color: #d9d9d9;
  }
  .my-main-content-wrapper-inner {
    background: url("/img/misc/beach-house-builders-bgd-right-1.jpg?2e787606ab14db6c2f6730a11513fb0d3b9f1ed6") right bottom no-repeat;
    background-size: 500px;
  }
  
  /* -------------------------------------------------- 
   HEADER
  -------------------------------------------------- */
  
  .my-header-wrapper {
    background: url("/img/misc/header-bgd-150.png?095096bef1f9bd079498c5ee94c3d6b8703b1f58") center center repeat-x;
    padding: 0;
  }
  #logo img {
    height:  150px;
  }
  
  /* -------------------------------------------------- 
   CONTENT
  -------------------------------------------------- */
  
  .main-content {
    /* From:  http://css-tricks.com/using-flexbox/ */
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    padding-top: 0;
  }
  .main-content .text {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .main-content .sidebar {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  /* -------------------------------------------------- 
   BLOG
  -------------------------------------------------- */
  
  .summary img { 
    float:left;
    max-width:35%;
    margin-left:0;
    margin-top: 20px;
  }
  .summary-text {
    margin-left:42%;
  }
  
  /* -------------------------------------------------- 
   ALIGNMENT
  -------------------------------------------------- */
  
	/* Use the display:block in case editor applies this to an inner span element */
  .align-left {
    display:block;
    text-align:left;
  }
  .align-center {
    display:block;
    text-align:center;
  }
  .align-right {
    display:block;
    text-align:right;
  }

  img.left {
    float:left;
    max-width:40%;
    margin-right:20px;
  }
  img.right {
    float:right;
    max-width:40%;
    margin-left:20px;
    margin-top: 1.5rem;
  }
  img.right-smaller {
    float:right;
    max-width:20%;
    margin-left:20px;
    margin-top: 1.5rem;
  }  

}

/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 40.063em) and (max-width: 64.062em) /* min-width 641px, max-width 1025px ONLY medium screens */
{
  /* --- SUMMARY --- */
  .panel.my-summary-image {
      padding: 10px;
  }
  
}

/* -------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 64.063em) /* min-width 1025px, large screens */
{
  .my-header-wrapper {
    background: url("/img/misc/header-bgd.png?165a7f0acb747707c850f7940dc36a96aeef0fea") center center repeat-x;
    padding: 0;
  }
  #logo img {
    height: auto;
  }
  
  /* -------------------------------------------------- 
   MAIN NAVIGATION
  -------------------------------------------------- */
  
  .my-navigation-wrapper {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #737373;
  }
  .my-navigation-wrapper .row {
    padding: 0.5rem 0;
  }
  .my-navigation-wrapper ul{
    padding:0;
  }
  .my-navigation-wrapper li{
    display: inline;
    margin: 0;
    border: 0;
  }
  .my-navigation-wrapper a{
    display: inline;
    color: #fff;
    font-size: 1.3rem;
    padding: 0.5rem 30px;
    margin: 0;
  }
}

/* -------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 100em) /* min-width 1601px, larger screens */
{
   /* SET OVERALL MAX WIDTH */
  .row {
    max-width: 70rem;
  }
 
}

/* -------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 120.063em) /* min-width 1921px, xlarge screens */
{ 
  .my-main-content-wrapper {
    background-size: 720px;
  }
  .my-main-content-wrapper-inner {
    background-size: 720px;
  }
}