/* =================================================================== 
 *
 *  Infinity v1.0 Main Stylesheet
 *  01-02-2017
 *  ------------------------------------------------------------------
 *
 *  TOC:
 *  01. webfonts and iconfonts
 *  02. base style overrides
 *  03. typography & general theme styles
 *  04. preloader
 *  05. forms
 *  06. buttons
 *  07. other components
 *  08. common and reusable styles 
 *  09. header styles
 *  10. home
 *  11. about
 *  12. services
 *  13. portfolio
 *  14. testimonials
 *  15. clients
 *  16. contact
 *  17. footer
 *
 * =================================================================== */

/* ===================================================================
 *  01. webfonts and iconfonts - (_document-setup)
 *
 * ------------------------------------------------------------------- */
@import url("/assets/css/font-awesome/css/font-awesome.min.css");
@import url("/assets/css/micons/micons.css");
@import url("/assets/css/fonts.css");
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');


:root {
  --bg-rows-1: #eeeeee;
  --bg-rows-2: #ffffff;
}


/* ===================================================================
 *  02. base style overrides - (_document-setup)
 *
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 1080px) {
  html {
    font-size: 9.375px;
  }
}
@media only screen and (max-width: 768px) {
  html {
    font-size: 10px;
  }
}
@media only screen and (max-width: 400px) {
  html {
    font-size: 9.375px;
  }
}

html, body {
  height: 100%;
}

body {
  background: #07617d;
  font-family: "montserrat-bold", sans-serif;
  font-size: 1.4rem;
  line-height: 2.5rem;
  color: #353535;
  margin: 0;
  padding: 0;
}

section{
  padding: 4.8rem 0 !important;
  padding: 6rem 0 !important;
}

/* ------------------------------------------------------------------- 
 * links - (_document-setup) 
 * ------------------------------------------------------------------- */



/* ===================================================================
 *  03. typography & general theme styles - (_document-setup.scss) 
 *
 * ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h01, .h02, .h03, .h04, .h05, .h06 {
  font-family: "montserrat-bold", sans-serif;
  color: #151515;
  font-style: normal;
  text-rendering: optimizeLegibility;
  margin-bottom: 2.1rem;
}

h3, .h03, h4, .h04 {
  margin-bottom: 1.8rem;
}

h5, .h05, h6, .h06 {
  margin-bottom: 1.2rem;
}

h1, .h01 {
  font-size: 3.1rem;
  line-height: 1.35;
  letter-spacing: -.1rem;
}
@media only screen and (max-width: 600px) {
  h1, .h01 {
    font-size: 2.6rem;
    letter-spacing: -.07rem;
  }
}

h2, .h02 {
  font-size: 2.4rem;
  line-height: 1.25;
}

h3, .h03 {
  font-size: 2rem;
  line-height: 1.5;
}

h4, .h04 {
  font-size: 1.7rem;
  line-height: 1.76;
}

h5, .h05 {
  font-size: 1.7rem;
  line-height: 1.765;
  text-transform: uppercase;
  letter-spacing: .2rem;
}

h6, .h06 {
  font-size: 1.3rem;
  line-height: 1.85;
  text-transform: uppercase;
  letter-spacing: .2rem;
}

p img {
  margin: 0;
}

p.lead {
  font-family: sans-serif;
  font-size: 2rem;
  line-height: 1.6;
  color: #2e383f;
}
@media only screen and (max-width: 768px) {
  p.lead {
    font-size: 1.8rem;
  }
}



/* ===================================================================
 *  04. Preloader
 *
 * ------------------------------------------------------------------- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0F1215;
  z-index: 800;
  height: 100%;
  width: 100%;
}

.no-js #preloader, .oldie #preloader {
  display: none;
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  padding: 0;
  background-color: #07617d;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}



/* ------------------------------------------------------------------- 
 * Style Placeholder Text - (_forms.scss)
 * ------------------------------------------------------------------- */
::-webkit-input-placeholder {
  color: #8e8e8e;
}

:-moz-placeholder {
  color: #8e8e8e;
  /* Firefox 18- */
}

::-moz-placeholder {
  color: #8e8e8e;
  /* Firefox 19+ */
}

:-ms-input-placeholder {
  color: #8e8e8e;
}

.placeholder {
  color: #8e8e8e !important;
}

/* ------------------------------------------------------------------- 
 * Change Autocomplete styles in Chrome - (_forms.scss)
 * ------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: #fabc5a;
  transition: background-color 5000s ease-in-out 0s;
}


/* ===================================================================
 *  06. buttons - (_button-essentials.scss)
 *
 * ------------------------------------------------------------------- 
.button,
a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  font-family: "montserrat-bold", sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .3rem;
  height: 5.4rem;
  line-height: 5.4rem;
  padding: 0 3rem;
  margin: 0 .3rem 1.2rem 0;
  background: #A5A5A5;
  color: #222222;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  border: none;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.button:hover,
a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  background: #989898;
  color: #000000;
  outline: 0;
}

.button.button-primary,
a.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  background: #151515;
  color: #FFFFFF;
}

.button.button-primary:hover,
a.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  background: #030303;
}

button.full-width, .button.full-width {
  width: 100%;
  margin-right: 0;
}

button.medium, .button.medium {
  height: 5.7rem !important;
  line-height: 5.7rem !important;
  padding: 0 1.8rem !important;
}

button.large, .button.large {
  height: 6rem !important;
  line-height: 6rem !important;
  padding: 0rem 3rem !important;
}

button.stroke, .button.stroke {
  background: transparent !important;
  border: 3px solid #313131;
  line-height: 4.8rem;
}

button.stroke.medium, .button.stroke.medium {
  line-height: 5.1rem !important;
}

button.stroke.large, .button.stroke.large {
  line-height: 5.4rem !important;
}

button.stroke:hover, .button.stroke:hover {
  border: 3px solid #f9a828;
  color: #f9a828;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}


/* ===================================================================
 *  07. other components - (_others.scss)
 *
 * ------------------------------------------------------------------- */



/* ------------------------------------------------------------------- 
 * additional typo styles - (_additional-typo.scss)
 * ------------------------------------------------------------------- */
/* drop cap 
 * ----------------------------------------------- */
.drop-cap:first-letter {
  float: left;
  margin: 0;
  padding: 1.5rem .6rem 0 0;
  font-size: 8.4rem;
  font-family: "montserrat-bold", sans-serif;
  line-height: 6rem;
  text-indent: 0;
  background: transparent;
  color: #151515;
}




/* ===================================================================
 *  08. common and reusable styles 
 *
 * ------------------------------------------------------------------- */
.section-intro {
  text-align: center;
  position: relative;
  margin-bottom: 1.5rem;
}
.section-intro h1 {
  font-family: sans-serif;
  font-size: 4.8rem;
  line-height: 1.375;
  color: #151515;
}
.section-intro h3 {
  font-family: "montserrat-bold", sans-serif;
  font-size: 1.8 rem;
  line-height: 1.667;
  color: rgba(242, 242, 242, 0.5);
  text-transform: uppercase;
  letter-spacing: .3rem;
  margin-bottom: 1.2rem;
}
.section-intro .lead {
  font-family: "montserrat-regular", sans-serif;
  font-size: 1.8;
  line-height: 1.833;
}
.section-intro.with-bottom-sep {
  padding-bottom: 4.2rem;
  position: relative;
}
.section-intro.with-bottom-sep::after {
  display: inline-block;
  height: 1px;
  width: 200px;
  background-color: rgba(242, 242, 242, 0.1);
  text-align: center;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * section-intro
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
  .section-intro h1 {
    font-size: 4.4rem;
  }
  .section-intro .lead {
    font-size: 1.7rem;
  }
}
@media only screen and (max-width: 768px) {
  .section-intro h1 {
    font-size: 4rem;
  }
  .section-intro h3 {
    font-size: 1.7rem;
  }
}
@media only screen and (max-width: 600px) {
  .section-intro h1 {
    font-size: 3.4rem;
  }
  .section-intro h3 {
    font-size: 1.7rem;
  }
}
@media only screen and (max-width: 500px) {
  .section-intro h3 {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 400px) {
  .section-intro h1 {
    font-size: 3.1rem;
  }
}
.wide {
  max-width: 1300px;
}

.narrow {
  max-width: 800px;
}

.js .animate-this, .js .animate-intro {
  opacity: 0;
}

.oldie .animate-this,
.oldie .animate-intro
.no-cssanimations .animate-this,
.no-cssanimations .animate-intro {
  opacity: 1;
}


/* ===================================================================
 *  09. header styles - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
header {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 700;
}
header .row {
  height: auto;
  max-width: 1300px;
  position: relative;
}

/* ------------------------------------------------------------------- 
 * header logo - (_layout.css) 
 * ------------------------------------------------------------------- */
header .header-logo {
  position: absolute;
  left: 32px;
  top: 42px;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
header .header-logo a {
  display: block;
  margin: 0;
  padding: 0;
  outline: 0;
  border: none;
  width: 57px;
  height: 27px;
  background-size: 57px 27px;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

/* ------------------------------------------------------------------- 
 * menu trigger - (_layout.css) 
 * ------------------------------------------------------------------- */
#header-menu-trigger {
  display: block;
  position: fixed;
  right: 32px;
  top: 30px;
  height: 42px;
  width: 42px;
  line-height: 42px;
  font-family: "montserrat-regular", sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
  color: rgba(255, 255, 255, 0.5);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#header-menu-trigger.opaque {
  background-color: #07617d;
}
#header-menu-trigger.opaque .header-menu-text {
  background-color: #07617d;
}
#header-menu-trigger:hover, #header-menu-trigger:focus {
  color: #FFFFFF;
}
#header-menu-trigger .header-menu-text {
  display: block;
  position: absolute;
  top: 0;
  left: -75px;
  width: 75px;
  text-align: center;
  background-color: transparent;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#header-menu-trigger .header-menu-icon {
  display: block;
  height: 3px;
  width: 24px;
  background-color: #FFFFFF;
  position: absolute;
  top: 50%;
  right: 9px;
  margin-top: -1.5px;
}
#header-menu-trigger .header-menu-icon::before, 
#header-menu-trigger .header-menu-icon::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: inherit;
  position: absolute;
  left: 0;
}
#header-menu-trigger .header-menu-icon::before {
  top: -9px;
}
#header-menu-trigger .header-menu-icon::after {
  bottom: -9px;
}

/* ------------------------------------------------------------------- 
 * off-canvas menu - (_layout.scss) 
 * ------------------------------------------------------------------- */
#menu-nav-wrap {
  background: #064b61;
  color: rgba(255, 255, 255, 0.25);
  font-size: 2rem;
  line-height: 1.6;
  padding: 3.6rem 3rem;
  height: 100%;
  width: 240px;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  overflow-y: auto;
  z-index: 800;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
#menu-nav-wrap a, #menu-nav-wrap a:visited {
  color: rgba(255, 255, 255, 0.5);
}
#menu-nav-wrap a:hover, #menu-nav-wrap a:focus, #menu-nav-wrap a:active {
  color: white;
}
#menu-nav-wrap h3 {
  color: white;
  font-family: "montserrat-regular", sans-serif;
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
#menu-nav-wrap .nav-list {
  font-family: "montserrat-regular", sans-serif;
  margin: 3.6rem 0 1.5rem 0;
  padding: 0 0 1.8rem 0;
  list-style: none;
  line-height: 3.6rem;
}
#menu-nav-wrap .nav-list li {
  padding-left: 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.03);
  line-height: 4.2rem;
}
#menu-nav-wrap .nav-list li:first-child {
  border-top: 1px dotted rgba(255, 255, 255, 0.03);
}
#menu-nav-wrap .nav-list li a {
  color: white;
  display: block;
}
#menu-nav-wrap .nav-list li a:hover, 
#menu-nav-wrap .nav-list li a:focus {
  color: rgba(255, 255, 255, 0.25);
}
#menu-nav-wrap .header-social-list {
  list-style: none;
  display: inline-block;
  margin: 0;
  font-size: 2.1rem;
}
#menu-nav-wrap .header-social-list li {
  margin-right: 12px;
  padding-left: 0;
  display: inline-block;
}
#menu-nav-wrap .header-social-list li a {
  color: rgba(255, 255, 255, 0.15);
}
#menu-nav-wrap .header-social-list li a:hover, 
#menu-nav-wrap .header-social-list li a:focus {
  color: white;
}
#menu-nav-wrap .header-social-list li:last-child {
  margin: 0;
}
#menu-nav-wrap .close-button {
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 36px;
  right: 30px;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
#menu-nav-wrap .close-button span::before, 
#menu-nav-wrap .close-button span::after {
  content: "";
  display: block;
  height: 2px;
  width: 12px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 9px;
  margin-top: -1px;
}
#menu-nav-wrap .close-button span::before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#menu-nav-wrap .close-button span::after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#menu-nav-wrap .sponsor-text {
  font-family: "librebaskerville-regular", serif;
  font-size: 1.4rem;
  line-height: 3rem;
}
#menu-nav-wrap .sponsor-text span {
  color: rgba(255, 255, 255, 0.5);
}

/* menu is open */
.menu-is-open #menu-nav-wrap {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * header section 
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
  header .header-logo a {
    width: 51px;
    height: 24px;
    background-size: 51px 24px;
  }
}
@media only screen and (max-width: 400px) {
  #header-menu-trigger .header-menu-text {
    display: none;
  }
}


/* ===================================================================
 *  10. home - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#home {
  width: 100%;
  height: 100%;
  background-color: #151515;
  background-image: url("/assets/img/architecture-blue-building-411595.jpg");
  background-repeat: no-repeat;
  background-position: center 30%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  min-height: 804px;
  position: relative;
}
#home .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .2;
  background-color: #19191b;
}

.home-content-table {
  width: 100%;
  height: 100%;
  display: table;
  position: relative;
  text-align: center;
}

.home-content-tablecell {
  display: table-cell;
  vertical-align: middle;
  z-index: 500;
}
.home-content-tablecell .row {
  position: relative;
  padding-top: 16.2rem;
  padding-bottom: 15rem;
}
.home-content-tablecell h3 {
  font-family: "montserrat-bold", sans-serif;
  font-size: 2.2rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: .3rem;
  margin: 0 0 .9rem 0;
}
.home-content-tablecell h1 {
  font-family: "montserrat-bold", serif;
  font-size: 9rem;
  line-height: 1.133;
  color: #FFFFFF;
}
.home-content-tablecell .more {
  margin: 4.8rem 0 0 0;
}
.home-content-tablecell .more .button {
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* home social-list */
.home-social-list {
  position: absolute;
  left: 48px;
  bottom: 54px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 2.4rem;
  line-height: 1.75;
  text-align: center;
}
.home-social-list::before {
  display: block;
  content: "";
  width: 2px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.3);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}
.home-social-list li {
  padding-left: 0;
}
.home-social-list li a, .home-social-list li a:visited {
  color: #FFFFFF;
}
.home-social-list li a:hover, 
.home-social-list li a:focus, 
.home-social-list li a:active {
  color: #151515;
}

/* scroll down */
.scrolldown {
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: right top 0;
  -ms-transform-origin: right top 0;
  transform-origin: right top 0;
  float: right;
}
.scrolldown i {
  padding-left: 9px;
}
.scrolldown a:hover, .scrolldown a:focus, .scrolldown a:active {
  color: #151515 !important;
}

html[data-useragent*='MSIE 10.0'] .scrolldown,
.oldie .scrolldown {
  display: none;
}

.scroll-icon {
  display: inline-block;
  font-family: "montserrat-bold", sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .3rem;
  color: #FFFFFF !important;
  background: transparent;
  position: relative;
  top: 36px;
  right: 42px;
  -webkit-animation: animate-it 3s ease infinite;
  animation: animate-it 3s ease infinite;
}

/* vertical animation */
@-webkit-keyframes animate-it {
  0%, 60%, 80%, 100% {
    -webkit-transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-5px);
  }
  40% {
    -webkit-transform: translateX(20px);
  }
}
@keyframes animate-it {
  0%, 60%, 80%, 100% {
    -webkit-transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-5px);
  }
  40% {
    -webkit-transform: translateX(20px);
  }
}

/* ------------------------------------------------------------------- 
 * responsive:
 * home section 
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {
  .home-content-tablecell h3 {
    font-size: 2.1rem;
  }
  .home-content-tablecell h1 {
    font-size: 7rem;
  }
}
@media only screen and (max-width: 1024px) {
  .home-content-tablecell h3 {
    font-size: 2rem;
  }
  .home-content-tablecell h1 {
    font-size: 6rem;
  }
}
@media only screen and (max-width: 768px) {
  .home-content-tablecell .row {
    max-width: 600px;
  }
  .home-content-tablecell h3 {
    font-size: 1.8rem;
  }
  .home-content-tablecell h1 {
    font-size: 5.2rem;
  }
  .home-content-tablecell h1 br {
    display: none;
  }

  .home-social-list {
    left: 36px;
    bottom: 30px;
    font-size: 2.1rem;
  }
  .home-social-list::before {
    height: 30px;
  }

  .scrolldown .scroll-icon {
    font-size: 1.2rem;
    top: 24px;
    right: 10px;
  }
}
@media only screen and (max-width: 600px) {
  #home {
    min-height: 702px;
  }

  .home-content-tablecell .row {
    max-width: 480px;
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
  .home-content-tablecell h3 {
    font-size: 1.7rem;
  }
  .home-content-tablecell h1 {
    font-size: 4.8rem;
  }
}
@media only screen and (max-width: 500px) {
  .home-content-tablecell .row {
    max-width: 420px;
  }
  .home-content-tablecell h3 {
    font-size: 1.5rem;
  }
  .home-content-tablecell h1 {
    font-size: 4.2rem;
  }

  .home-social-list {
    left: 30px;
    bottom: 30px;
    font-size: 1.8rem;
  }
  .home-social-list::before {
    height: 24px;
  }
}
@media only screen and (max-width: 400px) {
  #home {
    min-height: 654px;
  }

  .home-content-tablecell .row {
    padding-top: 4.8rem;
    padding-bottom: 10.8rem;
  }
  .home-content-tablecell h3 {
    font-size: 1.4rem;
  }
  .home-content-tablecell h1 {
    font-size: 3.6rem;
  }
}


/* ===================================================================
 *  11. about - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#about {
  position: relative;
  padding: 4.2rem 0;
  background-color: var(--bg-rows-1);
  text-align: center;
}

#about .about-wrap {
  max-width: 1200px;
}
#about span,
#services .services-list .service-item span{
  color: #07617d;
}
#about h2 {
  font-family: "montserrat-bold", sans-serif;
  font-size: 3rem;
  line-height: 1.667;
  color: #07617d;
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
  margin-bottom: 2rem;
}
#about h3::before {
  display: block;
  content: "";
  width: 3px;
  height: 9.6rem;
  background-color: rgba(149, 149, 149, 0.7);
  margin: 0 auto 2.4rem;
}


/* ------------------------------------------------------------------- 
 * responsive:
 * about 
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
  #about {
    min-height: 636px;
  }
  #about .about-wrap {
    max-width: 800px;
  }
  #about .lead {
    font-size: 3.8rem;
  }
}
@media only screen and (max-width: 900px) {
  #about .about-wrap {
    max-width: 720px;
  }
  #about .lead {
    font-size: 3.6rem;
  }
}
@media only screen and (max-width: 768px) {
  #about h3 {
    font-size: 1.7rem;
  }
  #about .about-wrap {
    max-width: 600px;
  }
  #about .lead {
    font-size: 3.1rem;
  }
}
@media only screen and (max-width: 600px) {
  #about {
    min-height: auto;
  }
  #about .about-wrap {
    max-width: 500px;
  }
  #about .lead {
    margin-top: 4.8rem;
    font-size: 2.8rem;
  }
}
@media only screen and (max-width: 500px) {
  #about h3 {
    font-size: 1.5rem;
  }
  #about .lead {
    font-size: 2.5rem;
  }
}
@media only screen and (max-width: 400px) {
  #about {
    padding: 4.2rem 0 9.6rem;
  }
  #about .about-wrap {
    max-width: 380px;
  }
  #about .lead {
    font-size: 2.3rem;
  }
}


/* ===================================================================
 *  12. services - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#services {
  background-color: var(--bg-rows-1);
  position: relative;
  padding: 5rem 0;
}
#services h2 {
  font-family: "montserrat-bold", sans-serif;
  font-size: 3rem;
  text-align: center;
  line-height: 1.667;
  color: #07617d;
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
  margin-bottom: 2rem;
}
#services .section-intro h3 {
  color: rgba(242, 242, 242, 0.5);
}
#services .section-intro h1 {
  color: #2e383f;
}
#services .section-intro .lead {
  color: rgba(242, 242, 242, 0.4);
}
#services .services-content {
  text-align: center;
  max-width: auto;
}
#services .services-list {
  margin-top: 1.2rem;
  text-align: center;
}
#services .services-list .service-item {
  margin-bottom: 3rem;
  padding: 0 50px;
}
#services .services-list .service-item p {
  color: #2e383f;
}
#services .services-list .icon {
  display: inline-block;
  margin-bottom: 1.5rem;
}
#services .services-list .icon i {
  font-size: 5.4rem;
  color: #07617d;
}
#services .services-list .h05 {
  font-size: 2rem;
  line-height: 1.6;
  color: #2e383f;
  margin-bottom: 3rem;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * services
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
  #services .services-list .service-item {
    padding: 0 40px;
  }
}
@media only screen and (max-width: 900px) {
  #services .services-list .service-item {
    padding: 0 30px;
  }
}
@media only screen and (max-width: 768px) {
  #services {
    padding: 12rem 0 12rem;
  }
  #services .services-content {
    max-width: 550px;
  }
  #services .services-list .service-item {
    padding: 0 15px;
  }
  #services .services-list .icon i {
    font-size: 5.1rem;
  }
}
@media only screen and (max-width: 600px) {
  #services .services-list .service-item {
    padding: 0 10px;
  }
  #services .services-list .icon i {
    font-size: 5rem;
  }
}
@media only screen and (max-width: 400px) {
  #services .services-list .service-item {
    padding: 0;
  }
}





/* ===================================================================
 *  13. service - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#portfolio{
  background-color: var(--bg-rows-2);
}

#portfolio .background-video{
  position: absolute;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  min-height: 100%;
  min-width: 100%;
  max-width: none;

  filter: brightness(.6);
}

#portfolio .box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  min-height: 250px;
}

 #portfolio h2 {
  position: relative;
  margin-bottom: 2rem;
  text-align: center;
 }

 #portfolio p {
  position: relative;
  margin-bottom: 0;
 }


 #portfolio .container{
    width: 120rem;
    height: auto;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 50px;
    padding: 20px;
    box-sizing: border-box;
    padding-bottom: 5rem;
}

h2 {
  font-family: "montserrat-bold", sans-serif;
  font-size: 3rem;
  line-height: 1.667;
  color: #07617d;
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
  margin-bottom: 4.2rem;
}



.intro-wrap {
  padding: 5rem 0 0rem;
  background-color: var(--bg-rows-2);
}
.section-intro h3 {
  color: rgba(242, 242, 242, 0.5);
}
.section-intro .lead {
  color: rgba(242, 242, 242, 0.4);
}

.container .box{
    position: relative;
    padding: 20px 40px 40px;

    background: #fff;
    text-align: center;
    overflow: hidden;
    border-radius: 20px;
}

.container .box:nth-child(1){
    background-color: #07617d;
    
}

.container .box h2{
  font-family: "montserrat-bold", sans-serif;
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 2.5rem;
  color: #fff;
  z-index: 1;
}

.container .box h3{
  margin: 0;
  padding: 0;
  font-size: 24px;
  color: #fff;
  text-transform: uppercase;
}

.container .box p{
color: #fff;
margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
p {
  font-size: 1.8rem;
}
}



@media only screen and (max-width: 768px) {
  #portfolio h2 {
    font-size: 1.5rem;
  }

 }
@media only screen and (max-width: 600px) {
  #portfolio .container {
    width: 90%;
  }
 }
@media only screen and (max-width: 500px) {
  #portfolio h2 {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 400px) {
  #portfolio .container {
    width: 100%;
  }
}
@media only screen and (max-width: 400px) {
  #portfolio .container .box {
    background: url("/assets/img/portfolio/gallery/photonic.jpg");
    background-attachment: fixed;
   
  }
}
  
   

/* ===================================================================
 *  14. testimonials - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#testimonials {
  background-color: var(--bg-rows-1);
  padding: 4.2rem 0;
  text-align: center;
    
}
#testimonials h2 {
  font-family: "montserrat-bold", sans-serif;
  font-size: 3rem;
  line-height: 1.667;
  color: #07617d;
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
  margin-bottom: 2rem;
}

#testimonials .flex-container {
  width: 100%;
  
  margin: 0 auto;
}

#testimonial-slider {
  margin: 0 0 3rem 0;
  position: relative;
}
#testimonial-slider .slides {
  padding-bottom: 3rem;
}
#testimonial-slider p {
  font-family: "librebaskerville-bold", serif;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #151515;
}
#testimonial-slider p::before, #testimonial-slider p::after {
  display: inline-block;
  font-family: "librebaskerville-bold", serif;
  font-size: 3.6rem;
  line-height: 1;
}
#testimonial-slider p::before {
  content: '\201C';
}
#testimonial-slider p::after {
  content: '\201D';
}
#testimonial-slider .testimonial-author {
  margin-top: 4.2rem;
}
#testimonial-slider .testimonial-author img {
  width: 14rem;
  height: auto;
  margin: 0 auto 1.2rem auto;
  display: block;
  border-radius: 50%;
  vertical-align: middle;
}
#testimonial-slider .testimonial-author .author-info {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-family: "librebaskerville-bold", sans-serif;
  font-size: 2rem;
  margin-top: .9rem;
  margin-bottom: 3rem;
  color: #151515;
}
#testimonial-slider .testimonial-author .author-info span {
  display: block;
  font-family: "montserrat-bold", sans-serif;
  font-size: 1.6rem;
  line-height: 1.313;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(0, 0, 0, 0.5);
  margin-top: .3rem;
}

/* control nav */
#testimonials .flex-control-nav {
  width: 100%;
  text-align: center;
  display: block;
  position: absolute;
  bottom: -1.5rem;
}
#testimonials .flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
}

body .flex-control-paging li a {
  width: 9px;
  height: 9px;
  background-color: #959595;
  display: block;
  cursor: pointer;
  border-radius: 50%;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
body .flex-control-paging li a:hover {
  background-color: #555555;
}
body .flex-control-paging li a.flex-active {
  background-color: #000000;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * testimonials
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
  #testimonial-slider p {
    font-size: 2.8rem;
  }
}
@media only screen and (max-width: 768px) {
  #testimonials h2 {
    font-size: 1.8rem;
  }

  #testimonial-slider p {
    font-size: 1.5rem;
  }
  #testimonial-slider .testimonial-author img {
    width: 10.6rem;
    height: 10.6rem;
  }
  #testimonial-slider .testimonial-author .author-info {
    font-size: 1.8rem;
  }
  #testimonial-slider .testimonial-author .author-info span {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 600px) {
  #testimonials .flex-container {
    width: 90%;
  }

  #testimonial-slider p {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 500px) {
  #testimonials h2 {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 400px) {
  #testimonials .flex-container {
    width: 100%;
  }

  #testimonial-slider p {
    font-size: 1.5rem;
  }
}


/* ===================================================================
 *  15. clients - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#clients {
  padding: 4.8rem 0 4.8rem;

  text-align: center;
  background-color: var(--bg-rows-1);
}

#clients h2 {
  font-family: "montserrat-bold", sans-serif;
  font-size: 3rem;
  line-height: 1.667;
  color: #07617d;
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
  margin-bottom: 4.2rem;
}
#clients .client-lists .owl-item {
  opacity: .6;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
#clients .client-lists .owl-item:hover {
  opacity: 1;
}
#clients .owl-carousel .owl-nav {
  margin-top: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#clients .owl-carousel .owl-nav [class*='owl-'] {
  color: #FFFFFF;
  font-family: "montserrat-bold", sans-serif;
  font-size: 1.4rem;
  height: 3rem;
  line-height: 3rem;
  margin: .6rem;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.5);
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
}
#clients .owl-carousel .owl-nav [class*='owl-']:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  text-decoration: none;
}
#clients .owl-carousel .owl-nav .disabled {
  background: rgba(0, 0, 0, 0.2);
  cursor: default;
}
#clients .owl-carousel .owl-nav.disabled + .owl-dots {
  margin-top: 1.8rem;
}
#clients .owl-carousel .owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#clients .owl-carousel .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  *display: inline;
}
#clients .owl-carousel .owl-dots .owl-dot span {
  width: 9px;
  height: 9px;
  background-color: #959595;
  margin: 6px 6px;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity 200ms ease;
  border-radius: 50%;
}
#clients .owl-carousel .owl-dots .owl-dot.active span,
#clients .owl-carousel .owl-dots .owl-dot:hover span {
  background-color: #000000;
}

/* Daring Ones */
#daring-ones {
  padding: 4.8rem 0 3rem 0;
  text-align: center;
  background-color: var(--bg-rows-2);
}
#daring-ones h2 {
  font-family: "montserrat-bold", sans-serif;
  font-size: 3rem;
  line-height: 1.667;
  color: #07617d;
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
  margin-bottom: 4.2rem;
}


/* Investors */
#investors {
  padding: 4.8rem 0 4.8rem;
  text-align: center;
  background-color: var(--bg-rows-2);
}
#investors h2 {
  font-family: "montserrat-bold", sans-serif;
  font-size: 3rem;
  line-height: 1.667;
  color: #07617d;
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
  margin-bottom: 4.2rem;
}
#investors .owl-carousel .owl-nav {
  margin-top: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#investors .owl-carousel .owl-nav [class*='owl-'] {
  color: #FFFFFF;
  font-family: "montserrat-bold", sans-serif;
  font-size: 1.4rem;
  height: 3rem;
  line-height: 3rem;
  margin: .6rem;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.5);
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
}
#investors .owl-carousel .owl-nav [class*='owl-']:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  text-decoration: none;
}
#investors .owl-carousel .owl-nav .disabled {
  background: rgba(0, 0, 0, 0.2);
  cursor: default;
}
#investors .owl-carousel .owl-nav.disabled + .owl-dots {
  margin-top: 1.8rem;
}
@media(min-width: 600px){
  #investors .owl-stage-outer,
  #investors .owl-stage{
    display: flex;
    align-items: center;
    /*justify-content: center;*/
  }
}
#investors .owl-carousel .owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#investors .owl-carousel .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  *display: inline;
}
#investors .owl-carousel .owl-dots .owl-dot span {
  width: 9px;
  height: 9px;
  background-color: #959595;
  margin: 6px 6px;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity 200ms ease;
  border-radius: 50%;
}
#investors .owl-carousel .owl-dots .owl-dot.active span,
#investors .owl-carousel .owl-dots .owl-dot:hover span {
  background-color: #000000;
}


/* Industry Advisor */
#industry-advisor {
  border-top: 50px solid var(--bg-rows-1);

  padding: 4.6rem 0 3rem 0 !important;
  text-align: center;
  background-color: var(--bg-rows-2);
}
#industry-advisor h2 {
  font-family: "montserrat-bold", sans-serif;
  font-size: 3rem;
  line-height: 1.667;
  color: #07617d;
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
  margin-bottom: 4.2rem;
}

/* ===================================================================
 *  16. News
 *
 * ------------------------------------------------------------------- */

#top-container {
    font-family: "montserrat-bold", sans-serif;
    background-size: cover;
    background-position: center;
    padding: 4.8rem 0 4.8rem;
    box-sizing: border-box;
    display: grid;
    grid-gap: 20px;
    justify-content: center;
    background: url("/assets/img/architecture-blue-building-411595.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
}
#top-container h2{ 
    color: white;
}
#top-container .top-container1 {
    
    background-size: cover;
    background-position: center;
    padding: 4.8rem 0 4.8rem;
    box-sizing: border-box;
    display: grid;
    grid-gap: 20px;
    justify-content: center;
    grid-template-areas: 
        'showcase showcase top-box-a'
        'showcase showcase top-box-b';
    margin: -50px 30px 0px 30px;
}

.top-container1 h3{
    color: #07617d;
}
/* Showcase*/
#top-container .showcase {
    
    grid-area: showcase;
    max-width: 1300px;
    background-color: white;
    background-size: cover;
    background-position: center;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: strart;
    justify-content: center;
    box-shadow: 0 3px 10px black;
    border-radius: 20px;
    
    
   
}
#top-container .showcase .more {
     display: none;
}


#top-container .top-box-a {
    
    grid-area: top-box-a;
    box-shadow: 0 3px 10px black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 20px;
   
    
}


#top-container .top-box-b {
    background-color: white;
    grid-area: top-box-b;
    box-shadow: 0 5px 12px black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    
}

#top-container .top-container1 .btn2{
   background-color: white; 
}
#top-container .top-container1 .btn2:hover{
    background-color: #07617d;
}

#top-container .top-box-a .btn2 {
    background-color: white;
}
#top-container .top-box-a .btn2:hover {
    background-color: #07617d;
}
#top-container .top-box-b .btn2 {
    background-color: white;
}
#top-container .top-box-b .btn2:hover {
    background-color: #07617d;
}

 /*------------------------------------------------------------------- 
  * Responsive 
  *------------------------------------------------------------------- */
@media(max-width:700px){
    #top-container .top-container1{
        'showcase showcase'
        'top-box-a top-box-b';
    }
    #top-container .showcase h1 {
        font-size: 2.5rem;
    }
    #top-container.btn2 {
        display: block;
        text-align: center;
        margin: auto;
    }
}

@media(max-width: 500px){
     #top-container .top-container1{
         grid-template-areas: 
        'showcase'
        'top-box-a'
        'top-box-b';
}
   
}



/* ===================================================================
 *  17. footer - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#footer-distributed{
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;

	padding: 55px 50px;
	margin-top: 20px;
}

#footer-distributed .footer-left,
#footer-distributed .footer-center,
#footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}

/* Footer left */

#footer-distributed .footer-left{
	width: 40%;
    margin-top: -5rem;
}

/* The company logo */

#footer-distributed h3{
	color:  #ffffff;
	font: normal 36px 'Cookie', cursive;
	margin: 0;
}

#footer-distributed h3 span{
	color:  #5383d3;
}

/* Footer links */

#footer-distributed .footer-links{
	color:  #ffffff;
	margin: 20px 0 12px;
	padding: 0;
}

#footer-distributed a{
	display: inline-block;
	line-height: 1.8;
	text-decoration: none;
	color: #ffffff;
  text-decoration: underline;
}

#footer-distributed a:hover{
	color: #8f9296;
}

#footer-distributed .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}

/* Footer Center */

#footer-distributed .footer-center{
	width: 35%;
    margin-top: -5rem;
}

#footer-distributed .footer-center i{
	background-color:  #33383b;
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}

#footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}

#footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	margin:0;
}

#footer-distributed .footer-center p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}


/* Footer Right */

#footer-distributed .footer-right{
	width: 20%;
    top: -20%;
}

#footer-distributed .footer-company-about{
	line-height: 20px;
	color:  #19191b;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}

#footer-distributed .footer-company-about span{
	display: block;
	color:  #ffffff;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
}

#footer-distributed .footer-icons{
	margin-top: 25px;
}

#footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;

	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;

	margin-right: 3px;
	margin-bottom: 5px;
}

/* Footer responsive */

@media (max-width: 880px) {

	#footer-distributed{
		font: bold 14px sans-serif;
	}

	#footer-distributed .footer-left,
	#footer-distributed .footer-center,
	#footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}

	#footer-distributed .footer-center i{
		margin-left: 0;
	}

}




#go-top {
  position: fixed;
  bottom: 42px;
  right: 30px;
  z-index: 700;
  display: none;
}
#go-top a {
  text-decoration: none;
  border: 0 none;
  display: block;
  height: 63px;
  width: 60px;
  line-height: 63px;
  text-align: center;
  background-color: #07617d;
  color: #888;
  text-align: center;
  text-transform: uppercase;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#go-top a i {
  font-size: 1.7rem;
  line-height: inherit;
}
#go-top a:visited {
  background: #000000;
  color: #888;
}
#go-top a:hover, #go-top a:focus {
  background: #000000;
  color: #FFFFFF;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * footer
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
  #go-top {
    bottom: 0;
    right: 0;
  }
}

/* FM - 2020-11-21 */
.card-area{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  margin-bottom: 30px;
}

.card{
  position: relative;
  width: 100%;
  padding: 10px 10px 15px 10px;
  margin: 15px;
  
  border: 1px solid #eee;
  background: #fffc;
}

.card .card-date{
  position: absolute;
  width: 110px;
  right: 0;
  top: 0;
  padding: 0 5px;

  font-family: "montserrat-bold", sans-serif;
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}

.card-title{
  margin-top: 25px;

  color: #333;
  font-family: "librebaskerville-bold", serif;
  text-align: center;
  font-size: 1.6rem;
}

.card .card-badge{
  position: absolute;
  width: 115px;
  left: 0;
  top: 0;
  padding: 0 10px;
  
  font-family: "montserrat-bold", sans-serif;
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}

.card.card-report{
  border-color: #07617d;
}

.card.card-report .card-badge{
  background-color: #07617d;
}

.card.card-report .btn-news{
  background-color: #07617d;
}

.card.card-report .btn-news:hover,
.card.card-report .btn-news:focus,
.card.card-report .btn-news:active{
  background: #064b61;
}

.card.card-report .card-date{
  background: #07617d;
}

.card.card-deals{
  border-color: #F5912F;
}

.card.card-deals .card-badge{
  background-color: #F5912F;
}

.card.card-deals .btn-news{
  background-color: #F5912F;
}

.card.card-deals .btn-news:hover,
.card.card-deals .btn-news:focus,
.card.card-deals .btn-news:active{
  background: #CF7D2C;
}

.card.card-deals .card-date{
  background: #F5912F;
}

.card.card-other{
  border-color: #787878;
}

.card.card-other .card-badge{
  background-color: #787878;
}

.card.card-other .btn-news{
  background-color: #787878;
}

.card.card-other .btn-news:hover,
.card.card-other .btn-news:focus,
.card.card-other .btn-news:active{
  background: #636262;
}

.card.card-other .card-date{
  background: #787878;
}


.mb-30{
  margin-bottom: 30px;
}

.btn{
  display: inline-block;
  padding: 3px 8px;
  margin: 10px 0 0 0;

  font-family: "montserrat-bold", sans-serif;
  color: white;
  font-weight: bold;
  font-size: 12px;
}

.card .btn{
  margin-top: 10px;
}

.btn-blue{
  background: #07617d;

  font-family: "montserrat-bold", sans-serif;
  color: white;
  font-weight: bold;
  font-size: 12px;
}

.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active{
  background: #064b61;
}


/* News */
#news{
  padding: 60px 0 30px 0;
  background-color: var(--bg-rows-1);

  background-image: url("/assets/img/press-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

#news h2{
  margin-bottom: 0;

  color: #fff;
}

/* News - Others */
.news-others{
  padding: 60px 0;
  margin-top: 60px;

  background: #eee;
}

/* Contact */
#contact{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
  padding: 90px 0 !important;

  background-color: var(--bg-rows-2);
  background-image: url("/assets/img/contact-bg.jpg");
  background-size: cover;
  background-position: center 30px;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  #contact{
    background-position: center 0px;
  }
}

#contact h2{
  color: #07617d;
}

.contact-buttons .btn-blue{
  margin: 0 10px;

  padding: 10px 40px;
  font-size: 16px;
}

.contact-buttons .btn-blue i{
  margin-right: 8px;
}

#testimonial-slider .contact{
  margin-top: 5px;

  color: #888;
  font-size: 1.4rem;
  line-height: 1.5;
  font-family: "montserrat-bold", sans-serif;
}

#testimonial-slider .contact a{
  color: #07617d;
  font-size: 1.4rem;
  font-family: "montserrat-bold", sans-serif;
}

#testimonial-slider .contact a:hover,
#testimonial-slider .contact a:focus,
#testimonial-slider .contact a:active{
  text-decoration: underline;
}

@media only screen and (max-width: 768px) {
  .contact-buttons .btn-blue{
    display: block;
    width: 100%;
    margin: 15px 0 0 0;

  }
}

/* Owl Slider */
.owl-carousel .owl-dots .owl-dot span,
#testimonials .flex-control-paging li a,
#clients .owl-carousel .owl-dots .owl-dot span {
  width: 15px;
  height: 15px;
}

/* News Page */
.news-page header{
  position: relative;
  height: 100px;

  background-color: #07617d;
}

.news-page .header-logo{
  top: 40px;
}

.news-page .header-logo a{
  width: auto;

  color: #fff;
  font-size: 3rem;
}

.brand-small{ display: none !important; }
.brand-big{ display: inline-block !important; }

@media only screen and (max-width: 880px) {
  .brand-small{ display: inline-block !important; }
  .brand-big{ display: none !important; }
}

.news-page #news{
  background: #fff;
  padding: 60px 20px;
}

.news-page #news .news-header,
.news-page #news .news-container,
.news-page #news .news-team-headline,
.news-page #news .news-team{
  max-width: 990px;
  margin: 0 auto;
}

.news-page #news .news-header{
  padding: 40px 20px;

  background-image: url("/assets/img/press-bg-light.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.news-page h1{
  font-family: "montserrat-bold", sans-serif;
  font-size: 2rem;
  line-height: 1.667;
  color: #07617d;
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
  margin-bottom: 0;
}

.news-page #news .news-container{
  padding: 20px;

  background: #eee;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.news-page #news .news-container p{
  padding: 10px 0;
}

.news-page #news .news-container .date{
  padding: 0 15px 10px 0px;
  border-bottom: 1px solid #ccc;

  color: #064b61;
}

.news-page #news .news-container p:first-of-type{
  padding-top: 0;
}

.news-page #news .news-container p:last-of-type{
  padding-bottom: 0;
}

.news-page #news .news-team-headline{
  margin-top: 50px;
  margin-bottom: 20px;
}

.news-page #news .news-team-headline h2{
  color: #07617d;
  text-align: center;
}

.news-page #news .news-team{
  display: flex;
  justify-content: start;
  flex-wrap: wrap;

  margin-top: 10px;
}

.news-page #news .team-member{
  display: flex;
  width: 290px;
  padding-right: 10px;
  margin-right: 10px;
  margin-bottom: 30px;

  border-right: 1px solid #eee;
}

@media only screen and (max-width: 930px) {
  .news-page #news .team-member{
    width: 100%;
    border-right: none;
  }
}

.news-page #news .team-member:last-of-type{
  margin-right: 0;
  border-right: none;
}

.news-page #news .team-member .image{
  width: 100px;
  margin-right: 15px;
}

.news-page #news .team-member .image img{
  height: 100px;
  width: 100px;
  border-radius: 100px;
}

.news-page #news .team-member .info .name{
  font-size: 2rem;
}

.news-page #news .team-member .info .position{
  margin-bottom: 15px;

  color: #888;
  font-size: 1.6rem;
  line-height: 1;
  font-family: "montserrat-bold", sans-serif;
}

.news-page #news .team-member .info .contact{
  color: #888;
  font-size: 1.4rem;
  line-height: 1.5;
  font-family: "montserrat-bold", sans-serif;
}

.news-page #news .team-member .info .contact a{
  color: #07617d;
  font-size: 1.4rem;
  font-family: "montserrat-bold", sans-serif;
}

.news-page #news .team-member .info .contact a:hover,
.news-page #news .team-member .info .contact a:active,
.news-page #news .team-member .info .contact a:focus{
  text-decoration: underline;
}

/* Jobs */
.jobs{
  padding: 4.2rem 0 5.5rem 0;

  background-color: var(--bg-rows-2); 
  text-align: center; 
}

.btn-jobs{
  background-color: #07617d;
  color: #fff !important;
}

.btn-jobs:hover,
.btn-jobs:focus,
.btn-jobs:active{
  background-color: #064b61;
}

/* Jobs - Page */
.jobs-page header{
  position: relative;
  height: 100px;

  background-color: #07617d;
}

.jobs-page .header-logo{
  top: 40px;
}

.jobs-page .header-logo a{
  width: auto;

  color: #fff;
  font-size: 3rem;
}

.jobs-page #jobs{
  background: #fff;
  padding: 60px 20px;
}

.jobs-page #jobs .jobs-header,
.jobs-page #jobs .jobs-container,
.jobs-page #jobs .jobs-team-headline,
.jobs-page #jobs .jobs-team{
  max-width: 990px;
  margin: 0 auto;
}

.jobs-page #jobs .jobs-header{
  padding: 40px 20px;

  background-image: url("/assets/img/jobs-bg.jpg");
  background-size: cover;
  background-position: center;
  background-color: #064b61;
  color: #fff;
  
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.jobs-page #jobs .jobs-header h1{
  color: #fff;
}

.jobs-page h1{
  font-family: "montserrat-bold", sans-serif;
  font-size: 2rem;
  line-height: 1.667;
  color: #07617d;
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
  margin-bottom: 0;
}

.jobs-page #jobs .jobs-container p{
  padding: 10px 0;
}

.jobs-page #jobs .jobs-container .skill-list{
  margin-bottom: 30px;
}

.jobs-page #jobs .jobs-container .skill-list ul{
  padding-left: 20px;
  margin-top: 0;
  margin-bottom: 0;

  list-style-type: square;
}

.jobs-page #jobs .jobs-container .skill-list li::marker {
  color: #07617d;
}

.jobs-page #jobs .jobs-container{
  padding: 20px;

  background: #eee;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.jobs-page a{
  color: #07617d;
}

/* Footer */
.footer-right nav{
  text-align: right;
}

.footer-right nav a{
  color: #5383d3;
  text-decoration: none;
}

.footer-right nav a:hover,
.footer-right nav a:focus,
.footer-right nav a:active{
  color: #5383d3;
  text-decoration: none;
}

@media only screen and (max-width: 880px) {
  .footer-right nav{
    text-align: center;
  }
}

#imprint,
#privacy_policy{
  padding: 60px 0;

  background: #fff;
}

#imprint h1,
#privacy_policy h1{
  font-size: 3rem;
}

#imprint h2,
#privacy_policy h2{
  margin-bottom: 0;
  margin-top: 30px;

  font-size: 1.8rem;
}

#imprint h3,
#privacy_policy h3{
  margin-top: 15px;
  margin-bottom: 0;

  font-size: 1.6rem;
}

#imprint h4,
#privacy_policy h4{
  margin-top: 15px;
  margin-bottom: 0;
  
  font-size: 1.6rem;
  color: #888;
  line-height: 1.3;
}

#imprint p,
#privacy_policy p{
  margin-bottom: 10px;

  line-height: 1.6;
}

/* News-Cards */
#news-cards{
	padding: 60px 0;

  background-color: var(--bg-rows-1);
}

.news-cards{
  display: flex;
  flex-wrap: wrap;
}

.news-cards .card{
	padding: 15px;
  margin: 0;

	border: none;
	background: transparent;
}

.news-cards .card-inner{
  position: relative;
	background: #fff;
}

.news-cards .card-header{
	height: 250px;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.news-cards .card-body{
  min-height: 280px;
	padding: 20px 20px 0px 20px;
}

.news-cards .card-footer{
	padding: 5px 20px 20px 20px;
}
.news-cards .card-footer .btn{
  display: inline-block;
  padding: 3px 8px;
  margin: 10px 0 0 0;
      margin-top: 10px;
  font-family: "montserrat-bold", sans-serif;
  color: white;
  font-weight: bold;
  font-size: 12px;
}

.news-cards .card-footer .btn-blue{
  background-color: #07617d;
}

.news-cards .card-footer .btn-orange{
  background-color: #f5912f;
}

.news-cards .card-footer .btn-gray{
  background-color: #787878;
}

.news-cards .news-badge{
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 0px 10px;

  font-family: "montserrat-bold", sans-serif;
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}
.news-cards .date-badge{
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 0px 10px;

  font-family: "montserrat-bold", sans-serif;
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}

.news-cards .badge-blue{
  background-color: #07617d;
}

.news-cards .badge-orange{
  background-color: #f5912f;
}

.news-cards .badge-gray{
  background-color: #787878;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next{
  position: absolute;
  top: 238px;
  background: #07617d99;
  padding: 10px;
  color: #fff;
  font-size: 32px;
}

.owl-carousel .owl-nav .owl-prev{
  left: 0;
}

.owl-carousel .owl-nav .owl-next{
  right: 0;
}

.daring-ones.owl-carousel .owl-nav .owl-prev{
  left: -31px;
}

.daring-ones.owl-carousel .owl-nav .owl-next{
  right: -31px;
}

/* Start :: Daring Ones */
.daring-ones .box{
  position: relative;

  background-color: #07617d;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;

  transition: background 1s;
}

.daring-ones .box:hover{
  background-size: 120% 120%;
}

.daring-ones .box::before{
  position: absolute;
  border-top: thin solid grey;
  content: "";
  height: 0;
  left: 0;
  width: 100%;
  top: -15px;
}

.daring-ones .box-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
    
  font-family: "librebaskerville-regular", serif;
  font-size: 1.6rem;
  line-height: 3rem;
  color: #fff;

  background-color: #05485c00;

  transition: background .5s;
}

.daring-ones .box-inner:hover{
  background-color: #04364699;
}

.daring-ones .box-inner .image{
  transition: filter .5s;
  filter: brightness(1);
}

.daring-ones .box-inner:hover .image{
  filter: brightness(0.8);
}

.daring-ones .box-inner .image{
  margin: -20px -20px 10px -20px;
}

.daring-ones .box-inner .image img{
  width: 100%;
}


.daring-ones .box-inner .headline{
  font-family: "librebaskerville-bold", serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.daring-ones .box-inner .headline h3{
  margin-bottom: 0;

  font-family: "librebaskerville-bold", serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.daring-ones .box-inner .headline h4{
  font-family: "librebaskerville-bold", serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.daring-ones .box-inner .description{
  flex-grow: 1;

  font-family: "librebaskerville-bold", serif;
  font-size: 1.2rem;
  line-height: 1.8;
  text-shadow: 1px 1px 2px #000;
}

.daring-ones .box-inner .author{
  padding: 5px 10px;
  margin-top: 10px;

  font-family: "montserrat-bold", sans-serif;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}

@media (max-width: 1200px) {
  .daring-ones .box-inner .description{
    font-size: 1.4rem;
    line-height: 1.8;
  }
}

@media (max-width: 768px) {
  .daring-ones .box-inner .description{
    font-size: 1.6rem;
    line-height: 1.8;
  }
}


@media (min-width: 1250px) {
  .row-xl{
    max-width: 1450px !important;
  }
}
/* Stop :: Daring Ones */

/* Start :: News Boxes */
.news-box{
  display: grid;
  grid-template-columns: calc(25% - 30px) calc(25% - 30px) calc(25% - 30px) calc(25% - 30px);
  gap: 30px;
  padding: 30px 0;
}

.news-box.nb-3{
  display: grid;
  grid-template-columns: calc(33.3333% - 20px) calc(33.3333% - 20px) calc(33.3333% - 20px);
  gap: 30px;
  padding: 30px 0;
}

@media (max-width: 1200px) {
  .news-box,
  .news-box.nb-3{
    grid-template-columns: calc(50% - 15px) calc(50% - 15px);
    grid-template-rows: auto;
  }
}


@media (max-width: 768px) {
  .news-box,
  .news-box.nb-3{
    grid-template-columns: 100%;
    grid-template-rows: auto;
  }
}

.news-box .box{
  position: relative;

  background-color: #07617d;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;

  transition: background 1s;
}

.news-box .box:hover{
  background-size: 120% 120%;
}

.news-box .box::before{
  position: absolute;
  border-top: thin solid grey;
  content: "";
  height: 0;
  left: 0;
  width: 100%;
  top: -15px;
}

.news-box .box::after{
  position: absolute;
  border-top: thin solid grey;
  content: "";
  height: 0;
  left: 0;
  width: 100%;
  bottom: -15px;
}

.news-box .box-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
    
  font-family: "librebaskerville-regular", serif;
  font-size: 1.6rem;
  line-height: 3rem;
  color: #fff;

  background-color: #05485c00;

  transition: background .5s;
}

.news-box .box-inner:hover{
  background-color: #04364699;
}

.news-box .box-inner .image{
  transition: filter .5s;
  filter: brightness(1);
}

.news-box .box-inner:hover .image{
  filter: brightness(0.8);
}

.news-box .box:last-of-type .box-inner::before{
  position: absolute;
  border-left: thin solid grey;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: -15px;
}

@media(max-width: 1200px){
  .news-box .box .box-inner::before{
    position: absolute;
    border-left: thin solid grey;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: -15px;
  }
}

.news-box .box-inner::before{
  position: absolute;
  border-left: thin solid grey;
  content: "";
  height: 100%;
  width: 0;
  top: 0;
  right: -15px;
}

.news-box .box-inner::after{
  position: absolute;
  border-left: thin solid grey;
  content: "";
  height: 100%;
  width: 0;
  top: 0;
  left: -15px;
}

.news-box .box-inner .image{
  margin: -20px -20px 10px -20px;
}

.news-box .box-inner .image img{
  width: 100%;
}


.news-box .box-inner .headline{
  font-family: "librebaskerville-bold", serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.news-box .box-inner .headline h3{
  margin-bottom: 0;

  font-family: "librebaskerville-bold", serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.news-box .box-inner .headline h4{
  font-family: "librebaskerville-bold", serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.news-box .box-inner .description{
  flex-grow: 1;

  font-family: "librebaskerville-bold", serif;
  font-size: 1.2rem;
  line-height: 1.8;
  text-shadow: 1px 1px 2px #000;
}

.news-box .box-inner .author{
  padding: 5px 10px;
  margin-top: 10px;

  font-family: "montserrat-bold", sans-serif;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}

@media (max-width: 1200px) {
  .news-box .box-inner .description{
    font-size: 1.4rem;
    line-height: 1.8;
  }
}

@media (max-width: 768px) {
  .news-box .box-inner .description{
    font-size: 1.6rem;
    line-height: 1.8;
  }
}


@media (min-width: 1250px) {
  .row-xl{
    max-width: 1450px !important;
  }
}

/* End :: News Boxes */

/* Start :: Clients Flip Cards */
/*
.client-lists.owl-carousel .flip-card{
  perspective: 600px;
}

.client-lists.owl-carousel .flip-card .fc-inner{
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.client-lists.owl-carousel .flip-card .fc-inner:hover,
.client-lists.owl-carousel .flip-card .fc-inner:active{
  transform: rotateY(180deg);
}

.client-lists.owl-carousel .flip-card .fc-face{
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.client-lists.owl-carousel .flip-card .fc-back{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  transform: rotateY( 180deg );

  font-family: "montserrat-bold", sans-serif;
  font-weight: bold;

  background-image: url('/assets/img/clients/tombstone_blank.png');
  background-position: center;
  background-size: contain;
}
*/
/* End :: Clients Flip Cards */