html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}

img, iframe {
  vertical-align: bottom;
  max-width: 100%;
}

input, textarea, select {
  font: inherit;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: white; text-decoration: none; }
a { z-index: 3 !important; }

a {  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;  } 
a:hover { color: #F4A48F; }

body {
	font-size: 34px;
	width: 100%;
	line-height: 1.3;
 animation: colorchange 50s; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: colorchange 50s; /* Chrome and Safari */
	
	background: #2a6ab1; /* Old browsers */
background: -moz-linear-gradient(top, #2a6ab1 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #2a6ab1 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #2a6ab1 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a6ab1', endColorstr='#ffffff',GradientType=0 );
background-size: 100% 700px;
background-repeat: no-repeat; /* IE6-9 */
	color: white;
}

 .rotating-wheel { 
	 width: 130px;
	 height: 130px;
	 background-image: url('wheel.svg');
	 position: fixed;
	 right: 40px !important;
	 top: 30px;
	 z-index: 2;
    }

h1, p { font-family: 'Helvetica Neue Light','Helvetica Neue',Helvetica,Arial,sans-serif; }
p { font-size: 20px; line-height: 28px; } 

header {
  position: fixed;
  top: 30px;
  left: 40px;
  z-index: 1;
}

.hot02 { 
	-webkit-animation:spin 8s linear infinite;
    -moz-animation:spin 8s linear infinite;
    animation:spin 8s linear infinite;  }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1;} 
}

img {
  position: absolute;
  top: 200px;
  left: 200px;
  transform: translate(-50%, -50%) scale(0.5);
  animation: fadein 0.5s;
}

 @font-face {
  font-family: 'Helvetica Neue Light';
  src: url('fonts/HelveticaNeueLTStd-Lt.eot'); /* IE9 Compat Modes */
  src: url('fonts/HelveticaNeueLTStd-Lt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), /* Modern Browsers */
       url('fonts/HelveticaNeueLTStd-Lt.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/HelveticaNeueLTStd-Lt.svg#299b646f1a4d7507b847463fde5991b8') format('svg'); /* Legacy iOS */
  font-style:   normal; font-weight:  700;
} 
 
 @font-face {
  font-family: 'Helvetica Neue Medium';
  src: url('fonts/HelveticaNeueLTStd-Md.eot'); /* IE9 Compat Modes */
  src: url('fonts/HelveticaNeueLTStd-Md.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/HelveticaNeueLTStd-Md.woff') format('woff'), /* Modern Browsers */
       url('fonts/HelveticaNeueLTStd-Md.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/HelveticaNeueLTStd-Md.svg#299b646f1a4d7507b847463fde5991b8') format('svg'); /* Legacy iOS */
  font-style:   normal; font-weight:  700;
}

@media only screen and (max-width: 600px) {
    .rotating-wheel {
        visibility: hidden !important;
    }
    
    h1 { font-size: 26px; line-height: 34px; }
    p { font-size: 15px; line-height: 22px; }
}