@font-face {
  font-family: 'AlegreyaSans-Regular';
  src: url('fonts/AlegreyaSans-Regular.eot?#iefix') format('embedded-opentype'),  url('fonts/AlegreyaSans-Regular.otf')  format('opentype'),
	     url('fonts/AlegreyaSans-Regular.woff') format('woff'), url('fonts/AlegreyaSans-Regular.ttf')  format('truetype'), url('fonts/AlegreyaSans-Regular.svg#AlegreyaSans-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AlegreyaSans-Medium';
  src: url('fonts/AlegreyaSans-Medium.eot?#iefix') format('embedded-opentype'),  url('fonts/AlegreyaSans-Medium.otf')  format('opentype'),
	     url('fonts/AlegreyaSans-Medium.woff') format('woff'), url('fonts/AlegreyaSans-Medium.ttf')  format('truetype'), url('fonts/AlegreyaSans-Medium.svg#AlegreyaSans-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AlegreyaSans-Bold';
  src: url('fonts/AlegreyaSans-Bold.eot?#iefix') format('embedded-opentype'),  url('fonts/AlegreyaSans-Bold.otf')  format('opentype'),
	     url('fonts/AlegreyaSans-Bold.woff') format('woff'), url('fonts/AlegreyaSans-Bold.ttf')  format('truetype'), url('fonts/AlegreyaSans-Bold.svg#AlegreyaSans-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AlegreyaSans-ExtraBold';
  src: url('fonts/AlegreyaSans-ExtraBold.eot?#iefix') format('embedded-opentype'),  url('fonts/AlegreyaSans-ExtraBold.otf')  format('opentype'),
	     url('fonts/AlegreyaSans-ExtraBold.woff') format('woff'), url('fonts/AlegreyaSans-ExtraBold.ttf')  format('truetype'), url('fonts/AlegreyaSans-ExtraBold.svg#AlegreyaSans-ExtraBold') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
	font-family: 'AlegreyaSans-Regular';
	color:#414042;
}

a {
	text-decoration: none;
	color:#414042;
}

/*a,div,img {
	transition: color 0.5s, background-color 0.5s, border-color 0.5s, opacity 0.5s;
	-webkit-transition: color 0.5s, background-color 0.5s, border-color 0.5s, opacity 0.5;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}*/

img {
	transition: color 0.5s, background-color 0.5s, border-color 0.5s, opacity 0.5s;
	-webkit-transition: color 0.5s, background-color 0.5s, border-color 0.5s, opacity 0.5;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

a.white-btn {
	padding:13px 50px 13px 13px;
	background:url(../img/btn-arrow.png) top right #fff no-repeat;
	background-size:auto 200%;
	color:#3C84C5;
	font-family: 'AlegreyaSans-ExtraBold';
	font-size:20px;
	line-height:20px;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    float:left;
    margin-top:30px;
}

a.white-btn:hover {
	background-position:bottom right;
	background-color:#3C84C5;
	color:#fff;
}

p,
li {
	font-size:18px;
	line-height:26px;
	color:#414042;
}

p a:hover {
	color:#3C84C5;
}

ul li {
	list-style-type: disc;
	margin-left: 18px;
}

ol {
   list-style: none;
}

ol li {
   counter-increment: item;
   margin-bottom: 3px;
   line-height:20px;
   position:relative;
   padding:3px 0 0 35px;
   min-height:25px;
}

ol li:before {
   margin-right: 10px;
   content: counter(item);
   background: #181D21;
   border-radius: 100%;
   color: #fff;
   width: 25px;
   height:25px;
   text-align: center;
   display: inline-block;
   line-height:24px;
   position:absolute;
   left:0;
   top:0;
}

.text-bold {
	font-family: 'AlegreyaSans-Bold';
	color:#181D21;
}

.float-left {
	float:left;
}

.float-right {
	float:right;
}

.row {
	padding:90px 0;
	width:100%;
	float:left;
}

.row .p-right {
	margin-bottom:25px;
}

.row .p-right:last-of-type {
	margin-bottom:0;
}


h2 {
	color:#181D21;
	font-size:45px;
	line-height:52px;
	font-family: 'AlegreyaSans-ExtraBold';
	margin-bottom:25px;
}

h2.h2-left {
	float:left;
	width:45%;
}

.p-right {
	float:right;
	width:50%;
	clear:right;
}

header {
	width:100%;
	height:100px;
	position:fixed;
	z-index:1000;
	background:#fff;
	border-top:5px solid #0065A4;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
}

#header-content {
	width:94%;
	max-width:1200px;
	margin:0 auto 0;
	overflow:visible;
	position:relative;
	z-index:1;
}

/*a#logo {
	width:175px;
	height:76px;
	float:left;
	background:url(../img/vision-painting-logo.png) center center no-repeat;
	background-size:100% auto;
	margin-top:12px;
}*/

a#logo {
	width:175px;
	height:60px;
	float:left;
	background:url(../img/vision-painting-logo-2.png) center center no-repeat;
	background-size:100% auto;
	margin-top:19px;
}

#social-links {
	height:26px;
	width:auto;
	float:right;
	margin-top:34px;
	margin-left:30px;
}

#social-links a {
	float:right;
	width:30px;
	height:30px;
	background-size:100% auto;
	background-position: center bottom;
	margin-left:5px;
}

#social-links a:hover {
	background-position: center top;
}

#social-links #facebook {
	background-image:url(../img/icons/facebook-icon.png);
}

#social-links #twitter {
	background-image:url(../img/icons/twitter-icon.png);
}

a#menu-btn {
	width:29px;
	height:20px;
	z-index:1001;
	position:absolute;
	right:3%;
	top:18px;
	display:none;
}

a#menu-btn:hover .burger-line {
	background:#3C84C5;
}

.burger-line {
	height:4px;
	background:#414042;
	position:absolute;
	right:0;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	width:100%;
}

#burger-2 {
	top:50%;
	margin-top:-2px;
}

#burger-3 {
	bottom:0;
}

nav {
	float:right;
	height:auto;
	margin-top:39px;
}

nav>ul{
	display:inline-block;
	position:relative;
	width:auto;
	margin-left:15px;
	font-family: 'AlegreyaSans-Medium';
}

nav>ul>li>a{
	color:#414042;
	padding:10px 0 15px;
	font-size:20px;
	line-height:20px;
	/*text-transform: uppercase;*/
}

nav>ul:hover>li>a {
	color:#0065A4;
}

/*nav ul.drop-down>li>a {
	cursor: default;
}*/

nav ul ul {
	display:none;
	position:absolute;
	top:34px;
	margin-left:-10px;
	width:160px;
}

nav ul ul li a{
	color:#212322;
	width:100%;
	background:#DEDEDE;
	display:block;
	border-bottom:1px solid #ccc;
	padding:10px;
	/*text-transform: uppercase;*/
}

nav ul ul li:last-of-type a{
	border-bottom:none;
}

nav ul ul li {
	font-size:17px;
}

nav ul ul li a:hover{
	background:#0065A4;
	color:#fff;
}

nav ul li {
	list-style-type: none;
	font-size:18px;
	line-height:16px;
}

#main-wrapper {
	margin-top:100px;
	float:left;
	width:100%;
	height:auto;
	overflow:hidden;
}

.top-banner {
	width:100%;
	height:auto;
	overflow:hidden;
	float:left;
	background-size:cover;
	background-position: center center;
	background-color:#181D21;
}

.top-banner .content-wrapper {
	margin:170px auto;
}

#homepage-banner {
	background-image:url(../img/home-banner.jpg);
}

#multi-family-banner {
	background-image:url(../img/multi-family-banner.jpg);
	background-position: left top;
}

#residential-banner {
	background-image:url(../img/residential-banner.jpg);
}

#contact-banner {
	background-image:url(../img/contact-banner.jpg);
}

#commercial-banner {
	background-image:url(../img/commercial-banner.jpg);
	background-position: right center;
}

#services-banner {
	background-image:url(../img/services-banner.jpg);
	background-position: center bottom;
}

#homepage-banner .content-wrapper {
	margin:200px auto;
}

#gallery-banner .content-wrapper {
	margin:100px auto;
}

h1 {
	font-family: 'AlegreyaSans-ExtraBold';
	font-size:58px;
	color:#fff;
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

h1 .header-sm {
	font-family: 'AlegreyaSans-Regular';
	font-size:33px;
	display:block;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

h1.h1-centered {
	text-align:center;
}

.content-wrapper {
	width:94%;
	margin:0 auto;
	max-width:1200px;
	height:auto;
	overflow:hidden;
}

footer {
	padding-top:60px;
	width:100%;
	float:left;
}

footer img{
	width:151px;
	margin-left:40px;

}

#footer-social a {
	width:13px; 
	height:13px;
	margin-left:15px;
	float:left;
	background-size:100% auto;
}

#footer-social a#footer-facebook {
	background-image:url(../img/icons/footer-facebook.png);
}

#footer-social a#footer-twitter {
	background-image:url(../img/icons/footer-twitter.png);
}

#copyright {
	width:100%;
	background:#3C84C5;
	float:left;
	margin-top:60px;
	color:#fff;
	padding:10px 0;
}

#copyright p {
	font-size:14px;
	line-height:18px;
	color:#fff;
}

#services-links,
#gallery-preview {
	background:#000;
}

#services-links a{
	width:33.33%;
	float:left;
	height:auto;
	float:left;
	position:relative;
	overflow:hidden;
}

#services-links a:hover img,
#gallery-preview a:hover img,
#gallery-grid a:hover img{
	opacity:.35;
}

#services-links a img,
#gallery-preview a img,
#gallery-grid a img{
 	width:102%;
 	display:block;
 	float:left;
 	-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    backface-visibility: hidden;
}

#services-links h3 {
	position: absolute;
	bottom:15px;
	left:15px;
	color:#fff;
	font-size:23px;
	text-transform:uppercase;
	font-family: 'AlegreyaSans-Medium';
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

.service-arrow {
	width:65px;
	height:65px;
	background:url(../img/services-arrow.png) center top no-repeat;
	background-size: 100% auto;
	position:absolute;
	right:15px;
	bottom:15px;
}

#gallery-preview a{
	width:20%;
	height:auto;
	float:left;
	overflow:hidden;
	background:url(../img/gallery-thumb-ground.jpg);
	background-size:cover;
}

#gallery-filters {
	width:100%;
	text-align:center;
	margin-top:20px;
	margin-bottom:11px;
}

#gallery-filters a {
	border:2px solid #fff;
	text-transform:uppercase;
	display:inline-block;
	padding:9px 15px;
	color:#fff;
	font-size:16px;
	line-height:16px;
	font-family: 'AlegreyaSans-Bold';
	margin:0 3px;
	position:relative;
	overflow:visible;
}

#gallery-filters a,
#gallery-cover a {
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#gallery-filters a.active,
#gallery-filters a:hover {
	background-color:#3C84C5;
	border-color:#3C84C5;
}

.active-arrow {
	width:18px;
	height:9px;
	background:url(../img/arrow-down.png) center center no-repeat;
	background-size: 100% auto;
	position:absolute;
	left:50%;
	margin-left:-8px;
	bottom:0;
	display:none;
}

#gallery-filters a.active .active-arrow {
	bottom:-11px;
	display:block;
}

#gallery-grid {
	width:100%;
	padding:0;
	background:#141516;
}

#gallery-grid a {
	width:20%;
	float:left;
	overflow:hidden;
	background:url(../img/gallery-thumb-ground.jpg);
	background-size:cover;
}

#gallery-grid a p.caption {
	display:none;
}

#gallery-cover {
	width:100%;
	height:100%;
	background:rgba(24,29,33,.97);
	position:fixed;
	z-index:1001;
	/*display:none;*/
	text-align:center;
}

a#gallery-close,
a#gallery-next,
a#gallery-prev {
	position:absolute;
	width:30px;
	height:30px;
	/*border:2px solid #fff;*/
	z-index:1000;
	display:none;
}

a#gallery-close {
	right:20px;
	top:20px;
	background:url(../img/icons/gallery-close.png) center center no-repeat;
	background-size:auto 75%;
}

a#gallery-next,
a#gallery-prev {
	top:50%;
	margin-top:-35px;
}

a#gallery-prev {
	left:50px;
	background:url(../img/icons/left-arrow.png) center center no-repeat;
	background-size:auto 80%;
}

a#gallery-next {
	right:50px;
	background:url(../img/icons/right-arrow.png) center center no-repeat;
	background-size:auto 80%;
}

a#gallery-next:hover,
a#gallery-prev:hover,
a#gallery-close:hover {
	/*background-color:#3C84C5;
	border-color:#3C84C5;*/
	opacity:.5;
}

#gallery-image-wrapper {
	width:80%;
	height:75%;
	position:absolute;
	left:10%;
	top:9%;
	white-space: nowrap;
	text-align: center;
	
}

#loader {
	width:50px;
	height:50px;
	background:#fff;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-25px;
	margin-top:-25px;
	-webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    z-index:0;
    text-align:center;
}

#loader img {
	margin-top:8px;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img#gallery-image {
	vertical-align: middle;
    max-height: 100%;
    max-width: 100%;
    z-index:1;
    position:relative;
}

#gallery-bottom-info {
	width:100%;
	height:auto;
	background:rgba(0,0,0,.5);
	position:fixed;
	bottom:0;
}

p#image-caption {
	color:#fff;
	text-align:center;
	padding:15px 0;
	display:none;
	/*margin:16px 0 0 35px;*/
}

.col-2 {
	float:left;
	width:48%;
	margin-right:4%;
}

.col-2:nth-child(2n+2) {
	margin-right:0;
}

.col-2 img {
	max-width:100%;
}

#contact-info {
	margin:25px 0;
}

#contact-info a {
	padding-left:45px;
	height:35px;
	line-height:33px;
	font-size:20px;
	float:left;
	clear:both;
	margin-bottom:8px;
	background-position:bottom left;
	background-repeat: no-repeat;
	background-size:auto 200%;
	font-family: 'AlegreyaSans-Bold';
}

#contact-info a:hover {
	background-position:top left;
	color:#0065A4;
}

a#contact-phone{
	background-image:url(../img/phone-icon.png);
}

a#contact-email{
	background-image:url(../img/email-icon.png);
}

@media only screen and (max-width: 1200px) {
	#homepage-banner .content-wrapper {
		margin:150px auto;
	}

	.top-banner .content-wrapper {
		margin:130px auto;
	}

	#gallery-grid a {
		width:25%;
	}

	#services-links h3 {
		font-size:20px;
	}

	.service-arrow {
		width:50px;
		height:50px;
	}

	footer img {
		width:130px;
		margin-left:25px;
	}
}

@media only screen and (max-width: 700px) {
	footer .float-right {
		float:left;
		clear:both;
		margin-top:50px;
	}

	#copyright .float-right {
		float:right;
		clear:none;
		margin:0;
	}

	footer img {
		margin-left:0;
		margin-right:25px;
	}

	#services-links h3 {
		font-size:18px;
	}

	.service-arrow {
		width:35px;
		height:35px;
	}

	h2.h2-left {
		width:100%;
	}

	.p-right {
		width:100%;
		float:left;
	}

	a#gallery-next, a#gallery-prev, a#gallery-close {
		border-width:1px;
		width:25px; 
		height:25px;
	}

	a#gallery-close {
		right:10px;
		top:10px;
	}

	a#gallery-prev {
		left:10px;
	}

	a#gallery-next {
		right:10px;
	}

	p#image-caption {
		font-size:14px;
		padding:10px 0;
	}

	/*#gallery-bottom-info {
		height:40px;
	}

	p#image-caption {

	}*/

	#gallery-grid a {
		width:33.33%;
	}

	h1 {
		font-size:48px;
	}

	h1 .header-sm {
		font-size:28px;
	}

	h2 {
		font-size:40px;
		line-height:47px;
	}

	p,
	li {
		font-size:17px;
		line-height:25px;
		color:#414042;
	}

	footer {
		padding-top:50px;
	}

	#copyright {
		margin-top:50px;
	}

	.row {
	    padding: 80px 0;
	}

	a.white-btn {
		font-size:16px;
		margin-top:20px;
		padding:10px 45px 10px 10px;
	}

	#homepage-banner .content-wrapper {
		margin:120px auto;
	}

	.top-banner .content-wrapper {
		margin:100px auto;
	}

	header {
		height:60px;
	}

	#main-wrapper {
		margin-top:60px;
	}

	#social-links {
		display:none;
	}

	#header-content {
		margin-top:0 !important;
		width:100%;
	}

	nav {
		display:none;
		margin-top:0 !important;
		width:100%;
	}

	nav ul li {
		margin-left:0;
	}

	nav>ul {
		width:100%;
		margin:0;
		text-align:center;
		display:block;
	}

	nav>ul>li>a {
		padding:5px 0;
		background:#222;
		width:100%;
		float:left;
		margin:0;
		border-bottom:1px solid #333;
		font-size:16px;
		color:#fff;
	}

	nav>ul>li>a:hover,
	nav ul ul li a:hover {
		background:#3C84C5;
		border-color:#3C84C5;
		color:#fff;
	}

	nav ul.drop-down:hover>li>a {
		color:#fff;
	}

	nav ul ul {
		position:relative;
		top:auto;
		width:100%;
		float:left;
		display:block !important;
		margin:0;
	}

	nav ul ul li a {
		padding:10px 0;
	}
	
	a#menu-btn {
		display:block;
	}

	a#logo {
		width:100px;
		height:45px;
		margin:8px 0 7px 3%;
	}
}

@media only screen and (max-width: 600px) {
	footer .float-right {
		margin-top:40px;
	}

	footer img {
		width:27%;
		margin-right:5%;
	}

	#services-links a {
		width:100%;
	}

	#gallery-preview a {
		width:50%;
	}

	#gallery-preview a:nth-child(5n+5) {
		display:none;
	}

	#gallery-grid a {
		width:50%;
	}

	#gallery-filters a {
		font-size:12px;
		border-width:1px;
		margin:0 1px;
		padding:9px 9px;
	}

	#gallery-filters a.active .active-arrow {
		bottom:-10px;
	}

	#gallery-banner .content-wrapper {
		margin:80px auto;
	}

	.col-2 {
		width:100%;
		margin-right:0;
		margin-bottom:25px;
	}
}

@media only screen and (max-width: 500px) {




	footer .float-right {
		margin-top:30px;
	}

	.row {
	    padding: 60px 0;
	}

	footer {
		padding-top:40px;
	}

	#copyright {
		margin-top:40px;
	}


	h1 {
		font-size:38px;
	}

	h1 .header-sm {
		font-size:23px;
	}

	h2 {
		font-size:35px;
		line-height:42px;
	}

	p,
	li {
		font-size:16px;
		line-height:24px;
		color:#414042;
	}

	a.white-btn {
		font-size:14px;
		margin-top:10px;
		padding:10px 40px 10px 10px;
	}

	#homepage-banner .content-wrapper {
		margin:90px auto;
	}

	.top-banner .content-wrapper {
		margin:70px auto;
	}
}	

@media only screen and (max-width: 430px) {
	.row {
	    padding: 50px 0;
	}

	footer {
		padding-top:30px;
	}

	footer .float-right {
		margin-top:20px;
	}

	#copyright {
		margin-top:30px;
	}

	#gallery-filters a {
		font-size:10px;
		font-family: 'AlegreyaSans-Regular';
		text-transform: none;
		margin:0;
	}

	#gallery-banner .content-wrapper {
		margin:60px auto;
	}

	h1 {
		font-size:30px;
	}

	h1 .header-sm {
		font-size:18px;
	}

	h2 {
		font-size:25px;
		line-height:32px;
	}

	p,
	li {
		font-size:14px;
		line-height:22px;
	}

	a.white-btn {
		font-size:14px;
		margin-top:10px;
		padding:10px 40px 10px 10px;
	}
}