#four-elements img {
margin-top: 0;
}
#four-elements {
margin: 0 auto;
max-width: 2000px;
}
#four-elements .column {
float: left;
width: 50%;
}
#four-elements .row {
margin: 0;
}
#four-elements .row:after {
content: "";
display: table;
clear: both;
}
#four-elements .std p {
letter-spacing: .02em;
text-align: justify;
font-family: Campton, Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 2.2rem!important;
}
#four-elements .container_title {
background: url("//ds-assets.s3-ap-northeast-1.amazonaws.com/repetto/2018/sp/four-elements/background.jpg");
padding-top: 4rem;
padding-bottom: 2.5rem;
}

#four-elements .container_title #actionScrollTo img {
cursor: pointer;
background: #f0e1de;
border-radius: 100%;
padding: 20px;
}
#four-elements .container_title .title {
font-size: 2.9rem;
text-align: center;
font-family: Georgia, Times, "Times New Roman", serif;
text-transform: uppercase;
}
@media all and (max-width: 1024px) {
#four-elements .container_title .title {
font-size: 2.5rem;
}
}
@media all and (max-width: 768px) {
#four-elements .container_title .title {
font-size: 1.65rem;
}
}
#four-elements .container_title .subtitle {
font-size:2.1rem;
line-height: 2.1em;
font-style: italic;
text-align: center;
font-family: Georgia, Times, "Times New Roman", serif;
}
@media all and (max-width: 768px) {
#four-elements .container_title .subtitle {
font-size: 1.8rem;
}
}
#four-elements .container_title .subtitle + p {
width: 50%;
font-size: 13px;
}
@media all and (max-width: 768px) {
#four-elements .container_title .subtitle + p {
width: 90%;
}
}
#four-elements .container_title p {
width: 50%;
margin: 0 auto;
text-align: center;
margin-top: 2.5%;
margin-bottom: 2.5%;
line-height: 2.2rem !important;
}
@media all and (max-width: 1200px) {
#four-elements .container_title .subtitle + p {
width: 80%;
}
}
@media all and (max-width: 768px) {
#four-elements .container_title p {
font-size: 12px;
line-height: 1.5rem !important;
width: 100%;
text-align: justify;
}
}
#four-elements .container_title img {
display: block;
margin: 0 auto;
}
#four-elements figure {
width: 100%;
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: top;
margin: 0;
}
#four-elements figcaption {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
font-weight: bold;
width: 100%;
height: 100vh;
display: table;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#four-elements figcaption div {
display: table-cell;
vertical-align: middle;
position: relative;
top: 20px;
opacity: 0;
color: #f0e1de;
text-transform: uppercase;
font-size: 5rem;

}
@media all and (max-width: 1024px) {
#four-elements figcaption div {
font-size: 2.5rem;
}
}
#four-elements figure img {
width: 100%;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: scale3d(1.009, 1.009, 1.009);
transform: scale3d(1.009, 1.009, 1.009);
}
#four-elements figure:hover figcaption {
cursor: pointer;
-webkit-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
background: rgba(0, 0, 0, 0.8);
}
#four-elements figcaption:hover div {
opacity: 1;
top: 0;
}
#four-elements figcaption:hover div:after {
width: 50%;
}
#four-elements figure:hover img {
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
#four-elements .large_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#four-elements .large_container img {
width: 100%;
display: none;
}
#four-elements .large_container img:first-child {
display: inline-block;
}
#four-elements .large_container [data-position] {
display: inline-block;
}
#four-elements .large_container .selectors {
text-align: center;
}
#four-elements .large_container .selectors .selector {
font-size: 1rem;
color: #f0e0dd;
text-decoration: none;
line-height: 0;
}
#four-elements .large_container .selectors .selector img {
width: 30px;
}
#four-elements .large_container .selectors .selector.active {
color: black;
}
@media all and (max-width: 768px) {
#four-elements .large_container .selectors {
margin-top: 1rem;
}
}
#four-elements .large_container#target-fire .large_frame .text_hover {
height: 99%;
}
@media all and (min-width: 1240px) {
#four-elements .large_container#target-fire .large_frame .text_hover {
height: 99.5%;
}
}
#four-elements .large_container .large_frame {
display: inline-block;
margin-bottom: -6px;
position: relative;
}
#four-elements .large_container .large_frame .product-description {
display: none;
}
#four-elements .large_container .large_frame .text_hover {
position: absolute;
top: 0;
bottom: 0;
width: 300px;
background-color: #fff;
padding-top: 1.5%;
padding-left: 1.5%;
padding-right: 1.5%;
font-size: 1rem;
}
@media all and (max-width: 768px) {
#four-elements .large_container .large_frame .text_hover p {
font-size: 12px;
}
}
#four-elements .large_container .large_frame .text_hover .target-description a {
color: black;
font-size: 14px;
}
#four-elements .large_container .large_frame .text_hover .target-description a.button {
height: 34px;
background-color: #f0e1de;
border-radius: 5px;
}
#four-elements .large_container .large_frame .text_hover .target-description a.button:hover {
background-color: #ffd6d6;
}
@media all and (max-width: 768px) {
#four-elements .large_container .large_frame .text_hover .target-description a.button {
height: 30px;
}
}
#four-elements .large_container .large_frame .text_hover ul li,
#four-elements .large_container .large_frame .text_hover .target-description p {
font-size: 14px;
line-height: 20px;
}
#four-elements .large_container .large_frame .text_hover .target-description p {
font-size: 14px;
font-style: italic;
line-height: 20px;
}
@media all and (max-width: 768px) {
#four-elements .large_container .large_frame .text_hover .target-description {
margin-left: 15px;
margin-right: 15px;
}
#four-elements .large_container .large_frame .text_hover .target-description a {
margin-bottom: 1rem;
}
#four-elements .large_container .large_frame .text_hover .target-description p {
text-align: justify;
/*line-height: 1.5rem !important;*/
margin: 0;
margin-bottom: 0.5rem;
}
}
#four-elements .large_container .large_frame .text_hover .element_title {
font-size: 3rem;
line-height: 1em;
margin: 15px 0 30px;
}
@media all and (max-width: 768px) {
#four-elements .large_container .large_frame .text_hover .element_title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
}
#four-elements .large_container .large_frame .text_hover .element_title .select_next,
#four-elements .large_container .large_frame .text_hover .element_title .select_prev {
cursor: pointer;
height: 15px;
width: 10px;
padding-bottom: 4px;
display: none;
}
@media all and (max-width: 768px) {
#four-elements .large_container .large_frame .text_hover .element_title .select_next,
#four-elements .large_container .large_frame .text_hover .element_title .select_prev {
display: inline !important;
}
}
#four-elements .large_container .large_frame .text_hover .element_title .select_next {
margin-left: 10px;
}
#four-elements .large_container .large_frame .text_hover .element_title .select_prev {
margin-right: 10px;
}
@media all and (max-width: 768px) {
#four-elements .large_container .large_frame .text_hover .element_title {
text-align: center;
}
}
#four-elements .large_container .large_frame .text_hover.left {
left: 5%;
}
#four-elements .large_container .large_frame .text_hover.right {
right: 5%;
}
#four-elements .large_container .large_frame .text_hover ul {
padding-left: 0;
margin: 0;
margin-bottom: 25px;
}
#four-elements .large_container .large_frame .text_hover ul li {
text-transform: uppercase;
font-weight: bold;
list-style-type: none;
}
#four-elements .large_container .large_frame .text_hover ul li a {
color: grey;
text-decoration: none;
}
#four-elements .large_container .large_frame .text_hover ul li a:hover, #four-elements .large_container .large_frame .text_hover ul li a.active {
font-weight: bold;
font-family: 'Campton ExtraBold', sans-serif;
outline: 0;
color: black;
}
@media all and (max-width: 1024px) {
#four-elements .large_container .large_frame .text_hover ul li {
margin-bottom: 5px;
}
}
@media all and (max-width: 1024px) {
#four-elements .large_container .large_frame .text_hover {
font-size: 0.8rem;
}
}
@media all and (max-width: 768px) {
#four-elements .large_container .large_frame .text_hover {
padding: 0;
position: static;
width: 100%;
}
}
@media all and (max-width: 480px) {
#four-elements .large_container .large_frame .text_hover {
top: 0;
bottom: 0;
width: 100%;
background-color: #fff;
}
}
#four-elements .large_container.footer_four_elements {
background: url("//ds-assets.s3-ap-northeast-1.amazonaws.com/repetto/2018/sp/four-elements/four-elements-footer.jpg") no-repeat top center;
height: 450px;
}
#four-elements .large_container.footer_four_elements .footer-text {
position: relative;
top: 50%;
padding-top: 0;
text-align: justify;
width: 477px;
margin: 0 auto;
color: white;
line-height: 35px;
}
@media all and (max-width: 768px) {
#four-elements .large_container.footer_four_elements .footer-text {
width: 90%;
line-height: 1.5rem !important;
}
}
#four-elements .large_container.footer_four_elements .footer-text .footer-button {
background: #f0e1de;
text-decoration: none;
color: black;
margin: 0 auto;
width: 250px;
display: block;
text-align: center;
border-radius: 5px;
}
@media all and (max-width: 768px) {
#four-elements .large_container.footer_four_elements .footer-text .footer-button {
margin-top: 10px;
}
}
@media all and (max-width: 768px) {
#four-elements .large_container.footer_four_elements {
background-size: 100%;
height: 170px;
}
}
#four-elements .hide-on-desktop {
display: none;
}
#four-elements .newline_on_mobile {
display: none;
}
@media all and (max-width: 1280px) {
#four-elements .column {
width: 50%;
}
#four-elements figure img {
width: 100%;
}
}
@media all and (max-width: 768px) {
#four-elements .hide-on-desktop {
display: block;
}
#four-elements .hide-on-mobile {
display: none;
}
#four-elements .newline_on_mobile {
display: inline;
}
}