/*!
Theme Name: GTL Portfolio
Theme URI: https://greenturtlelab.com/downloads/gtl-portfolio/
Author: Greenturtlelab
Author URI: http://www.greenturtlelab.com/
Description: Gtl Portfolio is a simple, beautifully designed responsive multi-purpose WordPress theme. This theme can be easily customized for business, corporate, portfolios, ecommerce (WeeCommerce) events, yoga, blog, construction, education, portfolio, travel and tourism, news, beauty, fitness and many more websites. It is perfect for the do-it-yourself types, agencies and freelancers. We support this theme via online chat, email and the WordPress support forum. Lyampe is responsive, SEO Friendly, Gutenberg friendly and is a child theme of the GTL Portfolio theme.
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gtl-portfolio
Template: gtl-multipurpose
Tags: blog, one-column, two-columns, left-sidebar, right-sidebar, custom-header, custom-background, custom-logo, custom-menu, custom-colors, threaded-comments, translation-ready, featured-images, theme-options, full-width-template, e-commerce, portfolio

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

*/
@media (min-width: 1281px) {
.slide1 .flex_caption1, .top_slider .slide2 .flex_caption1 {
    margin-left: -600px !important;
}
}
.top_slider .slide1 .flex_caption1 .title1,.top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3{
	font-size: 55px !important;
}

p.title2.captionDelay4.FromTop{
	margin: 0 10px;
}




/*----------------------------------------*/
/*  1. Template default css
/*----------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
html,
body {
    height: 100%;
}
.float-left {
    float: left
}
.float-right {
    float: right
}
.alignleft {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px
}
.alignright {
    float: right;
    margin-left: 15px;
    margin-bottom: 15px
}
.aligncenter {
    display: block;
    margin: 0 auto 15px
}
a:focus {
    outline: 0px solid
}
img {
    max-width: 100%;
    height: auto
}
.fix {
    overflow: hidden
}
p {
    margin: 0 0 15px;
    font-family: 'Lato', sans-serif;
    line-height: 24px;
    font-size: 14px;
    
}
p:last-child {
    margin-bottom: 0;
}
a:focus,
a:hover {
    text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 10px;
    font-family: 'Montserrat';
    color: #444;
}
a {
    transition: all 0.3s ease 0s;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #1879fd;
}
a:active,
a:hover {
    outline: 0 none;
}
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0
}
.clear {
    clear: both
}
body {
    font-family: 'Montserrat';
    background: #fff none repeat scroll 0 0;
    color: #444;
}
.height-100vh {
    height: 100vh;
}
.table,
.table-cell {
    display: table;
    height: 100%;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
}
.table {
    margin-bottom: 0;
}
.relative {
    position: relative
}
/*colored background*/

.white-bg {
    background: #fff;
}
.gray-bg {
    background: #f1f1f1;
}
.black-bg {
    background: #111111;
}
/*colored text*/

.white-text {
    color: #fff;
}
.gray-text {
    color: #7a7a7a
}
.dp-gray-text {
    color: #535353
}
i {
    transition: all .3s ease 0s;
}
/*************************
    Margin top
*************************/

.mt-0 {
    margin-top: 0
}
.mt-100 {
    margin-top: 100px;
}
.mb-52 {
    margin-bottom: 52px
}
.mb-60 {
    margin-bottom: 60px;
}
.mtb-60 {
    margin: 60px 0;
}
/*************************
    Padding top
*************************/

.pt-60 {
    padding-top: 100px;
    padding-bottom: 100px;
}
.pt-90 {
    padding-top: 100px;
    padding-bottom: 100px;
}
.pt-100 {

    padding-top: 100px;
    padding-bottom: 100px;

}
.pb-120 {
    padding-bottom: 120px
}
.pt-120 {
    padding-top: 120px
}
.ptb-220 {
    padding: 220px 0
}
.ptb-200 {
    padding: 200px 0
}
.ptb-150 {
    padding: 150px 0
}
.ptb-120 {
    padding: 120px 0;
}
.ptb-100 {
    padding: 100px 0;
}
.ptb-110 {
    padding: 110px 0;
}
.pt-120 {
    padding-top: 120px
}
.pb-80 {
    padding-bottom: 80px;
}
.pb-70 {
    padding-bottom: 70px;
}
.pb-90 {
    padding-bottom: 90px;
}
.pb-100 {
    padding-bottom: 100px;
}
.pb-40 {
    padding-bottom: 40px;
}
.pb-150 {
    padding-bottom: 150px;
}
.pt-200 {
    padding-top: 200px;
}
/*************************
tag-padding
*************************/

.ht-pt {
    padding: 8px 0 14px;
}

/*............. 3. About area ................*/

.about-rightsidebar > h2 {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 32px;
    text-transform: capitalize;
}
.about-rightsidebar span {
    display: block;
    font-size: 20px;
    font-weight: 300;
    margin-top: 15px;
}
.progress-bar > span {
    background: #444 none repeat scroll 0 0;
    float: right;
    font-size: 11px;
    margin-top: -26px;
    padding: 0 5px;
    position: relative;
}
.progress-bar > span::before {
    border: medium solid transparent;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    width: 0;
}
.progress-bar > span::before {
    border-top-color: #444;
    border-width: 5px;
    left: 50%;
    margin-left: -5px;
}
.progress {
    background-color: #f0f0f0;
    border-radius: 0;
    box-shadow: none;
    height: 5px;
    margin-bottom: 60px;
    overflow: visible;
    position: relative;
}
.lead {

    padding-bottom: 25px;

}
.progress .lead {
    color: #666;
    font-size: 13px;
    font-weight: 500;
    left: 0;
    position: absolute;
    top: -23px;
    z-index: 99;
}
.progress-bar {
    background-color: #444;
    
    float: left;
    font-size: 12px;
    height: 100%;
    line-height: 20px;
    transition: width 0.6s ease 0s;
    width: 0;
}
.progress:last-child {
    margin-bottom: 0;
}
.about-bottom {
    overflow: hidden;
    padding-top: 30px;
    margin-top: 30px;
}
/*............. 4. Service ................*/

.single-service {
    margin-bottom: 30px;
    padding: 60px 30px;
    transition: all 0.3s ease 0s;
}
.single-service i {
    font-size: 35px;
    margin-bottom: 15px;
}
.single-service > h3 {
    font-size: 24px;
    font-weight: 300;
    transition: all 0.3s ease 0s;
}
.single-service > p,
.single-service > i {
    transition: all 0.3s ease 0s;
}
.section-title > h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 56px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  position: relative;
  text-transform: capitalize;
}
.section-title {
  margin: auto auto 55px;
  width: 65%;
}
.section-title > p {
    transition: all 0.3s ease 0s;
}
.section-title > h2::before {
  background: #666666 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  transition: all 0.4s ease 0s;
  width: 75px;
}
.single-service:hover {
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.15);
}
/*............. 5. Portfolio ................*/

.portfolio-menu {
    margin-bottom: 50px;
}
.portfolio-menu button {
    background-color: transparent;
    border: 1px solid #c4c4c4;
    border-radius: 3px;
    color: #666666;
    font-family: "Oxygen", sans-serif;
    font-size: 12px;
    font-weight: 700;
    height: 35px;
    line-height: 20px;
    margin-right: 18px;
    padding: 0 20px;
    text-transform: capitalize;
    transition: all 0.3s ease 0s;
}
.portfolio-menu button:hover,
.portfolio-menu button.active {
    background-color: #444;
    border: 1px solid #444;
    color: #fff;
}
.portfolio {
    margin-bottom: 30px;
    position: relative;
}
.hover-style::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    position: absolute;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
    bottom: 0;
    left: 0;
    opacity: 0;
    right: 0;
    top: 0;
}
.hover-style:hover::before {
    opacity: 0.8;
}
.hover-style {
    display: block;
    position: relative;
}
.portfolio-img > img {
    width: 100%;
}
.portfolio-view {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
.hover-style .img-poppu::before,
.hover-style .img-poppu::after {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 30px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 1px;
}
.hover-style .img-poppu::after {
    height: 1px;
    width: 30px;
}
.hover-style .img-poppu {
    border: 1px solid #fff;
    color: #fff;
    display: inline-block;
    height: 60px;
    opacity: 0;
    padding: 5px 25px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    transform: translateY(20px);
    width: 60px;
    z-index: 99;
}
.portfolio:hover .img-poppu {
    opacity: 1;
    transform: translateY(0px);
}
.portfolio-title {
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out 0s;
    z-index: 2;
}
.title-style-1 {
    bottom: 0;
    padding: 0 20px;
    top: inherit;
}
.portfolio:hover .portfolio-title {
    opacity: 1;
}
.portfolio-title h3 {
    font-size: 19px;
    font-weight: 500;
    transform: translateY(-10px);
    transition: all 0.4s ease-in-out 0s;
}
.title-style-1 h3 a,
.title-style-1 span {
    color: #fff;
}
.title-style-1 h3 a:hover {
    color: #666;
}
.portfolio-title span {
    display: inline-block;
    font-size: 15px;
    line-height: 16px;
    transform: translateY(10px);
    transition: all 0.4s ease-in-out 0s;
}
.portfolio:hover .portfolio-title h3,
.portfolio:hover .portfolio-title span {
    transform: translateY(0px);
}
.hover-style .img-poppu:hover::before,
.hover-style .img-poppu:hover::after {
    background: #000 none repeat scroll 0 0;
}
.hover-style .img-poppu:hover {
    background: #fff none repeat scroll 0 0;
}
/*............. 6. Counter ................*/

.single-count {
    text-align: center;
}
.count-icon span {
    font-size: 35px;
}
.count-title h2 {
    color: #666;
    font-size: 40px;
    font-weight: 300;
    margin: 15px 0;
}
.count-title span {
    font-size: 16px;
    letter-spacing: 1px;
    margin: 0;
    text-transform: capitalize;
}
/*............. 7. Team ................*/

.team-wrapper {
    border: 1px solid #e7e7e7;
    margin-bottom: 30px;
}
.team-member {
    position: relative;
    overflow: hidden;
}
.team-member::before {
    background: transparent none repeat scroll 0 0;
    content: " ";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
    width: 100%;
    z-index: 1;
}
.team-member > img {
    width: 100%;
}
.team-icon {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    bottom: -40px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    transition: all 0.3s ease 0s;
    z-index: 99;
    padding: 10px 0;
}
.team-icon {} .team-wrapper:hover .team-icon {
    opacity: 1;
    bottom: 0px;
}
.team-icon > a {
    border: 1px solid transparent;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    margin: 0 5px;
    opacity: 0;
    text-align: center;
    visibility: hidden;
    width: 30px;
}
.team-wrapper:hover .team-icon > a {
    opacity: 1;
    visibility: visible;
}
.team-icon > a:hover {
    border: 1px solid #fff;
}
.team-wrapper:hover .team-member::before {
    background: rgba(33, 40, 45, 0.55) none repeat scroll 0 0;
}
.team-info {
    padding: 15px 0;
}
.team-info h3 {
    font-size: 20px;
    text-transform: uppercase;
}

/*--------  13. Breadcrumb style  -----------*/

h2.page-title {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.breadcrumbs li {
    display: inline-block;
}
.breadcrumbs > ul li {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}
.breadcrumbs > ul li a {
    color: #fff;
    padding-right: 17px;
    position: relative;
}
.breadcrumbs > ul li a:hover {
    color: #888888;
}
.breadcrumbs ul li a.active::after {
    color: #888888;
}
.breadcrumbs ul li a::after {
    background-color: #fff;
    content: "";
    font-size: 8px;
    height: 2px;
    margin-left: 11px;
    position: absolute;
    right: 3px;
    top: 7px;
    width: 7px;
}
.ptrn-3 {
    background: rgba(0, 0, 0, 0) url("../../img/pattern/3.jpg") repeat scroll 0 0;
}
.pattern-bread h2.page-title {
    display: inline-block;
    float: left;
    margin-bottom: 0;
}
.pattern-bread .breadcrumbs > ul {
    display: inline-block;
    float: right;
    margin-top: 5px;
}
.border-bread {
    border-bottom: 1px solid #f1f1f1;
    border-top: 1px solid #f1f1f1;
}
.bg-2.bread-bg {
    background-attachment: fixed;
    background-position: center center;
}

.navbar-toggle .icon-bar {
    background-color: #fff;
}

a#scrollUp {
  background: #666 none repeat scroll 0 0;
  bottom: 54px;
  color: #fff;
  font-size: 23px;
  height: 40px;
  line-height: 34px;
  position: absolute;
  right: 32px;
  text-align: center;
  width: 40px;
}


.progress .progress-bar {
    animation-name: animateBar;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .4s;
}
@keyframes animateBar {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0);}
}






.portfolio img {
    width: 100%;
}
.portfolio {
    margin-bottom: 30px;
    position: relative;
}
.portfolio-menu {} .portfolio-menu button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    font-family: "Dosis", sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0 15px;
    padding: 0;
    position: relative;
    text-transform: uppercase;
}
.portfolio-left-menu {} .portfolio-left-menu button:first-child {
    margin-left: 0
}
.portfolio-menu button::before {
    background: #464646 none repeat scroll 0 0;
    bottom: -8px;
    content: "";
    height: 2px;
    position: absolute;
    transform: scaleX(0);
    transition: all 0.3s ease 0s;
    width: 100%;
}
.portfolio-menu button:hover:before,
.portfolio-menu button.active:before {
    transform: scaleX(1);
}
.portfolio-title {
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0;
    transition: all 0.3s ease-in-out 0s;
}
.hover-style > .portfolio-img:before {
    background: rgba(0, 0, 0, 0.8);
    bottom: 15px;
    content: "";
    left: 15px;
    opacity: 0;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: all 0.4s ease-in-out 0s;
}
.hover-style:hover .portfolio-img {
    opacity: 1;
}
.portfolio-title h3 {
    font-size: 19px;
    font-weight: 500;
    transform: translateY(-10px);
    transition: all 0.4s ease-in-out 0s;
    color: #fff;
}
.portfolio-title span {
    color: #fff;
    display: inline-block;
    font-size: 15px;
    line-height: 16px;
    transform: translateY(10px);
    transition: all 0.4s ease-in-out 0s;
}
.portfolio:hover .portfolio-title {
    opacity: 1
}
.portfolio:hover .portfolio-title h3,
.portfolio:hover .portfolio-title span {
    transform: translateY(0px);
}
.view-more {} .view-more a {
    border: 1px solid #ddd;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 25px 9px;
    text-transform: uppercase;
}
.view-more a:hover {
    background: #444;
    color: #fff;
    border-color: #444
}
.title-style-1 {
    bottom: 0;
    padding: 0 20px;
    top: inherit;
}
.title-style-1 h3 {
    color: #fff;
}
.title-style-1 span {
    color: #fff;
}
.portfolio-img {
    display: block;
    position: relative
}
/* portfolio-style-2 */

.portfolio-style-2 {} .portfolio-style-2 .portfolio {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.portfolio-style-2 .portfolio-title h3,
.portfolio-style-3 .portfolio-title h3 {
    transform: translateY(0px);
}
.portfolio-style-2 .portfolio-title span,
.portfolio-style-3 .portfolio-title span {
    transform: translateY(0px);
}
.portfolio-style-2 .another-portfolio-title {
    opacity: 1;
    padding: 25px 18px;
    position: static;
    transform: translateY(0%);
}
.another-portfolio-title h3 {
    font-size: 19px;
    font-weight: 500;
    transition: all 0.4s ease-in-out 0s;
}
.another-portfolio-title span {
    color: #424242;
    display: inline-block;
    font-size: 15px;
    line-height: 16px;
    transition: all 0.4s ease-in-out 0s;
}
.hover-style .portfolio-img::before {
    background: #000 none repeat scroll 0 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    right: 0;
    top: 0;
}
.hover-style:hover .portfolio-img:before {
    opacity: 0.8;
}
.portfolio-view {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
.hover-style .img-poppu {
    border: 1px solid #fff;
    color: #fff;
    display: inline-block;
    height: 60px;
    line-height: 55px;
    opacity: 0;
    text-align: center;
    width: 60px;
    z-index: 99;
    font-size: 20px;
    border-radius: 50%;
    background-color: transparent;
}
.hover-style .img-poppu:hover {
    background-color: #fff;
    color: #333;
}
.portfolio:hover .img-poppu {
    opacity: 1;
}
.hover-style .img-poppu:after {
    height: 1px;
    width: 30px;
}
/* portfolio-style-3 */

.portfolio-style-3 {} .portfolio-style-3 .portfolio-title {
    left: 0;
    opacity: 0;
    padding: 35px 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.5s ease 0s;
}
.portfolio-style-3 .portfolio:hover .portfolio-title {
    opacity: 1;
}
.portfolio-style-3 .hover-style > a::before {
    display: none;
}
.portfolio-style-3 .portfolio-title h3 {
    color: #000;
}
.portfolio-style-3 .portfolio-title span {
    color: #000;
}
.portfolio-style-7 .portfolio {
    margin: 0
}
/* no gutter portfolio-column-4 */

.view-more.text-center.gutt-view {
    display: block;
    float: left;
    width: 100%;
}
.no-gutte .portfolio,
.no-gutte .grid-item {
    margin: 0;
    padding: 0;
}
/* portfolio details */

.portfolio-meta {} .portfolio-meta ul {
    background: #f8f8f8 none repeat scroll 0 0;
    border: 1px solid #e5e5e5;
    margin: 0;
    padding: 0 20px;
}
.portfolio-meta ul li {
    border-bottom: 1px solid #e5e5e5;
    color: #666;
    padding: 15px 0;
}
.portfolio-meta ul li:last-child {
    border-bottom: 0 none;
}
.portfolio-meta ul > li i {
    color: #444;
    font-size: 16px;
    line-height: normal;
    margin-right: 20px;
}
.portfolio-meta ul li span {
    color: #444;
    font-weight: bold;
    margin-right: 5px;
}
.portfolio-meta ul li {} .project-desc {
    margin-bottom: 30px;
}
.project-desc h3 {
    border-bottom: 1px solid #e5e5e5;
    color: #444;
    font-size: 24px;
    letter-spacing: 2px;
    line-height: 22px;
    margin: 0 0 20px;
    padding-bottom: 20px;
    text-transform: uppercase;
}
.post-share ul {
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    overflow: hidden;
    padding: 10px 0;
}
.post-share li {
    float: left;
    margin-right: 18px;
}
.post-share li a {
    display: block;
    font-size: 16px;
}
.portfolio-img > img {
    width: 100%;
}
 .grid.no-gutte {
    margin: 0 15px;
}


/*--------------------submenu symbol css starts------------------*/
.menu-item-has-children {
	display: flex !important;
}
 .menu-item-has-children::after {
	padding: 13px;
    display: block;
    margin-left: 1px;
    float: right;
    font-weight: 700;
    font-size: 13px;
    content: "\276F";
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);

}

/*--------------------submenu symbol css ends------------------*/

.site-title, .site-description {

    margin-left: 30% !important;

}

/*--------------------Menu right align css starts------------------*/
.menu-right .full-width {
    -webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-moz-box-orient: horizontal;
-moz-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.menu-right .text-align-right {

    text-align: left;

}
.menu-right .logo-holder {
    float:right;
}

/*--------------------Menu right align css ends------------------*/


#status {

    display: flex;
    align-items: center;
    justify-content: center;
    height: 10%;
    width: 10%;
    padding-top: 25%;
    margin: 0px auto;

}