/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 31, 2015, 12:00:23 PM
    Author     : steve
*/


/* About Us */
.about-body {
    font-family: 'Roboto', sans-serif;
    /*background-image: url('resources/images/online-media.jpg');*/
    
/*    background: #000;*/
/*    background-image: url('resources/images/about-bg.jpg');
    background-size: 2560px auto;
    background-repeat: no-repeat;*/
    
    /*color: white;*/
}
.about-wrapper {
    
}
.about-body .footer .footer-text {
    color: black;
}
.about-content-container {
    background: rgba(255,255,255,0.8);
}
.about-content {
    width: 100%;
    /*margin-top: 30px;*/
    min-height: 400px;
    opacity: 0;
    
    /*background: #efefef;*/
    -webkit-animation: ac1 1s linear 0.3s 1 forwards;
    animation: ac1 1s linear 0.3s 1 forwards;
}
.about-home-container {
    background-image: url('resources/images/macbook-pro.jpg');
    background-position: bottom center;
    /*background-size: cover;*/
    background-attachment: fixed;
    /*min-height: 500px;*/
}
.about-home-background {
    background: rgba(0,0,0,0.5);
    min-height: 500px;
}
.about-home {
    width: 100% !important;
    max-width: 1024px;
    margin: 0 auto;
    
    padding-bottom: 50px;
}
.tag-line {
    font-size: 72px;
    color: white;
    padding: 100px 40px 0 40px;
    /*font-weight: 900;*/
}
.about-introduction {
    padding: 50px 40px;
    color: black;
    font-size: 28px;
    width: 100% !important;
    max-width: 1024px;
    line-height: 150%;
    font-weight: 300;
    box-sizing: border-box;
}
.about-process-container {
    width: 100%;
    /*background: white;*/
}
.about-process {
    width: 100% !important;
    max-width: 1024px;
    margin: 0 auto;
    /*background: white;*/
    border-radius: 30px 30px 0 0;
    /*color: #ececec;*/
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    padding-bottom: 30px;
}
.process-description {
    font-size: 28px;
    padding: 40px;
    
}
.process-title {
    font-size: 32px;
    text-align: center;
    padding-bottom: 20px;
}
.process-container {
    min-height: 200px;
    width: 100%;
    padding: 0 40px;
    margin: 0 auto;
    box-sizing: border-box;
}
.method-row-container {
    display: inline-block;
    width: 470px;
    margin: 0 auto;
}
.method-container {
    display: inline-block;
    width: 233px;
    height: 233px;
    border-radius: 116px;
    background: black;
    font-size: 20px;
    box-sizing: border-box;
    padding: 10px;
}
.first-method {
    background: #ff8d6c;
}
.second-method {
    background: #afe9b3;
}
.third-method {
    background: #fbf19c;
}
.last-method {
    background: #77aaff;
}
@media (max-width:1040px) {
    .process-container {
        width: 470px;
        padding: 0;
    }
}
@media (max-width:469px) {
    .process-container {
        width: 235px;
    }
    .method-container {
        width: 235px;
    }
    .method-row-container {
        width: 235px;
    }
}
.method-container ul {
    padding-left: 0;
    list-style: none;
    font-weight: 100;
}
.method-container ul li {
    line-height: 150%;
}
.method-icon {
    width: 30%;
    height: 70px;
    margin: 30px auto 15px auto;
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.method-icon img {
    width: 100%;
    height: auto;
}
.method-icon:hover {
    width: 33%;
}

.method-title {
    text-align: center;
    font-weight: 400;
}
.method-description {
    text-align: center;
    font-size: 14px;
    width: 80%;
    margin: 0 auto;
}
.about-contact {
    width: 100%;
    background: #68b8c4;
    font-family: 'Roboto', sans-serif;
}
.about-contact-container {
    position: relative;
    width: 100% !important;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 30px;
}
.about-contact-title {
    display: inline-block;
    font-size: 32px;
    font-weight: 100;
    width: 100%;
}
.about-contact-text {
    display: inline-block;
    width: 60% !important;
    max-width: 640px;
}
.lets-talk {
    position: absolute;
    right: 30px;
    top: 40%;
}
.lets-talk a {
    color: #000;
    font-size: 20px;
    background: #f0f0f0;
    padding: 10px 30px;
    text-decoration: none;
    font-weight: 100;
    vertical-align: middle;
    
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.lets-talk a:hover {
    color: #fff;
    background: #222;
    
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

@media (max-width: 767px) {
    .tag-line {
        font-size: 52px;
    }
    .about-introduction {
        font-size: 20px;
    }
    .about-contact-title .about-contact-text {
        display: block;
        width: 100% !important;
        max-width: 100%;
        font-size: 20px;
    }
    .lets-talk {
        position: inherit;
        margin-top: 30px;
    }
    .lets-talk a {
        display: inline-block;
    }
}
@media (max-width:500px) {
    .tag-line {
        font-size: 38px;
    }
}