@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,400,500');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,300');

/*  RESET  */
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
	vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; 	border: 0; }
/* remember to define focus styles! */
:focus { outline: 0; }
body { background: white; line-height: 1; color: black; }
ol, ul { list-style: none; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/*  SELECTION/HIGHLIGHT  */
*::-moz-selection { background: #09F; color: #fff; }
*::selection { background: #09F; color: #fff; }

* { margin: 0; padding: 0; }

*,
*::before,
*::after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box;     
  box-sizing: border-box; 
}

/*    */

html, body {
  height: 100%; width: 100%;

/*  font-family: 'Roboto Mono', monospace;*/
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 1.1rem;
  line-height: 1.6rem;
  -webkit-font-smoothing: antialiased;  
  -webkit-text-size-adjust: 150%;
  -ms-text-size-adjust: 150%;
  font-size-adjust: 150%;
}

html {
  min-height: 100%;
}

body {
  background-color: #CCCCCC;/*rgba( 204, 204, 204, 0.4);*/
  color: #FFFFFF;
}


/*  */
.full-width { min-width: 100%; }
.full-height { height: 100% !important; }
.center { text-align: center; }
.blured { filter: blur(12px); }

.float-left { float: left; }
.float-right { float: right; }
.right { text-align: right; }
.left { text-align: left; }

.flex-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-content: space-between;
}

/* media query - container */
.container {
  width:100%;
  max-width:100%;
  margin-left: 0px;
  margin-right: 0px;
  padding-top: 25px;
  padding-bottom: 25px;
  clear: both;
/*  overflow: hidden; /**/
}

/*
@media (max-width: 292.50px) { .container { max-width: 141.25px ; margin-left: auto; margin-right: auto; } }
@media (min-width: 292.50px) { .container { max-width: 292.50px ; margin-left: auto; margin-right: auto; } }
@media (min-width: 443.75px) { .container { max-width: 443.75px ; margin-left: auto; margin-right: auto; } }/**/
@media (min-width: 595.00px) { .container { max-width: 595.00px ; margin-left: auto; margin-right: auto; } }
@media (min-width: 746.25px) { .container { max-width: 746.25px ; margin-left: auto; margin-right: auto; } }
@media (min-width: 897.50px) { .container { max-width: 897.50px ; margin-left: auto; margin-right: auto; } }
@media (min-width: 1048.75px) { .container { max-width: 1048.75px ; margin-left: auto; margin-right: auto; } }
@media (min-width: 1200.00px) { .container { max-width: 1200.00px ; margin-left: auto; margin-right: auto; } }

.container::after {
  clear: both;
}

/* media query - container */
.content {
  width:100%;
  padding-left: 15px;
  padding-right: 15px;
  clear: both;
}



.content::after {
  clear: both;
}

.content p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cover {
  position: absolute;
  top: 0; /**/
  bottom: 0; /**/
  min-width: 100%;
  height: 100% !important;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

  justify-content: center; /* align horizontal */
}

/* fft = default */
.page-wrapper { 
  background-image: linear-gradient(to right, #0d3078, #034895, #0d3078); 
  background-image: -ms-linear-gradient(to right, #0d3078, #034895, #0d3078); 
  background-image: -moz-linear-gradient(to right, #0d3078, #034895, #0d3078); 
  background-image: -o-linear-gradient(to right, #0d3078, #034895, #0d3078); 
  background-image: -webkit-linear-gradient(to right, #0d3078, #034895, #0d3078); 
}


.header, .footer { 
  background-image: radial-gradient( #034895, #0d3078 );
  background-image: -ms-radial-gradient( #034895 0%, #0d3078 100% );
  background-image: -moz-radial-gradient( #034895 0%, #0d3078 100% );
  background-image: -o-radial-gradient( #034895 0%, #0d3078 100% );
  background-image: -webkit-radial-gradient( #034895 0%, #0d3078 100% );
}

.header, .footer {
  overflow: hidden;
  position: relative;
}

/* header */
.header { height: 100vh !important; }

.footer { height: 100vh !important; }


.promo-picture {
  height: 100%;
  width: 100%;
}

.header .promo-picture {
  background: url('./assets/img/fft_header_promo.svg');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: bottom center; 
}

.footer .promo-picture {
  background: url('./assets/img/fft_footer_promo.svg');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.header a,
.header a:hover {
  color: #FFF;
  text-decoration: none;  
  font-weight: 300;
  font-size: 1.5rem;
}

.header a:hover {
  color: #FA0;
}

.header .redirect-link,
.header .redirect-counter {
  color: #FFF;
  
}

.header .redirect-link {
  align-self: center;
  margin-top: 7em;  
}

.header .redirect-counter {
  
  align-self: flex-end;
  margin-bottom: 2.8em;
}


.header .page-timer {
  color: #FFF;
  height: 76px;
  align-self: center;
  
  margin-top: 5.6em;
/*  font-family: 'Roboto Mono', monospace; /**/
  font-size: 1.5rem;
}

.header .page-timer a {
  font-weight: 300;
  color: #FFF;
  text-decoration: none;
}

.header .page-timer a:hover {
  color: #FA0;
  text-decoration: none;
}


.header .mouse-move {
  height: 76px;
  width: 76px;
  background: url('./assets/img/mouse_move_promo.svg');
  animation-name: mouse-move;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  align-self: flex-end;
  margin-bottom: 2.8em;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

@keyframes mouse-move {
   0% { -webkit-transform:  translateY(0px);  -moz-transform: translateY(0px);  -ms-transform: translateY(0px);  -o-transform: translateY(0px); transform:  translateY(0px); }
  30% { -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); -o-transform: translateY(25px); transform: translateY(25px); }
  50% { -webkit-transform:  translateY(0px);  -moz-transform: translateY(0px);  -ms-transform: translateY(0px);  -o-transform: translateY(0px); transform:  translateY(0px); }
  57% { -webkit-transform:  translateY(5px);  -moz-transform: translateY(5px);  -ms-transform: translateY(5px);  -o-transform: translateY(5px); transform:  translateY(5px); }
  64% { -webkit-transform:  translateY(0px);  -moz-transform: translateY(0px);  -ms-transform: translateY(0px);  -o-transform: translateY(0px); transform:  translateY(0px); }
 100% { -webkit-transform:  translateY(0px);  -moz-transform: translateY(0px);  -ms-transform: translateY(0px);  -o-transform: translateY(0px); transform:  translateY(0px); }
}

.header .logo-picture {
  height: 100%;
  width: 100%;
  margin-top: 10%;
  max-height: 230px;
  max-width: 700px;
  margin-left: 1em;
  margin-right: 1em;
  background: url('./assets/img/fft_header_logo.svg');
  background-repeat: no-repeat;
}