@charset "utf-8";
/* CSS Document */

/* Accessability Buttion */
.accessabilitybutton {
	display: block;
	border-radius: 10px;
	padding: 6px;
	margin-left: 10px;
}

.accessabilitybutton a{
	display: block;
  	text-align: center;
	min-width: 50px;
	min-height: 40px;
	text-indent:-9999px;
	background-image: url(../images/AccessabilityGlasses.png);
	background-position: center center;
	background-origin: border-box;
	background-size: cover;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
	cursor: pointer;
}

.accessabilitybutton a:active{
	background-image:url(../images/AccessabilityGlassesA.png);
}

/* Big main buttions */

.ButtionRow{
	display:table;
	table-layout: fixed;
    border-spacing: 10px;
	min-height: 120px;
}

.ButtionRow div{
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.ButtionRow div::before{
	content: '';
    background-position: top;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 20px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.ButtionRow div.instagram::before{
	background-image:url(../images/instagram.png);
	height: 80px;
	width: 40px;
}

.ButtionRow div.instagram:active::before{
	background-image:url(../images/instagramA.png);
}

.ButtionRow div.request::before{
	background-image:url(../images/request.png);
	height: 80px;
	width: 40px;
}

.ButtionRow div.request:active::before{
	background-image:url(../images/requestA.png);
}

.ButtionRow div.counters::before{
	background-image:url(../images/Counter.png);
	height: 40px;
	width: 40px;
}

.ButtionRow div.counters:active::before{
	background-image:url(../images/CounterA.png);
}

.ButtionRow div.letter::before{
	background-image:url(../images/letter.png);
	height: 80px;
	width: 40px;
}

.ButtionRow div.letter:active::before{
	background-image:url(../images/letterA.png);
}


.ButtionRow div{
	display:table-cell;
	border-radius: 10px;
	padding:10px;
	padding-left: 80px;
	max-width: 30%;
	min-width: 100px;
	text-decoration: none;
	font-size: 100%;
	font-weight:200;
	position:relative;
	z-index: 1;
	cursor: pointer;
}

.ButtionRow div p{
	margin-bottom: 5px;
	margin-top: 5px;
}

.ButtionRow div .titlebutt{
	text-decoration: underline;
	font-size: 150%;
	font-weight: bold;
}

@media screen and (max-width: 320px) {
	.ButtionRow div p{
		font-size: 120%;
		font-weight: 600;
	}
}

@media screen and (max-width: 600px) {
	.ButtionRow div{
		display: block;
		max-width: 100%;
		float:left;
		margin-bottom: 10px;
	}
	
	.ButtionRow{
		display: grid;
		table-layout:auto;
		min-height: 250px;
	}
}