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

body{
    overflow: hidden;
    margin: 0;
    position: fixed;
}


/* TITULOS */

h1{
    position: absolute;
	font-family: 'Montserrat', sans-serif;
    color: #ffffff ;
	font-weight:100;
	font-size: 50px;
    margin-top: 300px;
    margin-left: 200px;
    line-height: 1.2;
    
}

/* QUESTOES */

h2{
    position: absolute;
	font-family: 'Montserrat', sans-serif;
    color: #ffffff ;
	font-weight:100;
	font-size: 30px;
    margin-top: 450px;
    margin-left: 200px;
    letter-spacing: 1px;
    
}


/* --------- */



[class*="icon-"] {
  font-family: 'Montserrat';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

.icon-arrow-right:before {
  content: "\3e";
}



/* FORMULARIO / RESPOSTAS */



form {
    position: absolute;
	font-family: 'Montserrat', sans-serif;
    color: #ffffff ;
    font-weight: 100;
	font-size: 50px;
    margin-top: 550px;
    margin-left: 200px;
    width: 20em;
    text-align: center;

}

input {
  color: white;
  font-size: 26px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid 1px;
  border-color: white;
  background: transparent;
  display: block;
  height: 36px;
  width: 480px;
  margin-bottom: 10%;
  padding: 0 1%;
  position: relative;
  z-index: 0;
  -webkit-transition: border .25s;
  -moz-transition: border .25s;
  -o-transition: border .25s;
  transition: border .25s;
}


.placeholder {
  color: transparent;
  -webkit-transition: color .2s;
  -moz-transition: color .2s;
  -o-transition: color .2s;
  transition: color .2s;
}

::-webkit-input-placeholder {
  color:;
  -webkit-transition: color .2s;
  -moz-transition: color .2s;
  -o-transition: color .2s;
  transition: color .2s;
}

:-moz-placeholder {
  color: white;
  -webkit-transition: color .2s;
  -moz-transition: color .2s;
  -o-transition: color .2s;
  transition: color .2s;
}

:-ms-input-placeholder {
  color: whitesmoke;
  -webkit-transition: color .2s;
  -moz-transition: color .2s;
  -o-transition: color .2s;
  transition: color .2s;
}

.placeholder:focus {
  color: white;
}


/* BOTÃO SEND / START */


/* BUTTON (SEND) */


button {
    border-radius:1px;
    background-color: #151515;
    color: #ffffff;
    font-family: 'Montserrat';
    font-weight: 100;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 8px 21px;
    cursor: pointer;
    position: absolute;
    margin-left: -500px;
    bottom: 0%;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

button:hover, button:focus {
    color: #ffffff;
    background: transparent;
    border: 1px solid #ffffff;
}

button span {
    display: none;
    align-items: center;
	border-radius: 10px;
	justify-content: center;
	height: 100%;
	transition: background .5s ease;
	width: 100%;
    color: $primary-color;
    @include gradient-directional($primary-color, $secondary-color, 60deg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.content    {
width: 1024px;
margin: auto;
text-align: center;
padding: 25px;
display:none;
}


/* BUTTON 2 (START / CONTINUE) */


button2 {
    border-radius:1px;
    border: 1px solid white;
    background-color: #151515;
    color: #ffffff;
    font-family: 'Montserrat';
    font-weight: 100;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 8px 21px;
    cursor: pointer;
    position: absolute;
    margin-left: -500px;
    margin-top: 92px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
        
}

button2:hover, button2:focus {
    color: #ffffff;
    background: transparent;
    border: 1px solid #ffffff;
}

button2 span {
    display: none;
    align-items: center;
	border-radius: 10px;
	justify-content: center;
	height: 100%;
	transition: background .5s ease;
	width: 100%;
    color: $primary-color;
    @include gradient-directional($primary-color, $secondary-color, 60deg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}



/* BUTTON 3 (QAB A) */


button3 {
    border-radius:10px;
    background-color: #151515;
    color: #ffffff;
    font-family: 'Montserrat';
    font-weight: 100;
    font-size: 30px;
    letter-spacing: 1px;
    padding: 8px 21px;
    cursor: pointer;
    position: absolute;
    margin-left: -500px;
    top: -55px;
    text-align: left;
   
}

button3:hover, button3:focus {
    color: #ffffff;
    background: transparent;
    border: none;
}

button3 span {
    display: none;
    align-items: left;
	border-radius: 10px;
	justify-content: center;
	height: 100%;
	transition: transparent .5s ease;
	width: 100%;
    color: transparent
}



/* BUTTON 4 (QAB B) */


button4 {
    border-radius:10px;
    background-color: #151515;
    color: #ffffff;
    font-family: 'Montserrat';
    font-weight: 100;
    font-size: 30px;
    letter-spacing: 1px;
    padding: 8px 21px;
    cursor: pointer;
    position: absolute;
    margin-left: -500px;
    top: 20px;
    text-align: left;
   
}

button4:hover, button4:focus {
    color: #ffffff;
    background: transparent;
    border: none;
}

button4 span {
    display: none;
    align-items: left;
	border-radius: 10px;
	justify-content: left;
	height: 100%;
	transition: background .5s ease;
	width: 100%;
    color: $primary-color;
        @include gradient-directional($primary-color, $secondary-color, 60deg);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

/* CHOICE / QAB */


.choice-wrap    {
margin-top: 500px;
}

.choice-table   {
margin: auto;
}

.choice    {
background: transparent;
width: 100px;
padding: 10px;
cursor: pointer;
border-radius: 10px;
}


.qab    {
background: transparent;
width: 550px;
padding: 10px;
cursor: pointer;
border-radius: 10px;
}

/* CHOICE / QA280 */


.qa280    {
background: transparent;
width: 550px;
padding: 10px;
cursor: pointer;
border-radius: 10px;
}

/* cronometro */

.c-timer {
position: absolute;
margin-left: 90%;
margin-top: 5%;
font-family: 'Montserrat';
font-weight: 100;
width: 100px;
}
.c-timer .c-text {
  position: absolute;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 18px;
  line-height: 30px;
  top: 50%;
  margin-top: -15px;
}
.c-timer svg {
  width: 100%;
}


/* OTHER */


body {
  background:#151515;
}
canvas {
  display:block;
  margin:20px auto;
}