html {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit; }
.group:after {
content: "";
display: table;
clear: both; }
body {
background: #092e54;
height: 100%;
padding: 0;
margin: 0;
color: #fff;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
text-align: left;
font-family: 'Helvetica Neue', 'Segoe UI', sans-serif;
font-weight: normal;
font-size: 1.0em;
font-style: normal;
line-height: 1.6em; }
/* AIMEN CSS */
.__product-container{
display: flex;
margin-bottom: 40px;
}
.__product-image{
width: 30%;
border-radius: 100%;
margin-right: 40px;
}
.__product-details {
display: flex;
flex-direction: column;
justify-content: center;
}
.__product-details .__product-title{
font-weight: 100;
font-size: 1.1rem;
font-family: UNIQLO;
}
.__product-details .__product-range-link{
text-decoration: underline !important;
font-weight: bold !important;
font-size: 14px !important;
margin-top: 18px !important;
font-family: UNIQLO;
text-transform: uppercase;
}
.__more-collection{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.__more-collection-img-container {
height: 150px;
width: 150px;
}
.__more-collection-img-container img{
max-width: 100%;
max-height: 100%;
}
.__collection{
display: flex;
flex-direction: column;
margin: 20px;
}
.__workwear-container{
height: 100% !important;
bottom: 0 !important;
}
.__title{
display: block !important;
visibility: visible !important;
}
.__tagline{
/* text-align: left !important; */
font-weight: 600 !important;
padding-left: 30px;
padding-right: 30px;
}
/* END OF AIMEN CSS */
:root {
font-size: 16px; }
*:focus {
outline: 0; }
#global-nav {
display: block;
clear: both;
padding: 10px;
width: 100%;
background: #fff; }
#global-nav a,
#global-nav img {
float: left; }
#container {
margin: 0 auto;
background: none; }
#container strong {
font-weight: bold; }
#container img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
max-height: 100%;
max-width: 100%; }
#container a {
color: #fff;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none; }
#container ul li {
font-weight: 200; }
#container ul li a {
color: #FF0000;
text-decoration: underline; }
#container p {
font-size: 1rem;
font-weight: normal;
line-height: 1.2rem;
font-weight: 200; }
@media only screen and (max-width: 640px) {
#container p {
font-size: 1.1rem; } }
#container p a {
text-decoration: underline; }
#container h1, #container h2, #container h3, #container h4 {
font-family: 'UNIQLO', sans-serif;
font-weight: 100;
line-height: 1.0em;
margin-bottom: 0;
letter-spacing: 1px; }
#container h1 {
font-size: 4vw; }
#container h2 {
font-size: 2.5rem; }
#container h3 {
font-size: 1.5rem;
line-height: 26px;
}
#container h4 {
font-size: 1rem; }
#container h5 {
font-size: 1.2rem;
font-weight: bold; }
#container .clearfix {
clear: both;
display: block; }
#container .active {
display: block; }
#container .hide {
display: none;
visibility: hidden; }
#container .flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden; }
#container .flexible-container iframe,
#container .flexible-container object,
#container .flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 499; }
#container .CTAs {
display: block;
position: absolute;
bottom: 10px;
left: 30px;
right: 30px; }
@media only screen and (max-width: 1120px) {
#container .CTAs {
left: 20px;
right: 20px; } }
#container .CTAs .shop {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
#container .CTAs .shop a {
width: 100%;
text-align: center;
margin: 0 5px; }
#container .CTAs .shop a:first-of-type {
margin-left: 0; }
#container .CTAs .shop a:last-of-type {
margin-right: 0; }
#container .CTAs .more-info {
display: block;
width: 100%;
margin: 10px 0;
text-align: center; }
#container .CTAs .tags {
text-align: center;
text-transform: capitalize; }
#container .CTAs .tags a {
margin: 0 5px; }
#container .btn {
color: #fff;
font-family: 'UNIQLO', sans-serif;
font-weight: 100;
line-height: 1.0em;
letter-spacing: 1px;
padding-bottom: 20px;
display: table;
position: relative; }
#container .btn:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
clear: both;
margin-top: 20px;
height: 5px;
width: 50%;
background: #fff;
margin: 0 auto;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease; }
#container .btn:hover:after {
width: 75%; }
@media only screen and (max-width: 1024px) {
#container .btn:after {
height: 3px; } }
#container .ghost-btn {
color: #fff;
font-family: 'UNIQLO', sans-serif;
font-weight: 100;
line-height: 1.0em;
letter-spacing: 1px;
padding: 10px 20px;
border: 5px solid #fff; }
#container .ghost-btn#suit-button {
width: 150px; }
#container .ghost-btn.active, #container .ghost-btn.selected {
background: #fff;
color: #092e54; }
#container .ghost-btn:hover {
background: #fff;
color: #092e54; }
@media only screen and (max-width: 1024px) {
#container .ghost-btn {
padding: 10px;
border: 3px solid #fff; } }
.row {
height: 100%;
width: 100%;
margin: 0 auto;
display: block;
position: relative;
max-width: none; }
#container {
position: relative;
/*===== HERO =====*/
/*===== LEARN MORE =====*/
/*===== INSPIRE ME =====*/
/*===== VIEW THE RANGE =====*/ }
#container .items {
width: 100%;
text-align: center;
position: absolute;
top: calc(50%);
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
display: none; }
@media only screen and (max-width: 960px) {
#container .items {
top: calc(10%);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); } }
@media only screen and (max-width: 640px) {
#container .items {
top: 120px; } }
@media only screen and (max-width: 420px) {
#container .items {
top: 100px; } }
@media only screen and (max-height: 720px) and (min-width: 640px) {
#container .items {
position: relative;
top: 0;
padding: 100px 0;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); } }
#container .items.active {
display: block; }
#container .items a {
text-align: center;
width: 15%;
display: inline-block;
margin: 4% 1% auto;
vertical-align: top; }
#container .items a img {
margin-bottom: 20px;
padding: 10px; }
#container .items a p {
font-weight: 200; }
#container .items a .btn {
margin: 0 auto; }
#container .items a:hover .btn::after {
width: 75%; }
@media only screen and (max-width: 1280px) {
#container .items a {
width: 19%;
margin: 6% 3% auto; } }
@media only screen and (max-width: 768px) {
#container .items a {
width: 35%;
margin: 10px;
margin-bottom: 7%; }
#container .items a img {
max-width: 75%;
margin-bottom: 20px; } }
#container .pairings {
text-align: center;
margin-bottom: 60px; }
#container .pairings h2 {
margin-bottom: 10px; }
#container .pairing-item {
text-align: center;
width: 15%;
min-width: 100px;
display: inline-block;
margin: 20px;
margin-bottom: 0px;
vertical-align: top; }
#container .pairing-item img {
margin-bottom: 20px; }
#container .pairing-item p {
font-weight: 200; }
#container .pairing-item h3 {
margin-top: 0; }
#container .pairing-item .btn {
margin: 0 auto; }
#container .pairing-item:hover .btn::after {
width: 75%; }
#container #hero {
width: 100%;
overflow: hidden;
height: 100vh;
position: relative; }
#container #hero .row {
width: 100%;
height: 100%;
position: relative;
overflow: hidden; }
@media only screen and (max-width: 768px) {
#container #hero .row .slick-list,
#container #hero .row .slick-track {
height: 100%; }
#container #hero .row .slick-dots {
position: absolute;
bottom: 50px;
left: 50%;
text-align: center;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%); } }
@media only screen and (max-width: 768px) and (max-width: 340px) {
#container #hero .row .slick-dots {
bottom: 20px; } }
@media only screen and (max-width: 768px) {
#container #hero .row .slick-dots li {
display: inline-block; }
#container #hero .row .slick-dots li button {
font-size: 0;
background: none;
border: 0;
outline: 0;
margin: 2px; }
#container #hero .row .slick-dots li button:after {
content: "";
display: block;
width: 12px;
height: 12px;
background: none;
border-radius: 100%;
border: 3px solid #fff; } }
@media only screen and (max-width: 768px) and (max-width: 340px) {
#container #hero .row .slick-dots li button:after {
width: 10px;
height: 10px; } }
@media only screen and (max-width: 768px) {
#container #hero .row .slick-dots .slick-active button:after {
background: #fff; } }
#container #hero .row .workwear {
position: absolute;
bottom: 110px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
width: 33.3333333%;
height: auto;
z-index: 500; }
@media only screen and (max-height: 720px) and (min-width: 768px) {
#container #hero .row .workwear {
bottom: 10px; } }
#container #hero .row .workwear p {
display: none;
visibility: hidden;
font-size: 1.8rem; }
#container #hero .row .workwear p img {
margin-left: 10px;
vertical-align: top; }
@media only screen and (max-width: 420px) {
#container #hero .row .workwear p {
font-size: 1.2rem; } }
#container #hero .row .workwear h1 {
text-align: center;
font-weight: bold;
text-transform: uppercase;
/* font-size: 5.2vw; */
margin-top: 0; }
#container #hero .row .workwear h1 span {
display: block;
clear: both;
font-size: 3.1vw;
line-height: 3.1vw; }
@media only screen and (max-height: 720px) and (min-width: 768px) {
#container #hero .row .workwear h1 {
font-size: 4.2vw; }
#container #hero .row .workwear h1 span {
font-size: 2.4vw;
line-height: 2.4vw; } }
#container #hero .row .workwear a.ghost-btn {
display: inline-block;
width: 40%;
margin: 20px 1%;
margin-top: 50px;
font-size: 1.8rem; }
@media only screen and (max-width: 1024px) {
#container #hero .row .workwear a.ghost-btn {
font-size: 1.2rem; } }
@media only screen and (max-height: 720px) and (min-width: 768px) {
#container #hero .row .workwear a.ghost-btn {
font-size: 1.2rem;
min-width: 30%;
width: auto;
margin: 10px 1%; } }
#container #hero .row .workwear div {
display: none;
visibility: hidden; }
@media only screen and (max-width: 768px) {
#container #hero .row .workwear {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
width: 100%;
height: 100%;
display: inline-block;
float: left;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
background: url("http://uniqlo.scene7.com/is/image/UNIQLO/m%2Dlkbk1?$jpg$") no-repeat center;
background-size: cover; }
#container #hero .row .workwear.women {
background: url("http://uniqlo.scene7.com/is/image/UNIQLO/w%2Dhero%2D1?$jpg$") no-repeat center;
background-size: cover; }
#container #hero .row .workwear > span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 500; }
#container #hero .row .workwear p {
display: block;
visibility: visible; }
#container #hero .row .workwear h1 {
font-size: 18vw;
margin-top: 0; }
#container #hero .row .workwear h1 > span {
font-size: 10.5vw;
line-height: 10.5vw; }
#container #hero .row .workwear div {
display: block;
visibility: visible; } }
#container #hero .row article {
position: relative;
width: 33.33%;
height: 100%;
float: left;
display: inline-block;
-webkit-transition: background 0.4s ease;
-o-transition: background 0.4s ease;
transition: background 0.4s ease;
cursor: pointer; }
#container #hero .row article.learn-more {
background: url("https://image.uniqlo.com/UQ/ST3/eu/imagesother/2020/featured-pages/comfort-smartwear/lkbk-4-main.jpg") no-repeat center;
background-size: cover; }
#container #hero .row article.learn-more.women {
background: url("../images/inp_3/style_3.jpg") no-repeat center;
background-size: cover; }
#container #hero .row article.inspire-me {
background: url("https://image.uniqlo.com/UQ/ST3/eu/imagesother/2020/featured-pages/comfort-smartwear/style_4.jpg") no-repeat center;
background-size: cover; }
#container #hero .row article.inspire-me.women {
background: url("../images/inp_1/style_1.jpg") no-repeat center;
background-size: cover; }
#container #hero .row article.view-range {
background: url("https://image.uniqlo.com/UQ/ST3/eu/imagesother/2020/featured-pages/comfort-smartwear/style_6.jpg") no-repeat center;
background-size: cover; }
#container #hero .row article.view-range.women {
background: url("../images/inp_2/style_2.jpg") no-repeat center;
background-size: cover; }
#container #hero .row article .btn {
font-size: 2.5rem;
position: absolute;
text-align: center;
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 100; }
@media only screen and (max-width: 1024px) {
#container #hero .row article .btn {
font-size: 1.8rem; } }
@media only screen and (max-width: 768px) {
#container #hero .row article .btn {
font-size: 3rem; } }
@media only screen and (max-width: 420px) {
#container #hero .row article .btn {
font-size: 1.8rem; } }
#container #hero .row article div {
width: 100%;
height: 100%;
background: #092e54;
opacity: 0.6;
-webkit-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease; }
#container #hero .row article:hover div {
opacity: 0.2; }
#container #hero .row article:hover .btn::after {
width: 75%; }
@media only screen and (max-width: 768px) {
#container #hero .row article {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
width: 100%;
display: inline-block;
float: left; }
#container #hero .row article div {
opacity: 0.6; }
#container #hero .row article:hover div {
opacity: 0.6; } }
#container #learn-more-window {
width: 100%;
min-height: 100vh;
position: relative;
display: none;
overflow-x: hidden; }
#container #inspire-me-window {
width: 100%;
min-height: 100vh;
position: relative;
display: none;
overflow-x: hidden; }
#container #view-range-window {
width: 100%;
margin: auto;
max-width: 1260px;
min-height: 100vh;
position: relative;
display: none;
overflow-x: hidden; }
#container #learn-more-window.active,
#container #inspire-me-window.active,
#container #view-range-window.active {
display: block; }
#container #learn-more-window nav,
#container #inspire-me-window nav,
#container #view-range-window nav {
text-align: center;
position: absolute;
left: 0;
right: 0;
z-index: 500;
top: 30px; }
#container #learn-more-window nav h4,
#container #inspire-me-window nav h4,
#container #view-range-window nav h4 {
display: inline-block;
margin: 20px;
font-size: 2rem;
max-width: calc(80% - 200px); }
#container #learn-more-window nav .back,
#container #inspire-me-window nav .back,
#container #view-range-window nav .back {
float: left;
display: inline-block;
margin: 10px 40px 10px 40px; }
#container #learn-more-window nav .close,
#container #inspire-me-window nav .close,
#container #view-range-window nav .close {
float: right;
display: inline-block;
margin: 10px 40px 10px 40px; }
#container #learn-more-window nav .condensed,
#container #learn-more-window nav .full,
#container #inspire-me-window nav .condensed,
#container #inspire-me-window nav .full,
#container #view-range-window nav .condensed,
#container #view-range-window nav .full {
float: right;
display: inline-block;
opacity: 0.6;
margin: 20px 20px 20px 0;
-webkit-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease; }
#container #learn-more-window nav .condensed.active,
#container #learn-more-window nav .full.active,
#container #inspire-me-window nav .condensed.active,
#container #inspire-me-window nav .full.active,
#container #view-range-window nav .condensed.active,
#container #view-range-window nav .full.active {
opacity: 0; }
@media only screen and (max-width: 1365px) {
#container #learn-more-window nav,
#container #inspire-me-window nav,
#container #view-range-window nav {
top: 30px; } }
@media only screen and (max-width: 960px) {
#container #learn-more-window nav,
#container #inspire-me-window nav,
#container #view-range-window nav {
top: 30px; }
#container #learn-more-window nav h4,
#container #inspire-me-window nav h4,
#container #view-range-window nav h4 {
font-size: 1.3rem;
max-width: calc(80% - 200px); }
#container #learn-more-window nav .back,
#container #learn-more-window nav .close,
#container #learn-more-window nav .condensed,
#container #learn-more-window nav .full,
#container #inspire-me-window nav .back,
#container #inspire-me-window nav .close,
#container #inspire-me-window nav .condensed,
#container #inspire-me-window nav .full,
#container #view-range-window nav .back,
#container #view-range-window nav .close,
#container #view-range-window nav .condensed,
#container #view-range-window nav .full {
max-height: 30px; }
#container #learn-more-window nav .condensed,
#container #learn-more-window nav .full,
#container #inspire-me-window nav .condensed,
#container #inspire-me-window nav .full,
#container #view-range-window nav .condensed,
#container #view-range-window nav .full {
margin: 10px 20px 10px 0; } }
@media only screen and (max-height: 800px) and (min-width: 640px) {
#container #learn-more-window nav h4,
#container #inspire-me-window nav h4,
#container #view-range-window nav h4 {
font-size: 1.1rem;
max-width: calc(80% - 120px);
margin: 30px 20px; }
#container #learn-more-window nav .back,
#container #learn-more-window nav .close,
#container #learn-more-window nav .condensed,
#container #learn-more-window nav .full,
#container #inspire-me-window nav .back,
#container #inspire-me-window nav .close,
#container #inspire-me-window nav .condensed,
#container #inspire-me-window nav .full,
#container #view-range-window nav .back,
#container #view-range-window nav .close,
#container #view-range-window nav .condensed,
#container #view-range-window nav .full {
max-height: 30px; }
#container #learn-more-window nav .back,
#container #inspire-me-window nav .back,
#container #view-range-window nav .back {
margin: 20px 10px 20px 20px; }
#container #learn-more-window nav .close,
#container #inspire-me-window nav .close,
#container #view-range-window nav .close {
margin: 20px 20px 20px 10px; }
#container #learn-more-window nav .condensed,
#container #learn-more-window nav .full,
#container #inspire-me-window nav .condensed,
#container #inspire-me-window nav .full,
#container #view-range-window nav .condensed,
#container #view-range-window nav .full {
margin: 20px 10px 20px 0; } }
@media only screen and (max-width: 767px) {
#container #learn-more-window nav,
#container #inspire-me-window nav,
#container #view-range-window nav {
top: 30px; } }
@media only screen and (max-width: 704px) {
#container #learn-more-window nav,
#container #inspire-me-window nav,
#container #view-range-window nav {
top: 30px; } }
@media only screen and (max-width: 640px) {
#container #learn-more-window nav h4,
#container #inspire-me-window nav h4,
#container #view-range-window nav h4 {
font-size: 1.1rem;
max-width: calc(80% - 120px);
margin: 30px 20px; }
#container #learn-more-window nav .back,
#container #inspire-me-window nav .back,
#container #view-range-window nav .back {
margin: 20px 10px 20px 20px; }
#container #learn-more-window nav .close,
#container #inspire-me-window nav .close,
#container #view-range-window nav .close {
margin: 20px 20px 20px 10px; }
#container #learn-more-window nav .condensed,
#container #learn-more-window nav .full,
#container #inspire-me-window nav .condensed,
#container #inspire-me-window nav .full,
#container #view-range-window nav .condensed,
#container #view-range-window nav .full {
margin: 20px 10px 20px 0;
display: none;
visibility: hidden; } }
@media only screen and (max-width: 420px) {
#container #learn-more-window nav h4,
#container #inspire-me-window nav h4,
#container #view-range-window nav h4 {
margin: 20px; }
#container #learn-more-window nav .back,
#container #learn-more-window nav .close,
#container #inspire-me-window nav .back,
#container #inspire-me-window nav .close,
#container #view-range-window nav .back,
#container #view-range-window nav .close {
max-height: 20px; }
#container #learn-more-window nav .condensed,
#container #learn-more-window nav .full,
#container #inspire-me-window nav .condensed,
#container #inspire-me-window nav .full,
#container #view-range-window nav .condensed,
#container #view-range-window nav .full {
max-height: 20px; } }
#container #learn-more-window .info,
#container #inspire-me-window .info,
#container #view-range-window .info {
display: none; }
#container #learn-more-window .info.active,
#container #inspire-me-window .info.active,
#container #view-range-window .info.active {
display: block;
width: 100%;
height: 100%; }
#container #learn-more-window .info .row,
#container #inspire-me-window .info .row,
#container #view-range-window .info .row {
max-width: 1040px;
padding: 150px 40px 40px 40px;
height: 100%; }
#container #learn-more-window .info .row > .ghost-btn,
#container #inspire-me-window .info .row > .ghost-btn,
#container #view-range-window .info .row > .ghost-btn {
display: table;
font-size: 1.8rem;
margin: 40px auto; }
@media only screen and (max-width: 520px) {
#container #learn-more-window .info .row,
#container #inspire-me-window .info .row,
#container #view-range-window .info .row {
padding: 100px 20px 20px 20px; } }
#container #learn-more-window .info .video-wrapper,
#container #inspire-me-window .info .video-wrapper,
#container #view-range-window .info .video-wrapper {
position: relative;
display: block;
width: 100%;
max-width: 640px;
margin: 0 auto; }
#container #learn-more-window .info h3,
#container #inspire-me-window .info h3,
#container #view-range-window .info h3 {
text-align: center; }
#container #learn-more-window .info .benefit,
#container #inspire-me-window .info .benefit,
#container #view-range-window .info .benefit {
display: block;
position: relative;
margin: 80px 0; }
#container #learn-more-window .info .benefit .copy,
#container #inspire-me-window .info .benefit .copy,
#container #view-range-window .info .benefit .copy {
float: right;
width: 57%;
position: absolute;
bottom: 10%;
right: 0;
z-index: 100;
padding: 20px;
background: #092e54; }
#container #learn-more-window .info .benefit .copy h3,
#container #inspire-me-window .info .benefit .copy h3,
#container #view-range-window .info .benefit .copy h3 {
font-size: 1.9rem;
margin-top: 0;
text-align: left; }
#container #learn-more-window .info .benefit .copy p,
#container #inspire-me-window .info .benefit .copy p,
#container #view-range-window .info .benefit .copy p {
margin: 1em 0;
line-height: 1.4em;
font-size: 0.9rem; }
#container #learn-more-window .info .benefit .copy a,
#container #inspire-me-window .info .benefit .copy a,
#container #view-range-window .info .benefit .copy a {
display: table;
font-size: 1.5rem; }
#container #learn-more-window .info .benefit img,
#container #inspire-me-window .info .benefit img,
#container #view-range-window .info .benefit img {
float: left;
width: 50%; }
#container #learn-more-window .info .benefit:nth-of-type(odd) .copy,
#container #inspire-me-window .info .benefit:nth-of-type(odd) .copy,
#container #view-range-window .info .benefit:nth-of-type(odd) .copy {
float: left;
bottom: auto;
top: 5%;
left: 0;
right: auto; }
#container #learn-more-window .info .benefit:nth-of-type(odd) img,
#container #inspire-me-window .info .benefit:nth-of-type(odd) img,
#container #view-range-window .info .benefit:nth-of-type(odd) img {
float: right; }
#container #learn-more-window .info .benefit.full-width .copy,
#container #inspire-me-window .info .benefit.full-width .copy,
#container #view-range-window .info .benefit.full-width .copy {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
width: 100%;
float: left;
margin-bottom: 20px; }
#container #learn-more-window .info .benefit.full-width img,
#container #inspire-me-window .info .benefit.full-width img,
#container #view-range-window .info .benefit.full-width img {
width: 100%; }
#container #learn-more-window .info .benefit.group.full-width{
display: flex;
flex-direction: column;
align-items: center;
}
@media only screen and (max-width: 768px) {
#container #learn-more-window .info .benefit .copy,
#container #inspire-me-window .info .benefit .copy,
#container #view-range-window .info .benefit .copy {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
width: 70%; }
#container #learn-more-window .info .benefit img,
#container #inspire-me-window .info .benefit img,
#container #view-range-window .info .benefit img {
width: 25%; } }
@media only screen and (max-width: 528px) {
#container #learn-more-window .info .benefit,
#container #inspire-me-window .info .benefit,
#container #view-range-window .info .benefit {
margin: 40px 0; }
#container #learn-more-window .info .benefit .copy,
#container #inspire-me-window .info .benefit .copy,
#container #view-range-window .info .benefit .copy {
width: 100%;
margin-bottom: 20px;
padding: 0;
background: none; }
#container #learn-more-window .info .benefit img,
#container #inspire-me-window .info .benefit img,
#container #view-range-window .info .benefit img {
width: 100%; } }
#container #inspire-me-window {
position: relative; }
#container #inspire-me-window nav {
width: 100%; }
#container #inspire-me-window #slider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 82px;
width: 100%;
display: block;
clear: both;
/*@media only screen and (max-width: 640px) {
top: 73px;
}
@media only screen and (max-width: 420px) {
top: 53px;
}*/ }
@media only screen and (max-width: 960px) {
#container #inspire-me-window #slider {
top: 108px; } }
@media only screen and (max-height: 800px) and (min-width: 640px) {
#container #inspire-me-window #slider {
top: 77px; } }
@media only screen and (max-width: 641px) {
#container #inspire-me-window #slider {
position: relative;
top: auto;
left: auto;
bottom: auto;
right: auto;
padding-top: 100px; } }
#container #inspire-me-window #slider .slick-prev,
#container #inspire-me-window #slider .slick-next {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 500;
background: #092e54;
padding: 20px; }
@media only screen and (max-width: 640px) {
#container #inspire-me-window #slider .slick-prev,
#container #inspire-me-window #slider .slick-next {
padding: 10px;
max-height: 40px; } }
#container #inspire-me-window #slider .slick-next {
right: 0;
left: auto; }
#container #inspire-me-window #slider .slick-list,
#container #inspire-me-window #slider .slick-track {
height: 100%; }
#container #inspire-me-window #slider .slider-item {
width: 33.3333333%;
height: 100%;
float: left;
display: inline-block;
position: relative; }
@media only screen and (max-width: 768px) {
#container #inspire-me-window #slider .slider-item {
width: 50%; } }
@media only screen and (max-width: 640px) {
#container #inspire-me-window #slider .slider-item {
overflow-y: scroll; } }
#container #inspire-me-window #slider .slider-item .overlay {
background: rgba(9, 46, 84, 0.8);
position: absolute;
top: 0;
left: -148px;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 999;
opacity: 0;
-webkit-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease; }
#container #inspire-me-window #slider .slider-item .overlay:hover {
opacity: 1; }
#container #inspire-me-window #slider .slider-item .overlay > div {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80%;
max-width: 420px; }
#container #inspire-me-window #slider .slider-item .overlay > div a {
display: block;
clear: both;
/* margin: 30px 0; */
/* margin-top: 22px; */
text-align: center; }
#container #inspire-me-window #slider .slider-item .overlay > div a img {
border-radius: 100%;
width: 30%;
margin-right: 10%;
vertical-align: middle; }
#container #inspire-me-window #slider .slider-item .overlay > div a span {
width: 60%;
display: inline-block;
vertical-align: middle;
text-align: left; }
#container #inspire-me-window #slider .slider-item .overlay > div a p {
margin-top: 10px; }
#container #inspire-me-window #slider .slider-item .overlay > div a h4 {
width: 100%;
padding: 0;
margin: 0;
position: relative;
line-height: 20px;
text-transform: capitalize;
/*&:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: block;
clear: both;
height: 5px;
width: 50%;
max-width: 60px;
background: #fff;
margin: 0 auto;
transition: all 0.4s ease;
}*/ }
#container #inspire-me-window #slider .slider-item .overlay > div a h4:hover:after {
width: 75%;
max-width: 80px; }
#container #inspire-me-window #slider .slider-item .overlay > div a h5 {
margin: auto;
margin-top: 10px; }
@media only screen and (max-width: 1365px) {
#container #inspire-me-window #slider .slider-item .overlay {
left: -198px; } }
@media only screen and (max-width: 960px) {
#container #inspire-me-window #slider .slider-item .overlay {
left: -144px; } }
@media only screen and (max-width: 640px) {
#container #inspire-me-window #slider .slider-item .overlay {
overflow-y: scroll; } }
#container #inspire-me-window #slider .slider-item > img {
width: auto;
height: 100%;
max-width: none;
max-height: none;
-webkit-transform: translateX(-25%);
-ms-transform: translateX(-25%);
transform: translateX(-25%); }
@media only screen and (max-width: 640px) {
#container #inspire-me-window #slider .slider-item {
width: 100%;
height: 100%;
text-align: center; }
#container #inspire-me-window #slider .slider-item > img {
display: inline-block;
width: auto;
height: auto;
max-width: none;
max-height: none;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
vertical-align: middle; }
#container #inspire-me-window #slider .slider-item .overlay {
position: relative;
width: 60%;
height: auto;
top: auto;
left: auto;
right: auto;
bottom: auto;
opacity: 1;
display: inline-block;
max-width: 420px;
vertical-align: middle;
margin-top: 20px; }
#container #inspire-me-window #slider .slider-item .overlay > div {
position: relative;
top: auto;
left: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
width: 100%;
text-align: center; }
#container #inspire-me-window #slider .slider-item .overlay > div a {
text-align: left; } }
@media only screen and (max-width: 420px) {
#container #inspire-me-window #slider .slider-item .overlay {
width: 80%; } }
#container #inspire-me-window #slider.full-view .slider-item {
width: 100%;
height: 100%;
text-align: center;
padding-top: 40px;
padding-bottom: 40px; }
#container #inspire-me-window #slider.full-view .slider-item > img {
display: inline-block;
width: auto;
height: 100%;
max-width: none;
max-height: none;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
vertical-align: middle; }
@media only screen and (max-width: 1365px) {
#container #inspire-me-window #slider.full-view .slider-item > img {
width: 50%;
height: auto; } }
@media only screen and (max-width: 768px) {
#container #inspire-me-window #slider.full-view .slider-item > img {
width: 70%;
height: auto; } }
@media only screen and (max-width: 640px) {
#container #inspire-me-window #slider.full-view .slider-item > img {
width: 90%;
height: auto; } }
#container #inspire-me-window #slider.full-view .slider-item .overlay {
position: relative;
width: 40%;
height: auto;
top: auto;
left: auto;
right: auto;
bottom: auto;
opacity: 1;
display: inline-block;
max-width: 420px;
vertical-align: middle;
margin-left: 60px; }
#container #inspire-me-window #slider.full-view .slider-item .overlay > div {
position: relative;
top: auto;
left: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
width: 100%; }
#container #inspire-me-window #slider.full-view .slider-item .overlay > div a {
text-align: left; }
@media only screen and (max-width: 640px) {
#container #inspire-me-window #slider.full-view .slider-item {
width: 100%;
height: 100%;
text-align: center; }
#container #inspire-me-window #slider.full-view .slider-item > img {
display: inline-block;
width: 80%;
height: auto;
max-width: none;
max-height: none;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
vertical-align: middle; }
#container #inspire-me-window #slider.full-view .slider-item .overlay {
position: relative;
width: 60%;
height: auto;
top: auto;
left: auto;
right: auto;
bottom: auto;
opacity: 1;
display: inline-block;
max-width: 420px;
vertical-align: middle;
margin-top: 20px; }
#container #inspire-me-window #slider.full-view .slider-item .overlay > div {
position: relative;
top: auto;
left: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
width: 100%;
text-align: center; }
#container #inspire-me-window #slider.full-view .slider-item .overlay > div a {
text-align: left; } }
@media only screen and (max-width: 420px) {
#container #inspire-me-window #slider.full-view .slider-item .overlay {
width: 80%; } }
#container #view-range-window .info .product-details {
display: block;
clear: both;
margin-bottom: 40px; }
#container #view-range-window .info .product-details .product-info {
width: 70%;
float: left; }
#container #view-range-window .info .product-details .product-info img {
float: left;
max-width: 175px;
margin-right: 40px; }
#container #view-range-window .info .product-details .product-info h1 {
font-size: 2rem;
margin: 5px 0; }
#container #view-range-window .info .product-details .product-info h4 {
margin: 5px 0; }
#container #view-range-window .info .product-details .product-info .colours {
display: table;
clear: right;
margin: 5px 0; }
#container #view-range-window .info .product-details .product-info .colours img {
margin: 2px;
float: left;
width: 35px;
border-radius: 100%; }
#container #view-range-window .info .product-details .product-info .stars {
margin: 5px 0;
clear: right; }
#container #view-range-window .info .product-details .product-info .stars img {
float: left;
margin: 2px; }
#container #view-range-window .info .product-details .product-info .stars p {
margin: 0;
padding: 2px 5px; }
#container #view-range-window .info .product-details .shop {
text-align: center;
width: 25%;
float: right; }
#container #view-range-window .info .product-details .shop a {
display: table;
margin: auto;
margin-top: 30px;
font-size: 1.5rem;
background: #fff;
color: #092e54; }
#container #view-range-window .info .product-details .shop a:hover {
background: #092e54;
color: #fff; }
#container #view-range-window .info .product-copy {
display: block;
clear: both;
margin: 40px 0; }
#container #view-range-window .info .product-copy .copy {
width: 70%;
float: left; }
#container #view-range-window .info .product-copy .function-icons {
width: 25%;
float: right;
text-align: center; }
#container #view-range-window .info .product-copy .function-icons img {
display: inline-block;
float: none;
margin: 5px 10px;
width: 30%; }
#container #view-range-window .info .looks {
display: block;
clear: both;
margin: 40px 0;
text-align: left; }
#container #view-range-window .info .looks > div {
display: inline-block;
width: 30%;
vertical-align: top;
margin: 1.66666%;
padding: 10px; }
#container #view-range-window .info .looks > div.suit-1 {
float: left;
padding: 0px;
margin: auto; }
#container #view-range-window .info .looks > div.suit-2 {
display: none; }
#container #view-range-window .info .looks > div.suititem {
width: 50%;
margin: 2% 5%; }
#container #view-range-window .info .looks > div.suititem img {
width: 40%;
border-radius: 100px;
vertical-align: top; }
#container #view-range-window .info .looks > div.suititem .suitinfo {
display: inline-block;
width: 50%;
padding: 10px;
margin-left: 20px; }
#container #view-range-window .info .looks > div.suititem .suitinfo h3 {
text-align: left;
margin-top: 0px; }
#container #view-range-window .info .looks > div p {
margin: 20p auto;
text-align: left;
height: 30px; }
#container #view-range-window .info .looks > div p.price {
text-align: right;
width: 100%;
margin: auto;
font-weight: bold; }
#container #view-range-window .info .looks > div p.price.sale {
color: #FF0000; }
#container #view-range-window .info .looks > div p.originalprice {
text-align: right;
width: 100%;
margin: auto;
text-decoration: line-through; }
@media only screen and (max-width: 768px) {
#container #view-range-window .info .product-details .product-info img {
max-width: 130px;
margin-right: 20px; }
#container #view-range-window .info .product-details .product-info h1 {
font-size: 1.5rem; }
#container #view-range-window .info .product-details .product-info h4 {
font-size: 1.2rem; }
#container #view-range-window .info .product-details .product-info .colours img {
width: 20px; } }
@media only screen and (max-width: 560px) {
#container #view-range-window .info .product-details .product-info {
width: 100%;
margin-bottom: 10%; }
#container #view-range-window .info .product-details .product-info img {
max-width: 150px; }
#container #view-range-window .info .product-details .product-info h1 {
font-size: 1.3rem; }
#container #view-range-window .info .product-details .product-info h4 {
font-size: 1rem; }
#container #view-range-window .info .product-details .shop {
display: block;
clear: both;
width: auto;
text-align: center; }
#container #view-range-window .info .product-details .shop h3 {
margin-top: 0;
font-size: 1.3rem;
display: inline-block; }
#container #view-range-window .info .product-details .shop a {
font-size: 1.2rem;
margin: 20px;
display: inline-block; }
#container #view-range-window .info .product-copy {
margin: 20px 0; }
#container #view-range-window .info .product-copy .copy {
display: block;
clear: both;
width: 100%; }
#container #view-range-window .info .product-copy .function-icons {
width: 100%;
margin-top: 20px; }
#container #view-range-window .info .product-copy .function-icons img {
max-width: 40px; }
#container #view-range-window .info .looks > div {
display: inline-block;
float: left;
width: 46%;
margin: 1.66666%; }
#container #view-range-window .info .looks > div.suit-1 {
display: inline-block;
width: 50%; }
#container #view-range-window .info .looks > div.suit-2 {
display: inline-block;
padding: 0px;
margin: 0px;
width: 50%; }
#container #view-range-window .info .looks > div.suititem {
width: 100%;
margin: auto;
margin-top: 40px; }
#container #view-range-window .info .looks > div.suititem img {
width: 40%;
border-radius: 100px; }
#container #view-range-window .info .looks > div.suititem .suitinfo {
width: 50%; }
#container #view-range-window .info .looks > div.suititem .suitinfo h3 {
text-align: left;
margin-top: 0px; } }
@media only screen and (max-width: 420px) {
#container #view-range-window .info .product-details .product-info {
width: 100%; }
#container #view-range-window .info .product-details .product-info img {
max-width: 100px; }
#container #view-range-window .info .product-details .product-info h1 {
font-size: 1.15rem; }
#container #view-range-window .info .product-details .product-info .colours img {
width: 12px; }
#container #view-range-window .info .product-details .product-info .stars img {
max-height: 12px; }
#container #view-range-window .info .product-details .product-info .stars p {
margin: 0;
padding: 2px 5px; }
#container #view-range-window .info .product-details .shop {
display: block;
clear: both;
width: auto;
text-align: center; }
#container #view-range-window .info .product-details .shop h3 {
margin-top: 0;
font-size: 1.3rem;
display: inline-block; }
#container #view-range-window .info .product-details .shop a {
font-size: 1.2rem;
margin: 10px;
display: inline-block; }
#container #view-range-window .info .product-copy {
margin: 20px 0; }
#container #view-range-window .info .product-copy .copy {
display: block;
clear: both;
width: 100%; }
#container #view-range-window .info .product-copy .function-icons {
width: 100%;
margin-top: 20px; }
#container #view-range-window .info .product-copy .function-icons img {
max-width: 40px; } }
/* MEDIA QUERIES */
@media only screen and (max-width: 1220px) {
:root {
font-size: 14px; } }
@media only screen and (max-width: 780px) {
.uniqloheader,
.uniqlofooter {
display: none;
visibility: hidden; } }
@media only screen and (max-width: 640px) {
:root {
font-size: 12px; } }