body {
	margin: 0 auto;

}
div {
	

}

img { 
    max-width: 100%; 
    height: auto; 
}

@font-face {
    font-family: 'RifficFree';
    src: url('../res/font/RifficFree-Bold_0.ttf');
}
@font-face {
    font-family: 'Roboto';
    src: url('../res/font/Roboto-Black.ttf');
}

.ch-font {
	font-family: "RifficFree";
}

.resizeText {
	font-family: "Roboto";

}

#header {
	background-color: #000000;
	position: fixed;
	width: 100%;
	opacity: 0.5;
	height:120px;
	z-index: 1;

}
.menu_bg {
	background-color: #000000;
2}

/*content*/

#pagewidth {
	

}


#icon {
	position: fixed;
	opacity: 1;
	width: 120px;
	z-index: 2;
}

#download {
	position: fixed;
	right: 0px;
	opacity: 1;
	z-index: 2;
}
.row {
	

}
 /*header button start*/
.pull_left {
	float: left;
}
.pull_right {
	float: right;
}
.clear {
    clear: both;

}

.center_padding {
	padding-left: 20px;

}

ul#navigation {
    float: right;
    min-width: 200px;
    margin-right: -15px;
}
#navigation-box	ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#navigation > li {
    padding: 0;
    float: left;
    min-height: 35px;
    border: none;
    display: block;
    background-position: 0 90%;
    -o-transition: all 100ms ease-in;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}
ul#navigation li {
    position: relative;
    padding: 14px 5px 16px;
    border-bottom: 1px solid #1b253b;
}
li {
    line-height: 20px;
}
 /*header button end*/

.left {
	text-align: left;
}
.float_left {
	float: left;
}
.center {
	text-align: center;
	margin: 0 auto;
}
.right {
	text-align: right;
}
.float_right {
	float: right;
}

.width_100 {
	width:100%;
}
.width_80 {
	width:80%;
}
.width_60 {
	width:60%;
}
.width_50 {
	width:50%;
}
.width_1000px{
	width:1000px;

}
.width_600px{
	width: 600px;

}
.margin-right-10px {
	margin-left: 10px;

}

.P4_BG {
	width: 1212px;
	height: 905px;
	background-image: url("../res/img/P4/P4_BG1.png");
    background-size: 1212px,100px;
}

#p4_table {
	position: relative;
	top:280px;

}

#contact_us {
	
}
#contact_us p{
	font-family: "Arial";
	color: #A6A6A6;
	font-size: 30px;
}
#contact_us .title{

	font-family: "RifficFree";
	color: #A6A6A6;
	font-size: 50px;
	font-style: bold;
}
#contact_us .title2{
	font-family: "Roboto";
	color:#686868;
}

#contact_us .content{
	font-family: "Roboto";
	color:#A6A6A6;
	font-size: 20px;
	font-style: ;
}

#contact_us .address{
	font-family: "Roboto";
	color:#686868;
	font-size: 20px;
}
#contact_us .icon {
	width: 100px;
	height: 100px;
}
.map_responsive {
	width: 250px;
	height: 250px;

}

.input_form_bg {
	background-color: #E3E3E3;

}

.input_name {
	font-family: "Roboto";
	width: 190px;
	font-size: 16px;
	margin-right: 10px;
	margin-bottom: 5px;
	border: none;

}

.input_email {
	font-family: "Roboto";
	width: 190px;
	font-size: 16px;
	margin-right: 10px;
	border: none;
}

.input_phone {
	font-family: "Roboto";
	width: 190px;
	font-size: 16px;
	border: none;
}

.input_msg {
	font-family: "Roboto";
	width: 100%;
	height: 200px;
	font-size: 16px;
	border: none;
	resize: none;
}

.input_button {
	width: 120px;

}

/* to fix the dfferent size problem */
.zoom_p4 {


}

.zoom_contact {


}

.zoom_header {


}

/* to fix the dfferent size problem end*/


 /*3d animation start*/
.ch-grid {
	margin: 0 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}
 
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}
 
.ch-grid:after {
    clear: both;
}
 
.ch-grid li{
    width: 259px;
    height: 259px;
    display: inline-block;
   // margin: 40px;
	margin: 20px;
}
.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
	-webkit-perspective: 900px;
	-moz-perspective: 900px;
	-o-perspective: 900px;
	-ms-perspective: 900px;
    perspective: 900px;
	
}
.col-letter, 
.col-words, 
.col-quiz {
    width: 259px;
    height: 259px;
    display: inline-block;
    margin: 20px;
}
.ch-info{
    position: absolute;
    width: 100%;
    height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}


.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	
}

.ch-info .ch-info-front {
	background-color: rgba(232,232,221,0.5);
    box-shadow: 0 0 0 10px rgba(232,232,221,0.2), 0 0 0 3px #e8e8dd;
}

.ch-info-front h4 {
    font-family: 'RifficFree';
	font-weight: 400;
	font-size: 30px;
	color: #162a43;
	text-shadow: 0 1px 0 #e8e8dd;
	text-align: center;
	text-transform: uppercase;
	padding-top: 76px;
}

.ch-info .ch-info-back {
	-webkit-transform: translate3d(0,0,-180px) rotate3d(1,0,0,90deg);
	-moz-transform: translate3d(0,0,-180px) rotate3d(1,0,0,90deg);
	-o-transform: translate3d(0,0,-180px) rotate3d(1,0,0,90deg);
	-ms-transform: translate3d(0,0,-180px) rotate3d(1,0,0,90deg);
    transform: translate3d(0,0,-180px) rotate3d(1,0,0,90deg);
    background-color: #7ccbfc;
    box-shadow: 0 0 0 10px rgba(232,232,221,0.2), 0 0 0 3px #fff;
    opacity: 0;
}
.col-letter .ch-info .ch-info-back {
    background-color:#3385DA;
}
.col-words .ch-info .ch-info-back {
    background-color:#52C18A;
}
.col-quiz .ch-info .ch-info-back {
    background-color:#FA7651;
}

.ch-info-back h4 {
    font-family: 'RifficFree';
	font-weight: bold;
	font-size: 30px;
	color: #fff;
	text-shadow: 0 1px 0 #5fb9f0;
	text-align: center;
	text-transform: uppercase;
	padding: 0 0 0px;
}
 
.col-5 .ch-info .ch-info-back h4{
	text-shadow: 0 1px 0 #f56121;
}
 
.ch-info-back p {
    color: #fff;
    margin: 0 23px 12px 23px;
    font-size: 20px;
	line-height: 40px;
}

.ch-info-back .resizeHead {
	font-size: 22px;
} 

.ch-info-back .resizeText {
    color: #fff;
    margin: -18 23px 12px 23px;
	font-size: 22px;
	line-height: 30px;
} 

.ch-info-back a {
    display: inline-block;
    background: url(../img/call-to-action-arrows.png) 0 0 no-repeat;
	width: 20px;
	height: 20px;
}
 
.ch-info-back a:hover {
    background: url(../img/call-to-action-arrows.png) 0 -25px no-repeat;
}
.ch-item.hover .ch-info-front {
	-webkit-transform: translate3d(0,240px,0) rotate3d(1,0,0,-90deg);
	-moz-transform: translate3d(0,240px,0) rotate3d(1,0,0,-90deg);
	-o-transform: translate3d(0,240px,0) rotate3d(1,0,0,-90deg);
	-ms-transform: translate3d(0,240px,0) rotate3d(1,0,0,-90deg);
    transform: translate3d(0,240px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
}

.ch-item.hover .ch-info-back {
	-webkit-transform: rotate3d(1,0,0,0deg);
	-moz-transform: rotate3d(1,0,0,0deg);
	-o-transform: rotate3d(1,0,0,0deg);
	-ms-transform: rotate3d(1,0,0,0deg);
	transform: rotate3d(1,0,0,0deg);
    opacity: 1;
}

.marker-animation,
.slider-marker
{
	position: relative;
	height:367px;
	width:367px;
}



.marker-animation
{
}

#print-div
{
	position:relative;
    right: 50px;
	width: 978px;
	height: 1404px;
}

#print
{
	background: url("../res/img/Try now/platform.png") no-repeat;
    background-size: 978px,1454px;
	width: 978px;
	height: 1404px;
	-webkit-print-color-adjust: exact;
}

.tryme-title
{
    position: relative;
    left: 240px;
}

.btn-home
{
    position: absolute;
    top: 0px;
	left: 30px;
}
.trynowbg {
	background: url("../res/img/Try now/BG.png");
    background-size: 2560px,1440px;
	height: 1440px;
	width: 2560px;
}
.trynow {
	background: url("../res/img/Try now/BG.png");
    background-size: 2560px,1440px;
	height: 1440px;
	width: 2560px;
	position:relative;
}

.marker-bg
{
	display: inline-block;
	background: url("../res/img/Try now/alphabet_border.png");
    background-size: 544px,530px;
	width: 544px;
	height: 530px;
	    text-align: center;
}

.left-btn-and-logo-div
{
	width:300px;
	float:left;
}
.logo
{
	
}
.clear{
	clear: both;
}

.board
{
	height:530px;
    position: relative;
    top: 10px;
	left: 300px;
}

#slider-next,
#slider-prev,
.bx-wrapper
{
	/* display:inline-block;
	position:relative; */
}

#slider-next
{
	cursor: pointer;
	/* left:50px;
	top: -300px; */
}
#slider-prev
{
	cursor: pointer;
	/* left:-50px;
	top: -300px; */
}

#btn-print
{
	cursor: pointer;
	width: 256px;
	height: 72px;
}
/*3d animation end*/

#btn-ok
{
	cursor: pointer;
	margin-top: 40px;
	width: 256px;
	height: 72px;
}


.remove
{
	position: relative;
	top: 803px;
	left: 14px;
	width:46px;
	height:52px;
	margin-left: 117px;
}
.marker-pos
{
	position: relative;
	top: 811px;
	left: 64px;
	width:150px;
	height:150px;
	display:inline;
	margin-left: 14px;
}

.marker-list
{
	width:400px;
	height:400px;
	margin-top:50px;
}
#trynow-hidden
{
	width: 100%;
    overflow: hidden;
}

.btn-home
{
	position: absolute;
}

.step-table
{
	position: relative;
	left: 245px;
	top: 35px;
}

.step-object img
{
	position: relative;
	top: -30px;
}

.hide
{
	opacity: 0;
    filter: alpha(opacity=0);
}

#print-show
{
	display:none;
}
@media print
{
	
	
	/* body * { 
		display: none;
	}
	#print-div,
	#print-div * 
	{
		display:  -webkit-box; 
	}
	
	#trynow-hidden { 
		display: inline; 
	}
	.trynow { 
		display: inline;
	}
	#pagewidth {
		display: inline; 
	}
	#content { 
		display: inline; 
	} */
	.step-table,
	.trynow a img,
	.tryme-title,
	.board { 
		display: none;
	}
	#trynow-hidden {
		overflow: visible; 
	}
	
	#print-div {
		position: absolute;
		top:50px;
		left:50px;
	}
	#remove-1,
	#remove-2,
	#remove-3,
	#remove-4,
	#remove-5
	{
		display:none;
	}
	#print-show
	{
		display:inline;
	}
	#pagewidth
	{
		display:none;
	}
}