@charset "utf-8";
/* CSS Document */
html {
    width:100%;
    height:100%;
}
::-webkit-scrollbar { 
    display: none; 
}
body {
	margin:0;
	width:100%;
    height:100%;
    background:#000;
    text-align:center;
    font-family:"Product Sans", "Roboto", Arial, sans-serif;
    overflow-y: scroll;
}
.circlea {
    background:#212121;
    background-origin: content-box;
    transform-origin: center;
    border-top:1px solid #424242;
    border-bottom:1px solid #111111;
    color:#fafafa;
    width:300px;
    height:300px;
    border-radius:100%;
    margin:10px auto;
	transition:all 1s;
}
.circlea:hover {
    width:400px;
    height:400px;
	transition:all 1s;
}
.circlea:hover > .circleb {
    margin:75px auto;
}
.circleb:hover {
    transform:translateY(-50px);
}
.circleb:hover > .circlec {
    margin:75px auto;
}
.circlec:hover {
    transform:translateY(-50px);
}
.circleb {
    background:#424242;
    background-origin: content-box;
    transform-origin: center;
    border-top:1px solid #616161;
    border-bottom:1px solid #212121;
    width:250px;
    height:250px;
    border-radius:100%;
    margin:25px auto;
	transition:all 1s;
}
.circleb:hover {
    width:350px;
    height:350px;
	transition:all 1s;
}
.circlec {
    background:#616161;
    background-origin: content-box;
    transform-origin: center;
    border-top:1px solid #757575;
    border-bottom:1px solid #424242;
    width:200px;
    height:200px;
    border-radius:100%;
    margin:25px auto;
	transition:all 1s;
}
.circlec:hover {
    width:300px;
    height:300px;
	transition:all 1s;
}
.circleaa {
    background:#212121;
    background-origin: content-box;
    transform-origin: center;
    border-top:1px solid #424242;
    border-bottom:1px solid #111111;
    color:#fafafa;
    width:300px;
    height:300px;
    border-radius:100%;
    margin:10px auto;
	transition:ease 1s;
}
.circlebb {
    background:#424242;
    background-origin: content-box;
    transform-origin: center;
    border-top:1px solid #616161;
    border-bottom:1px solid #212121;
    width:250px;
    height:250px;
    border-radius:100%;
    margin:25px auto;
	transition:ease 1s;
}
.circlecc {
    background:#616161;
    background-origin: content-box;
    transform-origin: center;
    border-top:1px solid #757575;
    border-bottom:1px solid #424242;
    width:200px;
    height:200px;
    border-radius:100%;
    margin:25px auto;
	transition:ease 1s;
}
.circleaa:hover {
    width:400px;
    height:400px;
	transition:ease 1s;
}

.circlebb:hover {
    width:350px;
    height:350px;
	transition:ease 1s;
}

.circlecc:hover {
    width:300px;
    height:300px;
	transition:ease 1s;
}
.circleaa:hover > .circlebb {
    margin:75px auto;
}
.circlebb:hover {
    transform:translateY(-50px);
}
.circlebb:hover > .circlecc {
    margin:75px auto;
}
.circlecc:hover {
    transform:translateY(-50px);
}

#materialcard {
    background-origin: content-box;
    transform-origin: center;
    border-radius:100%;
    margin:0px auto;
    height:5px;
    width:5px;
    background-color:#424242;
    border-top:1px solid #616161;
    border-bottom:1px solid #212121;
	transition:all ease 2s;
}
#materialcard:hover {
    margin:-47.5px auto;
    border-radius:20px;
    height:200px;
    width:200px;
    background-color:#424242;
	transition:all ease 2s;
}