body {
   overflow-x: hidden;
   color: #7b7b7b;
}

p {
   font-size: 17px;
   line-height: 1.7;
}

a,
a:hover,
a:focus,
a:active,
a.active {
   outline: 0;
   color: #438EAC;
}

h1,
h2,
h3,
h4,
h5,
h6 {   
   font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: 700;
   color: #4F4F4F;   
}
h2{
   font-size: 24px;
}

.uppercase {
   text-transform: uppercase;
}

hr {
   margin: 30px 0;
}
.footer a{
   color:#FFFFFF;
   font-size: 18px;
}

.navbar {   
   text-transform: uppercase;
   font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: 700;
   padding-top: 22px;   
   margin-bottom: 0;
   background: #fff;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
}
/*
.navbar.navbar-fixed-top {
   background: transparent;
   box-shadow: none;
}
*/
.navbar-brand {
   width: 160px;
   height: auto;
   padding: 0;
}

.navbar-default .navbar-nav>li>a {
   color: #7b7b7b;
   padding-bottom: 37px;

}
.navbar-default .navbar-nav>li::after {
   content: '';
   position: absolute;
   bottom: 0;   
   width: 100%;
   height: 3px;   
   background-color: #438EAC;
   opacity: 0;
}

.navbar-default .navbar-nav>li:focus::after,
.navbar-default .navbar-nav>li:hover::after {
   opacity: 1;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover{
   color: #438EAC;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
   background: none;
   color: #438EAC;
}
/*
.navbar-default.navbar.navbar-fixed-top .navbar-nav>li>a {
   color: #fff;
}

.navbar-default.navbar.navbar-fixed-top .navbar-nav>li>a:focus,
.navbar-default.navbar.navbar-fixed-top .navbar-nav>li>a:hover {
   color: #BDBFC1;
}
*/
.navbar a:focus {
   outline: 0;
}

.navbar .navbar-nav {
   letter-spacing: 1px;
}

.navbar .navbar-nav li a:focus {
   outline: 0;
}

.navbar-default,
.navbar-inverse {
   border: 0;
}

.navbar-collapse {
   padding-left: 0;
   padding-right: 0;
}

.container_master {
   padding-top: 94px;
}

header,
header h1 {   
   color: #fff;    
}

header.background_home {
   background: url(../images/layout/header_bg.jpg) no-repeat center center;
   background-size: cover;
}

header.background_home .container {
   padding-top: 18%;
   padding-bottom: 18%;
}

header.background_home .intro-text {
   margin-bottom: -25px;
}

header.background_home .intro-text .name {
   display: inline;   
   font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 4.65em;
   font-weight: 700;
   opacity: 0;
   margin-right: -3px;   
}

header.background_who_we_are {
   background: url(../images/layout/banner/who-we-are.jpg) no-repeat center center;
   background-size: cover;
}

header.background_how_it_works {
   background: url(../images/layout/banner/how-it-works.jpg) no-repeat center center;
   background-size: cover;
}

header.background_our_skill_set {
   background: url(../images/layout/banner/our-skill-set.jpg) no-repeat center center;
   background-size: cover;
}
header.background_blog{
   background: url(../images/layout/banner/blog.jpg) no-repeat center center;
   background-size: cover;
}

header.background_contact {
   background: url(../images/layout/banner/contact.jpg) no-repeat center center;
   background-size: cover;
}

header .container {
   padding-top: 6%;
   padding-bottom: 6%;
}

header a.bt_learn_more {
   border-color: #fff;
   border-width: 2px;
   border-style: solid;
   padding: 10px;
   color: #fff;
}

header a.bt_learn_more:hover {
   border-color: #438EAC;
   color: #438EAC;
   text-decoration: none;
}

section.container {
   padding-top: 3%;
   padding-bottom: 3%;
}

section.container-fluid {
   padding-top: 3%;
   padding-bottom: 3%;
}

section h2 {
   margin: 10px 0 15px 0;
}

section.container-fluid h2 {
   color: #fff;
}

.theoneco-darkblue {
   color: #fff;
   background: #438EAC;
}

.theoneco-darkgrey {
   color: #fff;
   background: #2F2F2F;
}

footer {
   background: #2F2F2F;
   color: #fff;
   padding: 25px 0;
}

.scroll-top {
   z-index: 1049;
   position: fixed;
   right: 2%;
   bottom: 2%;
   width: 50px;
   height: 50px;
}

.scroll-top .btn {
   width: 50px;
   height: 50px;
   border-radius: 100%;
   font-size: 20px;
   line-height: 28px;
}

.scroll-top .btn:focus {
   outline: 0;
}

.icon {
   font-size: 60px;
}

#map {
   width: 100%;
   height: 300px;
}

.subtitle-underline {   
   height: 2px;
   background: #438EAC;
   margin-top: 20px;
   margin-bottom: 40px;    
   position: relative;
   width: 60px;
}
.underline-align-center {
   margin-left: auto;
   margin-right: auto;
}
.btn-blue {
   color: #fff;
   background-color: #438EAC;
   border-color: #3B8FB1;
}

.btn-blue:hover {
   color: #fff;
   background-color: #1E6480;
   border-color: #1F6886;
}

.model-box-list {
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style: disc outside;
   display: table;   
   text-align: center;
   table-layout: fixed;    
   vertical-align: baseline;
}

.model-box-list li:first-child {
   border: none;      
}

.model-box-list li {
   margin: 0;
   padding: 10px 15px 10px 15px;
   display: table-cell;
   border-left-style: solid;
   border-left-width: 1px;
   border-color: #e1e1e1;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;   

}

.model-box-color-blue {
   color: #fff;
   background-color: #438EAC;
}
.model-box-color-red {
   color: #fff;
   background-color: #E13300;
}
.model-box-color-orange {
   color: #fff;
   background-color: #e59920;
}
.model-box-color-green {
   color: #fff;
   background-color: #4eb633;
}
.model-box-color-black {
   color: #fff;
   background-color: #000;
}

.image-wrapper {
   width: 100%;
   height: 100%;
   border: 1px solid rgba(0, 0, 0, 0.04);
   overflow: hidden;
   position: relative;
   text-align: center;
   margin-top: 20px;
}

.image-overlay-content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0; }

.overlay-fade-in img {
   transition: all 0.2s linear; 
}

.overlay-fade-in .image-overlay-content {
   opacity: 0;
   background-color: rgba(0, 0, 0, 0.4);
   transition: all 0.4s ease-in-out; 
}

.overlay-fade-in h2 {
   color: #f2f2f2;
   font-size: 1.8rem;
   margin-top: 35%;
   opacity: 0;
   transition: all 0.2s ease-in-out;   
}

.overlay-fade-in:hover .image-overlay-content,
.overlay-fade-in:hover h2 {
   opacity: 1; 
}

#cd-timeline {
   position: relative;
   padding: 2em 0;  
}

#cd-timeline:before {  
   content: '';
   position: absolute;  
   left: 18px;
   height: 92%;
   width: 4px;
   background: #d7e4ed;   
   margin-left: -2px;
}

.cd-timeline-block {
   position: relative;
   margin: 2em 0;
}
.cd-timeline-block:after {
   content: "";
   display: table;
   clear: both;
}
.cd-timeline-block:first-child {
   margin-top: 0;
}
.cd-timeline-block:last-child {
   margin-bottom: 0;
}

.cd-timeline-icon {
   position: absolute;
   top: 0;
   left: 0;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-icon span {
   display: block;
   position: relative;
   left: 41%;
   top: 43%;
   margin-left: -12px;
   margin-top: -12px;
   color: #fff;
   font-size: 20px;
}
.cd-timeline-icon.cd-icon {
   background: #438eac;
}

.cd-timeline-content {
   position: relative;
   margin-left: 60px;
   background: #f2f2f2;
   border-radius: 0.25em;
   padding: 1em;  
}
.cd-timeline-content:after {
   content: "";
   display: table;
   clear: both;
}

.cd-timeline-content:before {
   content: '';
   position: absolute;
   top: 16px;
   right: 100%;
   height: 0;
   width: 0;
   border: 10px solid transparent;
   border-right: 10px solid white;
}

.social-media .social-bt {
   width: 50px;
   height: 50px;   
   font-size: 25px;   
   position: relative;
   text-decoration: none; 
   font-family: "fontello";
   color: #fff;
   display: inline-flex;
   text-align: center;
   align-items: center;
   cursor: pointer;
}

.social-media .social-bt-facebook:after {
   background-color: #3b5998;
   content: '\f09a';
   width: 100%;
   padding-top: 5px;
   padding-bottom: 5px;
}

.social-media .social-bt-twitter:after {
   background-color: #00acee;
   content: "\f099";   
   width: 100%;
   padding-top: 5px;
   padding-bottom: 5px;
}

.social-media .social-bt-linkedin:after {
   background-color: #0077b5;
   content: "\f0e1";   
   width: 100%;
   padding-top: 5px;
   padding-bottom: 5px;
}

.blog_row {
   margin-top: 30px;
   margin-bottom: 30px;
}

.blog_row .readme {
   color: #fff;
   background-color: #438EAC;
}

.blog_row .blog_post_content {
   background-color: #fafafa;
   padding: 50px 60px;
   border: 1px solid #ebebeb;
   box-shadow: inset 0 1px 8px -6px rgba(0,0,0,.2);
}

.blog_row .blog_image_box {
   border: 1px solid #ebebeb;
}

.blog_row .blog_post_content .blog_post_content_wrap h2 a {
   color: #4F4F4F;
}

.blog_row .blog_post_content .blog_post_content_wrap .blog_date_box {
   float: left;
   font-size: 15px;
}
.blog_row .blog_post_content .blog_post_content_wrap .blog_social_media {
   float: right;
}

.blog_row .blog_post_content .blog_post_content_wrap .blog_social_media .social-bt {
   width: 30px;
   height: 30px;
   font-size: 15px;
}

.blog-detail {
   font-size: 17px;
}
.blog-detail img
{
   display: block;   
   max-width: 100%;
   height: auto;           
}
@media screen and (max-width: 480px) { 

   h2,
   header.background_home .intro-text .name {
      font-size: 20px;
   }

   h3 {
      font-size: 18px;
   }

   p {
      font-size: 15px;
   }

   .model-box-list li {    
      padding: 5px 10px 5px 10px;
   }

   #cd-timeline:before {
      height: 92.5%;
   }  

   .navbar {   
      padding-bottom: 22px;
   }

   .navbar-collapse {
      padding-left: 15px;
      padding-right: 15px;
   }

   .navbar-default .navbar-nav>li>a {
      padding-bottom: 0;
   }

   .navbar-default .navbar-nav>li:focus::after,
   .navbar-default .navbar-nav>li:hover::after {
      opacity: 0;
   }

   #communication_arena {
      display: none;
   }
}

@media screen and (max-width: 767px) { 

   h2,
   header.background_home .intro-text .name {
      font-size: 25px;
   }

   h3 {
      font-size: 17px;
   }

   p {
      font-size: 15px;
   }

   header.background_home .intro-text {
      line-height: 2;
   }

   .navbar {   
      padding-bottom: 22px;
   }

   .navbar-collapse {
      padding-left: 15px;
      padding-right: 15px;
   }

   .navbar-default .navbar-nav>li>a {
      padding-bottom: 0;
   }

   .navbar-brand {
      width: 150px;
      padding: 5px 10px;
   }     

   .navbar-default .navbar-nav>li:focus::after,
   .navbar-default .navbar-nav>li:hover::after {
      opacity: 0;
   }

   canvas#myCanvas {
      display: none;
   }

}

@media(min-width:768px)and (max-width: 992px)  { 
   .navbar-brand {
      width: 135px;
      padding: 5px 10px;
   }   

   canvas#myCanvas {
      width: 768px;
   }
}

@media(min-width:768px) {  
   /*
   .navbar-fixed-top {      
      -webkit-transition: background .3s;
      -moz-transition: background .3s;
      transition: background .3s;
   }

   .navbar-fixed-top .navbar-brand {
      font-size: 2em;
      -webkit-transition: all .3s;
      -moz-transition: all .3s;
      transition: all .3s;
   }

   .navbar-fixed-top.navbar-shrink {      
      background: #fff;
      box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
   }            

   .navbar-fixed-top.navbar-shrink .navbar-nav>li>a {
      color: #7b7b7b !important;
   }

   .navbar-fixed-top.navbar-shrink .navbar-nav>li>a:hover {
      color: #438EAC !important;
   }
   */
}

@media only screen and (min-width: 1170px) {
   #cd-timeline:before {
      left: 50%;
      height: 89%;
   }

   .cd-timeline-icon {
      width: 60px;
      height: 60px;
      left: 50%;
      margin-left: -30px;
      /* Force Hardware Acceleration in WebKit */
      -webkit-transform: translateZ(0);
      -webkit-backface-visibility: hidden;
   }

   .cd-timeline-icon span {
      font-size: 25px;
   }

   .cssanimations .cd-timeline-icon.is-hidden {
      visibility: hidden;
   }
   .cssanimations .cd-timeline-icon.bounce-in {
      visibility: visible;
      -webkit-animation: cd-bounce-1 0.6s;
      -moz-animation: cd-bounce-1 0.6s;
      animation: cd-bounce-1 0.6s;
   }

   .cd-timeline-content {      
      margin-top: -150px;
      margin-left: 0;
      padding: 1.6em;
      width: 45%;
   }
   .cd-timeline-content:before {
      top: 24px;
      left: 100%;
      border-color: transparent;
      border-left-color: #f2f2f2;
   }

   .cd-timeline-block:first-child .cd-timeline-content {
      margin-top: 0;
   }

   .cd-timeline-block:nth-child(even) .cd-timeline-icon {
      margin-top: -150px;
   }

   .cd-timeline-block:nth-child(even) .cd-timeline-content {
      float: right;
   }
   .cd-timeline-block:nth-child(even) .cd-timeline-content:before {
      top: 24px;
      left: auto;
      right: 100%;
      border-color: transparent;
      border-right-color: #f2f2f2;
   }

   .cssanimations .cd-timeline-content.is-hidden {
      visibility: hidden;
   }
   .cssanimations .cd-timeline-content.bounce-in {
      visibility: visible;
      -webkit-animation: cd-bounce-2 0.6s;
      -moz-animation: cd-bounce-2 0.6s;
      animation: cd-bounce-2 0.6s;
   }

   /* inverse bounce effect on even content blocks */
   .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
      -webkit-animation: cd-bounce-2-inverse 0.6s;
      -moz-animation: cd-bounce-2-inverse 0.6s;
      animation: cd-bounce-2-inverse 0.6s;
   }

   canvas#myCanvas {
      width: 1024px;
   }
}

.wordcloud {
   width: 1140px;
   height: 350px;
}