@import url('https://fonts.googleapis.com/css?family=Raleway:400,800');

body { margin: 0; padding: 1rem 3rem; min-height: 100%; min-height: 100vh; font-family: 'Raleway', Arial, sans-serif; font-weight: 400; color: #ff880c; background: url(back.svg); }
html { min-height: 100%; }
body * { box-sizing: border-box; }
a img { border: 0; }
b { font-weight: 800; }
a, a:link, a:active, a:visited { color: #EAEAEA; }
a:hover, a:focus { color: gold; }

h1:not(.internal) { font-weight: 400; }
h1 a { text-decoration: none; }
.desc { text-align: center; margin-top: 3em; }
.links { margin-top: 3em; text-align: center; }
.links a { display: inline-block; margin: 0 0 0 1em; text-decoration: none; }

.a, .b, .c, .threeDots {
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.logosvg { display: block; width: 70%; width: 70vmin; margin: 0 auto; padding-top: 7%; padding-top: 6vh; max-height: 35%; box-sizing: content-box; }
.logosvg .a { fill: #ff880c; }
.logosvg .b { opacity: 0; }
.logosvg .c { fill: none; stroke: #53ff64; stroke-miterlimit: 10; stroke-width: 16px; }
.logosvg:hover .b { fill: transparent; stroke: rgba(255,255,255,0.7); stroke-width: 2; opacity: 1; }
.logosvg:hover .c { stroke-width: 5; }
.logosvg:hover .a { fill: #fff; }

.threeDots { animation-duration: 10s; animation-name: rotate; -webkit-animation-duration: 10s; transform-origin: 730px 280px; animation-iteration-count: infinite; }
@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0deg); }
  15% { -webkit-transform: rotate(360deg); }
  50% { -webkit-transform: rotate(0deg); }
}
@keyframes rotate {
	0% { transform: rotate(0deg); }
	15% { transform: rotate(360deg); }
	50% { -webkit-transform: rotate(0deg); }
}

.gridWrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(16em, 1fr) ); grid-gap: 2em; }

.gridWrapper a { display: inline-block; text-decoration: none; background-color: #efefef; color: #333333; border-radius: 0.5em; padding: 20px; }
.gridWrapper a:hover,
.gridWrapper a:active { background-color: #fafafa; color: #808080; }
.gridWrapper strong { text-decoration: underline; }




@media only screen and (max-width: 55em) {
	
	.logosvg { width: 62%; width: 62vmin; max-height: 30%; max-height: 20vh; }
	
	
}

@media only screen and (max-width: 40em) {
	
	body { padding: 0.5rem 1rem; }
	
	
}

@media only screen and (max-width: 30em) and (orientation: portrait) {
	
	.logosvg { max-height: 15em; }
	h1 { text-align: center; }
	
	
	
}

@media only screen and (max-width: 50em) and (orientation: landscape) {
	
	.logosvg { padding-top: 1%; padding-top: 8vh; max-width: 30%; max-height: 8em; }
	.desc { margin-top: 1.5em; }
	
}