/*/ STYLE FOR PHP STATIC PAGES /*/

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'Euclid Flex';
  src: local('Euclid Flex Light'), local('Euclid-Flex-Light'),
      url('../assets/fonts/EuclidFlex-Light.woff2') format('woff2'),
      url('../assets/fonts/EuclidFlex-Light.woff') format('woff'),
      url('../assets/fonts/EuclidFlex-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

/*@font-face {
    font-family: 'euclid_flexlight';
    src: url('../assets/fonts/euclidflexlight-webfont.woff2') format('woff2'),
         url('../assets/fonts/euclidflexlight-webfont.woff') format('woff'),
         url('../assets/fonts/euclidflexlight-webfont.svg#euclid_flexlight') format('svg');
    font-weight: normal;
    font-style: normal;
}*/


@layer base {
  :root {
    --color-relief--main : 176, 255, 255;
    --color-relief--light : 255, 255, 118;
    --color-relief--grey : 243, 241, 241;
  }
}

@layer components{
  .mask-bubble{
    -webkit-mask-image: url(../assets/icons/bubble-left.png);
    mask-image: url(../assets/icons/bubble-left.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat; 
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .mask-bubble--inverted{
    -webkit-mask-image: url(../assets/icons/bubble-right.png);
    mask-image: url(../assets/icons/bubble-right.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat; 
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}

@layer utilities {
  .gradient-double{
    background: linear-gradient(rgb(var(--color-relief--light)), rgb(var(--color-relief--main)) );
  }

  .gradient-main{
    background: linear-gradient(rgb(var(--color-relief--main)), #fff );
  }

  .gradient-light{
    background: linear-gradient(rgb(var(--color-relief--light)), #fff );
  }

  .gradient-grey{
    background: linear-gradient(rgb(var(--color-relief--grey)), #fff );
  }

  .gradient-main--inverted{
    background: linear-gradient(#fff, rgb(var(--color-relief--main)));
  }

  .gradient-light--inverted{
    background: linear-gradient(#fff, rgb(var(--color-relief--light)));
  }

  .gradient-grey{
    background: linear-gradient(#F3F1F1, #fff );
  }
}

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


:-moz-focusring,
:focus,
:focus-visible {
  outline: 1px solid rgb(var(--color-relief--light))!important;
}

html, body {
  font-family: 'Euclid Flex', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  font-weight:100;
}

li {
  list-style: none;
}

a {
  color: currentColor;
  text-decoration: none;
}

strong,
b {
  font-weight: 500;
}

img {
  width: 100%;
}

main {
  min-height: calc(100vh - 10rem);
}

main:focus {
  outline: none;
}

.text p + p{
  margin-top:1rem;
}

.text strong{
  font-weight: bold;
}

.text a{
  text-decoration: underline;
}

.text h2{
  font-size:32px;
  line-height:1.2;
  margin: 3rem 0 1.5rem 0;
  max-width:600px;
}

.text h2:first-child{
  margin-top:0;
}

.text h3{
  font-size:22px;
  line-height:1.2;
  margin: 2rem 0 0.5rem 0;
  max-width:600px;
}

.sib-form .entry__field{
  border:none;
  background-color:transparent;
  border-radius:0;
}

.sib-form .entry__choice .checkbox, .sib-form .entry__choice .radio-button{
  position:relative;
  top:3px;
}

.sib-form-block__button svg{
  display:block!important;
}

.sib-form ::placeholder{
  color:#000;
}

.sib-form .entry__choice{
  line-height:1.1;
}

.sib-form .entry__field:focus-within{
  box-shadow: 0 0 0 1px solid rgb(var(--color-relief--main));
}

#sib-form-container input{
  -webkit-appearance: none;
  background-color:transparent;
  border-bottom:1px solid #000;
  outline:;
}

#sib-container{
  background-color:transparent;
}

.gradient-double{
  background: linear-gradient(rgb(var(--color-relief--light)), rgb(var(--color-relief--main)) );
}

.gradient-main{
  background: linear-gradient(rgb(var(--color-relief--main)), #fff );
}

.gradient-light{
  background: linear-gradient(rgb(var(--color-relief--light)), #fff );
}

.gradient-grey{
  background: linear-gradient(rgb(var(--color-relief--grey)), #fff );
}

.gradient-main--inverted{
  background: linear-gradient(#fff, rgb(var(--color-relief--main)));
}

.gradient-light--inverted{
  background: linear-gradient(#fff, rgb(var(--color-relief--light)));
}

.gradient-grey{
  background: linear-gradient(#F3F1F1, #fff );
}

.btn-relief{
  border: 1.45px solid #000;
  border-left: none;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  padding: 5px 20px;
  padding-left: 0;
  display:inline-block;
  position: relative;
  font-size:16px;
  background:transparent;
  margin-left:10px;
  transition: transform .3s ease
}

.btn-relief:hover{
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.btn-relief > span{
  display:block;
  padding:0;
  margin:0;
}

.btn-relief::before{
  content:"";
  background: url('../assets/icons/queue.png') no-repeat center;
  background-size:contain;
  width:20px;
  height:calc(100% + 6px);
  position:absolute;
  left:-20px;
  bottom: -5px;
  display:block;
  z-index:9;
}

.btn-relief.btn-relief--inverted::before{
  right:-6px;
  left:auto;
  transform: scaleX(-1);
}

.btn-relief::after{
  content:"";
  width:20px;
  height:calc(100% + 1px);
  border-top-left-radius:20px;
  border-bottom-left-radius:20px;
  position: absolute;
/*  background-color:inherit;*/
/*  border:2px solid inherit;*/
  border-right: none;
  bottom:-.3px;
  left:-1.5px;
}

.btn-relief.btn-relief--inverted:after{
  left:auto;
  right:-2px;
}

.btn-footer:hover > svg,
.btn-member:hover > svg{
  fill: rgb(var(--color-relief--main));
}

.swiper-button-prev::after, 
.swiper-rtl .swiper-button-next::after,
.swiper-button-next::after, 
.swiper-rtl .swiper-button-prev::after{
  content:""!important;
  background: url(../assets/icons/prev.png) no-repeat center;
  background-size:contain;
  height:100%;
  width:25px;
}

.swiper-button-next::after, 
.swiper-rtl .swiper-button-prev::after{
  background: url(../assets/icons/next.png) no-repeat center;
  background-size:contain;
}

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

.icon-calendar{
  background: url(../assets/icons/calendar-minus.png) no-repeat center;
  background-size:contain;
}

.icon-contact{
  background: url(../assets/icons/mail-forward.png) no-repeat center;
  background-size:contain;
}

.icon-computer{
  background: url(../assets/icons/device-desktop.png) no-repeat center;
  background-size:contain;
}

.icon-marker{
  background: url(../assets/icons/marker.png) no-repeat center;
  background-size:contain;
}

.icon-list{
  background: url(../assets/icons/list.png) no-repeat center;
  background-size:contain;
}

.icon--prev,
.icon--next{
  display:block;
  width:100%;
  height:100%;
}

.icon--prev{
  background: url(../assets/icons/prev.png) no-repeat center;
  background-size:contain;
}

.icon--next{
  background: url(../assets/icons/next.png) no-repeat center;
  background-size:contain;
}

.dropdown[data-visible="false"] > .question-block{
  opacity: 0;
  transition: all .3s ease;
  height: 0;
  max-height: 0;
  overflow:hidden;
  padding-top:20px 0;
}

.dropdown[data-visible="true"] > .question-block{
  opacity: 1;
  max-height: 1000px;
  height:auto;
  padding:20px 0;
}

.dropdown > header span{
  -webkit-transition: transform .3s ease;
  transition: transform .3s ease;
}

.dropdown[data-visible="true"] > header span{
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}