
@font-face {
font-family: 'typopasblackwebfont';
src: url('font/typopasblackwebfont.eot');
src: url('font/typopasblackwebfont.eot?#iefix') format('embedded-opentype'),
	 url('font/typopasblackwebfont.woff2') format('woff2'),
	 url('font/typopasblackwebfont.woff') format('woff'),
	 url('font/typopasblackwebfont.ttf') format('truetype'),
	 url('font/typopasblackwebfont.svg#typopasblack') format('svg');
font-weight: normal;
font-style: normal;}

@font-face {
font-family: 'typopasregularwebfont';
src: url('font/typopasregularwebfont.eot');
src: url('font/typopasregularwebfont.eot?#iefix') format('embedded-opentype'),
	 url('font/typopasregularwebfont.woff2') format('woff2'),
	 url('font/typopasregularwebfont.woff') format('woff'),
	 url('font/typopasregularwebfont.ttf') format('truetype'),
	 url('font/typopasregularwebfont.svg#typopas_regularregular') format('svg');
font-weight: normal;
font-style: normal;}

@font-face {
font-family: 'typopasboldwebfont';
src: url('font/typopasboldwebfont.eot');
src: url('font/typopasboldwebfont.eot?#iefix') format('embedded-opentype'),
	 url('font/typopasboldwebfont.woff2') format('woff2'),
	 url('font/typopasboldwebfont.woff') format('woff'),
	 url('font/typopasboldwebfont.ttf') format('truetype'),
	 url('font/typopasboldwebfont.svg#typopas_boldbold') format('svg');
font-weight: normal;
font-style: normal;}

* { 
  margin:0;
  padding:0;
  border:0;
  outline:0;}
  
*, *:before, *:after { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {height: 100%;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
font, small, strong, dl, dt, dd, ol, ul, li,
form, label, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit; 
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit; 
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;}

.clearfix:after {
  clear: both;
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;}

.clearfix{ display:inline-block;}
 
html[xmlns] .clearfix{ display:block;}

img{
  max-width:100%; 
  height:auto;
  border:none;}

a{ 
  transition:color 0.2s ease-in; 
  -moz-transition:color 0.2s ease-in; 
  -webkit-transition:color 0.2s ease-in;
  text-decoration:none;
  color:#ca4ac2;}
    
a:hover{ 
  text-decoration:none; 
  color:#520a6c;}

ul{
  margin:0px; 
  padding:30px;}
  
ul li{ list-style:none;}

body{ 
  width:100%; 
  font-size:16px; 
  color:#4c4c4c;
  background-color: black;
  font-family: 'typopasregularwebfont';  }
  
strong{ font-weight:700;}

::-webkit-input-placeholder {
    color:#555;
}
:-moz-placeholder {
    color:#555;
}
::-moz-placeholder {
    color:#555;
}
:-ms-input-placeholder {
    color:#555;
}

/************reset css******************/

#page{ 
  width:100%;
  background:#010101 url(../images/main-bg.jpg) no-repeat center top;
    margin-bottom: -60px;}

.row{ 
  max-width:1170px; 
  margin:0px auto;}
  
#header{ padding:12px 0;}

#header_id{
/*	margin-top:-15px;*/
/*margin-top:-40px;*/
margin-top:5px;
  }
.logo{ 
  float:right;
  width:40%;
  text-align:right;
  padding:16px 0 10px 0;}

 #dfaxtext{
 position:absolute;
 padding-top:45px;
  margin-right:-208px;
  font-size:16px; 
  color:#FFF;
  font-family:'typopasregularwebfont';
  }
  
.head-left{ 
  float:left;
  width:56%;
  text-align:left;
  padding:4px 0;}

.head-icon{ 
  text-align:center;
  display:inline-block;
  padding:5px 8px;
  vertical-align:top;
  width:78px;
	-webkit-transition: -webkit-transform ease-out 0.3s;
	-moz-transition: -moz-transform ease-out 0.3s;
	transition: transform ease-out 0.3s;
}
.head-icon:hover{
	-webkit-transform: scale(1.10);
	-moz-transform: scale(1.10);
	-ms-transform: scale(1.10);
	transform: scale(1.10);
}

.head-icon-text{ 
  display:block;
  color:#e4e4e4;
  font-size:13px;}
  
#wrapper{ 
  /*margin:50px 0 0px 0;*/
  margin-top:5px;
  padding-bottom:16px;
  position: relative;
  height:533px;
  background:url(../images/center-boy-img2.png) no-repeat top center;}

#indexWorkAlt #wrapper{
	padding-bottom:0;
	margin-bottom:-1px;
}
.btn-vid{
	position: absolute;
	top:132px;
	left:42%;
	width:369px;
	height: 290px;
	display: block;
	background:url(../images/btn-video.png) no-repeat top center;
	-webkit-transition: -webkit-transform ease-out 0.3s;
	-moz-transition: -moz-transform ease-out 0.3s;
	transition: transform ease-out 0.3s;}

.btn-vid:hover{
	-webkit-transform: scale(1.10);
	-moz-transform: scale(1.10);
	-ms-transform: scale(1.10);
	transform: scale(1.10);
}
  
  
.main{ 
  float:right; 
  width:38%;
  padding:20px 0;} 
  
.form-section{ 
  float:left; 
  width:23%;
  padding:20px 0 0;
  max-width:350px;
  /*margin-top:-40px;*/
  margin-top:9px;}
  
h1{ 
  color:#fff; 
  /*font-size:85px; */
  font-size:92px; 
  line-height:77px;
  font-weight:800;
  font-family: 'typopasblackwebfont';
  padding-bottom:10px;} 
  
  #main_h1{
  color:#27c0f2;
  margin-top:5px;
  font-size:83px;}
h2{ 
  color:#27c0f2; 
  font-size:38px; 
  line-height:30px;
  font-family: 'typopasboldwebfont';}
  
h3{ 
  color:#fff; 
  font-size:27px;
  line-height:22px;
  font-family: 'typopasboldwebfont';}
  
.sub-head{ 
  /*font-size:25px; */
    font-size:25px; 
  font-family: 'typopasregularwebfont';
  color:#fff!important;
  display:block;
  padding:5px 0; } 
  
  .sub-head1{
  margin-bottom: 0px!important;
  font-family: 'typopasboldwebfont';
  /*font-size: 37px;*/
    font-size: 33px;
  color:white;}
  
   
.subtitle{ 
  font-size:20px; 
  color:#fffefe;
  display:block;
  padding:5px 0;}
  
.form-head{ 
  text-align:center;
  background:url(../images/form-head-bg.png) no-repeat center bottom;
  padding:0 0 30px 0;}
  
.field-group{ 
  display:block; 
  padding:7px 0;}
  
.form-lbl{ 
  color:#cfe1f5; 
  font-size:15px;
  display:block;
  padding:3px 0;}
  
.field{ 
  background:rgba(243, 249, 255, 0.7);
  display:block;
  width:100%;
  font-size:17px;
  padding:11px 15px;
  border-radius:5px;
  -webkitborder-radius:5px;
  font-family: 'typopasregularwebfont',Arial,Helvetica,sans-serif;}
  
.button,.bSubmit{ 
  background:#27c0f2;
  border-radius:5px;
  -webkitborder-radius:5px;
  font-size:33px;
  padding:1px 10px 0 10px;
  height:41px;
  line-height:41px;
  vertical-align:middle;
  display:block;
  width:100%;
  text-align:center;
  color:#fff;
  margin-top:15px;
  cursor: pointer;
  font-family: 'typopasboldwebfont'; }
.button:hover,.bSubmit:hover{ background:#0eb3e7;}
  
.content{ 
  color:#efefef; 
  font-size:19px;
  width:50%;
  /*margin-top:123px;*/
  margin-top:80px;
}
#indexWorkAlt .content,#thanksWork .content{
	margin-top:40px;
}
.content#ticker{
	height:84px!important;
}
.content#ticker{
	bottom:44px;
}
#indexWorkAlt .content#ticker{
	bottom:84px;
}
.bg-green{ 
  background:#175569;
  padding:3px 5px 1px;
  display:inline-block;
  margin-bottom:5px;}
  
.author{ 
  color:#26a5d0; 
  font-size:15.5px;}
  
.bottom{ padding-bottom:0px;}
  
.one-third{ 
  float:left; 
  width:31.3%; 
  margin-right:3%;}

.one-third:last-child{ margin-right:0;}
  
.box{ 
  padding-bottom:0px;
  text-align:center;
  max-width:369px;
}

  
.box img{ vertical-align:bottom;}
.box-img{
	width:366px;
	height: 135px;
	overflow: hidden;
	position:relative;
	opacity:0.9;
}
#boxImgCloud,#boxImgPeople,#boxImgCheckBox{
	position:absolute;
	top:50%;
	left:50%;
}
#boxImgPeople{
	margin-top:-26px;
	margin-left:-36px;
}
#boxImgCheckBox{
	margin-top:-29px;
	margin-left:-29px;
}
#boxImgCloud{
	margin-top:-29px;
	margin-left:-46px;
}
.box-img img{
	-webkit-transition: -webkit-transform ease-out 0.3s;
	-moz-transition: -moz-transform ease-out 0.3s;
	transition: transform ease-out 0.3s;
}
.box-img:hover{
	opacity:0.8;
	cursor:default;
}
  
.image-caption{ 
  background:#0a0f19; 
  padding:7px; 
  color:#fff;
    text-align: center;
}  
.form-content-thanks{
	height: 272px;
	color: white;
	font-size: 24px;
	text-align: center;
	padding-top:20px;
}
#video{
	background-color: black;
}
#bAgree{
	visibility:hidden;
}
#bAgreeCaption{ 
  color:#cfe1f5; 
  font-size:17px;
  padding:0 8px;
  vertical-align:-3px;
  font-family: 'typopasregularwebfont',Arial, Helvetica, sans-serif;
}
label.check{
	background: white;
	border-radius: 5px;
	display: inline-block;
	/*display:none;*/
	width: 23px;
	height: 23px;
	margin: 5px 0px 2px;
}
label.check.on {
	background: white url(../images/icons.png) no-repeat -468px -72px;
}

@media only screen and (max-width:1170px){
.row{ padding:0 15px;}
}

@media only screen and (max-width:960px){
/*#wrapper{ background-size:60% auto;}*/
.form-section{ width:30%;}
h1{ font-size:60px; line-height:52px;}
h2{ font-size:38px; line-height:24px;}
h3{ font-size:24px;}
.sub-head{ font-size:23px;}
#wrapper{ margin-top:50px; padding-bottom:35px;}
}

@media only screen and (max-width:860px){
.head-icon{ padding:5px 4px;}
.subtitle{ font-size:14px;}
.main{ padding:15px 0; width:38%;}
h3{ font-size:20px; line-height:18px;}
h2{ font-size:35px; line-height:22px;}
h1{ font-size:52px; line-height:44px;}
}

@media only screen and (max-width:768px){
#page{ background-size:cover;}
.row{ padding:0 22px;}
.container{ background:url(../images/center-boy-img-mobile.png) no-repeat left top;}
.logo{ float:none; width:auto;}
.head-left{ float:none; width:auto; text-align:center;}
#wrapper{ margin-top:20px; background:none;}
.main{ float:none; width:auto;}
.form-section{ float:none; width:auto; margin:0px auto;}
.content{ margin:20px auto 0 auto; width:auto; text-align:center;}
.box{ float:none; width:auto; margin:0px auto;}
.box:last-child{ margin:0px auto;}
.btn-vid{top:-57px;left:70px;width:72px;height: 60px;}
}

@media only screen and (max-width:640px){
.logo{ width:62%; height:110px; padding:0;}
#header{ padding-bottom:0;}
#wrapper{ margin-top:0; padding-bottom:0;height:auto;}
.bottom{margin-top:12px;}
h1{ font-size:49px; padding-bottom:0;}
h2{ font-size:42px; line-height:30px;}
.subtitle{ font-size:18px;}
.sub-head{ font-size:19px;}
.main{ padding:10px 0 0 0 ;}
.content{ display:none;}
.box{ padding:12px 0;}
}

/*HTC Sensation*/
@media only screen and (max-width:520px){
.head-icon{ width:15%; padding:5px 0; margin:0 2%;}
.logo {margin:-10px -8px 0 0;-webkit-transform: scale(0.90);
	-moz-transform: scale(0.90);
	-ms-transform: scale(0.90);
	transform: scale(0.90);}
#dfaxtext{display:none;}
/*#wrapper{margin-top:4.8em; overflow-x: hidden!important;}*/
/*.main #header_id .sub-head1{font-size:1.6em;}*/
.main #header_id .sub-head1{font-size:19pt;}
.main #main_h1{font-size:44pt;}
}

@media only screen and (max-width:420px){
.head-icon{ width:15%; padding:5px 0; margin:0 2%;}
.box-img{
	width:auto;
/*	height: auto;*/
	overflow: hidden;
}
#dfaxtext{display:none;}
}

@media only screen and (max-width:280px){
.row{ padding:0 18px;}
h1{ font-size:40px; line-height:38px;}
.field-group{ padding:6px 0;}
.head-icon{ width:14%;}
h2{ font-size:35px; line-height:25px;}
#dfaxtext{display:none;}
}

.fancybox-skin{background: black !important;}
/* helper classes*/
.hideMe{
	display:none;
}
