@import url('normalize.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@700&family=Lato:wght@100&display=swap');

/* ------------- Additional Fonts ----------- */
@font-face {
  font-family: 'Cormorant-SemiBold';
  src: url('fonts/Cormorant-SemiBold.ttf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: 'Lato-Regular';
  src: url('fonts/Lato-Regular.ttf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: 'Lato-Semibold';
  src: url('fonts/Lato-Semibold.ttf') format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: 'Lato-Thin';
  src: url('fonts/Lato-Thin.ttf') format('truetype');
  font-weight: normal;
}

/* ------------- Tags for Template ----------- */
html, body{ height: 100%; background-color: #fff; color: #333; }
header { position:fixed; z-index: 5000; background-color: rgba(255, 255, 255, 0.6); width: 90%; padding: 20px 5%; }
main { padding: 50px 5%; }
h1, h2, h4 { font-family: 'Cormorant', serif; }
h3 { font-family: 'Lato', sans-serif; }
input, textarea, button { width: 100%; border: 1px solid #333; }
footer{ background-color: #851b2f; display: block; width: 100%; position: relative; color: #fff; }

/* ------------- CSS for Loader ----------- */
.loader-handler { display: block; padding: 15% 0; background-color: fff; text-align: center; }
.lds-ellipsis { display: inline-block; position: relative; width: 80px; height: 80px; }
.lds-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #851b2f; animation-timing-function: cubic-bezier(0, 1, 1, 0); }
.lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; }
.lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; }
.lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; }
.lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; }
@keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } }
#hidden_loader{ display: none; }

/* ------------- CSS for standard slider ----------- */
.bx-wrapper { position: relative; margin-bottom: 60px; padding: 20px 20px 0; *zoom: 1; -ms-touch-action: pan-y; touch-action: pan-y; }
.bx-wrapper img { max-width: 100%; display: block; }
.bxslider { margin: 0; padding: 0; }
ul.bxslider { list-style: none; }
.bx-viewport { transform: translatez(0); /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); }
.bx-wrapper { background: #fff; }
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; }
/* PAGER */
.bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; padding-top: 0px; margin-left: -30px; }
.bx-wrapper .bx-pager.bx-default-pager a { border: 1px solid #851b2f; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { background: #851b2f; }
.bx-wrapper .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; vertical-align: bottom; *zoom: 1; *display: inline; }
.bx-wrapper .bx-pager-item { font-size: 0; line-height: 0; }
.bx-wrapper .bx-next, .bx-wrapper .bx-prev { display: none; }

/* ----------------- CSS for hamburger icon ------------*/
header #hamburger, footer #hamburger { width: 50px; height: 35px; margin-top: 10px; position: relative; float: right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer;  z-index: 500; -webkit-tap-highlight-color: transparent;}
header #hamburger span, footer #hamburger span { display: block; position: absolute; height: 5px; width: 100%; background: #851b2f; border-radius: 5px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
header #hamburger span:nth-child(1), footer #hamburger span:nth-child(1) { top: 0px; }
header #hamburger span:nth-child(2), header #hamburger span:nth-child(3), footer #hamburger span:nth-child(2), footer #hamburger span:nth-child(3) { top: 15px; }
header #hamburger span:nth-child(4), footer #hamburger span:nth-child(4) { top: 30px; }
header #hamburger.open span:nth-child(1), footer #hamburger.open span:nth-child(1) { top: 15px; width: 0%; left: 50%; }
header #hamburger.open span:nth-child(2), footer #hamburger.open span:nth-child(2) {  -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
header #hamburger.open span:nth-child(3), footer #hamburger.open span:nth-child(3)  { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
header #hamburger.open span:nth-child(4), footer #hamburger.open span:nth-child(4) { top: 15px; width: 0%; left: 50%; }
@media ( max-width: 450px ) {
  header #hamburger { margin-top: 5%; }
}

/* ------ HEADER & NAVIGATION ------ */
header .logo {width: 55%; max-width: 244px; display: inline; z-index: 500; position: relative; }
header .navigation{ float: right; width: 120px; }
header > a { -webkit-tap-highlight-color: transparent !important; }

header #navigation-links { display: none; position: fixed; top: 0;  right: 0; bottom: 0; background-color: #fff; width: 100%; max-width: 500px; }
header #navigation-links .nav-wrapper {overflow-y: auto; height: 70%;  padding: 0 10% 20%; display: none; margin-top: 20%;  }
header #navigation-links ul li { list-style: none; }
header #navigation-links ul { margin-bottom: 15px; }

header #navigation-links li a { font-size: 16px; border-bottom: 1px solid #333; display: block; padding: 15px 20px; text-transform: uppercase; transition: all 0.3s ease; text-decoration: none; color: #333; -webkit-tap-highlight-color: transparent !important;}
header #navigation-links li a:hover { border-color: #851b2f; color: #851b2f; }
header #navigation-links li a.active { border-color: #851b2f; color: #851b2f; font-weight: bold; }

header #navigation-links #secure_login{ font-size: 14px; background-color: #851b2f; color: #fff; text-transform: uppercase; padding: 15px 20px; text-align: center; }
header #navigation-links #secure_login p { color: #fff; }
header #navigation-links #secure_login a{ margin-top: 10px; border: 2px solid #fff; background-color: #fff; color: #851b2f; padding: 10px 20px; display: block; transition: all 0.3s ease; }

header #navigation-links #secure_login a:hover{ background-color: #851b2f; color: #fff; font-weight: bold; }
header .navigation .user-login span{display: none;}
header .navigation .user-login { height: 40px; width: 40px; background-color: aqua; text-align: left; display: block; background: url('../images/icons/user.svg') center right no-repeat; background-size: contain; font-size: 14px; color: #fff; float: right; margin-right: 65px; z-index: 500; position: relative; margin-top: 5px; -webkit-tap-highlight-color: transparent;}
/*@media ( min-width: 450px ) {*/
  header .navigation .user-login { margin-top: -37px; }
/*}*/
@media ( min-width: 600px ) {
  header .navigation{ width: 180px; }
  header .navigation .user-login span{display: inline-block;
    background-color: #851b2f;
    padding: 5px 16px 5px 15px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; margin-top: 7px; }
  header .navigation .user-login {width: 100px; transition: all 0.3s ease;  }
  header .navigation .user-login:hover { opacity: 0.7;}
}


@media ( min-width: 1300px ) {
  /* header { width: 95%; padding: 20px 2.5%; }
  header .logo {  max-width: 300px; }
  header #hamburger { display: none; }
  header .navigation{  width: 75%; }
  header #navigation-links { display: block; background: none; position: relative; top: auto;  right: auto; bottom: auto; max-width: 100%; width: 100%; }

  header #navigation-links .nav-wrapper{ display: flex; flex-direction: column; overflow-y: auto; height: auto; padding: 0; margin-top: 0; text-align: right; }
  header #navigation-links .nav-wrapper > .flex-col-2 { order: 2; }
  header #navigation-links .nav-wrapper > .flex-col-1 { order: 1; }
  header #navigation-links ul li { display: inline-block; }
  header #navigation-links ul li::before { content:"• "; padding: 0 3px; }
  header #navigation-links ul li.no-bullet::before { content:""; padding: 0; }
  header #navigation-links li a { display: inline-block; font-size: 14px; padding: 0; border: none; }
  header #navigation-links li a:hover, header #navigation-links li a.active { border-bottom: 1px solid #851b2f; }
  header #navigation-links #secure_login, header #navigation-links #secure_login a, header #navigation-links #secure_login p { display: inline-block; }
  header #navigation-links #secure_login { margin-top: 0; padding: 7px 14px; }
  header #navigation-links #secure_login p{ margin-top: 3px; }
  header #navigation-links #secure_login a { margin-top: 0; padding: 3px 15px; font-size: 12px; margin-left: 10px; border-width: 1px; }
  header #navigation-links ul { display: inline-block; margin-top: 15px; margin-bottom: 0; } */
}

/* ------------- HOME BANNER AREA ------------- */
#banner_area .home-banner{ width: 100%; height: 100%; background: url('../images/banners/on_the_beach_girl.jpg') center center no-repeat; background-size: cover;  overflow: hidden; position: relative; }
#banner_area .home-banner .banner-content { position: absolute; top: 0; bottom: 0; width: 100%; }
#banner_area .home-banner .circle { background-color: rgba(255, 255, 255, 0.6); display: block; width: 80%; border-radius: 50%; margin-left: -20%; margin-top: 30%; position: absolute; max-height: 100%; }

#banner_area .home-banner .headings { position: relative; z-index: 2; width: 100%; margin-top: 50%; }

#banner_area .home-banner #home_banner_scroll { display: block; bottom: 0; position: absolute; width:100%; height: 65px; margin: auto; background: url('../images/icons/arrow-circle-down.svg') bottom center no-repeat; transition: all 0.3s ease; cursor: pointer; -webkit-tap-highlight-color: transparent !important;}
#banner_area .home-banner #home_banner_scroll:hover{ opacity: 0.8; }

#banner_area .modal{ display: none; position: fixed; z-index: 9999; padding-top: 80px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #000; background-color: rgba( 0,0,0,0.4 ); }
#banner_area .modal-content { display: none; background-color: #fff; margin: auto; border: 1px solid #888; border-radius: 5px; width: 100%; position: relative;}
#banner_area .close { color: #851b2f; font-size: 38px; font-weight: bold; display: inline; position: absolute; right: 10px; top: 5px; line-height: 100%; }
#banner_area .close:hover, .close:focus { opacity: 0.7; text-decoration: none; cursor: pointer; }
#banner_area .modal-content img { width: 100%; border-radius: 5px; }

@media screen and ( orientation:portrait ) {
  #banner_area .home-banner{ background-image: url('../images/banners/on_the_beach_girl_mobile.jpg'); }

  #banner_area .home-banner h1, #banner_area .home-banner h3 { text-align: center; font-size: 16vw; line-height: 16vw;  }
  #banner_area .home-banner h3 { font-size: 12vw; line-height: 12vw; }
}
@media screen and (orientation:landscape) {
  #banner_area .home-banner{ background-image: url('../images/banners/on_the_beach_girl.jpg'); }

  #banner_area .home-banner h1, #banner_area .home-banner h3 { text-align: center; font-size: 14vh; line-height: 14vh; }
  #banner_area .home-banner h3 { font-size: 10vh; line-height: 10vh; }
  #banner_area .home-banner .banner-content { width: 45%; }
  #banner_area .home-banner .circle { margin-top: 25%; }
  #banner_area .home-banner .headings { margin-top: 50%; }
  #banner_area .modal-content { width: 60%; }
  #banner_area .close { right: 20px; top: 10px; font-size: 58px; }

}

@media ( max-width: 1200px ) and ( orientation:landscape ) {
  #banner_area .home-banner .banner-content { width: 55%; }
  #banner_area .home-banner h1, #banner_area .home-banner h3 { font-size: 12vh; line-height: 12vh; }
  #banner_area .home-banner h3 { font-size: 8vh; line-height: 8vh; }
}

/* ------------- CONTENT BANNER AREA ------------- */
#banner_area .banner{ height: 100%; background-position: center; background-repeat: no-repeat;  background-size: cover; position: relative; }
#banner_area .banner .banner_fade, #banner_area .banner .clip_fade{ background-color: rgba(255, 255, 255, 0.6); bottom: 0; top: 0; right: 0; left: 0; position: absolute; }
#banner_area .banner .clip_fade { background-position: center; background-repeat: no-repeat;  background-size: cover; clip-path: circle(27vh at -50% 60%); }
/* for changing the banner image on each content page */
#banner_area .what-we-offer, #banner_area .what-we-offer .clip_fade { background-image: url('../images/banners/on_the_mountain_with_4x4-new.jpg'); }
#banner_area .who-we-are, #banner_area .who-we-are .clip_fade { background-image: url('../images/banners/running_in_the_sea_new.jpg' ) }
#banner_area .our-philosophy, #banner_area .our-philosophy .clip_fade { background-image: url('../images/banners/in_the_office_planning-new.jpg' ) }
#banner_area .fact-sheet-market-info, #banner_area .fact-sheet-market-info .clip_fade { background-image: url('../images/banners/data_on_screen.jpg' ) }
#banner_area .our-legal, #banner_area .our-legal .clip_fade { background-image: url('../images/banners/legal_document_with_pen_new.jpg' ); }
#banner_area .news_notices, #banner_area .news_notices .clip_fade { background-image: url( '../images/banners/on_the_beach_girl.jpg' ); }

#banner_area .banner .banner-content { position: absolute; height: 100%; bottom: 0; top: 0; left:50%; }
#banner_area .banner .headings { text-align: center; top: 27%; position: absolute; left: 27%; right: 0; }
#banner_half_circle img{ width: 90px; }
#banner_half_circle { text-align: center; position: absolute; width: 100%; z-index: 5; }

@media screen and ( orientation:portrait ) {
  #banner_area .banner h1, #banner_area .banner h3 { text-align: center; font-size: 16vw; line-height: 16vw;  }
  #banner_area .banner h3 { font-size: 12vw; line-height: 12vw; }
}
@media screen and (orientation:landscape) {
  #banner_area .banner h1, #banner_area .banner h3 { text-align: center; font-size: 14vh; line-height: 14vh; }
  #banner_area .banner h3 { font-size: 8vh; line-height: 8vh; }
}
@media ( max-width: 1200px ) and ( orientation:landscape ) {
  #banner_area .banner h1, #banner_area .banner h3 { font-size: 12vh; line-height: 12vh; }
  #banner_area .banner h3 { font-size: 8vh; line-height: 8vh; }
}
@media ( min-width: 700px ) {
  #banner_half_circle img{ width: auto; }
  #banner_area .banner .clip_fade { clip-path: circle(30vh at -50% 60%); }
}

/* ------------ GENERAL CONTENT STYLES ------------- */
main h2 { font-size: 40px; line-height: 35px; }
main h2 span { font-family: 'Lato', sans-serif; font-size: 30px; line-height: 30px; }
main p { font-size: 16px; line-height: 22px; }
main ul { list-style-position: outside; margin-left: 30px; }
main ul li{ font-size: 16px; line-height: 22px; }

/* ------------ HOME CONTENT AREA ------------- */
#max_content_wrapper { margin: auto; min-height: 20px; max-width: 1200px; }
.into_paragraph { font-weight: bold; text-align: center; font-size: 18px; max-width: 800px; margin: auto; margin-bottom: 18px; }
main .home-wrapper {display: block; margin: 50px 0 20px; }
main .home-wrapper .icon-col { display: table; text-align: center; padding: 0 3%; width: 100%; vertical-align: middle; }
main .home-wrapper .home-icon { transition: all 0.3s ease; width: 40%; max-width: 160px; height: 150px; background-position: center center; background-size: contain; background-repeat: no-repeat; display: table-cell; }
main .home-wrapper .money { background-image: url('../images/icons/money.svg'); }
main .home-wrapper .money-chess { background-image: url('../images/icons/money_chess.svg'); }
main .home-wrapper .money-tree { background-image: url('../images/icons/money_tree.svg'); }
main .home-wrapper .chart { background-image: url('../images/icons/chart.svg'); }
main .home-wrapper .home-icon-text { transition: all 0.3s ease; color: #851b2f; font-weight: bold;  vertical-align: middle; width: 100%; max-width: 60%; display: table-cell; }
main .home-wrapper .home-link { cursor: pointer; transition: all 0.3s ease; }
main .home-wrapper .home-link:hover .home-icon { opacity: 0.6; }
main .home-wrapper .home-link:hover .home-icon-text { color: #333; }
@media ( min-width: 700px ) {
  main .home-wrapper {display: flex; }
  main .home-wrapper .icon-col { display: block; flex-direction: unset; width: 23%;  margin: auto; padding: 0 10px;}
  main .home-wrapper .home-icon { width: 100%; display: inline-block; }
  main .home-wrapper .home-icon-text { width: 100%; max-width: 200px; margin: auto; display: inline-block; }
}

/* ------------ WHAT WE OFFER CONTENT AREA ------------- */
main .flex-container {display: flex;flex-direction: column; width: 100%; margin-top: 30px;}
main .flex-element {border: 1px solid #851b2f; margin: 30px 0; width: 100%;}
main .flex-element .header {font-weight: bold; color: #851b2f; text-align: center;}
main .flex-element .content {padding: 20px; font-size: 16px; line-height: 22px; font-weight: normal;}
main .flex-element .content p {padding-bottom: 15px;}
main .flex-element .content ul {padding-bottom: 15px; text-align: left;}
main .flex-element hr {border: none; width: 70%; margin: 20px auto; border-bottom: 1px solid #333;}

main .table { display: block; border-spacing: 0 30px; }

main .table .table-column { display: block; padding: 20px 30px; position: relative; font-size: 16px; line-height: 22px; font-weight: normal; }

main .table .table-column:nth-child(1) { width: auto; border-bottom: 1px solid #851b2f; background: url('../images/icons/up_sml_circle.svg') center bottom no-repeat; padding-bottom: 50px; }
main .table .table-column hr { border: none; width: 70%; margin: 20px auto 0px; border-bottom: 1px solid #333; }
main .table .table-column h2 { font-weight: bold; color: #851b2f; text-align: center; }
main .table .table-column ul {padding-bottom: 15px; text-align: left;}
main .table .table-column p { padding-bottom: 15px; }
main .table .table-column .no-padding { padding-bottom: 0; }
main .table .table-column .special-line { border-left: 1px solid #851b2f; border-right: 1px solid #851b2f; height: 50px; top: 0; z-index: 0; left: 0; right: 0; position: absolute; }
main .table .table-column .special-line::after, main .table .table-column .special-line::before { content: ''; display: block; float: right; border: 1px solid #851b2f; background-color: #fff; border-radius: 5px; top: 0; width: 5px;  height: 5px; margin-top: 50px; margin-right:-4px; }
main .table .table-column .special-line::before { float: left; margin-right: 0; margin-left: -4px; }

@media (min-width: 900px) {
  main .flex-container {flex-direction: row; flex-wrap: wrap;}
  main .flex-element {margin: 2%; width: 45%;}

  main .table .table-column .special-line{ border:none; border-top: 1px solid #851b2f; border-bottom: 1px solid #851b2f; width: 50px; height: auto; position: absolute; top: 0; z-index: 0; left: 0; bottom: 0; }
  main .table .table-column .special-line::after, main .table .table-column .special-line::before { content: ''; display: block; border: 1px solid #851b2f; background-color: #fff; border-radius: 5px; bottom: 0; width: 5px; height: 5px; margin-bottom: -4px; margin-left:50px; position: absolute; margin-top: auto; }
  main .table .table-column .special-line::before { bottom: auto; top: 0; margin-bottom: 0; margin-top: -4px; }
  main .table .table-column hr {display: none;}
  main .table { display: table; border-spacing: 0 20px; }
  main .table .table-row { display:table-row;  }
  main .table .table-column { display: table-cell; vertical-align: middle; }
  main .table .table-column:nth-child(1) { width: 35%; border-bottom: 0; border-right: 1px solid #851b2f; background: url('../images/icons/left_sml_circle.svg') right center no-repeat; padding-bottom: 20px;  }
}

@media ( min-width: 1500px ) {
  main .table .table-column:nth-child(1) { width: 30%;}
}

@media ( min-width: 2000px ) {
  main .table .table-column:nth-child(1) { width: 25%;}
}

/* ------------ WHO WE ARE CONTENT AREA ------------- */
main .content-page-intro { text-align: center; margin: auto; font-size: 18px; line-height: 22px; }
main .team-wrapper .section-heading { margin-bottom: 35px; }
main .team-wrapper h2 { margin-top: 15px; color: #231F20; font-family: 'Cormorant', serif; font-size: clamp(78px, 12vw, 148px); letter-spacing: 0.8px; }
main .team-wrapper h2 span { font-family: sans-serif; font-weight: 200; font-size: clamp(22px, 8vw, 50px); margin-left: -5px; }
main .content-page-intro h4, main .team-wrapper h4 { font-size: 22px; color: #851b2f; margin: 15px 0 5px; }
main .team-wrapper { text-align: center; }
main .content-page-intro p { font-family: sans-serif; font-size: 16px; letter-spacing: 0.4px; color: #231F20; margin-bottom: 8px; }
main .content-page-intro p strong{ font-weight: bold; }
main .team-wrapper .team-member { position: relative; display: inline-grid; grid-template-rows: subgrid; grid-row: span 4; gap: 0px 30px; }
main .team-wrapper .team-member .info { height: 230px; }
main .team-wrapper .team-member .info p { margin-top: 30px; height: 100%; text-align: justify; color: #666; }
main .team-wrapper .team-member .content{ padding: 0 20px; border: 1px solid #666; }
main .team-wrapper .team-member .content-heading{ border-bottom: none; }
main .team-wrapper .team-member .content-info{ border-top: none; }
main .team-slider { position: relative; }
main .team-slider .team-member .image { grid-row: 1; clip-path: circle(60% at 39% 38%) }
main .team-slider .team-member .image div { height: 80vw; margin-bottom: 0; background-position: top; background-size: contain; background-repeat: no-repeat; }
main .team-slider .team-member .image-pin { position: absolute; top: 40vw; left: 10vw; height: 40vw; filter: invert(1); mix-blend-mode: exclusion; }
main .team-slider .team-member .content-heading { grid-row: 2; }
main .team-slider .team-member .content-heading h3 { color: #851b2f; font-family: 'Cormorant', serif; font-size: 27px; letter-spacing: 0.3px; }
main .team-slider .team-member .content-description { grid-row: 3; }
main .team-slider .team-member .content-description h5 { font-family: 'Cormorant', serif; font-size: 22px; color: black; letter-spacing: 0.2px; }
main .team-slider .team-member .content-description h5 span { color: #333; }
main .team-slider .team-member .content-info { grid-row: 4; }
main .team-slider .team-member .content-info p { padding: 20px; color: #666; font-size: 14px; line-height: 20px; text-align: left; }
main .team-slider .box { padding: 35px; }
main .team-slider .box-style { position: relative; display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px 30px; }
main .team-slider .special-line{  height: 50px; position: absolute; top: 0; left: 0; right: 0; z-index: 2; border-left: 1px solid #851b2f; border-right: 1px solid #851b2f; border-top: 1px solid #851b2f; }
main .team-slider .special-line::after, main .team-slider .special-line::before { content: ''; float: right; display: block; border: 1px solid #851b2f; background-color: #fff; border-radius: 5px; width: 5px; height: 5px; margin-top: 50px; margin-right: -4px; }
main .team-slider .special-line::before { float: left; margin-left: -4px; margin-right: 0; }
main .main-detail { margin-bottom: 40px; }
main .team-detail p { font-family: sans-serif; font-size: 16px; letter-spacing: 0.3px; color: #231F20; margin-bottom: 8px; }
main .team-sub-detail { margin-top: 40px; }
main .team-sub-detail p { font-family: sans-serif; font-size: 16px; letter-spacing: 0.3px; color: #231F20; margin-bottom: 8px; }
main .team-sub-detail strong { color: #851b2f; }
main .teams { display: inline-grid; grid-template-columns: repeat(1, 1fr); grid-auto-rows: 1fr; gap: 0 30px; width: 100%; }
main .teams h4 { font-size: 28px; }
main .teams .image-container { position: relative; display: grid; width: 100%; }
main .teams .image-container img { width: 100%; }
main .teams .team-group { padding: 30px; padding-bottom: 0; }
main .teams .team-group .info { font-family: sans-serif; font-weight: bold; color: black; padding: 5px; }
main .teams .team-group .info h5 { font-size: 20px; }
main .teams .team-group .info font { color: #851b2f; }
main .teams .team-group .info span { font-family: sans-serif; font-weight: lighter; }

@media ( min-width: 600px ) {
  main .team-slider .box-style { grid-template-columns: repeat(2, 1fr); }
  main .team-slider .team-member .image div { height: 40vw; }
  main .team-slider .team-member .image-pin { top: 20vw; left: 4vw; height: 20vw; }
}

@media ( min-width: 1000px ) {
  main .team-slider .box-style { grid-template-columns: repeat(3, 1fr); }
  main .teams { grid-template-columns: repeat(2, 1fr); }
  main .team-slider .team-member .image div { height: 25vw; }
  main .team-slider .team-member .image-pin { top: 12.5vw; left: 2.5vw; height: 12.5vw; }
}

@media ( min-width: 1200px ) {
  main .team-slider .box-style { grid-template-columns: repeat(4, 1fr); }
  main .team-slider .team-member .image div { height: 20vw; }
  main .team-slider .team-member .image-pin { top: 10vw; left: 2vw; height: 10vw; }
}

/* ------------ OUR PHILOSOPHY CONTENT AREA ------------- */
main .philosophy-intro{ font-weight: bold; color: #851b2f; text-align: center; }

main .flex-container { display: block; width: 100%; margin-top: 30px; }
main .flex-container .flex-element{ text-align: center; border:1px solid #851b2f; margin: 30px 0; width: 100%; }
main .flex-container .flex-element .content{ padding: 20px; font-size: 16px; line-height: 22px; font-weight: bold; }
main .flex-container .flex-element h2{ font-size: 25px; color: #851b2f; background-color: #fff;  width: 70%; margin: auto; margin-top: -20px; }
main .flex-container .flex-element h2::after, main .flex-container .flex-element h2::before { content: ''; float: right; display: block; border: 1px solid #851b2f; background-color: #fff; border-radius: 5px; width: 5px; height: 5px; margin-top: 16px; }
main .flex-container .flex-element .content h2::after, main .flex-container .flex-element .content h2::before { display: none; }
main .flex-container .flex-element .content .before_after_none { margin-bottom: 14px; }
main .flex-container .flex-element h2::before { float: left; }

@media ( min-width: 800px ) {
  main .flex-container .flex-element h2{ width: 60%;}
  main .flex-container { display: flex; flex-flow: row wrap; flex-direction: row; margin-top: 2%; }
  main .flex-container .flex-element{ margin: 2%; width: 45%; }
  main .flex-container .last-flex{ display: block; margin: 2% auto; }
}

@media ( min-width: 1700px ) {
  main .flex-container { margin-top: 2%; }
  main .flex-container .flex-element{ margin: 1%; width: 47%; }
  main .flex-container .last-flex{ margin: 1% auto; }
  main .flex-container .flex-element h2{ width: 40%;}
}

/* ------------ LEGAL CONTENT AREA ------------- */
main .document-container { display: flex; flex-flow:wrap; flex-direction:row; margin-top: 2%; width: 100%; text-align: center; justify-content: center; }
main .document-container .document-wrap{ margin: 6% 2% 2%; width: 90%; border: 1px solid #851b2f; }
main .document-container .document-wrap h2 { font-size: 22px; color: #851b2f; background-color: #fff;  width: 80%; margin: auto; margin-top: -20px; }
main .document-container .document-wrap h2::after, main .document-container .document-wrap h2::before{ content: ''; float: right; display: block; border: 1px solid #851b2f; background-color: #fff; border-radius: 5px; width: 5px; height: 5px; margin-top: 16px; }
.no-styling::after { display: none !important; }
.no-styling::before { display: none !important; }
.no-styling { padding-top: 8px; }
main .document-container .document-wrap h2::before{ float: left; }
.no-styling::after { display: none !important; }
.no-styling::before { display: none !important; }
.no-styling { padding-top: 8px; }
main .document-container .document-wrap .document { margin: 15px 20px 20px; position: relative; }
main .document-container .document-wrap .document img { width: 100%; }
main .document-container .document-wrap .document a { display: none; position: absolute; background-color: rgba(51, 51, 51, 0.7); color: #fff; text-align: center; top: 0; left: 0; bottom: 0; right: 0; }
main .document-container .document-wrap .document:hover a { display: block; }
main .document-container .document-wrap .document a span{ margin-top: 60%; padding: 10px 20px; border: 1px solid #fff; display: inline-block; }

@media ( max-width: 640px ) {
  main .document-container .document-wrap h2 {
    font-size: 20px !important;
  }
}

@media ( min-width: 600px ) {
  main .document-container .document-wrap{ margin: 4% 2% 2%; width: 45%; }
  main .document-container .document-wrap h2 { width: 80%; }
}

@media ( min-width: 1000px ) {
  main .document-container .document-wrap{ margin: 2% 1% 1%; width: 31%; }
  main .document-container .document-wrap h2 { width: 85%; }
}
@media ( min-width: 1200px ) {
  main .document-container .document-wrap h2 { width: 70%; }
}
@media ( min-width: 1400px ) {
  main .document-container .document-wrap{  width: 22.7%; }
}
@media ( min-width: 1900px ) {
  main .document-container .document-wrap{ width: 17%; }
  main .document-container .document-wrap h2 { width: 80%; }
}

/* ------------ FACT SHEETS & MARKET INFO CONTENT AREA ------------- */
main .market_info_wrapper{ display: flex; flex-flow:wrap; flex-direction:row; margin-top: 2%; width: 100%; text-align: center; justify-content: center; margin-bottom: 2%; }
main .market_info_wrapper .document-holder{ margin: 6% 2% 2%; width: 90%; border: 1px solid #851b2f; }
main .market_info_wrapper .document-holder h2, main .market_info_wrapper .document-holder h5  { font-size: 20px; color: #851b2f; background-color: #fff;  width: 90%; margin: auto; margin-top: -20px; }
main .market_info_wrapper .document-holder h5 { font-size: 16px;  margin-top: -10px; bottom: -10px;;  position: relative;}
main .market_info_wrapper .document-holder h2::after, main .market_info_wrapper .document-holder h2::before, main .market_info_wrapper .document-holder h5::after, main .market_info_wrapper .document-holder h5::before{ content: ''; float: right; display: block; border: 1px solid #851b2f; background-color: #fff; border-radius: 5px; width: 5px; height: 5px; margin-top: 16px; }
main .market_info_wrapper .document-holder h5::after, main .market_info_wrapper .document-holder h5::before {margin-top: 5px;}
main .market_info_wrapper .document-holder h2::before, main .market_info_wrapper .document-holder h5::before{ float: left; }
main .market_info_wrapper .document-holder .document { margin: 15px 20px 20px; position: relative; }
main .market_info_wrapper .document-holder .document img { width: 100%; }
main .market_info_wrapper .document-holder .document a { display: none; position: absolute; background-color: rgba(51, 51, 51, 0.7); color: #fff; text-align: center; top: 0; left: 0; bottom: 0; right: 0; }
main .market_info_wrapper .document-holder .document:hover a { display: block; }
main .market_info_wrapper .document-holder .document a span{ margin-top: 60%; padding: 10px 20px; border: 1px solid #fff; display: inline-block; }
@media ( min-width: 600px ) {
  main .market_info_wrapper .document-holder{ margin: 4% 2% 2%; width: 45%; }
  main .market_info_wrapper .document-holder h2 { width: 90%; }
}
@media ( min-width: 1000px ) {
  main .market_info_wrapper .document-holder{ margin: 2% 1% 1%; width: 31%; }
  main .market_info_wrapper .document-holder h2 { width: 85%; }
}
@media ( min-width: 1200px ) {
  main .market_info_wrapper .document-holder h2 { width: 70%; }
}
@media ( min-width: 1400px ) {
  main .market_info_wrapper .document-holder{  width: 30.7%; }
  main .market_info_wrapper .document-holder h2{ font-size: 22px; }
}
@media ( min-width: 1900px ) {
  main .market_info_wrapper .document-holder{ width: 22.7%; }
  main .market_info_wrapper .document-holder h2 { width: 80%; }
}

/* ------------- FOOTER AREA ------------- */
footer *::selection{ background-color: rgba(51, 51, 51, 0.5); }
footer #hamburger {float: none; margin: auto; height: 20px; width: 40px; }
footer #hamburger span { height: 3px; border-radius: 3px;}
footer #hamburger span:nth-child(2), footer #hamburger span:nth-child(3) { top: 10px;}
footer #hamburger span:nth-child(4) { top: 20px; }

footer .footer-bg-image { background: url('../images/banners/on_the_beach-grey.jpg') center center no-repeat ; background-size: cover; opacity: 0.15; height: 100%; width: 100%; display: block; position: absolute; mix-blend-mode: multiply; }

footer .footer-top-circle { display: block; width: 70px; margin: auto; }

footer .footer-wrapper { z-index: 1; position: relative; padding: 20px 0%; width: 100%; }
footer .footer-wrapper h2{ color: #eee; text-align: center; margin: 10px 5% 10px; }
footer .footer-wrapper .contact-details { position: relative; display: none; max-width: 1200px; margin: auto; margin-top: 20px; }
footer .contact-details .font { display:none; position: relative; background: white; min-width: 1px; min-height: 1px; }
footer .contact-details .font font { position: absolute; top: -20px; left: -5.5px; font-size: 35px;}

footer .contact-details h4 { color: #eee; font-size: 20px; margin: 10px 0; }
footer .contact-details p { color: #eee; font-family: 'Lato-Thin', sans-serif; line-height: 21px; font-size: 16px; font-weight: lighter; display: block; margin-bottom: 10px; }
footer .contact-details strong { color: #eee; font-family: 'Lato-Regular', sans-serif; }
footer .contact-details .col { width: 90%; padding: 0 5%; border-top: 1px solid white; }

footer .copyright { display: block; text-align: center; padding: 10px 20px; color: #eee; border-top: 1px solid #eee; font-size: 12px; margin-top: 20px; }

footer #hamburger span { background-color: #eee; }

@media ( min-width: 700px ) {
  footer #hamburger {display: none;}
  footer .footer-wrapper h2{ text-align: center; }
footer .contact-details .font { display: block; }
  footer .footer-wrapper .contact-details { display: flex; gap: 5%; width: 80%; margin-top: 0; justify-content: center; }
  footer .contact-details .col { display: inline-grid; max-width: 20%; padding: 0 3%; border-top: none; letter-spacing: 0.3px; justify-content: center; }
}
footer .contact-details .no-border { border: none; }
footer tcxspan{ color: #eee; }
footer a { color: #fff; }