@import url("font.css");
@import url("header.css");
@import url("header_icons.css");
@import url("footer.css");
@import url("section.css");
@import url("accordion.css");
@import url("googledrive.css");
@import url("product.css");
@import url("banner.css");
@import url("index_below.css");
@import url("sidebox.css"); 

*{
	box-sizing:border-box;
	}
body{
	margin: auto;
	background-color: #222; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom right, #29323c, #222);
}


/************* This is CSS code for Arrow Animation ***************************/
.arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	z-index: 888;
}
.arrow span{
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 5px solid #FFD01D;
    border-right: 5px solid #FFB226;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

/****************************************/

.cv{
	width:100%;
	max-width:200px;
	vertical-align:top;
	margin:10px 20px;
	text-align:center;
	display:inline-block;
}

.cv img{
	width:90%;
	border-radius:360px;
	border: 1px solid #ccc;	
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
	}

.cv:hover img{
	-ms-transform: rotate(360deg); /* IE 9 */
  -webkit-transform: rotate(360deg); /* Safari */
   transform: rotate(360deg);
	}