@charset "UTF-8";
@font-face {
  font-family: GoodSans; /* set name */
  src: url(../fonts/GoodSans-Regular.woff); /* url of the font */
}
@font-face {
  font-family: GoodSans; /* set name */
  src: url(../fonts/GoodSans-Bold.woff); /* url of the font */
  font-weight: bold;
}
body {
    font-family: "GoodSans", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    color: rgba(77,77,77,1);
    background-color: rgba(242,237,237,1);
    height: 100%;
}
.wow {visibility: hidden;}

/*TEXT/////////////////////////////////////////*/
h1 {}
h2 {}
h3 {margin-bottom:0.8em}
h4 {margin-bottom:0.8em}
h3.section-heading {    
    border-bottom:2px solid rgba(77,77,77,1);
    text-transform: uppercase;
    font-weight: bold;
    padding: 0 0 2rem 0;
}
h4.project-heading {
    border-bottom:2px solid rgba(77,77,77,1);
    padding: 0 3rem 2rem 0;
}
p {
    margin-bottom: 1rem;
}
p.big {font-size: 1.3rem}
.arrow {
    background: url(../img/jdb_arrow.svg) no-repeat top right;
    background-image: url(../img/jdb_arrow.svg);
    background-size: 24px;
    padding-right: 30px;
    display: block;
}

a {
    color: rgba(77,77,77,1);
    text-decoration: none;
}
a.underline {
    color: rgba(77,77,77,1);
    text-decoration: underline;
}
a:hover, a:visited, a:focus {
    color: rgba(77,77,77,1);
    text-decoration: none;
}
a, button {
    -webkit-transition: .75s ease-in-out!important;
    -moz-transition: .75s ease-in-out!important;
    -o-transition: .75s ease-in-out!important;
    transition: .75s ease-in-out!important;
}
.btn {
    color: rgba(77,77,77,1);
    border:2px solid rgba(77,77,77,1);
    border-radius: 9px;
    font-size: 1.8em;
    padding: 10px 25px;
}
.btn:hover {
    color: rgba(228,228,228,1);
    border:2px solid rgba(77,77,77,1);
    background-color:rgba(77,77,77,1);
    border-radius: 9px;
    padding: 10px 25px;
}

a.link .arrow-animate {
    width: 30px;
    height: 30px;
    background-position: bottom left;
    background-image: url(../img/jdb_arrow.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    position: absolute;
    top: 0;
    right: 0;
}   
a.link:hover .arrow-animate {
  animation-name: arrowAnimation;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  }
a.link:hover .image {
  -webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
  filter: grayscale(0);
}
@keyframes arrowAnimation {
  0% {background-position: bottom left;}
  50% {background-position: top right;}
  100% {background-position: bottom left;}
}
.logo-footer {
    max-width: ;
}

/*NAVBAR//////////////////////////////////////*/
.navbar {height: 80px;}
.nav-bg {background-color: rgba(242,237,237,0.95)!important;}
.navbar-brand {width: 70%; max-width: 300px; padding: 0}
.navbar-toggler {padding: 0;}
#navbarContent {
    position: absolute;
    top:80px;
    background-color: rgba(228,228,228,0.95);
    z-index: 10000;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}
#navbarContent .navContent {
    width: calc(100vw);
    height: calc(100vh - 80px);
}
.navContent ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.navContent ul li {
    padding: 0 0 25px 0;
}

/*CONTENT////////////////////////////////////////*/
.content {margin-top: 80px;}
.alt-bg {background-color: rgba(228,228,228,1);}


/*IMAGE-BOX////////////////////////////////////////*/
.image-box, .image, .gallery-image-box {
    border-radius: 12px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.image-box, .image {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    -webkit-transition: .75s ease-in-out;
    -moz-transition: .75s ease-in-out;
    -o-transition: .75s ease-in-out;
    transition: .75s ease-in-out;
    cursor: pointer;
}
.image-box:hover, .image:hover {
  -webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
  filter: grayscale(0);
}

/*LISTS/////////////////////////////////////////*/
.list-box {
    background-color: rgba(242, 237, 237, 1);
    border-radius: 12px;
}
.services-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.services-list ul li {
    font-size: 1.65em;
    background-color: rgba(228, 228, 228, 1.0);
    border-radius: 9px;
    list-style: none;
    padding: 1rem 1.6rem;
    margin: 0.8rem 1rem;
    display: inline-block;
}

/*PROJECTS/////////////////////////////////////////*/
.project-listing {
    border-radius: 12px;
} 
.project-listing .image {
    border-radius: 12px 12px 0 0;
    aspect-ratio: 196 / 145;
}
.project-listing .text {
    background-color: rgba(242, 237, 237, 1);
    border-radius: 0 0 12px 12px;
    padding: 1em;
    min-height: 90px;
}
.project-listing .listing-link {
    font-size: 1em;
    position: relative;
    display: block;
}
.contact-link {
    position: relative;
    display: block;
}
.project-listing .listing-text {
    padding-right: 35%;
}

/*PROJECT GALLERY////////////////////////////////////////*/
.gallery-image-box.landscape {aspect-ratio: 3 / 2;}
.gallery-image-box.portrait {aspect-ratio: 2 / 3;}
.gallery-image-box.grid.top {margin-bottom: 1rem;}

/*TESTIMONIALS////////////////////////*/
.carousel-testimonials {
    padding-top: 85px;
}
.carousel-testimonials blockquote {
    font-size: 1.3em;
}
.carousel-testimonials blockquote footer {
    font-size: 1rem;
    margin-top: 2em;    
}
.carousel-testimonials .owl-dots {
    position: absolute;
    top: 0;
}
.carousel-testimonials .owl-dots .owl-dot {
    background-color: rgba(177, 177, 177, 1);
    border: 4px solid rgba(177, 177, 177, 1);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    margin-right: 9px;
}
.carousel-testimonials .owl-dots .owl-dot.active {
    background-color: rgba(177, 177, 177, 0);
    border: 4px solid rgba(177, 177, 177, 1);
}

/*Additional Padding////////////////////////*/
.p-7 {
    padding: 70px;
}
.py-7 {
    padding-top: 70px;
    padding-bottom: 70px;
}
.px-7 {
    padding-left: 70px;
    padding-right: 70px;
}
.ps-7 {
    padding-left: 70px;
}
.pt-7 {
    padding-top: 70px;
}
.pb-7 {
    padding-bottom: 70px;
}
.pe-7 {
    padding-right: 70px;
}

/*///////FORMS///////*/
.error{color:#D00;}
.trip{display:none;}
textarea,input,select{width:90%;}

/* ==========================================================================
MEDIA QUERIES
========================================================================== */


body {font-size: 14px;}
h1 {font-size: 1.8em;}
h2 {font-size: 1.65em;}
h3 {font-size: 1.5em; margin-bottom:0.8em}
h4 {font-size: 1.5em; margin-bottom:0.8em}
h3.section-heading {font-size: 1.5em;}
h4.project-heading {font-size: 1.5em;} 

/*//////sx///////*/
@media (max-width: 579px)  {
body {font-size: 13px;}
.testimonials .image-box.half {aspect-ratio: 1 / 1;}
.testimonials .image-box.full {aspect-ratio: 4 / 5;}
}

/*//////sm///////*/
@media (min-width: 579px) {
body {font-size: 14px;}
}
@media (max-width: 768px) {
.image-box.half {aspect-ratio: 3 / 2;}
.image-box.full {aspect-ratio: 196 / 181;}
.imagetext-box .image-box {aspect-ratio: 196 / 181;}
.gallery-image-box.port.grid {aspect-ratio: 2 / 3;}
}

/*//////md///////*/
@media (min-width: 768px) {
.navbar-brand {width: 335px; padding: 0}
.image-box.half {aspect-ratio: 173 / 104;}
.image-box.full {height: 100%;}
.imagetext-box .image-box {height: 100%;}
.gallery-image-box.port.grid {height: 100%;}
.text-box {min-height: 600px;}
}

/*//////lg///////*/
@media (max-width: 992px)  {
}
@media (min-width: 992px)  {
}
/*//////xl///////*/
@media (min-width: 1200px)  { 
body {font-size: 16px;}
.project-listing .listing-link {font-size: 0.95em;}
}

@media (min-width: 1335px)  {
body {font-size: 16px;}
ul.services-list li {font-size: 1.8em;}
}

/*//////xxl///////*/
@media (min-width: 1400px)  { 
body {font-size: 18px;}
}

/* Print */
@media print {
a[href]:after {
content: none !important;
}
}