@import url('quickmenu.css');
@import url('programare.css');
@import url('abonamente.css');
@import url('menu.css');
@import url('desprenoi.css');
@import url('contact.css');
@import url('cautare.css');
@import url('misiune.css');
@import url('activitati.css');
@import url('ateliere.css');
@import url('galerie.css');
@import url('termeni.css');
@import url('contactup.css');
@import url('politica.css');
@import url('cookies.css');
:root {
  --maro: #322126;
  --verde: #bbd766;
  --galben: #f8e69a;
  --rosu: #be1e2d;
  --body-font: 'Nunito', sans-serif;
}

body, html {
  width: 100%;
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  color:var(--maro);

}

/* personalizare scrollbar */
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--maro) var(--galben);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--verde);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--maro);
  border-radius: 20px;
  border: 3px solid var(--verde);
}

/*GRID*/
.wrapper {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  grid-template-areas:
  "hd "
  "main"
  "ft ";
}

.header {
  grid-area: hd;
  background: white;
}

.content {
  grid-area: main;
  background: var(--verde);
}
.footer {
  grid-area: ft;
  background: var(--galben);
}

@media (min-width: 1024px) {
  .wrapper {
    position: relative;
    float: right;
  }
}

/* SHADOW */
.shadow{
  display:none;
  position: fixed;
  float:left;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: var(--maro);
  opacity: 0.4;
  z-index: 150;
}
.shadow_up{
  display:none;
  position: fixed;
  float:left;
  overflow: hidden;
  top: 100vh;
  width: 100%;
  height: 100%;
  background: var(--maro);
  opacity: 0.4;
  z-index: 150;
}

.button-close {
  position: fixed;
  color: var(--maro);
  border: none;
  background: var(--verde);
  margin: 4.2vh 0 0.5vh 0.2vw;
}

@media (min-width: 1024px) {
  .button-close {
    margin: 5vh 0 0.5vh 0.8vw;
  }
}

@media (min-width: 1400px) {
  .button-close {
    margin: 6vh 0 0.5vh 0.2vw;
  }
}

.text-card-title {
  color: var(--rosu);
  text-align: left;
}


/*European logo*/
.logo{
  display: block;
  width: 100vw;
  border: none;
  position: relative;
  align-items: center;
  background: white;
}

.logo-inner{
  background: white;
  border: none;
  width: 60%;
  position: relative;
  /*float: contour;*/
  left: 20%;
  /*z-index: 50;*/

}

.col {
  width: 20vw;
}

.logo-toggle-up,  .logo-toggle-down {
  background: transparent;
  border: none;
  position: relative;
  margin-right: 2vw;
  float: right;
}

.logo-toggle-up {

}
.logo-toggle-down {
  display: none;
}

.logo-inner img {
  height: auto;
  width: 10vw;

}

.button-logo {
  position: absolute;
  left: 92vw;
  height: 4vh;
  padding: 1vh 1vw 1vh 1vw;
  z-index: 140;

}

@media (min-width: 1024px) {
  .logo-inner img {
    height: auto;
    width: 5vw;

  }
}

/*HEADER*/
.header{
  display: block;
  width: 100vw;
  position: relative;
  align-items: flex-end;
  border-top: 0.1rem solid var(--maro);
}

.header-gradient {
  position: absolute;
  background-image: linear-gradient(90deg, var(--galben), white);
  width: 65vw;
  height: 11vh;
}
.header-inner {
  position: relative;
  padding: 3vh 3vw 3vh 3vw;
  background: transparent;
  align-items: flex-end;
  height: 11vh;
}
.header-inner img {
  height: 7vh;
  width: auto;
  float: right;

}

@media (min-width: 1024px) {
  .header-inner {
    height: 20vh;
  }
  .header-inner img {
    height: 16vh;
    width: auto;
  }
  .header-gradient {
    width: 70vw;
    height:20vh;
  }
}

/*CONTENT*/
.content{
  border: none;
}

.content-inner{
  display: grid;
  width: auto;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-gap: 2vw;
  margin: 8vh 4vw 8vh 9vw;
  border: none;
  overflow: hidden;
  vertical-align: center;
  align-content: center;
}

.content .card  {
  width: 75vw;
  border:none;
  background: var(--verde);
}

.content .card-body  {
  background: var(--rosu);
  color: var(--galben);
  border-radius: 0px 0px 20px 20px;
  border:none;
}

.content .card-title   {
  background: var(--rosu);
  border:none;
}

.content .card-footer   {
  background: var(--verde);
  font-size: 1rem;
  color: var(--maro);
  border:none;
}

.content .card img  {
  /*width: 70vw;*/
  border: 1rem solid var(--rosu);
  border-radius: 20px 20px 0px 0px;
  background: white;
}

.content .card a  {
  text-decoration: none;
}

@media (min-width: 1024px) {
  .content-inner {
    grid-template-columns: 1fr 1fr 1fr;
    overflow: hidden;
    position: relative;
    float: right;
    margin: 8vh 8vw 8vh 13vw;
  }

  .content .card   {
    width: 24vw;
  }

  .content .card img  {
    border: 1.5rem solid var(--rosu);
  }

  .content .card-footer {
    font-size: 1.5rem;
  }
}

/*FOOTER*/
/*Grid*/
.footer{
  width: 100vw;
}

.footer-inner {
  display: grid;
  width: 100vw;
  grid-template-columns: 1fr;
  grid-template-areas:
  "nw"
  "st1"
  "st2"
  "fm";
  overflow: hidden;
  position: relative;
}

.newsletter {
  grid-area: nw;
}

.statement-1 {
  grid-area: st1;
}

.statement-2 {
  grid-area: st2;
}

.footer-menu {
  grid-area: fm;
  background: white;
}

.statement-1 .container-fluid{
  border-bottom: 0.1rem solid var(--maro);
  padding: 2vh 2vw 2vh 2vw;
  width: 85vw;
}

.statement-2 .container-fluid{
  padding: 2vh 2vw 2vh 2vw;
  width: 85vw;
}

/*Newsletter*/
.newsletter .form-control-newsletter {
  display: block;
  width: 100%;
  background: var(--galben) ;
  margin: 1vh 0vw 1vh 0vw;
  border: none;
  border-bottom: 0.1rem solid var(--maro);
  border-radius: 0px ;
  color: var(--maro);
}

.newsletter .card {
  background: var(--galben);
  padding-bottom: 2vh;
  padding-top: 2vh;
  border: none;
}

.newsletter .form-control-newsletter:focus {
  color: var(--maro);
  border-color: var(--maro);
  outline: 0;
  box-shadow: none
}

.newsletter .border-rad {
  border-radius: 25px;
  color: white;
  background-color: var(--maro);
  border-color: var(--verde);
}

.newsletter .border-rad:hover {
  background-color: var(--verde);
  border-color: var(--maro);
}

.footer-menu .container-fluid {
  padding: 4vh 3vw 4vh 3vw;
  flex-direction: column;
}
.footer-menu ul {
  flex-direction: column;
  align-items: center;
}
.footer-menu a {
  color: var(--maro);
}
.footer-menu a:hover {
  color: var(--rosu);
}
@media (min-width: 1024px) {
  .footer-inner {
    grid-template-areas:
    "nw st1 st2"
    "fm fm fm";
    grid-template-columns: 1fr 1fr 1fr;
    overflow: hidden;
    float: right;
    width: 100vw;
  }
  .statement-1 .container-fluid{
    border-bottom: none;
    width: auto;
    border-left: 0.15rem solid var(--maro);
    padding: 4vh 3vw 4vh 3vw;
    margin:  6vh 0vw 4vh 0vw;
  }
  .statement-2 .container-fluid{
    border-bottom: none;
    width: auto;
    border-left: 0.15rem solid var(--maro);
    padding: 4vh 3vw 4vh 3vw;
    margin:  6vh 0vw 4vh 0vw;
  }
  .footer-menu ul {
    flex-direction: row;
    align-items: center;
  }
}