/**

 * @package Olivine Limited

 * @author Olivine Limited <info@olivineltd.com>

 * @link http://olivineltd.com

 * @author Md. Pomerul Islam <pomerul@olivineltd.com>

 * @link http://pomerulbd.com

 * @version  2.0.0

 * @copyright ©-2011 - Olivine Limited.

 * @last-modified 01/11/2017.

 */





/* ----------------------------------------------

*        			 DEFAULT

 ------------------------------------------------ */

body,html {

    margin:0;

    padding:0;

    font-family: 'Raleway', sans-serif;

    overflow-x:hidden;

}



section {

    background-size:cover;

    background-position:center;

    height:100%;

    width:100%;

    background-attachment:fixed;

}



::-webkit-scrollbar {

    width: 12px;

}



/* Track */

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 

    -webkit-border-radius: 10px;

    border-radius: 10px;

}



/* Handle */

::-webkit-scrollbar-thumb {

    -webkit-border-radius: 10px;

    border-radius: 10px;

    background: rgba(0,0,0,0.5); 

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 

}

::-webkit-scrollbar-thumb:window-inactive {

    background: rgba(0,0,0,0.4); 

}



::selection {

    background: #27C667; /* WebKit/Blink Browsers */

    color: #FFF;

}



::-moz-selection {

    background: #27C667; /* Gecko Browsers */

    color: #FFF;

}



.headline {

    display:block;

    width:100%;

    text-align:center;

    margin-bottom:25px;

}



.headline h2 {

    font-family: 'Raleway', sans-serif;

    display:inline-block;

    margin-bottom:20px;

    font-size: 30px;

    font-weight: 500;

    color: #27C667;

}





.padding-default {

    padding:50px 0;

}



.headline p{

    font-family: 'Raleway', sans-serif;

    font-style: normal;

    font-weight: 300;

    color: #eee;

    font-size: 18px;

    font-size: 16px;

}



p{

    font-size:16px;

}



.nospace {

    padding: 0 !important;

    margin: 0 !important;

}



.container-full {

    width:100%;

}



.container-padding{

    width: 100%;

    padding: 0 70px;

    margin: 0 auto;

}



option[default] {

    display: none;

}



/*  ------------------------------------------------

 * 				OVERVIEW

 * ------------------------------------------------ */

#overview .information {

    text-align: left;

}



#overview .info-box {

    border: 1px solid #111;

    background: #222;

    margin-top: 25px;

    padding:  10px;

}



#overview .information img {

    width: 100px;

    height: auto;

}



.overview-wrapper {

    position: relative;

    background: #333;

    padding: 20px;

    width: auto;

    max-width: 500px;

    margin: 20px auto;

    color: #27C667;

    border: 1px solid #222;

}



#overview .overview-tag {

    padding: 15px;

    font-size: 16px;

}



#overview .overview-tag:before {

    position: absolute;

    content: '';

    height: 45px;

    width: 2px;

    background: #27C667;

    margin-left: -10px;

}



#overview .services {

    text-align: center;

    border: 1px solid #111;

    background: #222;

}



#overview .services .col-sm-3{

    margin-bottom: 10px;

    min-height: 90px;

}



#overview .services h3 {

    font-size: 18px;

    font-weight: 300;

    text-transform: uppercase;

    margin-bottom: 25px;

}



#overview .services h3:before {

    position: absolute;

    content: '';

    background: #27C667;

    width: 70px;

    height: 1px;

    margin-top: 20px;

}



/*  ------------------------------------------------

* 				BANNER SECTION

* ------------------------------------------------ */

.banner{

    background: #27C667 url("../images/pattern.png");

    position:relative;

    height:350px;

    width:100%;

    z-index:1;

}



.home-left ,.home-right {

    position:relative;

    height:350px;

    width:50%;

    float:left;

}



.site-header {

    font-family: 'Raleway', sans-serif;

    color:#FFF;

    text-align:left;

    padding-left:70px;

    position:absolute;

    top:50%;

    transform:translateY(-50%);





}



.site-title {

    font-size: 35px;

    display: inline-block;

    margin: 0 auto;    

    font-weight: 700;

}



.site-tagline{

    color: #2D4B39;

    margin: 0 auto;

    font-size: 15px;

}



/* -----------------------------------------------------

 * 				LOADER

 * ----------------------------------------------------*/



#loader{

    position: fixed;

    left: 0px;

    top: 0px;

    width: 100%;

    height: 100%;

    z-index: 9999;

    background: 50% 50%  rgb(62,80,80);

}



#loader .loader-pos{

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translateX(-50%) translateY(-50%);

    width: 150px;

    height: 150px;

}



#loader .olivine-clock {

    position: absolute;

    border: 3px solid #27C667;

    width: 150px;

    height: 150px;

    border-radius: 50%;

    animation-name: loader-anim;

    animation-duration: 3s;

    animation-fill-mode: forwards;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}



#loader .olivine-anti-clock {

    position: absolute;

    border: 3px solid #27C667;

    width: 150px;

    height: 150px;

    border-radius: 50%;

    animation-name: loader-anim2;

    animation-duration: 3s;

    animation-fill-mode: forwards;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}





#loader .olivine-clock:before{

    position: absolute;

    content: '';

    width: 3px;

    height: 3px;

    background: #27C667;

    margin-top: -2.25px;

    -webkit-box-shadow: 0px 0px 10px 7px rgba(39,198,103,1);

    -moz-box-shadow: 0px 0px 10px 7px rgba(39,198,103,1);

    box-shadow: 0px 0px 10px 7px rgba(39,198,103,1);

} 



#loader .olivine-anti-clock:before{

    position: absolute;

    content: '';

    width: 3px;

    height: 3px;

    background: #27C667;

    margin-top: -2.25px;

    -webkit-box-shadow: 0px 0px 10px 7px rgba(39,198,103,1);

    -moz-box-shadow: 0px 0px 10px 7px rgba(39,198,103,1);

    box-shadow: 0px 0px 10px 7px rgba(39,198,103,1);

} 





#loader img{

    position: absolute;

    width: 120px;

    height: auto;

    margin-left: 15px;

    margin-top: 9px;

}





/* -----------------------------------------------

 * 				NAVIGNATION

 * ----------------------------------------------- */

#nav-main {

    position: relative;

    width: 100%;

    font-family: 'Raleway', sans-serif;

    background:#2C2C2C;

    border-radius:0;    

    border: 0;

    padding: 0 10px;

    margin:0;

    z-index: 10;

    border-bottom: 2px solid #46B767;

    transition: 500ms;

    top: 0;

    max-width: 1020px;

}



#nav-main .label-success{

    font-size: 14px;

    background: #222 !important;

    border: 2px solid #27C667 !important;

}



#nav-main .label-success:hover{

    transition: all .5s ease;

    background: #27C667 !important;

}



.nav-shadow{

    -webkit-box-shadow: 0px 1px 5px 0px rgba(44,44,44, .5);

    -moz-box-shadow: 0px 1px 5px 0px rgba(44,44,44, .5);

    box-shadow: 0px 1px 5px 0px rgba(44,44,44, .5);

}

.navbar-brand {

    background: url("../images/logo.svg") no-repeat;

    height: 52px;

    width: 133px;

    text-indent: -9999px;

    margin-top: 3px;

}



.navbar-nav a{

    color: #FFF;

    margin-top: 2px;

}

.navbar-nav a:hover {

    background: none;

}

.navbar-toggle .icon-bar {

    background:#fff;

}

.navbar-toggle .dropdown a {

    color:#fff;

}

.navbar-nav>li>a{

    margin-top: 0px;

    border-top: 4px solid #2C2C2C;

    padding-top: 11px;

}

.navbar-nav>li.active>a{

    border-top: 4px solid #27C667;

    color: #27C667;

    font-weight: bold;

}

#nav-main .nav>li>a:focus, #nav-main .nav>li>a:hover, #nav-main .nav>li>a:active {

    text-decoration: none;

    background:  none;

    color: #27C667;

}

#nav-main .nav>li>a:focus {

    color: #fff;

}

#nav-main .nav>li.active>a:focus {

    color: #27C667;

}





/* -------------------------------------------------

 * 					TOOLTIP 

 *  -----------------------------------------------*/



.tooltip-inner {

    background:#111;

    border-radius:0;

    padding:4px 6px;

    font-size: 14px;

    width: 500px;

}



.tooltip-arrow {

    display:none;

}



.o-animate {

    position:absolute;

    width: 50%;

    height:100%;

    top:50%;

    transform:translateY(-50%);

    left:50%;

    background: transparent linear-gradient(180deg, rgba(39, 198, 103, 0) 30%, rgba(102, 102, 102, 0.2)) repeat scroll 0% 0%;

}



.o-animate:before {

    content:'';

    position:absolute;

    top:20%;

    left:0;

    width:1px;

    background:#429b59;

    height:80%

}





/* -------------------------------------------------

 * 					SOCIAL ICONS 

 *  -----------------------------------------------*/



.sociel-icons {

    margin-top: 10px;

    text-align:left;

}



.s-icons {

    position: relative;

    display: inline-block;

    border: 1px solid #fff;

    width: 45px;

    height: 45px;

    font-size: 30px;

    margin: 5px;

    color: #fff;

    text-align: center;

    line-height: 45px;

    vertical-align: middle;

}



.s-icons:before {

    position: absolute;

    content: '';

    width: 0;

    height: 0;

    top: 0;

    left: 0;

    border-top: 10px solid #FFFFFF;

    border-right: 10px solid transparent;

}



.s-icons:hover {

    background:rgba(255,255,255,.2);

}







.banner .logo-sm{

    position: absolute;

    margin-left: .5px;

    width: 15%;

    height: auto;

    top:50%;

    transform:translateY(-50%) translateX(-50%);

    z-index: 9;

}



.banner .olivine-network {

    float: left;

    width: 50%;

    text-align: center;

    position:absolute;

    top:50%;

    transform:translateY(-50%);

}





.image-holder {

    position: relative;

}



.arrow-image {

    height:19px;

    width:106px;

    position:absolute;

    top: 50%;

    transform: translateY(-50%);

    right: 4%;



}



.arrow-right-light {

    background-image:url("../images/right-arrow-light.png");

    transform: translateY(-50%) translateX(100%);

    opacity:0;

    width:10px;

    animation-name:ani2;

    animation-duration:4s;

    animation-delay:3.5s;

    animation-direction: forward;

    animation-iteration-count: infinite;

}

.arrow-right-dark {

    background-image:url("../images/right-arrow-dark.png");

    width:10px;

    transform: translateY(-50%) translateX(-600%);

    opacity:0;

    z-index:-1;

    animation-name:ani1;

    animation-duration:4s;

    animation-delay:3s;

    animation-direction: forward;

    animation-iteration-count: infinite;

}



@keyframes ani1 {

    0%{

        opacity:0;

        transform: translateY(-50%) translateX(-600%);

    }

    5%{

        opacity:1;



    }

    10%{

        opacity:0;

        transform: translateY(-50%) translateX(550%);

    }



    100%{



    }

}

@keyframes ani2 {

    0%{

        opacity:0;

    }

    5%{

        opacity:1;

    }

    10%{

        opacity:0;

        transform: translateY(-50%) translateX(1200%);

    }

    100%{



    }

}





.monitor-image {

    margin: 0px auto;

    height: 110px;

    position: relative;

    width: 75%;

    background-size: cover;

    background-position: center center;

    border: 10px solid #2c2c2c;

    border-top-right-radius: 10px;

    border-top-left-radius: 10px;

}





.monitor-image:after {

    position: absolute;

    content: "";

    bottom: -24px;

    width: 120%;

    border: 5px solid #ddd;

    left: -10%;

    border-bottom-left-radius: 15px;

    border-bottom-right-radius: 15px;

}



.monitor-image:before {

    position: absolute;

    content: "";

    bottom: -20px;

    width: 30%;

    left: 50%;

    transform: translateX(-50%);

    z-index: 9;

    border: 3px solid #999;

    border-bottom-left-radius: 5px;

    border-bottom-right-radius: 5px;  



}





.outer-inside {

    position:absolute;

    transform: translateX(-50%) translateY(-50%);

    top:50%;

    left:50%;

}

.inside-monitor{

    font-size: 15px;

    animation-name: spin;

    animation-duration: 5000ms;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}



@keyframes spin {

    0% {

        transform:rotate(0deg);

        -webkit-transform:rotate(0deg);



    }



    100% {

        transform:rotate(360deg);

        -webkit-transform:rotate(360deg);



    }

}



.main-tag {

    width: 100%;

    margin: 0 auto;

    border: 1px solid #fff;

    margin-bottom: 20px;

    border-radius: 10px;

    color: #fff;

    position: relative;

}

.main-tag h4 {

    display:inline-block;

}

.main-tag:after {

    content:'';

    position: absolute;

    width: 0;

    height: 0;

    left: 50%;

    transform: translateX(-50%);

    border-top: 10px solid #fff;

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-bottom: 10px solid transparent;

    bottom:-20px;

}



.country-tag h3{

    margin: 0;

    margin-top: 25px;

    font-family: 'Raleway', sans-serif;

    font-weight: 300;

    color: #FFF;

    font-size: 15px;

}

#o-rotate{

    text-transform: uppercase;

}

.main-tag h4{

    font-family: 'Raleway', sans-serif;

    font-weight: 300;

    font-size: 15px;

}

.main-tag .o-link{

    font-weight: 400;

}





.global-network{

    width: 90%;

    position:relative;

    top:50%;

    left: 5%;

    transform:translateY(-50%);

}





/* ---------- BLINKED CURSOR -----------------*/

.typed-cursor{

    opacity: 1;

    -webkit-animation: blink 0.7s infinite;

    -moz-animation: blink 0.7s infinite;

    animation: blink 0.7s infinite;

}

@keyframes blink{

    0% { opacity:1; }

    50% { opacity:0; }

    100% { opacity:1; }

}

@-webkit-keyframes blink{

    0% { opacity:1; }

    50% { opacity:0; }

    100% { opacity:1; }

}

@-moz-keyframes blink{

    0% { opacity:1; }

    50% { opacity:0; }

    100% { opacity:1; }

}



/* ---------------------------------------------------

 * 				ABOUT

 * -------------------------------------------------- */

@keyframes loader-anim{

    0%{

        transform:rotate(0deg);

        -moz-transform: rotate(0deg);

        -webkit-transform: rotate(0deg); 

    }

    100%{

        transform:rotate(360deg);

        -moz-transform: rotate(360deg);

        -webkit-transform: rotate(360deg); 

    }



}

@keyframes loader-anim2{

    0%{

        transform:rotate(360deg);

        -moz-transform: rotate(360deg);

        -webkit-transform: rotate(360deg); 

    }

    100%{

        transform:rotate(0deg);

        -moz-transform: rotate(0deg);

        -webkit-transform: rotate(0deg); 

    }



}



#about {

    background: #3E5050;

}



#about .headline h2 {

    padding: 5px 25px;

    margin:5px 25px;

}





#about ul.tab{

    margin-bottom: 50px;

    padding: 0px;

    list-style: none;

    text-align: center;

}



#about ul.tab li{

    font-family: 'Raleway', sans-serif;

    font-weight: 600;

    background: none;

    color: #ccc;

    display: inline-block;

    padding: 10px 15px;

    cursor: pointer;

    border: 1px solid #2c2c2c;

    margin-right: 5px;

    margin-bottom: 5px;

}



#about ul.tab li.current{

    background: #353E3E;

    color: #27C667;

}



#about .tab-cont{

    display: none;

    animation-name: current-tab;

    animation-duration: 1s;

    animation-fill-mode: forwards;

}



#about .tab-cont.current{

    display: inherit;

}





#about .headline:before {

    margin-left: -50%;

}



#about .headline:after {

    margin-right: -50%;

}



#about .logo{

    text-align: center;

    margin-bottom: 25px;

}



#about .logo img{

    width: 150px;

    height: auto;



}



.about-text{

    font-family: 'Raleway', sans-serif;

    font-style: normal;

    font-weight: 300;

    color: #FFF;

    font-size: 16px;

}



blockquote {

    border-left: 5px solid #C5CACA; 

    padding: 0.5em 10px;

    quotes: "\201C""\201D""\2018""\2019";

    font-size: 16px;

}



blockquote:before {

    color: #C5CACA;

    content: open-quote;

    font-size: 7em;

    line-height: 0.1em;

    margin-right: 0.25em;

    vertical-align: -0.4em;

}

blockquote p {

    display: inline;

}





/* ---------------------------------------------------

 * 				ACHIEVEMENT

 * -------------------------------------------------- */

#achievement{

    border-top: 1px solid #777;

    background: #3E5050;

}



#achievement .process{

    position: relative;

    border-top: 1px solid #777;

}



#achievement .num{

    font-family: 'Raleway', sans-serif;

    font-weight: 600;

    font-size: 30px;

    color: #2AA79E;

}



#achievement .headline h2 {

    padding: 5px 25px;

    margin:5px 25px;

    border: none;

}

#achievement h3{

    font-family: 'Raleway', sans-serif;

    font-weight: 300;

    font-size: 26px;

    color: #FFF;

    padding: 5px 10px;

    text-align: center;

    margin: 12% 0 8% 0;

}



#achievement .icon {

    text-align: center;

    color: #FFF;

    font-size: 500%;

}



#achievement .slider .slide {

    height: 100%;

    min-height: 450px;

    width: 100%;

    background-size:cover;

    background-position:center;

    border: 1px solid #27ae60;

    padding: 25px;

    margin: auto;

    border-left: 3px solid #27ae60;

}



#achievement .view-image {

    position: absolute;

    top: 50%;

    left: 50%;

    color: #27ae60;

    transform: translate(-50%,-50%);

    display: none;



}



#achievement .slider .slide:hover .view-image, #achievement .slider .slide:hover .texture{

    display: block;

    transition:background .3s;

    -webkit-transition:background .3s;

}



#achievement .slider .slide .caption {

    color: #27ae60;

    background: rgba(0,0,0,.8);

    bottom: 0;

    position: absolute;

    width: 99.59%;

    margin-left: -25px;

    padding: 10px;

}

#achievement .slider .slide .texture {

    background: rgba(0,0,0,.8);

    position: absolute;

    width: 100%;

    height: 100%;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    display: none;

}



#achievement .slider .owl-controls{

    position: absolute;

    bottom: 3%;

    left: 3%;

}





/* ------------------------------------------------

*         SERVICES SECTION

* ------------------------------------------------ */

#services {

    border-top: 1px solid #777;

    background: #3E5050 ;

    color: #FFF;

}



#services a{

    color: #27C667;

    font-style: italic;

    font-size: 14px;

}

.services-item {

    background: #363F3F;

    padding: 25px 10px;

    margin-bottom: 10px;

    display: block;

    text-align: center;

    transition: all .5s ease;

    position: relative;

    overflow: hidden;

    height: 150px;

}



.services-item:before {

    position: absolute;

    content: "";

    top: 0;

    right: 0;

    border-top: solid 20px #3E5050;

    border-right: solid 20px #3E5050;

    border-left: solid 20px transparent;

    border-bottom: solid 20px transparent;

    z-index: 2;

}

.services-item:after{

    position: absolute;

    content: "";

    top: 0;

    right: 0;

    border-bottom: solid 20px #2C2C2C;

    border-left: solid 20px #2C2C2C;

    border-right: solid 20px transparent;

    border-top: solid 20px transparent;

    z-index: 2;

}



.services-item:hover:after{

    border-bottom: solid 20px #111;

    border-left: solid 20px #111;

    transition:all 3s ease-in;

}



.service-summary {

    position: absolute;

    color: #fff;

    width: 100%;

    height: 100%;

    padding: 20% 10%;

    background-color: #2C2C2C;

    border-right: 1px solid #27C667;

    top: 0;

    left: 0;

    animation-name:ani3;

    animation-duration: 1.5s;

    animation-fill-mode: forwards;

    opacity: 1;

    text-align: left;

    font-size: 16px;

}



.services-item:hover .service-summary {

    animation-name:ani4;

    animation-duration: 1.5s;

    animation-fill-mode: forwards;

    opacity: .8;



}



.service-summary p{

    border-left: 2px solid #27C667;

    padding-left: 5px;

    font-size: 13px;

}



.service-summary::first-letter { 

    font-size: 110%;

}



@keyframes ani3 {

    0%{

        transform: translateX(-0%);

        opacity: .8;

    }

    100%{

        transform: translateX(-98%);

    }



}



@keyframes ani4 {

    0%{

        transform: translateX(-98%);

    }

    100%{

        transform: translateX(-0%);

        border: none;

    }

}



.services-item i{

    width: 60px;

    height: 60px;

    color: #fff;

    transition: all .5s ease;

    font-size: 45px;

    padding-top: 10px;

}



.services-item:hover i, .services-item:hover h3 {

    color: #27C667;

}



.services-item h3 {

    font-family: 'Raleway', sans-serif;

    font-size: 16px;

    margin-bottom: 15px;

    line-height: 1.5;

    margin-top: 0;

    transition: 500ms;

}





/* ---------------------------------------------------

 * 				HOW WE WORK

 * -------------------------------------------------- */

#w-process {

    border-top: 1px solid #777;

    background: #3E5050;

}



#w-process .process{

    position: relative;

    border-top: 1px solid #777;

    border-radius: 100%;

}



#w-process .num{

    font-family: 'Raleway', sans-serif;

    font-weight: 600;

    font-size: 30px;

    color: #2AA79E;	

}



#w-process .headline h2 {

    padding: 5px 25px;

    margin:5px 25px;

    border: none;

}

#w-process h3{

    font-family: 'Raleway', sans-serif;

    font-weight: 300;

    font-size: 26px;

    color: #FFF;

    padding: 5px 10px;

    text-align: center;

    margin: 12% 0 8% 0;

}



#w-process .arrow-right:before{

    position: absolute;

    content: '';

    right: 0;

    background: #2AA79E;

    height: 30px;

    width: 3px;

    -ms-transform: rotate(-45deg); /* IE 9 */

    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */

    transform: rotate(-45deg);

    margin-top: -10px;

    animation-name: back-forward-right;

    animation-duration: 1s;

    animation-fill-mode: forwards;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}



#w-process .arrow-right:after{

    position: absolute;

    content: '';

    right: 0;

    background: #2AA79E;

    height: 30px;

    width: 3px;

    -ms-transform: rotate(45deg); /* IE 9 */

    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */

    transform: rotate(45deg);

    margin-top: 10px;

    animation-name: back-forward-right;

    animation-duration: 1s;

    animation-fill-mode: forwards;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}



#w-process .arrow-left:before{

    position: absolute;

    content: '';

    left: 0;

    background: #2AA79E;

    height: 30px;

    width: 3px;

    -ms-transform: rotate(45deg); /* IE 9 */

    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */

    transform: rotate(45deg);

    margin-top: -10px;

    animation-name: back-forward-left;

    animation-duration: 1s;

    animation-fill-mode: forwards;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}



#w-process .arrow-left:after{

    position: absolute;

    content: '';

    left: 0;

    background: #2AA79E;

    height: 30px;

    width: 3px;

    -ms-transform: rotate(-45deg); /* IE 9 */

    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */

    transform: rotate(-45deg);

    margin-top: 10px;

    animation-name: back-forward-left;

    animation-duration: 1s;

    animation-fill-mode: forwards;

    animation-iteration-count: infinite;

    animation-timing-function: linear;



}



@keyframes back-forward-left {

    0%{

        margin-left: 5px;

    }

    50%{

        margin-left: 0;

    }

    100%{

        margin-left: 5px;

    }

}



@keyframes back-forward-right {

    0%{

        margin-right: 5px;

    }

    50%{

        margin-right: 0;

    }

    100%{

        margin-right: 5px;

    }

}



#w-process .summary{

    color: #999;

    text-align: left;

}





#w-process .summary p::first-letter { 

    font-size: 180%;

    color: #2AA79E;

}



#w-process .process .o-img {

    margin: 0 auto;

    background: 100%;

}







/* ------------------------------------------------

*         PORTFOLIO SECTION

* ------------------------------------------------ */

#portfolio {

    border-top: 1px solid #777;

    background: #3E5050 ;

    color: #FFF;

}



#portfolio ul.tabs{

    margin-bottom: 50px;

    padding: 0px;

    list-style: none;

    text-align: center;

}



#portfolio ul.tabs li{

    font-family: 'Raleway', sans-serif;

    font-weight: 600;

    background: none;

    color: #ccc;

    display: inline-block;

    padding: 10px 15px;

    cursor: pointer;

    border: 1px solid #2c2c2c;

    margin-right: 5px;

    margin-bottom: 5px;

}



#portfolio ul.tabs li.current{

    background: #353E3E;

    color: #27C667;

}



#portfolio .tab-content{

    display: none;

    animation-name: current-tab;

    animation-duration: 1s;

    animation-fill-mode: forwards;

}



#portfolio .tab-content.current{

    padding: 0 20px;

    padding-right: 10px;

    display: inherit;

}



.portfolio-item {

    background: #363F3F;

    display:block;

    text-align:center;

    transition:all .5s ease;

    position: relative;

    overflow: hidden;

    margin-bottom: 10px;

    margin-left: 0px;

    margin-right: 10px;

}



.portfolio-item img{

    width: 100%;

    height: 235px;

    margin: 0;

    padding: 0;

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray; /* IE 6-9 */	

}



.portfolio-summary p{

    border-left: 2px solid #27C667;

    padding-left: 5px;

}





.portfolio-summary {

    position: absolute;

    color: #fff;

    width: 100%;

    height: 100%;

    padding: 20% 10%;

    background-color: rgba(44,44,44, .8);

    top: 0;

    left: 0;

    text-align: left;

    font-size: 16px;

    animation-name: o-fadeOut;

    animation-duration: .5s;

    animation-fill-mode: forwards;

}



.portfolio-item:hover .portfolio-summary {

    animation-name: o-fadeIn;

    animation-duration: .5s;

    animation-fill-mode: forwards;

}



.portfolio-summary{

    text-align: center;

}



.portfolio-summary h3{

    font-weight: 700;

    font-size: 20px;

}



#portfolio .view:before{

    position: absolute;

    content: '';

    left: 0;

    width: 20%;

    height: 2px;

    background: #27C667

}



#portfolio .view a{

    margin-top: 10px;

    color: #DDD;

    font-size: 20px;

    margin: 3px;

    border: 1px solid #DDD;

    padding: 5px 10px;

}



#portfolio .view a:hover{

    margin-top: 10px;

    color: #27C667;

    border: 1px solid #27C667;

    transition:all .5s ease;

}



@keyframes current-tab{

    0%{

        opacity: 0;

    }

    100%{

        opacity: 1;

    }

}



@keyframes o-fadeIn{

    0%{

        opacity: 0;

    }

    100%{

        -webkit-transition:opacity .25s ease-in;

        transition:opacity .25s ease-in;

        opacity: 1;

    }



}



@keyframes o-fadeOut{

    0%{

        opacity: 1;

    }

    100%{

        -webkit-transition:opacity .25s ease-out;

        transition:opacity .25s ease-out;

        opacity: 0;

    }



}



/* --------------------------------------------------

*      			TESTIMONIALS

* -------------------------------------------------- */

#testimonials{

    font-family: 'Raleway', sans-serif;

    border-top: 1px solid #777;

    background: #3E5050 ;

    color: #FFF;

}



.testimonial-item{

    background: #353E3E;

    margin: 0 15px;

    padding: 25px;

    border: 1px solid #2C2C2C;

}

.testimonial-item:hover{

    cursor: move;

}

.testimonial {

    display:inline-block;

}



.testimonial-item:after{

    position: absolute;

    content: '';

    width: 0;

    height: 0;

    border-right: 40px solid #2C2C2C;

    border-top: 40px solid transparent;

    right: 0;

    margin: 0 15px;

    margin-top: 53px;

}





#testimonials h3 {

    font-weight: 500;

    font-size: 18px;

    margin-top: 0;

}



#testimonials h3:before{

    position: absolute;

    content: '';

    background: #27C667;

    width: 200px;

    height: 2px;

    margin-top: 20px;

} 



#testimonials h3:after{

    position: absolute;

    content: '';

    background: #27C667;

    width: 2px;

    height: 2px;

    border-radius: 50%;

    margin-top: 19.75px;

    -webkit-box-shadow: 0px 0px 6px 3px rgba(39,198,103,1);

    -moz-box-shadow: 0px 0px 6px 3px rgba(39,198,103,1);

    box-shadow: 0px 0px 6px 3px rgba(39,198,103,1);

    animation-name: anim-left-right;

    animation-duration: 5.1s;

    animation-fill-mode: forwards;

    animation-iteration-count: infinite;

} 



@keyframes anim-left-right{

    0%{

        opacity: 0;

        display: none;

        margin-left: -110px;

    }

    1%{

        display: block;

        opacity: 1;

        margin-left: -110px;

    }

    99%{

        display: block;

        opacity: 1;

        margin-left: 35px;

    }

    100%{

        display: none;

    }



}



#testimonials h4 {

    font-weight: 300;

    font-size: 14px;

    color: #ccc;

    margin-top: 20px;

    min-height: 75px;

}



#testimonials h5 {

    margin-right:5px;

    color: #2AA79E;

}



.testimonial img {

    height:48px !important;

    width:48px !important;

    border-radius:50%;    

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray; /* IE 6-9 */

} 



.owl-testimonial .owl-item{

    display: block;

    padding: 30px 0px;

    margin: 0px;



}



.owl-testimonial .owl-controls .owl-buttons div {

    padding: 0;

}



.owl-testimonial .owl-testimonial .owl-buttons i{

    margin-top: 2px;

}







.owl-testimonial .owl-controls .owl-buttons div {

    position: absolute;

}



.owl-testimonial .owl-controls .owl-buttons .owl-prev{

    left: -25px;

    top: 90px; 

    background-color:transparent;

    color:#000;

    font-size:14px;

}



.owl-testimonial .owl-controls .owl-buttons .owl-next{

    right: -25px;

    top: 90px;

    background-color:transparent;

    color:#000;

    font-size:14px;

}







/* ------------------------------------------------

*        TEAM SECTION

* ------------------------------------------------ */

#team {

    border-top: 1px solid #777;

    background: #3E5050 ;

    color: #FFF;

}



#team .strenght{

    background: #353E3E;

    padding: 25px;

    list-style-type: none;

    color: #DDD;

    font-size: 14px;

}



#team .strenght:before {

    position: absolute;

    content: "";

    top: 0;

    right: 0;

    margin-right: 15px;

    border-top: solid 20px #3E5050;

    border-right: solid 20px #3E5050;

    border-left: solid 20px transparent;

    border-bottom: solid 20px transparent;

    z-index: 2;

}

#team .strenght:after{

    position: absolute;

    content: "";

    top: 0;

    right: 0;

    margin-right: 15px;

    border-bottom: solid 20px #2C2C2C;

    border-left: solid 20px #2C2C2C;

    border-right: solid 20px transparent;

    border-top: solid 20px transparent;

    z-index: 2;

}



#team .strenght li{

    margin-bottom: 16.5px;



}



#team .strenght li:first-child{

    margin-top: 20px;

}



#team .strenght li:before{

    font-family: 'fontawesome';

    margin-right: 5px;

    content: '\f00c';

    color: #2AA79E;

}



.team-member {

    background: #363F3F;

    padding: 25px 10px;

    display:block;

    text-align:center;

    transition:all .5s ease;

    position: relative;

    overflow: hidden;

}



.team-member{

    padding: 0;

    margin: 0;	

}



.team-member img{

    width: 100%;

    height: 100%;

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray; /* IE 6-9 */	

}



.member-info {

    position: absolute;

    color: #fff;

    width: 100%;

    height: 100%;

    padding: 30% 10%;

    background-color: #2C2C2C;

    top: 0;

    left: 0;

    animation-name:info-top;

    animation-duration: 1s;

    animation-fill-mode: forwards;

    opacity: 1;

    text-align: left;

    font-size: 16px;

}



.team-member:hover .member-info {

    animation-name:info-bottom;

    animation-duration: 1s;

    animation-fill-mode: forwards;

    opacity: .8;



}



.member-info:before{

    position: absolute;

    content: '';

    top: 0;

    height: 100%;

    left: 0;

    width: 3px;

    background: #27C667;

}



#team .name{

    font-size: 14px;

    margin-bottom: 5px;

    font-weight: 600;

    line-height: 1;

}



#team .des{

    margin-top: 10px;

    font-size: 13px;

}



#team .social{

    margin-top: 0px;

    font-size: 13px;

    list-style-type: none;

    color: #FFF;

}



#team .social li a{

    color: #FFF;

}



#team .social li{

    display: inline-block;

    margin: 3px;

}



.member-info::first-letter { 

    font-size: 120%;

}



@keyframes info-top {

    0%{

        transform: translateY(0%);

        opacity: .8;

    }

    100%{

        transform: translateY(100%);

    }



}



@keyframes info-bottom {

    0%{

        transform: translateY(100%);

    }

    100%{

        transform: translateY(0%);

        border: none;

    }

}



/* ------------------------------------------------

*          		NETWORK

* ------------------------------------------------ */

#network {

    border-top: 1px solid #777;

    background: #3E5050 ;

    color: #FFF;

}



#network .headline h2 {

    padding: 5px 25px;

    margin:5px 25px;

}





#network .headline:before {

    margin-left: -50%;

}

#network .headline:after {

    margin-right: -50%;

}



#network .headline:before {

    margin-left: -50%;

}

#network .headline:after {

    margin-right: -50%;

}



#network .owl-pagination{

    margin-top: 50px !important;

}



.owl-carousel-brand .owl-controls {

    text-align:center;

}



.owl-carousel-brand .owl-controls .owl-dot{

    display: inline-block;

    zoom: 1;

    *display: inline;/*IE7 life-saver */

}



.owl-carousel-brand .item:before{

    position: absolute;

    content: '';

    width: 0;

    height: 0;

    border-left: 20px solid #3E5050;

    border-bottom: 20px solid transparent;

    z-index: 2;	

}



.owl-carousel-brand{

    text-align: center;

}



.owl-carousel-brand .item:after{

    position: absolute;

    content: '';

    width: 0;

    height: 0;

    border-right: 20px solid #3E5050;

    border-top: 20px solid transparent;

    z-index: 2;	

    margin-left: -20px !important;

    bottom: 0;

}



.owl-carousel-brand img{

    width: 150px;

    height: auto;

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray; /* IE 6-9 */	

    opacity: .8;

    z-index: 1;

}





.owl-carousel-brand img:hover{

    -webkit-filter: grayscale(0);

    -moz-filter: grayscale(0);

    -ms-filter: grayscale(0);

    -o-filter: grayscale(0);

    filter: grayscale(0);

    transition: all .5s ease;

    opacity: 1;

    cursor: move;

}



.owl-carousel-brand .owl-controls .owl-dot span{

    width:10px;

    height:10px;

    margin:5px 7px;

    background:#d6d6d6;

    display:block;

    -webkit-backface-visibility:visible;

    -webkit-transition:opacity 200ms ease;

    -moz-transition:opacity 200ms ease;

    -ms-transition:opacity 200ms ease;

    -o-transition:opacity 200ms ease;

    transition:opacity 200ms ease;

    -webkit-border-radius:30px;

    -moz-border-radius:30px;

    border-radius:30px



}



.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{

    background:#869791

}





/* -----------------------------------------------

*        		CAREER SECTION

* ------------------------------------------------ */

#career{

    border-top: 1px solid #777;

    background: #3E5050 ;

    color: #FFF;

}



#career .notes{

    background: #353E3E;

    padding: 25px;

    color: #DDD;

    font-size: 14px;

}



#career .notes:before {

    position: absolute;

    content: "";

    bottom: 0;

    right: 0;

    margin-right: 15px;

    border-right: solid 30px #353E3E;

    border-top: solid 30px transparent;

    border-bottom: solid 30px transparent;

    z-index: 2;

    margin-bottom: -10px !important;

}



#career .cartton{

    width: 100%;

    margin: 0 auto;

}



#career h3{

    text-align: center;

    margin: 0;

    padding: 0;

    margin-bottom: 10px;

    color: #27C667;

}



#career h3:after,

#career h3:before{

    background-color: #27C667;

    content: "";

    display: inline-block;

    height: 1px;

    position: relative;

    vertical-align: middle;

    width: 25%;

}



#career h3:before {

    margin-left: -50%;

}

#career h3:after {

    margin-right: -50%;

}





#career .cartton img{

    text-align: center;

    width: 90%;

    height: auto;

    margin-left: 10%;

}



#career .cartton:before{

    position: absolute;

    content: '';

    width: 10px;

    height: 0px;

    background: #27C667;

    left: 86.7%;

    top: 29%;

    transition: transformX(86.7%) transformY(29%);

    animation-name: o-blink;

    animation-duration: 1.5s;

    animation-fill-mode: forwards;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}





@keyframes o-blink{

    0%{



    }

    50%{

        -webkit-box-shadow: 0px 0px 12px 9px rgba(154,185,115, 1);

        -moz-box-shadow: 0px 0px 12px 9px rgba(154,185,115, 1);

        box-shadow: 0px 0px 12px 12px rgba(154,185,115, 1);

    }

    100%{



    }

}



/* ------------------------------------------------

*        CONTACT SECTION

* ------------------------------------------------ */



#contact {

    border-top: 2px solid #27C667;

    background: #2E2E2E;

    color: #FFF;

}



#contact p {

    margin-bottom: 60px;

}



#contact .form-control {

    border: 1px solid #353E3E;

    background-color: #353E3E;

    border-radius: 5px;

}



#contact .btn {

    border: 2px solid #27C667;

    padding: 10px 25px;

    background: #2E2E2E;

    color: #FFF;

    border-radius: 10px;

    opacity: .5;

    font-size: 16px;

    margin-top: 5px;

}



#contact .btn:hover {

    transition: all .5s ease;

    opacity: 1;

}



#contact input, #contact textarea {

    color: #fff !important;

    box-shadow: none;

}



#contact input:focus, #contact textarea:focus{

    -webkit-box-shadow: 0px 0px 6px 3px rgba(44,44,44,1);

    -moz-box-shadow: 0px 0px 6px 3px rgba(44,44,44,1);

    box-shadow: 0px 0px 6px 3px rgba(44,44,44,1);

}



#contact input{

    height: 50px;

}



#contact .worktime{

    text-align: center;

    background: #353E3E;

    color: #27C667;

    padding: 15px 15px;

    border-radius: 10px;

    margin-bottom: 10px;

}



#contact .location{

    background: #353E3E;

    padding: 10px 15px;

    border-top-left-radius: 10px;

    border-bottom-left-radius: 10px;

    border-top-right-radius: 10px;

    margin-bottom: 25px;

}



#contact .location:after{

    position: absolute;

    content: "";

    bottom: 0;

    right: 0;

    margin-right: 15px;

    border-right: solid 30px #353E3E;

    border-top: solid 30px transparent;

    border-bottom: solid 30px transparent;

    z-index: 2;



}



#contact .location h4{

    font-weight: 300;

    font-size: 14px;

}



#msgSubmit{

    border: 1px solid #192531;

    padding: 10px;

    text-transform: uppercase;

    font-size: 16px;

    font-weight: 400;

}



#contact .list-unstyled{

    color: #A94442;

    border: 1px solid #A94442;

    padding: 5px 15px;

}



#contact .border{

    text-align: center;

    margin: 40px 0 0 0;

    color: #777;

}



#contact h6{

    font-size: 14px;

}

#contact h6:after,

#contact h6:before{

    background-color: #777;

    content: "";

    display: inline-block;

    height: 1px;

    position: relative;

    vertical-align: middle;

    width: 15%;

}



#contact h6:before {

    margin-left: -50%;

}

#contact h6:after {

    margin-right: -50%;

}



.text-white{

    color: #FFF;

}



/*----------------------------------------------------

 * 				MODAL

 * --------------------------------------------------- */

.modal {

    position: fixed;

    top: 5%;

    transform: transitionY(-15%);

}





.modal-body {

    position: relative;

    padding: 0;

}



.modal-content {

    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);

}

.modal-open .modal {

    overflow-x: hidden;

    overflow-y: auto;

}

.fade.in {

    opacity: .9;

}



.modal-content {

    position: relative;

    background-color: #FFF;

    background-clip: padding-box;

    /*border: 1px solid rgba(0, 0, 0, 0.2);*/

    border: none;

    border-radius: 6px;

    outline: 0px none;

    box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);

}



.modal-header {

    min-height: 16.43px;

    padding: 15px;

    border: none;

    color: #fff;

    margin-bottom: 30px;

    margin-right: -15px;

}

.modal-header i{

    color: #FFF;

    border: 1px solid #FFF;

    padding: 5px 10px;



}



.close:focus, .close:hover {

    color: #2C2C2C;

}

.close {

    color: #FFF !important;

}





/** -------------- CSS3 MODAL --------------------------- */



.pop-up  {

    position: relative;

    background: #2C2C2C;

    padding: 20px;

    width: auto;

    max-width: 500px;

    margin: 20px auto;



}



.mfp-close {

    color: #FFF !important;

}



.pop-up  {

    color: #eee;

    font-weight: 300;

    line-height: 2;

}

.pop-up  h4{

    color: #eee;

    font-weight: 300;

    font-size: 16px;

}

.pop-up ul li{

    margin-bottom: 10px;

}

/*

|--------------------------------------------------------------------------

| Loader CSS

|--------------------------------------------------------------------------

*/



.oModal-loader {

    margin: 0 auto;

    position: relative;

    border: 7px solid rgba(169, 169, 169, 0.2);

    border-left-color: #a9a9a9;

    transform: translateZ(0);

    animation: load .8s infinite linear;

    z-index: 101;

}



.oModal-loader,

.oModal-loader:after {

    border-radius: 50%;

    width: 100px;

    height: 100px;

}



@keyframes load {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



/* -------------------------------------------------

 * 				GOOGLE MAP

 * ------------------------------------------------ */

.map-container {

    border-top: 1px solid #2C2C2C;

    position:relative;

    height:450px;

}



/* -------------------------------------------------

 * 					RESPONSIVE

 * ------------------------------------------------- */



@media (max-width: 994px) {



    #w-process .arrow-right:after, #w-process .arrow-left:after, #w-process .arrow-right:before, #w-process .arrow-left:before{

        background: none;



    }

}



@media (max-width:767px) {





    .banner {

        height:500px;

    }	



    .site-header {

        top:55%;

        padding:0;

        width:100%;

        text-align:center;

    }



    .site-title {

        font-size:45px;

    }



    .site-tagline {

        font-size:25px;

    }

    .home-left  {

        position:relative;

        min-height:300px;

        height:auto;

        width:100%;

        float:none;

    }



    .home-right {

        position:relative;

        min-height:200px;

        height:auto;

        width:100%;

        float:none;

    }



    .main-tag {

        margin-top:-25px;

        width:50%;

    }

    .main-tag h4 {

        font-size:13px;

    }

    .monitor-image {

        width:50%;

        height:100px;

    }



    .country-tag {

        font-size:10px;

    }



    .country-tag h3{

        font-size:12px;

    }



    .global-network {

        width:70%;

        left:10%;

    }

    .sociel-icons {

        text-align: center;

    }



    #achievement .col-md-4{

        display: none;

    }



    #achievement .slider .slide {

        min-height: 350px;

    }



    #overview .information {

        text-align: center;

    }

    .member-info {

        text-align: center;

    }





}



@media (max-width: 479px) {

    .site-title {

        font-size:36px;

    }



    .site-tagline {

        font-size:18px;

    }





    #achievement .slider .slide {

        min-height: 250px;

    }





    #overview .information h2 {

        font-size: 30px;

    }



    #overview .information h4 {

        font-size: 14px;

    }



    #overview .overview-tag {

        font-size: 14px;

    }









}



/** OPTIMIZATION ---------------- **/

.optimization {

    background: url("../images/optimizition.png") no-repeat;

    width: 103px;

    height: 103px;

    right: 0;

    bottom: 0;

    position: fixed;

    z-index: 5000;

}	

/* pomerul modification css for BKKB

     application advertisement and animation */

.box,.box1{

    /*    position: fixed;

        top: 7%;

        right: 0;

        float:right;

        overflow: hidden;

        background: rgba(161,192,122, .9);

        z-index: 999;*/

    color: #FFF;

}

/* Add padding and border to inner content

for better animation effect */

.box-inner{

    /*width: 300px;*/

    padding: 10px;

    border: 1px solid rgba(44, 44, 44, 0.35);

}



.box-inner div {

    margin-bottom: 5px;

}

.box-inner h2:before{

    position: absolute;

    content: '';

    background: #FFF;

    width: 100px;

    height: 1px;

    margin-top: 34px;

}



.slide-toggle,.slide-toggle1 {

    border: 1px solid #222;

    position: fixed;

    top: 7%;

    right: 0;

    float:right;

    overflow: hidden;

    background: #2d2d2d;

    color: #FFF;

    z-index: 999;

    width: 50px;

    height: 50px;

}

@keyframes oblink {  

    50% { opacity: 0; }

}

.addTitle {

    animation: oblink 1s linear infinite;

    color: maroon;

}

.box1,.slide-toggle1 {

    top:50.5%

}

.slide-toggle1 {

    top: 55.5%;

    width: 108px;

    transform: rotate(270deg);

    right: -40px;

    background: red;

    height: 40px;

}

.addApply {

    padding: 5px 10px;

    background: #4864b4;

    border: 1px solid #4864b4;

}