:root{
    --img-animation-time: 0.25s;
}

*{
    box-sizing: border-box;
    user-select: none;
    font-family: Arial, Helvetica, sans-serif;

}
body{
    background-color: #232323;
    /* background: 
  linear-gradient(#232323a7, #23232399), 
  url('https://lh3.google.com/u/0/d/1si9u2SGoIcDSIp53VELWzjHgPBgLFeWz=w746-h1318-iv2') 50% / cover no-repeat fixed,
  black; */
}


.masonry{
    margin: 120px auto 0;
    max-width: 900px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    align-items: start;
}

.masonry_block{
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.photo{
    width: 100%;
    display: block;
    box-shadow: 0px 5px 3px -3px rgb(0, 0, 0);
}
.hidden_photo{
    display: none;
}


/*  _   _           __      __
| \ | |    /\    \ \    / /
|  \| |   /  \    \ \  / /
| . ` |  / /\ \    \ \/ /
| |\  | / ____ \    \  /
|_| \_|/_/    \_\    \/
 */

.nav{
    background-color: rgba(0, 0, 0, 0.455);
    height: 100px;
    display: flex;
    gap: 30px;
    justify-content: space-evenly;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    padding: 0 20px;
    transition: 1s;
}

.nav_close{
    height: 70px;
    background-color: rgba(0, 0, 0, 0.765);
    transition: 1s;
}


.nav_element{
    color: aliceblue;
    font-size: calc(0.5vw + 10px);
    align-self: center;
    cursor: pointer;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    transition: .1s;
}

.nav_element:hover{
    color: orangered;
    transform: scale(1.08 , 1.2);
    transition: .1s;
}
.burgermenu, .xmenu{
    display: none;
}

.active_nav_button{
    
    color: orangered;
    text-decoration: underline;
}

/* 
_____    ____   _____   _    _  _____     __  __  ______  _   _  _    _
|  __ \  / __ \ |  __ \ | |  | ||  __ \   |  \/  ||  ____|| \ | || |  | |
| |__) || |  | || |__) || |  | || |__) |  | \  / || |__   |  \| || |  | |
|  ___/ | |  | ||  ___/ | |  | ||  ___/   | |\/| ||  __|  | . ` || |  | |
| |     | |__| || |     | |__| || |       | |  | || |____ | |\  || |__| |
|_|      \____/ |_|      \____/ |_|       |_|  |_||______||_| \_| \____/ */


.carosel{
    user-select: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.84);
    justify-items: center;
    align-items: center;
    overflow: hidden;
    display: none;
    z-index: 2;
    min-height: 100vh;
    height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
}
.carosel_active{
    display: grid;
}
.img_block{
    display: grid;
    align-items: center;
    justify-content: center;
    place-items: center;
    min-height: 100vh;
    height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
    width: 100%;
}



.imgwrapper{
    position: absolute;
    /* top: 0; */
    left: 0;
    width: 100%;
    /* height: auto; */
    display: grid;
    align-items: center;
    min-height: 100vh;
    height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
    
}

.img{
    max-width: 100vw;
    max-height: 100vh;
    object-fit: fill;
    justify-self: center;

}

.cur{
    transform: translate(0);
    transition: 0s;
}
.cur_animate_left{
    transform: translate(-100%);
    transition: var(--img-animation-time);
}
.cur_animate_rigth{
    transform: translate(100%);
    transition: var(--img-animation-time);
}
.next{
    transform: translate(100%);
    transition: 0s;
}
.next_animate{
    transform: translate(0);
    transition: var(--img-animation-time);
}
.prev{
    transform: translate(-100%);
    transition: 0s;
}
.prev_animate{
    transform: translate(0);
    transition: var(--img-animation-time);
}






.arrow{
    width: 3vw;
    height: 3vw;
    background-color: rgba(240, 248, 255, 0.259);
    position: absolute;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-items: center;
    font-size: 2vw;
    font-weight: 900;
    cursor: pointer;
    border: 1px solid rgba(240, 248, 255, 0.444);
    transition: .3s;
}
.arrow:active{
    transform: scale(0.9);
}
.arrow:hover{
    background-color: aliceblue;
    transition: .3s;
}
.arrow_left{
    left: 3vw;
}
.arrow_right{
    right: 3vw;
}
.close{
    position: absolute;
    top: 15px;
    right: 10px;
    width: 2.5vw;
    height: 2.5vw;
    color: rgba(240, 248, 255, 0.554);
    transform: scale(1.3,1);
    font-weight: 900;
    border-radius: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
    display: grid;
    align-items: center;
    justify-items: center;
    line-height: 0;
    cursor: pointer;
    transition: .3s;
}
.close:hover{
    color: aliceblue;
    transition: .3s;
}


/* 
       d8888 888888b.    .d88888b.  888     888 88888888888 
      d88888 888  "88b  d88P" "Y88b 888     888     888     
     d88P888 888  .88P  888     888 888     888     888     
    d88P 888 8888888K.  888     888 888     888     888     
   d88P  888 888  "Y88b 888     888 888     888     888     
  d88P   888 888    888 888     888 888     888     888     
 d8888888888 888   d88P Y88b. .d88P Y88b. .d88P     888     
d88P     888 8888888P"   "Y88888P"   "Y88888P"      888     
*/





.about{
    display: grid;
    grid-template-columns: minmax(400px,1fr) minmax(100px,1fr) ;
    color: aliceblue;
    margin: 20px auto;
    padding: 020px;
    gap: 50px;
    max-width: 1200px;
}
.about_paragraph , .about_contact{
    font-size: calc(0.5vw + 10px);
}
.about_contact a{
 color: aliceblue;
 font-weight: 700;
}
.about_img_wrapper{
    text-align: end;
}
.about_img_wrapper img{
    width: 100%;
}


.about_hidden{
    display: none;
}

.open_menu_btn{
    display: none;
}






/* 

888b     d888  .d88888b.  888888b.  8888888 888      8888888888         
8888b   d8888 d88P" "Y88b 888  "88b   888   888      888                
88888b.d88888 888     888 888  .88P   888   888      888                
888Y88888P888 888     888 8888888K.   888   888      8888888            
888 Y888P 888 888     888 888  "Y88b  888   888      888                
888  Y8P  888 888     888 888    888  888   888      888                
888   "   888 Y88b. .d88P 888   d88P  888   888      888                
888       888  "Y88888P"  8888888P" 8888888 88888888 8888888888         
                                                                       
       888   888               888   888               888   888             
       888   888               888   888               888   888             
       888   888               888   888               888   888             
       888   888               888   888               888   888                                                                                
       888   888               888   888               888   888             
       888   888               888   888               888   888             
       888   888               888   888               888   888             
       888   888               888   888               888   888                                                                                 
Y88b               d88P Y88b               d88P Y88b               d88P 
 Y88b             d88P   Y88b             d88P   Y88b             d88P  
  Y88b           d88P     Y88b           d88P     Y88b           d88P   
   Y88b         d88P       Y88b         d88P       Y88b         d88P    
    Y88b       d88P         Y88b       d88P         Y88b       d88P     
     Y88b     d88P           Y88b     d88P           Y88b     d88P      
      Y88b   d88P             Y88b   d88P             Y88b   d88P       
       Y88b d88P               Y88b d88P               Y88b d88P        
*/

 @media(max-width: 730px){
   
    .nav{
        background-color: rgba(0, 0, 0, 0.455);
        height: 50px;
        display: flex;
        gap: 30px;
        justify-content: space-evenly;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        padding: 0 20px;
        transition: 0.3s;
    }
    .burgermenu{
        display: block;
        color: aliceblue;
        align-self: flex-end;
        font-size: calc(3vw + 30px);
        line-height: 30px;
    }
    
    .nav_close{
        height: 40px;
        background-color: rgb(18, 18, 18);
        transition: 0;
    }
    .nav_element{
        display: none;
        color: rgba(240, 248, 255, 0);
        font-size: calc(0.5vw + 10px);
        align-self: center;
        cursor: pointer;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
    }
    .nav_element:hover{
        color: orangered
    }


    /* /////////////////////////////////// menu ON */
    
    .nav_burger{
        background-color: #141414;
        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        padding: 0 20px;
        transition: 0.3s;
    }
    .nav_burger .burgermenu{
        display: none;
    }
    .nav_burger .xmenu{
        display: block;
        color: aliceblue;
        align-self: flex-end;
        font-size: calc(3vw + 30px);
        transform: scale(1.3, 1);
        line-height: 50px;
        order: 7;
        align-self: center;
        position: absolute;
        top: 5px;
    }

    .nav_burger .nav_element{
        display: block;
        color: aliceblue;
        font-size: calc(1vh + 10px);
        align-self: center;
        padding: 10px;
    }

    .nav_burger .active_nav_button{
        color: orangered;
        text-decoration: underline;
    }


    /* >>>>>>>>>>>>>>>>>>>>>>>>> */
    /* >>>>>>>>>>>>>>>>>>>>>>>>> */
    /* >>>>>>>>>>>>>>>>>>>>>>>>> */
    /* >>>>>>>>>>>>>>>>>>>>>>>>> */



    .masonry{
        margin: 60px auto 0;
    }



    /* 
_____    ____   _____   _    _  _____     __  __  ______  _   _  _    _
|  __ \  / __ \ |  __ \ | |  | ||  __ \   |  \/  ||  ____|| \ | || |  | |
| |__) || |  | || |__) || |  | || |__) |  | \  / || |__   |  \| || |  | |
|  ___/ | |  | ||  ___/ | |  | ||  ___/   | |\/| ||  __|  | . ` || |  | |
| |     | |__| || |     | |__| || |       | |  | || |____ | |\  || |__| |
|_|      \____/ |_|      \____/ |_|       |_|  |_||______||_| \_| \____/ */

    .arrow{
        display: none;
    }
    .close{
        font-size: calc(2vw + 30px);
        top: 35px;
        right: 50px;
    }



    /* about */


    .about{
        display: grid;
        gap: 0;
        grid-template-columns: 1fr ;
        color: aliceblue;
        margin: -10px auto;
        padding: 0 20px;
        max-width: 1200px;
    }
    .about_paragraph , .about_contact{
        font-size: calc(1.2vw + 12px);
    }
    .about_contact a{
     color: aliceblue;
     font-weight: 700;
    }
    .about_img_wrapper{
        text-align: end;
        grid-area: 1;
        height: 350px;
        overflow: hidden;
        margin: 0 -28px;
    }
    .about_img_wrapper img{
        width: 100%;
        object-position: 0 -70px;
    }
    .about_info_wrapper{
        padding: 0 0 50px 0;
    }
    .about_hidden{
        display: none;
    }
    .open_menu_btn{
        display: block;
        outline: none;
        border: none;
        box-shadow: none;
        background-color: #ebebeb;
        border: 1px solid #212121;
        border-radius: 12px;
        padding: 10px;
        color: rgb(31, 31, 31);
        font-size: 23px;
        font-weight: 700;
    }


    
}