@import url(https://fonts.googleapis.com/css?family=Georgia:400,700|Roboto:100,300,400);
@import url(https://fonts.google.com/sr?family=Times+New+Roman%C2%AE&token=MT);
@import url(https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap);

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

.wrapper2 {
	max-width: 1440px;
	margin: auto;
	width: 100%;
}

body:after{
 display:none;
 content: url('/img/assets/social/behance-on.png') url('/img/assets/social/behance-white-on.png') url('/img/assets/social/dribbble-on.png') url('/img/assets/social/dribbble-white-on.png') url('/img/assets/social/facebook-on.png') url('/img/assets/social/facebook-white-on.png') url('/img/assets/social/instagram-on.png') url('/img/assets/social/instagram-white-on.png') url('/img/assets/social/linkedin-on.png') url('/img/assets/social/linkedin-white-on.png') url('/img/assets/social/pinterest-on.png') url('/img/assets/social/pinterest-white-on.png');
}


a {
  color: inherit;
  text-decoration: none; /* no underline */
}

a:hover, a:active {
  color: inherit;
  text-decoration: none; /* no underline */
}

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


main {
	position: relative;
	/*padding-left: 39px;*/
	/*padding-right: 39px;*/
}


.navbar {
	background-color: #231F20;
	height: 140px;
	font-family: helvetica, sans-serif;
	font-size: 14px;
	line-height: 14px;
	padding-left: 39px;
	padding-right: 39px;
	z-index: 2;	
	width: 100%;
	padding:0;
}

header:after {
  content: '';	
	background-color: #231F20;
	height: 140px;
	z-index: -1;	
	width: 100%;
	position: absolute;
	left:0;
	right:0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}

.navbar a {
	color: #ffffff;
	transition: all 0.5s ease-in-out;
}

.navbar a:hover {
	color: #DB4A6F;
	font-weight: bold;
}


.navbar-brand  {
    background: url("/img/brand/vg-normal.png") no-repeat;
   	background-repeat: no-repeat;
  	background-size: auto 14px;
    display: inline-block;
    padding-left: 37px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    font-size: 14px;
}

.navbar-brand:hover  {
    background: url("/img/brand/vg-hover.png") no-repeat;
}

.nav-item {
	padding-left: 40px;
}

.cta {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
}

.cta-text {
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 align-items: flex-start;
 align-content: center;
 text-align: right;
 height: 100%;
 margin-top: 80px;
 margin-left: 40px; 
}

.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: 37px;
	padding-right: 37px;
	padding-top: 45px;
	text-align: center;
	margin-bottom: 60px;
}

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

}

.intro-words {
	text-align: right;
	margin-right: 48px;
	margin-left: 38px;
	position: relative;
	width: 100%;
	padding-right: 38px;
	padding-bottom: 40px;
}
.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: 3.2vw;
	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;
}

.panel {
	background-image: url('img/assets/cellar_door_hero.png');
}

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

.home-projects-folder {
	height: 110px;
	text-align: right;
	padding-right: 30px;
	overflow: hidden;
	color: #fff;
	transition: height 1s ease-out, opacity 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: 15px;
	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: -230px;
	margin-top: -25px;
	height: 5px;
	width: 240px;
	z-index: 1;
	transition: all 0.5s ease-out;
	opacity: 0;
}

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

.home-project-desc {
	font-size: 50px;
	line-height: 67px;
	z-index: 3;
	position: relative;
	display: inline-block;
	padding-right: 100px;
}

.home-project-number {
	font-size: 100px;
	line-height: 100px;
	z-index: 3;
	position: relative;
	display: inline-block;
}
.home-projects-folder:hover {
	height: 529px;
	opacity: 1;
}

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

footer {
	padding-left: 39px;
	padding-right: 39px;
	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-headline {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	line-height: 12px;

}


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

}

.footer-left {
	width: 100%;
}



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

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

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


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

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

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

.contact-form {
	margin-top: 85px;
	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;
}

.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;  		
}

.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: 20px;
	top: 20px;
	color: #fff;	
}

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

.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: 60px;
	line-height: 80px;
	color: #fff;
	font-weight: normal;
}

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

.project-about {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}

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

.project-about-left {
	width: 500px;
	font-family: 'helvetica'
	font-size: 16;
	line-height: 24px;
}

.project-about-right {
	width: 504px;
	font-family: 'helvetica'
	font-size: 18;
	font-weight: lighter;
	line-height: 32px;	
}

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

.project-details {
	padding-top: 144px;
	height: 100%;
	min-height: 700px;

}

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

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

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

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


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

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


.project-details-colors {
	position: relative;
	width: 45%;
	text-align: center;
	color: #000;
	font-family: Helvetica;
	font-size: 15px;
	line-height: 24px;
}

.project-details-colors img {
	margin-bottom: 20px;	
}

.project-details-color-shadow {
	border-radius: 100%;
    box-shadow: 16px 26px 22px -8px #00000029;
    -webkit-box-shadow: 16px 26px 22px -8px #00000029;
    -moz-box-shadow: 16px 26px 22px -8px #00000029;	
}



.project-details-colors-3 {
	position: relative;
}

.project-details-colors-3-1 {
	position: absolute;
	left: 0;
	top:0;
}

.project-details-colors-3-2 {
	position: absolute;
	left: 241px;
	top:109px;
}

.project-details-colors-3-3 {
	position: absolute;
	left: 43px;
	top:257px;
}


.project-details-colors-2 {
	position: relative;
}

.project-details-colors-2-1 {
	position: absolute;
	left: 0;
	top:0;
}

.project-details-colors-2-2 {
	position: absolute;
	left: 241px;
	top:0;
}


.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: 54px;
	line-height: 65px;
}

.project-font-text {
	font-size: 27px;
	line-height: 32px;
	padding-bottom: 88px;
}

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

.project-details-2-fproject-left {

}

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

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

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

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

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

.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;
}

.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; 
}

.blog-item {
  width: 32%;
  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;
}


@media (min-width: 769px) { 

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


.blog-item:nth-child(9n+1) { height: 420px; }
.blog-item:nth-child(9n+2) { height: 460px; }
.blog-item:nth-child(9n+3) { height: 400px; }
.blog-item:nth-child(9n+4) { height: 420px; }
.blog-item:nth-child(9n+5) { height: 400px; }
.blog-item:nth-child(9n+6) { height: 440px; }
.blog-item:nth-child(9n+7) { height: 460px; }
.blog-item:nth-child(9n+8) { height: 440px; }
.blog-item:nth-child(9n) { height: 460px; }
}

/* 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;
}

.blog-article-image {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;	
	right: 0;
	z-index: -1;
}

.blog-article-image img {
	width: 40vw;
	margin-top: -45px;
}

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

.blog-article-sub {
	font-family: 'Helvetica';
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 70px;
	text-align: center;
}

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

.blog-article-left {
	width: 50%;
	text-align: left;
	padding-left: 70px;
	padding-right: 70px;
	padding-top: 113px;
}

.blog-article-right {
	align-self: flex-start;
	width: 50%;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;	
	right: 0;
	z-index: -1;
	text-align: right;
}


.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: 65px;
	font-family: Helvetica;
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	transition: color 0.5s ease-out;
}

.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: 40px;
}

.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: row;
	flex-basis: auto;
	z-index: 10001;
	position: relative;
	flex-grow: 0.3;
    justify-content: flex-end	
}

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

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

.footer-social-list li:last-child {
 padding-right: 0px;
 }

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

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

.project-details-1-padding-btm {
	margin-bottom: 150px;
}