/* 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" /> */
/*
	Header Styles
*/
/* line 6, ../sass/_header.scss */
header {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  height: 600px;
}

/* line 14, ../sass/_header.scss */
header:after {
  content: "";
  background: url("../images/downtown.jpg") no-repeat center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

/* line 32, ../sass/_header.scss */
.header-logo {
  display: block;
  width: 300px;
  margin: 0 auto;
}
/* line 38, ../sass/_header.scss */
.header-logo img {
  display: block;
  width: 100%;
}

/* line 45, ../sass/_header.scss */
nav.header-nav {
  position: relative;
  display: block;
  width: 300px;
  background-color: red;
  margin: 4rem auto;
}
/* line 52, ../sass/_header.scss */
nav.header-nav ul {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  background-color: blue;
  left: 5px;
}
/* line 60, ../sass/_header.scss */
nav.header-nav ul li {
  position: relative;
  float: left;
  width: 33.33%;
  padding: 0;
  text-align: center;
}
/* line 67, ../sass/_header.scss */
nav.header-nav ul li a {
  position: relative;
  width: 100%;
  font-size: 1.8rem;
  padding: .5rem 0rem;
  transition: 1s;
}
/* line 74, ../sass/_header.scss */
nav.header-nav ul li a:hover {
  opacity: .7;
  transition: opacity 1s;
}

@media screen and (device-aspect-ratio: 40 / 71) {
  /* line 86, ../sass/_header.scss */
  a.header-logo {
    width: 500px;
  }

  /* line 90, ../sass/_header.scss */
  nav.header-nav {
    width: 500px;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2 / 3) {
  /* line 96, ../sass/_header.scss */
  a.header-logo {
    width: 500px;
  }

  /* line 100, ../sass/_header.scss */
  nav.header-nav {
    width: 500px;
  }
}
/*=====================*/
/*===  MAIN STYLES  ===*/
/*=====================*/
/*
Contents 
1. fonts
2. colors
3. mixins
4. styles
5. layouts
6. media queries
*/
/*===  fonts  ===*/
/*===  colors  ===*/
/*===  mixins  ===*/
/*================*/
/*===  STYLES  ===*/
/*================*/
/* line 50, ../sass/_main.scss */
* {
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 0;
}

/* line 57, ../sass/_main.scss */
html {
  font-size: 14px;
}

/*==  text  ==*/
/* line 62, ../sass/_main.scss */
a {
  text-decoration: none;
}

/* for about and hire-me pages */
/* line 68, ../sass/_main.scss */
.content-style-1 {
  background-color: #fff;
}
/* line 71, ../sass/_main.scss */
.content-style-1 h1 {
  color: #BE2625;
}
/* line 75, ../sass/_main.scss */
.content-style-1 h3 {
  color: #333;
}
/* line 79, ../sass/_main.scss */
.content-style-1 p {
  color: #333;
  border-bottom: 1px solid #eee;
}

/* for work page */
/* line 86, ../sass/_main.scss */
.content-style-2 {
  background-color: #100f1f;
}
/* line 89, ../sass/_main.scss */
.content-style-2 h1 {
  color: #fff;
}
/* line 93, ../sass/_main.scss */
.content-style-2 h3 {
  color: #fff;
}
/* line 97, ../sass/_main.scss */
.content-style-2 p {
  color: #fff;
  border-bottom: 1px solid #333;
}

/* line 103, ../sass/_main.scss */
h1, h2, h3, h4, h5, h6 {
  line-height: 100%;
  font-weight: 600;
}

/* line 108, ../sass/_main.scss */
h1 {
  font-size: 5em;
}

/* line 112, ../sass/_main.scss */
h2 {
  font-size: 2em;
}

/* line 116, ../sass/_main.scss */
h3 {
  font-size: 1.6em;
}

/* line 120, ../sass/_main.scss */
h4 {
  font-size: 1.4em;
}

/* line 124, ../sass/_main.scss */
h5 {
  font-size: 1.3em;
}

/* line 128, ../sass/_main.scss */
h6 {
  font-size: 1.2em;
}

/* line 132, ../sass/_main.scss */
p {
  display: block;
  padding: 1rem 0rem 2rem 0rem;
  font-size: 1.1em;
  line-height: 1.6em;
  font-weight: 200;
  letter-spacing: .04rem;
  word-spacing: .04rem;
}

/*=  lists  =*/
/* line 144, ../sass/_main.scss */
ul {
  list-style: none;
}

/* for work page */
/* line 150, ../sass/_main.scss */
.li-1 {
  font-size: 1em;
  line-height: 1.4em;
}

/* line 155, ../sass/_main.scss */
.li-2 {
  font-size: 2em;
  line-height: 3em;
  cursor: pointer;
}

/* line 161, ../sass/_main.scss */
.color-white {
  color: white;
}

/* line 165, ../sass/_main.scss */
.pTag {
  font-size: 1.1em;
}

/* my profile image */
/* line 170, ../sass/_main.scss */
.circle-img {
  background: url("../images/profile.png");
  background-size: 180% 180%;
  border-radius: 100px 100px 100px 100px;
  background-position: top center;
  overflow: hidden;
}

/* email for hire-me*/
/* line 179, ../sass/_main.scss */
.email {
  color: gray;
  font-size: 1.5rem;
  padding: 30px 0px;
  letter-spacing: -1px;
}

/*=================*/
/*===  LAYOUTS  ===*/
/*=================*/
/* line 192, ../sass/_main.scss */
html {
  position: relative;
  display: block;
}

/* line 198, ../sass/_main.scss */
body {
  display: block;
  position: relative;
  width: 100%;
  min-width: 1000px;
  background-color: black;
}

/* line 206, ../sass/_main.scss */
.lrg-wrap {
  display: block;
  width: 100%;
}

/* line 211, ../sass/_main.scss */
.main-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: 1000px;
}

/* line 219, ../sass/_main.scss */
.content-full {
  width: 95%;
  padding: 2.5%;
}

/* line 224, ../sass/_main.scss */
.one-third {
  width: 32.66667%;
}
/* line 37, ../sass/_main.scss */
.one-third:nth-child(n) {
  margin-right: 1%;
}
/* line 40, ../sass/_main.scss */
.one-third:nth-child(3n) {
  margin-right: 0px;
}

/* line 228, ../sass/_main.scss */
.main-content {
  width: 100%;
  position: relative;
  display: block;
}
/* line 233, ../sass/_main.scss */
.main-content .content {
  width: 80%;
  padding: 5% 10%;
  float: left;
  position: relative;
}
/* line 239, ../sass/_main.scss */
.main-content .content h1 {
  display: block;
}
/* line 243, ../sass/_main.scss */
.main-content .content h3 {
  display: block;
}

/* line 253, ../sass/_main.scss */
.about .profile {
  position: relative;
  float: left;
  width: 15%;
  padding: 0%;
  height: 200px;
}
/* line 260, ../sass/_main.scss */
.about .profile .circle-img {
  position: relative;
  margin: 20px 50px 0px 0px;
  width: 100px;
  height: 100px;
}
/* line 268, ../sass/_main.scss */
.about div:nth-child(2) {
  position: relative;
  float: left;
  width: 85%;
  padding: 0%;
}

/* line 278, ../sass/_main.scss */
.work p {
  border: none;
}
/* line 281, ../sass/_main.scss */
.work .work-item-wrap {
  display: block;
  width: 100%;
  min-height: 600px;
  border-top: 1px solid #666;
  padding: 3% 0%;
}
/* line 289, ../sass/_main.scss */
.work .work-item-wrap .work-item {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  min-height: 500px;
}
/* line 296, ../sass/_main.scss */
.work .work-item-wrap .work-item:hover .work-text {
  visibility: visible;
}
/* line 300, ../sass/_main.scss */
.work .work-item-wrap .work-item:hover img {
  opacity: .1;
  transition: opacity 1s;
}
/* line 305, ../sass/_main.scss */
.work .work-item-wrap .work-item h4 {
  display: block;
  text-align: center;
  margin-bottom: 40px;
}
/* line 311, ../sass/_main.scss */
.work .work-item-wrap .work-item img {
  position: absolute;
  width: 96%;
  border: none;
  margin: 0% 2%;
  padding: 0;
  box-shadow: 0px 0px 20px black;
  transition: 1s;
  z-index: 3;
}
/* line 323, ../sass/_main.scss */
.work .work-item-wrap .work-item .work-text {
  position: relative;
  display: block;
  margin: 0px auto;
  padding: 40px 0px 0px 0px;
  width: 70%;
  z-index: 2;
  height: 470px;
  visibility: hidden;
}
/* line 333, ../sass/_main.scss */
.work .work-item-wrap .work-item .work-text p {
  width: 100%;
  display: block;
  border-bottom: none;
  margin: 0;
  padding: 0;
}
/* line 341, ../sass/_main.scss */
.work .work-item-wrap .work-item .work-text ul {
  float: left;
  padding: 5px 10px;
}
/* line 349, ../sass/_main.scss */
.work .work-additional {
  display: block;
  width: 100%;
  margin: 30px auto 0px auto;
  text-align: center;
  border-top: 1px solid #333;
  padding: 30px 0px 0px 0px;
}
/* line 357, ../sass/_main.scss */
.work .work-additional h2 {
  display: block;
  margin: 20px 0px 0px 0px;
  text-align: center;
}
/* line 363, ../sass/_main.scss */
.work .work-additional ul {
  display: block;
  width: 75%;
  text-align: center;
  margin: 20px auto 0px auto;
  padding: 10px 0px;
}
/* line 372, ../sass/_main.scss */
.work .work-additional ul li a {
  color: white;
  transition: .5s;
}
/* line 376, ../sass/_main.scss */
.work .work-additional ul li a:hover {
  opacity: .7;
  transition: opacity .5s;
}
/* line 385, ../sass/_main.scss */
.work .work-item:last-of-type {
  margin: 5% 0px 0px 0px;
}

/* line 392, ../sass/_main.scss */
.hire-me h1 {
  text-align: center;
}
/* line 396, ../sass/_main.scss */
.hire-me h3 {
  text-align: center;
}
/* line 400, ../sass/_main.scss */
.hire-me p {
  text-align: center;
}
/* line 404, ../sass/_main.scss */
.hire-me .email {
  position: relative;
  display: block;
  text-align: center;
  font-size: 1.8rem;
}

/*========================*/
/*====  MEDIA QUERIES ====*/
/*========================*/
/*	Ipad 1, 2, 3, Android Devices, Samsung Galaxy Tablet 	*/
@media only screen and (device-aspect-ratio: 4 / 3), (device-aspect-ratio: 17 / 10) {
  /* line 421, ../sass/_main.scss */
  html {
    font-size: 16px;
  }

  /* line 425, ../sass/_main.scss */
  .main-content {
    width: 100%;
    position: relative;
    display: block;
  }
  /* line 430, ../sass/_main.scss */
  .main-content .content {
    width: 90%;
    padding: 5% 5%;
    float: left;
    position: relative;
  }
  /* line 436, ../sass/_main.scss */
  .main-content .content h1 {
    display: block;
  }
  /* line 440, ../sass/_main.scss */
  .main-content .content h3 {
    display: block;
  }

  /* line 446, ../sass/_main.scss */
  .work-additional {
    width: 95%;
    margin: 80px auto 0px auto;
    padding: 0;
  }
  /* line 452, ../sass/_main.scss */
  .work-additional h2 {
    display: block;
    margin-bottom: 0px;
    text-align: center;
  }
  /* line 458, ../sass/_main.scss */
  .work-additional ul {
    display: block;
    width: 100%;
    text-align: center;
    margin: 40px auto;
    padding: 0;
  }
  /* line 465, ../sass/_main.scss */
  .work-additional ul li {
    width: block;
  }
  /* line 468, ../sass/_main.scss */
  .work-additional ul li a {
    transition: .5s;
  }
  /* line 471, ../sass/_main.scss */
  .work-additional ul li a:hover {
    opacity: .7;
    transition: opacity .5s;
  }

  /* line 482, ../sass/_main.scss */
  .about .profile {
    float: left;
    width: 100%;
    height: 100px;
  }
  /* line 487, ../sass/_main.scss */
  .about .profile .circle-img {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 100px;
  }
  /* line 495, ../sass/_main.scss */
  .about div:nth-child(2) {
    width: 100%;
  }

  /* line 501, ../sass/_main.scss */
  .work .work-item-wrap {
    display: block;
    width: 100%;
    min-height: 600px;
    border-top: 1px solid #666;
    padding: 3% 0%;
  }
  /* line 507, ../sass/_main.scss */
  .work .work-item-wrap .work-item {
    position: relative;
    margin: 0% 0%;
    width: 100%;
    display: inline-block;
    padding: 5% 0%;
    overflow: hidden;
  }
  /* line 515, ../sass/_main.scss */
  .work .work-item-wrap .work-item:hover img {
    opacity: 1;
    transition: opacity 1s;
  }
  /* line 520, ../sass/_main.scss */
  .work .work-item-wrap .work-item h4 {
    margin: 20px 0;
  }
  /* line 524, ../sass/_main.scss */
  .work .work-item-wrap .work-item img {
    position: relative;
    display: block;
    width: 95%;
    margin: 0% 2.5%;
  }
  /* line 531, ../sass/_main.scss */
  .work .work-item-wrap .work-item .work-text {
    position: relative;
    display: block;
    margin: 0px auto;
    padding: 40px 0px 0px 0px;
    width: 100%;
    visibility: visible;
  }
  /* line 540, ../sass/_main.scss */
  .work .work-item-wrap .work-item .work-text ul {
    float: left;
    padding: 5px 10px;
  }

  /* line 551, ../sass/_main.scss */
  .hire-me h1 {
    text-align: center;
  }
  /* line 555, ../sass/_main.scss */
  .hire-me h3 {
    text-align: center;
  }
  /* line 559, ../sass/_main.scss */
  .hire-me p {
    text-align: center;
  }
  /* line 563, ../sass/_main.scss */
  .hire-me .email {
    position: relative;
    display: block;
    text-align: center;
  }
}
/*	Iphone 5, Android Devices	*/
@media only screen and (device-aspect-ratio: 40 / 71), (device-aspect-ratio: 3 / 2) {
  /* line 574, ../sass/_main.scss */
  html {
    font-size: 28px;
  }

  /* line 578, ../sass/_main.scss */
  .main-content {
    width: 100%;
    position: relative;
    display: block;
  }
  /* line 583, ../sass/_main.scss */
  .main-content .content {
    width: 90%;
    padding: 5% 5%;
    float: left;
    position: relative;
    font-size: 1.5rem;
    line-height: 1.8rem;
  }
  /* line 591, ../sass/_main.scss */
  .main-content .content h1 {
    display: block;
  }
  /* line 595, ../sass/_main.scss */
  .main-content .content h3 {
    display: block;
  }

  /* line 601, ../sass/_main.scss */
  .work-additional {
    display: block;
    width: 95%;
    margin: 20px auto 0px auto;
    padding: 0;
  }
  /* line 607, ../sass/_main.scss */
  .work-additional h2 {
    display: block;
    margin: 0px 0px 0px 0px;
    text-align: center;
  }
  /* line 613, ../sass/_main.scss */
  .work-additional ul {
    display: block;
    width: 100%;
    text-align: center;
    margin: 40px auto;
    padding: 0;
  }
  /* line 620, ../sass/_main.scss */
  .work-additional ul li {
    display: block;
  }
  /* line 623, ../sass/_main.scss */
  .work-additional ul li a {
    transition: .5s;
  }
  /* line 626, ../sass/_main.scss */
  .work-additional ul li a:hover {
    opacity: .7;
    transition: opacity .5s;
  }

  /* line 637, ../sass/_main.scss */
  .about .profile {
    float: left;
    width: 100%;
    height: 100px;
  }
  /* line 642, ../sass/_main.scss */
  .about .profile .circle-img {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 100px;
  }
  /* line 650, ../sass/_main.scss */
  .about div:nth-child(2) {
    width: 100%;
  }

  /* line 658, ../sass/_main.scss */
  .work .work-item-wrap {
    display: block;
    width: 100%;
    min-height: 600px;
    border-top: 1px solid #666;
    padding: 3% 0%;
  }
  /* line 665, ../sass/_main.scss */
  .work .work-item-wrap .work-item {
    position: relative;
    margin: 0% 0%;
    width: 100%;
    display: inline-block;
    padding: 5% 0%;
  }
  /* line 672, ../sass/_main.scss */
  .work .work-item-wrap .work-item:hover img {
    opacity: 1;
    transition: opacity 1s;
  }
  /* line 677, ../sass/_main.scss */
  .work .work-item-wrap .work-item h4 {
    margin: 20px 0;
  }
  /* line 681, ../sass/_main.scss */
  .work .work-item-wrap .work-item img {
    position: relative;
    display: block;
    width: 95%;
    margin: 0% 2.5%;
  }
  /* line 688, ../sass/_main.scss */
  .work .work-item-wrap .work-item .work-text {
    position: relative;
    display: block;
    margin: 0px auto;
    padding: 40px 0px 0px 0px;
    width: 100%;
    visibility: visible;
  }
  /* line 696, ../sass/_main.scss */
  .work .work-item-wrap .work-item .work-text ul {
    float: left;
    padding: 5px 10px;
  }

  /* line 707, ../sass/_main.scss */
  .hire-me h1 {
    text-align: center;
  }
  /* line 711, ../sass/_main.scss */
  .hire-me h3 {
    text-align: center;
  }
  /* line 715, ../sass/_main.scss */
  .hire-me p {
    text-align: center;
  }
  /* line 719, ../sass/_main.scss */
  .hire-me .email {
    position: relative;
    display: block;
    text-align: center;
    font-size: 1;
  }
}
/*	Smartphones 4/4s	*/
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2 / 3) {
  /* line 731, ../sass/_main.scss */
  html {
    font-size: 28px;
  }

  /* line 735, ../sass/_main.scss */
  .main-content {
    width: 100%;
    position: relative;
    display: block;
  }
  /* line 740, ../sass/_main.scss */
  .main-content .content {
    width: 90%;
    padding: 5% 5%;
    float: left;
    position: relative;
    font-size: 1.5rem;
    line-height: 1.8rem;
  }
  /* line 748, ../sass/_main.scss */
  .main-content .content h1 {
    display: block;
  }
  /* line 752, ../sass/_main.scss */
  .main-content .content h3 {
    display: block;
  }

  /* line 758, ../sass/_main.scss */
  .work-additional {
    display: block;
    width: 95%;
    margin: 20px auto 0px auto;
    padding: 0;
  }
  /* line 764, ../sass/_main.scss */
  .work-additional h2 {
    display: block;
    margin: 0px 0px 0px 0px;
    text-align: center;
  }
  /* line 770, ../sass/_main.scss */
  .work-additional ul {
    display: block;
    width: 100%;
    text-align: center;
    margin: 40px auto;
    padding: 0;
  }
  /* line 777, ../sass/_main.scss */
  .work-additional ul li {
    display: block;
  }
  /* line 780, ../sass/_main.scss */
  .work-additional ul li a {
    transition: .5s;
  }
  /* line 783, ../sass/_main.scss */
  .work-additional ul li a:hover {
    opacity: .7;
    transition: opacity .5s;
  }

  /* line 794, ../sass/_main.scss */
  .about .profile {
    float: left;
    width: 100%;
    height: 100px;
  }
  /* line 799, ../sass/_main.scss */
  .about .profile .circle-img {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 100px;
  }
  /* line 807, ../sass/_main.scss */
  .about div:nth-child(2) {
    width: 100%;
  }

  /* line 815, ../sass/_main.scss */
  .work .work-item-wrap {
    display: block;
    width: 100%;
    min-height: 600px;
    border-top: 1px solid #666;
    padding: 3% 0%;
  }
  /* line 821, ../sass/_main.scss */
  .work .work-item-wrap .work-item {
    position: relative;
    margin: 0% 0%;
    width: 100%;
    display: inline-block;
    padding: 5% 0%;
  }
  /* line 828, ../sass/_main.scss */
  .work .work-item-wrap .work-item:hover img {
    opacity: 1;
    transition: opacity 1s;
  }
  /* line 833, ../sass/_main.scss */
  .work .work-item-wrap .work-item h4 {
    margin: 20px 0;
  }
  /* line 837, ../sass/_main.scss */
  .work .work-item-wrap .work-item img {
    position: relative;
    display: block;
    width: 95%;
    margin: 0% 2.5%;
  }
  /* line 844, ../sass/_main.scss */
  .work .work-item-wrap .work-item .work-text {
    position: relative;
    display: block;
    margin: 0px auto;
    padding: 40px 0px 0px 0px;
    width: 100%;
    visibility: visible;
  }
  /* line 852, ../sass/_main.scss */
  .work .work-item-wrap .work-item .work-text ul {
    float: left;
    padding: 5px 10px;
  }

  /* line 863, ../sass/_main.scss */
  .hire-me h1 {
    text-align: center;
  }
  /* line 867, ../sass/_main.scss */
  .hire-me h3 {
    text-align: center;
  }
  /* line 871, ../sass/_main.scss */
  .hire-me p {
    text-align: center;
  }
  /* line 875, ../sass/_main.scss */
  .hire-me .email {
    position: relative;
    display: block;
    text-align: center;
    font-size: 1;
  }
}