* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  margin: 0px;
  padding: 0px;
  touch-action: manipulation;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}


body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  font-weight: 400;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; overflow-x: hidden;
  color: #333;
 }

p {
  line-height: 30px;
  color: #333;
}

h1 {

}

h2 {
  font-size: 36px;
  line-height: 1.5;
}

h3 {
  font-size: 24px;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: #303030;
}
  a:hover {
    color: #4400FF;
  }

img {
/*  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.08);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.08);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.08); */
}

/************************ Helpers ********************************/

a.topside {
  color: #4400FF;
  height: 48px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.light-font {
  font-weight: 300;
}

.caseImg {
  width: 700px;
}

.full-width {
width: 100%;
}

.text-right {
  display: flex;
  justify-content: flex-end;
}

.text-left {
  display: flex;
  justify-content: flex-start;
}

.pointer {
  cursor: pointer;
}

.zoom-in {cursor: zoom-in;}

.mb-m {
  margin-bottom: 32px;
}

.mt-s {
  margin-top: 8px;
}

.mt-l {
  margin-top: 32px;
}
.pb8 {
  padding-bottom: 8px;
}

.pb96 {
  padding-bottom: 96px;
}

.pb16 {
  padding-bottom: 16px;
}

.letter-spacing:hover {
  letter-spacing: 1px;
  font-weight: 600;
}

.pm {
  padding: 16px;
}


.pb64 {
  padding-bottom: 64px;
}

.pb48 {
  padding-bottom: 48px;
}

 /*********************** Menu bar css ***************************/

.menu-container {
  color: #303030;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  font-size: 18px;
}

.menu {
  width: 1024px;
  display: flex;
  justify-content: space-between;
}
.links-right {
  display: flex;
  justify-content: flex-end;
  font-weight: 400;
}

.contact, .process, .about {
  margin-left: 20px;
}

#contact {
  margin-bottom: 72px;
}

.name {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 18px;
}


 /*********************** Header css ***************************/

.header-container {
  color: #303030;
  background: rgb(157,52,227);
  background: -moz-linear-gradient(90deg, rgba(157,52,227,0.3) 0%, rgba(98,118,213,0.3) 50%, rgba(69,180,252,0.3) 100%);
  background: -webkit-linear-gradient(90deg, rgba(157,52,227,0.3) 0%, rgba(98,118,213,0.3) 50%, rgba(69,180,252,0.3) 100%);
  background: linear-gradient(90deg, rgba(157,52,227,0.3) 0%, rgba(98,118,213,0.3) 50%, rgba(69,180,252,0.3) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9d34e3",endColorstr="#45b4fc",GradientType=1);
  display: flex;
  justify-content: center;
}

.header {
  width: 1024px;
  height: 600px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.contact-header {
  height: 1024px;
}

.intro-text {
  display: flex;
  justify-content: center;
  font-size: 64px;
}
  .intro-text p {
    font-weight: 400;
    line-height: 1.5;
  }

.color-change {

  font-weight: 700;

  -webkit-animation: color-change 7s infinite;
  -moz-animation: color-change 7s infinite;
  -o-animation: color-change 7s infinite;
  -ms-animation: color-change 7s infinite;
  animation: color-change 7s infinite;
    }

    @-webkit-keyframes color-change {
        0% { color: #4400FF; }
        50% { color: #4A4A4A; }
        100% { color: #4400FF; }
    }
    @-moz-keyframes color-change {
        0% { color: #4400FF; }
        50% { color: #4A4A4A; }
        100% { color: #4400FF; }
    }
    @-ms-keyframes color-change {
        0% { color: #4400FF; }
        50% { color: #4A4A4A; }
        100% { color: #4400FF; }
    }
    @-o-keyframes color-change {
        0% { color: #4400FF; }
        50% { color: #4A4A4A; }
        100% { color: #4400FF; }
    }
    @keyframes color-change {
        0% { color: #4400FF; }
        50% { color: #4A4A4A; }
        100% { color: #4400FF; }
    }
}

/******************* subheaders css ***********************/

.subject_container {
  display: flex;
  justify-content: center;
  margin: 48px 0px;
  flex-wrap: wrap;
}

.subject-content {
  width: 1024px;
  display: flex;
  justify-content: flex-start;
  margin: 96px 0px;
}

.subject-content h2, .subject-content-cases h2 {
  border-bottom: 3px solid #303030;
}


/*********************** Work grid css **********************/

.full-container {
  display: flex;
  justify-content: center;
  padding-bottom: 96px;
}

.full {
  width: 1024px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.full-item {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
}

.full-item h3 {
  margin-right: 8px;
  margin-bottom: 16px;
}

/****************************** Subpages content ***************/

.cases-container {
  display: flex;
  justify-content: center;
}

.subject_container {
  display: flex;
  justify-content: center;
}

.cases {
  width: 620px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.cases-item {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
}

.cases-item ul {
  padding-left: 18px;

}

.cases-item ul li {
  line-height: 30px;
}

.cases-item h3 {
  margin-right: 8px;
  margin-bottom: 16px;
}

.cases-right {
  display: flex;
  justify-content: flex-start;
}

.work-title {
  display: flex;
  justify-content: center;
  height: 48px;
}

.first-item {
  display: flex;
  justify-content: center;
}


.social,
.subscribe {
  align-self: flex-end;
  margin-bottom: 20px;
}

.text-container {
  display: flex;
  justify-content: center;
}

.text-content {
  width: 620px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

.text-content h3 {
  margin-bottom: 16px;
}

.subject-content-cases {
  width: 620px;
  display: flex;
  justify-content: flex-start;
  margin: 48px 0px;
}


/************************** Full screen images ******************/

.imgcentering {
  width: 620px;
  display: flex;
  justify-content: center;
  align-items: flex-start;

}

a.lightbox img {
width: 100%;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
top: 0px;
}

/**************** scroll button *********************************************/

#top{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#top i{
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#top:hover{
    background: rgba(0, 0, 0, 0.9);
}
#top:hover i{
    color: #fff;
    top: 5px;
}






/****************************** Footerdt css *******************/

.footer {
  display: flex;
  justify-content: center;
  background: rgb(157,52,227);
  background: -moz-linear-gradient(90deg, rgba(157,52,227,0.3) 0%, rgba(98,118,213,0.3) 50%, rgba(69,180,252,0.3) 100%);
  background: -webkit-linear-gradient(90deg, rgba(157,52,227,0.3) 0%, rgba(98,118,213,0.3) 50%, rgba(69,180,252,0.3) 100%);
  background: linear-gradient(90deg, rgba(157,52,227,0.3) 0%, rgba(98,118,213,0.3) 50%, rgba(69,180,252,0.3) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9d34e3",endColorstr="#45b4fc",GradientType=1);
}

.footer-item {
  height: 96px;
  width: 1024px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.linkedin {
  margin-left: 24px;
}

.copy {
  display: flex;
  justify-content: flex-start;
}

/*********************** Resposive css ***********************/

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {



}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {



}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {



}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {



}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {


}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

  .subject_container {
    padding: 16px;
  }

  .subject-content {
    width: 100%;
    margin: 48px 0px;
  }

  .menu-container {
    padding: 16px;
  }

  .intro-text {
    font-size: 48px;
  }

  .footer {
    padding: 16px;
  }

  .caseImg {
    width: 100%;
  }

  .full {
    padding: 16px;
  }

  .full-item {
    width: 100%;
  }

  .wrapper {
    padding: 16px;
  }

}