/*----------intial declartaion of css----------*/
* { padding: 0; margin: 0; list-style: none; }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, select, input, option { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; }
html { -webkit-text-size-adjust: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word }
q { quotes: none }
q:before, q:after { content: ''; content: none }
small { font-size: 80% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sup { top: -0.5em; }
sub { bottom: -0.25em }
nav ul, nav ol { list-style: none; list-style-image: none; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
textarea { overflow: auto; vertical-align: top }
table { border-collapse: collapse; border-spacing: 0 }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: none; cursor: pointer; }
/* remember to define focus styles! */
:focus { outline: 0; }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
a { text-decoration: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
table { border: 0 none; border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
img { border: 0 none; max-width: 100%; }
a { outline: none; cursor: pointer; transition: all 200ms ease-in-out 0s; }
/* End hide from IE Mac */ .none { display: none; } /* End Clearfix */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block }
.clear { clear: both; }
img { max-width: 100%; }
/* For modern browsers */ 
.cf:before, .cf:after { content: ""; display: table }
.cf:after { clear: both; }
.cf { *zoom:1;
}
body { }
.wrapper { width: 100%; background-color: transparent; padding: 0;}
/*-----------header section styles goes here---------------*/
.cust-header { width: 100%; /*background-size:135%;
	border-top:20px solid back;*/ margin: 0px }
.logo { width: 100%; margin: 0 auto -50px auto; background-size: 100%; }
.logo img { margin: 50px auto 0 auto; display: block; }
.ribbon { background-image: url("../../images/infographics/essential-28-plugins-infographic/ribbon.png"); background-repeat: no-repeat; width: 100%; max-width: 810px; height: 90px; max-width: 800px; margin: -83px auto 0 auto; text-align: center; color: white; font-size: 34.5px; font-weight: 600; padding: 15px 0 0 7px; z-index: 999; text-transform: uppercase; position: relative; }
.teg-number { font-size: 183px; text-align: center; color: black; font-weight: 800; margin: 0px; padding: 0px ; line-height: 1.4;}
/*----------------------------------------------------------*/

#mid-container { width: 100%; max-width: 1166px; margin: -30px auto 0 auto; padding: 0px 0 50px 0; background: white; z-index: 111; }
#mid-container h2 { font-size: 30px; font-weight: 700; text-align: center; text-transform: uppercase; width: 100%; }
.teg-line { font-size: 24px; font-weight: 700; text-align: center; width: 100%; color: black; }
.container-box-1 { width: 100%; background: #eaeaea; padding: 0 0 80px 0; }
.container-box-1 .header { width: 100%; background: #4d4d4d; padding: 40px 0 5px 0px }
.container-box-1 .header h1 { text-align: center; color: white; font-size: 24px; font-weight: 600; color: white; text-transform: uppercase; margin: 0; }
.container-box-1 .header h1 b { font-size: 30px; }
.container-box-1 h2 { max-width: 815px; color: black; margin: 58px auto 0 auto; line-height: 36px; }
.container-box-1 h2 .mark { background: #FFDA30; display: inline;padding: 0; }
.container-box-1 .teg-line { max-width: 800px; margin: 40px auto 0 auto; padding: 0 0 0 0px; }
.container-box-2 { width: 100%; background: white; }
.container-box-2 .header { width: 100%; max-width: 11566px; background: #e66202; text-transform: uppercase; padding: 0; color: white; }
.container-box-2 .header h2 { max-width: 800px; margin: 0 auto; padding: 0; }
/*.container-box-2 img { width: 100%; max-width: 730px; height: 400px; display: block; }*/
.chat-container { width: 100%; margin: 0 auto; max-width: 700px; //border:thin solid black;
}
.container-box-2 .chart { float: left; width: 100%; max-width: 300px; //margin:auto;
margin: 15% 0 0 0; }
.container-box-2 .chart > img { width: 100%; max-width: 300px; }
.container-box-2 .chart-line > img { margin: 26% 0 0 -1px; float: left; width: 100%; max-width: 200px; height: 5px; }
.container-box-2 .ratio { float: left; }
.container-box-2 .ratio-title { width: 100%; max-width: 150px; float: left; margin: 15px 0 0 0; }
.container-box-2 .ratio-title ul { border-left: 1px solid #dddddd; }
.container-box-2 .ratio-title ul li { font-size: 20px; margin: 55px 0 55px -12px; //border:thin solid black;
font-size: 19px; font-weight: 600; color: #585858; }
.container-box-2 .ratio-circle { width: 25px; height: 25px; //background:black;
border-radius: 25px; float: left; margin-right: 10px; }
#wordpress { background: #4f81ad; }
#Joomla { background: #585858; }
#Drupal { background: #e6b705; }
#Magento { background: #f59a1b; }
#Others { background: #e66202; }
.container-box-3 { width: 100%; padding: 0 0 50px 0px; background: white; float: left }
.container-box-3 section { margin: 10px 0 10px; // border:thin solid black;
padding: 11px 0 11px 0; }
.container-box-3 .header { width: 100%; background: #000000; padding: 10px 0; color: white; }
.container-box-3 > .header > h2 { max-width: 1005px; padding: 0px; margin: 0 auto; }
/*.container-box-3 h2
		{
			font-size:24px;
			text-align:center;
			font-weight:700;
			text-transform:uppercase;
			margin:40px auto 0 auto;
		}*/
.container-box-3 h3 { font-size: 30px; font-weight: 900; margin: 20px 0 0px 0; padding: 0px; text-transform: uppercase; }
.container-box-3 h4 { font-size: 20px; font-weight: 700; margin: 6px 0 10px 0; padding: 0px; }
.container-box-3 p { font-size: 16px; font-weight: 600; margin: 0px; padding: 0px; line-height: 25px; }
.container-box-3 .teg-line { text-transform: uppercase; margin: 35px 0 10px 0; padding: 0px; }
.container-box-3 .header mark { color: #FFDA30; background: none; }
.title-box { width: 100%; height: 165px; margin: -85px auto 0 auto; }
.point { width: 42px; height: 42px; background: #FFDA30; border-radius: 42px; margin: 0px auto 16px auto; font-weight: 900; font-size: 30px; }
.sub-box-1 { margin: 120px 0 0 60px; float: left; }
.sub-box-2 { float: right; margin: 120px 60px 100px 0; }
.sub-box-3 { float: left; margin: 110px 0 0 60px; }
.sub-box-4 { float: right; margin: 15px 60px 100px 0; }
.sub-box-5 { margin: 110px 0 0px 60px; float: left; }
.sub-box-6 { margin: 10px 60px 0px 0; float: right; }
.sub-box-7 { float: left; margin: 110px 0 0 60px; clear: both; }
.sub-box-8 { margin: 10px 60px 0 0; float: right }
.sub-box { border: 2px solid #e6b705; width: 45%; max-width: 490px; padding: 0 0 40px 0; }
.container-box-4 { width: 100%; max-width: 1050px; background: #FFDA30; padding: 50px 0 50px 0; margin: 0 auto; clear: both; }
.container-box-4 > img { margin: 0px auto 0 auto; width: 192px; height: 300px; display: block; }
.container-box-4 h2 { font-size: 20px; font-weight: 700; text-align: center; margin: 35px auto 25px auto; }
.container-box-4 p { font-size: 16px; text-align: center; width: 80%; margin: 0 auto; font-weight: 400; }
.container-box-4 a { color: black; }
.container-box-3 h1 { font-size: 35px; text-align: center; font-weight: 900; }
.container-box-5 { width: 100%; max-width: 1050px; margin: 0 auto; }
#orange-font { color: #e66202; display: inline; }
#yellow-font { color: #FFDA30; display: inline; }
#push { height: 5px; }
.text-center { text-align: center; margin-top: 20px }
.fb-comments { width: 100%; }
#headerSlideContainer { background: url("../../images/infographics/essential-28-plugins-infographic/header_bg.png") repeat scroll left top rgba(0, 0, 0, 0); position: fixed; top: -120px; width: 100%; z-index: 99999; }
#headerSlideContent { color: #ffffff; height: 50px; margin: 0 auto; width: 882px; }
#header_logo { float: left; padding: 10px 0 0; width: 122px; }
#header_txt { color: #ffffff; float: left; font-family: "Open Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: 400; height: 50px; line-height: 45px; text-align: center; width: 640px; }
#header_txt span { color: #ffffff; font-family: "patua_oneregular", cursive; font-size: 18px; }
#header_order { float: right; padding: 12px 0 0 10px; }
.text-center * { box-sizing: content-box; }

/*==========================================*/
/*Embed Infographic*/
.embed-infographic { padding: 31px 0 0 0; clear: both; display: block; }
.embed-infographic h3 { background: #3e3e3e; font-size: 16px; float: left; width: 100%; font-weight: 700; padding-bottom: 15px; padding-top: 15px; margin: 0px 0px 35px 0px; text-transform: uppercase; color: #F5F5F5; text-align: center; }
.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; text-align: center; }
.embed-textarea { float: left; width: 100%; }
.embed-textarea textarea { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 3px; color: #000000; font-size: 13px; font-weight: 400; outline: medium none; padding: 8px; width: 100%; resize: none; line-height: 20px; clear: both; }
.stats-to-tweet { text-align: center; clear: both; display: inline-block; padding-bottom: 25px; width: 100%; }
.stats-to-tweet ul { text-align: center; width: 100%; }
.stats-to-tweet li { /*background: url("../../images/infographics/essential-28-plugins-infographic/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; }
.stats-to-tweet li a { color: #F26725; }
.stats-to-tweet li a:hover { color: #000; }
.pinterest { display: inline-block; position: relative; top: 4px; }
.first_section { background: #ffc20e; border-top: 20px solid #000; }
.symbol { background-color: #000000; display: block; position: relative; border-radius: 75px; width: 150px; height: 150px; line-height: 150px; text-align: center; margin: 60px auto 50px; behavior: url(PIE.htc); }
.tag_line { font: normal 300 36px/41px 'Open Sans', sans-serif; color: #000; text-transform: uppercase; }
.tag_line span { font: normal 600 36px/41px 'Open Sans', sans-serif; }
.tag_line_conti { font: normal 800 36px/41px 'Open Sans', sans-serif; color: #000; text-transform: uppercase; }
.short_des { border-bottom: 1px dotted #000; }
/*==================sajeda========================*/

.main {width: 100%; margin: 0 auto; }
.main-footer {width: 830px; margin: 0 auto;}
.chart-cont { width: 100%; margin: 55px auto; max-width:735px;}
.left-side { width: 50%; float: left; }
.right-side { float: left; margin-top: 11%; }
.chart-menu li { background: url("../../images/infographics/essential-28-plugins-infographic/border-menu.png") repeat-y scroll 13px 0 rgba(0, 0, 0, 0); padding-bottom: 16px; }
.chart-menu li span { display: inline-block; padding-right: 15px; position: relative; vertical-align: top; }
.chart-menu img { display: block; }
.chart-menu li:last-child { padding-bottom: 0; }

/*header,footer {font-family: "Montserrat", sans-serif !important;}*/

.midd-section.cf {
    position: relative;
    z-index: 2;
    padding-top: 151px;
    background: #FFDA30; 
    font-family: 'Open Sans', sans-serif; 
    background-image: url("../../images/infographics/essential-28-plugins-infographic/shadow.png"); 
    background-repeat: no-repeat; 
    background-position: center top; 
    border-top: 20px solid black; 
    overflow-x: hidden;    
    font-size: 14px;
}