*{
    box-sizing:border-box;
    --feirButtonColor: rgb(128, 86, 149);
    --feirHeader:rgb(58, 71, 132);
}

.pageWrapper{
    max-width:1175px;
    padding:12px;
    margin:0 auto;
    background-color: white;
}

.pageWrapper h1, .pageWrapper h2, .pageWrapper h3, .pageWrapper h4, .pageWrapper h5, .pageWrapper h6{
    font-weight:bold;
    font-family: Helvetica, sans-serif;
}

.italText{
    font-style: italic;
}

.centerText{
    text-align:center;
}

.centerObj{
    display:block;
    margin-left: auto;
    margin-right:auto;
}

.colorWhite{
    color:white;
}

.pageButton{
    background-color: rgb(16, 16, 117);
    padding:10px;
    display:grid;
    place-items:center;
    text-align:center;
    color:white;
    text-decoration: none;
    font-weight:bold;
    border-radius:30px;
}

.fullWidth{
    width:100vw;
    margin-inline-start: 50%;
    transform:translateX(-50%);
}

.grid{
    display:grid;    
    place-items:center;
}

.flexColumn{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}

.twoColumn{
    grid-template-columns: 1fr 1fr;
    gap:1rem;
}


/* TEMPLATE END */

.pageWrapper p{
    font-size: clamp(13px, 2vw, 16px);
    line-height: 1.5em;
    color:rgb(79, 78, 87);
    margin: 1.7em auto;
    font-family:sans-serif;
}

.pageWrapper ul{
    margin:-8px auto 8px auto;
    list-style:disc !important;
    padding-left:8px;
    margin-left:28px;
}

.pageWrapper li{
    padding-left:10px;
    font-size:13px !important;
    line-height:1.4em !important;
    opacity:.8;   
    color:rgb(92, 114, 124) !important;
    margin: 8px auto 8px auto;
    list-style-position:outside !important;
}

.subpageHeading, .subpageSubHeading{
    font-size:clamp(18px, 6vw, 34px);
    text-align:center;
    color:var(--feirHeader);
    margin:28px auto 12px auto;
    line-height:1.4em;
}

.subpageSubHeading{
    font-size: clamp(12px, 3vw, 22px);
    font-weight:normal !important;
    font-style:italic;
    margin:12px auto 28px auto;
}

.csLevelHeading{
    background-color:rgb(28, 28, 28);
    color:white;
    font-size: clamp(16px, 3vw, 28px);
    text-align:center;
    padding:1.5em;
    text-transform: uppercase;
    margin:32px auto !important;
}

.feirBioWrap{
    margin:24px 0 18px 0;
    grid-template-columns: min(250px,100%) 1fr;
    gap:24px;
}

.feirBio h1{
    color:var(--feirHeader);
    font-size:clamp(18px, 4vw, 32px);
    margin:10px 0;
}

.feirImage{
    content: "";
    background-image: url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/FeierabendResources/Assets/Photos_Images/JohnFeierabend.jpg);
    background-size: cover;
    background-position:left;
    width:100%;
    min-height:275px;
    border-radius:20px;
    border: 5px solid var(--feirHeader);
}

.fullLine{
    content: "";
    margin-top:18px;
    margin-bottom:18px;
    height:4px;
    background-color:rgb(216, 216, 216);
}

.feirBaseButton{
    background-color: var(--feirButtonColor);
    transition:.5s ease-in-out;
    padding:14px;
}

.feirBaseButton:hover, .feirBaseButton:focus{
    background-color: purple;
    color:white;
}

.pageButton:hover, .pageButton:focus{
    color:white;
}

.seriesImage{
    max-width:98%;
    border-radius:15px;
    border:5px solid #F3CA52;
}

.seriesGrid{
    margin-top:32px;
    place-items:unset;
}


.seriesWrapper{ 
    align-items: center;
}

.seriesTitle{
    font-size:clamp(20px, 3vw, 32px);
    letter-spacing:-1px;
    color:var(--feirHeader);
    text-align:center;
    margin:0 auto 14px auto;
}

.seriesButton{
    width:90%;
    margin-left:auto;
    margin-right:auto;
}

.FSMainButtonWrap{
    width:100%;
    margin:28px auto !important;
}

.fameList{
    font-size: clamp(13px, 2vw, 16px);
    line-height: 1.5em;
    color:rgb(79, 78, 87);
    margin-bottom:1.8em;
    font-family:sans-serif;
}

.fameList li{
    margin-bottom:1.8rem;
}


/* First Steps Series Page */

.FSSeriesGrid{
    background-color:rgb(235, 234, 240);
    gap:6px;
}

.FSSeriesWrap{
    background-color:white;
    padding:20px;
}

.FSSeriesCopy{
    max-width:50ch;
    text-align:center;
    margin:auto;
    font-size:13px !important;
    opacity:75%;
    text-align:justify;
}

.FSSeriesInfo{
    background-color:rgb(247, 249, 252);
    align-items: center;
    width:100%;
    height:100%;
    margin:auto;
    border:3px solid rgb(195, 208, 215);
    padding:20px 10px;
    border-radius:15px;
}

.FSSeriesImage{
    border:none;
    margin-bottom:32px;
}

.FSMainSeriesTitle{
    margin:0px auto 18px auto !important;
}

.FSHeader{
    background-color:var(--feirHeader);
    color:white;
    padding:25px 15px;
    font-size:clamp(22px, 3vw, 32px);
    margin:24px auto;
}

.resourceHeader{
    padding:32px 25px;
    margin:32px auto;
    background-image:linear-gradient(rgba(0, 0, 0, 0.00), rgba(255, 255, 255, 0.15),rgba(0, 0, 0, 0.00));
    line-height:1.4em;
    background-color:rgb(87, 95, 151);
    text-shadow:2px 2px rgba(0, 0, 0, 0.2);
    text-transform:uppercase;
}

.FSAddImage{
    margin-bottom:18px;
}

.FSResourceGrid{
    margin-top:24px;
}

/* Resource Display Grid */

.resourceGrid{
    grid-template-columns: repeat(auto-fit, minmax(min(475px,100%), 1fr));
    gap:28px;
}

.featuredResourceGrid{
    grid-template-columns: 1fr;
    grid-column: 1/-1;
    place-items:center;
    margin:24px auto;
    /* background-image:linear-gradient(rgb(73, 47, 73), rgb(98, 63, 93),rgb(73, 47, 73));
    background-image:linear-gradient(rgb(229, 239, 248), rgb(255, 255, 255),rgb(229, 239, 248)); 
     border: 2px solid #e5eaf4;
      padding:4% 2%;
     */

}

.resourceContainer{
    display:flex;
    align-items:center;
    justify-items:space-between;
    height:100%;
}

.specialtyResource{
    background-color:#363a54;
    background-image: none;
    border:0;
    margin:24 auto;
    padding:48px 12px;
}

.fullWidthResourceContainer{
    grid-column: 1/-1;
}

.gridResourceImg{
    max-width:100%;
    display:block;
    max-height:275px;
    border:1px solid rgb(220, 220, 220);
    object-fit: contain;
}

.bundleGrid{
    grid-template-columns: minmax(200px, 2fr) 5fr;
    gap:4px;
}

.bundleImageContain{
    min-width: 300px;
}

.gridBundleImg{
    border:none;
    max-height:400px;
}

.preschoolBundleImg{
    max-height:900px;
}

.bundleColumn{
    width:100%;
    height:100%;
    justify-content: center;
}

.bundleTitle{
    color:var(--feirHeader) !important;
    margin-bottom:24px !important;
    background-color: unset !important;
    padding:0 !important;
    line-height:1.3em;
    font-size:clamp(18px, 5vw, 28px) !important;
}

.bundleName{
    margin:0 auto 4px auto !important;
    font-weight:bold;
    font-size:clamp(18px, 3vw, 24px) !important;
    text-transform: uppercase;
}

.bundleOption{
    background-color:#EDF7FF;
    width:100%;
    margin:0 auto 12px auto;
    padding:3% 4%;   
    display:grid;
    place-items:center; 
    border-radius:15px;
    border:1px solid #d0d0d7;
    box-shadow: 3px 4px 2px rgba(0, 0, 0, 0.22);
}

.bundleInfo{
    text-align:center;
    margin:0 auto 16px auto !important;
    font-size:clamp(12px, 4vw, 14px) !important;
    color: var(--feirHeader);
}

.bundleButton {
    background-color: var(--feirHeader);
    width:80%;
}


.featuredResourceImg{
    min-width:min(150px, 30vw);
    max-width:70%;
    max-height:100%;
    margin:auto;
}

.specialtyResourceImg{
    border: 2px solid rgb(180, 192, 198);
}

.gridResourceImgContain{
    min-width:150px;
    display:grid;
    place-items:center;
    margin-right:14px;
}

.gridFeaturedImgContain{
    min-width:min(25vw, 300px);
    display:grid;
    place-items:center;
    margin-right:14px;
}

.csFeaturedImgContain{
    min-width:min(375px, 45vw);
    margin:0;
}

.csCurricWrapper{
    margin-bottom:32px;
}

.csCurricInfo{
    justify-content: center;
    border-width:1px;
    padding:45px 20px !important;
    min-height:80%;
    flex-grow:1;
}

.csCurricTitle{
    color:var(--feirHeader);
    font-size:clamp(16px, 5vw, 36px);
    text-align:center;
    margin:4px auto 8px auto;
}

.csCurricSubtitle{
    font-size:clamp(15px, 3vw, 22px);
    font-weight:normal !important;
    
    margin:8px auto 24px auto;
}

.gridResourceInfoWrap{
    width:unset;
    padding:0;
    margin:0;    
    overflow:hidden;

}

.gridResourceTitle{
    font-size:clamp(14px, 3vw, 18px);
    color:white;
    text-align:center;
    background-color: var(--feirHeader);
    padding:20px 10px;
    margin:0;
    width:100%;
    line-height:1.3em;
}

.featuredSubtitle{
    font-size:12px;
    font-weight:normal;
    font-style: italic;
    letter-spacing:1px;
    opacity:.8;
    display:block;
    margin-top:14px;
}

.gridResourceCopy{
    font-size:13px !important;
    padding:0 18px;
    margin:12px auto !important;
    line-height:1.4em !important;
    opacity:.8;
    color:rgb(92, 114, 124) !important;
}

.gridResourceButton{
    font-size:14px !important;
    width:75%;
    margin:4px auto 12px auto;
    padding:5px;
}

.videoLinkContainer{
    width:100%;
    margin:unset;
}

.flexWrapper{
    display:flex;
    gap:12px;
    justify-content: center;
    flex-wrap:wrap;
    flex: 1 1 0;
}

.flexResourceContainer{
    background-color:rgb(247, 249, 252);
    align-items:center;
    padding:24px 12px;
    border-radius:10px;
    border:1px solid rgb(221, 224, 228);
    max-width:210px;
}

.flexResourceImage{
    width:70%;
    max-width:275px
}

.flexResourceButton{
    width:90%;
    max-width:275px;
    padding: 5px;
}

.flexResourceFullWidth{
    max-width:unset;
    flex-direction: row;
    gap:38px;
    width:75%;
    max-width:800px;
    justify-content: center;
}

.flexImageTitle{
    color:var(--feirHeader);
    max-width:20ch;
    text-align:center;
    font-size: clamp(14px, 3vw, 17px);
    line-height:1.3em;
    margin:24px auto;
    
}

.flexFullWidthInfo{
    padding:3%;
    display:flex;
    flex-direction: column;
    align-items: center;
    width:100%;
}

.flashcardsContainer{
    margin:48px auto;
}

.fiveFlexColumn{

}

.fourFlexColumn{
    flex-grow:1;
    min-width: min(24%, 90vw);

}

.threeFlexColumn{
    flex-grow:1;
    min-width: min(32%, 90vw);
}

.csThreeColumn{
    justify-content: center;
}

.twoFlexColumn{
    flex-grow:1;
    min-width: min(49%, 90vw);
}

.wwSuppText{
    font-weight:bold;
    font-size:clamp(13px, 2vw, 15px) !important;
    color:black !important;
    margin:8px auto 12px auto !important;
}


/* Folksong Pages */

.folksongCopyWrap{
    background-image: url(https://videos-giamusic-com.s3.us-east-1.amazonaws.com/Webpages/FeierabendResources/Assets/%20FolksongBooks/Feir_Books_BGImage.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position:100% 20px;
    min-height:475px;
    display:grid;
    align-items:center;    
    background-color:#27263d;
    border-top:5px solid #F2CA4C;
    border-bottom:5px solid #F2CA4C;
}

.folksongMainCopy{
    max-width:65ch;
    background-color:rgba(255, 255, 255, 0.837);
    color:white;
    background-color: var(--feirHeader);
    border-top:5px solid #F2CA4C;
    border-bottom:5px solid #F2CA4C;
    border-right:5px solid #F2CA4C;
    padding:25px;
    border-radius:0 20px 20px 0;
    position:relative;
}

.folksongMainCopy p, .folksongMainListItem {
    color:rgb(220, 223, 240) !important;
    font-size:14px;
}

.folksongMainList li{
    color:rgb(220, 223, 240) !important;
    opacity:100;
    font-size:14px;
}

.folksongGrid{
    grid-template-columns:repeat(auto-fit, minmax(min(350px,100%), 1fr));
    gap:3px;
}

.folksongWrap{
    height:100%;
    width:100%;
}
 
.folksongMainList {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.folksongImg{
    width:90%;
    max-width:225px;
    max-height:275px;
}

.folksongHeader{
    margin-top:0 !important;
    color:white!important;
}

.folksongInfo{
    margin-top:18px;
    padding:24px;
    border-width:1px;
}

.folksongMainTitle{
    color:white !important;
}

.folksongTitle{
    font-size:20px;
    margin:0px auto 12px;
}

.folksongButton{
    padding:8px;
}

.folksongCopy{
    text-align:left;
}

.folksongBundleWrapper{
    grid-template-columns: 1fr 2fr;
    margin: 16px auto;
    justify-items:stretch;
}

.folksongBundleImage{
    width:100%;
    max-width:375px;
}

.folksongBundleTextContain{
    color:var(--feirHeader);
    text-align:center;
    padding:12px;
    width:100%;
}

.folksongBundleImageWrap{
    justify-items: center;
}

.saveText{    
    color:var(--feirHeader) !important;
    font-size:clamp(38px, 10vw, 95px) !important;
    text-transform: uppercase;
    font-weight:bold;
    margin:12px auto 8px auto !important;
}

.folksongBundleCopy{
    max-width:40ch;
    letter-spacing:2px;
    margin:12px auto 36px auto !important;
}

.folksongBundleButton{
    width:90%;
    margin:auto;
}





/* Media Queries */
/* Desk Only */
@media only screen and (min-width: 560px){
    
    .HeaderMobile{
        display: none;
    }
        
}

/* Mobile Only */


@media only screen and (max-width:560px){

    .HeaderDesk {
        display: none;
    }

    .feirBioWrap, .twoColumn, .resourceGrid, .folksongBundleWrapper{
        grid-template-columns: 1fr;
    }

    .feirImage{
        margin:0;
        min-height:275px;
        background-position: top left;
    }

    .pageWrapper p, .fameList{
        line-height:1.8em;
    }

    .FSSeriesCopy{
        line-height:1.4em !important;
    }

    .FSSeriesInfo{
        height:unset;
    }
    
    .resourceContainer{
        flex-wrap:wrap;
        justify-content:center;
        border-bottom:2px solid #C3D0D7;
    }

    .featuredResourceGrid{
        padding:4% 0 0 0;
    }

    .FSSeriesInfo{
        border-radius:0;
        border:unset;
    }

    .flexResourceContainer{
        width:95%;
        max-width:95%;
        padding:12px 6px;
    }

    .csThreeColumn{
        padding-top:10%;
        padding-bottom:10%;
    }

    .csCurricImg{
        max-width:80%;
    }

    .flexResourceImage{
        max-width:60%;
    }

    .flexImageTitle{
        margin:12px auto;
    }

    .gridResourceImg{           
     margin-bottom:14px;
    }

    .folksongCopyWrap{
    min-height:unset;
    background-image:unset;
    }

    .folksongMainCopy{
    border:unset;
    width:100%;
    border-radius:0;
    left:0;
    }

}