@charset "utf-8";
	.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */


.prova_mtg img {
  margin-top: 15px;
  vertical-align: middle;
  width: 100%;
}


/*---------------INIZIO DAVID----------------*/

.logo_page {
  height: 135px;
  width: 135px;
  margin: 130px auto 0;
  background-size: auto;
  background-size: contain;
}

.logo_mtg{background: url("../img/logo_mtg.png");}


.outer_row_box {
  margin: 0 auto;
  background: #272727e3;
  padding: 54px;
  box-sizing: border-box;
}

.row_box {
  margin: 0 auto 50px;
  max-width: 1200px;
  padding: 54px;
  box-sizing: border-box;
}

.mtg_title_box h1{color:#fff0d1;max-width: 500px}
.mtg_title_box p{color: #a2a2a2;
  margin: 20px 0;
  max-width: 500px;}

.mtg img{
 border-radius: 10px;
 box-shadow: 0px 30px 20px 14px #00000052;
 box-sizing: border-box;
 -webkit-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
 z-index: 1;
 position: relative;
}


.row_box{	
background: linear-gradient(180deg, #232323e3 0%, rgba(39,39,39,0) 20%);
background-repeat: no-repeat !important;
background-position: top center !important;
background-size: 100% auto !important;
box-shadow: 0px -34px 41px -41px #000;
padding: 42px;
border-radius: 30px 30px 0 0;
box-sizing: border-box;}

#mtg_serie_1{
background: url("../projects/mtgproxy/cards/galea_bg.jpg"), linear-gradient(180deg, #232323e3 40%, rgba(39,39,39,0) 100%);
}

#mtg_serie_2{
background: url("../projects/mtgproxy/cards/markov_bg.jpg"), linear-gradient(180deg, #232323e3 40%, rgba(39,39,39,0) 100%);
}
#mtg_serie_3{
background: url("../projects/mtgproxy/cards/tanieli_bg.jpg"), linear-gradient(180deg, #232323e3 40%, rgba(39,39,39,0) 100%);
}

#mtg_serie_4{
background: url("../projects/mtgproxy/cards/serie4_bg.jpg"), linear-gradient(180deg, #232323e3 40%, rgba(39,39,39,0) 100%);
}

#mtg_serie_5{
background: url("../projects/mtgproxy/cards/terre_bg.jpg"), linear-gradient(180deg, #232323e3 40%, rgba(39,39,39,0) 100%);
}

.mtg_title_box {
margin: 30px 7px 50px;
padding-bottom: 50px;
width: 100%;
border-bottom: 1px solid #cccccc21;
}


/*.mtg img:hover{
	transform: scale(1.2) rotate(1deg);
	z-index: 4;
}*/

.terra_on .verde_c,
.blu_on .verde_c,
.nero_on .verde_c,
.bianco_on .verde_c, 
.rosso_on .verde_c,
.oro_on .verde_c,
.incolore_on .verde_c{transform: scale(0.6) rotate(2deg); filter: brightness(0.4) grayscale(0.6);}

.terra_on .blu_c,
.verde_on .blu_c,
.nero_on .blu_c,
.bianco_on .blu_c, 
.rosso_on .blu_c,
.oro_on .blu_c,
.incolore_on .blu_c{transform: scale(0.6) rotate(2deg); filter: brightness(0.4) grayscale(0.6);}

.terra_on .rosso_c,
.verde_on .rosso_c,
.nero_on .rosso_c,
.bianco_on .rosso_c, 
.blu_on .rosso_c,
.oro_on .rosso_c,
.incolore_on .rosso_c{transform: scale(0.6) rotate(2deg); filter: brightness(0.4) grayscale(0.6);}

.terra_on .nero_c,
.verde_on .nero_c,
.rosso_on .nero_c,
.bianco_on .nero_c, 
.blu_on .nero_c,
.oro_on .nero_c,
.incolore_on .nero_c{transform: scale(0.6) rotate(2deg); filter: brightness(0.4) grayscale(0.6);}

.terra_on .bianco_c,
.verde_on .bianco_c,
.rosso_on .bianco_c,
.nero_on .bianco_c, 
.blu_on .bianco_c,
.oro_on .bianco_c,
.incolore_on .bianco_c{transform: scale(0.6) rotate(2deg); filter: brightness(0.4) grayscale(0.6);}

.terra_on .oro_c,
.verde_on .oro_c,
.rosso_on .oro_c,
.nero_on .oro_c, 
.blu_on .oro_c,
.bianco_on .oro_c,
.incolore_on .oro_c{transform: scale(0.6) rotate(2deg); filter: brightness(0.4) grayscale(0.6);}

.terra_on .incolore_c,
.verde_on .incolore_c,
.rosso_on .incolore_c,
.nero_on .incolore_c, 
.blu_on .incolore_c,
.bianco_on .incolore_c,
.oro_on .incolore_c{transform: scale(0.6) rotate(2deg); filter: brightness(0.4) grayscale(0.6);}

.incolore_on .terra_c,
.verde_on .terra_c,
.rosso_on .terra_c,
.nero_on .terra_c, 
.blu_on .terra_c,
.bianco_on .terra_c,
.oro_on .terra_c{transform: scale(0.6) rotate(2deg); filter: brightness(0.4) grayscale(0.6);}

.filter_box {
  margin: 0 auto;
  text-align: center;
  position: fixed;
  bottom: 42px;
  left: 45px;
  z-index: 5;
  width: fit-content;
}

.hidden{display: none!important;}

.link_serie_mtg a{
position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;

}

.link_serie_mtg h5{
  top: -4px;
  left: 0px;
  position: relative;
  font-size: 12px;white-space: nowrap;
}

.filter_box li {
 cursor: pointer;
  margin: 12px 10px;
  border-radius: 100px;
  height: 18px;
  width: 18px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  /*background: url("../img/filter_mtg.png");
  background-size: auto;
  background-size: 103% auto;*/
	position: relative;
}

.filter_box li:hover {filter: grayscale(1); margin-left: 10px; transform: scale(1.7);
  margin: 18px 10px}

.verde_on #verde_on, .blu_on #blu_on, .rosso_on #rosso_on, .nero_on #nero_on,
.bianco_on #bianco_on, .oro_on #oro_on, .incolore_on #incolore_on   {transform: scale(1.7);
  margin: 18px 10px;
  filter: grayscale(1);}


#verde_on {background-position: center 72%;}
#rosso_on{background-position: center 94%;}
#blu_on{background-position: center 62%;}
#nero_on{background-position: center 49%;}
#bianco_on{background-position: center 38%;}
#oro_on{background-position: center 4%;}
#incolore_on{background-position: center 26%;}
#clearcard{background-position: center 15%;}
#terra_on{background-position: center 83%;}


.prova_mtg img {
 float: left;
 height: 100%;
 width: calc(25% - 14px) !important;
 margin: 7px;
}

.prova_mtg img:nth-child(2n){margin-top: -10px;}
.prova_mtg img:nth-child(4n){margin-top: 0px;}


.outer_box_mtg{width: 100%;
  display: flex;
  flex-wrap: wrap;
height: fit-content;}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1200px) {

.prova_mtg img {
  float: left;
  width: calc(33% - 14px) !important;
  margin: 7px;
 height: 100%;
}
.prova_mtg img:nth-child(2n){margin-top: 7px;}
.prova_mtg img:nth-child(3n){margin-top: -15px;}
.prova_mtg img:nth-child(3n+1){margin-top: -15px;}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
	
	.outer_box_mtg {
  width: calc(100% - 43px);
  display: flex;
  flex-wrap: wrap;
  height: fit-content;
  margin: 0 auto;
}
	
	.logo_page {margin: 130px auto 67px;}	
	
	.prova_mtg img {
  float: left;
  width: calc(50% - 14px) !important;
  margin: 7px;
 height: 100%;
}

	
.prova_mtg img:nth-child(2n){margin-top: 7px;}
.prova_mtg img:nth-child(3n){margin-top: 7px;}
.prova_mtg img:nth-child(3n+1){margin-top: 7px;}
.prova_mtg img:nth-child(2n){margin-top: -10px;}
	
	
	.row_box{padding: 0px;}
	  .filter_box {
    background: black;
    left: 0px;
    border-radius: 21px;
    top: unset;
    bottom: 9px;
    display: flex;
    right: 0px;
    padding: 2px 10px;
    box-shadow: 0px 10px 20px #000;
  }
	
	.filter_box li:hover {  margin: 12px 11px;}
	
	verde_on #verde_on, .blu_on #blu_on, .rosso_on #rosso_on, .nero_on #nero_on,
.bianco_on #bianco_on, .oro_on #oro_on, .incolore_on #incolore_on   {transform: scale(1.7);
  margin: 12px 11px;
	filter: grayscale(1);}

.outer_row_box.mtg {
 padding: 25px;
}
	
.mtg_title_box {
  margin: 40px 31px 10px;
  padding-bottom: 0px;
  border-bottom: none;
}

}

@media screen and (max-width: 600px) {
	
	.prova_mtg img {
  float: left;
  width: calc(100% - 14px) !important;
  margin: 7px;
 height: 100%;
}

.prova_mtg img:nth-child(n){margin-top: 7px;}
	
	
	.filter_box {display: none;}
	.outer_row_box {padding: 32px;}
	
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }