@media (max-width: 576px) { 

html, body {
	height: 100%;
	line-height: 1rem;
}

.wrapper2 {
	width: auto;
	margin: auto;
	max-width: 576px;
}


main {
	width: auto;
	max-width: 576px;
	margin: auto;
}


#nav2 {
	position: absolute;
    right: 0;
    top: 80px;
    z-index: 999999;
    width: 70%;
    background: #231F20;
    text-align: right;
    padding-right: 16px;
}

#nav2 ul {
	display: flex:
	flex-direction:	row;
}

#nav2 li {
	font-family: 'Playfair Display';
	font-size: 22px;
	line-height: 36px;
	color: #fff;
}

.navbar-brand {
	font-family: Helvetica;
	font-size: 12px;
	line-height: 12px;
}

.navbar-social {
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: right
}

.navbar-social a {
	margin-left: 30px;
	line-height: 80px;
}

.navbar-social a img {
	width: auto;
	height: 16px;
}

.navbar {
	background-color: #231F20;
	height: 100px;
	font-family: 'Playfair Display', serif;
	font-size: 26px;
	line-height: 12px;
	padding-left: 16px;
	padding-right: 16px;
	z-index: 2;	
	width: 100%;
}
.navbar-toggler {
	color: #fff;
}

header:after {
 	height: 100px;
}

.cta {
	display: none;
}

.cta-text {
}

.cta-text-message {
	font-family: Helvtica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	line-height: 24px;
	transform: rotate(270deg);
	transform-origin: 0 0;
	transition: all 0.5s ease-out;
}

.cta-text-message:hover {
	font-size: 13px;
	line-height: 24px;
	color: #DB4A6F;    
}


.cta-text-messagebackup:hover {
	font-size: 13px;
	line-height: 24px;
	color: #DB4A6F;
    text-shadow:
    -0.5px -0.5px 0 #DB4A6F,
    0.5px -0.5px 0 #DB4A6F,
    -0.5px 0.5px 0 #DB4A6F,
    0.5px 0.5px 0 #DB4A6F;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;    
}

.intro {
	position: relative;
	display: inline-block;
	margin-top: -20px;
	background-color: #F8F8F8;
	z-index: 1100;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 13px;
	text-align: center;
	margin-bottom: 20px;
	margin-left: 17px;
	margin-right: 17px;
	height: auto;
	display: table;
}

.intro-nopadding {
	padding-left: 0px !important;
	padding-right: 0px !important;

}

.intro-words {
	text-align: right;
	margin-right: 0px;
	margin-left: 0px;
	position: relative;
	width: 100%;
	padding-right: 0px;
	padding-bottom: 0px;
}
.outline {
	position: relative;
	display:inline-block;
	color: #F8F8F8;
	text-shadow: -1px -1px 0 #CCCCCC, 1px -1px 0 #CCCCCC, -1px 1px 0 #CCCCCC, 1px 1px 0 #CCCCCC;
	padding-left: 20px;
	transition: all 0.5s ease-out;
	font-size: 4vw;
	line-height: 4vw;
	letter-spacing: 5px;
	word-break:normal;
	font-weight: bold;
	font-family: helvetica;
	text-transform: uppercase;
}

.outline_active {
	text-shadow: -1px -1px 0 #DB4B70, 1px -1px 0 #DB4B70, -1px 1px 0 #DB4B70, 1px 1px 0 #DB4B70;
}

.home-projects {
	margin-bottom: 60px;
	background-color: #000;
}

.home-projects-folder {
	height: 60px;
	text-align: right;
	padding-right: 30px;
	overflow: hidden;
	color: #fff;
	transition: height 1s ease-out, opacity 1s ease-out, font-size 1s ease-out;
	background-size: cover;
	background-position: center;
	font-family: 'Playfair Display', serif;
	opacity: 0.7;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding-bottom: 5px;
	position: relative;
}

.home-projects-folder:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, transparent 0%, black 100%);
  opacity: 0.3;
}

.line {
	background-color: #DB4A6F;
	position: absolute;
	right: -220px;
	margin-top: -12px;
	height: 2px;
	width: 88px;
	z-index: 1;
	transition: all 0.5s ease-out;
	opacity: 0;
}

.home-project-content {
	position: relative;
	bottom: 0px;
}

.home-project-desc {
	font-size: 18px;
	line-height: 30px;
	z-index: 3;
	position: relative;
	display: inline-block;
	padding-right: 20px;
	transition: font-size 1s ease-out;
}

.home-project-number {
	font-size: 27px;
	line-height: 37px;
	z-index: 3;
	position: relative;
	display: inline-block;
	transition: font-size 1s ease-out;
}
.home-projects-folder-open {
	height: 195px;
	opacity: 1;
}

.home-projects-folder-open .home-project-desc {
	font-size: 24px;
	line-height: 32px;
}

.home-projects-folder-open .home-project-number {
	font-size: 30px;
	line-height: 40px;
}

.home-projects-folder-open .line {
	right: 33px;
	opacity: 1;
}

footer {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 60px;
	padding-bottom: 60px;
	background-color: #231F20;
	height: auto;
	color: #fff;
	text-align: left;
}

footer a {
	text-decoration: none;
	color: #fff;
	transition: color 0.5s ease-out;
}

footer a:hover {
	color: #DB4A6F;
	text-decoration: none;

}

.footer-item {
	flex-basis: 100%;
	order: 2;
}

.footer-headline {
	font-family: Helvetica, sans-serif;
	font-size: 11.5px;
	line-height: 12px;

}


.footer-text {
	font-family: Helvetica, sans-serif;
	font-size: 13px;
	line-height: 20px;

}

.footer-left {
	width: 100%;
	flex-direction: column;
	align-items: flex-start !important;
}



#about {
	position: absolute;
	z-index: 1101;
	/*margin-right: -39px;*/
	right: 0;
	top: 80px;
	background: #231F20;
	color: white;
	width: 100%;
	height: auto;
	padding-top: 22px;
	padding-bottom: 20px;
	padding-left: 16px;
	padding-right: 16px;
	box-shadow: -20px 10px 20px rgba(0,0,0,0.16);
	text-align: center;
}

.about-headline {
	font-family: 'Playfair Display';
	font-size: 30px;
	line-height: 40px;
	color: #DB4A6F;
}

.about-paragraph {
	font-family: 'Helvetica';
	font-size: 15px;
	line-height: 23px;
	font-weight: normal;
	margin-top: 39px;
}


#contact {
	position: absolute;
	z-index: 1101;
	/*margin-right: -39px;*/
	right: 0;
	top: 80px;
	background: #231F20;
	color: white;
	width: 100%;
	height: auto;
	padding-top: 22px;
	padding-bottom: 20px;
	padding-left: 16px;
	padding-right: 16px;
	box-shadow: -20px 10px 20px rgba(0,0,0,0.16);
	text-align: center;
}

.contact-headline {
	font-family: 'Playfair Display';
	font-size: 30px;
	line-height: 40px;
	color: #fff;
}

.contact-paragraph {
	font-family: 'Helvetica';
	font-size: 16px;
	line-height: 30px;
	font-weight: normal;
	margin-top: 39px;
}

.contact-form {
	margin-top: 10px;
	text-align: left;
}

.contact-form input {
       	background-color:rgba(0,0,0,0) !important;
		outline-style: none;
		box-shadow: none;
		border-color: transparent;
  		border: none;
  		border-bottom: 2px solid rgba(255,255,255,0.5);
  		border-radius: 0 !important;
  		padding-left: 0px;
  		color: #DB4A6F;
  		font-size: 16px
  		line-height 19px;
}

.contact-form input:focus  {
		outline-style: none;
		box-shadow: none;
		border: none;
  		border-bottom: 2px solid #DB4A6F;
  		color: #DB4A6F;
  		background-color:rgba(0,0,0,0) !important;
}

.contact-form textarea {
       	background-color:rgba(0,0,0,0) !important;
		outline-style: none;
		box-shadow: none;
		border-color: transparent;
  		border: none;
  		border-bottom: 2px solid rgba(255,255,255,0.5);
  		border-radius: 0 !important;
  		padding-left: 0px;
  		color: #DB4A6F;
 		resize: none;
  		font-size: 16px
  		line-height 19px; 		
}

.contact-form textarea:focus  {
		outline-style: none;
		box-shadow: none;
		border: none;
  		border-bottom: 2px solid #DB4A6F;
  		color: #DB4A6F;
}

.contact-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #FFFFFF;
  opacity: 1; /* Firefox */
}

.contact-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #FFFFFF;
}

.contact-input::-ms-input-placeholder { /* Microsoft Edge */
  color: #FFFFFF;
}

.form-row .control-label{
    text-align: left;
}

.popup-close {
	position: absolute;
	right: 0px;
	top: 0px;
	color: #fff;	
}

.project-intro {
	position: relative;
	margin-top: -20px;
	background-color: #F8F8F8;
	z-index: 1100;
	text-align: center;
	margin-bottom: 20px;
	height: 402px;
	margin-left: 16px;
	margin-right: 16px;
}

.project-hero {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.project-hero:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, #231F20 100%);
  opacity: 1;
}

.project-description {
	position: relative;
	display: inline-block;
	width: 504px;
	z-index: 10;
}

.project-description-headline {
	font-family: 'Playfair Display';
	font-size: 36px;
	line-height: 48px;
	color: #fff;
	font-weight: normal;
}

.project-description-paragraph {
	font-family: 'Helvetica';
	font-size: 18px;
	line-height: 24px;
	color: #fff;
	font-weight: lighter;
	margin-bottom: 24px;
}
.vg-relative {
	position: relative;
}

.project-about {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	margin-left: 28px;
	margin-right: 28px;
}

.project-about strong {
	font-weight: bold;
}

.project-about-left {
display: none;
}

.project-about-right {
	width: 100%;
	font-family: 'helvetica'
	font-size: 13;
	font-weight: lighter;
	line-height: 24px;	
}

.project-hr {
    height: 1px;
    width: 100%;
    content: '';
    display: inline-block;
    background: #DB4A6F no-repeat padding-box;
}

.project-details {
	padding-top: 0px;
	height: 100%;
	min-height: 450px;

}

.project-details-graybg {
	background-color: #F8F8F8;
}

.project-fproject-logo {
	width: 75%;
	text-align: center;
	margin: auto;
	margin-bottom: 140px;
}

.project-fproject-logo img {
	width: 100%;
	height: auto;
}

.project-details-1-fproject {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-around;
	height: 100%;
}


.project-details-1 {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-around;
	height: 100%;
}

.project-details-fonts {
	width: 100%;
	text-align: right;
}

.project-font-header-left {
	text-align: left;
}

.project-font-header-center {
	text-align: center;
}


.project-details-colors {
	position: relative;
	width: 100%;
	text-align: center;
	color: #000;
	font-family: Helvetica;
	font-weight: lighter;
	font-size: 15px;
	line-height: 20px;
	padding-top: 45px;
	align-items: baseline;x
}

.project-details-colors img {
width: 80%;
height: auto;
margin-bottom: 30px;
}



.project-details-colors-3 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.project-details-colors-3-1 {
	position: relative !important;
	top: unset;
	bottom: unset;
	right: unset;
	left: unset;
}

.project-details-colors-3-2 {
	position: relative !important;
	bottom: unset;
	right: unset;
	left: unset;
	top: unset;	

}

.project-details-colors-3-3 {
	position: relative !important;
	bottom: unset;
	right: unset;
	left: unset;
	top: unset;

}


.project-details-colors-2 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.project-details-colors2 img {
height: auto;
width: 80%;
}

.project-details-colors-2-1 {
	position: relative !important;
	top: unset;
	bottom: unset;
	right: unset;
	left: unset;
}

.project-details-colors-2-2 {
	position: relative !important;
	top: unset;
	bottom: unset;
	right: unset;
	left: unset;
}


.project-font-georgia {
	font-family: Georgia;
}

.project-font-times {
	font-family: 'Times New Roman';
}


.project-font-brandon {
	font-family: 'Brandon Grotesque';
	font-weight: normal;
}


.project-font-gibson {
	font-family: 'Gibson';
}

.project-font-signerica {
	font-family: 'Signerica Fat';
}

.project-font-signerica {
	font-family: 'Signerica Fat';
}

.project-font-aparajita {
	font-family: 'Aparajita';
}


.project-font-onky {
	font-family: 'Onky';
}


.project-font-aktivgrotesklight {
	font-family: 'Aktiv Grotesk';
	font-weight: lighter;
}


.project-font-hind {
	font-family: 'Hind';
}

.project-font-gothamcondensed {
	font-family: 'Gotham Condensed';
	font-weight: lighter;
}


.project-font-gotham {
	font-family: 'Gotham';
	font-weight: lighter;
}

.project-font-firmebook {
	font-family: 'Firme-Book';
}


.project-font-kokila {
	font-family: 'Kokila';
}


.project-font-brother1816light {
	font-family: 'Brother 1816';
	font-weight: lighter;
}

.project-font-brother1816black {
	font-family: 'Brother 1816';
	font-weight: bolder;
}


.project-font-header {
	font-size: 30px;
	line-height: 65px;
}

.project-font-text {
	font-size: 15px;
	line-height: 24px;
	padding-bottom: 20px;
}

.project-details-2-fproject {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	position: relative;
}

.project-details-2-fproject-left {
	display: none;

}

.project-details-2-fproject-right {
}


.project-details-2-fproject-right img {
	height: 305px;
	text-align: right;
}

.project-details-2-fproject-middle {
	text-align: center;
	position: relative;
	top: unset;
	bottom: unset;
	left: unset;
	right: unset;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: unset;
}

.project-details-2-fproject-middle-headline {
	font-family: 'Georgia';
	font-size: 30px;
	line-height: 60px;
}

.project-details-2-fproject-middle-sub{
	font-family: 'Times New Roman';
	font-style: italic;
	font-size: 20px;
	line-height: 24px;
}

.project-details-2-fproject-middle-subsub{
	font-family: 'Times New Roman';
	font-style: italic;
	font-size: 20px;
	line-height: 24px;
}

.project-details-2-fproject-middle-paragraph {
	margin-top: 25px;
	font-family: 'Georgia';
	font-style: italic;
	font-size: 15px;
	line-height: 22px;
}

.project-navigation-one {
	margin-top: 65px;
	margin-bottom: 65px;
	font-family: Helvetica;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	transition: color 0.5s ease-out;
}

.project-navigation {
	display: flex;
	justify-content: space-between;
	margin-top: 65px;
	margin-bottom: 65px;
	font-family: Helvetica;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	transition: color 0.5s ease-out;
	margin-left: 16px;
	margin-right: 16px;
}

.project-navigation-hide {
	display: none;
}

.project-navigation-arrow-next  {
	margin-left: 40px;
}

.project-navigation-arrow-prev  {
	margin-right: 40px;
}

.project-navigation a:hover {
	color: #DB4A6F;
}

.project-navigation-one a:hover {
	color: #DB4A6F;
}



.blog-items {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 600px; 
  padding-right: 38px;
  padding-top: 30px;
}

.blog-item {
  width: 100%;
  margin-bottom: 2%; /* Optional */
  background-position: top;
  background-size: cover;
  counter-reset: items;
  position: relative;
  color: #fff;
  padding-top: 40px;
  padding-left: 32px;
  padding-right: 32px;
  text-align: left;
  margin-bottom: 10px;
}

/* Re-order items into 3 rows */
.blog-item:nth-child(4n+1) { order: unset; }
.blog-item:nth-child(4n+2) { order: unset; }
.blog-item:nth-child(4n+3) { order: unset; }
.blog-item:nth-child(4n) { order: unset; }


.blog-item:nth-child(6n+1) { height: 220px; }
.blog-item:nth-child(6n+2) { height: 220px; }
.blog-item:nth-child(6n+3) { height: 220px; }
.blog-item:nth-child(6n+4) { height: 220px; }
.blog-item:nth-child(6n+5) { height: 220px; }
.blog-item:nth-child(6n+6) { height: 220px; }

/* Force new columns */
.blog-items::before,
.blog-items::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

.blog-item:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #231F20 0%, transparent 40%, transparent 100%);
  opacity: 1;
  z-index: 1;
}

.blog-item-headline {
	font-family: Helvetica;
	font-size: 20px;
	line-height: 30px;
	z-index: 3;
	position: relative;
}

.blog-item-paragraph {
	font-family: Helvetica;
	font-size: 14px;
	line-height: 24px;
	z-index: 3;
	position: relative;
}

.bg-transparent {
	background-color: none;
}

.blog-article-container {
 	display: flex;
  justify-content: space-around;
  align-items: flex-end;
  flex-flow: column-reverse;
}

.blog-article-image {
	top: 0;	
	right: 0;
	z-index: -1;
	height: 304px;
}

.blog-article-image img {
	width: 100%;
	margin-top: -12px;
	object-fit: cover;
	object-position: center;
	height: 304px;
}

.blog-article-headline {
	font-family: 'Playfair Display';
	font-size: 36px;
	line-height: 48px;
	text-align: center;
}

.blog-article-sub {
	font-family: 'Helvetica';
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 35px;
	text-align: center;
}

.blog-article-paragraph {
	font-family: 'Helvetica';
	font-weight: lighter;
	font-size: 13px;
	line-height: 24px;
}

.blog-article-left {
	width: auto;
	text-align: left;
	margin-left: 15px;
	margin-right: 15px;
	padding-top: 20px;
	padding-left: 0px;
	padding-right: 32px;
}

.blog-article-right {
	align-self: flex-start;
	width: 90%;
	position: relative;
	text-align: center;
	margin-bottom: 0px;
}


.blog-navigation-one {
	margin-top: 65px;
	margin-bottom: 65px;
	font-family: Helvetica;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	transition: color 0.5s ease-out;
}


.blog-navigation {
	display: flex;
	justify-content: space-around;
	margin-top: 65px;
	margin-bottom: 15px;
	font-family: Helvetica;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	transition: color 0.5s ease-out;
	margin-left: 0px;
	margin-right: 32px;

}

.blog-navigation-hide {
	display: none;
}

.blog-navigation-arrow-next  {
	margin-left: 40px;
}

.blog-navigation-arrow-prev  {
	margin-right: 40px;
}

.blog-navigation-next {
		z-index: 99999;
}

.blog-navigation a:hover {
	color: #DB4A6F;
}

.blog-navigation-one a:hover {
	color: #DB4A6F;
}

.blog-navigation-arrow {
fill: #DB4A6F;	
}

.btn-vg {
	background-color:transparent;
	border-radius:5px;
	border:2px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Helvetica;
	font-size:12px;
	padding: 10px 40px;
	text-decoration:none;
	margin-top: 10px;
}

.btn-vg:hover {
	color: #fff;
	text-decoration: none;
	background-color: #DB4A6F;
	border:2px solid #DB4A6F;	
}

.home-social-container {
	display: flex;
	flex-direction: row;
	flex-basis: auto;
	z-index: 10001;
	position: absolute;
	bottom: 47px;
	left: 7px;
}

.home-social-list {
	display: flex;
	list-style: none;
	z-index: 99999;
}

.home-social-list li {
	padding-right: 27px;
}

.home-social-list img {
	height: 16px;
}

.footer-social-container {
	display: flex;
	flex-direction: column;
	flex-basis: auto;
	z-index: 10001;
	position: relative;
    justify-content: flex-end;
    flex-basis: 100%;
    width: 100%;
    order: 1;
    margin-bottom: 30px;
}

.footer-social-list {
	display: flex;
	list-style: none;
	z-index: 99999;
	flex-wrap: wrap;
	padding-left: 0px;
	justify-content: space-between;
	order: 1;
}

.footer-social-list li {
	padding-right: 5px;
	padding-left: 5px;
}



.footer-social-list li:first-child {
	padding-left: 0px;

 }

.footer-social-list img {
	height: 16px;
}

.fade:not(.show) {
	display: none;
}

.home-social-container {
	display: none !important;
}

.project-about-left {
display: none;
}

.project-about-right {
margin-left: 0px;
}