html {
overflow-x: hidden;
}
body {
position: relative;
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
background: #f9f8f8;
}
h1, h2, h3, h4, h5, h6, p {
font-family: Raleway, sans-serif;
line-height: 1.4;
}
:active, :focus, li a {
outline: 0;
}
li a {
font-size: 16px;
font-weight: 500;
font-family: Raleway, sans-serif;
color: #0184cf;
}
a:active, a:focus, a:hover {
outline: 0;
color: #2249d7;
text-decoration: none;
}
.link {
position: relative;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
}
.link:after {
position: absolute;
top: 8px;
right: -15px;
width: 9px;
height: 2px;
background: #17bed2;
content: " ";
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
color: #414749;
margin: 0 0 15px
}
h1>a, h2>a, h3>a, h4>a, h5>a, h6>a {
color: #1117d9
}
h1>a:hover, h2>a:hover, h3>a:hover, h4>a:hover, h5>a:hover, h6>a:hover {
color: #999caa;
text-decoration: none
}
h1>a:focus, h2>a:focus, h3>a:focus, h4>a:focus, h5>a:focus, h6>a:focus {
text-decoration: none
}
h1 {
font-size: 40px
}
h2 {
font-size: 30px;
color: #11179d
}
h3 {
font-size: 22px
}
h4 {
font-size: 20px; color: maroon;
}
h5 {
font-size: 18px;
font-weight: 600;
}
h6 {
font-size: 16px;
font-weight: 400;
}
::selection {
color: #fff;
background: #17bed2;
text-shadow: none
}
.section-seperator {
border-bottom: 1px solid #edf0f2
}
p {
font-size: 15px;
font-weight: 400;
color: #6e6e6e;
margin-bottom: 15px
}
.btn-default-bg {
color: #fff;
background: #10209c;
border: 1px solid #00108c;
}
.btn-default-bg:hover, .btn-default-bg:focus, .btn-default-bg.focus {
color: #222;
background: #f9f9f9;
border: 1px solid #10209c;
}
span.btn-theme-sm:hover {
box-shadow: 1px 1px 3px #999;
}
.btn-theme-md {
font-size: 15px;
font-weight: 600;
padding: 20px 30px;
}
.btn.btn-inverse {
background: transparent;
color: #fff;
border: 1px solid #fff;
}
.btn.btn-inverse:hover{
background: #fff;
color:#333;
}
.btn.btn-obverse {
background: transparent;
color: #111;
border: 1px solid #717171;
}
.btn.btn-obverse:hover{
background: #222;
color:#fff;
}
.btn.btn-txtblk {
color: #191919;
background: transparent;
border-color: #191919;
float: right;
background-color: rgba(255,255,255,.85);
}
.btn.btn-txtblk:hover {
background: #fff;
}
a,
.btn-link {
color: #0209c7
}
/*------------------------------------ Social Icons --------------------------*/
.social-icons {
display: inline-block;
width: 36px;
height: 36px;
font-size: 15px;
color: #fff;
background: maroon;
text-align: center;
border-radius: 50%;
vertical-align: middle;
padding: 9px;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.social-icons:hover {
color: #000;
background: #fafafa;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
/* on about page */
.promo-banner-window {
background: url('../img/nyny.jpg') no-repeat;
background-size: 100% auto;
background-position: center;
height: 480px
}
.promo-banner {
text-align: center;
}
.promo-banner .promo-banner-title {
font-size: 50px;
color: #fff;
}
.promo-banner .promo-banner-text {
font-size: 20px;
color: #fff;
opacity: .8;
}
/*----------------------------------------------- Promo Block ----------------*/
.promo-block {
display: block;
position: relative;
background: url("../img/nyny.jpg") no-repeat;
top: 0;
background-attachment: fixed;
background-size: 100% 66%;
background-position: center 9em;
height: 700px;
max-width: 100%;
}
header.img-layer {
padding: 60px 0px;
width: 100%;
max-height: 740px;
}
.promo-right {
height: 100%;
min-height: 170px;
padding-top: 260px;
position: absolute;
right: -3em;
top: 310px
} /*
.inner-promo-right a {
float: right;
font-size: 1.2185em;
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
padding: 3px 5px;
background: rgba(252,252,252, .98);
border-radius: 3px;
border: 1px solid maroon;
}
.inner-promo-right a:hover {
background: rgba(55, 205, 255, .85);
} */
.inner-promo-right a span:hover {
color: white;
}
.promo-left, .promo-right {
height: 100%;
background: transparent;
}
.promo-left {
padding-top: 220px;
padding-top: 22%;
padding-top: 20vh
}
.promo-left img.bkg-ghost {
background: rgba(200,240,252, .3);
}
.promo-left p a.caips {
font-size: 2em;
text-shadow: .25px .5px .75px #333;
background: rgba(205, 240, 250, .2);
box-shadow: .25px .5px .75px .75px #333;
transition: background 1s ease-in;
}
.promo-left p a.caips:hover {
text-shadow: none;
}
.promo-block .promo-block-title {
font-size: 40px;
line-height: 1;
color: #10209c;
text-shadow: 0 1px 1px #7f7f7f;
margin-top: 1em;
}
.promo-block ul.list-inline li.color-white {
position: relative;
top: -1em;
}
.promo-block .promo-block-text {
font-size: 27px;
color: #ffef5f;
text-shadow: .45px .5px .5px #717171;
margin-top: 2.3em;
}
.promo-block h2.promo-block-text {
font-size: 25px;
font-weight: 300;
}
figure.promo-logo {
height: 124px;
max-width: 230px;
padding: 15px;
background: rgba(254, 254, 254, .2);
border-radius: 3px;
float: right;
margin-right: 0;
margin-top: 47%;
}
figure.promo-logo img {
width: 180px;
height: 95px;
box-shadow: 0px 0px 1px 1px #888;
margin: 0 auto;
background: rgba(254, 254, 254, .65);
}
/* --------------------------------------------------------- Service -------- */
.service {
background: #fff;
position: relative;
margin-top: 15px;
top: 30px;
box-shadow: 0 0 1px 1px #ccc;
}
.service-info h3 {
font-size: 17px;
}
.service-info p {
/*text-shadow: rgba(0,0,0, .04) 0 0 .5px;*/
text-shadow: #ffc 0px .25px .25px;
font-size: 14px;
}
.service .service-icon {
display: block;
font-size: 30px;
color: #999caa;
margin-bottom: 30px;
}
.service-info {
height: 258px;
padding: 20px 30px;
}
.service-icon {
margin: 8px 0 0 8px;
padding-top: 12px;
}
#service:target:before {
/* content: " ";
height: 180px;
margin-top: -180px;
visibility: hidden;
display:block; */
}
#experience .service-icon {
padding-left: 30px;
}
#srv3 {
background: url(img/agingbath.jpg) no-repeat;
background-size: contain;
}
#srv1 {
background: url(img/aging06.jpg) no-repeat;
background-size: contain;
}
#srv3 .service-element .service-icon {
position: relative;
left: -1em;
top: -1em;
padding-left: 0px;
}
#srv1 .service-element .service-icon {
position: relative;
left: -1em;
top: -1em;
padding-left: 0px;
}
#aging ul li i {
height: 100%;
position: relative;
top: -1.5em;
left: -2px;
font-size: 2em;
}
#aging h2 {
text-align: center;
}
#aging:target:before {
content:" ";
display: block;
height: 335px; /*same height as header*/
margin-top: -335px; /*same height as header*/
visibility: hidden;
}
/*---------------------------------------------------------- Footer ----------*/
.footer .footer-logo {
width: 76px;
height: auto;
}
/*---------------------------------------------------------- Header ----------*/
.header .nav-item-child, .header .nav-item-hover:after, .header .navbar {
transition-property: all;
transition-timing-function: cubic-bezier(.7, 1, .7, 1)
}
.navbar-fixed-top .navbar-collapse {
max-height: 100%
}
.header .navbar {
background: #f6f7f7 url(img/3132.jpg) no-repeat;
background-size: 26%;
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, .2);
transition-duration: .3s;
box-shadow: 0 4px 2px 2px rgba(0, 0, 0, .2)
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 18px;
margin-right: 15px;
margin-bottom: 0px;
background-color: #000;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
width: 7em;
height: 40px
}
.navbar-toggle:after {
content: "Menu";
position: relative;
right: -1.25em;
top: -1.62em;
color: #fafafa
}
.navbar-toggle:focus {
outline: 0
}
.navbar-toggle .icon-bar {
display: block;
width: 28px;
background: #fff;
height: 3px;
border-radius: 1px
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px
}
@media (min-width:768px) {
.navbar-toggle {
display: static
}
}
.header .logo {
float: left;
margin: 0;
max-height: 90px;
}
.header .logo-wrap {
display: inline-block;
padding: 12px;
background: rgba(254, 254, 254, .4);
border-radius: 3px;
}
.header .logo-wrap:focus, .header .logo-wrap:hover {
text-decoration: none
}
.header .logo-img {
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 1px 1px #bbb;
max-height: 67px;
background: rgba(254, 254, 254, .8);
}
.header .nav-item, .header .nav-item-child {
display: block;
position: relative
}
.header .navbar-nav {
padding-left: 0;
margin-bottom: 0;
list-style: none
}
.header .nav-item:last-child .nav-item-child {
padding-right: 0
}
.header .nav-item.active .nav-item-hover:after, .header .nav-item:hover .nav-item-hover:after {
opacity: 1;
transition-duration: .4s;
transition-property: all;
transition-timing-function: cubic-bezier(.7, 1, .7, 1)
}
.header .nav-item-child {
font-size: 13px;
font-weight: 600;
font-family: Lato, sans-serif;
color: #515769;
text-transform: uppercase;
line-height: 55px;
padding: 20px;
transition-duration: .3s
}
.header .nav-item-child:focus, .header .nav-item-child:hover {
background: inherit
}
.header .nav-item-hover {
position: relative
}
.header .nav-item-hover:after {
position: absolute;
top: 19px;
left: 4px; /*
width: 9px;
height: 2px;
background: #17bed2;
*/
opacity: 0;
content: "\2606";
transition-duration: .4s
}
/* Media Queries below 991px */
@media (max-width: 991px) {
/* Bootstrap collapse of navigation with a maximum width: 991px
(Change it to any breakpoint you want to be collapsed) */
.header {
background: #fff;
}
.header .navbar-toggle {
display: block;
}
.header .navbar-collapse.collapse {
display: none !important;
}
.header .navbar-collapse.collapse.in {
display: block !important;
}
.header .nav-collapse {
padding-left: 0;
padding-right: 0;
}
.header .navbar-nav {
margin: 0;
float: none;
}
.header .navbar-nav .nav-item {
float: none;
}
/* Menu Container */
.header .menu-container:before, .header .menu-container:after {
content: " ";
display: table;
}
.header .menu-container:after {
clear: both;
}
/* Navbar Nav */
.header .nav-item-child {
color: #515769;
line-height: 1.4;
padding: 12px 12px 12px 15px;
}
.header .nav-item-hover:after {
position: absolute;
top: 19px;
}
}
/* Media Queries below 767px */
@media (max-width: 767px) {
/* Menu Container */
.header .menu-container {
padding-left: 15px;
padding-right: 15px;
margin-left: 0;
margin-right: 0;
}
.header .navbar>.container {
width: auto;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.header .navbar>.container>.nav-collapse {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
}
/* Media Queries above 992px */
@media (min-width: 992px) {
/* Navbar */
.header .navbar-nav-right {
float: right;
}
}
/* Page On Scroll */
@media (min-width: 992px) {
/*
.page-on-scroll .header .navbar {
background: #fff;
border-bottom-color: #f0f0f0;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.page-on-scroll .header .nav-item-child {
color: #515769;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
} */
}
/*---------------------------------------------------- Client Slider ---------*/
.client-slider {
position: relative;
width: 100%;
min-height: 130px;
padding-left: 15px;
padding-top: 15px;
background: #ffffff;
border-top: 7px solid #e0e7e7;
border-bottom: 7px solid #e0e7e7;
margin: 0;
vertical-align: bottom;
}
.client-wrapper {
height: auto;
margin: 0;
position: relative;
padding-top: 0;
vertical-align: bottom;
background: #ffffff;
position: relative;
}
.carousel-inner img {
padding: 0;
height: 68px;
width: auto;
vertical-align: bottom;
margin: 6px auto;
}
#cs-1 {
position:relative;
top: -5px;
}
#cs-2 {}
.community li b {
color: maroon;
padding-bottom: 8px;
}
.community li span {
width: 320px;
display: block;
word-wrap: break-word;
background: rgba(250, 250, 250, .8);
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 6px;
}
.community ul li {
display: block;
padding: 7px;
margin-bottom: 5px;
border-bottom: 1px solid #ddd;
}
#wwp {
background: url(img/wwp.png) no-repeat;
background-position: right center;
background-size: 50%;
}
#sjc {
background: url(img/sjc.png) no-repeat;
background-position: right center;
background-size: 40%;
}
#fdf {
background: url(img/fdf.png) no-repeat;
background-position: right center;
background-size: 40%;
}
#cfi {
background: url(img/cfi.png) no-repeat;
background-position: right center;
background-size: 40%;
}
#scr {
background: url(img/scrny.png) no-repeat;
background-position: right center;
background-size: contain;
}
#readA p, #readB p, #readC p,
#readA h4, #readB h4, #readC h4 {
background: rgba(255,255,255, .5);
padding-left: 5px;
text-shadow: 0 .25px .25px #999;
}
#readA .btn-txtblk, #readB .btn-txtblk, #readC .btn-txtblk {
position: relative;
left: -2em;
}
#readA {
background: url(img/slider4.jpg) no-repeat;
background-size: 60% 99px;
display: block;
background-position: center;
height: 99px;
padding: 5px;
margin: 7px auto;
}
#readB {
background: url(img/slider3.jpg) no-repeat;
background-size: 60% 99px;
display: block;
background-position: center;
height: 99px;
padding: 5px;
margin: 7px auto;
}
#readC {
background: url(img/slider1.jpg) no-repeat;
background-size: 60% 99px;
display: block;
background-position: center;
height: 99px;
padding: 5px;
margin: 7px auto;
}
/* ------------------------------------------------- position helpers ------- */
.end {
float: right !important;
}
.start:before {
content: " ";
display: block;
clear: both;
height: 1px;
width: 100%;
position: relative;
}
@media and (min-width: 769px){
.start {
float: left;
}
}
.page-header {
margin-top: 20px;
}
hr, hr.medium {
position: relative
}
.color-lead {
color: #2c2e2f;
}
.color-brand {
color: #1020c9;
}
.color-white{
color: white;
}
.color-heading {
color: #515769!important
}
.color-base {
color: #676767;
}
.color-subtitle {
color: #a6a7aa!important
}
.color-green {
color: green;
}
.color-darkgreen {
color: #006400;
}
.color-maroon {
color: maroon;
}
.txtblk {
color: #191919;
}
.bg-color-base {
background: #10209c!important
}
.bg-color-maroon {
background: maroon!important
}
.bg-color-white {
background: #fff!important
}
.bg-color-heading {
background: #f9f9f9;
padding-top: 15px;
margin-bottom: 0;
margin-top: 15px;
box-shadow: 0 0 .5px .5px #ccc
}
.bg-color-heading h3 {
color: #10209c
}
.bg-color-subtitle {
background: #a6a7aa!important
}
.bg-color-link {
background: #81848f!important
}
.bg-color-link-hover {
background: #999caa!important
}
.bg-color-gray-dark {
background: #f3f3f3!important
}
.bg-color-gray-light {
background: #f9f9f9!important
}
.bg-gray {
background-color: #efefef
}
hr {
background-image: linear-gradient(to right, transparent, #dcdcdc, transparent);
border: 0;
height: 1px;
margin: 22px 0
}
hr.xs {
top: -22px;
margin-bottom: 8px
}
hr.short {
margin: 11px 0
}
hr.tall, hr.xl {
margin: 44px 0
}
hr.xl {
display: block;
padding: 22px 0
}
hr.medium {
margin: 22px auto;
max-width: 90%
}
.container-full-width:after, .container-full-width:before, .container-sm:after, .container-sm:before {
content: " ";
display: table
}
.container-full-width:after, .container-sm:after {
clear: both
}
.row-space-2 {
margin-right: -2px;
margin-left: -2px
}
.container-full-width, .container-sm {
margin-right: auto;
margin-left: auto
}
.row-space-2>[class*=col-] {
padding-left: 2px;
padding-right: 2px
}
.container-sm {
padding-right: 15px;
padding-left: 15px
}
.footer .container {
padding-bottom: 0;
}
ul li, ul, li {
list-style: none
}
/* Media Queries below 768px */
@media (min-width: 768px) {
.container-sm {
width: 750px;
}
}
/* Media Queries below 1200px */
@media (min-width: 1200px) {
.container-sm {
width: 970px;
}
}
/*--------------------------------------------------------------- Content ----*/
.content {
padding-top: 40px;
padding-bottom: 40px;
}
.content-sm {
padding-top: 60px;
padding-bottom: 60px;
}
.content-md {
padding-top: 80px;
padding-bottom: 80px;
}
.content-lg {
padding-top: 100px;
padding-bottom: 100px;
}
.content-tb {
padding-top: 100px;
padding-bottom: 0px;
}
.content-bt {
padding-top: 0px;
padding-bottom: 100px;
}
.full-width {
width: 100%;
height: auto;
}
.mrg-t3 {
margin-top: 1em;
margin-bottom: 0;
text-align: center;
}
.mrg-t4 {
margin-top: 2em;
margin-bottom: 0;
}
body.home-page p.mrg-b1 img.img-responsive {
box-shadow: 0 .5px 1px 1px #ddd;
}
@media all and (max-width: 980px) {
.mrg-t3 {
margin-top: 2em;
}
}
.pad-md {
padding-left: 60px;
}
.pad-sm {
padding-left: 30px;
}
.pad-xs {
padding-left: 15px;
}
div[class^='mrg'], div[class*=' mrg'] {
position: relative;
}
.mrg-b1 {
bottom: 1em
}
.mrg-b2 {
bottom: 2em
}
.mrg-b3 {
bottom: 3em
}
.mrg-b4 {
margin-bottom: 4em
}
.mrg-b5 {
margin-bottom: 5em
}
.mrg-lm2 {
margin-left: -5em;
}
.marg-center {
margin: 1px auto;
position: relative;
left: 28%;
font-size: 14px;
bottom: 1em;
margin-top: 1em;
clear: both;
}
.margin-center {
position: relative;
margin: 0 auto;
float: none;
text-align: center;
width: auto;
max-width: 100%;
display: block;
}
.marg-t1 {
margin-top: 1em;
position: relative;
text-align: center;
}
p.marg-t1 {
padding-bottom: 15px;
color: #2d2f2f;
font-size: 16px;
}
.pad-l-md {
padding-left: 30px;
}
.mw-90 {
width: 80%;
margin: 15px auto;
}
p.mw-90 {
font-size: 20px
}
#work h4 {
color: maroon;
}
.img-panel img {
height: 240px;
width: 360px;
margin: 0 auto;
}
.img-responsive-min {
width: 100%;
max-width: 80%;
height: auto;
max-height: 380px;
}
ul.list-disc {
margin-left: 2%;
margin-top: 1em;
}
ul.list-disc li:before {
content: "\2b50";
margin-right: 10px;
position:relative;
color: #2122e9;
font-size: 1.22em;
}
.underline {
text-decoration: underline;
color: #31708f
}
.text-strong {
font-weight: 700;
}
.promo-affiliate {
background: rgba(255, 255, 255, .78);
height: 2.44em;
padding-top: 6px;
padding-left: 8px;
max-width: 320px;
border-bottom: 4px solid #10209c;
color: #414141;
}
.promo-affiliate a {
color: #930;
padding: 3px 3px 0px 3px;
}
.promo-affiliate p {
color: #414141 !important;
}
section.contactform {
width: 100%;
background: url(img/53.jpg) no-repeat;
background-size: cover
}
.contact-form {
width: 400px;
margin: 0 auto;
border: 1px solid #ddd;
background: #f3f3f3;
padding: 40px
}
.required-field-block {
position: relative;
margin-top: 15px;
margin-bottom: 15px
}
.required-field-block .required-icon {
display: inline-block;
vertical-align: middle;
border-color: #E8E8E8;
color: rgba(0, 0, 0, .65);
text-transform: uppercase;
font-weight: 400;
border-radius: .325em;
box-sizing: border-box;
font-size: 75%;
background-color: transparent;
position: absolute;
top: 0;
right: 0;
z-index: 10;
margin: 0;
width: 30px;
height: 30px;
padding: 0;
text-align: center;
}
.required-field-block .required-icon:after {
position: absolute;
content: "";
right: 1px;
top: 1px;
z-index: -1;
width: 0;
height: 0;
border-top: 0 solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 0 solid transparent;
border-right-color: inherit;
transition: border-color .2s ease
}
.required-field-block .required-icon .text {
color: #B80000;
font-size: 26px;
margin: -3px 0 0 12px
}
.band {
display: block;
position:relative;
height: 3em;
padding: 0:
margin: 0;
width: 100%;
border-top: 1em solid blue;
border-bottom: 1em solid #a01;
background: white;
margin-bottom: -1em;
z-index: 999;
}
#experience .container {
z-index: 9;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
clip: auto;
color: #21759b;
display: block;
font-size: 14px;
font-weight: 700;
height: auto;
line-height: normal;
padding: 15px 23px 14px;
position: absolute;
left: 5px;
top: 5px;
text-decoration: none;
text-transform: none;
width: auto;
z-index: 100000
}
#clientlist h4 {
text-align: center;
color: #608d8f
}
#clientlist h4 b {
color: #c53
}
blockquote {
color: #515151;
background: #fafdfd;
border-color: #e0e7e7;
}
.home-page #content .content-lg {
background: #fafafa url('img/tex2res3.png');
box-shadow: 0px 0px 2px 2px #ccc;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 30px;
padding-left: 30px;
margin: 44px 0 0px 0;
z-index: 1;
}
#homeMid h2 {
font-size: 2.185em;
padding-left: 0px;
padding-right: 30px;
}
#homeMid {
/*background: #fafafa url('img/tex2res3.png'); */
margin-top: 60px;
margin-bottom: 90px;
}
#homeMid .pad-sm {
background: #fafafa url('img/tex2res3.png');
padding: 15px;
}
#homeMid .no-mrg {
margin: 0;
}
#homeMid h4 {
text-shadow: .25px .5px .75px #fff;
}
.home-mid .col-md-6 {
background-color: #fff;
height: 400px;
margin: 0;
position: relative;
}
.home-mid .bg-gray, .bg-gray {
background: gray;
background-color: #f9f9f9
}
.home-mid .bg-gray {
padding-top: 30px;
height: 500px;
}
.home-inner img.mrg-r0 {
position: relative;
right: -2%;
}
#content:focus {
outline: none;
padding-top:100px;
}
.home-page #about {
padding-top: 0;
}
footer.bg-color-gray {
background: #fafafa url('img/small_steps.png');
box-shadow: 0 -4px 4px -4px #777;
}
#about .full-width {
display: block;
position: relative;
top: -2.2em;
padding-top: 0;
margin-bottom: 1em;
}
.nav-narrative h5 {
color: #8c8c8c;
font-size: 1.275em;
margin-top: .67em;
padding-left: 12px;
padding-right: 12px;
text-shadow: 0 .25px .25px #ffc;
}
.clientlist h4{
line-height: 200%
}
/* ------------------------------------ Special media sizes */
@media all and (max-width: 641px) and (min-width: 478px) {
/* .promo-block {
display: block;
position: relative;
top: 0;
background-color: #2d2d2d;
background-attachment: fixed;
background-size: 640px auto;
background-position: center 25%;
max-height: 500px;
}
.promo-left {
padding-top: 120px;
padding-top: 12%;
padding-top: 10vh
} */
}
@media all and (min-width:300px) and (max-width: 768px) {
.client-slider {
min-height: 92px;
}
#wwp, #sjc, #fdf, #cfi, #scr {
background-size: auto;
}
img.client-clients-img {
margin: 5px 5vw 15px 12vw;
text-align: center;
float: none;
}
.community li span {
background: rgba(254, 254, 254, .95);
color: #000000;
}
.client-slider .end {
position:relative;
top: -1em;
}
.start {
float: none !important;
}
.client-slider {
height: auto;
}
#cs-4 {
padding: 0;
margin: 0;
margin-top: -3em;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* .promo-block {
display: block;
position: relative;
top: 0;
background-color: #2d2d2d;
background-attachment: fixed;
background-size: auto 45%;
background-position: center 38%;
max-height: 410px;
} */
.nav-narrative h5 {
display: none;
}
}
@media all and (max-width: 768px) {
.nav-narrative h5.marg-t1 {
font-size: 1em;
padding-left: 12px;
padding-right: 12px;
}
.mw-90 {
width: 100%;
margin: 15px auto;
}
p.mw-90 {
font-size: inherit;
}
}
@media (max-width: 1100px) {
.promo-block .promo-block-img {
display: none;
}
.img-panel{
position: relative;
top: 0;
}
}
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {
body.home-page .bg-color-gray-light h5 {
text-align: center;
}
}
@media only screen and (min-width: 768px) {
.navbar {
border-radius: 0;
}
}
@media all and (max-width: 768px) and (min-width: 541px) {
.promo-right {
padding-top: 200px;
padding-top: 20%;
padding-top: 20vh;
margin-top: 0px;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width: 994px) and (max-width: 1180px) {
#experience .bg-color-gray-dark {
margin-top: -.8982em;
}
.nav-narrative h5.marg-t1 {
font-size: 1em
}
.home-mid .bg-gray {
padding-top: 20px;
height: 450px;
}
.promo-right {
padding-top: 200px;
padding-top: 20%;
padding-top: 20vh;
margin-top: 0px;
}
.service-info {
min-height:288px;
padding-bottom: 8px;
}
}
/* Medium Devices, Desktops */
@media all and (min-width: 993px) {
.promo-block {
min-height: 700px;
background-size: auto 690px;
}
}
@media only screen and (min-width: 801px) and (max-width: 992px) {
#experience .bg-color-gray-dark{
margin-top: -1.22em;}
.nav-narrative h5.marg-t1 {
font-size: 1em;
}
.promo-block .promo-block-img-wrap, figure.promo-logo, figure.promo-logo img {
margin-bottom: 0;
}
.promo-block .promo-block-title {
font-size: 28px;
margin-top: 120px;
}
.promo-left {
padding-top: 0;
}
.bg-color-gray-light {
margin-top: 0px;
position: relative;
display: block;
}
#homeMid .homemid .col-left {
padding-top: 30px;
}
#homeMid .homemid .col-right {
padding: 8px;
}
#homeMid .homemid h2 {
font-size: 22px;
}
#homeMid .homemid p {
font-size: 16px;
}
.home-mid .col-md-6.bg-gray {
padding-top:0px;
height: 300px;
display: block;
width: 100%;
margin: 0 auto;
}
.service .service-info {
height: 163px;
padding: 15px 35px;
}
.service {
padding: 15px 15px;
}
.service h3 {
margin: 0;
}
}
@media all and (min-width: 769px) and (max-width: 992px) {
.home-mid h2 {
margin-top: -1em;
font-size: 1.35em;
}
.promo-block {
background-size: 100% 54%;
background-position: center 11em;
max-height: 648px;
}
.band {
margin-bottom: 0;
}
.promo-right {
padding-top: 200px;
padding-top: 20%;
padding-top: 20vh;
margin-top: 0px;
}
.service-info {
height:168px;
}
}
/* Small Devices, Tablets --------------------------------------------------- */
@media all and (min-width: 576px) and (max-width: 800px) {
p.mw-90.text-justify {
text-align: center;
}
.header .logo-wrap {
background: rgba(251, 251, 251, .35);
}
.logo-image {
max-height: 40px;
}
.img-panel {
display: block;
margin-top: 1em;
min-height: 240px;
}
.img-panel img {
height: auto;
width: 88%;
margin: 5px auto;
padding: 30px 0 0 0;
}
.header .navbar {
background-size: contain;
}
.header .navbar .nav-item {
background: rgba(247, 247, 247, .35);
}
.header .navbar .nav-item a:hover {
background: rgba(252, 252, 252, .85);
}
.service {
top: 30px;
}
.service-info {
height: 168px;
padding: 5px 30px;
}
.promo-block {
background-size: 100% 42%;
background-position: center 11em;
max-height: 530px;
}
.promo-left {
padding-top: 100px;
}
.promo-right {
padding-top: 100px;
padding-top: 10%;
padding-top: 10vh;
margin-top: 0px;
}
.promo-block-title {
font-size: 28px !important;
}
.nav-narrative h5.marg-t1 {
font-size: .938em !important;
}
#homeMid .homemid .col-right, #homeMid .homemid .col-left {
float: left;
width: 100%;
padding: 10px;
}
.home-inner img{
margin: 0 auto;
}
.home-mid .bg-gray .home-inner {
padding: 1px 15px 30px 15px;
position: relative;
top: 30px;
display: block;
font-size: 1.2em;
}
#homeMid h2 {
font-size: 1.5em;
}
.home-mid .col-md-6.bg-gray {
padding-top:0px;
height: 300px;
display: block;
width: 100%;
margin: 0 auto;
}
.home-mid .col-md-6.bg-gray p {
font-size: 1.125em;
}
#work .content-lg {
padding-bottom: 15px;
padding-top: 15px;
display: none;
}
/* .navbar{min-height: 40px;} */
}
/* Extra Small Devices, Phones ---------------------------------------------- */
@media all and (min-width: 541px) and (max-width: 575px) {
.service .service-info {
min-height: auto;
padding: 10px 15px;
}
.service {
top: 30px;
}
.promo-block {
background-size: 100% 30%;
background-position: center 5em;
max-height: 400px;
}
.nav-narrative {
display: none;
}
.promo-right {
padding-top: 200px;
padding-top: 20%;
padding-top: 10vh;
margin-top: 0px;
}
.promo-inner-left {
margin-top: 3em
}
.promo-block-title, promo-block-text {
padding-top: 0;
margin-top: -2em;
}
.promo-left {
margin-top: 0;
max-height: 150px;
position: relative;
display: table-cell;
top: -2em;
}
.promo-block-title {
font-size: 22px !important;
}
.promo-inner-left{
margin-top: 5em;
}
h5.marg-t1 {
font-size: .85em !important;
}
.home-mid .bg-gray .home-inner {
padding: 1px 15px 30px 15px;
position: relative;
top: 30px;
display: block;
font-size: 1.2em;
}
#homeMid h2 {
font-size: 1.35em;
}
.home-mid .col-md-6.bg-gray {
padding-top:0px;
height: 360px;
display: block;
width: 100%;
margin: 0 auto;
}
.home-mid .col-md-6.bg-gray p {
font-size: 1em;
}
}
/*========== Non-Mobile First Method (min-width: 478px) and ==========*/
@media all and (max-width: 540px) {
.service .service-info {
height: auto;
padding: 10px 15px;
}
.service {
top: 30px;
}
header.img-layer{
padding: 70px 50px 0px 60px;
}
.promo-block {
background-size: 98% 280px;
background-position: center 11em;
height: 480px;
}
.promo-inner-left {
margin-top: 150px;
}
.promo-block-title, promo-block-text {
padding-top: 0;
margin-top: -1.65em;
}
.promo-left {
position: relative;
display: table-cell;
top: -7em;
left: -2em;
}
.promo-block-title {
font-size: 22px !important;
}
.home-mid .bg-gray .home-inner {
padding: 1px 15px 30px 15px;
position: relative;
top: 15px;
display: block;
font-size: 1.2em;
height: 340px;
}
#homeMid h2 {
font-size: 1em;
}
.home-mid .col-md-6.bg-gray {
padding-top:0px;
height: 320px;
display: block;
width: 100%;
margin: 0 auto -30px auto;
}
.home-mid .col-md-6.bg-gray p {
font-size: .825em;
}
#experience .bg-color-gray-dark{
margin-top: -1.22em;
}
.clientlist h4{
line-height:120%
}
.pad-l-md {
padding-left: 2px;
}
}
@media all and (min-width: 300px) and (max-width: 477px) {
ul.list-disc {
margin-left: -2.222em;
margin-top: .75em;
}
#work .container.content-md .pad-md {
padding-left: 18px;
}
body {
max-width: 100%;
}
.service .service-info {
height: auto;
padding: 5px 15px;
}
.service-info p {
font-size: .938em;
}
.promo-block {
margin: 0;
padding: 0;
position: relative;
background-color: #2d2d2d;
background-size: 100% 170px;
background-position: center 7em;
height: 360px;
}
.promo-left {
position: relative;
top: -8em;
left: -2em;
font-size: 95%;
padding-top: 0;
}
.promo-block-text {
margin-top: 0;
}
.promo-block-title {
display: none;
}
#experience .bg-color-gray-dark{
margin-top: -3.67em;
}
.home-mid .col-md-6.bg-gray {
padding-top:0px;
min-height: 380px;
display: block;
width: 100%;
margin: 0 auto 1px auto;
}
.mw-90 {
width: 100%;
margin: 0 auto;
font-size: inherit;
}
}
/* Have A Wonderful Time */