body{
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color:#4D5C68 !important;
    padding-top: 0px !important;
    line-height: 2rem;
    font-weight: 100;
}
body:lang(ja-JP) {
    font-family: 'Meiryo UI','Open Sans', Arial, Helvetica, sans-serif;
}
body:lang(zh-CN) {
    font-family: '宋体';
    font-weight: 200;
    font-size: 20px;
}
a{
    color:#9e9e9e !important; /* grey# bootstrap material*/    
}
h3{    
    padding-bottom: 2rem;
}
h6{
    font-size:2rem;
    font-weight: 200;
    padding-bottom: 2rem;
}
footer p{
    line-height: 14pt;
}
.faq a{
    text-decoration: underline!important;
}
.blueul li{
    list-style: none;    
    margin-left: -2.75em;     
}
.blueul a{
    color:rgb(62, 183, 240)!important;
}
.productul{
    margin-top: 1.5rem;
}
.productul li {
    list-style: none;    
    margin-left: -2em; 
    display:flex;
}
.productul li:before {
    content:"·";
    font-size:18px;
    vertical-align:middle;
    line-height:auto;
    padding-right:1rem;    
}
.header {
    position: fixed;
    z-index: 6;
    left: 0;
    top: 0;
    width: 100%;
    height: 67px;
    transition-property: background-color,box-shadow,transform;
}
.header, .page-blog .header--with-shadow:before {
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(0.25,0.74,0.22,0.99);
}
.header--floating {
    background-color: #221f1f;
    box-shadow: 0 0 200px rgba(0,0,0,0.3);
    transform: translateY(0px);
}
.page-blog .header--with-shadow.header--floating:before {
    opacity: 0;
}
.header,.header--with-shadow:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /*height: 620px;*/
	  height: 122px;
    pointer-events: none;
    background: url(images/header-background2-reddark2.png) 0 0 repeat-x;
    transition-property: opacity;
	}

.body-background--image {
    left: 0;
}
.body-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
	z-index: -1;
}
#landingdiv{
    width:100%; 
    height:80vh;
    padding-top:42vh;
}
.landing-1{    
    box-shadow: 0px 1px 20px grey; 
    background: url('../images/GBW Website_Landing Page 1.png') 0 0 no-repeat; 
    background-size: cover;    
}
.landing-2{    
    box-shadow: 0px 1px 20px grey; 
    background: url('../images/GBW Website_Landing Page 2.png') 0 0 no-repeat; 
    background-size: cover;    
}
.landing-3{    
    box-shadow: 0px 1px 20px grey; 
    background: url('../images/GBW Website_Landing Page 3.png') 0 0 no-repeat; 
    background-size: cover;    
}
.article-container {
    padding-top: 510px;
}
.hh1 {
    margin-left: 20vw;
    font-size: 48px;
  }
.hh1:lang(ja-JP){
    font-size: 40px;
    line-height: 48px;
  }
.hh2 {
    margin-left: 20vw;
    font-size: 26px;
  }
@media screen and (max-width: 1279px){
    .article-container {
        padding-top: 320px;
    }
}
@media screen and (max-width: 1020px){
.article-container {
    padding-top: 250px;
}
.hh1 {
    font-size: 40px;
  }
  .hh2 {
    font-size: 32px;
  }
}
@media screen and (max-width: 767px){
.article-container {
    padding-top: 150px;
}
.hh1 {
    font-size: 32px;
  }
  .hh2 {
    font-size: 28px;
  }
}

@media screen and (max-width: 560px){
.article-container {
    padding-top: 50px;
}
.hh1 {
    font-size: 28px;
  }
.hh2 {
    font-size: 20px;
  }
}

/*.container-fluid {
    max-width: 1020px;
    padding: 50px 25px;
    margin: 0 auto;
}*/
.container-fluid {
    padding: 0 !important;
}
.bg-inverse {
    background-color: transparent!important;
	opacity: 0 !important;
}
.bg-inverse-new {
    /* background-color: #9D0404!important; */
    background-color:#fff;
}
.navbar{
    padding: 0 0.5rem !important;
    font-size: 0.9rem;    
}
.navbar-brand{
    color: #EC1C24!important;
    background: url(/images/svg/GBW_Logo.svg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 80px;
    width: 140px;   
}
.nav-link {    
    color:#505659!important;    
}
.nav-link:hover {
    color: #EC1C24 !important;
}
.nav-link-red {
    color: #EC1C24 !important;
    border-radius: 2rem;
}
.nav-link-red:hover {
    background-color: whitesmoke;
    /* border-radius: 2rem; */
}
.redbg{
    background-color: #EC1C24 !important;
    color:#fff!important;    
}
.redbg:hover{
    background-color: whitesmoke !important;
    color:#EC1C24!important;    
}
.redfront{
    color:#EC1C24!important;
    font-weight: 400;
}
.redcolor{
    color:#EC1C24!important;
}
.redfront:hover{
    border:1px solid whitesmoke;
    background-color: whitesmoke;
    border-radius: 2rem;
}
.redborderround{
    border:1px solid #EC1C24;    
    border-radius: 2rem;    
}
.greyborderround{
    border:1px solid silver;    
    border-radius: 2rem;    
}
.greyborderround:hover{
    border:1px solid whitesmoke;
    background-color: whitesmoke;
    border-radius: 2rem;
}

/* Add social media icon css */
.fa {
  padding: 5px;
  font-size: 25px;
  width: 40px;
  text-align: center;
  text-decoration: none;  
}

.fa:hover {
    opacity: 0.7;
	color: white;
    text-decoration: unset;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-long-arrow-right {
    color: #b3b2b2;
    font-size: 1rem;
}
.fa-long-arrow-right:hover {   
	color: #EC1C24;
    text-decoration: unset;
}
.fa-bars{
    color: #EC1C24;
}

.fa-circle-o{
    font-weight: 100;
}

.grow { transition: all 1s ease-in-out; }
.grow:hover { transform: scale(1.05,1.05); }

.grow_fast { transition: all 0.2s ease-in-out; }
.grow_fast:hover { transform: scale(1.1,1.1); } 

.grow_map { transition: all 0.6s ease-in-out; }
.grow_map:hover { transform: scale(1.3,1.3); } 


/*https://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load*/
.lazyloadparent{
	/*min-height: 300px;*/
}
.lazyload{	
	opacity: 0;
	/*display: none;*/
	-webkit-transition: opacity 0.5s ease-in;
       -moz-transition: opacity 0.5s ease-in;
        -ms-transition: opacity 0.5s ease-in;
         -o-transition: opacity 0.5s ease-in;
            transition: opacity 0.5s ease-in;
}
.lazyloadfig{	
	opacity: 0;
	/*display: none;*/
	-webkit-transition: opacity 0.5s ease-in-out;
       -moz-transition: opacity 0.5s ease-in-out;
        -ms-transition: opacity 0.5s ease-in-out;
         -o-transition: opacity 0.5s ease-in-out;
            transition: opacity 0.5s ease-in-out;            
}

.load {
    opacity: 1;
}

.feedbackrow {    
    margin-bottom: 2px;
}
.feedbackrow label{
    font-size: 1rem;
    line-height: 1rem;
    padding:0;
}

.outlineButton {
    display: block;
    text-align: left;   
    border:none;
    background-color: white;
    color: inherit;
    font-size: 0.95rem;
    padding: 1px 1px;    
    cursor: pointer;
    border-color: #e7e7e7;    
    /* width: 100px;
    height: 60px; */
    /* vertical-align: top; */
    margin: 2px;
}
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.align-bottom {
    position: absolute;
    right: 0;
    bottom: 0px;
    left: 0;
}
/* section images */

.quadnav, .quadnav section {
    background-color: transparent;
}
.grid-padded-v4x {
    padding-top: 4ex;
    padding-bottom: 4ex;
}
.grid-container {
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: auto;
    margin-right: auto;
}


@media screen and (max-width: 71em){
.quadnav section {
    height: 33ex;
}
}
.quadnav section {
    border-spacing: 2px 1px;
    display: table;
    list-style: none;    
    table-layout: fixed;
    width: 100%;
}

.quadnav section figure {    
    float: left;
    width: 20.5%;
    text-align: center;    
    text-indent: 0;    
    margin: 0 1.25em;
    padding: 0; 
    font-size: 1.1rem;
}
.quadnav section figure img{      
    width: 100%;      
}
.quadnav section figure a figcaption h3, .quadnav section figure a figcaption p:not([class*=links]) {
    color: #FFF;
}
.hoverTransparent:hover{
	opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.sectionHoverEffect{
	background-blend-mode: multiply;
}
.sectionHoverEffect:hover{
	background-blend-mode: unset;
}

.sectionHoverEffect a {
    color: white;
}

/* testing css */
div.polaroid {
    width: 284px;
    padding: 10px 10px 20px 10px;
    border: 1px solid #BFBFBF;
    background-color: white;
    box-shadow: 10px 10px 5px #aaaaaa;
}

div.rotate_right {
    float: left;
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Safari */
    transform: rotate(7deg);
}

.__img{
background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
	position: absolute;
}
.circlegreybg{
	border-radius: 50%;	
    border:none;
    color: white;
    background-color: #A3A4A4;    
    font-size: 2em;
}

.section {
    /* box-shadow: 0px 1px 20px grey;  */    
    padding:50px;
    align-items: center;      
}

.divshim{
    content: '  ';
    height:150px;
}

@media screen and (max-width: 767px){
    .section {         
        padding:20px;
    }
}
    
@media screen and (max-width: 560px){
    .section {       
        padding:20px;
    }
}

.innersection{
    padding:1.5rem 6rem;
}
.imgbuttonmed{
    height: 140px;
    width: 140px;  
    /* stroke:#000000;
    fill:#ccc;
    opacity:0.8;  */
}
.lighten-4{
    background-color: #EFF0F1!important;
}
.svgwhite{
    animation: fadeIn 1s linear;
    animation-fill-mode: both;
}
#svgwhite .cls-1{fill:#fff;}             
#svgwhite .cls-2{opacity:0.8;stroke:#000000!important}            
#svgwhite .cls-3{fill:none!important;stroke-linecap:round;stroke-miterlimit:10;stroke:#000000!important}  
#svgwhite .cls-4{fill:none;stroke:#000000!important;stroke-linejoin:round;}
#svgwhite:hover .cls-1{fill: #eb2227;}
#svgwhite:hover .cls-2{stroke:#fff!important;}
#svgwhite:hover .cls-3{stroke:#fff!important;}                                      
#svgwhite:hover .cls-4{stroke:#fff!important;}

#svggrey .cls-1{fill:#EFF0F1;} 
#svggrey .cls-2{opacity:0.8;stroke:#000000!important}            
#svggrey .cls-3{fill:none!important;stroke-linecap:round;stroke-miterlimit:10;stroke:#000000!important}  
#svggrey .cls-4{fill:none;stroke:#000000!important;stroke-linejoin:round;}
#svggrey:hover .cls-1{fill: #eb2227;}
#svggrey:hover .cls-2{stroke:#fff!important;}
#svggrey:hover .cls-3{stroke:#fff!important;}                                      
#svggrey:hover .cls-4{stroke:#fff!important;}

#svgred:hover .cls-1{fill:#EFF0F1;} 
#svgred:hover .cls-2{opacity:0.8;stroke:#000000!important}            
#svgred:hover .cls-3{fill:none!important;stroke-linecap:round;stroke-miterlimit:10;stroke:#000000!important}  
#svgred:hover .cls-4{fill:none;stroke:#000000!important;stroke-linejoin:round;}
#svgred .cls-1{fill: #eb2227;}
#svgred .cls-2{stroke:#fff!important;}
#svgred .cls-3{stroke:#fff!important;}                                      
#svgred .cls-4{stroke:#fff!important;}

.bg_heritage{
    background: url("../images/GBW Website_Our Heritage.png") no-repeat center center;    
    background-size: cover;
}
.btn{
    text-transform: none !important;
    font-size: inherit;
}
.fontsmbtn{
    font-size: 10px;
}
.fontmed{
    font-size: 14px;
}
#navcontainer .d-block{
    color:#4D5C68 !important;
}
#navcontainer .d-block .navcontainerlink{
    color:#9e9e9e !important;
}
#navcontainer:hover .d-block  .navcontainerlink{
    color:#eb2227 !important;
}
#navcontainer:hover .fa-long-arrow-right{
    color: #eb2227 !important;
}
#navcontainer:hover .grow_fast { transform: scale(1.1,1.1); } 
#navcontainer:hover .cls-1{fill: #eb2227;}
#navcontainer:hover .cls-2{stroke:#fff!important;}
#navcontainer:hover .cls-3{stroke:#fff!important;}                                      
#navcontainer:hover .cls-4{stroke:#fff!important;}

#navcontainerred .d-block .navcontainerlink{
    color:#9e9e9e !important;
}
#navcontainerred:hover .d-block  .navcontainerlink{
    color:#eb2227 !important;
}
#navcontainerred:hover .fa-long-arrow-right{
    color: #eb2227 !important;
}
#navcontainerred:hover .grow_fast { transform: scale(1.1,1.1); } 
#navcontainerred:hover .cls-1{fill: #EFF0F1;}
#navcontainerred:hover .cls-2{stroke:#000!important;}
#navcontainerred:hover .cls-3{stroke:#000!important;}                                      
#navcontainerred:hover .cls-4{stroke:#000!important;}

.modal-content {
    -webkit-border-radius: .5rem!important;
    border-radius: .5rem!important;
    background: white;
    padding: 1rem;
}
.modal-dialog{
    max-width: 60vw;
}
#saveContactForm input[type='text'], input[type='url'], input[type='email'], input[type='tel']{
    height: 2rem;
    margin-top:-5px;
}
.close{
    font-weight: 10;
    font-family: arial-narrow!important;
    font-size: 3rem;
    color: grey;
    margin-top: -0.5rem;
}
.modal-title{
    margin-top: -1.5rem;
    margin-bottom: 1rem;
}
.modal-body{
    margin-top: -1rem;
}

/* Checkbox */
input[type='checkbox'] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee; 
    border: solid 1px #eee;
    border-radius: 35%; 
    font-size: 1rem;
    border: solid 1px silver;
}

.customcheck{
    display: block;
    position: relative;
    padding-left: 2rem;
    /* margin-bottom: 12px; */
    cursor: pointer;    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 1.25rem;
}

/* On mouse-over, add a grey background color */
input[type='checkbox']:hover ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */ 
input:checked ~ .checkmark {    
    border-radius: 35%;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */ 
input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkmark:after {
    left: 8px;
    top: 2px;
    width: 8px;
    height: 15px;
    border: solid #7B7B7B;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.cursor{
    cursor:pointer;
}
.error{
    color: red;
    display: flex;
    font-size: 0.75rem!important;
}
#cookieConsent{
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 200px rgba(0,0,0,0.3);    
    text-align: center;
    position: fixed;
    bottom:0vh;
    z-index: 999;
    font-size: 0.9rem!important;
    -webkit-transition: opacity 3s ease-in;
       -moz-transition: opacity 3s ease-in;
        -ms-transition: opacity 3s ease-in;
         -o-transition: opacity 3s ease-in;
            transition: opacity 3s ease-in;
}

.v-center-flex {
    /* min-height: 100%;  Fallback for vh unit */
    /* min-height: 100vh;  */
    /* You might also want to use
                          'height' property instead.
                          
                          Note that for percentage values of
                          'height' or 'min-height' properties,
                          the 'height' of the parent element
                          should be specified explicitly.
    
                          In this case the parent of '.vertical-center'
                          is the <body> element */
  
    /* Make it a flex container */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    
    /* Align the bootstrap's container vertically */
      -webkit-box-align : center;
    -webkit-align-items : center;
         -moz-box-align : center;
         -ms-flex-align : center;
            align-items : center;
    
    /* In legacy web browsers such as Firefox 9
       we need to specify the width of the flex container */
    /* width: 100%; */
    
    /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
       hence the bootstrap's container won't be aligned to the center anymore.
    
       Therefore, we should use the following declarations to get it centered again */
           -webkit-box-pack : center;
              -moz-box-pack : center;
              -ms-flex-pack : center;
    -webkit-justify-content : center;
            justify-content : center;
  }
  
#contactusimg{
    max-width:100%;
    float:right;
}

#whatwedosm, #imagesequencesm, #cookieTextsm, #cookieokDivsm{
    display: none;
} 
.dropdown-menu {
    left: -100px;
}
.borderinvisible{
    border:solid transparent 1px;
}
.bordertest{
    border:solid green 1px;
}
.bg_becomeshopper{
    width:100%; height:60vh; background: url('/images/Become_Evaluator.png') 0 0 no-repeat; background-size: cover;padding-top:42vh;
}

/* .dropdown-item{
    border:solid green 1px;
} */

.dropdown{
    /* display: none!important; */
}

#myimgCubeHover, #myimgCube {
    width:100%;
    display: block;    
}

#imagecubeoverlay{
    position: absolute; 
    height:95%; 
    width:100%;
    margin-left:2%;
}

.imgcubeHoverOut,  .imgcubeHoverOut:lang(en){
    content:url(../images/Cube/png/GBW_Products_6.png);
}
.imgcubeHoverOut:lang(ja-JP){
    content:url(../images/Cube/png/Scroll_6_Competitor_Benchmark_JP.png);
}
.imgcubeHoverOut:lang(zh-CN){
    content:url(../images/Cube/png/Scroll_6_Competitor_Benchmark_CH.png);
}

#img_why_rpa, #img_why_ms, #img_why_cs, #img_why_cb, #img_why_bca, #img_why_ees {
    content:url("../images/GBW Website_Why GBW.png");
}
#img_why_rpa:lang(ja-JP), #img_why_ms:lang(ja-JP), #img_why_cs:lang(ja-JP), #img_why_cb:lang(ja-JP), #img_why_bca:lang(ja-JP), #img_why_ees:lang(ja-JP) {
    content:url("../images/GBW Website_Why GBW.png");
}
#img_why_rpa:lang(zh-CN), #img_why_ms:lang(zh-CN), #img_why_cs:lang(zh-CN), #img_why_cb:lang(zh-CN), #img_why_bca:lang(zh-CN), #img_why_ees:lang(zh-CN) {
    content:url("../images/GBW Website_Why GBW.png");
}

/* GBW directors page css */
.bg_becomeshopper.bg_directors {
    background: url(/images/director-banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 50px;
}

.director-row-img {
    float: left;
    text-align: left;
    padding: 0
}

.director-row-content {
    display: inline-block;
    text-align: left;
    padding: 0;
}

.director-row {
    width: 100%;
    border-bottom: 1px solid #c3c3c3;
    margin-bottom: 40px;
}

.director-row-content h4 {
    font-size: 22px;
    font-weight: 600;
}

.director-row-content h6 {
    font-size: 20px;
    padding-bottom: 0;
    margin-bottom: 15px;
}

.director-row-content p {
    margin-bottom: 40px;
}

/* GBW directors page css ends here */