@charset "UTF-8";
/* START: 	BASE:		Our master CSS file. 
	
						Credit Paul @ Nine Four Ltd
										
			LAST EDIT:	03 / 01 / 2018
			
			NOTE:		Other scss files included and seeperate out for legibility
			
			NOTE: 		Please try to use consistent white spacing:
			
						* 2-3 returns between rules and classes
						* Tab each declaration so that all values fo rthat rule are inline
						* User START: and END comments acordingly around each rule
					
						Use cammelCase for ID's and text_with_underscores for classes.
					
			*/
/* https://gist.github.com/AllThingsSmitty/3bcc79da563df756be46 */
/* START:	VARIABLES: RE-usable elements such as colours fonts etc
    			
						Credit Paul @ Nine Four Ltd
										
			LAST EDIT:	03 / 01 / 2018
			
			NOTE: 	Please try to use consistent white spacing:
			
					* 2-3 returns between rules and classes
					* Tab each declaration so that all values fo rthat rule are inline
					* User START: and END comments acordingly around each rule
					
					Use cammelCase for ID's and text_with_underscores for classes.
					
			*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
/* START: Bootstrap Sizes */
/* Small devices (tablets, 768px and up) */
.light_grey {
  color: #EEEEEE; }

.bg_light_grey {
  background-color: #EEEEEE;
  color: #333; }

.mid_grey {
  color: #666666; }

.bg_mid_grey {
  background-color: #666666;
  color: white; }

.green {
  color: #72AA1D; }

.bg_green {
  background-color: #72AA1D;
  color: white; }

.teal {
  color: #107298; }

.bg_teal {
  background-color: #107298;
  color: white; }

/* START: 	MIXINS:
		
						Credit Paul @ Nine Four Ltd
										
			LAST EDIT:	03 / 01 / 2018
			
			NOTE: 	Please try to use consistent white spacing:
			
					* 2-3 returns between rules and classes
					* Tab each declaration so that all values fo rthat rule are inline
					* User START: and END comments acordingly around each rule

					Use cammelCase for ID's and text_with_underscores for classes.
					
			*/
/* Credit: https://gist.github.com/garyharan/957284 */
/**
	* Convert font-size from px to rem with px fallback
	*
	* @param $size - the value in pixel you want to convert
	*
	* e.g. p {@include fontSize(12px);}
	* 
	*/
/* START: 	MODULES:	Any generic re-suable snippets.
		
						Credit Paul @ Nine Four Ltd
										
			LAST EDIT:	03 / 01 / 2018
			
			NOTE: 		Please try to use consistent white spacing:
			
						* 2-3 returns between rules and classes
						* Tab each declaration so that all values for that rule are inline
						* User START: and END comments acordingly around each rule

						Use cammelCase for ID's and text_with_underscores for classes.
					
			*/
/* START: test class, handy for testing your layouts! */
.test {
  background-color: rgba(0, 255, 0, 0.8); }

/* START: Branding - taken from values in _varibles.scss */
.font_brand_light, .font_brand {
  font-family: "ClarendonBT-Roman";
  font-weight: normal;
  font-style: normal; }

.font_brand_light {
  font-family: "ClarendonBT-Light"; }

.accent, a .accent {
  color: #72AA1D !important; }

.alt_accent, a .alt_accent {
  color: #107298 !important; }

/* END: Branding */
/* START: Layouts colours */
.relative {
  position: relative !important; }

.teal_bg {
  background-color: #107298 !important;
  color: white !important; }

.green_bg {
  background-color: #72AA1D !important;
  color: white !important; }
  .green_bg .underline {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .green_bg a {
    color: white;
    border-bottom: 1px solid white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.33) !important; }
  .green_bg a:hover, .green_bg a:focus {
    color: white;
    color: rgba(255, 255, 255, 0.66);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.66) !important; }

.white_bg {
  background-color: white !important;
  color: #666666; }

.dark_bg {
  background-color: #333 !important;
  color: white; }

/* END: Layouts colours */
/* START: Layouts */
.no-padding {
  padding: 0; }
  .no-padding .text {
    padding: 5px 10px;
    background-color: red; }

.margin_top {
  margin-top: 30px; }

.margin_bottom {
  margin-bottom: 30px; }

.no_margin_bottom {
  margin-bottom: 0 !important; }
  .no_margin_bottom .content_screenshots {
    margin-bottom: 0 !important; }

.padding_top {
  padding-top: 30px; }

.padding_bottom {
  padding-bottom: 30px; }

.no_padding_top {
  padding-top: 0 !important; }

.no_padding_bottom {
  padding-bottom: 0 !important; }
  .no_padding_bottom .content_screenshots {
    margin-bottom: 0 !important; }

.padding_md {
  padding: 1.875rem 0 0.9375rem 0; }
  @media (min-width: 768px) {
    .padding_md {
      padding: 60px 0; } }
/* END: Layouts */
/* START: Helpers */
.social ul {
  margin: 0 !important;
  padding: 0; }
  .social ul li {
    padding: 0;
    display: inline; }
    .social ul li a {
      padding: 5px; }

.social .fa {
  font-size: 22px;
  font-size: 1.375rem; }

#footer .social {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem; }

.underline {
  border-bottom: 1px solid #333;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  max-width: 60% !important;
  margin-left: auto;
  margin-right: auto; }

.uppercase {
  text-transform: uppercase; }

.capitalize {
  text-transform: capitalize; }

.inner_shadow {
  -webkit-box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.5); }

.outer_shadow {
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }

/*
	
		
	#header{
		.underline{
			border-bottom: 1px solid white;
			border-bottom: 1px solid rgba(255,255,255,0.2);
			}
	}
		
	// Spacing
	
	.padding_top_bottom_md {
		padding-top:	calculateRem(140px); // 10rem;
		padding-bottom:	calculateRem(120px); // 10rem;
	}
	.padding_top_md {
		padding-top:	calculateRem(86px); // 6rem;
	}
	
	.align_center {
		margin:0 auto;
	}
	
	// END: Spacing
	
	.text_light{
		* { color: white; }
	}
	
	.text_dark{
		* { color: $dark; }
	}
	
	ul.inline{
		display: block;
		li{
			display: inline-block;
		}	
	}
		
	*/
/* END Helpers */
/* START: 	MODULES:	Any generic re-suable snippets.
		
						Credit Paul @ Nine Four Ltd
										
			LAST EDIT:	03 / 01 / 2018
			
			NOTE: 		Please try to use consistent white spacing:
			
						* 2-3 returns between rules and classes
						* Tab each declaration so that all values for that rule are inline
						* User START: and END comments acordingly around each rule

						Use cammelCase for ID's and text_with_underscores for classes.
					
			*/
/* START: test class, handy for testing your layouts! */
.test {
  background-color: rgba(0, 255, 0, 0.8); }

/* START: Branding - taken from values in _varibles.scss */
.font_brand_light, .font_brand {
  font-family: "ClarendonBT-Roman";
  font-weight: normal;
  font-style: normal; }

.font_brand_light {
  font-family: "ClarendonBT-Light"; }

.accent, a .accent {
  color: #72AA1D !important; }

.alt_accent, a .alt_accent {
  color: #107298 !important; }

/* END: Branding */
/* START: Layouts colours */
.relative {
  position: relative !important; }

.teal_bg {
  background-color: #107298 !important;
  color: white !important; }

.green_bg {
  background-color: #72AA1D !important;
  color: white !important; }
  .green_bg .underline {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .green_bg a {
    color: white;
    border-bottom: 1px solid white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.33) !important; }
  .green_bg a:hover, .green_bg a:focus {
    color: white;
    color: rgba(255, 255, 255, 0.66);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.66) !important; }

.white_bg {
  background-color: white !important;
  color: #666666; }

.dark_bg {
  background-color: #333 !important;
  color: white; }

/* END: Layouts colours */
/* START: Layouts */
.no-padding {
  padding: 0; }
  .no-padding .text {
    padding: 5px 10px;
    background-color: red; }

.margin_top {
  margin-top: 30px; }

.margin_bottom {
  margin-bottom: 30px; }

.no_margin_bottom {
  margin-bottom: 0 !important; }
  .no_margin_bottom .content_screenshots {
    margin-bottom: 0 !important; }

.padding_top {
  padding-top: 30px; }

.padding_bottom {
  padding-bottom: 30px; }

.no_padding_top {
  padding-top: 0 !important; }

.no_padding_bottom {
  padding-bottom: 0 !important; }
  .no_padding_bottom .content_screenshots {
    margin-bottom: 0 !important; }

.padding_md {
  padding: 1.875rem 0 0.9375rem 0; }
  @media (min-width: 768px) {
    .padding_md {
      padding: 60px 0; } }
/* END: Layouts */
/* START: Helpers */
.social ul {
  margin: 0 !important;
  padding: 0; }
  .social ul li {
    padding: 0;
    display: inline; }
    .social ul li a {
      padding: 5px; }

.social .fa {
  font-size: 22px;
  font-size: 1.375rem; }

#footer .social {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem; }

.underline {
  border-bottom: 1px solid #333;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  max-width: 60% !important;
  margin-left: auto;
  margin-right: auto; }

.uppercase {
  text-transform: uppercase; }

.capitalize {
  text-transform: capitalize; }

.inner_shadow {
  -webkit-box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.5); }

.outer_shadow {
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }

/*
	
		
	#header{
		.underline{
			border-bottom: 1px solid white;
			border-bottom: 1px solid rgba(255,255,255,0.2);
			}
	}
		
	// Spacing
	
	.padding_top_bottom_md {
		padding-top:	calculateRem(140px); // 10rem;
		padding-bottom:	calculateRem(120px); // 10rem;
	}
	.padding_top_md {
		padding-top:	calculateRem(86px); // 6rem;
	}
	
	.align_center {
		margin:0 auto;
	}
	
	// END: Spacing
	
	.text_light{
		* { color: white; }
	}
	
	.text_dark{
		* { color: $dark; }
	}
	
	ul.inline{
		display: block;
		li{
			display: inline-block;
		}	
	}
		
	*/
/* END Helpers */
/* START: 	LAYOUTS:	Divide our markup into sections, layouts hold one of more modular elements together
	
						Credit Paul @ Nine Four Ltd
										
			LAST EDIT:	10 / 07 / 2018						
			
			NOTE: 		Please try to use consistent white spacing:
			
						* 2-3 returns between rules and classes
						* Tab each declaration so that all values fo rthat rule are inline
						* User START: and END comments acordingly around each rule

						Use cammelCase for ID's and text_with_underscores for classes.
					
			*/
/*
	#header{
		padding:			calculateRem(240px) 0 calculateRem(120px)  !important;
		margin: 			0 0 calculateRem(40px)  0;
		background-color: 	$green; // For browsers that do not support gradients
		@include 			gradient(320deg, darken( $green, 12% ), $green);// Mixim and standard syntax (must be last);
		color: 				white;		
	}
	*/
/* START: heading / hero panel */
/* START: What we do / About - us */
#about-us {
  background-color: #72AA1D;
  background-image: url("/uploads/backgrounds/15.20.03-2_tint_green.jpg");
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  padding: 6.25rem 0 3.75rem !important; }
  @media (min-width: 768px) {
    #about-us {
      padding: 6.25rem 0 5rem !important; } }
  #about-us h2 {
    font-family: inherit; }
  #about-us h1, #about-us p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

.carousel.instagram {
  background: #333333; }
  .carousel.instagram img {
    opacity: 0.55; }
  .carousel.instagram a:hover img, .carousel.instagram a:focus img {
    opacity: 1; }

.primary_bg {
  background-color: #72AA1D; }
  .primary_bg *, .primary_bg .heading_serif, .primary_bg .heading_serif span {
    color: white !important; }

/* END: What we do / About - us */
/* START: Get in Touch */
#get-in-touch {
  padding: 2.5rem 0.625rem; }
  @media (min-width: 768px) {
    #get-in-touch {
      padding: 5rem 1.25rem; } }
  #get-in-touch .heading {
    font-size: 30px;
    font-size: 1.875rem;
    font-weight: 300 !important;
    text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3) !important;
    line-height: 122%;
    margin-bottom: 0.4em; }
    @media (min-width: 768px) {
      #get-in-touch .heading {
        font-size: 38px;
        font-size: 2.375rem; } }
  #get-in-touch p {
    max-width: 80rem;
    margin: 0 auto 0.625rem; }
  #get-in-touch a {
    color: white;
    text-decoration: underline; }
  #get-in-touch a:hover, #get-in-touch a:focus {
    color: #cccccc;
    text-decoration: none; }

.call_to_action_bg {
  padding: 3.75rem 3.75rem;
  background-color: #107298;
  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  color: white; }

.avatar {
  border: 4px solid rgba(255, 255, 255, 0.2) !important;
  padding: 2px;
  margin: 10px 0 0 20px;
  max-width: 150px; }

/* END: Get in Touch */
/* START: Our Clients */
#testimonials {
  padding: 2.5rem 0 0.625rem 0; }
  @media (min-width: 768px) {
    #testimonials {
      padding: 5rem 0; } }
#ourClients {
  margin-bottom: 0.3125rem; }
  @media (min-width: 768px) {
    #ourClients {
      margin-bottom: 3.75rem; } }
#ourClients, #testimonials {
  /*
		img, .slick-slide img{
			-webkit-filter: grayscale(1);
		}
		*/ }
  #ourClients .heading, #ourClients .heading_serif span, #testimonials .heading, #testimonials .heading_serif span {
    margin-bottom: 0;
    font-size: 36px;
    font-size: 2.25rem; }
    @media (min-width: 768px) {
      #ourClients .heading, #ourClients .heading_serif span, #testimonials .heading, #testimonials .heading_serif span {
        font-size: 44px;
        font-size: 2.75rem; } }
  #ourClients .note, #testimonials .note {
    margin: 1em 0 1em; }

.sub-page #testimonials {
  margin-bottom: 0; }

#testimonials {
  background-color: #EEEEEE; }
  #testimonials .heading_serif span {
    color: rgba(0, 0, 0, 0.35) !important; }
  #testimonials blockquote:before, #testimonials blockquote p:after {
    color: rgba(0, 0, 0, 0.2) !important; }
  #testimonials blockquote:before {
    top: 2.8125rem;
    left: 0; }
  #testimonials blockquote p {
    padding-top: 1.25rem;
    padding-left: 1.25rem; }
  #testimonials blockquote footer {
    font-size: 90%;
    padding-left: 1.25rem; }

.client_logos {
  margin: 0 auto 1.25rem; }
  .client_logos a {
    border: none;
    display: inline-block; }
  .client_logos a:hover, .client_logos a:focus {
    border: none; }
  .client_logos .sy-slide {
    background: white; }
    .client_logos .sy-slide img {
      margin: 0 5px 10px 5px;
      background-color: white;
      width: auto !important;
      max-width: 100%;
      display: inline; }

/* END: Our Clients  */
/* START: Outer */
.outer {
  padding: 1.25rem 0; }
  @media (min-width: 768px) {
    .outer {
      padding: 0.625rem 0;
      padding: 2.5rem 0 3.75rem 0; } }
  .outer .inner {
    max-width: 60rem;
    margin: 0 auto; }
    @media (min-width: 768px) {
      .outer .inner {
        max-width: 960px; } }
  .outer #info img {
    max-width: 900px !important;
    width: 100%;
    height: auto;
    margin: 0 auto; }

#case-studies .heading {
  padding: 2.5rem 0 0.625rem 0;
  margin: 0 auto 0 auto;
  font-size: 36px;
  font-size: 2.25rem; }
  @media (min-width: 768px) {
    #case-studies .heading {
      font-size: 44px;
      font-size: 2.75rem;
      padding: 3.75rem 0 1.25rem 0; } }
.portfolio .header_background, .sub-page .header_background {
  background-color: #72AA1D;
  margin-bottom: -1px !important; }

.portfolio header.outer, .sub-page header.outer {
  padding: 7.5rem 0 3.75rem; }
  @media (min-width: 768px) {
    .portfolio header.outer, .sub-page header.outer {
      padding: 8.75rem 0 7.5rem; } }
  .portfolio header.outer h2, .sub-page header.outer h2 {
    padding: 0;
    margin: 0; }
  .portfolio header.outer .heading_serif, .portfolio header.outer .heading_serif span, .sub-page header.outer .heading_serif, .sub-page header.outer .heading_serif span {
    color: white !important;
    text-shadow: 0 2px 2px 8px rgba(0, 0, 0, 0.7);
    line-height: 103%; }
    .portfolio header.outer .heading_serif small, .portfolio header.outer .heading_serif span small, .sub-page header.outer .heading_serif small, .sub-page header.outer .heading_serif span small {
      color: white !important;
      font-size: 56% !important;
      display: block;
      margin-top: 20px;
      opacity: 0.66; }

body.error404 {
  background-color: #72AA1D;
  background-image: url("/uploads/backgrounds/not_found.jpg");
  background-image: url("/uploads/backgrounds/error-404.jpg");
  background-repeat: no-repeat;
  background-position: top right;
  background-attachment: fixed;
  background-size: cover;
  color: white !important; }
  body.error404.sub-page .header_background, body.error404 .call_to_action_bg {
    background-color: transparent !important;
    background-color: none !important;
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
  body.error404 a {
    color: white !important; }

.marvel-device .img-sm {
  position: relative;
  -webkit-animation: scrollImage 18s ease-out normal infinite;
  animation: scrollImage 18s ease-out normal infinite; }

/* END: Outer */
/*  START: Case studies  */
.casestudy {
  position: relative;
  display: block;
  text-align: left;
  margin-bottom: 1.875rem; }
  @media (min-width: 768px) {
    .casestudy {
      text-align: left; } }
  .casestudy .casestudy_background {
    position: relative;
    overflow: hidden;
    overflow: hidden; }
  .casestudy .casestudy_hero {
    z-index: 1;
    top: 0; }
  .casestudy .icky-doo-dah {
    position: absolute;
    top: 100%;
    right: -180px;
    height: 280px;
    width: auto;
    transition: top 0.8s ease; }
    @media (min-width: 480px) {
      .casestudy .icky-doo-dah {
        right: -160px; } }
    @media (min-width: 750px) {
      .casestudy .icky-doo-dah {
        right: -40px; } }
    @media (min-width: 1092px) {
      .casestudy .icky-doo-dah {
        right: 80px; } }
  .casestudy .casestudy_title {
    position: absolute;
    z-index: 10;
    bottom: 0;
    padding: 1.25rem 1.25rem 0 1.25rem;
    transition: padding 0.2s; }
    @media (min-width: 768px) {
      .casestudy .casestudy_title {
        padding: 2.5rem 2.5rem 0 2.5rem; } }
    .casestudy .casestudy_title h2, .casestudy .casestudy_title h3 {
      color: white;
      margin: 0 0 0 0;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
      transition: text-shadow ease-in 0.2s;
      line-height: 132%;
      max-width: 40rem;
      max-width: 47.5rem; }
    .casestudy .casestudy_title h2 {
      margin-bottom: 5px;
      font-weight: 400; }
    .casestudy .casestudy_title h3 {
      font-size: 18px;
      font-size: 1.125rem;
      font-weight: 400; }
  .casestudy .casestudy_view_more {
    color: white;
    opacity: 0;
    transition: opacity 0.2s linear 0.2s, opacity 0.2s ease-in, margin-top 0.2s ease-in cubic-bezier(0.365, 0.005, 0.355, 1);
    margin-top: 0;
    will-change: opacity; }
    .casestudy .casestudy_view_more .casestudy_inner {
      padding: 14.375rem 2.5rem; }
  .casestudy .casestudy_overlay {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out; }
  .casestudy:hover .casestudy_background {
    box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.333); }
  .casestudy:hover .casestudy_overlay {
    transition-timing-function: cubic-bezier(0.25, 0, 0.125, 1);
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%); }
  .casestudy:hover .casestudy_view_more {
    opacity: 1;
    margin-top: 2.5rem; }
  .casestudy:hover .casestudy_title {
    padding: 1.25rem; }
    @media (min-width: 768px) {
      .casestudy:hover .casestudy_title {
        padding: 2.5rem; } }
    .casestudy:hover .casestudy_title h2, .casestudy:hover .casestudy_title h3 {
      text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.56); }
  .casestudy:hover .icky-doo-dah {
    position: absolute;
    top: 60px; }

#serviceList {
  padding: 0.625rem 0;
  background-color: rgba(0, 0, 0, 0.02); }
  @media (min-width: 768px) {
    #serviceList {
      padding: 5rem 0;
      padding: 2.5rem 0; } }
  #serviceList .heading {
    margin-top: 0;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.2; }
  #serviceList p {
    font-size: 16px;
    font-size: 1rem; }
  #serviceList .col-md-4:nth-child(3n+4) {
    clear: left; }

body.case-studies #entry .fluid_body, body.services #entry .fluid_body, body.sub-page #entry .fluid_body {
  position: relative;
  margin: 0 auto;
  padding: 3.125rem 0 1.5625rem 0; }
  @media (min-width: 768px) {
    body.case-studies #entry .fluid_body, body.services #entry .fluid_body, body.sub-page #entry .fluid_body {
      padding: 2.5rem 0 1.25rem; } }
  body.case-studies #entry .fluid_body.no_padding_bottom + .fluid_body:before, body.services #entry .fluid_body.no_padding_bottom + .fluid_body:before, body.sub-page #entry .fluid_body.no_padding_bottom + .fluid_body:before {
    content: "";
    height: 5px;
    position: absolute;
    top: 1px;
    width: 100%;
    z-index: 2;
    -webkit-box-shadow: 0 -5px 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 -5px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 -5px 6px rgba(0, 0, 0, 0.1); }

body.case-studies #entry .fluid_body:nth-child(even), body.services #entry .fluid_body:nth-child(even), body.sub-page #entry .fluid_body:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.04); }

body.case-studies #entry .inner, body.services #entry .inner, body.sub-page #entry .inner {
  max-width: 840px;
  margin: 0 auto; }

body.case-studies #entry h1, body.case-studies #entry h2, body.case-studies #entry h3, body.case-studies #entry h4, body.case-studies #entry h5, body.case-studies #entry h6, body.case-studies #entry p, body.services #entry h1, body.services #entry h2, body.services #entry h3, body.services #entry h4, body.services #entry h5, body.services #entry h6, body.services #entry p, body.sub-page #entry h1, body.sub-page #entry h2, body.sub-page #entry h3, body.sub-page #entry h4, body.sub-page #entry h5, body.sub-page #entry h6, body.sub-page #entry p {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto; }

body.case-studies #entry p, body.case-studies #entry li, body.services #entry p, body.services #entry li, body.sub-page #entry p, body.sub-page #entry li {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 134%; }

body.case-studies #entry blockquote p, body.services #entry blockquote p, body.sub-page #entry blockquote p {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 132%; }

body.case-studies #entry ul, body.services #entry ul, body.sub-page #entry ul {
  margin: 1rem 1rem 2rem 1rem; }

body.case-studies #entry i, body.services #entry i, body.sub-page #entry i {
  font-style: italic;
  font-weight: 300; }

body.case-studies #entry .content_screenshots, body.services #entry .content_screenshots, body.sub-page #entry .content_screenshots {
  margin: 20px auto 20px;
  position: relative; }
  @media (min-width: 768px) {
    body.case-studies #entry .content_screenshots, body.services #entry .content_screenshots, body.sub-page #entry .content_screenshots {
      margin: 40px auto; } }
  body.case-studies #entry .content_screenshots img, body.services #entry .content_screenshots img, body.sub-page #entry .content_screenshots img {
    margin: 0 auto; }
  body.case-studies #entry .content_screenshots img.img-shadow, body.services #entry .content_screenshots img.img-shadow, body.sub-page #entry .content_screenshots img.img-shadow {
    max-width: 70%;
    position: relative;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.6);
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.6); }
  body.case-studies #entry .content_screenshots img:nth-child(2), body.services #entry .content_screenshots img:nth-child(2), body.sub-page #entry .content_screenshots img:nth-child(2) {
    z-index: 0;
    position: absolute;
    max-width: 40%;
    top: 120px;
    right: 0; }
  body.case-studies #entry .content_screenshots img.img-shadow:hover, body.services #entry .content_screenshots img.img-shadow:hover, body.sub-page #entry .content_screenshots img.img-shadow:hover {
    z-index: 900;
    -webkit-box-shadow: 4px 8px 18px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 8px 18px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 8px 18px rgba(0, 0, 0, 0.2); }

body.services #portfolio .casestudy {
  padding: 0;
  margin: 0;
  background-color: white; }

body.services #portfolio a.casestudy {
  -webkit-filter: grayscale(0);
  opacity: 1;
  transition: background-color .6s ease-in-out, opacity .6s ease-in-out; }

body.services #portfolio a.casestudy:hover, body.services #portfolio a.casestudy:focus {
  background-color: #107298;
  opacity: 1; }

.side_images {
  margin: 0.625rem auto 0.625rem auto; }
  .side_images:after {
    content: "";
    display: table;
    clear: both; }
  @media (min-width: 768px) {
    .side_images {
      margin: 1.25rem auto 0 0; } }
  .side_images img {
    float: left;
    width: 49%; }
  .side_images img:nth-child(1) {
    float: left;
    width: 100%;
    margin-bottom: 0.5em; }
  .side_images img:nth-child(even) {
    margin-bottom: 2%;
    margin-right: 2%; }

/*  END: Case studies  */
/* START: Footer */
#footer {
  background: #333 url("/uploads/backgrounds/footer-meeting.jpg") no-repeat center center;
  background-size: cover;
  padding: 3em 0 4em 0;
  text-align: center; }
  @media (min-width: 992px) {
    #footer {
      text-align: left; } }
  #footer h3, #footer h4, #footer h5, #footer h6 {
    font-family: "ClarendonBT-Roman";
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    margin: 2.625rem auto 0.3125rem auto; }
  #footer h5 {
    font-size: 26px;
    font-size: 1.625rem;
    line-height: 120%; }
  #footer p, #footer li {
    font-size: 16px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.4); }
  #footer a {
    color: rgba(255, 255, 255, 0.4); }
  #footer a:hover {
    color: #107298; }
  @media (min-width: 992px) {
    #footer .services {
      float: left; } }
  @media (min-width: 992px) {
    #footer .mini_nav {
      margin-top: 75px; } }
  #footer .copyright {
    margin-top: 1.25rem;
    padding-top: 1.875rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    font-size: 0.875rem; }
    @media (min-width: 992px) {
      #footer .copyright {
        margin-top: 2.5rem; } }
    #footer .copyright a {
      color: rgba(255, 255, 255, 0.4); }
  #footer a {
    color: white;
    color: rgba(255, 255, 255, 0.6); }
  #footer .contact a {
    text-decoration: underline; }
  #footer .contact .title a {
    text-decoration: none; }
  #footer ul {
    padding: 0;
    margin: 0;
    list-style: none; }
  #footer .ee_partner {
    opacity: 0.4;
    margin: 0;
    max-width: 16.875rem;
    padding: 3.125rem 0 1.875rem; }
    @media (min-width: 992px) {
      #footer .ee_partner {
        padding: 5rem 0 0 0; } }
    #footer .ee_partner:hover {
      opacity: 1; }

/* END: Footer */
/* START:	CSS Forms:     			
						Credit Paul @ Nine Four Ltd
										
			LAST EDIT:	07 / 01 / 2018    		
			
			NOTE: 	Please try to use consistent white spacing:
			
					* 2-3 returns between rules and classes
					* Tab each declaration so that all values fo rthat rule are inline
					* User START: and END comments acordingly around each rule
					
					Use cammelCase for ID's and text_with_underscores for classes.
					
			*/
/* 	START:	Global */
legend {
  padding: 10px 0; }

form fieldset {
  padding-bottom: 40px; }

.btn-primry {
  background-color: #72AA1D;
  color: white;
  font-weight: 700;
  text-transform: uppercase; }
  .btn-primry:hover, .btn-primry:focus {
    background-color: #1a2707;
    color: white; }

.form-control {
  color: #333; }

/* START: 	BOOTSTRAP OVERRIDES:
	
						Credit Paul @ Nine Four Ltd
										
			LAST EDIT:	03 / 01 / 2018
			
			NOTE: 		Please try to use consistent white spacing:
			
						* 2-3 returns between rules and classes
						* Tab each declaration so that all values fo rthat rule are inline
						* User START: and END comments acordingly around each rule
					
						Use cammelCase for ID's and text_with_underscores for classes.
					
			*/
/* Extra helpers */
.hidden_xxs {
  display: none; }
  @media (min-width: 380px) {
    .hidden_xxs {
      display: inline; } }
.row.no-gutters {
  margin-right: 0;
  margin-left: 0; }

.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0; }

/* START: Navbar */
.navbar-default {
  background-color: transparent;
  background-color: rgba(255, 255, 255, 0);
  border-color: transparent;
  -webkit-transition: background-color 0.4s ease-in-out 0s;
  -moz-transition: background-color 0.4s ease-in-out 0s;
  -o-transition: background-color 0.4s ease-in-out 0s;
  transition: background-color 0.4s ease-in-out 0s; }
  .navbar-default .navbar-brand {
    color: #72AA1D;
    font-weight: 100;
    padding: 18px 15px !important; }
    .navbar-default .navbar-brand img {
      max-width: 8em;
      width: 100%;
      height: auto; }
  .navbar-default .navbar-nav {
    margin-top: 0; }
  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: white;
    background-color: transparent; }
  .navbar-default .navbar-nav > li {
    margin: 0 5px;
    padding: 0.8em 0 1em 0;
    font-size: 16px;
    font-size: 1rem;
    position: relative;
    /*
				
			&:not(.pill) a {
				color: white;
				padding: 0.6em 0.8em;				
				font-weight: bold !important;
				
				&::after {
				    position: absolute;
				    top: 100%;
				    left: 0;
				    width: 100%;
				    height: 3px;
				    background: rgba(255,255,255,0.2);
				    content: '';
				    opacity: 0;
				    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
				    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
				    transition: opacity 0.3s, transform 0.3s;
				    -webkit-transform: translateY(10px);
				    -moz-transform: translateY(10px);
				    transform: translateY(10px);
				}
			}
			
			a:hover, a:focus, a:active, &.active a, &.active a{
				color: white !important;
				// border-bottom: 2px solid white !important;	
				
				&::after{
					opacity: 1;
					-webkit-transform: translateY(0px);
					-moz-transform: translateY(0px);
					transform: translateY(0px);
				}
			}
			
			*/ }
    .navbar-default .navbar-nav > li.pill a {
      color: white;
      font-weight: bold !important;
      padding: 0.6em 0.8em;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 2.5rem;
      border-bottom: none !important;
      -webkit-transition: all 0.4s;
      /* Safari */
      transition: all 0.4s; }
      .navbar-default .navbar-nav > li.pill a:hover {
        color: white !important;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 1.25rem; }

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border: none; }

#nine_four_logo .nin, #nine_four_logo .e {
  fill: white; }

#nine_four_logo .f, #nine_four_logo .o, #nine_four_logo .ur {
  fill: rgba(255, 255, 255, 0.4); }

#nine_four_logo .nin, #nine_four_logo .e, #nine_four_logo .f, #nine_four_logo .o, #nine_four_logo .ur {
  -webkit-transition: fill 0.8s ease-in-out 0s;
  -moz-transition: fill 0.8s ease-in-out 0s;
  -o-transition: fill 0.8s ease-in-out 0s;
  transition: fill 0.8s ease-in-out 0s; }

body.scrolling .navbar-default .navbar-toggle .icon-bar {
  background-color: #72AA1D; }

body.scrolling .navbar-default .navbar-toggle:hover, body.scrolling .navbar-default .navbar-toggle:focus {
  background-color: rgba(114, 170, 29, 0.6); }
  body.scrolling .navbar-default .navbar-toggle:hover .icon-bar, body.scrolling .navbar-default .navbar-toggle:focus .icon-bar {
    background-color: white; }

body.scrolling .navbar-default {
  background-color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(114, 170, 29, 0.4);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }

body.scrolling .navbar-nav > li a, body.scrolling .navbar-nav > .active > a, body.scrolling .navbar-nav > .active > a:hover, body.scrolling .navbar-nav > .active > a:focus {
  color: #72AA1D; }

body.scrolling .navbar-nav > li a {
  color: #72AA1D !important; }

body.scrolling .navbar-nav > li a:hover, body.scrolling .navbar-nav > li a:focus, body.scrolling .navbar-nav > li a:active, body.scrolling .navbar-nav > li.active a {
  color: #72AA1D !important; }
  body.scrolling .navbar-nav > li a:hover::after, body.scrolling .navbar-nav > li a:focus::after, body.scrolling .navbar-nav > li a:active::after, body.scrolling .navbar-nav > li.active a::after {
    background: rgba(114, 170, 29, 0.2); }

body.scrolling .navbar-nav > li.pill a {
  background-color: rgba(114, 170, 29, 0.12);
  border-radius: 20px;
  border-bottom: none !important; }
  body.scrolling .navbar-nav > li.pill a:hover {
    color: white !important;
    background-color: rgba(114, 170, 29, 0.8); }

body.scrolling #nine_four_logo .nin, body.scrolling #nine_four_logo .e {
  fill: #666666; }

body.scrolling #nine_four_logo .f, body.scrolling #nine_four_logo .o, body.scrolling #nine_four_logo .ur {
  fill: #72AA1D; }

.badge {
  margin-top: -20px;
  background-color: red;
  border-radius: 120em;
  text-align: center !important; }

/*
	.panel.panel_ux{
		border: none;
		@include box_shadow(1px, 2px, 18px, rgba(0,0,0,0.1), false);
	
		.text{
			display: none;
		}
		
		&:hover, &:focus{
			 transform: scale(0.98);
			 @include box_shadow(0, 0, 12px, rgba(0,0,0,0.2), false);
		}
		
		&.select, &:active{
			 transform: scale(1.02);
			 @include box_shadow(0, 0, 0, rgba(0,0,0,0), false);
			 
			 position: fixed;
			 top: 0;
			 bottom: 0;
			 left: 0;
			 right: 0;
			 
			 .text{
				 display: block;
			 }
			 
		}
		
	}
	*/
/* START: Links */
.btn, .btn-default {
  color: #ffffff !important;
  background-color: grey;
  border-color: grey !important; }

.btn-primary {
  background-color: #107298 !important;
  border-color: #107298 !important;
  color: white !important; }

.btn-secondry {
  background-color: #72AA1D;
  border-color: #72AA1D; }

.btn_reverse {
  background-color: white 	!important;
  border-color: #72AA1D !important;
  color: #72AA1D !important; }
  .btn_reverse:hover, .btn_reverse:focus {
    background-color: #72AA1D !important;
    border-color: #72AA1D !important;
    color: white !important; }

.btn_reverse_alt {
  background-color: white 	!important;
  border-color: #107298 !important;
  color: #107298 !important; }
  .btn_reverse_alt:hover, .btn_reverse_alt:focus {
    background-color: #107298 !important;
    border-color: #107298 !important;
    color: white !important; }

.btn_reverse_casestudy {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: white !important;
  color: white !important; }

.btn:hover {
  text-decoration: none !important;
  border-color: #ffffff !important; }

/* START Generic base markup overides */
blockquote {
  border: none !important;
  padding: 0;
  margin: 0 0 1.25rem 0 !important; }
  blockquote p, blockquote li {
    color: #1a2707;
    text-shadow: none; }
  blockquote footer:before, blockquote small:before, blockquote .small:before {
    content: ""; }

/* END: Generic base markup overides */
/* START: Responsive */
@media (max-width: 768px) {
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border: none; }
  .navbar-nav > li {
    padding: 0 !important; }
  .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: 100% !important; }
  .nav.navbar-nav.navbar-right {
    background-color: rgba(255, 255, 255, 0.9); }
  .navbar-default .navbar-toggle {
    margin-top: 15px; }
    .navbar-default .navbar-toggle .icon-bar {
      background-color: white; }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
      background-color: rgba(114, 170, 29, 0.6); }
  .navbar-left, .navbar-right {
    float: none !important; }
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border-color: rgba(0, 0, 0, 0.3); }
  .navbar-collapse {
    border-top: 0.0625rem solid transparent;
    box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.1); }
    .navbar-collapse.collapse {
      display: none !important; }
    .navbar-collapse a {
      color: #72AA1D !important;
      text-align: center;
      text-transform: uppercase;
      padding-top: 20px !important;
      padding-bottom: 20px  !important; }
  .navbar-default .navbar-nav > li {
    margin: 0; }
  .navbar-default .navbar-nav > li a:hover, .navbar-default .navbar-nav > li a:focus, .navbar-default .navbar-nav > li a:active, .navbar-default .navbar-nav > li.active a, .pill a:hover {
    color: white !important;
    background-color: rgba(114, 170, 29, 0.6) !important;
    border-radius: 0 !important; }
  .collapse.in {
    display: block !important; }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 0.0625rem; } }

/* END: Responsive */
/* 	END: Bootstrap overrides */
/* START: 	BASE:		Our master CSS file. 
	
						Credit Paul @ Nine Four Ltd
										
			LAST EDIT:	03 / 01 / 2018
			
			NOTE:		Other scss files included and seeperate out for legibility
			
			NOTE: 		Please try to use consistent white spacing:
			
						* 2-3 returns between rules and classes
						* Tab each declaration so that all values fo rthat rule are inline
						* User START: and END comments acordingly around each rule
			
						Use cammelCase for ID's and text_with_underscores for classes.
						
			*/
/* https://gist.github.com/AllThingsSmitty/3bcc79da563df756be46 */
/*  Bootstrap sizes
		sm 768px
		md 992px
		lg 1200px
		
		@media (min-width: 768px)
		@media (min-width: 992px)
		@media (min-width: 1200px)
				
	*/
/* 	START:	Global */
/* 	https://type-scale.com
	https://www.modularscale.com/ 	*/
html {
  font-size: 1em; }

body {
  padding: 0;
  margin: 0;
  background: white;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: #666666;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

p, li {
  /*
		@include 	fontSize(18px);			  
		@media(min-width:768px) {
			@include 	fontSize(22px); 
		}	
		*/
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 134%; }
  @media (min-width: 768px) {
    p, li {
      font-size: 20px;
      font-size: 1.25rem; } }
p {
  margin-bottom: 1.3em; }

p.note {
  font-size: 18px;
  font-size: 1.125rem; }

h1, h2, h3, h4, h5, h6, .lead, legend {
  font-weight: 400;
  font-weight: 300;
  font-style: normal;
  color: #333;
  margin: 2.625rem auto 1.125rem auto;
  padding: 0 0 0 0;
  color: inherit;
  line-height: 1.6em; }
  h1 b, h1 stong, h2 b, h2 stong, h3 b, h3 stong, h4 b, h4 stong, h5 b, h5 stong, h6 b, h6 stong, .lead b, .lead stong, legend b, legend stong {
    font-weight: 400; }

h1 {
  margin-top: 0;
  font-size: 28px;
  font-size: 1.75rem; }
  @media (min-width: 768px) {
    h1 {
      font-size: 34px;
      font-size: 2.125rem; } }
#entry article h2:first-of-type, body.sub-page #entry h2:first-of-type {
  margin: 0 auto 1.125rem auto;
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.2; }
  @media (min-width: 768px) {
    #entry article h2:first-of-type, body.sub-page #entry h2:first-of-type {
      margin: 2.625rem auto 1.125rem auto;
      font-size: 28px;
      font-size: 1.75rem; } }
#entry article h2 + h2, body.sub-page #entry h2 + h2 {
  margin-top: 0; }

.heading {
  font-family: "ClarendonBT-Roman"; }

.heading_serif {
  font-family: "ClarendonBT-Light";
  color: #666666 !important; }
  .heading_serif span {
    color: rgba(102, 102, 102, 0.6) !important; }

.heading_bold {
  text-transform: uppercase; }

/*			
	h1, h2, h3, h4 {
	  margin: 1.414em 0 0.5em;
	  font-weight: inherit;
	  line-height: 1.2;
	}
	*/
small, .font_small {
  font-size: 0.8em; }

a {
  color: #107298;
  outline: none;
  outline-color: transparent;
  outline-style: none;
  position: relative; }

a:hover, a:focus {
  color: #72AA1D; }

a.no_decoration {
  padding-bottom: 2em; }
  a.no_decoration p {
    color: #666666; }
  a.no_decoration:hover {
    text-decoration: none; }
    a.no_decoration:hover p {
      color: #666666; }

blockquote {
  position: relative;
  padding: 2.5rem 0rem 2.5rem 0rem;
  padding: 1.25rem 0rem 2.5rem 0rem;
  margin: 0 auto 0 !important;
  quotes: "“" "”" "‘" "’"; }
  blockquote p {
    font-style: italic;
    line-height: 138%;
    text-align: left;
    color: #666666;
    margin-bottom: 1em; }
  blockquote footer {
    text-align: left;
    color: #666666;
    margin-top: -1em;
    font-size: 20px;
    font-size: 1.25rem;
    opacity: 0.66; }

blockquote:before,
blockquote p:after {
  font-family: TimesNewRoman, "Times New Roman", Times, Georgia, serif;
  color: rgba(16, 114, 152, 0.2);
  font-size: 60px;
  font-size: 3.75rem; }
  @media (min-width: 576px) {
    blockquote:before,
    blockquote p:after {
      font-size: 100px;
      font-size: 6.25rem; } }
blockquote:before {
  position: absolute;
  line-height: 0.1em;
  position: absolute;
  content: open-quote;
  top: 1.25rem;
  left: -0.625rem; }
  @media (min-width: 576px) {
    blockquote:before {
      top: 2.5rem;
      left: -2.5rem; } }
blockquote footer:after {
  font-size: 32px;
  font-size: 2rem;
  position: relative;
  content: close-quote;
  right: 0;
  bottom: 0; }

blockquote p:after {
  font-size: 32px;
  font-size: 2rem;
  color: rgba(16, 114, 152, 0.4);
  position: relative;
  content: close-quote;
  right: 0;
  bottom: 0; }

.brand_bg_color {
  margin: 1.25rem auto 0rem auto !important; }
  .brand_bg_color .blockquote {
    padding: 5rem 0rem 3.75rem 0rem;
    margin: 3.75rem auto !important; }

.text_shadow {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6) !important; }

.outer h1, .outer h2 {
  max-width: 92.5rem;
  font-weight: 300 !important; }

.outer .heading, .outer .heading_serif {
  font-size: 32px;
  font-size: 2rem;
  margin: 0 auto 0 auto;
  line-height: 1.8em; }
  @media (min-width: 767px) {
    .outer .heading, .outer .heading_serif {
      font-size: 58px;
      font-size: 3.625rem; } }
.outer .heading_serif:first-child {
  margin-top: 0 !important; }

.outer p, .outer li {
  font-weight: 300; }

.outer .lead {
  max-width: 92.5rem;
  font-weight: 300 !important; }

.body_font {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; }

b, strong {
  font-weight: 400; }

img {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #666; }

/* START: 	ANIMATIONS:	THe CHerry on top...! */
/*
	
@-webkit-keyframes MyAnimation {
    0% { left: 0; }	
   50% { left: 200px; }	
  100% { left: 20px; }	
}
@keyframes MyAnimation {

*/
/* https://brandonbrule.github.io/scss-animation-keyframe-mixin/ */
/* https://gist.github.com/Integralist/3931680 */
/* https://shouldiprefix.com/#animations */
/*
	
@mixin swinging ($delay, $duration, $animation) {
    -webkit-animation-delay: $delay;
    -webkit-animation-duration: $duration;
    -webkit-animation-name: $animation;
    -webkit-animation-fill-mode: forwards; // this prevents the animation from restarting!

    -moz-animation-delay: $delay;
    -moz-animation-duration: $duration;
    -moz-animation-name: $animation;
    -moz-animation-fill-mode: forwards; // this prevents the animation from restarting!

    -o-animation-delay: $delay;
    -o-animation-duration: $duration;
    -o-animation-name: $animation;
    -o-animation-fill-mode: forwards; // this prevents the animation from restarting!

    animation-delay: $delay;
    animation-duration: $duration;
    animation-name: $animation;
    animation-fill-mode: forwards; // this prevents the animation from restarting!
}
*/
/* https://www.javascriptkit.com/dhtmltutors/css3-animation-swing.shtml */
@-webkit-keyframes swinging {}@keyframes swinging {
  0% {
    transform: rotate(0); }
  20% {
    transform: rotate(160deg); }
  30% {
    transform: rotate(30deg); }
  40% {
    transform: rotate(140deg); }
  50% {
    transform: rotate(40deg); }
  60% {
    transform: rotate(130deg); }
  70% {
    transform: rotate(55deg); }
  80% {
    transform: rotate(110deg); }
  90% {
    transform: rotate(70deg); }
  100% {
    transform: rotate(99deg);
    transform: translateY(2000%); } }

.swing {
  border: 1px solid orange;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  -webkit-animation: swinging 18s ease-in-out forwards infinite;
  animation: swinging 18s ease-in-out forwards infinite; }

@keyframes scrollImage {
  0% {
    top: 0; }
  50% {
    top: -1200px; }
  100% {
    top: 0; } }

.marvel-device {
  display: inline-block;
  position: relative;
  box-sizing: content-box !important; }
  .marvel-device .screen {
    width: 100%;
    position: relative;
    height: 100%;
    z-index: 3;
    background: white;
    overflow: hidden;
    display: block;
    border-radius: 1px;
    box-shadow: 0 0 0 3px #111; }
  .marvel-device .top-bar, .marvel-device .bottom-bar {
    height: 3px;
    background: black;
    width: 100%;
    display: block; }
  .marvel-device .middle-bar {
    width: 3px;
    height: 4px;
    top: 0px;
    left: 90px;
    background: black;
    position: absolute; }
  .marvel-device.iphone8 {
    width: 375px;
    height: 667px;
    padding: 105px 24px;
    background: #d9dbdc;
    border-radius: 56px;
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.iphone8:before {
      width: calc(100% - 12px);
      height: calc(100% - 12px);
      position: absolute;
      top: 6px;
      content: '';
      left: 6px;
      border-radius: 50px;
      background: #f8f8f8;
      z-index: 1; }
    .marvel-device.iphone8:after {
      width: calc(100% - 16px);
      height: calc(100% - 16px);
      position: absolute;
      top: 8px;
      content: '';
      left: 8px;
      border-radius: 48px;
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #FFFFFF;
      z-index: 2; }
    .marvel-device.iphone8 .home {
      border-radius: 100%;
      width: 68px;
      height: 68px;
      position: absolute;
      left: 50%;
      margin-left: -34px;
      bottom: 22px;
      z-index: 3;
      background: #303233;
      background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%); }
      .marvel-device.iphone8 .home:before {
        background: #f8f8f8;
        position: absolute;
        content: '';
        border-radius: 100%;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        top: 4px;
        left: 4px; }
    .marvel-device.iphone8 .top-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      top: 68px;
      left: 0; }
    .marvel-device.iphone8 .bottom-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      bottom: 68px;
      left: 0; }
    .marvel-device.iphone8 .sleep {
      position: absolute;
      top: 190px;
      right: -4px;
      width: 4px;
      height: 66px;
      border-radius: 0px 2px 2px 0px;
      background: #d9dbdc; }
    .marvel-device.iphone8 .volume {
      position: absolute;
      left: -4px;
      top: 188px;
      z-index: 0;
      height: 66px;
      width: 4px;
      border-radius: 2px 0px 0px 2px;
      background: #d9dbdc; }
      .marvel-device.iphone8 .volume:before {
        position: absolute;
        left: 2px;
        top: -78px;
        height: 40px;
        width: 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone8 .volume:after {
        position: absolute;
        left: 0px;
        top: 82px;
        height: 66px;
        width: 4px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone8 .camera {
      background: #3c3d3d;
      width: 12px;
      height: 12px;
      position: absolute;
      top: 24px;
      left: 50%;
      margin-left: -6px;
      border-radius: 100%;
      z-index: 3; }
    .marvel-device.iphone8 .sensor {
      background: #3c3d3d;
      width: 16px;
      height: 16px;
      position: absolute;
      top: 49px;
      left: 134px;
      z-index: 3;
      border-radius: 100%; }
    .marvel-device.iphone8 .speaker {
      background: #292728;
      width: 70px;
      height: 6px;
      position: absolute;
      top: 54px;
      left: 50%;
      margin-left: -35px;
      border-radius: 6px;
      z-index: 3; }
    .marvel-device.iphone8.gold {
      background: #f9e7d3; }
      .marvel-device.iphone8.gold .top-bar, .marvel-device.iphone8.gold .bottom-bar {
        background: white; }
      .marvel-device.iphone8.gold .sleep, .marvel-device.iphone8.gold .volume {
        background: #f9e7d3; }
      .marvel-device.iphone8.gold .home {
        background: #cebba9;
        background: linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%); }
    .marvel-device.iphone8.black {
      background: #464646;
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7); }
      .marvel-device.iphone8.black:before {
        background: #080808; }
      .marvel-device.iphone8.black:after {
        box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121; }
      .marvel-device.iphone8.black .top-bar, .marvel-device.iphone8.black .bottom-bar {
        background: #212121; }
      .marvel-device.iphone8.black .volume, .marvel-device.iphone8.black .sleep {
        background: #464646; }
      .marvel-device.iphone8.black .camera {
        background: #080808; }
      .marvel-device.iphone8.black .home {
        background: #080808;
        background: linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%); }
        .marvel-device.iphone8.black .home:before {
          background: #080808; }
    .marvel-device.iphone8.landscape {
      padding: 24px 105px;
      height: 375px;
      width: 667px; }
      .marvel-device.iphone8.landscape .sleep {
        top: 100%;
        border-radius: 0px 0px 2px 2px;
        right: 190px;
        height: 4px;
        width: 66px; }
      .marvel-device.iphone8.landscape .volume {
        width: 66px;
        height: 4px;
        top: -4px;
        left: calc(100% - 188px - 66px);
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone8.landscape .volume:before {
          width: 40px;
          height: 2px;
          top: 2px;
          right: -78px;
          left: auto;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone8.landscape .volume:after {
          left: -82px;
          width: 66px;
          height: 4px;
          top: 0;
          border-radius: 2px 2px 0px 0px; }
      .marvel-device.iphone8.landscape .top-bar {
        width: 14px;
        height: 100%;
        left: calc(100% - 68px -  14px);
        top: 0; }
      .marvel-device.iphone8.landscape .bottom-bar {
        width: 14px;
        height: 100%;
        left: 68px;
        top: 0; }
      .marvel-device.iphone8.landscape .home {
        top: 50%;
        margin-top: -34px;
        margin-left: 0;
        left: 22px; }
      .marvel-device.iphone8.landscape .sensor {
        top: 134px;
        left: calc(100% - 49px - 16px); }
      .marvel-device.iphone8.landscape .speaker {
        height: 70px;
        width: 6px;
        left: calc(100% - 54px - 6px);
        top: 50%;
        margin-left: 0px;
        margin-top: -35px; }
      .marvel-device.iphone8.landscape .camera {
        left: calc(100% - 32px);
        top: 50%;
        margin-left: 0px;
        margin-top: -5px; }
  .marvel-device.iphone8plus {
    width: 414px;
    height: 736px;
    padding: 112px 26px;
    background: #d9dbdc;
    border-radius: 56px;
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.iphone8plus:before {
      width: calc(100% - 12px);
      height: calc(100% - 12px);
      position: absolute;
      top: 6px;
      content: '';
      left: 6px;
      border-radius: 50px;
      background: #f8f8f8;
      z-index: 1; }
    .marvel-device.iphone8plus:after {
      width: calc(100% - 16px);
      height: calc(100% - 16px);
      position: absolute;
      top: 8px;
      content: '';
      left: 8px;
      border-radius: 48px;
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #FFFFFF;
      z-index: 2; }
    .marvel-device.iphone8plus .home {
      border-radius: 100%;
      width: 68px;
      height: 68px;
      position: absolute;
      left: 50%;
      margin-left: -34px;
      bottom: 24px;
      z-index: 3;
      background: #303233;
      background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%); }
      .marvel-device.iphone8plus .home:before {
        background: #f8f8f8;
        position: absolute;
        content: '';
        border-radius: 100%;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        top: 4px;
        left: 4px; }
    .marvel-device.iphone8plus .top-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      top: 68px;
      left: 0; }
    .marvel-device.iphone8plus .bottom-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      bottom: 68px;
      left: 0; }
    .marvel-device.iphone8plus .sleep {
      position: absolute;
      top: 190px;
      right: -4px;
      width: 4px;
      height: 66px;
      border-radius: 0px 2px 2px 0px;
      background: #d9dbdc; }
    .marvel-device.iphone8plus .volume {
      position: absolute;
      left: -4px;
      top: 188px;
      z-index: 0;
      height: 66px;
      width: 4px;
      border-radius: 2px 0px 0px 2px;
      background: #d9dbdc; }
      .marvel-device.iphone8plus .volume:before {
        position: absolute;
        left: 2px;
        top: -78px;
        height: 40px;
        width: 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone8plus .volume:after {
        position: absolute;
        left: 0px;
        top: 82px;
        height: 66px;
        width: 4px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone8plus .camera {
      background: #3c3d3d;
      width: 12px;
      height: 12px;
      position: absolute;
      top: 29px;
      left: 50%;
      margin-left: -6px;
      border-radius: 100%;
      z-index: 3; }
    .marvel-device.iphone8plus .sensor {
      background: #3c3d3d;
      width: 16px;
      height: 16px;
      position: absolute;
      top: 54px;
      left: 154px;
      z-index: 3;
      border-radius: 100%; }
    .marvel-device.iphone8plus .speaker {
      background: #292728;
      width: 70px;
      height: 6px;
      position: absolute;
      top: 59px;
      left: 50%;
      margin-left: -35px;
      border-radius: 6px;
      z-index: 3; }
    .marvel-device.iphone8plus.gold {
      background: #f9e7d3; }
      .marvel-device.iphone8plus.gold .top-bar, .marvel-device.iphone8plus.gold .bottom-bar {
        background: white; }
      .marvel-device.iphone8plus.gold .sleep, .marvel-device.iphone8plus.gold .volume {
        background: #f9e7d3; }
      .marvel-device.iphone8plus.gold .home {
        background: #cebba9;
        background: linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%); }
    .marvel-device.iphone8plus.black {
      background: #464646;
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7); }
      .marvel-device.iphone8plus.black:before {
        background: #080808; }
      .marvel-device.iphone8plus.black:after {
        box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121; }
      .marvel-device.iphone8plus.black .top-bar, .marvel-device.iphone8plus.black .bottom-bar {
        background: #212121; }
      .marvel-device.iphone8plus.black .volume, .marvel-device.iphone8plus.black .sleep {
        background: #464646; }
      .marvel-device.iphone8plus.black .camera {
        background: #080808; }
      .marvel-device.iphone8plus.black .home {
        background: #080808;
        background: linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%); }
        .marvel-device.iphone8plus.black .home:before {
          background: #080808; }
    .marvel-device.iphone8plus.landscape {
      padding: 26px 112px;
      height: 414px;
      width: 736px; }
      .marvel-device.iphone8plus.landscape .sleep {
        top: 100%;
        border-radius: 0px 0px 2px 2px;
        right: 190px;
        height: 4px;
        width: 66px; }
      .marvel-device.iphone8plus.landscape .volume {
        width: 66px;
        height: 4px;
        top: -4px;
        left: calc(100% - 188px - 66px);
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone8plus.landscape .volume:before {
          width: 40px;
          height: 2px;
          top: 2px;
          right: -78px;
          left: auto;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone8plus.landscape .volume:after {
          left: -82px;
          width: 66px;
          height: 4px;
          top: 0;
          border-radius: 2px 2px 0px 0px; }
      .marvel-device.iphone8plus.landscape .top-bar {
        width: 14px;
        height: 100%;
        left: calc(100% - 68px -  14px);
        top: 0; }
      .marvel-device.iphone8plus.landscape .bottom-bar {
        width: 14px;
        height: 100%;
        left: 68px;
        top: 0; }
      .marvel-device.iphone8plus.landscape .home {
        top: 50%;
        margin-top: -34px;
        margin-left: 0;
        left: 24px; }
      .marvel-device.iphone8plus.landscape .sensor {
        top: 154px;
        left: calc(100% - 54px - 16px); }
      .marvel-device.iphone8plus.landscape .speaker {
        height: 70px;
        width: 6px;
        left: calc(100% - 59px - 6px);
        top: 50%;
        margin-left: 0px;
        margin-top: -35px; }
      .marvel-device.iphone8plus.landscape .camera {
        left: calc(100% - 29px);
        top: 50%;
        margin-left: 0px;
        margin-top: -5px; }
  .marvel-device.iphone5s, .marvel-device.iphone5c {
    padding: 105px 22px;
    background: #2c2b2c;
    width: 320px;
    height: 568px;
    border-radius: 50px; }
    .marvel-device.iphone5s:before, .marvel-device.iphone5c:before {
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      top: 4px;
      content: '';
      left: 4px;
      border-radius: 46px;
      background: #1e1e1e;
      z-index: 1; }
    .marvel-device.iphone5s .sleep, .marvel-device.iphone5c .sleep {
      position: absolute;
      top: -4px;
      right: 60px;
      width: 60px;
      height: 4px;
      border-radius: 2px 2px 0px 0px;
      background: #282727; }
    .marvel-device.iphone5s .volume, .marvel-device.iphone5c .volume {
      position: absolute;
      left: -4px;
      top: 180px;
      z-index: 0;
      height: 27px;
      width: 4px;
      border-radius: 2px 0px 0px 2px;
      background: #282727; }
      .marvel-device.iphone5s .volume:before, .marvel-device.iphone5c .volume:before {
        position: absolute;
        left: 0px;
        top: -75px;
        height: 35px;
        width: 4px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone5s .volume:after, .marvel-device.iphone5c .volume:after {
        position: absolute;
        left: 0px;
        bottom: -64px;
        height: 27px;
        width: 4px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone5s .camera, .marvel-device.iphone5c .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 32px;
      left: 50%;
      margin-left: -5px;
      border-radius: 5px;
      z-index: 3; }
    .marvel-device.iphone5s .sensor, .marvel-device.iphone5c .sensor {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 60px;
      left: 160px;
      z-index: 3;
      margin-left: -32px;
      border-radius: 5px; }
    .marvel-device.iphone5s .speaker, .marvel-device.iphone5c .speaker {
      background: #292728;
      width: 64px;
      height: 10px;
      position: absolute;
      top: 60px;
      left: 50%;
      margin-left: -32px;
      border-radius: 5px;
      z-index: 3; }
    .marvel-device.iphone5s.landscape, .marvel-device.iphone5c.landscape {
      padding: 22px 105px;
      height: 320px;
      width: 568px; }
      .marvel-device.iphone5s.landscape .sleep, .marvel-device.iphone5c.landscape .sleep {
        right: -4px;
        top: calc(100% - 120px);
        height: 60px;
        width: 4px;
        border-radius: 0px 2px 2px 0px; }
      .marvel-device.iphone5s.landscape .volume, .marvel-device.iphone5c.landscape .volume {
        width: 27px;
        height: 4px;
        top: -4px;
        left: calc(100% - 180px);
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone5s.landscape .volume:before, .marvel-device.iphone5c.landscape .volume:before {
          width: 35px;
          height: 4px;
          top: 0px;
          right: -75px;
          left: auto;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone5s.landscape .volume:after, .marvel-device.iphone5c.landscape .volume:after {
          bottom: 0px;
          left: -64px;
          z-index: 999;
          height: 4px;
          width: 27px;
          border-radius: 2px 2px 0px 0px; }
      .marvel-device.iphone5s.landscape .sensor, .marvel-device.iphone5c.landscape .sensor {
        top: 160px;
        left: calc(100% - 60px);
        margin-left: 0px;
        margin-top: -32px; }
      .marvel-device.iphone5s.landscape .speaker, .marvel-device.iphone5c.landscape .speaker {
        height: 64px;
        width: 10px;
        left: calc(100% - 60px);
        top: 50%;
        margin-left: 0px;
        margin-top: -32px; }
      .marvel-device.iphone5s.landscape .camera, .marvel-device.iphone5c.landscape .camera {
        left: calc(100% - 32px);
        top: 50%;
        margin-left: 0px;
        margin-top: -5px; }
  .marvel-device.iphone5s .home {
    border-radius: 36px;
    width: 68px;
    box-shadow: inset 0 0 0 4px #2c2b2c;
    height: 68px;
    position: absolute;
    left: 50%;
    margin-left: -34px;
    bottom: 19px;
    z-index: 3; }
  .marvel-device.iphone5s .top-bar {
    top: 70px;
    position: absolute;
    left: 0; }
  .marvel-device.iphone5s .bottom-bar {
    bottom: 70px;
    position: absolute;
    left: 0; }
  .marvel-device.iphone5s.landscape .home {
    left: 19px;
    bottom: 50%;
    margin-bottom: -34px;
    margin-left: 0px; }
  .marvel-device.iphone5s.landscape .top-bar {
    left: 70px;
    top: 0px;
    width: 3px;
    height: 100%; }
  .marvel-device.iphone5s.landscape .bottom-bar {
    right: 70px;
    left: auto;
    bottom: 0px;
    width: 3px;
    height: 100%; }
  .marvel-device.iphone5s.silver {
    background: #bcbcbc; }
    .marvel-device.iphone5s.silver:before {
      background: #fcfcfc; }
    .marvel-device.iphone5s.silver .volume, .marvel-device.iphone5s.silver .sleep {
      background: #d6d6d6; }
    .marvel-device.iphone5s.silver .top-bar, .marvel-device.iphone5s.silver .bottom-bar {
      background: #eaebec; }
    .marvel-device.iphone5s.silver .home {
      box-shadow: inset 0 0 0 4px #bcbcbc; }
  .marvel-device.iphone5s.gold {
    background: #f9e7d3; }
    .marvel-device.iphone5s.gold:before {
      background: #fcfcfc; }
    .marvel-device.iphone5s.gold .volume, .marvel-device.iphone5s.gold .sleep {
      background: #f9e7d3; }
    .marvel-device.iphone5s.gold .top-bar, .marvel-device.iphone5s.gold .bottom-bar {
      background: white; }
    .marvel-device.iphone5s.gold .home {
      box-shadow: inset 0 0 0 4px #f9e7d3; }
  .marvel-device.iphone5c {
    background: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.iphone5c .top-bar, .marvel-device.iphone5c .bottom-bar {
      display: none; }
    .marvel-device.iphone5c .home {
      background: #242324;
      border-radius: 36px;
      width: 68px;
      height: 68px;
      z-index: 3;
      position: absolute;
      left: 50%;
      margin-left: -34px;
      bottom: 19px; }
      .marvel-device.iphone5c .home:after {
        width: 20px;
        height: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        position: absolute;
        display: block;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -11px;
        margin-left: -11px; }
    .marvel-device.iphone5c.landscape .home {
      left: 19px;
      bottom: 50%;
      margin-bottom: -34px;
      margin-left: 0px; }
    .marvel-device.iphone5c .volume, .marvel-device.iphone5c .sleep {
      background: #dddddd; }
    .marvel-device.iphone5c.red {
      background: #f96b6c; }
      .marvel-device.iphone5c.red .volume, .marvel-device.iphone5c.red .sleep {
        background: #ed5758; }
    .marvel-device.iphone5c.yellow {
      background: #f2dc60; }
      .marvel-device.iphone5c.yellow .volume, .marvel-device.iphone5c.yellow .sleep {
        background: #e5ce4c; }
    .marvel-device.iphone5c.green {
      background: #97e563; }
      .marvel-device.iphone5c.green .volume, .marvel-device.iphone5c.green .sleep {
        background: #85d94d; }
    .marvel-device.iphone5c.blue {
      background: #33a2db; }
      .marvel-device.iphone5c.blue .volume, .marvel-device.iphone5c.blue .sleep {
        background: #2694cd; }
  .marvel-device.iphone4s {
    padding: 129px 27px;
    width: 320px;
    height: 480px;
    background: #686868;
    border-radius: 54px; }
    .marvel-device.iphone4s:before {
      content: '';
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      top: 4px;
      left: 4px;
      z-index: 1;
      border-radius: 50px;
      background: #1e1e1e; }
    .marvel-device.iphone4s .top-bar {
      top: 60px;
      position: absolute;
      left: 0; }
    .marvel-device.iphone4s .bottom-bar {
      bottom: 90px;
      position: absolute;
      left: 0; }
    .marvel-device.iphone4s .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 72px;
      left: 134px;
      z-index: 3;
      margin-left: -5px;
      border-radius: 100%; }
    .marvel-device.iphone4s .speaker {
      background: #292728;
      width: 64px;
      height: 10px;
      position: absolute;
      top: 72px;
      left: 50%;
      z-index: 3;
      margin-left: -32px;
      border-radius: 5px; }
    .marvel-device.iphone4s .sensor {
      background: #292728;
      width: 40px;
      height: 10px;
      position: absolute;
      top: 36px;
      left: 50%;
      z-index: 3;
      margin-left: -20px;
      border-radius: 5px; }
    .marvel-device.iphone4s .home {
      background: #242324;
      border-radius: 100%;
      width: 72px;
      height: 72px;
      z-index: 3;
      position: absolute;
      left: 50%;
      margin-left: -36px;
      bottom: 30px; }
      .marvel-device.iphone4s .home:after {
        width: 20px;
        height: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        position: absolute;
        display: block;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -11px;
        margin-left: -11px; }
    .marvel-device.iphone4s .sleep {
      position: absolute;
      top: -4px;
      right: 60px;
      width: 60px;
      height: 4px;
      border-radius: 2px 2px 0px 0px;
      background: #4D4D4D; }
    .marvel-device.iphone4s .volume {
      position: absolute;
      left: -4px;
      top: 160px;
      height: 27px;
      width: 4px;
      border-radius: 2px 0px 0px 2px;
      background: #4D4D4D; }
      .marvel-device.iphone4s .volume:before {
        position: absolute;
        left: 0px;
        top: -70px;
        height: 35px;
        width: 4px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone4s .volume:after {
        position: absolute;
        left: 0px;
        bottom: -64px;
        height: 27px;
        width: 4px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone4s.landscape {
      padding: 27px 129px;
      height: 320px;
      width: 480px; }
      .marvel-device.iphone4s.landscape .bottom-bar {
        left: 90px;
        bottom: 0px;
        height: 100%;
        width: 3px; }
      .marvel-device.iphone4s.landscape .top-bar {
        left: calc(100% - 60px);
        top: 0px;
        height: 100%;
        width: 3px; }
      .marvel-device.iphone4s.landscape .camera {
        top: 134px;
        left: calc(100% - 72px);
        margin-left: 0; }
      .marvel-device.iphone4s.landscape .speaker {
        top: 50%;
        margin-left: 0;
        margin-top: -32px;
        left: calc(100% - 72px);
        width: 10px;
        height: 64px; }
      .marvel-device.iphone4s.landscape .sensor {
        height: 40px;
        width: 10px;
        left: calc(100% - 36px);
        top: 50%;
        margin-left: 0;
        margin-top: -20px; }
      .marvel-device.iphone4s.landscape .home {
        left: 30px;
        bottom: 50%;
        margin-left: 0;
        margin-bottom: -36px; }
      .marvel-device.iphone4s.landscape .sleep {
        height: 60px;
        width: 4px;
        right: -4px;
        top: calc(100% - 120px);
        border-radius: 0px 2px 2px 0px; }
      .marvel-device.iphone4s.landscape .volume {
        top: -4px;
        left: calc(100% - 187px);
        height: 4px;
        width: 27px;
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone4s.landscape .volume:before {
          right: -70px;
          left: auto;
          top: 0px;
          width: 35px;
          height: 4px;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone4s.landscape .volume:after {
          width: 27px;
          height: 4px;
          bottom: 0px;
          left: -64px;
          border-radius: 2px 2px 0px 0px; }
    .marvel-device.iphone4s.silver {
      background: #bcbcbc; }
      .marvel-device.iphone4s.silver:before {
        background: #fcfcfc; }
      .marvel-device.iphone4s.silver .home {
        background: #fcfcfc;
        box-shadow: inset 0 0 0 1px #bcbcbc; }
        .marvel-device.iphone4s.silver .home:after {
          border: 1px solid rgba(0, 0, 0, 0.2); }
      .marvel-device.iphone4s.silver .volume, .marvel-device.iphone4s.silver .sleep {
        background: #d6d6d6; }
  .marvel-device.nexus5 {
    padding: 50px 15px 50px 15px;
    width: 320px;
    height: 568px;
    background: #1e1e1e;
    border-radius: 20px; }
    .marvel-device.nexus5:before {
      border-radius: 600px / 50px;
      background: inherit;
      content: '';
      top: 0;
      position: absolute;
      height: 103.1%;
      width: calc(100% - 26px);
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%); }
    .marvel-device.nexus5 .top-bar {
      width: calc(100% - 8px);
      height: calc(100% - 6px);
      position: absolute;
      top: 3px;
      left: 4px;
      border-radius: 20px;
      background: #181818; }
      .marvel-device.nexus5 .top-bar:before {
        border-radius: 600px / 50px;
        background: inherit;
        content: '';
        top: 0;
        position: absolute;
        height: 103.0%;
        width: calc(100% - 26px);
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%); }
    .marvel-device.nexus5 .bottom-bar {
      display: none; }
    .marvel-device.nexus5 .sleep {
      width: 3px;
      position: absolute;
      left: -3px;
      top: 110px;
      height: 100px;
      background: inherit;
      border-radius: 2px 0px 0px 2px; }
    .marvel-device.nexus5 .volume {
      width: 3px;
      position: absolute;
      right: -3px;
      top: 70px;
      height: 45px;
      background: inherit;
      border-radius: 0px 2px 2px 0px; }
    .marvel-device.nexus5 .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 18px;
      left: 50%;
      z-index: 3;
      margin-left: -5px;
      border-radius: 100%; }
      .marvel-device.nexus5 .camera:before {
        background: #3c3d3d;
        width: 6px;
        height: 6px;
        content: '';
        display: block;
        position: absolute;
        top: 2px;
        left: -100px;
        z-index: 3;
        border-radius: 100%; }
    .marvel-device.nexus5.landscape {
      padding: 15px 50px 15px 50px;
      height: 320px;
      width: 568px; }
      .marvel-device.nexus5.landscape:before {
        width: 103.1%;
        height: calc(100% - 26px);
        border-radius: 50px / 600px; }
      .marvel-device.nexus5.landscape .top-bar {
        left: 3px;
        top: 4px;
        height: calc(100% - 8px);
        width: calc(100% - 6px); }
        .marvel-device.nexus5.landscape .top-bar:before {
          width: 103%;
          height: calc(100% - 26px);
          border-radius: 50px / 600px; }
      .marvel-device.nexus5.landscape .sleep {
        height: 3px;
        width: 100px;
        left: calc(100% - 210px);
        top: -3px;
        border-radius: 2px 2px 0px 0px; }
      .marvel-device.nexus5.landscape .volume {
        height: 3px;
        width: 45px;
        right: 70px;
        top: 100%;
        border-radius: 0px 0px 2px 2px; }
      .marvel-device.nexus5.landscape .camera {
        top: 50%;
        left: calc(100% - 18px);
        margin-left: 0;
        margin-top: -5px; }
        .marvel-device.nexus5.landscape .camera:before {
          top: -100px;
          left: 2px; }
  .marvel-device.s5 {
    padding: 60px 18px;
    border-radius: 42px;
    width: 320px;
    height: 568px;
    background: #bcbcbc; }
    .marvel-device.s5:before, .marvel-device.s5:after {
      width: calc(100% - 52px);
      content: '';
      display: block;
      height: 26px;
      background: inherit;
      position: absolute;
      border-radius: 500px / 40px;
      left: 50%;
      transform: translateX(-50%); }
    .marvel-device.s5:before {
      top: -7px; }
    .marvel-device.s5:after {
      bottom: -7px; }
    .marvel-device.s5 .bottom-bar {
      display: none; }
    .marvel-device.s5 .top-bar {
      border-radius: 37px;
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      top: 5px;
      left: 5px;
      background: radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 0 0, radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 3px 3px;
      background-color: white;
      background-size: 4px 4px;
      background-position: center;
      z-index: 2;
      position: absolute; }
      .marvel-device.s5 .top-bar:before, .marvel-device.s5 .top-bar:after {
        width: calc(100% - 48px);
        content: '';
        display: block;
        height: 26px;
        background: inherit;
        position: absolute;
        border-radius: 500px / 40px;
        left: 50%;
        transform: translateX(-50%); }
      .marvel-device.s5 .top-bar:before {
        top: -7px; }
      .marvel-device.s5 .top-bar:after {
        bottom: -7px; }
    .marvel-device.s5 .sleep {
      width: 3px;
      position: absolute;
      left: -3px;
      top: 100px;
      height: 100px;
      background: #cecece;
      border-radius: 2px 0px 0px 2px; }
    .marvel-device.s5 .speaker {
      width: 68px;
      height: 8px;
      position: absolute;
      top: 20px;
      display: block;
      z-index: 3;
      left: 50%;
      margin-left: -34px;
      background-color: #bcbcbc;
      background-position: top left;
      border-radius: 4px; }
    .marvel-device.s5 .sensor {
      display: block;
      position: absolute;
      top: 20px;
      right: 110px;
      background: #3c3d3d;
      border-radius: 100%;
      width: 8px;
      height: 8px;
      z-index: 3; }
      .marvel-device.s5 .sensor:after {
        display: block;
        content: '';
        position: absolute;
        top: 0px;
        right: 12px;
        background: #3c3d3d;
        border-radius: 100%;
        width: 8px;
        height: 8px;
        z-index: 3; }
    .marvel-device.s5 .camera {
      display: block;
      position: absolute;
      top: 24px;
      right: 42px;
      background: black;
      border-radius: 100%;
      width: 10px;
      height: 10px;
      z-index: 3; }
      .marvel-device.s5 .camera:before {
        width: 4px;
        height: 4px;
        background: #3c3d3d;
        border-radius: 100%;
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -2px;
        margin-left: -2px; }
    .marvel-device.s5 .home {
      position: absolute;
      z-index: 3;
      bottom: 17px;
      left: 50%;
      width: 70px;
      height: 20px;
      background: white;
      border-radius: 18px;
      display: block;
      margin-left: -35px;
      border: 2px solid black; }
    .marvel-device.s5.landscape {
      padding: 18px 60px;
      height: 320px;
      width: 568px; }
      .marvel-device.s5.landscape:before, .marvel-device.s5.landscape:after {
        height: calc(100% - 52px);
        width: 26px;
        border-radius: 40px / 500px;
        transform: translateY(-50%); }
      .marvel-device.s5.landscape:before {
        top: 50%;
        left: -7px; }
      .marvel-device.s5.landscape:after {
        top: 50%;
        left: auto;
        right: -7px; }
      .marvel-device.s5.landscape .top-bar:before, .marvel-device.s5.landscape .top-bar:after {
        width: 26px;
        height: calc(100% - 48px);
        border-radius: 40px / 500px;
        transform: translateY(-50%); }
      .marvel-device.s5.landscape .top-bar:before {
        right: -7px;
        top: 50%;
        left: auto; }
      .marvel-device.s5.landscape .top-bar:after {
        left: -7px;
        top: 50%;
        right: auto; }
      .marvel-device.s5.landscape .sleep {
        height: 3px;
        width: 100px;
        left: calc(100% - 200px);
        top: -3px;
        border-radius: 2px 2px 0px 0px; }
      .marvel-device.s5.landscape .speaker {
        height: 68px;
        width: 8px;
        left: calc(100% - 20px);
        top: 50%;
        margin-left: 0;
        margin-top: -34px; }
      .marvel-device.s5.landscape .sensor {
        right: 20px;
        top: calc(100% - 110px); }
        .marvel-device.s5.landscape .sensor:after {
          left: -12px;
          right: 0px; }
      .marvel-device.s5.landscape .camera {
        top: calc(100% - 42px);
        right: 24px; }
      .marvel-device.s5.landscape .home {
        width: 20px;
        height: 70px;
        bottom: 50%;
        margin-bottom: -35px;
        margin-left: 0;
        left: 17px; }
    .marvel-device.s5.black {
      background: #1e1e1e; }
      .marvel-device.s5.black .speaker {
        background: black; }
      .marvel-device.s5.black .sleep {
        background: #1e1e1e; }
      .marvel-device.s5.black .top-bar {
        background: radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 0 0, radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 3px 3px;
        background-color: #2c2b2c;
        background-size: 4px 4px; }
      .marvel-device.s5.black .home {
        background: #2c2b2c; }
  .marvel-device.lumia920 {
    padding: 80px 35px 125px 35px;
    background: #ffdd00;
    width: 320px;
    height: 533px;
    border-radius: 40px / 3px; }
    .marvel-device.lumia920 .bottom-bar {
      display: none; }
    .marvel-device.lumia920 .top-bar {
      width: calc(100% - 24px);
      height: calc(100% - 32px);
      position: absolute;
      top: 16px;
      left: 12px;
      border-radius: 24px;
      background: black;
      z-index: 1; }
      .marvel-device.lumia920 .top-bar:before {
        background: #1e1e1e;
        display: block;
        content: '';
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        top: 2px;
        left: 2px;
        position: absolute;
        border-radius: 22px; }
    .marvel-device.lumia920 .volume {
      width: 3px;
      position: absolute;
      top: 130px;
      height: 100px;
      background: #1e1e1e;
      right: -3px;
      border-radius: 0px 2px 2px 0px; }
      .marvel-device.lumia920 .volume:before {
        width: 3px;
        position: absolute;
        top: 190px;
        content: '';
        display: block;
        height: 50px;
        background: inherit;
        right: 0px;
        border-radius: 0px 2px 2px 0px; }
      .marvel-device.lumia920 .volume:after {
        width: 3px;
        position: absolute;
        top: 460px;
        content: '';
        display: block;
        height: 50px;
        background: inherit;
        right: 0px;
        border-radius: 0px 2px 2px 0px; }
    .marvel-device.lumia920 .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 34px;
      right: 130px;
      z-index: 5;
      border-radius: 5px; }
    .marvel-device.lumia920 .speaker {
      background: #292728;
      width: 64px;
      height: 10px;
      position: absolute;
      top: 38px;
      left: 50%;
      margin-left: -32px;
      border-radius: 5px;
      z-index: 3; }
    .marvel-device.lumia920.landscape {
      padding: 35px 80px 35px 125px;
      height: 320px;
      width: 568px;
      border-radius: 2px / 100px; }
      .marvel-device.lumia920.landscape .top-bar {
        height: calc(100% - 24px);
        width: calc(100% - 32px);
        left: 16px;
        top: 12px; }
      .marvel-device.lumia920.landscape .volume {
        height: 3px;
        right: 130px;
        width: 100px;
        top: 100%;
        border-radius: 0px 0px 2px 2px; }
        .marvel-device.lumia920.landscape .volume:before {
          height: 3px;
          right: 190px;
          top: 0px;
          width: 50px;
          border-radius: 0px 0px 2px 2px; }
        .marvel-device.lumia920.landscape .volume:after {
          height: 3px;
          right: 430px;
          top: 0px;
          width: 50px;
          border-radius: 0px 0px 2px 2px; }
      .marvel-device.lumia920.landscape .camera {
        right: 30px;
        top: calc(100% - 140px); }
      .marvel-device.lumia920.landscape .speaker {
        width: 10px;
        height: 64px;
        top: 50%;
        margin-left: 0;
        margin-top: -32px;
        left: calc(100% - 48px); }
    .marvel-device.lumia920.black {
      background: black; }
    .marvel-device.lumia920.white {
      background: white;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.lumia920.blue {
      background: #00acdd; }
    .marvel-device.lumia920.red {
      background: #CC3E32; }
  .marvel-device.htc-one {
    padding: 72px 25px 100px 25px;
    width: 320px;
    height: 568px;
    background: #bebebe;
    border-radius: 34px; }
    .marvel-device.htc-one:before {
      content: '';
      display: block;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      position: absolute;
      top: 2px;
      left: 2px;
      background: #adadad;
      border-radius: 32px; }
    .marvel-device.htc-one:after {
      content: '';
      display: block;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      top: 4px;
      left: 4px;
      background: #eeeeee;
      border-radius: 30px; }
    .marvel-device.htc-one .top-bar {
      width: calc(100% - 4px);
      height: 635px;
      position: absolute;
      background: #424242;
      top: 50px;
      z-index: 1;
      left: 2px; }
      .marvel-device.htc-one .top-bar:before {
        content: '';
        position: absolute;
        width: calc(100% - 4px);
        height: 100%;
        position: absolute;
        background: black;
        top: 0px;
        z-index: 1;
        left: 2px; }
    .marvel-device.htc-one .bottom-bar {
      display: none; }
    .marvel-device.htc-one .speaker {
      height: 16px;
      width: 216px;
      display: block;
      position: absolute;
      top: 22px;
      z-index: 2;
      left: 50%;
      margin-left: -108px;
      background: radial-gradient(#343434 25%, transparent 50%) 0 0, radial-gradient(#343434 25%, transparent 50%) 4px 4px;
      background-size: 4px 4px;
      background-position: top left; }
      .marvel-device.htc-one .speaker:after {
        content: '';
        height: 16px;
        width: 216px;
        display: block;
        position: absolute;
        top: 676px;
        z-index: 2;
        left: 50%;
        margin-left: -108px;
        background: inherit; }
    .marvel-device.htc-one .camera {
      display: block;
      position: absolute;
      top: 18px;
      right: 38px;
      background: #3c3d3d;
      border-radius: 100%;
      width: 24px;
      height: 24px;
      z-index: 3; }
      .marvel-device.htc-one .camera:before {
        width: 8px;
        height: 8px;
        background: black;
        border-radius: 100%;
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -4px; }
    .marvel-device.htc-one .sensor {
      display: block;
      position: absolute;
      top: 29px;
      left: 60px;
      background: #3c3d3d;
      border-radius: 100%;
      width: 8px;
      height: 8px;
      z-index: 3; }
      .marvel-device.htc-one .sensor:after {
        display: block;
        content: '';
        position: absolute;
        top: 0px;
        right: 12px;
        background: #3c3d3d;
        border-radius: 100%;
        width: 8px;
        height: 8px;
        z-index: 3; }
    .marvel-device.htc-one.landscape {
      padding: 25px 72px 25px 100px;
      height: 320px;
      width: 568px; }
      .marvel-device.htc-one.landscape .top-bar {
        height: calc(100% - 4px);
        width: 635px;
        left: calc(100% - 685px);
        top: 2px; }
      .marvel-device.htc-one.landscape .speaker {
        width: 16px;
        height: 216px;
        left: calc(100% - 38px);
        top: 50%;
        margin-left: 0px;
        margin-top: -108px; }
        .marvel-device.htc-one.landscape .speaker:after {
          width: 16px;
          height: 216px;
          left: calc(100% - 692px);
          top: 50%;
          margin-left: 0;
          margin-top: -108px; }
      .marvel-device.htc-one.landscape .camera {
        right: 18px;
        top: calc(100% - 38px); }
      .marvel-device.htc-one.landscape .sensor {
        left: calc(100% - 29px);
        top: 60px; }
        .marvel-device.htc-one.landscape .sensor :after {
          right: 0;
          top: -12px; }
  .marvel-device.ipad {
    width: 576px;
    height: 768px;
    padding: 90px 25px;
    background: #242324;
    border-radius: 44px; }
    .marvel-device.ipad:before {
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      content: '';
      display: block;
      top: 4px;
      left: 4px;
      border-radius: 40px;
      background: #1e1e1e; }
    .marvel-device.ipad .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 44px;
      left: 50%;
      margin-left: -5px;
      border-radius: 100%; }
    .marvel-device.ipad .top-bar, .marvel-device.ipad .bottom-bar {
      display: none; }
    .marvel-device.ipad .home {
      background: #242324;
      border-radius: 36px;
      width: 50px;
      height: 50px;
      position: absolute;
      left: 50%;
      margin-left: -25px;
      bottom: 22px; }
      .marvel-device.ipad .home:after {
        width: 15px;
        height: 15px;
        margin-top: -8px;
        margin-left: -8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        position: absolute;
        display: block;
        content: '';
        top: 50%;
        left: 50%; }
    .marvel-device.ipad.landscape {
      height: 576px;
      width: 768px;
      padding: 25px 90px; }
      .marvel-device.ipad.landscape .camera {
        left: calc(100% - 44px);
        top: 50%;
        margin-left: 0;
        margin-top: -5px; }
      .marvel-device.ipad.landscape .home {
        top: 50%;
        left: 22px;
        margin-left: 0;
        margin-top: -25px; }
    .marvel-device.ipad.silver {
      background: #bcbcbc; }
      .marvel-device.ipad.silver:before {
        background: #fcfcfc; }
      .marvel-device.ipad.silver .home {
        background: #fcfcfc;
        box-shadow: inset 0 0 0 1px #bcbcbc; }
        .marvel-device.ipad.silver .home:after {
          border: 1px solid rgba(0, 0, 0, 0.2); }
  .marvel-device.macbook {
    width: 960px;
    height: 600px;
    padding: 44px 44px 76px;
    margin: 0 auto;
    background: #bebebe;
    border-radius: 34px; }
    .marvel-device.macbook:before {
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      content: '';
      display: block;
      top: 4px;
      left: 4px;
      border-radius: 30px;
      background: #1e1e1e; }
    .marvel-device.macbook .top-bar {
      width: calc(100% + 2 * 70px);
      height: 40px;
      position: absolute;
      content: '';
      display: block;
      top: 680px;
      left: -70px;
      border-bottom-left-radius: 90px 18px;
      border-bottom-right-radius: 90px 18px;
      background: #bebebe;
      box-shadow: inset 0px -4px 13px 3px rgba(34, 34, 34, 0.6); }
      .marvel-device.macbook .top-bar:before {
        width: 100%;
        height: 24px;
        content: '';
        display: block;
        top: 0;
        left: 0;
        background: #f0f0f0;
        border-bottom: 2px solid #aaa;
        border-radius: 5px;
        position: relative; }
      .marvel-device.macbook .top-bar:after {
        width: 16%;
        height: 14px;
        content: '';
        display: block;
        top: 0;
        background: #ddd;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        border-radius: 0 0 20px 20px;
        box-shadow: inset 0px -3px 10px #999; }
    .marvel-device.macbook .bottom-bar {
      background: transparent;
      width: calc(100% + 2 * 70px);
      height: 26px;
      position: absolute;
      content: '';
      display: block;
      top: 680px;
      left: -70px; }
      .marvel-device.macbook .bottom-bar:before, .marvel-device.macbook .bottom-bar:after {
        height: calc(100% - 2px);
        width: 80px;
        content: '';
        display: block;
        top: 0;
        position: absolute; }
      .marvel-device.macbook .bottom-bar:before {
        left: 0;
        background: #f0f0f0;
        background: linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%); }
      .marvel-device.macbook .bottom-bar:after {
        right: 0;
        background: #f0f0f0;
        background: linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%); }
    .marvel-device.macbook .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 20px;
      left: 50%;
      margin-left: -5px;
      border-radius: 100%; }
    .marvel-device.macbook .home {
      display: none; }
  .marvel-device.iphone-x {
    width: 375px;
    height: 812px;
    padding: 26px;
    background: #fdfdfd;
    box-shadow: inset 0 0 11px 0 black;
    border-radius: 66px; }
    .marvel-device.iphone-x .overflow {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 66px;
      overflow: hidden; }
    .marvel-device.iphone-x .shadow {
      border-radius: 100%;
      width: 90px;
      height: 90px;
      position: absolute;
      background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 60%); }
    .marvel-device.iphone-x .shadow--tl {
      top: -20px;
      left: -20px; }
    .marvel-device.iphone-x .shadow--tr {
      top: -20px;
      right: -20px; }
    .marvel-device.iphone-x .shadow--bl {
      bottom: -20px;
      left: -20px; }
    .marvel-device.iphone-x .shadow--br {
      bottom: -20px;
      right: -20px; }
    .marvel-device.iphone-x:before {
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      position: absolute;
      top: 5px;
      content: '';
      left: 5px;
      border-radius: 61px;
      background: black;
      z-index: 1; }
    .marvel-device.iphone-x .inner-shadow {
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      position: absolute;
      top: 10px;
      overflow: hidden;
      left: 10px;
      border-radius: 56px;
      box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.66);
      z-index: 1; }
      .marvel-device.iphone-x .inner-shadow:before {
        box-shadow: inset 0 0 20px 0 #FFFFFF;
        width: 100%;
        height: 116%;
        position: absolute;
        top: -8%;
        content: '';
        left: 0;
        border-radius: 200px / 112px;
        z-index: 2; }
    .marvel-device.iphone-x .screen {
      border-radius: 40px;
      box-shadow: none; }
    .marvel-device.iphone-x .top-bar, .marvel-device.iphone-x .bottom-bar {
      width: 100%;
      position: absolute;
      height: 8px;
      background: rgba(0, 0, 0, 0.1);
      left: 0; }
    .marvel-device.iphone-x .top-bar {
      top: 80px; }
    .marvel-device.iphone-x .bottom-bar {
      bottom: 80px; }
    .marvel-device.iphone-x .volume, .marvel-device.iphone-x .volume:before, .marvel-device.iphone-x .volume:after, .marvel-device.iphone-x .sleep {
      width: 3px;
      background: #b5b5b5;
      position: absolute; }
    .marvel-device.iphone-x .volume {
      left: -3px;
      top: 116px;
      height: 32px; }
      .marvel-device.iphone-x .volume:before {
        height: 62px;
        top: 62px;
        content: '';
        left: 0; }
      .marvel-device.iphone-x .volume:after {
        height: 62px;
        top: 140px;
        content: '';
        left: 0; }
    .marvel-device.iphone-x .sleep {
      height: 96px;
      top: 200px;
      right: -3px; }
    .marvel-device.iphone-x .camera {
      width: 6px;
      height: 6px;
      top: 9px;
      border-radius: 100%;
      position: absolute;
      left: 154px;
      background: #0d4d71; }
    .marvel-device.iphone-x .speaker {
      height: 6px;
      width: 60px;
      left: 50%;
      position: absolute;
      top: 9px;
      margin-left: -30px;
      background: #171818;
      border-radius: 6px; }
    .marvel-device.iphone-x .notch {
      position: absolute;
      width: 210px;
      height: 30px;
      top: 26px;
      left: 108px;
      z-index: 4;
      background: black;
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px; }
      .marvel-device.iphone-x .notch:before, .marvel-device.iphone-x .notch:after {
        content: '';
        height: 8px;
        position: absolute;
        top: 0;
        width: 8px; }
      .marvel-device.iphone-x .notch:after {
        background: radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);
        left: -8px; }
      .marvel-device.iphone-x .notch:before {
        background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);
        right: -8px; }
    .marvel-device.iphone-x.landscape {
      height: 375px;
      width: 812px; }
      .marvel-device.iphone-x.landscape .top-bar, .marvel-device.iphone-x.landscape .bottom-bar {
        width: 8px;
        height: 100%;
        top: 0; }
      .marvel-device.iphone-x.landscape .top-bar {
        left: 80px; }
      .marvel-device.iphone-x.landscape .bottom-bar {
        right: 80px;
        bottom: auto;
        left: auto; }
      .marvel-device.iphone-x.landscape .volume, .marvel-device.iphone-x.landscape .volume:before, .marvel-device.iphone-x.landscape .volume:after, .marvel-device.iphone-x.landscape .sleep {
        height: 3px; }
      .marvel-device.iphone-x.landscape .inner-shadow:before {
        height: 100%;
        width: 116%;
        left: -8%;
        top: 0;
        border-radius: 112px / 200px; }
      .marvel-device.iphone-x.landscape .volume {
        bottom: -3px;
        top: auto;
        left: 116px;
        width: 32px; }
        .marvel-device.iphone-x.landscape .volume:before {
          width: 62px;
          left: 62px;
          top: 0; }
        .marvel-device.iphone-x.landscape .volume:after {
          width: 62px;
          left: 140px;
          top: 0; }
      .marvel-device.iphone-x.landscape .sleep {
        width: 96px;
        left: 200px;
        top: -3px;
        right: auto; }
      .marvel-device.iphone-x.landscape .camera {
        left: 9px;
        bottom: 154px;
        top: auto; }
      .marvel-device.iphone-x.landscape .speaker {
        width: 6px;
        height: 60px;
        left: 9px;
        top: 50%;
        margin-top: -30px;
        margin-left: 0; }
      .marvel-device.iphone-x.landscape .notch {
        height: 210px;
        width: 30px;
        left: 26px;
        bottom: 108px;
        top: auto;
        border-top-right-radius: 24px;
        border-bottom-right-radius: 24px;
        border-bottom-left-radius: 0; }
        .marvel-device.iphone-x.landscape .notch:before, .marvel-device.iphone-x.landscape .notch:after {
          left: 0; }
        .marvel-device.iphone-x.landscape .notch:after {
          background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);
          bottom: -8px;
          top: auto; }
        .marvel-device.iphone-x.landscape .notch:before {
          background: radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%);
          top: -8px; }
  .marvel-device.note8 {
    width: 400px;
    height: 822px;
    background: black;
    border-radius: 34px;
    padding: 45px 10px; }
    .marvel-device.note8 .overflow {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 34px;
      overflow: hidden; }
    .marvel-device.note8 .speaker {
      height: 8px;
      width: 56px;
      left: 50%;
      position: absolute;
      top: 25px;
      margin-left: -28px;
      background: #171818;
      z-index: 1;
      border-radius: 8px; }
    .marvel-device.note8 .camera {
      height: 18px;
      width: 18px;
      left: 86px;
      position: absolute;
      top: 18px;
      background: #212b36;
      z-index: 1;
      border-radius: 100%; }
      .marvel-device.note8 .camera:before {
        content: '';
        height: 8px;
        width: 8px;
        left: -22px;
        position: absolute;
        top: 5px;
        background: #212b36;
        z-index: 1;
        border-radius: 100%; }
    .marvel-device.note8 .sensors {
      height: 10px;
      width: 10px;
      left: 120px;
      position: absolute;
      top: 22px;
      background: #1d233b;
      z-index: 1;
      border-radius: 100%; }
      .marvel-device.note8 .sensors:before {
        content: '';
        height: 10px;
        width: 10px;
        left: 18px;
        position: absolute;
        top: 0;
        background: #1d233b;
        z-index: 1;
        border-radius: 100%; }
    .marvel-device.note8 .more-sensors {
      height: 16px;
      width: 16px;
      left: 285px;
      position: absolute;
      top: 18px;
      background: #33244a;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
      z-index: 1;
      border-radius: 100%; }
      .marvel-device.note8 .more-sensors:before {
        content: '';
        height: 11px;
        width: 11px;
        left: 40px;
        position: absolute;
        top: 4px;
        background: #214a61;
        z-index: 1;
        border-radius: 100%; }
    .marvel-device.note8 .sleep {
      width: 2px;
      height: 56px;
      background: black;
      position: absolute;
      top: 288px;
      right: -2px; }
    .marvel-device.note8 .volume {
      width: 2px;
      height: 120px;
      background: black;
      position: absolute;
      top: 168px;
      left: -2px; }
      .marvel-device.note8 .volume:before {
        content: '';
        top: 168px;
        width: 2px;
        position: absolute;
        left: 0;
        background: black;
        height: 56px; }
    .marvel-device.note8 .inner {
      width: 100%;
      height: calc(100% - 8px);
      position: absolute;
      top: 2px;
      content: '';
      left: 0px;
      border-radius: 34px;
      border-top: 2px solid #9fa0a2;
      border-bottom: 2px solid #9fa0a2;
      background: black;
      z-index: 1;
      box-shadow: inset 0 0 6px 0 rgba(255, 255, 255, 0.5); }
    .marvel-device.note8 .shadow {
      box-shadow: inset 0 0 60px 0 white, inset 0 0 30px 0 rgba(255, 255, 255, 0.5), 0 0 20px 0 white, 0 0 20px 0 rgba(255, 255, 255, 0.5);
      height: 101%;
      position: absolute;
      top: -0.5%;
      content: '';
      width: calc(100% - 20px);
      left: 10px;
      border-radius: 38px;
      z-index: 5;
      pointer-events: none; }
    .marvel-device.note8 .screen {
      border-radius: 14px;
      box-shadow: none; }
    .marvel-device.note8.landscape {
      height: 400px;
      width: 822px;
      padding: 10px 45px; }
      .marvel-device.note8.landscape .speaker {
        height: 56px;
        width: 8px;
        top: 50%;
        margin-top: -28px;
        margin-left: 0;
        right: 25px;
        left: auto; }
      .marvel-device.note8.landscape .camera {
        top: 86px;
        right: 18px;
        left: auto; }
        .marvel-device.note8.landscape .camera:before {
          top: -22px;
          left: 5px; }
      .marvel-device.note8.landscape .sensors {
        top: 120px;
        right: 22px;
        left: auto; }
        .marvel-device.note8.landscape .sensors:before {
          top: 18px;
          left: 0; }
      .marvel-device.note8.landscape .more-sensors {
        top: 285px;
        right: 18px;
        left: auto; }
        .marvel-device.note8.landscape .more-sensors:before {
          top: 40px;
          left: 4px; }
      .marvel-device.note8.landscape .sleep {
        bottom: -2px;
        top: auto;
        right: 288px;
        width: 56px;
        height: 2px; }
      .marvel-device.note8.landscape .volume {
        width: 120px;
        height: 2px;
        top: -2px;
        right: 168px;
        left: auto; }
        .marvel-device.note8.landscape .volume:before {
          right: 168px;
          left: auto;
          top: 0;
          width: 56px;
          height: 2px; }
      .marvel-device.note8.landscape .inner {
        height: 100%;
        width: calc(100% - 8px);
        left: 2px;
        top: 0;
        border-top: 0;
        border-bottom: 0;
        border-left: 2px solid #9fa0a2;
        border-right: 2px solid #9fa0a2; }
      .marvel-device.note8.landscape .shadow {
        width: 101%;
        height: calc(100% - 20px);
        left: -0.5%;
        top: 10px; }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide a {
    float: left;
    display: inline-block;
    display: block;
    margin: 0;
    padding: 0; }
  .slick-slide img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
    display: inline-block;
    float: left; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

/* START: Any third party dependancies below */