@charset "UTF-8";
/* CSS Document */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

  button:focus {outline:0 !important;}
  button {
  outline: none !important;
}
*:focus {
    outline: none;
}

	body { background-image: url('../img/AC_roar.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
   font-family: "brandon-grotesque",sans-serif;

  color: white;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
 height:100vh;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
				 -webkit-box-orient: vertical;
				 -webkit-box-direction: normal;
				     -ms-flex-direction: column;
				         flex-direction: column;
				 -ms-flex-wrap: wrap;
				     flex-wrap: wrap;
						 margin: 0;

}
h1 {font-size: 95px; font-weight: 100; margin-bottom: 0}
.play {width:100px; fill: #fff; -webkit-transition: all .5s ease; transition: all .5s ease }
.play:hover {fill:#e0e0e0; -webkit-transition: all .5s ease; transition: all .5s ease; cursor: pointer;}
.playsvg {width: 100px; height: 100px}

@media screen and (max-width: 1025px) {
	h1 {font-size: 90px; }
	.play {width:100px;}
.playsvg {width: 100px; height: 100px}
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 1023px) {}
@media (max-width:885px) {
	h1 {font-size: 60px; }
	.play {width:100px;}
.playsvg {width: 100px; height: 100px}
}
@media screen and (max-width: 767px) {
	h1 {font-size: 40px; }
	.play {width:75px;}
.playsvg {width: 75px; height: 75px}
}
@media (max-width:575px) {
	h1 {font-size: 36px; }
	.play {width:50px;}
.playsvg {width: 50px; height: 50px}
}
@media (max-width:350px) {
	h1 {font-size: 28px; }
	.play {width:50px;}
.playsvg {width: 50px; height: 50px}
}