@font-face {
    font-family: 'Quincy CF';
    src: url('/Fonts/Quincy_CF_Black_Italic.ttf') format('truetype'),
         url('/Fonts/Quincy_CF_Black.ttf') format('truetype'),
         url('/Fonts/Quincy_CF_Bold_Italic.ttf') format('truetype'),
         url('/Fonts/Quincy_CF_Bold.ttf') format('truetype'),
         url('/Fonts/Quincy_CF_Italic.ttf') format('truetype'),
         url('/Fonts/Quincy_CF_Light_Italic.ttf') format('truetype'),
         url('/Fonts/Quincy_CF.ttf') format('truetype');
}

html, body { font-size: 62.5%; padding: 0; margin: 0; font-family: 'Muli'; }

/* Typography */
a { color: #ca8342; }
a:hover { color: #636569; }
section p { font-size: 1.3rem; line-height:2.5rem; }
.menu-links a, .menu-links p { color: white; }
.link-header { font-weight: bold; font-size: 3.6rem; margin: 0; letter-spacing: 2px; }
.small-links { letter-spacing: 1px; }
.small-links a { color: white; }
.menu-contact-info p { letter-spacing: 1px; }
.menu-social-media a i { font-size: 2rem; }

.subhead { font-size: 6.4rem; text-transform: uppercase; line-height: .8; letter-spacing: 3px; }
.subhead span { font-size: 10rem; font-family: 'Quincy CF'; font-weight: 900; }

.btn-primary-outline { color: #636569; border-color: #ca8342; text-transform: uppercase; font-family: 'Quincy CF'; font-size: 1.4rem; font-weight: 900; }
.btn-primary-outline:hover { color: white; border-color: #636569; background-color: #ca8342; }

.what-we-do-text { font-size: 1.2rem; }

.way-we-work .sidebar-content p { font-size: 1.8rem; margin: .5em 0; margin-left: 1em; width: 60%; }
.way-we-work .sidebar-content p a { color: #636569; text-decoration: none; }

.team-header { font-size: 5.6rem; text-transform: uppercase; letter-spacing: 3px; }
/* End of Typography */

/* Nav */
.navbar-header { margin-top: 5em; margin-bottom: 5em; }
.navbar-toggler { margin-top: -5em; z-index: 1; }
.navbar-toggler-icon { color: white; font-size: 4rem; }
.navbar-brand .hide-small { display: inline-block; }
.navbar-brand .hide-big { display: none; }
/* End of Nav */

#menu-overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: #636569;
  overflow-x: hidden;
  transition: 0.5s;
  overflow-y: hidden;
}

#menu-overlay .container { height: 100%; }
#menu-overlay .container .row {
    height: 100%;
    display: flex;
    justify-content: center;
}

.menu-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
    margin: 30px 0;
    text-transform: uppercase;
}

.menu-float { float: left; }

.vertical-line { 
  display: inline-block;
  vertical-align: middle;
  width: 3px;
  margin: 3em 6% 0 5%;
  height: 70.25em;
  background-color: #ca8342;
}

.menu-content a:hover { color: #ca8342; text-decoration: none; }

#nav-sub { padding: 0; list-style-type: none; }
#nav-sub li { margin-bottom: 1em; }
#nav-sub li a { font-family: 'Muli'; font-weight: 300; font-size: 1.4rem; letter-spacing: 1px; }

.menu-close { font-size: 4rem; position: absolute; top: 0; right: 0; color: white; z-index: 100; }
.menu-close:hover { color: #ca8342; }
.menu-links { display: flex; font-size: 1.2rem; text-align: left; }
.menu-hr { background-color: #ca8342; height: 3px; margin: 10% 0; }
.menu-social-media .m-left { margin-right: .5em; }

/* Home Header Styling */
#home-header { height: 762px; background-repeat: no-repeat; background-size: contain; background-position: 50% 0; }
#home-header .image-panel { height: 762px; position: absolute; width: 100%; margin-top: -34em; margin-bottom: 34em; }
#home-header .back-image-container { position: absolute; top: 0; right: 0; width: 55%; padding: 0; height: 75%; background-repeat: no-repeat; }
#home-header .back-image-container .back-image { position: absolute; right: 0; z-index: -100; width: 100%; height: 100%; }
#home-header .front-image-container { display: flex; position: absolute; bottom: 0; left: 0; width: 89%; height: 70%; }
#home-header .front-image-container .front-image { width: 55%; background-repeat: no-repeat; background-position: right; }

#home-header .home-headline { 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  background-repeat: no-repeat; 
  background-position: 15% 100%; 
  padding-bottom: 1.5em; 
  padding-left: 1em; 
  font-size: 3.5rem; 
  text-transform: uppercase; 
  letter-spacing: 3px;
  color: #636569;
}
#home-header .home-headline span { font-size: 5.5rem; font-family: 'Quincy CF'; font-weight: 900; text-transform: uppercase; }
/* End of Home Header Styling */

.subhead-section { display: flex; }
.hr-separator { margin-left: 0; margin-right: 0; width: 160px; background-color: #ca8342; height: 3px; }

.what-we-do .col-md-2 { display: flex; align-items: center; justify-content: center; }

.what-we-do .text-row { padding: 10em 0; }
.what-we-do .image-row { padding: 10em 0; }
.what-we-do .bottom-image { display: flex; margin-left: auto; }
.what-we-do .top-image { margin-top: -53em; }

.way-we-work .way-we-work-content-row { padding: 10em 0; }
.way-we-work .way-we-work-content { border-left: 3px solid #ca8342; margin-left: 15em; padding-top: 3em; padding-bottom: 3em; padding-left: 5em; }
.way-we-work .way-we-work-content p { width: 75%; margin-top: 5em; }
.way-we-work .way-we-work-content .btn-primary-outline { margin-top: 1em; }
.way-we-work .way-we-work-sidebar { display: flex; align-items: center; justify-content: center; }
.way-we-work .sidebar-content { background-color: #e6e6e6; width: 64%;padding-top: 1em; padding-bottom: 1em; }
.way-we-work .sidebar-content p { border: 2px solid transparent; padding: .25em; }
.way-we-work .sidebar-content p:hover { border: 2px solid #ca8342; padding: .25em; }

.team .first-team-pic { margin-right: 5em; }
.team .meet-the-team { display: flex; flex-direction: column; justify-content: center; padding-left: 5em; }
.team .meet-the-team p { font-size: 2.4rem; font-family: 'Quincy CF'; font-weight: 900; text-transform: uppercase; }
.team .meet-the-team .btn-primary-outline { width: 50%; }

.real-clients .client-content { padding: 10em 0; }
.real-clients h3 { font-size: 2.4rem; margin: 0 auto; text-align: center; text-transform: uppercase; letter-spacing: 3px; }
.real-clients h3:after { content: " "; display: block; width: 160px; margin: 15px auto 15px auto; border-bottom: 4px solid #ca8342; }
.real-clients h3 span { font-size: 2.8rem; font-family: 'Quincy CF'; font-weight: 900; }
.real-clients .client-images { margin-top: 5em; }
.real-clients .client-images img { width: 100%; max-width: 350px; }

footer { max-height: 186px; background-color: #ca8342; }
footer .container { height: 171px; }
footer .container .row { height: 100%; }
footer .footer-head { display: flex; align-items: center; }
footer .footer-head .tagline { font-size: 1.7rem; margin: 0; line-height: 1; color: white; text-transform: uppercase; }
footer .footer-head .tagline span { font-size: 1.9rem; font-family: 'Quincy CF'; font-weight: 900; margin: 0; color: white; text-transform: uppercase; }
footer .footer-head .footer-phone { font-size: 1.4rem; font-family: 'Quincy CF'; margin: 0; color: white; }
footer .footer-head .footer-vertical-line { display: inline-block; width: 3px; margin: 0 5em; height: 11em; background-color: white; }
footer .footer-nav { display: flex; align-items: center; justify-content: flex-end; }
footer .footer-nav .first-column { margin: 0 16em 0 0; }
footer .footer-nav .second-column { margin: 0 3em 0 0; }
footer .footer-nav p { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; }
footer .footer-nav p a { color: white; }
footer .footer-nav .footer-social-media { margin-bottom: 1rem; }
footer .footer-nav .footer-social-media a { font-size: 1.4rem; color: white; padding: 0 2px; }
.footer-bottom-row { height: 15px; background-color: #636569 }

#interior-header { min-height: 470px; background-repeat: no-repeat; background-size: cover; }
#interior-header .separator-container  { display: flex; }
#interior-header .header-separator { background-color: #ca8342; margin-left: 0; margin-right: 0; height: 3px; width: 40%; }
#interior-header .interior-headline { margin-top: 5em; }
#interior-header .interior-headline .headline { font-size: 6.4rem; color: white; text-transform: uppercase; line-height: .9; letter-spacing: 3px; }
#interior-header .interior-headline .headline span { font-size: 10rem; font-family: 'Quincy CF'; font-weight: 900; }

.interior-first-panel { padding: 20em 0; }
.interior-first-panel .header { font-size: 2.4rem; text-transform: uppercase; letter-spacing: 3px; }
.interior-first-panel .header:after { content: " "; display: block; width: 160px; margin: 25px auto 25px 0; border-bottom: 6px solid #ca8342; }
.interior-first-panel .header span { font-size: 2.8rem; text-transform: uppercase; font-family: 'Quincy CF'; font-weight: 900; }
.interior-first-panel .text { display: flex; flex-direction: column; justify-content: center; }
.interior-first-panel ul { font-size: 1.3rem; line-height: 2.5rem; }
.interior-first-panel ul + h2 {margin-top:75px;}

.colored-panel:before{ position: absolute; z-index: -1; width: 55%; height: 465px; content: ""; background-color: #ca8342; }
.colored-panel { height: 465px; }
.colored-panel .container, .colored-panel .row { height: 100%; }
.colored-panel .row { align-items: center; }
.colored-panel .colored-section { color: white; }
.colored-panel .colored-section .header { text-transform: uppercase; font-size: 3.6rem; letter-spacing: 3px; line-height: 1; }
.colored-panel .colored-section .header span { font-family: 'Quincy CF'; font-size: 4.8rem; }
.colored-panel .colored-section p { margin-top: 2em; }
.colored-panel a, .skills-callout-panel a { color: #636569; }
.colored-panel a:hover, .skills-callout-panel a:hover { color: #bbc1cd; }
.colored-panel a.btn-primary-outline { background-color: #ca8342; border-color: #636569; color: white; }
.colored-panel a.btn-primary-outline:hover { color: #ca8342; background-color: white; }

.interior-second-panel { padding: 20em 0; }
.interior-second-panel .header, .interior-second-panel .noline { text-transform: uppercase; font-family: 'Quincy CF'; font-size: 4.8rem; font-weight: 900; }
.interior-second-panel .header:after { content: " "; display: block; width: 160px; margin: 25px auto 25px 0; border-bottom: 6px solid #ca8342; }
.interior-second-panel .list-section { display: flex; flex-direction: column;  justify-content: center; border-left: 6px solid #ca8342; padding-left: 5em; margin-left: 6%; }
.interior-second-panel .clients img {margin-bottom:45px;}

.case-first-panel { padding: 5em 0 20em 0; }
.case-first-panel .panel-nav { padding-bottom: 10em; }
.case-first-panel .panel-nav #nav-sub { display: flex; }
.case-first-panel .panel-nav #nav-sub a { font-size: 1.4rem; color: #636569; font-weight: 600; text-transform: uppercase; margin-right: 2em; letter-spacing: 2px; }
.case-first-panel .panel-nav #nav-sub a:hover { font-weight: 800; color: black; font-weight: 900; text-decoration: none; border-bottom: 4px solid #ca8342; }
.case-first-panel .panel-nav #nav-sub li.here a { font-weight: 800; text-decoration: none; border-bottom: 4px solid #636569; }
.case-first-panel .image img, .case-first-panel .image iframe { width: 100%; }
.case-first-panel .case-study { padding-bottom: 20em; align-items: center; }
.case-first-panel .case-header { text-transform: uppercase; font-size: 4.4rem; }

.problem-panel { height: 737px; background-color: #ca8342; }
.problem-panel .container, .problem-panel .row { height: 100%; }
.problem-panel .row { align-items: center; }
.problem-panel .interior-back-image { position: absolute; margin-top: -27em; }
.problem-panel .problem-text { margin-top: 55em; color: white; }
.problem-panel .problem-text .header { text-transform: uppercase; font-family: 'Quincy CF'; font-size: 4.8rem; font-weight: 900; }
.problem-panel .problem-text p { width: 85%; }
.problem-panel .problem-image { margin-top: 12em; }
.problem-panel a { color: #636569; }
.problem-panel a:hover { color: #bbc1cd; }
.problem-panel a.btn-primary-outline { background-color: #ca8342; border-color: #636569; color: white; }
.problem-panel a.btn-primary-outline:hover { color: #ca8342; background-color: white; }

.interior-second-panel .process { padding: 10em 0; }
.interior-second-panel .process-list-section { display: flex; flex-direction: column;  justify-content: center; border-left: 6px solid #ca8342; margin-left: 6%; }
.interior-second-panel .process-list-section .list-header { font-family: 'Quincy CF'; font-size: 4.8rem; font-weight: 900; text-transform: uppercase; color: #636569; }
.interior-second-panel .process-list-section .process-list-item { display: flex; padding-left: 2em; }
.interior-second-panel .process-list-section .process-list-item p { padding-left: 3em; color: #636569; }
.interior-second-panel .process-list-section .process-list-item i {font-family: 'Quincy CF'; font-size: 4.8rem; width: 15px; color: #e6e6e6; }
.interior-second-panel .results { padding: 10em 0; }
.interior-second-panel .results .results-header { font-family: 'Quincy CF'; font-size: 4.8rem; font-weight: 900; text-transform: uppercase; color: #636569; }
.process img, .process iframe, .results img, .results iframe { width: 100%; }

.skills-first-panel { padding: 5em 0 20em 0; }
.skills-first-panel .panel-nav { padding-bottom: 10em; }
.skills-first-panel .panel-nav #nav-sub { display: flex; }
.skills-first-panel .panel-nav #nav-sub a { font-size: 1.4rem; color: #636569; font-weight: 600; text-transform: uppercase; margin-right: 2em; letter-spacing: 2px; }
.skills-first-panel .panel-nav #nav-sub a:hover { font-weight: 800; color: black; text-decoration: none; border-bottom: 4px solid #ca8342; }
.skills-first-panel .panel-nav #nav-sub li.here a { font-weight: 800; text-decoration: none; border-bottom: 4px solid #636569; }
.skills-first-panel .skills { align-items: center; }
.skills-first-panel .image img, .skills-first-panel .image iframe { width: 100%; }
.skills-first-panel .header { font-size: 4.8rem; font-family: 'Quincy CF'; text-transform: uppercase; font-weight: 900; letter-spacing: 3px; }
.skills-first-panel .header:after { content: " "; display: block; width: 160px; margin: 25px auto 25px 0; border-bottom: 6px solid #ca8342; }

.skills-callout-panel { height: 381px; background-color: #ca8342; }
.skills-callout-panel .container, .problem-panel .row { height: 100%; }
.skills-callout-panel .callout-text { margin-top: 10em; color: white; }
.skills-callout-panel .callout-text .header { text-transform: uppercase; font-size: 2.4rem; letter-spacing: 3px; }
.skills-callout-panel .callout-text .header span { font-family: 'Quincy CF'; font-size: 2.8rem; font-weight: 900; }
.skills-callout-panel .images iframe { width: 100%; }
.skills-callout-panel .problem-image { margin-top: 12em; }

.skills-second-panel { padding-bottom: 10em; }
.skills-second-panel .image-panel { justify-content: flex-end; }
.skills-second-panel .image-panel img { margin-top: -15em; }

.staff-first-panel { padding: 20em 0 32em 0; }
.staff-first-panel .main-content { display: flex; justify-content: center; }
.staff-first-panel .main-content p { text-align: center; width: 60%;  }
.staff-first-panel .line-container { display: flex; justify-content: center; margin: 5em 0; }
.staff-first-panel .line-container .vertical-line { height: 24em; margin: 0; }
.staff-first-panel .text-container { margin-bottom: 5em; }
.staff-first-panel .text-container .header { font-family: 'Quincy CF'; font-size: 4.4rem; color: #636569; text-align: center; }
.staff-first-panel .team-photos .col-md-3 { margin-bottom: 5em; }
.staff-first-panel .team-photos .profile-pic { width: 100%; height: auto; opacity: 1; transition: .5s ease; backface-visibility: hidden; }
.staff-first-panel .team-photos .name-position-overlay { 
  position: absolute;
  transition: .5s ease;
  opacity: 0;
  top: 0; 
  max-width: 255px; 
  width: 100%; 
  height: 100%;
  display: flex;
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
}
.staff-first-panel .team-photos a { z-index: 9999; }
.staff-first-panel .team-photos a:hover .profile-pic { opacity: 0.3; }
.staff-first-panel .team-photos a:hover .name-position-overlay { opacity: 1; }
.staff-first-panel .team-photos .name-position-overlay h2 { font-weight: 900; letter-spacing: 1px; }
.staff-first-panel .team-photos .name-position-overlay h3 { font-weight: 700; }
.staff-first-panel .staff-btn { justify-content: center; }

.profile-panel { height: 523px; position: absolute; margin-top: -90em; width: 100%; display: none; background-repeat: no-repeat; background-size: 100% 100%; }
.profile-panel .container, .profile-panel .row { height: 100%; }
.profile-panel .row { align-items: center; }
.profile-panel .profile-close { position: absolute; top: 0; right: 20%; font-size: 5rem; color: white; z-index: 100; }
.profile-panel .profile-close:hover { color: black; text-decoration: none; }
.profile-panel .profile-text .member-name { font-size: 2.4rem; color: white; text-transform: uppercase; }
.profile-panel .profile-text .member-name span { font-family: 'Quincy CF'; font-size: 2.8rem; font-weight: 900; }
.profile-panel .profile-text .member-name:after { content: " "; display: block; width: 65px; margin: 15px auto 15px 0; border-bottom: 6px solid #ca8342; }
.profile-panel .profile-text .staff-position { color: white; font-weight: 900; letter-spacing: 1; text-transform: uppercase; }
.profile-panel .profile-text p { color: white; }
.profile-panel .profile-text .semi-bold { font-weight: 600; }
.show-panel { display: flex; }

.prev { position: absolute; left: 10%; top: 50%; }
.prev i { font-size: 6rem; color: white; }
.prev i:hover { color: black; }
.next { position: absolute; right: 10%; top: 50%; }
.next i { font-size: 6rem; color: white; }
.next i:hover { color: black; }

.logo-fade { position: relative; margin-top: 50px; }
.fade-overlay { position: absolute; bottom: 0; left:0; width: 100%; height:100%; background-image: linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,.8)); }
.bankspace { padding-top: 65px; }

/* Form styling */
.careers label, .contact label { font-size: 1.3rem; font-weight: 800; text-transform: uppercase; margin-top: 1.25em; display: block; }
.contact input, .careers input { font-size: 1.3rem; }
.careers input[type=checkbox] { margin-right: 15px; }
.careers textarea { height: 300px; font-size:1.3rem; }
.careers .checkbox-inline { display: inline; }
.careers .checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline { margin-top: 0; margin-left: 10px; margin-right: 25px; }
.careers #resume { border: 0; } 
.subscribe {padding-bottom:50px;}

.btn-container { display: flex; justify-content: flex-end; padding-top: 15px; }
/* End of form styling */

/* Styling for pages with more than 3 panels */
.interior-panel { padding: 20em 0; }
.interior-panel .header { font-size: 2.4rem; text-transform: uppercase; letter-spacing: 3px; }
.interior-panel .header:after { content: " "; display: block; width: 160px; margin: 25px auto 25px 0; border-bottom: 6px solid #ca8342; }
.interior-panel .header span { font-size: 2.8rem; text-transform: uppercase; font-family: 'Quincy CF'; font-weight: 900; }
.interior-panel .text { display: flex; flex-direction: column; justify-content: center; }
/* End of styling */

.post h2 { font-size: 1.75rem; padding-top: 3rem; text-transform: uppercase; }
.post h3 { font-size: 1.5rem; text-transform: uppercase; padding-top:2rem; }
.post ul li, .post ol li { margin:10px 0; }

.blog-header, .blog-link, .blog-date { text-transform: uppercase; }
.blog-header { color: #ca8342; font-family: 'Quincy CF'; font-size: 2.5rem; font-weight: 900; letter-spacing: 1px; }
.blog-title { margin-bottom: .5em; font-family: 'Quincy CF'; font-weight: 900; font-size: 3.2rem; }
.blog-date { font-weight: 600; font-size: 1rem; padding-left: 15px; border-left: 5px solid gray; }
.blog-details { font-weight: 600; font-size: 1rem; padding-left: 15px; border-left: 5px solid gray; margin-bottom: 2em; }
.blog-details p, .blog-details h3 { margin: 0; padding: 0; }
.blog-details h3 { font-size: 1.5rem; font-family: 'Quincy CF'; }
.blog-details h3 span { font-size: 1.2rem; }
.blog-details p { font-size: 1.2rem; }
.blog-text { padding: 2.5em 0; }
.blog-link { font-family: 'Quincy CF'; font-size: 1.4rem; font-weight: 600; letter-spacing: 1px; }
.blog-divider { margin: 25px 0; }
.blog-sidebar { border-left: 2px solid #d9d9d9; }
.blog-sidebar .sidebar-subhead { font-size: 2rem; letter-spacing: 1px; }
.blog-sidebar label, .blog-sidebar input { font-size: 1.6rem; }
.blog-sidebar input { margin: 1.25em 0; }
.blog-sidebar .sidebar-topics { list-style-type: none; padding: 0; }
.blog-sidebar .sidebar-topics li { padding: 2em 0; border-bottom: 1px solid #636569; }
.blog-sidebar .sidebar-topics li a { font-size: 1.4rem; }
.blog .imageContainer { max-width: 150px; height: 150px; border-radius: 50%; background-size: cover; background-position: center; }

.paginate { display:flex; align-items: center; justify-content: center; }
.paginate li { list-style-type: none; }
.paginate a { font-size: 1.4rem; padding: 0 10px; }
.paginate strong { font-size: 1.4rem; color: #636569; padding: 0 10px; }

tr .header:after { display: none; }

iframe { width: 100%; }

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media only screen and (min-width: 1431px) and (max-width: 1600px) {
  #home-header .front-image-container { width: 100%; }
  #home-header .front-image-container .front-image { background-size: cover; }
}

@media only screen and (min-width: 992px) and (max-width: 1430px) {
  #home-header .front-image-container { width: 100%; }
  #home-header .front-image-container .front-image { width: 100%; }
  #home-header .home-headline { width: 100%; }
  
  .prev { left: 0%; }
  .next { right: 0%; }
}

@media only screen and (max-width: 1270px) {
  #home-header .home-headline { letter-spacing: 0; }
  #home-header .home-headline span { font-size: 4.5rem; }
}

@media only screen and (max-width: 1199px) {
  #menu-overlay { overflow-y: auto; }
  
  #nav-sub li { margin-bottom: .5em; }

  .overlay-logo img { width: 100%; }

  .team img { width: 30%; height: 100%; }
  
  .problem-panel { height: 100%; }
  .problem-panel .interior-back-image { position: relative; margin-top: 0; width: 100%; }
  .problem-panel .problem-text { margin-top: 0; }
  
  .process .col-md-7 img { width: 100%; }
}

@media only screen and (min-width: 991px) and (max-width: 1199px) {
  .what-we-do .top-image { width: 60%; }
}

@media only screen and (max-width: 991px) {
  .link-header { font-size: 3rem; }

  #home-header .front-image-container { width: 100%; }
  #home-header .front-image-container .front-image { width: 100%; }
  #home-header .home-headline { font-size: 3rem; width: 100%; }
  #home-header .home-headline span { font-size: 3.5rem; }
  
  .what-we-do .top-image { margin-top: 5em; }
  
  .team img { width: 25%; height: 200px; }
  
  .problem-image img { width: 100%; }
  
  .skills-callout-panel { height: 100%; }
  .skills-callout-panel .images { display: flex; justify-content: center; align-items: center; }
  .skills-second-panel { padding-top: 10em; }
  .skills-second-panel .image-panel img { margin-top: 0; }
  
  .skills-first-panel img, .skills-callout-panel img, .interior-first-panel img, .interior-second-panel img, .case-first-panel img { width: 100%; }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
  .staff-first-panel .team-photos .name-position-overlay { max-width: 150px; width: 100%; }
  .staff-first-panel .team-photos .name-position-overlay h2 { font-weight: 900; letter-spacing: 1px; font-size: 1.5rem; }
  .staff-first-panel .team-photos .name-position-overlay h3 { font-weight: 700; font-size: 1rem; }
  
  .problem-panel .problem-text .header { font-size: 4rem; }
  
  .profile-panel { height: 650px; margin-top: -104em; }
  
  .colored-panel { height: 575px; }
  .colored-panel:before { height: 575px; }
  .colored-panel .colored-section .header { font-size: 2.5rem; }
  .colored-panel .colored-section .header span { font-size: 3.5rem; }
  
  .prev { left: 0%; }
  .next { right: 0%; }
}

@media only screen and (min-width: 851px) {
  .skills-first-panel .panel-nav #nav-sub { max-width: 1100px; width: 100%; }
  .case-first-panel .panel-nav #nav-sub { max-width: 1100px; width: 100%; }
}

@media only screen and (max-width: 850px) {
  .skills-first-panel .panel-nav #nav-sub { display: block; }
  .skills-first-panel .panel-nav #nav-sub li { padding: 1em 0; }
  .case-first-panel .panel-nav #nav-sub { display: block; }
  .case-first-panel .panel-nav #nav-sub li { padding: 1em 0; }
}

@media only screen and (max-width: 767px) {
  .navbar .hide-big { display: inline-block }
  .navbar .hide-small { display: none; }
  .link-header { font-size: 1.8rem; }
  .small-links { font-size: 1rem; }

  .navbar-header { z-index: 1; }
  #home-header .back-image-container { width: 100%; height: 75%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0.37)), url(http://rjm.blueseaonline.net/images/uploads/kristian-strand-p8gzCnZf39k-unsplash.png) no-repeat !important; }
  #home-header .front-image-container { position: relative; width: 100%; height: 100%; }
  #home-header .front-image-container .front-image { display: none; }
  #home-header .home-headline { background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; align-items: center; justify-content: center; color: white; }
  
  #interior-header .interior-headline .headline span { font-size: 8rem; }
  
  .what-we-do .top-image, .what-we-do .bottom-image { width: 100%; }

  .team { display: block; }
  .team img { display: block; margin: 5em auto; width: 100%; max-width: 350px; height: auto; }
  .team .first-team-pic { margin-right: auto; }
  
  .real-clients .client-images .col-md-4 { display: flex; justify-content: center; }
  .real-clients .client-images a { display: flex; justify-content: center; align-items: center; }
  .real-clients .client-images .col-md-4 img { margin: 5em 0; }
  
  .skills-first-panel .image { padding-top: 5em; }
  .skills-callout-panel { padding: 5rem 0; }
  
  .case-first-panel .image { padding-top: 5em; }
  
  footer { height: 300px; max-height: 300px; }
  footer .container { height: 285px; }
  footer .footer-head { justify-content: center; flex-direction: column; }
  footer .footer-head img { margin-bottom: 2em; }
  footer .footer-head .footer-vertical-line { display: none; }
  footer .footer-nav { justify-content: center; }
  
  .colored-panel { display: flex; justify-content: center; align-items: center; }
  .colored-panel:before{ display: none; }
  .colored-panel { height: 100%; background-color: #ca8342; padding: 5em 0; }
  
  .interior-first-panel img, interior-second-panel img, colored-panel img { width: 100%; height: auto; }
  .interior-first-panel .text { margin-top: 5em; }
  
  .interior-second-panel .process-list-section { margin-top: 5em; }
  
  .interior-panel { padding: 0; margin: 20em 0em; }
  .interior-panel .text { margin-top: 5em; }
  
  .profile-panel { height: 100%; margin-top: -180em; background-size: cover; }
  .profile-panel .profile-image { display: flex; justify-content: center; }
  
  .staff-first-panel .team-photos .name-position-overlay { max-width: 100%; }
  
  .prev, .next { display: none; }
}

@media only screen and (max-width: 575px) {
  .menu-content { flex-direction: column; }
  .overlay-logo img { width: 103px; }
  .menu-content .vertical-line { display: none; }
  .menu-links { margin-top: 4em; }
  #menu-overlay { overflow-y: visible; }

  .navbar-header { width: 100%; display: flex; justify-content: center; }
  .navbar-toggler { width: 100%; position: relative; bottom: -4em; }
  .navbar-toggler-icon { font-size: 3rem; }
  
  #home-header { height: 600px; }
  #home-header .front-image-container { margin-top: 19em; height: 70%; }
  #home-header .home-headline { margin-top: 1em; padding-bottom: 0; font-size: 3rem;}
  #home-header .home-headline span { font-size: 4.5rem; }
  
  #interior-header .separator-container { margin-top: 7.5em; }
  #interior-header .header-separator { margin-left: auto; margin-right: auto; }
  #interior-header .interior-headline .headline { font-size: 3.5rem; }
  #interior-header .interior-headline .headline span { font-size: 5rem; }
  
  .subhead { font-size: 4rem; }
  .subhead span { font-size: 6rem; }
  
  .what-we-do .top-image, .what-we-do .bottom-image { width: 75%; height: 100%; }
  .what-we-do .top-image { display: none; }
  .what-we-do .bottom-image { margin-right: auto; }
  
  .way-we-work .way-we-work-sidebar { margin-top: 5em; }
  
  .team img { width: 60%; }
  
  .real-clients .client-images .col-md-4 img { width: 75%; }
  
  .skills-second-panel .image-panel img { margin: 0 auto; }
  
  .colored-panel:before { width: 100%; height: 110%; max-height: 850px; }
  .colored-panel .colored-section { margin-bottom: 5em; }
  .colored-panel .colored-section-image img { width: 100%; }
  
  .profile-panel { margin-top: -165em; height: 1010px;  max-height: 1200px; }
  .profile-panel .profile-image img { width: 100%; max-width: 300px; }
  
  .prev i, .next i { font-size: 3rem; }
  
  .way-we-work .way-we-work-content {margin-left:15px;}
  .colored-panel + .interior-second-panel { padding:40em 0 20em 0; }
  .interior-second-panel + .interior-second-panel { padding:0 0 30em 0; }
  .case-first-panel .case-study { padding-bottom: 0; }
  
  .logo-fade { overflow-x: hidden; }
  .real-clients { overflow-x: hidden; }
  .team-photos { overflow-x: hidden; }
  .staff-first-panel { overflow-x: hidden; }
  
  .profile-panel .profile-image img { width: auto; height: auto; }
}

@media only screen and (max-width: 375px) {
  #interior-header .interior-headline .headline { font-size: 3.5rem; }
  #interior-header .interior-headline .headline span { font-size: 4rem; }
  .colored-panel .colored-section .header { font-size: 2rem; }
  .colored-panel .colored-section .header span { font-size: 3.2rem; }
  .case-first-panel .case-header { font-size: 3.4rem; }
  .skills-first-panel .header { font-size: 3.8rem; }
  .skills-second-panel img { width: 100%; }
  .prev, .next { top: 45%; }
  .menu-close { padding-right: 1em; }
  .what-we-do .image-row { text-align: center; }
  .real-clients .client-images .col-md-4 { text-align: center; }
}