.circle-container {
    position: relative;
    width: 60em;
    height: 60em;
    padding: 3em;
    /* border: dashed 1px;  */
    border-radius: 50%;
    margin: 1.75em auto 0;
    }
.circle-container a{
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 12em; height: 12em;
    margin: -6em;
    border-radius: 50%;
    }
    .circle-container img { display: block; width: 100%; border-radius: 50%;}
    .circle-container .center{
        width: 24em;
        height: 24em;
        margin: -12em;
        /* background-color: #fff; */
    }
    .circle-container .center2{
      width: 24em;
      height: 24em;
      margin: -12em;
      background-color: #fff;
  }
    .deg0 { transform: translate(20em); }
    .deg90 { transform: rotate(90deg) translate(20em) rotate(-90deg); }
    .deg135 { transform: rotate(135deg) translate(20em) rotate(-135deg); }
    .deg180 { transform: translate(-20em); }
    .deg225 { transform: rotate(225deg) translate(20em) rotate(-225deg); }
    .deg270 { transform: rotate(270deg) translate(20em) rotate(-270deg); }
    .deg45 { transform: rotate(45deg) translate(20em) rotate(-45deg); }
    .deg225 { transform: rotate(225deg) translate(20em) rotate(-225deg); }
    .deg300 { transform: rotate(300deg) translate(20em) rotate(-300deg); }
    .deg240 { transform: rotate(240deg) translate(20em) rotate(-240deg); }
    .deg60 { transform: rotate(60deg) translate(20em) rotate(-60deg); }
    .deg120 { transform: rotate(120deg) translate(20em) rotate(-120deg); }
    .deg51 { transform: rotate(51deg) translate(20em) rotate(-51deg); }
    .deg102 { transform: rotate(102deg) translate(20em) rotate(-102deg); }
    .deg153 { transform: rotate(153deg) translate(20em) rotate(-153deg); }
    .deg204 { transform: rotate(204deg) translate(20em) rotate(-204deg); }
    .deg255 { transform: rotate(255deg) translate(20em) rotate(-255deg); }
    .deg306 { transform: rotate(306deg) translate(20em) rotate(-306deg); }
    
/*  Portfolio  */
.portfolio-sorting {
    text-transform: uppercase;
    margin-bottom: 48px;
    background-color: #f1a31a;
    padding: 30px 0 10px 0; }
    .portfolio-sorting li a {
      color: #fff;
      text-decoration: none;
      margin: 10px;
      letter-spacing: 2px;
      font-weight: 600; }
    .portfolio-sorting a:hover, .portfolio-sorting a.active {
      color: #333; }
  
  .portfolio-item {
    font-size: 14px;
    position: relative;
    overflow: hidden;
    display: block;
    /* border-radius: 50%; */
    /* -webkit-transition: all .9s ease;
    -moz-transition: all .9s ease;
    transition: all .9s ease; */
      /*box-shadow: 2px 2px 2px #888;*/
     }
  
  .portfolio-items {
    margin-bottom: 0; }
  
  .portfolio-item2 a {
    display: inline-block;
    /* border-radius: 50%; */
    color: #fff !important; }
    .portfolio-item2 a:hover .portfolio-overlay {
      opacity: 1;
      border-radius: 50%;
      visibility: visible; }
  .portfolio-item2 img {
    max-width: none;
    position: relative;
    left: 0;
    width: 100%; 
    /* border-radius: 50%; */
  }
  /* .portfolio-item:hover img {
    transform: scale(1.2, 1.2) translate(15px, 15px);
    -ms-transform: scale(1.2, 1.2) translate(15px, 15px);
    -webkit-transform: scale(1.2, 1.2) translate(15px, 15px); } */
  
  .portfolio-overlay {
    background: none repeat scroll 0 0 rgba(189, 187, 187, 0.753);
    height: 100%;
    position: absolute;
    width: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
    /* transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease; */
    opacity: 0;
    visibility: hidden;
    overflow: hidden; }
    .portfolio-overlay .caption {
      position: absolute;
      bottom: 100px;
      left: 0;
      padding: 0 15px;
      text-align: left;
      border-radius: 50%;
      opacity: 0; }
  
  .portfolio-item2 a:hover .portfolio-overlay .caption {
    bottom: 10%;
    border-radius: 50%;
    opacity: 1; }
  
  .portfolio-item2 a h5 {
    /* margin-bottom: 0; */
    font-weight: 800;
    color: #000; }
  
  .portfolio-wide div {
    margin-bottom: 10px; }
    
@media (max-width: 767px) {
    .circle-container {
        position: relative;
        width: 18em;
        height: 18em;
        padding: 3em;
        /* border: dashed 1px;  */
        border-radius: 50%;
        margin: 1.75em auto 0;
        } 
        .circle-container .center{
            width: 10em;
            height: 10em;
            margin: -5em;
            /* background-color: #fff; */
        }
        .circle-container .center2{
          width: 10em;
          height: 10em;
          margin: -5em;
          background-color: #fff;
      }
        .circle-container a{
            display: block;
            position: absolute;
            top: 50%; left: 50%;
            width: 5em; height: 5em;
            margin: -2.5em;
            border-radius: 50%;
            }
            .deg0 { transform: translate(9em); }
    .deg90 { transform: rotate(90deg) translate(9em) rotate(-90deg); }
    .deg135 { transform: rotate(135deg) translate(9em) rotate(-135deg); }
    .deg180 { transform: translate(-9em); }
    .deg225 { transform: rotate(225deg) translate(9em) rotate(-225deg); }
    .deg270 { transform: rotate(270deg) translate(9em) rotate(-270deg); }
    .deg45 { transform: rotate(45deg) translate(9em) rotate(-45deg); }
    .deg225 { transform: rotate(225deg) translate(9em) rotate(-225deg); }
    .deg300 { transform: rotate(300deg) translate(9em) rotate(-300deg); }
    .deg240 { transform: rotate(240deg) translate(9em) rotate(-240deg); }
    .deg60 { transform: rotate(60deg) translate(9em) rotate(-60deg); }
    .deg120 { transform: rotate(120deg) translate(9em) rotate(-120deg); }
    .deg51 { transform: rotate(51deg) translate(9em) rotate(-51deg); }
    .deg102 { transform: rotate(102deg) translate(9em) rotate(-102deg); }
    .deg153 { transform: rotate(153deg) translate(9em) rotate(-153deg); }
    .deg204 { transform: rotate(204deg) translate(9em) rotate(-204deg); }
    .deg255 { transform: rotate(255deg) translate(9em) rotate(-255deg); }
    .deg306 { transform: rotate(306deg) translate(9em) rotate(-306deg); }

    .introhalf .intro-body {
        padding: 110px 0 110px; }
        .portfolio-item2 a:hover .portfolio-overlay .caption {
            bottom: -20%;
            border-radius: 50%;
            opacity: 1; }
            .portfolio-item2 a h5 {
                font-size: 6px;
                font-weight: 800;
                color: #000; }
}