/**************************************************************
 * 
 * Base Styles.
 *
 **************************************************************/
html {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 100%;
  line-height: 1.5em; }

body {
  color: #333333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

p, strong {
  margin: 0;
  padding: 0; }

strong {
  font-weight: 400; }

h1, h2, h3, h4, h5 {
  font-weight: 300;
  font-size: 1.85em;
  padding: 0;
  margin: 0; }

ul {
  padding: 0;
  margin: 0;
  list-style: none; }

.sub-text {
  color: #505050; }

.yellow-text {
  color: #f3ec35; }

/**************************************************************
 * 
 * Layout Styles.
 *
 **************************************************************/
.global-container {
  width: 82%; }

.padded-section {
  padding: 136px 0;
  text-align: center; }

.separator {
  width: 40%;
  height: 43px;
  margin: 6px auto 38px auto;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover; }
  .separator.yellow-logo {
    background-image: url("../../images/yellow-logo-separator.png"); }
  .separator.grey-logo {
    background-image: url("../../images/grey-logo-separator.png"); }

/**************************************************************
 * 
 * Header Styles.
 *
 **************************************************************/
#global-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 76px;
  background-color: rgba(0, 0, 0, 0.45); }
  #global-header .global-container {
    margin: 0 auto; }
  #global-header h1 {
    height: 0;
    padding: 76px 0 0 0;
    margin: 0;
    overflow: hidden;
    background: url("../../images/rayner-riding-logo.png") center center no-repeat;
    background-size: 76%; }
    @media only screen and (max-width: 768px) {
      #global-header h1 {
        background-size: 100%; } }
  #global-header nav .fa-bars {
    display: none;
    color: #ffffff;
    position: absolute;
    line-height: 76px;
    top: 0;
    right: 0;
    font-size: 1.5em; }
    @media only screen and (max-width: 768px) {
      #global-header nav .fa-bars {
        display: block; } }
  #global-header ul {
    padding: 0;
    margin: 0;
    text-align: right; }
    #global-header ul li {
      display: inline;
      margin-left: 20px; }
      #global-header ul li a {
        font-size: 0.8em;
        line-height: 76px;
        text-decoration: none;
        color: #ffffff;
        font-weight: bold;
        text-transform: uppercase; }
        #global-header ul li a:hover {
          color: #f3ec35; }
        @media only screen and (max-width: 768px) {
          #global-header ul li a {
            font-size: 1.5em;
            line-height: 40px; } }
      @media only screen and (max-width: 768px) {
        #global-header ul li {
          display: list-item;
          height: auto;
          padding: 10px 0;
          margin: 0; } }
    @media only screen and (max-width: 768px) {
      #global-header ul {
        position: absolute;
        display: none;
        width: 100%;
        height: auto;
        background-color: rgba(0, 0, 0, 0.75);
        top: 76px;
        left: 0;
        text-align: center; }
        #global-header ul.show {
          display: block; } }

/**************************************************************
 * 
 * Billboard Styles.
 *
 **************************************************************/
#billboard {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  background: url("../../images/billboard-background.jpg") bottom center no-repeat;
  background-size: cover;
  overflow: hidden; }
  #billboard.retina {
    background: url("../../images/billboard-background@2x.jpg") bottom center no-repeat;
    background-size: cover; }
  #billboard #splash {
    position: absolute;
    top: 35%;
    left: 0;
    width: 80%;
    padding: 0 10%;
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
    text-align: center;
    z-index: 5; }
    #billboard #splash h2 {
      display: inline-block;
      padding: 10px;
      margin: 0 auto;
      font-size: 1.75em;
      font-weight: 300;
      color: #ffffff;
      border: 1px #f3ec35 solid;
      border-color: rgba(243, 236, 53, 0.75); }
  #billboard #billboard-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%); }
    @media only screen and (max-width: 640px) {
      #billboard #billboard-video {
        display: none; } }
  #billboard #billboard-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5) url("../../images/image-overlay.png");
    z-index: 3;
    opacity: 0.25; }
  #billboard #billboard-video.show,
  #billboard #billboard-video-overlay.show {
    opacity: 1; }
  #billboard #billboard-scroll-cta {
    z-index: 5;
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 80%;
    padding: 0 10%;
    text-align: center;
    text-transform: uppercase; }
    #billboard #billboard-scroll-cta a {
      color: white;
      text-decoration: none;
      font-size: 0.85em; }
      #billboard #billboard-scroll-cta a .fa {
        -webkit-animation: nudgeDown 2s linear infinite;
        -moz-animation: nudgeDown 2s linear infinite;
        -ms-animation: nudgeDown 2s linear infinite;
        -o-animation: nudgeDown 2s linear infinite;
        animation: nudgeDown 2s linear infinite; }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes nudgeDown {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0); }
  50% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px); }
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0); } }
/* Firefox < 16 */
@-moz-keyframes nudgeDown {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0); }
  50% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px); }
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0); } }
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes nudgeDown {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0); }
  50% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px); }
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0); } }
/* Internet Explorer */
@-ms-keyframes nudgeDown {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0); }
  50% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px); }
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0); } }
/* Opera < 12.1 */
@-o-keyframes nudgeDown {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0); }
  50% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px); }
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0); } }
/**************************************************************
 * 
 * About Styles.
 *
 **************************************************************/
#about {
  text-align: center; }
  #about .global-container {
    margin: 0 auto; }
  #about .main-article {
    margin-bottom: 60px; }
  #about .sub-articles {
    text-align: justify; }
    #about .sub-articles h3, #about .sub-articles .sub-text {
      text-align: center; }
    #about .sub-articles img {
      float: left;
      margin: 0 10px 10px 0; }
  #about .sub-article-inner {
    padding: 0 10px;
    font-size: .85em; }
  #about article h3 {
    font-size: 1.5em; }
  #about article p {
    margin-bottom: 30px; }

/**************************************************************
 * 
 * Retirement Styles.
 *
 **************************************************************/
#retirement {
  color: #fff;
  background: url("../../images/retirement/rayner-riding-retirement.jpg") center center no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  #retirement.retina {
    background: url("../../images/retirement/rayner-riding-retirement@2x.jpg") center center no-repeat;
    background-size: cover;
    background-attachment: fixed; }
  #retirement #retirement-overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); }
  #retirement #retirement-inner {
    display: block;
    margin: 0 auto; }
    #retirement #retirement-inner p {
      margin-bottom: 30px; }
  #retirement #retirement-pricing {
    margin: 5% auto; }
    #retirement #retirement-pricing table {
      width: 100%; }
    #retirement #retirement-pricing table .highlighted-row {
      background-color: rgba(0, 0, 0, 0.3); }
    #retirement #retirement-pricing table tr td {
      text-align: center;
      padding: 5px 0; }
    #retirement #retirement-pricing table tr td i {
      color: #f3ec35; }
      #retirement #retirement-pricing table tr td i.fa-times {
        color: rgba(255, 255, 255, 0.25); }
    #retirement #retirement-pricing table tr td:first-child {
      text-align: left;
      white-space: nowrap;
      font-weight: 400;
      padding-left: 1em; }
      @media only screen and (max-width: 640px) {
        #retirement #retirement-pricing table tr td:first-child {
          white-space: normal; } }
    #retirement #retirement-pricing .other-packages {
      margin-top: 30px; }
    #retirement #retirement-pricing .other-packages ul {
      margin-top: 20px; }
    #retirement #retirement-pricing .sub-text {
      font-size: 0.85em;
      color: #c2c2c2; }
    #retirement #retirement-pricing .small-print {
      text-align: left;
      font-style: italic; }

#instructor {
  min-height: 100vh;
  background-color: #262626; }
  #instructor .instructor-image {
    position: relative;
    min-height: 100vh;
    background: url("../../images/about/sandi-rayner-bw.jpg") right center no-repeat;
    background-size: cover; }
    #instructor .instructor-image .instructor-image-overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); }
  #instructor .instructor-blurb {
    text-align: center;
    overflow: auto;
    color: #ffffff; }
    #instructor .instructor-blurb .instructor-blurb-inner {
      padding: 20%; }
      @media only screen and (max-width: 640px) {
        #instructor .instructor-blurb .instructor-blurb-inner {
          padding: 5%; } }
      #instructor .instructor-blurb .instructor-blurb-inner .quotes {
        margin-top: 40px;
        font-style: italic;
        font-size: 0.85em; }
        #instructor .instructor-blurb .instructor-blurb-inner .quotes p {
          margin-bottom: 5px; }
      #instructor .instructor-blurb .instructor-blurb-inner .sub-text {
        color: #818181;
        margin-bottom: 5px; }

/**************************************************************
 * 
 * Gallery Styles.
 *
 **************************************************************/
#gallery ul {
  padding: 0;
  margin: 0 auto; }
  #gallery ul li {
    height: 19vw; }
    #gallery ul li a {
      display: block;
      width: 90%;
      height: 100%;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
      color: #333333;
      font-size: 1vw;
      background-size: cover;
      background-position: center center;
      cursor: pointer; }
      #gallery ul li a .gallery-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 90%;
        height: 100%;
        opacity: 0;
        padding: 40% 5%;
        background-color: rgba(243, 236, 53, 0.75);
        -webkit-transition: opacity 0.5s ease;
        -moz-transition: opacity 0.5s ease;
        transition: opacity 0.5s ease; }
        #gallery ul li a .gallery-overlay strong {
          color: #000000;
          font-size: 1.5vw; }
      #gallery ul li a:hover .gallery-overlay {
        opacity: 1; }
      #gallery ul li a.gallery-item-link {
        display: none; }

/**************************************************************
 *
 * Stories Styles.
 *
 **************************************************************/
#stories {
  height: 100vh;
  position: relative;
  background-color: #f3ec35; }
  #stories .global-container {
    margin: 0 auto; }
  #stories ul {
    position: relative;
    width: 90%;
    margin: 0 auto; }
    #stories ul li {
      opacity: 0;
      padding: 0 2%;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transition: opacity 0.25s linear;
      -moz-transition: opacity 0.25s linear;
      transition: opacity 0.25s linear; }
  #stories ul li.show-story {
    opacity: 1; }
  #stories .author-image {
    width: 160px;
    height: 160px;
    margin: 0 auto 30px auto;
    overflow: hidden;
    border: 4px #fff solid;
    border-radius: 85px;
    -webkit-border-radius: 85px;
    -moz-border-radius: 85px; }
    #stories .author-image img {
      max-height: 100%;
      min-width: 100%; }
  #stories .story-text {
    font-size: 1em;
    font-style: italic;
    color: #505050; }
  #stories .author-details {
    font-style: italic; }
  #stories .stories-control {
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    background-color: rgba(255, 255, 255, 0.25);
    width: 10%;
    height: 100%;
    cursor: pointer;
    border: none; }
    #stories .stories-control .stories-control-icon {
      font-size: 4em;
      line-height: 100%; }
  #stories .stories-control-left {
    left: 0; }
  #stories .stories-control-right {
    right: 0; }

@keyframes increaseFont {
  0% {
    font-size: 2em; }
  50% {
    font-size: 2.5em; }
  100% {
    font-size: 2em; } }
@-moz-keyframes increaseFont {
  from {
    font-size: 2.5em; }
  to {
    font-size: 2em; } }
@-webkit-keyframes increaseFont {
  0% {
    font-size: 2em; }
  50% {
    font-size: 2.5em; }
  100% {
    font-size: 2em; } }
@-ms-keyframes increaseFont {
  0% {
    font-size: 2em; }
  50% {
    font-size: 2.5em; }
  100% {
    font-size: 2em; } }
@-o-keyframes increaseFont {
  0% {
    font-size: 2em; }
  50% {
    font-size: 2.5em; }
  100% {
    font-size: 2em; } }
@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/**************************************************************
 * 
 * Pricing Styles.
 *
 **************************************************************/
#pricing .pricing-option-list {
  margin: 0 auto; }
@media only screen and (max-width: 640px) {
  #pricing .pricing-option-column {
    width: 100% !important; } }
#pricing .pricing-option {
  width: 90%;
  margin: 0 auto; }
  @media only screen and (max-width: 640px) {
    #pricing .pricing-option {
      margin-bottom: 10px; } }
#pricing .pricing-option-sub-header,
#pricing .pricing-option-header {
  padding: 15px 0; }
  @media only screen and (max-width: 640px) {
    #pricing .pricing-option-sub-header,
    #pricing .pricing-option-header {
      cursor: pointer; } }
  @media only screen and (max-width: 640px) {
    #pricing .pricing-option-sub-header:hover + .pricing-option-details ul, #pricing .pricing-option-sub-header:focus + .pricing-option-details ul,
    #pricing .pricing-option-header:hover + .pricing-option-details ul,
    #pricing .pricing-option-header:focus + .pricing-option-details ul {
      display: block; } }
#pricing .pricing-option-header {
  font-size: 1.25vw;
  font-weight: 400;
  background-color: #f3ec35; }
  @media only screen and (max-width: 640px) {
    #pricing .pricing-option-header {
      font-size: 2.5vw; } }
#pricing .pricing-option-sub-header {
  color: #fff;
  background-color: #333333; }
  #pricing .pricing-option-sub-header .price-detail,
  #pricing .pricing-option-sub-header .price {
    display: block;
    width: 100%; }
  #pricing .pricing-option-sub-header .price-detail {
    font-size: .9vw; }
    @media only screen and (max-width: 640px) {
      #pricing .pricing-option-sub-header .price-detail {
        font-size: 2vw; } }
  #pricing .pricing-option-sub-header .price {
    font-size: 2.75vw;
    color: #f3ec35; }
#pricing .pricing-option-details ul {
  border: 1px #c8c8c8 solid;
  border-top: none;
  padding: 15px 14px;
  height: 236px;
  overflow: auto; }
  @media only screen and (max-width: 640px) {
    #pricing .pricing-option-details ul {
      display: none; } }
#pricing .pricing-option-details ul li {
  display: block;
  color: #818181;
  padding-bottom: 15px;
  font-size: 0.9em; }
#pricing .have-a-go-half-hour {
  margin: 0 auto; }

#map {
  width: 100%;
  height: 325px;
  background: url("../../images/rayner-riding-school-map.png") center center no-repeat;
  background-size: cover; }

#social {
  text-align: center; }
  #social #social-inner {
    display: inline-block; }
  #social .tag-lines {
    height: 224px; }
  #social .tag-lines-inner {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: left; }
    #social .tag-lines-inner h3 {
      font-size: 2.5em;
      margin-bottom: 20px;
      line-height: 1em; }
  #social .tag-line {
    font-size: 1.4em; }

/**************************************************************
 * 
 * Contact Styles.
 *
 **************************************************************/
#contact {
  background: url("../../images/contact/rayner-riding-horse-riding-school.jpg") center center no-repeat;
  background-size: cover;
  text-align: center;
  color: #ffffff; }
  #contact.retina {
    background: url("../../images/contact/rayner-riding-horse-riding-school@2x.jpg") center center no-repeat;
    background-size: cover; }
  #contact #contact-overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); }
  #contact #contact-inner {
    display: inline-block; }
    #contact #contact-inner #contact-details {
      line-height: 20px;
      text-align: left; }
      #contact #contact-inner #contact-details h3 {
        font-size: 1em;
        font-weight: 400;
        margin-bottom: 10px; }
      #contact #contact-inner #contact-details ul {
        padding: 0;
        margin: 0; }
      #contact #contact-inner #contact-details ul li {
        list-style: none;
        margin-top: 17px; }
      #contact #contact-inner #contact-details ul li ul li {
        margin-top: 0; }
      #contact #contact-inner #contact-details i {
        color: #fff;
        margin-right: 10px;
        width: 15px; }
        @media only screen and (max-width: 640px) {
          #contact #contact-inner #contact-details i {
            display: none; } }
      #contact #contact-inner #contact-details a[href^=tel] {
        text-decoration: inherit;
        color: inherit; }
      #contact #contact-inner #contact-details address a {
        color: #fff;
        text-decoration: none; }
        #contact #contact-inner #contact-details address a:hover {
          text-decoration: underline; }
      #contact #contact-inner #contact-details .indent {
        margin-left: 25px; }
        @media only screen and (max-width: 640px) {
          #contact #contact-inner #contact-details .indent {
            margin-left: 0; } }
      #contact #contact-inner #contact-details .yellow-text {
        font-size: 1em; }
      #contact #contact-inner #contact-details .sub-text-light {
        color: #c2c2c2; }
      #contact #contact-inner #contact-details .small-text {
        font-size: 0.75em; }
    #contact #contact-inner #contact-form fieldset {
      border: none;
      padding: 0;
      margin: 0;
      text-align: left; }
    #contact #contact-inner #contact-form input {
      padding: 3%; }
    #contact #contact-inner #contact-form textarea {
      padding: 1%;
      resize: none;
      height: 169px; }
    #contact #contact-inner #contact-form input, #contact #contact-inner #contact-form textarea {
      width: 100%;
      background-color: rgba(44, 44, 44, 0.5);
      border: 1px #f3ec35 solid;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      margin-bottom: 20px; }
    #contact #contact-inner #contact-form .contact-form-messages {
      margin: 5px 0; }
      #contact #contact-inner #contact-form .contact-form-messages p {
        padding: 5px; }
      #contact #contact-inner #contact-form .contact-form-messages.contact-form-success {
        background-color: rgba(108, 224, 76, 0.75); }
      #contact #contact-inner #contact-form .contact-form-messages.contact-form-error {
        background-color: rgba(250, 55, 55, 0.75); }
    #contact #contact-inner #contact-form #submit-wrapper {
      text-align: right; }
      #contact #contact-inner #contact-form #submit-wrapper #send-message {
        padding: 1.5% 1%;
        color: #505050;
        width: 30%;
        background-color: #f3ec35;
        font-size: 1em; }

#footer {
  background-color: #262626;
  padding: 60px 0; }
  #footer #logo {
    height: 0;
    padding: 76px 0 0 0;
    margin: 0 auto;
    overflow: hidden;
    background: url("../../images/rayner-riding-logo.png") center center no-repeat;
    background-size: 70%; }

/*# sourceMappingURL=styles.css.map */