@font-face {
    font-family: 'coolvetica';
    src: url('font/coolvetica-rg.otf') format('opentype');
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
    font-family: coolvetica, helvetica, arial, sans-serif;
    color: whitesmoke;
    font-size: 14pt;
}

.main-container {
    width: 73%;
    margin: 0 auto;
    text-align: left;

}

.container {
    display: flex;
    margin: 3px;
    justify-content: center;
    align-items: center;
}

.row-image-box {
    width: 100%;
    margin-bottom: 10px;
    position: relative;
    overflow: clip;
    border-radius: 30px;
    height: 55%;

}

.row-image-box img {
    width: 100%;
    border-radius: 30px;
    height: auto;
    transition: transform 0.3s ease;
}

.row-image-box:hover img {
    transform: scale(1.01);
    opacity: .4;
}

.item {
    flex: 1;
    padding-bottom: 8px;
    padding-top: 4px;
    padding-left: 0;
    border: none; /* 1px solid #ccc;*/
}

.item-auto {
    flex: 33%;
    padding: 18px;
    border: none; /* 1px solid #ccc;*/
}

.logo {
    width: 30%;
    cursor: pointer;
}

.logo-display {
    width: 90%;
    cursor: pointer;
    border-radius: 10px;
}


.download {
    cursor: pointer;
}

.logo-art {
    width: 200px;
    cursor: pointer;
}

.menu {
    width: auto;

}

.menu-item {
    font-size: 33px;
    font-weight: normal;
    letter-spacing: 1px;
    color: rgb(243, 243, 243, .9);
    vertical-align: bottom;
}

.menu-item:hover {
    color: white;
}

.menu-item-footer {
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 1px;
    color: rgb(233, 233, 233, .7);
    vertical-align: top;
}

.menu-item-footer:hover {
    color: white;
}

a:link {
    text-decoration: none;
}

a:active {
    color: #b42b1e;
}

.emphasized-letter {
    font-weight: normal;
    color: #b42b1e;
}

.single-header0 {
    font-size: 60px;
    text-align: center;
}

.single-header1 {
    font-size: 40px;
    text-align: center;
}

.single-header2 {
    font-size: 28px;
    text-align: center;

}

.single-header-card-white {
    flex: 33%;
    border-radius: 30px;
    background-color: whitesmoke;
    padding: 7px;
    min-height: 100px;
}

.single-header-card-red {
    flex: 33%;
    border-radius: 30px;
    background-color: #b42b1e;
    padding: 7px;
    min-height: 100px;
    height: fit-content;
}

.single-header-card-green {
    flex: 33%;
    border-radius: 30px;
    background-color: #24a572;
    padding: 7px;
    min-height: 100px;
}

.single-header-card-blue {
    flex: 33%;
    border-radius: 30px;
    background-color: #10aab9;
    padding-top: 40px;
    min-height: 100px;
}

.single-header-card-yellow {
    flex: 33%;
    border-radius: 30px;
    background-color: #a7890d;
    padding: 7px;
    min-height: 100px;
}

.card {
    width: 99%;
    margin-bottom: 10px;
    position: relative;
    overflow: clip;
    /*border-radius: 15px 15px 55% 10%;*/
    border-radius: 30px;
    padding: 13px;
    border-width: 3px;
    border-style: solid;
}

.card-red {
    border-color: darkred;
    width: 85%;
    background-color: #210000;
    padding-right: 120px;
}

.band {
    width: 100%;
    margin-bottom: 10px;
    overflow: clip;
}

.band img {
    width: 100%;
}

.row-image-box-single {
    width: 100%;
    margin-bottom: 10px;
    position: relative;
    overflow: clip;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    /*border-bottom: 3px solid darkred;*/
}

.overlay-stores {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.text {
    color: white;
    font-size: 23px;
    letter-spacing: 1px;
    font-weight: normal;
    text-align: left;
    width: 80%;
    height: 80%;
    margin-top: 30px;
    margin-left: 60px;
    position: relative;
}

.header-nav {
    font-size: 24px;
    font-weight: bold;
    /*color: rgb(143,143,143,1);*/
    vertical-align: top;
}

.subpage-detail {
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: normal;
    color: whitesmoke;
    vertical-align: top;
    text-align: center;
}

.header-red {
    font-size: 60px;
    letter-spacing: 1px;
    font-weight: bolder;
    color: rgb(200, 0, 0, 1);
    text-align: left;
    width: 80%;
    /*height: 10%;*/
    margin-top: 50px;
    margin-left: 60px;
    position: relative;
}

.header-sub {
    font-size: 28px;
    letter-spacing: 1px;
    font-weight: bold;
    color: rgb(200, 0, 0, 1);
    text-align: left;
    /*width: 80%;*/
    /*height: 10%;*/
    margin-top: 50px;
    margin-left: 60px;
    position: relative;
}

.button {
    font: bold 15px Arial;
    text-decoration: none;
    background-color: red;
    color: white;
    padding: 4px 12px 4px 12px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    border-top-right-radius: 70% 160px;
}

.navbar {
    display: block;
}

li {
    display: inline;
}

.iframe {
    width: 100%;
    height: 400px;
    border-radius: 30px;
   
}

.blocked {
    width: 343px;
    /*border:solid 1px darkred; */
    /*margin-left:auto; */
    float: right;
    padding-top: 5px;
}

.blocked-footer {
    width: 400px;
    /*border:solid 1px green;*/
    /*margin-left:auto; */
    float: right;
    padding-top: 2px;
}

.store-link {
    display: inline-block;
    fill: whitesmoke;
    height: auto;
}

/*-------------------------------------------------------------------1024*/
@media only screen and (max-width: 1024px) and (orientation: portrait) {
    .logo {
        width: 250px;
    }

    .main-container {
        width: 96%;
        margin-left: 2px;
        margin-right: 2px;
    }

    .container {
        flex-direction: column;
    }

    .blocked {
        float: left;

    }

    .blocked-footer {
        padding-top: 15px;
        width: 100%;
    }

    .download {
        transform: translate(0%, -350%);
        width: 90%;
        cursor: pointer;
    }


    .single-header1 {
        font-size: 30px;
    }

    .single-header2 {
        font-size: 20px;
    }

    .single-header-card-white {
        flex: 90%;
        padding: 10px;
        margin: 10px;
        min-width: 250px
    }

    .single-header-card-red {
        flex: 90%;
        padding: 10px;
        margin: 10px;
        min-width: 250px
    }

    .single-header-card-green {
        flex: 90%;
        padding: 10px;
        margin: 10px;
        min-width: 250px
    }

    .single-header-card-blue {
        flex: 90%;
        padding: 10px;
        margin: 10px;
        min-width: 250px

    }

    .single-header-card-yellow {
        flex: 90%;
        padding: 10px;
        margin: 10px;
        min-width: 250px
    }
} /* End 1024 */



/*-------------------------------------------------------------------720*/
@media only screen and (max-width: 720px) and (orientation: portrait) {
    .single-header-card-red {
        height: 500px;
    }

    .logo {
        width: 250px;
    }

    .main-container {
        width: 98%;
        margin-left: 2px;
        margin-right: 2px;

    }

    .container {
        flex-direction: column;
    }

    .blocked {
        float: left;
    }

    .blocked-footer {
        padding-top: 15px;
        width: 100%;
    }

    .download {
        transform: translate(0%, -350%);
        width: 90%;
        cursor: pointer;
    }

    .single-header1 {
        font-size: 30px;
    }

    .single-header2 {
        font-size: 20px;
    }

    .single-header-card-white {
        flex: 90%;
        padding: 10px;
        margin: 10px;
        min-width: 250px

    }

    .single-header-card-red {
        flex: 90%;
        padding: 10px;
        margin: 10px;
        min-width: 250px
    }

    .single-header-card-green {
        flex: 90%;
        padding: 10px;
        margin: 10px;
        min-width: 250px
    }

    .single-header-card-blue {
        flex: 90%;
        padding: 10px;
        margin: 10px;
        min-width: 250px
    }

    .single-header-card-yellow {
        flex: 90%;
        padding: 10px;
        margin: 10px;
        min-width: 250px
    }
}/* End 720 */

/*!* MEDIA 1 min 768 portrait -------------------------------------------------------------------------------------------------------*!*/
/*@media only screen and (max-width: 768px) and (orientation: portrait){*/
/*    .main-container {*/
/*        width: 99%;*/
/*    }*/
/*    .container {*/
/*        flex-direction: column;*/
/*    }*/
/*    .logo-display{*/
/*        width: 100%;*/
/*        border-radius: 5px;*/
/*    }*/
/*    .logo-art{*/
/*        width: 100px;*/
/*    }*/
/*    .download{*/
/*        width:100px;*/
/*        cursor: pointer;*/
/*    }*/
/*    .menu-item {*/
/*        font-size: 24px;*/
/*    }*/
/*    .overlay {*/
/*        overflow:hidden;*/
/*        width: 100%;*/
/*        height: 55%;*/
/*        border-top-right-radius: 60% 160px;*/
/*    }*/
/*    .text {*/
/*        display: none;*/
/*    }*/
/*    .header-nav {*/
/*        font-size: 55px;*/
/*    }*/
/*    .header-red {*/
/*        font-size: 45px;*/
/*        font-weight: bolder;*/
/*        color: rgb(200, 0, 0, 1)*/
/*    }*/
/*    .button {*/
/*        font: bold 10px Arial;*/
/*        text-decoration: none;*/
/*        background-color: red;*/
/*        color: white;*/
/*        padding: 4px 12px 4px 12px;*/
/*        border-top: 1px solid #CCCCCC;*/
/*        border-right: 1px solid #333333;*/
/*        border-bottom: 1px solid #333333;*/
/*        border-left: 1px solid #CCCCCC;*/
/*        border-top-right-radius: 70% 160px;*/
/*    }*/
/*    .row-image-box {*/
/*        border-radius: 13px;*/
/*        height: auto;*/
/*    }*/
/*  */
/*    .subpage-detail {*/
/*        font-size: 12pt;*/
/*        padding-left: 20px;*/
/*    }*/
/*    .iframe{*/

/*        border-top-left-radius: 20px;*/
/*        border-top-right-radius: 20px;*/
/*    }*/
/*    #blocked{*/
/*        */
/*        margin-left:20%;*/
/*        padding-top: 1px;*/
/*    }*/
/*    body{*/
/*        margin:3px;*/
/*    }*/
/*    .card{*/
/*        width: 90%; padding-right: 10px;*/
/*        border-top-right-radius: 20px;*/
/*        border-bottom-right-radius: 10%;*/
/*    }*/
/*}*/
/*.footer-stores {*/
/*    grid-template-columns: 1fr;*/
/*    margin-top: 0;*/
/*}*/
/*.footer-stores svg {*/
/*    width: 30px;*/
/*}*/

/*!*MEDIA min 820 portrait  ----------------------------------------------------------------------------------------------------------------------*!*/
/*@media only screen and (min-width: 820px) and (orientation: portrait) {*/
/*    .container {*/
/*        flex-direction: column;*/
/*    }*/
/*    .text {*/
/*        display: none;*/
/*    }*/
/*    .header-nav {*/
/*        font-size: 55px;*/
/*    }*/
/*    .header-red {*/
/*        font-size: 45px;*/
/*    }*/
/*    .button {*/
/*        font: bold 20px Arial;*/
/*        text-decoration: none;*/
/*        background-color: red;*/
/*        color: white;*/
/*        padding: 4px 12px 4px 12px;*/
/*        border-top: 1px solid #CCCCCC;*/
/*        border-right: 1px solid #333333;*/
/*        border-bottom: 1px solid #333333;*/
/*        border-left: 1px solid #CCCCCC;*/
/*        border-top-right-radius: 70% 160px;*/
/*    }*/
/*    .overlay {*/
/*        height: 55%;*/
/*        border-top-right-radius: 100px 70px;*/
/*    }*/
/*    .menu-item {*/
/*        font-size: 18px;*/
/*    }*/
/*    .logo-display{*/
/*        width: 100px;*/
/*        border-radius: 5px;*/
/*    }*/
/*    .logo-art{*/
/*        width: 100px;*/
/*    }*/
/*    .menu-item {*/
/*        font-size: 12px;*/
/*    }*/
/*    .download{*/
/*        width:100px;*/
/*        cursor: pointer;*/
/*    }*/
/*    .subpage-detail {*/
/*        font-size: 12pt;*/
/*    }*/
/*    .iframe{*/

/*        border-top-left-radius: 20px;*/
/*        border-top-right-radius: 20px;*/
/*    }*/
/*    .row-image-box {*/
/*        border-radius: 13px;*/
/*        height: auto;*/
/*    }*/
/*    #blocked{*/

/*        margin-left:10%;*/
/*        padding-top: 1px;*/
/*    }*/
/*    body{*/
/*        margin: 3px;*/
/*    }*/
/*    .card{*/
/*        width: 90%; padding-right: 10px;*/
/*        border-top-right-radius: 20px;*/
/*        border-bottom-right-radius: 10%;*/
/*    }*/
/*    .footer-stores {*/
/*        grid-template-columns: 1fr;*/
/*        margin-top: 0;*/
/*    }*/
/*    .footer-stores svg {*/
/*        width: 30px;*/
/*    }*/
/*}*/
/*!*MEDIA 3 ----------------------------------------------------------------------------------------------------------------------*!*/
/*@media only screen and (min-width: 1024px) and (orientation: landscape) {*/
/*    #blocked{*/

/*        margin-left:30%;*/
/*        padding-top: 1px;*/
/*    }*/
/*    .row-image-box{*/
/*        height: 55%;*/
/*    }*/
/*}*/
/*!*MEDIA 4 ----------------------------------------------------------------------------------------------------------------------*!*/
/*@media only screen and (min-width: 1280px) and (max-width: 1920px) and (orientation: landscape) {*/
/*    #blocked{*/

/*        margin-left:60%;*/
/*        padding-top: 1px;*/
/*    }*/
/*    .row-image-box{*/
/*        height: 55%;*/
/*    }*/
/*}*/

/*!*MEDIA 5 ----------------------------------------------------------------------------------------------------------------------*!*/
/*@media only screen and (max-width: 1024px) and (orientation: landscape) {*/
/*    .logo{*/
/*        width: 150px;*/
/*        cursor: pointer;*/
/*    }*/
/*    #blocked{*/

/*        margin-left:10%;*/
/*        padding-top: 1px;*/
/*    }*/
/*    .row-image-box{*/
/*        height: 55%;*/
/*    }*/
/*}*/
/*!*MEDIA 6 ----------------------------------------------------------------------------------------------------------------------*!*/
/*@media only screen and (max-width: 1024px)  {*/
/*    .logo{*/
/*        width: 150px;*/
/*        cursor: pointer;*/
/*    }*/
/*    #blocked{*/

/*        margin-left:10%;*/
/*        padding-top: 1px;*/
/*    }*/
/*    .row-image-box{*/
/*        height: 55%;*/
/*    }*/
/*}*/