
/*--CSS--*/

.logo-reversible-bottom-blade{
  display:inline-block;
  position:relative;
  width:10em;
  height:3.5em;
  padding:3.5em 0 0 0;
  margin:0 0 1.5em 0;
  font-family:'montserrat_bold', Helvetica, sans-serif;
  font-size:1.2em;
  text-transform:uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:url('/img/logo-reversible-bottom-blade-white.png') no-repeat 50% -0.2em;
  background-size:auto 110%;
  box-sizing:border-box;
  }

#bladeContent{
  display:block;
  position:relative;
  }

  #blade-image{
    display:block;
    position:absolute;
    top:-2.5em;
    left:3em;
    width:7em;
    height:51em;
    background:url('/img/element-blade.png') no-repeat 0 0;
    background-size:100% auto;
    }

    .standalone #blade-image{
      top:1em;
      }

#blade-image h3{
  display:block;
  width:10vw;
  padding:0;
  margin:6vw auto 0.3vw auto;
  font-size:1.3vw;
  text-align:center;
  color:#FFFFFF;
  border:2px solid #FFFFFF;
  border-radius:0.3em;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  }

  #blade-image .sticky{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 2vw;
    }

.patent{
  display:block;
  margin:0 auto 0.5vw auto;
  font-family:'montserrat_bold', Helvetica, Arial, sans-serif;
  font-size:1vw;
  text-align:center;
  color:#FFFFFF;
  text-decoration:none;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  }

  .patent .flag{
    display:block;
    width: 3vw;
    height:2vw;
    margin:0 auto 0.0vw auto;
    background:#CCC no-repeat 50% 50%;
    background-size:cover;
    box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.6); -moz-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.6); -webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.6);    }

    .flag.uk{
      background-image:url('/img/flag-uk.png');
    }
    .flag.eu{
      background-image:url('/img/flag-eu.png');
    }
    .flag.us{
      background-image:url('/img/flag-us.png');
    }
    .flag.sa{
      background-image:url('/img/flag-sa.png');
    }

  .blade-section{
    display:block;
    position:relative;
    min-height:1em;
    padding:0.5em 0 0 11em;
    margin:0;
    box-sizing:border-box;
    }

    .blade-section.normal{
      padding:0.5em 0 0 3em;
      }

    .blade-section.section-1{
      background-position:50% 50%;
      background-repeat:no-repeat;
      background-size:cover;
      background-image:url('/img/fill-turf.jpg');
      }

      .blade-section.section-1{
        background-position:50% 50%;
        background-repeat:no-repeat;
        background-size:cover;
        background-image:url('/img/fill-turf.jpg');
        }

        .blade-section.section-1.edger{
          min-height:6em;
          background-image:url('/img/fill-edger.jpg');
          }

      .standalone .blade-section.section-1{
        height:6em;
        background-color:#FFFFFF;
        }

      .blade-section.section-1 h3,
      .blade-section.section-2 h3{
        position:relative;
        color:#FFFFFF;
        }

      .blade-section.edger h3{
        top:1.7em;
        }

      .standalone .blade-section.section-1 h3,
      .standalone .blade-section.section-2 h3{
        color:#FFFFFF;
        }

      .standalone .blade-section.section-1 h3{
        position:relative;
        top:1.7em;
        }

    .blade-section.section-2,
    .blade-section.section-3{
      background:var(--color-dark) url('/img/fill-blade.svg') no-repeat;
      background-size:120% auto;
      }

      .blade-section.section-2.normal,
      .blade-section.section-3.normal{
        background-image:none;
        background-size:120% auto;
        }

    .blade-section.section-2{
      padding-top:0.5em;
      margin:0;
      color:#FFFFFF;
      background-position:50% -10em;
      }

      .blade-section.section-2 p{
        color:#FFFFFF;
        font-family:'montserrat_bold', Helvetica, Arial, sans-serif;
        font-size:0.8em;
        line-height:1.2em;
        -webkit-font-smoothing: antialiased;
    		-moz-osx-font-smoothing: grayscale;
        }

        .blade-section.section-2 .columnB h3{
          position:relative;
          top:-1.5em;
          text-align:center;
          }

    .blade-section.section-3{
      padding-right:3em;
      background-color:var(--color-light);
      background-position:50% -20em;
      }

    .blade-section.section-4{
      background-color:#FFFFFF;
      }

    .blade-section .columnA,
    .blade-section .columnB{
      display:inline-block;
      vertical-align:top;
      padding:0;
      margin:0 0.5em 0 0;
      }

    .blade-section .columnA{
      width:35%;
      text-align:center;
      }

    .blade-section .columnB{
      width:59%;
      }

.video{
  display:block;
  position:relative;
  width:45vw;
  height:25vw;
  margin:-2em 0 0 0;
  }

@media screen and (max-width:640px) and (orientation: portrait){

  #blade-image{
    top:-2.5em;
    left:1em;
    width:7em;
    }

    .blade-section{
      display:block;
      position:relative;
      min-height:1em;
      padding:0.5em 0 0 8.5em;
      margin:0;
      box-sizing:border-box;
      }

      .blade-section.section-4{
        padding:0 1em;
        }

      .blade-section .columnA{
        width:98%;
        text-align:center;
        }

        .blade-section.section-1 h3{
          color:#FFFFFF;
          }

        .blade-section.section-3 {
            padding-right:1em;
        }

    #titleVideo{
      display:none;
    }

    .video{
      margin:0 0 1em 0;
      width:62vw;
      height:34vw;
    }

}
