﻿@charset "UTF-8";
 

11111.stand-alone-margin-quotation {
	BORDER: 0PX; 
	margin-top: 25px;
	}

.content-key-verse {
	Z-INDEX: 120 !IMPORTANT; 
	}


/**AUTHOR NAME MARKER**/
code {
  	background: rgba(0,0,0,.05);
	}
/**AUTHOR NAME MARKER**/





.card-quote-section {
  	max-width: 800px;  
  	margin: 1px auto;   
	MARGIN-BOTTOM: 0PX; 
  	7878background: rgb(5, 10, 21); 
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E")   
	}

#quote-container-margin-top {
	margin-top: 22px;  
	}



.text-center {
  text-align: center;
}

.quote-card {
  	color: #222222; color: #FFFFFF;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  MARGIN-TOP: 0PX !important; 
	MARGIN-BOTTOM: 0PX;   
	margin: 0px;
}
.quote-card p {
  	777font-family: 'Work Sans', sans-serif;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}
.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;		
  		66height: 70px; height: auto !important; 
		}

	.quote-card:before { 
  		top: 40px !important;  
		}

  	.quote-card p {
		font-size: 17px  
  		}

	.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 {
  		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		66height: 70px; height: auto !important;
		}

	.quote-card:before {  
  		top: 40px !important;  
		}

  	.quote-card p {
		font-size: 18px; 
  		}

	.quote-card cite {
		margin-top: 5px;
  		font-size: 13px;
		}

	.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;		
  		7878min-height: 70px; height: auto !important; 
		}

	.quote-card:before { 
  		top: 40px !important;  
		}

  	.quote-card p {
		font-size: 19px;   
  		}

	.quote-card cite {
		margin-top: 5px;
  		font-size: 14px;
		}

	.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 {
  		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		7878min-height: 70px; height: auto !important; 
		}

	.quote-card:before {  
  		top: 40px !important;  
		}

  	.quote-card p {
		font-size: 20px;   
  		}

	.quote-card cite {
		margin-top: 5px;
  		font-size: 15px;
		}

	.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 {
  		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		7878min-height: 70px; height: auto !important; 
		}

	.quote-card:before { 
  		top: 40px !important; 
		}

  	.quote-card p {
		font-size: 21px;     
  		}

	.quote-card cite {
		margin-top: 6px;
  		font-size: 16px;
		}

	.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 {
  		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		7878min-height: 70px; height: auto !important;  
		}

	.quote-card:before { 
  		top: 40px !important; 
		}

	.quote-card p {
		font-size: 22px;     
  		}

	.quote-card cite {
		margin-top: 7px;
  		font-size: 17px;
		}

	.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 {
  		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		7878min-height: 70px; height: auto !important; 
		}

	.quote-card:before { 
  		top: 50px !important;  
		}

  	.quote-card p {
		font-size: 23px;   
  		}

	.quote-card cite {
		margin-top: 8px;
  		font-size: 18px;
		}

	.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 {
  		padding-top: 3px;
		padding-left: 50px;
		padding-right: 1px;
		padding-bottom: 3px;		
  		7878min-height: 70px; height: auto !important; 
		}

	.quote-card:before { 
  		top: 60px !important;   
		}

  	.quote-card p {
		font-size: 24px;    
  		}

	.quote-card cite {
		margin-top: 9px;
  		font-size: 19px;
		}

	.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;		
  		7878min-height: 70px; height: auto !important; 
		}

	.quote-card:before { 
  		top: 10px !important;  top: 70px !important; 
		}

  	.quote-card p {
		font-size: 25px;    
		} 

	.quote-card cite {
		margin-top: 10px;
  		font-size: 20px;  
		}

	.quote-card:after {
		font-size: 20em;
  		right: -24px !important;
  		line-height: 100px;
  		bottom: -91px;
		}
	}
/*********************************************************************************************************/











.quote-card:before {
  	font-family: Georgia, serif;
  	content: "“";
  	position: absolute;
  	left: 10px;
  	font-size: 5em; font-size: 7em;
  	color: rgba(255, 255, 255, 0.5); 
  	text-shadow: none;  
  	font-weight: normal;
	}

.quote-card:after {
  	font-family: Georgia, serif;
  	content: "”";
  	position: absolute;
  	color: rgba(255, 255, 255, 0.5); 
  	text-shadow: none;  
  	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;
}



#arranging-author-name {
	color: #f2f2f2 !important; 
	text-align: right; 
	padding-right: 30%;
	}




cite, code {
	color: #f2f2f2 !important; 
	}