@font-face {
    font-family: 'Myriad Pro';
    src: url('font/MyriadPro-Regular.eot');
    src: url('font/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/MyriadPro-Regular.woff2') format('woff2'),
        url('font/MyriadPro-Regular.woff') format('woff'),
        url('font/MyriadPro-Regular.ttf') format('truetype'),
        url('font/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Franklin Gothic Demi Cond';
    src: url('font/FranklinGothic-DemiCond.eot');
    src: url('font/FranklinGothic-DemiCond.eot?#iefix') format('embedded-opentype'),
        url('font/FranklinGothic-DemiCond.woff2') format('woff2'),
        url('font/FranklinGothic-DemiCond.woff') format('woff'),
        url('font/FranklinGothic-DemiCond.ttf') format('truetype'),
        url('font/FranklinGothic-DemiCond.svg#FranklinGothic-DemiCond') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



:root {
    --blue: #00465F;
    --light-blue: #009FDB;
    --sand: #DFD7C9;
}

body {font-family:'Myriad Pro';font-weight:normal;font-style:normal}
a, a:link, a:visited, a.active {color: var(--light-blue)!important}
a:hover {color:var(--blue)!important}
.nav-link.active {background: transparent!important}

/* colors */
.bg-blue {background-color: var(--blue)!important}
.bg-light-blue {background-color: var(--light-blue)!important}
.bg-sand {background-color: var(--sand)!important}

.text-blue {color: var(--blue)!important}
.text-light-blue {color: var(--light-blue)!important}

.btn-blue, .btn-blue.active {
    color: white!important;
    background-color: var(--blue);
    border-color: var(--blue)
}
.btn-blue path {fill: white}
.btn-blue:hover {
    color: white!important;
    background-color: var(--light-blue);
    border-color: var(--light-blue)
}

.btn-light-blue, .btn-light-blue.active {
    color: white!important;
    background-color: var(--light-blue);
    border-color: var(--light-blue)
}
.btn-light-blue path {fill: white}
.btn-light-blue:hover {
    color: white!important;
    background-color: var(--blue);
    border-color: var(--blue)
}

.qc-cmp2-persistent-link {background:var(--blue)!important;border-color:var(--blue);color:white!important}

/* font */
.font-myriad {font-family:'Myriad Pro';font-weight:normal;font-style:normal}
.font-franklin {font-family:'Franklin Gothic Demi Cond';font-weight:normal;font-style:normal}
.fs-1 {font-size: .75rem}
.fs-2 {font-size: 1rem}
.fs-3 {font-size: 1.25rem}
.fs-4 {font-size: 1.625rem}
.fs-5 {font-size: 1.75rem}
.fs-6 {font-size: 2rem}
.fs-7 {font-size: 3.5rem}
.fs-8 {font-size: 8rem}
.fs-9 {font-size: 12rem}
.fs-10 {font-size: 15rem}

/* navbar */
#navbar {border-bottom: 1rem solid white;}
#navbar svg {height:5rem;width:auto}
#navbar a, #navbar a:link, #navbar a:visited {color:white!important}
#navbar a:hover, #navbar a.active {color:var(--light-blue)!important}

/* main page */
[id*=parallax] {height: 100vh;overflow: hidden}
.parallaxParent > img {
    height: 125%!important;
    position: relative;
    top: -62%;
}
.sq {margin-top:.4rem}
.sq1 {width:6rem;height:6rem;transform: rotate(45deg);transform-origin: 50% 50%}
.sq2 {margin:-1rem 0 0 5rem;width:6rem;height:6rem;transform: rotate(45deg);transform-origin: 50% 50%}
.sq3 {margin:-19.4rem 0 0 6.4rem;width:13rem;height:13rem;transform: rotate(45deg);transform-origin: 50% 50%;overflow:hidden}
.sq3 img {
    transform: rotate(-45deg);
    max-width: 1080px!important;
    width: 600px!important;
    height: auto;
    position: relative;
    left: -210px;
    top: -40px;
}
.sq3 i {
    transform: rotate(-45deg);
    position: relative;
    left: .75em;
    top: .75em;
}
.sq4 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 14rem 14rem 14rem;
    border-color: transparent transparent var(--blue) transparent;
    margin-top: -5.8rem;
    margin-left: 8.9rem;
}
.gallery > div:hover div {
    transform: scale(1.1);
}
.gallery > div div {
    -webkit-transition: all .25s ease-out; /* Safari */
    transition: all .25s ease-out;
}


@media screen and (max-width:1199px){
}
@media screen and (max-width:991px){
    .fs-9 {font-size: 10rem}
}
@media screen and (max-width:768px){
    .fs-3 {font-size: 1rem!important}
    .fs-4 {font-size: 1.5rem}
    .fs-7 {font-size: 2.5rem}

}
@media screen and (max-width:480px){
    .fs-3 {font-size: 1rem!important}
    .fs-4 {font-size: 1.25rem}
    .fs-7 {font-size: 1.75rem}
    .fs-9 {font-size: 8rem}
    .fs-10 {font-size: 12rem}
}
@media (orientation: landscape) {
}
@media (orientation: portrait) {
}
@media (max-width: 991px) and (orientation:landscape) {
}
@media (max-width: 768px) and (orientation:landscape) {
}
@media (max-width: 480px) and (orientation:landscape) {
}