/* Callout Banner */
.callout-banner { margin-bottom: 40px; margin-top: 20px;}
.callout-banner-title {font-weight: 300; font-size: 24px; line-height: 1.6; position: relative; padding-top :20px; margin-top:0; }
.callout-banner-title strong { font-weight:600; }
.callout-banner-title:before { content:''; position: absolute; top:0; left:0; width:80px; height:3px; background:#000; opacity: 0.1; }
.calloutbanner--dark .callout-banner-title:before {background:#fff;}
/* Circle Hover */
.circlehover {width:130px; height:130px; text-align:center; color: white; font-size: 18px; padding: 10px; display: table; line-height: 1.4; background-color:#CD2122; position:relative; font-weight: 300;  border-radius:50%; box-shadow: 3px 3px 1px rgba(0,0,0,0.2); -webkit-transition: all 400ms cubic-bezier(0.680, 0, 0.265, 1); -webkit-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);}
.circlehover:hover { color:#fff; -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); box-shadow:5px 5px 1px rgba(0,0,0,0.2); }
.circlehover:before {content:''; position:absolute; top:7px; left:7px; background:#CD2122; width:30px; height:30px; border-radius:3px; }
.circlehover > span {display:table-cell; vertical-align:middle; position:relative; z-index:1; }
.circlehover[data-size="small"] {width:80px; height:80px; font-size: 14px; padding: 8px; }
.circlehover[data-size="medium"] {width:95px; height:95px; font-size: 16px; padding: 10px; }
.circlehover[data-position="top-left"]:before { top:7px; left:7px;}
.circlehover[data-position="top-right"]:before { top:7px; right:7px; left: auto;}
.circlehover[data-position="bottom-left"]:before { bottom:7px; left:7px; top:auto;}
.circlehover[data-position="bottom-right"]:before { bottom:7px; right:7px; left: auto; top:auto;}
.circlehover[data-position="top"]:before,
.circlehover[data-position="right"]:before,
.circlehover[data-position="left"]:before,
.circlehover[data-position="bottom"]:before {-webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); }
.circlehover[data-position="top"]:before {top: -10px; left: 50%; margin-left: -15px;}
.circlehover[data-position="right"]:before { top:50%; right:-10px; left: auto; margin-top:-15px;}
.circlehover[data-position="left"]:before { top:50%; left:-10px; margin-top:-15px;}
.circlehover[data-position="bottom"]:before { bottom:-10px; left:50%; margin-left:-15px; top:auto;}
.circlehover[data-position="bottom-right"] { box-shadow:-3px -3px 1px rgba(0,0,0,0.5);}
.circlehover[data-position="bottom-right"]:hover { box-shadow:-5px -5px 1px rgba(0,0,0,0.5);}
.circlehover[data-align="left"] {float:left;}
.circlehover[data-align="right"] {float:right;}
.circlehover.with-symbol .circlehover-symbol {opacity:0; position:absolute; display:block; left: 0; top: 0; bottom: 0; right: 0; text-align: center; line-height: 130px; }
.circlehover.with-symbol:hover .circlehover-text {opacity:0;}
.circlehover.with-symbol:hover .circlehover-symbol {opacity:1; }

/* Callout Banner style 2 */
.circlehover.style2 { width: 100%; height: 75px; text-align: center; color: white; font-size: 18px; padding: 10px 20px; display: table; line-height: 1.3; position: relative; font-weight: 300; text-shadow: none; border-radius: 4px; box-shadow: none;}
.circlehover.style2:before { content: ''; position: absolute; width: 100%; height: 100%; top: initial; bottom: -4px; left: 0; border-radius: 3px; -webkit-transform: skewY(3deg); -ms-transform: skewY(3deg); transform: skewY(3deg); z-index: 1;}
.circlehover.style2:after { content: ''; position: absolute; background-color: #dcdcdc; width: 90%; height: 16px; top: initial; bottom: -9px; left: 11px; border-radius: 3px;-webkit-transform: skewY(-3deg);-ms-transform: skewY(-3deg);transform: skewY(-3deg);}
.circlehover.style2.with-symbol .circlehover-symbol { line-height: 73px;}
.circlehover.style2.with-symbol .circlehover-symbol-img { max-height: 48px;}

/* Callout Banner style 3 */
.circlehover.style3 { width: 150px; height: 150px; box-shadow: none;}
.circlehover.style3:before { left: 3px; top: inherit; bottom: 25px; -webkit-transform: skewY(-28deg) rotate(27deg); -ms-transform: skewY(-28deg) rotate(27deg); transform: skewY(-28deg) rotate(27deg);}
.circlehover.style3 .circlehover-text { background: #000; color:#fff; display: block; position: absolute; bottom: 15px; right: -23px; min-width: 100px; padding: 3px 10px; font-style: italic; border-radius: 4px; font-size: 13px; line-height: 20px;}
.calloutbanner--dark .circlehover.style3 .circlehover-text {background: #ccc; color:#333;}
.circlehover.style3.with-symbol .circlehover-symbol { line-height: 150px;}
.circlehover-symbol-trg { display: none;}
.circlehover.style3 .circlehover-symbol-trg { display: block;position: absolute; left: 72px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); top: 65px;}
.circlehover.style3 .play-icon { display: block; background-color: #fff; -webkit-transform: rotate(-60deg) skewX(-30deg) scale(1,.866); -ms-transform: rotate(-60deg) skewX(-30deg) scale(1,.866); transform: rotate(-60deg) skewX(-30deg) scale(1,.866); position: relative; text-align: left;}
.circlehover.style3 .play-icon:before,
.circlehover.style3 .play-icon:after { content: ''; position: absolute; background-color: inherit; }
.circlehover.style3 .play-icon,
.circlehover.style3 .play-icon:before,
.circlehover.style3 .play-icon:after {width: 16px; height: 16px; border-top-right-radius: 30%;}
.circlehover.style3 .play-icon {-webkit-transform: rotate(-60deg) skewX(-30deg) scale(1,.866);-ms-transform: rotate(-60deg) skewX(-30deg) scale(1,.866);transform: rotate(-60deg) skewX(-30deg) scale(1,.866);}
.circlehover.style3 .play-icon:before {-webkit-transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);-ms-transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);}
.circlehover.style3 .play-icon:after {-webkit-transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);-ms-transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);}
.circlehover.style3:hover .circlehover-symbol-trg {display: none;}
/* MQ's */
@media (max-width: 767px) {
	.circlehover[data-align="right"] { float: none; margin: 20px auto;}
    .circlehover.style2 { width: auto; }
}