/*******************************************
***          YT Framework: less          ***
*******************************************/

// --* Bonus Pages Templates *------------------
// ---------------------------------------------
.fontsize_l{font-size: 18px;font-weight: 400;}
.g-underline{font-size: 180%;font-weight: 400;}

// 1.Page Join Now
ul.c-step{list-style: none;margin: 0 auto 4em auto; counter-reset: section;display: table;position: relative;z-index: 1;padding: 0;
    &:before{content: "";width:100%;height: 10px;background: #DEDEDE;
        position: absolute;z-index: 2;left: 0;top: 50%;margin-top: -5px;
        .border-radius(10px); .box-shadow(1px 1px 1px rgba(0,0,0,0.1) inset);
    }
    li{list-style: none;margin: 0 50px;padding-top: 50px;line-height: 25px;display: inline-block;position: relative;z-index: 3;text-align: center;
        &:before,
        &.active:before{
               counter-increment:section; content: counter(section);
               width:35px;height: 35px;line-height: 35px;
               font-size: 20px;font-weight: 800;text-align: center;display: inline-block;
               color: #fff;
               .border-radius(3px);.box-shadow(~"0 1px 1px 0px rgba(0, 0, 0, 0.3) inset, 0 0 0 4px #DEDEDE");#gradient .vertical( #AAC3BF ,#719088);
        }
        &.active:before{#gradient .vertical(lighten(@linkColor, 10%),@linkColor);}
        &.active{
            h3{color: @linkColor;}
        }
        h3{margin: 10px 0 0;font-size: 16px;}
        span{font-size: 13px;}
    }
}

.table-underline{
        thead{border-bottom: 2px solid #404040;font-size: 14px;  #gradient .vertical(#F5F5F5,#CCCCCC);}
        tbody{
          tr:hover{background: #FAFFED;}
        }
}

// Page contact
.page-contact{
       .list-address{
              margin-top: 30px;
              margin-bottom: 30px;
              .item{
                     background: #f2f2f2;
                     padding: 15px 0;
                     display: block;
                     overflow: hidden;
                     .icon{
                            display: inline-block;
                            height: 65px;
                            width: 65px;
                            border-radius: 50%;
                            border: 1px solid #b7b7b7;
                            text-align: center;
                            line-height: 65px;
                            margin: 0 15px;
                            float: left;
                     }
                     .text{
                            display: block;
                            overflow: hidden;
                            margin-top: 15px;
                            color: #222;
                            font-size: 14px;
                            a{color: #222;}
                     }
              }
       }
      .form-contact{
              .ctajax-wrap{
                     margin: 0 -15px;
                     width: auto;
                     .ctajax-element{
                            padding: 0 15px;
                            .el-inner{
                                   padding: 0;
                                   .el-ctajax-form{
                                          .el-control{
                                                 margin: 0 0 20px;
                                                 position: relative;
                                                 .ca-tooltip, .el-ok{
                                                        position: absolute;
                                                        top: 5px;
                                                        right: 15px;
                                                 }
                                          }
                                          textarea{
                                                 width: 100%;
                                          }
                                          input{
                                                 width: 100%;
                                                 &#cainput_submit{
                                                        display: inline-block;
                                                        width: auto;
                                                        background: @background1;
                                                        border-radius: 0;
                                                        border: none;
                                                        margin: 0;
                                                        font-size: 13px;
                                                        text-transform: uppercase;
                                                        &:hover{
                                                               background: darken(@background1, 20%);
                                                        }
                                                 }
                                          }
                                   }
                            }
                     }
              }
      }
      
}

// 3.Page Services
#g-pageservices{
       .features {
          .fa{
              background: #777;height: 75px;width:75px;text-align: center;line-height: 67px;border: 3px solid #eee;
              .border-radius(10px);
          }
       }
       .yt-icon{float: left;}
       .col-sm-4{margin: 1em 0;}
       .our {h3 {margin-top: 1em;}}

     article{
          h3{font-weight: normal;}
          a.detail{
              &:after{content: "\f105";font-family: FontAwesome;display: inline-block;color: #fff;background: @linkColor;margin: -3px 3px 0;height:14px; width:14px;line-height: 14px; font-size: 12px; text-align: center;.border-radius(14px);}
              &:hover{
                   &:after{color: #fff;}
              }

          }
     }
     h2{font-size: 180%;margin-bottom: 1em;}

     h3 {

         &.accordion-heading.active {color: @linkColor;}
     }
     hr{height: 5px;background: #eee;border-top-color: #ddd;margin: 3em 0;}
     .testimonial-avatar{
          [class^="icon-"], [class*=" icon-"]{border: none;}
     }
}

// 4.Page Columns
#g-pagecolumn{
     hr{height: 5px;background: #eee;border-top-color: #ddd;margin: 4em 0;float: left;width: 100%;}
}
//5.Gallery
.item-page {
    .yt-gallery {
        position: relative;
        z-index: 0;
        .gallery-list{
              .item-gallery{
                     position: relative;
                     h4.item-gallery-title{display: none;}
                     h3.item-gallery-title{
                            position: absolute;
                            top: 20%;
                            left: 50%;
                            .lib-tranlate-x();
                            text-align: center;
                            text-transform: uppercase;
                            font-size: 12px;
                            color: #fff;
                            background: none;
                            font-weight: bold;
                            z-index: 6;
                            opacity: 0;
                     }
                     .item-gallery-hover1{
                            z-index: 4;
                            background-color: transparent !important;
                     }
                     .image-overlay{
                            background: @background1;
                            opacity: 0;
                            z-index: 2;
                     }
                     &:hover{
                            h3.item-gallery-title{
                                   opacity: 1;
                            }
                            .image-overlay{
                                   opacity: 0.6;
                            }
                     }
              }
        }
        
        .yt-gallery-tabbed {
            margin-bottom: 54px !important;
            .tabnav {
                li {
                    padding: 0; margin: 0;
                    span {
                        margin: 0; padding: 0 20px; border: #ebebeb 1px solid;
                        font-size: 12px; font-weight: bold; text-transform: uppercase;
                        border-radius: 5px; height: 42px; line-height: 42px; background: none;
                        color: #222; margin-right: 10px;
                    }
                    &.active {
                        span {background: @background1; color: #fff; border-color: @linkColor;}
                    }
                }
            }
        }
        .gallery-list {
            margin: 0 -5px; width: auto;
            li {
                padding: 0 5px 10px;
            }
        }
    }
}

// 6.Page What's new
#g-pagewhatnew{
       .yt-lightbox.image-none{padding: 3px;background: #fff;.box-shadow(0 0 5px rgba(0, 0, 0, 0.1));display: table;margin: 0 auto 10px;}
        h3.title{margin-bottom: 1em;border-bottom: 1px solid #eee;padding-bottom: 5px;font-size: 180%;}
       .yt-lightbox a  img{width: auto;}

}
.categories-list .collapse.in {width: 100%;}

// 7. g-joinnow

#g-joinnow{
       div.yt-tabs.boxed.style-red ul.nav-tabs li.active{
              background: @background1;
       }
       .yt-pricing .style3.column .pricing-basic{
              background: @background1;
       }
       .yt-pricing .style3.column .pricing-money{background: @background1;}
       .yt-pricing .style3.column .pricing-basic h2{border-color: darken(@linkColor, 10%);}
       .yt-pricing .style3.column .pricing-money h1{
              background: darken(@background1, 20%);
       }
       .yt-pricing .style3.column .pricing-bottom a{background: @background1}
       ul li.yt-accordion-group h3.accordion-heading.active{
              color: @linkColor !important;
       }
       ul li.yt-accordion-group .active i{color: @linkColor !important}
}

//Page Coming Soon
.comingsoon {
    //position: static; left: 0; top: 0; right: 0; bottom: 0; display: block; width: 100%; height: 100%;
    background: url(../images/bg/bg-comingsoon.jpg) center center no-repeat; background-size: cover;
    #yt_comingsoon {
        margin: 15% 0; padding: 60px 0; text-align: center; color: #fff;
        .comingsoon-title { font-size: 32px; text-transform: uppercase; padding: 0 30px;margin: 0 0 30px;}
        .comingsoon-content {
              display: block;
              font-size: 13px;
              margin: 0 0 30px;
              padding: 0 30%;
              color: #e0e0e0;
       }
        .comingsoon-countdown {
              > div {
                     display: inline-block;
                     padding: 0 30px;
                     border-right: 1px solid #706866;
                     &:last-child{
                            border: none;
                     }
                     span{
                            display: block;
                            &.number{
                                   font-size: 50px;
                                   color: #fff;
                                   margin: 0 0 10px;
                            }
                            &.string{
                                   font-size: 16px;
                                   text-transform: uppercase;
                                   color: #808080;
                            }
                     }
              }
        }
    }
}

// faq-page
#faq-page{
	.header{
		padding: 0 0 20px;
		margin: 0 0 20px;
		border-bottom: 1px solid #ebebeb;
		h3.title{
			font-size: 46px;
			color: #222;
		}
	}
	.content{
		.yt-accordion{
			.yt-accordion-group{
				margin: 0 0 15px;
				.accordion-heading{
					background: #f6f6f6 !important;
                    font-size: 12px !important;
                    text-transform: uppercase;
                    border: 1px solid #ebebeb;
                    padding: 25px 15px;
                    color: #666 !important;
                    i{
                     margin: 0 10px;
                     color: #222 !important;
                    }
                    &.active{
                     color: #222 !important;
                    }
				}
				.yt-accordion-inner{
					
				}
			}
		}
	}
}
//Others

.pager.pagenav {
    li {
        a {
            background: #ebebeb; border-color: darken(#ebebeb, 10%); color: #b7b7b7;
            &:hover {
                background: @background1; border-color: darken(@linkColor, 10%); color: #fff;
            }
        }
    }
}

.btn-hamburger {
    margin: 10px; padding: 0; background: none; color: #252525; font-size: 24px; position: relative; z-index: 10;
    &:hover {color: @linkColor; background: none;}
}

// Support RTL Languages
// --------------------------------------------------
.rtl{
       #g-pageportfolio [class*="span"] .port-item-content a.detail:after,
       #g-pageservices article a.detail:after{content: "\f104";}

       //Join Now
       ul.yt-accordion li.accordion-group h3.accordion-heading .fa-plus-circle {margin-right: 0px;margin-left: 5px;}
    #g-joinnow {
        ul.c-step {margin: 0 auto;}
    }
    #g-pageservices .yt-icon {float: right; margin: 0px 0px 1em 1em;}
    div.yt-tabs ul.nav-tabs li {margin-right: 0; margin-left: 5px;}
    .item-page {
        .yt-gallery {
            .yt-gallery-tabbed {
                .tabnav {
                    li {
                        float: right;
                        margin: 0px 0px 5px 5px;
                    }
                }
            }
        }
    }

    #g-about {
        &.style1 {
            .block-main-content {text-align: right;}
            .yt-content-slider, .client-say {direction: ltr;}
        }

        &.style2 { direction: ltr;
            .yt-member-icons {direction: rtl;}
        }

        &.style3 {
            direction: ltr;
            .block-main-content, .our-skills {text-align: right;}
        }

        &.style5 {
            .yt-section {
                .yt-section-content {
                    .block-main-content {
                        .title {
                            h3 {padding: 0 0 0 15px;}
                        }
                        img.pull-left {margin: 0 0 0 30px;}
                    }
                    .block-list-content {
                        .title {
                            h3 {padding: 0 0 0 15px;}
                        }
                    }
                    .block-middle {
                        .row {
                            .yt-member {
                                .yt-member-photo {
                                    float: right; margin: 0 0 0 20px;
                                }
                                .yt-member-info {text-align: right !important; float: right;}
                                .yt-member-icons {text-align: right !important;.yt-memeber-icon {margin: 0 0 0 6px;}}
                            }
                        }
                    }
                    .client-say {
                        direction: ltr;
                        div {
                            h3 {float: right;}
                            .owl-controls {right: auto; left: 45px;}
                            .all_testimonial {
                                .content_testimon {
                                    text-align: right !important;
                                }
                            }
                        }
                    }
                }
            }

        }
    }
    div.contact-ajax .ctajax-wrap.style1 .ctajax-element .el-info-contact .cf i, div.contact-ajax .ctajax-wrap.style3 .el-info-contact .cf i {float: right; margin-right: 0; margin-left: 10px;}
    div.contact-ajax .ctajax-wrap.style3 .el-info-contact .cf {line-height: 40px;}
    .item-page .pager ul.pagination li {float: right;}

}
