/*
	0. global config
*********************************/

* {
  margin: 0px;
  padding: 0px;
}


body {
	text-align:center;
	font-family:Arial, sans-serif;
	font-size:12px;
	background:url(images/footer.gif) left bottom repeat-x;
	color:#000000;
}

img, div {
	border:none;
	vertical-align: top;
}

h1, h2,h3,h4 {
	font-weight:normal;
}

ul {
	list-style:none;
	padding:0;
	margin:0;
}

.button,
a span {
	cursor:pointer;
}

ul li{padding:0;margin:0;list-style:none;}
p {
	padding:0;
	margin:0;
}

a:link,
a:visited{
	outline:none;
	font-size:12px;
	color:#007cc3;
	}

a:hover {
	text-decoration:none;
}

a.orange:link,
a.orange:visited {
	color:#f27507;
}

.orange {
	color:#f27507;
}
.blue {
	color:#3e90da;
}
.clr {
	height: 0;
	clear: both;
	overflow:hidden;
}

/*
	1. Custome config
***********************************/

.all {
	background:url(images/bg.gif) left top repeat-x;
}

.main {
	width:942px;
	text-align:left;
	margin:0 auto;
}

.header {
	height:315px;
	padding:35px 0 0 0;
	position: relative;
}

.lang {
	position:absolute;
	right:10px;
	top:10px;
}

.lang a:link,
.lang a:visited {
	text-decoration:none;
	font-size:11px;
	color:#000;
	margin:0 10px 0 0;
}

.lang a:hover span {
	text-decoration:underline;
}

.lang a img {
	margin:1px 2px 0 0;
}

.nav {
	background:url(images/nav.gif) left top repeat-x;
}

.nav-in{
	background:url(images/nav-left.gif) left top no-repeat;
}

.nav-inner {
	height:50px;
	background:url(images/nav-right.gif) right top no-repeat;
}

.nav-inner ul {
	list-style:none;
	padding:0 30px;
}

.nav-inner ul li{
	float:left;
	padding:0 9px;
}

.nav-inner ul li a:link,
.nav-inner ul li a:visited {
	display:block;
	float:left;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	padding-left:5px;
	font-family: Arial;
}

.nav-inner ul li a span {
	display:block;
	float:left;
	height:34px;
	padding:16px 16px 0 8px;
}

.nav-inner ul li.active a,
.nav-inner ul li a:hover {
	background:url(images/menu-left.gif) left top no-repeat;
}

.nav-inner ul li.active a span,
.nav-inner ul li a:hover span{
	background:url(images/menu-right1.gif) right top no-repeat;
}

.top {
	padding:10px 0px 0px 0px;
	position:relative;
}

.top-in {
	height:235px;
	position:relative;
	background:url(images/top.jpg) left top no-repeat;
}

.download-big {
	width:181px;
	height:51px;
	position:absolute;
	left:277px;
	bottom:0;
}

.cost-big {
	width:181px;
	height:51px;
	position:absolute;
	right:277px;
	bottom:0;
}

/*
	Content
************************/

.content {
	/* padding:35px 0; */
}

/*
	Left
********************/

.left {
	width:280px;
	float:left;
}

.left .heading {
	font-family:Arial;
	font-size:14px;
	color:#2788b3;
	font-weight:bold;
	padding:0 0 10px 0;
	text-align:center;
}

.left-block1 {
	width:240px;
	margin:0 auto;
	padding:10px 0 30px;
	text-align:center;
}

.left-block2 {
	width:240px;
	margin:0 auto;
	padding:10px 0 30px;
}

.left-block2 .feed {
	color:#888888;
	font-size:11px;
	line-height:1.4;
	padding:10px 0 0;
}

.left-block2 .name {
	padding:10px 0 20px;
	text-align:right;
	font-style:italic;
	font-size:11px;
}

/*
	Right
********************/

.right {
	width:650px;
	float:right;
}

.right h2 {
	font-size:18px;
	color:#e66e07;
	padding:15px 0;
}

.right h1 {
	font-size:18px;
	color:#e66e07;
	padding:15px 0;
}

.right .cost-content h2 {
	background:url(images/line.gif) left bottom no-repeat;
	margin:15px 0 0 0;
	padding:0 0 5px 0;
	clear:both;
}

.right .content-text {
	padding:5px 30px 30px 10px;
}

.right .content-text .box {
	text-align:left;
	background:url(images/line.gif) left top no-repeat;
	margin:10px 0 0 0;
}

.right .content-text .line2 {
	padding:0;
	margin:0;
	height:1px;
	overflow:hidden;
	background:url(images/line.gif) left top repeat-x;
}

.right .content-text .line {
	padding:0;
	margin:0;
	height:1px;
	overflow:hidden;
	background:url(images/line.gif) left top no-repeat;
}

.right .content-text .box img {
	margin:0 38px 0 0;
}

.right .content-text .caption {
	text-align:center;
	margin: 4px 0 7px;
	font-size:12px;
	font-style: italic;
}

.right .content-text p {
	line-height:1.5;
	padding:10px 0;
}

.right .content-text ul {
	padding:10px 50px 10px 0;
	line-height:1.5;
}

.right .content-text ul li{
	padding:5px 0 5px 15px;
	background:url(images/indent.gif) left 10px no-repeat;
}

.right .content-text .button {
	text-align:center;
	padding:5px 0;
}

.right .content-text .box-img {
	float:right;
	margin: 15px 0 30px;
}

.right .content-text .button2 {
	text-align:right;
	padding:5px 0 10px;
}

.right .content-text .button a {
	margin: 0 10px 0;
}

.cost-block {
	margin:0 0 20px;
}

.cost-text {
	width:390px;
	float:left;
	padding:15px 0;
}

.cost-box {
	width:190px;
	float:right;
	line-height:1.5;
	text-align:center;
	padding:25px 0 0 0;
	font-size:20px;
}

.cost-box  span{
	text-decoration: line-through;
	color: #999999;
}

.info {
	width:558px;
	background:url(images/info.gif) left top no-repeat;
}

.info table {
	margin: 0 5px;
}

.info table th,
.info table td{
	height:39px;
}

.info table .one {
	background:#f2f2f2;
}
.info table .one td,
.info table .two td {
	border-bottom:2px solid #fff;
}

.info table .two {
	background:#e8e8e8;
}


.info .button td {
	padding:0 5px !important;
}

.info .button td  a {
	margin:0 !important;
}

.info .description {
	width:258px;
	padding:0 0 0 20px;
}

/*
	Footer
*******************/

.footer {
	height:60px;
}

.bottomnav {
	background:url(images/bottom-nav.gif) left top repeat-x;
}

.bottomnav-in {
	height:49px;
	background:url(images/bottomnav-left.gif) left top no-repeat;
}

.bottomnav-inner {
	height:49px;
	background:url(images/bottomnav-right.gif) right top no-repeat;
}

.bottomnav ul{
	list-style:none;
	text-align:center;
	padding:16px 0 0 0;
}

.bottomnav ul li{
	display:inline;
	padding:0 21px;
}

.bottomnav ul li a:link,
.bottomnav ul li a:visited{
	color:#3e90da;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	font-family:Times New Roman;
}

.bottomnav ul li a:hover {
	text-decoration:underline;
}

/*
	Bottom
*******************/

.bottom {
	height:40px;
	font-size:12px;
}

.bottom .copy {
	text-align:center;

}

.bottom .design  {
	width:300px;
	float:right;
	text-align:right;
}

/* Promo */

.right h3 {
	font-family:Arial;
	font-size:15px;
	color:#3d3d3d;
	font-weight:bold;
	padding-top:15px;
	text-align:left;
}

/* Home-Bottom */

.right h2.guides-header {
  padding: 19px 0;
  font-size: 22.4px; }

.guides { display: flex; flex-flow: row wrap; justify-content: center; }

  .guides > a {
    flex: 0 0 auto;
    position: relative;
    width: 295px; height: 188px;
    margin: 0; padding: 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px; font-weight: bold;
    text-decoration: none;
    color: #fff; }

      .guides > a:nth-child(even) { margin-left: 20px; }
      .guides > a:nth-child(n+3)  { margin-top: 25px; }

      .guides > a > img  { height: 100%; }
      .guides > a > span { position: absolute; top: 147px; right: 0; left: 0; }

      .guides > a:hover::before,
      .guides > a:hover::after {
        display: block;
        position: absolute; }
      .guides > a:hover::after {
        content: 'Read the guide';
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
        padding: 8px 22px;
        border: 1px solid #fff;
        border-radius: 1.5em;	
        z-index: 2; }
      .guides > a:hover::before {
        content: '';
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: rgba(0, 34, 68, 0.33);
        z-index: 1; }

.buttons-block {
  height: 103px;
  margin: 62px 0 52px 0;
  padding: 20px 0 0 0;
  border: 5px solid #00c0fa;
  border-radius: 8px;
  background: linear-gradient(transparent, #00b8f4 90%),
              radial-gradient(circle at 50% -150%, rgba(255, 255, 255, 0.07) 82%, transparent 70%),
              linear-gradient(#008ed9, #00b8f4 150%);
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 0.5px 0.5px #03a; }

    .buttons-block > p {
      text-align: center;
      font-size: 16px; font-weight: bold;
      margin-bottom: 5px; }

.compat-bottom {
  margin: 0 0 50px 0;
  text-align: center;
  font-size: 14px; font-weight: bold;
  color: #666f78; }

  .compat-bottom > p {
    line-height: 1.3 !important;
    padding-bottom: 15px !important; }

/* Canon Control */	

.header-menu {
	height:55px;
	padding:35px 0 0 0;
	position: relative;
}

.price-center {
    line-height: 1.5;
    text-align: center;
    padding: 0 auto 15px;
    font-size: 20px;
}

.price-center span{
    text-decoration: line-through;
    color: #999999;
}

.shape {
    background: #FFFACD;
    padding: 15px 25px;
    margin: 20px 0 5px;
	text-align: justify;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/* Canon Control End */	

/* Pros & cons; Article contents */	

.c-pricetag-heading,
.right .content-text .c-pricetag-heading {
  padding: 5px 0 7px 0;
  font-size: 14px; font-weight: bold;
  border-bottom: 1px solid #d8e9f8; }

.c-labeled-list,
.right .content-text .c-labeled-list {
  list-style: none;
  flex: 1 1 calc(50% - 1em);
  margin: 0; padding: 0;
  line-height: normal; }

  .c-labeled-list::before {
    content: attr(data-label);
    display: block;
    margin: 0 0 1.2em 0;
    font-weight: bold; }

  .c-labeled-list > li,
  .right .content-text .c-labeled-list > li { padding: 0; line-height: 22px; background: none; }

  .c-labeled-list.has-plus-icons  > li::before,
  .c-labeled-list.has-minus-icons > li::before {
    content: '';
    display: inline-block;
    width: 16px; height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    background-repeat: no-repeat;
    background-position: center; }

  .c-labeled-list.has-plus-icons > li::before { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAA81BMVEUAAABG1f40zP8uvP8Wqf9s4/80zP9b4/0asP9o4/5S4/xo4/5K4/ts4/8Flf9C2/0Mnv9d4/092P1S4/w0zP8asP9W4/wSpv8sw/8Lnf9J4/pl4/0sw/8juv9e4/1W4/xr4/40zP9e4/070v8asP9u4/8asP8juv8Spv8asP9J4/pu4/80zP9F4/o70v9F4/o70v8juv9W4/wsw/9F4/oLnf9r4/40zP80zP9r4/4Lnf8juv9W4/xl4/1F4/osw/8Flf8asP9J4/pW4/wLnf8sw/9l4/1P4/ts4/8juv8Spv9e4/1W4/wasP9J4/oLnf870v8nOM5BAAAARXRSTlMAAv4MBYbQg/n0849sRUJBLS0iCPPv6+nm5OLg3Nra2tnX09HRzMe3t7Syr6+vpqaUlJKLiH9/c29rW1lDOjgkIB0cFBMOkfYlAAAAsElEQVQY0zXLVbbCQBRE0brdSXi4PHfc3d2lkUDmPxr6Etg/Z9VHgT1P25VaIEa4C3+db4pLdwd2D74o7/FJ+/c0fTpvK/3/O2oeUNItJlvmh/HN9UqYSsW7ZhA0MP1epaIoKWXCRRmlgqg6Tp2I9CSZcpwwekK8WFYfVLYSQogYZhvWAv1wPwxQbq81SP5yRwAWT7Ztv2bTnIIBLfJ+uMtL3Kw7F/Y5NPAgI6HQ3J1XLeEjOZ1lCpcAAAAASUVORK5CYII='); }
  .c-labeled-list.has-minus-icons > li::before { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAzFBMVEUAAADurnPuuofwhBjrfAXtqnDmeSfxun73lUzrfAXicRPy063ZZx/rfAXrfAXzzZ7zoF30snb0xovy0qr2kDTxun7x07DrfAX0xovtqnDofjrx07Dpm2Hz0KHx07Dofjrx07DtqnD2kDTpm2H0zZfy0qrZZx/z0KHtqnD1kk3xun7x07DrfAXpm2H4l0vwhBjtqnD0zZfofjrpm2H1kk3tqnDZZx/0zZf0xov2kDTxun74l0vwhBjz0KH1kk3y0qrofjrtqnDpm2HrfAWO9xXPAAAAN3RSTlMAHgT4QhkV9vaWTk1FOzcXFgv58e3o39bEwry1tbSwoaCgnoOCgHdwcHBhXlhSTElDODg3MCseCn6+tAAAAJBJREFUGNNty8UWwjAARNGpUS8t7u7uWiTJ//8TJSnQBXcz5y0Gf6WnrWqhYQcQ5P5DyNqi67evISK9Y8I6+mdOCSUZkwun53W+EtqEjDRN8yVJ2pcJWaFG6RaxLqVzmIyZqqq6rmfNiox5WIZviqKEXApB7pzQAbC4/hg+IuP7h7EDt6k8uWYKMfngWANH5AuS6yDbXx5J2AAAAABJRU5ErkJggg=='); }

.o-pros-cons-container,
.right .content-text .o-pros-cons-container {
  display: flex; flex-flow: row wrap;
  margin: 1.7em 0 0.3em 0; padding: 0 0 0 20px; }


.c-contents-list {
  counter-reset: contents 0;
  list-style: none;
  margin: 3em 0 2.4em 0; padding: 2.4em 2.6em 3em 3.2em;
  font: 12px Arial, sans-serif;
  border: 1px solid #f1f7f9;
  border-radius: 6px;
  background-color: #f8fbfc; }

  .c-contents-list > li {
    position: relative;
    line-height: 2.5;
    letter-spacing: 0.6px; }

    .c-contents-list > li::after {
      counter-increment: contents;
      content: counter(contents);
      display: block;
      position: absolute;
      right: 2px; bottom: 4px; left: 0;
      padding-right: 9px;
      text-align: right;
      line-height: 1.6;
      border-bottom: 1px solid rgba(0, 35, 55, 0.15);
      pointer-events: none; }

    .c-contents-list > li > a {
      display: block;
      padding-right: 1.8em;
      text-decoration: none;
      color: #000;
      cursor: pointer; }

  .c-contents-list > li:hover,
  .c-contents-list > li:hover > a { color: #3e90da; }
    .c-contents-list > li:hover::after { border-color: #9dc7eb; }