body {
 margin: 0;
 background-image: url(../img/concrete.png);
 display: compact;
 font: px ;
 font-family: 'Titillium Web';
 
}
p {
 font-size: 20px ;
 font-family: 'Titillium Web';
}

.testimonial {
    background-image: url('../img/concrete.png');
}



.img-resize {
    width: 60%;
}
.contact-form {
    background-image: url('../img/concrete.png');
    
}
.contact-form a {
    
    color: black; 
    text-decoration: underline;
}

.carousel-caption .mobile-slide-1 {
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
    color: white;
    right: 15%;
    left:15%; 
    bottom: 250px;
    position: inherit;    
}

.mobile-slide {
    font-family: 'Raleway';
    font-size: 25px;
    
}


}
.services {
    text-align: center;
}
/****************** NAV BAR CSS **************************/


.navbar, .dropdown-menu{
background:rgba(255,255,255,0.98);
border: none;


}

.navbar-brand {
	font-family: 'Raleway', sans-serif;
    font-size: 25px;
}

.nav-home, .dropdown-toggle {
	font-family: 'Titillium Web', sans-serif;
    font-size: 16px;
    
}

.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
  border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
  border-bottom: 3px solid transparent;
  background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
 color: black;
}
.dropdown-menu{
      -webkit-box-shadow: none;
    box-shadow:none;
}

.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
  border-bottom: #C4E17F 3px solid;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
  border-bottom: #FFFF58 3px solid;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
  border-bottom: #FECF71 3px solid;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
  border-bottom: #F0776C 3px solid;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
  border-bottom: #DB9DBE 3px solid;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
  border-bottom: #C49CDE 3px solid;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
  border-bottom: #669AE1 3px solid;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
  border-bottom: #62C2E4 3px solid;
}
/******************* END NAV BAR CSS *****************/

/******************* START CAROUSEL CSS *****************/



.home-initial-carousel{ height:680px;  margin:0; padding:0}
.home-initial-carousel .item{ height:680px;  }
.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:45px;color:#fff;line-height:56px;font-family: 'Raleway';}

.home-initial-carousel .item.slide1 > img {}
.home-initial-carousel .item.slide1 .carousel-caption{ left:auto; right:0%; }

.home-initial-carousel .item.slide2 { }
.home-initial-carousel .item.slide2 > img {}
.home-initial-carousel .item.slide2 .carousel-caption{  top:190px;left:5%; right:auto; padding-right:50px}
.home-initial-carousel .item.slide2 .carousel-caption span{ color:#fff; font-size:20px}
.home-initial-carousel .item.slide2 .carousel-caption h3 { line-height: 51px}

.home-initial-carousel .item.slide3 { }
.home-initial-carousel .item.slide3 > img {}
.home-initial-carousel .item.slide3 .carousel-caption{ left:auto; right:5%; top:165px; color: black;}


.home-initial-carousel .item.slide4 { }
.home-initial-carousel .item.slide4 > img { }
.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:23px;margin:0;padding:0; }
.slide.services .header h3 { font-size:39px; color:#5b5b5b; margin:2px 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(../images/sprite-services-icons.png) no-repeat -4px -3px}
.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: -1622px -3px;}
.slide.services .thumbnail .circle a.motion-design { background-position: -141px -2px;}
.slide.services .thumbnail .circle a.web-development { background-position: -275px -2px;}
.slide.services .thumbnail .circle a.e-commerce { background-position: -412px -3px;}
.slide.services .thumbnail .circle a.creative { background-position: -546px -2px;}
.slide.services .thumbnail .circle a.social-media { background-position: -682px -3px;}
.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(../images/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:#FF7C6D;border:1px solid #FF7C6D;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(../images/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: ''; }






/* 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:320px !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%}
	
	
}