.buttonComponent{
	display: inline;
}
.mycircle button{
	padding: 0;
    margin: 5px 1px;
	height: 85px;
	width: 85px;
	font-size: 0.6em;
	border: 8px solid #b3b3b3;
}

.columncircle a{
	display: block
}
.mycircle .ddd{
    visibility: hidden;
    text-align: center;
    width: 175px;
    height: 175px;
    position: absolute;
    top: 30vh;
    color: #0D2036 !important;
    box-shadow: 0 0 10px #1f3d7a !important;
    margin-left: 90px;
    border: 20px solid #b3b3b3;
    font-weight: bold;
}

.mycircle .btnOne{
	background: linear-gradient(#FFFFE5, #FFFFE5);
}
.mycircle .btnTwo{
	background: linear-gradient(#E5F2FF, #E5F2FF);
}
.mycircle .btnThree{
	background: linear-gradient(#E5FFE5, #E5FFE5);
}
.mycircle .btnFour{
	background: linear-gradient(#FFF5E5, #FFF5E5);
}
.mycircle .btnFive{
	background: linear-gradient(#FFFFFF, #FFFFFF);
}
.mycircle .btnSix{
	background: linear-gradient(#FFE5FF, #FFE5FF);
}
.mycircle .btnSeven{
	background: linear-gradient(#ECECF9, #ECECF9);
}
.mycircle .btnEight{
	background: linear-gradient(#F9F2EC, #F9F2EC);
}
.mycircle .btnNine{
	background: linear-gradient(#F0F0F5, #F0F0F5);
}
.mycircle .btnTen{
	background: linear-gradient(#E5FAFF, #E5FAFF);
}
.mycircle .btnEleven{
	background: linear-gradient(#E5F2FF, #E5F2FF);
}
.mycircle .btnTwelve{
	background: linear-gradient(#d6f8db, #d6f8db);
}

.mycircle .btnlink:hover div.ddd{
	visibility: visible;
}

@media screen and (max-width: 1150px) and (min-width: 795px){
	.mycircle button{
        margin: 7px 0px;
        height: 65px;
        width: 65px;
        font-size: 0.4em;
        border: 7px solid #b3b3b3;

    }
}
@media screen and (max-width: 795px){
	.mycircle{ display: none; }
    
    .buttonComponent{
        display: none;
    }

}