@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Barlow:300');

#static-inner {
    padding-bottom: 55px;
}

#static-inner p {
    font-size: 15px;
    font-family: Lato-light, Lato;
    font-weight: 300;
    line-height: 20px;
    color: #666666;
    letter-spacing: 1px;
    padding: 50px 0px;

}
#static-inner h2 {
    font-size: 20px;
    text-transform: uppercase;
    color: #666;
    text-align: center;
    display: block;
    padding: 20px 0px;
    background-color: #efefef;
    font-family: Lato-Regular, Lato;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 40px;
    margin-top: 0px;

}
#static-inner h3 {
    font-size: 25px;
    text-transform: uppercase;
    color: #666;
    text-align: center;
    display: block;
    padding:  0px;
    font-family: Lato-Light, Lato;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.trigenic-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: -5px;
}
.trigenic-hero picture {
    float: left;
    margin-bottom: -5px;
}
.trigenic-hero img {
    width: 100%;
}
.trigenic-hero h1 {
    position: absolute;
    top: 5.2%;
    right: 4%;
    text-align: right;
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    color: #fff;
    letter-spacing: 2px;
    font-size: 30px;
}

#static-inner .trigenic-hero h2 {
    position: absolute;
    top: 16.7%;
    right: 4%;
    text-align: right;
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    color: #fff;
    letter-spacing: 2px;
    font-size: 23px;
    line-height: 30px;
    padding: 0px;
    background-color: transparent;

}
.tri-shoes img {
    width: auto;
    position: absolute;
    transform: translate(-50%, -50%);
}
  
.trigenic-cta a {
    font-size: 13px;
    font-family: Lato-Regular, Lato;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 18px;
    background: #666;
    display: inline-block;
    min-width: 280px;
    max-width: 280px;
    box-sizing: border-box;
    border-radius: 3px;
    text-decoration: none;
    margin-bottom: 12px;
    border: 1px solid #666;
    -webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
}
.trigenic-cta a:hover, .trigenic-cta a:focus {
    background: transparent;
    color: #666;
}
.trigenic-halves {
    padding-bottom: 60px;
}
.trigenic-halves .trigenic-half:nth-child(1) {
    padding-right: 10px;
}
.trigenic-halves .trigenic-half:nth-child(2) {
    padding-left: 10px;
}
.trigenic-half {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}
.trigenic-half img {
    width: 80%;
    max-width: 363px;
    margin: 0 auto;
}
.trigenic-half .trigenic-cta a {
    display: block;
    max-width: 280px;
    margin: 0 auto 12px auto;
}
.trigenic-cta ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.trigenic-cta ul li {
    display: inline-block;
}


/*.trigenic-half .trigenic-cta ul li:last-child a {
    color: #666;
    border: 1px solid #666;
    background: transparent;
}
.trigenic-half .trigenic-cta ul li:last-child a:hover, .trigenic-half .trigenic-cta ul li:last-child a:focus {
    background: #ddd;
}*/
.trigenic-half .trigenic-cta ul li {
    display: block;
}
#static-inner .trigenic-half p {
    max-width: 400px;
    margin: 30px auto;
    padding: 0px 20px;
}
.quote {
    padding: 30px 0px 50px 0px;
}
.quote boxquote {
    font-size: 28px;
    line-height: 40px;
    text-transform: uppercase;
    color: #666;
    text-align: center;
    display: block;
    padding:  0px 20px;
    font-family: Lato-Light, Lato;
    font-weight: 300;
    letter-spacing: 2px;
    max-width: 650px;
    margin: 0 auto;
    
}
.quote boxquote .name-of-quote {
    font-size: 15px;
    line-height: 20px;
    text-transform: none;
    display: inline-block;
    margin-top: 35px;
}
.trigenic-cta-footer li {
    width: 33%;
}
.big-video-container {
    position: relative;
}
.principles {
    display: none;
}
.principles ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.principles li {
padding-bottom: 20px;
width: 100%;
box-sizing: border-box;
display: inline-block;
position: relative;
}

.principles li img {
    width: 100%;
}
#static-inner .principles li p {
    font-size: 4.6vw;
    line-height: 6.15vw;
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    color: #fff;
    letter-spacing: 2px;
    position: absolute;
    padding: 0px;
    margin: 0px;
    text-align: left;

}
#static-inner .principles li p .principlenumber {
    font-size: 6.8vw;
}
#static-inner .principles li:nth-child(1) p {
    top: 15.38vw;
    right: 10vw;

}
#static-inner .principles li:nth-child(2) p {
    top: 20.76vw;
    left: 7.69vw;
}
#static-inner .principles li:nth-child(3) p {
 top: 38.46vw;
 right: 5.69vw;
}
#static-inner .principles li:nth-child(4) p {
 top: 30.76vw;
 left: 7.69vw;
}
.video-container {
    position: relative;
    padding-top: 100%;
    display: block;
    margin-bottom: 120px;
}
.video-container video {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}
.bigvideo {
    width: 100%;
}

.parallax-bg4 {
z-index:0;
position:absolute;
left:0%;
top:0;
width:100%;
height: 100%;

}
.parallax-bg4 > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-animation: slide4 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: slide4 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}

.bg4_1 {
 top: 54%;
    left: 65%;
    -moz-transform: scaleX(-1) translate(-50%, -50%)!important;
    -o-transform: scaleX(-1) translate(-50%, -50%)!important;
    -webkit-transform: scaleX(-1) translate(-50%, -50%)!important;
    transform: scaleX(-1) translate(-50%, -50%)!important;
    filter: FlipH;
    -ms-filter: "FlipH";
}

.bg4_2 {
top: 53%;
    left: 19%;
}



.parallax-bg3 {
z-index:1;
position:absolute;
left:0%;
top:0;
width:100%;
height: 100%;

}
.parallax-bg3 > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-animation: slide3 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: slide3 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}
.bg3_1 {
    top: 50%;
    left: 72%;
}

.bg3_2 {
top: 53%;
    left: 30%;
}


.parallax-bg2 {
z-index:2;
position:absolute;
left:0%;
top:0;
width:100%;
height: 100%;

}
.parallax-bg2 > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-animation: slide2 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: slide2 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}

.bg2_1 {
 top: 50%;
    left: 61%;
}

.bg2_2 {
 top: 53%;
    left: 40%;
}

.parallax-bg1 {
z-index:3;
position:absolute;
left:0%;
top:0;
width:100%;
height: 100%;
}

.parallax-bg1 > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-animation: slide1 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: slide1 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}

.bg1_1 {
    top: 53%;
    left: 50%;
}

@-webkit-keyframes slide1 {
    0% { left:  0%;top: 00%; }
    50% { left: 0%;top: -20px; }
    100% { left: 0%; top: 00%;}    
}
@-webkit-keyframes slide2 {
    0% { left:  0%;top: 15px; }
    50% { left: 0%;top: 0px; }
    100% { left: 0%; top: 15px;}    
}
@-webkit-keyframes slide3 {
    0% { left:  0%;top: 00%; }
    50% { left: 0%;top: 10px; }
    100% { left: 0%; top: 00%;}    
}
@-webkit-keyframes slide4 {
    0% { left:  0%;top: 5px; }
    50% { left: 0%;top: 0px; }
    100% { left: 0%; top: 5px;}    
}


@-webkit-keyframes fade1 {
    0% { opacity: 1; }
    13.28% { opacity: 1; }
    14.28% { opacity: 0; }
    100% { opacity: 0;}    
}
@-webkit-keyframes fade2 {
    0% { opacity: 0; }
    13.28% { opacity: 0; }
    14.28% { opacity: 1; }
    27.57% { opacity: 1;} 
    28.57% { opacity: 0;}
    100% { opacity: 0;}     
}
@-webkit-keyframes fade3 {
    0% { opacity: 0; }
    27.57% { opacity: 0; }
    28.57% { opacity: 1; }
    41.85% { opacity: 1; } 
    42.85% { opacity: 0; }
    100% { opacity: 0;}    
}
@-webkit-keyframes fade4 {
    0% { opacity: 0; }
    41.85% { opacity: 0; }
    42.85% { opacity: 1; }
    56.14% { opacity: 1; }
    57.14% { opacity: 0; }
    100% { opacity: 0;}  
}
@-webkit-keyframes fade5 {
    0% { opacity: 0; }
    56.14% { opacity: 0; }
    57.14% { opacity: 1; }
    70.42% { opacity: 1; }  
    71.42% { opacity: 0; }
    100% { opacity: 0;}     
}
@-webkit-keyframes fade6 {
    0% { opacity: 0; }
    70.42% { opacity: 0; }
    71.42% { opacity: 1; }
    84.71% { opacity: 1;} 
    85.71% { opacity: 0;}
    100% { opacity: 0;}     
}
@-webkit-keyframes fade7 {
    0% { opacity: 0; }
    84.71% { opacity: 0; }
    85.71% { opacity: 1; }
    99% { opacity: 1;}
    100% { opacity: 0;}    
}


@media all and (max-width: 1500px) {
.trigenic-hero h1 {
    top: 2.333vw;
    right: 4vw;
    font-size: 2vw;
}

#static-inner .trigenic-hero h2 {
    position: absolute;
    top: 7.666vw;
    right: 4vw;
    font-size: 1.666vw;
    line-height: 2.333vw;

}
.parallax-bg4 {
z-index:0;
position:absolute;
left:0%;
top:0;
width:100%;
height: 100%;

}
.parallax-bg4 > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-animation: slide4 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: slide4 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}

.tri-shoes .bg4_1 {
 top: 54%;
    left: 65%;
    -moz-transform: scaleX(-1) translate(-50%, -50%)!important;
    -o-transform: scaleX(-1) translate(-50%, -50%)!important;
    -webkit-transform: scaleX(-1) translate(-50%, -50%)!important;
    transform: scaleX(-1) translate(-50%, -50%)!important;
    filter: FlipH;
    -ms-filter: "FlipH";
    width: 18.33vw
}

.tri-shoes .bg4_2 {
top: 53%;
    left: 19%;
    width: 18.33vw
}



.parallax-bg3 {
z-index:1;
position:absolute;
left:0%;
top:0;
width:100%;
height: 100%;

}
.parallax-bg3 > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-animation: slide3 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: slide3 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}
.tri-shoes .bg3_1 {
    top: 50%;
    left: 72%;
    width: 15vw
}

.tri-shoes .bg3_2 {
top: 53%;
    left: 30%;
    width: 14.66vw
}


.parallax-bg2 {
z-index:2;
position:absolute;
left:0%;
top:0;
width:100%;
height: 100%;

}
.parallax-bg2 > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-animation: slide2 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: slide2 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}

.tri-shoes .bg2_1 {
 top: 50%;
    left: 61%;
    width: 20.33vw
}

.tri-shoes .bg2_2 {
 top: 53%;
    left: 40%;
    width: 16vw;
}

.parallax-bg1 {
z-index:3;
position:absolute;
left:0%;
top:0;
width:100%;
height: 100%;
}

.parallax-bg1 > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-animation: slide1 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: slide1 3s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}

.tri-shoes .bg1_1 {
    top: 53%;
    left: 50%;
    width: 10.66vw;
}

}
@media all and (max-width: 1024px) {
.trigenic-hero h1 {
    font-size: 30px;
    top: 20px;
}
#static-inner .trigenic-hero h2 {
    position: absolute;
    top: 9.666vw;
    right: 4vw;
    font-size: 20px;
    line-height: 30px;
    top: 90px;
}
.trigenic-cta-footer li {
    width: 100%;
}
}
@media all and (max-width: 900px) {
.tri-shoes .bg1_1 {
    top: 60%;
}
.tri-shoes .bg2_2 {
    top: 60%;
}
.tri-shoes .bg2_1 {
    top: 60%;
}
.tri-shoes .bg3_1 {
    top: 60%;
}
.tri-shoes .bg3_2 {
    top: 63%;
}
.tri-shoes .bg4_1 {
    top: 60%;
}
.tri-shoes .bg4_2 {
    top: 60%;
}

}

@media all and (max-width: 768px) {
.parallax-bg4 {
    display: none;
}
.tri-shoes .bg1_1 {
    width: 17.66vw;
    top: 60%;
}
.tri-shoes .bg2_2 {
    top: 60%;
    left: 31%;
    width: 30vw;
}
.tri-shoes .bg2_1 {
    top: 60%;
    left: 70%;
    width: 32.33vw;
}
.tri-shoes .bg3_1 {
    top: 60%;
    left: 87%;
    width: 19vw;
}
.tri-shoes .bg3_2 {
    top: 63%;
    left: 14%;
    width: 20.66vw;
}
.trigenic-hero h1 {
    top: 2.333vw;
    right: 6vw;
    font-size: 6vw;
}
#static-inner .trigenic-hero h2 {
    position: absolute;
    top: 16.666vw;
    right: 6vw;
    font-size: 3.666vw;
    line-height: 4.333vw;
}
.trigenic-text {
    padding: 0px 20px;
}
}
@media all and (max-width: 720px) {
    .trigenic-half:nth-child(1) {
margin-bottom: 50px;
}
.trigenic-half {
    width: 100%;
    padding: 0px!important;
}
.big-video-container {
    display: none;
}
.principles {
    display: block;
}
}
@media all and (max-width: 420px) {
.parallax-bg4 {
    display: block;
}
.tri-shoes .bg1_1 {
    width: 25.66vw;
}
.tri-shoes .bg2_2 {
    left: 50%;
    width: 45vw;
}
.tri-shoes .bg2_1 {
    left: 50%;
    width: 48.33vw;
}
.tri-shoes .bg3_2 {
    left: 50%;
    width: 45.66vw;
}
.tri-shoes .bg3_1 {
    left: 50%;
    width: 44vw;
}
.tri-shoes .bg4_2 {
    left: 50%;
    width: 56.33vw;
}
.tri-shoes .bg4_1 {
    top: 54%;
    left: 50%;
    -moz-transform: scaleX(-1) translate(50%, -50%)!important;
    -o-transform: scaleX(-1) translate(50%, -50%)!important;
    -webkit-transform: scaleX(-1) translate(50%, -50%)!important;
    transform: scaleX(-1) translate(50%, -50%)!important;
    filter: FlipH;
    -ms-filter: "FlipH";
    width: 56.33vw;
}
.bg4_1 {
    -webkit-animation: fade1 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: fade1 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}
.bg4_2 {
    -webkit-animation: fade7 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: fade7 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}
.bg3_1 {
    -webkit-animation: fade2 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: fade2 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}
.bg3_2 {
    -webkit-animation: fade6 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: fade6 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}
.bg2_1 {
    -webkit-animation: fade3 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: fade3 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}
.bg2_2 {
    -webkit-animation: fade5 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: fade5 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}
.bg1_1 {
    -webkit-animation: fade4 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation: fade4 14s cubic-bezier(.42,.43,.69,.69)  normal forwards;
    animation-iteration-count: infinite;
}
.trigenic-hero h1 {
    top: 2.333vw;
    right: 6vw;
    font-size: 8vw;
}
#static-inner .trigenic-hero h2 {
    top: 20.666vw;
    font-size: 3.666vw;
    line-height: 6.333vw;
}
}
/* Originals - Static outside page influences */
@media all and (max-width: 999px) {
    .content-wrapper {
        padding-bottom: 0;
    }
}
.department-content .text-carousel-bottom {
    margin: 15px 0;
    position: relative;
    background-color: rgba(220, 220, 220, 1);
}
.text-carousel .info {
    text-transform: uppercase;
    font-family: Lato-regular, "Lato", Arial, sans-serif;
}
.thoughts-achievements-container.clarks-container {
    display: none;
}
/* This is to hide the desktop skinny banner */
#skinny-banner-header {
    display: none!important;
}
#static-inner {
  overflow: hidden;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  font-size: 15px;
  text-align: center; }