.html, body, div, table, h1, h2, h3, h4, h5, h6, p, span, ul, ol, li {
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
}
p {font-size: 1.4rem;}
h1 {color: #eb553a; font-weight: 800;  font-size: 3.4rem; margin-bottom: 50px;}
h3 {color: #18405F; font-weight: 800;  font-size: 3em; text-align: center; margin-bottom: 70px;}
h4 {color: #18405F; font-weight: 700;  font-size: 2rem;}
p.lead { font-weight: 400; font-size: 2.5rem; color: #18405f; margin-top: 50px;}
.button { background-color: #eb553a; color: antiquewhite; font-size: 1.5rem; border-radius:50px; padding-left: 80px; padding-right: 80px;}
.item {background-color: #F6D55B; border-radius: 16px}
.tooltip {background: antiquewhite; border-radius: 8px; color: #18405F;}
.has-tip { border-bottom: none;}
.has-tip:hover {color:antiquewhite}
.tooltip::after, .tooltip.top::before{border-color: antiquewhite transparent transparent; color: antiquewhite;}

#menu .grid-container {padding: 0;}
#menu {z-index:9999; position: relative;}
#top { background-color:#F6D55B;  min-height: 750px;background-image: url(../img/image\ 8.png); background-repeat: no-repeat; background-size: contain; background-position: center;}
.menu .menu-text {padding-bottom: 0px;}
#about {background-color: #3CAFA4; background-image: url(../img/heart.png); background-repeat: no-repeat; background-size: contain; background-position: top right; padding: 70px 0px 70px 0px ;}
.pas { background-image: url(../img/paz.png); background-repeat: repeat-x; background-size: cover; margin-top: -5%; position: relative; height: 200px; z-index: 9990;}


.gallery img {max-height: 400px}
#services {background-color: #E8ECEF; background-image: url(../img/smile.png); background-repeat: no-repeat; background-position: top left; padding: 145px 0px 70px 0px;  z-index: 1; margin-top: -75px;}
#services .item { text-align: center; margin-bottom: 100px;}
#services .item p { padding: 0px 40px 40px 40px;}
#services .item img {margin: -100px 0px 0px 0px;}
#camps {padding: 70px 0px 140px 0px;  z-index: 2;}
#camps .item {padding: 0px 40px 40px 40px; margin: 0px 20px 0px 20px;}
#camps .item img {max-height: 250px; }
#camps .item a p {color:#000}
#camps .item ul.menu li img {max-height: 50px; margin-bottom:10px }
#about ul.menu li { background: #fff; padding: 10px; text-align: center; border-radius: 32px; margin: 10px; width: 25%; height: 120px; color:#000; font-size: 1rem;}
#about ul.menu li img {max-height: 50px; margin-bottom:10px }
#camps .item ul.menu li  {margin-bottom: 10px }
#camps .item span.date {margin-top: -100px; background-color: #eb553a; display: block; border-radius: 50%; width: 200px; height: 200px; color: antiquewhite; font-weight: bold; text-align: center; line-height: normal; padding-top: 20px;}
#about span.date {margin: auto; margin-top: 50px;  background-color: #eb553a; display: block; border-radius: 50%; width: 200px; height: 200px; color: antiquewhite; font-weight: bold; text-align: center; line-height: normal; padding-top: 20px;}
#camps .item span.date .day, #about span.date .day{font-size: 3rem;display: block;}
#camps .item span.date .month, #about span.date .month {font-size: 1.6rem;display: block; margin-top: -10px;}
#camps .item span.price, #about span.price {margin-top: -80px; background-color: #18405F; display: block; border-radius: 16px; color: antiquewhite; font-weight: bold; text-align: center; padding: 10px 0px 10px 0px; line-height: normal; }
#camps .item span.price .price_title, #about span.price .price_title {font-size: 1rem;display: block;}
#camps .item span.price .price_total, #about span.price .price_total{font-size: 3rem;display: block;  margin-top: -10px;}
#camps .menu li {width: 25%; text-align: center; height: 51px;}
.slick-prev:before, .slick-next:before {color:#18405F}
path {color: #000; fill:#000}
#camps .menu li:hover path {color: #fff; fill:antiquewhite}

#faq {background-color: #CEEBE8;background-image: url(../img/sun.png); background-repeat: no-repeat; background-position: top left; padding: 145px 0px 140px 0px;  z-index: 3; margin-top: -75px;}
.accordion, .accordion-content {background: none;}
.accordion-title, .accordion-content { padding-right: 70px; border: none}
.accordion-title:hover {background: none;}
.accordion-title::before {right: 1rem; font-size: 3rem; color: #18405F; margin-top: -30px;}
li.accordion-item { border-bottom: 2px solid #18405F;}

#contacts {background-color: #E8ECEF;padding: 145px 0px 140px 0px;  z-index: 4; margin-top: -75px;}
#contacts .item {background: none; margin: 30px 30px 0px 0px;}
[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea { background-color: #D9D9D9; color: #7D7D7D; border-radius: 32px; padding: 10px 20px 10px 20px; text-shadow: none; box-shadow: none; height: 3rem; direction: rtl;}
::placeholder {color: #7D7D7D; opacity: 1; /* Firefox */}
::-ms-input-placeholder { /* Edge 12 -18 */color: #7D7D7D;}
.fieldset {border: none; width: 100%;}
.container {
    display: block;
    position: relative;
    padding-right: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 25px;
    width: 25px;
    background-color: #D9D9D9; border-radius: 4px;
  }
  
  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark {
    background-color: #D9D9D9;
  }
  
  /* When the checkbox is checked, add a blue background */
  .container input:checked ~ .checkmark {
    background-color: #3DAFA4;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .container input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #contacts .item2 {
    background-image: url(../img/star.png); background-repeat: no-repeat; background-size: contain; background-position: top left; color:antiquewhite; padding-top: 80px;
  }
  #contacts .item2 a {color: #000; text-decoration: underline;}
  #footer {padding: 70px 0px 70px 0px;} 
  #footer .menu {margin-top: 40px;}
  #footer .menu span {color: #EB543A; font-size: 1.4rem; text-decoration: underline; margin-right: 50px; cursor: pointer;}
  .close-button { background-color: #3CAFA4; width: 50px; height: 50px; left: 1rem; right:unset; }
  .close-button span {color: #fff; font-weight: bold;}
  .reveal {border-radius: 16px; padding: 20px;}
#camps .item .menu li {display:none;}
#camps .item .menu li.i1-1, #camps .item .menu li.i2-2, #camps .item .menu li.i3-3, #camps .item .menu li.i4-4, #camps .item .menu li.i5-5, #camps .item .menu li.i6-6, #camps .item .menu li.i7-7, #camps .item .menu li.i8-8  {display: block;}
.slick-prev, .slick-next {width: 50px; height: 50px;}
[dir='rtl'] .slick-prev {right: -50px;}
[dir='rtl'] .slick-next {left: -50px;}
.slick-prev:before, .slick-next:before {font-size: 40px;}

#place {padding: 70px 0px 140px 0px;  z-index: 1; background-color: #E8ECEF;}

#place h3 {text-align: right}
#goals {padding: 140px 0px 175px 0px;  z-index: 3; background-color: #fff; margin-top: -75px;}
#goals .item { margin: 20px; padding: 20px 20px 0px 20px; min-height: 175px; text-align: center;}
#goals .item p {font-size: 1.8rem;}
#activities {background-color: #E8ECEF; background-image: url(../img/smile.png); background-repeat: no-repeat; background-position: top left; padding: 145px 0px 0px 0px;  z-index: 1; margin-top: -75px;}
#activities h3 {margin-bottom: 10px; padding-bottom:0px;}
#activities p.lead {margin-bottom: 70px; margin-top:0px;}
#activities .item, #activities_special .item { text-align: center; margin-bottom: 100px;}
#activities .item p, #activities_special .item p{ padding: 0px 40px 40px 40px;}
#activities .item img, #activities_special .item img{padding: 0px 35% 10px 35%; margin-top:-50px;}
#activities_special {background-color: #CEEBE8;  padding: 35px 0px 140px 0px;  z-index: 1;}
#info { padding: 145px 0px 0px 0px;  z-index: 1; margin-top: -75px; background-color: #3CAFA4; color:#fff; }
#info p, #info li {font-size: 1.4rem;}
#info .item {padding: 0px 40px 40px 40px; background-color: #3CAFA4; }
#inner { padding: 70px 0px 140px 0px;}
#inner h3 {text-align: right; margin-bottom: 10px;margin-top: 30px;}
.camp-page #top {padding-top:50px;}
.camp-page h1 {margin-top:100px; margin-bottom:5px;}
.camp-page p.lead {margin-top: 0px; margin-bottom:50px;}
.camp-page #gallery { margin-top: 0px}
  @media only screen and (max-width: 640px) { 
          
    /* Styles for small screens */ 
    .top-bar ul li {padding-top: 5px; width:100%; text-align: right;}
.top-bar ul li:last-child { margin-right: 0%;}
.top-bar ul li a {color: #000; font-size:1.5rem;}
#top {text-align: center; margin-top: 40px;}
h1 {color: #eb553a; font-weight: 800;  font-size: 2.4rem; margin-bottom: 50px;}
#about, #services, #faq, #contacts .item2 {background-image: none;}
.pas {margin-top: -75px;}
#camps .item {text-align: center; padding: 5px;}
#camps .item p {margin-bottom: 0; padding-bottom: 0;}
#camps .item img {max-height: unset}
#camps .item span.date {margin-top: 10px; background-color: #eb553a; display: block; border-radius: 50%; width: 100px; height: 100px; color: antiquewhite; font-weight: bold; text-align: center; line-height: normal; padding-top: 20px; text-align: center; margin: auto;}
#camps .item span.date .day {font-size: 2rem;display: block;}
#camps .item span.date .month {font-size: 1rem;display: block; margin-top: -10px;}
#camps .item span.price {margin-top: -10px; background-color: #18405F; display: block; border-radius: 16px; color: antiquewhite; font-weight: bold; text-align: center; padding: 10px 0px 10px 0px; line-height: normal; }
#camps .item span.price .price_title {font-size: 1rem;display: block;}
#camps .item span.price .price_total {font-size: 2rem;display: block;  margin-top: -10px;}
#camps .menu li {width: 33.3%; text-align: center; height: 51px;}
path {color: #000; fill:#000; }

#camps .menu li:hover path {color: #fff; fill:antiquewhite}
#contacts .item2 {color: #18405F; text-align: center;}
#footer {text-align: center;}
#footer .menu.align-left {text-align: center; justify-self: unset; justify-content:center;}

.camp-page h1 {margin-top: 10px;}
#about span.date {margin: auto; margin-top: 0px;}
#about span.price {margin-bottom: 50px;}
#about ul.menu li { background: #fff; padding: 10px; text-align: center; border-radius: 32px; margin: 1%; width: 48%; height: 120px; color:#000; font-size: 1rem;}
#about ul.menu li img {max-height: 50px; margin-bottom:10px }
} 
  @media only screen and (min-width: 641px) and 
            (max-width: 3024px) {  
          
            /* Styles for medium screens */ 
.top-bar {margin-top: 0px; border-bottom: 8px solid #3DAFA4; background-color: #fff; padding: 0;}
.top-bar ul {background: none; margin: 0; }
.top-bar ul li {padding-top: 40px; width: 15.833%; text-align: center;}
.top-bar ul li.menu-text, .top-bar ul li:last-child { padding-top: 0;}
.top-bar ul li:last-child { margin-right: 5%;}
.top-bar ul li a {color: #000; font-size:1.5rem;}
.top-bar ul li a:hover {color: #3CAFA4;}
.top-bar ul li a.button {width: 100%; height: 100%; border-radius: 0; padding-top: 45px;}
}