html, body {
  height: 100%;
}

body{
  margin: 0 auto;
  padding: 0 auto;
}

.container{
  height: 100%;
  width: 100%;
}


/*------------------------------HEADER------------------------------*/

#circle {
	width: 0.8em;
	height: 0.8em;
  border: 0.8em solid black;
	-moz-border-radius: 4em;
	-webkit-border-radius: 4em;
	border-radius: 4em;
  /*float: left;*/
}

#rectangle {
  margin-left: 2em;
  margin-top:1em;
  background-color: black;
  width: 31vw;
  height: 0.7em;
  /*float: left;*/
}

#rectangle2 {
    background-color: black;
    width: 0.7em;
    height: 50em;
    float: right;

}

#circle2 {
  width: 0.8em;
	height: 0.8em;
  border: 0.8em solid black;
	-moz-border-radius: 5em;
	-webkit-border-radius: 5em;
	border-radius: 5em;
  margin-top: 51em;
  margin-right: -1.5em;
  float: right;
}

.header{
  position: fixed;
  width: 100%;
  padding-top: 1em;
  padding-bottom: 1em;
  align-content:flex-start;
}

.header ul {
    list-style-type: none;
    overflow: hidden;
    text-align: left;
    margin-left: 1em;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
}

.header li {
    /* height: 1em; */
    display: inline-flex;
    justify-content: space-between;
}



/*----LOGIN----*/

.login{

  margin-right: 4em;
  margin-top: 0;
  font-family: 'Merriweather', serif;
  font-size: 0.7em;
  font-weight: bold;
  float: right;
  padding: 0.5em;
  border-bottom: 1em solid black;
  }

.login li{
  text-decoration: none;
  color: black;
    }

.login a li {
  text-decoration: none;
  color: black;
    }

    .login li:hover{
        color: #FF6700;
      }

    .login li:active{
          color: #FF6700;
        }

/*----TITULO----*/


/*------------------------------Condições Gerais------------------------------*/
h1 {
    margin: 0 auto;
    text-align: center;
    padding: 0;
    margin: 0.2em;
    margin-left: 1em;
    font-family: 'Merriweather';
    font-size: 1.5em;
    font-weight:600;
    /*float: left;*/
  }


h4{
    font-family: 'Merriweather';
    font-weight: bolder;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-bottom: 2em;
    font-size: 1em;
  }
h4 a:visited{

}


ul{
    list-style-type: none;
  }

a {
  display: block;
}

a:link {
    text-decoration: none;
    color: black;
}
a:visited {
    text-decoration: none;
    color: black;
}
a:hover {
    color: #FF6700;
}
a:active {
    color: black;
  }

a#title {
  color: black;
}

a#title:hover {
  color: #FF6700;
}

a#title:active {
  color: #FF6700;
}
/*------------------------------CONTENT------------------------------*/
#content1{
  margin: 0 auto;
  justify-content: center;
}

.content {
  height: 100%;
  padding-top: 80px;
}

/*------------------------------PROJECTOS------------------------------*/
p{
  font-family: 'Merriweather', serif;
}

.projects{
  position:inherit;
  height: 80vh;
  margin: 0 auto;
  padding: 1em;
  margin-bottom: 3em;
  overflow-x:hidden;
}

/*------------------------------KEYWORD-LIST------------------------------*/
.keywords{
  float: left;
  margin-left: -1em;
}

.keywords ul{
  font-family: 'Merriweather', serif;
}

.keywords li{
font-family: 'helvetica', sans-serif;
font-weight: bold;
line-height: 1.7em;
font-size: 0.7em;
color: black;
}

.keywords li:hover{
  color: #FF6700;
}

/*------------------------------projectos 1,2,3...------------------------------*/
.project {
position: absolute;
padding: 1em;
overflow-x: hidden;
background-color: rgba(255,255,255,0);
}

.project-detail {
  background-color: white;
}

.id{
  font-family: sans-serif;
  font-size: 0.3em;
  padding: 0;
  margin: 0;
  padding-top:0.2em;
  padding-bottom:0.2em;
}

.project-title{
  color: black;
  font-family: 'Merriweather', serif;
  font-weight: 600;
  font-size: 1.5em;
  padding: 0;
  margin: 0;
  padding-top:0.2em;
  padding-bottom:0.2em;
}

.project-title a{
  color: black;}

.project-title a:hover{
      color: #FF6700;}

.author{
  font-size: 0.8em;
  padding: 0;
  margin: 0;
  padding-top:0.2em;
  padding-bottom:0.2em;
}

.year{
  font-family: sans-serif;
  font-size: 0.8em;
  padding: 0;
  margin: 0;
  padding-top:0.2em;
  padding-bottom:0.2em;
}

.format{
  font-family: sans-serif;
  font-size: 0.8em;
  padding: 0;
  margin: 0;
  padding-top: 0.2em;
  padding-bottom: 1em;
}


.tags{
  font-family: 'helvetica', sans-serif;
  font-weight: bold;
  line-height: 1.7em;
  font-size: 0.7em;
}

.tags{
  text-decoration: none;
}


/*------------------------------MENU------------------------------*/

.menu{
  background-color: white;
  text-decoration: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  justify-content: center;
}

.menu ul{
  text-align: center;
  display: inline-flex;
}

.menu li {
    font-family: sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    padding: 1em;
    text-decoration: none;
    display: inline-flex;
    list-style-type: none;

}

.menu a li {
    text-decoration: none;
    color: black;
  }

.menu li:hover{
    color: #FF6700;
  }

.menu li:active{
      color: #FF6700;
    }

.blank-space li{
  color: white;
}

.about-project li{
  float: right;
}




  /*------------------------------PRINT EDITIONS------------------------------*/

  #print-editions{
    justify-content: center;
    margin: 0 auto;
    text-align: center;
  }

.edition00, .edition01,.edition02 {
      width: 20em;
      position: relative;
      margin: 0 auto;
      padding: 6em;
    }

#available-soon {
  z-index: 100000;
  margin-top: 0;
  background-color: #FF6700;
  padding: 1em;
  width: 11em;
  margin: auto;
  display: none;
}

#available-soon p {
  font-size: 0.8em;
  font-family: 'Merriweather', serif;
  text-align: center;
  font-weight: 400;
  margin: auto;
}

.selected {
  color: #FF6700 !important;
}

  /*------------------------------ABOUT------------------------------*/
  #circle-about{
    margin:0 auto;
    width: 0.5em;
    height: 0.5em;
    border: 0.5em solid black;
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
  }

  #about {
    height:100%;
    width: 100%;
    padding-top: 3em;
    padding-bottom: 5em;
    background-color: #FF6700;
    justify-content: center;
    vertical-align: middle;
  }

  .sinopse{
    padding-top: 2em;
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 0.8em;
    line-height: 2em;
    margin: 0 auto;
    padding-top: 1em;
    text-align: justify;
    width: 40%;
  }

#rectangle-about{
  margin:0 auto;
  margin-top: 3em;
  background-color: black;
  width: 40%;
  height: 0.7em;
  }

  .ficha-tecnica{
    padding-top: 2em;
    font-family: 'Arial', sans-serif;
    font-weight: bolder;
    font-weight: 400;
    font-size: 0.6em;
    line-height: 2em;
    margin: 0 auto;
    text-align: center;
    width: 40%;
  }


    /*------------------------------LOGIN PAGE------------------------------*/
#content{
      margin: 0 auto;
      display: flex;
      justify-content: center;
    }

#log-form{
  display: flex;
  justify-content: center;
  position: absolute;
  padding-top: 4em;
  width: 100%;

}

form {
      justify-content: center;
      border: 3px solid #FF6700;
}


label{
  text-align: center;
  color: #FF6700;
  font-family: 'Merriweather', serif;
  font-weight: 400;}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    border: 0.1em solid #FF6700;
    color: #FF6700;
    box-sizing: border-box;
}

input:focus {
    outline:none;
}

button {
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    background-color: #FF6700;
    color: black;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:focus {
    outline:none;
}


button:hover {
    opacity: 0.8;
}

.cancelbtn {
    color: white;
    width: 40vw;
    padding: 10px 18px;
    background-color: black;
}


.container-log {
    justify-content: center;
    width: 40%;
    padding: 16px;
}

span.psw {
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

.thank-you {
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  color: #FF6700;
  font-size: 1.2em;
  display: none;
}


/*------------------------------UPS!------------------------------*/
#ups {
  height: 100%;
  margin: 0 auto;
  padding-top: 3em;
  padding-bottom: 5em;
  background-color: #FF6700;
  display: block;

}

p.ups {
  text-align: center;
}
p.ups-small {
  text-align: center;
  font-size: 0.8em;
}

#suggestions{
  padding-top: 3em;
  display: flex;
  margin: 0 auto;
  width: 100%;
}

.sugestion {
  text-align: left;
  margin: 0 auto;
  display:inline-block;
}

#suggest-1{
  padding-top:10em;
  padding-bottom:10em;
}


img.thumbnail-ups{
  width: 8em;
}

.project-title-ups{
  line-height: 0.4em;
  font-weight: bold;
  font-size: 0.8;
}

.author-ups{
  line-height: 0.4em;
  font-weight: normal;
  font-size: 0.8;
}

.year-ups{
  font-family: 'helvetica', sans-serif;
  font-weight: normal;
  line-height: 0.4em;
  font-size: 0.6em;
}

img:hover{
  opacity: 0.8;
}

/*------------------------------1702 PAGE------------------------------*/


#box {
  z-index: -99999;
  width: 16em;
  height: 72em;
  margin-left: 100px;
  float: left;
  padding-bottom: 1em;
}

#box1 {
z-index: -99999;
 width: 10em;
 height: 5em;
 margin-left: auto;
 margin-right: auto;
 margin-top: 4em;
}

.box2 {
  z-index: -99999;
  width: 15em;
  margin-left: 8em;
  margin-top: 3em;
  float: left;
  padding-bottom: 1em;
}


.box3 {
  z-index: 99999;
  width: 15em;
  margin-left: 8em;
  margin-top: 8em;
  float: left;
  padding-bottom: 1em;
}

.box3 img{
  width: 20em;
}

.box2 img{
  width: 20em;
  margin-bottom: 5em;
}

.box2 img:hover{
  width:40em;
  color:  #FF6700;
}

.box3 img:hover{
  width:40em;
  color:  #FF6700;
}

.box2 a {
  display: block;
  color:  #FF6700;
}

.box3 a {
  display: block;
  color:  #FF6700;
}

h5{
    line-height: 1.5em;
    font-family: 'Merriweather';
    font-weight: normal;
    text-align: left;
    padding: 0;
    margin: 0;
    font-size: 1em;
  }



  h6{
      line-height: 1.5em;
      font-family: 'Merriweather';
      font-weight: normal;
      text-align: left;
      padding: 0;
      margin: 0;
      font-size: 0.8em;
    }



  .bolder{
    font-weight: bolder;
  }

  .italic {
    font-style: italic;
  }

  .text_1702{
    text-align: justify;
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 0.6em;
    line-height: 2em;
    margin: 0 auto;
    padding-top: 2em;
    padding-left: 5em;
    padding-bottom: 1em;
    width: 100%;
  }

.more-soon p {
  font-family: 'Merriweather', serif;
}

.more-soon {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding-top: 3em;
  clear: both;
  margin-bottom: 8em;
}

#added-to-stack{
  position: absolute;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  z-index: 9999999999999;
  background-color: #FF6700;
  width: 12em;
  height: 5em;
  display: none;
}

#added-to-stack p{
  text-align: center;
  background-color:  #FF6700;
  color: black;
  z-index: 9999999999999;
  font-family: 'Merriweather', serif;
  font-weight: bold;
  font-size: 0.7em;
  padding-top: 1em;
}

#rectangle-added{
  margin: 0 auto;
  width: 3em;
  height: 0.5em;
  background-color: black;
}

.add-orange h6{
  color: #FF6700;
}


/*------------------------------REMIX------------------------------*/


#box-remix {
  z-index: -99999;
  width: 16em;
  margin-left: 100px;
  float: left;
  padding-bottom: 1em;
}

.box4 {
  z-index: -99999;
  width: 10em;
  margin-left: 8em;
  margin-top: 3em;
  float: left;
  padding-bottom: 1em;
}

.box4 img{
  width: 17em;
  margin-bottom: 5em;
}

.box4 img:hover{
  width:40em;
}

.box4 a {
  display: block;
  color:  #FF6700;
}