@import url("https://fonts.googleapis.com/css?family=Kings:400");
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700");

:root {
  /*
--main-color: #FBAE0D;
--second-color: #1E1824;

--main-color: #31af36;
--second-color: #2d394b;

--main-color: #9060ff;
--second-color: #000;
  
--main-color: #dd2a1b;
--second-color: #000;
*/
--main-color: #1356cc;
--second-color: #000;
/*
--main-color: #223645;
--second-color: #000;

--main-color: #c01120;
--second-color: #2d394b;

--main-color: rgb(84, 31, 121);
--second-color: #000;

--main-color: #0B5BE0;
--second-color: #000;

--main-color: #7dcd02;
--second-color: #000;

--main-color: #7d4196;
--second-color: #000;
*/
}

body{ margin: 0px; border: 0px; padding: 0px; background-color: #FFF; font-size: 16px; font-family: "Roboto Condensed"; color: #333;}
.h_line1{ height: 54px; background-color:var(--main-color);}
.h_line2{ height: 3px; background-color:var(--second-color);}
.h_line3{ height: 45px; background-color:#F4F4F4; border-bottom: 1px solid #DDD; box-shadow: 0px 0px 5px #000; font-size: 14px;}

.h_line3 a{color: var(--main-color); text-decoration: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.h_line3 a:hover{color: #000; text-decoration: underline;}

.logo{font-family: "Kings"; font-size: 36px; letter-spacing: 1.6px; float: left; text-decoration: none; color: #FFF;}

.div-search-input{float: right; padding-top: 8px;}
.div-search-button{float: right; padding-top: 8px;}
.div-search-input input[type=text]{font-size: 14px; outline: none; padding: 6px; border: 1px solid #000; border-right:0px; border-radius: 5px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;}
.div-search-button button[type=submit]{font-size: 18px; color:var(--main-color); cursor: pointer; background-color: #F3F3F3; padding:5px 10px; border: 1px solid #000; outline: none; border-radius: 5px; border-top-left-radius: 0px; border-bottom-left-radius: 0px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.div-search-button button:hover{ background-color: #000; color: #FFF;}
header{position: fixed; width: 100%; z-index: 1;}
.header-holder{ clear: both; height: 100px;}

.container{max-width: 1560px; padding: 15px 10px; margin-left: auto; margin-right: auto;
    width: -moz-calc(100% - 20px); 
    width: -webkit-calc(100% - 20px); 
    width: -o-calc(100% - 20px); 
    width: calc(100% - 20px);
}
.h_line1 .container {padding: 5px 10px;}
.main-column{ padding: 0px 15px; float: left;
    width: -moz-calc(100% - 280px); 
    width: -webkit-calc(100% - 280px); 
    width: -o-calc(100% - 280px); 
    width: calc(100% - 280px);
}

.div-products{
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(6, minmax(220px, 1fr));
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    -webkit-transition: opacity 0.1s;
    transition: opacity 0.1s;
}
.product{
    display: flex;
    background-color: #F4F4F4;
    border: 1px solid #DDD;
    border-radius: 10px;
    width: 100%;
    min-width: 100%;
    max-width: 300px;
    padding: 15px;
    margin: 5px;
    box-sizing: border-box;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    cursor: pointer;                
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.product a{
    text-decoration: none;
    color: #333;
}
.product:hover{
    background-color: #E3E3E3;
    box-shadow: 5px 5px 5px #333;
}
.product-top{
    background-color: #F4F4F4;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}
.product-image-box{
    width: 100%;
    min-width: 150px;
    height: 220px;
    border-bottom: 0;
    box-sizing: border-box;
    position: relative;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}
.product-image{
    width: 100%;
    height: 100%;
}
.product-image span{
    box-sizing: border-box;
    display: block; 
    overflow: hidden;
    width: initial;
    height: initial;
    background: none;
    opacity: 1;
    border: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.product-image img{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    padding: 0;
    border: none;
    margin: auto;
    display: block;
    width: 0;
    height: 0;
    min-width: 80%;
    max-width: 80%;
    min-height: 80%;
    max-height: 80%;
    color:#1356cc;
    object-fit: contain;
}
.product h2{color:var(--main-color); font-weight: normal;}
.product-info{
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-evenly;
}
.product-title{
    font-size: 13px;
    font-weight: 600;
    color: #1F2E3D;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
    height: 37px;
    margin-bottom: 2px;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    padding: 5px 0px;
    box-sizing: border-box;
    overflow: hidden;
}
.product-set{
    -webkit-justify-content: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 10px;
    padding: 5px;
}
.product-price-box{
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-end;
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-justify-content: center;
    justify-content: center;
}
.product-price {
    height: 50px;
    background-color: #FFFFFF;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    color: #EF4509;
    font-size: 15px;
}
.pret-unitar{

}
.pret-subunitar{
    font-size: 10px;
    padding-bottom: 4px;
}
.pret-moneda{
    
}
.add-to-basket button{
    width: 100%;
    background-color: var(--main-color);
    padding: 10px 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.add-to-basket button:hover{
    background-color: var(--second-color);
    color: #FFF;
}

.left-filter-div{
    background-color: #FFFFFF;
    margin: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 7px #EEEEEE;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
}
.left-filter-title{
    background-color: #FFFFFF;
    color: #1F2E3D;
    padding: 5px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.left-filter-body{
    max-height: 300px;
}

.prefooter{background-color:var(--main-color); color: #FFF;}
.pf-left{float: left; width: 300px; padding: 20px 0px 50px 0px; line-height: 1.5;}
.pf-left span{ font-size: 24px; color: #000;}
.pf-left a{ color: #F3F3F3; text-decoration: none; font-size: 16px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.pf-left a:hover{ text-decoration: underline; color: #000;}
.pf-left a i{margin-right:6px;}
.pf-right{float: left; width: 200px; padding: 20px 0px 50px 0px; line-height: 1.5;}
.pf-right span{ font-size: 24px; color: #000;}
footer{background-color:var(--second-color); color: #FFF;}

.divs-set{ display: flex; margin-bottom: 30px;}
.div-set-icon{ float: left; width: 180px; padding: 10px 20px;}
.div-set-info{float: left; width: 260px; padding: 10px 20px; border: 1px solid #DDD; color: var(--main-color); background-color: #F6F6F6; border-radius: 5px;}
.div-set-info h3{margin-bottom: 5px; margin-top: 10px; color: var(--second-color); font-weight: normal;}

.footable th{padding: 7px 10px; border-bottom: 1px solid #DDD; border-top: 1px solid #DDD;}
.footable td{padding: 7px 10px; border-bottom: 1px solid #DDD;}
.footable td a{color:var(--main-color); text-decoration: none; position: relative;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.footable td a:hover{color: #000; text-decoration: underline;}

.cards_list_search{ width: 100%; padding: 5px; outline: none; margin-bottom: 10px;}

.card-left{float: left; width: 260px;}
.card-right{float: left; border-radius: 10px; border: 1px solid #DDD; padding: 20px;
    width: -moz-calc(100% - 302px); 
    width: -webkit-calc(100% - 302px); 
    width: -o-calc(100% - 302px); 
    width: calc(100% - 302px);
}
hr{border-top: 1px solid #DDD; border-bottom: 0px; margin-bottom: 15px; margin-top: 15px;}

.card-artist{font-size: 14px;}
.card-text{ font-style: italic; color: #000; font-size: 20px;}
.card-type{}
.card-rarity{}

.div-card-legalities{
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}
.div-card-legality{
    background-color: #F3F3F3;
    padding: 4px 10px;
    width: 100%;
    min-width: 100%;
    max-width: 300px;
    box-sizing: border-box;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.legality-format{ float: left; width: 140px; color: #000;}
.legality-legality{ float: left; width: 100px; color: var(--main-color);}

.search-title { margin-bottom: 6px;}
.search-input { margin-bottom: 15px;}
.search-input input {
    font-size: 14px;
    outline: none;
    padding: 8px;
    border: 1px solid #000;
    border-radius: 5px;
    width: 100%;
}
.search-input select {
    font-size: 14px;
    outline: none;
    padding: 8px;
    border: 1px solid #000;
    border-radius: 5px;
    width: 100%;
}
.search-button button{ border: 1px solid #000;
    padding: 5px 10px;
    background-color: var(--main-color);
    color: #FFF;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
}
.main{
    min-height: -moz-calc(100vh - 405px); 
    min-height: -webkit-calc(100vh - 405px); 
    min-height: -o-calc(100vh - 405px); 
    min-height: calc(100vh - 405px);
}
a {color: var(--main-color); 
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
a:hover {color: #000; text-decoration: none;}


.err_message{ color: #CC0000;}


.contact-title { margin-bottom: 6px;}
.contact-title span{ font-style: italic; color: var(--main-color);}
.contact-input { margin-bottom: 15px;}
.contact-input input {
    font-size: 14px;
    outline: none;
    padding: 8px;
    border: 1px solid #000;
    border-radius: 5px;
    width: 100%;
}
.contact-input textarea {
    font-size: 14px;
    outline: none;
    padding: 8px;
    border: 1px solid #000;
    border-radius: 5px;
    width: 100%;
}
.contact-button button{ border: 1px solid #000;
    padding: 5px 10px;
    background-color: var(--main-color);
    color: #FFF;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
}

.sr-set-icon{ float: left; width: 50px;}
.sr-set-icon img{height: 16px;}
.sr-set-name{ float: left;
    width: -moz-calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
    width: -o-calc(100% - 50px);
    width: calc(100% - 50px);
}
.manaGrey{ float: left; background-color: #DDD; height: 18px; width: 18px; text-align: center; border-radius: 50%; border: 1px solid #AAA; margin-right: 1px;font-size: 20px; line-height: 1;}
.card-mana img, .manaCost img{ height: 20px; float: left; margin-right: 1px;}

.cookie-btn{ border: 1px solid #FFF; background-color: var(--main-color); color: #FFF; border-radius: 5px; padding: 5px 10px;}

@media only screen and (max-width: 1700px)
{
    .div-products {
        grid-template-columns: repeat(4, minmax(220px, 1fr));
    }
}
@media only screen and (max-width: 1250px)
{
    .div-products {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .div-card-legalities{grid-template-columns: repeat(2, minmax(220px, 1fr));}
}
@media only screen and (max-width: 768px)
{
    .div-products {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        grid-gap: 10px;
    }
    .div-card-legalities{grid-template-columns: repeat(1, minmax(220px, 1fr));}
}

@media only screen and (max-width: 640px)
{
    .pf-left {width: 200px;}
    .card-left{ float: none; width: 100%; margin-bottom: 20px;}
    .card-right{float: none;
        width: -moz-calc(100% - 42px);
        width: -webkit-calc(100% - 42px);
        width: -o-calc(100% - 42px);
        width: calc(100% - 42px);
    }
}
@media only screen and (max-width: 540px)
{
    .header-holder{ height: 140px;}
    .h_line1{height: 104px;}
    .h_line1 form{clear: both;}
    .div-search-input {
        width: -moz-calc(100% - 40px); 
        width: -webkit-calc(100% - 40px); 
        width: -o-calc(100% - 40px); 
        width: calc(100% - 40px);
    }
    .div-search-input input[type=text] { width: 100%; }
}

@media only screen and (max-width: 480px)
{
    .pf-left {width: 100%; float: none; padding: 20px 0px 0px 0px;}
    .pf-right {width: 100%; float: none; padding: 20px 0px 0px 0px;}
}