/* Section: Work */

.work .top-bg{height:440px; position:absolute;  background:#b0d135 url(img/prisms/bg-prism-workindiv.png) center no-repeat; background-size:cover; }

.work .blurb{ background: url(img/prisms/bg-prism-blue.jpg) center no-repeat; position:relative; background-size:cover!important; height:auto; padding-bottom:180px; z-index:1;}

.portfolio-item a{position:relative; float:left; margin-bottom:50px;}
.portfolio-item p{position:absolute; bottom:-1px; background-color:rgba(52,50,51,0.7); color:white; font-size:20px; width:100%; margin-bottom:0; padding:10px 20px;}
.portfolio-item p span{opacity:0; margin-right:10px;}
.portfolio-item a:hover p span{opacity:1; margin-right:0; margin-left:10px;}

.work .top-bg .cut-off{background:url(img/cutouts/bg-work-top.png) bottom left no-repeat; height:100px; bottom:0; background-size:100% auto;}

.work .bump{top:-180px; margin-bottom:-100px;}
.services .bump{top:-155px;}
.work .masthead{top:200px;z-index:10; position:relative;}

.bar.navy{
margin-top:200px;
color:white;
padding:50px 0;
background-color: #274257;
-moz-box-shadow: inset 0 0 20px rgba(0,0,0,.8);
-webkit-box-shadow: inset 0 0 20px rgba(0,0,0,.8);
box-shadow: inset 0 0 20px rgba(0,0,0,.8);
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzEzMiIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzMzMxMzIiIHN0b3Atb3BhY2l0eT0iMC4yNSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMzMxMzIiIHN0b3Atb3BhY2l0eT0iMCIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
background-image: -moz-linear-gradient(bottom, rgba(52,50,51,.13) 0%, rgba(52,50,51,.25) 0%, rgba(52,50,51,0) 100%);
background-image: -o-linear-gradient(bottom, rgba(52,50,51,.13) 0%, rgba(52,50,51,.25) 0%, rgba(52,50,51,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgba(52,50,51,.13) 0%, rgba(52,50,51,.25) 0%, rgba(52,50,51,0) 100%);
background-image: linear-gradient(bottom, rgba(52,50,51,.13) 0%, rgba(52,50,51,.25) 0%, rgba(52,50,51,0) 100%);
}

.bar.navy h2, .bar.navy h3{color:#b0d135;}

.brief-row{padding:55px 0; border-bottom:1px solid #b0d135;}
.brief-row:last-child{border-bottom:0;}
.brief-row img{margin-bottom:15px;}
.brief-row .half{max-width:48%; }
.brief-row .half:first-child{margin-right:4%;}

.project-slider{border-top:1px solid #b0d135; padding-top:55px;}
.project-slider .rsSlide{	background-color:white;}

.interior-slider.rsDefault .rsThumbsHor{height:70px; margin:20px 0 30px;}
.interior-slider.rsDefault .rsThumb{width:70px; height:70px; border-radius:70px;}
.interior-slider.rsDefault .rsThumb img{height:100%!important; -webkit-backface-visibility: visible;}
.interior-slider.rsDefault figcaption{position: absolute; bottom: 0; width:100%; background-color: rgba(52, 50, 51, 0.7); color:white; padding:10px 20px; font-size:14px; line-height:normal;}

/* Services */

.services .top-bg{padding-bottom:150px;}

.services-list{list-style:none; margin-top:50px; margin-bottom:50px; padding:0;}
.services-list a{display:block; min-height:150px; color:white; background-color:gray; padding:12px; background-image:url(img/service-overlay.png); background-size:auto 100%;}
.services-list a:hover{background-image:none;}

.service-item{background-size:100% auto; background-position:top center; color:white; min-height:300px; margin-bottom:40px; padding-top:40px; padding-bottom:20px;}
.service-item a{color:white;}
.service-item figcaption{padding:0 30px 0 15px;}


/*.services-list.sticky{position:fixed; background-color:white; left:0; top:0; width:100%; z-index:1; margin:0;}
.services-list.sticky a{min-height:100px;}*/

.sub-service{border-bottom:1px solid rgba(255,255,255,0.3); padding-bottom:15px; font-size:14px; line-height:22px;}
.sub-service h3{font-size:24px;}
.left-col .sub-service:last-child, .right-col .sub-service:last-child{border-bottom:0;}

.service-color{ background-size:100% auto!important; background-repeat:no-repeat!important; background-position:top center; color:white; padding:50px 0; margin-top:50px;box-shadow: inset 0 300px 400px rgba(0, 0, 0, 0.3);}
.service-color h3{margin-top:20px;}
.custom-software-development .service-color{background:url(img/prisms/bg-prism-red.jpg);}
.mobile-design-and-development .service-color{background:url(img/prisms/bg-prism-emerald.jpg);}
.web-design-and-development .service-color{background:url(img/prisms/bg-prism-blue.jpg);}
.branding .service-color{background:url(img/prisms/bg-prism-navy.jpg);}
.internet-presence-management .service-color{background:url(img/prisms/bg-prism-purple.jpg);}
.our-process .service-color{background:url(img/prisms/bg-prism-grey.jpg);}

.service-photo{position:absolute; top:-150px;}

/* Process */

.process-belt{bottom:-80px;}
.process-belt .belt{background:url(img/process/process-belt.png) no-repeat; background-size:100% auto; height:270px; width:100%; position:relative; padding:0 5%;}
.process-belt .wheelie{background:url(img/process/gears.png) center repeat-x; background-size:auto 100%; height:36px; width:90%; position:absolute; bottom:32px;}
.process-belt .belt.animating .wheelie{background:url(img/process/gears.gif) center repeat-x; background-size:auto 100%;}
.process-belt .slide{}
.process-belt .discovery .bottom {background:url(img/process/process-discovery.jpg) bottom center no-repeat;}
.process-belt .discovery .bottom .open{background-color:#074c79;}
.process-belt .development .bottom{background:url(img/process/process-development.jpg) bottom center no-repeat;}
.process-belt .development .bottom .open{background-color:#384c5f;}
.process-belt .design .bottom{background:url(img/process/process-design.jpg) bottom center no-repeat;}
.process-belt .design .bottom .open{background-color:#503666;}
.process-belt .support .bottom{background:url(img/process/process-support.jpg) bottom center no-repeat;}
.process-belt .support .bottom .open{background-color:#b82b26;}
.process-belt .planning .bottom{background:url(img/process/process-planning.jpg) bottom center no-repeat;}
.process-belt .planning .bottom .open{background-color:#8d8f8e;}
.process-belt .rsABlock{width:100%; text-align:center; font-size:30px; margin-top:15px;}
.process-belt .slide .bottom{bottom:0; position:absolute; font-size:14px; line-height:16px; width:100%; padding-left:95px;}
.process-belt .slide.active-process .bottom{background-position:190px bottom;}
.process-belt .open{ height:99px; width:0; padding:15px 0; margin:0 auto; overflow:hidden; color:white; -webkit-transition: width 0.3s ease; -moz-transition: width 0.3s ease; -o-transition: width 0.3s ease; transition: width 0.3s ease;}
.process-belt .open p{width:200px; opacity:0; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease;padding:0 15px;}
.process-belt .open p span{font-size:12px; padding-right:5px;}
.process-belt .active-process .bottom .open{width:200px;}
.process-belt .active-process .bottom .open p{opacity:1;}









/* Products */

.products .content{font-size:14px; line-height:22px; margin-top:30px;}
.products .content h2{color:#047caf; margin-top:20px;}
.product-item{padding-bottom:50px; border-bottom:1px solid #b0d135; margin-bottom:50px;}
.product-item:last-child{border-bottom:0;}

/*.work .blog-container {margin-top:-79px;}*/


/* Project Planner */

#project-planner .top-bg .row > * {width:75%;}
#project-planner .content form label{margin-top:30px;}
#project-planner .content form {}
#project-planner .content form input[type=text],
#project-planner .content form input[type=email],
#project-planner .content form input[type=tel],
#project-planner .content form textarea {width:100%;}
#project-planner .content form textarea {height:100px;}
#project-planner .content form h3 {margin:0; margin-bottom:5px;}
#project-planner .content form .user-info > div {margin-bottom:10px;}
#project-planner .content form .type span {display:block; float:left; width:20%; margin-top:10px;}
#project-planner .content form .type input {margin-right:10px;}


/* Large desktop - lg */
@media screen and (min-width: 1200px) {

}

/* Medium Desktop - md */
@media screen and (max-width: 1200px) {

		.royalSlider {height:565px;}

.work .blog-container, .our-team .blog-container{margin-top:-50px;}



	.service-item{background-size:auto 100%;}
	.service-item h2{font-size:32px;}
	.services .content.main{font-size:14px; line-height:22px;}

	.process-belt{bottom: -95px;}
	.process-belt .slide.active-process .bottom{background-position: 164px bottom;}
	.process-belt .wheelie{bottom: 48px; height:34px;}

	.products .content{margin-top:30px;}


}


/* Small Desktop to Landscape tablet - sm */
@media screen and (max-width: 992px) {

	.royalSlider {height:450px;}


	.service-item{background-size:auto 100%; font-size:16px; margin:20px auto;}

	.service-item h2{font-size:24px;}
	.work .blurb{padding-bottom:80px;}

	.play .blurb .cut-off{background:url(img/bg-interior-cutout-top.png) bottom no-repeat!important; background-size:100% auto!important;}

	.portfolio .content {font-size: 14px;line-height: 22px;}

	.work .bump{top:0; margin-bottom:0;}

	.service-photo{position:static; margin-top:50px; text-align:center;}

	.services .content.main{margin-top:30px;}

	.process-belt .slide.active-process .bottom{background-position: 175px bottom;}
	.process-belt .wheelie{bottom:42px;}

	.product-item figure{text-align:center;}
	.product-item h2{font-size:32px;}


}


/* Landscape phone to portrait tablet - xs */
@media screen and (max-width: 767px) {

	.royalSlider {height:420px;}


	.work .bump{top:15px; margin-bottom:0;}

	.service-item{background-size: 200% auto; background-position: center right; min-height:inherit; padding-bottom:30px; margin-bottom:20px;}

	.work .top-bg{height:auto; padding-bottom:50px;}
	.work .masthead{top:100px;}
	.bar.navy{margin-top:150px;}
	.sub-service{border-bottom:0;}

	.top-bg.project{height:170px;}



}


/* iphone5 landscape */
@media screen and (max-width: 480px) {


	body.work .portfolio-item{width:100%;}
	.portfolio-item a{margin-bottom:30px;}
	.edge{padding-top:70px;}
	.edge.black p{font-size:20px;}

	.service-item{background-size:auto 100%;}

}


/* iphone5 portrait */
@media screen and (max-width: 320px) {

		.royalSlider {height:250px;}


}