.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

.montserrat-400 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

:root {
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1.5rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 2.2;   
    --mas-dark-blue: hsl(212, 60%, 28%);
    --bs-body-color: hsl(214, 16%, 37%);    
    --bs-body-bg: hsl(0, 0%, 100%);
    --bs-footer-color: hsl(0, 0%, 100%);
    --bs-footer-bg: hsla(321, 84%, 57%, 0.6);
    --header-color: hsl(321, 84%, 57%);
    --bs-blue: hsl(214, 83%, 57%);
    --bs-dark-blue: hsl(214, 100%, 30%);
    --bs-green: hsl(114, 83%, 57%);    
    --bs-pink: hsl(321, 84%, 57%);
    --bs-hotpink: hsl(330, 100%, 70%);
    --bs-orange: hsl(39, 83%, 57%);
    --bs-purple: hsl(321, 28%, 47%);
    --bs-gray: hsl(214, 16%, 37%);
    --bs-light-rgb: hsl(155, 43%, 80%);
}

header {
    background-color: var(--bs-white);
}

body {    
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;    
}

footer {    
    background-color: var(--bs-dark);
    border-top: 3px solid var(--bs-dark-blue) !important;
}

.mb-3 {
    margin-bottom: 3rem !important;
}

.navbar-masculine {
  background-color: hsl(0, 0%, 100%);
  border-bottom: .2rem solid var(--mas-dark-blue);
}

.navbar-masculine .navbar-brand {
  color: var(--mas-dark-blue);
  font-weight: 600;
  font-size: 1.5rem;
}

.navbar-masculine .navbar-brand:hover {
  color: var(--bs-pink);  
}
.navbar-masculine .navbar-brand:focus {
  color: var(--bs-pink);
}

.navbar-masculine .navbar-toggler {
  border: 3px solid transparent;
}

.navbar-masculine .navbar-toggler:focus {
  box-shadow: 0 0 0 0;
}

.navbar-masculine .navbar-toggler.collapsed .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='hsl(212, 60%, 28%)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-masculine .navbar-toggler.collapsed:hover .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='hsl(321, 84%, 57%)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-masculine .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='hsl(212, 60%, 28%)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M6 6L24 24M24 6L6 24'/%3e%3c/svg%3e");
}

.navbar-masculine .navbar-toggler:hover .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='hsl(321, 84%, 57%)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M6 6L24 24M24 6L6 24'/%3e%3c/svg%3e");
}


.navbar-masculine .navbar-nav .nav-link {  
  color: var(--mas-dark-blue);
  font-weight: 500;  
}
.navbar-masculine .navbar-nav .nav-link:hover {
  color: var(--bs-pink);  
}
.navbar-masculine .navbar-nav .nav-link:focus {
  color: var(--bs-pink);    
}
.navbar-masculine .navbar-nav .nav-link .disabled {
  color: var(--mas-dark-blue);  
}
.navbar-masculine .show > .nav-link {
  color: var(--mas-dark-blue);  
}
.navbar-masculine .nav-link.active {
  font-weight: bold;
}

.head-shot {
    max-width: 100%;
    max-height: 100%;        
    object-fit: cover;
    object-position: top;
    padding-bottom: 2rem;

}

.head-title {
    color: var(--bs-white);
    padding: 12px;
}

.head-title p {
    margin: 0;
    padding: 0 0 12px 0;
    line-height: initial;
}

.instructor {    
    padding: 0 0 1.8rem 0;        
    font-family: "Montserrat", sans-serif;
    text-align: center;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--bs-dark);
}

.instructor-title {
    color: var(--bs-dark);
    font-style: italic;
    font-weight: 500;
    text-align: center;
    margin-top: -3rem;
}


.card {    
    /* box-shadow: 2px 2px 5px 0px var(--bs-green); */
    border: 1px solid transparent;
}

.card-header {
    padding: .5rem 1rem;
    margin-bottom: 0;
    color: black;
    background-color: white;
    border: 1px solid transparent;
    border-bottom: 1px solid black;
    font-weight: 600;
    font-size: 1.6rem;
    text-align: center;
    text-transform: uppercase;
}

.card .card-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    height: 275px;
}

.card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;  
}

.card .img-small {
    max-height: 120px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.card-table table {
    width: 100%;
    min-width: 416px;
    margin-bottom: 5rem;
}

.card-table table thead tr {
    border-bottom:  1px solid black;
}

.card-table table thead th {
    object-fit: contain;
}

.card-table table th, .card-table table td {
    font-size: 1rem;
    color: black;
}

.card-table table tbody td {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.card-table table thead td:nth-child(1),
.card-table table tbody td:nth-child(1) {
    width: 120px;
    text-align: center;
}

.card-table table tbody tr:hover {
    background-color: var(--bs-light-rgb);
}

.card-table table tbody tr:hover td {
    color: rgb(0, 0, 0);
}

.card-table table img {
    max-height: 2.5rem;
}

.logo {
    object-fit: contain !important;
    padding: 0 1em !important;
    max-height: 100px !important;
    margin-top: 85px !important;
}

.mobile, .tablet, .desktop, .tv {
    display: none !important;
}

a.gearLink {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 240px;
    padding: 0.5rem;
}

a.gearLink:hover {
    background-color: #e1e8fb;
}

img.gearLogo {
    max-width: 200px;
    max-height: 200px;    
}

.blackBackGround {
    background-color: black;
    padding: 1rem;
}

.nav-center {
    align-items: center;
    justify-content: flex-start;
}

.nav-item {
    padding: 0 0.5rem;
}

.nav-link {
    color: var(--bs-dark-blue);
    padding: .25rem 0;        
    /*text-decoration: overline; */
    border-top: 2px solid var(--bs-dark-blue);
}

@media (max-width: 576px) {
    .d-xs-none {
        display: none !important;
    }
}

@media (min-width: 576px) {
    .d-sm-none {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .mobile {
        display: block !important;
    }   
}

@media (min-width: 768px) and (max-width: 991px) {
    .tablet {
        display: block !important;
    }


}

@media (min-width: 992px) and (max-width: 1200px) {
    .desktop {
        display: block !important;
    }
}

@media (min-width: 1200px) {
    .tv {
        display: block !important;
    }
}

@media (min-width: 768px ) {
    header {    
        background-image: url('../media/banner.jpg');
        background-position: top left;
        background-repeat: no-repeat;
        background-size: cover;
        /*background-attachment: fixed;*/
        /*border-bottom: 1px solid rgb(27 24 26);*/
        /* min-height: 36vh;*/
    }

    .nav-center {
        align-items: center;
        justify-content: space-between;
    }    

    .head-shot {
        height: 350px;
    }

    .flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .flex-item {
        flex: 0 0 auto;
        width: 50%;
    }    
}

@media (min-width: 992px) {
    .head-shot {
        height: 400px;
    }
    
    .split-read {
        column-count: 2;
        column-gap: 2.5rem;
    }

    .flex-item {
        flex: 0 0 auto;
        width: 33%;
    } 
}
