/* master styles */
/* master styles */
/* master styles */



body {

    background-image: url('images/background04.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;


    margin: 0 auto;
    max-width: 100em;
    padding: 1em 0;

}

.iframe-container {
    overflow:hidden;
    padding-top:56.25%;
    position: relative;
}

.iframe-container iframe {
    border:0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


.window-body {
    font-family: arial;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
}



.container {
    display: grid;
    grid-template-columns: 1fr;
}

/* nav styles */
/* nav styles */
/* nav styles */

.nav-wrapper{
    display: flex;

    padding: 38px;
}

.left-side {
    display: flex;

}



/* portfolio styles */
/* portfolio styles */
/* portfolio styles */


.grid2 {

    position: fixed;
    display: right;
    justify-items: right;
    padding-left: 8%;
    width: 200px;



}

.grid {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));*/
    /*grid-template-columns: repeat(12, 1fr);*/
    grid-auto-rows: auto;
    justify-items: center;
    grid-gap: 5rem;
    padding-bottom: 5%;

    
    padding-left: 1%;
    padding-right: 1%;
}





@media(min-width: 425px){
    .programs{
        grid-column: 1 / -1;
    }

    .box{
        width: 300px;
    }


    .about{
        grid-column: 1 / -1; 

    }

    .grid{
        padding-left: 8%;
        padding-right: 8%;
    }


    .grid2{
        visibility:hidden;
    }

}


@media(min-width: 768px){

        .grid{
            padding-left: 14%;
            padding-right: 14%;
        }

        .grid2{
            visibility:hidden;
        }

}



@media screen and (min-width: 1290px) {
    .grid{
        padding-left: 5%;
        padding-right: 5%;
    }


    
    .grid2 {
        visibility: visible;
    }
  }





.box {
    width: 300px;
    background: red;

}




.bread {
    width: 100%;
    display:block;
}


img {
    max-width: 100%;
    border: 1px solid;
}

h4{
    margin-bottom: 0px;
  }




  
/* article */
/* article */
/* article */



  article {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 20px;
    padding: 15px;
    grid-auto-rows: auto;

}


.image {
    grid-column: 1 / -1;
    padding-bottom: 16px;

}


.image2 {
    grid-column: 1 / 7;
    

}


.imagesmol {
    grid-column: 1 / -1;
    width: 55%;
    margin-left: auto;
    margin-right: auto;
}


.image3 {
    grid-column: 7 / -1;

}


.piano {
    grid-column: 1 / -1;

    /*
    width: 1718px;
    height: 241px;
    */
}

.video {

    grid-column:1/-1;
}

.iframe-container-a {

    overflow:hidden;
    padding-top: 16%;
    position:relative;
    width: 103%;

}

.iframe-container-a iframe {
    border:9;
    height: 87%;
    left: 0;
    position: absolute;
    top: 0;
    width: 97%;
}

.iframe-container-b {
    overflow:hidden;
    padding-top: 26%;
    position:relative;
    width: 58%;
  

}

.iframe-container-b iframe {
    border:9;
    height: 87%;
    left: 0;
    position: absolute;
    top: 0;
    width: 97%;
}




.about {
    grid-column: 1 / 8;
}

.programs {
    grid-column: 8 / -1;
}


.secret {
    color:#C0C0C0;
}

.execution {
    grid-column: 1 / -1;
}


@media only screen and (max-width: 600px){

    .about {
        grid-column: 1 / -1;
    }

    .programs {
        grid-column: 1 / -1;
    }

    .secret {
        display: none;
    }

    .image {
        grid-column: 1 / -1;
        padding-bottom: 0px;
    
    }
    
    
    .image2 {
        grid-column: 1 / -1;
        
    
    }
    
    .image3 {
        grid-column: 1 / -1;
    
    }

    .imagesmol {
        grid-column: 1 / -1;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }


}
















#exampleImage { cursor:zoom-in; }
#exampleImage:-webkit-full-screen { cursor:zoom-out; }
#exampleImage:-moz-full-screen { cursor:zoom-out; }
#exampleImage:-ms-fullscreen { cursor:zoom-out; }
#exampleImage:fullscreen { cursor:zoom-out; }