EarlyConnect

IT Solution Company EarlyConnect website renewal project.
UI/UX Design, Front-End Development
Problem

Contrived picture, Color dissonance, Mobile version needed, Narrow screen, Overlapping contents

⌃ Previous web design

Process

Gathering information 〉 Sitemap 〉 Sketch 〉 Color Scheming 〉 Design 〉 Prototype 〉 Front-End

Solution

Client wished for a clean, professional look and a white/blue color combination seemed perfect. According to business psychology, blue signifies cleanliness and trust; so it was only fitting to match up well with the company’s main philosophy, “Early and Flexible Service”. The most important thing I had to consider throughout the design was selecting a picture that best fit for the main page. The main product of this company is a solution for call centers (especially SAMSUNG), and current companies’ product images tend to look contrived. So, I selected a picture that looks trendy and natural.

Code Sample

HTML, SCSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no">
   
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <title>EARLY CONNECT</title>
    
    <link rel="shortcut icon" type="image/png" href="img/favicon.ico"> <!--FAVICON-->
    
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/hiraku/hiraku.css">
    <link rel="stylesheet" type="text/css" href="css/aos.css">
    <link rel="stylesheet" type="text/css" href="css/slick.css">
    <link rel="stylesheet" type="text/css" href="css/slick-theme.css">
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800" rel="stylesheet">
</head>
<body>
<div class="container">
    
      <header>
        <div class="header_wrap">
            <div class="logo"><a href="index.html"><img src="img/logo.png"></a></div>
            
            <!-- Mobile -->
            <div class="menu-m">
                   <button class="hiraku-open-btn" id="offcanvas-btn-right" data-toggle-offcanvas="#js-hiraku-offcanvas-1">
                        <span class="hiraku-open-btn-line"></span>
                   </button>
                   
                   <div class="offcanvas-right submenu-m">
                           <div class="top">
                               <a href="index.html"><img src="img/logo.png"></a>
                               <a href="login.html"><button class="btn login">Log In</button></a>
                               <button class="btn login" style="display: none;">Log Out</button>
                           </div>
                           
                            <ul>
                                <li class="title first-title">
                                    <a href="#">Solution</a>
                                    <div class="plus-minus-toggle collapsed"></div>
                                </li>
                                <li><a href="verification.html">Verification</a></li>
                                <li><a href="smsalert.html">Communication</a></li>
                                <li><a href="tms.html">Biz Helper</a></li>
                            </ul>
                             <ul>
                                <li class="title">
                                    <a href="#">Quote</a>
                                    <div class="plus-minus-toggle collapsed"></div>
                                </li>
                                <li><a href="price.html">Quote</a></li>
                            </ul>
                            <ul>
                                <li class="title">
                                    <a href="#">About Us</a>
                                    <div class="plus-minus-toggle collapsed"></div>
                                </li>
                                <li><a href="aboutus.html">About Us</a></li>
                                <li><a href="contactus.html">Contact Us</a></li>
                                <li><a href="aboutus.html#career">Career</a></li>
                            </ul>
                            <ul>
                                <li class="title">
                                    <a href="#">FAQ</a>
                                    <div class="plus-minus-toggle collapsed"></div>
                                </li>
                                <li><a href="faq.html">FAQ</a></li>
                            </ul>
                            <ul>
                                <li class="title">
                                    <a>My Page</a>
                                    <div class="plus-minus-toggle collapsed"></div>
                                </li>
                                <li><a href="admin.html">Admin</a></li>
                                <li><a href="myaccount.html">My Account</a></li>
                                <li><a href="myproduct.html">My Product</a></li>
                                <li><a href="webservice.html">Developer</a></li>
                            </ul>
                    </div>   
            </div>
               
            <ul class="menu">
                <li>
                    <a class="menu-solution" href="verification.html">Solutions</a>
                    <div class="submenu solution">
                        <ul>
                            <li><a href="verification.html">Verification</a></li>
                            <li><a href="smsalert.html">Communication</a></li>
                            <li><a href="tms.html">Biz Helper</a></li>
                        </ul>
                    </div>
                </li>
                
                <li>
                    <a href="price.html" class="menu-price">Quote</a>
                    <div class="submenu price">
                        <ul>
                            <li><a href="price.html">Quote</a></li>
                        </ul>
                    </div>    
                </li>
                
                <li>
                    <a class="menu-about" href="aboutus.html">About Us</a>
                     <div class="submenu about">
                        <ul>
                            <li><a href="aboutus.html">About Us</a></li>
                            <li><a href="contactus.html">Contact Us</a></li>
                            <li><a href="aboutus.html#career">Career</a></li>
                        </ul>
                    </div>
                </li>
                
                <li>
                    <a href="faq.html" class="menu-faq">FAQ</a>
                    <div class="submenu faq">
                        <ul>
                            <li><a href="faq.html">FAQ</a></li>
                        </ul>
                    </div>    
                </li>
            </ul>
            <button class="btn login" style="display: none;">Login</button>
            <div class="btn login-active">
                <img src="img/login_icon.png">
                <div class="submenu login-active-sub">
                        <ul>
                            <li><a href="admin.html">Admin</a></li>
                            <li><a href="myaccount.html">My Account</a></li>
                            <li><a href="myproduct.html">My Product</a></li>
                            <li><a href="webservice.html">Developer</a></li>
                            <li><a style="color: #56b2d8;">Log-Out</a></li>
                        </ul>
                </div>
            </div>
        </div>   
    </header>
    
<div class="sec_wrap">    
    <section class="sec1">
       <div class="slider_wrap">
            <div class="slider first">
              <div class="slider_inner max-width">
                   <div class="slider_txt">
                       <h2>Best Solution for Your Calls</h2>
                       <p>We provide thorough customer care package <br/>for your business.</p>
                       <a href="verification.html"><button class="btn basic">Go to Solutions</button></a>
                   </div>
               </div>
            </div>
            <div class="slider second">
              <div class="slider_inner max-width">
                   <div class="slider_txt">
                       <h2>EARLY TMS</h2>
                       <p>EarlyTMS Provides ideal ticket management system for better customer service. Build the lasting cutomer experience with us.</p>
                       <a href="http://www.earlytms.com/" target="_blank"><button class="btn basic">Go to EarlyTMS</button></a>
                   </div>
               </div>
            </div>
            <div class="slider third">
              <div class="slider_inner max-width">
                   <div class="slider_txt">
                       <h2>EARLY LMS</h2>
                       <p>EarlyLMS offers learning platform for user to acquire customer management skill and knowledge related to their task.</p>
                       <a href="http://www.earlylms.com/" target="_blank"><button class="btn basic">Go to EarlyLMS</button></a>
                   </div>
               </div>
            </div>
        </div>
    </section>
    
    <section class="sec2">
        <div class="solution_wrap max-width">
            <a href="http://www.earlytms.com/" target="_blank">
                    <h3>EARLY TMS</h3>
                    <p>Manage your customer data easy.</p>
            </a>
            <a href="ans.html" target="_blank">
                    <h3>ANS</h3>
                    <p>Value the time of customer.</p>
            </a>
            <a href="http://www.earlylms.com/" target="_blank">
                    <h3 class="h3-w">EARLY LMS</h3>
                    <p style="color: #fff;">Knowledge on the task is key to productivity.</p>
            </a>
            <a href="https://dt.earlyconnect.com/" target="_blank">
                    <h3>Decision Tree</h3>
                    <p>A chain of decisions used to arrive at a solution.</p>
            </a>
        </div>
    </section>
    
    <section class="sec3">
       <div class="sec3_wrap max-width">
            <h3>Our Solutions</h3>
            <p>Drawing customer’s attention is one thing, but maintaining the customer satisfaction is another. <br/>EarlyConnect can help you build the lasting relationship with the customer.</p>
            
            <div class="sec_box 1">
                <div class="txt" data-aos="fade-right">
                    <p class="big-gray">Data</p>
                    <h4>Cloud &#38; Web based solutions</h4>
                    <p>EarlyConnect provides the cloud storage system and web-based solutions that can be integrated with your system.</p>
                </div>
                <div class="txt" data-aos="fade-right">
                    <p class="big-gray">Customization</p>
                    <h4>Your business, your way</h4>
                    <p>Build the ticket template and learning material in a way that best fits your business needs.</p>
                </div>
                <div class="txt" data-aos="fade-right">
                    <p class="big-gray">Fast</p>
                    <h4>No time for old-fashioned customer management</h4>
                    <p>EarlyConnect allows one-click solution to verify the customer information via phone number.</p>
                </div>
                <div class="txt" data-aos="fade-right">
                    <p class="big-gray">Simple</p>
                    <h4>Easy to Learn &amp; Easy to Master</h4>
                    <p>Ticket Management System from EarlyConnect is capable of providing highly customizable and easy-to-use ticket template.</p>
                    <a href="http://www.earlytms.com/" target="_blank"><button class="btn basic">Go to EarlyTMS</button></a>
                </div>
                <div class="txt" data-aos="fade-right">
                    <p class="big-gray">Value</p>
                    <h4>Do not leave your customer waiting</h4>
                    <p>Online Callback Reminder service from EarlyConnect makes sure to keep track of customers who still need support from service center.</p>
                    <a href="ans.html"><button class="btn basic">Go to ANS</button></a>
                </div>
                <div class="txt" data-aos="fade-right">
                    <p class="big-gray">Train</p>
                    <h4>Be prepared with knowledge</h4>
                    <p>Knowledge on the task is key to productivity in business, EarlyLMS from EarlyConnect guarantees the comprehensive learning.</p>
                    <a href="http://earlylms.com/" target="_blank"><button class="btn basic">Go to EarlyLMS</button></a>
                </div>
            </div>
            <div class="rotate" data-aos="fade-right">
                <div class="icon"></div>
                <div class="icon"></div>
                <div class="icon"></div>
                <div class="rotate2">
                    <block class="circle"></block>
                    <block class="circle"></block>
                    <block class="circle"></block>
                </div>
            </div>
        </div>
    </section>
    
    <!--<section class="sec4">
        <div class="sec4_wrap">
           <div class="txt max-width">
               <h3>E-Learning</h3>
               <p>Knowledge on the task is key to producicity in business,
               EarlyLMS from EarlyConnect guarantees the comprehensive learning.</p>
               <a href="http://www.earlylms.com/" target="_blank"><button class="btn basic">Go to EarlyLMS</button></a>
            </div>
        </div>
    </section>-->
    
    <section class="sec5" data-aos="fade-right">
        <div class="sec5_wrap max-width">
            <h3>The customers who made great use of our solutions are</h3>
            <p>EarlyConnect has provided fast and convenient solutions to number of companies throught the world.</p>
            <div class="client"></div>
            <img src="img/earth.png" class="earth">
        </div>
    </section>
    
    <section class="sec6">
        <div class="sec6_wrap max-width">
            <h3>We would be happy to answer your question.</h3>
            <a href="contactus.html"><button class="btn basic">Contact Us</button></a><br/>
            <img src="img/logo_w.png">
        </div>
    </section>
</div>
       
    <footer>
      <div class="footer_wrap">
           <div>
              <p>333 Sylvan Ave, Englewood Cliffs, NJ 07632</p>
              <p>+1.201.731.3608 / +1.866.921.0001</p>
              <p><a href="mailto:support@earlyconnect.com">support@earlyconnect.com</a></p>
           </div>
           <div>
             <p>&#9400; EarlyConnect 2018. All rights reserved.</p>
           </div> 
      </div>
    </footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/hiraku.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/common.js"></script>
</body>
</html>
@import "common.scss";

.sec_wrap {
    padding-bottom: 60px;
    
    @include respond-to($nexus7) {
         padding-top: 50px;
         padding-bottom: 200px;
         background: none;
    }
    @include respond-to($tablet-portrait) {
            padding-top: 50px;
            padding-bottom: 200px;
            background: none;
    }

.sec1 {
    .slider_wrap {
        width: 100%;
        
        .slider {
            width: 100%;
            
            .slider_inner {
                height: 700px;
                margin: 0 auto;
                padding: 0px 50px;
                
                @include respond-to($tablet-portrait) {
                    padding: 0px;
                }
                
                 .slider_txt {
                    padding-top: 280px;
                     
                     @include respond-to($tablet-portrait) {
                        padding-top: 100px;
                        text-align: center;
                     }

                    h2 {
                        margin-bottom: 30px;
                        
                        @include respond-to($tablet-portrait) {
                            margin-bottom: 10px;
                            font-size: 2.5em;
                            line-height: 56px;
                        }
                    }
                     
                    p {
                        width: 500px;
                        margin-bottom: 60px;
                        
                        @include respond-to($tablet-portrait) {
                            width: 100%;
                            margin: 0 auto;
                            margin-bottom: 15px;
                        }
                        @include respond-to($nexus7) {
                            width: 400px;
                        }
                    }
                    .basic {
                        display: block;
                        margin-bottom: 150px;
                        
                        @include respond-to($tablet-portrait) {
                            margin: 0 auto;
                            widows: 100%;
                        }
                    }
                }
            }
        }
        
        .first {
            background-color: $gray1;
            .slider_inner {
                background-image: url(../img/bg_person.png),  url(../img/bg_icon.png);;
                background-size: 400px, 600px;
                background-repeat: no-repeat;
                background-position: right bottom; 
                
                @include respond-to($phone) {
                   background-size: 250px, 400px;
                   background-position: 65px 360px ,center 360px; 
                }
                @include respond-to($tablet-portrait) {
                   background-size: 250px, 400px;
                   background-position: center bottom;
                }
            }
        }
        
        .second {
            background: url(../img/tms_bg.png) center bottom no-repeat $gray1;
            background-size: cover;
            .slider_inner {
                background-image: url(../img/tms.png);
                background-size: 600px;
                background-repeat: no-repeat;
                background-position: right 200px; 
                
                @include respond-to($phone) {
                   background-size: 450px;
                   background-position: 40px 340px; 
                }
                @include respond-to($tablet-portrait) {
                   background-size: 450px;
                   background-position: center bottom; 
                }
            }
        }
        
        .third {
             background-color: $gray1;
            
            .slider_inner {
                background-image: url(../img/lms.png), url(../img/lms_bg.png), url(../img/lms_bg.png);
                background-size: 600px;
                background-repeat: no-repeat;
                background-position: right 200px, 400px bottom; 
                
               @include respond-to($phone) {
                   background-size: 450px;
                   background-position: 40px 340px; 
                }
              @include respond-to($tablet-portrait) {
                   background-size: 450px;
                   background-position: center bottom;
                }
            }
        }  
    }
}

.sec2 {
    margin-top: 50px;
    
    @include respond-to($phone) {
       margin-top: 0px; 
    }
    @include respond-to($tablet-portrait) {
       margin-top: 0px; 
    }
    
    .solution_wrap {
        margin: 0 auto;
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        
        a {
            width: 450px;
            height: 450px;
            cursor: pointer;
            display: block;
            
            @include respond-to($tablet-portrait) {
                width: 100%;
            }
            
            h3 {
                margin: 30px 0px 5px 30px;
                position: relative;
                background-size: 350px;
                
                &::after {
                    content: '';
                    width: 30px;
                    height: 30px;
                    background: url(../img/arrow.png) no-repeat center center;
                    background-size: contain;
                    position: absolute;
                    top: 2px;
                    margin-left: 15px;
                    -webkit-transform: scaleX(-1);
                     transform: scaleX(-1); 
                }
            }
            
            .h3-w {
                color: #fff;
                    &::after {
                        content: '';
                        width: 30px;
                        height: 30px;
                        background: url(../img/arrow_w.png) no-repeat center center;
                        background-size: contain;
                        position: absolute;
                        top: 2px;
                        -webkit-transform: scaleX(-1);
                        transform: scaleX(-1);  
                    }
                }
            
            p {
                margin-left: 30px
            }
            
            &:nth-of-type(1) {
                @include zoom-animation;
                background: url(../img/solution1.png) 100px 110px no-repeat #cdd0d5;
                background-size: 100%;
                
                &:hover {
                     background-size: 110%;
                }
                
                @include respond-to($tablet-portrait) {
                    background: url(../img/solution1.png) 300px 100px no-repeat #cdd0d5;
                    background-size: 60%;
                    
                    &:hover {
                        background-size: 70%;
                    }
                }
                @include respond-to($phone) {
                  background: url(../img/solution1.png) 100px 110px no-repeat #cdd0d5;
                  background-size: 100%; 
                    
                  &:hover {
                       background-size: 110%;
                    }  
                }
            }
            &:nth-of-type(2) {
                background: url(../img/solution2.png) 100px 160px no-repeat #d9e2e8;
                background-size: 100%;
                @include zoom-animation;
                
                &:hover {
                     background-size: 110%;
                }
                @include respond-to($tablet-portrait) {
                    background: url(../img/solution2.png) 250px 150px no-repeat #d9e2e8;
                    background-size: 60%;
                    
                     &:hover {
                     background-size: 70%;
                    }
                }
                @include respond-to($phone) {
                    background: url(../img/solution2.png) 100px 160px no-repeat #d9e2e8;
                    background-size: 100%;
                    @include zoom-animation;

                    &:hover {
                         background-size: 110%;
                    }
                }
            }
            &:nth-of-type(3) {
                background: url(../img/solution3.png) 100px 160px no-repeat #8b8684;
                background-size: 100%;
                @include zoom-animation;
 
                &:hover {
                     background-size: 110%;
                }
                
                 @include respond-to($tablet-portrait) {
                    background: url(../img/solution3.png) 250px 150px no-repeat #8b8684;
                    background-size: 60%;
                    
                     &:hover {
                     background-size: 70%;
                    }
                }
                @include respond-to($phone) {
                      background: url(../img/solution3.png) 100px 160px no-repeat #8b8684;
                      background-size: 100%;
                    
                      &:hover {
                         background-size: 110%;
                      }
                 }
            }
            &:nth-of-type(4) {
                background: url(../img/solution4.png) 100px 120px no-repeat #e7e7e7;
                background-size: 100%;
                @include zoom-animation;

                &:hover {
                     background-size: 110%;
                }
                
                @include respond-to($tablet-portrait) {
                    background: url(../img/solution4.png) 300px 100px no-repeat #e7e7e7;
                    background-size: 60%;
                    
                     &:hover {
                     background-size: 70%;
                    }
                }
                @include respond-to($phone) {
                   background: url(../img/solution4.png) 100px 120px no-repeat #e7e7e7;
                    background-size: 100%;
                    
                    &:hover {
                         background-size: 110%;
                    } 
                }
            }
        }
    }
}

.sec3 {
    margin: 50px 0;
    
    .sec3_wrap { 
        text-align: center;   
        position: relative;
        
        h3 {
            color: $blue2;
            margin-bottom: 15px;
        }
            
         .rotate {
                width: 750px;
                height: 750px;
                border-radius: 50%;
                border: 1px dotted $gray2;
                position: absolute;
                top: 150px;
                right: -200px;
                background: url(../img/dot.png) no-repeat center center;
             
                @include respond-to($tablet-portrait) {
                    top: 180px;
                    right: -480px; 
                }

               .icon {
                   &:nth-of-type(1) {
                       background: url(../img/cloud_icon.png) no-repeat center right;
                       width: 180px;
                       height: 180px;
                       background-size: cover;
                       position: absolute;
                       top: 0px;
                       left: 30px;

                       &::after {
                           color: $blue2;
                           content: 'Web';
                           position: absolute;
                           top: 160px;
                           left: 50%;
                           transform: translateX(-50%);
                           z-index: 10;
                           font-size: 1.2em;
                       }
                   } 

                   &:nth-of-type(2) {
                       background: url(../img/cloud_icon.png) no-repeat center left;
                       width: 180px;
                       height: 180px;
                       background-size: cover;
                       position: absolute;
                       top: 150px;
                       left: -80px;

                       &::after {
                           color: $blue2;
                           content: 'Cloud';
                           position: absolute;
                           top: 160px;
                           left: 50%;
                           transform: translateX(-50%);
                           z-index: 10;
                           font-size: 1.2em;
                       }
                   } 
                   
                    &:nth-of-type(3) {
                       background: url(../img/customize.png) no-repeat center left;
                       width: 180px;
                       height: 180px;
                       background-size: cover;
                       position: absolute;
                       top: 540px;
                       left: 20px;
                        
                       @include respond-to($tablet-portrait) {
                           display: none;     
                        }
                        
                       &::after {
                           color: $blue2;
                           content: 'Customization';
                           position: absolute;
                           top: 160px;
                           left: 50%;
                           transform: translateX(-50%);
                           z-index: 10;
                           font-size: 1.2em;
                       }
                   }
               }

                .rotate2 {
                    width: 500px;
                    height: 500px;
                    border: 1px solid $blue2;
                    border-radius: 50%;
                    position: absolute;
                    top: 16%;
                    left: 17%;
                    transform: translate(-50%,-50%);
                    animation: spin 50s infinite linear;
                    
                    @include respond-to($phone) {
                            opacity: 0.3;   
                        }

                    .circle {
                        @include gradient ($blue1, $blue2);
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        position: absolute;
                        
                        &:nth-of-type(1) {
                            top: -5px;
                        }
                        &:nth-of-type(2) {
                            top: 300px;
                            left: 0px;
                        }
                        &:nth-of-type(3) {
                            top: 475px;
                            left: 346px;
                        }
                    }

                }
            }
       
        .sec_box {
            margin: 200px 0px 100px 0px;
            z-index: 500;
            
            @include respond-to($tablet-portrait) {
                    margin-top: 380px;
                    margin-left: 10px;
                }
            
            .txt {
                text-align: left;
                margin-bottom: 200px;
                
                @include respond-to($tablet-portrait) {
                    margin-bottom: 100px;
                    width: 350px;
                }
                
                .btn {
                    margin-left: 10px;
                    
                    @include respond-to($phone) {
                        margin-left: 0px;
                    }
                    @include respond-to($tablet-portrait) {
                        margin-left: 0px;
                    }
                }
                
                &:nth-of-type(2) {
                    margin-left: 80px;
                    
                    @include respond-to($tablet-portrait) {
                        margin-left: 10px;
                    }
                }
                
                &:nth-of-type(3) {
                    margin-left: 400px;
                    position: relative;
                    
                    @include respond-to($tablet-portrait) {
                         margin-left: 10px;
                    }
                    
                    &::before {
                        content: '';
                        background: url(../img/dot6.png) no-repeat center center;
                        background-size: contain;
                        width: 260px;
                        height: 260px;
                        position: absolute;
                        left: -300px;
                        top: -30px;
                    }
                }
                
                &:nth-of-type(4) {
                    position: relative;
                    left: 34%;
                    transform: translateX(0%);
                    
                    @include respond-to($ipad) {
                         left: 20%;
                    }
                    @include respond-to($tablet-portrait) {
                         left: 10px;
                         transform: none;
                    }
                    
                    &::after {
                        content: '';
                        background: url(../img/dot5.png) no-repeat center center;
                        background-size: contain;
                        width: 200px;
                        height: 200px;
                        position: absolute;
                        top: 15px;
                        margin-left: 350px;
                        
                        @include respond-to($tablet-portrait) {
                            display: none;
                        }
                    }
                }
                
                &:nth-of-type(5) {
                    margin-left: 400px;
                    position: relative;
                    
                    @include respond-to($tablet-portrait) {
                         margin-left: 10px;
                    }
                    
                    &::before {
                        content: '';
                        background: url(../img/dot3.png) no-repeat center center;
                        background-size: contain;
                        width: 260px;
                        height: 260px;
                        position: absolute;
                        left: -300px;
                        top: -30px;
                    }
                }
                
                &:nth-of-type(6) {
                    position: relative;
                    left: 34%;
                    transform: translateX(0%);
                    
                    @include respond-to($ipad) {
                         left: 20%;
                    }
                    @include respond-to($phone) {
                        left: 10px;
                        transform: none;
                    }
                    @include respond-to($tablet-portrait) {
                         left: 10px;
                         transform: none;
                    }
                    
                    &::after {
                        content: '';
                        background: url(../img/dot4.png) no-repeat center center;
                        background-size: contain;
                        width: 200px;
                        height: 200px;
                        position: absolute;
                        top: 15px;
                        margin-left: 350px;
                        
                        @include respond-to($tablet-portrait) {
                            display: none;
                        }
                    }
                }
                
                
                .big-gray {
                    font-size: 4em;
                    font-weight: bold;
                    color: $gray1;
                    margin-top: 100px;
                }
                
                h4 {
                    margin: 0px 0px 10px 20px;
                    
                    @include respond-to($tablet-portrait) {
                       margin: 0px 0px 10px 0px;
                    }
                }
                
                p:last-of-type {
                    width: 450px;
                    margin: 10px 0px 20px 20px;
                    
                    @include respond-to($tablet-portrait) {
                        width: 95%;
                        margin: 0px 0px 30px 0px;
                    }
                }
            }
        }
    }
}
    
/*
.sec4 {
    .sec4_wrap {
        background: url(../img/elearning.png) no-repeat center center;
        background-size: cover;
        height: 350px;
        
        .txt {
            display: block;
            padding-top: 80px;
            
            @include respond-to($phone) {
                margin-left: 10px;
            }
            @include respond-to($tablet-portrait) {
                margin-left: 10px;
            }
            @include respond-to($nexus7) {
                margin-left: 10px;
            }
            
            h3 {
                color: #fff;
            }
            
            p {
                color: #fff;
                width: 450px;
                margin: 10px 0px 20px 0px;
                
                @include respond-to($phone) {
                    width: 90%;
                }
                @include respond-to($tablet-portrait) {
                    width: 90%;
                }
            }
        }
    }
}*/

.sec5 {
    margin-top: 80px;
    line-height: 42px;
    
    @include respond-to($phone) {
        margin-top: 50px;
    }
    @include respond-to($tablet-portrait) {
        margin-top: 50px;
    }
    
    .sec5_wrap {
        text-align: center;
        
        p {
            width: 450px;
            margin-top: 20px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            
            @include respond-to($phone) {
                width: 100%;
            }
            @include respond-to($tablet-portrait) {
                width: 100%;
            }
        }
        
        .client {
            background: url(../img/clients.png) no-repeat center center;
            width: 100%;
            height: 250px;
            margin: 100px 0px 20px 0px;
        
            @include respond-to($phone) {
                background: url(../img/clients_m.png) no-repeat center center;
                background-size: contain;
                width: 320px;
                height: 320px;
                margin: 0 auto;
                margin-top: 120px;
                margin-bottom: 50px;
            }
        }
        
        .earth {
            width: 100%;
        }
    }
    
}

.sec6 {
    background: $navy;
    height: 300px;
    text-align: center;
    margin-top: -15px;
    
    .sec6_wrap {
        h3 {
            padding-top: 50px;
            color: #fff;
            font-weight: bold;
            
            @include respond-to($phone) {
                padding-top: 25px;
                line-height: 36px;
            }
            @include respond-to($tablet-portrait) {
                padding-top: 25px;
                line-height: 36px
            }
        }
        
        button {
            margin: 30px 0px 60px 0px;
            box-shadow: none;
        }
        
    }
}
}