/*
This style sheet contains 6 different blockquote styles that you can use for your quote:
bq-simple, bq-picture, bq-gradient, bq-circle, .bq-inicon, bq-topicon. Simply change the class of the wrapper div to change the style.
*/

.bq-simple{
	width:80%;
	max-width: 700px;
}
    .bq-simple .bq-icon{
        fill: #ccc;
		width: 50px;
		height: 50px;
    }
		
	.bq-simple .bq-body {
		font-size:1em;
		line-height: 1.5em;
    }
	
    .bq-simple .bq-body p.quote{
        padding: 0;
		margin: 0;
		font-size:1.3em;
        line-height:1.2em;
        font-weight:500;
		font-style: italic;
    }
    .bq-simple .bq-body p.author{
        font-weight:400;
        color:#aaaaaa;
    }
    .bq-simple .bq-image{
        display:none;
    }
    
/*
start blockquote style .bq-picture 
*/

.bq-picture{
    max-width:700px;
    width: 100%;
    margin:25px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
}
    .bq-picture .bq-icon{
        fill: #ccc;
		width: 50px;
		height: 50px;
		box-shadow: none;
		padding: 0 45%;
    }
		
	.bq-picture .bq-body {
		font-size:1em;
		line-height: 1.5em;
		padding: 0 60px 20px 60px;
		text-align: center;
    }
	
    .bq-picture .bq-body p.quote{
        padding: 0;
		margin: 0;
        font-weight:700;
    }
    .bq-picture .bq-body p.author{
        font-weight:400;
        color:#aaaaaa;
    }
    .bq-picture .bq-image img{
        height:300px;
        max-width:700px;
        width: 100%;
        object-fit:cover;
    }
    
/*
start blockquote style .bq-gradient 
*/

.bq-gradient{
    max-width: 700px;
    background-image: linear-gradient(to bottom right, #432371, #faae7b);
    display:flex;
    flex-wrap: wrap;
    justify-content:center;
    align-content:center;
	padding: 50px;
}
    .bq-gradient .bq-icon{
        border-radius:50%;
        width:70px;
        height:70px;
        display:flex;
        flex-wrap: wrap;
        justify-content:center;
        align-content:center;
        fill:white;
    }
    .bq-gradient .bq-body{
		display:flex;
		justify-content:center;
		flex-direction: column;
		align-items: center;
        width:550px;
        padding:20px 0 40px 0;
        border-bottom:1px solid white;
        border-top:1px solid white;
		color:white;
    }
    .bq-gradient .bq-body p.quote{
		margin: 0;
        font-weight:600;
        font-size:2.0em;
        line-height:1.1em;
    }
    .bq-gradient .bq-body p.author{
        font-size:1.3em;
        line-height:1.5em;
        font-weight:400;
        margin:15px 0 0 0;
    }
    .bq-gradient .bq-image{
        display:none;
    }
    
/*
start blockquote style .bq-circle 
*/

.bq-circle{
    width: 400px;
    height: 400px;
    margin:25px;
    padding:35px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
    border-radius:50%;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align:center;
}

.bq-circle .bq-body{
		display:flex;
		justify-content:center;
		flex-direction: column;
		align-items: center;
    }
    
    .bq-circle .bq-icon{
        background-color:#E74C3C;
        border-radius:50%;
        width:70px;
        height:70px;
        display:flex;
        flex-wrap: wrap;
        justify-content:center;
        align-content:center;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07), 0 3px 10px 0 rgba(0, 0, 0, 0.06);
        fill:white;
    }
    .bq-circle .bq-body p.quote{
        font-size:1.1rem;
        line-height:1.5;
        font-weight:375;
        color:black;
        display:block;
        padding:0 0 15px 0;
        border-bottom:1px solid rgb(195, 195, 195);
        letter-spacing:.5px;
    }
    
    .bq-circle .bq-body p.author{
        font-size:1rem;
        line-height:1.5;
        font-weight:375;
        color:#ABB2B9;
        display:block;
        margin:15px 0 0 0;
    }
    .bq-circle .bq-image{
        display:none;
    }
    
/*
start blockquote style .bq-inicon
*/

.bq-inicon{
    max-width:700px;
    width: 80%;
    margin:25px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
    border-left:7px solid #9B59B6;
    display:relative;
}
    .bq-inicon .bq-icon{
        display: absolute;
		float:left;
        top: 0;
		width: 50px;
		height: 50px;
        fill:#9B59B6;
    }
    .bq-inicon .bq-body {
        padding: 20px 40px 20px 100px;
		font-size:1em;
		line-height: 1.5em;
    }
		
	.bq-inicon .bq-body p.quote {
		font-size:1.5em;
		line-height: 1.3em;
        font-weight:700;
    }
    .bq-inicon .bq-body p.author{
        font-weight:300;
    }
    .bq-inicon .bq-image{
        display:none;
    }
    
    
/*
start blockquote style .bq-topicon
*/

.bq-topicon{
	width:80%;
    padding:40px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
	max-width: 700px;
	border-radius: 12px;
}
    .bq-topicon .bq-icon{
        background-color:#138D75;
        border-radius:50%;
        width:50px;
        height:50px;
        display:flex;
        flex-wrap: wrap;
        justify-content:center;
        align-content:center;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07), 0 3px 10px 0 rgba(0, 0, 0, 0.06);
        fill: white;
    }
		
	.bq-topicon .bq-body {
        padding: 0;
		font-size:1em;
		line-height: 1.5em;
    }
	
    .bq-topicon .bq-body p.quote{
        font-size:1.5em;
        line-height:1.3em;
        font-weight:700;
		padding-bottom: 14px;
        border-bottom:1px solid #aaaaaa;
		font-style: italic;
    }
    .bq-topicon .bq-body p.author{
        font-weight:400;
        color:#aaaaaa;
    }
    .bq-topicon .bq-image{
        display:none;
    }