/*-- Index --*/

.index-header {position: relative;}

    .index-header img {
        position:static;
        width:100%;
        height:auto;
        margin-top:9rem;
    }

    @media (min-width: 768px) {.index-header img {position:absolute; top:0; left:0; margin-top:0rem;}}

    .index-header .textbox {
        max-width:100%;
        margin:5rem auto 10rem auto;
    }

    @media (min-width: 768px) {.index-header .textbox {max-width:43%; margin:10rem auto 12rem auto;}}

        .index-header .textbox h1 {color:var(--black); margin-bottom:1rem;}
        @media (min-width: 768px) {.index-header .textbox h1 {color:var(--white); margin-bottom:0rem;}}

        .index-header .textbox p {
            color:var(--black);
            font-size:1.75rem;
            margin-bottom:2.5rem;
        }
        @media (min-width: 768px) {.index-header .textbox p {color:var(--white); font-size:1.8rem; margin-bottom:2rem;}}


/*-- Peak Difference --*/

.difference {background-color:var(--pale); padding:10rem 0rem 10rem 0rem;}
@media (min-width: 768px) {.difference {padding:10rem 20rem 10rem 20rem;}}

    .difference .title {margin-bottom:1rem;}

        .difference .title h2 {font-weight:700; margin-bottom:1rem; font-size:4.5rem !important;}

        .difference .title p {width:100%; margin:0 auto 3rem auto;}
        @media (min-width: 768px) {.difference .title p {width:60%; margin:0 auto 3rem auto;}}

    .difference .thumbnail {margin:2rem; border:var(--blue) 5px solid; background-color:var(--white); border-radius:20px; padding:4rem 5rem;}
    @media (min-width: 768px) {.difference .thumbnail {margin:.5rem;}}

        .difference .thumbnail img {height:4.8rem; margin-bottom:1rem;}
        @media (min-width: 768px) {.difference .thumbnail img {height:4.8rem;}}

        .difference .thumbnail h4 {margin-bottom:1rem; font-size:2rem;}

        .difference .thumbnail p {font-size:1.8rem;}
        @media (min-width: 768px) {.difference .thumbnail p {font-size:1.6rem;}}


/*-- Podcast --*/

.podcast .row {padding:10rem 0 0 0;}


/*------------ About Page ------------*/

.about-header {position:relative;background-color:var(--blue);}

.about-header .bkgd-bottom-right {width:50% !important;}

    .about-header .textbox {padding:5rem; width:50%; margin:auto;}

    .about-header .textbox h1 {color:var(--white); margin-bottom:1.5rem; font-size:5rem;}

    .about-header .textbox p {color:var(--white);}

/*-- Mission --*/

.mission {background-color:var(--pale);}


/*-- Team --*/

.team {padding:10rem 5rem;}
@media (min-width: 768px) {.team {padding:10rem;}}

    .team .title {max-width:100%; margin:0 auto 5rem auto;}
    @media (min-width: 768px) {.team .title {max-width:50%; margin:0 auto 5rem auto;}}

        .team .title h2 {font-weight:700; margin-bottom:1.5rem; font-size:4rem !important;}

    .team .thumbnail {margin-bottom:5rem;}

        .team .thumbnail img {
            width:100%;
            height:auto;
            border-radius:7px;
            margin-bottom:.5rem;
        }
        
        @media (min-width: 768px) {.team .thumbnail img {width:90%;}}

        .team .thumbnail h4 {font-weight:700; margin-bottom:.5rem;}

        .team .thumbnail p {font-size:1.3rem; margin-bottom:.5rem;}

        .team .thumbnail a {color:var(--green); text-decoration:underline !important; font-size:1.6rem;}
        @media (min-width: 768px) {.team .thumbnail a {font-size:1.3rem;}}
    
        
        .team .thumbnail a:hover {color:var(--red); transition:.4s;}

/*-- Values --*/

.values {
    background-color:var(--blue);
    border-bottom:var(--red) 6px solid;
    padding:3rem 5rem;
    color:var(--white);
}

@media (min-width: 768px) {.values {padding:0rem 5rem;}}

    .values .thumbnail {padding:3rem 0rem;}
    @media (min-width: 768px) {.values .thumbnail {padding:5rem;}}

    .values .thumbnail h4 {color:var(--white)!important; margin-bottom:1.5rem; font-size:2.3rem;}


/*-- Models --*/

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 5rem;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto;  
    background-color: rgba(13, 13, 13, 0.918); 
    animation: fadeIn .5s;
  
  }
  
  @keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
  
  /* Modal Content */
  .modal-content {
          position:static;
          top:50%;
          left:50%;
          margin: auto;
          height:auto;
          width:85%;
          background-color:var(--white);
          padding:2rem;
          border-radius:15px;
          background-color:var(--pale);
          margin-bottom:4rem;
  }

  @media (min-width: 768px) {.modal-content {position:absolute; transform:translate(-50%,-50%); padding:5rem 2rem;}}

  .modal-content .imgbox img {width:100%; height:auto; margin-bottom:2rem;}
  @media (min-width: 768px) {.modal-content .imgbox img {width:85%; height:auto; margin-bottom:0rem;}}

  .modal-content .textbox {margin-left:0rem;}

  .modal-content .textbox h2 {margin-bottom:1rem; font-weight:700;}

  .modal-content .textbox h5 {margin-bottom:1rem; color:var(--green);}

  .modal-content .textbox p {padding-right:0rem;}
  @media (min-width: 768px) {.modal-content .textbox p {padding-right:5rem;}}

/*-------- Payment Information ----------*/

.financial {margin:5rem auto; padding:0;}
@media (min-width: 768px) {.financial {padding:0 5rem;}}

.financial .menu {border-bottom:1px #C4C4C4 solid; padding:2rem 4rem; margin-bottom:3rem;}
@media (min-width: 768px) {.financial .menu {border-right:1px #C4C4C4 solid; border-bottom:none; padding:0; margin-bottom:0;}}

    .financial .menu h3 {margin-bottom:2rem;}

    .financial .menu ul {list-style-type: none; margin-left:0!important;}

    .financial .menu li {margin-bottom:1rem;}

        .financial .menu li a {color:var(--black)}

        .financial .menu li a:hover {color:var(--red); transition:.4s;}

        .financial .menu li a:active {text-decoration:underline;}

.financial .textbox {padding:0 4rem;}

.financial .textbox h2,
.financial .textbox h3,
.financial .textbox h4 {font-weight:700; margin-bottom:1.5rem;}


/*----------- Careers ------------*/

/*-- Why Peak --*/

.why-peak {background-color:var(--white)!important; padding:10rem 0rem;}
@media (min-width: 768px) {.why-peak {padding:10rem;}}

    .why-peak .thumbnail {padding:0;}
    @media (min-width: 768px) {.why-peak .thumbnail {padding:0 3rem;}}

/*-- Positions --*/

.positions {background-color:var(--pale); border-radius:15px; padding:5rem;}
@media (min-width: 768px) {.positions {padding:10rem;}}

.positions .title h2 {font-weight:700; margin-bottom:5rem;}

.positions .textbox h3 {font-weight:700; margin-bottom:1.5rem;}


/*----------- Podcast ------------*/

.podcast-header {background-color:var(--pale);}

/*-- Buzzfeed --*/

.buzzfeed .title {max-width:100%; margin:0 auto 5rem auto;}
@media (min-width: 768px) {.buzzfeed .title {max-width:35%;}}

    .buzzfeed h2 {font-weight:700; font-size:4rem; margin-bottom:2rem;}

    .buzzfeed .feed {padding:0rem;}
    @media (min-width: 768px) {.buzzfeed .feed {padding:0 10rem;}}


/*---------- Schedule Appointment ------------*/

/*-- Locations --*/

.locations {margin:5rem auto 0 auto; padding:0 5rem;}
@media (min-width: 768px) {.locations {margin:6rem auto 0 auto;}}

    .locations .thumbnail {
        background:var(--pale);
        border: var(--green) solid 2px;
        padding:3rem 0;
        border-radius:15px;
        margin:2rem;
    }


    .locations h5 {font-size:2rem; font-weight:700; margin-bottom:1rem;}

        .locations a {font-size:1.6rem; display:block; margin-bottom:1rem; color:var(--blue)}

        .locations .phone-aiken,
        .locations .phone-augusta,
        .locations .phone-evans {
            font-size:2rem !important;
            font-weight:bold;
            color:var(--red);
        }



/*------------- Location Pages -----------------*/

/*-- Location Header --*/

.location-header {margin-top:10rem; padding:0;}
@media (min-width: 768px) {.location-header {margin:0; padding:0;}}

.location-header img {width:100%; height:auto;}

/*-- Location Program Options --*/

.loc-options {background:var(--pale)!important; border:none; margin-bottom:-10rem;}

.loc-options h2, .loc-options h3, .loc-options p {color:var(--blue)!important;}

.loc-options .btn {color:var(--blue)!important; border-color:var(--blue)!important;}

.loc-options .btn:hover {color:var(--pale)!important; background-color:var(--blue);}



/*--------------- Service Pages ------------------*/

.service-options {background-color:var(--white)}

/*--- Performance Programs Thumbnail ---*/

.performance-programs {padding:10rem 0rem;}
@media (min-width: 768px) {.performance-programs {padding:10rem 12rem;}}

.performance-programs .thumbnail {padding:3rem 2rem;}

.performance-programs .thumbnail img {width:100%; height:auto; border-radius:10px;}

/*-- Program Services --*/

.pro .textbox p {width:100% !important;}
@media (min-width: 768px) {.pro .textbox p {width:60% !important;}}


/*-- Performance Program Needs --*/

.program-needs .thumbnail {margin-bottom:4rem;}

    .program-needs hr {
        width:70%;
        margin:0 auto 2rem auto;
        height:.25rem;
        background-color:var(--red);
        border:none;
    }

    .program-needs h4 {font-size:2rem;}


/*-- Tactical Video --*/

.video video {width:100%; height:auto; margin-bottom:12rem;}
@media (min-width: 768px) {.video video {width:80%; height:auto; margin-bottom:12rem;}}