.essb-ctt {
display: block;
position: relative;
background-color: #60A8DC;
border-radius: 4px;
padding: 25px 20px 10px 20px;
margin: 1em auto;
color: #fff;
cursor: pointer;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.essb-ctt-inline {
background-color: #60A8DC;
color: #fff;
cursor: pointer;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
padding: 1px;
word-wrap: break-word;
margin-right: 0.25em;
}
.essb-ctt.essb-ctt-light {
background-color: #fff;
border-left: 5px solid #888;
border-radius: 0px;
color: #555;
}
.essb-ctt-inline.essb-ctt-inline-light {
border-bottom: 3px solid #888;
color: #555;
background-color: transparent;
}
.essb-ctt.essb-ctt-light:hover {
background-color: rgba(88, 88, 88, 0.05);
border-left: 5px solid #555;
}
.essb-ctt-inline.essb-ctt-inline-light:hover {
background-color: rgba(88, 88, 88, 0.05);
border-bottom: 3px solid #555;
color: #555;
}
.essb-ctt.essb-ctt-dark {
background-color: #333;
border-left: 5px solid #999;
border-radius: 0px;
color: #fff;
}
.essb-ctt-inline.essb-ctt-inline-dark {
background-color: #333;
border-bottom: 3px solid #999;
color: #fff;
}
.essb-ctt-inline.essb-ctt-inline-dark:hover {
background-color: #111;
border-bottom: 3px solid #cdcdcd;
}
.essb-ctt.essb-ctt-dark:hover {
background-color: #111;
border-left: 5px solid #cdcdcd;
}
.essb-ctt.essb-ctt-x {
background-color: #0f1419;
}
.essb-ctt-inline.essb-ctt-inline-x {
background-color: #0f1419;
color: #fff;
}
.essb-ctt.essb-ctt-x:hover {
background-color: #293644;
border-color: #293644;
}
.essb-ctt-inline.essb-ctt-inline-x:hover {
background-color: #293644;
}
.essb-ctt.essb-ctt-qlite {
background-color: #fff;
border: 1px solid #efefef;
color: #333;
font-style: italic;
}
.essb-ctt.essb-ctt-qlite:hover {
background-color: rgba(88, 88, 88, 0.02);
border: 1px solid #e1e1e1;
color: #60A8DC;
}
.essb-ctt-inline.essb-ctt-inline-qlite {
background-color: #fff;
border: 1px solid #efefef;
color: #333;
font-style: italic;
padding: 2px;
}
.essb-ctt-inline.essb-ctt-inline-qlite:hover {
background-color: rgba(88, 88, 88, 0.02);
border: 1px solid #e1e1e1;
color: #60A8DC;
}
.essb-ctt.essb-ctt-modern {
background-color: #fff;
border: 0;
color: #666;
font-style: italic;
}
.essb-ctt.essb-ctt-modern:hover {
border: 0;
background: #fafafa;
color: #557ceb;
font-style: italic;	
}
.essb-ctt-inline.essb-ctt-inline-modern {
background-color: #fff;
border: 0;
color: #666;
font-style: italic;
border-bottom: 3px solid #557ceb;
}
.essb-ctt-inline.essb-ctt-inline-modern:hover {
background: #fafafa;
color: #557ceb;
font-style: italic;
}
.essb-ctt:hover {
background-color: #2a7fbd;
border-left: 5px solid #4499d6;
}
.essb-ctt-inline:hover {
background-color: #2a7fbd;
color: #fff;
}
.essb-ctt .essb-ctt-quote {
font-size: 20px;
font-weight: 300;
line-height: 24px;
display: block;
width: 100%;
}
.essb-ctt .essb-ctt-button {
text-align: right;
display: block;
margin-top: 10px;
font-size: 12px;
}
.essb-ctt .essb-ctt-button span { opacity: 0.7; }
.essb-ctt .essb-ctt-button svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.essb-ctt .essb-ctt-button i {
vertical-align: middle;
margin-left: 5px;
}
.essb-ctt-inline .essb-ctt-button i {
vertical-align: middle;
margin-left: 5px;
font-size: inherit;
}
.essb-ctt-inline .essb-ctt-button svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.essb-ctt-modern .essb-ctt-quote {
border-left: 3px solid #557ceb;
color: #333;
padding: 5px 15px;
}
.essb-ctt-modern .essb-ctt-button {
text-align: center;
}
.essb-ctt-qlite .essb-ctt-button span {
color: #555;
}
.essb-ctt-qlite .essb-ctt-button i {
color: #60A8DC;
}