@import "fonts.css";
@import "presets.less";

@max-width: 980px;

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
apress, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
var, dl, dt, p, ol, ul, li, title, fieldset, form, legend, input, table
{
    border: 0;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: normal;                
    outline: 0;     
}

* {margin:0;padding:0;-webkit-appearance:none;} 

html 
{
    background: #fff;
    height:100%; 
    overflow:hidden;
    overflow-y:scroll; 
}

body 
{  
    background: #fff;     
    line-height: 1.35em; 
    font-style: normal;  
    -webkit-font-smoothing: antialiased; /* Trying to prevent font-face fonts looking bold on Mac. */
}

.content
{
    margin: 0 auto;
    position: relative;
    max-width: @max-width;
}

.menuToggle, #mobileNav, .mobileOnly, .mobileFullVersion a.fullVersion, .mob.main
{
    display: none;
}  

p, li, address, .caption, caption, th, td, dt, dd, blockquote
{   
    color: #000;
    font-size: 16px;
    font-style: normal;
    padding: 0 0 5px 0;
    .PTSansRegular;
}

h1, h2, h3, h4, h5, h6
{
    color: #000;
    font-size: 18px;
    .PTSerifBold;
}

em,strong
{
    font-style: normal;
    font-weight: bold; 
} 

a
{
    color: ##23527c;
    text-decoration: none;
    &:hover{
        text-decoration: none;
    }
}
@rate: 0.71;

@pad-amount: @rate*30px;
@top-header-height: 100px;

@content-padding: 0 @pad-amount;

@menu-bar-transition: all 0.3s ease 0s;
@menu-bar-size: @rate*110px;
@menu-bar-radius: 4px;
@menu-bar-padding: @pad-amount;
@menu-bar-bg-color: #f7f7f7;
@menu-bar-border: 1px solid #cccccc;
@menu-bar-ham-color: #d51f26;
@menu-bar-ham-width: 35px;
@menu-bar-ham-height: 6px;
@menu-bar-ham-radius: 2px;
@twitter-title-height: @rate*50px;
@subcontent-padding: @pad-amount;

.content-title-template{
    .PTSerifBold;
    font-size: 32px;
    color: #d51f26;
    text-align: center;
    margin: @rate*20px 0;
}

.tweet-data-style{
    font-size: 16px;
    line-height: 20px;
}

img{
    max-width: 100%;
    height: auto;
}

.content{
    max-width: 100%;
}

.container-main{
    margin-top: @top-header-height;
}

.site-main{
    margin-bottom: @rate*40px;
}

.top-header{
    height: @top-header-height;
    position: fixed;
    background: #fff;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    
    .header{
        max-width: @max-width;
        margin: 0 auto;
    }
    
    .logo-container{
        height: @top-header-height;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        width: 75%;
        
        img.logo{
            .hcenter-object;
            width: 300px;
            max-width: 100%;
        }
    }
    
    nav.main-menu{
        display: inline-block;
        float: right;
        height: @top-header-height;
        position: relative;
        
        ul.menu{
            list-style-type: none;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(213,31,38,0.9);
            margin: @top-header-height 0 0;
            padding: 0;
            z-index: 1000;
            overflow-x: hidden;
            overflow-y: auto;
            outline: 0 none;
            display: none;
        }
        
        .close-btn-container{
            position: fixed;
            background: rgba(213,31,38,0.9);
            top: 0;
            left: 0;
            height: @top-header-height;
            width: 100%;
            cursor: pointer;
            z-index: 1001;
            display: none;
            
            .close-btn{
                font-size: @rate*45.28px;
                color: #fff;
                .PTSerifRegular;
                .center-object;
            }
        }
        
        &.visible{
            ul.menu{
                display: block;
                
                li{
                    text-align: center;
                    margin-top: @rate*80px;
                    
                    &:first-child{
                        margin-top: @rate*70px;
                    }
                    &:last-child{
                        margin-bottom: @rate*70px;
                    }
                    a{
                        .PTSerifRegular;
                        font-size: @rate*76.97px;
                        color: #fff;
                        &:hover,&:focus{
                            text-decoration: none;
                        }
                    }
                }
            }
            
            .close-btn-container{
                display: block;
            }
        }
    }
    
    .menu-bar{
        .ObjectTransition(@menu-bar-transition);
        animation: 4s ease 0s normal none infinite running blinkBackground;
        text-align: center;
        z-index: 101;
        width: @menu-bar-size;
        height: @menu-bar-size;
        display: block;
        position: relative;
        padding: @menu-bar-padding;
        right: 0;
        .hcenter-object;
        
        .ham {
            background: @menu-bar-ham-color;
            display: inline-block;
            height: @menu-bar-ham-height;
            width: @menu-bar-ham-width;
            .ObjectTransition(@menu-bar-transition);
            .ObjectBorderRadius(@menu-bar-ham-radius);
            .center-object;
        }
        .ham::after, .ham::before {
            background: @menu-bar-ham-color;
            content: "";
            display: inline-block;
            height: @menu-bar-ham-height;
            left: 0;
            outline: 1px solid transparent;
            position: absolute;
            width: @menu-bar-ham-width;
            .ObjectTransition(@menu-bar-transition);
            .ObjectBorderRadius(@menu-bar-ham-radius);
        }
        
        .ham::before {
            top: -2*@menu-bar-ham-height;
        }
        
        .ham::after {
            top: 2*@menu-bar-ham-height;
        }
    }
}

.hero-content{
    text-align: center;
    position: relative;
    padding-bottom: 0;
    padding-top: 40px;
    height: 150px;
    
    > h1, > h2{
        .PTSerifBold;
        font-size: @rate*67.92px;
        color: #fff;
        margin: 0;
        display: inline-block;
        position: relative;
        z-index: 2;
    }
    .background{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        .GradientColor(#d51f26, 1, multiply);
        &:after {
            content: "";
            background: url('../images/home-middle-bg.png') no-repeat center center;
            background-size: cover;
            opacity: 0.5;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: 1;   
        }
    }
}

.template-home{
    .hero-content{
        padding-top: 15px;
        padding-bottom: 40px;
        height: auto;
        
        > h1, > h2{
            max-width: 640px;
            display: block;
            margin: 0 auto;
        }
        
        >h1{
            font-size: 50px;
        }
        
        >h2{
            font-size: 32px;
        }
        
        .answers{
            padding-top: @pad-amount;
            position: relative;
            z-index: 2;
            max-width: 640px;
            margin: 0 auto;
            > a[href]{
                .TheSansBold;
                font-size: 30px;
                color: #fff;
                border: 3px solid #fff;
                height: @rate*110px;
                width: 100%;
                text-decoration: none;
                .ObjectBorderRadius(8px);
                display: block;
                line-height: @rate*110px;
                margin-bottom: @rate*40px;
                
                &:nth-child(1){
                    background: #5ba14e;
                }
                
                &:nth-child(2){
                    background: #d51f26;
                }
                
                &:last-child{
                    margin-bottom: 0;
                }
            }
        }
    }
    .twitter-content{
        margin-top: 1.5*@pad-amount;
        max-width: @max-width;
        margin: 0 auto;
        
        .content-title{
            display: none;
        }
        
        .twitter-container{
            background-color: #f5f5f5;
            padding: @pad-amount @pad-amount 0 @pad-amount;
            margin-top: @pad-amount;
            
            .wptt_TwitterTweets{
                
                h4{
                    display: none;
                }
                
                ul.light li.tweets_avatar{
                    background: none !important;
                    box-shadow: none !important;
                    border-radius: 0 !important;
                    margin: 0 !important;
                    padding: 0 0 @rate*35px 3*@pad-amount !important;
                    position: relative;
                    
                    .tweet_data{
                        .PTSansRegular;
                        .tweet-data-style;
                        
                        a{
                            color: #46a8d9 !important;
                            font-size: 14px;
                        }
                    }
                    
                    .times{
                        .PTSansRegular;
                        .tweet-data-style;
                        
                        a{
                            color: #666666 !important;
                            font-style: normal;
                            font-size: 12px;
                            font-weight: normal;
                        }
                    }
                }
                ul.light li.tweets_avatar:before{
                    content: "";
                    background: url('../images/twitter-blue-icon.png') no-repeat center center;
                    background-size: 100% 100%;
                    width: 2*@pad-amount;
                    height: @rate*43px;
                    position: absolute;
                    top: 10px;
                    left: 0;
                }
            }
            
            .twitter-follow-button{
                .GradientColor(#46a8d9, 0.2, overlay);
                width: @rate*160px;
                height: @twitter-title-height;
                display: block;
                position: relative;
                float: right;
                .ObjectBorderRadius(4px);
                text-align: center;
                z-index: 2;
                i{
                    background: transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E") no-repeat scroll 0 0;
                    display: inline-block;
                    height: @pad-amount;
                    position: relative;
                    width: @pad-amount;
                    height: @twitter-title-height;
                    background-position: center;
                    
                }
                
                p{
                    .PTSansBold;
                    font-size: @rate*22.64px;
                    color: #fff;
                    vertical-align: top;
                    margin-left: @rate*10px;
                    display: inline-block;
                    line-height: @twitter-title-height;
                    padding: 0;
                }
                
                &:hover,&:focus{
                    .GradientColor(#46a8d9, 0.5, overlay);
                }
            }
        }
    }
    
    .main-content-container{
        max-width: @max-width;
        margin: 0 auto;
    }
    .video-content{
        width: 49%;
        margin: 0;
        text-align: center;
        display: inline-block;
        float: left;
        .content-title{
            font-size: @rate*45.28px;
        }
    }
    .main-content{
        width: 49%;
        margin: 0;
        display: inline-block;
        
    }
}

.template-question{
    .hero-content{
        padding-top: 30px;
        padding-bottom: @rate*290px;
        height: auto;
    }
    .tinderslide-content{
        
        .wapper{
            height: @rate*500px;
            margin-top: -@rate*250px;
            margin-bottom: @rate*50px;
            
            #tinderslide{
                width: @rate*583px;
                height: @rate*529px;
                background: none;
                background-size: cover;
                margin: 0 auto;
                text-align: center;
                
                ul{
                    max-width: @rate*520px;
                    max-height: @rate*500px;
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    display: inline-block;
                    margin-top: 8px;
                    
                    li{
                        background: none;
                        box-shadown: none;
                        padding: 0;
                        border: 8px solid #fff;
                        .ObjectBorderRadius(8px);
                        
                        .hover-bg{
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            background: rgba(0,0,0,0.6);
                            display: block;
                            cursor: pointer;
                            opacity: 0;
                            img{
                                max-width: 444px;
                                width: 90%;
                                .center-object;
                            }
                        }
                        
                        .yes,.no{
                            .PTSerifBold;
                            font-size: 50px;
                            line-height: 50px;
                        }
                        
                        &:hover{
                            .hover-bg{
                                opacity: 1;
                            }
                        }
                    }
                    
                    
                }
                .img{
                    height: 100%;
                    margin: 0;
                }
            }
        }
        
        .actions{
            width: 100%;
            text-align: center;
            margin-bottom: @rate*50px;
            
            a{
                .PTSerifBold;
                font-size: @rate*54.33px;
                width: @rate*140px;
                height: @rate*140px;
                background: none;
                margin: 0;
                float: none;
                display: inline-block;
                box-shadow: none;
                border: 0;
                border-radius: 0;
                margin: 0 @rate*30px;
                line-height: @rate*140px;
                
                &.yes{
                    background-image: url('../images/yes-button.png');
                    background-size: cover;
                    text-indent: @rate*150px;
                    color: #0db14b;
                    
                    &:hover{
                        background-image: url('../images/yes-button-hover.png');
                    }
                }
                &.no{
                    background-image: url('../images/no-button.png');
                    background-size: cover;
                    text-indent: -@rate*250px;
                    color: #ed1c24;
                    
                    &:hover{
                        background-image: url('../images/no-button-hover.png');
                    }
                }
            }
        }
    }
}

.template-about-us{
    .main-content{            
        > h1{
            .content-title-template;
        }
    }
    .video-content{
        margin-top: @rate*70px;
        margin-bottom: @rate*70px;
    }
}

.template-contact-us, .template-answer{
    .main-content{            
        > h1{
            .content-title-template;
        }
        .wpcf7-form{
            h1{
                .content-title-template;
            }
            ul{
                padding: 0;
                margin: 0;
                list-style-type: none;
                
                li{
                    position: relative;
                    
                    &.contact-number{
                        width: 58%;
                        margin-right: 3%;
                        float: left;
                    }
                    &.state{
                        width: 39%;
                        float: right;
                    }
                }
            }
            
            input, select, textarea{
                width: 100%;
                padding: @rate*20px;
                font-size: 18px;
                text-align: center;
                color: #000;
                margin-top: @rate*20px;
                .PTSansRegular;
                .ObjectBorderRadius(@rate*8px);
                background: #f7f7f7;
                border: 1px solid #d9d9d9;
            }
            
            span.wpcf7-not-valid-tip, .wpcf7-response-output{
                font-size: @rate*26px;
            }
            
            a.submit-btn{
                line-height: 40px;
                padding: 0 20px;
                width: 100%;
                .PTSansBold;
                font-size: 16px;
                color: #fff;
                display: inline-block;
                margin: @rate*20px 0 0;
                .GradientColor(#5ba14e, 0.6, multiply);
                &:hover,&:focus{
                    text-decoration: none;
                    .GradientColor(#5ba14e, 0.4, multiply);
                }
                i{                    
                    width: 8.5px;
                    height: 15px;
                    margin-left: @rate*25px;
                    background: url('../images/readmore-icon.png') no-repeat center center;
                    display: inline-block;
                    background-size: 100% auto;
                    position: relative;
                    top: 2px;
                }
            }
            
            .fileUpload {
                position: relative;
                overflow: hidden;
                padding: @rate*20px;
                font-size: @rate*31.69px;
                text-align: center;
                color: #000;
                margin-top: @rate*20px;
                .PTSansRegular;
                .ObjectBorderRadius(@rate*8px);
                background: #f7f7f7;
                border: 1px solid #d9d9d9;
                width: @rate*320px;
                float: left;
                overflow: hidden;
                
                
                .wpcf7-form-control-wrap,input[type=file] {
                    padding: @rate*25px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    margin: 0;
                    font-size: 20px;
                    cursor: pointer;
                    opacity: 0;
                    filter: alpha(opacity=0);
                    width: @rate*300px;
                }
            }
            .upload > p{
                float: left;
                width: 35%;
                margin-left: 5%;
                margin-top: @rate*40px;
                text-align: left;
                
                label{
                    .PTSansRegular;
                    font-size: @rate*22.64px;
                }
            }
            
            .wpcf7-form-control-wrap.ready_date + i{
                background: url("../images/datepick-icon.png") no-repeat center center;
                background-size: 100% 100%;
                cursor: pointer;
                display: block;
                height: @rate*30px;
                width: @rate*33px;
                position: absolute;
                right: @rate*30px;
                bottom: @rate*30px;                                                            
            }
        }
    }
}

.template-answer{
    .main-content{
        a.main-btn{
            margin: 0 auto;
            width: 100%;
        }
        .sticky{
            bottom: 0;
            left: 50%;
            padding: 0 @pad-amount;
            position: fixed;
            width: 100%;
            margin: 0;
            z-index: 10;
            max-width: @max-width;
            .ObjectTransform(translateX(-50%));
            
            a.next-gig-btn{
                margin: 0 auto;
            }
        }
    }
    .datepicker{
        text-align: center;
        position: absolute;
        left: 50% !important;
        .ObjectTransform(translateX(-50%));
    }
    
    .bottom-content{
        >p{max-width: 60%;margin: 0 auto;}
    }
}

.page-template-default{
    .checklist-content{
        padding-top: 20px;
        float: left;
        width: 50%;
        
        h1{
            text-align: left;
            font-size: 24px;
        }
        
        ul{
            list-style-type: none;
            max-width: @rate*440px;
            padding: 0;
            margin: 0;
            
            li{
                text-align: left;
                margin: @rate*25px 0;
                label{
                    .PTSansRegular;
                    font-size: 18px;
                }
                
                [type="checkbox"]:not(:checked) + label::before,
                [type="checkbox"]:checked + label::before{
                    .hcenter-object;
                    width: 30px;
                    height: 30px;
                }
                
                [type="checkbox"]:not(:checked) + label::after,
                [type="checkbox"]:checked + label::after{
                    font-size: 30px;
                    left: @rate*10px;
                    .hcenter-object;
                }
                
                [type="checkbox"]:not(:checked) + label,
                [type="checkbox"]:checked + label{
                    padding-left: 45px;
                }
            }
        }
        
        & + .table-container{
            float: left;
            width: 50%;
            
            h1{
                text-align: left;
            }
        }
    }
    
    .table-container{
        padding-top: 20px;
        width: 100%;
        
        table{
            max-width: 540px;
            margin: 0 auto;
        }
        
        h1{
            text-align: center;
            font-size: 24px;
        }
    }
    
    .table-content{
        padding-top: @rate*30px;
        padding-bottom: @rate*30px;
        
        table{
            width: 100%;
            
            tr{
                td{
                    text-align: right;
                    font-size: @rate*27.17px;
                    padding: @rate*25px @rate*20px;
                    .PTSansRegular;
                }
                
                &:nth-child(2n+1) td{
                    background-color: #e6e6e6;
                }
            }
        }
    }
    
    .quotes-content{
        padding-top: @rate*30px;
        width: 100%;
        max-width: @max-width/3*2;
        margin: 0 auto;
        
        .quote-item{
            padding: @rate*90px 0;
            font-size: @rate*90.56px;
            color: #d51f26;
            text-align: center;
            .PTSerifBold;
        }
    }
}

.content-padding{
    padding-left: 20px;
    padding-right: 20px;
}

.content-title{
    .content-title-template;
}

.video-content{
    margin-top: @rate*50px;
    margin-bottom: @rate*70px;
    max-width: @max-width;
    margin: 0 auto;
    text-align: center;
    
    .content-title{
        padding-bottom: @rate*20px;
        font-size: @rate*58.86px;
    }
    &.no-title{
        margin-top: @rate*70px;
    }
}

.videos-at-bottom{
    .video-content{
        margin-top: 0;
        margin-bottom: 20px;
    }
    &.three-columns{
        .video-content{
            width: 33%;
        }
    }
}

.extra-content{
    max-width: @max-width;
    margin: 0 auto;
}

p{
    text-align: center;
}

ul,ol{
    margin-left: @pad-amount;
}

a.main-btn{
    line-height: 40px;
    width: auto; 
    padding: 0 30px;
    display: inline-block;    
    .PTSansBold;
    font-size: 16px;
    color: #fff;
    margin: @rate*30px auto;
    .GradientColor(#d51f26, 0.7, multiply);
    i{
        width: 8.5px;
        height: 15px;
        margin-left: @rate*25px;
        background: url('../images/readmore-icon.png') no-repeat center center;
        display: inline-block;
        background-size: 100% auto;
        position: relative;
        top: 2px;
    }
    &:hover,&:focus{
        color: #fff;
        text-decoration: none;
        .GradientColor(#d51f26, 0.5, multiply);
    }
}

.main-content{
    text-align: center;
    max-width: @max-width;
    margin: 20px auto 0;
    
    h1{
        max-width: 640px;
        display: inline-block;
        margin: @pad-amount 0;
    }
    h1:first-child{
        .PTSerifBold;
        font-size: 32px;
        color: #d51f26;
        text-align: center;
    }
    
    h2{
        font-size: 20px;
        color: #d51f26;
    }
}

.menu_bottom{
    ul{
        list-style-type: none;
    }
}

div.wpcf7{
    width: 60%;
    margin: 0 auto !important;
}

.footers{
    background: #f2f2f2;
    text-align: center;
    padding-top: 20px;
    
    .footer-container{
        max-width: @max-width;
        margin: 20px auto 0;
    }
    
    .logo-container{
        float: left;
        
        img.logo{
            width: 50px;
            float: left;
            margin-right: 10px;
        }
    }
    
    .menu_bottom{
        float: right;
    }
    .menu_bottom_list{
        padding: 0;
        margin: 0;
        
        li{
            display: inline;
            a{
                .PTSerifRegular;
                font-size: 18px;
                color: #000;
                line-height: 79px;
                margin-left: 20px;
                &:hover,&:focus{
                    text-decoration: none;
                }
                a:first-child{
                    margin-left: 0;
                }
            }
        }
    }
    
    .social-logo-container{
        margin-top: 20px;
        float: right;
    }
    
    .linkedin-logo{
        float: left;
        
        img{
            width: 135px;
        }
    }
    
    .social-icons{
        list-style-type: none;
        text-align: center;
        float: left;
        margin: -2px 0 0;
        
        li{
            display: inline;
            margin-left: 20px;
            
            img{
                width: 32px;
            }
        }
    }
    
    .text{
        margin-top: 20px;
        float: left;
        
        p{
            .PTSerifRegular;
            font-size: @rate*18.11px;
            color: #000;
            margin: 0;
            text-align: left;
        }
    }
    
    .back-to-top{
        padding-top: @pad-amount;
        > a{
            width: 40px;
            height: 30px;
            display: block;
            margin: 0 auto;
            position: relative;
            .GradientColor(#d51f26, 0.7, multiply);
            .ObjectBorderRadius(2px);
            
            .arrow_up{
                margin: 0;
                .center-object;
                .ArrowUp(@rate*18px,#fff);
            }
        }
    }
}