/*
Theme Name: mmp_theme
*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&display=swap');


html, body{
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
}
a{ 
   text-decoration: none;
}

a:focus{
   outline: 2px solid #0028a5;
}

.site-main {
   width: 94vw;
   margin-left: auto;
   margin-right: auto;
}

.main-navigation{
   width: 94vw;
   margin-left: auto;
   margin-right: auto;
   font-size: 18px;
}
.project span { 
    display: block;
    font-size: 16px;
    padding-left: 1rem;
}


.video_description{
   box-shadow: 0px 7px 22px -4px rgba(0,0,0,.05);
   padding-bottom: 1rem;
   width:100%
}
.video_description span{
   display: block;
   line-height: 1.3rem;
   font-size: 16px;
   padding-left: 1rem;
  
}
.single_descpription{
   font-weight: 400;
   color: #666666;
}

.single_back{
   margin-top: 20px;
}

.single_back a{
   color: black;
   font-weight: 600;
}

#primary-menu li{
   margin: 10px;
}

#primary-menu a{
    color: black;
}

.current-menu-item{
    border-bottom: 3px solid  #0028a5!important;
}

.index_title{
    color: black;
}

.index_subtitle{
    color: #787878;
    padding-bottom: 1rem;
}

.content{
 display:flex;
 flex-wrap: wrap ;
 justify-content: space-between;
 width: 100%;
 align-items: center; /* Vertically center the content */
  min-height: 200px;
}

.video_content{
   width: 100%;
   /*margin: 10px;*/
}

.project{
    position: relative;
    width: calc(100% / 4 - 20px);
    margin: 10px;
    height: auto;
    box-shadow: 0px 7px 22px -4px rgba(0,0,0,.05);
}

.project_titel{
   /*Wenn die Titel wirklich lange sind, sonst kann man das hier auch wieder rausnehmen*/
   min-height: 88px;
}

.pagination{
   position: relative;
   float: right;
   width: 100%;
}

.pagination .page-numbers {
    font-size: 0; /* Hide the numbers */
    /*height:12px;*/
    width: 12px;
    display: inline-block;
   /* border-radius: 50%;*/
    color:#1212124D;
 }

 .pagination .page-numbers:before {
    content: "\2022"; /* Insert a bullet point */
    font-size: 27px; /* Adjust the font size as needed */
 }

 .page-numbers.current{
   color:  #0028a5;
 }

 a.page-numbers{
    text-decoration: none;
 }

 .arrows{
    position: absolute;
    width: 100%;
    left: 0;
 }

 .arrows_single{
   position: absolute;
   top: 35%;
   width: 100%;
   left: 0;
}
 .nav_arrows{
   position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #FFF;
    box-shadow: 0px 7px 22px -4px rgba(0,0,0,.1);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    padding-top: 1px;
    text-decoration: none;
    color:  #0028a5;
    font-size: 22px;
 }
 .prev_arrow {
    right:0;
 }
  a[rel="prev"] {
      position: absolute;
      right:0;
  }

 .next_arrow {
   left:0;
 }
 a[rel="next"] {
      position: absolute;
      left:0;
 }

 .nav-links{
   float: right;
 }

 .category_nav{
   display: block;
   height: 50px;
   width: 50px;
 }
 .single_nav a{
   display: block;
   height: 50px;
   width: 50px;
 }

.single_nav a:focus{
   outline: 2px solid #0028a5;
   border-radius: 25px;
 }

 .category_nav:focus{
   outline: 2px solid #0028a5;
   border-radius: 25px;
 }

 @media (max-width:1000px){

   .project span { 
      font-size: 14px;
      padding-left: 0.7rem;
  }

  .project{
      margin: 7px;
   }

   .index_subtitle {
      padding-left: 0.7rem;
   }

   .project_titel{
      /*Wenn die Titel wirklich lange sind, sonst kann man das hier auch wieder rausnehmen*/
      min-height: 75px;
   }
 
 }

 @media (max-width:700px){
  /*Breakpoint für Mobilephones*/

  .project{
      width: calc(100% / 2 - 20px);
   }

   .arrows_single{
      top: 20%;
   }

     
   }