/* --------------------------------- */
/* Css Styles                        */
/*---------------------------------- */

/**
	Mat - vCard Template
	Author : Tavonline
	Copyright 2017

/* Table of Content
==================================================
	
	1. Body and Core Css
	2. Profile Section
	3. Navigation
	4. Home Section
	5. Resume Section
    6. Portfolio Section
    7. Blog Section
    8. Testimonial Section
    9. Contact Section
    10. Footer Section
    11. Realtor Portfolio 
    12. Photo Gallery Widgets
    13. Table Widget
    14. Pricing Widget
    15. Events Widget
    16. Discography Widget
    17. Responsive

/*------------------------ 1 Body and Core Css ------------------------*/		


.portfolio img.item{
    width: 100%;
}

/* ========== Pastel Visual Tokens ========== */
:root {
  --primary-aqua: #6dd5e8;
  --primary-lemon: #ffd89e;
  --primary-blush: #ffb3d9;
  --aqua-light: #c1eef5;
  --lemon-light: #ffe7c7;
  --blush-light: #ffd4ed;
  --neutral-cream: #faf8f6;
  --neutral-light: #f5f0ed;
  --glow-aqua: rgba(109, 213, 232, 0.3);
  --glow-lemon: rgba(255, 216, 158, 0.3);
  --glow-blush: rgba(255, 179, 217, 0.3);
}

body{
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(135deg, var(--aqua-light) 0%, var(--lemon-light) 50%, var(--blush-light) 100%);
    overflow-x: hidden;
    position: relative;
    color: #333;
}

.geometric-shapes{
    position: absolute;
    width: 100%;
}

html{
	height: 100%;
}

/* Typography */

hr{
    width: 100%;
    background: #efefef;
}

.blog-title{
    font-size: 26px;
    font-weight: bold;
    line-height: 30px;
}

.page-title i{
    font-size: 18px;
    color: #d2d2d2;
}

.timeline-title{
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    line-height: 30px;
}

.section-title{
    position: relative;
    display: inline-block;    
    padding: 0 3px;
}

.section-title h1, .section-title h2, .section-title h3, .section-title h4 ,.section-title h5{
    font-size: 18px;
    font-weight: 600;
    position: relative;
}

.section-title span{
    position: absolute;
    height: 7px;
    width: 100%;
    bottom: 0;
    opacity: 0.4;    
    left:0;
}

.site-btn{
    font-size: 14px;
    font-weight: 500;
    border: 0;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    padding: 1px 29px;
    line-height: 35px;
    background: var(--primary-lemon) !important;
    color: #333 !important;
    box-shadow: 0 4px 15px var(--glow-lemon);
    transition: all ease 0.3s;
}

.site-btn:hover{
    box-shadow: 0 6px 25px var(--glow-lemon), inset 0 0 10px rgba(255,255,255,0.5);
    transform: translateY(-2px);
    background: #ffc966 !important;
}

.site-btn.black{
    background: #000 !important;
}

.site-btn.icon{
    text-align: left;
    padding: 1px 6px 1px 19px;
}

.site-btn.icon i{
    color: #333;
    background: rgba(255,255,255,0.8);
    margin-left: 15px;
    border-radius: 50px;
    font-size: 11px;
    height: 27px;
    width: 27px;
    float: right;
    text-align: center;
    line-height: 29px;    
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all ease 0.2s;
}

.site-btn.icon:hover i{
    background: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

#content{
    background: #fff;
    box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.07);
}


p{
    font-size: 13px;
    color: #4c4c4c;
    line-height: 24px;
 }

.little-text{
    color: #989898;
    font-weight: 400;
    line-height: 18px;
}

blockquote {
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
}

h1{
    font-size: 50px;
    font-weight: 500;  
}

h2{
    font-size: 43px;
    font-weight: 500;
}

h3{
    font-size: 37px;
    font-weight: 500;  
}

h4{
    font-size: 32px;
    font-weight: 500;
}

h5{
    font-size: 26px;
    font-weight: 500;
}

h6{
    font-size: 20px;
    font-weight: 500;
}


/* Margins & Paddings */

.top_15{
    margin-top: 15px;
}

.top_30{
    margin-top: 30px;
}

.top_45{
    margin-top: 45px;
}

.top_60{
    margin-top: 60px;
}

.top_90{
    margin-top: 90px;
}

.top_120{
    margin-top: 120px;
}

.padding_30{
   padding-top: 30px; 
}

.padding_45{
   padding-top: 45px; 
}

.padding_50{
   padding-top: 50px; 
}

.padding_60{
   padding-top: 60px; 
}

.padding_90{
   padding-top: 90px; 
}

.bottom_15{
    margin-bottom: 15px;
}

.bottom_30{
    margin-bottom: 30px;
}

.bottom_45{
    margin-bottom: 45px;
}

.bottom_60{
    margin-bottom: 60px;
}

.bottom_90{
    margin-bottom: 90px;
}

.bottom_120{
    margin-bottom: 120px;
}

.padbot_15{
    padding-bottom: 15px;
}

.padbot_30{
    padding-bottom: 30px;
}

.padbot_45{
    padding-bottom: 45px;
}

.padbot_50{
    padding-bottom: 50px;
}

.padbot_60{
    padding-bottom: 60px;
}


/*Spinner*/

#preloader {
    background-color:#fff;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%; 
    z-index: 1000;
    display:table;
    text-align: center;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50%;
    border: 1px solid #ccc;
    animation: spinner .6s linear infinite;
}

.spinner:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    border-radius: 50px;
    background: url(../images/spinner.jpg) center center;
}

/*------------------------ 2 Profile Section ------------------------*/

.profile{
    background: linear-gradient(135deg, #fdfcfb 0%, #f5f0ed 100%);
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    width: 100%;
    display: inline-block;    
    box-shadow: 0px 2px 30px 0px rgba(109, 213, 232, 0.12);
    -webkit-box-shadow: 0px 2px 30px 0px rgba(109, 213, 232, 0.12);
    -moz-box-shadow: 0px 2px 30px 0px rgba(109, 213, 232, 0.12);
    transition: all ease 0.3s;
}

.profile-name{
    line-height: 18px;
    padding: 20px;
}

.profile .name{
    text-transform: uppercase;
    font-size: 17px;
    font-weight: bold;
}

.profile .job{
    font-size: 13px;
    color: #777777;
}

.profile-image {
    margin-top: -18px;
    -webkit-clip-path: polygon(0 9%, 100% 0, 100% 94%, 0% 100%);
    clip-path: polygon(0 9%, 100% 0, 100% 94%, 0% 100%);
}

.profile-image img{
    width: 100%;
}

ul.profile-information{
    list-style: none;
    margin: 8px 0px 8px 35px;
}

ul.profile-information li{
    border-left: solid 2px #eee;
    padding: 0 0 23px 20px;
    font-size: 14px;
    color: #787878;
}

ul.profile-information li p{
    font-size: 13.5px;
    color: #7F7F7F;
    line-height: 12px;
}

ul.profile-information li:last-child{
    border: 0;
    margin-left: 2px;
    margin-top: -2px;
}

ul.profile-information li:before{
    content: "";
    border: solid 2px;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    font-size: 8px;
    margin-left: -25px;
    margin-top: 2px;
    font-weight: 400;
    background: #fff;
    display: block;
    position: absolute;
}

ul.profile-information li span{
    color: #000;
}


ul.profile-information li:first-child{
    padding-bottom: 10px;    
    padding-left: 30px;
    position: relative;
}

ul.profile-information li:first-child img {
    margin: -44px -44px;
    display: inline-block;
    position: absolute;
    width: 25px;
}

ul.profile-information li:first-child:before{
    /*content: '\f2c0';
    font-family: FontAwesome;
    font-size: 13.5px;*/
    margin-left: -51px;
    margin-top: -30px;
    margin-bottom: 20px;
    position: relative;
    border: 0;
    width: 40px;
    height: 40px;
    padding: 11px 14px;
  box-shadow: 0px 2px 32px 0px rgba(4, 123, 248, 0.3);
}

ul.profile-information li:first-child:after{
    background: url(../images/glasses-w.png) no-repeat;
    content: '';
    width: 30px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 16px -15px;
    background-size: 27px 10px;
}

.profile .site-btn{
    margin: 18px auto 30px;
    display: block;
}


/*------------------------ 3 Navigation ------------------------*/

header nav{
    background: linear-gradient(135deg, #fdfcfb 0%, #f5f0ed 100%);
    display: inline-block;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    height: 70px;
    width: 100%;
    margin-bottom: 30px;
    line-height: 70px;
    box-shadow: 0px 2px 30px 0px rgba(109, 213, 232, 0.12);
    -webkit-box-shadow: 0px 2px 30px 0px rgba(109, 213, 232, 0.12);
    -moz-box-shadow: 0px 2px 30px 0px rgba(109, 213, 232, 0.12);
}

header nav ul li{
    float: left;
}

header nav ul li a{
    font-size: 14px;
    font-weight: bold;
    color: #000;
    padding: 0 10px;
    line-height: 73px;
    display: block;
}

header nav ul li a:hover{
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    color: var(--primary-aqua) !important;
    text-shadow: 0 0 8px var(--glow-aqua);
}

header nav ul li a:after{
    border-right: 1px solid #dfdfdf;
}

header nav a.home-btn{
    background: var(--primary-aqua);
    color: #333;
    border-radius: 6px 0 0 6px;
    -webkit-border-radius: 6px 0 0 6px;
    -moz-border-radius: 6px 0 0 6px;
    padding: 0px 24px;
    float: left;
    height: 70px;
    line-height: 70px;
    margin-right: 10px;
    transition: all ease 0.4s;    
    line-height: 77px;
    box-shadow: 0 2px 15px var(--glow-aqua);
}

header nav a.home-btn:hover{
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    box-shadow: 0 4px 20px var(--glow-aqua);
    transform: translateY(-1px);
}

header nav a.home-btn i{
    font-size: 21px;
}

header nav .site-btn{
    margin: 18px 18px 0 5px;  
}

.social-icons a {
    color: #333;
    font-size: 12px;
    transition: all ease 0.2s;
    width: 24px;
    height: 18px;
    display: inline-block;
}

.social-icons a:hover {
    font-size: 14px;
    transform: scale(1.15);
}

.fb:hover{
    color: var(--primary-aqua) !important;
    transition: all ease 0.2s;
    text-shadow: 0 0 6px var(--glow-aqua);
}

.tw:hover{
    color: var(--primary-aqua) !important;
    transition: all ease 0.2s;
    text-shadow: 0 0 6px var(--glow-aqua);
}

.ins:hover{
    color: var(--primary-blush) !important;
    transition: all ease 0.2s;
    text-shadow: 0 0 6px var(--glow-blush);
}

.bh:hover{
    color: var(--primary-aqua) !important;
    transition: all ease 0.2s;
    text-shadow: 0 0 6px var(--glow-aqua);
}

.dr:hover{
    color: var(--primary-blush) !important;
    transition: all ease 0.2s;
    text-shadow: 0 0 6px var(--glow-blush);
}

header nav .menuout{
    z-index: 10
}

header nav .menuout{
    display: none;
} 

/*------------------------ 4 Home Section ------------------------*/

#content{
    min-height: 500px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding: 15px;
    background: linear-gradient(135deg, #fdfcfb 0%, #f5f0ed 100%);
    box-shadow: 0px 2px 30px 0px rgba(109, 213, 232, 0.12);
    transition: all ease 0.3s;
}

section{
    padding-left: 30px !important;
    padding-right: 30px !important;
}

section.line{
    border-bottom: solid 1px #efefef;
}

section:last-child{
    border:0;
}

section.graybg{
    background: linear-gradient(135deg, var(--aqua-light) 0%, var(--lemon-light) 100%);
}

.services .service span.title{
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
}

.clients .client{
    background: linear-gradient(135deg, #fdfcfb 0%, #f5f0ed 100%);
    padding: 18px;
    border-radius: 8px;
    box-shadow: 0px 0px 20px 0px rgba(109, 213, 232, 0.08);
    width: 100%;    
    padding: 26px 16px;
}
/*
.clients .col-md-3:nth-child(2) .client {
    padding: 23px 18px;
}*/


.clients .client img {
    width: 100%;
}

.service .icon i:before {
    font-size: 44px;
    margin-left: 0;
}

.service{
    background: #fff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    padding: 20px;
   box-shadow: 0px 0px 48px 0px rgba(4, 6, 4, 0.08);
   min-height: 186px;
}

/*------------------------ 5 Resume Section ------------------------*/

ul.timeline{
    margin-left: 10px;
}

.timeline li{
    border-left: solid 2px #ececec;
    list-style: none;
    padding: 0 0 40px 30px;
}

.timeline li:before{
    content: "";
    border: solid 2px;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    font-size: 8px;
    margin-left: -35px;
    font-weight: 400;
    background: #fff;
    display: block;
    position: absolute;
    margin-top: -1px;
}

.timeline li .line-title{
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 4px;
    overflow-wrap: break-word;
}

.timeline li:first-child{
    padding: 0 0 60px 19px;
}

.timeline li:first-child:before{
    border: 0;
    background: none;
    position: relative;
}

.timeline li:first-child i{
    float: left;
    margin-left: -30px;
    padding: 18px 16px;
    border-radius: 30px;
    margin: -13px -45px;
    background: #fff;
    width: 53px;
    text-align: center;
}

.timeline li .section-title{
    padding-left: 20px;
}

.timeline li span {
    font-size: 12px;
    padding: 9px 0;
    display: block;
}

.timeline li:last-child{
    border: 0;
    margin-left: 2px;
}

/* Skills */

.skill-list li {
    list-style: none;
}

.skill-list h3 {
    font-size: 12px;
}

.skill-list .progress {
    margin: 10px 0 20px;
    display: block;
    height: 5px;
    position: relative;
    width: 100%;
    overflow: visible;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    background: #dfdfdf;
    box-shadow: 0;
}

.skill-list .progress .percentage {
    border-radius: 50px 0 0 50px;
    -moz-border-radius: 50px 0 0 50px;
    -webkit-border-radius: 50px 0 0 50px;
    -ms-border-radius: 50px 0 0 50px;
    -o-border-radius: 50px 0 0 50px;
    bottom: 0;
    position: absolute;
    top: 0;
}


/* Form */

.site-form .site-input{
    width: 100%;
    height: 45px;
    border: 0;
    color: #000;
    border-bottom: solid 1px #dfdfdf;
    font-size: 13px;
    padding-left: 10px;
    margin-bottom: 15px;
    outline: 0;
}

.site-form .site-area{
    width: 100%;
    border: 0;
    border-bottom: solid 1px #dfdfdf;
    font-size: 13px;
    padding: 20px 0 0 10px;
    min-height: 100px;
    margin-bottom: 15px;
}

.site-form .site-area{
    width: 100%;
    border: 0;
    border-bottom: solid 1px #dfdfdf;
    font-size: 13px;
    padding: 20px 0 0 10px;
    min-height: 100px;
    margin-bottom: 15px;
}

/*------------------------ 9 Contact Section ------------------------*/

.contact-info ul li{
    list-style: none;
    font-size: 14px;
    color: #787878;    
    line-height: 34px;
}

.contact-info ul li span{
    color: #000;
}

.contact-map iframe{
    width: 100%;
}

/*------------------------ 10 Footer ------------------------*/

footer .footer{
    background: #1e1e1e;
    min-height: 70px;
    color: #fff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    line-height: 72px;
}

footer .footer .name{
    color: #fff;
    font-size: 15px;
}

footer .footer .copyright{
    color: #9c9c9c;
    font-size: 12px;
    text-align: right;
}

footer .footer .copyright a{
    color: #fff;
}

footer .footer .copyright a:hover{
    color: #dfdfdf;
    transition: all ease 0.3s;
}


/*------------------------ 17 Responsive ------------------------*/

@media (max-width: 1199px) {
    footer .footer .copyright{
        text-align: center;
    }
}

@media (max-width: 991px) {

    .wrapper.top_60{
        margin-top: 30px;
    }

    .services .service{
        margin-bottom: 30px;
    }

    .code-skills {
        padding-top: 0;
    }

    #content {
        padding-bottom: 45px;
    }

    ul.profile-information li:first-child {
        padding-bottom: 10px;
        padding-left: 30px;
    }

    ul.profile-information {
        list-style: none;
        margin: 0 auto 30px;
        display: table;
    }

    .profile{
        padding-bottom: 30px;
    }

    footer .footer .copyright{
        text-align: center;
    }

    .clients .client{
        margin-bottom: 30px;
    }

    .events ul li .site-btn {
         float: none;
         margin-top: 15px; 
    }

}

@media screen and (max-width: 991px) and (min-width: 769px) {

    header nav{
        margin-top: 30px;
    }

    nav .social-icons{
        display: none;
    }

    nav .hamburger{
        display: none;
    }

} 


@media screen and (max-width: 991px) and (min-width: 576px) {

    .profile .name {
        font-size: 20px;
        margin-top: 11px;
    }

    .profile-image {
        margin-top: -18px;
        -webkit-clip-path: polygon(0 9%, 100% 0, 100% 94%, 0% 100%);
        clip-path: polygon(0 9%, 100% 0, 100% 94%, 0% 100%);
        margin-top: -40px;
    }

}

@media (max-width: 768px) {

    header{
        margin-top: 30px;
    }

    header nav ul{
    }

    header nav ul.tabs li:first-child, header nav .menuout ul.tabs li {
        display: block;
    }

    header nav ul.tabs li {
        display: none;
    }

    header nav .menuout{
        width: 100%;
        position: relative;
    }

    header nav .menuout .menuin{
        width: 100%;
        background: #fff;
        position: absolute;
        z-index: 4;
        margin-top: 25px;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.05);
        -webkit-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.05);
    }

    header nav .menuout .menuin ul.tabs li:first-child{
        display: none;
    }

    header nav .menuout .menuin ul.tabs li{
        float: none;
        text-align: center;
        border-bottom: solid 1px #efefef;
    }

    header nav .menuout .menuin ul.tabs li a{
        width: 100%;
        display: block;
        cursor: pointer;
        line-height: 58px;
    }


    header nav .hamburger{
        font-size: 20px;
        margin-right: 23px;
        cursor: pointer;
        line-height: 71px;
        border-left: solid 1px #eaeaea;
        padding-left: 21px;
    }

    header nav .menuout{
        display: block;
    } 

    .social-icons{
        margin-right: 14px;
        line-height: 67px;
    }

    .portfolio-content .namenprice .blog-title{
        width: 100%;
    }

    .portfolio-content .namenprice .price{
        float: left !important;
        margin-top: 14px;
    }

}

@media (max-width: 321px) {

    .social-icons{
        display: none;
    }

    header nav .hamburger{
        border: 0;
    }

    footer .footer {
    line-height: 19px;
    padding-top: 14px;
    }

    .timeline li .line-title {
        line-height: 20px;
    }


}