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



body {
    margin: 0px;
    padding: 0px;
    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;

}


.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 */


.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%;
    }

}



@media(min-width: 768px){

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


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




.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 {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        /* grid-auto-rows: 100px; */
        grid-auto-flow: dense;
}


.parent {
    position:relative;

}

.blank {
    width: 100px;
    height: 600px;
}

/* ads position*/
/* ads position*/
/* ads position*/

.ad_img {

    display:block;
    width: 100%;
}

.front1 {
    position: absolute;
    left: 20%;
    top: 50%;

    animation-name: front1;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

        @keyframes front1 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }


.front2 {
    position: absolute;
    left: 8%;
    top: -2%;

    animation-name: front2;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}


        @keyframes front2 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }



.front3 {
    position: absolute;
    right: -30px;
    top: 50%;

    animation-name: front3;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.1s;
}


        @keyframes front3 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }



.front4 {
    position: absolute;
    right: 20%;
    top: -10px;

    animation-name: front4;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: .9s;
}


        @keyframes front4 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }

.front5 {
    position: absolute;
    right: 10%;
    top: 2%;

    animation-name: front5;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.1s;
}


        @keyframes front5 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }



.front6 {
    position: absolute;
    right: 30%;
    top: 45%;

    animation-name: front6;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.8s;
}


        @keyframes front6 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }


.front7 {
    position: absolute;
    right: 50%;
    top: 3%;


    animation-name: front7;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.1s;
}


    @keyframes front7 {
        0%   {opacity: 0;}
        100% {opacity:1.0}
    }


.front8 {
    position: absolute;
    right: 45%;
    top: 8%;

    animation-name: front8;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.2s;
    }
    
    
        @keyframes front8 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }


.front17 {
    position: absolute;
    right:-8%;
    top: 4%;

    animation-name: front6;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.4s;
    }
    
    
        @keyframes front6 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }


.front9 {
    position: absolute;
    left: 45%;
    top: 8%;

    animation-name: front3;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.3s;
}


        @keyframes front3 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }

.front10 {
    position: absolute;
    left: 7%;
    top: 20%;
    width: 100%;

    animation-name: front3;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.1s;
}


        @keyframes front3 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }

.front11 {
    position: absolute;
    right:-2%;
    top: 15%;

    animation-name: front11;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
}


        @keyframes front11 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }

.front12 {
    position: absolute;
    left:-2%;
    top: 12%;

    animation-name: front12;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.3s;
}


        @keyframes front12 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }



.front14 {
    position: absolute;
    right:-6%;
    top: 24%;

    animation-name: front14;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.7s;
}


        @keyframes front14 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }

.front15 {
    position: absolute;
    right:-15%;
    top: 12%;

    animation-name: front15;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}


        @keyframes front15 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }

.front16 {
    position: absolute;
    right:-11%;
    top: 10%;

    animation-name: front16;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.6s;
}


        @keyframes front16 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }




.front18 {
    position: absolute;
    right:-19%;
    top: 35%;

    animation-name: front18;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.1s;
}


        @keyframes front18 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }


.front19 {
    position: absolute;
    left:-10%;
    top: 25%;

    animation-name: front19;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
}


        @keyframes front19 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }

 

.front20 {
    position: absolute;
    right:21%;
    top: 32%;

    animation-name: front20;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 2.2s;
}


        @keyframes front20 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }



.front21 {
    position: absolute;
    right: 18%;
    top: 3%;

    animation-name: front21;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: .5s;
    overflow: hidden;
    overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden;
}


        @keyframes front21 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }

 
.front23 {
    position: absolute;
    left: 30%;
    top: 10%;

    animation-name: front3;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: .4s;
}


        @keyframes front3 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }


.front24 {
    position: absolute;
    left: 25%;
    top: 30%;

    animation-name: front24;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 2.6s;
}


        @keyframes front24 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }


.front22 {
    position: absolute;
    left: 2%;
    top: 55%;

    animation-name: front22;
    animation-duration: 0s;
    opacity:0;
    animation-fill-mode: forwards;
    animation-delay: 1.4s;
    
}


        @keyframes front22 {
            0%   {opacity: 0;}
            100% {opacity:1.0}
        }

        




        
/* ads position*/
/* ads position*/
/* ads position*/

.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;
    }
}


#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; }