@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css');

/************Reset**************/
html, body, div, object, iframe, fieldset { margin: 0; padding: 0; border: 0; } 
table { border-collapse: collapse; border-spacing: 0; }
header, footer, section, article, hgroup, figure { display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
legend { display: none; }
/************End Reset**************/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; margin:0; padding:0; }
body { margin:0; padding:0; font-family: 'Raleway', sans-serif; font-size:14px; line-height:20px; background-color:transparent; color:#333; }
img { border:0; }
.clear{ clear: both; }

header { background:url('../images/icon/overlay.png') repeat left top; position:fixed; top:0; z-index:50; width:100%; height:auto; }
header .logo { float:left; padding: 10px; }
header .social { float:right; padding: 10px; }
header .social ul { margin: 0; padding: 10px; list-style-type: none; }
header .social ul li { display: inline; padding:0 0 0 10px; }

header img { width:75%; } 
header .social ul li img { width:15%;} 

nav { display: block; width:100%; background-color:#414F96; }

article.set-0 { margin: 0; padding: 0; }
article.set-1 { float: left; width: 23.5%; }
article.set-2 { float: left; width: 66%; }
article.set-3 { float: left; width: 32%; }
article.set-4 { float: left; width: 23%; min-height:170px;}
article.set-5 { float: left; width: 100%; }

section { width: auto !important; margin:0 auto !important; max-width:1100px; background-color:#FFF; position:relative; z-index:30; top:-80px; padding:20px; }
section img { width:100%; }
section h1 { font-family:'Raleway', sans-serif; letter-spacing:2px; margin:0; padding:20px 20px 0 20px; font-size:1.8em; font-weight:700; position:relative; }
section h2 { font-family:'Raleway', sans-serif; letter-spacing:2px; margin:0; padding:10px; font-size:1em; font-weight:normal; position:relative; top:-20px; width:70%; }
section h3 { font-family:'Raleway', sans-serif; letter-spacing:2px; margin:0; padding:20px 20px 0 20px; font-size:1em; font-weight:normal; }
section p { margin:0; padding:0 20px 20px 20px; font-size:1em; }
section a:link { font-family:'Raleway','sans-serif'; font-weight:normal; font-size:12px; color:#FFF; text-decoration: none; padding:5px; border-radius: 5px; border: 2px solid #FFF; }
section a:visited { color:#FFF; }
section a:hover { text-decoration: none; }
section a:active { color:#FFF; border-radius: 5px; border: 2px solid #FFF; }
section .box { float:left; color:#FFF; }
section .row, footer .row { width:100%; }
section .box-1 { background-color:#493447; }
section .box-1 h2 { background-color:#BCA0B9; }

section .set-1 a:link { font-family:'Arial','sans-serif'; font-weight:normal; line-height:25px; font-size:1em; color:#FFF; text-decoration: none; border-radius: 0px; border: 0px solid #FFF; }
section .set-1 a:visited { color:#fff; border-radius: 0px;	border: 0px solid #FFF; }
section .set-1 a:hover { text-decoration: underline; }
section .set-1 a:active { color:#fff; }


section .box-2 { background-color:#F76D3C; margin:0 20px 0 20px; }
section .box-2 h2 { background-color:#FCB96B; }
section .box-3 { background-color:#99CB33; margin:0 20px 0 0 }
section .box-3 h2 { background-color:#B1D49C; }
section .box-4 { background-color:#2CA8C2; }
section .box-4 h2 { background-color:#ADB5DA; }
/*section .box-4 { background-color:#2CA8C2; margin:20px 0 0 0; }*/
section .box-44 { background-color:#2CA8C2; margin:20px 0 0 0; }
section .box-5 { background-color:#EEE; margin:20px 0 0 20px; }
section .box-5 aside { display: none; padding: 20px 0 0; border-top: 5px solid #ADB5DA; color:#333; }
section .box-5 input { display: none; }
section .box-5 label { display: inline-block; margin: 0 2px 0 0; padding: 10px 3px; font-size:0.85em; font-weight: 400; text-align: center; color: #FFF; border: 1px solid transparent; background-color:#414F96; }
section .box-5 label:before { font-family: fontawesome; font-weight: normal; margin: 0 3px 0 3px; }
section .box-5 label[for*='1']:before { content: '\f03e'; }
section .box-5 label[for*='2']:before { content: '\f1ea'; }
section .box-5 label[for*='3']:before { content: '\f073'; }
section .box-5 label[for*='4']:before { content: '\f019'; }
section .box-5 label:hover { color: #ADB5DA; cursor: pointer; }
section .box-5 input:checked + label { color: #FFF; background-color:#ADB5DA; }
section .box-5 img { width:95%; }
section .box-5 div { padding:10px; text-align:center; }
section .box-5 ul { list-style-type:square; }
section .box-5 li { margin: 10px 0 0 0; }
section .box-5 a:link { font-family:'Raleway','sans-serif'; font-weight:normal; line-height:25px; font-size:1em; color:#333; text-decoration: none; border-radius: 0px;	border: 0px solid #FFF; }
section .box-5 a:visited { color:#333; border-radius: 0px;	border: 0px solid #FFF; }
section .box-5 a:hover { text-decoration: underline; }
section .box-5 a:active { color:#333; }
section .box-6{ background-color:#EEE; margin:20px 0 0 0; }
section .box-6 h3{ color:#2CA8C2; line-height:30px; }
section .box-6 h3:before { content: ""; display: block; background: url('../images/icon/newsletter.png') no-repeat; width: 40px; height: 30px; float: left; }
section .box-7 { background-color:#F15F74; margin:20px 0 0 20px; }
section .box-7 h3 { color:#660000; line-height:24px; }
section .box-7 h3:before { content: ""; display: block; background: url('../images/icon/complaint.png') no-repeat; width: 34px; height: 30px; float: left; }
section .breadcrumb { width:100%; background-color:#2CA8C2; }
section .breadcrumb h1 { color:#FFF; font-family:'Raleway', sans-serif; letter-spacing:2px; margin:0; padding: 20px; font-size:1.5em; font-weight:normal; }
section .container { width:100%; }
section .container p { margin:0; padding:0 20px 0 20px; font-size:1em; text-align:justify; }
section .container h2 { color:#2CA8C2; font-family:'Raleway', sans-serif; letter-spacing:2px; margin:0; padding: 30px 0 0 20px; font-size:1.3em; font-weight:normal; }
section span{ color:#2CA8C2; font-family:'Raleway', sans-serif; letter-spacing:2px; margin:0; padding:0; font-size:1em; font-weight:normal; }
section .container a:link, section .container a:link { font-family:'Raleway','sans-serif'; font-weight:normal; line-height:1em; font-size:1em; color:#0000FF; text-decoration: none; border-radius: 0px; border: 0px solid #FFF; padding-left:0; }
section .container a:visited { color:#0000FF; border-radius: 0px; border: 0px solid #FFF; }
section .container a:hover { text-decoration: underline; }
section .container a:active { color:#0000FF; } 
section .container .content-left { width:70%; float:left; }
section .container .content-right { width:30%; float:left; }
section .set-6 { float: left; width: 24%;}

/*footer { background-color:#414F96; position:relative; z-index:25; top:-150px; padding-top:100px; }*/
footer { background-color:#414F96; position:relative; z-index:25; top:0px; padding-top:20px; }
footer .logo, footer .social{ width:100%; text-align:center; }
footer .social ul{ margin: 0; padding: 10px; list-style-type: none; }
footer .social ul li { display: inline; padding:0 0 0 10px; }
footer .nav { float:left; padding-left:20px; }
footer h1 { font-family:'Raleway', sans-serif; letter-spacing:2px; margin:0; padding:0 0 20px 0; font-size:1em; font-weight:normal; color:#ACB4D9; }
footer .nav a:link { font-family:'Raleway','sans-serif'; font-weight:normal; font-size:1em; color:#FFF; text-decoration: none; line-height:25px; }
footer .nav a:visited { color:#FFF; }
footer .nav a:hover { text-decoration: none; }
footer .nav a:active { color:#FFF; }
footer .copyright{ padding-top: 20px; padding-bottom: 20px; font-size:0.9em; color:#ACB4D9; text-align:center; }
footer .copyright a:link { font-family:'Raleway','sans-serif'; font-weight:normal; font-size:1em; color:#FFF; text-decoration: none; }
footer .copyright a:visited { color:#FFF; }
footer .copyright a:hover { text-decoration: none; }
footer .copyright a:active { color:#FFF; }

#slider{ width:100%; height:400px; z-index:10; }

#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; }

#myform { box-sizing: border-box; padding:0 20px 0 20px; } 
#myform .txtinput {  display: block; font-family: 'Raleway', sans-serif; border-style: solid; border-width: 1px; border-color: #dedede; margin-bottom: 20px; font-size: 1em; padding: 10px 0 10px 0; width: 32%; color: #777; float:left; margin-right:1%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;  transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; } 
#myform .txtinput:focus {  color: #333; border-color: rgba(41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6); outline: 0 none; }
#submitbtn { float:left; cursor: pointer; font-weight:600; }

table { border: 10px solid #5FC3C5; width: 100%; margin:0; padding:0; border-collapse: collapse; border-spacing: 0; }
tr:nth-child(odd) {background:#A9DFF7; color:#000;}
table tr { border: 1px solid #ddd; padding: 5px; }
table th, table td { padding: 10px; text-align: left; }
table th { text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }

@media screen and (max-width: 1000px) {
table { border: 0; }
table thead { display: none; }
table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; }
table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; }
table td:last-child { border-bottom: 0; }
table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; }
table tr.header { display:none; }
}

@media only screen and (max-width:320px){
/*body::before{ content: "phones - media query (0 > 320) fired"; font-weight: bold; display: block; text-align: center; background: rgba(255,255,0, 0.9); position: absolute; top: 0; left: 0; right: 0; z-index: 99; }*/ 
article.set-1, article.set-2, article.set-3, article.set-4 { float: left; width: 100%; }
#slider { height:300px; } 
header .logo { width:100%; text-align:center; padding:10px; } 
header img { width:60%; } 
header .social { display:none; } 
section .box-2 { margin:20px 0 20px 0; } 
section .box-3 { margin:0 0 20px 0; } 
section .box-5, section .box-7{ margin:20px 0 0 0; } 
section .box-5 label { 	font-size: 0; } 
section .box-5 label:before { margin: 0; font-size: 18px; padding:10px; } 
#myform .txtinput { 	width:100%; } 
footer h1 { padding:20px 0 20px 0; }
footer .set-2{ display:none;}
section .set-6 { float: left; width: 100%; }
} 

@media only screen and (min-width:321px) and (max-width:480px){
/*body::before{ content: "mobile phones - media query (321 > 480) fired"; font-weight: bold; display: block; text-align: center; background: rgba(255,255,0, 0.9); position: absolute; top: 0; left: 0; right: 0; z-index: 99; }*/ 
article.set-1, article.set-2, article.set-3 { float: left; width: 100%; }
article.set-4 { float: left; width: 50%; }
#slider { height:400px; } 
header .logo, header .social { width:100%; padding:5px; float:left; text-align:center; } 
header img { width:50%; } 
header .social ul li img { width:10%; 	padding:0px; } 
section .box-2{ margin:20px 0 20px 0; } 
section .box-3 { margin:0 0 20px 0; } 
section .box-5, section .box-7{ margin:20px 0 0 0; } 
section .box-5 label { font-size: 0; } 
section .box-5 label:before { margin: 0; font-size: 18px; padding:10px; } 
#myform .txtinput { width:100%; } 
footer h1 { padding:20px 0 20px 0; }
footer .set-2{ display:none;}
section .set-6 { float: left; width: 100%; }
}

@media only screen and (min-width:481px) and (max-width:768px){
/*body::before{ content: "smart phone - media query (481 > 768) fired"; font-weight: bold; display: block; text-align: center; background: rgba(255,255,0, 0.9); position: absolute; top: 0; left: 0; right: 0; z-index: 99; }*/ 
article.set-1, article.set-2, article.set-3 { float: left; width: 100%; }
article.set-4 { float: left; width: 50%; }
#slider{ height:500px; } 
header .logo{ width:47%; padding:5px; float:left; } 
header .social{ width:47%; padding:5px; float:right; text-align:right; } 
header img { width:75%; } 
header .social ul li img { width:15%; 	padding:0px; } 
section .box-2 { margin:20px 0 20px 0; } 
section .box-3 { margin:0 0 20px 0; } 
section .box-5, section .box-7 { margin:20px 0 0 0; } 
#myform .txtinput { width:100%; } 
footer h1 { padding:20px 0 20px 0; }
footer .set-2{ display:none;}
section .set-6 { float: left; width: 50%; }
}

@media only screen and (min-width:769px) and (max-width:1100px){
/*body::before{ content: "tablet to some desktop - media query (769 > 1224) fired"; font-weight: bold; display: block; text-align: center; background: rgba(255,255,0, 0.9); position: absolute; top: 0; left: 0; right: 0; z-index: 99; }*/ 
article.set-1 { float: left; width: 49%; }
article.set-2 { float: left; width: 65%; }
article.set-3 { float: left; width: 32%; }
article.set-4 { float: left; width: 23%; }
section .box-1 {margin:0 0 10px 0; }
section .box-2 { background-color:#F76D3C; margin:0 0 10px 10px; }
section .box-3 { background-color:#99CB33; margin:0 10px 0 0; }
section .box-5 label { font-size: 0; } 
section .box-5 label:before { margin: 0; font-size: 18px; padding:10px; } 
footer h1 { padding:20px 0 20px 0; }
}