/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/

/* 
    Created on : Nov 11, 2017, 11:15:36 PM
    Author     : yongquizheng
*/

.row {
  margin-right: 0px !important;
  margin-left: 0px !important;
}

.middle-section h1.headline {
  margin: 0px;
  padding: 0px 0px 30px 0px;
}

.middle-section .btn-circle-lg {
  width: 100px !important;
  height: 100px !important;
  /*margin: 50px;*/
  font-size: 40px !important;
  font-weight: bold;
  color: #3498DB;
  text-align: center;
  padding: 0px !important;
}

@media (max-width: 767px) {
  .middle-section .btn-circle-lg {
    width: 50px !important;
    height: 50px !important;
    margin: 25px;
    font-size: 12px !important;
    font-weight: bold;
    color: #3498DB;
    text-align: center;
    padding: 0px !important;
  }
}

.middle-section .btn-circle-lg:hover {
  color: #636b6f;
}

.middle-section .btn:not(.btn-link):not(.btn-circle) {
  border: solid 2px #34DBC4 !important;
  -webkit-box-shadow: 0 2px 5px #dafff5, 0 2px 10px #96ffe7;
          box-shadow: 0 2px 5px #dafff5, 0 2px 10px #96ffe7;
}

.middle-section > div {
  padding: 40px 0px 0px 0px;
}

.middle-section > div li {
  margin: 20px;
}

.middle-section > div .slider-container a.carousel-control.left,
.middle-section > div .slider-container a.carousel-control.right {
  background-image: none !important;
}

.middle-section > div .slider-container .glyphicon-chevron-right,
.middle-section > div .slider-container .glyphicon-chevron-left {
  color: #636b6f;
  font-size: 40px;
  font-weight: normal !important;
  text-shadow: none;
}

.middle-section > div .slider-container .col-md-3 {
  padding-top: 40px;
}

.middle-section > div .slider-container .btn-text {
  text-align: center;
  font-size: 14px;
  padding-top: 5px;
}

.middle-section > div .margin-both {
  margin: 0 16% 0 13%;
}

.middle-section > div.home-howitwork-container {
  background-color: #F9F7FA;
}

.middle-section > div.comments-container {
  background-color: #ffffff;
}

.middle-section > div div.img-circle {
  padding: 50px;
  background-color: #ffffff;
  border: 1px solid #ccd0d2;
}

.middle-section .home-howitwork-container {
  background-color: #f6f6f6;
  padding: 30px;
}

.middle-section .home-howitwork-container ul a {
  color: #636b6f !important;
}

.middle-section .home-howitwork-container ul a:hover {
  text-decoration: none;
  color: #3498DB !important;
}

.middle-section .home-howitwork-container h1 {
  padding-top: 20px;
}

.middle-section .home-howitwork-container h5 {
  font-size: 18px !important;
  font-weight: normal;
}

.middle-section .home-howitwork-container .img-circle {
  width: 150px;
  height: 150px;
  margin: 10px;
  border-radius: 0;
  background-color: transparent;
}

@media (max-width: 767px) {
  .middle-section .home-howitwork-container .img-circle {
    width: 75px;
    height: 75px;
  }
}

.middle-section .home-howitwork-container .image-text {
  margin-top: 10px;
}

.middle-section .home-howitwork-container .padding-left-50 {
  padding-left: 50px;
}

.middle-section .comments-container {
  margin-bottom: 40px;
}

.middle-section .comments-container a.carousel-control.left,
.middle-section .comments-container a.carousel-control.right {
  background-image: none !important;
}

.middle-section .comments-container .glyphicon-chevron-right,
.middle-section .comments-container .glyphicon-chevron-left {
  color: #636b6f;
  font-size: 40px;
  font-weight: normal !important;
  text-shadow: none;
}

.middle-section .comments-container .img-circle {
  width: 150px;
  height: 150px;
  margin: 10px;
  border-radius: 0;
  background-color: transparent;
}

@media (max-width: 767px) {
  .middle-section .comments-container .img-circle {
    width: 75px;
    height: 75px;
  }
}

.middle-section .comments-container h3 {
  font-size: 25px;
  line-height: 1.5;
  color: #636b6f;
  font-weight: normal;
}

.middle-section .comments-container .company-name {
  font-size: 25px;
  line-height: 1.5;
  color: #34DBC4;
  font-weight: normal;
}

.brows-category {
  margin-left: 10px;
}

.brows-category h3.title {
  margin-left: 15px;
}

.brows-category .project-title-box {
  border: solid 1px #ccd0d2;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.brows-category .project-title-box.active {
  border: solid 1px #3498DB;
}

.brows-category .project-title-box:hover {
  border: solid 1px #3498DB;
  background-color: #bbdafb;
}

.brows-category p.project-desc {
  line-height: 1.2;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brows-category .project-details-box {
  border: solid 1px #ccd0d2;
  padding: 10px;
  margin-bottom: 10px;
}

.brows-category .project-details-box img {
  max-width: 60px;
}

.brows-category .project-details-box .client-name {
  margin-top: 20px;
}