﻿
/*-------------------------------------------------------------------------*/
/*  Basic style
/*-------------------------------------------------------------------------*/

    [class*="zt-"] {
        box-sizing: border-box;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
    }



/*-------------------------------------------------------------------------*/
/*  Column style
/*-------------------------------------------------------------------------*/

    [class*="zt-span"] { float: left;  margin-right: 4%;  position: relative; }
    [class*="zt-span"]:last-child, [class*="zt-span"].last { margin-right: 0; } 

    .zt-span1  { width: 4.666%;  }
    .zt-span2  { width: 13.333%; }
    .zt-span3  { width: 22%; }
    .zt-span4  { width: 30.666%; }
    .zt-span5  { width: 39.5%; }
    .zt-span6  { width: 48.0%; }
    .zt-span7  { width: 56.5%; }
    .zt-span8  { width: 65.0%; }
    .zt-span9  { width: 73.5%; }
    .zt-span10 { width: 82.0%; }
    .zt-span11 { width: 90.5%; }
    .zt-span12 { width: 100%;  margin-right: 0; }

    @media only screen and (max-width : 1000px) {
        [class*="zt-span"] { float: none;  margin-right: 0;  width: 100%; margin-bottom: 30px; }
    }



/*-------------------------------------------------------------------------*/
/*  Features style
/*-------------------------------------------------------------------------*/

    .zt-features.style1 {
        text-align: center;
    }

    .zt-features.style1 i {
        width: 80px;
        height: 80px;
        color: #fff;
        font-size: 35px;
        line-height: 80px;
        margin-bottom: 30px;
        display: inline-block;
        position: relative;

        background-color: #44c1bf;

        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        -ms-border-radius: 100px;
        border-radius: 100px;

        -webkit-transition:  all 0.2s ease;
        -moz-transition:  all 0.2s ease;
        transition:  all 0.2s ease;
    }

    .zt-features.style1 i:after {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        content: '';

        -webkit-transform: scale(1.15);
        -moz-transform: scale(1.15);
        -ms-transform: scale(1.15);
        transform: scale(1.15);

        -webkit-box-shadow: 0 0 0 2px #44c1bf;
        -moz-box-shadow: 0 0 0 2px #44c1bf;
        box-shadow: 0 0 0 2px #44c1bf;

        -webkit-transition:  all 0.2s ease;
        -moz-transition:  all 0.2s ease;
        transition:  all 0.2s ease;

    }

   .zt-features.style1:hover i:after {
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 0;
    }

    .zt-features h4 { line-height: 1; }

    .zt-features.style2 i {
        float: left;
        color: #44c1bf;
        font-size: 40px;
        display: inline-block;
        margin-right: 20px;
    }

    .zt-features.style2 .zt-features-content {
        overflow: hidden;
    }



/*-------------------------------------------------------------------------*/
/*  Team  style
/*-------------------------------------------------------------------------*/
    
    .zt-team { text-align: center; }
 
    .zt-team img {
        width: 100%;
        line-height: 0;
        overflow: hidden;
        margin-bottom: 20px;
        position: relative;
        border-bottom: 2px solid #44c1bf;
    }

    .zt-team-content h4 {
        margin-bottom: 5px;
    }

    .zt-team-content span {
        color: #ccc;
        font-style: italic;
        display: block;
        margin-bottom: 5px;
    }



/*-------------------------------------------------------------------------*/
/*  Clients style
/*-------------------------------------------------------------------------*/

    .zt-clients a {
        width: 32.814%;
        float: left;
        padding: 43px;
        margin-right: 1px;
        margin-left: 1px;
        margin-bottom: 2px;
        text-align: center;
        display: inline-block;
        background-color: #444;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .zt-clients a:hover {
        background-color: #333;
        background-color: rgba(0, 0, 0, 0.4);
    }



/*-------------------------------------------------------------------------*/
/*  Testimonials
/*-------------------------------------------------------------------------*/

    .zt-testimonials { text-align: center; }

    .zt-testimonials p {
        font-size: 18px;
        text-transform: none;
    }

    .zt-testimonials blockquote {
        padding: 0;
        margin: 0;
        border: none;
    }

    .zt-testimonials span {
        margin: 15px 0;
        display: block;
        font-size: 12px;
        font-weight: 700;
    }   



/*-------------------------------------------------------------------------*/
/*  Togle and accordion style
/*-------------------------------------------------------------------------*/

    .zt-toggle-title,
    .zt-accordion-title {
        font-size: 12px;
        padding: 15px;
        margin-bottom: 6px;
        display: block;
        cursor: pointer;
        position: relative;
        background-color: #f4f4f4;

        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;

        -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
        -moz-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
        -ms-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
        box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;

        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }

    .zt-toggle-title.active,
    .zt-accordion-title.active {
        background-color: #44c1bf;

        -webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
        -ms-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
    }


        /*
         * Open and close icon
         */

        .zt-toggle-title span,
        .zt-accordion-title span {
            width: 24px;
            height: 24px;
            right: 10px;
            top: 10px;
            position: absolute;
            background: url('../images/plus_minus.png') 0px -24px no-repeat;


        }
        .zt-toggle-title.active span,
        .zt-accordion-title.active span {
            background: url('../images/plus_minus.png') 0px 0px no-repeat;
        }

        /*
         * Title
         */
    
        .zt-toggle-title p,
        .zt-accordion-title p {
            margin: 0;
            line-height: 1;
            color: #9d9d9d;
        }

        .zt-toggle-title.active p,
        .zt-accordion-title.active p {
            color: #fff;
        }


        /*
         * Content
         */

        .zt-toggle-inner,
        .zt-accordion-inner {
            padding: 4px 15px 10px 15px;
            display: none;
        }



/*-------------------------------------------------------------------------*/
/*  Social icon style
/*-------------------------------------------------------------------------*/

    .zt-social li {
        float: left;
        margin: 0 2px 4px 2px !important;
        list-style: none;
    }

        .zt-social a {
            display: block;
            color: #ffffff;
            font-size: 17px;
            overflow: hidden;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #44c1bf;

            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;

            webkit-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
            -moz-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
            -ms-box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
            box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
        }

        .zt-social a:hover { color: #fff; }

        .zt-social-github:hover      { background-color: #4183C4; }
        .zt-social-flickr:hover      { background-color: #0063DB; }
        .zt-social-vimeo:hover       { background-color: #44BBFF; }
        .zt-social-twitter:hover     { background-color: #00ACED; }
        .zt-social-facebook:hover    { background-color: #3B5998; }
        .zt-social-gplus:hover       { background-color: #D14836; }
        .zt-social-pinterest:hover   { background-color: #CB2027; }
        .zt-social-tumblr:hover      { background-color: #2C4762; }
        .zt-social-linkedin:hover    { background-color: #007FB1; }
        .zt-social-dribbble:hover    { background-color: #EA4C89; }
        .zt-social-stumbleupon:hover { background-color: #EB4924; }
        .zt-social-lastfm:hover      { background-color: #D51007; }
        .zt-social-rdio:hover        { background-color: #006ED2; }
        .zt-social-picasa:hover      { background-color: #4B5D5F; }
        .zt-social-behance:hover     { background-color: #1769FF; }
        .zt-social-spotify:hover     { background-color: #80B719; }
        .zt-social-instagram:hover   { background-color: #3F729B; }
        .zt-social-dropbox:hover     { background-color: #2281CF; }
        .zt-social-evernote:hover    { background-color: #6BB130; }
        .zt-social-flattr:hover      { background-color: #F67C1A; }
        .zt-social-soundcloud:hover  { background-color: #FF6600; }  
        .zt-social-gcircles:hover    { background-color: #245DC1; }
        .zt-social-smashing:hover    { background-color: #E95C33; }
        .zt-social-youtube:hover     { background-color: #CD332D; }
        .zt-social-500px:hover       { background-color: #444444; }
        .zt-social-deviantart:hover  { background-color: #4B5D50; }
        .zt-social-yelp:hover        { background-color: #C93C27; }



/*-------------------------------------------------------------------------*/
/*  Button style
/*-------------------------------------------------------------------------*/

    .zt-button {
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        padding: 12px 20px 15px 20px;
        margin: 0 5px 5px 0;
        display: inline-block;
        letter-spacing: 0.05em;
        text-decoration: none;
        background-color: #44c1bf;

        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px;

        webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        transition: all 0.2s ease;

        border:none;

        -webkit-box-shadow: 0 -2px rgba(0, 0, 0, 0.2) inset;
        -moz-box-shadow: 0 -2px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 0 -2px rgba(0, 0, 0, 0.2) inset;
    }

    .zt-button:hover { 
        color: #fff;
        background-color: #555555; 
    }

    .zt-button.small {
        font-size: 11px;
        padding: 8px 12px 10px 12px; 
    }

    .zt-button.large {
        font-size: 13px;
        padding: 15px 30px 17px 30px; 
    }

    .zt-button i { font-size: inherit; }

    .zt-button .icon-left { margin-right: 10px; }
    .zt-button .icon-right { margin-left: 10px; }


    
/*-------------------------------------------------------------------------*/
/*  Tabs style
/*-------------------------------------------------------------------------*/

    .zt-tab {
        margin-bottom: 15px;
        border-bottom: 2px solid #44c1bf;
    }

        .zt-tab li {
            float: left;
            margin: 0 3px 0 0;
            list-style: none;
            background-color: #f4f4f4;

            -webkit-border-radius: 2px 2px 0 0;
               -moz-border-radius: 2px 2px 0 0;
                    border-radius: 2px 2px 0 0;
        }

        .zt-tab li.current { background-color: #44c1bf; }

            .zt-tab a {
                font-size: 12px;
                display: block;
                padding: 14px 22px;
            }

            .zt-tab li.current a { color: #fff; }


    .zt-tab-wrapper > div {
        padding-bottom: 15px;
    }



/*-------------------------------------------------------------------------*/
/*  Services style
/*-------------------------------------------------------------------------*/   

    .zt-services {
        text-align: center;
        padding: 30px 20px;
        border: 1px solid #e8e8e8;
        background-color: #fff;

        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;

        webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;

        -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.03);
        -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.03);
        -ms-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.03);
         box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.03);
    }

    .zt-services:hover {
        border-color: #f4f4f4;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;

    }

    .zt-services i {
        font-size: 35px;
        text-align: center;
        margin: 15px 0 30px 0;
        display: inline-block;

        color: #44c1bf;
        
        webkit-transition: all 0.1s ease;
        -moz-transition: all 0.1s ease;
        -ms-transition: all 0.1s ease;
        transition: all 0.1s ease;
    }

    .zt-services:hover i {
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
    }

    .zt-services ul { margin-bottom: 0;}

    .zt-services  li {
        list-style: none;
        font-size: 12px;
        padding: 8px 15px;
        border-top: 1px dotted #f4f4f4;
    }

    .zt-services  li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }



/*-------------------------------------------------------------------------*/
/*  Stats style
/*-------------------------------------------------------------------------*/    
    
    .zt-stats {
        text-align: center;
    }

    .zt-stats i {
        padding: 40px 0;
        display: block;
        text-align: center;
        position: relative;
        margin-bottom: 30px;
        font-size: 50px;
        background-color: rgba(255, 255, 255, 0.2);
    }

    .zt-stats .zt-stats-num {
        color: #44c1bf;
        font-size: 40px;
        margin-bottom: 5px;
    }



/*-------------------------------------------------------------------------*/
/*  Alert box style
/*-------------------------------------------------------------------------*/
    
    [class*="zt-alert-box-"] {
        padding: 15px 30px 15px 15px;
        font-size: 11px;
        line-height: 20px;
        margin-bottom: 20px;
        position: relative;
        border: 1px solid transparent; 

        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }

    .zt-alert-box-notice {
        color: #7f8c8d;
        border-color: #e1e1e1;
        background-color: #fcfcfc;
    }

    .zt-alert-box-warning {
        color: #d69a2a;
        border-color: #ffdc7d;
        background-color: #fffce5;
    }

    .zt-alert-box-error {
        color: #ab6464;
        border-color: #e89494;
        background-color: #ffebe8;
    }

    .zt-alert-box-success {
        color: #598760;
        border-color: #acd6b3;
        background-color: #edfff0;
    }

    .zt-alert-box-info {
        color: #1891a8;
        border-color: #cee1ef;
        background-color: #f0f8ff;
    }
     
    .zt-alert-close {
        top: 5px;
        right: 5px;
        position: absolute;
        padding: 10px;
        cursor: pointer;
        font-weight: bold;
    }



/*-------------------------------------------------------------------------*/
/*  Skill bar style
/*-------------------------------------------------------------------------*/

    .zt-skill-bar {
        color: #fff;
        font-size: 11px;
        line-height: 25px;
        height: 25px;
        margin-bottom: 5px;

        background-color: rgba(0,0,0,0.1);

        -webkit-border-radius: 2px;
           -moz-border-radius: 2px;
            -ms-border-radius: 2px;
                border-radius: 2px;

    }

    .zt-skill-bar * {
        webkit-transition: all 0.5s ease;
          -moz-transition: all 0.5s ease;
           -ms-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
               transition: all 0.5s ease;
    }

    .zt-skill-bar div {
        background-color: #44c1bf;
        position: relative;
        padding-left: 25px;
        width: 0;

        -webkit-border-radius: 2px;
           -moz-border-radius: 2px;
           -ms- border-radius: 2px;
                border-radius: 2px;
    }

    .zt-skill-bar span {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        padding: 0 5px 0 10px;
        background-color: #1a1a1a;

        -webkit-border-radius: 0 2px 2px 0;
           -moz-border-radius: 0 2px 2px 0;
            -ms-border-radius: 0 2px 2px 0;
                border-radius: 0 2px 2px 0;
    }

    .zt-skill-bar span:before {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        top: 50%;
        left: -3px;
        margin-top: -3px;
        background-color: #1a1a1a;

        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
    }



/*-------------------------------------------------------------------------*/
/*  Pricetable  style
/*-------------------------------------------------------------------------*/

    .zt-pricetable { text-align: center; }
    .zt-pricetable ul { margin: 0; list-style: none; }   

    /*------------------------------------------
        price table title
    ------------------------------------------*/

    .zt-pricetable-title h3 {
        font-size: 18px;
        font-weight: 300;
        margin: 0;
        padding-bottom: 30px;
        line-height: 1;
        margin-bottom: 2px;
        border-bottom: 2px solid #f4f4f4;
    }

    .zt-pricetable-best { margin-top: -6px; }

    .zt-pricetable-best  .zt-pricetable-title h3 { font-size: 24px; }



    /*------------------------------------------
        price table price
    ------------------------------------------*/

    .zt-pricetable-price {
        padding: 30px 0;
        margin-bottom: 10px;
        border-bottom: 1px dashed #f4f4f4;
    }

    .zt-pricetable-price h4 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .zt-pricetable-price span { 
        display: block; 
        font-size: 11px;
    }



    /*------------------------------------------
        price table item
    ------------------------------------------*/

    .zt-pricetable-item { 
        font-size: 12px;
        margin-bottom: 9px;
        padding-bottom: 9px;
        border-bottom: 1px dashed #f4f4f4;
    }



    /*------------------------------------------
        price table button
    ------------------------------------------*/

    .zt-pricetable-btn { 
        padding-top: 20px;
    }

    .zt-pricetable-btn .zt-button {
        margin: 0;
        padding: 10px 45px;
    }



/*-------------------------------------------------------------------------*/
/*  Other  style
/*-------------------------------------------------------------------------*/

    .zt-space { clear: both; }
    .zt-divider { 
        clear: both;
        height: 2px;
        background-color:#f4f4f4;
    }



/*-------------------------------------------------------------------------*/
/*  Other  style
/*-------------------------------------------------------------------------*/

    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (   -moz-min-device-pixel-ratio: 2),
    only screen and (   -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (           min-resolution: 192dpi),
    only screen and (            min-resolution: 2dppx) {

        .zt-accordion-title span, 
        .zt-toggle-title span { background: url(../images/icons/plus-minus@2x.png) 0px 0px no-repeat; background-size: 24px 24px; }

        .zt-accordion-title.active span, 
        .zt-toggle-title.active span { background: url(../images/icons/plus-minus@2x.png) 0px -24px no-repeat; background-size: 24px 24px;}
    }