.slider-text {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1rem;
}
div#sav_ketto {
    background: #303030;
    border-top: 9px solid white;
    margin-top: 2rem;
}
#sav_ketto h2.block-title {
    color: white;
}
.page-title-wrap {
    padding: 0;
}
.page-title{
  
}
/*------------Title----------------*/
.block-title {
    position: relative;
    line-height: 1.2;
}
.block-title, .title {
    font-size: 2rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
    margin-top: 45px;
    padding-top: 30px;
}
.block-title::after, .title::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    width: 50px;
    height: 2px;
    margin-left: -25px;
    background: var(--color-primary);
}

/*---------------Box-----------------*/
.box-icon2 {
     box-shadow: none;
}
.items {
    display: flex;
    flex-wrap: wrap;
}

.box {
    flex: 32.23%;
}
.box-icon {
    flex: 10rem;
    background:none;
    box-shadow: none;
    color: white;
}

.box-icon:hover i{
    color: #FFEB3B;
    transform: translateY(-10px);
}
.vonal {
    flex: auto;
    background: url(../images/vonal.png);
    background-repeat: no-repeat;
    background-position: center left;
}
.nyil {
    flex: auto;
    background: url(../images/nyil.png);
    background-repeat: no-repeat;
    background-position: center right;
}
.box-content {
    color: white;
}

.box-content h4 {
    color: white;
    text-transform: uppercase;
    letter-spacing: 6px;
}


/*---------------Felx-Block--------------*/
.flex-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

.flex-block .left {
    flex: 1 1 50%;
}

.flex-block .right {
    flex: 1 1 50%;
}

/*-----------------INFOGRAFIKA------------------------*/


:root {
  --font-size: 0.8em;
  --bg1: #f9f6f3;
  --blue: #3498db;
  --green: #2ecc71;
  --purple: #9b59b6;
  --gold: #f1c40f;
  --red: #e74c3c;
  --orange: #e67e22;
  --shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f;
  --shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022;
}

main {
  padding: 1vw;
}

ul.infoGraphic {
  font-size: var(--font-size);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
ul.infoGraphic li {
    position: relative;
    width: 100%;
    max-width: 35em;
    background: var(--bg1);
    border-radius: 0.5em;
    padding: 1.5em;
    
    transition: all 0.2s;
    cursor: pointer;
    list-style: none;
    
    margin: 5px;
}
ul.infoGraphic li .numberWrap {
  position: absolute;
}
ul.infoGraphic li .number {
  font-family: "maven pro", sans-serif;
  font-size: 13em;
  font-weight: 900;
  width: 0.9em;
  text-align: center;
}
ul.infoGraphic li .number.fontColor1 {
  color: var(--blue);
}
ul.infoGraphic li .number.fontColor2 {
  color: var(--green);
}
ul.infoGraphic li .number.fontColor3 {
  color: var(--purple);
}
ul.infoGraphic li .number.fontColor4 {
  color: var(--gold);
}
ul.infoGraphic li .number.fontColor5 {
  color: var(--red);
}
ul.infoGraphic li .number.fontColor6 {
  color: var(--orange);
}
ul.infoGraphic li .coverWrap {
    transform: rotate(130deg);
    position: absolute;
    width: 18em;
    height: 17em;
    left: -3em;
    top: -1em;
}
ul.infoGraphic li .coverWrap .numberCover {
  position: absolute;
  background: var(--bg1);
  width: 18em;
  height: 6em;
  border-radius: 50% 50% 0 0;
  border-bottom: 3px solid #f5f8f7;
  transition: all 0.4s;
}
ul.infoGraphic li .coverWrap .numberCover::before {
  position: absolute;
  content: "";
  bottom: 5px;
  left: 4em;
  right: 4em;
  top: 5em;
  box-shadow: 0 0 30px 17px #48668577;
  border-radius: 100px/10px;
  z-index: -1;
}
ul.infoGraphic li .coverWrap .numberCover::after {
  position: absolute;
  bottom: 0;
  content: "";
  left: -10%;
  width: 120%;
  height: 150%;
  background: radial-gradient(at bottom, #48668533, transparent, transparent);
  z-index: 1;
}
ul.infoGraphic li .content {
  margin: 8em 3em 1em 7em;
  position: relative;
}
ul.infoGraphic li .content h2 {
  font-size: 1.7em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
  text-transform: uppercase;
}
ul.infoGraphic li .content p {
  line-height: 1.5em;
}

ul.infoGraphic li:hover .coverWrap .numberCover {
  border-radius: 100%;
}

.steps .icon {
  position: absolute;
  font-size: 2rem;
  text-align: center;
  top: -1.3em;
  left: 50%;
  transform: translatex(-50%);
}
.steps .icon:before {
  color: #666;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

.steps .iconCodepen:before {
  content: "";
}

.steps .iconSocial:before {
  content: "";
}

.steps .iconAirplane:before {
  content: "";
}

.steps .iconMap:before {
  content: "";
}

.steps .iconBulb:before {
  content: "";
}

.steps .iconPeace:before {
  content: "";
}


.steps *,
.steps *:before,
.steps *:after {
  box-sizing: inherit;
}

/*-----------------KÉPEK VIDEO---------------*/

/*-------------Partnerek-------------*/
.partnerek .view-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.partnerek .views-row {
    flex: 10rem;
    margin: 1rem;
    border: 1px solid lightgrey;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.partnerek img.image-field {
    margin: 0;
    padding: 1rem;
}

/*-------------elérhetőség-------------*/
.elerhetoseg .view-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.elerhetoseg h3 {
    flex: 100%;
    text-align: center;
    margin: 2rem;
}
.elerhetoseg .view-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.elerhetoseg h3 {
    flex: 100%;
    text-align: center;
    margin: 2rem;
}

.profilkep {
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: relative; */
}

.elerhetoseg .profilkep img {
    
    width: 100%;
    height: auto;
    /* position: absolute; */
    top: 1;
    left: 1;
}

.elerhetoseg .card {
    width: 260px;
    margin: 1rem 0;
}
.elerhetoseg .nev {
    font-size: 1.2rem;
    
    border-bottom: 1px solid orange;
}

.elerhetoseg .beosztas {
    
    font-size: .8rem;
   
}

.elerhetoseg .sor {
    margin-bottom: 0.5rem;
    text-align: center;
}
/*------------------Képgaléria------------*/

.kepgaleria .view-content {
  display: flex;
  flex-wrap: wrap;
}

.kepgaleria .views-row {
  flex: 0 33.333333%;
  padding: 0.2rem;
}
.kepgaleria .image-field {
  margin: 0;
}
.kepgaleria img{
  transition: all 0.2s;
}
.kepgaleria img:hover {
   scale: 110%;
   transition: all 0.2s;
}
.kepgaleria .field-content {
  overflow: hidden;
}
/*-----------------Videogaléria------------*/
.videogaleria .view-content {
  display: flex;
  flex-wrap: wrap;
}

.videogaleria .views-row {
  flex: 33.333%;
  padding: 0.2rem;
}

/*-------------Kep video block------------*/
.video-kep-block {
  display: flex;
  flex-wrap: wrap;
  background: #303030;
  justify-content: center;
}

.video-kep-block .item {

  margin: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  position: relative;
}
.video-kep-block img {
  /*border: 1px solid white;*/
}

.video-kep-block img {
  --b: 2px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/
  
  --_d: calc(var(--d) + var(--s)*1em);
  --_g: calc(100% - 2*(var(--_d) + var(--b)));
  --_m:
    conic-gradient(from 90deg at var(--_d) var(--_d),#0000 25%,#000 0)
     0 0/calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50%/var(--_g) var(--_g) no-repeat;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  font-size: 0;
  cursor: pointer;
  transition: .35s;
}
.video-kep-block img:hover {
  font-size: var(--o);
}
.video-kep-block a:hover ~ .text {
  color: rgb(220, 235, 8);
  transition: .35s;
  scale: 110%;
  background-color: rgba(0, 0, 0, 0.3);
  padding: .3rem 1rem;
}
.text {
  position: absolute;
  font-size: 2rem;
  color: white;
  transition: .35s;
}
.video-kep-block a{
  color:white;
}






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

@media (max-width: 767px)   {
    
    .flex-block .left {
        flex: 1 1 100%;
    }
    
    .flex-block .right {
        flex: 1 1 100%;
    }
    .vonal {
        flex: auto;
        display: none;
    }
    .box-icon {
     flex: 100%;
    }
    .nyil, .vonal{
        display: none;
    }
    ul.infoGraphic li {
        
        width: 100%;
        max-width: 100%;
        
        
        padding: 0;
        transition: all 0.2s;
        cursor: pointer;
        list-style: none;
        margin: 0;
    }
    .elerhetoseg .card {
        width: 100%;
        margin: 1rem 0;
    }
    .videogaleria .views-row {
      flex: 100%;
      padding: 0.2rem;
    }
    .kepgaleria .views-row {
      flex: 0 100%;
      padding: 0.2rem;
    }
    .site-branding img {
      max-height: 100%;
      width: auto;
  }
  .video-kep-block .item {
    flex: 100%;
    margin: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
  }