/*----------------- MAIN CONTAINER -----------------*/
.portfolio-realex {
background: white;
max-width: 435px;
}

/*----------------- HEADER -----------------*/

/* This hides the entire header - that includes the breadcrumb and the title */
#rxp-header {
display: none;
}
/* this is a div that contains the loading animation */
#info-box-footer {
display: none;
}

/*----------------- FORM -----------------*/
/* main wrapper around elements */
.panel {
border-color: white;
box-shadow: 0 1px 1px white;
}
/* this is the same div as "panel" but the ID is specific to the payment form */
#another-card-section {
background: white;
}
/* wrapper around the payment form */
#rpx-another-card {
background: white;
}

/*----------------- CARD MANAGEMENT -----------------*/
/* Heading "pay with a saved card" and "pay with another card*/
#hpp-accordion .panel-heading {
background-color: white;
}
#panelPayWithSavedCard{
width: 94%;
margin-left: 3%;
}

/*----------------- BUTTON -----------------*/
/* this is the box around the button */
#main-btn-box{
width: 94%;
margin-left: 3%;
}
/* this is the actual button */
#main-btn-box .btn-hpp-a {
font-size: 1.25em;
background-color:#0099cc;
font-weight:100;
}


/*----------------- FOOTER -----------------*/
/* this is for the entire footer */
#rxp-footer {
background-color: white;
padding: 0 0 0 8px;
margin-left: 2%;
}
/* This is to hide Realex Payments logo */
#rxp-footer .text-right {
display: none;
}



/*Master Page*/

.mobileShow {
    display: none;
}

/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .mobileShow {
        display: inline;
    }
}

.mobileHide {
    display: inline;
}

/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .mobileHide {
        display: none;
    }
}

.valign-content:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.valign-content > * {
    vertical-align: middle;
    display: inline-block;
}

.li-1 {
    outline: 1px solid red;
    height: 10px;
}

.li-2 {
    outline: 1px solid green;
    height: 30px;
}

.li-3 {
    outline: 1px solid blue;
    height: 20px;
}

.li-1, .li-2, .li-3 {
    padding: 5px;
}

/*cart*/
ul.dropdown-cart {
    min-width: 250px;
}

    ul.dropdown-cart li .item {
        display: block;
        padding: 3px 10px;
        margin: 3px 0;
    }

        ul.dropdown-cart li .item:hover {
            background-color: #f3f3f3;
        }

        ul.dropdown-cart li .item:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

    ul.dropdown-cart li .item-left {
        float: left;
    }

        ul.dropdown-cart li .item-left img,
        ul.dropdown-cart li .item-left span.item-info {
            float: left;
        }

        ul.dropdown-cart li .item-left span.item-info {
            margin-left: 10px;
        }

            ul.dropdown-cart li .item-left span.item-info span {
                display: block;
            }

    ul.dropdown-cart li .item-right {
        float: right;
    }

        ul.dropdown-cart li .item-right button {
            margin-top: 14px;
        }
/*cart*/

.buttonClass {
    padding: 2px 10px;
    text-decoration: none;
}
/*Master Page End*/


/* Navbar Mobile Adjustments Start */
    @media screen and (min-width: 769px){
        .content-desktop {
            display: block;
        }

        #content-desktop-custom {
            display: flex;
        }

        .content-mobile {
            display: none;
        }

        #basket-desktop {
            display: block;
        }

        #basket-mobile {
            display: none;
        }
    }


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

    .content-desktop {
        display: none;
    }
    #content-desktop-menu {
        display: none !important;
    }

    #content-desktop-custom {
        display: none;
    }

    #basket-desktop {
        display: none;
    }

    .content-mobile {
        display: block;
    }

    #basket-mobile {
        display: block;
    }
    
}
/* Navbar Mobile Adjustments End */