/*********** SPIRALASIA Custom CSS ***********/

* {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;

}

/* ----- GLOBAL STYLES ----- */

html {
    overflow-y: scroll;
    overflow-x: hidden;
}

body {
    font-size: 14px;
    color: #4d4d4d;
    font-family: "Gotham";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    background-color: white;
    overflow-x: hidden;
}

// For normal
.normal {
  font-weight: 400;
}

// For bold
.bold,
strong {
  font-weight: 700;
}

// For thin
.light {
  font-weight: 300;
}

body.white {
    background-image: url(../images/index/indexBackground.html);
    background-attachment: cover;
    background-position: 60% 15%;
    background-repeat: no-repeat;
    background-size: cover;
}

section {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 30px;
    padding-right: 30px;
    display: block;
}

section.container.employee-profiles {
    padding-left: 30px !important;
    padding-right: 30px !important;
    display: block;
}

.list article {
    max-height: 595px;
    height: 595px;
    overflow: hidden;
}

.article img {
    height: 390px !important;
    overflow: hidden;
}

.padding_top {
    padding-top: 60px;
}

.padding_bottom {
    padding-bottom: 60px;
}

.padding_bottomx2 {
    padding-bottom: 120px;
}

.extra_padding {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.extra_paddingx2 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.no_padding_left {
    padding-left: 0px !important;
}

h1,
h2,
h3,
h4 {
    color: black;
}

h1 {
    font-family: "Gotham";
    font-size: 75px !important;
    font-weight: 700;
    margin-bottom: 40px;
    line-height: 100%;
}

h2 {
    font-family: "Gotham";
    font-weight: 700;
    font-size: 50px !important;
    margin-bottom: 40px;
    text-align: center;
}

h3 {
    font-family: "Gotham";
    font-size: 20px !important;
    font-weight: 0;
    margin-bottom: 40px;
    text-align: center;
}

h4 {
    font-family: "Gotham";
    font-size: 50px !important;
	font-weight: 700;
    margin-bottom: 40px;
    text-align: center;

}

h5 {
    font-family: "Gotham";
    font-size: 50px !important;
	font-weight: 700;
    margin-bottom: 40px;
    margin-top: 30;
    text-align: center;
    color: black;

}

h6 {
	font-family: "Gotham";
    font-size: 32px; !important
    text-align: center;
	
}

h7 {
	font-family:"Gotham";
	font-size:50px;
	text-align:center;
	color:#FFF;
}

h8 {
	font-family:"Gotham";
	font-size:25px; !important
	text-align:center;
	line-height: 35px;
	color: #FFF;
}

.container {
    padding-left: 0;
    padding-right: 0;
	color:#FFF;
}

p {
    margin-bottom: 30px;
}

hr {
    margin: 0;
    margin-bottom: 15px;
    width: 100%;
}

.casestudy_flex hr {
    width: 100%;
    border-bottom: 3px dotted white;
    margin-bottom: 15px;
    margin-top: 5px;
    border-top: none;
}

.jobs hr {
    width: 100%;
    border-bottom: 3px dotted black;
    margin-bottom: 15px;
    margin-top: 5px;
    border-top: none;
}

.jobs a hr {
    width: 10%;
    border-bottom: 3px dotted black;
    margin-bottom: 15px;
    margin-top: 5px;
    border-top: none;
}

.dotted {
    width: 40%;
    border-bottom: 3px dotted black;
    margin-bottom: 15px;
    margin-top: 5px;
    margin-right: auto;
    border-top: none;
    margin-left: auto;
}

.dotted-small {
    width: 10%;
    border-bottom: 3px dotted black;
    margin-bottom: 15px;
    margin-top: 5px;
    border-top: none;
}

.no_padding {
    margin-left: 0px !important;
    margin-right: 0px !important;
}


/* ----- Headings ----- */

.jobs h4,
.support h4 {
    font-family: "Gotham";
    font-size: 30px;
    font-weight: bold;
}


/* ----- Paragraphs ----- */

.jobs p {
    font-family: Gotham;
    font-size: 16px;
    font-weight: normal;
}

.extra-margin {
    margin-left: 8.333%;
    margin-right: 8.333%;
}

.p-summary {
    margin-bottom: 60px !important;
    font-family: "Gotham" !important;
    font-size: 20px !important;
    font-weight: normal !important;
}


/* ----- Borders ----- */

.border-block {
    border-left: 3px dotted black;
}


/* ------ Section Colors ----- */

.white {
    background-color: white !important;
}

.white-text {
    color: white !important;
}

.black-text {
    color: #000000 !important;
}

.grey-text {
    color: #4d4d4d !important;
}

.turquoise {
    background-color: #63d0df !important;
}

.turquoise-bright {
    background-color: #00ffff !important;
}

.n2oblue {
    background-color: #197ea7 !important;
}

.hotpink-bright {
    background-color: #dd2397 !important;
}

.hotpink {
    background-color: #f5426c !important;
}


/* --- styling helper class for hr --- */

.black-divide {
    border-bottom: 3px dotted black !important;
}


/* ----- hide elements ----- */

.no_show {
    display: block;
}


/* ----- Video Styling ----- */

.wrapper {
    width: 80%;
    height: 100%;
    margin: 70px auto;
    background: #fff;
    padding-bottom: 80px;
}

.full_wrapper {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-bottom: 80px;
}

.h_iframe {
    position: relative;
}

.h_iframe .ratio {
    display: block;
    width: 100%;
    height: auto;
}

.h_iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ----- Flexbox alignment classes ----- */

.Aligner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

.Aligner-item {
    max-width: 100%;
}


/* ----- Buttons ----- */


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


/* ----- END about flex ----- */

button.btn.btn-primary.btn-lg.btn-block {
    text-transform: uppercase;
    background: #197ea7;
    border-radius: 0;
    transition: 0.2s;
    font-size: 0.7em;
    padding-top: 20px;
    padding-bottom: 20px;
}

button.btn.btn-primary.btn-lg.btn-block:hover {
    border-radius: 0;
    background-color: #065e82;
    transition: 0.2s;
}

button.btn.btn-primary.btn-lg.btn-block::after {
    display: block;
    content: url('../images/chev-down.html');
    width: 100%;
    height: auto;
    border-radius: 0;
}

.more-btn {
    border: none;
    color: white;
    background-color: #f5426c;
    margin-top: 20px;
    margin-left: 13px;
    border-radius: 0px;
}

.more-btn:hover {
    border: none;
    color: white;
    background-color: #ff0855;
}


/* ----- WORK PAGE ----- */

section.placeholder {
    padding-bottom: 0 !important;
}

.wrapper:nth-child(1) {
    margin-bottom: 0px !important;
}


/* ----- carousel controls ----- */

.video {
    padding-bottom: 80px;
}

.lastest-tech {
    margin-bottom: 60px;
}

#carousel-example-generic {
    margin-bottom: 60px;
}

a.right.carousel-control,
a.left.carousel-control {
    background: none;
}


/* ----- flex box ----- */

.flexbox-container {
    max-width: 1920px;
    margin: 0 auto;
    color: white;
    text-align: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: stretch;
    align-items: stretch;
}

img {
    min-width: 100% !important;
}


/* ----- Links ----- */

.jobs a {
    padding: 2px 20px 20px;
    padding-left: 1px;
    display: block;
}


/* ----- NAVBAR ----- */

header {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.95);
    width: 100%;
    display: block;
    height: 80px;
    z-index: 99999;
    top: 0;
    transition: top 0.4s ease-in-out;
	opacity: 40%;
}

header#index_nav.container-fluid.nav-down {
    position: fixed;
    background-color: transparent;
    width: 100%;
    display: block;
/*    height: 80px;*/
    z-index: 99999;
    border-bottom:  none;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.01);
    top: 0;
    transition: top 0.4s ease-in-out;
}

.nav-up {
    top: -80px;
}


/*BURGER MENU*/
@import url(http://fonts.googleapis.com/css?family=Vollkorn);

.burger-wrap {
position: fixed;
top: 40px;
left: 1260px;
height: 15px;
width: 20px;
cursor: pointer;
z-index: 200;
transition: opacity .25s ease;
display: block;
opacity: 1;
}

.burger-wrap .button_container {
display: block;
opacity: 1;
}

.burger-wrap .button_container:not(#burger) {
opacity: 1;
}


.burger-wrap.active .button_container .toper {
transform: translateY(7px) translateX(0) rotate(45deg);
-webkit-transform: translateY(7px) translateX(0) rotate(45deg);
background: #FFFFFF;
}

    
.burger-wrap.active .button_container .bottom {
transform: translateY(0px) translateX(0) rotate(-45deg);
-webkit-transform: translateY(0px) translateX(0) rotate(-45deg);
background: #FFFFFF;
}
    

.burger-wrap .button_container span {
background: #FFFFFF;
border: none;
height: 2px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition:  all .3s ease;
cursor: pointer;
}

.burger-wrap .button_container.class-black span {
background: #000000;
}

.burger-wrap .button_container.class-white span {
background: #FFFFFF !important;
}


.burger-wrap .button_container span:nth-of-type(2) {
top: 7px;
}


/*MENU*/
.menu {
width: 100%;
height: 100vh;
background: #000000;
position: fixed;
top: 0;
left: 0;
z-index: 0;
opacity: 0;
padding: 73px 0 0 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.menu.open {
opacity: 1;
z-index: 199;
}

.menu .logo{
width: 100%;
max-width: 71px;
display: block;
margin: 0 auto;
}

.menu .logo a{
font-size: 0;
text-decoration: none;
display: block;
background: url("../images/logo.png") no-repeat center top;
background-size: 71px 21px;
}

.menu .start {
position: absolute;
top: 72px;
right: 77px;
}

.menu .start a{
color: #FFFFFF;
text-decoration: none;
transition:  all .3s ease;
}

.menu .start span.desc{
display: inline-block;
font-size: 14px;
line-height: 20px;
font-weight: 300;
vertical-align: middle;
transition: opacity .25s ease;
opacity: 0;
}

.menu .start a:hover span.desc{
opacity: 1;
}

.menu .start span.box{
height: 10px;
width: 20px;
display: inline-block;
border: 1px solid #FFFFFF;
vertical-align: middle;
margin: 0 0 0 10px;
transition:  all .3s ease;
}

.menu .items-wrap{
width: 70%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: left;
}

.menu .items-wrap .menu-links a{
display: block;
position: relative;
text-decoration: none;
color: #393939;
transition:  all .3s ease;
font-size: 46px;
line-height: 56px;
font-weight: 300;
margin: 0 0 40px 0;
}

.menu .items-wrap .menu-links a:last-child{
margin: 0;
}

.menu .items-wrap .menu-links a:hover{
color: #FFFFFF;
}

.menu .items-wrap .menu-links a.active{
color: #FFFFFF;
}

.menu .items-wrap .social-links{
padding: 100px 0 0 0;
}

.menu .items-wrap .social-links a{
display: inline-block;
color: #FFFFFF;
font-size: 14px;
line-height: 24px;
font-weight: 300;
margin: 0 40px 0 0;
text-decoration: none;
}

.menu .items-wrap .social-links a:last-child{
margin: 0;
}

/* Overlay style */

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 60;
    left: 0;
    background: whitesmoke;
    z-index: 16 !important;
}


/*HERO*/
.hero {
width: 100%;
display: block;
height: 100vh;
background-color: #000000;
}

.hero .content{
width: 70%;
display: block;
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.hero .content h1{
color: #FFFFFF;
font-size: 46px;
line-height: 56px;
font-weight: 300;
}

.hero .content h1 span{
text-decoration: line-through;
}

.hero .content h3{
color: #FFFFFF;
font-size: 14px;
line-height: 24px;
font-weight: 300;
margin: 35px 0 0 0;
}


/* Overlay closing cross */

.overlay .overlay-close {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 20px;
    top: 20px;
    overflow: hidden;
    border: none;
    text-indent: 200%;
    color: transparent;
    outline: none;
    z-index: 100;
}


/* Menu style */

.overlay nav {
    text-align: center;
    position: relative;
    top: 50%;
    height: 60%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    position: relative;
	font-size: 16pt;
}

.overlay ul li {
    display: block;
    height: 40%;
    height: calc(100% / 5);
    min-height: 54px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.overlay ul li a {
    font-size: 42px;
    font-weight: bold;
    display: block;
    font-family: 'Gotham';
    color: black;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    white-space: nowrap;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
    color: gray;
    text-decoration: none;
}


/* Effects */

.overlay-slidedown {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.6s;
    -webkit-transition: visibility 0s 0.6s, -webkit-transform 0.6s ease-in-out;
    transition: visibility 0s 0.6s, -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, visibility 0s 0.6s;
    transition: transform 0.6s ease-in-out, visibility 0s 0.6s, -webkit-transform 0.6s ease-in-out;
}

.overlay-slidedown.open {
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

@media screen and (max-height: 30.5em) {
    .overlay nav {
        height: 70%;
        font-size: 34px;
    }
    .overlay ul li {
        min-height: 34px;
    }
}


/* --------- Hamburger icon ---------- */

i.trigger-overlay {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.80);
}

@media screen and (max-height: 30.5em) {
    .overlay nav {
        height: 70%;
        font-size: 34px;
    }
    .overlay ul li {
        min-height: 34px;
    }
}


/* ------ Navbar - Close Icon ------ */

.nav-icon3 {
    width: 45px;
    height: 50px;
    /*        position: fixed;*/
    float: right;
    right: 20px;
    top: 20px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
    cursor: pointer;
    margin-top: 24px;
    margin-right: 30px;
    z-index: 9999;
}

.nav-icon3 span {
    display: inline;
    position: absolute;
    height: 2px;
    width: 70%;
    background: #999;
    border-radius: 0px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}

.nav-icon3 span:before{
	top:-8px;
}

.nav-icon3 span:after{
	top:8px;
}



/* Icon 3 */

.nav-icon3 span:nth-child(1) {
    top: 10px;
	max-width: 60%;
	
}

.nav-icon3 span:nth-child(2),
.nav-icon3 span:nth-child(3) {
    top: 17px;
	max-width: 60%;
}

.nav-icon3 span:nth-child(4) {
    top: 24px;
	max-width: 60%;
}

.nav-icon3.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}

.nav-icon3.open span:nth-child(2) {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-icon3.open span:nth-child(3) {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.nav-icon3.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}


/* ------ End Navbar - Close Icon ------ */


/* ----- END NAVBAR NAV ----- */


/* ----- Nav Logo ----- */

.spiralasia-logo {
    position: absolute;
    float: left;
    top: 18px;
    left: 30px;
    width: 160px;
    height: 120px;
    z-index: 1;
    cursor: pointer;
}

.spiralasia-sublogo {
    position: absolute;
    float: right;
    top: 23px;
    left: 1510px;
    width: 60px;
    height: 60px;
    z-index: 1;
	margin: auto;
    
}

/* ----- Nav Menu ----- */


/* ----- Hamburger Icon ----- */


/* ----- BACK TO TOP ----- */


.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}


/* ----- END BACK TO TOP ----- */


/* ----- HEADER SECTION ----- */

.jumbotron {
    margin-bottom: 0;
}

div.jumbotron#index {
/*    height: 100vh;*/
    background-image: url("");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
/*    max-height: 1100px;*/
    margin-bottom: 0;
    background-color: transparent;
}

div.jumbotron#index img {
    margin-bottom: 20px;
}

.jumbotron#index h2 {
    text-decoration: none;
    display: inline-block;
    font-size: 50px !important;
    padding: 10px 20px;
}

div.jumbotron#about {
    height: 100vh;
    background-image: url("../images/about-header.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#join_us.jumbotron {
    height: 100vh;
    background-image: url("../images/joinus-header.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#work.jumbotron {
    height: 100vh;
    background-image: url("../images/work-header.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#newsandideas.jumbotron {
    height: 100vh;
    background-image: url("../images/news-header.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#post.jumbotron {
    height: 100vh;
    background-image: url("../images/casestudy/surefest/sure-header.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 800px;
}

div#contact.jumbotron {
    height: 100vh;
    background-image: url("../images/contact-header.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#casestudy1.jumbotron {
    height: 100vh;
    background-image: url("../images/casestudy/surefest/sure-header.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#casestudy2.jumbotron {
    height: 100vh;
    background-image: url("../images/casestudy/citroen/1.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#casestudy3.jumbotron {
    height: 100vh;
    background-image: url("../images/casestudy/icescreen/1.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#casestudy4.jumbotron {
    height: 100vh;
    background-image: url("../images/casestudy/benandjerries/1.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#casestudy5.jumbotron {
    height: 100vh;
    background-image: url("../images/casestudy/dove/6.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#casestudy6.jumbotron {
    height: 100vh;
    background-image: url("../images/casestudy/nivea/1.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#casestudy-unilever.jumbotron {
    height: 100vh;
    background-image: url("../images/casestudy/unilever/1.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}

div#casestudy-pgtips.jumbotron {
    height: 100vh;
    background-image: url("../images/casestudy/pgtips/1.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 1100px;
}


/* ----- Header-Title ----- */

#hero-title {
    display: block;
    vertical-align: middle;
}

.content-homepage h1 {
    font-family: "Gotham";
    font-size: 72px !important;
    color: white;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 100%;
    margin: auto;
    display: table;
    vertical-align: middle;
}

#post .content-homepage h1 {
    font-size: 72px !important;
    line-height: 125%;
    width: auto;
    margin: auto 20px;
}

.content-homepage-index {
    width: 380px;
    height: auto;
    background-color: transparent;
    margin: 0 auto;
    position: relative;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.content-homepage {
    border-radius: 50%;
    width: 420px;
    height: 420px;
    background-color: black;
    background-color: rgba(0, 0, 0, .8);
    margin: 0 auto;
    position: relative;
    text-align: center;
    margin-top: -120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* flex-direction: column;*/
    -webkit-align-items: center;
    align-items: center;
    /* justify-content: center;*/
}

/* index flexbox grid */

    .flex-grid .col {
        -webkit-transition: all 0.2s ease;
        -moz-transition:    all 0.2s ease;
        -ms-transition:     all 0.2s ease;
        -o-transition:      all 0.2s ease;
    }

    .grid_Container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        flex-flow: row wrap;
        -webkit-flex-flow: : row wrap;
        -webkit-flex-wrap: wrap;
        /* NEW */
        flex-wrap: wrap;
    }

    .flex-grid {
        max-width: 70%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex: auto;
        flex-flow: row wrap;
        -webkit-flex-flow: : row wrap;
        -webkit-flex-wrap: wrap;
        /* NEW */
        flex-wrap: wrap;
    }

    .flex-grid .col {
        -webkit-box-flex: 1 0 32%;
        -webkit-flex: 1 0 32%;
        -ms-flex: 1 0 32%;
        flex: 1 0 32%;
        min-width: 3em;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
/*        background-color: white;*/
        margin: 5px;
		
		
        animation: fadein 2s;
        -moz-animation: fadein 2s; /* Firefox */
        -webkit-animation: fadein 2s; /* Safari and Chrome */
        -o-animation: fadein 2s; /* Opera */
    }

    .flex-grid { 
        margin: 0 0 100px o;
        box-sizing: border-box;
    }

/*
    div.grid_title {
        font-family: "Gotham";
        font-size: 1.6em;
        line-height: 100%;
        text-align: center;
        font-weight: 700;
        color: white;
        background-color: black;
        opacity: 0;
        display: block;
        width: 90%;
        height: 90%;
        border-radius: 50%;
        margin: 5%;
        padding: 5%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 20;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition:    all 0.2s ease-in;
        -ms-transition:     all 0.2s ease-in;
        -o-transition:      all 0.2s ease-in;
    }    
*/

    div.grid_title {
        font-family: Gotham;
        font-size: 26pt;
        line-height: 0;
        text-align: center;
        font-weight: 10;
        color: white;
        display: block;
        width: 90%;
        height: 90%;
        margin: 5%;
        padding: 5%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 20;
		
    }

   


/*
    div.col:hover a div.grid_title {
        opacity: 0.9;
    }
*/

    div.col a:hover {
        text-decoration: none;
    }

    /* Index page grid images */
    div.col:nth-child(1) {
        background-image: url(../images/index/col1.html);
    }
    div.col:nth-child(2) {
        background-image: url(../images/index/col2.html);
    }
    div.col:nth-child(3) {
        background-image: url(../images/index/col3.html);
    }
    div.col:nth-child(4) {
        background-image: url(../images/index/col4.html);
    }
    div.col:nth-child(5) {
        background-image: url(../images/index/col5.html);
    }
    div.col:nth-child(6) {
        background-image: url(../images/index/col6.html);
    }
    div.col:nth-child(7) {
        background-image: url(../images/index/col7.html);
    }
    div.col:nth-child(8) {
        background-image: url(../images/index/col8.html);
    }
    div.col:nth-child(9) {
        background-image: url(../images/index/col9.html);
    }

    @media only screen and (max-width: 1595px)  {
        .flex-grid {
            max-width: 100%;
        }
    }
/* END index flexbox grid */

#post .content-homepage {
    margin-top: -50px;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
}

.table {
    height: 100%;
    display: table;
    width: 100%;
    margin: 0 auto;
}


/* ----- BODY SECTION ----- */


/* ----- Join Us Section ----- */


/* ----- Job roles - random styling ----- */

.jobs a {
    padding: 0 0 0 0;
}

.job_block {
    position: relative;
    min-height: 355px;
}

.job_block a {
    color: #f5426c;
    text-decoration: none;
    padding-bottom: 0;
}

a.job-link:active,
a.job-link:link,
a.job-link:hover,
a.job-link:visited {
    position: absolute;
    bottom: 0;
    padding: 0px;
    height: 30px;
    display: block;
    width: 168px;
}


/* ----- hotpink ----- */

.job_block h4 a {
    color: #f5426c;
}

.job_block hr,
.job_block a hr {
    border-bottom-color: #f5426c !important;
}


/* ----- royal blue ----- */

.job_block:nth-child(5n-1) h4 a {
    color: #1825aa !important;
}

.job_block:nth-child(5n-1) hr,
.job_block:nth-child(5n-1) a hr {
    border-bottom-color: #1825aa !important;
}


/* ----- teal ----- */

.job_block:nth-child(4n-3) h4 a {
    color: #3f808d;
}

.job_block:nth-child(4n-3) hr,
.job_block:nth-child(4n-3) a hr {
    border-bottom-color: #3f808d !important;
}


/* ----- Job role page ----- */

.summary {
    margin-top: 80px;
    margin-bottom: 80px;
}

.summary p {
    text-align: center;
}


/* ----- section padding - left/right ----- */


/* ----- Container ----- */

#content-wrapper {
    background-color:#FFF;
}


/* ----- Intro ----- */

.introduction {
    margin-top: -200px;
    padding: 80px 0;
    padding-left: 30px;
    padding-right: 30px;
    background-color: white !important;
    position: relative;
}

.post .introduction {
    margin-top: -150px;
    padding: 80px 0;
    padding-left: 30px;
    padding-right: 30px;
    background-color: white !important;
    position: relative;
}

.intro-text {
    margin-bottom: 15px;
}


/* ----- Client Table ----- */

.offices h2 {
    color: black;
}


/* ----- Client Table ----- */

.client-table {
    background-color:#FFF;
    padding: 0px 0px;
    margin-bottom: 100px;
}

#client-section h2 {
    margin-bottom: 80px;
}


/* ----- 5 column grid ----- */


/* CSS used here will be applied after bootstrap.css */

.col-sm-5cols {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.client-table .col-sm-5cols {
    margin-bottom: 25px;
}


/* ----- section employee profiles ----- */

section.employee-profiles {
    background-color: white;
}


/* ----- JOIN US PAGE ----- */


/* ----- job block styling ----- */

h4:first-child(odd) {
    color: pink !important;
}

.support img {
    margin-bottom: 30px;
}


/* ----- EXTRA PADDING FOR COLUMNS ----- */

.classWithPad-right {
    margin-right: 20px;
}

.classWithPad-left {
    margin-left: 20px;
}


/* ----- NEWS PAGE ----- */

section.blog {
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
}

.list article {
    position: relative;
}

.list article {
    position: relative;
}

.list article h5 {
    font-family: "Gotham";
    font-size: 40px;
    line-height: 120%;
    font-weight: 700;
    color: black;
    margin: .4em .6em;
    margin-bottom: 0.3em;
}

.list article p {
    font-family: "Gotham";
    font-size: 42px;
    line-height: 120%;
    font-weight: 700;
    color: black;
    margin: .4em .6em;
    margin-bottom: 0.3em;
}

/*
.list article h5:first-letter {
    text-transform: capitalize;
}
*/

.article:first-of-type {
    margin-bottom: 60px;
    padding-right: 0px;
    float: right;
    /*        max-height: 1000px !important;*/
    height: auto !important;
    width: 95%;
}

.list .col-lg-12 article.preview {
    max-height: 100%;
    height: auto;
}

.list .article:first-of-type hr {
    margin-left: 30px;
    margin-top: 15px;
    margin-top: 15px;
}

.list .article:first-of-type p:nth-of-type(1) {
    font-size: 33px;
    color: #72d0eb;
    margin-left: 30px;
}

.list .article:first-of-type p:nth-of-type(2) {
    font-size: 20px;
    font-weight: normal;
    color: #4d4d4d;
    margin-left: 30px;
}

.list .article:first-of-type p:nth-of-type(3) {
    font-size: 20px;
    margin-left: 30px;
}

.list article h5 a,
.list article h5 a:hover {
    text-decoration: none;
    cursor: pointer;
}

/*
.list article h5 a {
    text-transform: lowercase;
}
*/

.list article p a,
.list article p a:hover {
    text-decoration: none;
    cursor: pointer;
}

.list article h5 a {
    transition: color 0.2s ease;
    color: black;
}

.list article p a {
    transition: color 0.2s ease;
    color: black;
}

.list article h5 a:hover {
    color: #f128c1;
}

.list article p a:hover {
    color: #f128c1;
}

.list article p:last-child {
    font-family: Gotham;
    font-size: 20px;
    line-height: 120%;
    font-weight: 300;
    color: #4d4d4d;
    margin: .5em .6em;
    margin-left: 28px;
    margin-bottom: 40px;
}

.list .col-lg-8 article.preview hr {
    border: none;
    margin-left: 30px;
    border-bottom: 3px dotted #f128c1;
    margin-bottom: 15px;
    width: 50%;
    position: absolute;
    bottom: 40px;
}

.list .col-lg-4 article.preview p:last-child {
    border: none;
    margin-left: 20px;
}

.list article.preview hr {
    border: none;
    margin-left: 20px;
    border-bottom: 3px dotted #f128c1;
    margin-bottom: 15px;
    text-align: left;
    width: 80%;
}


/* ----- styling author from bottom ----- */

.post-excerpt {
    height: 100%;
}

.row.author-pos2 {
    height: 100%;
}

.col-lg-12.author-pos {
    height: 33%;
}

.author-pos p {
    white-space: nowrap;
}


/* ----- left-landscape ----- */

.article:nth-child(7n+2) {
    padding-left: 0px;
}


/* ----- right-small1 ----- */

.article:nth-child(7n+3) {
    padding-right: 0px;
}

.article:nth-child(7n+2),
.article:nth-child(7n+3),
.article:nth-child(7n+4),
.article:nth-child(7n+5),
.article:nth-child(7n+6),
.article:nth-child(7n+7),
.article:nth-child(7n+8) {
    margin-bottom: 0px;
}

.article:nth-child(7n+3) h5,
.article:nth-child(7n+4) h5,
.article:nth-child(7n+6) h5,
.article:nth-child(7n+7) h5,
.article:nth-child(7n+8) h5 {
    font-size: 30px;
}

.article:nth-child(7n+3) p,
.article:nth-child(7n+4) p,
.article:nth-child(7n+6) p,
.article:nth-child(7n+7) p,
.article:nth-child(7n+8) p {
    font-size: 30px;
}

.article:nth-child(7n+2) p:nth-of-type(1),
.article:nth-child(7n+3) p:nth-of-type(1),
.article:nth-child(7n+4) p:nth-of-type(1),
.article:nth-child(7n+5) p:nth-of-type(1),
.article:nth-child(7n+6) p:nth-of-type(1),
.article:nth-child(7n+7) p:nth-of-type(1),
.article:nth-child(7n+8) p:nth-of-type(1) {
    display: none;
}

.article:nth-child(7n+7) p:nth-of-type(1) {
    font-size: 30px;
}

.article:nth-child(7n+2) hr:nth-of-type(1),
.article:nth-child(7n+3) hr:nth-of-type(1),
.article:nth-child(7n+4) hr:nth-of-type(1),
.article:nth-child(7n+5) hr:nth-of-type(1),
.article:nth-child(7n+6) hr:nth-of-type(1),
.article:nth-child(7n+7) hr:nth-of-type(1),
.article:nth-child(7n+8) hr:nth-of-type(1) {
    display: none;
}

.article:nth-child(7n+2) hr:nth-of-type(2),
.article:nth-child(7n+3) hr:nth-of-type(2),
.article:nth-child(7n+4) hr:nth-of-type(2),
.article:nth-child(7n+5) hr:nth-of-type(2),
.article:nth-child(7n+6) hr:nth-of-type(2),
.article:nth-child(7n+7) hr:nth-of-type(2),
.article:nth-child(7n+8) hr:nth-of-type(2) {
    position: absolute;
    bottom: 0px;
    margin-bottom: 50px;
}

.article:nth-child(7n+2) p:nth-of-type(2),
.article:nth-child(7n+3) p:nth-of-type(2),
.article:nth-child(7n+4) p:nth-of-type(2),
.article:nth-child(7n+5) p:nth-of-type(2),
.article:nth-child(7n+6) p:nth-of-type(2),
.article:nth-child(7n+7) p:nth-of-type(2),
.article:nth-child(7n+8) p:nth-of-type(2) {
    font-size: 20px;
    position: absolute;
    bottom: 0px;
    margin: 0;
    margin-left: 30px;
    margin-bottom: 20px;
}


/* ----- left-small1 ----- */

.article:nth-child(7n+4) {
    padding-left: 0px;
}


/* ----- right-landscape ----- */

.article:nth-child(7n+5) {
    padding-right: 0px;
}


/* ----- left-small-2 ----- */

.article:nth-child(7n+6) {
    padding-left: 0px;
}


/* ----- middle-block ----- */

.article:nth-child(7n+7) {
    padding-left: 15px;
    padding-right: 15px;
}


/* ----- left-small-2 ----- */

.article:nth-child(7n+8) {
    padding-right: 0px;
}


/* ----- BLOG POST STYLING ----- */


/* ----- Social Media Classes ----- */


/* ----- Facebook Classes ----- */

.list article.preview.facebook,
.list article.preview.facebook-pink,
.list article.preview.facebook-blue,
.list article.preview.facebook-red {
    box-sizing: border-box;
    font-size: 30px;
    text-align: center;
    background-color: #dd2397;
    width: 100%;
    margin: 0 auto;
    padding: 1em 1em;
    margin-bottom: 40px;
    padding-bottom: 1.6em;
    max-height: 555px;
}

.list article.preview.facebook img,
.list article.preview.facebook-pink img,
.list article.preview.facebook-blue img,
.list article.preview.facebook-red img {
    display: none;
}

.list article.preview.facebook hr,
.list article.preview.facebook-pink hr,
.list article.preview.facebook-blue hr,
.list article.preview.facebook-red hr {
    display: none;
}

.list article.preview.facebook p:last-child,
.list article.preview.facebook-pink p:last-child,
.list article.preview.facebook-blue p:last-child,
.list article.preview.facebook-red p:last-child {
    display: none;
}

.list article.preview.facebook h5,
.list article.preview.facebook-pink h5,
.list article.preview.facebook-blue h5,
.list article.preview.facebook-red h5 {
    color: white;
    padding: 0 0.8em;
    margin: .0em .0em;
    width: 100%;
    font-size: 30px;
    font-family: "Gotham";
    font-weight: 300;
    line-height: 130%;
}

.list article.preview.facebook h5,
.list article.preview.facebook-pink h5,
.list article.preview.facebook-blue h5,
.list article.preview.facebook-red h5 {
    color: white;
}

.list article.preview.facebook h5 a,
.list article.preview.facebook-pink h5 a,
.list article.preview.facebook-blue h5 a,
.list article.preview.facebook-red h5 a {
    color: white;
}

.list article.preview.facebook h5:before,
.list article.preview.facebook-pink h5:before,
.list article.preview.facebook-blue h5:before,
.list article.preview.facebook-red h5:before {
    font-family: FontAwesome;
    content: "\f09a";
    margin-left: -20px;
    margin-top: 0px;
    margin-bottom: 20px;
    padding-bottom: 30px;
    font-weight: bold;
    text-align: left;
    display: block;
    background: white;
    height: 55px;
    width: 55px;
    text-align: center;
    border-radius: 50%;
    line-height: 55px;
    color: #dd2397;
}

.list article.preview.facebook-blue {
    background-color: #63d0df;
}

.list article.preview.facebook-blue h5:before {
    color: #63d0df;
}

.list article.preview.facebook-red {
    background-color: #f5426c;
}

.list article.preview.facebook-red h5:before {
    color: #f5426c;
}

.list article.preview.facebook {
    background-color: #3b5998;
}

.list article.preview.facebook h5:before {
    color: #3b5998;
}


/* ----- Twitter Classes ----- */

.list article.preview.twitter-pink,
.list article.preview.twitter,
.list article.preview.twitter-blue,
.list article.preview.twitter-red {
    box-sizing: border-box;
    font-size: 30px;
    text-align: center;
    background-color: #dd2397;
    width: 100%;
    margin: 0 auto;
    padding: 1em 1em;
    margin-bottom: 40px;
    padding-bottom: 1.6em;
    max-height: 555px;
}

.list article.preview.twitter-pink img,
.list article.preview.twitter img,
.list article.preview.twitter-blue img,
.list article.preview.twitter-red img {
    display: none;
}

.list article.preview.twitter-pink hr,
.list article.preview.twitter hr,
.list article.preview.twitter-blue hr,
.list article.preview.twitter-red hr {
    display: none;
}

.list article.preview.twitter-pink h5:last-child,
.list article.preview.twitter h5:last-child,
.list article.preview.twitter-blue h5:last-child,
.list article.preview.twitter-red h5:last-child {
    display: none;
}

.list article.preview.twitter-pink h5,
.list article.preview.twitter h5,
.list article.preview.twitter-blue h5,
.list article.preview.twitter-red h5 {
    color: white;
    padding: 0 0.8em;
    margin: .0em .0em;
    width: 100%;
    font-size: 30px;
    font-family: "Gotham";
    font-weight: 300;
    line-height: 130%;
}

.list article.preview.twitter-pink h5,
.list article.preview.twitter h5,
.list article.preview.twitter-blue h5,
.list article.preview.twitter-red h5 {
    color: white;
}

.list article.preview.twitter h5 a,
.list article.preview.twitter-pink h5 a,
.list article.preview.twitter-blue h5 a,
.list article.preview.twitter-red h5 a {
    color: white;
}

.list article.preview.twitter-pink h5:before,
.list article.preview.twitter h5:before,
.list article.preview.twitter-blue h5:before,
.list article.preview.twitter-red h5:before {
    font-family: FontAwesome;
    content: "\f099";
    margin-left: -20px;
    margin-top: 0px;
    margin-bottom: 20px;
    padding-bottom: 30px;
    font-weight: bold;
    text-align: left;
    display: block;
    background: white;
    height: 55px;
    width: 55px;
    text-align: center;
    border-radius: 50%;
    line-height: 55px;
    color: #dd2397;
}

.list article.preview.twitter-blue {
    background-color: #63d0df;
}

.list article.preview.twitter-blue p:before {
    color: #63d0df;
}

.list article.preview.twitter-red {
    background-color: #f5426c;
}

.list article.preview.twitter-red p:before {
    color: #f5426c;
}

.list article.preview.twitter {
    background-color: #55acee;
}

.list article.preview.twitter p:before {
    color: #55acee;
}


/* ----- END Social Media Classes ----- */


/* ----- CONTACT PAGE ----- */


/* ----- offices section ----- */

#warehouse-locations p {
    font-size: 24px;
    font-family: arial;
}

.offices h2 {
    margin-bottom: 80px;
}

#office-hq p {
    font-size: 32px;
    line-height: 39px;
    padding-bottom: 10px;
    color: white;
    font-weight: 400;
    text-align: center;
}

#office-locations h2 {
    margin-bottom: 80px;
}

#office-locations h3,
#office-hq h3 {
    font-size: 32px;
    margin: 0px 0 0px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    font-weight: 700;
    text-align: center;
    border-width: 0 0 5px;
    border-style: solid;
    border-image: url(../images/underline_sprite.html) 20 fill round;
    display: inline-block;
    overflow: hidden;
}

.heading_underline {
  border-width: 0 0 5px;
  border-style: solid;
    border-image: url(../images/underline_sprite.html) 20 fill round;
    display: inline-block;
    overflow: hidden;
}

#office-locations p,
#office-hq p {
    font-size: 28px;
    line-height: 36px;
    padding-bottom: 10px;
    color: white;
    font-weight: 400;
    text-align: center;
}

.office a {
    color: white;
    text-decoration: underline;
    text-align: center;
}


/* ----- Warehouse Locations ----- */

#warehouse-locations p {
    margin-bottom: 30px;
}


/* ----- ZIG ZAG ----- */

#client-section {
    position: relative;
}

.zig_zag1:after {
    background: -webkit-linear-gradient(135deg, #ffffff 30px, transparent 0), -webkit-linear-gradient(45deg, #ffffff 30px, transparent 0);
    background: linear-gradient(-45deg, #ffffff 30px, transparent 0), linear-gradient(45deg, #ffffff 30px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 60px 60px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
}


/* ----- HQ Offices ----- */

section#office-hq {
    position: relative;
    padding-top: 0px !important;
}

#office-hq {
    position: relative;
}

.zig_zag2:after {
    background: -webkit-linear-gradient(135deg, #197ea7 30px, transparent 0), -webkit-linear-gradient(45deg, #197ea7 30px, transparent 0);
    background: linear-gradient(-45deg, #197ea7 30px, transparent 0), linear-gradient(45deg, #197ea7 30px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 60px 60px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
}


/* ----- End HQ Offices ----- */


/* ----- Office Locations ----- */

section#office-locations {
    /*        padding-top: 0px !important;*/
}

#office-locations {
    position: relative;
}

/*
.zig_zag3:after {
    background: -webkit-linear-gradient(135deg, #ffffff 30px, transparent 0), -webkit-linear-gradient(45deg, #ffffff 30px, transparent 0);
    background: linear-gradient(-45deg, #ffffff 30px, transparent 0), linear-gradient(45deg, #ffffff 30px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 60px 60px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
}
*/

.office {
    padding-bottom: 40px;
    text-align: center;
}


/* ----- End Office Locations ----- */

div#client-table.row {
    margin-right: 0px;
    margin-left: 0px;
}


/* ----- Employee Profiles ----- */

#profile-wrapper1 {
    background-image: url('../images/line.html');
    background-size: 150px;
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-position: center center;
}

#profile-wrapper2 {
    background-image: url('../images/linex2.html');
    background-size: 318px;
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-position: center center;
}

#profiles-intro {
    margin-bottom: 80px;
}

/* css scale transition */

.employee-profiles img {
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
    transition: all 0.5s ease;
}

/* END css scale transition */

.profile-img,
.profile-container,
.profile-container2,
.profile-container3 {
    max-width: 420px;
    box-sizing: border-box;
    margin: 0 auto;
}

.profile-container,
.profile-container2,
.profile-container3 {
    max-width: 420px;
    padding: 80px;
    margin: 0 auto;
    margin-bottom: 20px;
    border-radius: 50%;
    font-size: 15px;
    text-align: center;
    color: white;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.profile-container {
    background-color: #197ea7;
}

.profile-container2 {
    background-color: #63d0df;
    color: black;
}

.profile-container3 {
    background-color: #ffab4c;
    color: black;
}

.profile-info {
    align-self: center;
    margin: 0 auto;
}

.profile-info p {
    margin-bottom: 10px;
}

.profile-container .profile-info span.profile-title {
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 28px;
    display: block;
    padding: 10px 0px;
    border-top: 3px dotted white;
    border-bottom: 3px dotted white;
    margin-bottom: 20px;
}

.profile-container2 .profile-info span.profile-title {
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 28px;
    display: block;
    padding: 10px 0px;
    border-top: 3px dotted white;
    border-bottom: 3px dotted white;
    margin-bottom: 20px;
    color: black;
}

.profile-container3 .profile-info span.profile-title {
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 28px;
    display: block;
    padding: 10px 0px;
    border-top: 3px dotted white;
    border-bottom: 3px dotted white;
    margin-bottom: 20px;
    color: black;
}

.profile-info span.profile-quote {
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    display: block;
    padding: 10px 0px;
    border-top: 3px dotted white;
    border-bottom: 3px dotted white;
}


/* Load More Btn */

#profile-load-more-btn a {
    margin-top: 40px !important;
    padding: 5px 0;
    font-family: "Gotham";
    font-size: 15px;
    font-weight: 100;
    color: black;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 3px dotted black;
}


/* unvisited link */

#profile-load-more-btn a:link {
    color: black;
}


/* visited link */

#profile-load-more-btn a:visited {
    color: black;
}


/* mouse over link */

#profile-load-more-btn a:hover {
    color: black;
}


/* selected link */

#profile-load-more-btn a:active {
    color: black;
}


/* ----- GOOGLE MAP ----- */

a img.img-responsive {
    width: 100% !important;
}

section.offices {
    padding-left: 0px !important;
    padding-right: 0px !important;
}


/* ----- END GOOGLE MAP ----- */


/* ----- CASE STUDY PAGES ----- */

.casestudy_page p {
    text-align: center;
}


/* ----- Casestudy quote ----- */

.casestudy_flex {
    text-align: center;
    font-size: 1.8em;
    word-wrap: break-word;
    font-weight: bold;
    color: white;
}

.casestudy_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
}

.casestudy_child1,
.casestudy_child2 {
    min-height: 570px;
    padding: 1.2em 1em;
}

.casestudy_child1 {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
}

.casestudy1 .casestudy_child1 {
    background-image: url(../images/casestudy/surefest/quote.html);
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.casestudy2 .casestudy_child1 {
    background-image: url(../images/casestudy/citroen/4.html);
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.casestudy3 .casestudy_child1 {
    background-image: url(../images/casestudy/icescreen/6.html);
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.casestudy4 .casestudy_child1 {
    background-image: url(../images/casestudy/benandjerries/4.html);
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.casestudy5 .casestudy_child1 {
    background-image: url(../images/casestudy/dove/7.html);
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.casestudy6 .casestudy_child1 {
    background-image: url(../images/casestudy/pgtips/2.html);
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.casestudy-nivea .casestudy_child1 {
    background-image: url(../images/casestudy/nivea/2.html);
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.casestudy_child2 {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
}


/* ----- Casestudy grid images ----- */

/* Nivea */
.casestudy-nivea .casestudy_grid_child1 {
    background-image: url(../images/casestudy/nivea/3.html);
}

.casestudy-nivea .casestudy_grid_child2 {
    background-image: url(../images/casestudy/nivea/4.html);
}

.casestudy-nivea .casestudy_grid_child3 {
    background-image: url(../images/casestudy/nivea/5.html);
}

.casestudy-nivea .casestudy_grid_child4 {
    background-image: url(../images/casestudy/nivea/1.html);
}

/* unilever */
.casestudy-unilever .casestudy_grid_child1 {
    background-image: url(../images/casestudy/unilever/5.html);
}

.casestudy-unilever .casestudy_grid_child2 {
    background-image: url(../images/casestudy/unilever/2.html);
}

.casestudy-unilever .casestudy_grid_child3 {
    background-image: url(../images/casestudy/unilever/3.html);
}

.casestudy-unilever .casestudy_grid_child4 {
    background-image: url(../images/casestudy/unilever/4.html);
}


    

/* ----- END Casestudy grid images ----- */


/* ----- Casestudy wall ----- */

.isMobileCasestudy {
    position: relative !important;
    min-width: 200px !important;
    height: 320px !important;
    margin: 0px !important;
    border-radius: 0px !important;
    box-shadow: inset 0 -580px 0 0 rgba(0,0,0,.5) !important;
}

.isMobileFigcaption {
    position: absolute!important;
    top: 47%;
    left: 51% !important;
    -webkit-transform: translateY(-40%) !important;
    -webkit-transform: translateX(-50%) !important;
    -moz-transform: translateY(-40%) !important;
    -moz-transform: translateX(-50%) !important;
    transform: translateY(-40%) !important;
    transform: translateX(-50%) !important;
    color: rgba(255,255,255,1) !important;
    text-align: center; !important
}

.isMobileFigcaption2 {
    position: absolute!important;
    bottom: 40% !important;
    -webkit-transform: translateY(-40%) !important;
    -moz-transform: translateY(-40%) !important;
    transform: translateY(-40%) !important;
    color: rgba(255,255,255,1) !important;
}

.isMobileSpan {
    height: 50px;
    width: 50px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgba(221,35,151,1);
    transition: background-color, 0.2s;
    padding-top: 10px;
}

.isMobileSpanContent::after {
    font-family: FontAwesome;
    content: "\f061";
}

.casestudy_child_row_child:hover a {
    text-align: center !important;
    color: white !important;
    text-decoration: none !important;
}

.casestudy_row1,
.casestudy_row2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: : row wrap;
    -webkit-flex-wrap: wrap;
    /* NEW */
    flex-wrap: wrap;
}

.casestudy_child {
    -webkit-box-flex: 1 0 20%;
    -webkit-flex: 1 0 20%;
    -ms-flex: 1 0 20%;
    flex: 1 0 20%;
    padding: 1.2em 1em;
}

.casestudy_child_row_child {
    -webkit-box-flex: 1 0 20%;
    -webkit-flex: 1 0 20%;
    -ms-flex: 1 0 20%;
    flex: 1 0 20%;
    min-height: 320px;
    min-width: 15em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.casestudy_row_child1 {
    background-image: url(../images/casestudy/casestudy1.html);
}

.casestudy_row_child2 {
    background-image: url(../images/casestudy/casestudy2.html);
}

.casestudy_row_child3 {
    background-image: url(../images/casestudy/casestudy3.html);
}

.casestudy_row_child4 {
    background-image: url(../images/casestudy/casestudy4.html);
}

.casestudy_row_child5 {
    background-image: url(../images/casestudy/casestudy5.html);
}

.casestudy_row_child6 {
    background-image: url(../images/casestudy/casestudy6.html);
}

.casestudy_row_child7 {
    background-image: url(../images/casestudy/casestudy7.html);
}

.casestudy_row_child8 {
    background-image: url(../images/casestudy/casestudy8.html);
}

.casestudy_row_child9 {
    background-image: url(../images/casestudy/casestudy9.html);
}

.casestudy_row_child10 {
    background-image: url(../images/casestudy/casestudy10.html);
}


/* ----- Casestudy link ----- */


/*
    .casestudy_child_row_child a, .box a, .smallbox a  {
        display: block;
        width:100%;
        height:100%;
    }
*/

.smallbox a {
    display: block;
    width: 100%;
    height: 50%;
}


/* ----- Statistic modules ----- */

.stats-modules .modules-info h2 {
    font-size: 70px !important;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 10px;
}

.stats-modules hr {
    width: 100%;
    border-bottom: 3px dotted white;
    margin-top: 15px;
    border-top: none;
}

.modules-info h3 {
    font-size: 65px;
    font-weight: bold;
    margin-bottom: 20px;
}

.modules-info h3.h3-alternative {
    font-size: 105px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: bold;
}

.modules-info p {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.modules-container {
    margin: 0 auto;
    margin-bottom: 20px;
    display: block !important;
    width: 100%;
    max-width: 320px;
    height: 334px;
    display: inline-block;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    text-align: center;
    position: relative;
}

.modules-info {
    display: block;
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    margin-right: -20%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* --- Stats module styling --- */

div.modules-info.black-text>hr {
    width: 100%;
    border-bottom: 3px dotted black !important;
    margin-bottom: 15px;
    margin-top: 5px;
    border-top: none;
}

div.modules-info.white-text>hr {
    width: 100%;
    border-bottom: 3px dotted white !important;
    margin-bottom: 15px;
    margin-top: 5px;
    border-top: none;
}

.modules-info.black-text h2 {
    color: black;
}

.modules-info.white-text h2, .modules-info.white-text h3 {
    color: white;
}

.case_study_conclusion {
    padding-bottom: 60px;
}

.case_study_conclusion p {
    margin-top: 80px;
    margin-bottom: 40px;
}

.case_study_conclusion h2 {
    font-size: 50px !important;
    font-weight: bold;
    text-align: center;
    color: #4d4d4d;
}


/* ----- END - CASE STUDY PAGES - STATISTIC MODULES ----- */


/* ----- QUOTES ----- */


/* ----- pull-out quotes ----- */

#pullout_quote {
    font-family: "gotham";
    font-size: 50px;
    font-weight: 700;
    background-image: url(../images/joinus_quote.html);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.pullout_quote_text {
    color: white;
    max-width: 645px;
    margin: 0 auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 68px;
    position: relative;
}

.pullout_quote_text p::before,
.pullout_quote_text p::after {
    font-family: FontAwesome;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    font-size: 1.8em;
}

.pullout_quote_text::before {
    /*        content: "\f10d";*/
    float: left;
    padding-left: 3px;
    position: absolute;
    top: -55px;
    left: -140px;
    background-image: url(../images/joinus/firstquote.html);
    background-size: 130px 121px;
    display: inline-block;
    width: 130px;
    height: 121px;
    content: "";
}

.pullout_quote_text::after {
    /*        content: "\f10e";*/
    float: right;
    padding-right: 3px;
    bottom: -40px;
    position: absolute;
    right: -150px;
    background-image: url(../images/joinus/secondquote.html);
    background-size: 130px 121px;
    display: inline-block;
    width: 130px;
    height: 121px;
    content: "";
}

.border-top {
    border-bottom: 3px dotted white;
    display: block;
    width: 45%;
    height: 3px;
    position: absolute;
    top: 0;
    left: 15px;
}

.border-bottom {
    border-bottom: 3px dotted white;
    display: block;
    width: 45%;
    height: 3px;
    position: absolute;
    bottom: 20px;
    right: 0px;
}

.container-fluid.no_padding {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* ----- pull-out quotes - author styling ----- */

cite span {
    margin-top: 30px;
    display: block;
    font-weight: bold;
}

cite span::before {
    display: inline-block;
    content:"-\00a0";
}

cite span::after {
    display: inline-block;
    content:"\00a0-";
}


/* ----- footer quotes ----- */

#footer-quote {
    font-family: "gotham";
    font-weight: 200;
    text-align: center;
    text-transform: uppercase;
    color: black;
    font-size: 18px;
    background-image: url("../images/about-quote2.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

section#footer-quote {
    padding-top: 40px;
}

#footer-quote2 {
    font-family: "gotham";
    font-weight: normal;
    text-align: center;
    color: black;
    font-size: 40px;
    background-image: url("../images/footer_quote2.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#footer-quote3 {
    font-family: "gotham";
    font-weight: normal;
    text-align: center;
    color: white;
    font-size: 32px;
    background-image: url("../images/contact_quote.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#footer-quote4 {
    font-family: "gotham";
    font-weight: normal;
    text-align: center;
    color: white;
    font-size: 40px;
    background-image: url("../images/news_quote.html");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 500px;
}

#footer-quote-text {
    padding: 40px 80px;
    margin-bottom: 160px;
    
    /* aligning content center vertical and horizontal 
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: center;
    */
}

.ice-cream {
    
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
    flex-wrap: wrap;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: center;
    
}

.ice-cream p {
    flex-grow: 1;
    min-width: 100%;
}

.ice-cream p::last-child {
    margin-bottom: 0;
}

.ice-cream hr {
    width: 60%;
    display: block;
    margin: 0 auto;
    border-top: 1px solid white !important;
}

#footer-quote-text2 {
    padding: 100px 20px;
}

#footer-quote-text p.author {
    font-size: 18px;
    line-height: 1.2em !important;
    margin-top: 30px;
    margin-bottom: 0;
}

#footer-quote-text3 {
    margin-top: 100px;
    margin-bottom: 100px;
}

#footer-quote-text4 {
    margin-top: 100px;
    margin-bottom: 100px;
    max-height: 400px;
    overflow: hidden;
}

#footer-quote-text4 p {
    margin-bottom: 0px;
}


/* ----- FOOTER ----- */

div.picture1{
    width: 100%;
    background-image: url(https://spiralasia.files.wordpress.com/2017/04/footer-logo4.png);
}


navlink{
    width: 25%;
    float: left;
    background-size: cover;
}    

ul.list-inline li a {
    color: black;
	font-family: "Gotham";
	font-size:18px;
    font-weight: 500;
}

footer,
#copyright {
    padding: 20px 20px;
    background-color: #CCC;
    font-size: 16px;
	font-weight:normal;
}


/* unvisited link */

footer a:link {
    color: black;
}


/* visited link */

footera:visited {
    color: black;
}


/* mouse over link */

footer a:hover {
    color: black;
}


/* selected link */

footer a:active {
    color: black;
}

#copyright {
    background: black;
    color: white;
}


/* ----- Social Media ----- */

footer i.fa {
    height: 50px;
    width: 50px;
    margin-top: 40px;
    font-size: 35px;
    color: white;
    border-radius: 50%;
    background-color: #999;
    margin-right: 10px;
    padding-top: 12px;
    padding-left: 10px;
	
}
footer icon {
	width: 50px;
	height: 50px;
	background-image: https://spiralasia.files.wordpress.com/2017/04/fb-logo.png;
}

footer icon2 {
	width: 50px;
	height: 50px;
	background-image: https://spiralasia.files.wordpress.com/2017/04/fb-logo.png;
}

footer i.fa.fa-facebook {
    padding: 13px !important;
	https://spiralasia.files.wordpress.com/2017/04/fb-logo.png;
}

footer-logo {
    background-image: url(https://spiralasia.files.wordpress.com/2017/04/cropped-logo-011.png);
    width: 50%;
}

.contact-social-btns i.fa {
    height: 80px;
    width: 80px;
   
    font-size: 50px;
    color: white;
    border-radius: 50%;
    background-color: #f5426c;
    margin-right: 10px;
    text-align: center;
    margin-bottom: 60px;
}

@media only screen and (min-width: 320px) {
    span.profile-title {
        font-size: 15px;
        line-height: 15px;
        padding: 10px 5px;
        margin-bottom: 5px;
    }
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/* -------------------- MEDIA QUERIES -------------------- */


/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/


/*==========  Mobile First Method  ==========*/


/* Custom, iPhone Retina */

@media only screen and (min-width: 320px) {
    span.profile-title {
        font-size: 16px;
        line-height: 16px;
        padding: 10px 0px;
        margin-bottom: 5px;
    }
}

@media only screen and (min-width: 320px) {
    .jumbotron {
        font-size: 16px;
        line-height: 16px;
        background-position: right;
        
    }

/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {}


/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {
    
    .col-sm-5cols {
        width: 20%;
        float: left;
    }
    span.profile-title {
        font-size: 16px;
        line-height: 16px;
        padding: 10px 0px;
        margin-bottom: 5px;
    }
    #copyright .container {}
}


/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .job_block {
        height: auto;
        width: 100%;
        min-height: 270px;
    }
    .profile-container,
    .profile-container2,
    .profile-container3 {
        padding: 50px;
        font-size: 12px;
    }
}


/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) {}


/*==========  Non-Mobile First Method  ==========*/


/* Large Devices, Wide Screens */

@media only screen and (max-width: 1280px) {
    /* ----- Jumbotron styling ----- */
    .introduction {
        margin-top: -80px;
        padding: 80px 0;
        padding-left: 30px;
        padding-right: 30px;
        background-color: white !important;
        position: relative;
    }
    .post .introduction {
        margin-top: -150px;
        padding: 80px 0;
        padding-left: 30px;
        padding-right: 30px;
        background-color: white !important;
        position: relative;
    }
    .content-homepage {
        margin-top: 0px;
    }
    /* ----- Casestudy quote ----- */
    .casestudy_flex {
        font-size: 1.8em;
    }
}


/* Large Devices, Wide Screens */

@media only screen and (max-width: 1199px) {
    /* ----- Jumbotron styling ----- */
    .introduction {
        margin-top: -120px;
        padding: 80px 0;
        padding-left: 30px;
        padding-right: 30px;
        background-color: white !important;
        position: relative;
    }
    .post .introduction {
        margin-top: -150px;
        padding: 80px 0;
        padding-left: 30px;
        padding-right: 30px;
        background-color: white !important;
        position: relative;
    }
    .content-homepage {
        margin-top: 0px;
    }
    /* ----- Casestudy quote ----- */
    .casestudy_flex {
        font-size: 1.6em;
    }
    /* ----- Newspage styling ----- */
    .list .col-lg-12 article.preview {
        max-height: 100%;
        height: auto;
    }
    .article:first-of-type {
        margin-bottom: 30px;
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
        float: none;
        height: auto;
    }
    .article:first-of-type img {
        height: auto;
    }
    .col-lg-8.article {
        max-height: auto;
        height: auto;
    }
    .col-lg-8.article img {
        width: 100%;
        height: auto;
    }
    article img {
        max-height: auto;
        height: auto;
        overflow: auto;
    }
    .profile-container,
    .profile-container2,
    .profile-container3 {
        padding: 50px;
        font-size: 12px;
    }
    .profile-container .profile-info span.profile-title,
    .profile-container2 .profile-info span.profile-title {
        font-size: 20px;
        line-height: 25px;
    }
    .profile-info {
        padding: 0 25px;
    }
    .profile-info span.profile-quote {
        font-size: 18px;
        line-height: 22px;
    }
    /* Newspage grid styling */
    /* ----- left-landscape ----- */
    .article:nth-child(7n+2) {
        padding-right: 0px;
    }
    /* ----- right-small1 ----- */
    .article:nth-child(7n+3) {
        padding-left: 20px;
    }
    /* ----- left-small1 ----- */
    .article:nth-child(7n+4) {
        padding-right: 20px;
    }
    /* ----- right-landscape ----- */
    .article:nth-child(7n+5) {
        padding-left: 0px;
    }
    /* ----- left-small-2 ----- */
    .article:nth-child(7n+6) {
        padding-right: 0px;
    }
    /* ----- middle-block ----- */
    .article:nth-child(7n+7) {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* ----- left-small-2 ----- */
    .article:nth-child(7n+8) {
        padding-left: 0px;
    }
    /* ----- Quote styling ----- */
    #pullout_quote {
        font-size: 45px;
    }
    .pullout_quote_text::before {
        top: -45px;
        left: -90px;
        background-size: 100px 93px;
        width: 100px;
        height: 93px;
        content: "";
    }
    .pullout_quote_text::after {
        bottom: -40px;
        right: -95px;
        background-size: 100px 93px;
        width: 100px;
        height: 93px;
    }
    .border-top {
        left: 32px;
    }
    .border-bottom {
        right: 30px;
    }
}


/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
    
    /* ----- ABOUT PAGE - Profile -----*/
    .profile-info {
        padding: 0 10px;
    }
    /* ----- EXTRA PADDING FOR COLUMNS ----- */
    .classWithPad-right {
        margin-right: 0px;
    }
    .classWithPad-left {
        margin-left: 0px;
    }
    /* Casestudy page - quote resizing */
    .main_article {
        margin-bottom: 40px !important;
    }
    .casestudy_child {
        -webkit-box-flex: 1 0 20%;
        -webkit-flex: 1 0 20%;
        -ms-flex: 1 0 20%;
        flex: 1 0 20%;
        min-width: 10em;
        padding: 1.2em 1em;
    }
    .casestudy_child2 {
        min-height: 10px;
    }
    .casestudy_child1,
    .casestudy_child2 {
        min-width: 8em;
    }
    /* ----- blog styling ----- */
    /* ----- right-small1 ----- */
    .article:nth-child(7n+3) {
        padding-left: 0px;
    }
    /* ----- left-small1 ----- */
    .article:nth-child(7n+4) {
        padding-right: 0px;
    }
    /* ----- middle-block ----- */
    .article:nth-child(7n+7) {
        padding-left: 0px;
        padding-right: 0px;
    }
    /* ----- hide elements ----- */
    .no_show {
        display: none;
    }
    /* Newspage grid styling */
    .article:nth-child(7n+2) p:nth-of-type(1),
    .article:nth-child(7n+3) p:nth-of-type(1),
    .article:nth-child(7n+4) p:nth-of-type(1),
    .article:nth-child(7n+5) p:nth-of-type(1),
    .article:nth-child(7n+6) p:nth-of-type(1),
    .article:nth-child(7n+7) p:nth-of-type(1),
    .article:nth-child(7n+8) p:nth-of-type(1) {
        font-size: 32px;
    }
    /* ----- News Page Casestudy styling ----- */
    article.preview.facebook,
    article.preview.facebook-pink,
    article.preview.facebook-blue,
    article.preview.facebook-red,
    article.preview.twitter,
    article.preview.twitter-pink,
    article.preview.twitter-blue,
    article.preview.twitter-red {
        max-height: 300px;
        height: 300px;
    }
    /* ----- Job Roles ----- */
    .job_block {
        min-height: 265px;
    }
    /* ----- Quote styling ----- */
    #pullout_quote {
        font-size: 35px;
    }
    .pullout_quote_text {
        line-height: 35px;
    }
    .pullout_quote_text::before {
        top: -30px;
        left: -43px;
        background-size: 70px 65px;
        width: 70px;
        height: 65px;
        content: "";
    }
    .pullout_quote_text::after {
        bottom: -32px;
        right: -42px;
        background-size: 70px 65px;
        width: 70px;
        height: 65px;
    }
    .border-top {
        left: 37px;
    }
    .border-bottom {
        right: 38px;
    }
}


/* Small Devices, Tablets */

@media only screen and (max-width: 767px) {
    
    .flex-grid .col{
        -ms-flex-preferred-size: 100%;
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
        width: 380px;
    }
    
    #profile-wrapper {
        background-image: none;
    }
    #profile-wrapper1,
    #profile-wrapper2 {
        background-image: none;
    }
    .content-homepage h1 {
        font-size: 70px !important;
    }
    #post .content-homepage h1 {
        font-size: 30px !important;
    }
    .content-homepage {
        width: 250px;
        height: 250px;
    }
    nav {
        font-size: 14px;
    }
    .content-homepage h1 {
        font-size: 50px !important;
    }
   
    h2 {
        font-size: 32px !important;
        margin-top: -30px;
        
    }
    
    h4 {
        font-size: 32px !important;
        margin-top: -580px;
        color: black;
    }
    
     h5 {
        font-size: 32px !important;
        margin-top: -130;
        color: black;
        
    }
    
     p {
         font-family: 'Gotham';
         font-size: 16px !important;
         word-break: break-word;
         font-weight: 500;
         
    }
    
    p2 {
         font-family: 'Gotham';
         font-size: 16px !important;
         word-break: break-word;
         font-weight: 500;
         padding-top: 190;
    }
    
    p3 {
         font-family: 'Gotham';
         font-size: 16px !important;
         word-break: break-word;
         font-weight: 500;
         color: black;
    }
    
    
    /* ----- Navigation ----- */
    .overlay ul li a {
        font-size: 2.0em;
    }
    .content-homepage {
        width: 250px;
        height: 250px;
    }
    /* ----- JOIN US PAGE ----- */
    /* ----- Quote styling ----- */
    #pullout_quote {
        font-size: 25px;
    }
    .pullout_quote_text::before {
        top: -48px;
        left: 0px;
        background-size: 70px 65px;
        width: 70px;
        height: 65px;
        content: "";
    }
    .pullout_quote_text::after {
        bottom: -40px;
        right: 0px;
        background-size: 70px 65px;
        width: 70px;
        height: 65px;
    }
    .border-top {
        left: 85px;
    }
    .border-bottom {
        right: 83px;
    }
    #footer-quote-text {
        font-size: 0.7em;
    }
    #footer-quote-text p.author {
        font-size: 0.8em;
        line-height: 1.3em !important;
        margin-bottom: 0 !important;
    }
    #footer-quote-text {
        border: 3px dotted white;
        padding: 40px;
        margin-bottom: 40px;
    }
    #warehouse-locations p {
        margin-bottom: 30px;
        padding-bottom: 30px;
        border-bottom: 3px dotted black;
    }
    /* ----- Borders ----- */
    .border-block {
        border-right: none;
        border-left: none;
    }
    /* ----- Join Us extra margin ----- */
    .overlay nav {
        height: 70%;
        font-size: 18px;
    }
    /* Newspage grid styling */
    .list .col-lg-8 article.preview hr {
        border: none;
        margin-left: 20px;
        border-bottom: 3px dotted #f128c1;
        margin-bottom: 15px;
        width: 50%;
    }
    .col-lg-8 article.preview p:nth-of-type(2) {
        border: none;
        margin-left: 20px;
        font-size: 20px;
    }
    /* ----- Job Roles ----- */
    .job_block {
        min-height: 200px;
    }
}


/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
    
    /* ----- Index Styling ----- */

    div.grid_title {
        font-size: 1.8em;
    }
    
    /* ----- Navbar ----- */
    
    header {
        height: 64px;
    }
    
    .overlay nav {
        top: 54%;
    }
    
    .spiralasia-logo {
        width: 150px;
        height: 100px;
    }
    
    .nav-icon3 {
        margin-top: 25px;
        width: 50px;
    }
    
    .nav-icon3 span {
        height: 2px;
    }
    
    .nav-icon3 span:nth-child(1) {
        top: 2px;
    }   
    .nav-icon3 span:nth-child(2),
    .nav-icon3 span:nth-child(3) {
        top: 8px;
    }    
    .nav-icon3 span:nth-child(4) {
        top: 14px;
    }
   
    /* ----- Navbar ----- */
  
    
    body {
        font-family: Gotham;
        font-size: 20px;
    }
    .introduction h2:first-of-type {
        margin-top: 80px;
    }
    .content-homepage {
        margin-top: 0;
    }
    section.introduction {
        padding-top: 0px;
        margin-top: -80px;
    }
    /* ----- About Profiles ----- */
    .profile-container .profile-info span.profile-title,
    .profile-container2 .profile-info span.profile-title {
        font-size: 20px;
        line-height: 22px;
    }
    .profile-info span.profile-quote {
        font-size: 14px;
        line-height: 16px;
    }
    .profile-container,
    .profile-container2,
    .profile-container3 {
        padding: 30px;
        font-size: 10px;
    }
    .profile-container p,
    .profile-container2 p,
    .profile-container3 p {
        margin-bottom: 10px;
    }
    .profile-info {
        padding: 0 20px;
    }
    /* ----- Video Styling ----- */
    .wrapper {
        width: 100%;
        height: 100%;
        margin: 60px auto;
        padding-bottom: 0px;
        background: #fff
    }
    .h_iframe {
        position: relative;
    }
    .h_iframe .ratio {
        display: block;
        width: 100%;
        height: auto;
    }
    .h_iframe iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    /* ----- Flexbox alignment classes ----- */
    .video {
        padding-bottom: 40px;
    }
    .content-homepage-index {
        padding-top: 60px;
        width: 80%;
        height: auto;
        background-color: transparent;
        margin: 0 auto;
        position: relative;
        text-align: center;
    }
    div.jumbotron#index img {
        margin-bottom: 15qpx;
    }
    .jumbotron#index h2 {
        text-decoration: none;
        display: inline-block;
        font-size: 35px !important;
        padding: 10px 20px;
        margin-bottom: 0;
    }
    /* Casestudy page - quote resizing */
    .casestudy_child {
        min-width: 5em;
    }
    /* Newspage grid styling */
    article p {
        font-size: 20px;
    }
    article p:last-child {
        font-size: 20px !important;
    }
    .article:nth-child(7n+3) p,
    .article:nth-child(7n+4) p,
    .article:nth-child(7n+6) p,
    .article:nth-child(7n+7) p,
    .article:nth-child(7n+8) p {
        font-size: 28px !important;
    }
    .article:nth-child(7n+2) p:last-child,
    .article:nth-child(7n+3) p:last-child,
    .article:nth-child(7n+4) p:last-child,
    .article:nth-child(7n+5) p:last-child,
    .article:nth-child(7n+6) p:last-child,
    .article:nth-child(7n+7) p:last-child,
    .article:nth-child(7n+8) p:last-child {
        font-size: 20px !important;
    }
    .col-lg-8.article {
        max-height: auto;
        height: auto;
    }
    .col-lg-8.article img {
        width: 100%;
        height: auto;
    }
    .list article img {
        max-height: auto;
        height: auto;
        overflow: auto;
    }
    /* ----- left-landscape ----- */
    .article:nth-child(7n+2) {
        padding-right: 0px;
    }
    /* ----- right-small1 ----- */
    .article:nth-child(7n+3) {
        padding-left: 0px;
    }
    /* ----- left-small1 ----- */
    .article:nth-child(7n+4) {
        padding-right: 0px;
    }
    /* ----- right-landscape ----- */
    .article:nth-child(7n+5) {
        padding-left: 0px;
    }
    /* ----- left-small-2 ----- */
    .article:nth-child(7n+6) {
        padding-right: 0px;
    }
    /* ----- middle-block ----- */
    .article:nth-child(7n+7) {
        padding-right: 0px;
    }
    /* ----- left-small-2 ----- */
    .article:nth-child(7n+8) {
        padding-left: 0px;
    }
    .list article.preview.twitter,
    .list article.preview.twitter-blue,
    .list article.preview.twitter-red,
    .list article.preview.twitter-pink,
    .list article.preview.facebook,
    .list article.preview.facebook-blue,
    .list article.preview.facebook-red,
    .list article.preview.facebook-pink {
        max-height: 335px;
    }
    /* Newspage grid styling */
    .article:nth-child(7n+2) h5,
    .article:nth-child(7n+3) h5,
    .article:nth-child(7n+4) h5,
    .article:nth-child(7n+5) h5,
    .article:nth-child(7n+6) h5,
    .article:nth-child(7n+7) h5,
    .article:nth-child(7n+8) h5 {
        font-size: 28px;
    }
    /* ----- Job Roles ----- */
    .job_block {
        min-height: 265px;
    }
    .pullout_quote_text::before {
        top: -43px;
        left: 2px;
        background-size: 50px 47px;
        width: 50px;
        height: 47px;
        content: "";
    }
    .pullout_quote_text::after {
        bottom: -41px;
        right: 5px;
        background-size: 50px 47px;
        width: 50px;
        height: 47px;
    }
    /* ----- Newspage Page ----- */
    section#footer-quote2 {
        min-height: 250px;
    }
    #footer-quote-text2 {
        margin-top: 0px;
        margin-bottom: 0px;
        max-height: 250px;
        font-size: 30px;
    }
    section#footer-quote3 {
        min-height: 250px;
    }
    #footer-quote-text3 {
        margin-top: 20px;
        margin-bottom: 20px;
        max-height: 250px;
        font-size: 18px;
    }
    section#footer-quote4 {
        min-height: 250px;
    }
    #footer-quote-text4 {
        margin-top: 20px;
        margin-bottom: 20px;
        max-height: 250px;
        font-size: 18px;
    }
    /* ----- Casestudy Page ----- */
    .content-homepage h1 {
        font-size: 40px !important;
    }
    .case_study_conclusion h2 {
        font-size: 35px !important;
        line-height: 145%;
    }
    
    a figure.flex:hover span {
        padding-top: 10px;
    }
    
    /* ----- Contact Page ----- */
    .contact-social-btns .fa {
        margin-bottom: 20px;
    }
    footer .list-inline {
        white-space: normal;
        text-align: center;
        margin-left: -10px;
        margin-top: 15;
        float: left;
    }
    
    /* ----- FOOTER LINKS ----- */
    footer ul.list-inline li a {
        font-size: 20px;
        line-height: 35px;
    }
}


/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {
    
    /* ----- About Profiles ----- */
    .profile-container .profile-info span.profile-title,
    .profile-container2 .profile-info span.profile-title {
        font-size: 14px;
        line-height: 18px;
    }
    .profile-info span.profile-quote {
        font-size: 12px;
        line-height: 16px;
    }
    .profile-container,
    .profile-container2,
    .profile-container3 {
        padding: 30px;
        font-size: 10px;
    }
    .profile-container p,
    .profile-container2 p,
    .profile-container3 p {
        margin-bottom: 10px;
    }
    .job_block {
        min-height: 315px;
    }
    /* ----- CASESTUDY PAGE - Stats Module ----- */
    .stats-modules .modules-info h2 {
        font-size: 47px !important;
        font-weight: bold;
        margin-top: 0px;
        margin-bottom: 10px;
    }
    .stats-modules hr {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .case_study_conclusion h2 {
        font-size: 29px !important;
        line-height: 145%;
    }
    
    /* ----- Navigation ----- */
    .overlay ul li a {
        font-size: 2em;
    }
}


/* client table 5 columns */

@media (min-width: 768px) {
    .col-sm-5cols {
        width: 20%;
        float: left;
    }
    
    /* ----- Navigation ----- */
    .overlay ul li a {
        font-size: 3.5em;
    }
}

/* ----- 
PAGE - flexbox grid ----- */

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch
}

.casestudy_grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: : row wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.casestudy_child_grid_child {
    -webkit-box-flex: 1 0 20%;
    -webkit-flex: 1 0 20%;
    -ms-flex: 1 0 20%;
    flex: 1 0 20%;
    min-height: 320px;
    min-width: 12em;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* background images for workgrid flexbox */
.casestudy_grid_child1 { background-image: url(../images/casestudy/surefest/casestudy1.html); }
.casestudy_grid_child2 { background-image: url(../images/casestudy/surefest/casestudy2.html); }
.casestudy_grid_child3 { background-image: url(../images/casestudy/surefest/casestudy3.html); }
.casestudy_grid_child4 { background-image: url(../images/casestudy/surefest/casestudy4.html); }
.casestudy_grid_child5 { background-image: url(../images/casestudy/surefest/casestudy5.html); }
.casestudy_grid_child6 { background-image: url(../images/casestudy/surefest/casestudy6.html); }
.casestudy_grid_child7 { background-image: url(../images/casestudy/surefest/casestudy7.html); }
.casestudy_grid_child8 { background-image: url(../images/casestudy/surefest/casestudy8.html); }
.casestudy_grid_child9 { background-image: url(../images/casestudy/surefest/casestudy9.html); }
.casestudy_grid_child10 { background-image: url(../images/casestudy/surefest/casestudy10.html); }

/* background images for workgrid flexbox - casestudy2 */
.casestudy2 .casestudy_grid_child1 { background-image: url(../images/casestudy/citroen/2.html); }
.casestudy2 .casestudy_grid_child2 { background-image: url(../images/casestudy/citroen/3.html); }
.casestudy2 .casestudy_grid_child3 { background-image: url(../images/casestudy/citroen/5.html); }
.casestudy2 .casestudy_grid_child4 { background-image: url(../images/casestudy/citroen/4.html); }

/* background images for workgrid flexbox - casestudy2 */
.casestudy3 .casestudy_grid_child1 { background-image: url(../images/casestudy/icescreen/1.html); }
.casestudy3 .casestudy_grid_child2 { background-image: url(../images/casestudy/icescreen/2.html); }
.casestudy3 .casestudy_grid_child3 { background-image: url(../images/casestudy/icescreen/3.html); }
.casestudy3 .casestudy_grid_child4 { background-image: url(../images/casestudy/icescreen/4.html); }

/* background images for workgrid flexbox - casestudy3 */
.casestudy3 .casestudy_grid_child1 { background-image: url(../images/casestudy/icescreen/2.html); }
.casestudy3 .casestudy_grid_child2 { background-image: url(../images/casestudy/icescreen/3.html); }
.casestudy3 .casestudy_grid_child3 { background-image: url(../images/casestudy/icescreen/4.html); }
.casestudy3 .casestudy_grid_child4 { background-image: url(../images/casestudy/icescreen/5.html); }

/* background images for workgrid flexbox - casestudy4 */
.casestudy4 .casestudy_grid_child1 { background-image: url(../images/casestudy/benandjerries/2.html); }
.casestudy4 .casestudy_grid_child2 { background-image: url(../images/casestudy/benandjerries/6.html); }
.casestudy4 .casestudy_grid_child3 { background-image: url(../images/casestudy/benandjerries/7.html); }
.casestudy4 .casestudy_grid_child4 { background-image: url(../images/casestudy/benandjerries/5.html); }

/* background images for workgrid flexbox - casestudy3 */
.casestudy5 .casestudy_grid_child1 { background-image: url(../images/casestudy/dove/3.html); }
.casestudy5 .casestudy_grid_child2 { background-image: url(../images/casestudy/dove/4.html); }
.casestudy5 .casestudy_grid_child3 { background-image: url(../images/casestudy/dove/5.html); }
.casestudy5 .casestudy_grid_child4 { background-image: url(../images/casestudy/dove/6.html); }

/* background images for workgrid flexbox - casestudy3 */
.casestudy6 .casestudy_grid_child1 { background-image: url(../images/casestudy/pgtips/3.html); }
.casestudy6 .casestudy_grid_child2 { background-image: url(../images/casestudy/pgtips/4.html); }
.casestudy6 .casestudy_grid_child3 { background-image: url(../images/casestudy/pgtips/5.html); }
.casestudy6 .casestudy_grid_child4 { background-image: url(../images/casestudy/pgtips/6.html); }


/* ----- WORK PAGE - Casestudy wall ----- */

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch
}

.casestudy_row1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: : row wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* background images for workgrid flexbox */
.casestudy_row_child1 { background-image: url(../images/casestudy/pgtips/1.html); }
.casestudy_row_child2 { background-image: url(../images/casestudy/unilever/1.html); }
.casestudy_row_child3 { background-image: url(../images/casestudy/nivea/1.html); }
.casestudy_row_child4 { background-image: url(../images/casestudy/dove/6.html); }
.casestudy_row_child5 { background-image: url(../images/casestudy/icescreen/1.html); }
.casestudy_row_child6 { background-image: url(../images/casestudy/benandjerries/1.html); }
.small-flex:nth-child(1) { background-image: url(../images/casestudy/citroen/1.html); }
.small-flex:nth-child(2) { background-image: url(../images/casestudy/surefest/sure-header.html); }
.small-flex:nth-child(3) { background-image: url(../images/flexbox-img/img-9.html); }
.small-flex:nth-child(4) { background-image: url(../images/flexbox-img/img-10.html); }
.casestudy_row_child7 { background-image: url(../images/casestudy/citroen/1.html); }
.casestudy_row_child8 { background-image: url(../images/flexbox-img/img-11.html); }
.casestudy_row_child9 { background-image: url(../images/flexbox-img/img-12.html); }
.casestudy_row_child10 { background-image: url(../images/flexbox-img/img-13.html); }
.casestudy_row_child11 { background-image: url(../images/flexbox-img/img-14.html); }
.casestudy_row_child12 { background-image: url(../images/flexbox-img/img-15.html); }
.casestudy_row_child13 { background-image: url(../images/flexbox-img/img-16.html); }

.casestudy_row1 .casestudy_child_row_child:nth-child(1), .casestudy_row1 .casestudy_child_row_child:nth-child(2),
.casestudy_row1 .casestudy_child_row_child:nth-child(3), .casestudy_row1 .casestudy_child_row_child:nth-child(4),
.casestudy_row1 .casestudy_child_row_child:nth-child(5), .casestudy_row1 .casestudy_child_row_child:nth-child(6), .casestudy_row1 .casestudy_child_row_child:nth-child(7), .casestudy_row1 .casestudy_child_row_child:nth-child(8), .casestudy_row1 .casestudy_child_row_child:nth-child(9), .casestudy_row1 .casestudy_child_row_child:nth-child(10), .casestudy_row1 .casestudy_child_row_child:nth-child(11), .casestudy_row1 .casestudy_child_row_child:nth-child(12), .casestudy_row1 .casestudy_child_row_child:nth-child(13), .small-flex:nth-child(1), .small-flex:nth-child(2), .small-flex:nth-child(3), .small-flex:nth-child(4) {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.casestudy_child_row_child(7) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: : row wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.casestudy_child_grid_child:nth-child(1), .casestudy_child_grid_child:nth-child(2),
.casestudy_child_grid_child:nth-child(3), .casestudy_child_grid_child:nth-child(4),
.casestudy_child_grid_child:nth-child(5), .casestudy_child_grid_child:nth-child(6),
.casestudy_child_grid_child:nth-child(7), .casestudy_child_grid_child:nth-child(8),
.casestudy_child_grid_child:nth-child(9), .casestudy_child_grid_child:nth-child(10) {
    -webkit-box-flex: 1 0 20%;
    -webkit-flex: 1 0 20%;
    -ms-flex: 1 0 20%;
    flex: 1 0 20%;
    min-height: 320px;
    min-width: 10em;
        
    -webkit-flex: 1 1 15em; /* this */
}

.casestudy_row1 .casestudy_child_row_child:nth-child(1), .casestudy_row1 .casestudy_child_row_child:nth-child(2),
.casestudy_row1 .casestudy_child_row_child:nth-child(3), .casestudy_row1 .casestudy_child_row_child:nth-child(4),
.casestudy_row1 .casestudy_child_row_child:nth-child(5) {
    -webkit-box-flex: 1 0 20%;
    -webkit-flex: 1 0 20%;
    -ms-flex: 1 0 20%;
    flex: 1 0 20%;
    min-height: 320px;
    min-width: 10em;
}

.casestudy_row1 .casestudy_child_row_child:nth-child(6), .casestudy_row1 .casestudy_child_row_child:nth-child(7),
.casestudy_row1 .casestudy_child_row_child:nth-child(8), .casestudy_row1 .casestudy_child_row_child:nth-child(9) {
    -webkit-box-flex: 1 0 16.666%;
    -webkit-flex: 1 0 16.666%;
    -ms-flex: 1 0 16.666%;
    flex: 1 0 16.666%;
    min-width: 12em;
}

.small-flex {
    flex: 1 0 50%;
    min-width: 2em;
    overflow: visible;
}

.casestudy_row1 .casestudy_child_row_child:nth-child(10), .casestudy_row1 .casestudy_child_row_child:nth-child(11),
.casestudy_row1 .casestudy_child_row_child:nth-child(12), .casestudy_row1 .casestudy_child_row_child:nth-child(13) {
    -webkit-box-flex: 1 0 25%;
    -webkit-flex: 1 0 25%;
    -ms-flex: 1 0 25%;
    flex: 1 0 25%;
}

.casestudy_row1 .casestudy_child_row_child:nth-child(10) {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

.casestudy_row1 .casestudy_child_row_child:nth-child(11), .casestudy_row1 .casestudy_child_row_child:nth-child(12), 
.casestudy_row1 .casestudy_child_row_child:nth-child(13) {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* DEMO STYLING */

.thumbnail-grid figure {
	position: relative;
	min-width: 200px;
	height: 320px;
	margin: 0px;
	border-radius: 3px;
	box-shadow: inset 0 -40px 0 0 rgba(0,0,0,0);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.thumbnail-grid figure:hover {
	box-shadow: inset 0 -580px 0 0 rgba(0,0,0,.5);
}

.thumbnail-grid .casestudy_child_row_child:nth-child(6) figure,
.thumbnail-grid .casestudy_child_row_child:nth-child(8) figure,
.thumbnail-grid .casestudy_child_row_child:nth-child(9) figure  {
	position: relative;
/*	min-width: 200px;*/
	height: 580px;
	margin: 0px;
	border-radius: 3px;
	box-shadow: inset 0 -40px 0 0 rgba(0,0,0,0);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.thumbnail-grid .casestudy_child_row_child:nth-child(6) figure:hover,
.thumbnail-grid .casestudy_child_row_child:nth-child(8) figure:hover,
.thumbnail-grid .casestudy_child_row_child:nth-child(9) figure:hover {
	box-shadow: inset 0 -580px 0 0 rgba(0,0,0,.5);
}

.thumbnail-grid .small-flex figure {
	position: relative;
/*	min-width: 200px;*/
	height: 320px;
	margin: 0px;
	border-radius: 3px;
	box-shadow: inset 0 -40px 0 0 rgba(0,0,0,0);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.casestudy_row2.thumbnail-grid figure {
	position: relative;
/*	min-width: 200px;*/
	height: 580px;
	margin: 0px;
	border-radius: 3px;
	box-shadow: inset 0 -40px 0 0 rgba(0,0,0,0);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.casestudy_row_child7 .small-flex figure {
	position: relative;
	height: 290px;
	margin: 0px;
	border-radius: 3px;
	box-shadow: inset 0 -40px 0 0 rgba(0,0,0,0);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.casestudy_row_child7 .small-flex figure:hover {
	box-shadow: inset 0 -290px 0 0 rgba(0,0,0,.5);
}

.thumbnail-grid figcaption {
    font-family: "Gotham";
    font-size: 20px;
    font-weight: 600;
	position: relative;
	width: 65%;
    max-width: 237px;
	text-align: center;
	color: rgba(255,255,255,0);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	bottom: 10px;
}

.thumbnail-grid figure figcaption {
    padding: 7px 10px;
    line-height: 100%;
    -webkit-transform: translateY(200%);    transform: translateY(200%);
}

.thumbnail-grid figure:hover figcaption {
	bottom: 0%;
    -webkit-transform: translateY(0%);    transform: translateY(0%);
	color: rgba(255,255,255,1);
}

.casestudy_child_row_child, .casestudy_child_grid_child {
    overflow: visible;
}

.casestudy_child_grid_child a figure {
    color: white;
    text-align: center;
    text-decoration: none;
    overflow: visible;
}

.casestudy_child_row_child a figure {
    color: white;
    text-align: center;
    text-decoration: none;
    overflow: visible;
}

a figure:hover span {
    height: 50px;
    width: 50px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgba(221,35,151,0.8);
    -webkit-transition: background-color, 0.2s;
    transition: background-color, 0.2s;
    padding-top: 6px;
    color: white;
    text-align: center;
}

.casestudy_child_grid_child a {
    text-decoration: none !important;
}

.casestudy_child_row_child:hover a {
    text-decoration: none !important;
}

a figure:hover span:hover {
    background-color: rgba(221,35,151,1);
    text-align: center;  
}


a figure:hover span::after {
   font-family: FontAwesome;
    content: "\f061";
}

figcaption {
    display: block;
    margin: 0 auto;
    border-top: 3px dotted  rgba(255,255,255,0);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
    border-bottom: 3px dotted  rgba(255,255,255,0);
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
    width: 80%;
    -ms-flex-item-align: center;
    align-self: center;
	font-size:18px;
}

figcaption strong {
    text-transform: uppercase;
}


/* -------------------- MEDIA QUERIES -------------------- */


 
/* ----------------------------------- MEDIA QUERIES ----------------------------------- */


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    
/* STYLES GO HERE */
    
    /* ----- MOBILE NAV STYLING ----- */
    header#index_nav.container-fluid.nav-down {
        background-color: white;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.01);
    }
    
    /* ----- WORKPAGE FLEXBOX ----- */

    .casestudy_row1 .casestudy_child_row_child:nth-child(1), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(2), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(3), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(4), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(5) {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 0 50% !important;
        flex: 1 0 50% !important;
        min-width: 50% !important;
    }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
    
    /* ----- WORKPAGE FLEXBOX ----- */

    .casestudy_row1 .casestudy_child_row_child:nth-child(1), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(2), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(3), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(4), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(5) {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 0 50% !important;
        flex: 1 0 50% !important;
        min-width: 50% !important;
    }
    
    /* ----- Navigation ----- */
    .overlay ul li a {
        font-size: 3em;
    }
    
    .overlay nav {
        top: 52%;
        height: 75%;
    }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
    
    /* ----- WORKPAGE FLEXBOX ----- */

    .casestudy_row1 .casestudy_child_row_child:nth-child(1), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(2), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(3), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(4), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(5) {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 0 50% !important;
        flex: 1 0 50% !important;
        min-width: 50% !important;
    }
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
    
    /* ----- WORKPAGE FLEXBOX ----- */

    .casestudy_row1 .casestudy_child_row_child:nth-child(6), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(9) {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        min-width: 16%;
    }
 
    .casestudy_row1 .casestudy_child_row_child:nth-child(7), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(8) {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        min-width: 33%;
    }

    .casestudy_row1 .casestudy_child_row_child:nth-child(10) {
        -webkit-box-flex: 2;
        -ms-flex-positive: 2;
        flex-grow: 2;
        min-width: 20%;
    }
 
    .casestudy_row1 .casestudy_child_row_child:nth-child(11), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(12), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(13) {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        min-width: 20%;
    }
    
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
    
    /* ----- Navigation ----- */
    .overlay ul li a {
        font-size: 3em;
    }
    
    /* ----- WORKPAGE FLEXBOX ----- */

    .casestudy_row1 .casestudy_child_row_child:nth-child(6), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(9) {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        min-width: 16%;
    }
 
    .casestudy_row1 .casestudy_child_row_child:nth-child(7), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(8) {
        -webkit-box-flex: 2;
        -ms-flex-positive: 2;
        flex-grow: 2;
        min-width: 33%;
    }

    .casestudy_row1 .casestudy_child_row_child:nth-child(10) {
        -webkit-box-flex: 2;
        -ms-flex-positive: 2;
        flex-grow: 2;
        min-width: 20%;
    }
 
    .casestudy_row1 .casestudy_child_row_child:nth-child(11), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(12), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(13) {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        min-width: 20%;
    }
}

/* Large screens ----------- */
@media only screen
and (max-width : 1824px) {
/* STYLES GO HERE */
    
    /* ----- WORKPAGE FLEXBOX ----- */

    .casestudy_child_grid_child:nth-child(1), .casestudy_child_grid_child:nth-child(2),
    .casestudy_child_grid_child:nth-child(3), .casestudy_child_grid_child:nth-child(4),
    .casestudy_child_grid_child:nth-child(5), .casestudy_child_grid_child:nth-child(6),
    .casestudy_child_grid_child:nth-child(7), .casestudy_child_grid_child:nth-child(8),
    .casestudy_child_grid_child:nth-child(9), .casestudy_child_grid_child:nth-child(10) {
        -webkit-box-flex: 1 0 20%;
        -webkit-flex: 1 0 20%;
        -ms-flex: 1 0 20%;
        flex: 1 0 20%;
        min-height: 320px;
        min-width: 15em;

        -webkit-flex: 1 1 15em; /* this */
    }
}

/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
    
    div.jumbotron#about, div.jumbotron#join_us, div.jumbotron#our_work, div.jumbotron#news_ideas,
    div.jumbotron#about, div.jumbotron#contact, div.jumbotron#case_study, div.jumbotron#post {
        height: 100vh;
        min-height: 530px;
    }
    
    

.casestudy_row1 .casestudy_child_row_child:nth-child(1), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(2), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(3), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(4), 
    .casestudy_row1 .casestudy_child_row_child:nth-child(5) {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 0 100% !important;
        flex: 1 0 100% !important;
        min-width: 100% !important;
    }

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 200px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


/* Three columns side by side */
.column_team {
    float: left;
    width: 33.3%;
    margin-bottom: 16px;
    padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media (max-width: 650px) {
    .column_team {
        width: 100%;
        display: block;
    }
}

/* Add some shadows to create a card effect */
.card_team {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */
.container_team {
    padding: 0 16px;
}

/* Clear floats */
.container_team::after, .row::after {
    content: "";
    clear: both;
    display: table;
}

.title_team {
    color: grey;
}

.button_team {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.button_team:hover {
    background-color: #555;
}