/*
nustyles file
Nupolitan Theme
By Nupolitan: Allison Pillar and Ludvik Herrera | http://nupolitan.com
*/

/*  ************************************
Table of Contents

AA  Color Palette + Typography
BB	Common Styles
  01	Grid
  02	Navbar
  03	Icon Boxes
  04	Home Section
  05	About Page
  06	Bio Page
  07	Contact Page
  08	Error Page
  09	Work portfolio
  10	Single Project Page
  11	Blog
  12	Single Blog Page
  13	Components
  14	Alerts
  15	Gallery Page
  16	Footer
CC	Media Queries
DD	Animations

*** END TOC */

/* ---------------------------------------- START Color Palette + Typography
#EF463A Brand - color_brand
#0099D8 Design Systems - color_design
#4C3393 Interactive - color_ixd
#485865 Product - color_product
#94519F UX - color_ux
*/

@font-face {
  font-family : 'steelfishextrabold';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/steelfish_eb-webfont.woff2') format('woff2'),
                url('/css/fonts/steelfish_eb-webfont.woff') format('woff');
}

@font-face {
  font-family : 'steelfish_rgbold';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/steelfish_bd-webfont.woff2') format('woff2'),
                url('/css/fonts/steelfish_bd-webfont.woff') format('woff');
}

@font-face {
  font-family : 'steelfish_rgregular';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/steelfish_rg-webfont.woff2') format('woff2'),
                url('/css/fonts/steelfish_rg-webfont.woff') format('woff');
}

@font-face {
  font-family : 'NeueHaasUnicaPro-Heavy';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/338A9C_5_0.eot');
  src         : url('/css/fonts/338A9C_5_0.eot?#iefix') format('embedded-opentype'),
                url('/css/fonts/338A9C_5_0.woff2') format('woff2'),
                url('/css/fonts/338A9C_5_0.woff') format('woff');
}

@font-face {
  font-family: 'NeueHaasUnicaPro-Regular';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/338A9C_C_0.eot');
  src         : url('/css/fonts/338A9C_C_0.eot?#iefix') format('embedded-opentype'),
                url('/css/fonts/338A9C_C_0.woff2') format('woff2'),
                url('/css/fonts/338A9C_C_0.woff') format('woff');
}

@font-face {
  font-family: 'NeueHaasUnicaPro-Light';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/338A9C_8_0.eot');
  src         : url('/css/fonts/338A9C_8_0.eot?#iefix') format('embedded-opentype'),
                url('/css/fonts/338A9C_8_0.woff2') format('woff2'),
                url('/css/fonts/338A9C_8_0.woff') format('woff');
}

@font-face {
  font-family: 'NeueHaasUnicaPro-Thin';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/338A9C_D_0.eot');
  src         : url('/css/fonts/338A9C_D_0.eot?#iefix') format('embedded-opentype'),
                url('/css/fonts/338A9C_D_0.woff2') format('woff2'),
                url('/css/fonts/338A9C_D_0.woff') format('woff');
}

@font-face {
  font-family: 'NeueHaasUnicaPro-ThinItalic';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/338A9C_E_0.eot');
  src         : url('/css/fonts/338A9C_E_0.eot?#iefix') format('embedded-opentype'),
                url('/css/fonts/338A9C_E_0.woff2') format('woff2'),
                url('/css/fonts/338A9C_E_0.woff') format('woff');
}

@font-face {
  font-family: 'NeueHaasUnicaPro-UltraLight';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/338A9C_10_0.eot');
  src         : url('/css/fonts/338A9C_10_0.eot?#iefix') format('embedded-opentype'),
                url('/css/fonts/338A9C_10_0.woff2') format('woff2'),
                url('/css/fonts/338A9C_10_0.woff') format('woff');
}

@font-face {
  font-family: 'NeueHaasUnicaPro-XBlack';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/338A9C_11_0.eot');
  src         : url('/css/fonts/338A9C_11_0.eot?#iefix') format('embedded-opentype'),
                url('/css/fonts/338A9C_11_0.woff2') format('woff2'),
                url('/css/fonts/338A9C_11_0.woff') format('woff');
}

@font-face {
  font-family: 'HelveticaNowDisplay-XBold';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/Monotype----Helvetica-Now-Display-XBold.eot');
  src         : url('/css/fonts/Monotype----Helvetica-Now-Display-XBold.woff2') format('woff2'),
                url('/css/fonts/Monotype----Helvetica-Now-Display-XBold.woff') format('woff');
}

@font-face {
  font-family: 'HelveticaNowDisplay-Light';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/Monotype----Helvetica-Now-Display-Light.eot');
  src         : url('/css/fonts/Monotype----Helvetica-Now-Display-Light.woff2') format('woff2'),
                url('/css/fonts/Monotype----Helvetica-Now-Display-Light.woff') format('woff');
}

@font-face {
  font-family: 'HelveticaNowText-Light';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/Monotype----Helvetica-Now-Text-Light.eot');
  src         : url('/css/fonts/Monotype----Helvetica-Now-Text-Light.woff2') format('woff2'),
                url('/css/fonts/Monotype----Helvetica-Now-Text-Light.woff') format('woff');
}

@font-face {
  font-family: 'IBMPlexMono-Bold';
  font-style  : normal;
  font-weight : normal;
  src         : url('/css/fonts/IBMPlexMono-Bold.eot');
  src         : url('/css/fonts/IBMPlexMono-Bold.woff2') format('woff2'),
                url('/css/fonts/IBMPlexMono-Bold.woff') format('woff');
}

.ux {
  background : #e2435d /* Rich pink */;
}

.ixd {
  background : #0fa2e2 /* 428bca */ /* Rich blue */;
}

/* ---------------------------------------- START Common styles + Mobile /// */

body,
html {
  box-sizing : content-box;
  height     : 100%;
}

body {
  /*margin                  : 10px;*/
  padding-top             : 45px;
  font-family             : 'HelveticaNowText-Light',
                            'Roboto',
                            'Raleway',
                            sans-serif;
  font-size               : 14px;
  font-weight             : normal;
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

::-moz-selection {
  color            : #ffffff;
  background-color : #333333;
}

::selection {
  background-color : #333333;
}

img {
  display : block;
  width   : 100%;
  height  : auto;
}

img.small {
width	  : 20%;
margin	  : 5rem auto;
}

h1,
h2,
h3
 {
  font-family    : 'steelfish_rgbold',
                   Arial,
                   sans-serif;
  font-weight    : normal;
  letter-spacing : 0em;
  text-transform : uppercase;
  color			 : black;
}

h4,
h5,
h6 {
  font-family    : 'HelveticaNowDisplay-XBold',
                   Arial,
                   sans-serif;
  font-weight    : normal;
  letter-spacing: -.025rem;
  margin		 : .5rem 0;
  color			 : black;
}

.h1,
h1 {
  margin-top     : .25em;
  margin-bottom  : 0em;
  /* font-size : calc( 5.35rem + .5vw ); FORMULA SIZE */
  font-size: 6rem;
}

h1:first-child {
  margin-top : 0;
}

.about h1 {
margin-top: .5em;
}

.h1sub {
    font-size: .45em;
    display: block;
    margin-top: -.25em;
   /* margin-bottom: 1.0em; */
}

.h2,
h2 {
  /*font-size: calc( 3.85rem + .5vw ); FORMULA SIZE */
  font-size: 4rem;
  margin: 0;
}

.h3,
h3 {
  margin-top    : .75rem;
  margin-bottom : 1rem;
  /*font-size     : calc( 2.85rem + .5vw ); FORMULA SIZE */
  font-size: 3.25rem;
  
}

.h4,
h4 {
  /*font-size: calc( 1.85rem + .5vw ); FORMULA SIZE */
  font-size: 1.5rem;
}

.h5,
h5 {
  /*font-size: calc( 1.35rem + .5vw ); FORMULA SIZE */
  font-size: 1.75rem;
}

.h6,
h6 {
  /*font-size: calc( 1rem + .5vw ); FORMULA SIZE */
  font-size: 1rem;
}

p {
  color       : #000000;
  font-family : "HelveticaNowText-Light",
                Helvetica,
                Arial,
                sans-serif;
  /*font-size    : calc( .85rem + .5vw ); FORMULA SIZE */
  font-size: 1rem;
  line-height: 1.35;
}

p {
  color : #EF463A;
  color : #666666;
}

.drk {
  margin: 0;
  padding: 2em;
  background: #EF463A;
}

.drk q, .drk p, .drk h1, .drk h2, .drk h3, .drk h4, .drk h5, .drk h6 {
  color : #FFFFFF;
}

.light {
  color : #FFFFFF;
  fill  : #FFFFFF;
}

.no-pad {
  padding : 0 !important;
}

.hlt {
/*color: #FFFFFF;
background: #485865;*/
    background-image: linear-gradient(to right, transparent 50%, rgba(255,255,0,0.75) 50%);
    background-size: 200% 35%;
    background-repeat: repeat-x;
    background-position: -100% 100%;
}

.bold {
font-weight: bold;
}

  header.hero.nuheader {
  padding: 0 12.5vw;
  width: 75vw;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  }
  
  header.hero.nuheader * {
    color: #000;
    }
    

.work.nuheader h2 {
margin-bottom: 0;
}
    
  header .mainheading {
    padding-top: 30vh;
    margin-bottom: 0;
  }
  
  .hero.left {
    width: 50%;
    height: 55%;
    position: absolute;
    z-index: -100;
    top: 0;
}
  
  .hero.right {
    width: 90%;
    height: 40%;
    position: absolute;
    z-index: -100;
    margin-left: 10%;
}
  
  .visual {
    height: 100%;
    position: absolute;
    z-index: -100;
    top: 1rem;
  }
  
    main {
  margin: 0 12.5%;
  }
  
  .row.contact, .row.blog, .row.work {
    flex-direction: column;
    margin-top: 0;
}
  
  .calltoaction div:first-child {
  border: 2px solid black;
  margin-top: 4em;
  }
  
  .actioninfo {
  	justify-content: flex-end;
    display: flex;
    flex-direction: column;
  }
  
  .actioninfo p {
    margin-bottom: 0;
}

.aside-eyes {
	display: none;
}


article ul {
    font-family: 'HelveticaNowText-Light', 'Roboto', 'Raleway', sans-serif;
    font-size: 1rem;
    margin: 0;
    color: #666666;
    position: relative;
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
}

article ul li {
	display: list-item;
}

article ul li:before {
    content: "+";
    position: absolute;
    left: 0;
    font-family: "IBMPlexMono-Bold", monospace;
}

ul.mono-list {
    font-family: "IBMPlexMono-Bold", monospace;
    line-height: 2;
    color: black;
}



/* ----------------------------------------------------------- START Tiles */

.tile {
  overflow : hidden;
}

.tile p {
  position    : absolute;
  top         : 0;
  left        : 0;
  width       : 100%;
  height      : 100%;
  margin      : 0;
  padding     : 0;
  font-family : 'steelfish_rgbold',
                Arial,
                sans-serif;
  /*font-size   : 2vw;*/
  font-size: calc( .75rem + 1vw );
  font-weight : normal;
}

.row.grid_1 p, .row.grid_2 p, .row.grid_3 p , .row.grid_4 p {
/*font-size: 2vw;*/
}

.tile p a {
  display         : flex;
  position        : absolute;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  color           : #FFFFFF;
  opacity         : 0;
  text-align      : center;
  text-decoration : none;
  align-items     : center;
  justify-content : center;
  text-transform  : uppercase;
  /* background: rgba(0,0,0,.5); */
}

.tile.fixed p a {
  opacity : 1;
}

.tile p a, .tile p a span {
  transition      : .25s ease-in;
}

.reverse p a {
  color : black;
}

/* .reverse p a:hover { color: #EF463A; } */

.tile.fixed p a:hover,
.tile p a:hover, .workrel .tile p a:hover, #nugrid .tile p a:hover  {
  color      : #FFFFFF;
  opacity    : 1;
  background : rgba(0,0,0,.5);
}

.tile.fixed p a span,
.tile p a span, #nugrid .tile p a span {
    padding : 0 1rem;
}

.tile.fixed p a:hover span,
.tile p a:hover span {
/* transform: scale(1.2); */
 animation: zoomUp 600ms ease-in-out 0s forwards;
}

.tile .tilecat {
font-size: 0.5em;
text-transform: uppercase;
display: block;
font-style: normal;
}

.with-icon p a span {
  padding : 0 .5em 0 0 !important;
}

/*.lg p {
  font-size : 6vw;
}*/

#lid {
  -webkit-animation: blink 5s infinite;
          animation: blink 5s infinite;
}

.tile:hover #whole-eye {
  animation: popUp 800ms ease-in-out 0s forwards;
}

/* ----------------------------------------------------------- END Tiles */

/* ----------------------------------------------------------- START Anchors */


a {
  position        : relative;
  color           : #666666;
  text-decoration : none;
}

p a {
  border-bottom   : 1px solid;
}

.overlay ul li a {
  color           : #FFFFFF;
}

a::after {
  content           : "";
  display           : inline-block;
  position          : absolute;
  left              : 50%;
  width             : 0%;
  height            : 2px;
  opacity           : 0;
  -moz-transform    : translateY(0px);
  -webkit-transform : translateY(0px);
  transform         : translateY(0px);
  transform-origin  : 0% 0%;
}

a:hover:after, .overlay ul li a:hover:after {
  bottom            : 0px;
  background        : #EF463A;
  left              : 0;
  width             : 100%;
  opacity           : 1;
  -moz-transform    : translateY(0px);
  -webkit-transform : translateY(0px);
  transform         : translateY(0px);
  transition        : bottom 0.3s,
                      top 0.3s,
                      width 0.5s,
                      opacity 0.35s,
                      left 0.35s,
                      translateY 0.3s;
}

a:hover, .overlay ul li a:hover, .blog-info p a:hover {
  color         : #EF463A;
  opacity       : 1;
  border-bottom : 0;
  cursor: pointer;
  cursor: hand;
}

span.empty-link-fix {
 height: 1px;
 width: 1px;
 position: absolute;
 overflow: hidden;
 top: -10px;
}

.drk a {
  color         : #FFFFFF;
  padding       : 2px;
}

.drk a::after, .drk a::before {
background: #FFFFFF;
}

.drk a:hover, drk a:hover:after {
  color         : #EF463A;
  color         : #FFFFFF;
  opacity       : 0.85;
  border-bottom : 0;
  background    : rgba(0,0,0,.5);
}

.more {
  font-family : "IBMPlexMono-Bold",
                monospace;
   /*font-size    : calc( .75rem + .5vw ); FORMULA SIZE */
   font-size: .9rem;
   background-image: linear-gradient(to right, transparent 50%, rgba(255,255,0,0.75) 50%);
   background-size: 200% 35%;
   background-repeat: repeat-x;
   background-position: -100% 100%;
   transition: background-size .2s;
   color: black;
   /*border-bottom: 0;*/
}

.more:hover {
	background-size: 200% 0%;
    cursor: pointer;
    cursor: hand;
}

a.nodecor {

}

a.nodecor::after {

}

.header_logo a:hover:after, a.menu:hover:after, .search a:hover:after{
background: none;
}

/* START ??????????

a:focus {
  color           : #1b0207;
  text-decoration : none;
}

a.small-link {
  font-size      : 11px;
  font-weight    : 500;
  letter-spacing : 2px;
}

END ??????????? */

/* ------------------------------------------------------------- END Anchors  */

/* -------------------------------------------- END Common styles + Mobile */

/* -------------------------------------------- START 01	Grid ///////////// */


.col {
  position : relative;
  flex     : 1;
}

.row {
  margin  : 0;
  padding : 0;
  position: relative;
}



/*.ctr {
  display: flex;
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.ctr.horz {
  align-items: center;
}

.ctr.vert {
justify-content: center;
}

div {
  box-sizing : border-box;
  padding    : 10px;
}

.row img {
  padding : 5px 0;
}

ul {
  padding: 0;
}



hr {
  height           : 1px;
  color            : rgba(0,0,0,.25);
  border           : none;
  background-color : rgba(0,0,0,.25);
}

hr.dark {
  display : none;
  height           : 1px;
  color            : rgba(0,0,0,1);
  border           : none;
  background-color : rgba(0,0,0,1);
}*/



/* -------------------------------------------- END 01	Grid ///////////// */

/* -------------------------------------------- START 02	Navbar /////////// */

div.header {
  z-index  : 10;
  display  : flex;
  position : fixed;
  top      : 0px;
  left     : 0;
  width    : 75%;
  margin   : 0;
  padding  : 0 12.5%;
  /* height: 65px; */
  /*font-family: 'NeueHaasUnicaPro-Light', 'Roboto', 'Raleway', sans-serif;*/
}

.col.header_logo {
    padding: 10px 0;
}

.header_logo {
    max-width: 100%;
    flex: 8;
    flex-basis: 75%;
}

.header_logo a {
  display         : flex;
  width           : 100%;
  /*justify-content : center;*/
}

.dark {
  color: #000000 !important;
}

/*.light .logo_full {
  background-image    : url('/images/general/full_logo_lt.svg');
}*/

.light .search span, .light nav a {
  color: #FFFFFF;
}

.logo_full {
  display             : flex;
  width               : 50%;
  height              : 2rem;
/*  background-image    : url('/images/general/full_logo.svg'); */
  background-repeat   : no-repeat;
  background-position : center;
  background-size     : contain;*/
  -moz-transition     : all 200ms linear;
  -ms-transition      : all 200ms linear;
  -o-transition       : all 200ms linear;
  -webkit-transition  : all 200ms linear;
  transition          : all 200ms linear;
}

.logo_full svg#logo_full {
  height: 100%;
}

g.politan { }

 /*.logo_min {
  display             : flex;
  position            : fixed;
  top                 : 10px;
 left                : 20%;
  width               : 50%;
  height              : 2rem;
  opacity             : 0;
  background-image    : url('/images/general/nu_logo.svg');
  background-repeat   : no-repeat;
  background-position : center; 
  background-size     : contain;
  -moz-transition     : all 200ms linear;
  -ms-transition      : all 200ms linear;
  -o-transition       : all 200ms linear;
  -webkit-transition  : all 200ms linear;
  transition          : all 200ms linear;
}*/

.fade-out {
  opacity             : 1;
  animation           : fade-out .5s ease-in;
  animation-fill-mode : forwards;
}

.menu.taco {
  display      : none;
  width        : 20px;
}

#menu {
  position           : fixed;
  top                : 0px;
  left               : 0px;
  width              : 100%;
  height             : 100%;
  opacity            : 0;
  -moz-transform     : translate(100%, -100%) scale(0, 0);
  -ms-transform      : translate(100%, -100%) scale(0, 0);
  -o-transform       : translate(100%, -100%) scale(0, 0);
  -webkit-transform  : translate(100%, -100%) scale(0, 0);
  transform          : translate(100%, -100%) scale(0, 0);
  -moz-transition    : all 0.5s ease-in-out;
  -ms-transition     : all 0.5s ease-in-out;
  -o-transition      : all 0.5s ease-in-out;
  -webkit-transition : all 0.5s ease-in-out;
  transition         : all 0.5s ease-in-out;
  z-index: 10;
}

#menu.open {
  opacity           : 1;
  -moz-transform    : translate(0px, 0px) scale(1, 1);
  -ms-transform     : translate(0px, 0px) scale(1, 1);
  -o-transform      : translate(0px, 0px) scale(1, 1);
  -webkit-transform : translate(0px, 0px) scale(1, 1);
  transform         : translate(0px, 0px) scale(1, 1);
}

.nav {
  display     : flex;
  align-items : center;
  justify-content: flex-end;
  font-family: "HelveticaNowText-Light", Helvetica, Arial, sans-serif;
  /*font-size: calc( .5rem + .5vw ); FORMULA SIZE */
  font-size: 1rem;
}

.nav_collapse {
  display          : none;
  background-image : url(images/taco_menu.svg);
}

.nav ul {
  display      : flex;
  /*margin       : 0;*/
  /*padding-left : 20px;*/
  list-style   : none;
}

.nav ul li {
  margin-right: calc( 1.5rem + .5vw);
}

.nav ul li:last-of-type {
  margin-right: 0;
}

.overlay {
  background-color : rgba(0, 0, 0, 0.9);
}

.overlay.open li {
  -webkit-animation       : fadeInRight .5s ease forwards;
  animation               : fadeInRight .5s ease forwards;
  -webkit-animation-delay : .75s;
  animation-delay         : .75s;
}

.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay : .85s;
  animation-delay         : .85s;
}

.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay : .95s;
  animation-delay         : .95s;
}

.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay : 1.05s;
  animation-delay         : 1.05s;
}

.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay : 1.15s;
  animation-delay         : 1.15s;
}

.overlay.open li:nth-of-type(6) {
  -webkit-animation-delay : 1.25s;
  animation-delay         : 1.25s;
}

.overlay.open li:nth-of-type(7) {
  -webkit-animation-delay : 1.35s;
  animation-delay         : 1.35s;
}

.overlay.open li:nth-of-type(8) {
  -webkit-animation-delay : 1.45s;
  animation-delay         : 1.45s;
}

.overlay.open li:nth-of-type(9) {
  -webkit-animation-delay : 1.55s;
  animation-delay         : 1.55s;
}

.overlay nav {
    z-index: 200;
    position: relative;
    top: 50%;
    height: 70%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: 'steelfish_rgbold', Arial, sans-serif;
    font-weight: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    /* font-size: calc( 2.85rem + .5vw ); FORMULA SIZE */
    font-size: 2rem;
    padding-left: 10%;
}

.overlay ul {
  display    : inline-block;
  position   : relative;
  height     : 100%;
  margin     : 0 auto;
  padding    : 0;
  text-align : left;
  list-style : none;
}

.overlay ul li {
  display    : block;
  position   : relative;
  height     : 25%;
  height     : calc(100% / 7);
  min-height : 50px;
  opacity    : 0;
}

.overlay ul li a span {
  color : #EF463A;
}

.search {
  display         : flex;
  max-width       : 25%;
  padding-right   : 20px;
  align-items     : center;
  flex            : 3;
  flex-basis      : 25%;
  justify-content : flex-end;
}

.search span {
  color : #000;
}

#search {
  position           : fixed;
  top                : 0px;
  left               : 0px;
  width              : 100%;
  height             : 100%;
  opacity            : 0;
  -moz-transform     : translate(100%, -100%) scale(0, 0);
  -ms-transform      : translate(100%, -100%) scale(0, 0);
  -o-transform       : translate(100%, -100%) scale(0, 0);
  -webkit-transform  : translate(100%, -100%) scale(0, 0);
  transform          : translate(100%, -100%) scale(0, 0);
  -moz-transition    : all 0.5s ease-in-out;
  -ms-transition     : all 0.5s ease-in-out;
  -o-transition      : all 0.5s ease-in-out;
  -webkit-transition : all 0.5s ease-in-out;
  transition         : all 0.5s ease-in-out;
}

#search.open {
  opacity           : 1;
  -moz-transform    : translate(0px, 0px) scale(1, 1);
  -ms-transform     : translate(0px, 0px) scale(1, 1);
  -o-transform      : translate(0px, 0px) scale(1, 1);
  -webkit-transform : translate(0px, 0px) scale(1, 1);
  transform         : translate(0px, 0px) scale(1, 1);
}

#search input[type="search"] {
    position: absolute;
    top: 45%;
    left: 20%;
    width: 60%;
    margin: 0px auto;
    margin-top: -51px;
    color: rgb(255, 255, 255);
    border: none;
    border-bottom: 2px solid;
    background: rgba(0, 0, 0, 0);
    outline: none;
    font-family    : 'HelveticaNowDisplay-XBold',
                   Arial,
                   sans-serif;
  	font-weight    : normal;
    /*font-size: calc( 1.85rem + .5vw ); FORMULA SIZE */
    font-size: 2rem;
  	letter-spacing: -.025rem;
  	margin: .5rem 0;
    border-radius: 0;
    -webkit-appearance:none;
}

#search .tip {
	font-family: 'IBMPlexMono-Bold', monospace;
    /*font-size: calc( .25rem + .5vw ); FORMULA SIZE */
    font-size: .75rem;
    color: #ffffff;
    position: absolute;
    top: calc( 45% + 3rem );
    right: 20%;
}

.menu-search .tip {
    font-family: 'IBMPlexMono-Bold', monospace;
    font-size: .65rem;
    color: #ffffff;
    text-align: right;
    display: block;
}

.menu-search input[type="search"] {
    color: rgb(255, 255, 255);
    border: none;
    border-bottom: 2px solid;
    background: rgba(0, 0, 0, 0);
    outline: none;
    font-family     :'steelfish_rgbold',
                     Arial,
                     sans-serif;
    font-weight    : normal;
    letter-spacing : 0em;
    text-transform : uppercase;
    /*font-size      : calc( 2.85rem + .5vw );*/
    font-size: 2rem;
    border-radius: 0;
    -webkit-appearance:none;
    padding-left: 0;
}

#search .btn {
  position    : absolute;
  top         : 50%;
  left        : 50%;
  width       : 100px;
  height      : 100px;
  margin-top  : 61px;
  margin-left : -45px;
  padding     : 0;
  color       : white;
  border      : none;
  background  : none;
  font-size   : 2em;
}

#menu button.close,
#search button.close {
  z-index    : 1;
  position   : fixed;
  top        : 20px;
  right      : 20px;
  width      : 30px;
  height     : 30px;
  opacity    : 1;
  border     : none;
  background : transparent;
  outline    : none;
}

#menu span.close,
#search span.close {
  position  : fixed;
  top       : 10px;
  right     : 25px;
  color     : #fff;
  opacity   : 1;
  font-size : 48px;
}


#search button.submit {
    position: absolute;
    top: 46.5%;
    left: 78.5%;
    color: rgb(255, 255, 255);
    background: transparent;
    border: none;
}

#menu button.submit {
    position: absolute;
    top: 0;
    right: 0;
    color: rgb(255, 255, 255);
    background: transparent;
    border: none;
    line-height: 1.65;
}

/* ----------------------------------------------------------- START Sorter */

.row.sorter {
	/*display: block; */
    margin: 0;
}

.sorter ul li {
    margin-bottom: .85rem;
}

.sorter ul li a {
	margin-right: 2rem;
	color: #CCCCCC;
    padding-bottom: .25em;
}

.sorter ul li a.sorter_select {
	color: #000000;
    border-bottom: solid 2px #000000;
    padding-bottom: .225em;
}

.sorter ul li a:hover {
color: #EF463A;
}

/* a.sorter_select::after {
	content: "";
    display: inline-block;
    position: absolute;
    left: 50%;
    width: 0%;
    height: 2px;
    opacity: 1;
} */

/* .sorter button {
  width          : 100%;
  border         : none;
  background     : none;
  outline        : none;
  text-align     : left;
  text-transform : uppercase;
  font-family    : 'steelfish_rgbold',
                   Arial,
                   sans-serif;
  font-size      : 1em;
  transition     : 0.4s;
  cursor         : pointer;
  padding        : .5em 0;
} 


.sorter button.active,
.sorter button:hover {
  color : #EF463A;
}

.active-a {
  color : #EF463A;
}

.collapse-a {
  color : black;
}

.sorter button span {
  color        : #EF463A;
}

.icon:before {
  width : .85em;
}

.icon {
  width : .85em;
  margin-left: .25em;
}

#panelA,
#panelB,
#panelC {
  display : none;
}

.panel {
  margin-bottom: .5em;
  background: #FFFFFF;
}

.panel hr {
  margin-top: 0;
}

.panel ul {
  margin     : 0;
  padding    : 0;
  font-size  : .75em;
  flex-wrap  : wrap;
  list-style : none;
}

.panel ul li {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0 5px;
} */

.sorter h1 {
margin-top: 0.25em;
}

.sorter.about ul li a {
    color: #CCCCCC;
    text-transform: uppercase;
}

.sorter.about ul li a:hover {
    color: #EF463A;
}

.sorter.about ul li {
    margin-bottom: .5rem;
    display: inline;
}

.sorter.about a.sorter_select {
    color: #000000;
    border-bottom: 0;
}

/* ----------------------------------------------------------- END Sorter */

/* -------------------------------------------- END 02	Navbar /////////// */

/* -------------------------------------------- START 03	Icon Boxes /////// */
/* -------------------------------------------- END 03	Icon Boxes /////// */

/* -------------------------------------------- START 04	Home Section ///// */

header.row.hero.nuheader.index {
    padding: 0;
    width: 100vw;
    height: auto; 
    margin-top: 0;
    margin-bottom: 5rem;
}

.index .hero {
    display: none;
}

.index .mainheading {
    padding: 10vh 12.5vw 0 12.5vw;
}

header.hero.nuheader.index p, header.hero.nuheader.index p span, header.hero.nuheader.index ol li {
    color: #666666;
}

.index h2, .index .nudefinition {
    margin-left: calc(var(--colwidth) * 3);
    margin-right: calc( 12.5vw + (var(--colwidth) * 3));
}

.nudefinition ol {
    margin: 0;
    padding-left: 1rem;
    font-size: 1rem;
}

.nudefinition ol li {
    margin: .5rem 0;
}

/*.hero.full.index img,
.hero.full.index video {
  height: 90vh;
}

.hero.full.index .heading{
  height: 90vh;
  padding: 0 15%;
}

.hero.full.index .heading .description {
 font-size: 3vw;
}

.hero.full.index .heading .description p{
 font-size: 3vw;
}

.hero.full.index .heading .description .nudefinition > * {
font-size: .85em;
color: #999;
}

.hero.full.index .heading .description .nudefinition p {
text-align: center;
}

.hero.full.index .heading .description .nudefinition ol {
padding-left: 1em;
line-height: 1.5em;

}


.hero.full.index .heading .description > p {
  font-family : 'steelfish_rgregular';
  text-align: justify;
  font-size: 1.5em;
}THIS IS FROM 2017 VERSION OF SITE*/


/*I'm not sure if this is where we want this class styling, this hides the h1 on the index page so that the svg of our logo shows instead of the word Nupolitan*/
.hide {
  display : none;
}

.hidden {
      -moz-opacity: 0;
      opacity: 0;
      -moz-transform: scale(0.01);
      -webkit-transform: scale(0.01);
      -o-transform: scale(0.01);
      -ms-transform: scale(0.01);
      transform: scale(0.01);
    }

/*This has to do with it squishing to become small on scroll*/
#index_logo {
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
}

.index-logo-hvr svg {
  width: 100%;
}

a.index-logo-hvr {
  width: 90%;
}

a.index-logo-hvr::after {
  height: 0;
}

.index-logo-hvr span {
  display: none;
  text-align: center;
}

.index-logo-hvr:hover .dot {
  fill : #EF463A;
}

.intro div {
	background: #F5F5F5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 3em 2em 2em 2em;
}


.intro hr {
    background-color: #EF463A;
    border: 2px solid #EF463A;
    width: 2em;
    margin-left: 0;
}

.row.grid_4.intro p {
    font-size: calc( 1rem + 0.35vw);
}

.row.grid_4.intro h4 {
    margin: 0;
    font-size: calc( 1rem + 1.5vw);
}

.intro div:first-of-type {
background: #EF463A;
justify-content: center;
}

.row.grid_4.intro div:first-of-type p {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 700;
    font-size: calc( 1rem + 0.75vw);
    color: white;
    z-index: 0;
}


.row.grid_4.intro div:first-of-type p::before {
    content: open-quote;
    font-size: 4em;
    position: absolute;
    margin-top: -3rem;
    margin-left: -1.5rem;
    color: rgba(0,0,0,0.25);
    z-index: -1;
}


.row.grid_4.intro div:first-of-type p::after {
    content: close-quote;
    font-size: 4em;
    position: absolute;
    margin-top: -1.5rem;
    margin-left: -2rem;
    color: rgba(0,0,0,0.25);
    z-index: -1;
}

.intro svg {
	width: 1em;
	height: auto;
    padding: 0 .25em;
}

.intro p a {
/* border-bottom: none; */
}

.mainintro {
	margin-bottom: 5rem;
}

/* -------------------------------------------- END 04	Home Section ///// */

/* -------------------------------------------- START 05	About Page /////// */

.heading-u h1 {
	background-image: linear-gradient(to right, transparent 50%, rgba(255,255,0,0.75) 50%);
    background-size: 200% 15%;
    background-repeat: repeat-x;
    background-position: -100% 100%;
    display: inline-block;
    margin-top: .25em;
}

.heading-u h1 span {
opacity: 0.05;
}

/*article.about h4 {
	margin-bottom: 0;
    margin-top: .55em;
    color: #EF463A;
} THIS IS OLD */

.about a span.ion-ios-arrow-right {
    padding-left: 10px;
}

a.lm {
	border-bottom: 2px dotted #CCCCCC;
    margin-bottom: 1em;
    display: block;
    font-size: .75em;
    padding-top: .5em;
    text-align: right;
    padding-bottom: .5em;
    text-transform: uppercase;
    font-family: 'steelfish_rgbold', Arial, sans-serif;
    font-weight: normal;
    letter-spacing: 0em;
    color: #EF463A;

}

.team .col-6 {
margin-bottom: 2rem;
}

.team h4 {
	margin-top: 2rem;

}

.team h4 a {
    color: #000000;
}
.team p { margin-top: .5rem; }

.values h4:first-of-type {
    margin-top: 0;
}

/* .values h4 {
    margin-top: 2em;
}*/

/* .row.text.padding {
  padding : 2em 5%;
  flex-direction: column;
}

*/

/*
.row.team h2 {
  margin-top     : .35em;
  margin-bottom  : 0;
  padding        : 0;
  text-transform : uppercase;
  font-size      : 4em;
}

.row.team h4 {
  margin         : 0;
  padding        : 0;
  text-transform : uppercase;
  font-size      : 2em;
  letter-spacing : .175em;
  color: black;
}

.row.team p {
  font-size: calc( 1rem + 1vw);
}

#ap-title {
  letter-spacing : .145em;
}
*/

.team ul, .socmedia.bio {
list-style: none;
display: flex;
flex-direction: row;
}

.team ul li, .socmedia.bio li {
  margin-right: 10px;
}

ul.socmedia li:before {
    content: "";
}

ul.socmedia li a::after {
    display: none;
}

/*.socmedia.bio li::after {
  content: "";
}
*/

.team .smtitle, .bio .smtitle {
display: none;
font-size: 0.5em;
}

.team a:hover .smicon svg, .socmedia.bio a:hover .smicon svg {
fill: #EF463A;
animation: popUp 500ms ease-in-out 0s forwards;
}

.team a .smicon svg, .socmedia.bio a .smicon svg {
fill: rgba(0,0,0,1);
height: 2vw;
width: 2vw;
min-height: 1em;
min-width: 1em;
/*margin-right: 1em;*/
transition: all ease-in-out 200ms;
}

/*article.about li::after {
    content: "";
}*/

.row.team a::after, .socmedia.bio a::after {
  height: 0;
}

.socmedia.bio {
  border-top: 1px solid rgba(0,0,0,0.25);
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.bio p {
  margin-top: 0;
  margin-bottom: .5em;
}

/*.abticons span {
display: block;
text-align: center;
}*/

#map {
   width: 100%;
   height: 50vh;
   /* background-color: grey; */
   padding: 0;
 }
 
.gmap_canvas {
	overflow:hidden;
	background:none!important;
	height:100%;
	width:100%;
	padding: 0;
}

iframe#gmap_canvas {
	width: 100%;
    height: 100%;
}

.bio .platform_portfolio_projects {
    margin-top: 1em;
}

.bio h4 {
	margin: 0;
}


/* -------------------------------------------- END 05	About Page /////// */

/* -------------------------------------------- START 05.1	Services ///////// */

.services.off-3 {
    margin-left: calc((var(--colwidth)*3) + (var(--gutter)*3)) !important;
}

.services h4, .process h4, .values h4 {
	margin-top: 2em;
}

.services .row h4:last-of-type {
    border-top: 2px solid yellow;
    padding-top: 1rem;
}

.services .col {
    padding-bottom: 1rem;
}

/* -------------------------------------------- END 05.1	Services ///////// */

/* -------------------------------------------- START 06	Bio Page ///////// */
/* -------------------------------------------- END 06	Bio Page ///////// */

/* -------------------------------------------- START 07	Contact Page ///// */

.hero.left.contact {
    background-image: url(/images/general/hi_repeating_lt.svg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 50rem;
}

#theForm {
display: flex;
flex-direction: column;
margin-bottom: 5rem;
}

#theForm input[type="text"] {
    width: 100%;
    color: #000000;
    border: none;
    border-bottom: 2px solid #CCCCCC;
    background: rgba(0, 0, 0, 0);
    outline: none;
    font-family    : 'HelveticaNowDisplay-XBold',
                   Arial,
                   sans-serif;
  	font-weight    : normal;
    font-size: 1.5rem;
  	letter-spacing: -.025rem;
    padding: .25rem 0;
    margin: 1rem 0;
    border-radius: 0;
    -webkit-appearance:none;
}

#theForm input[type="text"]::placeholder {
    color: #CCCCCC;
}

#theForm button {
    width: 25%;
    margin-left: 75%;
    text-align: right;
    border: none;
    padding: .5rem 0;
}

.contact-block {
    /*font-size: calc( .85rem + .5vw );*/
    font-size: 1rem;
    line-height: 1.35;
    display: flex;
    margin: 1rem 0;
    flex-direction: column;
}

.contact-block div:last-of-type {
    flex-direction: column;
    display: flex;
}

.sm-photo-grid {
    margin-top: 0;
}

.sm-photo-grid div:first-of-type img:first-of-type {
margin-bottom: 2vw;
}

.sm-photo-grid div:last-of-type img {
    opacity: .1;
}

/* .contact {
  font-family : 'steelfish_rgregular';
} */

/* .contact label {
  /*font-size : 1.35em;
  font-size : calc( 3rem + 4vw );
} */

/* .contact p {
  margin-bottom : 0;
  text-align    : left;
  font-family   : 'steelfish_rgregular';
  /*font-size     : 1.5em;
} */

/* .vcard p {
  line-height: 1em;
}

.country-name,
.org {
  display : none !important;
}

.simform {
  position   : relative;
  width      : 100%;
  margin     : 0 auto;
  padding    : 1em 0;
  text-align : left;
  font-size: calc( 1rem + 1.5vw ); */
  /*font-size  : 2em;*/
  /* max-width: 860px; */
/* } */

/* .simform .submit {
  display : none;
} */


/* Question list style */

.simform ol {
  position           : relative;
  margin             : 0;
  padding            : 0;
  list-style         : none;
  -webkit-transition : height 0.4s;
  transition         : height 0.4s;
}

.simform ol:before {
  content          : '';
  position         : absolute;
  bottom           : 0;
  left             : 0;
  width            : 100%;
  height           : 2.35em;
  background-color : rgba(0,0,0,0.025);
}

.questions li {
  visibility         : hidden;
  position           : relative;
  height             : 0;
  -webkit-transition : visibility 0s 0.4s,
                       height 0s 0.4s;
  transition         : visibility 0s 0.4s,
                       height 0s 0.4s;
}

.no-js .questions li,
.questions li.current {
  visibility         : visible;
  height             : auto;
  -webkit-transition : none;
  transition         : none;
}

/* Labels */

.questions li > span {
  display  : block;
  overflow : hidden;
}

.questions li > span label {
  display            : block;
  -webkit-transform  : translateY(-100%);
  transform          : translateY(-100%);
  -webkit-transition : -webkit-transform 0.4s;
  transition         : transform 0.4s;
}

.no-js .questions li > span label,
.questions li.current > span label {
  -webkit-transform  : translateY(0);
  transform          : translateY(0);
  -webkit-transition : none;
  transition         : none;
}

.show-next .questions li.current > span label {
  -webkit-animation : moveUpFromDown 0.4s both;
  animation         : moveUpFromDown 0.4s both;
}

/* Input field */

.questions input {
  display            : block;
  width              : calc(100% - 2em);
  margin             : 0.3em 0 0 0;
  padding            : 0.5em 1em 0.5em 0.7em;
  color              : rgba(0,0,0,0.8);
  opacity            : 0;
  border             : none;
  background         : transparent;
  font-family        : "NeueHaasUnicaPro-Thin",
                       Helvetica,
                       Arial,
                       sans-serif;
  /*font-size          : 1em;*/
  line-height        : 1;
  -webkit-transition : opacity 0.3s;
  transition         : opacity 0.3s;
}

.no-js .questions input,
.questions .current input {
  opacity : 1;
}

.questions input:focus,
.simform button:focus {
  outline : none;
}

.simform button {
  font-size : 100%;
}

/* Next question button */

.next {
  display                     : block;
  position                    : absolute;
  right                       : 0;
  bottom                      : 2.15em;
  width                       : 2em;
  height                      : 2em;
  padding                     : 0;
  color                       : rgba(0,0,0,0.4);
  opacity                     : 0;
  border                      : none;
  background                  : none;
  text-align                  : center;
  -webkit-transform           : translateX(-20%);
  transform                   : translateX(-20%);
  -webkit-transition          : -webkit-transform 0.3s,
                                opacity 0.3s;
  transition                  : transform 0.3s,
                                opacity 0.3s;
  -webkit-tap-highlight-color : rgba(0, 0, 0, 0);
  pointer-events              : none;
  cursor                      : pointer;
  /* padding-bottom of form plus progress bar height */
  /* z-index: 100; */
}

.next:hover {
  color : rgba(0,0,0,0.5);
}

.next::after {
  content        : "\f3d6";
  position       : absolute;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 100%;
  text-transform : none;
  font-family    : 'Ionicons';
  font-style     : normal;
  font-weight    : normal;
  font-variant   : normal;
  line-height    : 4;
}

.next.show {
  opacity           : 1;
  -webkit-transform : translateX(0);
  transform         : translateX(0);
  pointer-events    : auto;
}

/* Previous question button */

.previous {
  display                     : block;
  position                    : absolute;
  left                        : 0;
  bottom                      : 2.15em;
  width                       : 2em;
  height                      : 2em;
  padding                     : 0;
  color                       : rgba(0,0,0,0.4);
  opacity                     : 0;
  border                      : none;
  background                  : none;
  text-align                  : center;
  -webkit-transform           : translateX(20%);
  transform                   : translateX(20%);
  -webkit-transition          : -webkit-transform 0.3s,
                                opacity 0.3s;
  transition                  : transform 0.3s,
                                opacity 0.3s;
  -webkit-tap-highlight-color : rgba(0, 0, 0, 0);
  pointer-events              : none;
  cursor                      : pointer;
  /* padding-bottom of form plus progress bar height */
  /* z-index: 100; */
}

.previous:hover {
  color : rgba(0,0,0,0.5);
}

.previous::after {
  content        : "\f3d5";
  position       : absolute;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 100%;
  text-transform : none;
  font-family    : 'Ionicons';
  font-style     : normal;
  font-weight    : normal;
  font-variant   : normal;
  line-height    : 4;
}

.previous.show {
  opacity           : 1;
  -webkit-transform : translateX(0);
  transform         : translateX(0);
  pointer-events    : auto;
}

/* Progress bar */

.simform .progress {
  width              : 0%;
  height             : 0.15em;
  background         : #EF463A;
  -webkit-transition : width 0.4s ease-in-out;
  transition         : width 0.4s ease-in-out;
}

.simform .progress::before {
  content    : '';
  position   : absolute;
  top        : auto;
  width      : 100%;
  height     : inherit;
  background : rgba(0,0,0,0.05);
}

/* Number indicator */

.simform .number {
  position    : absolute;
  right       : 0;
  width       : 3em;
  margin      : 0.4em 0;
  overflow    : hidden;
  font-size    : calc( 0.5rem + 1vw );
  font-weight : 700;
}

.simform .number:after {
  content           : '/';
  position          : absolute;
  left              : 50%;
  opacity           : 0.4;
  -webkit-transform : translateX(-50%);
  transform         : translateX(-50%);
}

.simform .number span {
  width      : 40%;
  float      : right;
  text-align : center;
}

.simform .number .number-current {
  float : left;
}

.simform .number-next {
  position : absolute;
  left     : 0;
}

.simform.show-next .number-current {
  -webkit-transform  : translateY(-100%);
  transform          : translateY(-100%);
  -webkit-transition : -webkit-transform 0.4s;
  transition         : transform 0.4s;
}

.simform.show-next .number-next {
  -webkit-animation : moveUpFromDown 0.4s both;
  animation         : moveUpFromDown 0.4s both;
}

/* Error and final message */

.simform .error-message,
.simform .final-message {
  visibility         : hidden;
  position           : absolute;
  opacity            : 0;
  -webkit-transition : opacity 0.4s;
  transition         : opacity 0.4s;
}

.simform .error-message {
  width     : 100%;
  padding   : 0.4em 0 0 0;
  color     : #EF463A;
  /*font-size : 0.65em;*/
  /*font-size    : calc( 0.75rem + 1vw );*/
}

.final-message {
  top         : 30%;
  /*left        : 0;
  width       : 100%;
  margin-left : 0;
  text-align  : left;*/
  color       : #CCCCCC;
  font-size: calc( 3rem + 4vw );
}

/* .loader {
  visibility         : hidden;
  opacity            : 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  background: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
  z-index: 500;
  margin: -55px 0 0 -10px;
  position: fixed;
  -webkit-transition : opacity 0.4s;
  transition         : opacity 0.4s;
} */

/* .loader img {
  height: 300px;
  width: 300px;
} */

/* .loader.show {
  visibility : visible;
  opacity    : 1;
  -webkit-transition-delay : 0.5s;
  transition-delay         : 0.5s;
} */

/* .loader.show img {
    animation: load_spin 2s linear infinite;
} */

.error-message.show,
.final-message.show {
  visibility : visible;
  opacity    : 1;
}

.final-message.show {
  -webkit-transition-delay : 0.5s;
  transition-delay         : 0.5s;
}

/* Final hiding of form / showing message */

.simform-inner.disappear {
  visibility         : hidden;
  opacity            : 0;
  -webkit-transition : opacity 0.3s,
                       visibility 0s 0.3s;
  transition         : opacity 0.3s,
                       visibility 0s 0.3s;
}

/* START Loader */



@keyframes load_spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}


/* END Loader */

/* No JS Fallback */

.no-js .simform {
  font-size : 1.75em;
}

.no-js .questions li {
  padding : 0 0 2em;
}

.no-js .simform .submit {
  display    : block;
  float      : right;
  padding    : 10px 20px;
  color      : rgba(0,0,0,0.4);
  border     : none;
  background : rgba(0,0,0,0.3);
}

.no-js .simform .controls {
  display : none;
}

/* Remove IE clear cross */

.contact input[type=text]::-ms-clear {
  display : none;
}

/*.thanku {
  height: calc(100vh - 65px);
}

.thanku  {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
} THIS IS OLD */

.thanku {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 60vh;
}

.thanku h1 {
  /*For desktop and tablet*/
  /*font-size: 12vw;*/
  /*font-size: 6em;*/
  line-height: 1.15;
}

.spinner {
  animation: rotateOut ease-out forwards 0.5s;
}

#gift {
  opacity: 0;
}

#linkwrap {
  transform: scale(2);
}

/* #plane {
  opacity: 0;
  transform: scale(4);
} */

.pop_hover {
  opacity: 1 !important;
  animation: giftPop_m 350ms ease-in-out 0s forwards;
}

#linkwrap:hover {
  /*cursor: pointer;*/
  animation: giftPop_m 350ms ease-in-out 0s forwards;
}


/* -------------------------------------------- END 07	Contact Page ///// */

/* -------------------------------------------- START 08	Error Page /////// */
/* -------------------------------------------- END 08	Error Page /////// */

/* -------------------------------------------- START 09	Work portfolio /// */

article {
  margin   : 6vw 0 0 0;
}

article.platform_intro {
margin-bottom: 6vw;
}

article ol li {
	display: list-item;
    padding: .25rem 0;
}

article ol li::after {
content: none;
}

ul.categories, .sorter ul {
	clear		: none;
    margin		: 0;
	font-family : "IBMPlexMono-Bold",
                monospace;
	/* font-size    : calc( .75rem + .5vw ); FORMULA SIZE */
    font-size	 : .7rem;
 	list-style   : none;
    color		 : #CCCCCC;
    width		 : 100%;
    padding		 : 0;
}

ul.attributes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	font-family    : 'steelfish_rgbold',
                   Arial,
                   sans-serif;
	font-size      : calc( 1.85rem + .5vw );
    text-transform	: uppercase;
}

.categories li {
  display : inline;
}

.categories li:before {
    content: "";
}

.categories li a {
color: #CCCCCC;
border-bottom: 0;
}

.categories li a:hover {
    color: #EF463A;
}

.attributes li {
	width: 10rem;
	padding: 3rem 0;
    background: #EF463A;
    margin: .5rem;
    text-align: center;
    border-radius: 3px;
    color: white;
}

.attributes.not li {
    border: 1px solid #EF463A;
    color: #EF463A;
    background: none;
}

ul.attributes li:before {
    content: "";
}

/* article li::after {
  content : ", ";
}

article li:last-child::after {
  content : none;
}

article li a {
  color                 : rgba(0,0,0,.25);
  border-bottom         : 0;
}
*/

.attributes li::after {
content: none;
}

  .categories li::after {
  content : ", ";
}

.categories li:last-child::after {
  content : none;
}

.categories li a {
  color                 : #CCCCCC;
  border-bottom         : 0;
}


/* article h1 {
  margin-top : .5rem;
} THIS IS OLD */

 /*article p {
 margin-top : 1rem;
  margin-bottom: .5em;
  font-size: calc( 1rem + 1vw);
  font-size  : 1rem;
}*/

article hr {
    margin-bottom: 1em;
    color: #BFBFBF;
    border: .5px solid #EEEEEE;
}

#platform_list {
  color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  font-size: calc(1rem + 1.5vw);
  font-family: 'steelfish_rgbold', Arial, sans-serif;
  font-weight: normal;
  letter-spacing: 0em;
  list-style: none;
  padding: 3vw;
}

#platform_list.branding {
  background-color: #EF463A;
}

#platform_list.interactive {
  background-color: #4C3393;
}

#platform_list.dt {
  background-color: #0099D8;
}

/* #platform_list.systems {
  background-color: #0099D8;
} 

#platform_list.product {
  background-color: #485865;
}

#platform_list.ux {
  background-color: #94519F;
} */

#platform_list li {
  padding: 1rem 0;
  width: 100%;
  margin-left: 30px;
}

#platform_list li::before {
  content        : "\f383";
  width          : 100%;
  height         : 100%;
  text-transform : none;
  font-family    : 'Ionicons';
  font-style     : normal;
  font-weight    : bolder;
  padding-right  : 10px;
}

.platform_portfolio_projects {
  margin-bottom: 0;
  text-align: center;
}

/* .cat-info is styling summary paragraphs relating to each section/platform */
/*.catdesc div {
  display         : flex;
  position        : absolute;
  top             : 0;
  height          : 100%;
  padding         : 0 20px;
  align-content   : center;
  flex-direction  : column;
  flex-wrap       : wrap;
  justify-content : center;
}

.catdesc div p {
  color     : white;
  font-size : 2vw;
}*/


/* -------------------------------------------- END 09	Work portfolio /// */

/* -------------------------------------------- START 10	Single Project Page */

.row.half.sqrd {
    margin-top: 0;
    margin-bottom: 0;
}

.project-info h1 {
	font-size: 3rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    line-height: 1;
}

.project-info .row {
padding: .5em 0;
}

.caption p {
    margin-top: 0;
    font-family: "IBMPlexMono-Medium", monospace;
    /* font-size: calc( .5rem + .5vw ); FORMULA SIZE */
    font-size: .75rem;
    /*color: #BFBFBF; */
}

/* -------------------------------------------- END 10	Single Project Page */

/* -------------------------------------------- START 10	Search Results */

.hero.left.search-results {
    background-image: url(/images/general/arrows_lt.svg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 20rem;
}

.srch_res {
    margin-top: 3rem;
}

/*.srch_res div:nth-of-type(1) {
  margin-top: 5rem;
}*/

.srch_res p {
  color: #000000;
}

.row.srch_bar {
  margin: 0;
}

.srch_bar input#keywords::placeholder {
    color: #000000;
}

hr.divider {
  margin-bottom: 3rem;
}

.srch_bar i {
    margin-right: 1rem;
    font-size: 1.5rem;
    align-self: center;
}

.srch_bar input {
  border: none;
  /*border-bottom: 1px solid rgba(0,0,0,0.5);*/
  padding: 0;
 /*text-transform: uppercase;
  width: 65vw;*/
  font-family    : 'HelveticaNowDisplay-XBold',
                   Arial,
                   sans-serif;
 	font-weight    : normal;
  	letter-spacing: -.025rem;
  	margin		   : .5rem 0;
  	color		   : black;
    font-size: 1.5rem;
    margin-bottom: 0;
    margin-top: 1em;
    width: 85%;
}

.srch_bar input:focus {
  outline: none;
}

.srch_bar, .srch_bar h1, .srch_bar input {
    /*font-size: calc( 3rem + 3vw);
    font-family: 'steelfish_rgbold', Arial, sans-serif;
    font-weight: normal;
    letter-spacing: 0em;*/
    /*font-family    : 'HelveticaNowDisplay-XBold',
                   Arial,
                   sans-serif;
 	font-weight    : normal;
  	letter-spacing: -.025rem;
  	margin		   : .5rem 0;
  	color		   : black;
    font-size: 1.5rem;*/
    
  }
  
p.srch_loc {
    margin: 0;
    color: #CCCCCC;
}

p.srch_loc a {
    color: #CCCCCC;
}

/*.srch_res h1 {
  font-size : calc( 3rem + 1vw );
  line-height: 1;
  margin: 0 0 1rem 0;
  font-family    : 'steelfish_rgregular',
                   Arial,
                   sans-serif;
}*/

p#results_found {
  text-align: right;
  left: 0;
  position: absolute;
  line-height: 1.5;
}

/* -------------------------------------------- END 10	Search Results */

/* -------------------------------------------- START 11	Blog ///////////// */

.row.blog {
    flex-wrap: wrap;
    flex-direction: row;
}

.hero.left.blog {
    background-image: url(/images/general/squiggle_lt.svg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 20rem;
}

.row.blog .half {
    flex-basis     : calc( 50% - var(--gutter) );
}

.blog .col {
    padding-bottom: 1rem;
}


.blog span {
	display: block;
}

/* -------------------------------------------- END 11	Blog ///////////// */

/* -------------------------------------------- START 12	Single Blog Page / */

.blog-info h6 {
  border-top: 1px solid black;
  padding-top: .5rem;
}

.pubinfo {
  font-family : "IBMPlexMono-Bold",
                monospace;
   /*font-size    : calc( .75rem + .5vw ); FORMULA SIZE */
   font-size: .9rem;
   color: black;
}

.pubinfo a {
border-bottom: none;
}

/* -------------------------------------------- END 12	Single Blog Page / */

/* -------------------------------------------- START 13	Components /////// */

.hero {
  width    : 100%;
  overflow : hidden;
}

.hero img,
.hero video {
  width      : 100%;
  height     : 50vh;
  object-fit : cover;
}


.hero.full {
  width     : calc(100% + 20px);
  margin    : -55px 0 0 -10px;
  padding   : 0;
  flex-wrap : wrap;
}

.hero.full .heading {
  display         : flex;
  position        : absolute;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : calc(50vh + 10px);
  /* text-align      : center; */
  align-items     : center;
  flex-wrap       : wrap;
  flex-direction  : column;
  justify-content : center;
  /* animation: fadeIn 2s; animation-play-state: running; */
}

.hero h1, .hero h4 {
  color     : white;
}

.hero h4 {
margin-top: .25em;
margin-bottom: 0;
}

.hero.platformhero h1 {
    background-size: 200% 15%;
    background-repeat: repeat-x;
    background-position: -100% 100%;
}

.image {
  overflow : hidden;
}

.pullquote div {
  padding-left : 1em;
}

.pullquote div.col-9 {
  margin-left: 1em;
}

.pullquote p, .quote p {
  font-family : 'Playfair Display';
  font-style  : italic;
  font-weight : 700;
  
}

.quote {
  text-align      : center;
  align-content   : center;
  flex-wrap       : wrap;
  justify-content : center;
}

.quote svg {
  opacity : 0.05;
  margin-bottom: .5em;
  width: 3em;
}

.pullquote p {
  /*font-size   : calc( 1rem + .5vw ); FORMULA SIZE */
  font-size: 1.5rem;
}

.quote p {
  -webkit-margin-before : 0em;
  -webkit-margin-after  : 0em;
  /*font-size   : calc( 1.5rem + .5vw ); FORMULA SIZE */
  font-size: 1.25rem;
}

.quote p:last-of-type {
  margin-top: .8em;
  /*font-size   : calc( .5rem + .5vw ); FORMULA SIZE */
  font-size: .75rem;
  font-family : IBMPlexMono-Bold;
  font-style  : normal;
}

.row.video {
  position       : relative;
  padding-bottom : 56.25%;
  margin-bottom  : 10px;
  margin-top     : 10px;
}

.row.video iframe {
  position : absolute;
  top      : 0;
  bottom   : 0;
  width    : 100%;
  height   : 100%;
}

#wavy-lines path {
	fill:none;
    stroke:#CCCCCC;
    stroke-width:2;
    stroke-dasharray:10,5;
}

.seework {
    padding: 0 12.5%;
    width: 75%;
    position: relative;
    margin-bottom: 6.25%;
}

.seework div:first-of-type {
    border: 2px solid black;
    border-bottom: 6px solid black;
}

a.linkblock {
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
}

/* -------------------------------------------- END 13	Components /////// */

/* -------------------------------------------- START 14	Alerts /////////// */
/* -------------------------------------------- END 14	Alerts /////////// */

/* -------------------------------------------- START 15	Gallery Page ///// */
/* -------------------------------------------- END 15	Gallery Page ///// */

/* -------------------------------------------- START 16	Footer ////////// */

#details {
font-size: 1rem;
}

/*#details h3, footer, footer h3 {
  text-transform : uppercase;
  font-family    : 'steelfish_rgbold',
                   Arial,
                   sans-serif;
  font-size      : 1.5rem;
} I COPIED THIS BELOW TO LEAVE THE STYLES FOR DETAILS H3 UNTIL I GET TO THAT*/

#details h3 {
  text-transform : uppercase;
  font-family    : 'steelfish_rgbold',
                   Arial,
                   sans-serif;
  font-size      : 1.5rem;
}

#details .basicinfo h3, #details .views h3 ,  #details .workrel h3, #details .likes h3 , #details .tags h3 , #details .credits h3, footer .socmedia h3   {
position: absolute;
top: 0;
left: 0;
padding-left: .1em;
padding-bottom: 0.1em;
color: rgba(255,255,255,1);
background: rgba(0,0,0,0.50);
width: 100%;
    background: rgba(0,0,0,0.15);
    width: 100%;
    margin-top: 0;
}


#details .workrel {
padding-top: calc( 2em + 10px);
}

#details .workrel h3 {
text-align: center;
padding-top: 0.25em;
}

#details .col {
  font-family    : 'steelfish_rgregular',
                   Arial,
                   sans-serif;
font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

#details ul  {
display: flex;
list-style: none;
flex-wrap: wrap;
font-size: 1.4em;
}

#details ul li::after {
content: '//';
color: rgba(0,0,0,0.25);
}

#details ul li:last-of-type:after {
content: '';
color: rgba(0,0,0,0.25);
}

#details .tags ul li::after {
content: '';
}

.tags ul {
text-transform: lowercase;
}

.tags ul li {
margin-right: 0.5em;
}

#details .behance, #details .instagram {
/* background: #000000; */
}

.minibtn.tile {
    background: #EF463A;
    color: white;
    margin-bottom: .5em;
}

/* .minibtn.tile h3 {
 width: 100%;
} */

.minibtn.tile a {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
padding: 1em .5em;
}

.minibtn.tile h3 {
margin: 0 0;
}


.minibtn.tile a span, .minibtn.tile a i, .minibtn.tile a path  {
color: #FFFFFF;
fill: #FFFFFF;
}

.minibtn.tile a:hover, .minibtn.tile a:hover span, .minibtn.tile a:hover i, .minibtn.tile a:hover path {
color: #EF463A;
fill: #EF463A;
background: #FFFFFF;
}

.minibtn.tile a:hover svg {
animation: popUps 2s ease-in-out infinite 0s forwards;
}

#details .basicinfo, #details .views, #details .tags, #details .likes, #details .credits {
background: white;
border: 1px solid rgba(0,0,0,0.15);
}

    #details .row .tile img {
    position: absolute;
    }


    #details .half {
/*
    margin: 0 5px;

    flex-basis: calc( 50% - 10px );
    width: 50%;
 */    }


#details dl, #details dt, #details dd {
padding: 0; margin: 0;
display: inline;
color: rgba(0,0,0,0.35);
}

#details .credits.half {
/*
    flex-basis: calc( 50% - 10px );
    width: calc( 50% - 10px );
 */
min-height: 18em;
}

#details .credits dl {
padding: 1em 0.5em;
}

#details dl, #details ul {
    margin: 2em 0.5em 1em;
}

#details dt {
text-transform: capitalize;
font-size: 1.35em;
}

#details .credits dt {
    margin-right: 0.25em;
}

#details dd {
font-family : 'steelfish_rgbold', Arial, sans-serif;
text-transform: uppercase;
font-size: 1.35em;
margin-right: 0.25em;
}

#details .credits dd::after {
/* content: ''; 
 margin-right: 0.5em; */
}


#details .credits dl::before {
content: '';
display: block;
height: 2em;
}

#details .credits dt {
/* font-size: 1em; */
}

#details .credits dt::before {
content: '//';
color: rgba(0,0,0,0.25);
margin-right: .5em;
margin-left: .25em;
}

#details .credits dt:first-of-type::before {
content: '';
}

#details a {
color: rgba(0,0,0,0.5);
}

#details a:hover {
color: rgba(224,0,0,0.75);
}

#details .credits {
padding-top: 2em;
}

#details hr {
display: none;
}

/* .ctr {
  display: flex;
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.ctr.horz {
  align-items: center;
}

.ctr.vert {
justify-content: center;
} */


footer {
position: relative;
overflow: hidden;
}

footer a {
text-decoration: none;
}

footer .footer {
	padding: 3vw 12.5vw 0 12.5vw;
    padding-top: 3vw;
	position: relative;
    flex-direction: column;
    border-top: 2px solid #EEEEEE;
    margin-top: 2.5rem;
}

footer .footer a, footer .footer h5, footer .footer svg {
color: #000000;
fill: #000000;
}

footer section, footer .nusm ul, footer .footer, footer .bottom-bar {
display: flex;
}


footer .tellmore, footer .talksoon, footer .nusm {
	flex-direction: column;
	justify-content: center;
	align-items: center;
    padding: 1rem 0;
}

footer .nusm ul {
list-style-type: none;
flex-direction: row;
padding: 0;
}

footer .nusm li {
margin-right: 10px;
}

footer .nusm li:last-of-type {
margin-right: 0px;
}

footer .nusm li svg {
height: 2vw;
width: 2vw;
min-width: 1.5em;
min-height: 1.5em;
}

footer .talksoon a::after, footer .nusm a::after {
background-color: transparent !important;
}

footer .footer .talksoon a:hover svg, footer .footer a:hover .smicon svg {
fill: #EF463A !important;
animation: popUp 700ms ease-in-out 0s forwards;
}

footer .nusm li .smtitle, footer .talksoon .smtitle {
display: none;
}

footer .talksoon svg {
width: 10vw;
min-width: 140px;
}

footer .bottom-bar {
 background: #000000;
 color: #ffffff;
 padding: 1rem 12.5vw;
 margin-bottom: 0;
 --gutter: 0;
justify-content: space-between;
align-items: center;
text-align: center;
flex-direction: column;
}

footer blockquote {
margin: 0;
}

footer blockquote q, footer blockquote cite {
font-family: 'IBMPlexMono-Bold', monospace;
}


footer blockquote cite {
    margin-left: .5rem;
    font-style: normal;
    text-transform: uppercase;
}

footer p.copyright {
    text-align: right;
    font-family: HelveticaNowDisplay-XBold;
    color: #ffffff;
    font-size: calc( .5rem + .5vw );
    margin: .5rem 0 .5rem .5rem;
}


footer .copyright a, footer .copyright {
color: #ffffff;
}



/* -------------------------------------------- END 16	Footer ////////// */



/* ------------------------------------------------------- END Color Palette */

/* -------------------------------------------- START CC	Media Queries /// */

/* -------------------- START of @media only screen and (min-width: 768px) DESKTOP */

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

         /*.index_hero {
           top         : 8vh;
           width       : 60%;
           margin-left : 20%;
         }

         .index_hero p {
           font-size : 2vw;
         }*/
         
header.row.hero.nuheader.index {
    padding: 0;
    width: 100vw;
    height: 80vh; 
    margin-top: -50px;
}

.index .hero {
	display: block;
    background-image    : url('/images/general/20250321_ice_cream_cups.jpg');
    background-size: cover;
    background-position: center center;
}

.hero.full.index .heading{
  /* padding: 0 32vw; */
  padding: 0;
}

.hero.full.index .heading .description {
 font-size: 1.5vw;
 margin-top: 2em;
}

.hero.full.index .heading .description p {
 font-size: 1.75vw;
}

.hero.left {
    width: calc((var(--colwidth)*3) + (var(--gutter)*3));
    height: 65vh;
    }
    
.hero.left.blog {
    background-size: 35rem;
}

.hero.left.search-results {
	background-size: 35rem;
}

.hero.left.contact {
    background-size: 100rem;
}

  .hero.right {
    width: calc((var(--colwidth)*8) + (var(--gutter)*8));
    height: 45vh;
    top: 3rem;
    right: 0;
}


/* -------------------------------------------- START Common Styles */

.h2,
h2 {
  font-size: 4.5rem;
}

.h4,
h4 {
  font-size: 2rem;
}

.h6,
h6 {
  font-size: 1.5rem;
}

hr.dark {
  display : block;
}

  .row.grid_1 p {
  /* font-size: calc( 1em * 3 ); */
  }

  .row.grid_2 p {
  /* font-size: calc( 1em * 2 ); */
  }

  .row.grid_3 p {
  /* font-size: calc( 1em * 1 ); */
  }

  .row.grid_4 p {
 /* font-size: calc( 1em * 1 ); */
  }
  
  .calltoaction div:first-child {
  margin-top: 0;
  }
  
  header.hero.nuheader.off-3 {
  padding: 0;
  }
  
  #captcha img {
  width: 180px;
  }
	

/* -------------------------------------------- END Common Styles */


/* -------------------------------------------- START 01	Grid */

 :root {
  /*
  --gutter: 36px;
  --colwidth: 87px;
  */
  --gutter: 36px;
  --colwidth: 6.041666667%; 
  /* --colwidth: calc( (100% - (var(--gutter) * 11)) / 12); */
  }
  
  main {
  margin: 0 12.5%;
  }
  
  .row {
    display : flex;
    margin  : var(--gutter) 0;
    padding : 0;
  }
  
  .row.mainpads {
  margin-left: 12.5%;
  margin-right: 12.5%;
  margin-bottom: 0;
  }
  
  .row.mainpads .col-6 {
  margin-bottom: 0;
  }
  
  .row.twocols {
  margin-top: 0;
  }
  
  .first_row {
    margin-top : 50px;
  }

  .col {
    position : relative;
    flex     : 1;
  }

  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12,
  .off-1,
  .off-2,
  .off-3,
  .off-4,
  .off-5,
  .off-6,
  .off-7,
  .off-8,
  .off-9,
  .off-10,
  .off-11,
  .off-12 {
    /* border: 1px solid; */
    margin-bottom: var(--gutter);
    margin-right: var(--gutter);
  }

  .off-1,
  .off-2,
  .off-3,
  .off-4,
  .off-5,
  .off-6,
  .off-7,
  .off-8,
  .off-9,
  .off-10,
  .off-11,
  .off-12 {
    flex : 1;
  }

  .colspan {
    flex           : 1;
    flex-direction : column;
  }

  .rowspan {
    flex           : 1;
    flex-direction : row;
  }

  .half {
    margin-right   : var(--gutter);
    flex-basis     : 50%;
    /*
    flex-basis     : calc( 50% - var(--gutter) );
    */
  }
  
  .half > .half {
    margin-right: var(--gutter);
    margin-bottom: var(--gutter);
    flex-basis    : calc( 50% - var(--gutter) );
  }
  
  /*.fourcols {
    flex-basis : flex-basis:calc(((100%/12)*3) - var(--gutter));
     width: 25%; max-width: 25%; margin: 0 5px; 
  }*/

  .col-1 {
    /* margin-right : calc(var(--gutter)); */
    max-width  : calc((var(--colwidth)*1));
    flex       : 1;
    flex-basis : calc((var(--colwidth)*1));
  }

  .col-2 {
    flex       : 1;
    flex-basis : calc((var(--colwidth)*2) + (var(--gutter)*1));
  }

  .col-3 {
    flex       : 1;
    flex-basis : calc((var(--colwidth)*3) + (var(--gutter)*2));
    max-width  : calc((var(--colwidth)*3) + (var(--gutter)*2));
  }

  .col-4 {
    flex       : 1;
    flex-basis : calc((var(--colwidth)*4) + (var(--gutter)*3));
    max-width  : calc((var(--colwidth)*4) + (var(--gutter)*3));
  }

  .col-5 {
    flex       : 1;
    flex-basis : calc((var(--colwidth)*5) + (var(--gutter)*4));
    max-width  : calc((var(--colwidth)*5) + (var(--gutter)*4));
  }

  .col-6 {
    flex       : 1;
    flex-basis : calc((var(--colwidth)*6) + (var(--gutter)*5));
    max-width  : calc((var(--colwidth)*6) + (var(--gutter)*5));
  }

  .col-7 {
    flex       : 1;
    flex-basis : calc((var(--colwidth)*7) + (var(--gutter)*6));
    max-width  : calc((var(--colwidth)*7) + (var(--gutter)*6));
  }

  .col-8 {
    flex       : 1;
    flex-basis : calc((var(--colwidth)*8) + (var(--gutter)*7));
    max-width  : calc((var(--colwidth)*8) + (var(--gutter)*7));
  }

  .col-9 {
    flex       : 1;
    flex-basis : calc((var(--colwidth)*9) + (var(--gutter)*8));
    max-width  : calc((var(--colwidth)*9) + (var(--gutter)*8));
  }

  .col-10 {
    flex       : 1;
    flex-basis : calc((var(--colwidth)*10) + (var(--gutter)*9));
    max-width  : calc((var(--colwidth)*10) + (var(--gutter)*9));
  }

  .col-11 {
    flex       : 1;
    flex-basis : calc((var(--colwidth)*11) + (var(--gutter)*10));
    max-width  : calc((var(--colwidth)*11) + (var(--gutter)*10));
  }

  .col-12 {
    flex       : 1;
    flex-basis : calc((var(--colwidth)*12) + (var(--gutter)*11));
    max-width  : calc((var(--colwidth)*12) + (var(--gutter)*11));
  }

  .off-1 {
    margin-left: calc((var(--colwidth)*1) + (var(--gutter)*1));
  }

  .off-2 {
    margin-left: calc((var(--colwidth)*2) + (var(--gutter)*2));
  }

  .off-3 {
    margin-left: calc((var(--colwidth)*3) + (var(--gutter)*3));
  }

  .off-4 {
    margin-left: calc((var(--colwidth)*4) + (var(--gutter)*4));
  }

  .off-5 {
    margin-left: calc((var(--colwidth)*5) + (var(--gutter)*5));
  }

  .off-6 {
    margin-left: calc((var(--colwidth)*6) + (var(--gutter)*6));
  }

  .off-7 {
    margin-left: calc((var(--colwidth)*7) + (var(--gutter)*7));
  }

  .off-8 {
    margin-left: calc((var(--colwidth)*8) + (var(--gutter)*8));
  }

  .off-9 {
    margin-left: calc((var(--colwidth)*9) + (var(--gutter)*9));
  }

  .off-10 {
    margin-left: calc((var(--colwidth)*10) + (var(--gutter)*10));
  }

  .off-11 {
    margin-left: calc((var(--colwidth)*11) + (var(--gutter)*11));
  }

  .off-12 {
    margin-left: calc((var(--colwidth)*12) + (var(--gutter)*12));
  }

  .col-1:first-child,
  .col-2:first-child,
  .col-3:first-child,
  .col-4:first-child,
  .col-5:first-child,
  .col-6:first-child,
  .col-7:first-child,
  .col-8:first-child,
  .col-9:first-child,
  .col-10:first-child,
  .col-11:first-child,
  .col-12:first-child,
  .col:first-child,
  .half:first-child,
  .half:nth-of-type(1) {
  /* margin-left : 0; */
  }

  .col-1:last-child,
  .col-2:last-child,
  .col-3:last-child,
  .col-4:last-child,
  .col-5:last-child,
  .col-6:last-child,
  .col-7:last-child,
  .col-8:last-child,
  .col-9:last-child,
  .col-10:last-child,
  .col-11:last-child,
  .col-12:last-child,
  .col:last-child,
  .half:last-child,
  .row.twocols, 
  .row.threecols, 
  .row.fourcols,
  .threecols .col-4:nth-of-type(3n+3),
  .fourcols .col-3:nth-of-type(4n+4) {
    margin-right : 0;
  }

/*
    .row .col {
    flex-basis: calc((100%/35)*2);
    margin: 0 25px;
    }    
*/    
    .twocols, .threecols, .fourcols {
    /* display: flex; */
    flex-wrap: wrap;
    }
    
    .twocols .col-6 {
    /*
    flex-basis: calc((100%/35)*17);
    max-width: calc((100%/35)*17);
    */
    flex-basis : calc((var(--colwidth)*6));
    /* max-width : calc((var(--colwidth)*6)); */
    /*margin-right: 50px; */   
    }
    
    .fourcols .col-3 {
    /*
    flex-basis: calc((100%/35)*8);
    max-width: calc((100%/35)*8);        
    */
    flex-basis:calc((var(--colwidth)*3));
    /* max-width:calc((var(--colwidth)*3)); */
    /*margin-right: 50px;*/
    }
    
    .threecols .col-4 {
    /*
    flex-basis: calc((100%/35)*11);
    max-width: calc((100%/35)*11); 
    */
    flex-basis: calc((var(--colwidth)*4));
    /* max-width: calc((var(--colwidth)*4)); */     
    /*margin-right: 50px;*/
    }
    
    .fourcols .col-3:nth-of-type(4n+4){
        margin-right: 0px;
    }
    
    .threecols .col-4:nth-of-type(3n+3){
        margin-right: 0px;
    }
    
    .twocols .col-6:nth-child(even) {
        margin-right: 0px;
    }
    
/* */

  .sqrd {
    flex-wrap : wrap;
  }

  .sqrd .half {
    max-width     : calc( 50% );
    margin-bottom : var(--gutter);
    flex-basis    : calc( 50% - var(--gutter) );
  }

  .sqrd .half:nth-child(even) {
    margin-right : 0;
    background   : blue;
  }

  .sqrd .half:nth-child(odd) {
    margin-left : 0;
    background  : blue;
  }

  .sqrd .half:last-child,
  .sqrd .half:nth-last-child(2) {
    margin-bottom : 0px;
  }
  
  .half > .sqrd .half:last-child,
  .half > .sqrd .half:nth-last-child(2) {
    margin-bottom : calc(var(--gutter)*2);
  }

  .row.half.no-pad.sqrd {
    margin-top: 0;
    margin-bottom: 0;
  }

  .sq2 p {
    width      : 100%;
    height     : 400px;
    background : gold;
  }
  
  .padding-right {
   padding-right: var(--gutter) !important;
  }

  .padding-left {
   padding-left: var(--gutter) !important;
  }
    
  /* */
  
article.profile .nusm li a svg {
height: 2vw;
width: 2vw;
min-width: 1.5em;
min-height: 1.5em;
}

article.profile a span.smtitle {
display: none;
}

article.profile .nusm ul {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   list-style-type: none;
   margin-top: calc(var(--gutter)/2);
}

article.profile .nusm ul li {
margin-left: 1vw;
}

article.profile {
margin-top: 0;
}

article.profile ul li:before {
    content: "";
}

article.profile ul li a:hover svg, article.profile ul li a:hover .smicon svg {
fill: #EF463A !important;
animation: popUp 700ms ease-in-out 0s forwards;
}

article.profile .off-6 {
margin-left: calc(((var(--colwidth)*6) + (var(--gutter)*6)) - (var(--gutter)/2));
}

article.profile .imagesbio .col, article.profile .col.imgarticle {
margin-right: var(--gutter);
}

article.profile .imagesbio .col:last-child {
margin-right: 0;
}

/* */

.mainintro {
    margin: 12.5%;
    margin-top: 25%;
}

/* -------------------------------------------- END 01	Grid */

/* -------------------------------------------- START 02	Navbar */

.header_logo {
  max-width  : 50%;
  flex       : 6;
  flex-basis : 50%;
}

.overlay nav {
	font-size: 3rem;
}

.menu-search input[type="search"] {
	font-size: 3rem;

}

#menu button.submit {
 line-height: 1.15;
}

/* -------------------------------------------- END 02	Navbar */

/* -------------------------------------------- START 03	Icon Boxes */
/* -------------------------------------------- END 03	Icon Boxes */

/* -------------------------------------------- START 04	Home Section */

.index .mainheading {
    padding: 30vh 0 0 0;
}


.index-logo-hvr span {
  display            : block;
  position           : absolute;
  right              : 0;
  left               : 0;
  margin-top         : .25em;
  color              : {color_brand};
  opacity            : 0;
  font-family        : 'steelfish_rgregular',
                       sans-serif;
  font-size          : 2em;
  /*font-weight        : 300;*/
  -webkit-transform  : translate3d(0,-10px,0);
  transform          : translate3d(0,-10px,0);
  -webkit-transition : -webkit-transform 0.5s,
                       opacity 0.5s;
  transition         : transform 0.5s,
                       opacity 0.5s;
}

a.index-logo-hvr {
  width: 100%;
}

.index-logo-hvr:hover span {
  opacity           : 1;
  -webkit-transform : translate3d(0,0,0);
  transform         : translate3d(0,0,0);
}

/*
.heading p {
  font-size: 2em;
}

div.heading div {
  margin-top: 3em;
}
.heading ol {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}*/

/* -------------------------------------------- END 04	Home Section */

/* -------------------------------------------- START 05	About Page */

.about h1 {
margin-top: 0;
}

.h1sub {
    margin-bottom: 1.0em;
}

/* .row.text.padding {
  padding : 4em 15%;
}

.row.team {
  padding-bottom : 10vw;
}

.team .col {
  margin: 0;
} */

.row.team h2 {
  margin-top     : .5em;
}

.team svg {
  /*width        : 2vw;
  height       : 2vw;
  margin-right : 1vw;*/
}

.col.half.no-pad.duo {
    margin: 0 5px;
}

.col.half.no-pad.duo:last-of-type {
    margin-right: 0px;
}

.col.half.no-pad.duo:first-of-type {
    margin-left: 0px;
}

.services h4 {
    margin-top: 0;
}

/* -------------------------------------------- END 05	About Page */

/* -------------------------------------------- START 06	Bio Page */
/* -------------------------------------------- END 06	Bio Page */

/* -------------------------------------------- START 07	Contact Page */

/*.row.contact {
  margin-right: 15%;
  margin-left: 15%;
  height: calc( 90vh - 65px);
  padding-top: 6em;
}


.vcard p, .simform .error-message {
    line-height: 1.15;
    font-size    : calc( 0.75rem + 1vw );
}*/

.tel, .email {
  display: flex;
  justify-content: center;
}

#theForm input[type="text"] {
	font-size: 2rem;
}

.contact-block {
	flex-direction: row;
}

.contact-block div:last-of-type {
    margin-left: 5rem;
}

/*.email {
  display: flex;
  justify-content: flex-end;
}*/

#linkwrap, #plane {
  transform: scale(1.25);
}

.pop_hover, #linkwrap:hover {
  animation: giftPop_d 350ms ease-in-out 0s forwards;
}

/* -------------------------------------------- END 07	Contact Page */

/* -------------------------------------------- START 08	Error Page */
/* -------------------------------------------- END 08	Error Page */

/* -------------------------------------------- START 09	Work portfolio */
/* -------------------------------------------- END 09	Work portfolio */

/* -------------------------------------------- START 10	Single Project Page */
article {
  /*margin-right : 12.5%;
  margin-left  : 12.5%;*/
}

.project-info h1 {
	font-size: 6rem;
}

.project-info .row {
padding: 0;
}

article h1 {
  margin-bottom: -2.5vh;
  }

.attributes li {
	width: 15rem;
    padding: 5rem 0;
    margin: 1rem;
}

/* .cat-info is styling summary paragraphs relating to each section/platform */

/*.catdesc div {
  display         : flex;
  position        : absolute;
  top             : 0;
  height          : 100%;
  padding         : 0 20px;
  align-content   : center;
  flex-direction  : column;
  flex-wrap       : wrap;
  justify-content : center;
}*/

/*.catdesc div p {
  font-size : 2vw;
}*/

.srch_bar input, .srch_bar i {
	font-size: 2rem;
    line-height: 1.25;
}

.srch_bar input {
    margin-top: 0;
}

p#results_found {
  right: 0;
  line-height: 1.5;
}



/* -------------------------------------------- END 10	Single Project Page */

/* -------------------------------------------- START 11	Blog */

    .nuheader h2 {
    margin-bottom: .5em;
}

div.blogpvw:nth-of-type(2n+1) {
  flex-direction: row-reverse;
}

.blogpvw {
  margin-top: 0;
}



/* -------------------------------------------- END 11	Blog */

/* -------------------------------------------- START 12	Single Blog Page */

/* -------------------------------------------- END 12	Single Blog Page */

/* -------------------------------------------- START 13	Components */

.hero img,
.hero video {
  height     : 60vh;
  margin-top: -5px;
}

.hero.full .heading {
  height          : 60vh;
}

.row.caption {
  margin-bottom : 3em;
  margin-top: -2vw;
  padding-top: 0;
}

/*.caption p {
  margin-top : 0;
  font-family: "IBMPlexMono-Medium", monospace;
  font-size: calc( .5rem + .5vw );
  color: #CCCCCC;
}*/


.pullquote div.col-9 {
  margin-left: 2em;
}

.quote p {
	font-size: 2rem;
}

.quote p:last-of-type {
  margin-top     : .5em;
}

.quote svg {
  width: 4em;
}

#platform_list {
  font-size: calc(1rem + .75vw);
}

#platform_list li {
  width: calc((64vw - 110px) / 3);
}

.aside-eyes {
	display: flex;
}



/* -------------------------------------------- END 13	Components */

/* -------------------------------------------- START 14	Alerts */
/* -------------------------------------------- END 14	Alerts */

/* -------------------------------------------- START 15	Gallery Page */
/* -------------------------------------------- END 15	Gallery Page */

/* -------------------------------------------- START 16	Footer */

footer .footer {
    flex-direction: row;
    border-top: none;
    margin-top: 0;
}

footer .tellmore, footer .talksoon, footer .nusm {
width: 33.3333333%;
/*padding-left: 0em;
margin-bottom: 10px;
padding-bottom: 10px;*/
/*border-bottom: 10px solid white;*/
/*text-align: center;*/
}

footer .tellmore {
align-items: flex-start;
}

footer .talksoon {
align-items: center;
}

footer .nusm {
align-items: flex-end;
}

footer .bottom-bar {
 flex-direction: row;
}

footer blockquote {
text-align: left;
}

/* -------------------------------------------- END 16	Footer */


/* -------------------------------------------------------------- START Grid */


/* ---------------------------------------------------------------- END Grid */

/* -------------------------------------------------- START Sorter Nav Panel */

ul.categories, .sorter ul {
font-size: .9rem;
}

  .sorter div.col {
    max-width  : 20%;
    flex       : 3;
    flex-basis : calc(((100%/12)*3) - 5px);
    text-transform: capitalize;
  }

  /* .sorter div.col:first-of-type {
    z-index: 100;
  } */

  .sorter button {
    font-size      : 1.5vw;
  }

  .panel {
    width: calc(100vw - 20px);
  }

  .panel#panelB {
    margin-left: calc(-20vw + 5px);
  }

  .panel#panelC {
    margin-left: calc(-40vw + 5px);
  }

  .panel ul {
    font-size  : 1.25vw;
  }

  .panel ul.row {
    display: flex;
    flex-wrap: wrap;
  }

  .panel#panelA ul.row {
    flex-direction: column;
    box-sizing : border-box;
    margin     : 0;
  }

  .panel#panelB ul.row {
    flex-direction: column;
    margin-left: calc(20vw - 5px);
  }

  .panel#panelC ul.row {
    margin-left: calc(40vw - 5px);
  }

  .panel#panelC ul li {
    flex-basis: calc(20vw - 5px);
    box-sizing : border-box;
    margin     : 0;
  }

  .extra-pad {
    margin-top: 6vw !important;
  }
  
  .minibtn.tile {
    margin-bottom: 0;
}

/*  footer .quotes {
  top: -3rem;
  } */



  /* .panel ul li:nth-of-type(4n+1) { background: green; } */
   /*.panel ul li:nth-of-type(4n+2) { background: blue; }*/
   /*.panel ul li:nth-of-type(4n+3) { background: red; }*/
   /*.panel ul li:nth-of-type(4n) { background: yellow; } */

/* -------------------------------------------------- END Sorter Nav Panel */

} /* -------------------- END of @media only screen and (min-width: 768px) DESKTOP */

@media screen
       and (min-width:668px) and (max-width:768px) {
  footer .quotes {
  top: -2.25rem;
  margin-bottom: -3rem;
  }
}


/* -------------------- START of @media only screen and (max-width: 640px) PHONE ONLY */
@media screen
       and (max-width : 668px) {
       


.hero.full.index .heading {
/*
  flex-wrap       : wrap;
  flex-direction  : column;
*/
}

h5 {
margin-top: 0.5em;
margin-bottom: 0.5em;
}

.workrel.row, section.row {
/* display: flex; I commented this out to fix About grid but it might break something else*/
flex-wrap: wrap;
margin-bottom: 10px;
}

.workrel .tile {
margin: 2.5px 2.5px;
flex-basis: calc(50vw - 25px);
}

.workrel .tile:first-of-type, .workrel .tile:nth-of-type(3) {
margin-left: 0;
}

.workrel .tile:last-of-type, .workrel .tile:nth-of-type(2) {margin-right:0;}

.workrel .tile p a, #nugrid .tile p a {
    opacity: 1;
    background: rgba(0,0,0,.25);
}

#nugrid .tile {
margin: 10px 0;
}

.tile p {
font-size: 2rem;
}

#nugrid .tile p a span {
    padding : 0 1rem;
}

section .col, section .tile {
margin: 10px 0;
flex-basis: calc(50vw - 20px);
}

#nugriduo .col {
/* margin: 5px; */
}

#nugriduo .col:nth-of-type(odd) {
margin-left: 0;
}

#nugriduo .col:nth-of-type(even) {
margin-right: 0;
}

#nugriduo .col.col-3 {
margin-right: 0;
margin-left: 0;
}

#nugriduo .col.col-3:last-of-type {
margin-left: 10px;
}

.panel#panelA ul.row {
  display: flex;
  flex-wrap: wrap;
}

.panel#panelA ul li {
  flex-basis: calc(50vw - 25px);
}

/*.hero.index video {
  visibility: hidden;
}*/

.hero.index {
/*
  background       : url('/images/general/hero_nupolitan.jpg') no-repeat center -21vh;
  background-size  : cover;

  background       : url('/images/general/hero_nupolitan6.jpg') no-repeat right top;
  background-size  : 125%;*/
}

/* Credits and Footer */

#details .basicinfo, #details .views, #details .tags, #details .likes, #details .credits {
/*min-width: calc( 100vw - 20px );*/
}

.minibtn.tile {
flex-basis: 100%;
}

#details .basicinfo dl, #details .views dl, #details .tags ul, #details .likes dl, #details .credits {
margin-top: 3.5em;
margin-bottom: 2em;
}

#details .col {
margin-top: 0;
margin-bottom: 0;
}

#details .basicinfo, #details .views, #details .tags, #details .likes {
margin-bottom: 10px;
}

#details .behance {
margin-bottom: 10px;
}

/*footer .row {
display: block;
}

footer .footer {
padding-bottom: 5em;
}

footer copyright {
display: block;
}

footer .legal {
justify-content: flex-start;
align-self: flex-start;
}

footer .legal h5 {
margin-left: 0px;
margin-right: 10px;
}*/


} /* -------------------- END of @media only screen and (max-width: 640px) PHONE ONLY */

/* -------------------- START of @media only screen and (min-width: 480px) and (max-width:768px) TABLET */
@media screen
       and (min-width:480px) and (max-width:768px) {


#linkwrap, #plane {
  transform: scale(2);
}

/*.pop_hover, #linkwrap:hover {
  animation: giftPop_t 350ms ease-in-out 0s forwards;
}*/


} /* -------------------- END of @media only screen and (min-width: 480px) and (max-width:768px) TABLET*/

/* -------------------------------------------- END CC	Media Queries /// */



/* -------------------------------------------- START DD	Animations ////// */

/* -------------------------------------------- START blob */

#organic-blob {
  background: white;
}

#organic-blob circle {
  fill: #FFFF40;
}

@keyframes from0to360 {from{transform:rotate(0);}
  to{transform:rotate(360deg);}
}

#Circle1 {
  animation: from0to360 40s linear infinite;
  cx: 150;
  cy: 145;
  r: 110;
  transform-origin: 150px 150px;
}

@keyframes from360to0 {from{transform:rotate(360deg);}
  to{transform:rotate(0deg);}
}

#Circle2 {
  animation: from360to0 60s linear infinite;
  cx: 150;
  cy: 155;
  r: 110;
  transform-origin: 165px 150px;
}

#Circle3 {
  animation: from0to360 40s linear infinite;
  cx: 145;
  cy: 150;
  r: 110;
  transform-origin: 160px 135px;
}

#Circle4 {
  animation: from360to0 60s linear infinite;
  cx: 155;
  cy: 150;
  r: 110;
  transform-origin: 150px 150px;
}

#Circle5 {
  animation: from0to360 40s linear infinite 3s;
  cx: 135;
  cy: 130;
  r: 60;
  transform-origin: 110px 110px;
}

#Circle6 {
  animation: from0to360 60s linear infinite;
  cx: 145;
  cy: 160;
  r: 70;
  transform-origin: 180px 165px;
}

#Circle7 {
  animation: from0to360 50s linear infinite 2s;
  cx: 135;
  cy: 180;
  r: 60;
  transform-origin: 115px 195px;
}

#blobby-line {
  stroke-width: 1;
  stroke: #cccccc;
  fill: none;
  animation: movement 20s linear infinite;
}

@keyframes movement
{
    0%,
  100% { transform: translate(-380 -100)
                     scale(1.25); }
   20% { transform: translate(-350 -100)
                     scale(1.22); }
   40% { transform: translate(-350 -90)
                     scale(1.25); }
   90% { transform: translate(-390 -100)
                     scale(1.25); }
}

/* -------------------------------------------- END blob */

/* -------------------------------------------- START eye cloud blinking */

.eye-cloud { 
  fill: #EEEEEE;
  //background: blue; 
}

.outline {
  stroke: #ffffff;
  stroke-width: 2;
}

.eye-cloud rect {
  fill: #ffffff;
  width: 512;
  height: 110%;
}

#eye1 { transform: matrix(1, 0, 0, 1, -250, -450); }
#eye2 { transform: matrix(.5, 0, 0, .5, 400, -250); }
#eye3 { transform: matrix(.5, 0, 0, .5, -320, -130); }
#eye4 { transform: matrix(1, 0, 0, 1, 0, -200); }
#eye5 { transform: matrix(1, 0, 0, 1, 520, -100); }
#eye6 { transform: matrix(1.5, 0, 0, 1.5, -550, -100); }
#eye7 { transform: matrix(.5, 0, 0, .5, 320, 120); }
#eye8 { transform: matrix(1.5, 0, 0, 1.5, 220, 120); }
#eye9 { transform: matrix(.5, 0, 0, .5, 60, 300); }

#lid1 {
  -webkit-animation: blink 8s infinite ease-in-out 1s;
          animation: blink 8s infinite ease-in-out 1s;
  fill: black;
}

#lid2 {
  -webkit-animation: blink 8s infinite ease-in-out 5s;
          animation: blink 8s infinite ease-in-out 5s;
    fill: black;
}

#lid3 {
  -webkit-animation: blink 8s infinite ease-in-out 8s;
          animation: blink 8s infinite ease-in-out 8s;
    fill: black;
}

#lid4 {
  -webkit-animation: blink 8s infinite ease-in-out 12s;
          animation: blink 8s infinite ease-in-out 12s;
    fill: black;
}


@-webkit-keyframes blink {
  90% {
    -webkit-transform: none;
            transform: none;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(256px) scaleY(0);
            transform: translateY(256px) scaleY(0);
  }
  100% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

@keyframes blink {
  90% {
    -webkit-transform: none;
            transform: none;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  94% {
    -webkit-transform: translateY(256px) scaleY(0);
            transform: translateY(256px) scaleY(0);
  }
  100% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


/* -------------------------------------------- END eye cloud blinking */

/* -------------------------------------------- START four boxes */

#ybox1, #ybox2, #ybox3, #ybox4 {
	fill: rgba(255,255,0,0.75);
}

.four-boxes rect.dashed {
 stroke-width: 2;
 stroke: #CCCCCC;
 stroke-dasharray: 15 10;
 fill: none;
}

#ybox1 { animation: rotate-1 5s infinite alternate ease-in-out forwards; }
#ybox2 { animation: rotate-2 5s infinite 1s alternate ease-in-out forwards; }
#ybox3 { animation: rotate-1 5s infinite 1s alternate ease-in-out forwards; }
#ybox4 { animation: rotate-2 5s infinite alternate ease-in-out forwards; }

#gbox1 { animation: rotate-2 5s infinite 1s alternate ease-in-out forwards; }
#gbox2 { animation: rotate-1 5s infinite alternate ease-in-out forwards; }
#gbox3 { animation: rotate-1 5s infinite 1s alternate ease-in-out forwards; }
#gbox4 { animation: rotate-1 5s infinite alternate ease-in-out forwards; }

@keyframes rotate-1 {
 0% {
   //transform: rotate(0deg);  }
 40% {
   transform: rotate(.25deg);  }
 80% {
   transform: rotate(-.25deg);  }
 100% {
   //transform: rotate(0deg);  }
}

@keyframes rotate-2 {
 0% {
  // transform: rotate(0deg);  }
 40% {
   transform: rotate(-.25deg);  }
 80% {
   transform: rotate(.25deg);  }
 100% {
   //transform: rotate(0deg);  }
}

/* -------------------------------------------- END four boxes */

/* -------------------------------------------- START squiggles */

.squiggles {
  fill: rgba(255,255,0,0.75);
  //background: blue;
}

.squiggles path.dashed {
 stroke-width: 2;
 stroke: #CCCCCC;
 stroke-dasharray: 10 5;
}

#line1   {
 // d: path("M80,200 L920,200");
  animation: ants 5s infinite alternate ease-in-out forwards;
}

#line2   {
//  d: path("M30,360 L980,360");
  animation: ants 5s infinite alternate ease-in-out forwards;
}

#line3   {
 // d: path("M70,520 L960,520");
  animation: ants 5s infinite alternate ease-in-out forwards;
}

.s1 {
  animation: float 5s infinite alternate ease-in-out forwards;
}

.s2 {
  animation: float 5s infinite 1s alternate ease-in-out forwards;
}

.s3 {
  animation: float 5s infinite 2s alternate ease-in-out forwards;
}

@keyframes ants {
 0%   { stroke-dashoffset: 0; transform: translateY(0px);  }
 50%  { stroke-dashoffset: 20; transform: translateY(-4px);  }
 100% { stroke-dashoffset: 0; transform: translateY(0px);  }
}

@keyframes float {
 0%   { transform: translateY(0px);  }
 50%  { transform: translateY(-4px);  }
 100% { transform: translateY(0px);  }
}

/* -------------------------------------------- END squiggles */

/* -------------------------------------------- START slanted lines */

.lines-diagram {
 //background: blue;
}

.lines-diagram path {
 stroke-width: 10;
 stroke: rgba(255,255,0,0.75);
 fill: none;
}

.lines-diagram path.light {
  stroke: rgba(255,255,0,0.25);
}

.lines-diagram path.dashed {
 stroke-width: 2;
 stroke: #CCCCCC;
 stroke-dasharray: 10 5;
}

#slant1l  {
//  d: path("M100,0 L110,640"); 
  animation: switch-1l 5s infinite alternate ease-in-out forwards;
}
#slant1 {
//  d: path("M100,0 L10,640");
  animation: switch-1 5s infinite 1s alternate ease-in-out forwards;
}
#slant2l  {
//  d: path("M200,0 L210,640");
  animation: switch-1l 5s infinite 1s alternate ease-in-out forwards;
}
#slant2   {
//  d: path("M200,0 L110,640");
  animation: switch-1 5s infinite 1s alternate ease-in-out forwards;
}
#slant3l  {
//  d: path("M300,0 L310,640");
  animation: switch-1l 5s infinite 1s alternate ease-in-out forwards;
}
#slant3   {
//  d: path("M300,0 L210,640");
  animation: switch-1 5s infinite 1s alternate ease-in-out forwards;
}
#slant4l   {
//  d: path("M400,0 L410,640");
  animation: switch-1l 5s infinite 1s alternate ease-in-out forwards;
}
#slant4   {
//  d: path("M400,0 L310,640");
  animation: switch-1 5s infinite 1s alternate ease-in-out forwards;
}
#slant5l   {
//  d: path("M500,0 L510,640");
  animation: switch-1l 5s infinite 1s alternate ease-in-out forwards;
}
#slant5   {
//  d: path("M500,0 L410,640");
  animation: switch-1 5s infinite 1s alternate ease-in-out forwards;
}
#slant6l   {
//  d: path("M600,0 L610,640");
  animation: switch-1l 5s infinite 1s alternate ease-in-out forwards;
}
#slant6   {
//  d: path("M600,0 L510,640");
  animation: switch-1 5s infinite 1s alternate ease-in-out forwards;
}
#slant7l   {
//  d: path("M700,0 L710,640");
  animation: switch-1l 5s infinite 1s alternate ease-in-out forwards;
}
#slant7   {
//  d: path("M700,0 L610,640");
  animation: switch-1 5s infinite 1s alternate ease-in-out forwards;
}
#slant8l   {
//  d: path("M800,0 L810,640");
  animation: switch-1l 5s infinite 1s alternate ease-in-out forwards;
}
#slant8   {
//  d: path("M800,0 L710,640");
  animation: switch-1 5s infinite 1s alternate ease-in-out forwards;
}
#slant9l   {
//  d: path("M900,0 L910,640");
  animation: switch-1l 5s infinite 1s alternate ease-in-out forwards;
}
#slant9   {
//  d: path("M900,0 L810,640");
  animation: switch-1 5s infinite 1s alternate ease-in-out forwards;
}
#slant10   {
//  d: path("M120,0 L30,640");
  animation: ants 5s infinite alternate ease-in-out forwards;
}
#slant11   {
//  d: path("M220,0 L130,640");
  animation: ants 5s infinite alternate ease-in-out forwards;
}
#slant12   {
//  d: path("M320,0 L230,640");
  animation: ants 5s infinite alternate ease-in-out forwards;
}
#slant13   {
//  d: path("M420,0 L330,640");
  animation: ants 5s infinite alternate ease-in-out forwards;
}
#slant14   {
//  d: path("M520,0 L430,640");
  animation: ants 5s infinite alternate ease-in-out forwards;
}
#slant15   {
//  d: path("M620,0 L530,640");
  animation: ants 5s infinite alternate ease-in-out forwards;
}
#slant16   {
//  d: path("M720,0 L630,640");
  animation: ants 5s infinite alternate ease-in-out forwards;
}
#slant17   {
//  d: path("M820,0 L730,640");
  animation: ants 5s infinite alternate ease-in-out forwards;
}
#slant18   {
 // d: path("M920,0 L830,640");
  animation: ants 5s infinite alternate ease-in-out forwards;
}

@keyframes switch-1 {
 0%   { transform: translate(0);  }
 50%  { transform: translate(10px);  }
 100% { transform: translate(0);  }
}

@keyframes switch-1l {
 0%   { transform: translate(0);  }
 50%  { transform: translate(-10px);  }
 100% { transform: translate(0);  }
}

@keyframes ants {
 0%   { stroke-dashoffset: 0;  }
 50%  { stroke-dashoffset: 20;  }
 100% { stroke-dashoffset: 0;  }
}

/* -------------------------------------------- END slanted lines */

/* -------------------------------------------- START process diagram */

.process-diagram {
  //background: blue;
}
  
  
.process-diagram circle {
 fill: #FFFF40;
 r: 80;
}

#c1 {
 cx: 250;
 cy: 80;
 animation: bob-1 5s infinite alternate ease-in-out forwards;
}

#c2 {
 cx: 650;
 cy: 200;
 animation: bob-2 5s infinite alternate ease-in-out forwards;
}

#c3 {
 cx: 400;
 cy: 300;
 animation: bob-3 5s infinite alternate ease-in-out forwards;
}

#c4 {
 cx: 580;
 cy: 450;
 animation: bob-4 5s infinite alternate ease-in-out forwards;
}

#c5 {
 cx: 350;
 cy: 550;
 animation: bob-5 5s infinite alternate ease-in-out forwards;
}

.process-diagram path {
 stroke-width: 2;
 stroke: #CCCCCC;
 stroke-dasharray: 10 5;
 fill: none;
}

#p1 {
// d: path("M 250 80, C -80 40, 300 500, 350 550");
 animation: path-1-a 5s infinite alternate ease-in-out forwards;
}

#p2 {
// d: path("M 650 200 C 100 60, -100 400, 350 550");
 animation: path-2-a 5s infinite alternate ease-in-out forwards;
}

#p3 {
// d: path("M 250 80 C 1100 -80, 750 400, 580 450");
 animation: path-3-a 5s infinite alternate ease-in-out forwards;
}

#p4 {
// d: path("M 650 200 C 950 550, 750 650, 350 550");
 animation: path-4-a 5s infinite alternate ease-in-out forwards;
}

#p5 {
// d: path("M250,80 L350,550");
 animation: path-5-a 5s infinite alternate ease-in-out forwards;
}

#p6 {
// d: path("M250,80 L400,300");
 animation: path-6-a 5s infinite alternate ease-in-out forwards;
}

#p7 {
// d: path("M400,300 L350,550");
 animation: path-7-a 5s infinite alternate ease-in-out forwards;
}

#p8 {
// d: path("M580,450 L350,550");
 animation: path-8-a 5s infinite alternate ease-in-out forwards;
}

#p9 {
// d: path("M400,300 L650,200");
 animation: path-9-a 5s infinite alternate ease-in-out forwards;
}

#p10 {
// d: path("M400,300 L580,450");
 animation: path-10-a 5s infinite alternate ease-in-out forwards;
}

#p11 {
// d: path("M650,200 L350,550");
 animation: path-11-a 5s infinite alternate ease-in-out forwards;
}

@keyframes bob-1 {
 0% {
   cx: 250;
   cy: 80;  }
 40% {
   cx: 255;
   cy: 80;  }
 80% {
   cx: 247.5;
   cy: 80;  }
 100% {
   cx: 250;
   cy: 80;  }
}
@keyframes bob-2 {
 0% {
   cx: 650;
   cy: 200;  }
 40% {
   cx: 655;
   cy: 195;  }
 80% {
   cx: 647.5;
   cy: 202.5;  }
 100% {
   cx: 650;
   cy: 200;  }
}
@keyframes bob-3 {
 0% {
   cx: 400;
   cy: 300;  }
 40% {
   cx: 397.5;
   cy: 300;  }
 80% {
   cx: 405;
   cy: 300;  }
 100% {
   cx: 400;
   cy: 300;  }
}
@keyframes bob-4 {
 0% {
   cx: 580;
   cy: 450;  }
 40% {
   cx: 580;
   cy: 445;  }
 80% {
   cx: 580;
   cy: 452.5;  }
 100% {
   cx: 580;
   cy: 450;  }
}
@keyframes bob-5 {
 0% {
   cx: 350;
   cy: 550;  }
 40% {
   cx: 345;
   cy: 545;  }
 80% {
   cx: 352.5;
   cy: 552.5;  }
 100% {
   cx: 350;
   cy: 550;  }
}

@keyframes path-1-a {
 0%    { d: path("M 250 80 C -80 40, 300 500, 350 550");  }
 40%   { d: path("M 255 80 C -80 40, 300 500, 345 545");  }
 80%   { d: path("M 247.5 80 C -80 40, 300 500, 352.5 552.5");  }
 100%  { d: path("M 250 80 C -80 40, 300 500, 350 550");  }
}
@keyframes path-2-a {
 0%    { d: path("M 650 200 C 100 60, -100 400, 350 550");  }
 40%   { d: path("M 655 195 C 100 60, -100 400, 345 545");  }
 80%   { d: path("M 647.5 202.5 C 100 60, -100 400, 352.5 552.5");  }
 100%  { d: path("M 650 200 C 100 60, -100 400, 350 550");  }
}
@keyframes path-3-a {
 0%    { d: path("M 250 80 C 1100 -80, 750 400, 580 450");  }
 40%   { d: path("M 255 80 C 1100 -80, 750 400, 580 445");  }
 80%   { d: path("M 247.5 80 C 1100 -80, 750 400, 580 452.5");  }
 100%  { d: path("M 250 80 C 1100 -80, 750 400, 580 450");  }
}
@keyframes path-4-a {
 0%    { d: path("M 650 200 C 950 550, 750 650, 350 550");  }
 40%   { d: path("M 655 195 C 950 550, 750 650, 345 545");  }
 80%   { d: path("M 647.5 202.5 C 950 550, 750 650, 352.5 552.5");  }
 100%  { d: path("M 650 200 C 950 550, 750 650, 350 550");  }
}
@keyframes path-5-a {
 0%    { d: path("M250,80 L350,550");  }
 40%   { d: path("M255,80 L345,545");  }
 80%   { d: path("M247.5,80 L352.5,552.5");  }
 100%  { d: path("M250,80 L350,550");  }
}
@keyframes path-6-a {
 0%    { d: path("M250,80 L400,300");  }
 40%   { d: path("M255,80 L397.5,300");  }
 80%   { d: path("M247.5,80 L405,300");  }
 100%  { d: path("M250,80 L400,300");  }
}
@keyframes path-7-a {
 0%    { d: path("M400,300 L350,550");  }
 40%   { d: path("M397.5,300 L345,545");  }
 80%   { d: path("M405,300 L352.5,552.5");  }
 100%  { d: path("M400,300 L350,550");  }
}
@keyframes path-8-a {
 0%    { d: path("M580,450 L350,550");  }
 40%   { d: path("M580,445 L345,545");  }
 80%   { d: path("M580,452.5 L352.5,552.5");  }
 100%  { d: path("M580,450 L350,550");  }
}
@keyframes path-9-a {
 0%    { d: path("M400,300 L650,200");  }
 40%   { d: path("M397.5,300 L655,195");  }
 80%   { d: path("M405,300 L647.5,202.5");  }
 100%  { d: path("M400,300 L650,200");  }
}
@keyframes path-10-a {
 0%    { d: path("M400,300 L580,450");  }
 40%   { d: path("M397.5,300 L580,445");  }
 80%   { d: path("M405,300 L580,452.5");  }
 100%  { d: path("M400,300 L580,450");  }
}
@keyframes path-11-a {
 0%    { d: path("M650,200 L350,550");  }
 40%   { d: path("M655,195 L345,545");  }
 80%   { d: path("M647.5,202.5 L352.5,552.5");  }
 100%  { d: path("M650,200 L350,550");  }
}

/* -------------------------------------------- END process diagram */


@keyframes popUp {
    0%   { transform: scale(1); }
    10%  { transform: scale(0.85); }
    50%  { transform: scale(1.15); }
    65%  { transform: scale(0.95); }
    75%, 100%  { transform: scale(1.05); }
}

@keyframes zoomUp {
    0%   { transform: scale(1); }
    10%  { transform: scale(0.75); }
    75%  { transform: scale(1.10); }
    65%, 100%  { transform: scale(1); }
}

@keyframes popUps {
    0%   { transform: scale(1); }
    5%  { transform: scale(0.75); }
    15%  { transform: scale(1.30); }
    25%  { transform: scale(0.85); }
    35%, 100%  { transform: scale(1.20); }
}

@keyframes hoveranim {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }

  50% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes fade-out {
  100% {
    opacity           : 0;
    transform : scale(0.4);
  }
}

@-webkit-keyframes fadeInRight {
  0% {
    left    : 20%;
    opacity : 0;
  }

  100% {
    left    : 0;
    opacity : 1;
  }
}

@keyframes fadeInRight {
  0% {
    left    : 20%;
    opacity : 0;
  }

  100% {
    left    : 0;
    opacity : 1;
  }
}

@-webkit-keyframes moveUpFromDown {
  from {
    -webkit-transform : translateY(100%);
  }

  to {
    -webkit-transform : translateY(0);
  }
}

@keyframes moveUpFromDown {
  from {
    -webkit-transform : translateY(100%);
    transform         : translateY(100%);
  }

  to {
    -webkit-transform : translateY(0);
    transform         : translateY(0);
  }
}

@keyframes rotateOut {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-720deg);
    visibility: hidden;
  }

}

@keyframes giftPop_m {
  0%   { transform: scale(2.25); }
  20%  { transform: scale(2); }
  70%  { transform: scale(2.6); }
  85%  { transform: scale(2.2); }
  100% { transform: scale(2.5); }
}

@keyframes giftPop_t {
  0%   { transform: scale(2.25); }
  20%  { transform: scale(2); }
  70%  { transform: scale(2.6); }
  85%  { transform: scale(2.2); }
  100% { transform: scale(2.5); }
}

@keyframes giftPop_d {
  0%   { transform: scale(1.25); }
  20%  { transform: scale(1); }
  70%  { transform: scale(1.6); }
  85%  { transform: scale(1.2); }
  100% { transform: scale(1.5); }
}

@keyframes blink {
  90% {
    -webkit-transform: none;
            transform: none;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  94% {
    -webkit-transform: translateY(256px) scaleY(0);
            transform: translateY(256px) scaleY(0);
  }
  100% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


/* -------------------------------------------- END DD	Animations ////// */


/* __________ CONTACT STYLES, Media query __________________ */

/* Adjust form for smaller screens */

#theForm {padding-bottom: 0; margin-bottom: 0;}

/*@media screen
       and (max-width : 44.75em) {
  .simform {
    font-size : 1.8em;
  }
}

@media screen
       and (max-width : 33.5625em) {
  .simform {
    font-size : 1.2em;
  }
}

@media (min-width: 320px)
       and (max-width : 565px) {
  .simform-inner a {
    top             : 3.48px;
    text-decoration : none;
    font-size       : 20px;
    font-size       : 10vwmin;
  }
}*/

/* __________ END CONTACT STYLES ______________ */