/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 5, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* establishing vars */
/* ============================================================================ */
/* ====================================index-Header============================ */
/* ============================================================================ */
/* line 16, ../sass/screen.scss */
.header {
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 40px;
  width: 100%;
  transition: .2s;
}
/* line 23, ../sass/screen.scss */
.header h1 {
  margin: 0 3%;
}
/* line 26, ../sass/screen.scss */
.header img {
  height: 40px;
  animation: mybg 20s infinite linear;
  animation-fill-mode: both;
}
/* line 32, ../sass/screen.scss */
.header div {
  z-index: 2;
  height: 40px;
  width: 80%;
  background: white;
}

/* ============================================================================ */
/* ================================index-Nav=================================== */
/* ============================================================================ */
/* line 45, ../sass/screen.scss */
.background-box {
  animation: mybg 20s infinite linear;
  z-index: 2;
  transition: .3s;
  height: 30px;
  width: 100%;
  position: fixed;
}

/* line 54, ../sass/screen.scss */
.nav-menu {
  height: 30px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/* line 60, ../sass/screen.scss */
.nav-menu li, .nav-menu a {
  color: white;
  font-family: "Muli";
  font-size: 15px;
}
/* line 66, ../sass/screen.scss */
.nav-menu a {
  text-decoration: none;
}

/* line 71, ../sass/screen.scss */
.button {
  padding: 0px 10px;
}

/* line 75, ../sass/screen.scss */
.home .home-btn, .portfolio .portfolio-btn, .contact .contact-btn {
  border-bottom: thin solid white;
}

/* line 79, ../sass/screen.scss */
.imagewrapper {
  display: none;
  position: relative;
  top: 15px;
  margin-left: 3%;
  height: 80px;
  width: 100%;
}
/* line 86, ../sass/screen.scss */
.imagewrapper img {
  height: 90px;
  width: auto;
}

/* line 92, ../sass/screen.scss */
.nav2 {
  display: none;
}

/* ============================================================================ */
/* =====================================BODY=================================== */
/* ============================================================================ */
/* line 100, ../sass/screen.scss */
body {
  font-family: "Muli";
}

/* line 104, ../sass/screen.scss */
.page {
  max-width: 740px;
  position: relative;
  padding-top: 50px;
  clear: both;
  font-family: "Muli";
  margin: 0px 15px;
}
/* line 112, ../sass/screen.scss */
.page h1, .page h2 {
  font-family: "Montserrat";
  font-size: 18px;
}
/* line 117, ../sass/screen.scss */
.page h1 {
  margin: 0 0 10px 0;
  color: #ff0049;
}
/* line 122, ../sass/screen.scss */
.page h2 {
  color: #ff0049;
}
/* line 126, ../sass/screen.scss */
.page p {
  margin: 14px 0;
  color: #a5a5a5;
}
/* line 131, ../sass/screen.scss */
.page .hero-text {
  font-size: 30px;
}
/* line 134, ../sass/screen.scss */
.page .hero-subtext {
  margin-bottom: 40px;
}

/* line 141, ../sass/screen.scss */
.consultation h2 {
  color: #00f6ff;
}

/* line 144, ../sass/screen.scss */
.development h2 {
  color: #00ff65;
}

/* line 147, ../sass/screen.scss */
.support h2 {
  color: #009dff;
}

/* ============================================================================ */
/* ==============================PORTFOLIO GALLERY============================= */
/* ============================================================================ */
/* line 155, ../sass/screen.scss */
.gallery-header {
  text-align: center;
}

/* line 159, ../sass/screen.scss */
.gallery {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 95%;
}
/* line 164, ../sass/screen.scss */
.gallery a {
  text-decoration: none;
}

/* line 167, ../sass/screen.scss */
.gal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
  padding-bottom: 30px;
}
/* line 175, ../sass/screen.scss */
.gal-box img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
/* line 179, ../sass/screen.scss */
.gal-box:hover {
  cursor: pointer;
}
/* line 182, ../sass/screen.scss */
.gal-box div {
  display: none;
}

/* line 188, ../sass/screen.scss */
.popup {
  background: white;
  border: solid thin #ededed;
  width: 100%;
}
/* line 195, ../sass/screen.scss */
.popup button {
  float: right;
  width: 30px;
  height: 30px;
  margin: 10px;
  border: none;
}

/* line 204, ../sass/screen.scss */
.popup-content {
  padding: 5px;
}
/* line 207, ../sass/screen.scss */
.popup-content h1, .popup-content h2, .popup-content h3, .popup-content div {
  margin: 20px 20px;
  display: block;
}
/* line 212, ../sass/screen.scss */
.popup-content h1 img {
  clear: both;
  width: 100%;
  height: auto;
  margin-top: 10px;
}
/* line 218, ../sass/screen.scss */
.popup-content div {
  font-family: "Muli";
}
/* line 220, ../sass/screen.scss */
.popup-content div p {
  margin: 16px 0;
}
/* line 223, ../sass/screen.scss */
.popup-content div ul {
  margin: 16px 0;
  list-style: circle inside;
  color: #ff0049;
}
/* line 228, ../sass/screen.scss */
.popup-content div li {
  margin: 8px 0;
}

/* ============================================================================ */
/* ====================================FORMS=================================== */
/* ============================================================================ */
/* line 239, ../sass/screen.scss */
.error-panel {
  width: 100%;
  padding: 5px 0;
}
/* line 242, ../sass/screen.scss */
.error-panel li {
  list-style: disc;
  margin: 0 15px;
  padding: 2px 0;
  color: #ff0049;
}

/* line 250, ../sass/screen.scss */
form {
  display: block;
  width: 100%;
  max-width: 740px;
  margin: 20px 0;
}
/* line 256, ../sass/screen.scss */
form * {
  display: block;
  width: 100%;
}
/* line 261, ../sass/screen.scss */
form label {
  font-family: "Muli";
  font-size: 13px;
  margin-top: 8px;
}
/* line 267, ../sass/screen.scss */
form input, form textarea {
  box-sizing: border-box;
  background-color: #ececec;
  border: #ececec 1px solid;
  border-radius: 3px;
  padding: 4px;
  margin-top: 4px;
}
/* line 276, ../sass/screen.scss */
form input, form button {
  height: 20px;
}
/* line 280, ../sass/screen.scss */
form textarea {
  height: 80px;
}
/* line 284, ../sass/screen.scss */
form button {
  line-height: 0px;
  background-color: #00aeff;
  border: #00aeff 1px solid;
  border-radius: 3px;
  margin-top: 4px;
  font-family: "Muli";
  color: white;
}
/* line 297, ../sass/screen.scss */
form .h-pot {
  display: none;
}

/* line 303, ../sass/screen.scss */
#req-field {
  color: #ff0049;
}

/* ============================================================================ */
/* ============================index-ANIMATION================================= */
/* ============================================================================ */
@keyframes mybg {
  0% {
    background-position: 0px 0px;
    background-color: #ffff00;
  }
  16.666% {
    background-color: #ffb440;
  }
  33.333% {
    background-color: #ff0000;
  }
  50% {
    background-color: #ff00ff;
  }
  66.666% {
    background-color: #00ffff;
  }
  83.333% {
    background-color: #00ff00;
  }
  100% {
    background-position: 192px 240px;
    background-color: #ffff00;
  }
}
/* ============================================================================ */
/* ===============================phone-screen================================= */
/* ============================================================================ */
@media screen and (min-width: 300px) {
  /* line 328, ../sass/screen.scss */
  .gal-box .label-bar {
    height: 20%;
  }
}
/* ============================================================================ */
/* ============================index-tablet screen============================= */
/* ============================================================================ */
@media screen and (min-width: 450px) {
  /*...............hiding content.............*/
  /* line 342, ../sass/screen.scss */
  .header, .background-box {
    transform: translateY(-40px);
  }

  /* line 345, ../sass/screen.scss */
  .header {
    transition: 0s;
  }

  /* line 348, ../sass/screen.scss */
  .background-box {
    transition: .5s;
  }

  /* line 352, ../sass/screen.scss */
  .l1, .l2 {
    display: none;
  }

  /*.....................Nav..................*/
  /* line 358, ../sass/screen.scss */
  .background-box {
    height: 130px;
    display: inline;
  }

  /* line 363, ../sass/screen.scss */
  .imagewrapper {
    display: inline;
  }

  /* line 367, ../sass/screen.scss */
  .nav-menu {
    width: 66%;
    height: 130px;
    display: inline-flex;
    float: right;
    margin-right: 5px;
  }
  /* line 373, ../sass/screen.scss */
  .nav-menu .button {
    padding: 10px 5px;
  }

  /*................page content...............*/
  /* line 379, ../sass/screen.scss */
  .page {
    width: 90%;
    margin: auto;
    padding-top: 100px;
  }
  /* line 384, ../sass/screen.scss */
  .page h1, .page h2 {
    font-size: 25px;
    margin: 15px 0;
  }
  /* line 389, ../sass/screen.scss */
  .page .hero-text {
    font-size: 50px;
  }

  /*....................Gallery..................*/
  /* line 398, ../sass/screen.scss */
  .gallery {
    flex-flow: row wrap;
  }

  /* line 402, ../sass/screen.scss */
  .gal-box {
    width: 95%;
    height: auto;
    margin-right: 5%;
  }
  /* line 406, ../sass/screen.scss */
  .gal-box img {
    height: auto;
  }

  /* line 410, ../sass/screen.scss */
  h3 {
    font-size: 16px;
  }

  /* line 414, ../sass/screen.scss */
  .popup-content {
    padding: 8%;
    font-size: 18px;
  }
  /* line 417, ../sass/screen.scss */
  .popup-content div, .popup-content h3 {
    margin: 0;
  }
  /* line 421, ../sass/screen.scss */
  .popup-content h1 img {
    margin-top: 20px;
  }
  /* line 425, ../sass/screen.scss */
  .popup-content h2 {
    font-size: 25px;
  }
  /* line 429, ../sass/screen.scss */
  .popup-content div {
    margin-top: 30px;
  }
  /* line 431, ../sass/screen.scss */
  .popup-content div p {
    margin: 20px 0;
  }
  /* line 435, ../sass/screen.scss */
  .popup-content div ul {
    margin: 20px 0;
  }
  /* line 439, ../sass/screen.scss */
  .popup-content div li {
    margin: 10px 0;
  }

  /*..................Forms................ */
  /* line 448, ../sass/screen.scss */
  form {
    margin: 30px 0;
  }
  /* line 450, ../sass/screen.scss */
  form input, form textarea, form button {
    padding: 5px 10px;
    margin-top: 7px;
  }
  /* line 454, ../sass/screen.scss */
  form input, form button {
    height: 30px;
  }
  /* line 457, ../sass/screen.scss */
  form textarea {
    height: 100px;
  }
  /* line 460, ../sass/screen.scss */
  form label {
    margin-top: 14px;
  }
}
/*=================================-=======================secondary tablet bp*/
@media screen and (min-width: 600px) {
  /* line 469, ../sass/screen.scss */
  .gal-box {
    width: 40%;
    height: auto;
    margin-right: 10%;
  }
  /* line 473, ../sass/screen.scss */
  .gal-box img {
    height: auto;
  }
  /* line 475, ../sass/screen.scss */
  .gal-box .label-bar {
    height: 30%;
  }
  /* line 478, ../sass/screen.scss */
  .gal-box h2 {
    font-size: 20px;
  }
}
/* ============================================================================ */
/* ============================index-Desktop Screen============================ */
/* ============================================================================ */
@media screen and (min-width: 980px) {
  /*...............hiding content................*/
  /* line 493, ../sass/screen.scss */
  .header {
    transform: translateY(-40px);
    transition: 0s;
  }

  /* line 498, ../sass/screen.scss */
  .divider, .button {
    display: none;
  }

  /*.................logo display.............*/
  /* line 504, ../sass/screen.scss */
  .background-box {
    clear: both;
    width: 15%;
    height: 100%;
    min-width: 200px;
    max-width: 400px;
    margin-left: 7%;
    transition: .5s;
    background-image: url("../img/bgimg.png");
    background-size: 64px 80px;
  }

  /* line 514, ../sass/screen.scss */
  .imagewrapper {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  /* line 522, ../sass/screen.scss */
  .imagewrapper img {
    height: auto;
    width: 66%;
  }

  /*.................Desktop nav...............*/
  /* line 531, ../sass/screen.scss */
  .nav2 {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    margin-right: 40px;
  }
  /* line 537, ../sass/screen.scss */
  .nav2 .nav2-menu {
    font-family: "Muli";
    font-size: 14px;
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
  }
  /* line 543, ../sass/screen.scss */
  .nav2 .nav2-menu li {
    display: inline;
    margin: 0 0 0 4%;
  }
  /* line 550, ../sass/screen.scss */
  .nav2 a {
    text-decoration: none;
    color: #bfbfbf;
  }

  /* line 556, ../sass/screen.scss */
  .home .home-btn2, .portfolio .portfolio-btn2, .contact .contact-btn2 {
    color: #3f3f3f;
  }

  /*.......................page...................*/
  /* line 561, ../sass/screen.scss */
  .page {
    margin-left: 30%;
    height: 100%;
    width: 65%;
    max-width: 740px;
    padding-top: 20px;
    top: -25px;
  }
  /* line 568, ../sass/screen.scss */
  .page h1 {
    font-size: 60px;
  }
  /* line 571, ../sass/screen.scss */
  .page h2 {
    font-size: 33px;
  }
  /* line 574, ../sass/screen.scss */
  .page h1 {
    margin: 30px 0;
    font-weight: bold;
  }
  /* line 578, ../sass/screen.scss */
  .page h2 {
    margin: 30px 0;
  }
  /* line 581, ../sass/screen.scss */
  .page p, .page h3 {
    font-size: 20px;
  }

  /*.......................home...................*/
  /* line 589, ../sass/screen.scss */
  .page .hero-text {
    font-size: 100px;
    margin-bottom: 50px;
  }
  /* line 594, ../sass/screen.scss */
  .page .hero-subtext {
    font-size: 30px;
    margin-bottom: 50px;
  }

  /* line 601, ../sass/screen.scss */
  .services {
    width: 100%;
    display: block;
    position: relative;
  }
  /* line 608, ../sass/screen.scss */
  .services .consultation, .services .development, .services .support {
    display: inline-block;
    width: 30%;
    vertical-align: text-top;
    box-sizing: border-box;
  }
  /* line 613, ../sass/screen.scss */
  .services .consultation p, .services .development p, .services .support p {
    line-height: 1.5;
  }
  /* line 619, ../sass/screen.scss */
  .services .development:before {
    content: '';
    position: absolute;
    background: #eeeeee;
    width: 2px;
    top: 50px;
    bottom: 50px;
    left: 32%;
  }
  /* line 629, ../sass/screen.scss */
  .services .development:after {
    content: '';
    position: absolute;
    background: #eeeeee;
    width: 2px;
    top: 50px;
    bottom: 50px;
    left: 67%;
  }
  /* line 639, ../sass/screen.scss */
  .services h2 {
    font-size: 26px;
    font-weight: bold;
  }
  /* line 644, ../sass/screen.scss */
  .services .consultation h2 {
    color: #00f6ff;
  }
  /* line 646, ../sass/screen.scss */
  .services .development {
    margin: 0 5%;
  }
  /* line 647, ../sass/screen.scss */
  .services .development h2 {
    color: #00ff65;
  }
  /* line 651, ../sass/screen.scss */
  .services .support h2 {
    color: #009dff;
  }

  /*.............portfolio...........*/
  /* line 656, ../sass/screen.scss */
  .gal-box {
    margin-bottom: 40px;
  }
  /* line 658, ../sass/screen.scss */
  .gal-box h2 {
    font-size: 25px;
    bottom: 2%;
  }
  /* line 662, ../sass/screen.scss */
  .gal-box .label-bar {
    height: 30%;
  }

  /* line 667, ../sass/screen.scss */
  .gallery-header {
    text-align: initial;
    margin-left: 2%;
  }

  /* line 672, ../sass/screen.scss */
  .popup-content {
    padding: 30px 50px;
    font-size: 20px;
  }
  /* line 676, ../sass/screen.scss */
  .popup-content h2 {
    font-size: 33px;
  }
  /* line 680, ../sass/screen.scss */
  .popup-content div {
    margin-top: 40px;
  }
  /* line 682, ../sass/screen.scss */
  .popup-content div p {
    margin: 30px 0;
  }
  /* line 685, ../sass/screen.scss */
  .popup-content div ul {
    margin: 30px 0;
  }
  /* line 688, ../sass/screen.scss */
  .popup-content div li {
    margin: 15px 0;
  }

  /*.............forms...........*/
  /* line 694, ../sass/screen.scss */
  form {
    margin: 30px 0;
  }
  /* line 696, ../sass/screen.scss */
  form input, form textarea, form button {
    margin-top: 10px;
    padding: 5px 10px;
    height: 30px;
  }
  /* line 701, ../sass/screen.scss */
  form input, form button {
    height: 30px;
  }
  /* line 704, ../sass/screen.scss */
  form textarea {
    height: 120px;
  }
  /* line 707, ../sass/screen.scss */
  form label {
    margin-top: 20px;
  }
}
/*===============javascript classes===============*/
/* line 721, ../sass/screen.scss */
.hide {
  display: none;
}

/* line 724, ../sass/screen.scss */
.translate {
  transform: translateY(-40px);
}