#services{
    background: linear-gradient(
      180deg,
      rgba(100,115,125,0),
      rgba(14, 176, 71, 0)
    );
}

.gradient-title-big {
    background: linear-gradient(0deg, #614768 20%, rgba(17, 24, 28, 0) 45%), linear-gradient(90deg, #b172bf 10%, #904f4f 20%, #4995d3 70%, #11181c 100%);
    background-size: 125% 50%;
    font-size: 12vw !important;
    font-weight:300 !important;
    line-height: 1;
    letter-spacing: -.035em;
    -webkit-background-clip: text;
    padding-bottom: .75em;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-animation: intro-gradient 1.8s ease backwards;
    animation: intro-gradient 1.8s ease backwards;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.gradient-title-mid {
    background: linear-gradient(0deg, #614768 20%, rgba(17, 24, 28, 0) 45%), linear-gradient(90deg, #b172bf 10%, #904f4f 20%, #4995d3 70%, #11181c 100%);
    background-size: 125% 100%;
    font-size: 42px !important;
    font-weight:300 !important;
    line-height: 1;
    letter-spacing: -.035em;
    -webkit-background-clip: text;
    padding-bottom: 0.001em;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-animation: intro-gradient 1.8s ease backwards;
    animation: intro-gradient 1.8s ease backwards;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.gradient-title {
    background: linear-gradient(0deg, #614768 20%, rgba(17, 24, 28, 0) 45%), linear-gradient(90deg, #b172bf 10%, #904f4f 20%, #4995d3 70%, #11181c 100%);
    background-size: 100% 100%;
    font-size: 30px !important;
    font-weight:300 !important;
    line-height: 1;
    letter-spacing: -.035em;
    -webkit-background-clip: text;
    padding-bottom: 0.125em;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-animation: intro-gradient 1.8s ease backwards;
    animation: intro-gradient 1.8s ease backwards;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

#services #fullBlock{margin:0 auto;font-size:1.125em;width:100%;padding:25px 0 0 0;clear:both;overflow:hidden;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;text-align:center;}
#services #slideArrows{position:relative;float:right;}
#services h1{padding-top:0.75em;text-align:center;font-size:2.5em;font-weight:700;line-height:0.9em}
#services h2{text-align:center;font-size:1.5em;font-weight:300;line-height: 0.8;}
#services .web-cntr h1, #services .web-cntr h2{color:#FFF;}
#services .graphics-cntr h1, #services .graphics-cntr h2{color:#FFF}
.resp-desktop{display:none}
.resp-mobile{display:block;clear:both;overflow:hidden;order:4;margin:0 auto;padding:0;}
.vert-align-mid{display:flex;align-items:center;}

.main-cntr{width:100%;margin:0 auto;padding:0;clear:both;overflow:hidden;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;}

.main-cntr .creative-services{display:block;width:100%;padding-bottom:1.5em;text-transform:uppercase;text-align:center;}

.web-cntr-copy .web-blurb{display:none;}
.graphics-cntr-copy .graphics-blurb{display:none}

/* Web Services Container */
.main-cntr .web-cntr{background-color:rgba(100,115,125,1);width:100%;margin:0 auto;padding:2% 0 7% 0;clear:both;overflow:hidden;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;}
.main-cntr .web-cntr .web-cntr-copy{display:block;width:100%;margin:0 auto 1% auto;padding:0 2%;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;order:1;}
.main-cntr .web-cntr .web-cntr-copy span{display:inline-block;vertical-align:middle;line-height:normal;color:#555;}
.main-cntr .web-cntr .web-cntr-thumbs{width:100%;margin:0 auto;padding:2% 2% 0 2%;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;order:2;}
.main-cntr .web-cntr .web-cntr-copy .whiteBtn{float:none;}

/* Graphics Services Container */
.main-cntr .graphics-cntr{background-color:#876161;width:100%;margin:0 auto;padding:0;clear:both;overflow:hidden;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;}
.main-cntr .graphics-cntr .graphics-cntr-copy{display:block;width:100%;margin:0 auto;padding:1% 0 0 2%;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;order:3;}
.main-cntr .graphics-cntr .graphics-cntr-copy span{display:inline-block;vertical-align:middle;line-height:normal;color:#555;}
.main-cntr .graphics-cntr .graphics-cntr-thumbs{width:100%;margin:0 auto;padding:0 2% 0 2%;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;order:4;}
.main-cntr .graphics-cntr .graphics-cntr-copy .whiteBtn{float:none;}


@media only screen and (min-width: 768px) {
.diagonal-bg {
    /* Draws a diagonal line from top-left to bottom-right.
       The first color fills 50%, the second starts from 50%. */
    background: linear-gradient(
      90deg,
      rgb(50, 75, 85) 42%,
      rgba(100, 115, 125, 1) 42%
    );
  }
.diagonal-bg-2 {
    /* Draws a diagonal line from top-left to bottom-right.
       The first color fills 50%, the second starts from 50%. */
    background: linear-gradient(
      90deg,
      rgba(135, 95, 95, 1) 48%,
      rgb(90, 55, 55) 48%
    );
  }

#services{
  border-top:none;
  background: rgb(255, 255, 255); /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(top,rgb(192, 196, 202),rgb(245, 245, 245)); /*Safari 5.1-6*/
  background: -o-linear-gradient(bottom,rgb(192, 196, 202),rgb(245, 245, 245)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(bottom,rgb(192, 196, 202),rgb(245, 245, 245)); /*Fx 3.6-15*/
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(225, 222, 223)); /*Standard*/
}
.main-cntr{border-top-left-radius:0;border-bottom-right-radius:0;width:100%;margin:0 auto;padding:0;clear:both;overflow:hidden;
	display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;}

#services #fullBlock{width:100%;padding:100px 0 0 0;}
#services h1{padding:0}
.gradient-title-big {font-size:4vw !important;letter-spacing: 15px;}
.gradient-title-mid {font-size:50px !important;}
.gradient-title {font-size:36px !important;}
.main-cntr .creative-services{padding-bottom:4em;}

#services .web-cntr h1, #services .web-cntr h2, #services .graphics-cntr h1, #services .graphics-cntr h2{color:rgba(255, 255, 255, 1)}
.resp-desktop{display:block;}
.resp-mobile{display:none;}

/* Web Services Container */
.main-cntr .web-cntr{margin:0 auto 0 auto;padding:0 0 0 0;background-color:rgba(255, 255, 255, 0);border-bottom:none;}
.main-cntr .web-cntr .web-cntr-copy{width:35%;margin:1em auto 0 5%;text-align:right;}
.main-cntr .web-cntr .web-cntr-copy .whiteBtn{float:right;margin-top:5%}
.main-cntr .web-cntr .web-cntr-thumbs{width:60%;padding:2%;}

/* Graphics Services Container */
.main-cntr .graphics-cntr{background-color:rgba(255, 255, 255, 0);padding:4.5% 0}
.main-cntr .graphics-cntr .graphics-cntr-thumbs{width:50%;order:3;}
.main-cntr .graphics-cntr .graphics-cntr-copy{width:35%;margin-right:15%;text-align:left;order:4;}
.main-cntr .graphics-cntr .graphics-cntr-copy .whiteBtn{float:left;margin-top:5%}
}

@media only screen and (min-width: 1024px) {
#services .web-cntr h1{text-align:right;}
#services .web-cntr h2{text-align:right;}
#services .graphics-cntr h1{text-align:left;}
#services .graphics-cntr h2{text-align:left;}
.web-cntr-copy .web-blurb{display:block}
.graphics-cntr-copy .graphics-blurb{display:block}
}

@media only screen and (min-width: 1280px) {
#services .web-cntr h1{text-align:right;font-size:3.5em;}
#services .web-cntr h2{text-align:right;font-size:2.25em;}
#services .graphics-cntr h1{text-align:left;font-size:3.5em;}
#services .graphics-cntr h2{text-align:left;font-size:2.25em;}
}