/*RESET*/

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, font, 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 {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}

:focus {
        outline: 0;
}

/**/

cursor{
  background-color:black;
  color: white;
}

@keyframes fadeIn{
    0%{opacity:0;}
    33%{opacity:0;}
    100%{opacity:1;}
}

body{
	min-height:100%;
	margin:0 auto;
	background-color:#fff;
  position: relative;
}

p,a,h1,h2,h3,h4,h2,h6,input,textarea,button{
  font-family: 'Lato', sans-serif;
  line-height:120%;
  letter-spacing:0.025em;
}

img{
  width:100%;
}

a{
	text-decoration: none;
	color: black;
	font-size:1.2em;
}

h1{
	font-size:3.5em;
}

h2{
	font-size:1.3em;
}

h3{
  font-size:1.3em;
}

button{
	cursor: pointer;
}

.full-width{
  width:100%;
  margin:0 auto;
}

.second-width{
  width:95%;
  margin:0 auto;
}

#main-container{
  background: url('../img/img_fundo.jpg');
  background-repeat: none;
  background-size: cover;
  position: relative;
  animation-name:fadeIn;
  animation-duration:0.35s;
  animation-timing-function:ease-out;
}

header{
	position: relative;
	background-color:black;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  //border-bottom:0.5vh solid rgb(251,175,63);
  animation-name:fadeIn;
  animation-duration:0.5s;
  animation-timing-function:ease-out;
}

#logo{
  position: relative;
	//background-color:black;
	width:90%;
	float: left;
	margin-left:3vh;
	margin-top:3vh;
	margin-bottom:3vh;
}

#logo img{
  width:100%;

}

.site{
	margin-top:3vh;
	margin-left:5vh;
  margin-bottom:3vh;
	float: left;
  color: white;
}

.site a{
  font-weight:900 !important;
}

#redes-sociais{
	//margin: 0 auto;
  margin-left:5vh;
	clear: both;
	//background-color:cyan;
	min-height:50px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:left;
	    -ms-flex-pack:left;
	        justify-content:left;
	padding-bottom:3vh;
	width:82%;
}

.rede-social{
	width:50px;
	height:50px;
	//background-color:white;
	//padding:0.5vh;
	margin-left:5px;
}

.rede-social:first-child{
	margin-left:0;
}


#texto{
	position: relative;
	margin: 0 auto;
	color:black;
	margin-top:6vh;
	width:95%;
	//background-color:red;
  margin-bottom:10vh;
  font-weight:300;
  animation-name:fadeIn;
  animation-duration:0.85s;
  animation-timing-function:ease-out;
}

#texto h1,h2,h3{
	padding:1.5%;
  padding-left:0;
}

#texto h1{
  font-weight: 300 !important;
  padding-bottom:5vh;
}

#texto p{
  font-size:1.5em;
}

#video{
  position: relative;
  //background-color:red;
  margin-top:6vh;
  width:90vw;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-bottom:1vh;
  border-bottom:0.5vh solid rgb(251,175,63);
  animation-name:fadeIn;
  animation-duration:0.85s;
  animation-timing-function:ease-out;
}


#formulario{
	//background-color:green;
	position: relative;
	margin:0 auto;
	width:95%;
	min-height:300px;
	margin-top:6vh;
	margin-bottom:6vh;
	text-align: center;
    animation-name:fadeIn;
    animation-duration:0.85s;
    animation-timing-function:ease-out;    
}

#formulario h3{
	padding:3vh;
  font-size:1.5em;
  font-weight:300 !important;
	color:black;
}

::-webkit-input-placeholder{
  color: black;
}
:-ms-input-placeholder{
  color: black;
}
::placeholder{
  color: black;
}

input,textarea,button{
	display: block;
	margin: 0 auto;
	width:95%;
	margin-bottom:2vh;
	min-height:8vh;
	background-color:white;
	border:none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size:1.2em;
  font-weight:300;
  padding-left:2%;
  padding-bottom:2%;
  -webkit-box-shadow: inset 0px -3px 0px 0px rgb(251,175,63);
  box-shadow: inset 0px -3px 0px 0px rgb(251,175,63);
  color: black;
  -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(.45,.68,.73,.99);
  transition: -webkit-box-shadow 0.2s cubic-bezier(.45,.68,.73,.99);
  -o-transition: box-shadow 0.2s cubic-bezier(.45,.68,.73,.99);
  transition: box-shadow 0.2s cubic-bezier(.45,.68,.73,.99);
  transition: box-shadow 0.2s cubic-bezier(.45,.68,.73,.99), -webkit-box-shadow 0.2s cubic-bezier(.45,.68,.73,.99);
  -webkit-transition: background-color 0.15s cubic-bezier(.45,.68,.73,.99);
  -o-transition: background-color 0.15s cubic-bezier(.45,.68,.73,.99);
  transition: background-color 0.15s cubic-bezier(.45,.68,.73,.99);
}

input:focus, textarea:focus{
  -webkit-box-shadow: inset 0px -3px 0px 0px rgb(0,0,0);
  box-shadow: inset 0px -3px 0px 0px rgb(0,0,0);
  background-color:#E0E0E0;
  -webkit-transition: -webkit-box-shadow 0.05s ease-in;
  transition: -webkit-box-shadow 0.05s ease-in;
  -o-transition: box-shadow 0.05s ease-in;
  transition: box-shadow 0.05s ease-in;
  transition: box-shadow 0.05s ease-in, -webkit-box-shadow 0.05s ease-in;
  -webkit-transition: background-color 0.15s ease-in;
  -o-transition: background-color 0.15s ease-in;
  transition: background-color 0.15s ease-in;
}

textarea{
  padding-top:2%;
  min-height:30vh;
  width:95%;
  resize: none;
}

button{
	min-height:12vh;
	background-color:white;
	color: black;
	border:none;
	-webkit-transition:border 0.05s ease-out, background-color 0.1s ease-out;
	-o-transition:border 0.05s ease-out, background-color 0.1s ease-out;
	transition:border 0.05s ease-out, background-color 0.1s ease-out;
}

button:hover{
	background-color:black;
	color: white;
	border:0.5vw solid white;
	-webkit-transition:background-color 0.1s ease-in, border 0.12s ease-in;
	-o-transition:background-color 0.1s ease-in, border 0.12s ease-in;
	transition:background-color 0.1s ease-in, border 0.12s ease-in;
}

.btn-submitted{
  background-color:black;
	color: white;
  //font-size:1.5em;
	border:0.5vw solid white;
	-webkit-transition:background-color 0.1s ease-in, border 0.12s ease-in;
	-o-transition:background-color 0.1s ease-in, border 0.12s ease-in;
	transition:background-color 0.1s ease-in, border 0.12s ease-in;
}

#copyright{
  position: relative;
	font-size:0.8em;
	color: black;
	margin-left:5%;
	padding-bottom:5%;
  margin:0 auto;
  text-align: center;
  animation-name:fadeIn;
  animation-duration:1s;
  animation-timing-function:ease-out;
}

#copyright p{
  font-weight:300;
}

@media screen and (min-width: 550px) {
  #logo{
    width:70%;
    //background-color:red;
    margin:0 auto !important;
    float: none;
  }


  .site{
    clear: both;
  }
  /*

  #redes-sociais{
    margin-left:0;
    width:96% !important;
    margin-right:3vh;
    background-color: red;
    -webkit-box-pack: right;
        -ms-flex-pack: right;
            justify-content: right;
  }*/

  #texto{
    margin-bottom:10vh;
  }
}



@media screen and (min-width: 980px) {
  header{
    //height:130px;
    height:10vh;
    max-height:10vh;
	}

  #main-container{
    /*display: block;
    height:100vh;*/
  }

  #main{
    position: relative;
    height:90vh;

  }

  #logo{
    position: relative;
    width:15%;
    //background-color: red;
    margin:0;
    margin-left:3vw !important;
    height:100%;
    float: left;
  }

  #logo img{
    position: absolute;
    left:0;
    top:50%;
    -webkit-transform: translate(0,-50%);
            -ms-transform: translate(0,-50%);
        transform: translate(0,-50%);
  }

  .site{
    position: absolute;
    //margin-top:4vh;
    -webkit-transform: translateY(25%) !important;
        -ms-transform: translateY(25%) !important;
            transform: translateY(25%) !important;
    right:21vw;
    position: relative;
    float: right;
    clear: none;
    //background-color:yellow;
    border-bottom:0;
    -webkit-transition: border-bottom 0.05s ease-out;
    -o-transition: border-bottom 0.05s ease-out;
    transition: border-bottom 0.05s ease-out;
  }

  .site:hover{
    -webkit-transition: border-bottom 0.1 ease-in;
    -o-transition: border-bottom 0.1 ease-in;
    transition: border-bottom 0.1 ease-in;
    border-bottom:2px solid #fff;
  }

 	#redes-sociais{
    position: absolute;
    //background-color:red;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    right:0;
    width:auto !important;
    //background-color: red;
    padding-bottom:0;
    margin-right:3.5vw;
    clear: none;
    height:inherit;
 	}

  .rede-social{
    width:2.5vw;
    height:2.5vw;
    float: right;
    -webkit-transform: scale(1,1);
        -ms-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-transition: transform 0.1s cubic-bezier(.45,.68,.73,.99);
  	-webkit-transition:-webkit-transform 0.1s cubic-bezier(.45,.68,.73,.99);
  	transition:-webkit-transform 0.1s cubic-bezier(.45,.68,.73,.99);
  	-o-transition:transform 0.1s cubic-bezier(.45,.68,.73,.99);
  	transition:transform 0.1s cubic-bezier(.45,.68,.73,.99);
  	transition:transform 0.1s cubic-bezier(.45,.68,.73,.99), -webkit-transform 0.1s cubic-bezier(.45,.68,.73,.99);
  }

  .rede-social:hover{
    -webkit-transform: scale(0.7,0.7);
        -ms-transform: scale(0.7,0.7);
            transform: scale(0.7,0.7);
    -webkit-transition: -webkit-transform 0.1s ease-in;
    transition: -webkit-transform 0.1s ease-in;
    -o-transition: transform 0.1s ease-in;
    transition: transform 0.1s ease-in;
    transition: transform 0.1s ease-in, -webkit-transform 0.1s ease-in;
  }

  #main{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: row;
        -ms-flex-pack: row;
            justify-content: row;
  }

 	#texto{
 		width:45vw;
    margin-top:6vh;
    margin-left:1vw;
    padding-top:0;
 	}

  #texto h1{
    padding-bottom:0vh;
    padding-top:0;
  }

  #video{
    width:70%;
    margin:0 auto;
    margin-top:6vh;
    margin-bottom:6vh;
  }

 	#formulario{
 		width:45vw;
    margin-top:6vh;
    padding:0;
    margin-right:1vw;
 	}

 	#copyright{
    position: absolute;
    bottom:0;
    right:0;
    text-align: right;
    width:50%;
    margin-right:1vw;
 	}

  input,textarea,button{
  	display: block;
  	margin: 0 auto;
  	width:90%;
  	//margin-bottom:2vh;
  	min-height:4vh;
  	background-color:white;
  	border:none;
    padding-top:1.5%;
    //margin-right:4vh;
    float: right !important;
  }

  textarea{
    min-height:15vh;
    width:90%;
  }


	button{
		width:25%;
		float:right;
		margin-right:0;
    min-height:5vh;
	}

}

@media screen and (min-width: 2500px) {
  a{
  	font-size:1.5em;
  }

  h1{
  	font-size:5em;
  }

  #texto p{
    font-size:2.2em;
  }

  #formulario h3{
    font-size:3em;
  }

  input,textarea,button{
    font-size:2em;
  }

}