@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,600,700|Montserrat|Raleway|Open+Sans:400,600");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
hr {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
overflow-x: hidden;
font-family: 'Josefin Sans', sans-serif;
color: #1f1f1f;
background-color: #FFF;
line-height: 30px;
font-weight: 400;
font-size: 16px;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul {
list-style: none;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
-webkit-transition: all 0.1s ease-in 0s;
-moz-transition: all 0.1s ease-in 0s;
-o-transition: all 0.1s ease-in 0s;
transition: all 0.1s ease-in 0s;
color: #004498;
}
a:focus,
a:active {
outline: none;
border: none;
}
blockquote,
q {
quotes: none;
}
form,
fieldset {
border-style: none;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="submit"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
a img {
outline: none;
border: none;
}
.visible-lg {
display: block;
}
.visible-xs {
display: none;
}
.clearfix {
clear: both;
}
.clearfix:after {
clear: both;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clear {
clear: both;
}
.alignnone {
margin: 0 auto;
}
.aligncenter {
display: block;
margin: 0 auto 20px auto;
}
.alignright {
float: right;
margin: 0 0 15px 15px;
}
.alignleft {
float: left;
margin: 0 30px 15px 0;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
p {
margin-bottom: 15px;
font-size: 16px;
color: #403f3f;
line-height: 24px;
font-weight: 400;
font-family: inherit;
}
b,
strong {
font-weight: 700;
}
i,
em {
font-style: italic;
}
ol {
padding-left: 15px;
}
img {
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Josefin Sans', sans-serif;
}
h1 {
font-size: 46px;
line-height: 50px;
margin-bottom: 15px;
}
h2 {
font-size: 38px;
line-height: 40px;
margin-bottom: 15px;
}
h3 {
font-size: 30px;
line-height: 36px;
margin-bottom: 15px;
}
h4 {
font-size: 24px;
line-height: 32px;
margin-bottom: 15px;
}
h5 {
font-size: 20px;
line-height: 30px;
margin-bottom: 15px;
}
h6 {
font-size: 18px;
line-height: 25px;
margin-bottom: 15px;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.text-center {
text-align: center;
}
.btn {
padding: 6px 26px 4px 26px;
font-size: 16px;
font-weight: 400;
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
display: inline-block;
text-align: center;
border-width: 2px;
border-style: solid;
border-color: transparent;
text-transform: uppercase;
-webkit-transition: all 0.2s ease-in 0s;
-moz-transition: all 0.2s ease-in 0s;
-o-transition: all 0.2s ease-in 0s;
transition: all 0.2s ease-in 0s;
}
.btn:focus,
.btn:active,
button:focus,
button:active {
outline: none;
}
.default-btn {
background-color: transparent;
color: #FFF;
border-color: #ffffff;
}
.default-btn:hover {
background-color: #FFF;
color: #ff5100;
}
.primary-btn {
background-color: #76d4fa;
color: #FFF;
border-color: #76d4fa;
}
.primary-btn:hover {
background-color: #23536a;
color: #FFF;
border-color: #23536a;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.container {
width: 1200px;
margin: 0 auto;
padding: 0 15px;
}   svg:not(:root) {
overflow: hidden;
}
.nav .icon {
display: inline-block;
fill: currentcolor;
height: 1em;
position: relative;
top: -0.0625em;
vertical-align: middle;
width: 1em;
}
.header {
position: relative;
z-index: 888;
background-color: transparent;
background-color: rgba(0, 0, 0, 0.9);
}
.home .header {
position: absolute;
left: 0;
width: 100%;
top: 0;
z-index: 888;
background-color: transparent;
}
.header .top-wrap {
padding: 20px 0;
background-color: transparent;
-webkit-transition: background-color 0.2s ease-in 0s;
-moz-transition: background-color 0.2s ease-in 0s;
-o-transition: background-color 0.2s ease-in 0s;
transition: background-color 0.2s ease-in 0s;
}
.header .top-wrap.sticky-header {
background-color: rgba(0, 0, 0, 0.5);
}
.header .logo {
width: 310px;
padding: 10px 0;
-webkit-transition: all 0.2s ease-in 0s;
-moz-transition: all 0.2s ease-in 0s;
-o-transition: all 0.2s ease-in 0s;
transition: all 0.2s ease-in 0s;
}
.header .main-menu {
width: 840px;
text-align: right;
}
svg:not(:root) {
overflow: hidden;
}
svg.icon {
display: inline-block;
fill: currentcolor;
height: 1em;
position: relative;
top: -0.0625em;
vertical-align: middle;
width: 1em;
}
.nav ul#menu {
margin: 0;
position: relative;
text-align: center;
}
.nav ul li a {
font-family: inherit;
font-weight: 600;
font-size: 14px;
cursor: pointer;
text-transform: uppercase;
}
.nav #menu>li {
position: relative;
z-index: 9999;
margin: 0 6px;
display: inline-block;
list-style: none;
text-align: center;
}
.nav #menu>li>a {
color: #FFF;
padding: 10px 8px;
font-weight: 600;
display: inline-block;
}
.nav #menu>li.current-menu-item>a,
.nav #menu>li>a:hover,
.nav #menu>li.current-menu-parent>a {
color: #76d4fa;
}
.nav #menu>li>ul {
width: 100%;
min-width: 207px;
display: none;
background-color: #76d4fa;
position: absolute;
left: 0;
top: 71px;
z-index: 999;
padding: 0px 0px;
}
.nav #menu>li>ul>li {
float: none;
margin-left: 0;
height: auto;
text-align: left;
display: inline-block;
width: 100%;
-webkit-transition: all 0.05s ease-in;
-moz-transition: all 0.05s ease-in;
-o-transition: all 0.05s ease-in;
transition: all 0.05s ease-in;
}
.nav #menu>li>ul>li a {
display: block;
color: #FFF;
font-weight: 600;
line-height: normal;
text-decoration: none;
-webkit-transition: all 0.1s ease-in 0s;
-moz-transition: all 0.1s ease-in 0s;
-o-transition: all 0.1s ease-in 0s;
transition: all 0.1s ease-in 0s;
padding: 10px 10px;
border-bottom: 1px solid #FFF;
position: relative;
}
.nav #menu>li>ul>li:last-child a {
border-bottom: none;
}
.nav #menu>li>ul>li a:hover,
.nav #menu>li.current-menu-parent>ul>li.current-menu-item a {
background-color: #FFF;
text-decoration: none;
color: #000;
}
.menu-btn {
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
cursor: pointer;
height: 30px;
margin-top: 0;
position: absolute;
top: 0;
right: 0px;
padding: 1px;
width: 40px;
margin-bottom: 0;
color: #fff;
}
.cbp-af-header.cbp-af-header-shrink .tagLine h1.eng {
font-size: 17px;
}
.cbp-af-header.cbp-af-header-shrink h1 {
font-size: 22px;
line-height: 28px;
}
#showRightPush.menu-btn {
float: right;
margin-top: -6px;
}
.lines:before {
border-bottom: 13px double #fff;
border-top: 4px solid #fff;
content: "";
height: 21px;
position: absolute;
right: 5px;
top: 2px;
width: 26px;
-webkit-transition: all 0.1s ease-in 0s;
-moz-transition: all 0.1s ease-in 0s;
-o-transition: all 0.1s ease-in 0s;
transition: all 0.1s ease-in 0s;
}
.crossBtn {
cursor: pointer;
display: inline-block;
float: left;
width: 46px;
text-align: center;
padding: 13px;
position: absolute;
left: 5px;
top: 0;
z-index: 9999;
display: block;
}
.crossBtn i {
font-size: 20px;
color: #FFF;
}   .section a:focus,
.section a:active {
outline: none;
}
.section ul,
.section ol {
padding-left: 30px;
margin-bottom: 15px;
}
.section ul li {
list-style: none;
font-family: inherit;
position: relative;
padding-left: 20px;
}
.section ul li:before {
position: absolute;
top: 1px;
margin: 8px 0 0 -12px;
vertical-align: middle;
display: inline-block;
width: 6px;
height: 6px;
background: #ff5100;
content: "";
}
.section li {
color: #1f1f1f;
font-size: 18px;
font-weight: 300;
line-height: 24px;
text-align: left;
list-style-position: inside;
}
.section-title h2 {
font-size: 48px;
color: #3e3c3c;
font-weight: 300;
position: relative;
}
.bgImage {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.hero-wrapper .layer {
background-color: rgba(40, 40, 40, 0.5);
}
.hero-wrapper .content {
padding: 50px 0;
}
.home-hero .content {
padding: 150px 0;
}
.hero-wrapper h1,
.hero-wrapper h2,
.hero-wrapper h3,
.hero-wrapper h4,
.hero-wrapper h5,
.hero-wrapper h6,
.hero-wrapper p {
color: #FFF;
}
.hero-wrapper h1,
.hero-wrapper h6 {
text-transform: uppercase;
}
.hero-wrapper h6 {
letter-spacing: 4px;
}
.hero-wrapper h1 {
font-size: 54px;
font-weight: 700;
letter-spacing: 5px;
}
.hero-wrapper .btn {
margin-top: 20px;
}
#home-slider {
overflow: hidden;
display: flex;
}
#home-slider.slick-dotted {
margin-bottom: 0;
}
.slider-wrpper {
position: relative;
}
#home-slider .slick-slide img {
width: 100%;
}
#home-slider .item.video {
height: 61.5vw;
background-image: none !important;
}
#home-slider .item.video video {
object-fit: cover;
object-position: 0 0;
}
#home-slider .item {
position: relative;
display: inline-flex;
}
#home-slider .item.image {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#home-slider .item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.slider-content {
width: 100%;
text-align: center;
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
}
.slider-content .content {
max-width: 85%;
margin: 0 auto;
padding: 140px 0;
}
.slider-content .content h1 {
color: #FFF;
font-weight: 400;
font-size: 46px;
line-height: 70px;
margin: 20px 0;
letter-spacing: 3px;
}
.slider-content .content h4 {
color: #FFF;
font-style: italic;
font-weight: 300;
}
.slick-dots {
bottom: 20px;
}
.scroll-wrap {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
z-index: 444;
}
.slick-prev:before,
.slick-next:before {
content: '';
}
.slick-slider .slick-arrow {
height: auto;
width: auto;
-webkit-transition: opacity 0.1s ease-in 0s;
-moz-transition: opacity 0.1s ease-in 0s;
-o-transition: opacity 0.1s ease-in 0s;
transition: opacity 0.1s ease-in 0s;
}
.slick-slider .slick-arrow i {
font-size: 22px;
color: #000;
background-color: #FFF;
height: 24px;
width: 24px;
padding: 0px 1px;
text-align: center;
}
.slick-slider .slick-arrow:hover {
opacity: 0.5;
}
.scroll-wrap>a {
display: inline-block;
font-size: 10px;
color: #FFF;
font-weight: 300;
}
.scroll-wrap>a>span {
display: block;
}
.scroll-wrap>a {
-vendor-animation-duration: 10s;
-vendor-animation-delay: 6s;
-vendor-animation-iteration-count: infinite;
}
.about-wrapper {
padding: 90px 0 35px 0;
overflow: hidden;
}
.about-wrapper .grid-wrap {
margin-left: -15px;
margin-right: -15px;
margin-top: 60px;
}
.grid-wrap>div {
display: inline-block;
vertical-align: top;
width: 49%;
padding: 0 30px;
margin-bottom: 50px;
text-align: center;
}
.grid-wrap .grid-icon {
display: inline-block;
overflow: hidden;
margin-bottom: 20px;
}
.about-wrapper .grid-wrap p {
font-weight: 300;
line-height: 22px;
font-size: 18px;
}
.grid-wrap a.btn {
border-color: #000;
color: #000;
margin-top: 20px;
font-size: 11px;
padding: 1px 20px;
}
.grid-wrap a.btn:hover {
border-color: #ff5100;
background-color: #ff5100;
color: #FFF;
}
.about-wrapper .bottom-wrap p {
font-weight: 300;
font-size: 18px;
}
.team-grid {
position: relative;
margin: 30px auto 0 auto;
list-style: none;
text-align: center;
} .team-grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1.5%;
width: 30.3%;
text-align: center;
cursor: pointer;
}
.team-grid figure img {
position: relative;
display: block;
max-width: 100%;
opacity: 1;
}
.team-grid figure figcaption {
padding: 2em;
color: #fff;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.team-grid figure figcaption:before,
.team-grid figure figcaption:after {
pointer-events: none;
}
.team-grid figure figcaption,
.team-grid figure figcaption>div>a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}  .team-grid figure figcaption>div>a {
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.team-grid figure h4 {
font-weight: 400;
font-size: 24px;
margin-bottom: 0;
}
.team-grid figure h6 {
font-weight: 300;
font-size: 14px;
}
.team-grid figure span.btn {
font-size: 12px;
text-decoration: uppercase;
padding: 6px 26px 4px 26px;
line-height: 20px;
display: inline-block;
}
.team-grid figure h4,
.team-grid figure p {
margin: 0;
}
.team-grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
figure.effect-roxy img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-roxy figcaption::before {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
border: 1px solid #494747;
content: '';
opacity: 0;
background-color: rgba(0, 0, 0, 0.7);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
figure.effect-roxy figcaption {
padding: 2em;
text-align: center;
}
figure.effect-roxy h4 {
padding: 50% 0 0 0;
}
figure.effect-roxy p,
figure.effect-roxy h4,
figure.effect-roxy h6,
figure.effect-roxy span.btn {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
figure.effect-roxy:hover img {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-roxy:hover figcaption:before,
figure.effect-roxy:hover p,
figure.effect-roxy:hover h4,
figure.effect-roxy:hover h6,
figure.effect-roxy:hover span.btn {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.fp-wrapper {
padding: 90px 0 0 0;
overflow: hidden;
position: relative;
}
.home .fp-wrapper .bottom-wrap {
margin-top: 0;
}
.home .fp-wrapper .section-title {
margin-bottom: 30px;
}
.fp-wrapper.single-gallery {
padding: 0;
}
.fp-wrapper .bottom-wrap {
position: relative;
margin: 40px 0;
}
.fp-wrapper.single-gallery .bottom-wrap {
margin: 0;
}
.fp-wrapper .slick-slide img {
width: 100%;
}
.fp-wrapper .project-desc,
.fp-wrapper .slide-nav {
position: absolute;
bottom: 40px;
z-index: 2;
}
.fp-wrapper .project-desc {
left: 20%;
max-width: 600px;
}
.fp-wrapper .project-desc h2,
.fp-wrapper .project-desc p {
color: #ffffff;
}
.fp-wrapper .project-desc h2 {
margin-bottom: 8px;
font-weight: 300;
}
.fp-wrapper .project-desc p {
margin-bottom: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 18px;
}
.fp-wrapper .slide-nav {
right: 20%;
}
.fp-wrapper .slick-arrow {
cursor: pointer;
font-size: 16px;
color: #FFF;
box-shadow: none;
filter: none;
border-width: 1px;
-webkit-filter: none;
border-color: #FFF;
padding: 26px 30px;
min-width: 210px;
max-width: 210px;
line-height: 20px;
}
.fp-wrapper .slick-arrow:hover {
border-color: #252525;
background-color: #252525;
}
.fp-wrapper .slide-nav button {
position: relative;
}
.fp-wrapper .slide-nav button#single-prev::before {
content: url(//suttonstagingllc.com/wp-content/themes/sutton_staging/assets/images/left-arrow.png);
margin-right: 24px;
}
.fp-wrapper .slide-nav button#single-next::after {
content: url(//suttonstagingllc.com/wp-content/themes/sutton_staging/assets/images/right-arrow.png);
margin-left: 24px;
}
.single-gallery .back-btn-wrap {
position: absolute;
left: 0;
right: 0;
top: 10px;
z-index: 999;
}
.single-gallery .back-btn-wrap a {
color: #ffffff;
position: relative;
}
.single-gallery .back-btn-wrap a::before {
content: url(//suttonstagingllc.com/wp-content/themes/sutton_staging/assets/images/left-arrow.png);
margin-right: 10px;
}
#single-project.slick-dotted.slick-slider {
margin-bottom: 0;
}
#single-project .slick-dots {
margin: 0;
position: absolute;
display: flex;
flex-flow: row;
bottom: 0;
left: 0;
right: 0;
padding: 0;
}
#single-project .slick-dots li {
-webkit-flex: 1; -ms-flex: 1; flex: 1;
cursor: pointer;
background: #000;
margin: 0;
padding: 0;
height: auto;
border-right: 1px solid #fff;
}
#single-project .slick-dots li:last-child {
border: none;
}
#single-project .slick-dots li::before {
content: "";
background-color: transparent;
width: auto;
height: auto;
margin: 0;
top: auto;
}
#single-project .slick-dots li,
#single-project .slick-dots li button {
outline: none;
}
#single-project .slick-dots li button {
background: #51D6FF;
border: none;
width: 0px;
height: 10px;
padding: 0;
cursor: pointer;
display: block;
}
#single-project .slick-slide .img--holder {
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
.pg-wrapper {
overflow: hidden;
padding: 90px 0;
}
.pg-wrapper .pg-grid {
margin-top: 60px;
display: flex;
flex-flow: row wrap;
width: 100%;
}
.pg-wrapper .pg-grid>div {
display: inline-block;
vertical-align: top;
width: 32.3%;
margin: 0.5%;
position: relative;
-webkit-box-shadow: 0px 0px 15px 5px rgba(243, 243, 243, 0.8);
-moz-box-shadow: 0px 0px 15px 5px rgba(243, 243, 243, 0.8);
box-shadow: 0px 0px 15px 5px rgba(243, 243, 243, 0.8);
}
.pg-wrapper figure.effect-roxy:hover img {
-webkit-transform: none;
transform: none;
}
.pg-wrapper figure.effect-roxy h4 {
margin: 0;
background-color: #FFF;
padding: 10px;
opacity: 1;
color: #3e3c3c;
font-size: 14px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.pg-wrapper figure.effect-roxy figcaption {
padding: 0;
}
.pg-wrapper figure.effect-roxy figcaption::before {
border: none;
background-color: transparent;
}
.pg-wrapper figure figcaption>div>a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.fc-wrapper {
padding: 90px 0 0 0;
overflow: hidden;
}
.fc-wrapper .controls {
margin: 40px 0;
}
.fc-wrapper .control {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
text-transform: uppercase;
border-radius: 0px;
}
.testi-wrapper {
background-image: url(//suttonstagingllc.com/wp-content/themes/sutton_staging/asstes/images/bgImage.jpg);
}
.testi-wrapper .layer {
background-color: rgba(0, 0, 0, 0.6);
padding: 90px 0;
text-align: center;
}
.testi-wrapper .section-title h2 {
color: #FFF;
}
.testi-wrapper .profile-img {
display: inline-block;
margin: 0 auto;
overflow: hidden;
}
.testi-wrapper blockquote {
margin: 0;
padding: 0 15%;
}
.testi-wrapper p {
color: #FFF;
font-size: 20px;
font-weight: 300;
font-style: italic;
line-height: 30px;
}
.testi-wrapper .profile-img img {
border-radius: 200px;
overflow: hidden;
margin:0 auto;
}
.testi-wrapper .profile-img>span {
display: inline-block;
margin: 15px 0;
color: #68b3d2;
text-transform: uppercase;
font-weight: 600;
}
#clients .item {
text-align: center;
}
#clients .item img {
margin: 0 auto;
display: block;
}   .contact-wrapper {
padding: 90px 0;
}
.contact-wrapper p {
font-weight: 300;
font-size: 18px;
}
.contact-wrapper .other-info {
margin: 90px 0;
}
.other-info>div {
display: inline-block;
vertical-align: top;
width: 33%;
text-align: center;
color: #343538;
font-weight: 300;
line-height: 22px;
}
.other-info>div>span {
display: inline-block;
width: 100%;
margin-bottom: 15px;
}
.other-info a {
color: #343538;
}   .form-wrapper {
overflow: hidden;
width: 100%;
padding: 70px 0;
}
.form-wrapper p {
color: #717175;
}
.form-wrapper .left-wrap p {
color: #717175;
font-size: 23px;
padding: 0 20px;
}
.form-wrapper .left-wrap {
float: left;
width: 60%;
padding-right: 40px;
text-align: center;
}
.form-wrapper .right-wrap {
float: right;
margin-top: 70px;
width: 40%;
padding-left: 40px;
}
.form-wrapper .right-wrap.map-wrap {
margin-top: 0;
width: 40%;
padding-left: 0;
}
.form-wrap {
overflow: hidden;
}
.contact-form {
width: 970px;
margin: 0 auto;
}
.form-group {
margin-bottom: 20px;
position: relative;
}
.contact-form p {
margin-bottom: 0;
}
.contact-form div.wpcf7 img.ajax-loader {
float: right;
}
.contact-form div.wpcf7-response-output {
margin-top: 7px;
}
.form-group .form-control {
background-color: transparent;
border: 1px solid #e4e4e4;
font-family: 'Josefin Sans', sans-serif;
font-size: 15px;
color: #343538;
padding: 14px 12px;
width: 100%;
position: relative;
font-weight: 300;
}
.dd {
border: 1px solid #f0f0f0;
}
.dd .ddTitle {
background-image: none;
background-color: #f0f0f0;
font-family: 'Josefin Sans', sans-serif;
border: 1px solid #f0f0f0;
color: #000000;
padding: 0;
}
.dd .divider {
border-left: none;
border-right: none;
right: 24px;
}
.dd .ddArrow {
margin-top: -5px;
}
.borderRadiusTp {
border-radius: 0;
}
.dd .ddTitle .ddTitleText {
padding: 1px 20px 2px 12px;
font-size: 12px;
font-family: 'Droid Sans', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
}
.ddcommon .ddChild li:before {
width: auto;
height: auto;
}
.section .ddcommon ul {
margin: 0;
padding: 0;
}
.form-group select {
width: 100%;
}
.form-group>span {
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
}
.form-group>span.captchaimage {
position: absolute;
right: 0;
width: 80px;
text-align: right;
margin-top: 9px;
}
.form-group.grid3>span {
width: 32%;
}
.form-group.grid2>span {
display: inline-block;
vertical-align: top;
width: 48.5%;
}
.form-group.grid3>span:nth-of-type(2) {
margin: 0 2%;
}
.form-group.grid2>span:first-child {
margin-right: 1.5%;
}
.form-group.grid2>span:last-child {
margin-left: 1.5%;
}
.form-group textarea {
resize: none;
font-family: 'Josefin Sans', sans-serif;
}
.submitBtn {
overflow: hidden;
}
.submit-btn {
cursor: pointer;
text-align: center;
padding: 16px 0;
text-align: center;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
width: 400px;
margin: 0 auto;
display: block;
float: right;
border-radius: 0px;
}
.footer .submit-btn {
width: 100%;
font-weight: 500;
float: none;
font-size: 14px;
padding: 15px 15px;
margin: 0 auto;
display: block;
border-radius: 0;
}
.submit-btn:hover {
background-color: #222222;
border-color: #222222;
color: #FFF;
}
.contact-form span.wpcf7-not-valid-tip {
color: #ff5100;
}
*::-webkit-input-placeholder {
color: #000000;
letter-spacing: 1px;
opacity: 1;
}
*:-moz-placeholder {
color: #000000;
letter-spacing: 1px;
opacity: 1;
}
*::-moz-placeholder {
color: #000000;
letter-spacing: 1px;
opacity: 1;
}
*:-ms-input-placeholder {
color: #000000;
letter-spacing: 1px;
opacity: 1;
}
div.wpcf7-response-output {
font-size: 13px;
line-height: 20px;
margin: 0;
color: #ff5100;
padding: 2px;
}
span.wpcf7-not-valid-tip {
font-size: 13px;
}   .lr-wrapper {
overflow: hidden;
padding: 70px 0;
}
.lr-wrapper .content-block {
float: left;
width: 70%;
padding-right: 30px;
}
.lr-wrapper .sidebar {
float: right;
width: 30%;
padding-left: 20px;
}
.sidebar .widget {
border: 1px solid #e6e6e6;
padding: 15px;
text-align: center;
margin-bottom: 60px;
}
.sidebar>div.widget:last-child {
margin-bottom: 0;
}
.sidebar .widget form {
overflow: hidden;
}
.sidebar .widget-title {
text-align: center;
position: relative;
top: -28px;
font-size: 16px;
background-color: #FFF;
display: inline-block;
margin: 0 auto;
padding: 0 15px;
text-transform: uppercase;
}
.sidebar .widget ul {
text-align: left;
padding-left: 0;
margin-bottom: 0;
}
.sidebar .widget ul li {
list-style: none;
font-size: 13px;
color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 7px;
padding-left: 0;
}
.sidebar .widget ul li:before {
width: auto;
height: auto;
}
.sidebar .widget li a {
color: #000000;
}
.sidebar .widget li a:hover {
font-weight: 700;
color: #ff5100;
}
.sidebar .dd {
text-align: left;
}
.sidebar .dd ul li {
padding-left: 8px;
}   .page-wrapper {
padding: 90px 0;
}
.search-form .search-field {
background-color: transparent;
border: 1px solid #e4e4e4;
font-family: 'Josefin Sans', sans-serif;
font-size: 15px;
color: #343538;
padding: 14px 12px;
width: 300px;
position: relative;
font-weight: 300;
}
.search-form .search-submit {
cursor: pointer;
text-align: center;
padding: 13px 25px;
text-align: center;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
margin: 0 auto;
border: 1px solid #76d4fa;
background-color: #76d4fa;
color: #FFF;
vertical-align: top;
border-color: #76d4fa;
}
.search-form .search-submit:hover {
background-color: #222222;
border-color: #222222;
color: #FFF;
}   .map-wrapper #map_canvas {
min-height: 520px;
}
.footer {
overflow: hidden;
width: 100%;
background-color: #151515;
padding: 15px 0;
}
.footer h6 {
text-transform: uppercase;
color: #FFF;
font-weight: 700;
font-size: 16px;
}
.footer ul li {
color: #999999;
display: inline-block;
width: 100%;
font-size: 14px;
line-height: 26px;
}
.footer ul li br {
display: none;
}
.footer li i {
width: 25px;
}
.footer a {
color: #999999;
font-size: 14px;
}
.footer a:hover {
color: #cecece;
}
.footer .social-links {
margin-top: 5px;
}
.footer .social-links li {
display: inline-block;
width: auto;
margin-right: 11px;
}
.footer .social-links li i {
width: auto;
}
.footer .fmenu a {
text-transform: uppercase;
}
.footer p,
.footer a {
margin: 0;
font-size: 11px;
color: #d2d2d2;
font-family: 'Raleway', sans-serif;
letter-spacing: 4px;
}
.footer p {
text-transform: uppercase;
}
.footer i {
color: #FFF;
}
.bwl_acc_container {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
max-width: 100%;
margin: 0 auto;
font-size: 13px;
line-height: 24px;
font-weight: 300;
}
.acc-ctrl-btn {
padding: 0;
margin: 0 0 12px 0;
box-sizing: border-box;
text-align: right;
display: block;
clear: both;
width: 100%;
}
.acc-ctrl-btn .acc-expand-all,
.acc-ctrl-btn .acc-collapsible-all {
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
font-size: 12px;
text-align: center;
display: inline-block;
cursor: pointer;
}
.acc-ctrl-btn .acc-expand-all {
margin-right: 5px;
}
h2.acc_title_bar {
padding: 0;
margin: 0 0 2px 0;
height: 46px;
line-height: 46px;
font-size: 16px;
font-weight: 500;
display: block;
background: transparent;
overflow: hidden;
-webkit-border-radius: 0px 0px 0 10px;
-moz-border-radius: 0px 0px 0 10px;
border-radius: 0px 0px 0 10px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
h2.acc_title_bar a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 0 0 0 56px;
position: relative;
}
h2.acc_title_bar a:after {
z-index: 1;
left: 20px;
top: 0;
content: '';
position: absolute;
display: inline-block;
width: 7px;
height: 46px;
line-height: 46px;
background: transparent;
-webkit-transform: skewX(50deg);
-moz-transform: skewX(50deg);
-ms-transform: skewX(50deg);
-o-transform: skewX(50deg);
transform: skewX(50deg);
-webkit-transition: 0.5s 0.2s ease-out;
-moz-transition: 0.5s 0.2s ease-out;
-o-transition: 0.5s 0.2s ease-out;
transition: 0.5s 0.2s ease-out;
}
h2.acc_title_bar a:before {
z-index: 2;
content: "\f067";
font-family: 'FontAwesome';
display: inline-block;
width: 48px;
height: 46px;
line-height: 46px;
background: transparent;
position: absolute;
left: 0;
top: 0;
text-align: center;
overflow: hidden;
-webkit-border-radius: 0px 4px 0 4px;
-moz-border-radius: 0px 4px 0 4px;
border-radius: 0px 4px 0 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
h2.acc_title_bar a:hover {
color: #f0f0f0;
}
h2.acc_title_bar a:hover:before {
content: "\f067";
font-family: 'FontAwesome';
display: inline-block;
width: 48px;
height: 46px;
line-height: 46px;
background: transparent;
position: absolute;
left: 0;
top: 0;
}
h2.title-bar-active {
background: transparent;
}
h2.title-bar-active a {
color: #f0f0f0;
}
h2.title-bar-active a:after {
z-index: 1;
left: 20px;
top: 0;
content: '';
position: absolute;
display: inline-block;
width: 7px;
height: 46px;
line-height: 46px;
background: transparent;
-webkit-transform: skewX(0deg);
-moz-transform: skewX(0deg);
-ms-transform: skewX(10deg);
-o-transform: skewX(0deg);
transform: skewX(0deg);
}
h2.title-bar-active a:before {
content: "\f068";
font-family: 'FontAwesome';
display: inline-block;
width: 48px;
height: 46px;
line-height: 46px;
background: transparent;
position: absolute;
left: 0;
top: 0;
}
h2.title-bar-active a:hover {
color: #f0f0f0;
}
h2.title-bar-active a:hover:before {
content: "\f068";
font-family: 'FontAwesome';
display: inline-block;
width: 48px;
height: 46px;
line-height: 46px;
background: transparent;
position: absolute;
left: 0;
top: 0;
}
h2.default-title-bar {
background: #2c2c2c;
}
h2.default-title-bar a {
color: #ffffff;
}
h2.default-title-bar a:after {
background: #76d4fa;
}
h2.default-title-bar a:before {
background: #76d4fa;
}
h2.default-title-bar a:hover {
color: #f0f0f0;
}
h2.default-title-bar a:hover:before {
background: #76d4fa;
}
h2.default-title-bar-active {
background: #121212;
}
h2.default-title-bar-active a {
color: #f0f0f0;
}
h2.default-title-bar-active a:after {
-webkit-transform: skewX(0deg);
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-o-transform: skewX(0deg);
transform: skewX(0deg);
background: #76d4fa;
}
h2.default-title-bar-active a:before {
content: "\f068";
background: #76d4fa;
}
h2.default-title-bar-active a:hover {
color: #f0f0f0;
}
h2.default-title-bar-active a:hover:before {
content: "\f068";
background: #76d4fa;
}
.acc_container {
margin-top: 10px;
}   @media (min-width: 768px) {
#home-slider .item.image {
height: calc(100vh - 30px);
}
.slider-content .content {
padding: 60px 0;
}
}
@media screen and (max-width: 1500px) {
.fp-wrapper .project-desc {
left: 40px;
max-width: 600px;
}
.fp-wrapper .slide-nav {
right: 40px;
}
}
@media screen and (max-width: 1200px) {
.container {
width: 100%;
padding: 0 2%;
}
.header .logo {
width: 240px;
}
.header .main-menu {
width: 77%;
}
.nav #menu>li>a {
padding: 7px 4px;
}
.sticky-header .nav #menu>li>ul {
top: 64px;
}
.testi-wrapper .slick-slider {
margin-top: 50px;
}
#testi .slick-prev {
left: 0;
}
#testi .slick-next {
right: 0;
}
}
@media screen and (max-width: 1100px) {
.header .logo {
width: 200px;
}
.nav #menu>li {
margin: 0 2px;
}
.nav #menu>li>a {
padding: 6px 5px;
}
.sticky-header .nav #menu>li>ul {
top: 62px;
}
.slider-content .content {
max-width: 100%;
}
.slider-content .content h1 {
font-size: 42px;
line-height: 54px;
letter-spacing: 1px;
}
.fp-wrapper .project-desc {
max-width: 450px;
}
.grid-wrap>div {
padding: 0 12px;
}
.fc-wrapper {
padding: 40px 0;
}
.testi-wrapper blockquote {
padding: 0 7%;
}
.other-info>div {
width: 32.8%;
}
.map-wrapper #map_canvas {
min-height: 350px;
}
}
@media screen and (max-width: 1000px) {
.header .main-menu {
width: 76%;
}
.nav #menu>li {
margin: 0 3px;
}
.nav #menu>li>a {
padding: 6px 0px;
}
.fc-wrapper .control {
padding: 12px 5px;
}
.fp-wrapper .project-desc {
max-width: 100%;
left: 10px;
right: 10px;
bottom: 10px;
}
.fp-wrapper .slide-nav {
display: flex;
flex-flow: row;
position: relative;
bottom: 0;
right: auto;
left: auto;
width: 100%;
}
.single-gallery .slide-nav {
position: absolute;
}
.fp-wrapper #single-project .project-desc {
bottom: 100px;
}
.fp-wrapper .slide-nav button {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: auto;
max-width: 100%;
border-color: #5B5B5B;
background-color: #252525;
}
.fp-wrapper .slide-nav button:hover {
background-color: #5B5B5B;
border-color: #5B5B5B;
}
}
@media screen and (max-width: 900px) {
.header .top-wrap {
padding: 10px 0;
}
.header .logo {
float: none;
margin: 0 auto 15px auto;
padding: 0;
width: 300px;
}
.header .main-menu {
width: 100%;
}
.header .main-menu .float-right {
float: none;
}
.nav #menu>li {
margin: 0 6px;
}
.nav #menu>li>ul {
top: 46px;
}
.sticky-header .nav #menu>li>ul {
top: 52px;
}
.slider-content .content h1 {
font-size: 35px;
line-height: 44px;
}
}
@media screen and (max-width: 767px) {
.visible-lg {
display: none;
}
.visible-xs {
display: block;
}
.about-wrapper {
padding: 30px 0 35px 0;
}
.scroll-wrap {
display: none;
}
.cbp-af-header nav {
display: none;
}
.cbp-spmenu-right {
right: -270px;
}
.cbp-spmenu-vertical {
width: 270px;
}
.slicknav_btn {
position: relative;
display: block;
vertical-align: middle;
float: right;
padding: 0.438em 0.625em 0.438em 0.625em;
line-height: 1.125em;
cursor: pointer;
}
.slicknav_menu .slicknav_menutxt {
display: block;
line-height: 1.188em;
float: left;
}
.slicknav_menu .slicknav_icon {
float: left;
margin: 0.188em 0 0 0.438em;
}
.slicknav_menu .slicknav_no-text {
margin: 0
}
.slicknav_menu .slicknav_icon-bar {
display: block;
width: 1.125em;
height: 0.125em;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar {
margin-top: 0.188em
}
.slicknav_nav {
clear: both;
display: block !important;
}
.slicknav_nav ul,
.slicknav_nav li {
border-bottom: 0 none;
border-top: 1px solid #fff;
}
.slicknav_nav .slicknav_arrow {
font-size: 0.8em;
float: right;
margin: 6px 0 0 0.4em;
}
.slicknav_nav .slicknav_arrow i {
font-size: 15px;
}
.slicknav_nav .slicknav_item {
cursor: pointer;
}
.slicknav_nav .slicknav_row {
display: block;
}
.slicknav_nav a {
display: block
}
.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a {
display: inline
}
.slicknav_menu:before,
.slicknav_menu:after {
content: " ";
display: table;
}
.slicknav_menu:after {
clear: both
} .slicknav_menu {
width: 100%;
top: 46px;
float: right;
position: relative;
*zoom: 1
} .slicknav_menu {
font-size: 16px;
} .slicknav_btn {
margin: 5px 5px 6px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #323232;
} .slicknav_menu .slicknav_menutxt {
color: #FFF;
font-weight: bold;
text-shadow: 0 1px 3px #000;
} .slicknav_menu .slicknav_icon-bar {
background-color: #f5f5f5;
}
.slicknav_menu {
padding: 5px;
}
.slicknav_nav {
color: #FFF;
margin: 0;
padding: 0;
font-size: 12px;
background-color: #222222;
border-top: 1px solid transparent;
position: absolute;
top: 0;
width: 100%;
right: 0;
z-index: 999;
text-align: left;
}
.slicknav_nav,
.slicknav_nav ul {
list-style: none;
overflow: hidden;
}
.slicknav_nav ul {
background-color: #222222;
margin: 0;
padding: 0;
position: relative;
width: 100%;
z-index: 999;
}
.slicknav_nav ul li a {
padding-left: 20px;
font-size: 16px;
}
.slicknav_nav .sub-menu a {
color: #FFF;
}
.slicknav_nav .slicknav_row {
padding: 6px 9px;
margin: 0;
}
.slicknav_nav a {
padding: 6px 9px;
margin: 0;
text-decoration: none;
color: #FFF;
font-weight: 400;
border: 1px solid transparent;
font-size: 16px;
letter-spacing: 1px;
}
.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a {
padding: 0 4px 0 0;
margin: 0;
}
.slicknav_nav .slicknav_row:hover {
color: #fff;
}
.slicknav_nav li a:hover {
color: #000;
background-color: #FFF;
}
.slicknav_nav li a:hover a {
color: #000;
}
.slicknav_nav .slicknav_parent>a:hover a,
.slicknav_nav .slicknav_parent>a:hover i {
color: #000;
}
.slicknav_nav li:hover a .slicknav_row a {
color: #000;
background-color: transparent;
}
.slicknav_nav li:hover .slicknav_arrow {
color: #FFF;
}
.slicknav_nav .slicknav_txtnode {
margin-left: 15px;
}
.slicknav_nav .sub-menu li:hover a {
background-color: #F3F6F9;
color: #000;
}
.slicknav_parent.slicknav_open>ul {
background-color: #FFF;
}
.slicknav_parent.slicknav_open>ul li a {
color: #20343D;
}
.slicknav_parent.slicknav_open>ul li a:hover {
background-color: #f3f3f3;
color: #2f3030;
}
svg.icon {
display: none;
}
.header {
position: static;
background-color: rgba(0, 0, 0, 1);
}
.header .top-wrap {
padding: 20px 0;
}
.header .top-wrap.sticky-header {
background-color: rgba(0, 0, 0, 1);
}
.header .logo {
float: left;
margin: 0 auto;
}
.header .main-menu {
width: auto;
position: relative;
}
.hero-wrapper h1 {
font-size: 36px;
letter-spacing: 1px;
}
.hero-wrapper p br {
display: none;
}
.team-grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 32.7%;
}
.form-group.grid2>span:first-child {
margin-right: 0;
margin-bottom: 20px;
}
.form-group.grid2>span:last-child {
margin-left: 0%;
}
.form-group.grid3>span:nth-of-type(2) {
margin: 20px 0;
}
.form-group.grid2>span,
.form-group.grid3>span {
width: 100%;
}
.submit-btn {
width: 100%;
}
.map-wrapper #map_canvas {
min-height: 260px;
}
.pg-wrapper {
padding: 50px 0;
}
.pg-wrapper .pg-grid {
margin-top: 40px;
}
.fp-wrapper {
padding: 50px 0 0 0;
}
.pg-wrapper .pg-grid>div {
width: 49%;
}
}
@media screen and (max-width: 700px) {
.section-title h2 {
font-size: 36px;
}
.home-hero .content {
padding: 60px 0;
}
.grid-wrap>div {
width: 100%;
margin-bottom: 30px;
}
.team-grid figure {
width: 360px;
}
.other-info>div {
width: 100%;
margin-bottom: 20px;
}
.other-info>div:last-child {
margin-bottom: 0;
}
.slider-content .content h1 {
font-size: 18px;
line-height: 24px;
}
.slider-content .content h4 {
font-size: 14px;
}
.default-btn {
display: none;
}
.fp-wrapper .project-desc h2 {
font-size: 20px;
}
.fp-wrapper .project-desc p {
font-size: 16px;
}
.fp-wrapper .slick-arrow {
padding: 20px 0px;
}
}
@media screen and (max-width: 500px) {
.header .logo {
width: 250px;
}
.pg-wrapper .pg-grid {
display: inline-block;
}
.pg-wrapper .pg-grid>div {
width: 100%;
margin: 0 0 20px 0;
}
}
@media screen and (max-width: 400px) {
.header .logo {
width: 200px;
}
}