body{
width:100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;

}
.imgAcc{
    margin-top: 50px;
}
.footer{
  
background-color: #2c3034;
 margin-top: auto;
width:100%;
 overflow-x: hidden;

}
.imgpresbase{
    z-index:3;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.titreAcc{
    margin-top: 50px;
  text-align: center;
    justify-content: center;

}
.maincolor{
    background-color: #4f5050;

}

.imgChx{

 z-index:2 !important;
}

.box{
    position:relative;
    width: 300px;
    height: 300px;
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
}
img{
height: 100%;
 width: 100%;


    z-index: 2;
}
img.hover-img{
    transition: all linear 3s;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 1;
    height: 100%;
width: 100%;
}

.tinytxt{
    font-size: 12px;
}
.formfont{
    background-color: whitesmoke;
}
.trait{
    height: 3px;
    width: 80%;
    border-top: 2px solid #2c3034;

}
.imgnav{
   height: 50px;
    width: 50px;
    margin-left: 30%;
margin-right: 10%;
}
.prevfile{
    width: auto;
    height:100px;
}

.video{
    background-attachment: fixed;
    background-image: url("../images/7220.jpg");
    background-size: cover;


}

#prevfile2BL{
   z-index:4;
    clip-path: polygon(50% 50%, 50% 200%, 50% 200%);
}




#prevfile2TL{
   z-index:4;
    clip-path: polygon(50% 50%, -200% 50%, -200% 50%);
}


#prevfile2TR{
   z-index:4;
    clip-path: polygon(50% 50%, 50% -200%, 50% -200%);
}



#prevfile2BR{
   z-index:4;
    clip-path: polygon(50% 50%, 200% 50%,200% 50%);
}
#prevfile {
    transform: rotate(180deg);
    display: none;

}


.notdisp{
    display: none;
}

.previewFront{
}
/*animations*/


.box:hover #prevfile2BR{
    animation: prevfile2BR 15s infinite;
    animation-timing-function : linear;
}

.box:hover #prevfile2TR{
    animation: prevfile2TR 15s infinite;
    animation-timing-function : linear;
}

.box:hover #prevfile2BL{
    animation: prevfile2BL 15s infinite;
    animation-timing-function : linear;
}
.box:hover #prevfile2TL{
    animation: prevfile2TL 15s infinite ;
    animation-timing-function : linear;

}
.box:hover #prevfile{
    display: inline;
    animation: prevfile 15s infinite;
    animation-timing-function : linear ;

}
.box:hover #previewFront{
display: none;
}
@keyframes prevfile {
    0%{
        display: inline;
    }
    45%{
        display: inline;
        transform: rotate(360deg);
    }
    55%{
        display: inline;
        transform: rotate(360deg);
    }

    100%{
        display: inline;
        transform: rotate(180deg);
    }
}



@keyframes prevfile2TL {
    0%{
        clip-path: polygon(50% 50%,-100% 50%, 50% -100%);
    }
    22.5%{
        clip-path: polygon(50% 50%,-100% 50%, 50% -100%);
    }
    45%{

        clip-path: polygon(50% 50%, 50% -100%, 50% -100%);
    }
    55%{

        clip-path: polygon(50% 50%, 50% -100%, 50% -100%);
    }
    77.5%{
        clip-path: polygon(50% 50%,-100% 50%, 50% -100%);
    }
    100%{

        clip-path: polygon(50% 50%,-100% 50%, 50% -100%);
    }
}

@keyframes prevfile2BL {
    0%{
        clip-path: polygon(50% 50%,  -100% 50%,50% 200%);
    }
    22.5%{

        clip-path: polygon(50% 50%,  -100% 50%, -100% 50%);
    }

    77.5%{

        clip-path: polygon(50% 50%,  -100% 50%, -100% 50%);
    }
    100%
    {
        clip-path: polygon(50% 50%,  -100% 50%,50% 200%);

    }
}

@keyframes prevfile2BR {
    0%{
        clip-path: polygon(50% 50%, 200% 50%, 50% 200%);
    }
    22.5%{
        clip-path: polygon(50% 50%, 200% 50%, 50% 200%);
    }
    45%{

        clip-path: polygon(50% 50%, 50% 200%, 50% 200%);
    }
    55%{

        clip-path: polygon(50% 50%, 50% 200%, 50% 200%);
    }
    77.5%{
        clip-path: polygon(50% 50%, 200% 50%, 50% 200%);
    }
    100%{

        clip-path: polygon(50% 50%, 200% 50%, 50% 200%);
    }
}

@keyframes prevfile2TR {
    0%{
        clip-path: polygon(50% 50%, 50% -100%, 200% 50%);
    }
    22.5%{

        clip-path: polygon(50% 50%,200% 50%,  200% 50%);
    }

    77.5%{

        clip-path: polygon(50% 50%, 200% 50%,  200% 50%);
    }

    100%
    {
        clip-path: polygon(50% 50%, 50% -100%, 200% 50%);

    }
}