/*fonts*/

@import url('//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Source+Sans+Pro:200,300,400,600,700,900');

/*animation*/

@-webkit-keyframes panelSlideIn {
    to {
        -webkit-transform: translate(1500px, 0);
        transform: translate(1500px, 0);
    }
}
@keyframes panelSlideIn {
    to {
        -webkit-transform: translate(1500px, 0);
        transform: translate(1500px, 0);
    }
}
@-webkit-keyframes panelSlideOut {
    to {
        right: -1500px;
    }
}
@keyframes panelSlideOut {
    to {
        right: -1500px;
    }
}
@-webkit-keyframes closeButton {
    0% {
        display: inline-block;
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes closeButton {
    0% {
        display: inline-block;
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes slideDown {
    0% {
        z-index: -1000;
    }
    10% {
        top: 0;
    }
    100% {
        left: 0;
        top: 0px;
        bottom: inherit;
    }
}
@keyframes slideDown {
    0% {
        z-index: -1000;
    }
    10% {
        top: 0;
    }
    100% {
        left: 0;
        top: 0px;
        bottom: inherit;
    }
}
@-webkit-keyframes fadeIn {
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    100% {
        opacity: 1;
    }
}

/*main styles*/

* {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
body {
    margin: 0;
    background-color: #f1f1f1;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.admin-bar #content {
    margin-top: 30px;
}
a:focus {
    outline: 0px solid transparent;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}
.clearFix {
    content: "";
    display: table;
    clear: both;
}
::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(0, 0, 0, .3);
    font-size: 1.1em;
}
.clear {
    clear: both;
}
.screen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 99.5%;
}
header > div:first-of-type > .screen {
    z-index: 100;
    left: 100%;
    height: 850%;
}
.black {
    background-color: rgba(0, 0, 0, .8);
    z-index: 0;
}
a:hover {
    text-decoration: none;
}
input,
textarea {
    border-radius: 0;
}
.button.ghost,
input[value="Post Comment"] {
    display: inline-block;
    color: rgba(0, 0, 0, .8);
    background-color: rgba(0, 0, 0, 0);
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, .8);
    margin: 10px 0 20px 2%;
}
.button.ghost:hover,
input[value="Post Comment"]:hover {
    color: rgba(255, 255, 255, .8);
    background-color: rgba(0, 0, 0, .8);
    padding: 10px 20px;
    border: 1px solid transparent;
}
.button.ghost.white {
    color: rgba(0, 0, 0, .8);
    background-color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .8);
}
.button.ghost.white:hover {
    color: rgba(255, 255, 255, .8);
    background-color: rgba(0, 0, 0, .8);
    border: 1px solid rgba(0, 0, 0, .8);
}
.button.ghost.dark {
    color: rgba(255, 255, 255, .8);
    background-color: rgba(0, 0, 0, .7);
    border: 1px solid rgba(0, 0, 0, .7);
}
.button.ghost.dark:hover {
    color: rgba(0, 0, 0, .8);
    background-color: rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .8);
}

/*header*/

#content {
    overflow: hidden;
}
header,
#content {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
}
video {
    background: transparent url('https://cfblk.com/wp-content/themes/cfblk-theme/video/iAmCrossfitPlaceholder.png') no-repeat 0 0;
    background-size: cover;
}
#headerVideo video {
    width: 100%;
}
header > div:first-of-type {
    position: absolute;
    z-index: 99;
    color: white;
    right: 0;
    width: 100%;
    height: 100%;
}

/*logo*/

#logo {
    position: absolute;
    bottom: 40%;
    width: 100%;
    z-index: 1;
}
#logo img {
    display: block;
    margin: 0 auto;
    width: 35%;
}
#login {
    position: absolute;
    border-radius: 100%;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    z-index: 1000;
    -webkit-transition: all 1s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
#login:hover {
    background-color: rgba(255, 255, 255, .09);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

/*panel operations*/

#contactPanel,
#archivePanel,
#navigationPanel,
#searchPanel {
    position: absolute;
    right: -200%;
    top: 0;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    z-index: 102;
}
label {
    padding: 10px 20px;
    font-size: 1.6em;
    float: right;
    margin-right: 5px;
    font-weight: 300;
}
label a {
    color: white;
}
label a:hover {
    color: rgba(255, 255, 255, .8);
}
label:last-of-type:hover,
label:nth-of-type(3):hover {
    background-color: rgba(255, 255, 255, .1);
}
label:nth-of-type(2) {
    margin: 0;
    padding-right: 0;
    padding-left: 0px;
}
label:nth-of-type(3) {
    padding-left: 20px;
}
label .fa-times {
    position: absolute;
    right: -300px;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
label .fa-times.contact {
    top: 120px;
}
label .fa-times.archive {
    position: absolute;
    right: 0px;
    top: -300px;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
label .fa-times.search {
    position: absolute;
    right: 328px;
    top: -300px;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
label .fa-times.search,
label .fa-times.navigation {
    top: 20px;
    right: -300px;
}
input[type="checkbox"] {
    display: none;
    margin-top: -999px;
}
input[type="checkbox"]:checked + label + #searchPanel {
    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}
input[type="checkbox"]:checked + label + #archivePanel,
input[type="checkbox"]:checked + label + #contactPanel,
input[type="checkbox"]:checked + label + #searchPanel,
input[type="checkbox"]:checked + label + #navigationPanel {
    display: block;
}
input[type="checkbox"]:checked + label + #archivePanel ~ .screen,
input[type="checkbox"]:checked + label + #contactPanel ~ .screen {
    left: 0;
}
input[type="checkbox"]:checked + label + #archivePanel {
    right: 0;
}
input[type="checkbox"]:checked + label + #searchPanel,
input[type="checkbox"]:checked + label + #navigationPanel {
    background-color: rgba(255, 255, 255, .99);
    height: 300%;
    width: 100%;
    z-index: 100;
    right: 0;
}
input[type="checkbox"]:checked + label + #contactPanel {
    width: 80%;
    right: 0;
}
input[type="checkbox"]:checked + label .contact,
input[type="checkbox"]:checked + label .archive,
input[type="checkbox"]:checked + label .search,
input[type="checkbox"]:checked + label .navigation {
    display: inline-block;
    position: absolute;
    width: inherit;
    z-index: 200;
    color: black;
    text-align: center;
    font-size: 2em;
    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}
input[type="checkbox"]:checked + label .contact {
    right: 0px;
    width: 10%;
    max-width: 150px;
    min-width: 70px;
    top: 120px;
    text-align: center;
}
input[type="checkbox"]:checked + label .archive {
    right: 0px;
    padding: 11px 13px;
    background-color: white;
    top: 0px;
}
input[type="checkbox"]:checked + label .search,
input[type="checkbox"]:checked + label .navigation {
    top: 20px;
    right: 2%;
    font-size: 1.3em;
    color: rgba(0, 0, 0, .8);
}

/*navigation panel*/

#navigationPanel {
    right: -300%;
    max-width: 100%;
    min-width: 350px;
    min-height: 800px;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
#navigationPanel .navbar-nav {
    width: 100%;
    margin: 0;
    text-align: center;
    margin-top: 60px;
    list-style: none;
    padding: 0;
}
#navigationPanel .navbar-nav li {
    padding: 15px 0;
    float: none;
}
#navigationPanel .navbar-nav li:focus {
    outline: 0px solid rgba(0, 0, 0, 0)
}
.nav>li>a:focus,
.nav>li>a:hover {
    background-color: transparent;
}
#navigationPanel .navbar-nav li a {
    color: rgba(0, 0, 0, .8);
    font-size: 3em;
    font-weight: 300;
    border-bottom: 5px solid transparent;
    padding: 15px;
    padding-bottom: 3px;
}
#navigationPanel .navbar-nav li a:hover {
    color: rgba(0, 0, 0, .8);
    font-weight: 400;
    border-bottom: 5px solid transparent;
    background-color: transparent;
}
#navigationPanel .navbar-nav .current-menu-item a {
    font-weight: 400;
}

/*TEST Navigation*/

label[for="contact"],
label[for="archive"] {
    border: 1px solid rgba(255, 255, 255, 0);
    background-color: rgba(255, 255, 255, .8);
    padding: 7px 10px;
    color: black;
    font-size: 1.2em;
    margin-top: 6px;
}
label[for="contact"]:hover,
label[for="archive"]:hover {
    border: 1px solid rgba(255, 255, 255, 0);
    background-color: rgba(255, 255, 255, 1);
    padding: 7px 10px;
    color: black;
    font-size: 1.2em;
    margin-top: 6px;
}
label[for="archive"] {
    border: 1px solid rgba(255, 255, 255, .8);
    background-color: rgba(255, 255, 255, 0);
    color: white;
}
label[for="navigation"] {
    font-size: 2.2em;
    padding: 5px 10px;
}
label:nth-of-type(2) {
    padding-right: 10px;
}

/*search panel*/

#searchPanel {
    min-height: 800px;
}
#searchPanel form {
    width: 100%;
}
#searchPanel form input {
    width: 70%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0);
    border: 0px solid transparent;
    border-bottom: 2px solid black;
    margin-left: 15%;
    margin-top: 200px;
    color: black;
    font-size: 2em;
}
#searchPanel form input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 1)
}
#searchPanel form input:focus {
    outline: 0px solid transparent;
    border-bottom: 4px solid black;
}
#searchPanel form button[type="submit"] {
    border: none;
    background: none;
}
#searchPanel form input + button[type="submit"] .fa-search {
    color: rgba(0, 0, 0, 0);
    font-size: 2.3em;
}
#searchPanel form input:focus + button[type="submit"] .fa-search {
    color: rgba(0, 0, 0, 1);
}

/*archive panel*/

#archivePanel h3 {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 14px 0px;
    background-color: slateblue;
    font-weight: 100;
}
#archivePanel h3 a {
    color: white;
}
#archivePanel h3:hover {
    width: 100%;
    text-align: center;
    color: white;
    margin: 0;
    padding: 14px 0px;
    background-color: dodgerblue;
    font-weight: 100;
}
#archivePanel ul {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
#archivePanel ul li {
    display: block;
    padding: 80px 100px 80px 20px;
    color: white;
    background-color: rgba(0, 0, 0, .8);
}
#archivePanel ul li a {
    display: block;
    padding: 10px 0px 10px 10px;
    font-size: 2.8em;
    color: white;
    background-color: rgba(0, 0, 0, .7);
}
#archivePanel ul li:first-child {
    background-image: url('https://cfblk.com/wp-content/themes/cfblk-theme/images/graffiti4.jpg');
    background-size: cover;
}
#archivePanel ul li:nth-child(2) {
    background-image: url('https://cfblk.com/wp-content/themes/cfblk-theme/images/graffiti3.jpg');
    background-size: cover;
}
#archivePanel ul li:nth-child(3) {
    background-image: url('https://cfblk.com/wp-content/themes/cfblk-theme/images/graffiti5.jpg');
    background-size: cover;
}
#archivePanel ul li:nth-child(4) {
    background-image: url('https://cfblk.com/wp-content/themes/cfblk-theme/images/graffiti2.jpg');
    background-size: cover;
}
#archivePanel ul li:nth-child(5) {
    background-image: url('https://cfblk.com/wp-content/themes/cfblk-theme/images/graffiti5.jpg');
    background-size: cover;
}
#archivePanel ul li:nth-child(6) {
    background-image: url('https://cfblk.com/wp-content/themes/cfblk-theme/images/graffiti2.jpg');
    background-size: cover;
}

/*pagination*/

.wp-pagenavi {
    margin-top: 20px;
    margin-left: 5px;
}
.wp-pagenavi span:first-of-type {
    border: 1px solid transparent;
}
.wp-pagenavi span.current {
    padding: 3px 10px;
}
.wp-pagenavi a {
    color: rgba(0, 0, 0, .6);
}

/*contact panel*/

#contactPanel {
    background-color: white;
    max-width: 500px;
    min-width: 350px;
    z-index: 101;
}
#contactPanel br {
    margin: 0;
    padding: 0;
}
#contactPanel-contact {
    padding: 40px 0 50px 0px;
    width: 80%;
    float: left;
    background-color: #d8d8d8;
    color: rgba(0, 0, 0, .8);
}
#contactPanel-contact h2 {
    font-size: 2.5em;
    padding-left: 28px;
}
#contactPanel-contact ul {
    list-style: none;
    padding: 0;
    padding-left: 28px;
}
#contactPanel-contact ul li {
    font-size: 1.4em;
}
#contactPanel-contact ul li:nth-child(4),
#contactPanel-contact ul li:nth-child(5) {
    display: inline-block;
    margin-top: 20px;
}
#contactPanel-contact ul li:nth-child(4) a,
#contactPanel-contact ul li:nth-child(5) a {
    color: black;
    font-weight: 600;
}
#contactPanel-contact ul li:nth-child(5) {
    margin-left: 7%;
}
#contactPanel-close {
    background-color: white;
    width: 20%;
    height: 100%;
    float: left;
}
#contactPanel-email {
    background-color: #807F87;
    width: 100%;
    padding: 60px 28px;
}
#contactPanel-email form div:nth-of-type(2) {
    width: 50%;
    float: left;
}
#contactPanel-email form div:nth-of-type(3) {
    width: 48%;
    margin-left: 2%;
    float: right;
}
#contactPanel-email form div:nth-of-type(2) input {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border: none;
    color: black;
}
#contactPanel-email form div:nth-of-type(3) textarea {
    width: 98%;
    height: 110px;
    border: 0px solid transparent;
    padding-top: 10px;
    padding-left: 10px;
    color: black;
}
#contactPanel-email form div:nth-of-type(3) .submitButton {
    width: 98%;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid white;
}
#contactPanel-email form div:nth-of-type(3) .submitButton:hover {
    width: 98%;
    background-color: lightgreen;
    border: 1px solid lightgreen;
}
div.wpcf7-mail-sent-ok {
    background-color: rgba(0, 0, 0, .2);
    border: 0px solid;
    font-size: 1.1em;
    text-align: center;
}
div.wpcf7-mail-sent-ng {
    border: 2px solid tomato;
    background: tomato;
}
span.wpcf7-not-valid-tip {
    color: white;
    font-size: 1em;
    font-weight: normal;
    display: block;
}
div.wpcf7-validation-errors {
    border: 2px solid transparent;
    color: #f7e700
}
#contactPanel-map {
    position: relative;
    border-bottom: 8px solid rgba(0, 0, 0, .5);
}
#contactPanel-map a + a {
    position: absolute;
    background-color: white;
    width: 50%;
    left: 25%;
    text-align: center;
    padding: 5px 0;
    top: 50px;
    font-size: 1.4em;
    color: rgba(0, 0, 0, .8);
    box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.5);
}
#contactPanel-map img {
    width: 100%;
}

/*social media*/

aside {
    position: absolute;
    right: 0;
    bottom: 30%;
    z-index: 99;
    width: 100%;
    text-align: center;
}
aside ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
aside ul li {
    text-align: center;
    display: inline-block;
}
aside ul li a {
    color: white;
    font-size: 2em;
    padding: 20px
}
aside ul li a:hover {
    color: rgba(255, 255, 255, .8);
}

/*main content*/

#mainContent {
    position: relative;
    top: -4px;
}
#mainContent > h1 {
    text-align: center;
    font-size: 4em;
    color: rgba(0, 0, 0, .8);
    font-weight: 300;
    margin: 50px auto 100px auto;
    padding-top: 20px
}
#timeline {
    display: none;
    position: absolute;
    width: 1%;
    background-color: rgba(0, 0, 0, .05);
    left: 49.5%;
    top: 200px;
    height: 90%;
    z-index: -1;
}

/*post*/

.post {
    width: 600px;
    margin: 40px 0 40px 23%;
    float: left;
}
.post:hover {
    box-shadow: 0px 20px 30px -10px rgba(0, 0, 0, .6);
}
.post:nth-of-type(even) {
    float: right;
    margin: 40px 23% 40px 0;
}
.postInfo {
    padding: 15px 20px;
    background-color: white;
}
.postInfo .button.ghost {
    margin-left: 4%;
    padding: 5px 10px;
    font-size: 1.1em;
}
.postTitle,
.postDate {
    float: left;
    margin: 0;
    padding: 0;
}
.postTitle {
    padding-top: 5px;
    font-size: 2.5em;
    text-transform: uppercase;
    font-weight: 600;
    width: 80%;
    line-height: 120%;
}
.postDate {
    float: right;
    text-align: center;
    font-size: 1.5em;
}
.postDate span {
    font-size: 1.6em
}
.postScheme {
    font-size: 1.5em;
    padding-left: 3%;
    font-weight: 600
}
.postWorkout p,
.excerpt {
    font-size: 1.2em;
    padding-left: 4%;
    line-height: 170%;
}
.excerpt {
    width: 95%;
    margin: 10px 0;
    font-weight: 400;
}
.post .postImageBox img {
    width: 100%;
}
.postImageBox {
    position: relative;
}
.post .postImageBox > div:nth-of-type(2) {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
    padding: 10px 0 5px 0;
    text-align: center;
}
.post .postImageBox > div:nth-of-type(2) p {
    margin-left: 10%;
    width: 80%;
    font-style: italic;
    color: rgba(255, 255, 255, .8);
}
.post .postImageBox > div[class="Yes"] + div {
    display: none;
}

/*getting started*/

.pageText {
    max-width: 1000px;
    margin: 50px auto;
}
.pageText h2,
.pageText h1 {
    font-size: 2.2em;
    margin-left: 2%;
}
.pageText h3,
.pageText h4,
.pageText h5,
.pageText h6 {
    font-size: 1.6em;
    color: rgba(0, 0, 0, .8);
    line-height: 180%;
}
.pageText p {
    font-size: 1.4em;
    line-height: 180%;
    width: 95%;
    margin: 10px auto;
    color: rgba(0, 0, 0, .7)
}
.pageText p,
.pageText h3 {
    width: 95%;
    margin: 10px auto;
}
.pageText h2 + h2 {
    margin: 60px 2%;
}
.pageText p + h2 {
    margin-top: 60px;
}

/*about page*/

#welcomeParagraph {
    text-align: center;
    font-size: 1.5em;
    line-height: 180%;
    padding: 15px;
    max-width: 1100px;
    margin: -45px auto 100px auto;
}

/*bio posts*/

#bioPostContainer {
    max-width: 900px;
    margin: 0 auto;
}
#bioPostContainer:after {
    content: "";
    display: table;
    clear: both;
}
.bioPost {
    width: 31.3333333333%;
    margin: 20px 1%;
    position: relative;
    overflow: hidden;
    float: left;
}
.bioPost:hover {
    box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, .8);
}
.bioPost img {
    width: 100%;
}
.bioPostInfo {
    position: absolute;
    bottom: 0px;
    background-color: rgba(255, 255, 255, .9);
    width: 100%;
    padding: 5px 10px;
    height: 75px;
}
.bioPost:hover .bioPostInfo {
    bottom: 0;
    height: 120px;
}
.bioPostInfo h2,
.bioPostInfo h3 {
    font-size: 1.8em;
    font-weight: 100;
    margin: 5px 0;
}
.bioPostInfo h3 {
    font-size: 1.1em;
    font-style: italic;
}
.bioPostInfo .moreInfoPanel {
    display: none;
}
.bioPostInfo .moreInfoPanel h3 {
    font-size: 1.8em;
    font-style: normal;
    font-weight: 400
}
.bioPostInfo .moreInfoPanel p {
    font-size: 1.1em;
    font-style: normal;
    line-height: 180%;
    margin-top: 20px
}
.bioPost label {
    float: none;
    position: absolute;
    right: 10px;
    bottom: 0px;
    opacity: 0;
    -webkit-transition: all .05s ease-in-out;
    transition: all .05s ease-in-out;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    z-index: 100000
}
.bioPost:hover label {
    opacity: 1;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}
.bioPost label.button {
    padding: 0px;
    padding: 5px 10px;
    font-size: 1em;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.bioPost label.button:hover {
    padding: 0px;
    padding: 5px 10px;
    font-size: 1em;
}
.bioPost input[type="checkbox"]:checked + label + .bioPostInfo {
    height: 100%;
}
.bioPost input[type="checkbox"] + label + .bioPostInfo .moreInfoPanel {
    position: absolute;
    top: 300px;
    width: 100%;
    display: block;
    background-color: white;
    left: 0;
    bottom: 0;
    padding: 10px 25px 0 15px;
}
.bioPost input[type="checkbox"]:checked + label + .bioPostInfo .moreInfoPanel {
    top: 0;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
}
.bioPost input[type="checkbox"] + label .bio {
    display: inline-block;
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0;
    width: inherit;
    z-index: 100;
    color: black;
    text-align: center;
    font-size: 2em;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    display: none;
}
.bioPost input[type="checkbox"]:checked + label .bio {
    display: inline-block;
    -webkit-animation: fadeIn .5s .5s ease-in-out forwards;
    animation: fadeIn .5s .5s ease-in-out forwards;
}
.bioPost input[type="checkbox"]:checked + label {
    opacity: 1;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    border: 0px solid;
    color: transparent;
    -webkit-animation: slideDown 1s .3s ease-in-out forwards;
    animation: slideDown 1s .3s ease-in-out forwards;
}
.bioPost input[type="checkbox"]:checked + label.button:hover {
    background-color: rgba(0, 0, 0, 0)
}

/*archive pst*/

.archiveTitle {
    margin-left: 2%
}
.archivePost {
    width: 23%;
    height: 240px;
    position: relative;
    float: left;
    margin: 20px 1%;
    background-size: cover;
    background-position: center center;
}
.archivePost:hover {
    box-shadow: 0px 20px 30px -10px rgba(0, 0, 0, .6);
}
.archivePost .black {
    background-color: rgba(0, 0, 0, .5);
    height: 100.2%;
}
.archivePost:hover .black {
    background-color: rgba(0, 0, 0, .2)
}
.archivePostInfo {
    position: absolute;
    color: white;
    text-align: left;
    padding: 10px;
}
.archivePostTitle {
    margin: 3px 0;
    font-size: 1.9em;
    font-weight: 600;
    margin-bottom: 0;
}
.archivePostDate {
    margin: 3px 0;
    font-weight: 100;
    font-size: 1.1em;
}
.archivePostDate span {
    margin-left: 5px;
    font-weight: 100;
    font-size: 1.2em;
}
.bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

/*pricing*/

.headerRow {
    width: 75%;
    margin: 20px auto;
}
.headerRow .pricingColumn .pricingPost {
    float: left;
    margin-right: 5%;
    padding: 30px 100px
}
.columns,
.footerRow {
    max-width: 1300px;
    margin: 20px auto;
    padding: 0px 2%;
}
.takeAction {
    max-width: 1000px;
    margin: 20px auto;
    padding: 0px 2%;
}
.columns .pricingColumn {
    width: 31.33333333333%;
    margin: 20px 1%;
    float: left;
}
.columns > .pricingColumn:nth-of-type(7) {
    clear: both;
}
.pricingPost {
    background-color: white;
    text-align: center;
    padding: 30px 0px
}
.pricingPost h2 {
    font-size: 1.3em;
    text-transform: uppercase;
}
.pricingPostPrice {
    font-size: 1.3em;
    vertical-align: top;
}
.pricingPostPrice span {
    font-size: 4em;
    font-weight: 700;
}
.columns .pricingDescription,
.headerRow .pricingColumn .pricingDescription {
    width: 80%;
    margin: 40px auto;
    line-height: 180%
}
.footerRow h3 {
    font-size: 1.2em;
}
.footerRow p {
    line-height: 180%
}
.columns > .pricingColumn:nth-of-type(2) + br,
.columns > .pricingColumn:nth-of-type(4) + br {
    display: none;
}

/*schedule*/

#legend {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 5px;
}
#legend li {
    margin: 10px 0px;
    font-size: 1em;
}
#legendContainer h2 {
    font-size: 1.3em;
    font-family: sans-serif;
    font-weight: 400;
    margin: 0;
    margin-top: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    width: 50%;
}
.red {
    color: tomato;
}
.blue {
    color: dodgerblue;
}
.slate {
    color: darkslateblue;
}
#tableContainer {
    width: 80%;
    margin: 0px auto 30px auto;
    padding: 50px;
    background-color: white;
    max-width: 1000px;
}
#tableContainer:hover {
    box-shadow: 0px 20px 30px -10px rgba(0, 0, 0, .6);
}
#schedule {
    width: 100%;
    padding: 50px;
    background-color: white;
    text-align: center;
    border-collapse: collapse;
}
#legendContainer,
#schedule {
    max-width: 900px;
    margin: 0 auto;
}
.thead {
    background-color: lightslategray;
    color: white;
    border: 1px solid lightslategray;
}
th {
    font-size: 1.4em;
    text-align: center;
}
td {
    padding: 10px 0;
    font-size: 1.1em;
    width: 12.8571%;
}
td:hover {
    background-color: rgba(0, 0, 0, .1);
}
#tableContainer > p {
    display: none;
}
tr td:first-of-type {
    text-align: left;
    padding-left: 10px;
    color: rgba(0, 0, 0, .7);
    width: 10%;
}
tr:nth-of-type(2n+2) {
    background-color: rgba(0, 0, 0, .04)
}
#schedule:hover tr {
    background-color: rgba(0, 0, 0, 0);
}
#schedule:hover .thead {
    background-color: darkslategray;
}
#schedule tr:hover {
    background-color: rgba(0, 0, 0, .1);
}

/*footer*/

footer {
    margin-top: 100px;
    padding: 10px 20px 40px 20px;
    background-color: black;
    color: rgba(255, 255, 255, .5);
}
#footerContainer {
    max-width: 1000px;
    margin: 0 auto;
}
footer > div div {
    width: 33.3333333%;
    float: left;
    margin-top: 20px;
    font-size: 1.1em;
}
footer ul {
    list-style: none;
    text-align: center;
    padding: 0;
}
footer ul li a,
footer ul li {
    color: rgba(255, 255, 255, .5);
}
footer:hover ul li a,
footer:hover ul li {
    color: rgba(255, 255, 255, 1);
}
footer:hover ul li a:hover {
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
}
#footerLogo,
#footerSocial {
    width: 100%;
    float: none;
}
#footerLogo {
    margin-bottom: 10px;
}
#footerLogo img {
    width: 15%;
    margin-left: 42.5%;
    max-width: 300px
}
#footerSocial ul li {
    display: inline-block;
    font-size: 1.5em;
    margin: 0 10px;
}
footer .journal {
    display: block;
    margin: 0 auto;
    float: none;
    max-width: 125px;
    margin-top: 30px;
}
footer .journal img {
    width: 100%;
    border-radius: 4px;
}

/*wheelus branding*/

.wheelus-branding {
    width: 100%;
    padding: 15px;
    background-color: darkslateblue;
}
.wheelus-branding:after {
    content: "";
    display: table;
    clear: both;
}
.wheelus-branding div {
    width: 310px;
    margin: 0 auto;
}
.wheelus-branding div img {
    float: left;
    width: 40px;
    margin-right: 10px;
    margin-top: 5px;
}
.wheelus-branding div p {
    float: left;
    color: rgba(255, 255, 255, .5);
    margin-top: 5px;
}
.wheelus-branding div p a {
    color: rgba(255, 255, 255, .9);
}
.wheelus-branding div p a:hover {
    text-decoration: none;
}

/*Media Queries*/

@media screen and (min-width: 1500px) {
    /*bio posts*/
    #bioPostContainer {
        max-width: 1200px;
        margin: 0 auto;
    }
    #bioPostContainer:after {
        content: "";
        display: table;
        clear: both;
    }
    .bioPost {
        width: 31.3333333333%;
        margin: 20px 1%;
        position: relative;
        overflow: hidden;
        float: left;
    }
    .bioPost img {
        width: 100%;
    }
    .bioPostInfo {
        position: absolute;
        bottom: 0px;
        background-color: rgba(255, 255, 255, 1);
        width: 100%;
        padding: 5px 10px;
        height: 75px;
    }
    .bioPost:hover .bioPostInfo {
        bottom: 0;
        height: 120px;
    }
    .bioPostInfo h2,
    .bioPostInfo h3 {
        font-size: 1.8em;
        font-weight: 100;
        margin: 5px 0;
    }
    .bioPostInfo h3 {
        font-size: 1.1em;
        font-style: italic;
    }
    .bioPostInfo .moreInfoPanel {
        display: none;
    }
    .bioPostInfo .moreInfoPanel h3 {
        font-size: 1.8em;
        font-style: normal;
        font-weight: 400
    }
    .bioPostInfo .moreInfoPanel p {
        font-size: 1.1em;
        font-style: normal;
        line-height: 180%;
        margin-top: 20px
    }
    .bioPost label {
        float: none;
        position: absolute;
        right: 10px;
        bottom: 0px;
        opacity: 0;
        -webkit-transition: all .05s ease-in-out;
        transition: all .05s ease-in-out;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
        z-index: 100000
    }
    .bioPost:hover label {
        opacity: 1;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
    }
    .bioPost label.button {
        padding: 0px;
        padding: 5px 10px;
        font-size: 1em;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }
    .bioPost label.button:hover {
        padding: 0px;
        padding: 5px 10px;
        font-size: 1em;
    }
    .bioPost input[type="checkbox"]:checked + label + .bioPostInfo {
        height: 100%;
    }
    .bioPost input[type="checkbox"] + label + .bioPostInfo .moreInfoPanel {
        position: absolute;
        top: 300px;
        width: 95%;
        display: block;
        background-color: white;
        padding: 40px 25px 0 5px;
    }
    .bioPost input[type="checkbox"]:checked + label + .bioPostInfo .moreInfoPanel {
        top: 0;
        -webkit-transition: all .3s ease-in;
        transition: all .3s ease-in;
    }
    .bioPost input[type="checkbox"] + label .bio {
        display: inline-block;
        position: absolute;
        top: 5px;
        right: 5px;
        opacity: 0;
        width: inherit;
        z-index: 100;
        color: black;
        text-align: center;
        font-size: 2em;
        -webkit-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
        -webkit-transition-delay: .3s;
        transition-delay: .3s;
        display: none;
    }
    .bioPost input[type="checkbox"]:checked + label .bio {
        display: inline-block;
        -webkit-animation: fadeIn .5s .5s ease-in-out forwards;
        animation: fadeIn .5s .5s ease-in-out forwards;
    }
    .bioPost input[type="checkbox"]:checked + label {
        opacity: 1;
        -webkit-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
        border: 0px solid;
        color: transparent;
        -webkit-animation: slideDown 1s .3s ease-in-out forwards;
        animation: slideDown 1s .3s ease-in-out forwards;
    }
    .bioPost input[type="checkbox"]:checked + label.button:hover {
        background-color: rgba(0, 0, 0, 0)
    }
    input[type="checkbox"]:checked + label .contact {
        right: .5%;
        width: 6%;
        max-width: 150px;
        min-width: 70px;
    }
}
@media screen and (min-width: 1000px) {
    input[type="checkbox"]:checked + label .contact {
        right: .5%;
        width: 6%;
        max-width: 150px;
        min-width: 70px;
    }
}
@media screen and (max-width: 1126px) {
    /*header*/
    label {
        padding: 10px 20px;
        font-size: 1.4em;
    }
    /*post*/
    .post {
        width: 600px;
        margin: 40px auto;
        float: none;
    }
    .post:nth-of-type(even) {
        float: none;
        margin: 40px auto;
    }
    .archivePost {
        height: 200px;
    }
}
@media screen and (max-width: 1000px) {
    #tableContainer {
        width: 90%;
    }
    .wheelus-branding div img {}
}
@media screen and (max-width: 920px) {
    /*pricing*/
    .headerRow {
        width: 98%;
        max-width: 700px;
    }
    .headerRow .pricingColumn .pricingPost {
        margin-right: 3%;
    }
    .columns,
    .footerRow,
    .takeAction {
        max-width: 700px;
    }
    .columns .pricingColumn {
        width: 48%;
        margin: 20px 1%;
    }
    .columns > .pricingColumn:nth-of-type(3),
    .columns > .pricingColumn:nth-of-type(4),
    .columns > .pricingColumn:nth-of-type(5),
    .columns > .pricingColumn:nth-of-type(6) {
        clear: none;
        float: left;
    }
    .pricingPostPrice {
        font-size: 1.3em;
        vertical-align: top;
    }
    .columns > .pricingColumn:nth-of-type(2) + br,
    .columns > .pricingColumn:nth-of-type(4) + br {
        display: block;
    }
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
    .bioPost label {
        opacity: 1;
    }
    .bioPost label.button {
        margin: 10px 0 5px 2%;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .bioPost label {
        opacity: 1;
    }
    .bioPost label.button {
        margin: 10px 0 5px 2%;
    }
}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
    .bioPost label {
        opacity: 1;
    }
    .bioPost label.button {
        margin: 10px 0 5px 2%;
    }
}
@media screen and (max-width: 900px) {
    /*header video*/
    #headerVideo {
        background: transparent url('https://cfblk.com/wp-content/themes/cfblk-theme/video/iAmCrossfitPlaceholder.png') no-repeat 0 0;
        background-size: cover;
    }
    #headerVideo video {
        width: 150%;
        margin-left: -25%;
    }
    .screen {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    /*logo*/
    #logo {
        bottom: 45%;
    }
    #logo img {
        width: 50%;
    }
    /*social media*/
    aside {
        bottom: 35%;
    }
    aside ul li a {
        font-size: 2.3em;
        padding: 20px 30px
    }
    /*archive post*/
    .archivePost {
        width: 29.333333333333%;
        height: 180px;
        position: relative;
        float: left;
        margin: 20px 2%;
        background-size: cover;
        background-position: center center;
    }
    .archivePostTitle {
        font-size: 1.5em;
    }
    /*footer*/
    footer ul li a,
    footer ul li {
        color: rgba(255, 255, 255, .8);
    }
    footer:hover ul li a:hover {
        color: rgba(255, 255, 255, .7);
    }
    #footerLogo {
        margin-bottom: 30px;
    }
    #footerLogo img {
        width: 25%;
        margin-left: 37.5%;
    }
    #footerSocial ul li {
        margin: 30px 10px 10px 10px;
    }
    #timeline {
        width: 3%;
        left: 48.5%;
        top: 200px;
        height: 90%;
    }
}
@media screen and (max-width: 872px) {
    #tableContainer {
        width: 100%;
        margin: 0px auto 0px auto;
        padding: 30px;
        background-color: white;
    }
    #tableContainer:hover {
        box-shadow: none;
    }
}
@media screen and (max-width: 835px) {
    /*bio posts*/
    #bioPostContainer {
        max-width: 700px;
        margin: 0 auto;
    }
    .bioPost {
        width: 48%;
        margin: 20px 1%;
        position: relative;
        overflow: hidden;
        float: left;
    }
    .bioPost:hover,
    .archivePost:hover {
        box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 0);
    }
    .wheelus-branding div p span span {
        display: none;
    }
}
@media screen and (max-width: 745px) {
    /*schedule*/
    #legend {
        list-style: none;
        margin: 0;
        padding: 0;
        padding-left: 5px;
    }
    #legend li {
        margin: 10px 0px;
        font-size: 1em;
    }
    .red {
        color: tomato;
    }
    .blue {
        color: dodgerblue;
    }
    .slate {
        color: darkslateblue;
    }
    #tableContainer {
        padding: 10px;
    }
    #schedule {
        width: 100%;
        padding: 50px;
        text-align: center;
        border-collapse: collapse;
    }
    th {
        font-size: 1.2em;
        text-align: center;
    }
    td {
        padding: 10px 0;
        font-size: 1em;
        width: 11.4285%;
    }
    td:hover {
        background-color: rgba(0, 0, 0, .1);
    }
    tr td:first-of-type {
        text-align: left;
        padding-left: 10px;
        color: rgba(0, 0, 0, .7);
        width: 20%;
    }
    tr:nth-of-type(2n+2) {
        background-color: rgba(0, 0, 0, .04)
    }
    #schedule:hover tr {
        background-color: rgba(0, 0, 0, 0);
    }
    #schedule:hover .thead {
        background-color: darkslategray;
    }
    #schedule tr:hover {
        background-color: rgba(0, 0, 0, .1);
    }
}
@media screen and (max-width: 700px) {
    /*pricing*/
    .headerRow {
        width: 98%;
        max-width: 700px;
        margin: 20px auto;
    }
    .headerRow .pricingColumn .pricingPost {
        float: none;
        width: 102%;
        margin: 0 0 0 -1%;
        padding: 30px 100px;
        margin-bottom: 20px
    }
    .columns,
    .footerRow,
    .takeAction {
        max-width: 500px;
        margin: 20px auto;
        padding: 0%;
    }
    .footerRow,
    .takeAction {
        max-width: 500px;
        margin: 20px auto;
        padding: 20px;
    }
    .columns .pricingColumn {
        width: 100%;
        margin: 20px 0%;
        float: none;
    }
    .columns > .pricingColumn:nth-of-type(3),
    .columns > .pricingColumn:nth-of-type(4) {
        float: none;
    }
    .pricingPost {
        background-color: white;
        text-align: center;
        padding: 30px 0px
    }
    .pricingPost > br {
        display: block;
    }
    .pricingPost h2 {
        font-size: 1.5em;
        text-transform: uppercase;
    }
    .pricingPostPrice {
        font-size: 2em;
        vertical-align: top;
    }
    .pricingPostPrice span {
        font-size: 4.5em;
        font-weight: 700;
    }
    .pricingPostExcerpt {
        font-size: 1.2em;
    }
    .columns .pricingDescription,
    .headerRow .pricingColumn .pricingDescription {
        width: 90%;
        margin: 40px auto;
        line-height: 170%;
        font-size: 1.25em;
    }
    .footerRow h3 {
        font-size: 1.2em;
    }
    .footerRow p {
        line-height: 180%
    }
    .wheelus-branding div p span {
        display: none;
    }
    .wheelus-branding div {
        width: 180px;
    }
}
@media screen and (max-width: 650px) {
    /*search panel*/
    #searchPanel form input {
        font-size: 1.6em;
    }
    /*archive post*/
    .archivePost {
        width: 46%;
        height: 180px;
    }
    .archivePostTitle {
        margin: 3px 0;
        font-size: 1.7em;
        font-weight: 600;
        margin-bottom: 0;
    }
    .archivePostDate {
        margin: 3px 0;
        font-weight: 100;
        font-size: 1.3em;
    }
    /*footer*/
    footer {
        margin-top: 100px;
        padding: 10px 20px 40px 20px;
        background-color: black;
        color: rgba(255, 255, 255, .5);
    }
    #footerContainer div {
        width: 100%;
        float: none;
        margin-top: 25px;
        font-size: 1.1em;
    }
    footer ul {
        list-style: none;
        text-align: left;
        padding: 0;
    }
    #footerSocial ul li {
        margin: 30px 10px 10px 10px;
    }
    footer ul li a,
    footer ul li {
        color: rgba(255, 255, 255, .8);
    }
    footer:hover ul li a:hover {
        color: rgba(255, 255, 255, .7);
    }
    #footerLogo,
    #footerSocial {
        width: 100%;
        float: none;
    }
    #footerLogo {
        margin-bottom: 40px;
    }
    #footerLogo img {
        min-width: 213.141px;
        width: 35%;
        margin-left: 0%;
    }
    /*#footerLogo {
    margin-bottom: 30px;
}
#footerLogo img {
    width: 25%;
    margin-left: 0%;
}*/
    #footerSocial ul li {
        display: inline-block;
        font-size: 1.3em;
        margin: 0 10px;
    }
    #timeline {
        width: 3%;
        left: 48.5%;
        top: 200px;
        height: 90%;
    }
    footer .journal {
        margin: 30px 0 auto 0;
        max-width: 125px;
    }
}
@media screen and (max-width: 600px) {
    /*main content*/
    #mainContent > h1 {
        font-size: 4em;
        color: rgba(0, 0, 0, .8);
        margin-top: 100px;
        padding-top: 0px;
    }
    #timeline {
        width: 3%;
        left: 48.5%;
        top: 200px;
        height: 93%;
    }
    /*header video*/
    #headerVideo video {
        width: 200%;
        margin-left: -50%;
    }
    /*logo*/
    #logo {
        bottom: 45%;
    }
    #logo img {
        width: 50%;
    }
    /*social media*/
    aside {
        bottom: 35%;
    }
    aside ul li a {
        font-size: 2.3em;
        padding: 20px 30px
    }
    /*post*/
    .post {
        width: 99%;
        margin: 100px auto 0 auto;
        float: none;
    }
    .post:hover {
        box-shadow: 0px 20px 30px -10px rgba(0, 0, 0, 0);
    }
    .post:nth-of-type(even) {
        float: none;
        margin: 100px auto 0 auto;
    }
    .postInfo {
        padding: 15px 20px;
        background-color: white;
    }
    .postTitle,
    .postDate {
        float: left;
        margin: 0;
        padding: 0;
    }
    .postTitle {
        padding-top: 10px;
        font-size: 2.5em;
    }
    .postDate {
        float: right;
        text-align: center;
        font-size: 1.4em;
    }
    .postDate span {
        font-size: 2.2em
    }
    .postScheme {
        font-size: 1.4em;
        padding-left: 3%;
    }
    .postWorkout p {
        font-size: 1.2em;
        padding-left: 4%;
        line-height: 180%;
    }
    .post .postImageBox img {
        width: 100%;
    }
    /*bio post*/
    .bioPost {
        width: 100%;
        margin: 30px auto;
        float: none;
        max-width: 400px;
    }
    .bioPostInfo h2,
    .bioPostInfo h3 {
        font-size: 1.8em;
    }
    .bioPostInfo h3 {
        font-size: 1.2em;
    }
    .bioPost label {
        opacity: 1;
    }
    .bioPost:hover .bioPostInfo {
        height: 75px;
    }
}
@media screen and (max-width: 550px) {
    #headerVideo video {
        width: 300%;
        margin-left: -100%;
    }
    /*logo*/
    #logo {
        bottom: 45%;
    }
    #logo img {
        width: 85%;
    }
    /*social media*/
    aside {
        bottom: 35%;
    }
    aside ul li a {
        font-size: 2em;
        padding: 20px 30px
    }
    /*post*/
    .post,
    .post:nth-of-type(even) {
        width: 100%;
        margin: 100px auto 0 auto;
        float: none;
    }
    .post:first-of-type {
        margin-top: 50px;
    }
    .post:hover {
        box-shadow: 0px 20px 30px -10px rgba(0, 0, 0, 0);
    }
    .postInfo {
        padding: 20px 20px 30px 20px;
    }
    .postTitle,
    .postDate {
        float: left;
        margin: 0;
        padding: 0;
    }
    .postTitle {
        padding-top: 12px;
        font-size: 2.4em;
    }
    .postDate {
        float: right;
        text-align: center;
        font-size: 1em;
    }
    .postScheme {
        font-size: 1.4em;
    }
    .postWorkout p {
        font-size: 1.2em;
        line-height: 180%;
    }
    .excerpt {
        margin: 20px 0 30px 0;
    }
    /*archive pst*/
    .archivePost {
        width: 96%;
        height: 240px;
    }
    .archivePostTitle {
        margin: 3px 0;
        font-size: 1.7em;
        font-weight: 600;
        margin-bottom: 0;
    }
    .archivePostDate {
        margin: 3px 0;
        font-weight: 100;
        font-size: 1.3em;
    }
    /*labels*/
    label {
        padding: 13px 20px;
    }
    /*label:last-of-type:hover,
label:nth-of-type(3):hover {
    background-color: rgba(255, 255, 255, 0);
}*/
    label:nth-of-type(2) {
        margin: 0;
        padding-right: 10px;
    }
    label:first-of-type {
        font-size: 2.3em;
        padding-top: 3px;
        margin-left: 10px
    }
    /*contact panel*/
    input[type="checkbox"]:checked + label + #contactPanel {
        width: 100%;
    }
    /*search panel*/
    input[type="checkbox"]:checked + label .navigation {
        font-size: 1em;
    }
    /*welcome paragraph*/
    #welcomeParagraph {
        font-size: 1.3em;
        line-height: 170%;
        margin: -85px auto 80px auto;
    }
    /*navigation*/
    #navigationPanel .navbar-nav li a {
        font-size: 2.8em;
    }
}
@media screen and (max-width: 499px) {
    #navigationPanel ul {
        text-align: center;
    }
    input[type="checkbox"]:checked + label .search,
    input[type="checkbox"]:checked + label .navigation {
        right: 5%;
    }
    #archivePanel ul li a {
        display: block;
        padding: 10px 0px 10px 10px;
        font-size: 2.6em;
        color: white;
        background-color: rgba(0, 0, 0, .7);
    }
    input[type="checkbox"]:checked + label .archive {
        right: 0px;
        padding: 11px 13px;
        background-color: white;
        top: 0px;
    }
}