/*
 blokcs.css
 <project>

 Created by Mimoun AIT ALI on 2013-09-28.
 Copyright 2013 Mimoun AIT ALI. All rights reserved.
 */

/*
 1- Global
 2- Elements
 3- Header
 4- Slider
 5- Boxes
 6- Before Content

 * */

.l-slider {
  background: #a5bfeb;
}

/************************************** 1- Global *********************************/
.block-title, .project-description {
  float: left;
  padding-right: 10px;
  position: relative;
}
.wide-region .block-title {
  padding-left: 10px;
  left: 45%;
  left: calc(50% - 100px);
}
.block .line, .project-tete .line {
  border-top: 1px solid #EEE;
  display: block;
  float: left;
  width: 100%;
  margin: -25px 0 0;
}
.wide-region .block .line, .project-tete .line {
  border-top: 1px solid #EEE;
  border-bottom: 1px solid #EEE;
  padding: 2px;
  margin: -27px 0 0;
}

.block-content {
  clear: both;
  line-height: 1.57;
}
.jcarousel-clip {
  overflow: hidden;
}

/************************************** 1- Boxes *********************************/
.block-block-1 .large-3.columns .container {
  background: #FFF;
  text-align: center;
  padding: 5px;  
  border-radius: 4px;
}
.block-block-1 .large-3.columns:hover .container {
  background: #1580FA;
  color: #FFF;
  transition: all .3s ease;
}

.block-block.block-block-1 .box-title {
  color: #050505;
  font-size: 22px;
  line-height: 24px;
  font-weight: 100;
  transition: all .3s ease;
}

.block-block-1 .large-3.columns:hover .box-title {
  color: #FFF;
}
.box-icon {
  padding: 10px 0 15px;
}
.box-icon i {
  background: #1580FA;
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 3em;
  padding: 11px 14px;
  transition: all 1s ease 0s;
}
.block-block-1 .large-3.columns:hover .box-icon i {
  background:#FFF;
  color: #1580FA;
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

.feature-box .box-title {
  margin-bottom: 2px;
}
.feature-box .box-icon {
  float: left;
  padding: 5px;
}
.feature-box .box-icon i {
  font-size: 2em;
  margin-right: 6px;
  padding: 6px 8px;
}

/************************************** 2- Recent Work *********************************/
.view-projects .jcarousel-clip {
  overflow: hidden;
}
.view-projects .jcarousel-item {
  padding: 0 10px;
  margin: 10px 0 40px;
  width: 290px;
  position: relative;
}
.boxed .view-projects .jcarousel-item {
  max-width: 250px;
}
.block-content .view-projects .columns {
  padding-left: 0.64em;
  padding-right: 0.64em;
}
.jcarousel-prev, .jcarousel-next {
  background: #FCFCFC url('../images/sprite.png') -20px 2px no-repeat;
  clear: both;
  display: inline-block;
  height: 20px;
  margin: 5px;
  position: absolute;
  right: -5px;
  top: -41px;
  width: 20px;
}
.jcarousel-prev:hover, .jcarousel-next:hover {
  background-color: #EEE;
}
.jcarousel-prev {
  right: 15px;
  background-position: 4px 2px
}
.jcarousel-prev-disabled {
  background-position: 4px -20px
}
.jcarousel-next-disabled {
  background-position: -20px -20px
}

.block-content .view-projects .details {
  background: #FFF url('../images/bg-1.png');
  color: #666;
  display: block;
  margin: -3px 0 0;
  border-radius: 0 0 3px 3px;
  min-height: 95px;
  padding: 20px 0;
  text-align: center;
  font-weight: 300;
}
.block-content .view-projects li:hover .details {
  background-color: #6ad1fa;
  background-image: url('../images/bg-1.png'), -moz-linear-gradient(top, #3495f3 0%, #6ad1fa 100%);
  background-image: url('../images/bg-1.png'), linear-gradient(to bottom, #3495f3 0%,#6ad1fa 100%);
  color: #EBF9FF;
}
.block-content .view-projects .details h5 {
  color: #484848;
  font-size: 16px;
  margin: 4px 0;
}
.block-content .view-projects li:hover h5 {
  color: #FFF;
}
.over_pic {
  background: #1580FA;
  /*height: 169px;
  height: calc(100% - 132px);*/
  left: 0;
  padding-top: 35%;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.boxed .over_pic {
  max-width: 230px;
}
.es-slides li:hover .over_pic {
  opacity: .6;
}
.es-slides .icon-link {
  left: 43%;
  left: calc(50% - 25px);
  position: absolute;
  top: -45px;
  opacity: 0;
  border: 1px solid;
  border-radius: 4px;
  font-size: .1em;
  padding: 7px 12px;
  transition: all 0.3s ease-out 0s;
}
.es-slides li:hover .icon-link {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
  color: #AAFFFF;
  font-size: 2em;
  opacity: 1;
  top: 30%;
}

/************************************** 3- Recent News *********************************/
.view-blog.view-display-id-block .jcarousel li {
  width: 390px;
  margin: 10px 0 20px;
}
.boxed .view-blog.view-display-id-block .jcarousel li {
  max-width: 328px;
  margin: 10px 15px 20px 0;
}
.view-blog.view-display-id-block .jcarousel li:first-child {
  padding-right: 5px;
}
.view-blog.view-display-id-block .blog-title {
  margin: 0 0 2px;
}
.view-blog.view-display-id-block .blog-title a {
  color: #0579FE;
  font-size: 20px;
  font-weight: 300;
}
.view-blog.view-display-id-block p {
  font-size: 15px;
  line-height: 1.57em;
}
.view-blog.view-display-id-block .blog-body {
  padding-right: 20px;
}
/********** 3- Recent News ******/
.view-blog.view-display-id-block_1 ul li {
  border-bottom: 1px solid #F2F2F2;
  list-style: none;
  padding: 10px 0;
}
.view-blog.view-display-id-block_1 ul li:first-child {
  padding-top: 0;
}
.view-blog.view-display-id-block_1 ul li:last-child {
  border: none;
}
.view-blog.view-display-id-block_1 .blog-image.left img {
  border: 3px solid #EEEEEE;
  margin-right: 10px;
  width: 68px;
}
.sidebar .view-blog.view-display-id-block_1 .blog-image.left img {
  border: 4px solid #EEEEEE;
  width: 88px;
}
.view-blog.view-display-id-block_1 .blog-title, .view-blog.view-display-id-block_1 .subheader {
  margin: 0;
}
.view-blog.view-display-id-block_1 .blog-title a {
  color: #444;
  font-size: 18px;
  font-weight: 300;
}

/************************************** 4- Our Clients *********************************/
.block.block-views-clients-block {
  margin-top: 20px;
  margin-bottom: 20px;
}
.view-clients.view-display-id-block .has-tip {
  cursor: inherit;
}
.view-clients.view-display-id-block .jcarousel-clip {
  margin-left: 20px;
}
.view-clients.view-display-id-block .jcarousel li {
  padding: 20px 0 40px;
  width: 276px;
  text-align: center;
}
.boxed .view-clients.view-display-id-block .jcarousel li {
  max-width: 250px;
}
.view-clients.view-display-id-block .es-slides li img {
  opacity: .55;
}
.view-clients.view-display-id-block .es-slides li:hover img {
  opacity: 1;
}
.view-clients .has-tip {
  border: none;
}
.view-clients.view-display-id-block .jcarousel-prev, .view-clients.view-display-id-block .jcarousel-next {
  top: 50px;
}
.view-clients.view-display-id-block .jcarousel-prev {
  left: 0;
}

.view-clients.view-display-id-page_1 .view-content li {
  margin-bottom: 10px;
}

/************************************** 5- Promotion *********************************/
.promo-container {
  background: #f2f2f2;
  background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
  background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
  background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
  background: linear-gradient(to bottom,  #ffffff 0%,#f2f2f2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
  border-bottom: 1px solid #DEE2E4;
  border-top: 1px solid #F7F7F8;
  padding: 45px 0 20px;
  margin-bottom: 30px;
}
.view-id-projects.view-display-id-block_2 .view-header {
  float: left;
  padding: 60px 30px 0;
  width: 44%;
  text-align: center;
}
.view-id-projects.view-display-id-block_2 .view-header h3 {
  font-size: 2.5em;
}
.view-id-projects.view-display-id-block_2 .view-content {
  float: right;
  width: 55%;
}
.view-id-projects .big_pic {
  min-height: 325px;
}
.view-id-projects .big_pic img {
  position: absolute;
  right: 0;
  z-index: 20;
}
.view-id-projects .small_pic {
  bottom: 0;
  left: -20px;
  position: absolute;
}

.view-id-projects.view-display-id-block_2 .jcarousel-prev, .view-id-projects.view-display-id-block_2 .jcarousel-next {
  bottom: -18px;
  top: auto;
  background-color: transparent;
}

/************************************** 6- Wide Region Blocks *********************************/
.wide-region section.block {
  border-bottom: 1px solid #EEEEEE;
  padding: 70px 0;
}
.wide-region section.block.block-multiblock-1 {
  padding-bottom: 0;
}
.wide-region section.block:first-child {
  padding-top: 10px;
}
.wide-region section.block:last-child {
  border-bottom: none;
}
.wide-region section.block:nth-child(even) {
  background-color: #F0F0F0;
}

.wide-region section.block-block-8 {
  margin-bottom: -21px;
  padding-bottom: 0;
}
.wide-region section.block-block-10 {
  background-image: url('http://themes.webdevia.com/seven-biz/sites/default/files/al0.jpg');
  background-size: cover;
}

/************************************** 7- Flickr Blocks *********************************/
.block-flickr .block-content > a {
  border: 1px solid #DDD;
  display: inline-block;
  margin: 1%;
  padding: 1.3%;
}
.block-flickr .block-content > a:hover {
  border: 1px solid #3495F3;
}