.isotope-toolbar{
margin: 5px auto;
}
.not-ready{
display:none !important;
}
.isotope-toolbar div{
display:inline-block;
padding: 10px 30px;
background: #ffffff;
background: rgb(0,102,204); background: -moz-linear-gradient(top, rgba(0,102,204,1) 0%, rgba(0,70,140,1) 100%); background: -webkit-linear-gradient(top, rgba(0,102,204,1) 0%,rgba(0,70,140,1) 100%); background: linear-gradient(to bottom, rgba(0,102,204,1) 0%,rgba(0,70,140,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0066cc', endColorstr='#00468c',GradientType=0 ); margin: 5px;
font-weight:bold;
cursor: pointer;
color:#ffffff;
border-radius: 5px;
transition: opacity ease 0.3s;
}
.isotope-toolbar div:hover{
opacity: 0.8;
}
.isotope-toolbar div:first-of-type{
margin-left: 0;
}
.isotope-toolbar div:last-of-type{
margin-right: 0;
}
.isotope-toolbar p{
font-weight: bold;
font-size:16px;
margin-bottom:0;
}
.isotope-toolbar #all-button{ background: rgb(0,207,134); background: -moz-linear-gradient(top, rgba(0,207,134,1) 0%, rgba(0,158,100,1) 100%); background: -webkit-linear-gradient(top, rgba(0,207,134,1) 0%,rgba(0,158,100,1) 100%); background: linear-gradient(to bottom, rgba(0,207,134,1) 0%,rgba(0,158,100,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00cf86', endColorstr='#009e64',GradientType=0 ); }
.isotope-toolbar #shuffle-button{
margin-left:30px;
position: relative; background: rgb(251,54,64); background: -moz-linear-gradient(top, rgba(251,54,64,1) 0%, rgba(188,41,48,1) 100%); background: -webkit-linear-gradient(top, rgba(251,54,64,1) 0%,rgba(188,41,48,1) 100%); background: linear-gradient(to bottom, rgba(251,54,64,1) 0%,rgba(188,41,48,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb3640', endColorstr='#bc2930',GradientType=0 ); }
.isotope-toolbar #shuffle-button::before{
content: ' ';
height:22px;
width:1px;
background:#999999;
position: absolute;
left:-19px;
}
.grid-item p{
margin: 15px 0;
font-family:Roboto, Arial, sans-serif; 
font-size: 16px;
padding: 0 30px;
}
.content{
}
#result .blue{
background-color:#0066cc;
}
#result .lightblue{
background-color:#288ff2;
}
#result .green{
background-color:#00cf86;
}
#result .orange{
background-color:#ff9700;
}
#result .red{
background-color:#fb3640;
}
#result .purple{
background-color:#6b2d5c;
}
#result .email{
}
#result .data{
}
#result .postal{
}
#result .shared{
}
#result .grid-sizer, #result .grid-item{
width: 260px;
}
#result .grid-item{
color:#ffffff;
margin-bottom: 10px;
padding:30px 0;
font-weight:bold;
text-align:center;
} #result .grid-item.education{
background-color:#16284c;
padding-top: 60px;
}
#result .grid-item.education::before{
position:absolute;
top:15px;
left: 15px;
content: 'Insight provided by ';
font-weight:normal;
font-size:14px;
animation-name: show;
animation-duration: 1s;
opacity: 1;
animation-iteration-count: 1;
}
#result .grid-item.education::after{
position:absolute;
top:10px;
right: 15px;
content: ' ';
width: 80px;
height: 37px;
background: url(//www.schoolsmailing.co.uk/marketing-insights-data/img/besa_white_tiny.png);
background-size: 100% 100%;
}
#result .grid-item.education::before, #result .grid-item.education::after{
animation-name: show;
animation-duration: 1s;
opacity: 1;
animation-iteration-count: 1;
}
@keyframes show {
0% {opacity: 0;}
80%{ opacity:0;}
100% {opacity: 1;}
}
#result .grid-item p:first-child{
margin-top:0;
}
#result .grid-item p:last-child{
margin-bottom:0;
}
#result .bigger{
font-size:60px;
line-height:100%;
}
#result .big{
font-size:39px;
line-height:100%;
}
#result .medium{
font-size:34px;
line-height:100%;
}
#result .small{
font-size:23px;
line-height:100%;
}
#result .first{
font-size:33px;
line-height:100%;
}
#result .second{
font-size:27px;
line-height:100%;
}
#result .third{
font-size:18px;
line-height:100%;
}
#result .small-note{
font-weight:normal;
font-size:13px;
line-height: 16px;
font-style: italic;
}
#result #loading::after{
background:rgba(255,255,255,0.7);
width:99.3%;
height:100%;
content: ' ';
z-index:10;
position:absolute;
top:0;
}
#result #loading div{
position:absolute;
top:40vh;
left:45%;
background-image:url(/marketing-insights-data/img/load.svg);
background-size:70px 70px;
background-repeat: no-repeat;
width:70px;
height:70px;
z-index:20;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
.mobile-hide{
display:none;
}
.isotope-toolbar div{
display:block;
margin: 5px auto !important;
text-align:center;
max-width:75%;
}
.isotope-toolbar #shuffle-button{
margin-left:auto;
}
.isotope-toolbar #shuffle-button::before{
content: '';
height:0;
width:0;
background:#999999;
position: absolute;
left:0;
}
.isotope-toolbar{
margin-bottom: 20px;
}
#result .grid-sizer, #result .grid-item{
width:100%;
}
}