/* Base Styles -------------------- */

@font-face {
    font-family: 'abolition regular';
      src: url('../fonts/abolition-regular-webfont.eot');
      src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/abolition-regular-webfont.woff') format('woff'),
         url('../fonts/abolition-regular-webfont.ttf') format('truetype');
  }
  
  * {
    box-sizing: border-box;
  }
  
  h1, h2 {
    font-family: 'abolition regular';
  }
  
  body {
    color: #878787;
    margin: 0;
    font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
  
  h1 {  
    font-size: 5.625rem; /* 90px/16px  */
    color: rgba(255, 255, 255, 1);
    text-transform: uppercase;
    font-weight: normal;
    line-height: 1.3;
    text-shadow: 10px 10px 20px #222;
    margin: 12px 0 0;
  }
  
  h2 {
    font-size: 3.3125em; /* 53px/16px  */
    font-weight: normal;
    line-height: 1.1;
    margin: 0 0 .5em; /* 0 0 26px */
  }
  
  h3 {
    font-size: 1.25em; /* 20px/16px  */
    color: #48525c;
    line-height: 1.2;
    margin-bottom: 1.7em; /* 34px */
  }
  
  img {
    max-width: 100%;
    margin-bottom: 20px;
    border-radius: 25px 5px;
  }
  
  ul,
  ol {
    margin: 30px 0;
  }
  
  li {
    margin-bottom: 10px;
  }
  
  /* Pseudo-classes ------------------ */
  
  a:link {
    color: rgb(255, 169, 73);
    text-decoration: none;
  }
  
  a:visited {
    color: lightblue;
  }
  
  a:hover {
    color: rgba(255, 169, 73, .4);
  }
  
  a:active {
    color: lightcoral;
  }
  
  /* Main Styles --------------------- */
  
  .main-header {
    padding-top: 170px;
    height: 850px;
    background: linear-gradient(#ffa949, transparent 40%), 
               linear-gradient(0deg, #fff, transparent 20%) , #ffa949 url('../img/mountains.jpg') no-repeat center;
    
    background-size: cover;
    
  }
  
  .title {
    color: white;
    font-size: 1.625rem; /* 26px/16px */
     letter-spacing: .065em;
    font-weight: 200;
    border-bottom: 2px solid;
    padding-bottom: 10px;
  }
  
  .intro {
    font-size: 1.25em; /* 20px/16px */
    line-height: 1.6;  
   
  }
  
  .primary-content,
  .main-header,
  .main-footer {
    text-align: center;
  }
  
  .primary-content {
      padding-top: 25px;
    padding-bottom: 95px;
  }
  
  .secondary-content {
      padding-top: 80px;
      padding-bottom: 70px;
    border-bottom: 2px solid #dfe2e6;
  }
  
  .callout {
    font-size: 1.25em;
    border-bottom: 3px solid;
    padding: 0 9px 3px;
    margin-top: 20px;
    display: inline-block;
  }
  
  .main-footer {
    padding-top: 60px;
    padding-bottom: 60px;
    border-bottom: 10px solid #ffa949;
  }
  
  .t-border {
    border-top: 2px solid #dfe2e6;
  }
  
  /* Layout Styles ------------------ */
  
  .primary-content, 
  .secondary-content {
    width: 75%;
    padding-left: 50px;
    padding-right: 50px;
    margin: auto;
    max-width: 960px;
  }
  
  .wildlife {
    color: white;
    text-align: left;
    padding: 18% 24%;
    border-top: 10px solid #ffa949;
    margin: 105px 0 60px;
    background: #434a52 url('../img/bear.jpg') no-repeat center;
    background-size: cover;
    box-shadow: 10px 10px 10px #222;
    border-radius: 50px 10px;
    
  }
  
  .arrow {
    width: 50px;
    margin-top: 150px;
  }
  
  /* Floated Columns ------------------ */
  
  .resorts,
  .tips {
    width: 46.5%;
  }
  
  .tips {
    float: left;
  }
  
  .resorts {
    float: right;
  }
  
  /* Float Clearfix ------------------ */
  
  .group:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /*
  @media (max-width: 960px) {
    body {
      background: royalblue;
    }
    p {
      color: white;
    }
  }
  @media (max-width: 480px) {
    body {
    background: darkred;
  }
  }
  */
  
  @media (max-width: 1024px) {
    .primary-content, .secondary-content {
    width: 90%;
  }
  
  .wildlife {
    padding: 10% 12%;
    margin: 50px 0 20px;
  }
  }
  
  @media (max-width: 768px) {
    .primary-content, .secondary-content {
    width: 60%;
    padding: 20px;
    border-top: none;
  }
  
  .main-header {
    max-height: 380px;
    padding: 50px 25px 0;
  }
  
  .title {
    font-size: 1.3rem;
    border: none;
  }
  
  h1 {
    font-size: 5rem;
    line-height: 1.1;
  }
  
  .arrow {
  display: none; 
  }
  
  .intro {
    font-size: 1rem;
  }
  
  .resorts, .tips {
    float: none;
    width: 100%;
  }
  
  .main-footer {
    padding: 20px 0;
    
  }
  }