clanceyp

/** * The first commented line is your dabblet’s title *//** * The first commented line is your dabblet’s title */

body {	background-color: grey;}

.boom, .background-test {	width: 1440px;		height: 320px;	min-height: 320px;	overflow: scroll;					resize: both;	}

.boom {	background-color: silver;		background-repeat: no-repeat;	background-size: cover;	background-position: 50% 50%;	min-width: 200px;	min-height: 200px;	overflow: scroll;						resize: both;		position: relative;		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTQ0MHB4IiBoZWlnaHQ9IjMyMHB4IiB2aWV3Qm94PSIwIDAgMTQ0MCAzMjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0NDAgMzIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzAyNDU1NDt9LnN0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yXyk7fS5zdDJ7ZmlsbDojMDU0QjVGO

clanceyp

    <title>Your page title</title>
    <style>
        /* these styles must come before the js */ 
        title {
            font-family: xxs;
        }
        @media only screen and (min-width: 480px) {
            title {
                font-family: xs;
            }

clanceyp

h1 {
	color: silver;
	font-family: monospace;
	margin: 12px 0;
	padding: 0;
	text-align: center;
}
h1[data-content-length='4'] {	font-size: 36vw; }
h1[data-content-length='7'] {	font-size: 23vw; }
h1[data-content-length='10'] {	font-size: 16vw; }

clanceyp

/* test for floating colour bg blocks in header */
body {
	background-color: #fefefe;
}
div {
	background-color: lightgrey;
	border: 1px dashed silver;
	margin: 50px auto;
	text-align: center;
	width: 50%;

clanceyp

@import url(http://fonts.googleapis.com/css?family=Lato:100);
a { color : black; text-decoration: none}
.hero-panel {  background-color: #171717;padding: 0 40px;font-family: "Lato", "Gill Sans", Georgia, Times, serif; }	
.hero-panel>.component-content {margin: 0 auto; max-width: 1200px;}	
.hero-panel .component-header {  border-top: 0 none;  font-size: 8.5rem;font-weight:100;     line-height: 8rem;  margin: 0;  padding: 0.5rem 2rem;}	
.hero-panel .component-heading {   color: #00717b;  text-align:center; margin:20px 0; letter-spacing:14px}

@media only screen and (min-width : 860px) {
	.hero-panel .list-of-entities__item-image-container {  position: relative;}
	.hero-panel .list-of-entities__item-image-container img {  max-width: 300px;}

clanceyp

@import url(http://fonts.googleapis.com/css?family=Lato:100);
.hero-panel {  background-color: #171717;padding: 0 40px;font-family: "Lato", "Gill Sans", Georgia, Times, serif; }
.hero-panel .component-header {  border-top: 0 none;  font-size: 8.5rem;font-weight:100;    line-height: 50px;  line-height: 8rem;  margin: 0;  padding: 5px 20px;  padding: 0.5rem 2rem;}
.hero-panel .component-heading {   color: #00717b;  text-align:center; margin:20px 0; letter-spacing:14px}
.hero-panel .list-of-entities__item-image-container {  position: relative;}
.hero-panel .list-of-entities__item-image-container img {  max-width: 300px;}
.hero-panel .list-of-entities > .component-content {  display: table;  width: 100%;}
.hero-panel .list-of-entities__container {  display: table-row;}
.hero-panel .list-of-entities__item {  display: table-cell;  text-align: center;  vertical-align: middle;  width: 33%;}
.hero-panel .list-of-entities__item-link {  min-height: 500px;  position: relative;}

clanceyp

/**
 * Grid background for menu
 */

div.wrapper {
	height: 100%;
	overflow: hidden;
	width: 100%;
}
div.wrapper:before {

clanceyp

/* slide down details list */
@keyframes slideDown {
	    0% {
	        opacity: 0;
	        height: 0;
	    }
	    100% {
	        opacity: 1;
	        height: 20px;
	    }

clanceyp

@keyframes slideDown {
	    0% {
	        opacity: 0;
	        height: 0;
	    }
	    100% {
	        opacity: 1;
	        height: 20px;
	    }
	}

clanceyp

/* Spinning cube */
@keyframes go {
  0%   {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1,1,1);
  }
  100% {
    transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) scale3d(1,1,1);
  }
}
@keyframes back {