FRONTEND_MVC/web/css/card_style.css

.card_v-1{
	width:98%;
	font-family: 'PT Serif', serif; 
	background-color: #ebebeb;
	padding-bottom: 40px;

}
.card_v-1-1{
	width:98%;
	font-family: 'PT Serif', serif;
	background-color: #ebebeb;
	padding-bottom: 40px;
}
.card_v-1-1 .tbl{
	display: inline-table;
	width:100%;
}
.card_v-1-1 .tbr{
	display: inline-table;
	width:100%;
}
.card_v-1-2{
	width:98%;
	font-family: 'PT Serif', serif;
	background-color: #ebebeb;
	padding-bottom: 40px;
}
.card_v-1-2 .titleCard{display:none}
.card_v-1-2 .dateCard {display:none}
.card_v-1-2 .titleTextCard{display:block;font-size: 3.1em;height: 65px;}

.textCard{
	margin-right: 25px;
	font-size: 28px;
	line-height: 140%;
}
.v3 .textCard{
	font-size: 30px;
}
.v31 .textCard{
	margin-right: 25px;
	margin-left: 25px;
	text-align: center;
}
.v31 .dateCard{
	margin-left: 25px;
}
.whiteBack{
	background-color: #fff;
}

.topLineCard{
	width:100%;
}
.intCard{
	width:97%;
/*	max-width:500px; */
	position: relative;
	margin:0 auto;

}
.topLineCard{
	height:39px;
	background: 
		url("/design/card/amic.png") 10px 4px no-repeat,
		url("/design/card/topLine.png")	repeat-x;

}

.labelCard{
  position: relative;
  margin:0 auto;
  width:142px;
  height:30px;
  background: url("/design/card/lablepng.png") repeat-x;
  top:-6px;
  display: none;
}
.card_v-2 .labelCard{
  display: block;
	
}
.labelCard span{
	color:#fff;
	text-transform: uppercase;
	display: block;
/*	padding-left: 8px; */
	padding-top: 3px;
	font-size: 0.9em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 600;
	text-align: center;
	z-index:21;
}

.lineUnderImg{
	position: relative;
}
.lineUnderImg span{
	padding-top: 3px;
	padding-left: 10px;
	font-family: 'Roboto Condensed', sans-serif;

}
.card_v-1 .tbl{
	display: inline-table;
	width: 180px;
}
.card_v-1 .tbr{
	display: inline-table;
	width: 65%;
}
.blockCard{
	font-family: 'Fira Sans', sans-serif, Helvetica, Arial, sans-serif;
/*	max-width:500px; 
	min-height:320px;*/
	margin:0 auto;
	position: relative;
	-webkit-box-shadow: 7px 7px 15px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    7px 7px 15px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         7px 7px 15px 0px rgba(50, 50, 50, 0.25);
	padding-bottom:15px;
}
.greyBack{
	background-color: #ebebeb;
}
.titleCard{
/*	width: 340px; 
	height: 23px;*/
	color: #2f4564;
/*	font-family: 'Roboto Condensed', sans-serif; */
	font-family: 'Fira Sans', sans-serif, Helvetica, Arial, sans-serif;
	font-size: 1.435em;
	margin:0 auto;
	margin-top: 10px;
	text-align: center;
	margin-bottom: 15px;
	font-weight: 600;
}
.leftSideCard{
	margin-top: 18px;
	margin-left: 18px;
}
.leftSideCard span{
	padding-top: 3px;
  padding-left: 28px;
  display: block;
}
.lineUnderImg{
	width: 171px;
	height: 24px;
	background-color:#2e4564;
	color:#fff;
	font-size: 0.940em;
	text-transform: uppercase;
	margin-bottom: 10px;	
}
.titleTextCard{
/*	width: 248px; */
	height: 15px;
	color: #2e4564;
	font-size: 1.1em;
	font-weight: 700;
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
	display: none;
}
.dateCard{
	width: 90%;
	height: 43px;
	color: #b1b1b1;
	font-size: 1.2em;
/*	font-weight:900; */
/*	margin-top: 19px; */
	font-family: 'Fira Sans', sans-serif, Helvetica, Arial, sans-serif;
}

.imgCard{
	max-width: 170px;
}



#triangle{
	width: 0;
	height: 0;
	border-top: 42px solid 	#ff6e02;
	border-right: 42px solid transparent;
	position: absolute;
	z-index: 20;
}
#triangle2{
	width: 0;
	height: 0;
	border-top: 62px solid 	#ebebeb;
	border-right: 62px solid transparent;
	position: absolute;
	z-index: 10;
}

#borderTop{
	border-top:3px solid #ff6e02;
	position: absolute;	
	width:100%;
	height: 2px;
	z-index: 5;
}
#borderLeft{
	border-left:3px solid #ff6e02;
	position: absolute;
	width:5px;
	height: 100%;
	z-index: 5;
}

#topSquare,#rightSquare,#rightSquareMini{
	width: 15px;
	height: 15px;
	background: #ff6e02;
	position: absolute;
	z-index: 20;

}
#rightSquare{
	top:0;
	right:0;
}

#topSquare{
	bottom:0;
	left:0;
}
#rightSquareMini{
	bottom: 0;
	right: 0;
	width: 7px;
	height: 7px;
}



/*2*/

#rightLine{
	border-right: 17px solid #d17520;
	height: 100%;
	position: absolute;
	right: 0;
	top:0;
}
.back{
	background-color: #ebebeb;
}
.backN{
	background-color: #fff;
}
.lineUnderImg .leftPadd{
	padding-left: 20px;
}
.back #rightSquareMini{
	background-color: #d17520;
}



/*3*/
.v3, .v31{
		background-color: #415d8a;
}
.color, .color .titleTextCard, .color .dateCard{
	color:#fff;
}
.color .lineUnderImg{
	background-color:#d17520 ;
}
.color #rightSquareMini{
	background-color: #fff;
}
.color .lineUnderImg{
	width:189px;
	margin-left: -18px;
}
.color .leftPadd{
	padding-left: 45px;
}
.color .blockCard{
	-webkit-box-shadow: 7px 7px 15px 0px rgba(50, 50, 50, 0.55);
	-moz-box-shadow:    7px 7px 15px 0px rgba(50, 50, 50, 0.55);
	box-shadow:         7px 7px 15px 0px rgba(50, 50, 50, 0.55);
}


/*4*/

.textCardBig{
	font-style: italic;
}
.bigImgCard img{
box-shadow: 3.5px 6.1px 7.8px 1.2px rgba(86, 82, 79, 0.6);
width:100%;
}

.card_v-2{
    width: 98%;
    font-family: 'PT Serif', serif;
}
.intCard .bigWidth{
	margin-top: 10px;
}

.intCard.bigWidth, .bigWidth{
	max-width:720px;
	width: 100%;
	margin:0 auto;
	text-align: center;
/*	height: 45px; */

}
.textCardBig{
	margin-bottom: 25px;
}
.vmin{
	height: 39px;
}

@media screen and (max-width: 720px){
	.bigWidth{margin-bottom: 10px;}
	.textCardBig{text-align: left;}
}
@media screen and (max-width: 550px) {
 
    .titleTextCard{width:90%;}
     .rightSideCard{
  	width: 45%;
  	margin-left: 3px;
  }
  	.dateCard{
  		margin-top:30px;
  	}
    
  }

@media screen and (max-width: 415px) {
 .labelCard{
 	width:110px; 
 	padding-right: 4px; 
 	font-size: 13px;
 }
 .rightSideCard{
  	width: 30%;
  }
  .labelCard span{padding-top: 5px;}
  
  .dateCard{
  		margin-top:50px;
  	}
  .titleCard{
  	font-size:1.09em; 
  	text-align: left; 
  	width: 90%;
  	margin-left:3px;
	font-family: 'Roboto Condensed', sans-serif;
  }
	.bigWidth{font-size: 1.09em; margin-bottom: 35px;}
}
@media screen and (max-width: 350px) {
  .rightSideCard{
  	width: 90%;
  	margin-left: 18px;
  }
  .dateCard{
  		margin-top:30px;
  		
  	}
  .textCard{
  	margin-bottom: 30px;
  }


}

@media screen and (max-width: 240px) {
.titleCard{
	font-family: 'Roboto Condensed', sans-serif;
	text-align: left;
}
.bigWidth{font-size: 1.01em; margin-bottom: 35px;}
.textCardBig{font-size:0.9em;}
}