/* a::before { content: " ";}
.menu a { color: white; padding: 10px; text-decoration: none; display: flex; align-items: center;} */


.sticky {  margin-bottom: -10px;}

#clients {
  display: flex;
  min-height: 30vh;
  margin: 0;
  align-items: center;
  justify-content: center;
  background-color: #bfdfec;
  font-family: system-ui, calibri, serif;
  background-repeat: repeat-x;
  background-image: url("img/bg-01.svg");
  /* background-image: url("img/cloud.svg"); */

  animation: movement 50s linear infinite;
}



@keyframes movement {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 560px 0px;
  }
}


#stats {
 position: relative;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 background-size: cover;
 background-position: center top;
 background-attachment: fixed;
 /* background-image: url('img/Cloudy.svg'); */
 /* background-image: url('img/bg-01.png'); */
 background-image: url('img/students.svg');

 background-color: #bfdfec;
 /* animation: movement 50s linear infinite; */

/* background-color:rgba(76, 175, 80, 0.3); */
}

.number {
 font-size: 60px;
 font-weight: 400;
 display: block;
 line-height: 1.5em;
}






.hero {
background-color: #fff;

padding-top: 80px;
padding-bottom: 80px;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
position: relative;
border-radius: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-bottom: 0;
overflow: hidden;
min-height: 500px;
background-image: var(--herobg);
}





/* header */

.logo {
  color:black;
  display:inline-lock;
}
.header {
	background-color: #fff;
	box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
	position: absolute;
	width: 100%;
	z-index: 3;

  border-top-left-radius: 5px;
  border-top-right-radius: 5px;

}

.header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	background-color: #fff;

}

.header li a {
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	color: black;
  height:50px;



}

.header li a:hover,
.header .menu-btn:hover {
	background-color: #f4f4f4;
}

.header .logo {
	display: block;
	float: left;
	font-size: 2em;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
}

/* menu */

.header .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
	cursor: pointer;
	display: inline-block;
	float: right;
	padding: 28px 20px;
	position: relative;
	user-select: none;
}

.header .menu-icon .navicon {
	background: #333;
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
	background: #333;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}

.header .menu-icon .navicon:before {
	top: 5px;
}

.header .menu-icon .navicon:after {
	top: -5px;
}

/* menu btn */

.header .menu-btn {
	display: none;
}

.header .menu-btn:checked ~ .menu {
	max-height: 300px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
	background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
	transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
	transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
	.header li {
		float: left;
	}
	/* .header li a {		padding: 22px 14px;	} */
	.header .menu {
		clear: none;
		float: right;
		max-height: none;
	}
	.header .menu-icon {
		display: none;
	}
}


.footer {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

background-color: white;
/* margin: 0 15px; */
padding: 0 15px;

}


.card {
/* color: white; */
display: block;
margin: 5px;
padding: 20px;
overflow: hidden;
position: relative;
border-radius: 5px;
box-shadow:2px 5px 10px rgba(0,0,0,0.4);
background-color:white;
}

.blog-title a {
  font-weight:bold;
  font-size: 20px;;
}




.center{ text-align: center;}


.posts img {
    width: 100%;
    height: 250px;
    object-fit: cover;

}


img {
    max-width: 100%;
    vertical-align: middle;
    border-style: none;
}



.svg, [class*="bi-"] {
display:inline-block; height: 25px; width: 25px; padding: 0; min-width: 25px;
color: black;
stroke-width:1;
stroke-linecap:round;
stroke-linejoin:round;
fill:none;
stroke:white;
}
[class*="bi-"]:hover {
  /* stroke:var(--pLightColor); */
  stroke:white;

}

svg path{ fill:url('#gradient');}
svg { filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)); }
svg stop:nth-child(1) { stop-color: var(--pLightColor);}
svg stop:nth-child(2) { stop-color: var(--pColor);}
svg:hover path {
stroke-dasharray: 200;
stroke-dashoffset: 200;
pointer-events: none;
animation: animateDash 3s linear forwards infinite;
/* stroke:var(--pLightColor); */
stroke:white;

}



figure {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    justify-items: stretch;
    align-items: stretch;
    gap: 2svmin;

}

figure img {
   width:100%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
}

@media (min-width:500px) {
   figure {
   grid-template-columns: repeat(2, 1fr);
   }
  figure img:nth-of-type(11) {
   grid-row: span 2 / auto;
  }
}

@media (min-width:1000px) {
   figure {
   grid-template-columns: repeat(4, 1fr);
   gap: 1svmin;
   }

   figure img:where(:nth-of-type(3), :nth-of-type(12)) {
   grid-row: span 2 / auto;
   grid-column: span 2 / auto;
   }

   figure img:nth-of-type(5) {
   grid-column: span 2 / auto;
   }

   figure img:nth-of-type(15) {
   grid-column: span 2 / auto;
   }
}


.grid {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}



.artikel{ padding: 20px; display: table; table-layout: fixed; }
.figure{ filter: drop-shadow(5px 5px 5px #222); }




h1 {font-size: 4.8rem; }
h2 {font-size: 3.6rem; }
h3 {font-size: 3rem; }
h4 {font-size: 2.4rem; }
h5 {font-size: 1.8rem; }
h6 { font-size: 1.6rem; }

h1,h2,h3 {
  /* font-weight: 300; */
  line-height: 1.2em; }

h4,h5,h6 {
  line-height: 1.5em;
  /* font-weight: 400; } */

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  /* font-family: 'Work Sans', sans-serif; */
  margin-top: 0; }

p {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.5em; }

   .number {
    font-size: 60px;
    font-weight: 400;
    display: block;
  line-height: 1.5em;
 }



 .card {  border-radius: 5px; margin:15px;}



 /* section#hero{padding:0; margin: 0 auto;}
 #hero .hero { padding:60px 15px;   } */


 .center h1 {
   margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }

 .float-right {width:250px; float:right; }
 .float-left {width:250px; float:left; }


  .logo img { width: 100px; height: auto; }

 .parallax {
   background-image: url("img/photo-02.jpg");
   min-height: 500px;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 .video-wrap {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 25px;
     height: 0;
     max-width: 1920px;
     margin: 0 auto;
 }
     .video-wrap iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         max-height: 1080px;
     }





      @media screen and (max-width: 450px) {
        #single .col-single,#single  img { width: 100%; margin:0 ; float:center;}
        .float-right {float:none; width: auto;}
        .float-left {float:none; width: auto; }
        #footer .sosmed,#footer .made {text-align:center;}
        .main{margin-left: 0; margin-right: 0;}
        .logo img { width:32px; }
      }


      /* Responsive layout - makes a two column-layout instead of four columns */
      @media screen and (max-width: 800px) {
        .column {
          -ms-flex: 50%;
          flex: 50%;
          max-width: 50%;
        }
      }

      /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 600px) {
        .column {
          -ms-flex: 100%;
          flex: 100%;
          max-width: 100%;
        }
      }