body {background:#000;color: #fff;font-family: Gotham, helvetica, arial, sans-serif;font-weight: 300;font-style: normal;letter-spacing:0.15ex;}
h1, h2, h3, h4, h5, h6 { font-family: Gotham, helvetica, arial, sans-serif; font-weight: 700; font-style: normal; }
a,a:hover {color:#fff;text-decoration:none;}
svg { width: 100%; height: auto; }
img {max-width:100%;height:auto;}

header {background: url('../../../images/header-op.jpg') no-repeat 88% 00%;/* background: url('../../../images/header-op.jpg') no-repeat top center; */background-size:cover;aspect-ratio:1920 / 890;padding:40px;margin-bottom:40px;position:relative;}
header .social {position:absolute;right:40px;top:40px;}
header nav {padding: 20px 0;font-weight: bold;}
header svg {max-width:200px;}
header .col-lg-8 {display:flex;flex-direction: column;align-items: flex-end;}
header .logo {text-align:center;}
header .logo img {width:400px;border:2px solid white;/* image-rendering: crisp-edges; */}

nav .nav a {color:#fff;transition:color 250ms;padding: 30px;border: 2px solid #4679c4;font-size: 27px;}
nav .nav a:hover,
nav .nav li.active a {color:#b9d705;}
.nav img {/* margin-right:1ex; */}
.nav li {margin-right:1em;}

.btn { background: transparent; color: #fff; transition: color 250ms; padding: 25px 35px; border: 2px solid #4679c4; font-size: 27px; text-transform: uppercase; font-weight: bold; }
.btn:hover { color:#b9d705; background: transparent;}

.btn-primary {  }

.info {/* display: inline-flex; *//* width: 100%; */justify-content: space-around;padding-bottom:40px}
.info p:first-child {font-size:44px;}
.info h1 {font-size:126px;line-height:109px;letter-spacing:initial;margin-bottom:40px;}
.info p {font-size:36px;font-weight:100;line-height:1.2;}

.social li {width: 69px;}

.light {font-weight:100!important;}

h1,
nav,
h3 {text-transform:uppercase;}
h2 {font-size:52px;}
h3 {font-size:30px;color:#4679c4;}
h4 {color:white;}
h4~h4 {margin-top:1em}

.center {display:flex;flex-direction:column;justify-content:center}

.content div,
.content a {color:#ddd;}
.content a:hover {border-bottom:1px dotted #4679c4;}
.content h2 { margin-bottom: 2rem; }

.image {display:flex;flex-direction:column;justify-content:flex-end;}
.image p {margin:0;}

aside {background:#4679c4;text-align:center;font-size:28px;}
aside p {padding:40px;margin:0}
.google-maps{position:relative;}
.google-maps {overflow:hidden;background:none!important;height:330px;width:100%;}
.google-maps iframe {width:100%;height:100%;}

footer {padding:20px;color:#505e73;font-weight:bold;}
.footer-left .custom, .footer-left p {display:inline;}
.footer-right {display:inline-flex;flex-direction:row;justify-content:flex-end;}

.content div[class*='col-'] {margin-bottom:60px;}

.item-page, .item-page p { color: #ddd; }
.item-page .table { color: #ddd; border-color: #555; }

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
}

/*  Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1680px) { 
    .container {max-width: 1640px;}
}

/* Example of media query that spans a range.
/* Apply styles starting from medium devices and up to extra large devices */
@media (min-width: 768px) and (max-width: 1199.98px) { ... }



/* MEDIA QUERIES FOR DESKTOP FIRST APPROACH */

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
.content {text-align:center;}
.info p {font-size:18px!important;}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
    .info {flex-direction:column;max-width:80%;margin-right:15%;}
.social li {width:35px;}
.btn {font-size:calc((27 / 768) * 100vw);white-space:nowrap;}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
    header .social {position:initial;margin-top:40px;}
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
header .social {right:40px;top:40px;}
.info p:first-child {font-size:44px;font-size:calc((44 / 1200) * 100vw);margin-top: 1em;}
.info h1 {font-size:126px;font-size:calc((126 / 1200) * 100vw);line-height:109px;line-height:calc((109 / 1200) * 100vw);margin-bottom:40px;}
.info p {font-size:36px;font-size:calc((36 / 1200) * 100vw);}
nav .nav a {padding: 30px;font-size: 27px;font-size:calc((27 / 1200) * 100vw);}
h2 {font-size:52px;font-size:calc((52 / 1200) * 100vw);}
h3 {font-size:30px;/* font-size:calc((30 / 1200) * 100vw); */}
aside {font-size:28px;/* font-size:calc((28 / 1200) * 100vw); */margin-top:60px;}
aside p {padding:40px;}
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { 

} 

/* XX-Large devices (larger desktops) */
/* No media query since the xxl breakpoint has no upper bound on its width */