@import url("https://fonts.googleapis.com/css?family=Nunito Sans:200,300,400,700,800,900");
header h1 {
  font-family: Nunito Sans, sans-serif;
  font-weight: 900;
  font-size: 7em; }

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: 'Nunito Sans'; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

body {
  line-height: 1; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

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

body {
  font-family: Nunito Sans, sans-serif, sans-serif;
  background: #fafafa; }

a {
  color: #fff;
  text-decoration: none; }

.row {
  width: 100%;
  max-width: 1057px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  clear: both; }

.row img {
  max-width: 100%;
  height: auto;
  padding: 0;
  margin: 0; }

.gallery ul li {
  margin: 0 0.87719%; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  header h1 {
    color: red;
    margin: 15px; }
  header div {
    margin-right: 1em;
    margin-right: 1em; }
    header div a {
      display: flex;
      color: red;
      font-weight: 900;
      font-size: 2em; }
      header div a i {
        color: red; }

.gallery {
  padding: 40px 0 6%;
  position: relative;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  justify-content: center; }

.gallery ul {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; }

.gallery ul li {
  margin-bottom: 20px;
  width: 100%; }

.gallery ul li a {
  display: block;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 1px;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 0; }

.gallery ul li a:before {
  position: absolute;
  opacity: 0;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: 100%;
  padding-top: 50%; }

.gallery ul li a:hover:before {
  background-color: rgba(255, 0, 0, 0.71);
  opacity: 1;
  transition: all 0.3s ease-in-out; }

.port {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding-top: 2%;
  height: 100%;
  background: #fafafa;
  z-index: 103;
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.5s ease-in-out;
  overflow: auto; }

.port .description {
  width: 100%;
  max-height: 100%;
  padding: 0 10px 10px;
  overflow: auto;
  text-align: left; }

.port .linksite {
  color: black;
  font-weight: 700; }

.port .links a {
  color: red;
  font-size: 3em;
  padding: 14px 15px; }
  .port .links a p {
    color: red;
    font-size: 0.5 em;
    font-weight: 700; }

.port a:hover {
  transition: all 0.5s ease-in-out; }

button {
  background: #fafafa;
  color: #aaaaaa;
  border-radius: 0;
  margin-left: 25px;
  font-size: 28px;
  line-height: 50px;
  transition: all 0.5s ease-in-out;
  padding: 0px 0px; }

.links {
  text-align: center; }

#back {
  color: red;
  font-family: Nunito Sans, sans-serif; }

.port p {
  font-size: 20px;
  font-weight: 400;
  color: black;
  margin: 15px; }

.port h1 {
  font-size: 45px;
  line-height: 1.3;
  padding: 0;
  margin: 15px;
  font-weight: 800;
  color: #000000; }

.port > * {
  opacity: 0;
  transition: all 0.5s linear; }

.port.item_open {
  visibility: visible;
  transform: translateY(0%);
  transition: all 0.4s ease-in-out; }

.port > * {
  opacity: 1;
  transition-delay: 0.5s; }

.close {
  display: flex;
  align-items: center;
  position: absolute;
  right: 30px;
  color: red;
  margin: 20px;
  top: -121px;
  z-index: 1004;
  transition: all 0.1s ease-in-out; }

.close:hover {
  color: #323231; }

.item_open .close {
  opacity: 1;
  top: 0;
  margin-top: -1em;
  right: 0;
  transition: all 0.3s ease-in-out; }

.sizer {
  position: relative;
  width: 100%;
  min-width: 400px;
  max-width: 800px;
  height: 70px;
  animation: expand 8s linear infinite;
  margin: 0 auto;
  border-radius: 2px;
  padding-left: 2em;
  padding-right: 2em; }

footer a {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: red;
  font-weight: 900;
  font-size: 4em;
  margin: 50px; }
  footer a i {
    color: red; }

ul li span {
  text-decoration: none;
  display: block;
  font-size: 3em;
  font-weight: 700;
  letter-spacing: 0;
  padding-top: 5px; }

ul li span img {
  max-width: 20px;
  height: auto !important;
  padding-top: 5px; }

ul li:first-child {
  padding-left: 0; }

ul li:last-child {
  border: none;
  padding-right: 0; }

@media screen and (max-width: 750px) {
  body {
    font-size: 50%; }

  .gallery {
    display: flex; } }

/*# sourceMappingURL=portfolio.css.map */