html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.3;
	font-family: 'Century Gothic', sans-serif;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
@font-face
	{
		font-family: 'Century Gothic', sans-serif;
		src: url('../fonts/GOTHIC.html') format('truetype'),
			 url('../fonts/GOTHICB.html') format('truetype');
	}
.animation8s
		{
			transition: all 0.8s ease 0s;
			-o-transition: all 0.8s ease 0s;
			-ms-transition: all 0.8s ease 0s;
			-moz-transition: all 0.8s ease 0s;
			-webkit-transition: all 0.8s ease 0s;
		}
.animation15s
		{
			transition: all 1.5s ease 0s;
			-o-transition: all 1.5s ease 0s;
			-ms-transition: all 1.5s ease 0s;
			-moz-transition: all 1.5s ease 0s;
			-webkit-transition: all 1.5s ease 0s;
		}
.mainWrap
		{
			float: left;
			width: 100%;
			background-image: url('../images/bg2.jpg');
			background-size: 100%;
		}
.topWrap
		{
			float: left;
			width: 100%;
			height: 100vh;
			position: relative;
			background-color: #ebebeb;
		}
.topWrap .topBannerImage
		{
			float: left;
			width: 100%;
			height: 100%;
		}
.topWrap .topBannerBulb
		{
			float: left;
			width: 100%;
			position: absolute;
			left: 0;
			top: -100%;
		}
.menuWrap
		{
			float: left;
			width: 170px;
			position: absolute;
			right: 15%;
			top: 0;
		}
nav
		{
			float: left;
			width: 100%;
			margin-top: 40px;
			position: relative;
			z-index: 99;
			min-height: 300px;
			overflow: hidden;
		}
nav .menu
		{
			float: left;
			width: 100%;
			position: absolute;
			left: 100%;
		}
nav .menu > li
		{
			float: left;
			width: 100%;
			margin-bottom: 20px;
		}
nav .menu > li > a
		{
			float: right;
			text-decoration: none;
			color: #605f61;
			font-size: 16px;
			line-height: 100%;
			padding-right: 10px;
			font-weight: bold;
			border-right: 3px solid #605f61;
			background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
			background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
			background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );

		}
.topsocialImage
		{
			float: left;
			width: 38%;
			position: absolute;
			top: 30%;
			left: 20%;
			display: none;
		}
.topsocialImage img
		{
			float: left;
			width: 100%;
			height: 100%;
			mix-blend-mode: multiply;
		}
.logoMainWrap
		{
			float: left;
			width: 61px;
			height: 0px;
			background-color:#FFCA00;
			mix-blend-mode: multiply;
			position: absolute;
			right: -56px;
			top: 0;
			z-index: 90;
		}
.logoWrap
		{
			float: left;
			width: 300px;
			position: absolute;
			bottom: -117px;
			left: -160px;
			display: none;
		}
.logoWrap img
		{
			float: left;
			width: 100%;
		}
.topDownArrow
		{
			margin: auto;
			width: 40px;
			height: 24px;
			position: absolute;
			bottom: 20px;
			left: 0;
			right: 0;
			cursor: pointer;
			background-image: url('../images/top-arrow.jpg');
		}
.followTopMainWrap
		{
			float: left;
			width: 300px;
			position: absolute;
			bottom: 20px;
			left: 30px;
		}
.followTopWrap
		{
			float: left;
			width: 100%;
		}
.followTopWrap li
		{
			float: left;
			width: 20px;
			height: 20px;
			margin-right: 10px;
			background-image: url('../images/social-icon.jpg');
			background-repeat: no-repeat;
			mix-blend-mode: multiply;
		}
.followTopWrap li.facebook
		{
			background-position: 0;
		}
.followTopWrap li.insta
		{
			background-position: -30px 0px;
		}
.followTopWrap li.twitter
		{
			background-position: -64px 0px;
			width: 40px;
		}
.followTopWrap li a
		{
			float: left;
			width: 100%;
			height: 100%;
		}
/*top css end*/
section
		{
			float: left;
			width: 100%;
		}
.aboutSection
		{
			float: left;
			width: 100%;
			padding: 50px 0;
			position: relative;
		}
.aboutSection::before
		{
			content: "";
			float: left;
			width: 100%;
			height: 100%;
			background-color:#FFCA00;
			mix-blend-mode: multiply;
			position: absolute;
			top: 0px;
			left: 0;
			z-index: 0;
		}
.aboutContentWrap
		{
			float: left;
			width: 100%;
			position: relative;
			z-index: 99;
		}
.whiteTitleWrap
		{
			float: right;
			width: 0%;
			height: 51px;
			background-color: #fff;
			font-size: 52px;
			line-height: 100%;
			color: #FFCA00;
			padding: 5px 0;
			font-weight: bold;
			text-align: center;
			text-transform: uppercase;
			position: relative;
			background-image: url('../images/smallWall.jpg');
			background-size: 100%;
		}
.whiteTitleWrap h2
		{
			float: left;
			width: 100%;
			text-align: center;
			mix-blend-mode: multiply;
		}
.whiteBrush
		{
			float: left;
			width: 92px;
			height: 68px;
			background-image: url('../images/roller.png');
			position: absolute;
			left: -90px;
			top: -6px;
		}
.aboutUsText
		{
			float: left;
			width: 100%;
			font-size: 40px;
			color: #fff;
			text-align: center;
			text-transform: uppercase;
			margin: 60px 0;
		}
.aboutUsText span
		{
			color: #605f61;
			font-weight: bold;
			font-style: italic;
		}
.serviceSection
		{
			float: left;
			width: 100%;
			padding: 50px 0;
		}
.yellowTitleWrap
		{
			float: left;
			width: 0;
			height: 51px;
			font-size: 52px;
			line-height: 100%;
			color: #fff;
			background-color: #FFCA00;
			mix-blend-mode: multiply;
			padding: 5px 0;
			font-weight: bold;
			text-align: center;
			text-transform: uppercase;
			position: relative;
		}
.yellowTitleWrap h2
		{
			float: left;
			width: 100%;
			text-align: center;
		}
.yellowBrush
		{
			float: right;
			width: 92px;
			height: 68px;
			background-image: url('../images/roller.png');
			position: absolute;
			right: -90px;
			top: -1px;
			transform: rotate(180deg);
		}
.serviceContent
		{
			float: left;
			width: 100%;
			margin: 50px 0;
		}
.serviceList
		{
			float: left;
			width: 90%;
			margin: 0 5%;
		}
.serviceList > li
		{
			float: left;
			width: 23.5%;
			margin-right: 2%;
			mix-blend-mode: multiply;
		}
.serviceList > li:last-child
		{
			margin-right: 0;	
		}
.slTopIcon
		{
			float: left;
			width: 100%;
			text-align: center;
		}
.slTopIcon span
		{
			display: inline-block;
			margin: auto;
			width: 90px;
			height: 90px;
			background-image: url('../images/i_factory.png');
		}
.strategy span
		{
			display: inline-block;
			margin: auto;
			width: 90px;
			height: 90px;
			background-image: url('../images/i_flat.png');
		}
.marketing span
		{
			display: inline-block;
			margin: auto;
			width: 90px;
			height: 90px;
			background-image: url('../images/i_restaurant.png');
		}
.creative span
		{
			display: inline-block;
			margin: auto;
			width: 90px;
			height: 90px;
			background-image: url('../images/i_hote.png');
		}

.slTopIcon-1 span
		{
			display: inline-block;
			margin: 0px 105px;
			width: 90px;
			height: 90px;
			background-image: url('../images/i_plot.png');
		}
.strategy-1 span
		{
			display: inline-block;
			margin: auto;
			width: 90px;
			height: 90px;
			background-image: url('../images/i_villa.png');
		}
.marketing-1 span
		{
			display: inline-block;
			margin: auto;
			width: 90px;
			height: 90px;
			background-image: url('../images/i_office.png');
		}
.creative-1 span
		{
			display: inline-block;
			margin: auto;
			width: 90px;
			height: 90px;
			background-image: url('../images/i_showroom.png');
		}

.slTtitle
		{
			float: left;
			width: 100%;
			text-align: center;
		}
.slTtitle h3
		{
			display: inline-block;
			padding: 0px 3% 10px 3%;
			font-weight: normal;
			font-size: 26px;
			text-transform: uppercase;
			border: 2px solid #FFCA00;
			border-top: 0;
			color: #605f61;
			margin-top: 10px;
		}
.sltextList
		{
			float: left;
			width: 66%;
			margin-left: 34%;
			margin-top: 20px;
			font-size: 22px;
			color: #605f61;
		}
.sltextList li
		{
			width: 100%;
			margin-bottom: 10px;
			list-style: disc;
			text-transform: uppercase;
		}
.portfolioMainWrap
		{
			float: left;
			width: 100%;
			margin-top: 30px;
		}
.portfiloiNav
		{
			margin: auto;
			width: 550px;
			margin-bottom: 20px;
		}
.portfiloiNav li
		{
			display: inline-block;
			padding: 0 3% 10px 3%;
			margin-right: 63px;
			margin-top: 10px;
			border: 2px solid #fff;
			color: #fff;
			text-transform: uppercase;
			font-size: 26px;
			border-top: none;
			cursor: pointer;
		}
.portfiloiNav li:last-child
		{
			margin-right: 0;
		}
.portFolioContent
		{
			width: 1200px;
			margin: auto;
		}
.portList
		{
			float: left;
			width: 100%;
		}
.portList li
		{
			float: left;
			margin-right: 0.5%;
			margin-bottom: 5px;
			position: relative;
		}
.portList li:nth-child(3n)
		{
			margin-right: 0;
		}
.portList li a
		{
			float: left;
			width: 100%;
			height: 100%;
		}
.portList li a img
		{
			float: left;
			width: 100%;
		}
.portList li:nth-child(1)
		{
			width: 36.5%;
		}
.portList li:nth-child(2)
		{
			width: 26%;
		}
.portList li:nth-child(3)
		{
			width: 36.5%;
		}
.portList li:nth-child(4)
		{
			width: 29%;
		}
.portList li:nth-child(5)
		{
			width: 40.5%;
		}
.portList li:nth-child(6)
		{
			width: 29%;
		}
.portList li:nth-child(2) .portListHover h3, .portList li:nth-child(4) .portListHover h3, 
.portList li:nth-child(5) .portListHover h3, .portList li:nth-child(6) .portListHover h3
		{
			margin-top: 80px;
		}
.portListHover
		{
			float: left;
			width: 90%;
			padding: 5%;
			height:90%;
			background-color: rgba(255, 202, 0, 0.7);
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
.portList li:hover .portListHover
		{
			display: block;
		}
.portListHover h3
		{
			width: 100%;
			font-size: 26px;
			color: #605f61;
			text-align: center;
			font-weight: bold;
			font-style: italic;
			mix-blend-mode: multiply;
			border-bottom: 2px solid #605f61;
			padding-bottom: 10px;
			margin-top: 50px;
		}
.portListHover p
		{
			float: left;
			width: 100%;
			text-align: center;
			font-size: 18px;
			padding-top: 10px;
			color: #605f61;
			font-weight: bold;
			mix-blend-mode: multiply;
		}
.clientMainWrap
		{
			margin: auto;
			width: 1200px;
		}
.clientListWrap
		{
			float: left;
			width: 100%;
			margin-top: 40px;
			text-align: center;
		}
.clientListWrap li
		{
			display: inline-block;
			width: 130px;
			height: 130px;
			margin-right: 10%;
			margin-bottom: 50px;
			border: 3px solid #FFCA00;
		}
.clientListWrap li:last-child
		{
			margin-right: 0;
		}
.clientListWrap li img
		{
			float: left;
			width: 100px;
			height: 100px;
			margin: 15px;
		}
.clientListWrap li:nth-child(5n)
		{
			margin-right: 0;
		}
.hyatt
		{
			/*margin-left: 22%;*/
		}
.contactMain
		{
			margin: auto;
			width: 1200px;
		}
.contactLeftWrap
		{
			float: left;
			width: 60%;
			margin-top: 50px;
		}
.formHalf
		{
			float: left;
			width: 49%;
		}
.formHalf input[type='text']
		{
			width: 96% !important;
			padding: 10px 2% !important;
		}
.contactLeftWrap form
		{
			float: left;
			width: 100%;
		}
.contactLeftWrap form input[type="text"]
		{
			float: left;
			width: 98%;
			padding: 10px 1%;
			border: none;
			font-size: 16px;
			margin-bottom: 20px;
		}
.contactLeftWrap form textarea
		{
			float: left;
			width: 98%;
			padding: 10px 1%;
			border: none;
			font-size: 16px;
			margin-bottom: 20px;
			font-family: 'Century Gothic', sans-serif;
			min-height: 300px;
			max-width: 98%;
		}
#submit
		{
			float: left;
			padding: 10px 20px;
			font-size: 16px;
			background-color: #FFCA00;
			color: #605f61;
			border: none;
			margin-left: 40px;
			cursor: pointer;
		}
.contactRightWrap
		{
			float: left;
			width: 250px;
			margin: 80px 0 0 10%;
		}
.contactRightWrap h4
		{
			float: left;
			width: 100%;
			font-size: 20px;
			color: #605f61;
			font-weight: bold;
		}
.contactRightWrap p
		{
			float: left;
			width: 100%;
			font-size: 20px;
			color: #fff;
			margin-bottom: 20px;
			font-weight: bold;
		}
/*footer start*/
footer
		{
			float: left;
			width: 100%;
		}
.footerMain
		{
			float: left;
			width: 98%;
			padding: 20px 1%;
		}
.footerLeftNav
		{
			float: left;
			width: 200px;
		}
.footerLeftNav li
		{
			float: left;
			width: 100%;
			margin-bottom: 10px;
		}
.footerLeftNav li a
		{
			color: #605f61;
			float: left;
			text-decoration: none;
			font-weight: bold;
		}
.footerRightNav
		{
			float: right;
			width: 200px;
		}
.footerRightNav li
		{
			float: right;
			width: 100%;
			margin-bottom: 10px;
		}
.footerRightNav li a
		{
			color: #605f61;
			float: right;
			text-align: right;
			text-decoration: none;
			font-weight: bold;
		}
.footerMidWrap
		{
			margin: auto;
			width: 120px;
		}
.footerBrushWrap
		{
			float: left;
			width:24px;
			height:0px;
			background-color: #FFCA00; 
			position: relative;
			margin-top: -20px;
			margin-left: 60px;
			mix-blend-mode: multiply;
		}
.footerLogoWrap
		{
			float: left;
			width: 120px;
			height: 58px;
			background-image: url("../images/logo-vvs.png");
			position: absolute;
			bottom: -54px;
			left: -64px;
		}
.footerLogoWrap a
		{
			float: left;
			width: 100%;
			height: 100%;
		}
.scrollNavMain
		{
			float: left;
			width: 96%;
			padding: 20px 2%;
			background-color: rgba(255, 202, 0,0.8); 
			display: none;
		}
.scrollNav
		{
			float: right;
		}
.scrollNav li
		{
			float: left;
		}
.scrollNav li a
		{
			float: left;
			padding: 5px 20px;
			color: #605f61;
			font-size: 20px;
			line-height: 100%;
			font-weight: bold;
			text-decoration: none;
		}
.navScrollFix
		{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999;
		}
.brushMainWrap
		{
			float: left;
			width: 100%;
			padding: 20px 0;
			height: 64px;
			overflow: hidden;
		}
.goUp
		{
			float: left;
			display: none;
			width: 50px;
			height: 56px;
			background-image: url('../images/up.jpg');
			position: fixed;
			bottom: 0px;
			right: 5%;
		}
.seemorePortfolio
		{
			width: 100%;
			float: left;
			text-align: center;
			margin-top: 10px;
		}
.seemorePortfolio a
		{
			display: inline-block;
			color: #000;
			text-decoration: none;
			text-transform: uppercase;
			background-color: #fff;
			padding: 10px 20px;
		}