/*------------------------------------------------------------------

  Template Name: Yalli
  Description: Yalli - One Page Creative HTML Template
  Author: IntecLab
  Author URI: https://themeforest.net/user/inteclab
  Version: 1.0
  
  1.  Global

      a- Loader
      b- Typography
      c- Backgrounds
      d- Fields
      e- Buttons
      f- Icons
      j- Colors
      h- Content styles

  2.  Header 

      a- Border

        a.1 Top [Navigation, Brand]
        a.2 Right [Icon]
        a.3 Left [Email]

      b- Carousel

  3.  About
  4.  Quote
  5.  Portfolio

      a- Magnific popup

  6.  Services And Features
  7.  Subscribe
  8.  Team
  9.  video

      a- Magnific popup

  10. Testimonial

      a- Carousel Bootstrap

  11. Blog
  12. Contact
  13. Instagram
  14. Footer
  15. Responsive styles

      a.1 Min width 768px
      b.2 Min width 992px
      c.3 Min width 1200px

-------------------------------------------------------------------*/




/* ============ GLOBAL CSS START ===========*/

body {
    overflow: auto
}

a {
    text-decoration: none !important;
}

::selection {
    background-color: #b2a287;
    color: #fff
}

h2, h3 {
    font-family: 'Lora', serif;
    font-weight: bold;
    color: #222222;
}

.border-top .nav-icon, .border-top .nav-icon span,
.border-top .overlay, .border-top .overlay:before,
.border-top .overlay:after, .border-top .overlay ul li a:after,
.owl-theme .owl-controls .owl-page span.owl-numbers::after,
.border-right div i, .scroll::after, .scroll::before,
.scroll, .about .content button::after,
.portfolio .filter li::after, .portfolio .overlay,
.portfolio .overlay .content-btn span:first-of-type,
.portfolio .overlay .content-btn span:last-of-type,
.subscribe input[type="submit"], .team .item .content img,
.blog .content .item .overlay, .blog .content .item .overlay p,
.blog .content .item .overlay .info, .contact form input[type="submit"],
.instgram .overlay, footer div i{
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}


/* ============ GLOBAL CSS END ===========*/

/*========== Start Section Header  ===========
 ==========                        ===========*/

header { margin: 40px 40px 0 }

.border-top {
    position:absolute;
    height:40px;
    top:0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 2
}

.border-top .brand { 
    float: left; 
    margin: 5px 0 0 50px;
    font-family: 'Lora', serif;
    font-size: 25px;
    font-weight: bold;
}

.border-top .brand::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 10px;
    background-color: #76aedb;
    margin-right: -50px;
    z-index: -1
}

.border-top .menu { 
    float: right;
    margin: 11px 41px 0 0
}

/********* Start Navbar Icon Toggle ********/

.border-top .nav-icon {
  width: 28px;
  height: 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  cursor: pointer;
}

.border-top .nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #272727;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg)
}

.border-top .nav-icon span:nth-child(1) { 
    top: 0px
}

.border-top .nav-icon span:nth-child(2) {
    top: 8px
}

.border-top .nav-icon span:nth-child(3) { 
    top: 16px 
}

.border-top .nav-icon.active span:nth-child(1) {
    top: 8px;
    background-color: #b2a287;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.border-top .nav-icon.active span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.border-top .nav-icon.active span:nth-child(3) {
    top: 8px;
    background-color: #b2a287;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

/********* End Navbar Icon Toggle ********/

/******** Start Overlay Menu ********/

.border-top .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: hidden;
    z-index: -1;
}
.border-top .overlay:before {
    content: '';
    background: #000;
    left: -55%;
    top: 0;
    width: 50%;
    height: 100%;
    position: absolute
}

.border-top .overlay:after {
    content: '';
    background: #000;
    right: -55%;
    top: 0;
    width: 50%;
    height: 100%;
    position: absolute
}

.border-top .overlay.open {
    opacity: .9;
    visibility: visible;
    height: 100%;
}
.border-top .overlay.open:before {
    left: 0;
}
.border-top .overlay.open:after {
    right: 0;
}
.border-top .overlay.open li {
    -webkit-animation: fadeInRight .5s ease forwards;
    -moz-animation: fadeInRight .5s ease forwards;
    -o-animation: fadeInRight .5s ease forwards;
    animation: fadeInRight .5s ease forwards;
    -webkit-animation-delay: .35s;
    -moz-animation-delay: .35s;
    -o-animation-delay: .35s;
    animation-delay: .35s;
}
.border-top .overlay.open li:nth-of-type(2) {
    -webkit-animation-delay: .45s;
    -moz-animation-delay: .45s;
    -o-animation-delay: .45s;
    animation-delay: .45s;
}
.border-top .overlay.open li:nth-of-type(3) {
    -webkit-animation-delay: .55s;
    -moz-animation-delay: .55s;
    -o-animation-delay: .55s;
    animation-delay: .55s;
}
.border-top .overlay.open li:nth-of-type(4) {
    -webkit-animation-delay: .65s;
    -moz-animation-delay: .65s;
    -o-animation-delay: .65s;
    animation-delay: .65s;
}

.border-top .overlay.open li:nth-of-type(5) {
    -webkit-animation-delay: .75s;
    -moz-animation-delay: .75s;
    -o-animation-delay: .75s;
    animation-delay: .75s;
}

.border-top .overlay.open li:nth-of-type(6) {
    -webkit-animation-delay: .85s;
    -moz-animation-delay: .85s;
    -o-animation-delay: .85s;
    animation-delay: .85s;
}

.border-top .overlay.open li:last-of-type {
    -webkit-animation-delay: .95s;
    -moz-animation-delay: .95s;
    -o-animation-delay: .95s;
    animation-delay: .95s;
}

.border-top .overlay nav {
    position: relative;
    height: 50%;
    top: 32%;
    font-size: 50px;
    font-family: 'Lora', serif;
    font-weight: 400;
    text-align: center;
    z-index: 100;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.border-top .overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    height: 100%;
}

.border-top .overlay ul li {
    display: block;
    height: 25%;
    height: calc(100% / 4);
    min-height: 50px;
    position: relative;
    opacity: 0;
}

.border-top .overlay ul li a {
    display: block;
    position: relative;
    color: #FFF;
    text-decoration: none;
    overflow: hidden;
}

.border-top .overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
    width: 100%;
}

.border-top .overlay ul li a:after {
    content: '';
    position: absolute;
    bottom: 33%;
    left: 50%;
    width: 0%;
    height: 10px;
    background: #b2a287;
    z-index: -1;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%)
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

/******* End Overlay Menu ********/

.border-left {
    position:absolute;
    width:40px;
    top:0;
    left: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 1
}

.border-right {
    position:absolute;
    width:40px;
    top:0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 1
}

.border-left p,
.border-right div {
    position: absolute;
    bottom: 4%;
    left: 41%;
    width: 100vw;
    font-family: 'Montserrat', sans-serif;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.border-right div i {
    transform: rotate(90deg);
    margin-right: 20px;
    cursor: pointer
}

.border-right div i:hover {
    color: #b2a287
}

.border-left p {
    transform-origin: 0 20%;
    font-size: 12px;
    letter-spacing: 3px;
}

.border-left p i {
    padding-right: 10px
}

.border-right div {
    transform-origin: 0 28%; 
}



/******** Start Carousel ********/

#owl-demo .item img{
    display: block;
    width: 100%;
    height: 100%;
}

.owl-theme .item .content {
    position: absolute;
    top: 22%;
    left: 10%;
    opacity: 0;
}

.owl-theme .item .content h2 {
    font-size: 50px;
    text-transform: uppercase
}

.owl-theme .item .content p {
    font-family: 'Montserrat', sans-serif    
}

.owl-theme .active .content {
    -webkit-animation: SlideDown 3s ease-in-out forwards;
    -moz-animation: SlideDown 3s ease-in-out forwards;
    -o-animation: SlideDown 3s ease-in-out forwards;
    animation: SlideDown 3s ease-in-out forwards;
    animation-delay: 0.3s    
}

@-webkit-keyframes SlideDown {
  0% {
    opacity: 0;
    top: 22%;
    left: 10%
  }
  100% {
    opacity: 1;
    top: 30%;
    left: 10%;
  }
}

#owl-demo .item img{
    display: block;
    width: 100%;
    height: 100%;
    -webki-object-fit: cover;
    -moz-object-fit: cover;
    -o-object-fit: cover;
    object-fit: cover    
}

.owl-theme .owl-pagination {
    position: absolute;
    top: 38%;
    right: 0;
}

.owl-theme .owl-controls .owl-page span.owl-numbers::after {
    content:"";
    display:inline-block;
    vertical-align: middle;
    height:1px;
    width:40px;
    margin-left: 10px;
    margin-right: 10px;
    background:#b2a287 
}

.owl-theme .owl-controls .owl-page.active span.owl-numbers {
    font-size: 17px;
}

.owl-theme .owl-controls .owl-page.active span.owl-numbers::after,
.owl-theme .owl-controls .owl-page:hover span.owl-numbers::after {
    width: 50px;
    margin-right: 0;
}

.owl-theme .owl-controls .owl-page span.owl-numbers {
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #222222;
}

.owl-theme .owl-controls .owl-page span {
    background: transparent;
    width: 0;
    height: 0;
    margin: 10px 0;
    padding: 0;
    opacity: 1; 
    transform-origin: 0 0
}

.owl-theme .owl-controls {
    margin-top: 0
}

.owl-theme .owl-controls .owl-page {
    display: block;
    margin-bottom: 15px
}

.owl-theme .owl-controls .owl-buttons div:first-of-type {
    position: absolute;
    top: 26%;
    right:0%;
    background: transparent;
    opacity: 1;
    font-size: 12px;
    letter-spacing: 5px;
    color: #000;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    transform-origin: 26% 11%;
    transform: rotate(-90deg);
}

.owl-theme .owl-controls .owl-buttons div:last-of-type {
    position: absolute;
    bottom: 30%;
    right: 0;
    background: transparent;
    opacity: 1;
    font-size: 12px;
    letter-spacing: 5px;
    color: #000;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    transform-origin: 40% 70%;
    transform: rotate(90deg);
}

.scroll {
    position: absolute;
    bottom: 0;
    left: 48%;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    font-size: 15px;
    cursor: pointer
}

.scroll::after, .scroll::before {
    content: "";
    display: block;
    width: 2px;
    height: 32px;
    margin: 0 auto;
    margin-bottom: 10px;
    background-color: #b2a287;
}

.scroll::before {
    height: 12px;
    margin-bottom: 2px
}

.scroll:hover {
    bottom: 0
}

.scroll:hover::before {
    height: 0
}

.scroll:hover::after {
    margin-bottom: 0;
    height: 42px
}

/******** End Carousel *********/

/* ========== End Header  ==========
==========                ========== */

/* ========== Start About  ==========
==========                 ==========*/

.about {
    padding-top: 100px;
    padding-bottom: 40px;
    overflow: hidden
}

.about .img img:first-of-type {
    outline:4px solid rgba(152, 136, 81, 0.74);
    outline-offset: -15px;
    width: 400px;
}

.about .img img:last-of-type {
    position: absolute;
    top: 20%;
    left: 17%;
    outline:6px solid rgba(152, 136, 81, 0.2);
    width: 400px;
}

.about .content {
    position: relative;
    padding-bottom: 25px
}

.about .content h2 {
    font-size: 60px;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin-left: -14%;
    margin-bottom: 30px;
}

.about .content h2::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 2px;
    width: 100px;
    z-index: -1;
    background-color: #222222
}

.about .content h3 {
    position: absolute;
    top: 29%;
    right: -35%;
    text-transform: uppercase;
    letter-spacing: -2px;
    font-size: 150px;
    opacity: .3;
    color: #e8e8e8;
    z-index: -1;
}

.about .content span {
    position: absolute;
    top: -37px;
    left: -41px;
    font-family: 'Montserrat', sans-serif;
    font-size: 100px;
    font-weight: Bold;
    opacity: 0.3;
    color: #c9c9c9;
    transform: rotate(-90deg);
    z-index: -2
}

.about .content p:first-of-type {
    color: #2c2c2c;
    font-size: 16px;
    font-weight: bold;
    margin-left: 20px
}

.about .content p {
    font-family: 'Montserrat', sans-serif;
    color: #5b5b5b;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 2;
    margin-left: 20px
}

.about .content button {
    background: transparent;
    border: none;
    margin-top: 20px;
    margin-left: 30px;
    display: inline;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 2px
}

.about .content button::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 1px;
    width: 0;
    margin-left: 5px;
    background-color: #393939
}

.about .content button:hover::after {
    width: 30px
}

/* ========== End Section About  ==========
==========                      ========== */

/* ========== Start Section Quote  ==========
 ==========                      ========== */

.quote {
    padding-top: 80px;
    padding-bottom: 140px;
    position: relative
}

.quote h3 {
    font-family: 'Lora',serif; 
    font-weight:bold; 
    font-size:27px;;
    margin-bottom: 30px;
    position: relative
}

.quote p {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    margin:0 40px;
    line-height: 2
}

.quote p a {
    font-weight: bold;
    color: #000
}

.quote p a:hover {
    text-decoration: none;
    color:#b2a287
}

.quote i {
    position: absolute;
    top: 12%;
    left: 13%;
    color: #f5f4f4;
    opacity: 0.8;
    z-index: -1;
    font-size: 120px;
}

/* ========== End Section Quote  ==========
===========                   ==========*/

/* ========== Start Section Portfolio  ==========
  ==========                       ========== */

.portfolio {
    display: table;
    width: 100%
}

.portfolio .title h2 {
    font-size: 50px;
    letter-spacing: -1px;
    word-spacing: 2px;
    line-height: 0.9;
    text-transform: uppercase;
    vertical-align: middle;
    margin-bottom: 20px;
}

.portfolio .title h2 strong {
    margin-left: 50px;
    letter-spacing: 3px
}

.portfolio .title h2::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 3px;
    margin-right: 10px;
    margin-left: -15px;
    background-color: #000
}

.portfolio .title span {
    position: absolute;
    top: -3px;
    left: -3px;
    font-family: 'Montserrat', sans-serif;
    font-size: 100px;
    font-weight: Bold;
    opacity: 0.3;
    color: #c9c9c9;
    transform: rotate(-90deg);
    z-index: -1
}

.portfolio .container {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

.portfolio ul {
    list-style: none;
}

.portfolio .filter {
    margin-top: 60px;
    margin-left: 20px
}

.portfolio .filter li {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
    margin: 18px 0;
    cursor: pointer
}

.portfolio .filter li::after {
    content: "";
    display:inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: 0;
    height: 2px;
    background-color: #2a2a2a
}

.portfolio .filter li:hover::after,
.portfolio .filter li.active::after {
    width: 20px
}

.portfolio .isotope img {
    width: 100%;
    height: 100%;
    -webkit-object-fit: cover;
    -moz-object-fit: cover;
    -o-object-fit: cover;
    object-fit: cover;
    padding: 5px;
    position: relative
}

.portfolio .overlay {
    position: absolute;
    top:5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    display: table;
    background-color: #2f2f2f;
    opacity: 0
}

.portfolio .overlay:hover {
    opacity: .8
}

.portfolio .overlay .content-btn {
    display: table-cell;
    vertical-align: middle;
    color: #fff
}

.portfolio .overlay .content-btn span:first-of-type{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
    transform: translateY(-30px);
    opacity: 0
}

.portfolio .overlay .content-btn span:last-of-type{
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(30px)
}

.portfolio .overlay:hover .content-btn span:first-of-type{
    opacity: 1;
    transform: translateY(0px);
    
}

.portfolio .overlay:hover .content-btn span:last-of-type{
    opacity: 1;
    transform: translateY(0px)
}

/* ========== End Section portfolio  ==========
  ==========                      ========== */

/* ========== Start Section Services And Features  ==========
   ==========                                    ========== */

.services, .features {
    display: table
}

.services .title, .features .title{
    margin-top: 50px;
}

.services .title span, .features .title span {
    position: absolute;
    top: -15px;
    left: -80px;
    font-family: 'Montserrat', sans-serif;
    font-size: 100px;
    font-weight: Bold;
    opacity: 0.3;
    color: #c9c9c9;
    transform: rotate(-90deg);
    z-index: -1
}

.features .title span {
    top: -15px;
    left: 21px;
}

.services .title h2, .features .title h2 {
    font-size: 50px;
    letter-spacing: -1px;
    word-spacing: 4px;
    text-transform: uppercase;
    margin-left: -100px;
    margin-bottom: 40px;
    color: #505050
}

.features .title h2 {
    margin-left: 0;
    font-size: 45px
}

.services .title h2::before, .features .title h2::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 3px;
    margin-right: 10px;
    background-color:#505050
}

 .services .title p, .features .title p {
    font-family: 'Montserrat', sans-serif;
    color: #505050;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 2;
    margin-left: 20px
}

.services .overlay .content {
    background-color: #f0f0f0;
    padding-top: 40px;
    padding-bottom: 40px ;
    -webkit-clip-path: polygon(0 0%, 80% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0%, 80% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: url("#clip-shape1"); 
    clip-path: url("#clip-shape1");
}

.features .overlay .content {
    background-color: #f0f0f0;
    padding-top: 40px;
    padding-bottom: 40px ;
    -webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
    -webkit-clip-path: url("#clip-shape2"); 
    clip-path: url("#clip-shape2");
}

.services .overlay .content .item, .features .overlay .content .item {
    padding: 20px;
    margin-bottom: 20px 
}

.features .overlay .content .item {
    text-align: right
}

 .services .overlay .content .item img ,
.features .overlay .content .item img {
    height: 50px;
    text-align: right
}

.services .overlay .content .item h4,
.features .overlay .content .item h4 {
    margin-top: 20px;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-weight: bold;
    color: #505050
}

/* ========== End Section Services And Features  ==========
==========                                      ========== */

/* ========== Start Section Subscribe ==========
  ==========                        ========== */

.subscribe {
    padding: 100px 0
}

.subscribe h2 {
    font-size: 35px;
    margin-bottom: 50px;
}

.subscribe input[type="email"] {
    border: none;
    border-bottom: 1px solid #000;
    padding: 11px 0;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #3d3d3d;
    margin-bottom: 20px
}

.subscribe input[type="email"]:focus,
.subscribe input[type="submit"]:focus {
    outline: none;
    border-bottom-color: #b2a287
}

.subscribe input[type="submit"] {
    background: none;
    border: none;
    padding: 11px 0;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px
}

.subscribe input[type="submit"]:hover {
    color:#b2a287
}

.subscribe p {
    font-family: 'Montserrat', sans-serif
}

/* ========== End Section Subscribe  ==========
  ==========                        ========== */

/* ========== Start Section Our Team  ==========
  ==========                        ========== */

.team {
    background-image: url(../images/bg-team1.jpeg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
    position: relative
}

.team .overlay {
    background-color: rgba(255, 255, 255, 0.9);
    padding-bottom: 60px
}

.team h2 {
    font-size: 50px;
    letter-spacing: -1px;
    word-spacing: 4px;
    text-transform: uppercase;
    color: #505050;
    margin: 60px 0;
}

.team .overlay p {
    position: absolute;
    top: 4%;
    left: 26%;
    font-family: 'Montserrat', sans-serif;
    font-size: 100px;
    font-weight: Bold;
    opacity: 0.3;
    color: #c9c9c9;
    transform: rotate(-90deg);
    z-index: 0;
}

.team h2::before, .team h2::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 3px;
    background-color: #505050;
}

.team h2::before{
    margin-right: 20px
}

.team h2::after{
    margin-left: 20px
}

.team .item {
    z-index: 5
}

.team .item .content::after {
    content: "";
    display: block;
    width: 240px;
    height: 350px;
    position: absolute;
    top: 32px;
    left: 34px;
    z-index: -1;
    border: 2px solid #2a2a2a
}

.team .item .content img {
    outline: 4px solid rgba(255, 255, 255, 0.6);
    outline-offset: -4px;
    -webkit-filter: grayscale(50%); 
    -moz-filter: grayscale(50%); 
    -o-filter: grayscale(50%); 
    filter: grayscale(50%)
}

.team .item .content img:hover {
    -webkit-filter: grayscale(10%); 
    -moz-filter: grayscale(10%);
    -o-filter: grayscale(10%);
    filter: grayscale(10%);
}

.team .item .content h4 {
    font-family: 'Lora', serif;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0px;
    margin-top: 6px;
    margin-left: 36px;
}

.team .item .content span {
    position: absolute;
    top: 39%;
    right: 6%;
    transform-origin: 0 16%;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    font-size: 11px;
    text-transform: uppercase;
    transform: rotate(-90deg)
}

.team .item .content span::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 1px;
    margin-right: 10px;
    background-color: #000
}

.team .item .content .social {
    position: absolute;
    bottom: 8px;
    right: 116px;
}

.team .item .content .social i {
    padding-left: 10px;
    cursor: pointer
}

/* ========== End Section Our team  ==========
   ==========                     ==========*/

/* ========== Start Section Video  ==========
  ==========                     ==========*/

.video {
    background-image: url(../images/bg-video.jpeg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
    color: #fff
}

.video .overlay {
    background-color: rgba(11, 11, 11, 0.8);
    padding: 100px 0
}

.video .overlay h3 {
    font-size: 35px;
    margin-bottom: 50px;
    color: #e6ded3
}

.video .overlay a {
    display: inline-block;
    color:#9d7c48;
    width: 100px;
    height: 100px;
    border: 2px solid #9d7c48;
    border-radius: 50%;
}

.video .overlay a i {
    line-height: 100px;
    margin-left: 10px
}

.video .overlay h4 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    margin-top: 40px

}

/* ========== End Section Video  ==========
  ==========                    ==========*/

/* ========== Start Section Testimonials  ==========
  ==========                             ==========*/

.testimonial {
    margin-top: 50px;
    padding: 100px 0;
}

.testimonial .container {
    width: 100%;
    padding-left: 0;
    padding-right: 0
}

.testimonial .title {
    border-right: 4px solid #2e2e2e
}

.testimonial .title span {
    position: absolute;
    top: -3%;
    left: 0%;
    font-family: 'Montserrat', sans-serif;
    font-size: 100px;
    font-weight: Bold;
    opacity: 0.3;
    color: #c9c9c9;
    transform: rotate(-90deg);
    z-index: 0;
}

.testimonial .title h2 {
    font-size: 50px;
    letter-spacing: -1px;
    word-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 40px;
    margin-top: 5px;
    color: #505050;
}

.testimonial .title h2::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 3px;
    margin-right: 10px;
    margin-left: -15px;
    background-color: #505050;
}

.testimonial .title h2 strong {
    margin-left: 50px
}

.testimonial .title p {
    font-family: 'Montserrat', sans-serif;
    color: #505050;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 2;
    margin-left: 20px;
}

.carousel-inner .item  img {
    outline: 4px solid #b2a287;
    outline-offset: -8px;
    -webkit-filter: grayscale(30%);
    -moz-filter: grayscale(30%); 
    -o-filter: grayscale(30%); 
    filter: grayscale(30%);
}

.testimonial .content .carousel-control {
    opacity: 1;
    text-shadow: none;
    position: static
}

.testimonial .content .carousel-control.left,
.testimonial .content .carousel-control.right{
    background-image: none
}

.testimonial .content .carousel-control i {
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    color: #1f1f1f;
    border: 1px solid #1f1f1f
}

.testimonial .content .carousel-control .fa-chevron-left {
    top: 187px;
    left: 28px;
}

.testimonial .content .carousel-control .fa-chevron-right {
    top: 187px;
    left: 80px;
}

.testimonial .content .item i {
    position: absolute;
    top: 0;
    left: 15px;
    font-size: 40px;
    color: #e4e4e4;
    opacity: .4;
    z-index: -1
}

.testimonial .content .item p {
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0 10px;
    line-height: 2;
    font-style: italic;
    font-weight: 600;
}

.testimonial .content .item span {
    font-family: 'Montserrat', sans-serif;
    display: inline-block;
    letter-spacing: 1px;
    margin-left: 15px;
    margin-top: 20px;
    text-transform: uppercase;
    color: #636363;
    font-weight: 600;
}

.testimonial .content .item span::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 1px;
    background-color: #000;
    margin-right: 10px
}

/* ========== End Section Testimonials  ==========
  ==========                           ========== */

/* ========== Start Section Blog ==========
  ==========                   ========== */

.blog {
    padding: 60px 0;
    background-color: #f7f7f7
}

.blog .title h2 {
    font-size: 50px;
    letter-spacing: -1px;
    word-spacing: 4px;
    text-transform: uppercase;
    color: #505050;
    margin-bottom: 20px
}

.blog .title h2::before, .blog .title h2::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 3px;
    background-color: #505050;
}

.blog .title h2::before{
    margin-right: 20px
}

.blog .title h2::after{
    margin-left: 20px
}

.blog .title p {
    font-family: 'Montserrat', sans-serif;
    color: #505050;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 2;
    margin-bottom: 40px
}

.blog .content .col-md-4 {
    padding: 0 5px
}

.blog .content .item {
    overflow: hidden;
    margin-bottom: 20px;
}

.blog .content .item img {
    width: 100%;
    height: 360px;
    -webkit-object-fit: cover;
    -moz-object-fit: cover;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.blog .content .item:hover img {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3)
}

.blog .content .item .overlay {
    position: absolute;
    top: 0;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 20px);
    background-color: rgba(38, 38, 38, 0.5)
}

.blog .content .item:hover .overlay {
    background-color: rgba(38, 38, 38, 0.9);
}

.blog .content .item .overlay p {
    position: absolute;
    top: 15px;
    left: 10px;
    font-family: 'Montserrat', sans-serif;
    background-color: #fff;
    padding: 2px 10px;
    font-size: 12px;
    opacity: 0
}

.blog .content .item .overlay h3 {
    position: absolute;
    bottom: 20px;
    left: 10px;
    font-family: 'Lora', serif;
    font-weight: bold;
    letter-spacing: -1px;
    color: #f0f0f0
}

.blog .content .item .overlay .info{
    position: absolute;
    bottom: 60px;
    left: 20px;
    font-family: 'Montserrat', sans-serif;
    color: #f0f0f0;
    font-size: 12px;
    opacity: 0
}

.blog .content .item .overlay:hover .info, 
.blog .content .item .overlay:hover p {
    opacity: 1
}

.blog .item .overlay .info span {
    padding-left: 5px;
    padding-right: 15px
}

/* ========== End Section Blog ==========
 ==========                  ==========*/

/* ========== Start Section Contact ==========
 ==========                       ==========*/

.contact {
    background-image: url(../images/contact-bg.jpg);
    padding: 50px 0;
    background-size: cover;
    background-position: left bottom
}

.contact .form {
    background-color: #fff;
    padding: 20px
}

.contact .info {
    background-color: #ffffff;
    height: 478px;
    padding-top: 20px;
    padding-left: 20px
}

.contact h2 {
    font-size: 50px;
    letter-spacing: -1px;
    word-spacing: 4px;
    text-transform: uppercase;
    color: #505050;
    margin-bottom: 20px;
}



.contact form input,
.contact form textarea {
    border: none;
    border-bottom: 1px solid;
    padding: 10px 5px;
    margin-bottom: 30px;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    color: #000
}

.contact form input:focus,
.contact form textarea:focus {
    outline: none;
    border-color: #b2a287 
}

.contact form input[type="submit"] {
    background: none;
    font-size: 15px
}

.contact form input[type="submit"]:hover {
    color: #b2a287;
    border-color: #b2a287
}

.contact h3 {
    font-size: 25px;
    margin-bottom: 30px;
}

.contact .info div {
    font-family: 'Lora', serif;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 30px;
}

.contact .info div i {
    margin-right: 15px
}

/* ========== End Section Contact ==========
 ==========                     ========== */
/* ========== Start Section Instagram ==========
  ==========                        ========== */

.instgram {
    display: table;
    width: 100%
}

.instgram h3 {
    font-size: 35px;
    letter-spacing: 2px;
    padding: 60px 0
}

.instgram .nopadding {
    padding: 0
}

.instgram img {
    width: 100%
}

.instgram .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0
}

.instgram .overlay:hover {
    opacity: 1
}

/* ========== End Section Instagram ==========
  ==========                    ========== */

/* ========== Start Section Footer ==========
  ==========                    ========== */

footer h3 {
    font-size: 35px;
    letter-spacing: 2px;
    padding: 40px 0
}

footer h3::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 10px;
    background-color: #76aedb;
    margin-right: -80px;
    z-index: -1;
}

footer div i {
    padding: 0 20px;
    cursor: pointer       
}

footer div i:hover {
    color: #b2a287
}

footer .copyright {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    font-size: 12px;
    color: #a7a7a7;
    padding-top: 20px 
}

/* ========== End Section Footer ==========
  ==========                   ========== */

/* ========== Start Loading ==========
==========                 ========== */

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #abbaab; 
    background: -webkit-linear-gradient(45deg, #e5e5e5 , #fbfbfb);
    background: -moz-linear-gradient(45deg, #e5e5e5 , #fbfbfb);
    background: -o-linear-gradient(45deg, #e5e5e5 , #fbfbfb);
    background: linear-gradient(45deg, #e5e5e5 , #fbfbfb);   
    z-index: 99999
        
}

.pixel-loader {
    width: 10px;
    height: 10px;
    background: #f35626;
    color: #f35626;
    margin: 250px auto;
    box-shadow: 15px 15px  0 0, -15px -15px  0 0, 15px -15px  0 0, -15px 15px  0 0, 0 15px  0 0, 15px 0  0 0, -15px 0  0 0, 0 -15px 0 0;
    -webkit-animation: anim 2s linear infinite;
    animation: anim 2s linear infinite;
}

@-webkit-keyframes anim {
  0% {
    -webkit-filter: hue-rotate(0deg);
  }
  50% {
    box-shadow:  20px 20px  0 0, -20px -20px  0 0,20px -20px  0 0, -20px 20px  0 0, 0 10px  0 0, 10px 0  0 0,-10px 0  0 0, 0 -10px 0 0;
  }
  75% {
    box-shadow: 20px 20px  0 0, -20px -20px  0 0, 20px -20px  0 0, -20px 20px  0 0, 0 10px  0 0, 10px 0  0 0, -10px 0  0 0, 0 -10px 0 0;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-filter: hue-rotate(360deg);
  }
}

@keyframes anim {
  0% {
    -webkit-filter: hue-rotate(0deg);
  }
  50% {
    box-shadow: 20px 20px  0 0, -20px -20px  0 0, 20px -20px  0 0, -20px 20px  0 0, 0 10px  0 0, 10px 0  0 0, -10px 0  0 0, 0 -10px 0 0;
  }
  75% {
    box-shadow: 20px 20px  0 0, -20px -20px  0 0, 20px -20px  0 0, -20px 20px  0 0, 0 10px  0 0, 10px 0  0 0, -10px 0  0 0, 0 -10px 0 0;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-filter: hue-rotate(360deg);
  }
}

/* ========== End Loading ==========
 ==========             ========== */

/* ========== Start Media Query ==========
  ==========                  ========== */

@media (max-width: 767px) {
    
    header { margin: 40px 0 0 }
    
    .owl-theme .item .content h2 {
        font-size: 7vw;
    }
    
    .border-top .brand {
        margin-left: 10px
    }
    
    .border-top .menu {
        margin-right: 10px
    }
    
    .owl-theme .owl-controls .owl-page span.owl-numbers::after { 
        width:15px;
        margin-right: 5px;   
    }

    .owl-theme .owl-controls .owl-page.active span.owl-numbers::after,
    .owl-theme .owl-controls .owl-page:hover span.owl-numbers::after {
        width: 20px;
        margin-right: 0
    }
    
    .owl-theme .owl-controls .owl-buttons {
        display: none
    }
    
    .about .content h2 {
        margin-left: 0;
        font-size: 8.6vw
    }
    .about .content h2::before {
        width:20px
    }
    
    .about .content span {
        top: -19px;
        left: -17px;
        font-size: 75px;
    }
    
    .about .img img:first-of-type {
        width: 100%
    }
    
    .portfolio .title span {
        top: -20px;
        left: 29px;  
        font-size: 59px
    }
    
    .portfolio .title h2 {
        font-size: 7vw
    }
    
    .portfolio .title h2::before {
        width: 20px
    }
    
    .portfolio .title h2 strong {
        margin-left: 0
    }
    
    .portfolio ul {
        display: flex;
        
    }
    
    .portfolio .filter {
        padding-left: 5px;
        margin: 15px 0
    }
    
    .portfolio .filter li {
        padding: 0 10px;
        font-size: 2vw;
    }
    
    .portfolio .filter li:hover::after {
        width: 0
    }
    
    .services .overlay .content {
        background: none;
        text-align: center
    }

    .features,
    .features .overlay,
    .features .overlay .content {
        background: #fff;
        background-color: #fff;
    }

    .features .overlay .content {
        text-align: center;
        -webkit-clip-path: none;
        clip-path: none;
    }
    
    .features .overlay .content .item {
        text-align: center
    }
    
    .services .title span {
        top: -3px;
        left: 9px;
        font-size: 9vw;
    }
    
    .features .title span {
        top: 2px;
        left: 21px;
        font-size: 9vw;
    }
    
    .services .title h2, .features .title h2 {
        margin-left: 0;
        font-size: 6vw
    }
    
    .features .title h2::before,
    .services .title h2::before {
        width: 30px
    }
    
    .subscribe h2 {
        font-size: 5vw
    }
    
    .subscribe input[type="submit"] {
        border: 1px solid;
        margin-bottom: 10px
    }
    
    .team h2 {
        font-size: 7vw
    }
    
    .team h2::before, .team h2::after {
        width: 30px
    }
    
    .team .item .content {
        text-align: center
    }
    
    .team .item .content::after {
        display: none
    }
    
    .team .item .content img {
        margin: 20px auto
    }
    
    .team .item .content h4 {
        margin-left: 0
    }
    
    .team .item .content span {
        position: static
    }
    
    .team .item .content span::before {
        display: none
    }
    
    .team .item .content .social {
        position: static;
        margin: 10px 0
    }
    
    .testimonial .title {
        border: none
    }
    
    .testimonial .title h2::before {
        width: 30px
    }
    
    .testimonial .title h2 {
        font-size: 7vw
    }
    
    .testimonial .title h2 strong {
        margin-left: 0
    }
    
    .carousel-inner .item  img {
        margin-top: 20px
    }
    
    .blog .content .item .overlay h3 {
        font-size: 4vw
    }
}

@media (min-width: 488px) and (max-width: 767px) {
    
    .services .content .col-xs-12,
    .features .content .col-xs-12 {
        width: 50%
    }
    
    .testimonial .item .col-xs-12 {
        width: 50%
    }
    
    

}

@media (min-width: 768px) and (max-width: 991px) {
    .about .content h2 {
        margin-left: 0
    }
    
    .about .content h2::before {
        width:40px
    }
    
    .about .img img:first-of-type {
        width: 100%
    }
    
    .portfolio .title h2 strong {
        margin-left: 0
    }
    
    .portfolio .title span {
        top: -4px;
        left: 11px;  
        font-size: 79px
    }
    
    .portfolio ul {
        display: flex
    }
    
    .portfolio .filter {
        width: 100%;
        margin: 15px auto
    }
    
    .portfolio .filter li {
        padding: 0 20px
    }
    
    .portfolio .filter li:hover::after {
        width: 0
    }
    
    .features .title h2, 
    .services .title h2 {
       font-size: 3.5vw; 
    }
    
    .features .overlay .content .item h4,
    .services .overlay .content .item h4 {
        font-size: 18px;
        letter-spacing: 1px;
    }
    
    .team .item .content span {
        right: 1%
    }
    
    .team .item {
        margin-bottom: 20px
    }
    
    .testimonial .content .carousel-control .fa-chevron-left,
    .testimonial .content .carousel-control .fa-chevron-right{
        top: 230px
    }
    
    .testimonial .title h2 {
        font-size: 3.6vw
    }
    
    .testimonial .title h2::before {
        width: 30px
    }
    
    .contact .info {
        padding-left: 0
    }
        
}

@media (min-width: 992px) and (max-width: 1199px) {
    .portfolio .title h2 strong {
        font-size: 4.3vw
    }
    
    .team .item .content span {
        top: 39%;
        right: -13%;
        transform-origin: 0 16%;
    }
    
    .testimonial .title h2 {
        font-size: 3.6vw
    }
    
    .contact .info {
        padding-left: 0
    }
}

/******* End Media Query ******
********               ******/

/** Line 2157 **/