/* Web Design page stylesheet */

#main {
	width:100%;
	height:auto;
	background:#f2f2f2;
	padding:0px 10px 50px 10px;
	overflow:hidden;
}

#main a {
	text-decoration: none;
}

.web-design-products {
	width:auto;
	padding-left:auto;
	padding-right:auto;
	text-align:center;
}

.web-design-products h2, .digital-design-products h1 {
	font-size:35px;
	color:#8e8e8e;
	text-transform:uppercase;
	font-weight:100;
	margin-bottom:30px;
	padding-top: 35px;
}

.single-website-frame {
	display:inline-block;
	width:424px;
	height:auto;
	padding:10px;
	background:#e3e3e3;
	border:solid 1px #b2b2b2;
	margin: 0 25px 25px 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;	
}

.single-website-frame:hover {
	border:solid 1px #006CFF;
	background-color: #E0F0FF;
	cursor: pointer !important;
}

.product-thumb { border:solid 1px #b2b2b2; }

.title-and-link-container {
	height:35px;
	width:auto;
	margin-top:10px;
	text-align:left;
}

.single-website-frame .title-and-link-container {
	margin-top: 18px;
}

.single-website-frame h2 {
	width:250px;
	height:40px;
	font-size:14px;
	color:#002742;
	line-height:1.3em;
	margin-bottom:10px;
	float: left;
}

.single-website-frame h2 span {
	text-transform: uppercase;
}


.single-website-frame h3 {
	font-size: 14px;
	line-height: 18px;
}

.single-website-frame h3 span {
	text-transform: uppercase;
}

.link-to-product {
	float:right;
	width:135px;
	height:40px;
}

.link-to-product p, .link-to-product img { float:left; }

.link-to-product p {
	width:100px;
	text-transform:uppercase;
	font-size:14px;
	color:#006aba;
	padding-top:8px;
}

.link-to-product img {
	width:32px;
	height:30px;
}


#service-description {
	text-align:center;
	font-size:25px;
	font-weight:300;
	color:#4079b6;
	margin:50px 0;
}

#service-description h3 {
	border-bottom:dashed 1px #cecece;
	margin:10px auto 0 auto;
	padding-bottom:10px;
}

#service-description h3:nth-child(1) { width:320px; }
#service-description h3:nth-child(2) { width:500px; }
#service-description h3:nth-child(3) { width:850px; }
#service-description h3:nth-child(4) { border-bottom:none; }

/* New section for smaller web projects - start */

.title-and-link-container-small h3 {
	margin-bottom:10px;
}

/* New section for smaller web projects - end */

@media only screen 
and (max-width : 860px) {
	#service-description h3 { width:100% !important; }
}

@media only screen 
and (max-width : 560px) {
	.web-design-products h1 {
		font-size:35px;
		font-weight:300;
	}
}



@media only screen 
and (min-width : 300px)
and (max-width : 450px) {
	
	.single-website-frame { width:99%; }

	.product-thumb { width:99%; }
	
	.title-and-link-container h3 { width:auto; }
	
	.link-to-product { width:100px; }
	
	.link-to-product img { display:none; }
	
	.link-to-product p { padding-top:0px; }

}

/* SMALL WEB PROJECTS - START */

.digital-design-products {
	width:auto;
	padding-left:auto;
	padding-right:auto;
	text-align:center;
}

.single-website-frame-small {
	display:inline-block;
	width:240px;
	height:285px;
	padding:10px;
	background:#e3e3e3;
	border:solid 1px #b2b2b2;
	margin: 0 50px 50px 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.single-website-frame-small:hover {
	border:solid 1px #006CFF;
	background-color: #E0F0FF;
}

.single-website-frame-small img { border:solid 1px #b2b2b2; }


.single-website-frame-small h3 {
	width:250px;
	height:40px;
	font-size:14px;
	color:#002742;
	line-height:1.3em;
	margin-bottom:10px;
}

.single-website-frame-small h3 span {
	text-transform: uppercase;
}

.link-to-product-small {
	width:100%;
	height:40px;
}

.link-to-product-small p {
	float:left;
	width:100%;
	font-size:12px;
	color:#006aba;
	padding-top:10px;
	text-align:center;
}

.link-to-product-small img {
	float:left;
	width:21px;
	height:17px;
	text-align:left;
}

/* SMALL WEB PROJECTS - END */