@charset 'utf-8';
/* Table of Content
==================================================
	1.0 - Blockquotes
	2.0 - Default Colors
	3.0 - Responsive
	4.0 - Skin Colors*/

/*--------------------------------------------------------------
	1.0 - Blockquotes
	--------------------------------------------------------------*/
blockquote > p
{
    border-bottom: 1px solid;
    border-top: 1px solid;
    display: inline-block;
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    margin-bottom: 10px; 
    padding: 20px 0;
}
.dt-sc-dark-bg blockquote.type1 q
{
    border-color: #fff;
}

blockquote.type1
{
    border: none;
    float: left;
    margin: 26px 0;
    overflow: hidden;
    padding: 46px 0;
    position: relative;
    width: 100%;
}
blockquote.type1:before
{
    border-left-width: 0;
    border-right-width: 0;
    border-right-style: none;
    border-left-style: none;
    border-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    content: '';
    display: block;
    height: 10px;
    left: -30px;
    position: absolute;
    top: 0;
            transform: skew(-80deg);
    width: 100px;
       -moz-transform: skew(-80deg);
        -ms-transform: skew(-80deg);
    -webkit-transform: skew(-80deg);
}
blockquote.type1:after
{
    border-left-width: 0;
    border-right-width: 0;
    border-right-style: none;
    border-left-style: none;
    border-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    bottom: 0;
    content: '';
    display: block;
    height: 10px;
    position: absolute;
    right: -30px;
            transform: skew(-80deg);
    width: 100px;
       -moz-transform: skew(-80deg);
        -ms-transform: skew(-80deg);
    -webkit-transform: skew(-80deg);
}
blockquote.type1 q
{
    font-size: 20px;
    font-weight: normal;
    line-height: 40px;
    margin-left: 20px;
    position: relative;
}
blockquote.type1 q:before
{
    font-size: 30px;
    left: -18px;
    position: absolute;
    top: -15px;
}
blockquote.type1 q:after
{
    font-size: 30px;
}
blockquote.type1 cite
{
    float: right;
    text-align: right;
    width: 100%;
}
blockquote.type2
{   
    border: none;
    overflow: hidden;
    padding: 0 0 0 70px;
    position: relative;
    margin: 0;
}
blockquote.type2 q
{
    color: #041527;
    display: inline-block;
    font-family: 'Dancing Script', cursive;
    font-size: 24px;
    line-height: 40px;
    margin: 0;
    max-width: 100%;
}
blockquote.type2 q:before
{
    content: '';
}
blockquote.type2:before
{
    content: '"';
    font-family: 'Roboto Slab', serif;
    font-size: 70px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 15px;
    width: 70px;
    border: none;
    height: auto;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}
blockquote.type2:after
{
    content: none;
}
blockquote.type2 cite
{
    float: right;
    font-style: normal;
    margin: 30px 0 0;
    position: relative;
    text-align: right;
    width: auto;
}
blockquote.type2 cite:before
{
    background: rgba(0, 0, 0, .1);
    content: '';
    height: 1px;
    position: absolute;
    right: 100%;
    top: 18px;
            transform: translateX(-18px); 
    width: 9999px;
    -webkit-transform: translateX(-18px);
}

blockquote.type3
{
    border-left: 2px solid rgba(0, 0, 0, .2); 
    padding: 15px 0 15px 25px;
    margin: 0;
}
blockquote.type3 q
{
    font-size: 16px;
    line-height: normal;
    margin: 0;
    color: #041527;
}

blockquote.type3 cite {
    float: none;
    width: auto;
    text-align: inherit;
}

blockquote.type3:before,
blockquote.type3:after,
blockquote.type3 q:before,
blockquote.type3 q:after
{
    content: none;
}

blockquote.type4
{
    border: none;
    color: #041527; 
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 32px;
    padding: 20px 50px;
    text-align: center;
    margin: 0;
}
blockquote.type4 q {
    line-height: normal;
    margin: 0;
    font-size: 16px;
    color: #041527;
}
blockquote.type4:before,
blockquote.type4:after,
blockquote.type4 q:before,
blockquote.type4 q:after
{
    content: none;
}
blockquote.type4 > cite
{
    color: #041527; 
    display: inline-block;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    margin-top: 30px;
    text-align: center;
    text-transform: capitalize;
    width: 100%;
}
blockquote.type4 span
{
    float: left;
    font-size: 16px;
    font-weight: 700; 
    text-transform: capitalize;
    width: 100%;
}

/* Variations */

/* Blue */
blockquote.type1.blue q,
blockquote.type3.blue
{
    border-color: #008bd3;
}
blockquote.type2.blue cite::before
{
    background-color: #008bd3;
}

/* Brown */
blockquote.type1.brown q,
blockquote.type3.brown
{
    border-color: #795548;
}
blockquote.type2.brown cite::before
{
    background-color: #795548;
}

/* CadetBlue */
blockquote.type1.cadetblue q,
blockquote.type3.cadetblue
{
    border-color: #3c939d;
}
blockquote.type2.cadetblue cite::before
{
    background-color: #3c939d;
}

/* Chillipepper */
blockquote.type1.chillipepper q,
blockquote.type3.chillipepper
{
    border-color: #c10841;
}
blockquote.type2.chillipepper cite::before
{
    background-color: #c10841;
}

/* Cyan */
blockquote.type1.cyan q,
blockquote.type3.cyan
{
    border-color: #00bcd4;
}
blockquote.type2.cyan cite::before
{
    background-color: #00bcd4;
}

/* Darkgolden */
blockquote.type1.darkgolden q,
blockquote.type3.darkgolden
{
    border-color: #b48b3c;
}
blockquote.type2.darkgolden cite::before
{
    background-color: #b48b3c;
}

/* DeepOrange */
blockquote.type1.deeporange q,
blockquote.type3.deeporange
{
    border-color: #ff5722;
}
blockquote.type2.deeporange cite::before
{
    background-color: #ff5722;
}

/* DeepPurple */
blockquote.type1.deeppurple q,
blockquote.type3.deeppurple
{
    border-color: #673ab7;
}
blockquote.type2.deeppurple cite::before
{
    background-color: #673ab7;
}

/* Green */
blockquote.type1.green q,
blockquote.type3.green
{
    border-color: #60ae0d;
}
blockquote.type2.green cite::before
{
    background-color: #60ae0d;
}

/* Lime */
blockquote.type1.lime q,
blockquote.type3.lime
{
    border-color: #cddc39;
}
blockquote.type2.lime cite::before
{
    background-color: #cddc39;
}

/* Magenta */
blockquote.type1.magenta q,
blockquote.type3.magenta
{
    border-color: #cb506d;
}
blockquote.type2.magenta cite::before
{
    background-color: #cb506d;
}

/* Orange */
blockquote.type1.orange q,
blockquote.type3.orange
{
    border-color: #ff9800;
}
blockquote.type2.orange cite::before
{
    background-color: #ff9800;
}

/* Pink */
blockquote.type1.pink q,
blockquote.type3.pink
{
    border-color: #fd6ca3;
}
blockquote.type2.pink cite::before
{
    background-color: #fd6ca3;
}

/* Purple */
blockquote.type1.purple q,
blockquote.type3.purple
{
    border-color: #9c27b0;
}
blockquote.type2.purple cite::before
{
    background-color: #9c27b0;
}

/* Red */
blockquote.type1.red q,
blockquote.type3.red
{
    border-color: #da0000;
}
blockquote.type2.red cite::before
{
    background-color: #da0000;
}

/* SkyBlue */
blockquote.type1.skyblue q,
blockquote.type3.skyblue
{
    border-color: #0eb2e7;
}
blockquote.type2.skyblue cite::before
{
    background-color: #0eb2e7;
}

/* Teal */
blockquote.type1.teal q,
blockquote.type3.teal
{
    border-color: #009688;
}
blockquote.type2.teal cite::before
{
    background-color: #009688;
}

/* Turquoise */
blockquote.type1.turquoise q,
blockquote.type3.turquoise
{
    border-color: #32ccbd;
}
blockquote.type2.turquoise cite::before
{
    background-color: #32ccbd;
}

/* Wisteria */
blockquote.type1.wisteria q,
blockquote.type3.wisteria
{
    border-color: #9b59b6;
}
blockquote.type2.wisteria cite::before
{
    background-color: #9b59b6;
}

/* Yellow */
blockquote.type1.yellow q,
blockquote.type3.yellow
{
    border-color: #ffe401;
}
blockquote.type2.yellow cite::before
{
    background-color: #ffe401;
}


/*--------------------------------------------------------------
	2.0 - Default Colors
	--------------------------------------------------------------*/
blockquote.type1 q,
blockquote > p
{
    border-color: rgba(0, 0, 0, .15);
}



/*--------------------------------------------------------------
	3.0 - Responsive
	--------------------------------------------------------------*/


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px)
{
    blockquote.type2
    {
        width: 100%;
    }
    blockquote.type2 q
    {
        margin-right: 30px;
    }
}