@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


:root {
    --orange: rgba(244, 61, 1, 255);
    --blue: rgba(12, 196, 240, 255);
    --lightblue: #8CE9FF;
    --gray: rgba(138, 138, 138, 255);
    --darkgray: rgba(82, 82, 82, 255);
    --borderWidth: 7px;
    --borderHeight: 5px;
    --borderColor: rgba(244, 61, 1, 255);
    --lightgray: rgba(224, 224, 224, 255);
    --leftBackground: rgba(224, 224, 224, 255);
    --border: red dotted 2px;
    --cornersTextColor: rgba(50, 50, 50, 1);
    --rightBackground: white;
    --whiteTextColor: white;
    --white: white;

    /*colors*/
    --graydarkdark: rgba(50, 50, 50, 1);
    --graydark: rgba(82, 82, 82, 1);
    --grayDark: rgba(52,52,52,1);
    --graylight: rgba(138, 138, 138, 1);
    --orangeark: rgba(184, 45, 0, 1);

    --orangeCornersHoverBg: rgba(244, 61, 1, 1);

    --transition: all .3s ease;
    --popupBackgroundColor: white;
}

* {
    font-family: "Roboto";
    font-weight: 400;
    /*color: var(--cornersTextColor);*/
}

body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: row;
    /*animation: ease .5s fadeIn, ease .5s zoomOut;*/
}

a{
    color: inherit;
}

/*recommended cuz im lazy*/

#randomProducts{
    margin-left: -25px;
    margin-top: 25px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.randomTextRedir{
    margin-left: -25px;
    padding-top: 50px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.randomTextItem, .randomTextItemMobile{
    color: var(--graydarkdark);
}

.randomTextItemMobile{
    display: none;
}

.randomRedirItem{
    color: var(--gray);
}

.grayText {
    color: var(--gray);
}

.boldText {
    font-weight: bold;
}

.cursorPointer {
    cursor: pointer;
}

/*Inside that little silly boy span text configuration*/
.cornersText {
    color: var(--cornersTextColor);
}

/*Top bar (mobile only)*/
.topBar,
.mobileMenu,
.onMobile {
    display: none;
}

/*Popup*/

/*Temp popup*/

.timedPopup {
    display: none;
    position: fixed;
    z-index: 12;
    height: 75px;
    width: 350px;
    background-color: var(--popupBackgroundColor);
    border-radius: 25px;
    margin-top: 15px;
    margin-left: 15px;
    /*animation: ease .5s 1.8s fadeOutDisable forwards;*/
    box-shadow: 2px 2px var(--orange);
}

.timedPopupText {
    height: 72px;
    max-width: 90%;
    color: var(--darkgray);
    display: flex;
    text-align: center;
    margin: auto;
}

.timedPopupText>* {
    margin: auto;
    display: flex;
}

.timedPopupTimer {
    height: 3px;
    width: 0px;
    border-radius: 250px;
    margin: auto;
    background-color: var(--orange);
    /*animation: ease 2s popupTimer;*/
}

/*Fixed acc poppup*/

.popupPromptParent {
    /*min-height: 500px;*/
    min-width: 100%;
    position: fixed;
    display: none;
    z-index: 11;
}

.popupPrompt {
    /*min-height: 150px;*/
    min-width: 500px;
    display: flex;
    margin: 10px auto 10px auto;
    background-color: white;
    /*border: 2px black solid;*/
}

#loginRegisterBox {
    padding: 20px;
    width: 500px;
}

.loginFormHelperRegister {
    margin-left: 10px;
}


/*Left side, info, logo and personal media*/

.info {
    width: 380px;
    background: var(--leftBackground);
    height: 100%;
    animation: ease .5s
        /*infoSlide*/
    ;
    position: fixed;
}

.logo {
    background: var(--blue);
    display: flex;
    height: 200px;
}

.logoImage {
    margin: auto;
}

.blueBar {
    width: 80%;
    background: var(--blue);
    height: 35px;
    margin: auto;
}

.orangeBar {
    width: 75%;
    height: 2px;
    background: var(--orange);
    margin: auto;
    margin-top: -10px;
}

/*Inner div properties*/

.infoList {
    width: 75%;
    margin: auto;
}

/*Brands and Socials config, it's easier to just set them up the same way so ignore the role give in the classnames yes?*/
.infoListBrands,
.infoListSocials {
    margin-top: 30px;
    margin-bottom: 30px;
}

.infoListBrandsTitle {
    margin-bottom: 15px;
}

.infoListBrandsItem {
    margin: 5px;
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
}

.infoListBrandsItemImage {
    text-align: center;
    width: 50px;
}

.infoListBrandsItemText {
    display: flex;
    margin: auto;
    margin-left: 10px;
    color: var(--gray);
}


/*Just as the name says, bottom left text on the info bar thingit*/
.infoBottomText {
    color: var(--gray);
    width: 75%;
    margin: auto;
    margin-top: 15px;
}

/*Right side, the store itself*/

.store {
    width: 100%;
    margin-left: 370px;
    margin-right: 50px;
}


/*Navbar*/

.navBar {
    display: flex;
    flex-direction: row;
    min-width: 100%;
    margin-top: 30px;
}

.navBarItems {
    display: flex;
    flex-direction: row;
    width: 40%;
    margin: auto;
    margin-left: 50px;
}

.navBarItem {
    display: flex;
    flex-direction: row;
    margin: auto;
}

.navBarItem>* {
    margin: auto;
    margin-right: 10px;
}

.navBarItemText {
    color: var(--gray);
}

/*Search bar*/

.searchBar {
    margin-left: 50px;
    /*max-width: 800px;*/
    width: 60%;
}

.searchBarContents {
    display: flex;
    flex-direction: row;
    height: 30px;
}

.searchBarIcon {
    margin-right: 10px;
}

.searchForm {
    display: flex;
    height: 100%;
    width: 100%;
}

.searchInput {
    color: var(--grayDark);
    background: transparent;
    border: none;
    width: 100%;
    outline: none;
}

.searchInput::placeholder {
    font-weight: bold;
    color: var(--graydark);
}

/*Promotional Image slider*/

.promotionalImage {
    /*width: 90%;*/
    height: auto;
    margin-left: 50px;
    margin-top: 50px;
    min-height: 300px;
    margin-right: 50px;
    /*background-image: url(https://cc-prod.scene7.com/is/image/CCProdAuthor/wide-angle-lens_P6_720x264?$pjpeg$&jpegSize=400&wid=720) !important;*/
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promotionalListing {
    height: 20px;
    width: 100px;
    margin: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
}

#promotionalCube1,
#promotionalCube2,
#promotionalCube3 {
    margin: auto;
    background: var(--gray);
    width: 10px;
    height: 10px;
}

/*Finally the products, this took way too long*/

.productList {
    width: 93%;
    margin: auto;
    margin-top: 30px;
}

.productListTitle {
    display: flex;
    width: 100%;
    margin-bottom: 30px;
}

.productListTitleItem,
.productListTitleItem>* {
    background: var(--rightBackground) !important;
    color: var(--cornersTextColor);
    margin: auto !important;
}

.productListTypeBar {
    min-width: 100%;
    height: 80px;
    display: flex;
    flex-direction: row;
}

.productListTypeBar>* {
    flex: 1;
}

.productListTypeBar{
    max-height: 50px;
}

.productListTypeBarItemText {
    text-align: center;
    font-size: small;
    color: var(--gray);
}

.productListTypeBarItemTextItem{
    margin-bottom: 5px;
    margin-top: 0px;
}

.productListTypeBarItemUnderline {
    width: 100%;
    height: 2px;
    background-color: var(--lightgray);
    transition: var(--transition);
}

.productListItems {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
}

/*Product style (it's so detailed i'm scared the ammount of code that will be here)*/

.product {
    margin: auto;
    width: 200px;
    margin-bottom: 20px;
}

.productImage {
    margin: auto;
    height: 150px;
    display: flex;
    overflow: hidden;
}

.productImage>* {
    display: flex;
    min-width: 100%;
    margin: auto;
    overflow: hidden;
    vertical-align: middle;
    align-items: center;    
}

.productVerticalImage>*{
    display: flex;
    min-width: 100%;
    margin: auto;
    overflow: hidden;
    vertical-align: middle;
    align-items: center;  
    transform: translateY(-20%);
}

.productInfo {
    color: var(--graydark);
    text-align: center;
    font-size: small;
    margin-top: 10px;
}

.productName {
    color: var(--graydarkdark) /*var(--darkgray)*/;
    text-align: center;
    font-weight: bold;
    height: 100px;
    overflow: hidden;
}

/*.productSpacer {
    height: 100px;
}*/


.productAvailability {
    color: var(--darkgray);
    text-align: center;
    font-size: small;
    margin-bottom: 5px;
    height: 15px;
}

.productPrice {
    width: 30%;
    height: 10px;
    text-align: center;
    margin: auto;
    display: flex;
    margin-bottom: 10px;
}

.productPriceItem {
    font-size: medium;
    display: flex;
    margin: auto;
    margin-top: -4px;
    font-weight: bold;
}

/*Let's do pages yes?*/

.pagination {
    width: 100%;
    margin-bottom: 50px;
    margin-top: 20px;
}

.pagination>* {
    margin: auto;
}

.paginationButtons {
    display: flex;
    flex-direction: row;
    width: 50%;
    margin: auto;
    justify-content: center;
}

.paginationButtons>* {
    margin: 0 10px;
    width: 50px !important;
    height: 50px !important;
}

.paginationButtonLeft>*,
.paginationButtonRight>*,
.paginationButtonCenter>* {
    width: 50px !important;
    height: 50px !important;
}

/*No products found screen*/

.noProductsFound{
    width: 100%;
    height: 100%;
    display: flex;
}

.noProductsFound>*{
    margin: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/*The weird shaped thing that needs a lot of styling to work*/

#button,
.corners {
    background: var(--lightgray);
    border: 3px solid var(--borderColor);
    font-size: 20px;
    color: white;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 7px;
    padding-bottom: 7px;
    position: relative;
    transform: scale(0.90);
}
/*
.upperLeft {
    background: var(--lightgray);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    left: -3px;
    border-bottom: 3px solid var(--borderColor);
    border-right: 3px solid var(--borderColor);
}

.upperRight {
    background: var(--lightgray);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-bottom: 3px solid var(--borderColor);
    border-left: 3px solid var(--borderColor);
}

.lowerRight {
    background: var(--lightgray);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    right: -3px;
    border-top: 3px solid var(--borderColor);
    border-left: 3px solid var(--borderColor);
}

.lowerLeft {
    background: var(--lightgray);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    left: -3px;
    border-top: 3px solid var(--borderColor);
    border-right: 3px solid var(--borderColor);
}

/*Orange surounding, white background and white filling*/


.orangeWhite {
    background: var(--borderColor);
    border: 3px solid var(--borderColor);
    font-size: 20px;
    color: white;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 7px;
    padding-bottom: 7px;
    position: relative;
}
/*
.orangeWhiteUpperLeft {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    left: -3px;
    border-bottom: 3px solid var(--borderColor);
    border-right: 3px solid var(--borderColor);
}

.orangeWhiteUpperRight {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-bottom: 3px solid var(--borderColor);
    border-left: 3px solid var(--borderColor);
}

.orangeWhiteLowerRight {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    right: -3px;
    border-top: 3px solid var(--borderColor);
    border-left: 3px solid var(--borderColor);
}

.orangeWhiteLowerLeft {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    left: -3px;
    border-top: 3px solid var(--borderColor);
    border-right: 3px solid var(--borderColor);
}


/*The same but orange round and white bg*/

.cornersWhite {
    background: var(--rightBackground);
    border: 3px solid var(--borderColor);
    font-size: 20px;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
}
/*
.upperLeftWhite {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    left: -3px;
    border-bottom: 3px solid var(--borderColor);
    border-right: 3px solid var(--borderColor);
}

.upperRightWhite {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-bottom: 3px solid var(--borderColor);
    border-left: 3px solid var(--borderColor);
}

.lowerRightWhite {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    right: -3px;
    border-top: 3px solid var(--borderColor);
    border-left: 3px solid var(--borderColor);
}

.lowerLeftWhite {
    background: white;
    
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    left: -3px;
    border-top: 3px solid var(--borderColor);
    border-right: 3px solid var(--borderColor);
}


/*The same but gray*/

.darkGray {
    background: var(--gray);
    border: 3px solid var(--gray);
    font-size: 20px;
    color: white;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 7px;
    padding-bottom: 7px;
    position: relative;
}
/*
.upperLeftDarkGray {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    left: -3px;
    border-bottom: 3px solid var(--gray);
    border-right: 3px solid var(--gray);
}

.upperRightDarkGray {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-bottom: 3px solid var(--gray);
    border-left: 3px solid var(--gray);
}

.lowerRightDarkGray {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    right: -3px;
    border-top: 3px solid var(--gray);
    border-left: 3px solid var(--gray);
}

.lowerLeftDarkGray {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    left: -3px;
    border-top: 3px solid var(--gray);
    border-right: 3px solid var(--gray);
}


/*The same but light gray*/

.lightGray {
    background: var(--lightgray);
    border: 3px solid var(--lightgray);
    font-size: 20px;
    color: white;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    transition: all .3s ease;
}
/*
.upperLeftLightGray {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    left: -3px;
    border-bottom: 3px solid var(--lightgray);
    border-right: 3px solid var(--lightgray);
    transition: all .3s ease;
}

.upperRightLightGray {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-bottom: 3px solid var(--lightgray);
    border-left: 3px solid var(--lightgray);
    transition: all .3s ease;
}

.lowerRightLightGray {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    right: -3px;
    border-top: 3px solid var(--lightgray);
    border-left: 3px solid var(--lightgray);
    transition: all .3s ease;
}

.lowerLeftLightGray {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    left: -3px;
    border-top: 3px solid var(--lightgray);
    border-right: 3px solid var(--lightgray);
    transition: all .3s ease;
}

/*The same but light gray Without the blue hover thingie*/

.lightGray2 {
    background: var(--lightgray);
    border: 3px solid var(--lightgray);
    font-size: 20px;
    color: white;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    transition: all .3s ease;
}
/*
.upperLeftLightGray2 {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    left: -3px;
    border-bottom: 3px solid var(--lightgray);
    border-right: 3px solid var(--lightgray);
    transition: all .3s ease;
}

.upperRightLightGray2 {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-bottom: 3px solid var(--lightgray);
    border-left: 3px solid var(--lightgray);
    transition: all .3s ease;
}

.lowerRightLightGray2 {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    right: -3px;
    border-top: 3px solid var(--lightgray);
    border-left: 3px solid var(--lightgray);
    transition: all .3s ease;
}

.lowerLeftLightGray2 {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    left: -3px;
    border-top: 3px solid var(--lightgray);
    border-right: 3px solid var(--lightgray);
    transition: all .3s ease;
}


/*The same but blue (IM SO TIRED OF THIS THING)*/

.blue {
    background: var(--blue);
    border: 3px solid var(--blue);
    font-size: 20px;
    color: white;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}
/*
.upperLeftBlue {
    background: var(--lightgray);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    left: -3px;
    border-bottom: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
}

.upperRightBlue {
    background: var(--lightgray);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-bottom: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
}

.lowerRightBlue {
    background: var(--lightgray);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    right: -3px;
    border-top: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
}

.lowerLeftBlue {
    background: var(--lightgray);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    left: -3px;
    border-top: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
}

/*The same but blue with white bg (IM SO TIRED OF THIS THING)*/

.blueWhite {
    background: var(--blue);
    border: 3px solid var(--blue);
    font-size: 20px;
    color: white;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}
/*
.upperLeftBlueWhite {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    left: -3px;
    border-bottom: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
}

.upperRightBlueWhite {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-bottom: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
}

.lowerRightBlueWhite {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    right: -3px;
    border-top: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
}

.lowerLeftBlueWhite {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    left: -3px;
    border-top: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
}

/*The same but blue with white bg for the pagination (IM SO TIRED OF THIS THING)*/

.blueButton {
    background: var(--lightblue);
    border: 3px solid var(--lightblue);
    font-size: 20px;
    color: white;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}
/*
.upperLeftBlueButton {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    left: -3px;
    border-bottom: 3px solid var(--lightblue);
    border-right: 3px solid var(--lightblue);
}

.upperRightBlueButton {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-bottom: 3px solid var(--lightblue);
    border-left: 3px solid var(--lightblue);
}

.lowerRightBlueButton {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    right: -3px;
    border-top: 3px solid var(--lightblue);
    border-left: 3px solid var(--lightblue);
}

.lowerLeftBlueButton {
    background: var(--rightBackground);
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    left: -3px;
    border-top: 3px solid var(--lightblue);
    border-right: 3px solid var(--lightblue);
}

/*Corners orange orange white*/
.orangeOrange {
    background: var(--borderColor);
    border: 3px solid var(--borderColor);
    font-size: 20px;
    color: white;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
}
/*
.upperLeftOrangeOrange {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    left: -3px;
    border-bottom: 3px solid var(--borderColor);
    border-right: 3px solid var(--borderColor);
}

.upperRightOrangeOrange {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    top: -3px;
    right: -3px;
    border-bottom: 3px solid var(--borderColor);
    border-left: 3px solid var(--borderColor);
}

.lowerRightOrangeOrange {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    right: -3px;
    border-top: 3px solid var(--borderColor);
    border-left: 3px solid var(--borderColor);
}

.lowerLeftOrangeOrange {
    background: white;
    z-index: 10;
    width: 7px;
    height: 5px;
    position: absolute;
    bottom: -3px;
    left: -3px;
    border-top: 3px solid var(--borderColor);
    border-right: 3px solid var(--borderColor);
}



/*Hover Animations*/
/*

Add later.

.cornersHover{
    transition: all .3s ease !important;
}

.cornersHover:hover {
    background: rgba(244, 61, 1, 1) !important;
    background-color: var(--orangeCornersHoverBg) !important;
    transition: all .3s ease !important;
}*/


/*TinyMenu*/

.productListTypeBarItem:hover .productListTypeBarItemUnderline {
    height: 5px;
    background-color: var(--darkgray);
    transform: translateY(-3px);
    transition: var(--transition);
}

/*Underline animation*/
.underline {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.underline::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s ease;
}

.underline:hover::after {
    width: 100%;
}

/*Blue around the store products thingie (?)*/

.lightGray:hover {
    border: 3px solid var(--blue);
    transition: all .3s ease;
}
/*

.upperLeftLightGrayHover {
    border-bottom: 3px solid var(--blue) !important;
    border-right: 3px solid var(--blue) !important;
    transition: all .3s ease;
}

.upperRightLightGrayHover {
    border-bottom: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;

}

.lowerRightLightGrayHover {
    border-top: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;
}

.lowerLeftLightGrayHover {
    border-top: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
    transition: all .3s ease;
}

/*I managed to make it hovereable? Well i'll keep this for the search and filters, it'll be useful*/
/*
.lightGray:hover .upperLeftLightGray {
    border-bottom: 3px solid var(--blue) !important;
    border-right: 3px solid var(--blue) !important;
    transition: all .3s ease;
}

.lightGray:hover .upperRightLightGray {
    border-bottom: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;
}

.lightGray:hover .lowerRightLightGray {
    border-top: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;
}

.lightGray:hover .lowerLeftLightGray {
    border-top: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
    transition: all .3s ease;
}


/*Blue hover for all the buttons*/

.paginationHover,
.upperRightLightGray,
.lowerRightLightGray,
.upperLeftLightGray,
.lowerLeftLightGray,
.upperRightDarkGray,
.lowerRightDarkGray,
.upperLeftDarkGray,
.lowerLeftDarkGray,
.upperRightLightGray2 .lowerRightLightGray2,
.upperLeftLightGray2,
.lowerLeftLightGray2,
.upperRightBlueButton,
.lowerRightBlueButton,
.upperLeftBlueButton,
.lowerLeftBlueButton {
    transition: var(--transition);
    cursor: pointer;
    font-weight: bolder;
    font-size: 20px;
}

/*Light Gray*/
/*
.paginationHover:hover .upperLeftLightGray {
    border-bottom: 3px solid var(--blue) !important;
    border-right: 3px solid var(--blue) !important;
    transition: all .3s ease;
}

.paginationHover:hover .upperRightLightGray {
    border-bottom: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;
}

.paginationHover:hover .lowerRightLightGray {
    border-top: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;
}

.paginationHover:hover .lowerLeftLightGray {
    border-top: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
    transition: all .3s ease;
}

/*Light Gray2*/
/*
.paginationHover:hover .upperLeftLightGray2 {
    border-bottom: 3px solid var(--blue) !important;
    border-right: 3px solid var(--blue) !important;
    transition: all .3s ease;
}

.paginationHover:hover .upperRightLightGray2 {
    border-bottom: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;
}

.paginationHover:hover .lowerRightLightGray2 {
    border-top: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;
}

.paginationHover:hover .lowerLeftLightGray2 {
    border-top: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
    transition: all .3s ease;
}

/*Dark Gray*/

.paginationHover:hover {
    background: var(--blue) !important;
    border-color: var(--blue);
    transition: var(--transition);
}
/*
.paginationHover:hover .upperLeftDarkGray {
    border-bottom: 3px solid var(--blue) !important;
    border-right: 3px solid var(--blue) !important;
    transition: all .3s ease;
}

.paginationHover:hover .upperRightDarkGray {
    border-bottom: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;
}

.paginationHover:hover .lowerRightDarkGray {
    border-top: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;
}

.paginationHover:hover .lowerLeftDarkGray {
    border-top: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
    transition: all .3s ease;
}


/*Blue Button*/

.paginationHover:hover {
    background: var(--blue) !important;
    border-color: var(--blue);
    transition: var(--transition);
}
/*
.paginationHover:hover .upperLeftBlueButton {
    border-bottom: 3px solid var(--blue) !important;
    border-right: 3px solid var(--blue) !important;
    transition: all .3s ease;
}

.paginationHover:hover .upperRightBlueButton {
    border-bottom: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;
}

.paginationHover:hover .lowerRightBlueButton {
    border-top: 3px solid var(--blue);
    border-left: 3px solid var(--blue);
    transition: all .3s ease;
}

.paginationHover:hover .lowerLeftBlueButton {
    border-top: 3px solid var(--blue);
    border-right: 3px solid var(--blue);
    transition: all .3s ease;
}



/*Keyframe animations*/

@keyframes infoSlide {
    0% {
        transform: translateX(-380px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInEnable {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        display: block;
    }
}

@keyframes zoomOut {
    0% {
        scale: 110%;
    }

    100% {
        scale: 100%;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes popupTimer {
    0% {
        width: 300px;
    }

    100% {
        width: 0px;
    }
}

@keyframes fadeOutDisable {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}



/*Phone adaptation*/

@media (min-width:320px) {
    /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
}

@media (min-width:480px) {
    /* smartphones, Android phones, landscape iPhone */
}

@media only screen and (max-width:800px) {
    /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
    /*Left side, info, logo and personal media*/


    /*Generic config*/

    .onPc {
        display: none;
    }

    .onMobile {
        display: block;
    }


    body {
        animation: none;
        display: block;
        min-height: 100vh;
        /* Allows content to grow */
        margin: 0%;

    }

    /*Top Bar config and phone menu*/

    .topBar {
        /*border: var(--border);*/
        display: flex;
        background: var(--blue);
        height: 64px;
        width: 100%;
    }

    #topBarImageOpened {
        display: none;
    }

    .topBar>* {
        margin: auto;
        display: flex;
    }

    .topBar .topBarImage {
        margin-left: 20px;
        display: flex;
        height: 65px;
    }

    .topBar .topBarImage svg {
        margin: auto;
        /*margin-top: 20px;*/
    }

    .topBar .topBarButton {
        height: 65px;
        width: 50px;
        margin-right: 10px;
    }

    .topBar .topBarButton svg {
        margin: auto;
    }

    .mobileMenu {
        padding-bottom: 20px;
        z-index: 15;
        display: none;
        position: fixed;
        background: var(--lightgray);
        /*min-height: 600px;*/
        /*width: 100%;*/
        animation: ease .5s fadeIn;
    }

    .mobileMenu>*{
        max-width: 80%;
    }


    .mobileMenu>.navBar>.navBarItems {
        width: 80%;
        /*border: var(--border);*/
        display: flex;
        flex-wrap: wrap;
        margin: auto;
    }

    .mobileMenu>.navBar>.navBarItems>.navBarItem {
        margin: auto;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 150px;
        display: flex;
    }

    .navBarItemText {
        margin-left: 0%;
        margin-right: auto;
        min-width: 80px;
        /*color: var(--gray);*/
    }

    .navBarItemIcon {
        display: flex;
        margin: auto;
        width: 50px;
    }

    .navBarItemIcon svg {
        margin: auto;
    }

    .mobileMenu>.infoListBrands {
        display: flex;
        flex-wrap: wrap;
        margin: auto;
    }

    .mobileMenu .infoListBrands .infoListBrandsItem {
        display: flex;
        width: 150px;
        margin: auto;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .mobileMenu .infoListSocials {
        display: flex;
        flex-wrap: wrap;
        margin: auto;
    }

    .mobileMenu .infoListSocials .infoListBrandsItem {
        display: flex;
        width: 100%;
        margin: auto;
        margin-top: 5px;
        margin-bottom: 5px;
        
    }

    .infoListSocialsItem>.infoListBrandsItemImage{
        margin-left: auto;
    }

    .infoListSocialsItem>.infoListBrandsItemText{
        margin-right: auto;
    }

    .infoListBrandsItem{
        margin-right: 2px;
        margin-left: 2px;
        padding: 2px;
    }

    .redBar {
        margin-top: 20px;
        margin-bottom: 20px;
        background: var(--orange);
        height: 2px;
        max-width: 100%;
        width: 100%;
    }

    /*Store config*/

    .logoImage {
        z-index: 14;
    }


    .store .infoListBrands {
        padding-top: 15px;
        display: flex;
        flex-wrap: wrap;
        margin: auto;
    }


    .store .infoListBrands .infoListBrandsItem {
        display: flex;
        width: 150px;
        margin: auto;
        margin-top: 5px;
        margin-bottom: 5px;
    }



    .promotionalImage {
        /*width: 90%;*/
        height: auto;
        margin-left: 20px;
        margin-top: 20px;
        min-height: 75px !important;
        margin-right: 20px;
        /*background-image: url(https://cc-prod.scene7.com/is/image/CCProdAuthor/wide-angle-lens_P6_720x264?$pjpeg$&jpegSize=400&wid=720) !important;*/
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .promotionalListing {
        height: 20px;
        width: 100px;
        margin: auto;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
    }

    .info {
        position: initial;
        min-width: 100%;
        /* Take full width */
        height: auto;
        /* Adjust height based on content */
        padding-bottom: 20px;
    }

    .store {
        min-height: 100vh;
        position: static;
        margin: 0;
        position: relative;
        width: 100%;
        flex-grow: 1;
        /* Allows it to take remaining space */
        /*padding-bottom: 150px; /* Ensures .info doesn’t overlap */
        /*min-height: calc(100vh - 150px); /* Guarantees proper height */
        overflow-y: auto;
        /* Scrolls only if needed */
        margin-left: 0;
        /* Removes unwanted shifting */
        overflow: hidden;
    }

    .searchBar {
        width: 100%;
        margin: 0 20px 0 20px;

    }


    .product {
        zoom: 0.70 !important;
        /*zoom: 0.75;
        /* Reduces actual size */
    }

    .productInfo {
        overflow: hidden;
        font-size: 12px !important;
    }

    .infoList {
        width: 100%;
        display: flex;
        padding-top: 25px;
    }

    .infoListSocials,
    .infoBottomText {
        text-align: center;
        margin: auto;
    }

    .infoBottomText {
        padding-bottom: 10px;
    }

    .infoListBrandsItemText {
        text-align: left;
    }


    /*Login && Register*/

    .popupPromptParent {
        /*min-height: 500px;*/
        min-width: 100%;
        position: fixed;
        display: none;
        z-index: 11;
    }

    .popupPrompt {
        /*min-height: 150px;*/
        min-width: 0px;
        display: flex;
        margin: 10px auto 10px auto;
        background-color: white;
        /*border: 2px black solid;*/
    }

    #loginRegisterBox {
        padding: 20px;
        width: 100%;
        max-height: 100vh;
        overflow-y: scroll;
    }
    
    .loginRegisterBoxLowerBar,.loginRegisterBoxRightBar,.loginRegisterBoxLeftBar,.loginRegisterBoxUpperBar{
        display: none;
    }

    .popupPrompt{
        margin: 0px;
        width: 100%;
    }

    .registerOverflowSpacer{
        height: 20px;
        width: 100%;
    }

    .loginFormSubmitButton>*{
        margin-right: auto;
        margin-left: 0px;
    }

    .loginFormSubmitButtonItem{
        margin-left: 0px;
    }
    /*
    .loginFormHelper{
       
    }

    .loginFormHelper{
        
    }*/

    .loginFormHelperRecover{
        margin-top: 2px;
    }

    .loginFormHelperMobile {
        display: flex;
        flex-wrap: wrap;
    }

    .loginFormHelperMobile>* {
        width: 100%;
    }


    .loginFormHelperLogin {
        width: 100%;
        display: flex;
    }

    .loginFormHelperRegister {
        margin-left: 10px;
    }


    .sideToSideFlex {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .groupInputbox {
        width: 100%;
    }

    .termsCheckboxCustom {
        min-width: 15px;
        min-height: 15px;
    }

    .productListTypeBar {
        overflow-x: scroll;
        scrollbar-width: none;
        /* Hides scrollbar (Firefox) */
        -ms-overflow-style: none;
        /* Hides scrollbar (IE/Edge) */
    }

    .productListTypeBar::-webkit-scrollbar {
        display: none;
    }

    .productListTypeBarItemText {
        white-space: nowrap;
        margin: 0 20px 0 20px;
        height: min-content;
    }


    /*Products*/

    .productPage {
        /*border: var(--border);*/
        flex-wrap: wrap;
        margin: auto;
        width: 100%;
    }

    .productPageWrapper {
        width: 100%;
    }

    .productPageImage {
        margin: auto;
        display: flex;
        width: 100%;
        height: 200px;
    }

    .productPageInfo {
        margin-top: 20px;
        width: 100%;
        margin-left: 0px;
    }

    .productPageInfoButton {
        width: min-content;
        max-height: 40px !important;
    }

    .loginFormSubmitButtonText{
        white-space: nowrap;
    }

    .productPageInfoName,
    .productPageInfoState {
        margin-bottom: 20px;
    }

    .productInfoStateOption {
        margin-bottom: 5px;
    }

    .productInfoStateOption input {
        /*opacity: 1;*/
        scale: 2;
        z-index: 15;
    }

    .productInfoStateOption div, .productInfoStateOption span{
        transform: translateX(-22px);
    }

    .productInfoStateOptionComp,
    .productInfoStateOptionComImp,
    .productInfoStateOptionNoMan,
    .productInfoStateOptionNoManImp,
    .productInfoStateOptionGameOnly,
    .productInfoStateOptionGameOnlyImp,
    .productInfoStateOptionSealed {
        position: inherit;
    }

    .productPageInfoPriceButton {
        flex-direction: column;
    }

    .productPageInfoPrice {
        margin-bottom: 10px;
        margin-right: auto;
        max-height: 40px;
    }

    .productPageInfoPriceItem{
        height: 100%;
    }

    .randomTextRedir {
        margin-left: 0px;
        /*width: min-content;*/
        min-width: 95%;

        margin: auto !important;
    }

    .randomText {
        margin-right: auto;
    }

    .randomTextItemMobile {
        display: flex;
    }

    .randomTextItem {
        display: none;
    }

    .randomRedir {
        display: flex;
    }

    .randomRedirItem {
        margin: auto;
    }

    #randomProducts {
        margin-left: 0px;
        margin-top: 25px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }


    /*Product specific*/
    .productInfo {
        font-size: 15px;
    }

    /*Profile//Dashboard*/
    .dashboardForm, .dashboardFormPart{
        /*border: var(--border);*/
        margin-left: 0px;
        margin-right: auto;
        display: flex;
        flex-direction: column;
    }

    .dashboardFormPartOptions{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        flex-direction: column;
    }


    .dashboardSubmitButton{
        display: flex;
        margin: 0%;
        width: min-content;
        transform: translateX(0px);
    }

    .dashboardForm form{
        text-align: left;
        display: flex;
        flex-direction: column;
    }

    /*Cart*/
    .cartTitle{
        margin-left: 0px;
    }

    /**Empty cart**/
    
    .emptyCart{
        margin-left: 0px;
        /*width: 100%;*/
    }
    
    .emptyCart>*{
        margin-top: 20px;
        max-width: 220px;
    }

    /**Cart with items**/

    .cartLayout{
        /*border: var(--border);*/
        flex-direction: column;
        margin-left: 0px;
        width: 100%;
    }

    .cartItems{
        /*border: var(--border);*/
        display: flex;
        margin-right: 0;
        flex-wrap: wrap;
    }

    .cartItems>.product{
        min-width: 200px;
    }

    .cartItemsText{
        width: 100%;
    }

    .cartItem{
        margin: auto;
        max-width: 200px;
        margin-bottom: 20px;
    }

    .cartItem{
        zoom: 0.56;
    }

    .cartItemInfo{
        margin-left: 0px;
        margin-top: 0%;
    }

    .cartItemInfo>*{
        margin: auto;
        margin-top: 5px;
    }

    .cartItemImage{
        min-width: 200px;
        max-width: 200px;
        display: flex;
        overflow: hidden;
        min-width: 97%;
        margin-top: 3px;
        height: 150px;
        max-height: 150px;
        margin-bottom: 0px;
    }

    .cartItemInfoPriceDelete{
        flex-direction: column;
        width: min-content;
        min-height: 80px;
    }

    .cartItemInfoPriceDelete>*{
        width: min-content;
    }

    .cartItemInfoPriceDelete{
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .cartItemInfoPriceDelete>*{
        margin: auto;
        margin-bottom: 5px;
    }

    .cartItemInfoDelete{
        width: 100%;
    }

    .cartItemInfoPrice{
        margin-bottom: 15px;
        padding: 5px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .cartItemInfoDeleteButtonImage{
        margin: 0%;
        margin-left: auto;
    }

    .cartItemImage{
        height: 140px;
        min-width: 200px;
        max-width: 200px;
        display: flex;
        overflow: hidden;
    }

    .cartItemImageItem{
        display: flex;
        min-width: 100%;
        margin: auto;
        overflow: hidden;
        vertical-align: middle;
        align-items: center;  
    }

    .cartItemInfo{
        color: var(--graydark);
        text-align: center;
        margin-top: 10px;
        /*border: var(--border);*/
    }

    .cartItemInfo>*{
        margin-top: 5px;
        margin-top: auto;
        margin-bottom: auto;
        display: flex;
    }

    .cartItemInfoAmmount{
        font-size: smaller;
        color: var(--graydark);
    }

    .cartItemInfoName{
        color: var(--graydarkdark) /*var(--darkgray)*/;
        text-align: center;
        font-weight: bold;
        height: 100px;
        overflow: hidden;
    }

    .cartItemInfoName>*{
        margin-bottom: auto;
    }

    .cartItemInfoPriceDelete{
        display: flex;
        flex-direction: row;
        max-height: 50px;
    }

    .cartItemInfoPrice{
        width: 70px;
        padding: 5px 20px !important;
        display: flex;
        text-align: center;
    }

    .cartItemInfoPrice>*{
        margin-left: auto;
        font-weight: bold;
    }

    .cartItemInfoDelete{
        margin-left: 15px;
    }

    .cartItemInfoDeleteButton{
        display: flex;
        flex-direction: row;
        height: 100%;
    }

    .cartItemInfoDeleteButton>*{
        display: flex;
        margin: auto;
        color: var(--graylight);
        margin-left: 15px;
        font-weight: bold;
    }

    .cartInfo{
        margin-left: 15px;
    }

    .cartInfoPanelTextShipping{
        margin-top: 5px;
        margin-bottom: 5px;
    }

    /*Will mix myorders with dashbaord because it's all the same thing anyways*/
    .store{
        min-width: 100%;
    }
    .orderList{
        margin-left: 0px;
        margin-right: 0px;
    }
    
    .orderListItem{
        width: 100%;
    }

    .orderTitleInfo{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0%;
        height: 100%;
        color: var(--darkgray) !important;
    }

    .orderTitleInfoLeftTop{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .sentStatus{
        margin-left: 0px;
    }

    .orderProducts{
        width: 100%;
    }

    /*Buy sell conditions n stuff*/
    .buySellConditions {
        width: 90%;
        margin: auto;
        margin-top: 15px;
    
    }

    .buySellConditionsTitle{
        display: flex;
    }
    
    .buySellConditionsTitleItem,
    .buySellConditionsTitleItem>* {
        background-color: var(--rightBackground);
        color: var(--cornersTextColor);
        margin: auto;
    }
    
    .paginationButtons{
        width: auto;
        zoom: 0.80;
    }

    .paginationButtons button {
        min-width: 40px;
        min-height: 40px;
    }


    
}

@media (min-width:450px) and (max-width: 800px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    body {
        zoom: 1.3 !important;
    }
}

@media (min-width:1025px) {
    /* big landscape tablets, laptops, and desktops */
}

@media (min-width:1281px) {
    /* hi-res laptops and desktops */
}

@media (min-width: 1366px) and (max-width: 1469px) {
    body {
        zoom: 0.7 !important;
    }
}

@media (min-width: 1470px) and (max-width: 1589px) {
    body {
        zoom: 0.77 !important;
    }
}

@media (min-width: 1590px) and (max-width: 1759px) {
    body {
        zoom: 0.825 !important;
    }
}

@media (min-width: 1760px) and (max-width: 1900px) {
    body {
        zoom: 0.9 !important;
    }
}

@media (min-width: 1920px) {
/* Large desktops, UHD preparation */
}
/*
@media (min-width: 2160px) {
    body {
        zoom: 1.15;
    }
}*/

@media (min-width: 2144px) and (max-width: 2303px) {
    body {
        zoom: 1.10 !important;
    }
}

@media (min-width: 2304px) and (max-width: 2749px) {
    body {
        zoom: 1.25 !important;
    }
}

@media (min-width: 2750px) and (max-width: 2879px) {
    body {
        zoom: 1.40 !important;
    }
}

@media (min-width: 2880px) and (max-width: 3199px) {
    body {
        zoom: 1.55 !important;
    }
}

@media (min-width: 3180px) and (max-width: 3439px) {
    body {
        zoom: 1.65 !important;
    }
}

@media (min-width: 3440px) and (max-width: 3839px) {
    body {
        zoom: 1.9 !important;
    }
}

@media (min-width: 3840px) {
    body {
        zoom: 2 !important;
    }
}