@media only screen and (orientation: portrait) {
    
    .header {
        width: 95vw;
        height: 30vh;
        font-size: 75;
        flex-direction: column;
        margin-top: 10vh;
        margin-bottom: 10vh;
        gap: 5vh;
    }
    
    .titleText {
        width: 100%;
        font-weight: lighter;
        text-align: center;
        font-size: 13vw;
    }
    
    .blurb {
        flex-direction: column;
        width: 88vw;
        height: 96vw;
        border-radius: 6.6vw;
    }
    
    .cardOneText {
        font-size: 5vw;
        width: 76vw;
    }
    
    .blurbText {
        width: 90%;
        height: 90%;
        text-align: left;
    }
    
    .cardsContainer {
        flex-direction: column;
        gap: 6vw;
    }
    
    .card {
        width: 88vw;
        height: 44vw;
        border-radius: 6.6vw;
        flex-direction: row;
    }
    
    .cardContent {
        height: 100%;
        justify-content: space-evenly;
        align-items: center;
        width: 77vw;
    }
    
    .itemImage {
        border-top-left-radius: 6.6vw;
        border-bottom-left-radius: 6.6vw;
        border-top-right-radius: 0;
        width: 44vw;
        height: 44vw;
    }
    
    .cardPiecesText {
        width: 80%;
    }
    
    .itemname {
        font-size: 5vw;
        width: 80%;
    }
    
    .price {
        font-size: 5vw;
        width: 80%;
    }
    
    .blueBtn {
        border-radius: 2.2vw;
        height: 13.2vw;
        width: 80%;
        align-self: center;
        font-size: 4vw;
        background-color: #003049;
        color: white;
        cursor: pointer;
        font-weight: bold;
        font-family: 'Greycliffe';
    }
    
    .greyBtn {
        border-radius: 2.2vw;
        height: 13.2vw;
        width: 100%;
        align-self: center;
        font-size: 50;
        background-color: white;
        color: #0171e3;
        cursor: pointer;
        font-family: 'Greycliffe';
    }

    
    /* Modal */
    .modal {
        position: fixed;
        left: 0;
        top: 0;
        display: none;
        width: 100lvw;
        height: 100lvh;
        align-items: start;
        justify-content: center;
        background-color: rgba(0,0,0,0.6);
        z-index: 50;
        overflow: auto;
        font-size: 1.3vw;
    }
    
    .modal-content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1vw;
    }
    
    .modal-inform {
        color: white;
        display: none;
    }
    
    .modal-inform-mobile {
        display: inline-block;
        text-align: center;
        font-weight: lighter;
        font-size: 4vw;
    }
    
    .modal-box {
        width: 100lvw;
        height: 150lvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        gap: 5vw;
        background-color: rgba(255,255,255,1);
        z-index: 100;
        border-radius: 0;
        border-top-right-radius: 6.6vw;
        border-top-left-radius: 6.6vw;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
        margin-top: 5vh;
    }
    
    .modal-body {
        width: 80vw;
        height: 80vw;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 5vw;
    }
    
    .modal-itemImage {
        width: 90vw;
        height: 90vw;
        object-fit: cover;
        border-radius: 3.3vw;
        margin-top: 5vw;
        /*box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);*/
    }
    
    .modal-itemName {
        color: #001011;
        text-decoration: none; 
        /*font-weight: lighter;*/
        font-size: 7vw;
    }
    
    .modal-itemPrice {
        color: #001011;
        text-decoration: none; 
        font-weight: bold;
        font-size: 7vw;
        height: auto;
    }
    
    .modal-button-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5vw;
        width: 100%;
        margin: 0;
        /*overflow: hidden;*/
        overflow-y: auto;
    }
    
    p {
        font-size: 5vw;
    }
    
    .modal-blueBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5vw;
        border: none;
        border-radius: 3.3vw;
        height: 15vw;
        width: 100%;
        align-self: center;
        font-size: 5vw;
        background-color: #0171e3;
        color: white;
        cursor: pointer;
        font-weight: bold;
        font-family: 'Greycliffe';
        transition: 0.2s;
        opacity: 0.5;
    }
    
    .modal-greyBtn {
        border: none;
        border-radius: 0.5vw;
        height: 100%;
        width: 30%;
        align-self: center;
        font-size: 4vw;
        background-color: #fafafa;
        color: #0171e3;
        cursor: pointer;
        font-family: 'Greycliffe';
        /*font-weight: bold;*/
    }
    
    .modal-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5vw;
    }
    
    .form-control {
        border: none;
        border-bottom: 0.5vw solid;
        border-bottom-color: #B0B0B0;
        outline: none;
        width: 100%;
        height: 10vw;
        transition: 0.35s;
        font-size: 5vw;
        font-weight: lighter;
        font-family: 'Greycliffe';
    }
    
    .form-control:focus {
        border: none;
        border-bottom: 0.5vw #0171e3 solid;
        border-bottom-color: #0171e3;
        transition: 0.35s;
    }
    
    .red-border {
        border-bottom-color: #DB5461;
    }
    
    .blue-border {
        border-bottom-color: #0171e3;
    }
    
    .mb {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5vw;
    }
    
    .price-and-link {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 5vw;
    }
    
    .close-cross {
        width: 5vw;
        height: 5vw;
        user-drag: none;
        transition: 0.2s;
    }
    
    .close-cross:hover {
        transition: 0.2s;
        scale: 1.1;
        cursor: pointer;
    }
    
    .btnScale:hover {
        transition: 0.2s;
        scale: 1.01;
        cursor: pointer;
    }
    
    .link {
        margin-left: 0vw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5vw;
        border: none;
        border-radius: 3.3vw;
        height: 20vw;
        width: 100%;
        align-self: center;
        background-color: #FAFAFA;
        cursor: pointer;
        font-weight: bold;
        transition: 0.2s;
        padding: 3vw;
    }
    
    .linkText {
        width: 80%;
        font-size: 5vw;
        color: #0171e3;
        font-weight: bold;
        font-family: 'Greycliffe';
    }
    
    .icon-blue {
        filter: invert(27%) sepia(97%) saturate(5603%) hue-rotate(200deg) brightness(97%) contrast(101%);
        width: 7vw;
        height: 7vw;
        margin-left: 0.5vw;
        margin-top: 0.3vw;
    }
    
    .icon-white {
        filter: invert(100%);
        width: 7vw;
        height: 7vw;
        margin-top: 0.2vw;
        /*display: inline-block;*/
        /*vertical-align: middle;*/
    }
    
    .mobileOnly {
        display: flex;
        font-size: 4vw;
        height: 8vw;
    }
    
    select {
        background-color: white;
    }
    
    .label {
        font-size: 4vw;
    }
    
    .desktopOnly {
        display: none;
    }
    
    .honeymoonblurb {
        justify-content: center;
        gap: 2vw;
        flex-direction: column;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);
        display: flex;
        align-items: center;
        background-color: #003049;
        
        width: 88vw;
        height: 44vw;
        border-radius: 6.6vw;
    }
    
    .honeymoonTitle {
        height: auto;
        width: 80%;
        font-size: 6vw;
        color: white;
    }
    
    .honeymoonText {
        height: auto;
        width: 80%;
        font-size: 4.5vw;
        color: white;
    }
}