/* end: headers */
/* end: div-center */
/* line 10, ../../../../../.gem/ruby/3.0.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
html, body {
  height: 100%;
}

/* line 12, ../../../../../.gem/ruby/3.0.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
#cocoon {
  clear: both;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -42px;
}
/* line 18, ../../../../../.gem/ruby/3.0.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
#cocoon #cocoon-footer {
  height: 42px;
}

/* line 20, ../../../../../.gem/ruby/3.0.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
#footer {
  clear: both;
  position: relative;
  height: 42px;
}

/* line 6, ../mnieves-sass/main.scss */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: rubiksMedium;
  src: url("../fonts/rubiks/Rubik-Medium.ttf");
}
@font-face {
  font-family: rubiksRegular;
  src: url("../fonts/rubiks/Rubik-Regular.ttf");
}
@font-face {
  font-family: rubiksBoldItalic;
  src: url("../fonts/rubiks/Rubik-BoldItalic.ttf");
}
@font-face {
  font-family: alexBrush;
  src: url("../fonts/alex-brush/AlexBrush-Regular.ttf");
}
@font-face {
  font-family: gorditasB;
  src: url("../fonts/gorditas/Gorditas-Bold.ttf");
}
/* line 38, ../mnieves-sass/main.scss */
html {
  background-size: cover;
  background-repeat: no-repeat;
}

/* line 43, ../mnieves-sass/main.scss */
body {
  margin: 0;
  overflow-x: hidden;
}

/* line 48, ../mnieves-sass/main.scss */
#knob-div {
  border: 2px solid white;
  position: absolute;
  z-index: 5000;
  top: 300px;
  left: calc(100vw/2 - 200px);
  display: flex;
  flex-direction: column;
}

/* line 59, ../mnieves-sass/main.scss */
#cocoon {
  display: flex;
  flex-direction: column;
  /* center divs with specified width and margins; $margin-tb = margin top/bottom */
  width: 77%;
  margin: 50px calc(100vw/2 - 77% / 2);
  width: 100%;
  margin: 0;
  background: #161616;
  background-repeat: no-repeat;
  background-size: cover;
}
/* line 69, ../mnieves-sass/main.scss */
#cocoon #main-header {
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 150px;
  margin: 10px 0;
  background-image: url("../img/mvk-main-header.png");
  background-size: 99% 150px;
  margin-left: calc(100vw/2 - 50%);
  background-repeat: no-repeat;
}
/* line 81, ../mnieves-sass/main.scss */
#cocoon .main-info-section {
  margin-left: -50px;
  margin-top: 100px;
}
/* line 85, ../mnieves-sass/main.scss */
#cocoon .main-info-section p {
  text-align: left;
  width: 50%;
  margin-left: calc(100vw/2 - 25%);
}

/* line 94, ../mnieves-sass/main.scss */
#port-pieces {
  display: flex;
  flex-direction: row;
}

/* line 99, ../mnieves-sass/main.scss */
.language-list {
  width: 100vw;
  height: 1000px;
  background: #333;
  position: absolute;
  top: 0;
  margin-top: 50%;
  display: none;
}

/* line 110, ../mnieves-sass/main.scss */
#siggy {
  margin-left: 500px;
  color: white;
  font-family: alexBrush;
  font-weight: bolder;
  font-size: 3.88em;
}

/* line 121, ../mnieves-sass/main.scss */
#animation-div {
  display: flex;
  width: 100vw;
  min-height: 100vh;
  position: absolute;
  z-index: 2000;
}

/* line 131, ../mnieves-sass/main.scss */
#animation-div section {
  flex-grow: 1;
  background: black;
  z-index: 1000;
  border: 2px solid purple;
}
/* line 138, ../mnieves-sass/main.scss */
#animation-div .left-panel {
  left: 0;
  border-right: 0;
}
/* line 143, ../mnieves-sass/main.scss */
#animation-div .right-panel {
  right: 0;
  border-left: 0;
}

/* line 155, ../mnieves-sass/main.scss */
.pricing-div {
  color: white;
  margin-left: 150px;
}
/* line 159, ../mnieves-sass/main.scss */
.pricing-div header {
  font-weight: bold;
}
/* line 163, ../mnieves-sass/main.scss */
.pricing-div .level-one, .pricing-div .level-two, .pricing-div .level-three {
  border: 2px solid red;
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
  margin: 20px;
  padding: 25px;
  margin-left: calc(100vw/2 - 30%);
}
/* line 172, ../mnieves-sass/main.scss */
.pricing-div .level-one section, .pricing-div .level-two section, .pricing-div .level-three section {
  line-height: 20px;
}
/* line 178, ../mnieves-sass/main.scss */
.pricing-div ul {
  line-height: 20px;
  margin: 10px 0;
  margin-left: 40px;
}

/* line 185, ../mnieves-sass/main.scss */
#footer {
  color: #4383f4;
  background: #462c4f;
  text-align: center;
  padding: 5px 0;
  box-sizing: border-box;
  border-top: 5px inset #333;
  width: 100%;
  font-size: 1.3em;
}

/* end: footer */
/* line 199, ../mnieves-sass/main.scss */
.piece-info {
  color: white;
}
/* line 202, ../mnieves-sass/main.scss */
.piece-info ul {
  list-style: none;
}
/* line 205, ../mnieves-sass/main.scss */
.piece-info ul:nth-of-type(1) {
  margin-left: 30px;
}
/* line 209, ../mnieves-sass/main.scss */
.piece-info ul:nth-of-type(2) {
  margin-right: 30px;
}
/* line 213, ../mnieves-sass/main.scss */
.piece-info ul > header {
  margin: 10px 0;
}
/* line 217, ../mnieves-sass/main.scss */
.piece-info ul li {
  margin-left: 10px;
}
/* line 222, ../mnieves-sass/main.scss */
.piece-info ul::after {
  content: "\a";
  white-space: pre;
}

/* line 228, ../mnieves-sass/main.scss */
textarea {
  margin: 10px;
  box-sizing: border-box;
}

/* line 233, ../mnieves-sass/main.scss */
.contact-content {
  display: none;
  width: 50%;
  height: 200px;
  margin-left: calc(100vw - 110%);
  background-repeat: no-repeat;
  z-index: 10;
  padding: 12px 0 15px 25px;
}

/* line 243, ../mnieves-sass/main.scss */
.portfolio-content {
  width: 88%;
  display: flex;
  justify-content: space-around;
  padding: 10px 100px;
  background: #643e70;
  height: auto;
  margin: 0 calc(100%/2 - 44%);
  border: 5px inset #333;
  box-sizing: border-box;
}
/* line 254, ../mnieves-sass/main.scss */
.portfolio-content div:nth-of-type(3) > header {
  margin: 10px;
}

/* line 259, ../mnieves-sass/main.scss */
.port-piece {
  height: 300px;
  width: 500px;
  margin: 0 20px;
  text-align: center;
  overflow: hidden;
  *zoom: 1;
  /**/
  /* end: & > header */
}
/* line 267, ../mnieves-sass/main.scss */
.port-piece > header {
  text-align: center;
  margin: 10px;
  font-size: 1.5em;
}
/* line 276, ../mnieves-sass/main.scss */
.port-piece img {
  width: 500px;
  height: 300px;
}

/* end: .port-piece */
/* line 282, ../mnieves-sass/main.scss */
.main-content {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: rubiks_Regular;
  overflow: hidden;
  *zoom: 1;
}
/* line 289, ../mnieves-sass/main.scss */
.main-content section {
  display: flex;
  color: white;
  font-weight: bold;
  width: 50%;
  margin: 0 auto;
}
/* line 297, ../mnieves-sass/main.scss */
.main-content header {
  font-family: rubiksBoldItalic;
}
/* line 301, ../mnieves-sass/main.scss */
.main-content ul {
  font-family: rubiksMedium;
  margin: 10px auto;
}
/* line 305, ../mnieves-sass/main.scss */
.main-content ul li {
  margin-left: 25px;
}
/* line 310, ../mnieves-sass/main.scss */
.main-content p {
  font-size: 1.3em;
  color: white;
  width: 70%;
  margin: 20px calc(100% - 80%);
}

/* line 318, ../mnieves-sass/main.scss */
nav {
  background: black;
  border: 2px inset black;
  width: 100%;
  height: 40px;
  color: white;
  /* end: li */
}
/* line 325, ../mnieves-sass/main.scss */
nav ul, nav a {
  text-decoration: none;
  list-style: none;
  background: black;
  color: white;
}
/* line 332, ../mnieves-sass/main.scss */
nav a {
  color: white;
}
/* line 336, ../mnieves-sass/main.scss */
nav li {
  margin: 0 10px;
  padding: 5px;
  box-sizing: border-box;
  margin-bottom: 0;
  float: left;
  font-size: 1.5em;
}
/* line 348, ../mnieves-sass/main.scss */
nav a {
  margin-left: 25px;
}

/* end: nav */
/* line 354, ../mnieves-sass/main.scss */
.main-info-section ul {
  margin-left: 0px;
}
/* line 357, ../mnieves-sass/main.scss */
.main-info-section ul > header {
  margin-bottom: 8px;
}
/* line 362, ../mnieves-sass/main.scss */
.main-info-section p {
  width: 100%;
  text-align: center;
  margin-left: 0;
}

/* MEDIA QUERIES BELOW */
@media only screen and (min-width: 351px) and (max-width: 376px) {
  /* line 372, ../mnieves-sass/main.scss */
  #siggy {
    display: none;
  }

  /* line 376, ../mnieves-sass/main.scss */
  #port-pieces {
    display: flex;
    flex-direction: column;
    max-width: 360px;
    text-align: left !important;
  }
  /* line 382, ../mnieves-sass/main.scss */
  #port-pieces img {
    max-width: 360px !important;
  }

  /* line 387, ../mnieves-sass/main.scss */
  .port-piece {
    padding: 0;
    text-align: left;
    width: 330px;
    margin-left: 0;
  }

  /* line 394, ../mnieves-sass/main.scss */
  #cocoon {
    width: 100vw;
    min-height: 100%;
  }

  /* line 399, ../mnieves-sass/main.scss */
  #main-header {
    background-color: transparent;
    width: 100px;
  }

  /* line 404, ../mnieves-sass/main.scss */
  #main-navigation {
    height: 170px !important;
    position: relative;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: 5px;
  }
  /* line 412, ../mnieves-sass/main.scss */
  #main-navigation ul li {
    margin: 5px;
  }

  /* line 417, ../mnieves-sass/main.scss */
  .main-content {
    margin: 10px 0;
    padding: 0;
    margin-left: 60px;
    overflow: visible;
  }
  /* line 423, ../mnieves-sass/main.scss */
  .main-content p {
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
  }

  /* line 431, ../mnieves-sass/main.scss */
  .main-info-section {
    box-sizing: border-box;
    width: 100%;
    padding-left: 25px;
    margin-top: 0px !important;
  }
  /* line 437, ../mnieves-sass/main.scss */
  .main-info-section section {
    width: 100%;
    margin-left: calc(100vw/2 - 40%);
    display: flex;
    flex-direction: column;
  }
  /* line 444, ../mnieves-sass/main.scss */
  .main-info-section p {
    text-align: center;
    margin: 10px 0 !important;
    width: 100% !important;
  }
  /* line 451, ../mnieves-sass/main.scss */
  .main-info-section ul {
    font-size: 0.77em;
    padding: 0;
  }

  /* line 459, ../mnieves-sass/main.scss */
  .portfolio-content {
    /*        flex-direction: column;*/
    position: relative;
    width: 100%;
    margin: 0;
    height: 100%;
    padding: 10px;
  }
  /* line 467, ../mnieves-sass/main.scss */
  .portfolio-content .port-piece {
    width: 100%;
    margin: 25px 0;
  }
  /* line 471, ../mnieves-sass/main.scss */
  .portfolio-content .port-piece img {
    width: 100%;
  }
  /* line 476, ../mnieves-sass/main.scss */
  .portfolio-content > p {
    width: 80% !important;
  }

  /* line 481, ../mnieves-sass/main.scss */
  .pricing-div {
    color: white;
    margin-left: 0 !important;
    width: 100%;
  }
  /* line 486, ../mnieves-sass/main.scss */
  .pricing-div header {
    font-weight: bold;
  }
  /* line 490, ../mnieves-sass/main.scss */
  .pricing-div .level-one, .pricing-div .level-two, .pricing-div .level-three {
    border: 2px solid red;
    position: relative;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    margin: 25px 0;
  }
  /* line 498, ../mnieves-sass/main.scss */
  .pricing-div .level-one p, .pricing-div .level-two p, .pricing-div .level-three p {
    width: 100% !important;
  }
  /* line 503, ../mnieves-sass/main.scss */
  .pricing-div ul {
    line-height: 20px;
    margin: 10px 0;
    margin-left: 40px;
  }
}
/* end:  @media only screen and (min-device-width : 413px) and (max-device-width : 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) */
@media only screen and (max-width: 350px) {
  /* line 513, ../mnieves-sass/main.scss */
  #siggy {
    display: none;
  }

  /* line 517, ../mnieves-sass/main.scss */
  #port-pieces {
    /*        background: green;*/
    display: flex;
    flex-direction: column;
    max-width: 360px;
    text-align: left !important;
  }
  /* line 524, ../mnieves-sass/main.scss */
  #port-pieces img {
    max-width: 360px !important;
  }

  /* line 529, ../mnieves-sass/main.scss */
  .port-piece {
    padding: 0;
    text-align: left;
    width: 290px;
    margin-left: 0;
  }

  /* line 536, ../mnieves-sass/main.scss */
  #cocoon {
    width: 100vw;
    min-height: 100%;
  }

  /* line 541, ../mnieves-sass/main.scss */
  #main-header {
    background-color: transparent;
    width: 100px;
  }

  /* line 546, ../mnieves-sass/main.scss */
  #main-navigation {
    height: 170px !important;
    position: relative;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: 5px;
  }
  /* line 554, ../mnieves-sass/main.scss */
  #main-navigation ul li {
    margin: 5px;
  }

  /* line 559, ../mnieves-sass/main.scss */
  .main-content {
    margin: 10px 0;
    padding: 0;
    margin-left: 60px;
    overflow: visible;
  }
  /* line 565, ../mnieves-sass/main.scss */
  .main-content p {
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
  }

  /* line 573, ../mnieves-sass/main.scss */
  .main-info-section {
    box-sizing: border-box;
    width: 100%;
    padding-left: 25px;
    margin-top: 0px !important;
  }
  /* line 579, ../mnieves-sass/main.scss */
  .main-info-section section {
    width: 100%;
    margin-left: calc(100vw/2 - 40%);
    display: flex;
    flex-direction: column;
  }
  /* line 586, ../mnieves-sass/main.scss */
  .main-info-section p {
    text-align: center;
    margin: 10px 0 !important;
    width: 100% !important;
  }
  /* line 593, ../mnieves-sass/main.scss */
  .main-info-section ul {
    font-size: 0.77em;
    padding: 0;
  }

  /* line 601, ../mnieves-sass/main.scss */
  .portfolio-content {
    flex-direction: column;
    position: relative;
    width: 100%;
    margin: 0;
    height: 100%;
    padding: 10px;
  }
  /* line 609, ../mnieves-sass/main.scss */
  .portfolio-content > .port-piece {
    width: 100%;
    margin: 10px 0;
  }
  /* line 613, ../mnieves-sass/main.scss */
  .portfolio-content > .port-piece img {
    width: 100%;
  }

  /* line 619, ../mnieves-sass/main.scss */
  .pricing-div {
    color: white;
    margin-left: 0 !important;
    width: 100%;
  }
  /* line 624, ../mnieves-sass/main.scss */
  .pricing-div header {
    font-weight: bold;
  }
  /* line 628, ../mnieves-sass/main.scss */
  .pricing-div .level-one, .pricing-div .level-two, .pricing-div .level-three {
    border: 2px solid red;
    position: relative;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    margin: 25px 0;
  }
  /* line 636, ../mnieves-sass/main.scss */
  .pricing-div .level-one p, .pricing-div .level-two p, .pricing-div .level-three p {
    width: 100% !important;
  }
  /* line 641, ../mnieves-sass/main.scss */
  .pricing-div ul {
    line-height: 20px;
    margin: 10px 0;
    margin-left: 40px;
  }
}
/* end:  @media only screen and (min-device-width : 413px) and (max-device-width : 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) */
/*@media only screen and (max-device-width: 361px){
  #main-navigation{
    height: 250px !important;
  }
}*/