﻿
.home-initial-carousel{ height:680px;  margin:0; padding:0}
.home-initial-carousel .item{ height:680px;  background-color:#adadad;}
.home-initial-carousel .item .carousel-caption{ z-index:10;  width:40%; bottom:auto; top:250px; text-align:left;text-shadow:none;}
.home-initial-carousel .item .carousel-caption h3 { font-size:46px;color:#fff;line-height:56px;}
.home-initial-carousel .item .carousel-caption span { font-size:16px;color:#fff;line-height:24px;} 

.home-initial-carousel .item.slide1 { background-color:#F1B14F}
.home-initial-carousel .item.slide1 > img { float:right;margin-right:10%;padding-top:140px}
.home-initial-carousel .item.slide1 .carousel-caption { top:250px;left:10%; right:auto;} 

.home-initial-carousel .item.slide2 { background-color:#164f78}
.home-initial-carousel .item.slide2 > img { float:right;margin-right:10%;padding-top: 140px}
.home-initial-carousel .item.slide2 .carousel-caption{  top:250px;left:10%; right:auto; padding-right:50px}

.home-initial-carousel .item.slide3 > img { margin-left:10%;padding-top:140px}
.home-initial-carousel .item.slide3 .carousel-caption{ left:auto; right:5%; top:250px;}

.home-initial-carousel .item.slide4 { background-color:#6EBEC5}
.home-initial-carousel .item.slide4 > img { float:right;margin-right:5%;padding-top: 150px}
.home-initial-carousel .item.slide4 .carousel-caption{  top:190px;left:5%; right:auto;}

.carousel-control.left, .carousel-control.right{background-image:none; filter:none}
.carousel-indicators li { margin-left:8px; width:15px; height:15px; border:1px solid rgba(255,255,255,0.90)}
.carousel-indicators .active { margin:1px 1px 1px 8px;width:15px;height:15px}



.slide.services { background-color: #fff; padding-top: 80px}
.slide.services .header { margin-bottom: 58px}
.slide.services .header h2 { font-size:14px;margin:0;padding:0; }
.slide.services .header h3 { font-size:36px; color:#3b3b3b; margin:10px 0 0 0; padding:0}
.slide.services .thumbnail { background-color:transparent; border:0;text-align: center; padding-top: 25px; padding-bottom: 15px; margin-bottom: 35px;-webkit-border-radius: 8px;border-radius: 8px}
.slide.services .thumbnail h3 {margin:0;}
.slide.services .thumbnail h3 a{font-size:16px;color:#000}
.slide.services .thumbnail h3 a:hover {color:#fff; text-decoration: none}
.slide.services .thumbnail p { visibility: hidden; font-size:12px;color:#939393}
.slide.services .thumbnail p.button { margin-top:19px;visibility: hidden}
.slide.services .thumbnail .circle{ position:relative;border-radius: 50%; background-color: #f7f7f7; width:155px; height: 155px; margin:0 auto;}
.slide.services .thumbnail .circle a{position:absolute;left:50%;top:50%;margin-left:-60px;margin-top:-55px;width:120px;height:110px;display:block;background:url(../img/sprite-services-icons.png) no-repeat;}
.slide.services .thumbnail:hover{ background-color: #ff7c6d; }
.slide.services .thumbnail:hover .circle { background-color: #fff;}
.slide.services .thumbnail:hover p {visibility:visible;color:#000}
.slide.services .thumbnail:hover h3 a {color:#000}
.slide.services .thumbnail:hover p.button { visibility: visible}

.slide.services .thumbnail .circle a.ui-ux-design  { background-position:-126px 0;}
.slide.services .thumbnail .circle a.brand-design { background-position: -259px 0;}
.slide.services .thumbnail .circle a.app-development { background-position: -390px 0;}
.slide.services .thumbnail .circle a.multimedia { background-position: -529px 0;}
.slide.services .thumbnail .circle a.e-commerce { background-position: -655px 0;}

.slide.services .thumbnail .circle a.creative { background-position: -546px -2px;}
.slide.services .thumbnail .circle a.seo { background-position: -815px -1px;}
.slide.services .thumbnail .circle a.content-writing { background-position: -947px -1px;}
.slide.services .thumbnail .circle a.product-restructuring{ background-position: -1089px top;}
.slide.services .thumbnail .circle a.web-hosting { background-position: -1222px -2px;}
.slide.services .thumbnail .circle a.photography { background-position: -1358px -4px;}
.slide.services .thumbnail .circle a.email-marketing { background-position: -1492px -1px;}

.slide.portfolio { padding-top:30px; padding-bottom:0;background-color: #fff}
.slide.portfolio .header { margin-bottom: 0}
.slide.portfolio .header h2{ font-size:28px;}


.portfolio-carousel,
.portfolio-carousel > .carousel-inner{height:720px; overflow: hidden}
.portfolio-carousel .carousel-caption{ z-index:10}
.portfolio-carousel .item{ height:720px !important;text-align:center; overflow:hidden;position: relative; padding-top:0}
.portfolio-carousel .item img { min-width:100% !important}

.portfolio-carousel .item .blur { position: absolute; z-index: 99; top:0; left:0; width:100%; height:100%; opacity:0;background:url(../img/home-portfolio-cover-back.png) repeat-x left top}
.portfolio-carousel .item .caption { position: absolute; z-index: 100; top:7%; left:0; width:100%; text-align: center;}
.portfolio-carousel .item .caption h4 {font-weight:bold;color:#fff;font-size:48px; margin:0 0 6px 0;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
.portfolio-carousel .item .caption .lead { font-size: 18px; color:#fff;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
.portfolio-carousel .item .btn-group {  position: absolute; z-index: 100; bottom:11%; left:50%; width:120px; margin-left: -60px; text-align: center }
.portfolio-carousel .item .btn-lg { min-width:120px;background:#ea513a;border:1px solid #ea513a;color:#fff;font-size:14px;}
.portfolio-carousel .item .btn-lg:hover { background-color: #fff;border:1px solid #fff;color:#000}


.portfolio-carousel .carousel-control {  z-index: 100;width:5%;opacity: 1;filter: alpha(opacity=100)}
.portfolio-carousel .carousel-control .right { right:-10px}
.portfolio-carousel .carousel-control .icon-prev, .portfolio-carousel .carousel-control .icon-next{ top:47%}
.portfolio-carousel .carousel-control span{ background: url(../img/sprite-arrow.png) no-repeat left top;height:78px;width:41px}
.portfolio-carousel .carousel-control span.icon-next {background-position: -55px top}
.portfolio-carousel .carousel-control .icon-prev:before { content: '';}
.portfolio-carousel .carousel-control .icon-next:before { content: ''; }

.friendly_link { background:#474747;color:#555;text-align:center;}
.friendly_link .container { color:#555;font-size:12px;}
.friendly_link a { color:#555;padding:0 5px;}


/* Tablet */
@media (max-width: 1024px) {

	.carousel-indicators li { margin-left:22px; width:20px; height:20px; border:1px solid rgba(255,255,255,0.90)}
	.carousel-indicators .active { margin:1px 1px 1px 22px;width:20px;height:20px}
	
	.home-initial-carousel .item.slide1 > img, .home-initial-carousel .item.slide2 > img, .home-initial-carousel .item.slide3 > img {float:none;margin:0 auto; padding-top:90px}
	.home-initial-carousel .item.slide1 .carousel-caption, .home-initial-carousel .item.slide2 .carousel-caption, .home-initial-carousel .item.slide3 .carousel-caption{ width:90%; margin:0 auto; padding:0 20px; top:auto; bottom:70px;text-align:center;text-shadow:none;}
	.home-initial-carousel .item .carousel-caption h3 { font-size:25px; line-height: 30px; text-align: center}
	
	
	
}



/* Phone */
@media (max-width: 640px) {

	.home-initial-carousel{ height:590px; }
	.home-initial-carousel .item{ height:590px;  }

	.home-initial-carousel .item.slide1 .carousel-caption{ bottom:95px}
	.home-initial-carousel .item.slide3 .carousel-caption{ bottom:58px}



	.home-initial-carousel .item.slide2 > img { float:none;margin-right:0;}
	.home-initial-carousel .item.slide2 .carousel-caption{  width:100%;top:auto;bottom:75px;left:auto; right:auto; padding-right:0}
	.home-initial-carousel .item.slide2 .carousel-caption span{ font-size:15px}
	.home-initial-carousel .item.slide2 .carousel-caption h3 { font-size:35px;line-height: 40px}


	.home-initial-carousel .item.slide4 > img { float:none;margin-right:0;padding-top: 110px}
	.home-initial-carousel .item.slide4 .carousel-caption{  width:100%;padding-left:15px; padding-right:15px;top:auto;bottom:55px;left:auto; right:auto;}


	.slide.services { padding-top: 40px}
	.slide.services .header { margin-bottom: 12px}
	
	.slide.services .header h2 { font-size:15px}
	.slide.services .header h3 { font-size:24px}
	.slide.services .thumbnail { margin-bottom: 10px}
	.slide.services .thumbnail h3 a{font-size:22px}

	.slide.portfolio .header h2{ font-size:20px;}

	.portfolio-carousel,
	.portfolio-carousel > .carousel-inner,
	.portfolio-carousel .item{ height:300px !important}
	.portfolio-carousel .item .caption { top:6%}
	.portfolio-carousel .item .caption h4 { font-size:28px; margin-bottom: 3px}
	.portfolio-carousel .item .caption .lead { font-size:14px; display: none}
	.portfolio-carousel .carousel-control .icon-prev, .portfolio-carousel .carousel-control .icon-next{ top:29%}
	.portfolio-carousel .carousel-control.left { left:2%}
	.portfolio-carousel .item .btn-group { bottom: 14%}
	
	.portfolio-carousel .item .btn-lg { border:1px solid #FF7C6D;color:#fff; background-color: #FF7C6D;font-size:13px;}
	.portfolio-carousel .item .btn-lg:hover { background-color: #FF7C6D;color:#fff}
	


	
}

@media (min-width: 800px) and (max-width: 1024px) {
	.slide.services .thumbnail { height:290px !important}
}


/* Tablet */
@media (min-width: 690px) and (max-width: 790px) {
	
	.home-initial-carousel{ height:710px;}
	.home-initial-carousel .item{ height:710px; }
	.home-initial-carousel .item .carousel-caption h3 { font-size:35px; line-height: 42px}
	.home-initial-carousel .item.slide3 .carousel-caption{ bottom:59px}
	
	.slide.services .thumbnail { min-height:298px !important}
	
	.portfolio-carousel,
	.portfolio-carousel > .carousel-inner,
	.portfolio-carousel .item{ height:520px !important}
	.portfolio-carousel .item .caption h4 { font-size:42px}
	.portfolio-carousel .carousel-control .icon-prev, .portfolio-carousel .carousel-control .icon-next{ top:45%}
	
	
}
