/* GENERAL */

:root {
    --bs-main-color: #202c56;
    --bs-secondary-color: #E8CD9A;
    --bs-third-color: #1f212a;
    --bs-fourth-color: #78C091;
    --bs-fifth-color: #81F0E5;
    --bs-custom-grey: #efefef;
    --bs-body-font-family: 'Inter', sans-serif;
}

/* STRUCTURE */
body, html {
    -webkit-font-smoothing: antialiased;
    font-family: var(--bs-body-font-family);
}

#front-page {
    margin-top: -97px;
}
#page, #single {
    margin-top: 47px;
}

@media (min-width: 767px) {
    #front-page, #page, #single {
        margin-top: -117px;
    } 
    #page, #single {
        margin-top: 57px;
    }   
}

.main-color {color: var(--bs-main-color);}
.secondary-color {color: var(--bs-secondary-color);}
.third-color {color: var(--bs-third-color);}
.fourth-color {color: var(--bs-fourth-color);}
.fifth-color {color: var(--bs-fifth-color);}
.grey-color {color: var(--bs-custom-grey);}

.main-color-b {background: var(--bs-main-color);}
.secondary-color-b {background: var(--bs-secondary-color);}
.third-color-b {background: var(--bs-third-color);}
.fourth-color-b {background: var(--bs-fourth-color);}
.fifth-color-b {background: var(--bs-fifth-color);}
.grey-color-b {background: var(--bs-custom-grey);}

.border-third {
    border-color: var(--bs-third-color) !important;
}

.border-custom-grey {
    border-color: #454545 !important;
}

/* FONTS */
@font-face  {
    font-family: 'Inter';
    src: url(../fonts/Inter/Inter-VariableFont_opsz,wght.ttf);
}


/* TITLES */
h1, h2, h3, h4, h5, h6 {

}

/* TEXT */
.textXS{font-size: 60% !important;}
.textS{font-size: 70% !important;}
small{font-size: 80% !important;}
.textSM{font-size: 90% !important;}
.text100{font-size: 100% !important;}
.textM{font-size: 110% !important;}
.textML{font-size: 120% !important;}
.textL{font-size: 130% !important;}
.textXL{font-size: 150% !important;}
.textXXL{font-size: 170% !important;}
.textXXXL{font-size: 220% !important;}
.textExtra{font-size: 300% !important;}

.fs-7 {font-size: 0.80rem!important;}
.fs-8 {font-size: 0.68rem!important;}

.light{font-variation-settings: 'wght' 300 !important;}
.regular{font-variation-settings: 'wght' 400;}
.medium{font-variation-settings: 'wght' 600;}
strong, .strong, b {font-variation-settings:'wght' 700;}
.bold {font-variation-settings: 'wght' 900;}

.lineHeight0 {line-height: 0 !important;}
.lineHeightXS {line-height: 0.95em !important;}
.lineHeightS {line-height: 1.1em !important;}
.lineHeightSM {line-height: 1.2em !important;}
.lineHeightM {line-height: 1.5em !important;}
.lineHeightL {line-height: 2em !important;}
.whiteSpace {white-space: pre;}
.letterSpacingCustom {letter-spacing: 1.3px;}


/* NAVBAR */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 240px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 10px 5px;
    z-index: 1025;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.progress-container {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    background-color: --bw-sec-color-white;
    width: 100%;
    height: 3px;
}

.progress-bar {
    height: 3px;
    background: var(--bs-secondary-color);
    width: 0%;
}

.nav {
    --bs-nav-link-font-weight: 400;
    --bs-nav-link-color:  var(--bs-custom-light-color);
    --bs-nav-link-hover-color: var(--bs-secondary-color);
    font-size: 120%;
}

@media (min-width: 767px) {
    .nav-link{
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

/* EFFECTS */

body, .container, .btn, a, .nav-link, .grow, header, nav{ 
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;}

.goToTop{ 
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;}

a{
  overlow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /*word-break: break-all;*/
  word-break: break-word;
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  /*hyphens: auto;*/
}

a.noeffect{color: inherit;text-decoration: none;}
a.noeffect:hover{color: inherit;text-decoration: none;}

a.noneeffect{text-decoration: none;}
a.noneeffect:hover{color: #fff;text-decoration: none;}

a.effect{color: inherit; text-decoration: underline;}
a.effect:hover{color: inherit;text-decoration: none;}

a.link-effect{color: inherit; text-decoration: none;}
a.link-effect:hover{color: inherit;text-decoration: underline;}

.overF {
    overflow: hidden;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 55px;
    z-index: 0;
}

.animate {
    animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -o-animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1100px;
    }
}

.container-custom {
    overflow: hidden;
}

#header-nav{
     overflow: visible;

}

@media (min-width: 576px) and (max-width: 1199.98px) {
    .container-custom, .container-custom-sticky {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
       
    }
}

@media (min-width: 1200px) {
    .container-custom, .container-custom-sticky {
        max-width: 1400px;
    }
}

.brighten  {
    opacity: 1;
    -webkit-filter: brightness(%);
    text-decoration: none;
    cursor: pointer;
}

.brighten:hover {
    opacity: .8;
    -webkit-filter: brightness(%);
    text-decoration: none;
    cursor: pointer;
}

img {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.grow, {transition: all .2s ease-in-out !important;transform: scale(1); }
.grow:hover { transform: scale(1.1); }
.growS { transition: all .2s ease-in-out !important; }
.growS:hover { transform: scale(1.05); }
.growL { transition: all .2s ease-in-out !important; }
.growL:hover { transform: scale(1.5); }
.growI {transition: all .2s ease-in-out !important; }
.growI:hover { transform: scale(.90); }
.jump{transition: all .2s ease-in-out !important;}
.jump:hover {transform: translate(5px,0);transition: all .2s ease-in-out;}

.p-relative {position: relative;}
.p-absolute {position: absolute;}
.overflow-h{overflow: hidden;}

.fullCenter {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.xCenter {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.yCenter{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.fullHeight {
    height: 100vh !important; 
}

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

img.p-absolute.fullCenter {
    pointer-events: none;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    /*padding-top: 30px;*/
    height: 0;
    overflow: hidden;
}

.embed-container iframe, .embed-container object,.embed-container embed  {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

iframe {display: block;}

.position-0 {
    top: 0;
    left: 0;
}

.border-light {
--bs-border-opacity: 0.35;
}


/* FOOTER */

footer{clear: both;}

footer{
    font-size: 14px;
    clear: both;
    color: #fff;
    font-weight: 500;
}

 #footer-widgets a{
    text-decoration: none;
    font-weight: 600;
}

#footer-widgets a:hover {
    text-decoration: underline;
}

footer ul {
    padding: 0px;
}
footer ul li {
    list-style: none;
}

.grecaptcha-badge {
    display: none !important;
}


/*  CUSTOM */

.post h2 {
    font-size: 24px;
    font-variation-settings: 'wght' 900;
    color: var(--bs-main-color);
}

.post h3 {
    font-size: 19px;
    font-variation-settings: 'wght' 700;
    color: var(--bs-main-color);
}

.post p, .post ul {
    margin-bottom: 20px;
}

.post p:last-child {
    margin-bottom: 0px;
    padding-bottom: 0rem;
}

.post img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.post li{
    margin-bottom: 5px;
}

.post a{
    color: var(--bs-third-color);
    font-weight: bold;
}

.post a:hover{
    color: inherit !important;
    font-weight: bold;
}

.border-custom {
    border-color: var(--bs-custom-light-color);
}

.text-custom {
    color: var(--bs-custom-light-color);
}

blockquote {
    padding: 1.3rem;
    font-weight: bold;
    background-color: #F3F4F5;
}
blockquote p {
    font-size: 18px !important;
}

.btn-circle {
    font-weight: 600;
    border-radius: 50rem;
    color: var(--bs-white);
}

.btn-custom{
    color: var(--bs-white) !important;
    font-size: 16px;
    margin-top: 1.5rem;
    padding: 6px 40px 6px !important;
    border-radius: .55rem !important;
}

.btn-custom:hover {
    background: var(--bs-secondary-color);
    color: var(--bs-main-color) !important;
    transform: translate(0, -0.25rem);

}

.btn-custom-secondary {
    background: var(--bs-secondary-color);
    color: var(--bs-main-color) !important;
    font-size: 16px;
    margin-top: 1.5rem;
    padding: 6px 40px 6px !important;
    border-radius: .55rem !important;
}

.btn-custom-secondary:hover {
    background: var(--bs-main-color);
    color: var(--bs-white) !important;
    transform: translate(0, -0.25rem);
}


.btn-custom-line {
    background: var(--bs-custom-grey);
    color: var(--bs-main-color) !important;
    font-size: 16px;
    margin-top: 1.5rem;
    padding: 6px 40px 6px !important;
    border-radius: .55rem !important;
    border: solid 2px var(--bs-secondary-color);
}

.btn-custom-line:hover {
    background: var(--bs-main-color);
    color: var(--bs-white) !important;
    border: solid 2px  var(--bs-secondary-color);
}

@media (max-width: 576px) {
    .mb-10 {
        margin-bottom: 10rem !important;
    }
}