/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*@font-face {*/
  /*font-family: 'Manifold-Regular';*/
  /*src: url('/syscommon/fonts/ManifoldCF-Regular.woff') format('woff');*/
/*}*/

/*@font-face {*/
  /*font-family: 'akkurat-mono';*/
  /*src: url('/syscommon/fonts/akkurat-mono.woff') format('woff');*/
/*}*/

/*@font-face {*/
  /*font-family: 'akkurat-light';*/
  /*src: url('/syscommon/fonts/akkurat-light.woff') format('woff');*/
/*}*/

/*@font-face {*/
  /*font-family: 'decimamono-light';*/
  /*src: url('/syscommon/fonts/decimamono-light.woff') format('woff');*/
/*}*/

/*@font-face {*/
  /*font-family: 'DecimaMonoPro';*/
  /*src: url('/syscommon/fonts/DecimaMonoPro.woff') format('woff');*/
/*}*/

/*@font-face {*/
  /*font-family: 'decimamono-probold';*/
  /*src: url('/syscommon/fonts/Decima Pro A Bold Oblique.woff') format('woff');*/
/*}*/

/*@font-face {*/
  /*font-family: 'DecimaMonoProLt';*/
  /*src: url('/syscommon/fonts/DecimaMonoProLt.woff') format('woff');*/
/*}*/

/*@font-face {*/
  /*font-family: 'DecimaMonoPro-Bold';*/
  /*src: url('/syscommon/fonts/DecimaMonoPro-Bold.woff') format('woff');*/
/*}*/

/*@font-face {*/
  /*font-family: 'Roboto';*/
  /*src: url('/syscommon/fonts/Roboto-Regular.ttf') format('truetype');*/
/*}*/

body {
	background-color: #f5f5f5;
  padding: 0;
  margin: 0;
  font-size: 100%;
}

h1 {
  font-size: 91px;
  font-family: "DecimaMonoProLt";
  text-decoration: none;
  webkit-text-decoration-color: rgba(255, 128, 128, 0.5);
}

h2 {
  font-size: 64px;
  font-family: "DecimaMonoProLt";
  line-height: 1;
}

h3 {
  font-size: 46px;
  font-family: "DecimaMonoProLt";
  margin: 0;
}

h4 {
  font-size: 34px;
  font-family: "DecimaMonoProLt";
  line-height: 1;
}

h5 {
  font-size: 24px;
  font-family: "DecimaMonoPro";
  line-height: 1;
}

h6 {
  font-size: 16px;
  font-family: "akkurat-mono";
  line-height: 1.4;
}

ul li {
  list-style: none;
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  border-top: 1px solid #cd2d25;
  padding-bottom: 40px;
}

.hr_container {
  border-top: 1px solid #cd2d25;
  margin-top: 35px;
  padding-bottom: 40px;
  width: 32%;
}


.tableofcontents li {
	font-family: 'akkurat-light';
	font-size: 3rem;
}

#menu li a {
  font-family: 'decimamono-light';
  font-size: 27px;
}

.tableofcontents a {
	color: #ff0000;
}

.text {
  line-height: 1em;
  margin-top: 0;
  padding-top: 75px;
}

/* <!-- NAVIGATION
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

a {
  text-decoration: none;
  color: #555555;
}
a:hover {
  color: #e60010;
}

.nav_container {
  display: flex;
  flex-direction: column;
  border-bottom: 4px solid #e60010;
}

nav#menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#header-nav {
  position: fixed;
  top: 0;
  display: block;
  width: 100%;
  background: #fff;
  z-index: 9999;
}

.greyblock {
  background-color: #f5f5f5;
  height: 153px;
}


/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    padding-left: 9.5vw
}

/*ul.topnav:after {*/
    /*content: "\0020";*/
    /*display: block;*/
    /*height: 0;*/
    /*clear: both;*/
    /*overflow: hidden;*/
    /*visibility: hidden;*/
/*}*/

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    font-family: 'DecimaMonoPro-Bold';
    display: inline-block;
    color: #666;
    text-align: center;
    padding: 14px 11px;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.3s;
    font-size: 18px;
    letter-spacing: 0.08em;
}

/* Change background color of links on hover */
ul.topnav li a:hover {color: #e60010;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

.logo {
  width: 75%;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  padding-left: 9.5vw;    
}

.brand {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: baseline;
  padding-left: 10.5vw;
  padding-right: 15vw;
}


.brand h1 {
  margin: 0;
  font-size: 1.5em;
}

.brand img {
  max-width: 100%;
  height: auto;
}

.tagline h6 {
  font-family: 'decimamono-probold';
  letter-spacing: .335em;
  color: #e60010;
}

/* <!-- CONTAINER STUFF/MASTHEAD
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

#hide {
  display: none;
}

.mast_container {
  height: 580px;
  position: relative;
  /*background-image: url('/pages/contents/en/assets/images/masthead_main.png');*/
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

.masthead_text {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.masthead_text_2 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.headline {
  padding: 0 9.375em;
}

.intro_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 130px;
}

.intro_copy p {
  display: flex;
  justify-content: center;
  align-items: center;
}

.masthead_text:after {
  content: url('../png/dash.png');
  transform: scale(.5);
  top: -231px;
  position: absolute;
  left: 88%;
  width: 28%;

  /* Adjust Style */
  /*transform: scale(.5) translateX(50%);*/
  /*top: -231px;*/
  /*position: absolute;*/
  /*right: 0;*/
  /*width: 102px;*/
  /*z-index: -1;*/
}

.mast_container {
  position: relative;
}

.typography_container, .carousel, .paragraph_container, .parallax_container, .blockquote_container, .button_container {
  padding: 0;
}

.masthead {
  height: 30em;
  color: white;
  display: flex;
  align-items: center;
}

.masthead_text_2 h2 {
  font-size: 60px;
  margin: 0;
  padding-top: 2em;
}

.tagline  {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-right: 2%;
}

.intro_copy {
  padding: 40px 0;
}

.type_layout {
  display: flex;
  flex-direction: column;
  margin-bottom: 80px;
}

/* <!-- COLOR CONTAINER
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

.color_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 75px;
}

.color_outside_container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.color_inner_container {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1em;
}

.color_inner_container:nth-child(3) {
  padding-bottom: 0;
}

.darker_colors {
  width: 45%;
  color: white;
  padding: 1em;
  display: flex;
  justify-content: center;
}

.black_container {
  background-color: #000000;
  font-family: "DecimaMonoProLt";
}

.red_container {
  background-color: #e60010;
}

.grey_container {
  width: 45%;
  background-color: #fefefe;
  color: #000;
  padding: 1em;
  display: flex;
  justify-content: center;
}

.firstgrey {
  background-color: #616161;
  color: white;
}

.secondgrey {
  background-color: #999999;
  color: white;
}

.lightercolor_container_1{
  width: 45%;
  color: white;
  padding: 1em;
  display: flex;
  justify-content: center;
  background-color: #f5f5f5;
  color: #999999;
  border: 1px solid #fff;
}

.lightercolor_container_2{
  width: 45%;
  color: white;
  padding: 1em;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  color: #999999;
}

/* <!-- COLOR SECTION END
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

/* <!-- TYPOGRAPHY SECTION START
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

.typography_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2em 2em 0 2em;
}

.type_text1 {
  width: 100%;
}

.type_text1 h1 {
  font-size: 92px;
  margin: 0
}

.actiontext_1 h1 {
  font-size: 20px;
  font-family: "DecimaMonoPro-Bold";
  margin: 0 0 2em 0;
}

.actiontext_2 h1 {
  font-size: 16px;
  font-family: "DecimaMonoPro-Bold";
  margin: 0 0 2em 0;
}


.type_text1 li {
  color: #e60010;
}

.type_text2 {
  width: 35%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: baseline;
  color: #e60010;
  font-family: "akkurat-mono";
  font-size: 14px;
}

.bodytext_width {
  width: 32%;
}

.type_layout {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    margin-bottom: 80px;
}

.type_text3 {
  width: 45%;
}

/* <!-- TYPOGRAPHY SECTION END
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

/* <!-- CAROUSEL SECTION START
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

.carousel {
  display: flex;
  justify-content: center;
}

.carousel_placeholder {
  display: flex;
  background-color: #f5f5f5;
  height: 600px;
  justify-content: center;
  align-items: center;
}

.carousel_placeholder .masthead {
  position: absolute;
}

.parallax_container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 2em;
}

/* <!-- CAROUSEL SECTION END
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

/* <!-- PARALLAX SECTION START
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

.car1 img, .car2 img, .car3 img {
  width: 100%;
}

.car1 {
    top: -40px;
    position: relative;
}

.car2 {
  position: relative;
  bottom: -700px;
}

.map {
  top: 120px;
  position: relative;
}

.car5red {
  top: -870px;
  position: relative;
}


.parallax_pics {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 60px;
  padding-bottom: 150px;
}

.twocars {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
}

/* <!-- PARALLAX SECTION END
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

/* <!-- NAVIGATION SECTION START
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

.navigation_example_container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.cartest img {
  width: 100%;
}

.mobile_navs {
  display: flex;
}

.nav_1 img , .nav_2 img , .nav_3 img {
  width: 90%;
}

/* <!-- NAVIGATION SECTION END
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

/* <!-- BUTTON SECTION START
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

.testbutton {
  background-color: transparent;
  border: 2px solid red;
  color: black;
}

.testbutton:hover {
  background-color: red;
  transition: transform .3s ease;
}

.paragraph_example {
  border-left: 5px #e60010 solid;
  padding-left: 3em;
}

.button_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'decimamono-probold';
  padding: 2em;
}

.buttons {
  display: flex;
  flex-direction: column;
}

.button_container hr {
  border-top: 2px dashed #E1E1E1;
  width: 74%;
}

.lrg_button_one {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.lrg_button_one:hover {
  background-color: black;
  color: white;
}

.lrg_button_one img {
  float: right;
}

.lrg_button_ghost img {
  float: right;
}

.lrg_button_ghost {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: transparent;
  border: 2px solid #e60010;
  color: #e60010;
  background: transparent url('../png/arrow_right_red.png') center top no-repeat;
  background-position: right;
  background-origin: content-box;
}

.lrg_button_ghost:hover {
  border: solid 2px black;
  color: black;
  background: transparent url('../png/arrow_right_black.png') center top no-repeat;
  background-position: right;
  background-origin: content-box;
}

.ghosttext_lrg {
  padding-right: 140px;
}

.button_arrow {
  float: right;
  padding-left: 36%;
}

.button_arrow_sml {
    float: right;
    padding-left: 17%;
}

.sml_button_one {
  background: #e60010;
   display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 19vw;
}

.sml_button_one:hover {
  background-color: black;
  color: white;
}

.sml_button_one img {
   float: right;
}

.ghosttext_sml {
  padding-right: 40px;
}

.sml_button_ghost {
  width: 19vw;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: transparent;
  border: 2px solid #e60010;
  color: #e60010;
  background: transparent url('../png/arrow_right_red.png') center top no-repeat;
  background-position: right;
  background-origin: content-box;
}

.sml_button_ghost:hover {
  border: solid 2px black;
  color: black;
  background: transparent url('../png/arrow_right_black.png') center top no-repeat;
  background-position: right;
  background-origin: content-box;
}

.sml_button_ghost a:hover {
  float: right;
    padding-left: 17%;
    width: 5px;
    height: 16px;
    display: block;
    background: transparent url('../png/arrow_right_black.png') center top no-repeat;
}

.sml_button_ghost img{
 float: right;
}

.txt_button {
  width: 13vw;
  color: #e60010;
  background-color: transparent;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0;
  background: transparent url('../png/arrow_right_red.png') center top no-repeat;
  background-position: right;
  background-origin: content-box;
}

.txt_button:hover {
  background: transparent url('../png/arrow_right_black.png') center top no-repeat;
  background-position: right;
  background-origin: content-box;
}

.nav_title_text {
    margin-top: 180px;
    color: #e60010;
}

p {
  font-size: 14px;
  font-family: "akkurat-mono";
  line-height: 26px;
  margin: 0 0 2em 0;
}


/* <!-- PARALLAX START
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

.car1 {
  z-index: 1;
}

.car2 img {
  width: 90%;
  padding-right: 15em;
}

.car3 {
  float: right;
  padding-right: 6em;
  position: relative;
  top: -80px;
}

.car3:after {
  content: url('../png/square_lines.png');
  position: absolute;
  right: 0;
  top: -100px;
  transform: scale(0.5);
}

.twocars {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  z-index: 9;
}

.twocars_bottom {
  z-index: 8888;
}

/* <!-- GRID START
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

.grid_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 75px;
}

.grid_container {
  padding: 0;
}

.gridimg_container {
  padding: 0 9.375em;
}


/* <!-- BUTTONS START
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-family: "DecimaMonoPro-Bold";
  padding-top: 40px;
}

/* <!-- ARROWS START
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

.arrow{
    display: inline-block;
    margin-left: 1em;
}

.arrow.rotated{
    transform: rotate(90deg);
    transition: all 200ms ease-in 0s;
}

.arrow_down {
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow_down img {
  width: 3%;
}

/* <!-- CAROUSEL
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

#services-carousel, #services {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.carousel-inner.services {
  width: 100%;
}

ul.tabbed-menu.menu-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.tabbed-menu.menu-list ul {
  overflow:hidden;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.tabbed-menu.menu-list li {
  float: left;
  list-style-type: none;
  padding: 10px 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.slick-current {
  color: #e60010;
}

.wrapper {max-width:100%;}


.portfolio-thumb-slider .slick-slider-item {
padding:5px;  
}

.portfolio-thumb-slider  {
margin:0 -5px 5px -5px;
}

#marker {
background: transparent url("../png/arrow_down.png") no-repeat scroll 50% 50%;
height: 173px;
left: 40.6%;
top: 538px;
position: absolute;
z-index: 1;
width: 5.8%;
transform: scale(0.2);
}

/* <!-- BOTTOM
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/
.final_copy {
  padding-top: 2em;
}

.final_copy p {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0;
}

.thanks {
  padding-top: 2em;
}

.designstudio {
  color: #e60010;
  font-family: "akkurat-mono";
  font-style: normal;
  margin: 0;
  padding-bottom: 10em;
}

.intro_copy h6 {
  padding-top: 60px;
}

.nav_title_text {
  margin-top: 180px;
  color: #e60010;
}

.mobile_navs {
  margin-bottom: 75px;
}

.nomargin_top {
  margin-top: 0;
}

/* <!-- BOTTOM SECTION END
–––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

/* <!-- MEDIA QUERIES
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->*/

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:888px) {
  ul.topnav li{display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:888px) {
  ul.topnav.responsive {
    position: relative;
    padding-top: 8vh;
    color: white;
    background-color: #e60010;
     -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: flex;
    justify-content: flex-end;
    color: #555555;
  }
  ul.topnav.responsive li a:hover {
    color: white;
  }
}


/* <!-- 180608 GDPR 対応
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->*/
#tgrCommon_gdpr{
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    background: #000;
    padding: 10px 25px;
    display: none;
}

#tgrCommon_gdpr p{
    line-height: 1.5;
    font-size: 12px;
    margin: 0;
    color: #fff;
}

#tgrCommon_gdpr .close{
  position: absolute;
    right: 0;
    top: 0;
}

#tgrCommon_gdpr a{
  color: #E60010;
  transition: 0.3s;
  font-family: "akkurat-mono";
}

#tgrCommon_gdpr a:hover{
  color: #5a5a5a;
}

#tgrCommon_gdpr .close a{
  color: #fff;
    font-family: "akkurat-mono";
    font-size: 15px;
    padding: 5px 10px 5px 5px;
    display: block;
    transition: 0.3s;
}

#tgrCommon_gdpr .close a:hover{
    opacity: 0.5;
}


/* <!-- WRC report preview driver_comment
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->*/
table.fgBox_table tr td {
  vertical-align: baseline;
}