﻿.hidden { display:none; }
.white {color:white !important;}
.vCenter {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#main_cat { width: 100%; position:relative;}
#main_cat .vis { width: 67%; margin-right:33%; }
#main_cat .vis > img { width: 100%;}

#main_cat .cat { 
    width:40%;
    height:100%;
    position:absolute;
    right:0;
    display:flex;
    flex-direction:column;
}
#main_cat .cat > a { 
    color:white;
    margin-left:17.5%;
    padding:1em;
    font-size:180%;
    height:100%;
    position:relative;
    -webkit-transition: margin 0.4s; /* Safari */
    transition: margin 0.4s;
}
#main_cat .cat > a.hover { margin-left:0; }
#main_cat .cat_book { background-color:#e52530; }
#main_cat .cat_calendar { background-color:#c61e29; }
#main_cat .cat_canvas { background-color:#b51b25; }
#main_cat .cat_gift { background-color:#a2181f; }
#main_cat .cat > a > span > img { vertical-align:middle; margin-left:1.3em; }

.cat_video { 
    width:100%;
    object-fit:cover;
    height:33.6vw;
}

#main_cat .CTA-block {
    position:absolute;
    top:15%;
    right:43%;
    font-size:160%;
}
#main_cat .CTA-block .header {
    font-size: 140%;
    color:#e52530;
}
#main_cat .CTA-block .pica_btn { font-size:initial; }

#promo_line {
    background-color:#d0d0d0;
    width:100%;
    text-align:center;
}
#promo_line > div { 
    font-size:160%;
    display:inline-block;
    padding: 0.3em 10%;
    font-style:italic;
}
#promo_line img { vertical-align:middle; }
#promo_line img.wide { width:100%; }
#promo_line .pica_btn, .samples .pica_btn { font-size:initial; font-style:initial; }
/*------------------*/
.heart { width:44px; height:40px; display:inline-block; }
.heart > img { width:100%; vertical-align:middle;}
.gray_block { background-color:#f5f5f5; width:100%; margin:2em 0;}
.gray_back { background-color:#f5f5f5; }
.section_header { 
    width:80%;
    padding: 2em 10% 1em 10%;
    font-size:160%;
    font-weight:bold;
}
.section_header .heart { width:25px; image-rendering: -webkit-optimize-contrast; }
/*------------------*/
.samples {width:100%; display:flex;}
.sample_case {
    text-align:center;
    font-size:130%;
    line-height:2em;
    font-weight:bold;
    display:inline-block;
    width:25%;
    position:relative;
    overflow:hidden;
}
.red_border .sample_case { border-left: 3px solid #e52530;}
.sample_case img {
    width:100%;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.sample_case:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
/*------------------*/
#Advantages {
    display:flex;
    width:80%;
    padding:0 10% 2em 10%;
    justify-content: space-between;
}
#Advantages > div { text-align:center; line-height:1.5em; }
#Advantages span { color:#e52530; font-size:130%; font-weight:bold;}
/*------------------*/
#Discounts {
    display:flex;
    width:100%;
    padding:0;
}
#Discounts > div { width: 50%; overflow:hidden; border-left: 3px solid #e52530;}
#Discounts > div > .content { 
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position:relative;
}
#Discounts .content > img { width:100%;}
#Discounts > div:hover .content {
    -moz-transform: scale(1.08);
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}
#Discounts .CTA-block {
    position:absolute;
    top:6%;
    right:30%;
    font-size:150%;
}
#Discounts .CTA-block .header { font-size: 175%; color:#e52530;}
#Discounts .CTA-block .pica_btn { font-size:initial; }
/*------------------*/
#FAQ {
    width:80%;
    padding: 0 10% 2em 10%;
    display: flex;
    justify-content: space-between;}
.FAQ_col { 
    width: 45%;
    display:inline-block;
    vertical-align:text-top;
}
.FAQ_col > div { padding:1em 0;}
.FAQ_col > div:not(:last-child) { border-bottom: 1px solid #cfd1d2; }
#FAQ .Ans { display:none; padding: 1em 30px 0 0; }
#FAQ .Ques { font-size:140%; cursor:pointer; }
.FAQ_btn {
    width:19px;
    height:19px;
    display:inline-block;
    margin-left:11px;
}
.FAQ_btn > img {position:absolute;}
.FAQ_btn > img.minus {opacity:0;}

.FAQ_btn.expand > img.plus { -webkit-animation: expand_p 1s 1 forwards; animation: expand_p 1s 1 forwards;}
@-webkit-keyframes expand_p { 100% { -webkit-transform: rotate(-360deg); opacity:0; }}
@keyframes expand_p { 100% { transform:rotate(-360deg); opacity:0; }}

.FAQ_btn.expand > img.minus { -webkit-animation: expand_m 1s 1 forwards; animation: expand_m 1s 1 forwards;}
@-webkit-keyframes expand_m { 100% { -webkit-transform: rotate(-360deg); opacity:1; }}
@keyframes expand_m { 100% { transform:rotate(-360deg); opacity:1; }}

.FAQ_btn.collapse > img.plus { -webkit-animation: collapse_p 1s 1 ; animation: collapse_p 1s 1 ;}
@-webkit-keyframes collapse_p { 0% { opacity:0; } 100% { -webkit-transform: rotate(360deg); opacity:1; }}
@keyframes collapse_p { 0% { opacity:0; } 100% { transform:rotate(360deg); opacity:1; }}

.FAQ_btn.collapse > img.minus { -webkit-animation: collapse_m 1s 1 ; animation: collapse_m 1s 1 ;}
@-webkit-keyframes collapse_m { 0% { opacity:1; } 100% { -webkit-transform: rotate(360deg); opacity:0; }}
@keyframes collapse_m { 0% { opacity:1; } 100% { transform:rotate(360deg); opacity:0; }}
/*------------------*/
#testimonials { width: 100%;}
.shipping_info, #footer2 {margin:0 !important;}
#testimonials .personal {background-color:#e6e6e6; height:25em;}
#testimonials .facebook {width: 33%; height:25em; float:left; text-align:center; }
.testi-icon {font-size:200%; font-weight:bold; color:#e52530;}

.swiper-nav {width:67%;}
.swiper-container-rtl {
    width:70%;
    margin:auto;
    position:relative;
}
.swiper-button-red {top:6em !important;}
.swiper-container {
    height: 15em;
    width: 40%;
    margin: 2em auto;
    z-index:-2;
}
.swiper-slide {
    width:100%;
    height: 100%;
    text-align:center;
}
.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background: white !important;
    opacity: 1 !important;
}
.swiper-pagination-bullet-active {
    background: #e52530 !important;
}
/*--------------*/
#nav_down {
    position:fixed;
    left:44px;
    bottom:27px;
    display:inline-block;
    z-index:100;
    font-size:40px;
    width:50px;
    mix-blend-mode: multiply;
    color:#a0a0a0;
    cursor:pointer;
}
@media only screen and (max-width: 1600px) {
    #main_cat .cat > a > span > img { margin-left:0.3em; }
    #main_cat, #express, .samples, #Discounts, #FAQ, #testimonials { font-size:90%;}
}
@media only screen and (max-width: 1400px) {
 /* For small or portrait: */
    #main_cat, #express, .samples, #Discounts, #FAQ, #testimonials { font-size:87%;}
    .cat img {width:100px; image-rendering: -webkit-optimize-contrast;}
    .heart { width:38px; image-rendering: -webkit-optimize-contrast; }
    .section_header { font-size:140%; }
    .section_header .heart { width:22px; image-rendering: -webkit-optimize-contrast; }
    #Advantages img { height: 140px; image-rendering: -webkit-optimize-contrast; }
}
@media only screen and (max-width: 1150px) {
 /* For small or portrait: */
    #main_cat, #express, .samples, #Discounts, #FAQ, #testimonials { font-size:75%;}
    .cat img {width:80px; image-rendering: -webkit-optimize-contrast;}
    .heart { width:30px; image-rendering: -webkit-optimize-contrast; }
    .section_header { font-size:120%; }
    .section_header .heart { width:19px; image-rendering: -webkit-optimize-contrast; }
    #main_cat .cat > a > span > img { margin-left:1em; }
}

/*--------------*/
.beatme { -webkit-animation: heartbeat 1.5s 1 ; animation: heartbeat 1.5s 1 ;}
@keyframes heartbeat {
  0% { transform: scale(1); }
  30% { transform: scale(.75); }
  60% { transform: scale(1); }
  80% { transform: scale(.75); }
  100% { transform: scale(1); }
}
