/* ==== Google font ==== */
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400';
@import 'https://fonts.googleapis.com/css?family=Oswald';
/* ===================================
1. General
==================================== */
*{margin:0; padding:0;}

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

input {padding-left:20px;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 16px; line-height: 26px; background-color:#fff;}

body, button, input, select, textarea {
	font-family:'Roboto', Arial, sans-serif;
	font-weight:400;
	line-height:1.6em;
	color:#666666;
    margin: 0;
}

a {
	text-decoration:none;
}

a:active {
	outline:0;
}

li {
	list-style:none;
}

img,button {
	border:none;
}

.clearfix::after {
	content:"";
	display:block;
	visibility:hidden;
	height:0;
	clear:both;
}

h1,h2, h3, h4, h5, h6 {
	font-family:'Oswald', Arial, sans-serif;
	font-weight:400;
	line-height:1.1em;
	color:#333;
}

.container {
	display:block;
	max-width:960px;
	margin:0 auto;
}

.container-fluid {
	display:block;
	width:100%;
}

.relative {position:relative;}

input:focus{border:solid 1px #3f8026; outline:solid 1px #3f8026; transition:0.45s;}
::selection {background:#127ec3; color:#fff;}
img::selection,button::selection,a::selection {background:transparent;}

.pull {float:left;}
.push {float:right;}

.new-line {display:block;}
.primary-color {color:#099602;}
.highlight {color:#00aeef; font-family:'Oswald', Arial, sans-serif;}

section {padding:80px 20px;}

/* ===================================
2. Header Section
==================================== */
header { text-align:center;border-bottom:solid 1px #999; padding:20px 0;}
header h1 img {vertical-align:middle;}
header ul {padding-top:10px; margin:0 auto; display:none;}

header ul li a {padding:10px 0; display:block; background:#fff; color:#4c4c4c;}
header ul li a:hover {background:#00aeef; color:#fff;}

a.toggle-menu {position:absolute; top:27px; right:20px; cursor:pointer; opacity:0.8;}
a.toggle-menu:hover {opacity:1;}


/* ===================================
3. Billboard Section
==================================== */
#billboard {background:url(../images/billboard_bg.jpg) #2c4047; padding:10% 0; position:relative;}
#billboard img {margin:0 auto; display:block;}
#billboard .banner-content {text-align:center;}
#billboard h2 {font-family:'Oswald', Arial, sans-serif; font-size:42px; color:#fff; line-height:56px;}
#billboard h2 span { color:#f56462;}
#billboard p {color:#fff; font-size:24px; font-weight:300; margin:10px 0 30px;}
#billboard .banner-content a {background:#f56462; color:#fff; border-radius:4px; font-size:22px; padding:10px 30px; transition:0.48s ease;}
#billboard .banner-content a:hover {background:#fff; color:#f56462;}

#billboard .login { position:absolute; top:0; right:20%; background:#686868; padding:7px 15px; border-radius:0 0 5px 5px;}
#billboard .login p {font-size:14px; margin:0;}
#billboard .login p a{padding:3px 15px; color:#fff; background-color:#00aeef; cursor:pointer;opacity:0.9;}
#billboard .login p a:hover{ opacity:1;}

/* ===================================
4. Testmonials Section
==================================== */
#testimonials {background:#00aeef; height:auto; padding:20px 0;}
#testimonials .container {padding:10% 0;}
#testimonials ul#lightSlider {padding-bottom:0 !important;}
#testimonials ul#lightSlider li {font-size:18px; font-weight:300; color:#fff; text-align:center; margin-top:25px;}

#testimonials blockquote{padding:0 10%;}
cite { display:inline;font-size:20px; font-family:'Oswald', Arial, sans-serif; font-style:normal;}

.lSSlideOuter .lSPager.lSpg > li a {background:none; border:solid 1px #fff;}
.lSSlideOuter .lSPager.lSpg > li.active a {background:#fff;}

/* ===================================
5. What We Do Section
==================================== */
section h2.title{font-size:48px; position:relative; margin:0 auto 80px; text-align:center;}
section h2.title span {color:#00aeef;}
section h2.title img {display:block; margin:20px auto 0;}

#what-we-do article {border:solid 1px #00aeef; position:relative; padding:50px 30px 40px; margin-top:60px;}
#what-we-do article h3 {font-size:30px; color:#00aeef; position:absolute; top:-23px; padding:0 10px; margin-left:-10px; background:#fff;}
#what-we-do article h3 img {margin-left:10px;}
#what-we-do article p { margin-bottom:20px;}
#what-we-do article button {padding:6px 30px; color:#fff; width:100%; background:#00aeef; font-size:24px; font-weight:300; cursor:pointer; transition:0.35s ease-in-out; margin-bottom:10px;}
#what-we-do article button:hover {background:#666666; color:#fff;}
#what-we-do article a.btn-signup {padding:12px 30px; color:#fff; text-align:center; display:block; font-size:24px; font-weight:300; transition:0.35s ease-in-out; margin-bottom:10px;background:#f56462;}
#what-we-do article a.btn-signup:hover {background:#666666; color:#fff;}

#model{padding:0;}
#model .model-body{ display:none; position:fixed; width:100%; height:100%; background:#000; opacity:0.7; top:0; left:0; z-index:99;}
#model .products {display:none; overflow:auto; padding:3%; position:fixed; z-index:100; top:15%; left:20%; width:60%; max-height:60%; min-height:30%; min-width:30%; background:#fff; }
#model .products h3 { color:#333; font-size:30px; margin-bottom:30px; color:#00aeef;}
#model .products p {margin-bottom:20px;}
#model .products img.pop_close{position:absolute; top:20px; right:20px; cursor:pointer;}
#model .products a {background:#f56462; color:#fff; border-radius:4px; font-size:16px; padding:5px 10px; transition:0.48s ease;}
#model .products a:hover {background:#333; color:#fff;}

/* ===================================
6. About Us Section
==================================== */
#about-us {background:#f4f4f4; border-bottom:solid 1px #ccc; border-top:solid 1px #ccc; text-align:center;}
#about-us ul.profile li {display:inline-block; text-align:center; width:100%; min-width:120px; margin-bottom:30px;}
#about-us ul.profile li h4{color:#00aeef;}

#about-us .content {padding:20px; text-align:justify;}
#about-us .content p{font-size:20px; font-weight:300; line-height:30px; margin-bottom:20px;}

#about-us h3{font-size:28px; color:#8a8a8a; line-height:1.8em; text-align:center;}

/* ===================================
7. News Section
==================================== */
#news {position:relative; overflow:hidden;}
#news .toggle-btn{position:absolute; right:-73px; top:20px; transition:0.48s ease;}
#news .toggle-btn:hover{right:0;}

div.fb-feed {float:left; margin-left:calc(50% - 166px); margin-bottom:30px;}
div.rss-feed {float:left; margin-left:calc(50% - 146px); }
#feedControl {margin-top:0; margin-left:auto; margin-right:auto; width:300px; font-size:12px; color:#9CADD0; border:solid 1px #ccc;}
#feedControl .gfg-title {width:92%; padding:10px 4%; background:#00aeef;}
#feedControl .gfg-title a{ color:#fff; font-size:18px; font-family:'Oswald', Arial, sans-serif;}
#feedControl .gfg-entry {padding:5%;}
#feedControl .gfg-listentry {padding:10px 7%; background:#333; transition:0.48s ease;}
#feedControl .gfg-listentry:hover {background:orange;}
#feedControl .gfg-listentry a { color:#fff;}
#feedControl .gfg-listentry a:before {content:'»  '}


/* ===================================
8. Contact Section
==================================== */
#contact {background:#f4f4f4; border-bottom:solid 1px #ccc; border-top:solid 1px #ccc;}
#contact h4 {font-size:24px; color:#00aeef; margin-bottom:10px; margin-top:20px;}
#contact .column {width:96%;}

#contact .col-01 form {width:100%;}
#contact .col-01 form label{display:block; font-size:18px; color:#999;}
#contact .col-01 form input[type=text]{display:block; width:100%; height:40px; margin-bottom:30px; border:solid 1px #ccc; font-size:18px;}
#contact .col-01 form textarea{display:block; width:100%; height:190px; margin-bottom:30px; padding-left:20px; padding-top:20px; border:solid 1px #ccc; font-size:18px; font-weight:300;}
#contact .col-01 form input[type=submit] {height:50px; padding:0; background:#00aeef; color:#fff; border:none; border-radius:5px; width:65%; font-size:18px; font-weight:300; cursor:pointer; transition:0.48s ease;}
#contact .col-01 form input[type=reset]{height:50px; padding:0; background:#333; color:#fff; border:none; border-radius:5px; width:30%; margin-left:10px; font-size:18px; font-weight:300; cursor:pointer; transition:0.48s ease;}
#contact .col-01 form input[type=submit]:hover {opacity:0.8;}
#contact .col-01 form input[type=reset]:hover {opacity:0.8;}

#contact .col-02 {padding-top:40px; margin-top:40px; border-top:solid 1px #ccc;}
#contact .col-02 p{font-size:18px; line-height:26px;}
#contact .col-02 ul {margin:40px 0 20px;}
#contact .col-02 ul li {margin-bottom:10px;}
#contact .col-02 ul li img {margin-right:10px;}
#contact .col-02 ul li:first-child{font-size:18px; color:#333; font-weight:700; font-family:'Roboto', Arial, sans-serif;}
#contact .col-02 ul li:last-child{font-size:18px; font-weight:400;}
#contact .col-02 .map {border:solid 1px #ccc;}


/* ===================================
9. Footer
==================================== */
footer {text-align:center; background:#333; color:#fff; padding:20px 0; font-size:18px; font-weight:300;}

@media screen and (min-width:320px) and (min-device-width:320px){
#about-us ul.profile li {width:48%;}
#about-us ul.profile li:last-child {width:100%;}
#testimonials {height:308px;}
}

@media screen and (min-width:480px) and (min-device-width:480px){
#about-us ul.profile li {width:32%;}
#testimonials {height:208px;}
#testimonials .container {padding:1% 0;}
}

@media screen and (min-width:590px) and (min-device-width:590px){
#about-us ul.profile li {width:24%;}
#about-us ul.profile li:nth-child(5) {margin-left:23.5%;}
#about-us ul.profile li:nth-child(6) {margin-right:23.5%;}
#what-we-do article button { width:initial;}
#what-we-do article a.btn-signup {display:inline;}
#testimonials {height:183px;}
}

@media screen and (min-width:760px) and (min-device-width:760px){
#about-us ul.profile li {width:17%;}
#about-us ul.profile li:first-child {margin-left:16%;}
#about-us ul.profile li:nth-child(5) {margin-left:33.5%;}
#about-us .content {columns:2 30px; -moz-column-count:2; -moz-column-gap:30px; -webkit-columns:2 30px;}

#news div.fb-feed {margin-left:calc(50% - 321px);}
#news div.rss-feed {margin-left:20px;}
#contact .column {width:46%; float:left;}
#contact .col-01{margin-right:4%;}
#contact .col-02{margin-left:4%;padding-top:0; margin-top:0; border-top:none;}
#testimonials {height:158px;}
}


@media screen and (min-width:867px) and (min-device-width:867px){
#billboard img {float: left; margin-right: 30px; margin-left: 12%; margin-top: -4%; display:inline;}
#billboard .banner-content {padding-top:60px; text-align:left;}
#testimonials {height:161px;}
}

@media screen and (min-width:900px) and (min-device-width:900px){
a.toggle-menu {display:none;}
header h1 {float:left;}
header ul {float:right; display:block;}
header ul li{float:left;}

header ul li a {line-height:1px; display:inline; padding:31px 10px; background:#fff; color:#4c4c4c; transition:0.45s ease-in-out;}
header ul li a:hover {background:#00aeef; color:#fff;}
}

@media screen and (min-width:960px) and (min-device-width:960px){

#what-we-do article {width:42%; float:left;}
#what-we-do article:nth-child(2n+1) {margin-left:2%;}
#what-we-do article:last-child{height:250px;}
#what-we-do article:nth-child(2){height:255px;}

#about-us ul.profile li {width:13.8%;}
#about-us ul.profile li:first-child {margin-left:0;}
#about-us ul.profile li:nth-child(5) {margin-left:0;}
#about-us ul.profile li:nth-child(6) {margin-right:0;}
#about-us ul.profile li:last-child {width:13.8%;}


}