@charset "utf-8";
/* CSS Document */

body
{
	margin:0;
	background:url(../images/tricks_bg.jpg) repeat-y fixed;
	background-size:100%;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
@font-face
{
	font-family:name;
	src:url(../fonts/Adore.ttf);
}
a
{
	text-decoration:none;
}
.left
{
text-align:left;
display:inline;
}
.green
{
	color:#00aa9f;
	font-size:27px;
    
}
.g-color, .point-area .fa, .grey-box span{
	color:#01998e;
}
.no_margin
{
	margin:0 !important;
}
.center
{
	text-align:center !important;
}
.no_pad
{
	padding:0 !important;
}
.no_top_pad
{
	padding-top:0;
}
.feed
{
	position:fixed;
	right:0;
	height:auto;
	width:auto;
	top:150px;
}
.pad_bot
{
	padding-bottom:20px;
}
img
{ border:0;
}
header
{
	background:rgba(1,153,142,0.6);
	height:auto;
	width:100%;
	float:left;
	padding-bottom:10px;
	box-shadow:1px 1px 10px #666666;
	z-index:10;
}
footer
{
	background:rgba(1,153,142,0.7);
	height:auto;
	width:100%;
	float:left;
	box-shadow:1px 1px 10px #666666;
	z-index:10;
}
.head, #content,.foot, .info, .bottom-info
{
	width:1024px;
	margin:auto;
	height:auto;
}
.clearfix
{
clear:both;
}
.top_gap
{
	padding-top:30px;
}
#name, #logo
{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;	
}
#name
{
	width:25%;
	height:auto;
	font-size:4rem;
	font-family:name;
	float:left;
	padding-top:20px;
	font-weight:500;
}
#logo
{
	float:left;
	height:100%;
	width:12%;
	padding-top:20px;
	margin-left:20px;
}
#name a
{
	color:#FFF;
}
#login
{
	float:right;
	width:40%;
	margin-right:20px;
	height:100%;
}
.simple_login
{
	display:block;
	width:100%;
	height:auto;
	float:left;
}
.mob_login
{
	display:none;
	width:100%;
	height:auto;
	float:left;

}
#login table
{
	width:100%;
	margin-top:30px;
	text-align:right;
}
#login input[type=text]
, #login input[type=password]
{
	width:95%;
	height:30px;
	border:0;
	border-radius:5px;
	padding-left:5px;
	font-weight:600;
	font-size:13px;
	color:#01998e;
}
#login input[type=submit], #login button
{
	border:0;
	border-radius:5px;
	padding:3px;
	width:auto;
	box-shadow:1px 2px 3px #666666;
	cursor:pointer;
	height:28px;
	color:#01998e;
	font-size:13px;
	margin-left:20px;
	font-weight:600;
	background:#FFF;
}
#login td
{
	padding:5px;
	width:50%;
}
#login h3
{
	color:#FFF;
	margin:10px 0;
}
.align_right
{
	text-align:right;
}
#login p
{
	padding:0;
	margin:0;
	font-size:13px;
	color:#FFF;
	font-weight:700;
}
#login p a
{
	color:#FFF;
	text-decoration:underline;
}
#welcome
{
	color:#FFF;
	font-size:1.3rem;
	font-weight:bold;
}
#info_back, #content2_back, #points_back
{
	width:100%;
	float:left;
	height:auto;
	background:rgba(255,255,255,0.7);
	margin-bottom:50px;
}
#info_back{
	background:#fff;
}
.half {
    width: 50%;
    float: left;
}
.point-area ul {
   margin: 15px 0 25px !important;
}
.point-area li i {
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 20px;
}
.point-area li {
    font-size: 16px !important;
    padding-left: 28px;
    position: relative;
    line-height: 1.8 !important;
}
.point-area {
    padding-right: 10px;
}
.right-content {
    padding: 0 10px 10px;
}
a.rg-btn {
    background: #019a8e;
    color: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 3px 10px 10px #ededed;
    margin: 16px 0;
    display: inline-block;
    font-weight: normal;
}
#content2_back
{
	margin:50px 0 0;
	padding-bottom:0px;
}
#content_back
{
	width:100%;
	float:left;
	height:auto;
}

/* tricks area */
.tricks_area
{
	width:100%;
	float:left;
	height:auto;
}
.tricks_head
{
	width:100%;
	height:50px;
	background:#00a99d;
	float:left;
	display:block;
	border-left:10px solid #01948a;
	border-right:10px solid #01948a;
	margin-bottom:15px;
	color:#FFF;
	font-size:1.3rem;
	padding:10px;
	cursor:pointer;
}
.tricks
{
	width:100%;
	height:auto;
	float:left;
	display:none;
}
.example
{
	width:100%;
	float:left;
	height:auto;
	padding: 0 5px;
	padding-bottom:30px;
	border-bottom:10px solid #01948a;
}
.example_top
{
	width:100%;
	float:left;
	margin-bottom:15px;
	height:auto;
}
.example_img
{
	float:left;
	margin-right:5%;
	width:7%;
}
.border_right
{
		border-right:5px solid #1f3589;
		width:48% !important;
		margin-right:2%;
}
.no_border
{
	border:none;
}
.pad_top
{
	padding-top:10px;
}
.no_left_pad
{
	padding-left:0 !important;
}
.division input[type=text]
{
	color:#ffffff;
	box-shadow:0px 0px 5px #666;
	border:none;
	width:80%;
}
.division li input[type=text]
{
	width:auto;
}
#group2
{
	display:none;
}
.mar_left
{
	margin-left:41.5% !important;
}

#result
{
	width:50%;
	float:left;
	width:40%;
	height:auto;
	padding:10px 0;
	background:rgba(1,153,142,0.6);
	border-radius:15px;
	box-shadow:0 0 5px #666666;
}
.result
{
	font-size:1.1rem;
	color:#008b23;
	font-weight:bold;
	padding-left:20px;
	font-family:Verdana, Geneva, sans-serif;
}
.right
{
	padding-left:10px;
	color:#090;
}
.wrong
{
	padding-left:10px;
	color:#C00;
}
.arrow
{
	font-size:3rem;
	padding:0;
	margin:0;
}
.info
{
	padding:30px 0;
	
}
.info h1, .division h1
{
	color:#666666;
	font-size:27px;
	margin-top:0;
}
.info p, .text p, .bottom-info
{
	font-size:1rem;
	padding:0 25px;
	text-align:justify;
}
.info p{
	padding:0;
}
.info blockquote {
    color: #fff;
    padding: 10px;
    background: rgba(1,153,142,0.6);
    text-align: center;
    font-size: 26px;
    border: 3px solid #019a8e;
    width: 100%;
    margin: 0 auto;
}
.point-area blockquote {
    font-size: 20px;
}
.info ul
{
	padding:0;
	margin:0;
	list-style:none;
}
.info li, .group li
{
	line-height:2;
	font-size:1.2rem;
	color:#666;
	font-weight:bold;
}
.atss
{
	top:28%;
}
.copyright
{
	float:left;
	width:auto;
	text-align:right;
	height:auto;
	line-height:1.5;
}
.reference
{
float:left;
color:#FFF;
height:auto;
width:25%;
}
.foot
{
	color:#FFF;
	padding:20px 0;
	font-weight:bold;
}
.foot a
{
	color:#FFF;
}
.social
{
	width:46%;
	text-align:center;
	float:left;
	overflow:hidden !important;
	height:auto;
}
.social table
{
width:50%;
margin:auto;
overflow:hidden;
}
.like
{
	position:absolute;
	right:0;
	top:35%;
}
.social td
{
	width:25%;
	text-align:center;
}
#level_head, .group_head
{
	text-align:center;
	color:#01998e;
	box-shadow:0px 0px 5px #666666;
	width:150px;
	font-size:30px;
	padding:5px;
	background:#FFF;
	margin:30px auto 0;
	border-radius:10px;
}
.group_head
{
	margin-bottom:15px;
	width:200px;
}
#top_margin
{
	margin-top:50px;
}
.ready_quiz
{
	color:#5ebab2;
	font-size:90px;
	padding-right:20px;
	font-weight:bold;
	text-shadow:1px 1px 2px #666;
}
.for
{
	font-size:50px;
}
.final_test_head
{
	color:#5ebab2;
	font-size:50px;
	padding-right:20px;
	font-weight:bold;
	text-shadow:1px 1px 2px #666;
}

.image
{
	width:21%;
	height:240px;
	float:left;
	margin-top:20px;
	margin-left:35px;
	padding-top:40px;
}
.test_button
{
	width:20%;
	height:auto;
	float:left;
}

.image img
{
	width:100%;
	height:100%;
}
.text
{
	width:70%;
	float:left;
	height:auto;
	margin-top:20px;
	padding-left:15px
}			
.text h3
{
	color:#777;
}
.ans
{
	font-size:22px;
	text-decoration:underline;
}		
.fa
{
	font-size:25px;
}		
			/* ease in */

.come-in {
  transform: translateY(150px);
  animation: come-in 1s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateY(0); }
}

									/* end  */
							
.btn {

	-webkit-border-radius: 3px;

	-moz-border-radius: 3px;
	border:0;

	border-radius: 7px;

	font-size: 20px;

	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform: uppercase;

	padding: 15px;

	display: inline-block;

	position: relative;
	margin-top:45px;
	box-shadow:1px 1px 2px #666666;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	-ms-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;

}
.btn:hover
{
	cursor:pointer;
}
.btn:after {

	content: '';

	position: absolute;

	z-index: -1;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	-ms-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;

}


.btn-1 {

	background: #01998e;

	color: #fff;

}

.btn-1:active {

	background: #354B61;

	color: #fff;

	top: 2px;

}



.btn-1 {

	overflow: hidden;

line-height:1;
}

.btn-1:before {

	left: auto;

	right: 10px;

	z-index: 2;

}

.btn-1:after {

	width: 30%;

	height: 200%;

	background: rgba(255,255,255,0.2);

	z-index: 1;

	right: 0;

	top: 0;

	margin: -5px 0 0 -5px;

	-webkit-transform-origin: 0 0;

	-webkit-transform: rotate(-20deg);

	-moz-transform-origin: 0 0;

	-moz-transform: rotate(-20deg);

	-ms-transform-origin: 0 0;

	-ms-transform: rotate(-20deg);

	transform: rotate(-20deg);
	

}

.btn-1:hover:after {

	width: 60%;
	cursor:pointer;

}

/* Register Page */

#register
{
	float:left;
	width:40%;
	height:auto;
	padding:10px 0;
	background:rgba(1,153,142,0.6);
	margin:50px auto;
	border-radius:15px;
	box-shadow:0 0 5px #666666;
}
#register h2, #register h3, #register h4
,#result h2{
	text-align:center;
	color:#FFF;
}
#register table , #result table 
{
	width:90%;
	height:auto;
	margin:auto;
}
#register table th, #result table th

{
	width:30%;
	font-size:1.2rem;
	color:#FFF;
	font-weight:bold;
	line-height:3;
	text-align:left;
}
#register table td
{
	width:70%;
	line-height:3;
}
#register input[type=text], #register input[type=password], #register input[type=email]
{
	height:30px;
	border:none;
	width:100%;
	color:#01998e;
	padding:5px;
	border-radius:5px;
	font-weight:bold;
	font-size:1.2rem;
}
#register textarea
{
		border:none;
	width:100%;
	color:#01998e;
	padding:5px;
	border-radius:5px;
	font-weight:bold;
	font-size:1.2rem;

}
#register input[type=submit]
{
	width:auto;
	border:none;
	padding:10px 15px;
	border-radius:10px;
	background:#FFF;
	box-shadow:1px 1px 5px #666666;
	color:#01998e;
	font-weight:bold;
	font-size:1rem;
	cursor:pointer;
}
.boy, .us
{
	float:left;
	width:30%;
	padding-top:17px;
	height:450px;
	margin-top:40px;
}
.top_pad
{
	padding-top:40px;
}
.boy img
{
	height:100%;
}
.us h2
{
	color:#01998e;
}
.us ul
{
	list-style:none;
	padding:0;
	margin:0;
}
.us ul li {
    line-height: 2.5;
    font-size: 1.1rem;
    color: #01998e;
    padding-left: 23px;
	position:relative;
}
.us .fa {
    padding-right: 7px;
    position: absolute;
    left: -9px;
    top: 10px;
}
.error
{
	margin:0;
	padding-left:20px;
	text-align:left !important;
	color:#D00 !important;
}
.smily
{
	text-align:center;
	width:50%;
	height:auto;
	float:left;
	margin:20px 0;
}
.smily h1, .smily h2
{
color:#01998e;
font-size:3rem;
margin-bottom:0;
}
.smily h2
{
	font-size:2.5rem;
	margin:0 auto 20px;
	padding:0 20px;
}
.pass
{
	text-align:center !important;
	color:#01998e !important;
	font-size:15rem !important;
}
.fail
{
	text-align:center !important;
	color:#D00 !important;
	font-size:15rem;
}
.col
{
		color:#D00 !important;

}
.mail_error
{
	margin:0;
	padding-top:10px;
	text-align:center;
	color:#D00 !important;
	
}
.no_error
{
	margin:0;
	color:#090 !important;
	text-align:center;
	padding-top:10px;
}
/* Test area */

.group
{
	width:100% !important;
	padding:20px 0;
}
.group table
{
	margin:auto;
	width:95%;
}
.group table td
{
	width:16.666%;
	text-align:right;
	line-height:3;
}
.info_list
{
	float:left;
	height:100%;
	width:70%;
}
.info_img
{
	float:right;
	width:30%;
	height:auto;
	text-align:right;
}
.no_display
{
	display:none;
}
.next_group,.next_group1
{
	margin:0 0 0 45%;
	float:left;
}
.no_margin_top
{
	margin-top:0 !important;
}
.margin_left
{
	margin-left:15%;
}
.margin_top
{
	margin-top:9% !important;
}
.final_test
{
	width:80%;
	float:left;
	height:auto;
}
.final_test h3
{
	color:#777;
	text-align:justify;
}
.final_test h3 a
{
	color:#00A99D;
}
.admin_levels
{
	float:left;
	width:100%;
	height:auto;
	margin-bottom:25px;
}
.admin_levels table
{
	width:100%;
	height:auto;
}
.admin_levels td
{
	width:33%;
	text-align:center;
}
.wrong_ans_btn
{
	width:40%;
	float:left;
	height:auto;
	text-align:center;
	padding-top:30px;
}
.wrong_ans
{
	width:90%;
	float:left;
	height:auto;
	margin:0 0 20px 20px;
	padding:20px;
	display:none;
	background:rgba(1,153,142,0.6);
	border-radius:15px;
	box-shadow:0 0 5px #666666;

}
.wrong_ans li
{
	float:left;
	width:23%;
	line-height:2;
	color:#ffffff;
	margin-left:8%;
	font-size:1.3rem;
	font-weight:bold;
}
.wrong_ans_level3 li
{
	width:44%;
	margin-left:3%;
}
.wrong_ans strong
{
	font-size:1.3rem;
	font-weight:bold;
	color:#DD0000;
}
.addthis_floating_style
{
	border-radius:0px;
	background:none;
	top:30% !important;
	width:60px !important;	
}
.que,.que1
{
	float:left;
	height:auto;
	width:10%;
	margin-bottom:20px;
	text-align:right;
}
.que1
{
	width:25%;
}
.field
{
	float:left;
	width:23%;
	margin-bottom:20px;
	height:auto;
}

.practice_que
{
	width:50%;
	float:left;
	height:auto;
}
.practice_ans,.field1
{
	width:50%;
	float:left;
	height:auto;
}
.field1
{
	width:25%;
	margin-bottom:20px;
	text-align:center;
}
.info .fa {
    padding-right: 8px;
    top: 2px;
    position: relative;
}
@-ms-viewport
{
	width:device-width;
}
@viewport
{
	width:device-width;
}
.full {
    float: left;
    width: 100%;
}
h2#name {
    width: 100%;
    float: none;
    margin: 0 0px 20px 0;
    padding: 0;
	line-height:4rem;
}
.grey-box {
    background: #ddd;
    text-align: center;
}
.grey-box span {
    margin: 0 20px 20px;
    display: inline-block;
    font-size: 23px;
}
.btn.btn-1 {
    margin: 0;
}
.point-area .fa {
    position: absolute;
    left: 0;
}
@media screen and (max-width : 1024px)
{
.head, #content,.foot, .info , .bottom-info
{
	width:90%;
	margin:auto;
	height:auto;
}

#name
{
	width:30%;
}
.tricks_head, .tricks
{
	width:90%;
	margin:0px 5% 20px;
}
.final_test
{
	margin-left:50px;
	width:70%;
}
.boy
{
	width:28%;
}
}
@media screen and (max-width : 768px)
{
.head, #content,.foot, .info , .bottom-info
{
	width:90%;
	margin:auto;
	height:auto;
}
#logo
{
	width:30%;
	text-align:right;
	padding-top:25px;
}
.smily h1, .smily h2
{
	font-size:2rem;
}
.fail
{
	font-size:10rem;
}
.wrong_ans_btn {
    float: left;
    height: auto;
    margin-bottom: 50px;
    padding-top: 30px;
    text-align: center;
    width: 100%;
}
#name
{
	width:60%;
	font-size:4.5rem;
	text-align:center;

}
#login,.division
{
	width:100% !important;
}
.simple_login
{
	display:block;
}
.mob_login, .info_img
{
	display:none;
}
.info_list
{
	width:100%;
}

.tricks_head
{
	height:auto;
}
.final_test
{
	width:99%;
	margin:0;
	font-size:0.9rem;
}
.mar_left
{
	margin-left:34% !important;
}
.btn
{
	margin-top:0;
}
.test_button
{
	width:30%;
	margin-left:32%;
}
#content2_back
{
	padding-bottom:20px;
}
.image
{
	display:none;
}
.ready_quiz, .for
{
	font-size:50px;
	display:block;
	width:33%;
	float:left;
	padding-top:20px;
}
.text
{
	width:100%;
	padding-left:0;
	margin:0;
}
#login table
{
	width:95%;
	margin-left:5%;
}
.text p
{
	padding:0;
}
.TabbedPanelsContent li
{
	width:100%;
	clear:both;
}
.TabbedPanelsContent ol
{
	margin:0;
}
footer
{
	height:auto;
}
.boy
{
	display:none;
}
.us
{
	width:40%;
}
#register
{
	width:60%;
}
.mar_cen
{
	margin-left:20% !important;
}
footer
{
	height:auto;
	margin-bottom:0px;
	
}
.copyright, .social, .reference
{
	width:100%;
	text-align:center;
	padding-bottom:10px;
}
.wrong_ans li
{
	width:42%;
}
}
@media screen and (max-width: 760px)
{
	.que, .que1
	{
		width:25%;
	}
}
@media screen and (max-width : 640px)
{
.head, #content,.foot, .info, .bottom-info
{
	width:90%;
	margin:auto;
	height:auto;
}
#logo
{
	width:30%;
	text-align:left;
	padding-top:25px;
}
#name
{
	width:60%;
	font-size:4.5rem;
	text-align:center;
}
#login,.division, .practice_que, .practice_ans
{
	width:100% !important;
}
#login table
{
	width:90%;
	margin-left:7%;
}
.simple_login
{
	display:none;
}
.mob_login
{
	display:block;
}

.final_test_head
{
	font-size:40px;
}
.final_test h3
{
	font-size:1rem;
	padding:0 10px;
}
.test_button
{
	width:50%;
	margin-left:22%;
}
.info p, .text p, .bottom-info
{
	font-size:0.95rem;
}
.tricks_head
{
	font-size:1.1rem;
}
.copyright, .social, .reference
{
	width:100%;
	text-align:center;
	padding-bottom:10px;
}
.grid figure img
{
	width:100%;
}
.us
{
	width:100%;
	height:auto;
	padding-left:14% !important;
}
#register
{
	width:100%;
}
.top_pad
{
	padding:0;
}
.no_list
{
	list-style:none;
}

}
@media screen and (max-width:639px)
{
	.smily, #result
	{
		width:100%;
	}
	.smily h1, .smily h2
{
	font-size:23px;
}
.fail
{
	font-size:8rem;
}
.half {
    width: 100%;
}
}
@media screen and (max-width:480px)
{
	
.head, #content,.foot, .info, .bottom-info
{
	width:90%;
	margin:auto;
	height:auto;
}

#logo, #name
{
	width:100%;
	text-align:center;
	margin:0;
	font-size:4rem;
	padding:10px 0 0 0;
}

.wrong_ans li
{
	width:80%;
}
#login
{
	width:100%;
}
#login table
{
	width:95%;
	margin-left:5%;
}
#login td
{
	width:100%;
}
.info p, .bottom-info,
{
	padding:0;
	font-size:0.9rem;
}
.info
{
	padding-bottom:0;
}
.mar_left
{
	margin-left:20% !important;
}
.grid li
{
	padding-left:0 !important;
}
.grid figure img
{
	width:100%;
}
.btn
{
	font-size:1rem;
}
.grid
{
	padding-bottom:0px !important;
}
.ready_quiz, .for
{
	font-size:21px;
	display:block;
	width:auto;
	float:left;
	text-align:center;
	padding-top:20px;
}

.image
{
	display:none;
}
#content_back
{
	display:block;
}
.text
{
	width:100%;
	padding:0;
}
.text
{
	margin:0;
}
.text p
{
padding:0;
font-size:0.9rem;
}
.btn
{
	margin-top:0px;
	font-size:0.9rem;
}
#content2_back
{
	padding-bottom:20px;
}
.grid li
{
	padding:0 !important;
	padding-bottom:20px !important;
}
}
@media screen and (max-width:479px)
{
	.que, .que1, .field
	{
		width:50%;
	}
}
@media screen and (max-width:360px)
{ 
.head, #content,.foot, .info, .bottom-info
{
	width:90%;
	margin:auto;
	height:auto;
}
.center
{
	padding:0;
}
}