h2,
h3,
h4,
h5,
h6 {
  color: #252525;
  font-family: 'Avenir Next Condensed', sans-serif;
  text-transform: capitalize;
  font-weight: 300;
  letter-spacing: .75px;
}

h1 {
	color: #252525;
	text-transform: uppercase;
	font-weight: 500;
	font-family: 'Avenir Next Condensed', sans-serif !important;
	letter-spacing: 2px;
	margin-top: 100px;
    margin-bottom: 0;
    text-shadow: 8px 36px 1px #25252508;
}

h2 {
	color: #252525;
	margin-top: 30px;
}

.case-study-image img {
	width: 100%;
}

@media screen and (max-width: 39.9375em) {
	h1.sub {
		font-size: 24px;
	    padding-left: 60px;
	    padding-right: 60px;
	    margin-bottom: 9px;
	}
	
	.column.container {
		margin-bottom: 75px;
	}

	.cheers.column {
		margin-bottom: 75px;
	}

	.large-3.column {
		margin-bottom: 75px;
	}
}

.cheers.column {
	padding-top: 36px;
}

h3 {
	font-size: 24px;
	margin-top: 40px;
	text-transform: none;
}

h4 {
	font-size: 28px;
	margin-top: 40px;
	text-transform: none;
}

p {
	color: #252525;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 300;
}

body {
	background-color: #f7f7f7;
	font-family: 'Source Sans Pro', sans-serif;

}

body.home div a img.preview {
	display: inline !important;
	cursor: zoom-in;
	width: 75%;
}


body.home div a img.preview:hover {
	border-top: 4px solid #a07f1a;
	box-shadow: 0px 0px 16px #2525251c;
}

body.home div a img.shoot {
	display: block !important;
}

body.blink {
	background-image: url('../img/home/BL1NK.gif');
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

body.home.marketing div .maintain-content.brand {
	background: #efefef;
}


.certs img {
/*    border: 13px dashed #34b3dd;
*/    box-shadow: -1px 6px 18px 12px #403f432e;
}

.logo {
    margin-top: 28px;
    position: relative;
    line-height: 51px;
    background: #252525;
    color: white;
    margin-left: 16px;
    text-decoration: none;
    font-size: 23px;
    padding: 6px 12px;
    }

.logo:hover {
	text-decoration: none;
	color: #a07f18;
}

.ux-title p span {
	font-size: 21px;
}


.row {
	max-width: 80rem;
}


.main-content .intro,
.main-content .parts {
	padding: 3% 0;
}

.main-content .role {
	margin-top: 60px;
}

.main-content .parts.top {
	margin-top: 8rem;
}

.main-content .intro p {
	font-size: 20px;
}

@media screen and (max-width: 39.9375em) {
	
	.main-content .intro p {
		padding: 15px 25px;
	}

	.grid-small {
		padding: 0 25px;
	}

	.main-content .niquee-story img.sign {
		width: 20% !important;
    	margin-left: 36px;
	}

	.cheers.column {
		padding-top: 36px;
		padding-left: 45px;
		padding-right: 45px;
	}
}

.main-content .intro img {
	width: 19%;
}

@media screen and (max-width: 39.9375em) {
	.main-content .intro img {
		width: 65% !important;
	}

	.main-content .niquee-story.row p {
		padding: 0 10%;
	}
}

.main-content .intro-role img,
.main-content .niquee-story img {
	width: 50%;
}

.main-content .portfolio img {
	width: 100%;
	box-shadow: 16px 20px 20px transparent;
    border: 1px solid #ffffff;
}

.main-content .niquee-story img.sign {
	width: 15%;
}

.main-content .intro-role.row {
    max-width: 85rem;
    margin-bottom: 150px;
    margin-top: 150px;
    background: #ffffff7a;
    padding-bottom: 2rem;
    border: 32px solid #ffffff73;
    box-shadow: 10px 20px 20px 20px #a07e1805;
    padding-left: 1rem;
    padding-right: 3rem;
    border-radius: 30px;
}

.main-content .case-study.row {
	max-width: 85rem;
	margin-bottom: 150px;
    margin-top: 150px;
    background: #ffffff;
    padding-bottom: 6rem;
    border: 1px dotted #2525252e;
    box-shadow: 0 0 20px #eaeaea;
    padding-left: 3rem;
    padding-right: 3rem;
}

.main-content .niquee-story.row {
	margin-top: 0;
	max-width: 35rem;
}


.main-content .niquee-story p.highlight {
	font-size: 22px;
	margin-bottom: 3rem;
}

.main-content .parts .text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

img.ideou {
	margin-top: 68px;
	margin-bottom: 26px;
}

.main-content .parts .overlay {
  position: absolute;
  cursor: pointer;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  box-shadow: 2px 2px 2px solid black;
}

.main-content .memories img {
	border: 60px solid #ffffff;
	border-bottom: 350px solid #ffffff;
	margin-bottom: 120px;
	box-shadow: 0px 0px 158px #2525250d;
}

.main-content .memories p {
    bottom: 362px;
    position: relative;
    font-size: 72px;
    font-family: Amatic SC;
    text-transform: capitalize;
    letter-spacing: 6px;
}

@media screen and (max-width: 39.9375em) {
	.row.memories {
		padding: 3% 7%;
	}

	.main-content .memories img {
		border: 26px solid #ffffff;
		border-bottom: 75px solid #ffffff;
		margin-bottom: 20px;
		box-shadow: 0px 0px 158px #2525250d;
	}

	.main-content .memories p {
		bottom: 77px;
		position: relative;
		font-size: 22px;
		font-family: Amatic SC;
		text-transform: capitalize;
		letter-spacing: 4px;
	}
}

.main-content.brand .top {
	margin-top: 6rem;
}


.container:hover .overlay {
	cursor: pointer;
	opacity: 1;
}

.container a img:hover {
border: 2px solid #ffffff00;
    box-shadow: 0px 0 20px 17px #25252538;
    border-radius: 10px;
}

.cover-background {
	background-image: url('../img/bg-2.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%; 
	opacity: 0.54;
}

/* Header */

header {
	background-color: #f7f7f791;
    position: fixed;
    width: 100%;
    z-index: 1;
    border-top: 5px solid #a07f18;
    box-shadow: inset 0px -20px 20px #25252503;
}

header .bar {
	padding-top: 15px;
	padding-bottom: 15px;
}

header .bar .name a span {
    color: #9A2617;
    font-size: 27px;
    font-weight: 300;
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: capitalize;
    text-decoration: none;
}

.circle {
    height: 200px;
    width: 200px;
    border-radius: 50%;
  background-color: #3d9970;
}

header img {
	width: 46%;
    margin-top: 1px;
}

header ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	line-height: 55px;
}

header li {
	display: inline;
	float: right;
	padding: 0 20px;
	font-size: 21px;
}

header li a {
	width: 100px;
	color: #252525;
}

.main-content .intro {
	padding-top: 150px;
}


img.typing-gif {
	width: 35%;
}


.landing .grid {
	padding: 5%;
	border-bottom: 1px dashed #9A261745;
}

.landing .grid .visual {
	padding: 3rem 1rem;
}


.landing .grid .visual .snippets {
	background: #ffffff;
	box-shadow: 0 -17px 33px #2525251c;
	padding-top: 17px;
}


.landing .grid .visual .snippets:hover {
	background: #9A261715;
	border-top: 4px solid #a07f1a;
	box-shadow: 0px 0px 16px #2525251c;
}

.landing .grid.footer {
	background-image: url('../img/footer.jpg');
	background-position: bottom;
	background-size: cover;
}

.landing .grid.main a img {
	margin-bottom: 15px;
}

.landing .grid .block h3 {
	margin-top: 2rem;
}

.landing .grid .block:hover h3 {
	text-decoration: underline;
}

.landing .dark {
	background: #151515;
}

.landing .list-websites .column {
	background: none;
}

.landing .list-websites .column span.tools {
	line-height: 3;
}

.landing .list-website img {
	border: 12px solid white;
    box-shadow: 0px 0px 9px #0000002e;
}

.column {
	margin-top: 3rem;
}

/* Home - caption */
.caption {
	position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
}

.caption span.border {
	background-color: #252525;
	color: #fff;
	padding: 18px;
	font-size: 25px;
	letter-spacing: 10px;	
}

.caption span.border-link {
	background-color: #fff;
	box-shadow: 0px 0px 46px #a07f1a20;
	color: #252525;
	padding: 18px;
	font-size: 25px;
	letter-spacing: 2px;
	text-decoration: underline;
}


.caption .sub-title {
	margin-top: 45px;
}


p.bubble {
	font-size: 14px;
}

p.secondary-link a {
	color: #a07f1a;
    font-size: 22px;
	margin-bottom: 0;
    margin-top: 5%;
    text-decoration: underline;
}

p.secondary-link a:hover {
	color: #252525;
}

span.tools {
    background: #252525;
    padding: 7px 13px;
    border-radius: 17px;
    color: white;
}

.dark p.bubble,
.dark h4 {
	color: #ffffff85;
}

.dark p.bubble {
	color: white;
}

a {
	color: #252525;
	font-weight: 400;
	text-decoration: none;
}

a:hover,
.top-bar-section u li>a:hover {
	color: #252525;
	text-decoration: underline;
	font-weight: 600;
}

a.anchor {
    display: block;
    position: relative;
    top: -67px;
    visibility: hidden;
}

a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 35px;
	bottom: 45px;
	background: #252525 url('../img/up-arrow.svg') no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	border: 4px solid #ffffff3d;
	box-shadow:8px 13px 12px 18px #2525250d;
}

a:hover.back-to-top {
	background: #252525 url('../img/up-arrow-hover.svg') no-repeat center 43%;
	border: 6px solid #252525;
    box-shadow: 0px 0px 45px #252525;
}

.port-button {
	font-size: 20px;
	border:1px solid #a07e18;
	padding:1rem 1.5rem;
	letter-spacing: .5px;
	border-radius: 5px;
	box-shadow: 0 0 20px 4px #0000000a;
	color: #59460d;
}

.port-button.disabled {
	font-size: 20px;
	border:none;
	padding:1rem 1.5rem;
	letter-spacing: .5px;
	border-radius: 5px;
	box-shadow: none;
    color: #25252566;
}

a.port-button.disabled {
	font-size: 20px;
	border:none;
	padding:1rem 1.5rem;
	letter-spacing: .5px;
	border-radius: 5px;
	box-shadow: none;
    color: #25252566;
}

a.port-button:hover {
	font-weight: 600;
	box-shadow: 0 0 40px 4px #0000002e;
	text-decoration: none;
}

.breadcrumbs>* {
	font-size: 15px;
	z-index: 999;

}

.breadcrumbs {
	margin-bottom: 0;
    border-radius: 0;
    box-shadow: 0px 0px 15px #25252545;
    z-index: 999;
    padding: 21px 32px;
    position: fixed;
    width: 100%;
}

.breadcrumbs>* a {
	color: #252525 !important;
	z-index: 999;
}

.breadcrumbs a:hover {
	color: #9A2617 !important;
}

.breadcrumbs li.disabled {
	color: #9A2617;
	font-weight: 700;
}


/* Components- buttons, grid, back to top, social icons */
.button-group>li {
	border-right: 1px solid rgba(255, 255, 255, 0.85);
	padding: 0 2%;
}

.button-group li:hover {
	background: #002635;
}

.button-group li a {
	font-size: .775rem;
}

.button-group>li:last-child {
	border-right: 0;
}

.button {
	background-color: #a07f1a;
	border-radius: 36px;
	font-family: 'Source Sans Pro', sans-serif;
}

.button:hover {
	background-color: #252525;
}

.button a {
	color: white;
	text-decoration: none;
}

.grid figure img,
.grid figcaption {
	background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow: 0px 0 6px -1px rgba(0, 0, 0, 0.79), inset 0px 0px 4px 1px rgba(255, 255, 255, 0.18);
}

.grid-gallery figcaption h3 {
	color: #ff007d;
	font-family: 'Indie Flower', cursive;
	font-size: 1.2rem;
	text-rendering: geometricPrecision;
	text-transform: capitalize;
	text-align: center;
}

.grid-gallery figcaption p {
	font-weight: 500;
	font-family: 'Source Sans Pro', sans-serif;
}

.label.alert {
	background-color: #9e1aa0;
}

.label.success {
	background-color: #1a94a0;
}

#social_side_links2 {
	position: fixed;
	top: 72px;
	left: 0;
	padding: 0;
	list-style: none;
	z-index: 99;
	box-shadow: 0px 0px 15px #25252545;
}

#social_side_links2 .fa {
	margin: 12px;
	font-size: 25px;
}

#social_side_links2 li a {
	color: white;
	display: block;
	border: 3px solid #ffffff30;
}

.fa-user:before {
	content: '/xf042';
	color: blue;
}

.grid-image {
    box-shadow: 0px -17px 33px #25252515;
}

.grid-image1 {
    box-shadow: 0px -17px 33px #25252515;
}

.flip-container {
    position:relative;
}

.flip-cards {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}


.flip-cards:hover {
    transform: rotateY( 180deg );
    -webkit-transform: rotateY(180deg);
}

.flip-cards div {
    width:200px;
    height:291px;
    position:absolute;
    border-radius:15px;    
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* Media queries */
/*SMALL*/
@media screen and (max-width: 39.9375em) {
	.caption {
		line-height: 3;
	}

		.grid li {
		width: 100%;
	}

	.landing .grid.footer {
		background-image: none;
	}

	.caption span.border-link {
		padding: 0px 0px 1px 0px;
		font-size: 16px;margin: 8px 61px;
	}

	.main-content.row.landing.article-width {
		max-width: none;
	}

	.article-width h2 {
		font-size: 30px;
	}
}

@media only screen and (min-width: 40.0625em) {
	.top-bar {
		display: none;
	}
} 



.top-bar .toggle-topbar.menu-icon a span::after {
	color: #325271;
	box-shadow: 0 0 0 1px #325271, 0 7px 0 1px #325271, 0 14px 0 1px #325271
}

.top-bar,
.top-bar.expanded .title-area,
.top-bar-section ul li {
	background-color: #f7f7f7c4;
}

.top-bar-section ul li:hover {
	box-shadow: -1px 12px 14px #252525;
	z-index: 1;
}

.top-bar img.logo {
	width: 64%;
    margin-top: 6px;
}

.top-bar .toggle-topbar.menu-icon a {
	margin-right: 19px;
	margin-top: 2px;
}

.top-bar-section ul li>a {
	margin-left: 20px;
	color: #252525 !important;
	font-size: 22px;
    border-bottom: 1px solid #25252530;color: #9A2617;
	font-family: 'Source Sans Pro', sans-serif;
}

.top-bar-section ul li>a:hover {
	background: none !important;
	font-weight: 600;
}

#float{
    background:red;
    width:20px;
    height:100px;
    position:fixed;
    top:50px;
    left:0;
}

.reveal-modal-bg {
	background: #9A261785;
}

.reveal-modal {
	box-shadow: 0 0 35px #25252575;
	border: 4px solid #325271;
}


.reveal-modal .close-reveal-modal {
	color: #9A2617;
}

.reveal-modal .close-reveal-modal:hover {
	color: #325271;
}

.slick-prev:before, .slick-next:before {
	color:#9A2617 !important;
	font-size: 55px !important;
}

.slider {
	width: 100%;
	margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}


.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}

/* effect-shine */
a.effect-shine:hover {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}

p.brand-desc {
	background: #f3f3f3;
	border-top: 6px solid #305273;	
	box-shadow: 0px 0px 158px #2525250d;
	padding: 6% 12%;
}

.final img {
	width: 50%;
}