/**
 * Hoot Upsell Page
 * ========================================================
 */

/* Intro */

#hoot-upsell .centered { text-align: center; margin: 1em; }
#hoot-upsell h1.centered { font-size: 4em; line-height: 1.2em; font-weight: lighter; text-transform: uppercase; margin-bottom: 0; }
#hoot-upsell h1 span { display: block; font-size: 1.4em; font-weight: normal; }
#hoot-upsell h1 span strong { font-weight: bold; color: #0073aa; }
#hoot-upsell .hoot-upsell-intro, #hoot-upsell .hoot-upsell-cta { color: #555d66; font-weight: 400; line-height: 1.6em; font-size: 19px; }

#hoot-upsell .hoot-upsell-cta .button { font-size: inherit; line-height: inherit; height: auto; text-transform: uppercase; padding: 6px 18px; margin: 1em 1em 2em; font-weight: bold; min-width: 250px; }
#hoot-upsell .button-view-demo { color: #999; }
#hoot-upsell .button-buy-premium { box-shadow: none; }

/* Content */

.hoot-upsell-sub { background: #fff; padding: 5px 20px 0; border: solid 1px #eee; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); }
.hoot-upsell-sub .section-premium { border-bottom: solid 1px #ddd; padding: 50px 0; max-width: 1040px; margin: 0 auto; font-size: 16px; line-height: 24px; }
.section-premium strong { font-weight: bold; }
.section-premium h4 { line-height: 1em; text-transform: uppercase; margin: 0 0 0.6em; font-size: 2em; font-weight: normal; }
.section-premium h4 span { display: inline-block; }
.section-premium hr { border: transparent; margin: 8px 0; }
.section-premium img { max-width: 100%; }
/*Style*/
.hoot-upsell-sub .premium-hero { text-align: center; }
.premium-hero h4.heading { font-size: 2.8125em; font-weight: lighter; }
.premium-hero .premium-hero-text { max-width: 600px; margin: 1em auto; }
.premium-hero .premium-hero-img {}
/*Style*/
.hoot-upsell-sub .premium-sideinfo {}
.premium-sideinfo .premium-side-wrap { max-width: 850px; margin: 0 auto; }
.premium-sideinfo .premium-side-img { float: left; width: 48%; text-align: right; }
.premium-sideinfo .premium-side-textblock { float: right; width: 47%; }
.premium-sideinfo h4.heading {}
.premium-sideinfo .premium-side-text {}
/*Style*/
.hoot-upsell-sub .premium-asideinfo {}
.premium-asideinfo .premium-aside-block {}
.premium-asideinfo .premium-aside-wrap { max-width: 850px; margin: 0 auto; }
.premium-asideinfo .premium-aside-1 { width: 45%; float: left; text-align: right; }
.premium-asideinfo .premium-aside-2 { width: 45%; float: right; }
.premium-asideinfo .premium-aside-img {}
.premium-asideinfo h4.heading { margin-top: 0.6em; }
.premium-asideinfo .premium-aside-text {}
/*Style*/
.hoot-upsell-sub .premium-info {}
.premium-info .premium-info-img { text-align: center; }
.premium-info .premium-info-textblock { margin: 2em auto 0; max-width: 850px; }
.premium-info .premium-info-heading { text-align: right; width: 50%; float: left; }
.premium-info h4.heading { margin-bottom: 0; }
.premium-info .premium-info-text { width: 45%; float: right; }

/*.hoot-upsell-sub .premium-info-text { float: left; width: 54%; padding-right: 2%; }
.hoot-upsell-sub .heading { font-size: 1.7em; line-height: 1em; margin: 45px 0 1em; font-weight: normal; text-transform: uppercase; }
.hoot-upsell-sub hr { border: transparent; margin: 8px 0; }
.hoot-upsell-sub .premium-info-img { width: 43%; float: left; padding-top: 45px; text-align: center; }
.hoot-upsell-sub img { max-width: 100%; height: auto; }*/

#hoot-upsell .hoot-upsell-sub .hoot-upsell-cta { margin: 20px auto; border-bottom: none; }

.hoot-premium-top { position: fixed; bottom: 20px; right: 20px; text-decoration: none; background: rgba(0,0,0,0.5); padding: 8px; color: #fff !important; }

@media only screen and (max-width: 640px) {
	#hoot-upsell .centered { margin-left: 0; margin-right: 0; }

	.premium-hero h4.heading { font-size: 2em; }

	.premium-sideinfo .premium-side-textblock { margin-top: 2em; }

	.premium-asideinfo .premium-aside-2 { padding-top: 50px; margin-top: 50px; border-top: solid 1px #ddd; }

	.premium-sideinfo .premium-side-img, .premium-sideinfo .premium-side-textblock,
	.premium-asideinfo .premium-aside-1, .premium-asideinfo .premium-aside-2,
	.premium-info .premium-info-heading, .premium-info .premium-info-text { float: none; width: 100%; max-width: none; text-align: center; }
	.premium-info h4.heading { margin-bottom: 0.6em; }
}