/*-------------------------------------------

    Title :  SwitchVPN
    Usage :  Home page
    Edited:  2013-05-29

---------------------------------------------

    1. Title of page
    2. Promotion
    3. Features
    4. Locations
    5. Why Choose Us
    6. Latest News & Updates
    7. READY? ORDER NOW »

---------------------------------------------*/



/*  1. Title of page
---------------------------------------------*/

#title {
	display: none;
	}



main #promo {
	display: none;
	}

#promo-wrapper {
	background: #0d1117 url(../images/bg_promo-wrapper.jpg) no-repeat 50% 16px;
	}

#promo {
	position: relative;
	margin: 0 auto;
	width: 960px;
	height: 552px;
	}

#promo h2 {
	position: absolute;
	left: -5000px;
	}

#promo ul {
	position: relative;
	margin: 0 auto;
	width: 960px;
	}

#promo ul li {
	position: absolute;
	color: #fff;
	font-size: 1.3em;
	line-height: 1.4;
	text-align: right;
	}

#promo ul li:nth-child(5) ~ li {
	text-align: left;
	}

#promo ul li:nth-child( 1) { top:  59px; right: 655px }
#promo ul li:nth-child( 2) { top: 142px; right: 715px }
#promo ul li:nth-child( 3) { top: 235px; right: 736px }
#promo ul li:nth-child( 4) { top: 343px; right: 710px }
#promo ul li:nth-child( 5) { top: 430px; right: 658px }
#promo ul li:nth-child( 6) { top:  59px;  left: 657px }
#promo ul li:nth-child( 7) { top: 142px;  left: 715px }
#promo ul li:nth-child( 8) { top: 227px;  left: 736px }
#promo ul li:nth-child( 9) { top: 344px;  left: 708px }
#promo ul li:nth-child(10) { top: 430px;  left: 658px }

#promo > a {
	position: absolute;
	top: 162px;
	padding-top: 75px;
	width: 182px;
	height: 182px;
	color: #89b434;
	font: 3em/1.2 "Big Noodle Titling", sans-serif;
	text-align: center;
	-pie-background: rgba(0, 133, 210, 0.6);
	     background: rgba(0, 133, 210, 0.6);
	border-radius: 92px;
	behavior: url(js/PIE.htc);
	}

.ie8 #promo > a {
	visibility: visible !important;
	}

#promo > a:nth-of-type(1) {  left: -143px }
#promo > a:nth-of-type(2) { right: -140px }

#promo > a:hover,
#promo > a:focus {
	color: #90c031;
	-pie-background: rgba(0, 133, 210, 0.75);
	     background: rgba(0, 133, 210, 0.75);
	}

/*
#promo {
	position: relative;
	float: left;
	width: 100%;
	background: #0d1117 url(../images/bg_title.jpg) no-repeat top center;
	}

#promo h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 51;
	opacity: 0.2;
	-ms-filter: "alpha(Opacity=20)";
	width: 100%;
	height: 10px;
	overflow: hidden;
	text-indent: -5000px;
	background: #000;
	}

#promo .pager {
	position: absolute;
	bottom: 83px;
	left: 0;
	z-index: 53;
	width: 100%;
	text-align: center;
	}

#promo .pager a {
	display: inline-block;
	width: 9px;
	height: 9px;
	overflow: hidden;
	cursor: pointer;
	text-indent: -5000px;
	background-color: rgba(255, 255, 255, 0.3);
	background-clip: content-box;
	border: 2px solid transparent;
	border-radius: 100px;
	outline: none;
	}

#promo .pager a:not(:first-child) {
	margin-left: 1px;
	}

.no-touch #promo .pager a:hover,
.no-touch #promo .pager a:focus {
	background-color: rgba(255, 255, 255, 0.6);
	}

.no-touch #promo .pager a.activeSlide {
	background-color: rgba(255, 255, 255, 1);
	border-color: rgba(56, 121, 165, 0.8);
	}

.touch #promo .pager a {
	width: 16px;
	height: 16px;
	border: none;
	}

.touch #promo .pager a:not(:first-child) {
	margin-left: 19px;
	}

.touch #promo .pager a.activeSlide {
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 0 4px rgba(56, 121, 165, 0.8);
	}

.ie8 #promo .pager a {
	background: url(../images/sprite_ie8_promo_pager_a.png) no-repeat;
	border: none;
	}

.ie8 #promo .pager a:hover,
.ie8 #promo .pager a:focus {
	background-position: 0 -19px;
	}

.ie8 #promo .pager a.activeSlide {
	background-position: 0 -38px;
	}

#promo ul li {
	background-repeat: no-repeat;
	background-position: top center;
	}

#promo ul li:nth-child(1) { background-image: url(../images/bg_promo_li.1.jpg) }
#promo ul li:nth-child(2) { background-image: url(../images/bg_promo_li.1.jpg) }
#promo ul li:nth-child(3) { background-image: url(../images/bg_promo_li.1.jpg) }
#promo ul li:nth-child(4) { background-image: url(../images/bg_promo_li.1.jpg) }
#promo ul li:nth-child(5) { background-image: url(../images/bg_promo_li.1.jpg) }

#promo ul li .center {
	position: relative;
	margin: 0 auto;
	width: 960px;
	}

#promo ul li .center .wrapper {
	float: right;
	margin-top: 91px;
	width: 413px;
	}

#promo ul li .center .wrapper p {
	color: #fff;
	font-style: italic;
	font-weight: 700;
	font-size: 4em;
	line-height: 1.2;
	text-shadow: 6px 6px 6px rgba(0, 0, 0, 0.45);
	}

#promo ul li .center .wrapper > a {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-top: 31px;
	padding: 13px 10px;
	width: 292px;
	color: #fff;
	font-weight: 700;
	font-size: 1.8em;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	background: #81960f;
	background: -webkit-linear-gradient(top,       #81960f 0%, #80950f 57%, #637908 100%);
	background:    -moz-linear-gradient(top,       #81960f 0%, #80950f 57%, #637908 100%);
	background:      -o-linear-gradient(top,       #81960f 0%, #80950f 57%, #637908 100%);
	background:         linear-gradient(to bottom, #81960f 0%, #80950f 57%, #637908 100%);
	-pie-background:    linear-gradient(to bottom, #81960f 0%, #80950f 57%, #637908 100%);
	border-radius: 4px;
	behavior: url(js/PIE.htc);
	}

.ie8 #promo ul li .center .wrapper > a {
	visibility: visible;
	}

#promo ul li .center .wrapper > a:hover,
#promo ul li .center .wrapper > a:focus {
	background: #81960f;
	background: -webkit-linear-gradient(top,       #8ba113 0%, #8aa013 57%, #6d850b 100%);
	background:    -moz-linear-gradient(top,       #8ba113 0%, #8aa013 57%, #6d850b 100%);
	background:      -o-linear-gradient(top,       #8ba113 0%, #8aa013 57%, #6d850b 100%);
	background:         linear-gradient(to bottom, #8ba113 0%, #8aa013 57%, #6d850b 100%);
	-pie-background:    linear-gradient(to bottom, #8ba113 0%, #8aa013 57%, #6d850b 100%);
	}

#promo ul li .center .wrapper > a:before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 290px;
	height: 10px;
	background: url(../images/sprite.png) no-repeat 0 -50px;
	}

#promo ul li .center .wrapper > a:hover:before,
#promo ul li .center .wrapper > a:focus:before {
	background-position: 0 -70px;
	}
*/

/*  3. Features
---------------------------------------------*/

#features {
	padding-top: 1px;
	}

#features header {
	padding-bottom: 39px;
	background: url(../images/dvdr_features_header.png) repeat-x bottom left;
	}

#features header h2 {
	margin: 0 auto;
	width: 100px;
	height: 31px;
	overflow: hidden;
	text-indent: -5000px;
	background: url(../images/sprite.png) no-repeat 0 -90px;
	}

#features header p {
	margin: 17px auto 0;
	width: 820px;
	color: #254e90;
	font-style: italic;
	font-weight: 600;
	font-size: 2.4em;
	line-height: 1.25;
	text-align: center;
	}

#features dl {
	padding: 11px 0 26px;
	color: #10121a;
	font-size: 0;
	text-align: center;
	letter-spacing: -4px;
	background: url(../images/dvdr_features_header.png) repeat-x bottom left;
	}

#features dl li {
	display: inline-block;
	vertical-align: top;
	width: 450px;
	text-align: left;
	}

#features dl li:not(:nth-child(2n)) {
	margin-right: 19px;
	}

.opera #features dl li:nth-child(3n) {
	margin-right: -10px;
	}

#features dl dt {
	padding-top: 27px;
	font-style: italic;
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 0;
	}

#features dl dd {
	font-size: 10px;
	letter-spacing: 0;
	}

#features dl dd p {
	margin-top: 15px;
	font-size: 1.4em;
	line-height: 1.715;
	}



/*  4. Locations
---------------------------------------------*/

#loc {
	position: relative;
	margin: 30px 0 36px;
	padding: 39px 397px 0 28px;
	width: 920px;
	height: 288px;
	overflow: hidden;
	background: #151d29 url(../images/bg_loc.jpg) no-repeat;
	}

#loc h2 {
	color: #fff;
	font-size: 3em;
	line-height: 1;
	background: url(../images/bg_loc-tooltip.png) no-repeat 0 -5000px; /* preload image */
	}

#loc p {
	margin: 16px 0 22px;
	color: #5073ac;
	font-size: 1.4em;
	line-height: 1.572;
	}

#loc ul li {
	position: absolute;
	width: 24px;
	height: 32px;
	overflow: hidden;
	text-indent: -5000px;
	}

#loc ul li.js {
	overflow: visible;
	text-indent: 0;
	}

#loc ul li.ca { bottom: 185px; left: 548px }
#loc ul li.us { bottom: 163px; left: 557px }
#loc ul li.br { bottom: 115px; left: 593px }
#loc ul li.dz { bottom: 145px; left: 642px }
#loc ul li.uk { bottom: 176px; left: 653px }
#loc ul li.it { bottom: 167px; left: 671px }
#loc ul li.ch { bottom: 171px; left: 665px }
#loc ul li.fr { bottom: 171px; left: 660px }
#loc ul li.my { bottom: 134px; left: 780px }
#loc ul li.ru { bottom: 189px; left: 773px }
#loc ul li.hk { bottom: 151px; left: 785px }
#loc ul li.sg { bottom: 131px; left: 784px }
#loc ul li.lv { bottom: 182px; left: 680px }
#loc ul li.se { bottom: 187px; left: 671px }
#loc ul li.lu { bottom: 175px; left: 663px }
#loc ul li.ro { bottom: 170px; left: 683px }
#loc ul li.cz { bottom: 177px; left: 680px }

#loc ul li .pin {
	position: relative;
	left: -6px;
	max-width: none;
    -webkit-transform: scale(0.5);
       -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
         -o-transform: scale(0.5);
            transform: scale(0.5);
	-webkit-transition: -webkit-transform 300ms;
	   -moz-transition:    -moz-transform 300ms;
	     -o-transition:      -o-transform 300ms;
	        transition:         transform 300ms;
	}

.ie8 #loc ul li .pin {
	top: 32px;
	left: 6px;
	zoom: 0.5;
	}

#loc ul li .pin.transform {
 	z-index: 53;
   -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
	}

.ie8 #loc ul li .pin.transform {
	top: 0;
	left: -6px;
	zoom: 1;
	}

#loc ul li .triggerer {
	position: absolute;
	bottom: 0;
	left: 5px;
	z-index: 53;
	width: 14px;
	height: 16px;
	overflow: hidden;
	cursor: help;
	text-indent: -5000px;
	outline: none;
	background: url(null:void);
	-webkit-transition: left 300ms, width 300ms, height 300ms;
	   -moz-transition: left 300ms, width 300ms, height 300ms;
	     -o-transition: left 300ms, width 300ms, height 300ms;
	        transition: left 300ms, width 300ms, height 300ms;
	}

#loc ul li.it .triggerer {
	z-index: 55;
	}

#loc ul li .triggerer:hover,
#loc ul li .triggerer:focus {
	left: 0;
	z-index: 54;
	width: 24px;
	height: 32px;
	}

#loc ul li .hidden {
	position: absolute;
	left: -5000px;
	}

#loc > a {
	color: #e95018;
	font-size: 1.4em;
	}

#loc > a:hover,
#loc > a:focus {
	color: #f6612a;
	}

#loc > a:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-right: 7px;
	width: 35px;
	height: 34px;
	background: url(../images/sprite.png) no-repeat -155px -90px;
	}

#loc > a:hover:before,
#loc > a:focus:before {
	background-position: -110px -90px;
	}

#loc > a span {
	font-weight: 700;
	}

#loc > a:after {
	content: " \00bb";
	position: relative;
	top: 1px;
	font-size: 1.2em;
	}

.ie8 #loc > a:after {
	font-size: 1.68em;
	}

.loc-tooltip {
	position: absolute;
	z-index: 53;
	padding: 5px 9px 5px 5px;
	white-space: nowrap;
	background: #97a715 url(../images/bg_loc-tooltip.png) repeat-x bottom left;
	border-radius: 4px;
	}

.loc-tooltip .ui-tooltip-content {
	color: #fff;
	font-size: 1.2em;
	line-height: 1;
	}

.loc-tooltip .ui-tooltip-content img {
	vertical-align: middle;
	margin-right: 4px;
	}

.loc-tooltip .ui-tooltip-content .text {
	position: relative;
	top: 1px;
	top: -moz-calc(0px);
	vertical-align: middle;
	}

.ie.newer .loc-tooltip .ui-tooltip-content .text {
	top: 0;
	}

.loc-tooltip .ui-tooltip-content:after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 9px;
	width: 7px;
	height: 7px;
	background: url(../images/sprite.png) no-repeat -258px -25px;
	}



/*  5. Why Choose Us
---------------------------------------------*/

#why {
	float: left;
	width: 447px;
	color: #10121a;
	}

#why h2 {
	font-style: italic;
	font-size: 1.8em;
	}

#why div {
	position: relative;
	margin-top: 16px;
	padding: 17px 15px 21px;
	font-size: 1.4em;
	line-height: 1.572;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	behavior: url(js/PIE.htc);
	}

#why p {
	display: block;
	padding-bottom: 15px;
	font-size: 1em;
	line-height: 1.4;
	}

#why p a {
	color: #336cc0;
	}

#why p a:hover {
	color: #4e88dd;
	}



/*  6. Latest News & Updates
---------------------------------------------*/

#news {
	float: right;
	width: 447px;
	}

#news h2 {
	font-style: italic;
	font-size: 1.8em;
	}

#news article {
	padding: 15px 15px 0;
	border: solid #d9d9d9;
	border-width: 0 1px;
	}

#news article:first-of-type {
	position: relative;
	margin-top: 16px;
	padding-top: 16px;
	border-top-width: 1px;
	border-radius: 4px 4px 0 0;
	behavior: url(js/PIE.htc);
	}

#news article:last-of-type {
	position: relative;
	padding-bottom: 15px;
	border-bottom-width: 1px;
	border-radius: 0 0 4px 4px;
	behavior: url(js/PIE.htc);
	}
 
#news article h3 {
	padding-top: 12px;
	color: #254e90;
	font-style: italic;
	font-size: 1.8em;
	border-top: 1px solid #e5e5e5;
	}

#news article:first-of-type h3 {
	padding-top: 0;
	border-top: none;
	}

#news article p {
	margin-top: 13px;
	color: #10121a;
	font-size: 1.2em;
	line-height: 1.5;
	}
#news article a:hover {
color: #1a3b71;
}
#news article > a {
	position: relative;
	display: inline-block;
	margin-top: 15px;
	padding: 7px 9px 8px;
	color: #fff;
	font-size: 1.2em;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.46);
	background: #81960f;
	background: -webkit-linear-gradient(top,       #81960f 0%, #80950f 14%, #5e7407 100%);
	background:    -moz-linear-gradient(top,       #81960f 0%, #80950f 14%, #5e7407 100%);
	background:      -o-linear-gradient(top,       #81960f 0%, #80950f 14%, #5e7407 100%);
	background:         linear-gradient(to bottom, #81960f 0%, #80950f 14%, #5e7407 100%);
	-pie-background:    linear-gradient(to bottom, #81960f 0%, #80950f 14%, #5e7407 100%);
	border-radius: 3px;
	behavior: url(js/PIE.htc);
	}

#news article > a:hover,
#news article > a:focus {
	background: #889d14;
	background: -webkit-linear-gradient(top,       #889d14 0%, #879c14 14%, #667c0a 100%);
	background:    -moz-linear-gradient(top,       #889d14 0%, #879c14 14%, #667c0a 100%);
	background:      -o-linear-gradient(top,       #889d14 0%, #879c14 14%, #667c0a 100%);
	background:         linear-gradient(to bottom, #889d14 0%, #879c14 14%, #667c0a 100%);
	-pie-background:    linear-gradient(to bottom, #889d14 0%, #879c14 14%, #667c0a 100%);
	}

#news article > a:after {
	content: " \00bb";
	}



/*  7. READY? ORDER NOW »
---------------------------------------------*/

#order-now {
	clear: both;
	padding: 40px 0 23px;
	text-align: center;
	}

#order-now a {
	position: relative;
	display: inline-block;
	padding: 9px 43px 13px;
	color: #fff;
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	border: 1px solid;
	border-color: #27579d #27579d #173c81;
	background: #336dc1;
	background: -webkit-linear-gradient(top,       #336dc1 0%, #336cc0 57%, #2152ac 100%);
	background:    -moz-linear-gradient(top,       #336dc1 0%, #336cc0 57%, #2152ac 100%);
	background:      -o-linear-gradient(top,       #336dc1 0%, #336cc0 57%, #2152ac 100%);
	background:         linear-gradient(to bottom, #336dc1 0%, #336cc0 57%, #2152ac 100%);
	-pie-background:    linear-gradient(to bottom, #336dc1 0%, #336cc0 57%, #2152ac 100%);
	border-radius: 4px;
	box-shadow: inset 0 1px #538ad0, 0 1px 4px rgba(0, 0, 0, 0.4);
	behavior: url(js/PIE.htc);
	}

#order-now a:hover,
#order-now a:focus {
	background: #3d7ad1;
	background: -webkit-linear-gradient(top,       #3d7ad1 0%, #3c79d1 57%, #295ec0 100%);
	background:    -moz-linear-gradient(top,       #3d7ad1 0%, #3c79d1 57%, #295ec0 100%);
	background:      -o-linear-gradient(top,       #3d7ad1 0%, #3c79d1 57%, #295ec0 100%);
	background:         linear-gradient(to bottom, #3d7ad1 0%, #3c79d1 57%, #295ec0 100%);
	-pie-background:    linear-gradient(to bottom, #3d7ad1 0%, #3c79d1 57%, #295ec0 100%);
	box-shadow: inset 0 1px #5d95dc, 0 1px 4px rgba(0, 0, 0, 0.4);
	}

#order-now a:after {
	content: "\00bb";
	font-weight: 400;
	font-size: 1.25em;
	}

.ie8 #order-now a:after {
	font-size: 2.25em;
	}