.logo img,

.main-banner h1,

body {

    text-align: center

}



.main-banner a,

.main-banner h1 {

    font-family: Geosans, sans-serif;

    text-transform: uppercase;

    color: #fff

}



.close,

h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 400

}



.contactformNav a,

.main-banner a,

.phone a,

.service-text a,

.sidenav a {

    text-decoration: none

}



.modal,

body {

    animation: fadein 1s

}



.design-portfolio-buttons .disabled,

.portfolio-buttons .disabled {

    pointer-events: none

}



@font-face {

    font-family: Geosans;

    src: url(../../fonts/fonts/GeosansLight.eot);

    src: local('☺'), url(../../fonts/GeosansLight.woff) format('woff'), url(../../fonts/GeosansLight.ttf) format('truetype'), url(../../fonts/GeosansLight.svg) format('svg');

    font-weight: 400;

    font-style: normal

}



::-moz-selection {

    color: #fff;

    background: #506C99

}



::selection {

    color: #fff;

    background: #506C99

}



a {

    outline: 0!important

}



body {

    margin: 0!important;

    padding: 0!important;

    width: 100%

}



h2 {

    margin: 0;

    padding: 0

}



.logo {

    margin: 0 auto;

    width: 300px;

    height: auto

}



.logo img {

    margin: 18px auto 0

}



.no-spacing {

    letter-spacing: 0

}



.main-banner {

    width: 100%;

    height: 775px;

    background: url(../images/bluemtn.jpg) center center no-repeat fixed;

    background-size: cover;

    position: relative;

    display: -webkit-flex;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.main-banner h1 {

    width: 100%;

    padding: 0;

    margin: 0 auto 40px;

    font-size: 51px;

    letter-spacing: 5px

}



.main-banner a {

    border: 1px solid #fff;

    padding: 20px 40px;

    font-size: 20px;

    letter-spacing: 2px

}



.main-banner a:hover {

    background: #506C99;

    border: 1px solid #506C99;

    transition: all .35s

}



.effect-bubba:hover {

    background: rgba(80, 108, 153, .5)

}



.effect-bubba::after,

.effect-bubba::before {

    position: absolute;

    top: 5px;

    right: 5px;

    bottom: 5px;

    left: 5px;

    content: '';

    opacity: 0;

    -webkit-transition: opacity .35s, -webkit-transform .35s;

    transition: opacity .35s, transform .35s

}



.effect-bubba::before {

    border-top: 1px solid #fff;

    border-bottom: 1px solid #fff

}



.effect-bubba::after {

    border-right: 1px solid #fff;

    border-left: 1px solid #fff

}



.effect-bubba p {

    opacity: 0;

    width: 90%;

    -webkit-transition: opacity .35s, -webkit-transform .35s;

    transition: opacity .35s, transform .35s;

    -webkit-transform: translate3d(0, 20px, 0);

    transform: translate3d(0, 20px, 0)

}



.effect-bubba:hover::after,

.effect-bubba:hover::before {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1)

}



.effect-bubba:hover p {

    opacity: 1;

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0)

}



header {

    height: 175px;

    width: 100%;

    position: relative;

    z-index: 1;

    background-color: #383838;

    margin-top: 0;

    -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, .7);

    -moz-box-shadow: 5px 5px rgba(0, 0, 0, .7);

    box-shadow: 5px 5px 8px rgba(0, 0, 0, .7)

}



.header-contact {

    color: #fff;

    font-family: GeoSans, sans-serif;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 16px;

    float: right;

    text-align: right;

    margin: 20px 50px 0 0;

    width: 33%

}



.modal-button #myBtn,

.office-info {

    font-family: Geosans, sans-serif;

    text-transform: uppercase

}



.phone {

    font-size: 26px

}



.phone a {

    color: #fff

}



.modal-button #myBtn {

    font-size: 16px;

    background: 0 0;

    border: none;

    border-bottom: 1px solid #fff;

    padding: 0;

    margin: 0 0 10px;

    color: #fff;

    cursor: pointer;

    outline: 0!important;

    letter-spacing: 2px

}



.office-info {

    font-size: 24px;

    letter-spacing: 3px;

    text-align: center;

    margin: 0 auto;

    width: 70%

}



.modal {

    display: none;

    position: fixed;

    z-index: 1;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: #000;

    background-color: rgba(0, 0, 0, .4)

}



.modal-content {

    background-color: #fff;

    margin: 15% auto 0;

    padding: 20px;

    border: 3px solid #506C99;

    position: relative;

    width: 50%

}



.close,

.fixed {

    position: absolute

}



.modal-content iframe {

    width: 100%;

    height: 400px

}



.close {

    top: 0;

    left: 15px;

    color: #506C99;

    font-size: 60px

}



.close:focus,

.close:hover {

    color: #333;

    text-decoration: none;

    cursor: pointer;

    transition: color .35s

}



.fixed .fa-bars,

.fixed .fa-times {

    color: #fff;

    font-size: 50px

}



.fixed .fa-bars:hover,

.fixed .fa-times:hover {

    color: #506C99;

    -moz-transition: all .35s ease-in;

    -o-transition: all .35s ease-in;

    -webkit-transition: all .35s ease-in;

    transition: all .35s ease-in

}



.fixed {

    left: 50px;

    top: 50px

}



.close-word,

.menu-word {

    margin-left: 20px;

    font-size: 20px;

    color: #fff;

    font-family: GeoSans, sans-serif;

    text-transform: uppercase;

    letter-spacing: 6px

}



.sidenav {

    height: 100vh;

    width: 0;

    position: fixed;

    z-index: 9999;

    overflow-x: hidden;

    background: url(../../images/mountains-5.jpg) center center no-repeat fixed;

    background-size: cover;

    transition: .35s;

    text-align: center;

    margin-left: 0

}



.sidenav a {

    position: relative

}



.menu {

    margin-top: 100px;

    padding-bottom: 120px

}



.overlay-services {

    clear: both;

    background: rgba(0, 0, 0, .4);

    width: 60%;

    margin: 0 auto 7px;

    padding-bottom: 10px;

    border: 1px solid #fff;

    position: relative

}



.overlay-services .service-title,

.service-offered {

    text-transform: uppercase;

    margin: 0 auto;

    color: #fff;

    text-align: center

}



.overlay-services:hover {

    border: none

}



.overlay-services a {

    width: 60%;

    height: 100%

}



.home-portfolio {

    position: absolute;

    right: 20%;

    top: 35px

}



.home-portfolio a {

    padding: 10px 50px;

    border: 1px solid #fff;

    color: #fff;

    font-size: 26px;

    font-family: Geosans, sans-serif;

    text-transform: uppercase;

    letter-spacing: 2px

}



.overlay-services .service-title {

    font-family: Geosans;

    font-size: 40px;

    letter-spacing: 20px;

    padding-top: 20px;

    width: 100%;

    font-weight: 400

}



.service-offered {

    font-family: GeoSans;

    font-size: 20px;

    letter-spacing: 2px;

    padding-bottom: 10px

}



.contact,

.new {

    margin-right: 0

}



.contact-word,

.main-contact h2 {

    letter-spacing: 6px;

    text-transform: uppercase

}



.contact {

    display: block;
	margin-top: 5px;

}



.service-columns,

.team-line {

    display: -webkit-flex;

    display: -ms-flexbox;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal

}



.new {
    background: #506C99;
	padding: 7px 10px 5px 10px;
}



.contact-word {

    font-size: 18px;

    color: #fff;

    font-family: GeoSans, sans-serif

}



#contact-form .radio-buttons,

#contact-form input[type=submit],

#contact-form select,

.main-contact h2 {

    font-family: Geosans, sans-serif

}



.contactformNav {

    height: 100%;

    max-height: 100%;

    width: 0;

    position: fixed;

    z-index: 999;

    top: 0;

    right: 0;

    background: rgba(0, 0, 0, .4);

    overflow-x: hidden;

    transition: .5s;

    text-align: center;

    margin-left: 0

}



.contactformNav a {

    font-size: 50px;

    transition: .3s

}



.main-contact {

    width: 100%;

    margin: 0 auto

}



.main-contact h2 {

    margin: 30px auto;

    color: #fff

}



#contact-form {

    width: 90%;

    margin: 0 auto;

    height: 100%

}



#contact-form input[type=text],

#contact-form input[type=email],

#contact-form input[type=tel] {

    border: none;

    border-bottom: 1px solid #fff;

    background: #444;

    color: #fff;

    width: 70%;

    margin-bottom: 20px;

    font-family: Geosans, sans-serif;

    letter-spacing: 2px;

    font-size: 18px;

    padding: 0 3px 5px

}



#contact-form .radio-buttons {

    text-transform: uppercase;

    color: #fff;

    font-size: 18px;

    letter-spacing: 2px;

    padding-bottom: 20px

}



.spacing {

    padding: 0 10px 0 .5px

}



.spacing-2 {

    padding: 0 0 0 .5px

}



#contact-form input:focus {

    border-bottom: 1px solid #fff;

    transition: border .35s

}



#contact-form .form-field ::-moz-placeholder {

    text-transform: uppercase;

    font-family: Geosans, sans-serif;

    letter-spacing: 2px;

    color: #999

}



#contact-form select {

    width: 69%;

    padding: 5px 3px;

    text-transform: uppercase;

    font-size: 16px;

    color: #444;

    letter-spacing: 2px

}



#contact-form .interested {

    color: #fff;

    border-bottom: 1px solid #fff;

    line-height: .1em;

    margin: 20px auto;

    width: 70%

}



#contact-form .textarea ::-moz-placeholder {

    text-transform: uppercase;

    font-family: Geosans, sans-serif;

    color: #444;

    font-size: 18px;

    letter-spacing: 2px

}



#contact-form input[type=submit] {

    width: 69%;

    padding: 10px 0;

    color: #fff;

    border: 1px solid #fff;

    background: 0 0;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: 18px;

    margin-top: 10px;

    cursor: pointer;

    outline: 0!important

}



#contact-form input[type=submit]:hover {

    border: 1px solid #506C99;

    background: #506C99;

    color: #fff;

    transition: border .35s, color .35s, background .35s

}



#contact-form textarea {

    width: 66%;

    height: 200px;

    max-width: 66%;

    max-height: 200px;

    min-width: 66%;

    min-height: 200px;

    border: none;

    border-bottom: 1px solid #fff;

    color: #444;

    font-family: Geosans, sans-serif;

    letter-spacing: 2px;

    font-size: 18px;

    padding: 10px

}



.header-text,

.main-content {

    width: 100%;

    margin: 0 auto;

    font-family: Geosans, sans-serif

}



.main-content {

    height: auto;

    padding-bottom: 30px;

    background: #fff

}



.header-text {

    text-align: center;

    font-size: 40px;

    color: #fff;

    background: #333;

    padding-top: 20px;

    padding-bottom: 20px;

    text-transform: uppercase;

    letter-spacing: 5px

}



.service-columns {

    width: 90%;

    margin: 0 auto;

    text-align: center;

    display: -webkit-box;

    display: flex;

    -ms-flex-direction: row;

    -webkit-flex-direction: row;

    flex-direction: row;

    padding-top: 50px

}



.service-columns h2 {

    width: 100%;

    background: #fff;

    font-size: 26px;

    color: #444;

    text-transform: uppercase;

    letter-spacing: 6px

}



.service-text,

.team-name {

    letter-spacing: 1px;

    font-size: 19px

}



.service-columns i {

    color: #506C99;

    margin-top: 20px;

    margin-bottom: 20px;

    font-size: 36px

}



.column-one,

.column-three,

.column-two {

    width: 25%;

    float: left;

    margin: 0 auto;

    height: auto

}



.service-text {

    color: #444;

    margin: 0;

    text-align: justify;

    font-family: Geosans, sans-serif;

    line-height: 1.35em

}



.service-text a {

    color: #444;

    padding-bottom: 1px;

    border-bottom: 1px solid #506C99

}



.quote blockquote,

.team-name,

.team-title {

    font-family: Geosans, sans-serif;

    color: #fff;

    text-align: center

}



.service-text a:hover {

    border-bottom: none

}



.meet-box {

    background: #444;

    width: 100%;

    height: 470px

}



.team-line {

    padding-top: 40px;

    width: 80%;

    display: flex;

    -ms-flex-direction: row;

    flex-direction: row;

    -webkit-flex-direction: row;

    margin: 0 auto;

    justify-content: center;

    align-items: center;

}



.team-line .team-image {

    width: 20%

}



.team-line .team-image img {

    width: 200px;

    height: 200px;

    border: 10px solid #506C99

}



.team-line .team-image img:hover {

    transform: scale(1.1);

    transition: all .35s

}



.team-name {

    padding-bottom: 2px

}



.team-title {

    margin-top: -15px;

    text-transform: uppercase;

    font-size: 19px;

    letter-spacing: 2px

}



.main-quote {

    width: 100%;

    height: 250px;

    background: url(../../images/smoke-bg.jpg) center center no-repeat fixed;

    background-size: cover;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-align-items: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.quote blockquote {

    font-size: 36px;

    letter-spacing: 2px;

    margin: 0 auto;

    position: relative

}



.quote blockquote:after,

.quote blockquote:before {

    display: block;

    font-family: Georgia;

    font-size: 80px;

    position: absolute;

    top: -20px;

    color: #A7A7A7

}



.quote blockquote:before {

    content: "\201C";

    left: -50px

}



.quote blockquote:after {

    content: "\201D";

    right: -50px

}



.portfolio-header,

.slideshow-container {

    display: -webkit-box;

    display: -ms-flexbox;

    -webkit-box-align: center

}



.quote cite,

.slideshow-container blockquote,

.slideshow-container cite {

    font-family: Geosans, sans-serif

}



.quote cite {

    color: #fff;

    font-size: 19px;

    letter-spacing: 2px

}



.slideshow-container {

    width: 100%;

    height: 250px;

    position: relative;

    margin: auto;

    background: #506C99;

    display: flex;

    display: -webkit-flex;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.slideshow-container blockquote {

    width: 80%;

    padding: 0 0 7px;

    color: #fff;

    font-size: 24px;

    letter-spacing: 2px;

    margin: 0 auto;

    animation: fadein 1s

}



.slideshow-container:hover blockquote {

    color: #fff;

    transition: all .35s

}



.slideshow-container cite {

    color: #A7A7A7;

    font-size: 19px;

    letter-spacing: 2px

}



.mySlides {

    display: none

}



.next,

.prev {

    cursor: pointer;

    position: absolute;

    top: 35%;

    width: auto;

    padding: 16px;

    color: #A7A7A7;

    font-weight: 700;

    font-size: 40px;

    border-radius: 0 3px 3px 0

}



.next {

    right: 5%

}



.prev {

    left: 5%

}



.next:hover,

.prev:hover {

    color: #fff

}



.dots {

    padding-bottom: 40px

}



.dots .dot {

    cursor: pointer;

    height: 13px;

    width: 13px;

    margin: 0 2px;

    background-color: #A7A7A7;

    border-radius: 50%;

    display: inline-block;

    transition: background-color .35s ease

}



.design-portfolio-buttons a:hover,

.portfolio-buttons a:hover {

    transition: background .35s, color .35s, border .35s

}



.active,

.dot:hover {

    background-color: #506C99

}



.portfolio-header {

    width: 100%;

    height: 350px;

    background: url(../images/mountains-cropped.jpg) top no-repeat fixed;

    background-size: cover;

    display: flex;

    display: -webkit-flex;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.design-portfolio-buttons,

.portfolio-buttons {

    display: -webkit-box;

    display: -ms-flexbox;

    -webkit-box-align: center

}



.advertisements-header h1,

.logos-header h1,

.photography-header h1,

.portfolio-header h1,

.video-header h1,

.websites-header h1 {

    margin: 0;

    color: #fff;

    font-family: Geosans, sans-serif;

    text-transform: uppercase;

    letter-spacing: 6px;

    font-size: 51px

}


.website-text-info a {
	padding: 7px 10px;
	border: 1px solid #506C99;
	background: #fff;
	color: #506C99;
	text-decoration: none;
	font-size: 20px;
}


.portfolio-navigation {

    width: 80%;

    margin: 30px auto 0

}



.portfolio-navigation.affix {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    padding: 10px 0;

    margin: 0 auto;

    background: #fff;

    z-index: 1;

    -webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, .7);

    -moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, .7);

    box-shadow: 3px 3px 8px rgba(0, 0, 0, .7)

}



.design-portfolio-buttons a,

.portfolio-buttons a {

    padding: 20px 0;

    text-decoration: none;

    font-size: 19px;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-family: Geosans, sans-serif

}



.portfolio-navigation.affix .portfolio-buttons {

    width: 80%

}



.portfolio-buttons {

    width: 100%;

    margin: 0 auto;

    display: -webkit-flex;

    display: flex;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.portfolio-buttons a:last-child {

    margin-right: 0

}



.portfolio-buttons a {

    border: 1px solid #444;

    margin-right: 20px;

    width: 20%;

    background: #fff;

    color: #444

}



.portfolio-buttons .active,

.portfolio-buttons a:hover {

    background: #506C99;

    color: #fff;

    border: 1px solid #506C99

}



.design-navigation {

    width: 80%;

    margin: 30px auto 0

}



.design-portfolio-buttons {

    width: 100%;

    margin: 0 auto;

    display: flex;

    display: -webkit-flex;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.design-portfolio-buttons a:last-child {

    margin-right: 0

}



.design-portfolio-buttons a {

    border: 1px solid #444;

    margin-right: 20px;

    width: 20%;

    background: #fff;

    color: #444

}



.design-buttons a:hover,

.service-container:last-child {

    border-bottom: 1px solid #506C99

}



.design-portfolio-buttons .active,

.design-portfolio-buttons a:hover {

    background: #506C99;

    color: #fff;

    border: 1px solid #506C99

}



.design-buttons {

    width: 100%;

    margin: 0 auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    display: -webkit-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.design-buttons a:last-child {

    margin-right: 0

}



.design-buttons a {

    padding: 10px 0;

    margin: 0 auto;

    width: 20%;

    color: #444;

    text-decoration: none;

    font-family: Geosans, sans-serif;

    font-size: 19px;

    text-transform: uppercase;

    letter-spacing: 2px;

    border-bottom: 1px solid transparent

}



.design-buttons a:hover {

    color: #506C99;

    transition: all .35s

}



.practice-images {

    width: 100%;

    text-align: center;

    margin: 40px auto

}



.practice-images .design-title {

    width: 80%;

    color: #444;

    margin: 0 auto 20px;

    font-size: 30px;

    font-family: Geosans, sans-serif;

    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: 2px;

    text-align: center

}



.service h2 span,

.service-header-title {

    letter-spacing: 6px;

    text-transform: uppercase

}



.design-title {

    position: relative;

    text-align: center

}



.design-title span {

    background: #fff;

    padding: 0 15px;

    position: relative;

    z-index: 0

}



.design-title:before {

    background: #D7D7D7;

    content: "";

    display: block;

    height: 1px;

    position: absolute;

    top: 50%;

    width: 100%

}



.interested-service,

.main-service-header {

    display: -webkit-box;

    display: -ms-flexbox;

    -webkit-box-align: center

}



.website-service-header {

    background: url(../images/services-website.jpg) bottom right no-repeat fixed;

    background-size: cover

}



.graphic-service-header {

    background: url(../images/services-graphics.jpg) center center no-repeat fixed;

    background-size: cover

}



.imaging-service-header {

    background: url(../images/services-imaging.jpg) center center no-repeat fixed;

    background-size: cover

}



.branding-service-header {

    background: url(../images/services-branding.jpg) bottom no-repeat fixed;

    background-size: cover

}



.advertising-service-header {

    background: url(../images/services-advertising.jpg) center center no-repeat fixed;

    background-size: cover

}



.main-service-header {

    width: 100%;

    height: 350px;

    display: flex;

    display: -webkit-flex;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.scroll:before,

.service h2:before {

    content: "";

    display: block;

    height: 1px;

    top: 50%

}



.service-header-title {

    background: rgba(0, 0, 0, .5);

    margin: 0;

    padding: 20px;

    color: #fff;

    font-family: Geosans, sans-serif;

    font-size: 51px

}



.scroll a,

.service-sentence a {

    color: #506C99;

    text-decoration: none

}



.service {

    padding-top: 100px;

    width: 60%;

    margin: 0 auto;

    font-family: Geosans, sans-serif

}



.service h2 {

    position: relative;

    text-align: center;

    z-index: -1

}



.service h2 span {

    font-size: 31px;

    background: #fff;

    padding: 0 15px;

    position: relative;

    z-index: 1

}



.service h2:before {

    background: #506C99;

    position: absolute;

    width: 100%

}



.service-container {

    border: 1px solid #506C99;

    border-top: none;

    border-bottom: none;

    margin-top: -19px;

    padding: 50px 50px 60px

}



.service-sentence {

    padding: 0;

    margin: 0;

    letter-spacing: 1px;

    text-align: justify;

    font-size: 19px

}



.interested-service h3,

.lb-album,

.lb-overlay,

.lb-overlay .closebtn,

.lb-overlay div h3,

.scroll,

.scroll a,

.scroll i {

    text-align: center

}



.service-sentence a {

    border-bottom: 1px solid #506C99;

    padding-bottom: 1px

}



.service-sentence a:hover {

    border-bottom: 1px solid #fff;

    transition: all .35s

}



.scroll {

    position: relative;

    z-index: 0;

    margin-top: -15px

}



.scroll span {

    text-transform: uppercase;

    background: #fff;

    padding: 0 15px;

    position: relative;

    z-index: 1

}



.scroll:before {

    background: #506C99;

    position: absolute;

    width: 100%

}



.scroll a {

    padding: 20px 23px;

    border: 1px solid #506C99;

    border-radius: 0;

    letter-spacing: 2px;

    font-size: 19px

}



.scroll a:hover {

    background: #506C99;

    color: #fff;

    transition: all .35s

}



.scroll i {

    margin: 0 auto

}



.no-scroll {

    padding: 0

}



#hosting,

#marketing,

#seo,

#web-dev {

    padding-top: 40px

}



.interested-service {

    background: #506C99;

    width: 100%;

    height: 200px;

    display: -webkit-flex;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -webkit-align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    margin-top: 60px

}



.logos-header,

.services-buttons {

    width: 100%;

    display: -webkit-flex;

    display: -webkit-box;

    display: -ms-flexbox;

    -webkit-box-align: center

}



.interested-service h3 {

    width: 100%;

    font-family: Geosans, sans-serif;

    color: #fff;

    font-size: 31px;

    text-transform: uppercase;

    letter-spacing: 2px

}



.interested-service .get-in-touch {

    border-bottom: 1px solid #fff;

    padding-bottom: 2px

}



.interested-service .get-in-touch:hover {

    border-bottom: 1px solid #506C99;

    transition: all .35s

}



.services-navigation {

    width: 100%;

    margin: 60px auto 0

}



.services-buttons {

    margin: 0 auto;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -webkit-align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.services-buttons a {

    border: 1px solid #506C99;

    padding: 20px 0;

    margin-right: 20px;

    width: 20%;

    background: #fff;

    color: #506C99;

    text-decoration: none;

    font-family: Geosans, sans-serif;

    font-size: 19px;

    text-transform: uppercase;

    letter-spacing: 2px

}



.services-buttons a:last-child {

    margin-right: 0

}



.services-buttons a:hover {

    background: #506C99;

    color: #fff;

    border: 1px solid #fff;

    transition: all .35s

}



.logos-header {

    height: 350px;

    background: url(../images/services-mtns.jpg) top no-repeat fixed;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -webkit-align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.advertisements-header,

.websites-header {

    display: -webkit-flex;

    display: -webkit-box;

    display: -ms-flexbox;

    -webkit-box-align: center;

    height: 350px;

    width: 100%

}



.websites-header {

    background: url(../images/460-mountains.jpg) top no-repeat fixed;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -webkit-align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.advertisements-header {

    background: url(../images/service-mtns6.jpg) top no-repeat fixed;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -webkit-align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.photography-header,

.video-header {

    display: -webkit-flex;

    display: -webkit-box;

    display: -ms-flexbox;

    -webkit-box-align: center

}



.photography-header {

    width: 100%;

    height: 350px;

    background: url(../images/service-mtns4.jpg) top no-repeat fixed;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -webkit-align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.lb-album {

    width: 100%;

    height: auto;

    margin: 0 auto;

    font-family: GeoSans, sans-serif;

    padding: 0

}



.lb-album li {

    display: inline-block;

    vertical-align: middle;

    width: 30%;

    margin: 0 auto;

    padding-bottom: 30px;

    list-style: none;

    position: relative

}



.lb-album li img {

    width: 80%;

    height: auto

}



.align-images:hover img {

    transform: scale(.9);

    transition: all .35s

}



.lb-overlay .open-overlay-image {

    width: 50%;

    height: auto

}



.lb-album li>a {

    display: block;

    width: 100%

}



.close-overlay {

    width: 100%;

    height: 100vh

}



.lb-overlay {

    width: 0;

    height: 0;

    position: fixed;

    overflow: hidden;

    left: 0;

    top: 0;

    padding: 0;

    z-index: 99;

    background: rgba(0, 0, 0, .9)

}



.lb-next,

.lb-prev {

    color: #fff;

    z-index: 999;

    font-size: 200px;

    top: 30%;

    position: absolute;

    text-decoration: none

}



.lb-prev {

    left: 21%

}



.lb-next {

    right: 21%

}



.lb-next:hover,

.lb-prev:hover {

    color: #506C99;

    transition: all .35s

}



.lb-overlay>div {

    color: rgba(27, 54, 81, .8);

    opacity: 0;

    filter: alpha(opacity=0);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";

    width: 550px;

    margin: -20px auto 0;

    -webkit-transition: opacity .3s linear 1.3s;

    -moz-transition: opacity .3s linear 1.3s;

    -o-transition: opacity .3s linear 1.3s;

    -ms-transition: opacity .3s linear 1.3s;

    transition: opacity .3s linear 1.3s

}



.lb-overlay div h3 {

    color: #fff;

    text-transform: uppercase;

    font-weight: 400;

    font-family: Geosans, sans-serif;

    font-size: 31px;

    padding: 0 0 20px;

    margin: 0;

    letter-spacing: 2px

}



.project-info,

.website-info {

    text-align: center;

    margin: 0 auto;

    width: 80%

}



.lb-overlay .project-info h3 span {

    color: #506C99;

    font-size: 26px;

    font-family: Geosans, sans-serif;

    text-transform: uppercase;

    letter-spacing: 1px;

    padding: 0;

    margin: 0

}



.website-info {

    padding-top: 60px

}



.project-info a,

.website-info a {

    border-bottom: 1px solid #fff;

    color: #fff;

    padding-bottom: 2px;

    text-decoration: none;

    font-size: 19px;

    letter-spacing: 1px

}



.website-info a:hover {

    border-bottom: 1px solid #506C99;

    transition: all .35s

}



.website-info p {

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 400;

    width: auto;

    height: auto;

    font-size: 19px

}



.dot {

    color: #506C99

}



.lb-overlay .closebtn {

    z-index: 1001;

    color: #fff;

    position: absolute;

    top: 50px;

    left: 50px;

    text-decoration: none;

    font-family: Geosans, sans-serif;

    text-transform: uppercase;

    letter-spacing: 2px

}



.lb-overlay .fa-times {

    color: #fff;

    font-size: 50px

}



.lb-overlay .fa-times:hover {

    color: #506C99;

    -moz-transition: all .35s ease-in;

    -o-transition: all .35s ease-in;

    -webkit-transition: all .35s ease-in;

    transition: all .35s ease-in

}



.lb-overlay img {

    max-height: 100%;

    position: relative;

    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);

    -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);

    box-shadow: 0 2px 7px rgba(0, 0, 0, .2)

}



.lb-overlay:target {

    width: auto;

    height: auto;

    bottom: 0;

    right: 0;

    padding: 80px 100px 120px

}



.lb-overlay:target img {

    -webkit-animation: fadeInScale 1.2s ease-in-out;

    -moz-animation: fadeInScale 1.2s ease-in-out;

    -o-animation: fadeInScale 1.2s ease-in-out;

    -ms-animation: fadeInScale 1.2s ease-in-out;

    animation: fadeInScale 1.2s ease-in-out

}



.lb-overlay:target a.lb-close,

.lb-overlay:target>div {

    opacity: 1;

    filter: alpha(opacity=99);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"

}



.lb-overlay img,

x:-o-prefocus {

    height: 100%

}



.video-header {

    width: 100%;

    height: 350px;

    background: url(../images/service-mtns5.jpg) top no-repeat fixed;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -webkit-align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.video-container {

    width: 100%;

    margin: 0 auto

}



.video-holder {

    width: 80%;

    margin: 40px auto

}



.video-holder .video-1 {

    float: left;

    width: 40%;

    height: 450px;

    margin-bottom: 40px

}



.video-holder .video-2 {

    float: right;

    width: 40%;

    height: 450px;

    margin-bottom: 40px

}



.answer,

.question {

    text-align: left;

    margin: 0;

    letter-spacing: 2px;

    color: #444;

    font-family: Geosans, sans-serif

}



.faq-header {

    background: url(../images/faqs-header.jpg) bottom left no-repeat fixed;

    background-size: cover

}



.faq-questions {

    width: 90%;

    text-align: left

}



.question {

    font-size: 24px;

    font-weight: 700;

    padding: 30px 0 5px;

    text-transform: uppercase

}



.answer {

    font-size: 18px;

    padding: 0

}



footer {

    width: 100%;

    height: 150px;

    position: relative;

    background: #fff;

    letter-spacing: 1px;

    font-size: 19px;

    display: -webkit-flex;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column

}



.main-error .not-found,

.main-error-go span {

    letter-spacing: 8px;

    text-transform: uppercase

}



footer .hours-of-operation {

    display: none

}



footer .footer-information {

    width: 100%;

    text-align: center;

    color: #444;

    font-family: Geosans, sans-serif

}



footer a,

footer a:hover {

    text-decoration: none

}



footer .social-media a {

    margin-right: 10px

}



footer .fa.fa-heart {

    color: #506C99

}



footer .social-media i {

    font-size: 24px

}



footer .social-media i:hover {

    transform: scale(1.5);

    transition: all .35s

}



footer .social-media .fa.fa-facebook-square {

    color: #3b5998

}



footer .social-media .fa.fa-google-plus-square {

    color: #dd4b39

}



footer .social-media .fa.fa-linkedin-square {

    color: #0077b5

}



.fa.fa-twitter-square {

    margin-right: 0

}



footer .copyright {

    position: absolute;

    right: 15px;

    bottom: 15px;

    font-size: 19px;

    text-align: center;

    color: #A7A7A7;

    font-family: Geosans, sans-serif

}



.main-error .not-found,

.main-error h2 {

    color: #fff;

    font-family: Geosans, sans-serif

}



.error {

    width: 100%;

    height: 100vh

}



.main-error {

    float: left;

    width: 50%;

    height: 100vh;

    background: url(../images/smoke-bg.jpg) center center no-repeat;

    background-size: cover;

    text-align: center;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column

}



.main-error p,

.main-error-go {

    margin: 0;

    padding: 0

}



.main-error h2 {

    font-size: 200px

}



.main-error .not-found {

    font-size: 40px;

    width: 100%

}



.main-error-go {

    float: right;

    width: 50%;

    height: 100vh;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    font-family: Geosans, sans-serif;

    position: relative

}



.main-error-go .fa.fa-exclamation-triangle {

    color: #506C99;

    font-size: 150px;

    margin: 20px 0

}



.main-error-go span {

    font-size: 60px;

    color: #444

}



.main-error-go .no-exist {

    color: #444;

    font-size: 40px;

    margin: 0;

    padding: 0;

    letter-spacing: 2px

}



.main-error-go .leave {

    font-size: 32px;

    color: #444;

    margin: 0;

    padding: 0;

    letter-spacing: 2px

}



.main-error-go .outta-here {

    width: 100%;

    margin: 50px auto 0

}



.main-error-go .outta-here a {

    color: #506C99;

    background: #fff;

    border: 1px solid #506C99;

    font-size: 32px;

    text-decoration: none;

    text-transform: uppercase;

    padding: 20px 40px;

    letter-spacing: 2px

}



.main-error-go .outta-here a:hover {

    background: #506C99;

    color: #fff;

    transition: all .35s

}



.main-error-go .error-logo {

    position: absolute;

    top: 20px;

    right: 20px

}



.main-error-go .error-logo img {

    width: 120px;

    height: auto

}





.clients-header {

	width: 100%;

    display: -webkit-flex;

    display: -webkit-box;

    display: -ms-flexbox;

    -webkit-box-align: center;

     height: 350px;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -webkit-align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center

}



.clients-header.header--caladesi {

	background: url(../../work/images/websites/cpwd-homepage-header.jpg) no-repeat center center;

}



.clients-header h1 {

	text-transform: uppercase;

	letter-spacing: 6px;

	background: rgba(0, 0, 0, .5);

    margin: 0;

    padding: 20px;

    color: #fff;

    font-family: Geosans, sans-serif;

    font-size: 51px

}



.client-intro h2 {

	text-transform: uppercase;

	letter-spacing: 6px;

	color: #fff;

}



.client-showcase {

	font-family: 'Geosans', sans-serif;

}



.client-intro {

	background: #506C99;

	padding: 40px 30px;

	margin: 0 auto 30px auto;

}



.client-details {

	width: 80%;

	margin: 0 auto;

}



.client-details:not(:last-child) {

	border-bottom: 1px solid #eee;

}

.client-image {

	width: 100%;

	margin: 0 auto;

}



.client-image img {

	width: 100%;

}



.client-image--2 img {

	height: 200px;

}



.text-center {

	text-align: center;

	color: #fff;

	width: 80%;

	margin: 0 auto;

}



.text-grey {

	color: #444;

}



.view-link {

	color: #fff;

	text-decoration: none;

	text-transform: uppercase;

	letter-spacing: 3px;

	transition: all .35s;

}



.view-link:hover {

	letter-spacing: 6px

}



.thin-white-line {

	height: 1px;

	width: 150px;

	margin: 20px auto;

	background: #fff;

}



.u-margin-bottom-large {

	padding-bottom: 30px !important;

}



.u-margin-bottom-huge {

	padding-bottom: 45px !important;

}



.u-margin-top-large {

	margin-top: 30px !important;

}



@-webkit-keyframes fadeInScale {

    0% {

        -webkit-transform: scale(.6);

        opacity: 0

    }

    100% {

        -webkit-transform: scale(1);

        opacity: 1

    }

}



@-moz-keyframes fadeInScale {

    0% {

        -moz-transform: scale(.6);

        opacity: 0

    }

    100% {

        -moz-transform: scale(1);

        opacity: 1

    }

}



@-o-keyframes fadeInScale {

    0% {

        -o-transform: scale(.6);

        opacity: 0

    }

    100% {

        -o-transform: scale(1);

        opacity: 1

    }

}



@-ms-keyframes fadeInScale {

    0% {

        -ms-transform: scale(.6);

        opacity: 0

    }

    100% {

        -ms-transform: scale(1);

        opacity: 1

    }

}



@keyframes fadeInScale {

    0% {

        transform: scale(.6);

        opacity: 0

    }

    100% {

        transform: scale(1);

        opacity: 1

    }

}



@keyframes bannerText {

    0%,

    100% {

        color: #fff

    }

    25%,

    75% {

        color: #06f

    }

    50% {

        color: #506C99

    }

}



@keyframes fadein {

    from {

        opacity: 0

    }

    to {

        opacity: 1

    }

}



@-moz-keyframes fadein {

    from {

        opacity: 0

    }

    to {

        opacity: 1

    }

}



@-webkit-keyframes fadein {

    from {

        opacity: 0

    }

    to {

        opacity: 1

    }

}



@-ms-keyframes fadein {

    from {

        opacity: 0

    }

    to {

        opacity: 1

    }

}



@-o-keyframes fadein {

    from {

        opacity: 0

    }

}