/*  Styling Detail page */


@import url(layout_detailpage.css);  
  
  
  
  /* allgemeines Styling */


  body{
      
    margin: 0;
    box-sizing: border-box;
      font-family: 'Source Sans Pro', sans-serif; 
      background-color: #F7F3F2;
      line-height: 1.5;
      
    }
h1{
    
    font-variant-caps: all-small-caps;
    font-weight: 500;
    padding-right: 0.2rem;

}

   
  
    .container-fluid{
        margin-left: 0.5rem;
        margin-right: 0.5rem;
       /* margin-top: 30vw;*/
       margin-top: 25vw;
        

    }
    figrue{
        margin-right:0;
    }
  
   

   
   

     @media screen and (min-width:2000px) {
        .menubutton {
            display: none;
        }

        .site-nav-list {
            max-height: none;
            overflow: auto; 
            transition: 3s;
            margin: 0 1rem ;
            padding: 0;
            flex-flow: row;
            flex-wrap: wrap;
            


        }

        .site-nav {
            padding: 0;
        } 
        
       

        .site-nav-list li {
            display: inline-block;
            flex: 1;
            text-align: center;
            border-right: 1px solid #eee;
            /*   Navigations Inhalt kann nicht grösser werden als 170px  */
            max-width: 180px;
        }

        .site-nav-list li:first-child {
            border-left: 1px solid #eee;
        }

    }



/* header Teil */
/* .container-fluid{
    max-width: 100vw;
} */


    
 /*    @media screen and (max-width:720px){
        .container-header, .container-main {
            display: grid;
            
            
        }     */

        .container-header{
            /*margin-top: 20vw;*/
            margin-top: 15vw;
        }



@media screen and (min-width:720px){
    .container-header, .container-main, .container-ani {
        display: grid;
        grid-template-columns: 1fr 2fr 3fr;
      
      
    }

        .figurebreit{
        grid-column: 2/5;
    }

    .figureklein{
        grid-column: 3/5;
        margin-bottom: 0;
       
    }
    .space{
        margin-bottom: 10rem;
       

    }
   

.net{
   
    max-width: 90%;

}
h3{
    font-size: 1.4rem;
    padding: 1% 0 1% 0;
}
p{
    font-size: 1.05rem;
}

}

.container-main{
   /* margin-top: 40vw;*/
   margin-top: 15vw;
  
    margin-left: 0.25rem;
}

.Myname{
    grid-column: 4/5;
    margin-top: 4vw;
    margin-bottom: -20vw;
    text-align: end;
    z-index: 10;
    font-weight: 300;
    font-size: 4vw;
    text-shadow: 2px 2px 2px #EF7D6A;
    color: white;

}
/* b{
    font-size: 7vw;
} */

.project-catogrie{
    z-index: 4;

}
/* figure{
    
    margin-bottom: 10vw;
} */
img{
    max-width: 100%;
    height: auto;
    min-width:10%
    
}
.picture-discription{

        transform-origin: right;
        transform: rotate(90deg);
        padding-left: 50%;
        padding-bottom: 20px;
        font-size: 1.5vw;
        /* text-align: end; */
        font-weight: 300;
        
    }
 
    .picture-discriptiona{
        font-size: 1.5vw;
        text-align: center;
        font-weight: 300;
        
    }


.hoverb {
    text-align: start;
    grid-column: 1/4;
    font-size: 6vw;
    text-shadow: 1px 1px 2px #EF7D6A;
    /*margin-bottom: 35vw;*/
}
.hovert{
    grid-column: 2/4;
    text-align: start;
    
    font-size: 6vw;
    text-shadow: 1px 1px 2px #EF7D6A;
    /*margin-bottom: 35vw;*/

}


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

.picshadow{
    box-shadow: 2px 2px 2px rgb(199, 198, 198);

}
.wrapperkleinb{
    grid-column: 3/5;
    display: flex;
}
a:hover{

    text-decoration: none;
    color:#EF7D6A;
    text-shadow: none;
    transition: 2s;
   
}


.hovert:hover{ 
    transition: 3s ease-in-out;
    
    transform: scale(1.1);
    
}
.hoverb:hover{ 
    transition: 3s ease-in-out;
    
    transform: scale(1.02);
    
}