@charset "UTF-8";


/**AUTHOR NAME MARKER**/
code {
  	background: rgba(0,0,0,.05);
	}
/**AUTHOR NAME MARKER**/




.card-quote-section {
  	max-width: 800px;  
  	margin: 80px auto;  
	}

#quote-container-margin-top {
	margin-top: 22px;  
	}



.text-center {
  text-align: center;
}

.quote-card {
  	background-image: url("../Picture_Center/background-center/concrete-wall.png");
  color: #222222;
  	padding: 20px !important;
  	padding-left: 50px !important;
  	box-sizing: border-box;
  	box-shadow: 0 2px 4px rgba(34, 34, 34, 0.12);
  	position: relative;
  	overflow: hidden;
   	min-height: 100px !IMPORTANT;       
	margin: 0px;  
	}
.quote-card p {
  	font-family: 'Work Sans', sans-serif;
  	line-height: 1.5;
  margin: 0;
  max-width: 80%;
	text-align: justify !important;
}
.quote-card cite {
  display: block;
  font-weight: 200;
  opacity: 0.8;
}










/***************************************************************************************************************************/

/* SMALLER TABLET screens -----------*/   /*--- SMALLER TABLET ---*/
@media screen and (max-width: 480px) {
	.quote-card:before {
  		top: 0px !important;
		}

	.quote-card {
  		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		78787878height: 70px;  height: auto !important;  
		}

  	.quote-card p {
		font-size: 13px  
  		}

	.quote-card cite {
		margin-top: 5px;
  		font-size: 12px;
		}

	.quote-card:after {
		font-size: 9em !important; 
  		right: -13px !important;
  		line-height: 1px;
  		bottom: -20px;
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/
	.quote-card:before {
  		top: 0px !important;
		}

	.quote-card {
  		111padding: 20px;
		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		78787878height: 70px;  height: auto !important;  
		}

  	.quote-card p {
		font-size: 13px; 
  		}

	.quote-card cite {
		margin-top: 5px;
  		font-size: 12px;
		}

	.quote-card:after {
		font-size: 10em !important;  
  		right: -14px !important;
  		line-height: 1px;
  		bottom: -21px;
		}
	}




/***********************************************************************************************0000000000000000000000000000000000000000**********/
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/
	.quote-card:before {
  		top: 0px !important;
		}

	.quote-card {
  		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		78787878min-height: 70px;  height: auto !important; 
		}

  	.quote-card p {
		font-size: 14px;  
  		}

	.quote-card cite {
		margin-top: 5px;
  		font-size: 13px;
		}

	.quote-card:after {
		font-size: 11em !important;
  		right: -14px !important;
  		line-height: 1px;
  		bottom: -22px;
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/
	.quote-card:before {
  		top: 1px !important;
		}

	.quote-card {
  		111padding: 20px;
		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		78787878min-height: 70px;  height: auto !important; 
		}

  	.quote-card p {
		font-size: 14px;   
  		}

	.quote-card cite {
		margin-top: 5px;
  		font-size: 13px;
		}

	.quote-card:after {
		font-size: 12em !important;
  		right: -15px !important;
  		line-height: 1px;
  		bottom: -22px;
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 690px) and (max-width : 769px) {/*--- Tablet portrait ---*/
	.quote-card:before {
  		top: 2px !important;
		}

	.quote-card {
  		111padding: 20px;
		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		78787878min-height: 70px;  height: auto !important; 
		}

  	.quote-card p {
		font-size: 15px;    
  		}

	.quote-card cite {
		margin-top: 6px;
  		font-size: 14px;
		}

	.quote-card:after {
		font-size: 13em !important;
  		right: -16px !important;
  		line-height: 1px;
  		bottom: -22px;
		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture) --- SMALLER TABLET ---*/
@media only screen and (min-width : 769px) and (max-width : 800px) {/*--- Small tablet landscape ---*/
	.quote-card:before {
  		top: 3px !important;
		}

	.quote-card {
  		111padding: 20px;
		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		78787878min-height: 70px;  height: auto !important; 
		}

	.quote-card p {
		font-size: 15px;    
  		}

	.quote-card cite {
		margin-top: 7px;
  		font-size: 14px;
		}

	.quote-card:after {
		font-size: 14em !important;
  		right: -16px !important;
  		line-height: 1px;
  		bottom: -27px;
		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture --- SMALLER TABLET ---*/
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/
	.quote-card:before {
  		top: 4px !important;
		}

	.quote-card {
  		111padding: 20px;
		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		78787878min-height: 70px;  height: auto !important; 
		}

  	.quote-card p {
		font-size: 15px;     
  		}

	.quote-card cite {
		margin-top: 8px;
  		font-size: 14px;
		}

	.quote-card:after {
		font-size: 14em !important;
  		right: -16px !important;
  		line-height: 1px;
  		bottom: -27px;
		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape ---*/
	.quote-card:before {
  		top: 9px !important;
		}

	.quote-card {
  		111padding: 20px;
		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		78787878min-height: 70px;   height: auto !important; 
		}

  	.quote-card p {
		font-size: 17px;      
  		}

	.quote-card cite {
		margin-top: 9px;
  		font-size: 16px;
		}

	.quote-card:after {
		font-size: 17em !important;
  		right: -21px !important;
  		line-height: 1px;
  		bottom: -30px;
		}
	}





/*********************************************************************************************************/
/* Desktops and laptops ----------- */  /*--- SMALL DESKTOP ---*/
@media only screen 
and (min-width : 1224px) {
	.quote-card {
  		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		78787878min-height: 70px; height: auto !important;  
		}

	.quote-card:before {
  		top: 10px !important;
		}

  	.quote-card p {
		font-size: 17px;     
		} 

	.quote-card cite {
		margin-top: 10px;
  		font-size: 16px;
		}

	.quote-card:after {
		font-size: 20em;
  		right: -24px !important;
  		line-height: 100px;
  		bottom: -91px;
		}
	}
/*********************************************************************************************************/






.quote-card cite {
	text-align: right; 
	padding-right: 20%;
	}






.quote-card:before {
  font-family: Georgia, serif;
  content: "“";
  position: absolute;
  top: 10px !IMPORTANT;
  left: 10px;
  font-size: 5em;
  color: rgba(168,168,168, 0.2);
  font-weight: normal;
}
.quote-card:after {
  font-family: Georgia, serif;
  content: "”";
  position: absolute;
  color: rgba(168,168,168, 0.2);
  font-weight: normal;
}
@media (max-width: 640px) {
  .quote-card:after {
    font-size: 22em;
    right: -25px;
  }
}
.quote-card.blue-card {
  background: #303F9F;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24);
}
.quote-card.blue-card:before, .quote-card.blue-card:after {
  color: #3F51B5;
}
.quote-card.red-card {
  background: #D32F2F;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24);
}
.quote-card.red-card:before, .quote-card.red-card:after {
  color: #F44336;
}
.quote-card.yellow-card {
  background: #F9A825;
  color: #222222;
  box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24);
}
.quote-card.yellow-card:before, .quote-card.yellow-card:after {
  color: #FBC02D;
}