@charset "utf-8";

*{
	margin:0px;
	padding:0px;	
}
body{
	/* font-family:"Calibri",Arial,sans-serif; */
	font-family:"Open Sans",Arial,sans-serif;
	font-size:13px;
	background-color:#E8E8E8;
}

main{
	float:left;
	width:1366px;
	width:100%;
	/* max-width:100%; */
	height:768px;
	/* border:1px solid orange; */
}



/* CONTENT
==================== */

section{
	float:left;
	width:100%;
	height:auto;
	/* height:700px; */
	/* background-image:url("../../images/bg.jpg"); */
	/* background-attachment:fixed; */
	/* border:1px solid orange; */	
}
.main_rect{
	margin:2% auto 2%;
	width:900px;
	height:auto;
	/* height:1970px; */
	border-radius:5px;
	background-color:#ffffff;
	box-shadow: 0px 0px 5px #505050;
	-webkit-box-shadow: 0px 0px 5px #505050;
	-moz-box-shadow: 0px 0px 5px #505050;
    
	/* border:1px solid blue; */
}
/* HEADER
==================== */
header{
	float:left;
	width:100%;
	height:70px;
	/* background-color:#006699; */
	/* border:1px solid green; */
}
#flatworld_logo{
	float:left;
	margin:1% 0% 0% 5%;
	width:170px;
	height:auto;
}
#q_logo{
	float:right;
	margin:1% 5% 0% 0%;
	width:230px;
	/* width:170px; */
	height:auto;
}

#heading{
	float:left;
	margin:0%;
	padding:2% 0% 0%;
	width:100%;
	height:auto;
	/* border:1px dashed orange; */
}
#heading h3{
	margin:0% auto;
	text-align:center;
	color:#006699;
	/* color:#ffffff; */
	font-size:20px;
	font-weight:normal;	
	width:80%;
}
#heading p{
	margin:1% auto 0%;
	text-align:center;
	color:#000000;
	font-size:16px;
	font-style:italic;
	width:80%;
}

#content{
	clear:both;
	margin:0% auto;
	padding:2% 0% 5%;
	width:90%;
	height:auto;
	/* border:1px dashed blue;	 */
}
#content h5{
	margin:3% 0% 0%;
	padding:0.5% 0.5%;
	font-size:1.2em;
    color:#333333;
	font-weight:500;
	width:300px;
	
	background: #d1d1d1; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, #d1d1d1 , #ffffff); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #d1d1d1, #ffffff); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #d1d1d1, #ffffff); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #d1d1d1 , #ffffff); /* Standard syntax */
}
#content h4{
	margin:3% 0% 0%;
	padding:0.5% 0.5%;
	font-size:1.3em;
    color:#333333;
	font-weight:500;
	width:300px;
	
	background: #d1d1d1; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, orange, #ffffff); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, orange, #ffffff); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, orange, #ffffff); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, orange, #ffffff); /* Standard syntax */
}
#content h6{
	margin:3% 0% 0%;
	padding:0.5% 0.5%;
	font-size:1.3em;
    color:#006699;
	font-weight:400;
	width:100%;	
}
#content p{
	margin:2% 0% 0%;
	font-size:1.2em;
    color:#474747;
    /* color:#3d3d3d; */
    line-height:1.5em;
}
#content strong{
	margin:2% 0% 1%;
	font-size:1em;
    color:#282828;
	font-weight:500;
	border-bottom:1px solid #666666;
}
#content b{
	margin:2% 0% 1%;
	font-size:0.95em;
    color:#1e1e1e;
    /* color:#282828; */
	font-weight:500;
}








/* BackToTop button css */
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    /*background-color:#3498db;*/
    background-color:#ffffff;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px;
    
    box-shadow: 0px 1px 2px #000000;
	-webkit-box-shadow: 0px 1px 2px #000000;
	-moz-box-shadow: 0px 1px 2px #000000;
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#993300;
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

/* FOOTER
==================== */
footer{
	float:left;
	width:100%;
	height:60px;
	background-color:#006699;
}
footer p{
	padding:1.3% 1%;
	color:#ffffff;
	font-size:15px;
	text-align:center;
	
}


/* RESPONSIVE DESIGIN
======================== */

@media only screen and (max-width:320px){
main{
	float:left;
	/* width:1366px; */
	max-width:100%;
	height:auto;
	/* border:1px solid orange; */
}
section{
	float:left;
	width:100%;
	height:auto;	
	/* border:1px solid orange; */	
}	
.main_rect{
	margin:10% auto;
	width:95%;
	height:auto;
	/* border:1px solid blue; */
}
/* HEADER
==================== */
header{
	width:100%;
	height:auto;	
	/* border:1px dashed yellow; */
	margin:0% 0% 3%;
}
#flatworld_logo{
	float:left;	
	margin:5% 0% 0% 15%;
}
#q_logo{
	float:left;
	margin:1% 0% 0% 15%;
}
#heading{
	float:left;
	margin:0%;
	padding:2% 0% 0%;
	width:100%;
	height:auto;
	/* border:1px dashed orange; */
}
#heading h3{
	text-align:left;	
	font-size:18px;
	width:85%;
}
#heading p{
	text-align:left;	
}
#content{
	clear:both;
	margin:0% auto;
	padding:2% 0% 5%;
	width:90%;
	height:auto;
	/* border:1px dashed blue;	 */
}
#content p{
	margin:8% 0% 0%;
	font-size:1.1em;
}	
#content b{
	margin:2% 0% 1%;
	font-size:0.95em;
    color:#1e1e1e;
    /* color:#282828; */
	font-weight:500;
}
#content h5{
	margin:5% 0% 0%;
	width:100%;	
}
#content h4{
	margin:5% 0% 0%;	
	width:100%;	
}
/* CONTENT
==================== */

/* FOOTER
==================== */
footer{
	height:auto;	
	/* height:40px;	 */
}
footer p{
	margin: 1% auto;
	padding:1.3% 3%;
	color:#ffffff;
	text-align:center;
	font-size: 1em;
}
}

@media only screen and (min-width:321px) and (max-width:360px){
main{
	float:left;
	/* width:1366px; */
	max-width:100%;
	height:auto;
	/* border:1px solid orange; */
}
section{
	float:left;
	width:100%;
	height:auto;	
	/* border:1px solid orange; */	
}	
.main_rect{
	margin:10% auto;
	width:95%;
	height:auto;
	/* border:1px solid blue; */
}
/* HEADER
==================== */
header{
	width:100%;
	height:auto;	
	/* border:1px dashed yellow; */
	margin:0% 0% 3%;
}
#flatworld_logo{
	float:left;	
	margin:5% 0% 0% 15%;
}
#q_logo{
	float:left;
	margin:1% 0% 0% 15%;
}
#heading{
	float:left;
	margin:0%;
	padding:2% 0% 0%;
	width:100%;
	height:auto;
	/* border:1px dashed orange; */
}
#heading h3{
	text-align:left;	
	font-size:18px;
	width:85%;
}
#heading p{
	text-align:left;	
}
#content{
	clear:both;
	margin:0% auto;
	padding:2% 0% 5%;
	width:90%;
	height:auto;
	/* border:1px dashed blue;	 */
}
#content p{
	margin:8% 0% 0%;
	font-size:1.1em;
}	
#content b{
	margin:2% 0% 1%;
	font-size:0.95em;
    color:#1e1e1e;
    /* color:#282828; */
	font-weight:500;
}
#content h5{
	margin:5% 0% 0%;
	width:100%;	
}
#content h4{
	margin:5% 0% 0%;	
	width:100%;	
}
/* CONTENT
==================== */

/* FOOTER
==================== */
footer{
	height:auto;	
	/* height:40px;	 */
}
footer p{
	margin: 1% auto;
	padding:1.3% 3%;
	color:#ffffff;
	text-align:center;
	font-size: 1em;
}
}

@media only screen and (min-width:361px) and (max-width:384px){
main{
	float:left;
	/* width:1366px; */
	max-width:100%;
	height:auto;
	/* border:1px solid orange; */
}
section{
	float:left;
	width:100%;
	height:auto;	
	/* border:1px solid orange; */	
}	
.main_rect{
	margin:10% auto;
	width:95%;
	height:auto;
	/* border:1px solid blue; */
}
/* HEADER
==================== */
header{
	width:100%;
	height:auto;	
	/* border:1px dashed yellow; */
	margin:0% 0% 3%;
}
#flatworld_logo{
	float:left;	
	margin:5% 0% 0% 20%;
}
#q_logo{
	float:left;
	margin:1% 0% 0% 20%;
}
#heading{
	float:left;
	margin:0%;
	padding:2% 0% 0%;
	width:100%;
	height:auto;
	/* border:1px dashed orange; */
}
#heading h3{
	text-align:left;	
	font-size:18px;
	width:85%;
}
#heading p{
	text-align:left;	
}
#content{
	clear:both;
	margin:0% auto;
	padding:2% 0% 5%;
	width:90%;
	height:auto;
	/* border:1px dashed blue;	 */
}
#content p{
	margin:8% 0% 0%;
	font-size:1.1em;
}	
#content b{
	margin:2% 0% 1%;
	font-size:0.95em;
    color:#1e1e1e;
    /* color:#282828; */
	font-weight:500;
}
#content h5{
	margin:5% 0% 0%;
	width:100%;	
}
#content h4{
	margin:5% 0% 0%;	
	width:100%;	
}
/* CONTENT
==================== */

/* FOOTER
==================== */
footer{
	height:auto;	
	/* height:40px;	 */
}
footer p{
	margin: 1% auto;
	padding:1.3% 3%;
	color:#ffffff;
	text-align:center;
	font-size: 1em;
}
}

@media only screen and (min-width:385px) and (max-width:600px){
main{
	float:left;
	/* width:1366px; */
	max-width:100%;
	height:auto;
	/* border:1px solid orange; */
}
section{
	float:left;
	width:100%;
	height:auto;	
	/* border:1px solid orange; */	
}	
.main_rect{
	margin:10% auto;
	width:95%;
	height:auto;
	/* border:1px solid blue; */
}
/* HEADER
==================== */
header{
	width:100%;
	height:auto;	
	/* border:1px dashed yellow; */
	margin:0% 0% 3%;
}
#flatworld_logo{
	float:left;
	margin:1% 0% 0% 5%;
	width:170px;
	height:auto;
}
#q_logo{
	float:right;
	margin:1% 5% 0% 0%;
	width:170px;
	height:auto;
}
#heading{
	float:left;
	margin:0%;
	padding:2% 0% 0%;
	width:100%;
	height:auto;
	/* border:1px dashed orange; */
}
#heading h3{
	text-align:left;	
	font-size:18px;
	width:85%;
}
#heading p{
	text-align:left;	
}
#content{
	clear:both;
	margin:0% auto;
	padding:1% 0% 5%;
	width:90%;
	height:auto;
	/* border:1px dashed blue;	 */
}
#content p{
	margin:5% 0% 0%;
	font-size:1.1em;
}	
#content b{
	margin:2% 0% 1%;
	font-size:0.95em;
    color:#1e1e1e;
    /* color:#282828; */
	font-weight:500;
}
#content h5{
	margin:5% 0% 0%;
	width:100%;	
}
#content h4{
	margin:5% 0% 0%;	
	width:100%;	
}
/* CONTENT
==================== */

/* FOOTER
==================== */
footer{
	height:auto;	
	/* height:40px;	 */
}
footer p{
	margin: 1% auto;
	padding:1.3% 3%;
	color:#ffffff;
	text-align:center;
	font-size: 1em;
}
}

@media only screen and (min-width:601px) and (max-width:640px){
main{
	float:left;
	/* width:1366px; */
	max-width:100%;
	height:auto;
	/* border:1px solid orange; */
}
section{
	float:left;
	width:100%;
	height:auto;	
	/* border:1px solid orange; */	
}	
.main_rect{
	margin:10% auto;
	width:95%;
	height:auto;
	/* border:1px solid blue; */
}
/* HEADER
==================== */
header{
	width:100%;
	height:auto;	
	/* border:1px dashed yellow; */
	margin:0% 0% 3%;
}
#flatworld_logo{
	float:left;
	margin:1% 0% 0% 5%;
	width:170px;
	height:auto;
}
#q_logo{
	float:right;
	margin:1% 5% 0% 0%;
	width:170px;
	height:auto;
}
#heading{
	float:left;
	margin:0%;
	padding:2% 0% 0%;
	width:100%;
	height:auto;
	/* border:1px dashed orange; */
}
#heading h3{
	text-align:left;	
	font-size:18px;
	width:85%;
}
#heading p{
	text-align:left;	
}
#content{
	clear:both;
	margin:0% auto;
	padding:1% 0% 5%;
	width:90%;
	height:auto;
	/* border:1px dashed blue;	 */
}
#content p{
	margin:5% 0% 0%;
	font-size:1.1em;
}	
#content b{
	margin:2% 0% 1%;
	font-size:0.95em;
    color:#1e1e1e;
    /* color:#282828; */
	font-weight:500;
}
#content h5{
	margin:5% 0% 0%;
	width:100%;	
}
#content h4{
	margin:5% 0% 0%;	
	width:100%;	
}
/* CONTENT
==================== */

/* FOOTER
==================== */
footer{
	height:auto;	
	/* height:40px;	 */
}
footer p{
	margin: 1% auto;
	padding:1.3% 3%;
	color:#ffffff;
	text-align:center;
	font-size: 1em;
}
}
@media only screen and (min-width:641px) and (max-width:768px){
main{
	float:left;
	/* width:1366px; */
	max-width:100%;
	height:auto;
	/* border:1px solid orange; */
}
section{
	float:left;
	width:100%;
	height:auto;	
	/* border:1px solid orange; */	
}	
.main_rect{
	margin:10% auto;
	width:95%;
	height:auto;
	/* border:1px solid blue; */
}
/* HEADER
==================== */
header{
	width:100%;
	height:auto;	
	/* border:1px dashed yellow; */
	margin:0% 0% 3%;
}
#flatworld_logo{
	float:left;
	margin:1% 0% 0% 5%;
	width:170px;
	height:auto;
}
#q_logo{
	float:right;
	margin:1% 5% 0% 0%;
	width:170px;
	height:auto;
}
#heading{
	float:left;
	margin:0%;
	padding:2% 0% 0%;
	width:100%;
	height:auto;
	/* border:1px dashed orange; */
}
#heading h3{
	text-align:left;	
	font-size:18px;
	width:85%;
}
#heading p{
	text-align:left;	
}
#content{
	clear:both;
	margin:0% auto;
	padding:1% 0% 5%;
	width:90%;
	height:auto;
	/* border:1px dashed blue;	 */
}
#content p{
	margin:5% 0% 0%;
	font-size:1.1em;
}	
#content b{
	margin:2% 0% 1%;
	font-size:0.95em;
    color:#1e1e1e;
    /* color:#282828; */
	font-weight:500;
}
#content h5{
	margin:5% 0% 0%;
	width:100%;	
}
#content h4{
	margin:5% 0% 0%;	
	width:100%;	
}
/* CONTENT
==================== */

/* FOOTER
==================== */
footer{
	height:auto;	
	/* height:40px;	 */
}
footer p{
	margin: 1% auto;
	padding:1.3% 3%;
	color:#ffffff;
	text-align:center;
	font-size: 1em;
}
}

/* Surface Pro 3  */
@media only screen and (min-width:769px) and (max-width:960px){
main{
	float:left;
	/* width:1366px; */
	max-width:100%;
	height:auto;
	/* border:1px solid orange; */
}
section{
	float:left;
	width:100%;
	height:auto;	
	/* border:1px solid orange; */	
}	
.main_rect{
	margin:10% auto;
	width:95%;
	height:auto;
	/* border:1px solid blue; */
}
/* HEADER
==================== */
header{
	width:100%;
	height:auto;	
	/* border:1px dashed yellow; */
	margin:0% 0% 3%;
}
#flatworld_logo{
	float:left;
	margin:1% 0% 0% 5%;
	width:170px;
	height:auto;
}
#q_logo{
	float:right;
	margin:1% 5% 0% 0%;
	width:170px;
	height:auto;
}
#heading{
	float:left;
	margin:0%;
	padding:2% 0% 0%;
	width:100%;
	height:auto;
	/* border:1px dashed orange; */
}
#heading h3{
	text-align:center;	
	font-size:18px;
	width:85%;
}
#heading p{
	text-align:center;	
}
#content{
	clear:both;
	margin:0% auto;
	padding:1% 0% 5%;
	width:90%;
	height:auto;
	/* border:1px dashed blue;	 */
}
#content p{
	margin:5% 0% 0%;
	font-size:1.1em;
}	
#content b{
	margin:2% 0% 1%;
	font-size:0.95em;
    color:#1e1e1e;
    /* color:#282828; */
	font-weight:500;
}
#content h5{
	margin:5% 0% 0%;
	width:100%;	
}
#content h4{
	margin:5% 0% 0%;	
	width:100%;	
}
/* CONTENT
==================== */

/* FOOTER
==================== */
footer{
	height:auto;	
	/* height:40px;	 */
}
footer p{
	margin: 1% auto;
	padding:1.3% 3%;
	color:#ffffff;
	text-align:center;
	font-size: 1em;
}

}



/* iPhone 4 - Landscape */
@media only screen and (max-width:480px) and (orientation:landscape){
main{
	float:left;
	/* width:1366px; */
	max-width:100%;
	height:auto;
	/* border:1px solid orange; */
}
section{
	float:left;
	width:100%;
	height:auto;	
	/* border:1px solid orange; */	
}	
.main_rect{
	margin:10% auto;
	width:95%;
	height:auto;
	/* border:1px solid blue; */
}
/* HEADER
==================== */
header{
	width:100%;
	height:auto;	
	/* border:1px dashed yellow; */
	margin:0% 0% 3%;
}
#flatworld_logo{
	float:left;
	margin:1% 0% 0% 5%;
	width:170px;
	height:auto;
}
#q_logo{
	float:right;
	margin:1% 5% 0% 0%;
	width:170px;
	height:auto;
}
#heading{
	float:left;
	margin:0%;
	padding:2% 0% 0%;
	width:100%;
	height:auto;
	/* border:1px dashed orange; */
}
#heading h3{
	text-align:left;	
	font-size:18px;
	width:85%;
}
#heading p{
	text-align:left;	
}
#content{
	clear:both;
	margin:0% auto;
	padding:1% 0% 5%;
	width:90%;
	height:auto;
	/* border:1px dashed blue;	 */
}
#content p{
	margin:5% 0% 0%;
	font-size:1.1em;
}	
#content b{
	margin:2% 0% 1%;
	font-size:0.95em;
    color:#1e1e1e;
    /* color:#282828; */
	font-weight:500;
}
#content h5{
	margin:5% 0% 0%;
	width:100%;	
}
#content h4{
	margin:5% 0% 0%;	
	width:100%;	
}
/* CONTENT
==================== */

/* FOOTER
==================== */
footer{
	height:auto;	
	/* height:40px;	 */
}
footer p{
	margin: 1% auto;
	padding:1.3% 3%;
	color:#ffffff;
	text-align:center;
	font-size: 1em;
}
	
}