html { font-size: 62.5%;}
body {
font-size: 16px;
font-size: 1.6rem;
width: 100%;
overflow-x: hidden;
}
::selection { background: #000000; color: #ffffff;}
::-moz-selection { background: #000000; color: #ffffff;}
.row {
max-width: 1280px;
width: 100%;
margin: 0 auto;
position: relative;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
*zoom: 1;
justify-content: space-between;
display: flex;
flex-wrap: wrap; 
}
.row:before,
.row:after { content: ""; display: table; }
.row:after { clear: both; }
.row.full { max-width: 100% !important; padding: 0;}
.col, 
.mcol, 
.scol {
position: relative;
display: flex;
justify-content: space-between;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
flex-wrap: wrap;
margin-right: -1px;
}
.inner { width: 100%; display: block;}
.one	{ width: 8.3333%;} .two	{ width: 16.6667%;} .three	{ width: 25%;} .four	{ width: 33.3333%;} .five	{ width: 41.6667%;} .six	{ width: 50%;} .seven	{ width: 58.3333%;} .eight	{ width: 66.6667%;} .nine	{ width: 75%;} .ten	{ width: 83.3333%;} .eleven	{ width: 91.6667%;} .twelve	{ width: 100%;} img { max-width: 100%;} #header-container.new { background: rgba(11,72,104,.2);}
#home #header-container.new { background: rgba(11,72,104,0);}
#header-container.solid.new,
#home #header-container.solid.new { background: rgba(11,72,104,1);}
#header-container.new header {
padding-top: 30px;
transition: all .5s;
}
#header-container.new.solid header { padding-top: 0px;}
#header-container.new header #mobile-nav-trigger {
top: 65px;
transition: all .5s;
}
#header-container.new.solid header #mobile-nav-trigger { top: 30px;}
#header-container.new header {
justify-content: flex-start;
} #home-slider-wrapper,
#hslider,
#hslider .slides,
#hslider ul.slides > li {
height: 700px!important;
}
#homeheader {
position: absolute;
top: 270px;
left: 0;
width: 100%;
text-align: center;
z-index: 20;
}
#homeheader h1 {
font-size: 66px;
font-size: 6.6rem;
line-height: 65px;
font-weight: 200;
margin-bottom: 20px;
color: #ffffff;
text-shadow: 0 2px 10px rgba(0,0,0,.75);
width: 100%;
text-align: center;
display: block;
z-index: 20;
}
#homeheader h2 {
font-size: 34px;
font-size: 3.4rem;
font-weight: 200 !important;
color: #ffffff;
text-shadow: 0 2px 10px rgba(0,0,0,.75);
width: 100%;
text-align: center;
z-index: 20;
}
#hslider {
width: 100%;
overflow: hidden;
position: relative;
display: none;
}
#hslider ul.slides > li {
position: relative;
background-color: #000000;
width: 100%;
background-attachment: fixed;
background-size: 100%;
background-repeat: no-repeat;
background-position: 50% 0;
display: none;
overflow: hidden;
}
#hslider ul.slides > li img {
position: absolute;
top: 0;
left: 0;
opacity: .5;
z-index: 10;
width: 100%;
max-width: 100%;
}
#hslider ul.slides > li h1 {
font-size: 90px;
font-size: 9rem;
color: #ffffff;
font-weight: 200;
text-shadow: 0 2px 10px rgba(0,0,0,.75);
position: absolute;
top: 300px;
left: 0;
width: 100%;
text-align: center;
z-index: 20;
opacity: 0;
}
#hslider ul.slides > li h1 span {
font-weight: 600;
cursor: pointer;
}
#hslider ul.slides > li h1 span a {
color: #ffffff!important;
text-decoration: none!important;
transition: color .5s;
}
#hslider ul.slides > li h1 span:hover a { color: #9ec54b!important;} #home-content-container {
background: #0a83ae!important;
background-image: none!important;
padding: 200px 0;
color: #ffffff;
z-index: 20;
box-shadow: 0px 10px 30px rgba(0,0,0,.75);
}
#home-content-container h1 {
font-size: 60px;
font-size: 6rem;
font-weight: 200;
margin-bottom: 10px;
}
#home-content-container h2 {
font-size: 60px;
font-size: 6rem;
font-weight: 200;
margin-bottom: 10px;
}
#home-content-container p {
font-size: 20px;
font-size: 2rem;
line-height: 35px;
line-height: 3.5rem;
font-weight: 200;
}
#home-content-container a, a:visited {
color: #ffffff;
text-decoration: none;
}
#home-content-container .content { padding-left: 40px;} #recent-work { z-index: 10;}
.home-project {
width: 25%;
position: relative;
display: flex;
overflow: hidden;
}
.home-project img {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: auto;
}
.home-project .info-box {
text-align: center;
color: #ffffff;
transition: all .5s;
display: block;
opacity: 0!important;
padding-left: 30px;
padding-right: 30px;
padding-top: 0;
width: 100%!important;
left: 0!important;
top: 0!important;
}
.home-project .info-box h4 {
font-size: 25px;
font-weight: 200;
}
.home-project .info-box p.work-categories { color: #9ec54b;}
.home-project:hover .info-box { opacity: 1!important;}
.home-project:nth-child(9) { display: none!important;} #testimonials { padding-top: 150px; padding-bottom: 50px;
}
#testimonials .row {
padding-bottom: 30px;
text-align: center;
}
#testimonials .slides {
width: 100%;
}
hr.row.green {
border-top: 1px solid rgba(255,255,255,.2);
padding-bottom: 0!important;
}
#testimonials .test-logo {
width: 50%;
height: auto;
opacity: .8;
margin: 0 25%;
}
#testimonials .test-content {
color: #ffffff;
font-weight: 200;
padding-left: 0;
text-align: center;
width: 100%;
}
#testimonials .row.short .test-content {
font-size: 35px;
font-size: 3.5rem;
}
#testimonials .row .test-content em {
font-size: 25px;
font-size: 2.5rem;
opacity: .5;
}
#testimonials .row.medium .test-content {
font-size: 30px;
font-size: 3rem;
line-height: 45px;
line-height: 4.5rem;
}
#testimonials .row.long .test-content {
font-size: 25px;
font-size: 2.5rem;
line-height: 35px;
line-height: 3.5rem;
}
#testimonials .flex-direction-nav {
z-index: 900;
position: absolute;
top: 50px;
width: 100%;
max-width: 1280px;
left: 50%;
margin-left: -640px;
}
#testimonials .flex-direction-nav li a {
position: absolute;
height: 50px;
width: 50px;
display: block;
text-indent: -9999px;
opacity: .3;
transition: opacity .3s;
-webkit-transition: opacity .3s;
}
#testimonials .flex-direction-nav li a:hover {
opacity: .8;
}
#testimonials .flex-direction-nav li a.flex-prev {
background-image: url(//heliumstudio.com/wp-content/themes/heliumstudio/images/flex-prev.png);
left: -60px;
}
#testimonials .flex-direction-nav li a.flex-next {
background-image: url(//heliumstudio.com/wp-content/themes/heliumstudio/images/flex-next.png);
right: -60px;
} #contact-button {
text-align: center;
padding-bottom: 80px;
}
#footer-container > .row {
padding-top: 70px;
}
#footer-logo {
margin-top: -25px;
max-width: 70px;
}
footer p {
margin-bottom: 15px;
font-size: 13px;
line-height: 18px;
color: #ffffff!important;
text-align: center;
font-weight:100;
} .button {
font-size: 25px;
font-size: 2.5rem;
color: #ffffff;
background: #9ec54b;
text-align: center;
padding: 15px 25px;
border-radius: 5px;
border: 0;
box-shadow: 0 3px 10px rgba(0,0,0,.1);
font-family: 'Lato', Arial, sans-serif;
text-decoration: none;
display: inline-block;
text-shadow: 0 1px 2px rgba(0,0,0,.2);
transition: all .5s;
}
.button:hover {
box-shadow: 0 3px 10px rgba(0,0,0,.4);
background: #80a237;
}
#testimonials .button {
margin-top: 15px;
margin-bottom: 50px;
} #hslider .flex-control-nav {
position: absolute;
bottom: 50px;
left: 50%;
z-index: 100;
opacity: 0;
}
#hslider .flex-control-nav li {
float: left;
margin-right: 20px;
position: relative;
width: 15px;
height: 15px;
}
#hslider .flex-control-nav li:last-of-type {
margin-right: 0!important;
}
#hslider .flex-control-nav li a {
text-indent: -9999px;
position: absolute;
width: 15px;
height: 15px;
top: 0;
left: 0;
border: 1px solid #ffffff;
background: transparent;
box-shadow: 0px 1px 5px rgba(0,0,0,.25);
border-radius: 100%;
}
#hslider .flex-control-nav li a.flex-active {
background: #ffffff;
box-shadow: 0px 1px 5px rgba(0,0,0,.5);
}
@media screen
and (max-width: 1600px) { 
#hslider ul.slides > li img {
width: auto!important;
max-width: none!important;
left: 50%;
margin-left: -800px;
}
.work-single-bottom .inner {
padding: 0 40px;
}
}
@media screen
and (max-width: 1500px) {
#testimonials .test-content { width: 80%;}
#testimonials .flex-direction-nav li a.flex-prev { left: 50px;}
#testimonials .flex-direction-nav li a.flex-next { right: 50px;}
}
@media screen
and (max-width: 1400px) {
#hslider ul.slides > li h1 {
font-size: 70px;
font-size: 7rem;
}
.home-project { width: 33.3333%;}
.home-project:nth-child(9) { display: flex!important;}
}
@media screen
and (max-width: 1280px) {
#testimonials .flex-direction-nav {
left: auto; 
margin-left: 0; 
}
#testimonials .flex-direction-nav li a.flex-prev { left: 20px;}
#testimonials .flex-direction-nav li a.flex-next { right: 20px;}
}
@media screen
and (max-width: 1100px) {
#hslider ul.slides > li h1 {
font-size: 50px;
font-size: 5rem;
}
}
@media screen
and (max-width: 1024px) {
.home-project { width: 50%;}
.home-project:nth-child(9) { display: none!important;}
#testimonials .test-logo {
width: 80%;
margin: 0 10%;
}
#hslider ul.slides > li img {
left: auto;
right: 0;
margin-right: -125px;
}
}
@media screen
and (max-width: 800px) {
#header-container.new header {
padding-left: 20px!important;
padding-right: 20px!important;
padding-top: 20px!important;
}
#header-container.new header #mobile-nav-trigger {
top: 42px!important;
right: 20px!important;
}
a.logo {
padding: 15px 0 0 0!important;
}
#testimonials .test-logo {
width: 70%;
max-width: 300px;
}
.col,
.position .qulified,
.position .prefs {
width: 100%!important;
margin-bottom: 20px!important;
}
.client-logo > .inner { padding: 20px 0;}
.home-project.col {
width: 50%!important;
margin-bottom: 0!important;
}
.row {
padding-left: 40px;
padding-right: 40px;
}
#testimonials {
padding-top: 80px;
padding-bottom: 30px;
}
#testimonials .row {
padding-left: 0!important;
padding-right: 0!important;
padding-bottom: 0!important;
}
#testimonials .test-content {
padding-left: 20px;
padding-right: 20px;
font-size: 25px!important;
font-size: 2.5rem!important;
}
#home-content-container .content { padding-left: 0;}
#home-content-container { padding: 80px 0 60px;}
#testimonials .flex-direction-nav { display: none;}
.work-single-bottom .inner {
padding: 0;
}
}
@media screen
and (max-width: 640px) {
.info-box {
padding-top: 30px;
padding-left: 10px;
padding-right: 10px;
}
.info-box h4 {
font-size: 20px !important;
font-size: 2rem !important;
}
.info-box p {
font-size: 15px!important;
font-size: 1.5rem!important;
line-height: 20px!important;
line-height: 2rem!important;
}
#hslider ul.slides > li img {
margin-right: -250px;
}
}
@media screen
and (max-width: 568px) {
#home-slider-wrapper,
#hslider,
#hslider .slides,
#hslider ul.slides > li {
height: 550px!important;
}
#homeheader {
top: 150px;
}
#homeheader h1 {
font-size: 48px;
font-size: 4.8rem;
line-height: 48px;
}
#homeheader h2 {
font-size: 26px;
font-size: 2.6rem;
}
.home-project.col { width: 100%!important;}
.home-project:nth-child(9) { display: flex!important;}
}
@media screen and (max-width: 480px) {
#new-homepage #home-slider-wrapper {
display: block !important;
}
#header-container.new header {
padding-top: 0px!important;
}
#header-container.new header #mobile-nav-trigger {
top: 27px!important;
right: 20px!important;
}
#home-slider-wrapper,
#hslider,
#hslider .slides,
#hslider ul.slides > li {
height: 480px!important;
}
#hslider ul.slides > li img {
width: 960px!important;
left: auto;
right: 0;
margin-right: -125px;
}
#hslider ul.slides > li h1 {
top: 175px;
width: 80%;
margin: 0 10%;
font-size: 40px;
font-size: 4rem;
}
}