/***************

Callout Package

***************/

/** ============

Available Color:

	- Green
	- Blue
	- Orange

Available Icons:

	- alert
	- audio
	- calendar
	- calculator
	- checkmark
	- email
	- hours
	- info
	- link
	- mobile
	- news
	- phone
	- printer
	- news
	- info
	- question

============ **/

/***** Pseudo Element Setup *****/

.oc-rteElement-H5::before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/***** Callout Styling *****/

/** Container **/

.oc-rteElement-H5 { padding: 20px 20px 20px 100px; color: white; box-sizing: border-box; border-radius: 8px; font-weight: bold; text-align: left; line-height: 27px!important; position: relative; overflow: hidden; margin: 0 0 15px 0!important; background: #ababab; }

/** Icon **/

.oc-rteElement-H5::before { display: flex; content: "\f06a"; justify-content: center; align-items: center; width: 75px; height: 100%; position: absolute; left: 0; top: 0; font-size: 30px; background: #333; }

/** Link Accomodation **/

.oc-rteElement-H5 a { color: white; text-decoration: underline; }
.oc-rteElement-H5 a:hover { opacity: 0.8; }

/** Multiples Accomodation**/

.oc-rteElement-H5:nth-child(1) { margin-bottom: 30px!important; }
.oc-rteElement-H5:nth-child(2) { margin-top: -15px!important; }
.oc-rteElement-H5:last-child { margin-bottom: 30px!important; }


/***** Color Swap *****/

h5.oc-rteElement-H5.green::before { background: #00492b!important; }
h5.oc-rteElement-H5.green { background: #009448!important; }
h5.oc-rteElement-H5.orange::before { background: #803300!important; }
h5.oc-rteElement-H5.orange { background: #bd550f!important; }
h5.oc-rteElement-H5.blue::before { background: #005089!important; }
h5.oc-rteElement-H5.blue { background: #009ad9!important; }

/***** Info Box Color Swap *****/

.info-box.green::before { background: #009448!important; }
.info-box.green { background: #00944826!important; }
.info-box.orange::before { background: #f58131!important; }
.info-box.orange { background: #f581311a!important; }
.info-box.blue::before { background: #005089!important; }
.info-box.blue { background: #ddeff7!important; }

/***** Icon Swap *****/

h5.oc-rteElement-H5.alert::before { content: "\f06a"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.audio::before { content: "\f028"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.audio a { text-decoration: none!important; }
h5.oc-rteElement-H5.audio a:hover { text-decoration: underline!important; }
h5.oc-rteElement-H5.calendar::before { content: "\f073"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.calculator::before { content: "\f1ec"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.check::before { content: "\f00c"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.check a { text-decoration: underline!important; }
h5.oc-rteElement-H5.email::before { content: "\f003"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.hours::before { content: "\f017"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.info::before { content: "\f05a"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.info a { text-decoration: underline!important; }
h5.oc-rteElement-H5.link::before { content: "\f0c1"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.link a { text-decoration: none!important; }
h5.oc-rteElement-H5.link a:hover { text-decoration: underline!important; }
h5.oc-rteElement-H5.mobile::before { content: "\f10b"!important; font-size: 40px!important; }
h5.oc-rteElement-H5.news::before { content: "\f1ea"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.news a { text-decoration: none!important; }
h5.oc-rteElement-H5.news a:hover { text-decoration: underline!important; }
h5.oc-rteElement-H5.phone::before { content: "\f095"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.phone a { text-decoration: underline; }
h5.oc-rteElement-H5.printer { display: block; }
h5.oc-rteElement-H5.printer::before { content: "\f02f"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.printer a { text-decoration: none!important; margin: 0!important; }
h5.oc-rteElement-H5.printer a:hover { text-decoration: underline!important; }
h5.oc-rteElement-H5.question::before { content: "\f059"!important; font-size: 30px!important; }
h5.oc-rteElement-H5.question a { text-decoration: underline!important; }

/********* Info Box ********/

/***** Pseudo Element Setup *****/

.info-box::before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/***** Icon Insert *****/

.info-box::before { content: "\f05a"; }

/***** Callout Styling *****/

/** Container **/

.info-box { display: block; padding: 20px 20px 20px 100px; background: #ddeff7; color: #333; box-sizing: border-box; border-radius: 8px; text-align: left; position: relative; overflow: hidden; line-height: 20px!important; }
.info-box.long { padding: 100px 40px 30px 40px; }
.info-box strong { font-weight: 600; }
.info-box span { display: block; clear: both; margin-bottom: 10px; }
.info-box span:nth-child(1) { margin-bottom: 15px; font-weight: 700; line-height: 25px!important; }
.info-box.long span:nth-child(1) { font-size: 25px; line-height: 30px!important; }
.info-box span:last-child { margin-bottom: 0; }
.info-box p:last-child { margin-bottom: 0; }
.info-box hr { border-color: #00528a; }
.info-box.long ul { padding-left: 19px; }
.info-box li::before { border-color: #029ada; }
.info-box ul ul>li::before { background: #029ada; }

/** Icon **/

.info-box::before { display: flex; justify-content: center; align-items: center; width: 75px; height: 100%;  background: #009ad9; position: absolute; left: 0; top: 0; font-size: 30px; color: white; }
.info-box.long::before { width: 100%; height: 75px; }

/** Link Accomodation **/

.info-box a { color: #00528a; text-decoration: underline; }
.info-box a:hover { opacity: 0.6; }

/** Multiples Accomodation**/

.info-box:nth-child(1) { margin-bottom: 30px!important; }
.info-box:nth-child(2) { margin-top: -15px!important; }
.info-box:last-child { margin-bottom: 30px!important; }
.info-box.bottom { margin-top: 30px; margin-bottom: 0!important; }

/***** Media Queries *****/

@media screen and (max-width: 425px) {

	.info-box::before { width: 100%; height: 75px; margin-bottom: 20px; }
	.info-box { padding: 100px 20px 20px 20px; }
	.info-box span:nth-child(1) { line-height: 20px!important; }

}

span#ms-rterangecursor-start,
span#ms-rterangecursor-end {
    display: none;
}
