﻿/************************************
*
*   CMS BASE CODE For CMS
*
*   Layout:
*   Slim Content Container  
*   tripleColumnCMS
*   triplePanelCMS 
*   oneOneThreePanelCMS
*
*/

/*
 *    Slim Content Container - CMS RichText Layout
 */

@media only screen and (min-width: 768px) {
    .contentPageCMS .contentHolder {
        margin:0 auto;
        max-width: 660px;
    }
}


/*
 *   tripleColumnCMS CMS Layout
 */

.triplePanelCMS,
.tripleColumnCMS {
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    padding-bottom: 25px;
}

.triplePanelCMS{
    background-color: green;
}
@media only screen and (min-width: 768px) {
    .triplePanelCMS,
    .tripleColumnCMS {
        padding-bottom: 80px;
    }
}
@media only screen and (min-width: 1080px) {
    .triplePanelCMS, .tripleColumnCMS {
        padding-bottom: 80px;
    }
}

.panelCMS,
.columnCMS {
    margin-bottom: 16px;
    width: 100%;
}
@media only screen and (min-width: 768px) {
    .panelCMS,
    .columnCMS {
        margin-bottom: 20px;
    }
}
@media only screen and (min-width: 1280px) {
    .panelCMS,
    .columnCMS {

    }
}


.tripleColumnCMS.hideIcons .columnCMS:nth-child(n+4) {
    display: none;
}
@media only screen and (min-width: 768px) {
    .tripleColumnCMS .columnCMS {
        width: 49%;
    }

    .tripleColumnCMS .columnCMS:nth-child(even)  {
        margin-right: 0;
    }
    .tripleColumnCMS .columnCMS:nth-child(odd)  {
        margin-right: 2%;
    }

    .tripleColumnCMS.hideIcons .columnCMS:nth-child(3) {
        display: none;
    }
}
@media only screen and (min-width: 980px) {
    .tripleColumnCMS .columnCMS {
        margin-right: 2%;
        width: 32%;
    }

    .tripleColumnCMS .columnCMS:nth-child(2n+0) {
        margin-right: 2%;
    }

    .tripleColumnCMS .columnCMS:nth-child(3n+0) {
        clear: none;
        margin-right: 0;
    }

    .tripleColumnCMS.hideIcons .columnCMS:nth-child(3) {
        display: block;
    }
}


.oneTwoThreePanelCMS .columnCMS  {
    display: none;
}

.oneTwoThreePanelCMS .columnCMS:first-child {
    display: block;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .oneTwoThreePanelCMS .columnCMS:first-child,
    .oneTwoThreePanelCMS .columnCMS:nth-child(2) {
        display: block;
        width: 47.5%;
    }
}
@media only screen and (min-width: 980px) {
    .oneTwoThreePanelCMS .columnCMS {
        display: block !important;
        width: 32% !important;
    }
}

.modulePadTop {
    padding-top: 40px;
}
@media only screen and (min-width: 768px) {
    .modulePadTop {
        padding-top: 80px;
    }
}


/**
    .wrapperX4 
*/

.wrapperX2 .columnCMS {
    display: block;
    width: 100%;
}
.wrapperX2 .columnCMS:nth-child(3) {
    display: none;
}
@media only screen and (min-width: 768px) {
    .wrapperX2 .columnCMS {
        display: block;
        width: 49%;
        margin-right:2%;
    }

    .wrapperX2 .columnCMS:nth-child(even) {
        margin-right: 0;
    }
}
@media only screen and (min-width: 1080px) {
    .wrapperX2 .columnCMS {
        display: block !important;
        width: 32% !important;
        margin-right: 2% !important;
        height: auto;
    }

    .wrapperX2 .columnCMS:nth-child(3) {
        display: block;
        width: 32% !important;
        margin-right: 0 !important;
    }
}


/**
    .wrapperX4 
*/

.wrapperX4 .columnCMS {
    display: block;
    width: 100%;
}
.wrapperX4 .columnCMS:nth-child(5) {
    display: none;
}
@media only screen and (min-width: 768px) {
    .wrapperX4 .columnCMS {
        display: block;
        width: 49%;
        margin-right:2%;
    }

    .wrapperX4 .columnCMS:nth-child(even) {
        margin-right: 0;
    }

    .tripleColumnCMS.wrapperX4 .columnCMS:nth-child(3n+0){
        margin-right:2%;
    }
}
@media only screen and (min-width: 1080px) {
    .wrapperX4 .columnCMS {
        display: block !important;
        width: 32% !important;
        margin-right: 2%;
    }

    .wrapperX4 .columnCMS:nth-child(2) {
        margin-right: 2%;
    }

    .wrapperX4 .columnCMS:nth-child(3) {
        margin-right: 0 !important;
    }

    .wrapperX4 .columnCMS:nth-child(4) {
        margin-right: 2%;
    }


    .wrapperX4 .columnCMS:nth-child(5) {
        display: block;
        width: 66% !important;
        margin-right: 0 !important;
    }
}


/**
    .wrapperX5
*/

.wrapperFiveFourFive .columnCMS {
    display: block;
    width: 100%;
}
@media only screen and (min-width: 768px) {
    .wrapperFiveFourFive .columnCMS {
        display: block;
        width: 49%;
    }

    .wrapperFiveFourFive .columnCMS:nth-child(odd)  {
        margin-right:2%;
    }

    .wrapperFiveFourFive .columnCMS:nth-child(even) {
        margin-right: 0;
    }

    .wraperFiveFourFive .columnCMS:nth-child(5) {
        display: none;
    }
}
@media only screen and (min-width: 1080px) {
    .wrapperFiveFourFive .columnCMS {
        display: block !important;
        width: 32% !important;
        margin-right: 2% !important;
    }

    .wrapperFiveFourFive .columnCMS:nth-child(3){
        margin-right: 0 !important;
    }


    .wrapperFiveFourFive .columnCMS:nth-child(5) {
        display: block;
    }

}


/**
    .wrapperX5 
*/

.wrapperX5 .columnCMS {
    display: block;
    width: 100%;
}
.wrapperX5 .columnCMS:nth-child(6) {
    display: none;
}

@media only screen and (min-width: 768px) {
    .wrapperX5 .columnCMS {
        display: block;
        width: 49%;
        margin-right:2%;
    }

    .wrapperX5 .columnCMS:nth-child(even) {
        margin-right: 0;
    }

    .tripleColumnCMS.wrapperX5 .columnCMS:nth-child(3n+0){
        margin-right:2%;
    }

}

@media only screen and (min-width: 1080px) {
    .wrapperX5 .columnCMS {
        display: block !important;
        width: 31% !important;
        margin-right: 2% !important;
    }

    .wrapperX5 .columnCMS:nth-child(6) {
        display: block;
        width: 31% !important;
        margin-right: 0;
    }
}



/*
 *   oneTwoThreePanelCMS CMS Layout
 */

.threeTwoThreePanelCMS .columnCMS:first-child {
    display: block;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .threeTwoThreePanelCMS .columnCMS:first-child,
    .threeTwoThreePanelCMS .columnCMS:nth-child(2) {
        display: block;
        width: 49%;
    }

    .threeTwoThreePanelCMS .columnCMS:nth-child(3) {
        display: none;
    }
}

@media only screen and (min-width: 980px) {
    .threeTwoThreePanelCMS .columnCMS {
        display: block !important;
        width: 32% !important;
    }
}




/* 
*   Mixed panel list fix glaot issue euqal height.
*/

@media only screen and (min-width: 768px) {
    .mixedCMSItems .tripleColumnCMS .columnCMS {
        height: 485px !important;
    }
}








/*
 *   noOffersMessage
 */
.OffersMessageCMS {
    background-color: #fff;
    text-align: center;
    margin-bottom:25px;
}


.OffersMessageCMS .richText {
    padding:10% 5% 0 5%;
    margin:auto;
}

.richText.messageCMS p a,
.richText.messageCMS ol li,
.richText.messageCMS ul li,
.richText.messageCMS p {
    font-size: 0.875rem;
    line-height: 1.375rem;
}

@media only screen and (min-width: 768px) {

    .OffersMessageCMS .richText {
        margin:auto;
        padding:7% 0 4%;
        width:538px;
    }

    .richText.messageCMS p a,
    .richText.messageCMS ol li,
    .richText.messageCMS ul li,
    .richText.messageCMS p {
        font-size: 1.125rem;
        line-height: 1.625rem;
    }
}





/*
*       Reusable code
*
*   Rating Content
*   Download Icon
*   Play ICON
*   Solo button container
*   Backgrounds gradiants
*
*/


/*
*   Download Icon
*/

.richText.downloadLinkCMS > a,
a.downloadLink {
    background: url(../images/icons/iconMiniStack.svg#IconDownload) -9px 0 no-repeat transparent;
    color: #000;
    display: block;
    font-family: 'MINISansSerif-Regular', sans-serif;
    font-size: 1rem;
    height: 44px;
    line-height: 0.938rem;
    padding: 15px 0 15px 38px;
    width: 285px;
    text-decoration: none;
}

.richText.downloadLinkCMS > a:hover,
a.downloadLink:hover {
    background: url(../images/icons/iconMiniStack.svg#IconDownloadAlt) -9px 0 no-repeat transparent;
    color: #0085AC;
}

@media only screen and (min-width: 1024px) {
    .richText.downloadLinkCMS > a,
    a.downloadLink {
        font-size: 1.125rem;
    }
}


/*
 *   Play ICON
 */
.playIcon {
    background: url("/v2resources/images/icons/iconMiniStack.svg#IconPlayWhite") center center no-repeat;
    background-color: rgba(255, 255, 255, .2);
    border: 2px solid #fff;
    border-radius: 22px;
    display: inline-block;
    height: 44px;
    left: 50%;
    margin-left: -22px;
    margin-top: -22px;
    position: absolute;
    top: 50%;
    Opacity: 1;
    width: 44px;
    z-index: 4;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5));

}


/*
 *   socialIcons Global media items used throughout pages
 */

.socialIconsGlobal {
    list-style: none;
    margin: 0 0 30px;
    padding:0;
}

.socialIconsGlobal li {
    display: block;
    float: left;
    margin-left: 10px;
}

.socialIconsGlobal a {
    display: block;
    height: 32px;
    text-indent: -9999px;
    width:32px;
}

.socialIconsGlobal {
    display: inline-block;
    margin:auto;
    width:auto;
}

.socialIconsGlobal .facebook a {
    background: url(../images/icons/socialStack.svg#FacebookOutline) 0 0 no-repeat transparent;
}

.socialIconsGlobal .twitter a {
    background: url(../images/icons/socialStack.svg#TwitterOutline) 0 0 no-repeat transparent;
}

.socialIconsGlobal .instagram a {
    background: url(../images/icons/socialStack.svg#InstagramOutline) 0 0 no-repeat transparent;
}

.socialIconsGlobal .linkedin a {
    background: url(../images/icons/socialStack.svg#LinkedinOutline) 0 0 no-repeat transparent;
}

.socialIconsGlobal .youtube a {
    background: url(../images/icons/socialStack.svg#YoutubeOutline) 0 0 no-repeat transparent;
}


/*
 *   Solo button container -  CMS Component
 */

.soloCMS {
    clear: both;
    display: block;
    margin-bottom: 35px;
    width:100%;
    text-align:center;
}

.soloCMS .btnSecondary {
    width: 100%;
    float:none;
    display: inline-block;
}

@media only screen and (min-width: 768px) {

    .soloCMS {
        text-align: right;
        padding-top: 1px;
        margin-bottom: 20px;
    }

    .soloCMS .btnSecondary {
        width: 280px;
        margin-left: 15px;
    }
}


@media only screen and (min-width: 768px) {
    .soloCMS {
        margin-bottom: 50px;
    }
}

@media only screen and (min-width: 1080px) {
    .soloCMS {
        margin-bottom: 25px;
    }
}

.linkBox .socialIconsGlobal  {
    bottom: -10px;
    margin:auto;
    position: absolute;
    text-align: center;
    width:100%;
    left: -7px;
}

.linkBox .socialIconsGlobal li {
    display: inline-block;
    float:none;
    margin-right: 0;
}

.linkBox .socialIconsGlobal a {
    position: static;
    width:32px;
}

@media only screen and (min-width:768px) {
    .linkBox .socialIconsGlobal {
        bottom: 6px;
    }
}











    