﻿body {background-color:#021320; background-image:url(../assets/images/productividad-2-0-landing-fondo.jpg); background-repeat:no-repeat; background-position:top center;}

a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, 
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt, 
em, embed,
fieldset, figcaption, figure, font, footer, form, 
h1, h2, h3, h4, h5, h6, header, hgroup, html,
iframe, img, ins,
kbd, 
keygen,
label, legend, li, 
meter,
nav,
object, ol, output,
p, pre, progress,
q, 
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul, 
var{
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top; 
}
ol, ul { 
	list-style: none; 
}
blockquote, q { 
	quotes: none; 
}
table, table td { 
	padding:0;
	border:none;
	border-collapse:collapse;
}
img { 
	vertical-align:top; 
}
embed { 
	vertical-align:top; 
}
* { 
	border: none;
}
input, textarea { 
	outline: none !important; 
}
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time { 
	display: block; 
}
.clear { 
	clear: both; 
}
#interactive-responsive-webdesign-infographic {
	/*height: 1453px;
	background: url(/themes/default/images/interactive-responsive-webdesign-infographic/BGMain.jpg) 0 0 no-repeat #242424;*/
	padding: 0 120px;
	font-family: 'PT Sans', sans-serif;
	width: 1010px;
	overflow: hidden;
}
/* =====================================================================================================================================*/
header h1 {
	font-size: 40px;
	margin: 0 auto;
	width: 100%;
	color: #fff;
	font-size: 61px;
	font-weight: 400;
	letter-spacing: -2px;
	margin-top: 51px;
	text-align: center;
}
header h2 {
	font-size: 25px;
	margin: 0 auto;
	width: 100%;
	color: #fff;
	font-size: 37px;
	font-weight: 400;
	letter-spacing: -2px;
	text-align: center;
	margin-bottom:15px
}
/* =====================================================================================================================================*/
/* =====================================================================================================================================*/
.animation {
	width: 101%;
	position: relative;
	z-index: 10;
}
.clickToSeeMoreBlock {
		width: 147px;
	height: 31px;
	margin: 9px 0 15px;
}
.clickToSeeMore {
	color: #111;
	background-color: #fff;
	width: 147px;
	height: 31px;
	margin: 9px 0 10px;
	padding: 5px 0 0 13px;
	font-size: 18px;
	position: relative;
	display: none;
}
.clickToSeeMore:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid;
  border-color: transparent;
  border-top-color: #fff;
  top: 100%;
  left: 56%;
  margin-left: -15px; /* adjust for border width */
}

.lightBox {
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 10;
	position: fixed;
	display: none;
	top: 0%;
	left: 0%;
}
.darkBox {
	background-color: #171717;
	width: 100%;
	height: 500px;
	position: absolute;
	margin: 0 0 0 0;
	opacity: .6;
	
	display: none;
	z-index: 11;
}
.ie8 .darkBox {
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

.elem {
    width: 160px;
	height: 160px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	float: left;
	margin: 0px 10px 10px 0px;
	position: relative;
	z-index: 10;
	padding: 2px;

}
.dblElem { width: 330px; padding-left: 24px; }

.elem1, .popover1 {
	background: #5ca41c; /* Old browsers */
	background: -moz-linear-gradient(left, #5ca41c 0%, #6fb724 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5ca41c), color-stop(100%,#6fb724)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #5ca41c 0%,#6fb724 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #5ca41c 0%,#6fb724 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #5ca41c 0%,#6fb724 100%); /* IE10+ */
	background: linear-gradient(to right, #5ca41c 0%,#6fb724 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ca41c', endColorstr='#6fb724',GradientType=1 ); /* IE6-9 */
	border: 1px solid #76b92c;	top:-1000px;
}
.elem2, .popover2 {
	background: #d35634; /* Old browsers */
	background: -moz-linear-gradient(left, #d35634 0%, #da5931 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d35634), color-stop(100%,#da5931)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #d35634 0%,#da5931 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #d35634 0%,#da5931 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #d35634 0%,#da5931 100%); /* IE10+ */
	background: linear-gradient(to right, #d35634 0%,#da5931 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d35634', endColorstr='#da5931',GradientType=1 ); /* IE6-9 */
	border: 1px solid #d45835;		top:-1000px;
}
.elem3, .popover3 {
	background: #00a8eb; /* Old browsers */
	background: -moz-linear-gradient(left, #00a8eb 0%, #00aced 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#00a8eb), color-stop(100%,#00aced)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #00a8eb 0%,#00aced 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #00a8eb 0%,#00aced 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #00a8eb 0%,#00aced 100%); /* IE10+ */
	background: linear-gradient(to right, #00a8eb 0%,#00aced 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8eb', endColorstr='#00aced',GradientType=1 ); /* IE6-9 */
	border: 1px solid #00a9ec;	top:-1000px;
}
.elem4, .popover4 {
	background: #c62c4e; /* Old browsers */
	background: -moz-linear-gradient(left, #c62c4e 0%, #d22a4e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#c62c4e), color-stop(100%,#d22a4e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #c62c4e 0%,#d22a4e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #c62c4e 0%,#d22a4e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #c62c4e 0%,#d22a4e 100%); /* IE10+ */
	background: linear-gradient(to right, #c62c4e 0%,#d22a4e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c62c4e', endColorstr='#d22a4e',GradientType=1 ); /* IE6-9 */
	border: 1px solid #ca2f51;	top:-1000px;
}
.elem5, .popover5, .popoverSlider {
	background: #00487f; /* Old browsers */
	background: -moz-linear-gradient(left, #00487f 0%, #044e94 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#00487f), color-stop(100%,#044e94)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #00487f 0%,#044e94 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #00487f 0%,#044e94 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #00487f 0%,#044e94 100%); /* IE10+ */
	background: linear-gradient(to right, #00487f 0%,#044e94 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00487f', endColorstr='#044e94',GradientType=1 ); /* IE6-9 */
	border: 1px solid #3671a9;	top:-1000px;
}
.elem6, .popover6, .copyButton {
	background: #1d4faf; /* Old browsers */
	background: -moz-linear-gradient(left, #1d4faf 0%, #306ec5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d4faf), color-stop(100%,#306ec5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #1d4faf 0%,#306ec5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #1d4faf 0%,#306ec5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #1d4faf 0%,#306ec5 100%); /* IE10+ */
	background: linear-gradient(to right, #1d4faf 0%,#306ec5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d4faf', endColorstr='#306ec5',GradientType=1 ); /* IE6-9 */
	border: 1px solid #2f64bd;	top:-1000px;
}
.elem7, .popover7, .popoverSlider, .popoverFreeTemplate {
	background: #5035a8; /* Old browsers */
	background: -moz-linear-gradient(left, #5035a8 0%, #653ebb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5035a8), color-stop(100%,#653ebb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #5035a8 0%,#653ebb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #5035a8 0%,#653ebb 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #5035a8 0%,#653ebb 100%); /* IE10+ */
	background: linear-gradient(to right, #5035a8 0%,#653ebb 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5035a8', endColorstr='#653ebb',GradientType=1 ); /* IE6-9 */
	border: 1px solid #714bc1;	top:-1000px;
}
.elem8, .popover8, .feedBack #submits {
	background: #03891a; /* Old browsers */
	background: -moz-linear-gradient(left, #03891a 0%, #04a420 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#03891a), color-stop(100%,#04a420)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #03891a 0%,#04a420 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #03891a 0%,#04a420 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #03891a 0%,#04a420 100%); /* IE10+ */
	background: linear-gradient(to right, #03891a 0%,#04a420 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03891a', endColorstr='#04a420',GradientType=1 ); /* IE6-9 */
	border: 1px solid #059d28;	top:-1000px;
}
.elem9, .popover9 {
	background: #d74d1a; /* Old browsers */
	background: -moz-linear-gradient(left, #d74d1a 0%, #e45d16 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d74d1a), color-stop(100%,#e45d16)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #d74d1a 0%,#e45d16 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #d74d1a 0%,#e45d16 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #d74d1a 0%,#e45d16 100%); /* IE10+ */
	background: linear-gradient(to right, #d74d1a 0%,#e45d16 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d74d1a', endColorstr='#e45d16',GradientType=1 ); /* IE6-9 */
	border: 1px solid #e7691f;	top:-1000px;
}
.elem10, .popover10 {
	background: #d9861a; /* Old browsers */
	background: -moz-linear-gradient(left, #d9861a 0%, #dba124 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d9861a), color-stop(100%,#dba124)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #d9861a 0%,#dba124 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #d9861a 0%,#dba124 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #d9861a 0%,#dba124 100%); /* IE10+ */
	background: linear-gradient(to right, #d9861a 0%,#dba124 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9861a', endColorstr='#dba124',GradientType=1 ); /* IE6-9 */
	border: 1px solid #dd9124;	top:-1000px;
}
.elem11, .popover11 {
	background: #a71a3d; /* Old browsers */
	background: -moz-linear-gradient(left, #a71a3d 0%, #bd204d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a71a3d), color-stop(100%,#bd204d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #a71a3d 0%,#bd204d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #a71a3d 0%,#bd204d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #a71a3d 0%,#bd204d 100%); /* IE10+ */
	background: linear-gradient(to right, #a71a3d 0%,#bd204d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a71a3d', endColorstr='#bd204d',GradientType=1 ); /* IE6-9 */
	border: 1px solid #bf2a57;	top:-1000px;
}
.elem12, .popover12 {
	background: #0d747b; /* Old browsers */
	background: -moz-linear-gradient(left, #0d747b 0%, #1c868e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0d747b), color-stop(100%,#1c868e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #0d747b 0%,#1c868e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #0d747b 0%,#1c868e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #0d747b 0%,#1c868e 100%); /* IE10+ */
	background: linear-gradient(to right, #0d747b 0%,#1c868e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d747b', endColorstr='#1c868e',GradientType=1 ); /* IE6-9 */
	border: 1px solid #1c878e;	top:-1000px;
}
.elem13, .popover13 {
	background: #8d34a7; /* Old browsers */
	background: -moz-linear-gradient(left, #8d34a7 1%, #9f3ebb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(1%,#8d34a7), color-stop(100%,#9f3ebb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #8d34a7 1%,#9f3ebb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #8d34a7 1%,#9f3ebb 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #8d34a7 1%,#9f3ebb 100%); /* IE10+ */
	background: linear-gradient(to right, #8d34a7 1%,#9f3ebb 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d34a7', endColorstr='#9f3ebb',GradientType=1 ); /* IE6-9 */
	border: 1px solid #9f3ebb;	top:-1000px;
}
.elem14, .popover14 {
	background: #2974e8; /* Old browsers */
	background: -moz-linear-gradient(left, #2974e8 1%, #308dec 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(1%,#2974e8), color-stop(100%,#308dec)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #2974e8 1%,#308dec 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #2974e8 1%,#308dec 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #2974e8 1%,#308dec 100%); /* IE10+ */
	background: linear-gradient(to right, #2974e8 1%,#308dec 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2974e8', endColorstr='#308dec',GradientType=1 ); /* IE6-9 */
	border: 1px solid #538fed;	top:-1000px;
}
.elem15, .popover15 {
	background: #1b8f4a; /* Old browsers */
	background: -moz-linear-gradient(left, #1b8f4a 1%, #1bae5d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(1%,#1b8f4a), color-stop(100%,#1bae5d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #1b8f4a 1%,#1bae5d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #1b8f4a 1%,#1bae5d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #1b8f4a 1%,#1bae5d 100%); /* IE10+ */
	background: linear-gradient(to right, #1b8f4a 1%,#1bae5d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b8f4a', endColorstr='#1bae5d',GradientType=1 ); /* IE6-9 */
	border: 1px solid #259957;	top:-1000px;
}

.elem figcaption { 
	color: #fff; 
	font-size: 18px; 
	letter-spacing: -1px; 
}
.elem p.figureDesription { 
	line-height: 19px; 
	font-size: 18px; 	
	font-family: 'PT Sans', sans-serif; 
	letter-spacing: -1px; 
	margin: 2px 0 0 0; 
}
.elem5 p.figureDesription { 
	color: #b3c9da;
}
.elem8 p.figureDesription { 
	color: #b4e2bc;
}
.elem11 p.figureDesription { 
	color: #e7bbc6;
}
.dblElem figcaption { 
	margin: 10px 0 0 0px; 
	font-size: 30px; 
}
.dblElem .miniFigureImage { 
	margin-top: 16px; 
}
.elem1 .figureImage {
	width: 43px;
	height: 75px;
	margin: 25px auto 0;
	color:#fff;
	text-align:center;
}
.elem1 figcaption { 
	margin: 12px; 
	text-align:left;
}
.elem2 .figureImage {
	width: 62px;
	height: 62px;
	margin: 6px auto 0;
	color:#fff;
	text-align:center;
}
.elem2 figcaption { 
	margin: 12px; 
	text-align:left;
}
.elem3 .figureImage {
	width: 81px;
	height: 66px;
	color:#fff;
	text-align:center;
	margin: 16px auto 0;
}
.elem3 figcaption { 
	margin: 12px; 
	text-align:left;
}
.elem4 .figureImage {
	color:#fff;
	text-align:center;
	width: 72px;
	height: 55px;
	margin: 0 auto 0;
}
.elem4 figcaption { 
	margin: 12px; 
	text-align:left;
}
.elem5 .miniFigureImage {
	width: 25px;
	height: 25px;
}
.elem6 .figureImage {
	color:#fff;
	text-align:center;
	width: 82px;
	height: 85px;
	margin: 23px auto 0;
}
.elem6 figcaption { 
	margin: 12px; 
	text-align:left;
}
.elem7 .figureImage {
	color:#fff;
	text-align:center;
	width: 78px;
	height: 83px;
	margin: 6px auto 0;
}
.elem7 figcaption { 
	margin: 12px; 
	text-align:left;
}
.elem8 .miniFigureImage {
	width: 22px;
	height: 22px;
	margin-top: 19px;
}
.elem9 .figureImage {
	color:#fff;
	text-align:center;
	width: 83px;
	height: 70px;
	margin: 6px auto 0;
}
.elem9 figcaption { 
	margin: 12px; 
	text-align:left;
}
.elem10 .figureImage {
	color:#fff;
	text-align:center;
	width: 78px;
	height: 78px;
	margin: 24px auto 0;
}
.elem10 figcaption { 
	margin: 12px; 
	text-align:left;
}
.elem11 .miniFigureImage {
	width: 22px;
	height: 22px; margin-top: 19px;
}
.elem12 .figureImage {
	color:#fff;
	text-align:center;
	width: 84px;
	height: 17px;
	margin: 1px auto 0;
}
.elem12 figcaption { 
	margin: 12px; 
	text-align:left;
}
.elem13 .figureImage {
	color:#fff;
	text-align:center;
	width: 78px;
	height: 47px;
	margin: 6px auto 0;
}
.elem13 figcaption { 
	margin: 12px; 
	text-align:left;
}
.elem14 .figureImage {
	color:#fff;
	text-align:center;
	width: 79px;
	height: 79px;
	margin: 16px auto 0;
}
.elem14 figcaption { 
	margin: 12px; 
	text-align:left;
}
.elem15 .figureImage {
	color:#fff;
	text-align:center;
	width: 84px;
	height: 73px;
	margin: 24px auto 0;
}
.elem15 figcaption { 
	margin: 12px; 
	text-align:left;
}
.popover { 
	position: absolute; 
	z-index: 15 !important; 
	display: none; 	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	
}
.cross {
	color:#fff;
	width: 13px;
	height: 13px;
	float: right;
	margin: 5px 5px 0 0;
	cursor: pointer;
	padding: 1px;
	border: 1px solid transparent;
}
.cross:hover {
	border: 1px dotted #fff;
	border-radius: 10%;
}
.popover p,.popover ul,.popover ul li, .popover ul li a, .publiched  {
		font-family: 'PT Sans', sans-serif;
		color: #fff;
		line-height: 20px;
		letter-spacing: -1px;
		font-size: 18px; 
}

.popover1 {	
	width: 500px; 
	height: 160px; 
	top: 216px; 
	left: 170px; 
	border: 1px solid #6db129;
}
.popover1 p { 
	line-height: 20px; 
	margin: -1px 0 0 25px; 
}

.popover2 { 
	width: 330px;
	height: 160px; 
	top: 216px; 
	left: 340px;  
}
.popover2 p { 
	/*line-height: 30px;*/ 
	margin: 13px 0 0 36px; 
}

.popover3 { 
	width: 330px; 
	height: 330px; 
	top: 216px; 
	left: 0px; 
}
.popover3 p { 
	line-height: 22px; 
	margin: 11px 0 0 25px; 

}

.popover4 { 
	width: 330px; 
	height: 330px; 
	top: 216px; 
	left: 680px; 
}
.popover4 ul { 
	line-height: 22px; 
	margin: 8px 0 0 25px; 
}
.popover4 ul li { 
	margin-top: 6px;
}

.popover5 { 
	width: 1010px; 
	height: 500px; 
	top: 45px; 
	left: 1px; 
}
.popover5 p { 
	line-height: 28px; 
	margin: 2px 0 0 25px; 
}

.popover6 { 
	width: 500px;
	height: 160px; 
	top: 46px; 
	left: 170px; 
}
.popover6 ul { 
	line-height: 22px; 
	margin: 17px 0 0 30px; 
}
.popover6 ul li { 
	margin-top: 10px;
}

.popover7 { 
	width: 330px; 
	height: 330px; 
	top: 216px; 
	left: 340px; 
}
.popover7 ul { 
	line-height: 22px; 
	margin: 10px 0 0 30px; 
}
.popover7 ul li { 
	margin-top: 4px;
}
.popover7 ul li a {
	color: #cbc3e5; 
}
.popoverSlider { 
	width: 670px; 
	height: 160px; 
	top: -1000px; 
	left: 340px; 
	display:block;
}
.popoverFreeTemplate { 
	width: 330px; 
	height: 330px; 
	top: 216px; 
	left: 680px; 
	text-align: center; 
}
.popoverFreeTemplate h4 { 
	font-size: 24px; 
	color: #fff; 
	letter-spacing: -1px; 
	margin: 10px 0 3px 0; 
	font-weight: normal; 
}
.popoverFreeTemplate div { 
	border: 3px solid #fff; 
	width: 282px; 
	height: 247px; 
	margin: 14px auto 0; 
	overflow: hidden;
}
.popoverFreeTemplate div a:hover { 
	background: url('/themes/default/images/interactive-responsive-webdesign-infographic/freeTemplateImageHovered.jpg') -1px 0 no-repeat;
}
.popoverFreeTemplate div a { 
	background: url('/themes/default/images/interactive-responsive-webdesign-infographic/freeTemplateImage.jpg') -1px 0 no-repeat; 
	height: 100%; 
	display: block; 
}
.popoverFreeTemplate div a img { 
	opacity: 0; 
		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}




.popover8 { 
	width: 1010px; 
	height: 500px; 
	top: 45px; 
	left: 1px; 
}
.popover8 p { 
	line-height: 21px; 
	margin: -3px 0 0 25px; 
}

.popover9 { 
	width: 328px; 
	height: 160px; 
	top: 386px; 
	left: 341px;
}
.popover9 ul { 
	line-height: 22px; 
	margin: 17px 0 0 30px; 
}
.popover9 ul li { 
	margin-top: 10px;
}

.popover10 { 
	width: 499px; 
	height: 160px; 
	top: 216px; 
	left: 341px; 
}
.popover10 ul { 
	line-height: 22px; 
	margin: -3px 0 0 30px; 
}
.popover10 ul li { 
	margin-top: 6px;
}


.popover11 { 
	width: 1010px; 
	height: 500px; 
	top: 45px; 
	left: 1px; 
	border: 1px solid #c32b5a; 
}
.popover11 p { 
	line-height: 22px; 
	margin: 10px 0 0 25px; 
}

.popover12 {
	width: 500px; 
	height: 160px; 
	top: 215px; 
	left: 170px; 
}
.popover12 ul { 
	line-height: 22px; 
	margin: -3px 0 0 30px; 
}
.popover12 ul li { 
	margin-top: 6px;
}

.popover13 {
	width: 330px; 
	height: 160px; 
	top: 216px; 
	left: 680px;}
.popover13 ul { 
	line-height: 22px; 
	margin: 17px 0 0 30px; 
}
.popover13 ul li { 
	margin-top: 10px;
}

.popover14 { 
	width: 500px; 
	height: 160px; 
	top: 216px; 
	left: 170px; }
.popover14 ul {
	margin: -3px 0 0 30px; 
}
.popover14 ul li { 
	margin-top: 4px;
	
}
.popover.popover14 ul li, .popover.popover14 ul li a, .popover.popover14 ul {
        line-height: 22px;
        letter-spacing: 0;
        font-size: 20px;
}
.popover15 { 
	width: 330px; 
	height: 160px; 
	top: 216px; 
	left: 680px; 
}
.popover15 h4 { 
	color: #fff; 
	font-size: 17px;
	margin: 1px 0 6px 29px; 
}
.popover15 h4.otherTut { 
	margin-top: 26px; 
}
.popover15 ul { 
	line-height: 22px; 
	margin: -3px 0 0 30px; 
}
.popover15 ul li { 
	margin-top: 4px;
}

/************************************************************************************************************************************************
************************************************************************************************************************************************/
footer { 
	margin-top: 30px; 
	margin-bottom: 30px; 
	color: #999999;
}
.footerBlock { 
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background-color: #0b0b0b;
	border: 1px solid #2b2b2b;
	width: 500px;
/*	opacity: .5;*/
}

.jpgVersion {
	margin: 0 10px 10px 0; 
	height: 160px; 
	position: relative;
}
.jpgVersion p { 
	float: left; 
	margin: 58px 0 0 30px; 
	font-size: 18px; 
	line-height: 20px; 
	letter-spacing: -1px; 
}
.jpgVersion .copyButton { 
	float: right; 
	margin: 48px 32px 0 0;
	padding: 2px;
}
.jpgVersion .copyButton:hover {
	border: 3px solid #fff;
	padding: 0px;
}
.jpgVersion .copyButton a { 
	color: #fff; 
	text-decoration: none;
	font-size: 30px;
	width: 59.5%;
	height: 100%;
	padding: 6px 24px;

	display: block;
}
#interactive-responsive-webdesign-infographic.content footer div.footerBlock div#d_clip_container.copyButton div {
	position: absolute;
	top: 48px !important;
	left: 349px !important;
	height: 58px !important;
}
.socialButtons { 
	margin-bottom: 10px; 
	height: 160px; 
	padding-top: 69px; 
	padding-left: 47px; 
}
.socialButtons div {
	padding: 0 !important;
}
.socialButtons .facebook-button { 
	margin: -2px 19px 0 0 !important;
}
.webkit .socialButtons .facebook-button { 
	margin: 0px 19px 0 0 !important;
}
.opera .socialButtons .facebook-button { 
	margin: -4px 19px 0 0 !important;
}
.socialButtons .tweet-button { 
	margin: 0px -11px 0 0 !important;
}
.socialButtons .google-button { 
	margin: 0px -11px 0 0 !important;
}
.socialButtons .pin-it-button {
	margin: 0px 21px 0 0 !important; 
}
.socialButtons .stumble-button {
	margin: 2px 0 0 16px !important;
}

.feedBack { 
	margin-right: 10px;
	height: 407px; 
}
.feedBack p { 
	text-align: center; 
	margin-top: 26px; 
	line-height: 20px; 
	font-size: 17px; }
.feedBack form { 
	color: #fff; 
	font-size: 18px; 
}
.feedBack form .inputs { 
	height: 242px; 
}
.feedBack form .inputs > div {
	position: relative;
}
.feedBack #input_name { 
	border: 1px solid #484848;
	width: 438px; 
	height: 38px; 
	margin: 17px 0 0 30px; 
}
.feedBack #input_name *, .feedBack #input_email *, .feedBack #input_message * { 
	float: left;
}

.feedBack #input_email { 
	border: 1px solid #484848;
	width: 438px; 
	height: 38px;
	margin: 10px 0 0 30px; 
}
.feedBack #input_name #name,
form#contact v#input_message #message { font-family: 'PT Sans', sans-serif; }
.feedBack #input_email #email,.feedBack #input_name #name {
	width: 403px; 
        line-height: 36px;
	height: 36px;
	margin: 0;
	padding: 0 17px;	font-family: 'PT Sans', sans-serif;
	
}
.feedBack #input_message { 
	border: 1px solid #484848; 
	width: 438px; 
	height: 38px;
	margin: 10px 0 0 30px;
}
.feedBack input, .feedBack  textarea {
	background: none; 
	color: #fff;
}
.feedBack label { 
	top: 6px;
	left: 15px; 
	position: absolute;
}
.feedBack input { 
	margin: 8px 0 0 18px;  
	min-width: 400px;
	font-size: 18px; 
        border: 1px solid transparent;
}
.feedBack input#name { 
	margin: 0px; 
}
.feedBack #input_message textarea { 
	padding: 6px 13px 4px 16px;
	width: 407px; 
	height: 100px;
	font-size: 18px;
	resize: none;
	font-family: 'PT Sans', sans-serif;
	letter-spacing: 1px;
	font-size: 17px;
	overflow: hidden;	
}
.feedBack #submits { 
	float: right; 	
	margin: -1px 178px;
	padding: 2px;

}
.feedBack #submits:hover {
	border: 3px solid #fff;
	padding: 0px;
}
.feedBack #submits a {
	width: 66.5%;
	height: 100%;
	display: block;
	padding: 0;
	margin: auto;
	color: #fff; 
	text-decoration: none;
	font-size: 30px;
		padding: 8px 24px;
}

.feedBack div.inputs span { 
	color:  #BB1F4B; 
	margin: 0 0 0 31px; 
	font-size: 16px;  
}
#contact div.inputs span font {
	color: #039E1E;
	letter-spacing: -1px;
	margin-left: 10px;
}
.whatsBehind { 
	height: 407px; 
	text-align: left;
	padding:10px; 
}
.whatsBehind h4 { 
	color: #fff; 
	font-size: 29px; 
	font-weight: normal; 
	margin-top: 22px; 
}
.whatsBehind p { 
	font-size: 17px; 
	line-height: 24px; 
	margin-top: 16px; 
}

.published { 
	color: #fff; 
	font-size: 18px; 
	text-align: center; 
	padding-top: 33px; 
}
/* =======================================================================================================================================
=========ANIMATION AND HOVERS =====================================================================================================================*/
.noActive:hover { 
	border: 3px solid #fff; 
	padding: 0; cursor: pointer; 
}
.dblElem:hover { 
	padding-left: 22px;
}
.dblElem5.active:hover, .dblElem8.active:hover, .dblElem11.active:hover { 
	padding-left: 24px; 
}
figure.active {
	z-index: 14;
}
.hide { 
	display: none;
}
#copied-message {
	position: absolute;
	left: 381px;
	top: 115px;
	color: #BB1F4B;
}
.webkit #copied-message {
	padding-right: 4px; 
}
#jsbanner { 
	display: block !important; 
	background: none !important; 
	width: 666px !important; 
	height: 160px !important; 
	border: none !important; 
	box-shadow: none !important;
}
#jsbanner div.jcarousel-container div.jcarousel-clip { 
	width: 636px !important; 
	height: 120px !important; 
	top: 19px; 
	left: -1px;  
}
#jsbanner div.jcarousel-container div.jcarousel-prev, 
#jsbanner div.jcarousel-container div.jcarousel-next {  
	width: 7px !important; 
	height: 15px !important;
}
#jsbanner .jcarousel-container div.jcarousel-prev { 
	background: url(/themes/default/images/interactive-responsive-webdesign-infographic/arrows.png) !important;
	top: 70px;
	left: 6px;
}
/*#jsbanner .jcarousel-container div.jcarousel-prev::after {  
  content: '';
  position: absolute; 
  width: 0;
  height: 0; 
  border: 9px solid;
  border-color: transparent;
  border-right-color: #fff; 
  top: 100%;
  left: 56%;
  margin-left: -15px;
}*/
#jsbanner .jcarousel-container div.jcarousel-prev:hover { 
	background: url(/themes/default/images/interactive-responsive-webdesign-infographic/arrows.png) -18px 0 !important; 
}
#jsbanner .jcarousel-container div.jcarousel-next {  
	background: url(/themes/default/images/interactive-responsive-webdesign-infographic/arrows.png) -9px 0 !important;
	top: 70px;
	left: 654px;
}
#jsbanner .jcarousel-container div.jcarousel-next:hover { 
	background: url(/themes/default/images/interactive-responsive-webdesign-infographic/arrows.png) -28px 0 !important;
	width: 6px !important;
}
/*#jsbanner .jcarousel-container div.jcarousel-next::after {  
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 9px solid;
  border-color: transparent;
  border-left-color: #fff;
  top: 100%;
  left: 56%;
  margin-left: -15px;
}*/
#jsbanner .t_info {
	display: none !important; 
}
#jsbanner #jsbanner-wrap li { 
	width: 114px !important; 
	height: 100px !important; 
	border: 3px solid #fff; 
	margin-right: 2px; 
}
#jsbanner .smallpreview {
	bottom: 0px !important; 
}
.copyButton:hover {
	border: 3px solid #fff;
	padding: 0px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#jsbanner .smallpreview { 
	position: inherit !important; 
}
.publiched {
	line-height: 23px;
}
#interactive-responsive-webdesign-infographic.content section.animation div.popover14 ul {
	margin: -17px 0 0 30px;
}