@charset "utf-8";
/*----------intial declartaion of css----------*/

body{ font-family: 'Montserrat', sans-serif; color:#000;   /*appearance:none; -moz-appearance:none;-webkit-appearance:none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust:none;*/}
/*a,.btn{ outline: none !important; transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms--moz-transition: all 0.5s ease-in-out 0s; -o--moz-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; text-decoration:none !important;}
*/
img{ max-width:100%;}

.banner{ background:#f3eeee url(https://email.uplers.com/infographics/new-age-email-design-best-practices/images/banner-bg.png) no-repeat center top; padding-top:152px; background-size:cover}
.envelope-bg{ background: url(https://email.uplers.com/infographics/new-age-email-design-best-practices/images/envelope.png) no-repeat center top; height:388px;}
.envelope-bg h1{ font-size:64px; color:#000000; line-height:56px; font-family: 'Montserrat', sans-serif; font-weight:300; padding-top:20px;}
.envelope-bg h1 span { font-size:42px; background:#ffdd00; display:block;   width:315px; margin:6px auto 0; line-height:48px;}
.envelope-bg h1 i{ font-style:normal; font-size:36px; line-height:40px; font-weight:900; display:block}
.old-practices{ background:#FFDA30; padding:63px 0 22px}
.old-practices p{ font-size:18px; font-family: 'Montserrat', sans-serif; line-height:30px; margin-bottom:48px;}
.old-practices p span{ font-size:18px; line-height:24px;}
.practices-img{ background:#FFDA30; padding:20px; display:inline-block; vertical-align:top; margin-bottom:0px;}
.practices-img img{ display:block}
.old-practices h2{ text-align:center; font-size:18px; font-weight:900; font-family: 'Montserrat', sans-serif; text-transform:uppercase; margin-top:14px; margin-bottom:44px;}
.old-practices a{ color:#000;}
.old-practices a:hover{ color:#f1f1f1; text-decoration:none}
.practices-block{ width:450px; display:inline-block; vertical-align:top}
.mobile-first{ background:#e6b705; padding-top:51px; padding-bottom:68px}
.mobile-first h2{ text-transform:uppercase; font-size:48px; font-weight:300;  font-family: 'Montserrat', sans-serif; color:#000; margin-bottom:18px;}
.mobile-first p{ font-size:18px; margin-bottom:58px;}
.mobile-first h2 i{font-style:normal; color:#fff; background:#000; line-height:normal; display:inline-block; vertical-align:top; line-height:48px; padding:0 5px}
.mobile-block{ position:relative; padding-top:40px; width:840px; margin:0 auto; padding-bottom:40px;}
.mobile-text{ background:#FFDA30; padding:31px 30px 40px 146px; min-height:160px}
.mobile-right .mobile-text{ padding:31px 146px 40px 30px; }
.mobile-text > p{ font-size:16px; line-height:28px;  font-family: 'Montserrat', sans-serif; margin-bottom:0 !important;}
.mobile-text > p a{ font-weight:700; color:#d14e11; text-decoration:underline;}
.mobile-text > p a:hover{ color:#000}
.mobile-img{ position:absolute; top:0; left:0}
.mobile-right .mobile-img{ right:0; left:inherit}

.imagery{ background:#383838; padding-top:44px; padding-bottom:44px;}
.imagery h2{ font-size:48px; font-weight:300; font-family: 'Montserrat', sans-serif; color:#fff; text-align:center; text-transform:uppercase; margin-bottom:75px;}
.imagery h2 strong{font-style:normal; color:#383838; background:#FFDA30; line-height:normal; display:inline-block; vertical-align:top; line-height:48px; padding:0 5px}
.imagery .imagery-blog{ width:449px; text-align:left; display:inline-block; vertical-align:top}
.imagery .imagery-blog img{ margin-bottom:23px;}
.imagery .imagery-blog p{ font-size:16px; line-height:28px;  font-family: 'Montserrat', sans-serif; color:#fff; margin-bottom:50px;}
.imagery .imagery-blog p span{ color:#FFDA30; font-weight:700}
.imagery .imagery-blog p span a{ color: #FFDA30; }
.imagery .btm-border:after{ content:""; display:block; width:928px; margin:0px auto 60px; border:3px solid #222;}
.imagery .imagery-blog p.gif-text{ padding-top:60px;}


.pre-header{ background: #e6b705; padding-top:41px; padding-bottom:70px;}
.pre-header h2{ text-align:center; text-transform:uppercase; font-size:48px; margin-bottom:49px;}
.pre-header h2 span{font-style:normal; color:#fff; background:#383838;display:inline-block; vertical-align:top; line-height:48px; padding:0 5px;}
.pre-header h2 span i{ font-style:normal; color:#FFDA30}

.pre-header p{ font-size:18px; padding-top:66px;}
.tablet-bg{ width:940px; display:inline-block; margin-top:69px; vertical-align:top; text-align:left; background:#fff url(https://email.uplers.com/infographics/new-age-email-design-best-practices/images/top-point.jpg) no-repeat center 15px; padding:47px; border-radius:50px;}
.tablet-bg .top-menu{ background:#f8755b url(https://email.uplers.com/infographics/new-age-email-design-best-practices/images/menu-icon.png) no-repeat 77px 12px; padding:6px 77px 9px; text-align:right}
.tablet-bg .chat-bg{padding:26px 65px 75px; background:#FFDA30 url(https://email.uplers.com/infographics/new-age-email-design-best-practices/images/bg.jpg)  repeat left top; position:relative;}
.tablet-bg .chat-bg .btn-bottom{ position:absolute; left:0; bottom:-25px; width:100%; background:#fff; text-align:center; padding-top:20px; text-align:center}
.tablet-bg .chat-bg .btn-bottom img{ display:inline-block; vertical-align:top}
.tablet-bg .chat-bg ul{ margin:0px; padding:0px; list-style:none}
.tablet-bg .chat-bg li{ display:table; padding-bottom:20px; width:100%;}
.tablet-bg .chat-bg li .user-icon{ display:table-cell; vertical-align:top; padding-right:17px; width:60px;}
.tablet-bg .chat-bg li .user-chat{ display:table-cell;  vertical-align:top;  position:relative;}
.tablet-bg .chat-bg li .user-chat:before{width: 0; content:"";height: 0;border-style: solid;border-width: 5.5px 10px 5.5px 0;border-color: transparent #ffea9d transparent transparent;position:absolute; left:-10px; top:18px;}
.tablet-bg .chat-bg li .user-chat p{padding-top:0; font-size:14px; font-weight:600; margin-bottom:0; display:inline-block; vertical-align:top; background:#ffea9d; border-radius:4px; padding:14px 25px 12px;}
.tablet-bg .chat-bg li.female-chat{ text-align:right;}
.tablet-bg .chat-bg li.female-chat .user-icon{padding-left:17px; width:60px; padding-right:0}

.tablet-bg .chat-bg li.female-chat .user-chat p{ background:#fff;}
.tablet-bg .chat-bg li.female-chat .user-chat:before{ left:inherit; right:-10px; border-width: 5.5px 0px 5.5px 10px;border-color: transparent transparent transparent #fff;}

.em-tidy{  background: #fbd02e; text-align:center; padding-top:40px; padding-bottom:46px;}
.em-tidy h2{ font-size:48px; text-transform:uppercase; font-weight:300; margin-bottom:41px;}
.code-page{ width:740px; margin:0 auto}
.code-page .top-head{ background:#fff; height:38px; text-align:left}
.code-page .top-head:before{ content:""; background:#000; height:11px; width:75px; display:inline-block; vertical-align:top; margin-top:16px; margin-left:20px;}
.code-page .center-text{ background: #fbd02e; padding-top:38px; padding-bottom:28px;}
.code-page .center-text p{ background:#FFDA30; color:#000; display:inline-block; vertical-align:top; font-size:15px; line-height:24px; width:475px; padding:6px 0}

.btm-ftr{background:#fff;  text-align:left; padding-bottom:15px;}
.btm-ftr:before{content:""; background:#000; height:11px; width:75px; display:inline-block; vertical-align:top; margin:22px 30px 0 20px;}
.btm-ftr ul{margin:0px; list-style:none; list-style:none; display:inline-block; vertical-align:top; margin-top:17px;}
.btm-ftr ul li{display:inline-block; vertical-align:top; margin-right:22px;}
.email-on-hand{background:#e6b705; text-align:center}
.email-on-hand ul{ margin:0px; padding:0px; list-style:none; text-align:center; width:970px; display:inline-block; vertical-align:top}
.email-on-hand li{ display:inline-block; vertical-align:top; width:32%; margin: 0; }
.email-on-hand li:first-child{ text-align:right; padding-right:25px;}
.email-on-hand li:first-child p{ padding-top:150px; text-align:right; width:260px; font-size:16px; line-height:30px; display:inline-block; vertical-align:top}
.email-on-hand li:last-child{ padding-top:123px; padding-left:15px;}
.email-on-hand li:last-child p{ text-align:left; font-size:15px; line-height:18px; background:#d1a604; padding:12px 20px; margin-bottom:3px;}


.email-on-hand .watch-img{ position:relative; text-align:center}
.email-on-hand .watch-text{ position:absolute; width:100%; left:-6px; top:208px;}
.email-on-hand .watch-text h3{ font-size:28px; color:#fff; text-transform:uppercase; font-weight:300}
.email-on-hand .watch-text span{ color:#FFDA30}
.email-on-hand .watch-text span i{ font-style:normal; color:#fff;}
.popcorn-tips{background:#383838; padding-top:54px; padding-bottom:100px;}
.popcorn-tips h2{ text-align:center; text-transform:uppercase; color:#fff; font-weight:300; font-size:48px; margin-bottom:83px}
.popcorn-tips p{ color:#fff; font-size:14px; line-height:28px; padding-left:32px; margin-bottom:60px;}
.popcorn-tips span{ color:#FFDA30;}
.popcorn-tips strong{color:#FFDA30;}

.popcorn-tips .popcorn-text{ position:relative;}
.popcorn-tips .popcorn-img{ position:absolute; left:50%; margin-left:-206px;}


/*-----------common section styles goes here---------------*/
#headerSlideContent { color: #FFFFFF; height: 50px; margin: 0 auto; width: 882px; }
#header_logo { float: left; padding: 10px 0 0 0px; width: 122px; }
#header_txt { color: #FFFFFF; float: left; font-size: 14px; height: 50px; line-height: 50px; width: 640px; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 400; font-style: normal; }
#header_txt span { color: #FFFFFF; font-size: 15px; text-align: center; }
#header_order { float: left; padding: 12px 0 0 10px; }
.social-bg { background: #fff; padding: 35px 0; }
.embed-infographic h3 { background: none repeat scroll 0 0 #3e3e3e; color: #f5f5f5; float: left; font-size: 16px !important; font-weight: 700; margin: 0 0 35px; /*padding-bottom: 15px; padding-top: 15px; */text-transform: uppercase; width: 100%; font-family: 'Montserrat', sans-serif; font-weight: 400 !important; font-style: normal; text-align: center; padding:10px 0}
.fb_iframe_widget span { width: 100% !important; height: 100px !important; }
.fb_iframe_widget { margin-top: 30px; }
.embed-infographic { clear: both; display: block; padding: 31px 0 0; }
.monk-share-btn{ display:inline-block; vertical-align:top; margin-bottom:5px;}
.printrest-btn { margin-left: 5px; padding-top: 2px;  display:inline-block; vertical-align:top }
.monk-share-area { clear: both; display: block;}
.embed-textarea { float: left; width: 100%; }
.embed-textarea textarea { background-color: #ffffff; border: 1px solid #cccccc; border-radius: 3px; clear: both; color: #000000; font-size: 13px; font-weight: 400; line-height: 20px; outline: medium none; padding: 8px; resize: none; width: 100%; box-sizing: border-box; }
.embed-infographic h5 { background: #3e3e3e; font-size: 16px; float: left; width: 100%; font-weight: 700; padding-bottom: 15px; padding-top: 15px; margin: 35px 0px; text-transform: uppercase; color: #F5F5F5; font-family: 'Montserrat', sans-serif; font-weight: 400; font-style: normal; text-align: center; }
.stats-to-tweet { text-align: center; clear: both; display: inline-block; padding-bottom: 25px; }
.stats-to-tweet ul { text-align: center; width: 100%; padding-left:0;}
.stats-to-tweet li { /*background: url("../images/bullet-bg.png") no-repeat scroll left 9px;*/
font-size: 13px; margin-bottom: 21px; line-height: 21px; border-bottom: 1px dashed #D8D8D8; padding-bottom: 21px; text-align: center;font-family: 'Montserrat', sans-serif; font-weight: 400; font-style: normal; text-align: center; width:69.8%; display:inline-block; *display:inline; zoom:1; }
.stats-to-tweet li a { color: #F26725; }
.stats-to-tweet li a:hover { color: #000; }
.fb_iframe_widget iframe{ position:relative !important;}
.stButton .stButton_gradient,.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices{ height:auto !important;}

@media (max-width:1100px) {#sthoverbuttons{ visibility:visible !important}
}


@media (max-width:900px) {
	#header_txt{ display:none}
	#headerSlideContent{ max-width:96%}
	#header_order{ float:right}

}

@media (max-width:767px) {
	#sthoverbuttons{ visibility:hidden !important; display:none !important}
	.stButton{ margin-bottom:5px;}
	#livechat-full,.olrk-available{ display:none !important;}
	
}

/*-----------common section styles  end here---------------*/
.about-emailmonks{background:#e8b531; padding-top:50px; padding-bottom:50px; background-size:contain}
.about-emailmonks .monks{ display:block; width:100%; margin-bottom:30px;}
.about-emailmonks p{ margin-top:26px; font-size:18px;  font-family: 'PT Sans', sans-serif;}
.about-emailmonks p a{ font-style:italic; font-weight:bold; color:#000}
.about-emailmonks p a:hover{ color:#fff;}


/*----------------footer section  styles goes here-----------*/
.footer-wrapper{background:#2f2f2f; padding:20px 0px 20px; text-align:left; float:left; width:100%;}
.footer-wrapper-wd{width:870px; margin: 0 auto;}
.footer-wrapper-wd ul{ padding:0; padding-left:40px; margin:0px; list-style:none}
.footer-wrapper-wd li{ float:left;}
.footer-wrapper-wd li.center{ margin:0 14% 0 18%;}
.footer-wrapper-wd li a{color:#fff; display:block; font-size:14px;}
.footer-wrapper-wd li.ftr-logo a{ font-size:12px; text-align:center; color:#f1b822; padding-top:15px;}
.footer-wrapper-wd li.ftr-logo a:hover{color:#fff;}
.footer-wrapper-wd li.block-2 a,.footer-wrapper-wd li.block-3 a{ padding-left:25px; margin-bottom:7px;}
.footer-wrapper-wd li.block-3 a:hover{ color:#fff;}
.footer-wrapper-wd li.block-2 a.tell{background:url(https://email.uplers.com/infographics/new-age-email-design-best-practices/images/phone-icon.png) no-repeat 0 2px;}
.footer-wrapper-wd li.block-2 a.tell:hover{ background-position:0 -18px; color:#f1b822;}
.footer-wrapper-wd li.block-2 a.mail{ background:url(https://email.uplers.com/infographics/new-age-email-design-best-practices/images/fmail-icon.png) no-repeat 0 6px ;color:#f1b822; }
.footer-wrapper-wd li.block-2 a.mail:hover{ background-position:0 -23px; color:#fff;}
.footer-wrapper-wd li.block-2 a.fem{ background:url(https://email.uplers.com/infographics/new-age-email-design-best-practices/images/fskp-icon.png) no-repeat 0 0px ;color:#d58223; }
.footer-wrapper-wd li.block-2 a.fem:hover{ background-position:0 -37px; color:#fff;}
.footer-wrapper-wd li.block-3 a{ color:#959595;}
.footer-wrapper-wd li.block-3 a.fb{ background:url(https://email.uplers.com/infographics/new-age-email-design-best-practices/images/fb.png) no-repeat 0 1px;}
.footer-wrapper-wd li.block-3 a.fb:hover{ background-position:0 -32px;}
.footer-wrapper-wd li.block-3 a.twi{ background:url(https://email.uplers.com/infographics/new-age-email-design-best-practices/images/twi.png) no-repeat 0 1px;}
.footer-wrapper-wd li.block-3 a.twi:hover{ background-position:0 -32px;}
.footer-wrapper-wd li.block-3 a.pin{ background:url(https://email.uplers.com/infographics/new-age-email-design-best-practices/images/pin.png) no-repeat 0 1px;}
.footer-wrapper-wd li.block-3 a.pin:hover{ background-position:0 -32px;}

@media (max-width:980px) {
	.footer-wrapper-wd{ width:auto; margin:0;}
	.footer-wrapper-wd li.center{ margin:0 12% 0 12%}
}

@media (max-width:800px) {
	.footer-wrapper-wd li.center{ margin:0 10% 0 10%}
}

@media (max-width:767px) {
	.footer-wrapper-wd ul{ padding:0 10px; text-align:center;}
	.footer-wrapper-wd li{ display:block; text-align:left; float:none;}
	.footer-wrapper-wd li.block{ margin:0 auto 20px; width:202px;}
	.footer-wrapper-wd li.block a{ line-height:20px;}
	.footer-wrapper-wd li.block-2,.footer-wrapper-wd li.block-3{ padding-left:18px;}
}

/*----------------footer section styles ends here--------*/