* {
  /* used to clear all default margin and padding and set font for whole page */
  margin: 0;
  padding: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
}

.container {
  width: 100% !important;
  border: 1px solid black;
}

.navbar-fixed {
  position: absolute;
  z-index:999999999;
}

#navbar {
  background-color: rgba(0,0,0,0);
  transition: .7s all;
  -moz-transition: .7s all;
  -webkit-transition: .7s all;
  -o-transition: .7s all;
}

.navop {
  font-weight: 700;
  margin: 25px 20px;
  color: #5f5f5f;
  /*color: white;*/
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
}

.navop:hover {
  background-color: transparent;
}

.navop:hover::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
  bottom: -8px;
  border-bottom: 4px solid #5f5f5f;
}

.side-nav {
  width: 70%;
}

.navside {
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.brand-logo {
  color: #5f5f5f !important;

}

nav i {
  -moz-transition: .7s all;
  -webkit-transition: .7s all;
  -o-transition: .7s all;
}

nav.smaller {
  background-color: #f5f5f5 !important;
  height: 35px !important;
  line-height: 40px !important;
  color: #052d4b !important;
}

nav.smaller .nav-full {
  height: 35px !important;
}

nav.smaller .navop {
  height: 30px !important;
  line-height: 30px !important;
  color: #052d4b !important;
  margin: 6px 20px;
}

nav.smaller i {
  height: 35px !important;
  line-height: 35px !important;
  color: #052d4b !important;
  -moz-transition: .7s all;
  -webkit-transition: .7s all;
  -o-transition: .7s all;
}

nav.smaller .brand-logo {
    font-size: 1.5rem;
    color: #052d4b !important;
}

nav.smaller .navop:hover::after{
  border-bottom: none;
}

.new-bg {
background-color: #ffdd99;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(326,782,474)'%3E%3Cstop offset='0' stop-color='%23ffdd99'/%3E%3Cstop offset='1' stop-color='%233cddce'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='1405' height='1170.8' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.06'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
background-position: center;
}

/*.particle-network-animation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80vh;
}
.particle-network-animation::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.2;
}*/

.intro-content {
  height: 85vh;
  text-align: center;
  padding: 0 0 50px 0;
  margin-top: -65px;

  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 55% 95%, 50% 100%, 45% 95%, 0 95%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 55% 95%, 50% 100%, 45% 95%, 0 95%);
  border: 1px solid rgba(0, 0, 0, 0);
}

.overlay-text {
  position: absolute;
  top: 20%;
  left: 5%;
  width: 90%;
  text-align: center;
  color: black;
}

#main-title {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 20px;
}

#title-sub {
  font-weight: 300;
  font-size: 20px;
  margin-bottom: 50px;
  /*border: 1px solid black;*/
}

#learnmore-btn {
  color: #5f5f5f;
  border: 1px solid #5f5f5f;
  cursor: pointer;
  border-radius: 2px;
}


/* services ----------- */

.services-content {
  height: auto;
  padding-top: 35px;
  padding-bottom: 60px;
  text-align: center;
  color: #5f5f5f;
}

.section-title {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-size: 32px;
  margin-bottom: 40px;
}

.title-underline {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 5px solid red;
}

.info-text {
  width: 85%;
  margin: auto;
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 25px;
}

/* services modal ----------- */
.service-types {
  width: 90%;
}

.service-wrap {
  height: 220px;
  margin: 20px 0;
  padding: 0 !important;
  border-radius: 15px;
  background-color: #f5f5f5;
  box-shadow: 0 5px 15px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  display: inline;
}

.service-wrap:hover {
  box-shadow: 0 15px 20px rgba(0,0,0,0.2), 0 10px 10px rgba(0,0,0,0.2);
}

.service-img {
  height: 220px;
  width: 45%;
  border-radius: 15px 0 0 15px;
}

.service-text {
  text-align: left;
}

.service-heading {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 28px;
  margin-top: 30px;
}

.service-description {
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 20px;
}

#design-icon {
  font-size: 55px;
  margin: auto;
  color: white;
  padding: 25px;
  border: 5px solid white;
  border-radius: 60px;
}

#service-design {
  background-color: #f38a24;
}

#service-develop {
  background-color: #0c919d;
}

#service-ecomm {
  background-color: #ca3700;
}

#service-market {
  background-color: #1bbf9d;
}

.ind-serv-check {
  margin-top: 20px;
}

.icon-check {
  color: red;
  font-weight: bold !important;
  vertical-align: text-bottom;
}

.check-list {
  padding-left: 55px !important;
}

.modal-close-btn {
  margin-bottom: 10px;
}

/* work ----------- */

.work-content {
  height: auto;
  margin: auto;
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
  color: #2f2f2f;
  background-color: #f1f1f1;
  /*border: 1px solid black;*/
}

.thin-title {
  margin-bottom: 20px;
}

#work-info {
  margin-bottom: 20px;
}

hr {
  width: 30%;
  text-align: center;
  margin: auto;
  order: none;
  height: 1px;
  background-color: grey;
  margin-bottom: 20px;
}

.carousel {
  max-height: 70vh;
}

.work-proj-title {
  color: black;
}

.middle-indicator{
  position: absolute;
  top: 50%;
}

.middle-indicator-text{
  font-size: 4.2rem !important;
}

a.middle-indicator-text{
  color: grey !important;
}

.content-indicator{
  width: 64px;
  height: 64px;
  background: none;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

/* about ----------- */

.about-content {
  height: auto;
  margin: auto;
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
  color: white;
  background-color: #585858;
}

#about-firstp {
  margin-bottom: 40px;
}

.about-skills {
  height: auto;
  margin-left: 38px !important;
  padding-top: 40px;
  padding-bottom: 60px;
  text-align: center;
  color: black;
  background-color: white;
}

.indented-check {
  padding-left: 28px;
  font-size: 15px !important;
  padding-top: 8px;
}

h5 {
  text-transform: uppercase;
  margin-top: 30px !important;
}

.last-sec {
background-color: #192319;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(360,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23192319'/%3E%3Cstop offset='1' stop-color='%23207767'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(272,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%235e753f' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%235e753f' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2' gradientTransform='rotate(22,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%235e753f' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%235e753f' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0.2'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
background-position: center;
}

.contact-content {
  height: auto;
  margin: auto;
  padding-top: 80px;
  padding-bottom: 50px;
  text-align: center;
  color: whitesmoke;
}

#contact-title {
  margin-top: 50px;
}

.google-form-wrap {
  margin-top: 20px;
  padding: 0 50px;
}

#my-email {
  color: white;
}

.bot-nav {
  height: auto;
  margin: auto;
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
  color: lightgrey;
}

li {
  line-height: 1;
}

/* cause fuck iphone 5.. >:[ ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-height: 568px)
and (orientation : landscape)
and (-webkit-device-pixel-ratio: 2){
  .overlay-text {
    top: 16%;
  }

  .intro-content {
    height: 95vh;
  }

  #main-title {
    font-size: 24px;
    margin-bottom: 8px;
  }

  #title-sub {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .service-heading {
    font-size: 22px;
    margin-top: 18px !important;
  }

  .service-wrap {
    height: 310px !important;
    width: 45% !important;
  }

  .service-img {
    height: 140px !important;
    width: 100% !important;
  }

  .service-description {
    font-size: 13px;
    line-height: 13px;
    width: 180px !important;
    margin-bottom: 15px;
  }

  .check-list {
    padding-left: 50px !important;
  }

  .about-skills {
    margin-left: 50px !important;
  }
}

@media only screen
and (min-device-width: 320px)
and (max-device-height: 568px)
and (orientation : portrait)
and (-webkit-device-pixel-ratio: 2){
  .brand-logo {
    font-size: 1.8rem !important;
  }

  .overlay-text {
    top: 17%;
  }

  .intro-content {
    height: 95vh;
  }

  #main-title {
    margin-bottom: 15px;
  }

  #title-sub {
    margin-bottom: 30px;
  }

  .service-wrap, .service-img {
    height: 200px;
  }

  #design-icon {
    font-size: 45px;
    padding: 20px;
    border: 5px solid white;
    border-radius: 50px;
  }

  .service-heading {
    font-size: 22px;
    margin-top: 21px;
  }

  .service-description {
    font-size: 17px;
    line-height: 17px;
    margin-bottom: 18px;
  }

  .service-learnmore {
    font-size: 12px !important;
  }

  .check-list {
    padding-left: 16px !important;
  }
}

/* phones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-height: 420px) {
  .intro-content {
    height: 95vh;
  }

  #main-title {
    font-size: 24px;
    margin-bottom: 8px;
  }

  #title-sub {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .services-content {
    padding-top: 25px;
  }

  .service-types {
    width: 85% !important;
  }

  .service-wrap {
    height: 350px;
    width: 45% !important;
    border-radius: 15px;
  }

  .serv-sec {
    margin-left: 9% !important;
  }

  .service-heading {
    margin-top: 26px;
  }

  .service-description {
    font-size: 18px;
    width: 230px;
  }

  .service-img {
    height: 150px;
    width: 100% !important;
    border-radius: 15px 15px 0 0;
  }

  .check-list {
    padding-left: 35px !important;
  }

  .carousel-image {
    width: 60% !important;
    height: auto;
  }

  .indicators{
    visibility: hidden;
  }
}


/* tablets ----------- */
@media only screen
and (min-width : 670px)
and (orientation: landscape) {
  .service-wrap {
    height: 360px !important;
  }

  .check-list {
    padding-left: 30px !important;
  }

  .about-skills {
    margin-left: 100px !important;
  }
}

@media only screen
and (min-width : 1024px)
and (orientation: landscape) {
  #main-title {
    font-size: 40px !important;
  }
}

@media only screen
and (min-width : 670px) {
  .overlay-text {
    top: 22%;
    left: 12.5%;
    width: 75%;
  }

  #main-title {
    font-size: 50px;
    margin-bottom: 20px;
  }

  #title-sub {
    font-size: 30px;
    margin-bottom: 50px;
  }

  .services-content {
    padding-top: 50px;
  }

  .section-title {
    font-size: 42px;
    margin-bottom: 45px;
  }

  .info-text {
    width: 80%;
    font-size: 21px;
  }

  .services-content {
    padding-top: 25px;
  }

  .service-wrap {
    height: 350px;
    width: 45% !important;
    border-radius: 15px;
  }

  .serv-sec {
    margin-left: 9% !important;
  }

  .service-img {
    height: 150px;
    width: 100%;
    border-radius: 15px 15px 0 0;
  }
}

/* desktops ----------- */
@media only screen
and (min-width : 1024px) {
  .intro-content {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 53% 95%, 50% 100%, 47% 95%, 0 95%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 53% 95%, 50% 100%, 47% 95%, 0 95%);
  }

  .brand-logo {
    margin-left: 40px;
  }

  .overlay-text {
    top: 25%;
    left: 25%;
    width: 50%;
  }

  #main-title {
    font-size: 56px;
    margin-bottom: 40px;
  }

  #title-sub {
    font-size: 24px;
    margin-bottom: 60px;
  }

  .services-content {
    padding-top: 60px;
  }

  .info-text {
    width: 60%;
  }

  .service-wrap {
    height: 350px;
    width: 23% !important;
    margin: 1% !important;
    border-radius: 15px;
  }

  .service-heading {
    margin-top: 26px;
  }

  .service-description {
    font-size: 18px;
  }

  .service-img {
    height: 150px;
    width: 100% !important;
    border-radius: 15px 15px 0 0;
  }

  .check-list {
    padding-left: 80px !important;
  }

  .about-skills {
    margin-left: 10% !important;
  }

  .carousel-image {
    width: 78% !important;
    height: auto;
  }
}

@media only screen
and (min-width : 1350px) {
  .service-types {
    width: 75% !important;
    margin: auto;
  }

  .service-wrap {
    height: 350px;
    max-width: 21%;
    margin: 2% !important;
    border-radius: 15px;
  }

  .about-skills {
    margin-left: 18% !important;
  }

  .carousel-image {
    width: 65% !important;
    height: auto;
  }

  .google-form-wrap {
    padding: 0 10%;
  }
}

/* large screens ----------- */
@media only screen
and (min-width : 1600px) {
  .intro-content {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 52% 95%, 50% 100%, 48% 95%, 0 95%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 52% 95%, 50% 100%, 48% 95%, 0 95%);
  }

  .service-types {
    width: 70% !important;
    margin: auto;
  }

  .service-wrap {
    height: 350px;
    max-width: 20%;
    margin: 2% !important;
    border-radius: 15px;
  }

  .about-skills {
    margin-left: 20% !important;
  }

  .carousel-image {
    width: 58% !important;
    height: auto;
  }

  .google-form-wrap {
    padding: 0 10%;
  }
}