/* Galery V. 01          */

/* Stylesheet for Galery */



.galery

{

    width: 600px; /* Galery's width */

    height: 400px; /* Galery's height */

    padding: 5px;

    border-radius: 10px;

    border: 1px solid #000;

    background: #fff;

    margin: 10px auto;

    -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.5);

    font-size: 0;

    position: relative;

}



.screen

{

    width: 100%;

    height: calc(100% - 100px);

    background: #000;

    position: relative;

    border-radius: 10px 10px 0 0;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    transition: all .4s ease;

}



.screen span

{

    width: 100%;

    height: 100%;

    background: transparent;

    position: absolute;

    z-index: 250; 

    border-radius: 10px 10px 0 0;

}



.screen span .go

{

    width: 100%;

    height: 100%;

    position: absolute;

    cursor: zoom-in;

}



.screen button

{

    width: 120px;

    height: 120px;

    position: absolute;

    margin: auto;

    top: 0;

    bottom:0;

    border: none;

    outline: none;

    background: rgba(0,0,0,.6);

    opacity: 0;

    transition: .5s;

    cursor: pointer;

    z-index: 500;

}



.screen:hover button

{

    opacity: .5;

}



.screen button:hover

{

    opacity: 1;

}



.screen button:nth-child(1)

{

    left: 0;

    border-radius: 0 10px 10px 0;

}



.screen button:nth-child(2)

{

    right: 0;

    border-radius: 10px 0 0 10px;

}



.screen button img

{

    width: 100%;

    height: 80%;

    opacity: .8;

}



.checker

{

    width: calc(100% - 60px);

    height: 100px;

    background: #000;

    border-radius: 0 0 10px 0;

    text-align: center;

    -webkit-box-shadow: inset 0 0 30px rgba(255,255,255,.5);

    overflow: auto;

    display: inline-block;

    transition: all 1s ease;

    position: absolute;

    z-index: 500;

}



.checker.show

{

    height: auto;

    border-radius: 0 0 10px 10px;

    transform: translateY(45px) translateX(-100%);

    width: calc(100% - 10px);

    background: #fff;

    -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.5);

}



.checker.show span

{

    border-color: #000;

}



.checker span

{

    display: inline-block;

    width: 120px;

    height: 80px;

    margin: 9px 5px;

    background: #000;

    border-radius: 10px;

    cursor: pointer;

    background-size: 100% 100%;

    border: 1px solid #fff;

    transition: all 1s ease;

    opacity: .8;

}



.checker span:hover

{

    background-size: 120% 120%;

    opacity: 1;

}



.checker::-webkit-scrollbar {

    width: 10px;

    height: 30px;

}

 

.checker::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

}

 

.checker::-webkit-scrollbar-thumb {

  background-color: darkgrey;

  outline: 1px solid slategrey;

}



.console

{

    width: 50px;

    height: 100px;

    display: inline-block;

    vertical-align: top;

    position: relative;

    border-radius: 0 0 0 10px;

    -webkit-box-shadow: inset 0 0 30px rgba(255,255,255,.5);

    background: #000;

    transition: all 1s ease;

}



.console.show

{

    width: 100%;

    border-radius: 0;

    height: 45px;

    background: #fff;

    -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.5);

}



.console button

{

    width: 40px;

    height: 40px;

    position: absolute;

    margin: auto;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background: #000;

    border: 1px inset #fff;

    border-radius: 20px;

    outline: none;

    cursor: pointer;

    transition: all .4s ease;

}



.console button:hover

{

    background: #333;

}



.console button img

{

    position: absolute;

    top: 0;

    bottom: 0;

    right: 0;

    left: 0;

    margin: auto;

    width: 25px;

    height: 25px;

}



.zoomer

{

    position: fixed;

    display: none;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background: rgba(0,0,0,.5);

    z-index: 1000;

    cursor: zoom-out;

    opacity: 0;

    transition: all .4s ease;

} 



.zoomer.display

{

    display: block;

}



.zoomer.show

{

    opacity: 1;

}



.zoomer img

{

    width: auto;

    height: auto;

    max-width: 60%;

    max-height: 80%;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

}