:root {

    --grey1: #F4F4F4;

    --grey2: #4A4A4A;

    --pink1: #e60286;

    --pink2: #A3005F;

    --yellow1: #FFBC01;

    --size1: 0.9375rem; 

    --size2: 1.0313rem;

    --size3: 1.2188rem;

    --size4: 1.5rem;

    --size5: 1.6875rem;

    --size6: 1.9688rem;

    --size7: 0.75rem;

    --size8: 2.625rem;

    --size9: 3.09375rem;

    --size10: 0.6563rem;

    --size11: 1.4063rem;

    --size12: 1.125rem;

}



html, body {

    height: 100%;

    width: 100%;

}

body {

    background: #FFFFFF;

    color: #000;

    font-family: "Syne", sans-serif;

    overflow-x: hidden;

}

article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {

    display: block;

    overflow: hidden;

}

.row {

    overflow: hidden;

}

a {

    color: var(--pink1);

    transition: 0.5s;

}

a:hover, a:active, a:focus {

    color: var(--pink2);

    outline: none;

    text-decoration: none;

}

p {

    padding: 0;

    margin: 0 0 1.875rem 0;

}

h1, h2, h3, h4, h5, h6 {

    font-family: "Syne", sans-serif;

    font-weight: 500;

    margin: 0 0 1.25rem 0;

    padding: 0;

    color: var(--pink1);

}

/*--------------------------------------------------------------

# Header

--------------------------------------------------------------*/

#header {

    height: 10rem;

    left: 0;

    top: 0;

    right: 0;

    padding: 2.8125rem 0;

    transition: all 0.5s;

    width: 100%;

    position: fixed;

    display: flex;

    color: #000;

    z-index: 1113;

}

@media (max-height: 600px) {

    #header {

        height: 6.25rem;

        left: 0;

        top: 0;

        right: 0;

        transition: all 0.5s;

        z-index: 1113;

        width: 100%;

        position: fixed;

        display: flex;

    }

    #mobile-nav-toggle {

        margin: -0.75rem 0 0 0 !important;

    }

}

#header.header-fixed {

    widows: 100%;

    position: fixed;

    -webkit-backdrop-filter: blur(15px);

    backdrop-filter: blur(15px);

    transition: all 0.5s;

    border: 1px solid rgb(0,0,0,0.25);

    z-index: 1113;

}

#header.header-fixed-yellow {

    widows: 100%;

    position: fixed;

    -webkit-backdrop-filter: blur(15px);

    backdrop-filter: blur(15px);

    transition: all 0.5s;

    border: 1px solid rgb(0,0,0,0.25);

    z-index: 1113;

}

#header.header-fixed .nav-menu .top-menu a {

    color: #000 !important;

}

#header.header-fixed .nav-menu .top-menu i {

    color: #000 !important;

}

#header.header-fixed .nav-menu .top-menu a:hover  {

    color: var(--pink1) !important;

}

#header.header-fixed .nav-menu .menu-has-children a {

    color: #000 !important;

}

#header.header-fixed .nav-menu .menu-has-children i {

    color: #000 !important;

}

#header.header-fixed .nav-menu .menu-has-children a:hover {

    color: var(--pink1) !important;

}

#header.header-fixed .nav-menu .menu-has-children a:hover i {

    color: var(--pink1) !important;

}

#header.header-fixed #top-buttons a {

    color: #000 !important;

}



#header.header-fixed-yellow .nav-menu .top-menu a {

    color: #000 !important;

}

#header.header-fixed-yellow .nav-menu .top-menu i {

    color: #000 !important;

}

#header.header-fixed-yellow .nav-menu .top-menu a:hover  {

    color: var(--yellow1) !important;

}

#header.header-fixed-yellow .nav-menu .menu-has-children a {

    color: #000 !important;

}

#header.header-fixed-yellow .nav-menu .menu-has-children i {

    color: #000 !important;

}

#header.header-fixed-yellow .nav-menu .menu-has-children a:hover {

    color: var(--yellow1) !important;

}

#header.header-fixed-yellow .nav-menu .menu-has-children a:hover i {

    color: var(--yellow1) !important;

}

#header.header-fixed-yellow #top-buttons a {

    color: #000 !important;

    border: 2px solid #000;

}

#header.header-fixed-yellow #top-buttons .header-divider{

    background: rgba(0, 0, 0, 0.25) !important;

}



#header.header-fixed #top-buttons .header-divider{

    background: rgba(0, 0, 0, 0.25) !important;

}

#header-container {

    display: flex;

}

#header #logo {

    align-content: center;

    display: inline-grid;

    flex: 1;

}

#header #logo a {

    display: table;

}

#header #logo a img {

    display: table-cell;

    padding: 0;

    vertical-align: middle;

    height: 100%;

}

#header #logo #nlogo {

    display: block;

}

#header #logo #flogo {

    display: none;

}

#header.header-fixed #logo #nlogo {

    display: none;

}

#header.header-fixed #logo #flogo {

    display: block;

}

/*--------------------------------------------------------------

# Navigation Menu

--------------------------------------------------------------*/

.nav {

    position: relative;

    width: auto;

    flex: 3;

}

.nav-menu, .nav-menu * {

    margin: 0;

    padding: 0;

    list-style: none;

}

.nav-menu ul {

    position: absolute;

    display: none;

    top: 100%;

    left: 0;

    z-index: 99;

    overflow: hidden;

}

.nav-menu li {

    position: relative;

    white-space: nowrap;

}

.nav-menu > li {

    float: left;

}

.nav-menu li:hover > ul,

.nav-menu li.sfHover > ul {

    display: block;

}

.nav-menu ul li ul {

    top: 0;

    left: 100%;

}

.nav-menu ul li {

    min-width: 11.25rem;

}

#nav-menu-container {

    justify-content: center !important;

    display: flex;

    width: 100%;

    align-self: stretch;

    align-items: center;

    flex-grow: 1;

    flex-direction: column;

}

@media (max-width: 600px) {

    #header #logo {

        flex: 2;

    }

    #header .nav {

        flex: 0;

    }

    #header #top-buttons {

        display: none;

    }

}

.nav-menu .top-menu a {

    padding: 0.625rem 1.625rem;

    text-decoration: none;

    display: inline-grid;

    color: #fff;

    font-family: "Syne", sans-serif;

    font-weight: 400;

    font-size: var(--size12);

    outline: none;

    align-content: center;

    text-align: center;

}

.bld {

    color: var(--pink1) !important;

    font-weight: 600 !important;

}

.red a {

    color: var(--pink1) !important;

    font-weight: 600 !important;

}

.nav-menu .top-menu a:hover {

    color: var(--pink1);

}

.nav-menu .menu-has-children .sf-with-ul:hover {

    color: var(--pink1);

}



.nav-menu .top-menu a:hover i {

    color: var(--pink1);

}

.nav-menu .menu-has-children .sf-with-ul:hover i{

    color: var(--pink1);

}



.nav-menu .menu-has-children a {

    padding: 0.625rem 1.625rem;

    text-decoration: none;

    display: inline-flex;

    color: #fff;

    font-family: "Syne", sans-serif;

    font-weight: 400;

    font-size: var(--size12);

    outline: none; 

    width: 100%;

    vertical-align: middle;

}

.nav-menu .menu-has-children i {

    position: relative;

    right: 0;

    z-index: 99;

    padding-top: 0.125rem;

    cursor: pointer;

    color: #fff;

    overflow: hidden;

    display: inline-block;

    margin-left: 0.3125rem;

}

.nav-menu ul {

    margin: 0;

    padding: 0;

    background: var(--grey1);  

}

.nav-menu ul li {

    transition: 0.3s;

    border-bottom: 1px solid rgb(0, 0, 0, 0.1);

}

.nav-menu ul li a {

    padding: 0.625rem;

    color: #000 !important;

    transition: 0.3s;

    display: block;

    font-size: var(--size12);

    text-transform: none;

}

.nav-menu ul li:hover > a {

    color: var(--pink1) !important;

}

.nav-menu ul ul {

    margin: 0;

}

#top-buttons {

    display: flex;

    position: relative;

    width: auto;

    flex: 1;

    justify-content: end !important;

    align-self: stretch;

    align-items: center;

}

#top-buttons .social-links{

    margin: 0 0.625rem;

    align-self: stretch;

    align-items: center;

    display: flex;

}

#top-buttons .social-links a{

    width: 1.9375rem;

    height: 1.9375rem;

    display: flex;

    margin: 0.3125rem;

    color: #fff;

    border: 2px solid #fff;

    border-radius: 50%;

    font-size: 18px;

}

#header.header-fixed #top-buttons .social-links a{

    border: 2px solid #000;

}

#top-buttons .social-links a i{

    display: inline-flex;

    margin: auto;

}

#top-buttons .social-links a:hover{

    webkit-transform: scale(1.1);

    transform: scale(1.1);

    -webkit-transition: .3s ease-in-out;

    transition: .3s ease-in-out;

}

#top-bar{

    position: relative;

    display: block;

}

#mobile-nav-toggle {

    position: absolute;

    right: 0;

    top: 0;

    padding: 0.5rem 0.9375rem;

    z-index: 999;

    margin: 0.75rem 0.9375rem 0 0;

    border: 0;

    background: none;

    font-size: 1.5rem;

    display: none;

    transition: all 0.4s;

    outline: none;

    cursor: pointer;

    overflow: hidden;

}

#header #mobile-nav-toggle i {

    color: var(--yellow1);

}

#header.header-fixed #mobile-nav-toggle i {

    color: var(--pink1);

}

@media (max-width: 1260px) {

    #nav-menu-container {

        display: none;

    }

    #mobile-nav-toggle {

        display: inline;

    }

    #top-buttons{

        display: none;

    }

}

#mobile-nav {

    position: fixed;

    top: 0;

    bottom: 0;

    z-index: 99999;

    left: -19.375rem;

    width: 19.375rem;

    overflow-y: auto;

    transition: 0.4s;

    scrollbar-color: var(--pink1) var(--white);

    scrollbar-width: thin;

    background: #fff;

}

#mobile-nav .menu-title {

    height: 9.375rem;

    width: 100%;

    position: relative;

    display: block;

    background: var(--yellow1);

}

#mobile-nav .menu-title img {

    position: absolute;

    width: 11rem;

    height: auto;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

#mobile-nav ul {

    padding: 0;

    margin: 0;

    list-style: none;

}

#mobile-nav ul li {

    position: relative;

    border-bottom: 1px solid rgb(0, 0, 0, 0.1);

}

#mobile-nav ul li a {

  color: #000;

  font-size: var(--size3);

  font-weight: 500;

  overflow: hidden;

  padding: 1.25rem 1.375rem 1.25rem 3.125rem;

  position: relative;

  text-decoration: none;

  width: 100%;

  display: block;

  outline: none;

}

#mobile-nav ul li a:hover {

  background: #ddd;

}

#mobile-nav ul li li {

  padding-left: 1.875rem;

}

#mobile-nav ul .menu-has-children ul {

    background: var(--grey1);

}

#mobile-nav ul .menu-has-children i {

    position: absolute;

    right: 0;

    z-index: 99;

    padding-right: 1.9375rem;

    cursor: pointer;

    color: #000;

    overflow: hidden;

}

#mobile-nav ul .menu-item-active {

  color: var(--pink1);

}

#mobile-body-overly {

    width: 100%;

    height: 100%;

    z-index: 997;

    top: 0;

    left: 0;

    position: fixed;

    display: none;

    background: rgba(0, 0, 0, 0.4);

}

body.mobile-nav-active {

  overflow: hidden;

}

body.mobile-nav-active #mobile-nav {

  left: 0;

}

body.mobile-nav-active #mobile-nav-toggle {

  color: #fff;

}



#mobile-top-buttons{    

    align-content: center;

    align-items: center;

    margin: 2rem 2.125rem 3.125rem 2.125rem;

    text-align: center;

    display: flex;

    flex-grow: 1;

    flex-direction: row;

    justify-content: center !important;

}

#mobile-top-buttons .social-links{

    margin-top: 0.625rem;

}

#mobile-top-buttons .social-links a{

    width: 1.9375rem;

    height: 1.9375rem;

    display: inline-block;

    margin-right: 0.625rem;

    color: #000;

    border: 2px solid #000;

    border-radius: 50%;

    font-size: 18px;

}

#mobile-top-buttons a{

    display: inline-block;

    font-size: var(--size1);

    color: #000;

}

#mobile-top-buttons .active{

    color: var(--pink1) !important;

    font-weight: 500;

}



form{

    width: 100% !important;

}

.form-group {

    margin-bottom: 1.25rem;

}

.form-control {

    font-size: var(--size1);

    font-weight: 400;

    padding: 0.625rem 1.9375rem !important;

    color: #000;

    border-radius: 1.875rem !important;

    border: 0.1875rem solid #000 !important;

}

.form-control:focus {

    color: #000;

    background-color: #fff;

    border-color: #000;

    outline: 0;

    box-shadow: none;

}

select.form-control:not([size]):not([multiple]){

    height: auto !important;

    padding: 1.625rem 2.5rem 1.625rem 0.9375rem;

    font-size: var(--size1);

    font-weight: 400;

    -webkit-appearance: none;

    -moz-appearance: none;

    background: #fff;

    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");

    background-repeat: no-repeat;

    background-position-x: 100%;

    background-position-y: 50%;

    background-size: 2.5rem 2.5rem;

}

.textarea {

    min-height: 10rem;

}

.btn-primary{

    background: var(--pink1) !important;

    border: 0.1875rem solid #000;

    color: #fff;

    font-weight: 500;

    font-size: var(--size11);

    padding: 0.9375rem 1.75rem !important;

    border-radius: 6.25rem !important;

    min-width: 10rem;

    width: 100%;	

}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus{

    background: var(--pink1) !important;

    border-color: #000 !important;

    box-shadow: -10px 7px #000;

    color: #fff;

}

.btn-secondary{

    background: var(--yellow1);

    border: 0.1875rem solid #000;

    color: #000;

    font-weight: 500;

    font-size: var(--size11);

    padding: 0.9375rem 1.75rem !important;

    border-radius: 6.25rem !important;

    min-width: 13rem;

    width: 100%;	

    max-width: 18rem;

}

@media (max-width: 600px) {

    .btn-secondary{

        max-width: 21rem;

    }

}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus{

    background: var(--yellow1) !important;

    border-color: #000 !important;

    box-shadow: -10px 7px #000;

    color: #000;

}

.max25{

    max-width: 27rem;

    width: 100%;

}

.btn-transparent{

    background: transparent !important;

    border: 0 !important;

    padding: 1.2rem 1.75rem;

    color: #000 !important;

    border-radius: 0 !important;

    font-size: var(--size1);

    line-height: var(--size11);

    font-weight: 600;

}

.btn-transparent:hover, .btn-transparent:active, .btn-transparent:focus{

    border: 0;

    color: var(--pink1) !important;

    box-shadow: none !important;

}

.btn-trash{

    position: absolute;

    top: 0;

    right: 10px;

    z-index: 999;

    width: 60px;

    height: 100%;

    font-size: 20px;

    color: var(--pink);

}

.bg-transparent {

    background-color: transparent !important;

}

.mini-btn{

    padding: 0.625rem 1.9375rem !important;

}

.breadcrumb {

    padding: 3.125rem 0;

    background: transparent;

    margin-bottom: 0;

}

.breadcrumb ul {

    display: flex;

    flex-wrap: wrap;

    list-style: none;

    margin: 0;

    padding: 0;

}

.breadcrumb ul li a {

    color: #000;

    font-size: var(--size1);

    line-height: var(--size3);

    font-weight: 400;

    display: inline-block;

    vertical-align: middle;

}

.breadcrumb ul li a:hover {

    color: var(--pink1);

}

.breadcrumb ul li span {

    color: #000;

    font-size: var(--size1);

    line-height: var(--size3);

    font-weight: 400;

    vertical-align: middle;

}

.breadcrumb li:not(:last-child)::after {

    display: inline-block;

    margin: 0 1rem;

    color: var(--pink1);

    content: ">";

    font-size: var(--size1);

    line-height: var(--size3);

    font-weight: 400;

    vertical-align: middle;

}

.breadcrumb ul li a i {

    color: var(--pink1);

    margin-right: 0.9375rem;

    font-size: var(--size2);

}

.error {

    border-color: rgb(127, 0, 0);

    color: rgb(127, 0, 0);

    font-size: 90%;

}



.modal {

    padding: 1.5rem !important;

    background: rgba(0, 0, 0, 0.4);

    z-index: 99999;

    height: 100%;

}

.modal-content{

    height: 100%;

    border-radius: 1.8375rem;

}

.modal-header {

    padding: 1.5rem;

}

.modal .close {

    font-size: var(--size4);

    display: block;

    position: relative;

    height: auto;

    background: var(--pink1);

    opacity: 1;

    text-shadow: none;

    color: #fff;

    padding: 0.625rem 1rem !important;

}

.modal-title {

    line-height: var(--size4);

    font-size: var(--size12);

    font-family: "Syne", sans-serif;

    font-weight: 600;

    margin-bottom: 0.9375rem;

    display: block;

    color: var(--pink1);

}

.modal-title2 {

    line-height: var(--size9);

    font-size: var(--size8);

    font-family: "Syne", sans-serif;

    font-weight: 600;

    margin-bottom: 0.9375rem;

    display: block;

}

.modal-body {

    padding: 1.5rem;

    height: 100%;

    overflow: auto;

}

.modal-body p{

    font-size: var(--size2);

    font-weight: 400;

}

.title-span {

    display: none;

}

.container-fluid {

    padding: 0 8vw;

}

.container-fluid2{

    padding: 0;

    width: 100%;

    margin-right: auto;

    margin-left: auto;

}



.error {

    border-color: red;

    color: #000000;

    font-size: 90%;

}