html,body {
width: 100%;
height: 100%;
z-index:0;
margin:0px;
padding:0px;
}
.container {
width:1190px;
max-width:100%;
margin-left:auto;
margin-right:auto;
}
.logo-bg {
position:absolute;
width:100%;
top:8%;
transition: 0.5s all;
}
.logo {
position:relative;
z-index:2;
width:28%;
max-width:100%;
transition: 0.5s all;
margin-left:-8px;
display: table-cell;
vertical-align: middle;
}
.menu {
position:relative;
z-index:3;
margin-top:70%;
padding:0px;
margin:0px;
text-align:center;
transition: 0.5s all;
}
a {
color:#fff;
text-decoration:none;
transition: 0.5s all
}
a:hover {
color:#b31c27;
text-decoration:none;
}
.menu li {
text-decoration:none;
list-style:none;
color:#fff;
display:inline-block;
padding:20px;
margin:0px;
font-size:12px;
font-family:'raleway-light';
text-transform:uppercase;
transition:0.5s all;
}
.menu li:hover {
color:#b31c27;
}
.menu ul {
min-width:150px;
margin:10px 0px 0px -15px;
padding:0px;
position:absolute;
}
.menu ul li{
display:none;
margin:0px;
padding:10px;
background:rgba(0,0,0,0.8);
text-align:left;
text-shadow:none;
}
.menu li:hover > ul li {
display:block;
}
#a {
cursor:pointer
}
.nav-menu {
position:absolute;
width:100%;
top:75%;
transition: 0.5s all;
}
.nav-menu p{
position:relative;
z-index:2;
margin-top:70%;
padding:0px;
margin:0px;
text-align:center;
color:#fff;
font-size:50px;
transition: 0.5s all;
}
/*Fonts*/
@font-face {
font-family: 'MyriadPro-Regular';
src: url('fonts/MyriadPro-Regular.otf');
}
@font-face {
font-family: 'canella';
src: url('fonts/canella.ttf');
}
@font-face {
font-family:'Helvetica';
src: url('fonts/Helvetica.ttf');
}
@font-face {
font-family:'raleway-bold';
src: url('fonts/raleway-bold.ttf');
}
@font-face {
font-family:'raleway-light';
src: url('fonts/raleway-light.ttf');
}
/*Slider*/
#slideshow {
margin: 80px auto;
position: relative;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#slideshow > .sld {
position: absolute;
z-index:1;
}
.content {
padding:5% 20px 18% 20px;
}
.product {
display:inline-block;
width:280;
max-width:100%;
margin:10px 40px 10px 40px;
}
.product2 {
max-width:100%;
width:280px;
padding:0px;
margin:0px 0px 0px 0px;
background:#eee;
overflow:hidden;
box-shadow:1px 1px 5px #000;
}
.product2 img{
width:100%;
padding:0px;
margin:0px;
}
.product h3{
font-family: 'raleway-bold';
text-align:center;
text-transform:uppercase;
}
.product p{
text-align:center;
text-overflow:ellipsis;
height:110px;
overflow:hidden;
font-size:16px;
}
.store{
width:250;
display:inline-block;
margin:20px 25px 20px 25px;
padding:0px;
}
.store div{
width:100%;
height:250px;
overflow:hidden;
box-shadow:1px 1px 5px #000;
transition: all 0.5s;
border:3px solid #fff;
margin:0px;
padding:0px;
}
.store img {
height:100%;
position:relative;
left: 50% !important;
transform: translate(-50%,0);
transition: all 0.5s;
}
.store p{
text-align:justify;
text-overflow:ellipsis;
height:140px;
overflow:hidden;
font-size:14px;
color:#333;
}
.store h3 {
font-size:18px;
}
#testimonials {
height:auto;
}
.testimonials {
width:100%;
padding:0px;
margin:20px 0px 0px 0px;
}
.name {
text-transform:uppercase;
color:#b31c27;
font-family:'Helvetica';
font-weight:bold;
padding:0px;
margin:0px;
font-size:18px;
}
.person {
border:1px solid #eee;
width:330px;
max-width:100%;
display:inline-block;
background:rgba(255,255,255,0.7);
padding:20px 20px 20px 20px;
margin:0px 40px 0px 40px;
cursor:pointer;
}
.person div {
width:100px;
height:100px;
overflow:hidden;
border-radius:50%;
margin:0px;
}
.testimonials i {
display:inline-block;
margin:0px;
color:#b31c27;
font-size:20px;
}
.testimonials p{
padding:0px;
margin:0px;
}
.see-menu {
border:none;
padding:10px;
background:#b31c27;
color:#fff;
width:100px;
font-size:12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.see-menu:hover{
transition:0.5s all;
background:#fff;
color:#b31c27;
}
#contact {
color:#000;
width:100%;
height:auto;
background:#fff;
height:auto;
z-index:2;
position:relative;
}
.footer {
display:inline-block;
width:60%;
float:left;
}
.footer ul{
list-style:none;
padding:0px;
margin:0px;
}
.footer ul li {
list-style:none;
padding:0px;
margin:0px;
color:#000;
font-family:'raleway-light';
}
.footer div {
display:inline-block;
float:left;
margin:-8px 70px 0px 0px;
color:#000;
}
.footer p {
font-family:'raleway-bold';
}
.a:hover {
color:#b31c27;
}
.footer2{
width:100%;
background:#fff;
border-top:2px solid #b31c27;
font-size:'Helvetica';
margin:0px;
padding:0px;
}
.footer2 .container p{
display:inline-block;
float:right;
padding:0px 10px 0px 10px;
color:#000;
}
.footer2 .container a{
display:inline-block;
color:#000;
margin:0px;
padding:0px;
}
.footer2 .container a p:hover{
color:#b31c27;
}
.H-img{
width:55%;
max-width:100%;
display:inline-block;
padding:0px 0px 0px 0px;
margin:0px;
height:400px;
overflow:hidden;
}
.H-paragraph {
width:45%;
max-width:100%;
display:inline-block;
float:left;
text-align:justify;
padding:0px 50px 0px 0px;
}
/*Back to top*/
#back-to-top {
position: fixed;
bottom: 40px;
right: 40px;
z-index: 9999;
width: 50px;
height: 50px;
text-align: center;
line-height: 30px;
background: #ddd;
color: #444;
cursor: pointer;
border: 0;
text-decoration: none;
transition: 0.5s all;
opacity: 0;
padding:18px 10px 10px 10px;
border-radius:50%;
}
#back-to-top:hover {
background:#b31c27;
color:#fff;
}
#back-to-top.show {
opacity: 1;
}
/*Scrolling*/
.logo-scroll{
position:fixed;
padding:0px;
margin:0px;
width:100%;
z-index:8;
background:#000;
height:60px;
transition: 0.5s all;
border-bottom:2px solid #b31c27;
}
.logo-scroll-img {
width:100px;
z-index:8;
transition: 0.5s all;
cursor:pointer;
}
.nav-scrolling {
width:100%;height:auto;position:fixed;z-index:8;
}
.menu-scrolling {
margin-left:100px;
}
.li-logo {
width:160px;
margin:0px 0px 0px 0px;
}
.menu .none {
display:none;
}
.none {
display:none;
}
.social p{
display:inline-block;
float:right;
padding:10px 10px 10px 12px;
background:#fff;
border-radius:50%;
height:39px;
width:39px;
margin:-10px 0px 0px 10px;
transition:all 0.3s;
}
.social p i {
color:#333;
font-size:20px;
}
.social p:hover {
background:#b31c27;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #d40909;
width: 239px;
height: 239px;
top: 0;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position: absolute;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#wrapper {
position: fixed;
z-index:99;
background:#fff;
width:100%;
height:100%;
}
.r-menu {
position:fixed;
z-index:9;
right:20px;
top:15px;
color:#fff;
cursor:pointer;
display:none;
transition:all 0.5s;
}
#close {
position:fixed;
z-index:9;
right:20px;
top:-50%;
color:#fff;
cursor:pointer;
display:none;
transition:all 0.5s;
}
.r-menu:hover {
color:#b31c27;
}
#close:hover {
color:#b31c27;
}
.location {
display:inline-block;
width:40%;
font-family:'raleway-bold';
}
.m-sub {
margin-left:-100px
}
.li-menu {
width:160px;
display:block;
cursor:pointer;
}
.li {
padding:20px;
}
.frame {
max-width:100%;
width:850px;
height:650px;
display:inline-block;
float:right;
margin-top:0px;
}
/*Media*/
@media (max-width: 480px){
.logo {
}
#foot p {
font-size:30px;
}
.H-img {
width:100%;
}
.H-paragraph {
width:100%;
padding:20px;
}
.product {
width:100%;
margin:0px;
padding:20px;
}
.product2 {
width:100%;
}
.person {
width:100%;
margin:0px;
}
.location {
width:100%;
}
.social {
width:100%;
float:left;
}
.footer2 .container a{
display:block;
float:left;
}
.footer2 .container p{
display:block;
float:left;
}
.prod1 h3{
margin-top:100px;
}
.fot .inc {
float:right
}
.frame {
width:100%;
}
.store-detail {
width:100%;
}
.d-c {
width:100%;
}
}
@media (max-width: 768px) {
}
@media (max-width: 1033px) {
.menu a li{
display:block;
background:#000;
width:100%;
}
.menu {
background:#000;
width:100%;
margin:0px;
position:fixed;
top:-520px;
padding:0px;
z-index:99;
border-bottom:2px solid #b31c27;
transition:all 0.5s;
}
.r-menu {
display:block;
}
#close {
display:block;
}
#li-input{
display:none;
}
#li-logo{
display:none;
}
.li-menu {
display:block;
}
.menu ul {
width:100%;
margin:10px 0px -10px 0px;
padding:0px;
position:relative;
}
.menu ul li{
display:none;
margin:0px;
padding:15px;
text-align:center;
text-shadow:none;
}
.h {
margin-top:70px;
}
.li {
display:none;
}
.frame {
width:600px;
max-width:100%;
}
}
@media (max-width: 1280px) {
.logo {
width:400px;
max-width:80%;
}
.li-menu {
display:block;
}
}
.prod1 {
width:500px;
max-width:100%;
margin-top:60px;
}
.prod1 h3 {
font-family: 'raleway-bold';
}
.prod {
/*width:280px;*/
display:inline-block;
max-width:100%;
}
.prod i {
color:#b31c27;
padding:0px;
margin:0px;
}
.p1 {
position:relative;
width:50%;
margin-top:80px;
max-width:100%;
padding:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
}
.p2 {
width:100%;
z-index:3;
background:#fff;
padding:10px;
max-width:100%;
position:absolute;
overflow:hidden;
}
.x {
float:right;
padding:3px;
margin:-5px -5px 0px 0px;
background:#b31c27;
color:#fff;
border-radius:50%;
cursor:pointer;
}
.title {
font-size:20px;
text-transform:uppercase;
font-family:'raleway-bold';
padding:0px;
margin:0px;
}
.sub-title {
padding:5px;
margin:0px;
font-size:12px;
}
.des {
padding:0px;
margin:0px;
font-size:12px;
width:320px;
max-width:100%;
}
.input1 {
width:39%;
display:inline-block;
margin:0px 20px 0px 0px;
}
.input1 p {
font-size:14px;
color:#ddd;
text-align:center;
padding:0px;
margin:0px;
}
.input2 {
width:39%;
display:inline-block;
margin:0px 0px 0px 20px;
}
.input2 p {
font-size:14px;
color:#ddd;
text-align:center;
padding:0px;
margin:0px;
}
.input {
width:340px;
height:50px;
padding:3px;
max-width:96%;
font-size:35px;
text-align:center;
}
.fot {
width:180px;
display:inline-block;
max-width:100%;
margin-bottom:20px;
float:left;
margin-left:10px;
}
.fot p{
text-align:left;
font-size:10px;
margin:0px 0px 0px 10px;
}
.inc {
display:inline-block;
width:40%;
display:inline-block;
float:right;
margin-right:22px;
}
.note {
width:340px;
max-width:100%;
color:#b31c27;
padding:5px 0px 5px 5px;
background:rgba(255,0,0,0.1);
text-align:left;
margin:5px 0px 0px 0px;
font-size:12px;
}
.btn-sml {
width:10px;
height:10px;
border-radius:50%;
background:#eee;
display:inline-block;
cursor:pointer;
}
.btn-sml:hover {
background:#ccc;
}
.actv {
background:#ccc;
}
#map_canvas {
max-width:100%;
width:98%;
height:650px;
margin-top:-650px;
margin-left:auto;
margin-right:auto
}
#map {
max-width:100%;
width:100%;
height:650px;
}
.map {
max-width:100%;
width:100%;
height:650px;
border:none;
}
.d-img{
max-width:100%;
width:250px;
overflow:hidden;
height:250px;
display:inline-block;
}
.d-img img {
height:100%;
max-width:100%;
}
.d-content {
display:inline-block;
padding:5px;
width:250px;
max-width:100%;
}
.d-content h4 {
font-family:'raleway-bold';
font-weight:bold;
}
.d-content p {
font-size:14px;
font-family:'raleway-light';
}
.d-content button {
width:100%;
margin:5px;
}
.store-detail {
width:300px;
max-width:100%;
float:left;
display:inline-block;
margin:10px 10px 10px 0px;
}
.d-c {
width:250px;
}
/* SVG */
path {
stroke: #b31c27;
fill: #b31c27;
stroke-dasharray:3000;
opacity:10;
animation: animate1 4s infinite alternate cubic-bezier(0,0.23,1,1);
}
@keyframes animate1 {
0% {
opacity:10;
fill:#b31c27;
stroke-dashoffset:0;
}
30% {
opacity:10;
fill:none;
stroke-dashoffset:3000;
}
80% {
fill:none;
}
100% {
opacity:10;
fill:#b31c27;
stroke-dashoffset:0;
}
}
.contact-form1{
width:50%;display:inline-block;float:left;background:none;padding:20px;
}
.contact-form2 {
width:50%;display:inline-block;float:left;background:#eee;padding:20px;
}
/***** Product and Modal *****/
.cat-list, .product-list {
margin-top: 30px;
}
.product-list {
padding: 30px;
}
.main-cat {
padding: 0;
list-style: none;
}
.main-cat li {
margin: 6px 0;
padding: 10px;
width: 240px;
color: white;
background-color: #996529;
display: grid;
grid-template-columns: 50% 50%;
}
.main-cat li:hover {
color: black;
background-color: #ccc;
}
.sub-cat {
display: grid;
padding-left: 0px;
list-style: none;
grid-template-columns: 46% 53%;
}
.sub-cat li {
width: 0;
color: black;
background-color: transparent;
}
.sub-cat li:hover {
background-color: transparent;
}
.sub-cat-show {
display: block;
}
.prod .modal {
margin-top: 70px;
}
.row {
display: flex;
}
.column {
flex: 50%;
}
.left {
flex: 20%;
}
.right {
flex: 100%;
}
.prod-footer {
padding: 20px;
}
.prod-footer span{
color:#b31c27
}
.prod-inquire {
padding-top: 20px;
}
.prod-img, .prod-info {
margin-top: 20px;
}
.inquire-button {
border:none;
padding:20px;
background:#b31c27;
color:#fff;
width:50%;
font-size:12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.inquire-button:hover{
transition:0.5s all;
background:#fff;
color:#b31c27;
}
.rosquillos {
display: none;
}
.otap {
display: none;
}
.hojaldres {
display: none;
}
.galletasdelcarmen {
display: none;
}
.galletasdebato {
display: none;
}
.polvoron {
display: none;
}
.sinudlan {
display: none;
}
.bread {
display: none;
}
.pastry {
display: none;
}
.coffee {
display: none;
}
.meal {
display: none;
}
#close-sub {
display: none;
position: relative;
top: 30px;
right: 10px;
color: #000;
}
/***** MEDIA QUERIES FOR DIFFERENT DEVICES SCREEN *****/
@media (max-width: 480px) {
.bread, .pastry, .coffee, .meal {
padding: 0 10px;
}
.cat-list, .product-list {
margin-top: 80px;
}
.cat-list {
z-index: 2;
}
/*.cat-list::before {
content: 'PRODUCTS';
position: absolute;
right: 140px;
top: 150px;
padding: 0 8px;
color: white;
background-color: #333;
transform: rotate(90deg);
}*/
.cat-button {
position: absolute;
top: 155px;
left: -25px;
transform: rotate(90deg);
z-index: 1;
}
.main-cat {
background-color: white;
}
.cat-list {
display: none;
}
}
@media (min-width:481px) and (max-width: 768px) {
.cat-button {
display: none;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.cat-button {
display: none;
}
}
@media (min-width: 1280px) {
.cat-button {
display: none;
}
}
.Grid {
width: 50rem;
margin: 5rem auto;
}
.Grid-row {
display: flex;
justify-content: space-between;
margin-bottom: 2.5rem;
}
.Card {
position: relative;
flex: 0 1 15rem;
background-color: #fff;
padding-bottom: 5rem;
transition: background-color 0.2s cubic-bezier(0.5, 0.3, 0.8, 0.06);
color: #000;
}
.Card-thumb {
position: relative;
width: 15rem;
height: 10rem;
-webkit-perspective-origin: 50% 0%;
perspective-origin: 50% 0%;
-webkit-perspective: 600px;
perspective: 600px;
z-index: 1;
}
.Card-image,
.Card-shadow {
position: absolute;
display: block;
width: 15rem;
height: 10rem;
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.Card-shadow {
opacity: 0.8;
}
.Card-shadow:nth-child(1) {
opacity: 0.6;
background-color: #673ab7;
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0.07s;
}
.Card-shadow:nth-child(2) {
opacity: 0.7;
background-color: #3f51b5;
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0.05s;
}
.Card-shadow:nth-child(3) {
background-color: #2196f3;
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0.03s;
}
.Card-image {
position: relative;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
background-color: #607d8b;
}
.Card-image::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #3f51b5;
content: '';
opacity: 0;
transition: opacity 0.1s;
}
.Card-title,
.Card-explore {
position: absolute;
bottom: 0;
display: flex;
align-items: center;
width: 100%;
height: 5rem;
text-align: center;
transition: all 0.2s cubic-bezier(0.5, 0.3, 0.8, 0.06);
}
.Card-title span,
.Card-explore span {
padding: 0.5rem;
flex: 1 1 auto;
text-align: center;
}
.Card-explore {
opacity: 0;
-webkit-transform: translate(0, -1rem);
transform: translate(0, -1rem);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #673ab7;
}
.Card-button {
position: absolute;
left: 50%;
top: 5rem;
padding: 0.5rem 1rem;
background-color: #fff;
border-radius: 2rem;
border: 2px solid #3f51b5;
color: #fff;
font-size: 0.75rem;
font-weight: 600;
-webkit-transform: translate(-50%, 2rem);
transform: translate(-50%, 2rem);
cursor: pointer;
transition: all 0.2s;
opacity: 0;
outline: none;
z-index: 4;
}
.Card:hover,
.Card--active {
background-color: #f5f5f5;
cursor: pointer;
}
.Card:hover .Card-thumb,
.Card--active .Card-thumb {
z-index: 3;
}
.Card:hover .Card-title,
.Card--active .Card-title {
opacity: 0;
}
.Card:hover .Card-explore,
.Card--active .Card-explore {
opacity: 1;
-webkit-transform: translate(0, 1rem);
transform: translate(0, 1rem);
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0.1s;
}
.Card:hover .Card-image,
.Card--active .Card-image {
-webkit-transform: scale(1.05) translate(0, -1rem) rotateX(25deg);
transform: scale(1.05) translate(0, -1rem) rotateX(25deg);
}
.Card:hover .Card-image::before,
.Card--active .Card-image::before {
opacity: 0.4;
}
.Card:hover .Card-shadow:nth-child(3),
.Card--active .Card-shadow:nth-child(3) {
-webkit-transform: scale(1.02) translate(0, -0.3rem) rotateX(15deg);
transform: scale(1.02) translate(0, -0.3rem) rotateX(15deg);
}
.Card:hover .Card-shadow:nth-child(2),
.Card--active .Card-shadow:nth-child(2) {
-webkit-transform: scale(0.9) translate(0, 1rem) rotateX(15deg);
transform: scale(0.9) translate(0, 1rem) rotateX(15deg);
}
.Card:hover .Card-shadow:nth-child(1),
.Card--active .Card-shadow:nth-child(1) {
-webkit-transform: scale(0.82) translate(0, 2.4rem) rotateX(5deg);
transform: scale(0.82) translate(0, 2.4rem) rotateX(5deg);
}
.Card:hover .Card-button,
.Card--active .Card-button {
opacity: 1;
color: #3f51b5;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.Card:hover .Card-button:hover,
.Card--active .Card-button:hover {
color: #fff;
background-color: #3f51b5;
}
.Card--active,
.Card--active:hover {
background: none;
}
.Card--active .Card-explore,
.Card--active:hover .Card-explore {
opacity: 0;
-webkit-transform: translate(0, 3rem);
transform: translate(0, 3rem);
transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.Card--active .Card-image,
.Card--active:hover .Card-image {
opacity: 0;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: scale(1.05) translate(0, -2.5rem) rotateX(50deg);
transform: scale(1.05) translate(0, -2.5rem) rotateX(50deg);
}
.Card--active .Card-image::before,
.Card--active:hover .Card-image::before {
opacity: 0.4;
}
.Card--active .Card-button,
.Card--active:hover .Card-button {
opacity: 0;
transition: all 0.35s cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: translate(-50%, -2rem) scale(1, 0.4);
transform: translate(-50%, -2rem) scale(1, 0.4);
}
.Grid-row:nth-child(1) .Card:nth-child(1).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(1) .Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
-webkit-transform: scale(1) translate(6%, 113%);
transform: scale(1) translate(6%, 113%);
}
.Grid-row:nth-child(1) .Card:nth-child(1).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(1) .Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
-webkit-transform: scale(1) translate(6%, 223%);
transform: scale(1) translate(6%, 223%);
}
.Grid-row:nth-child(1) .Card:nth-child(1).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(1) .Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
-webkit-transform: scale(2.1) translate(81%, 80%);
transform: scale(2.1) translate(81%, 80%);
}
.Grid-row:nth-child(1) .Card:nth-child(2).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(1) .Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
-webkit-transform: scale(1) translate(-108%, 113%);
transform: scale(1) translate(-108%, 113%);
}
.Grid-row:nth-child(1) .Card:nth-child(2).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(1) .Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
-webkit-transform: scale(1) translate(-108%, 223%);
transform: scale(1) translate(-108%, 223%);
}
.Grid-row:nth-child(1) .Card:nth-child(2).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(1) .Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
-webkit-transform: scale(2.1) translate(26%, 80%);
transform: scale(2.1) translate(26%, 80%);
}
.Grid-row:nth-child(1) .Card:nth-child(3).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(1) .Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
-webkit-transform: scale(1) translate(-222%, 113%);
transform: scale(1) translate(-222%, 113%);
}
.Grid-row:nth-child(1) .Card:nth-child(3).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(1) .Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
-webkit-transform: scale(1) translate(-222%, 223%);
transform: scale(1) translate(-222%, 223%);
}
.Grid-row:nth-child(1) .Card:nth-child(3).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(1) .Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
-webkit-transform: scale(2.1) translate(-29%, 80%);
transform: scale(2.1) translate(-29%, 80%);
}
.Grid-row:nth-child(2) .Card:nth-child(1).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(2) .Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
-webkit-transform: scale(1) translate(6%, -55%);
transform: scale(1) translate(6%, -55%);
}
.Grid-row:nth-child(2) .Card:nth-child(1).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(2) .Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
-webkit-transform: scale(1) translate(6%, 55%);
transform: scale(1) translate(6%, 55%);
}
.Grid-row:nth-child(2) .Card:nth-child(1).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(2) .Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
-webkit-transform: scale(2.1) translate(81%, 0%);
transform: scale(2.1) translate(81%, 0%);
}
.Grid-row:nth-child(2) .Card:nth-child(2).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(2) .Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
-webkit-transform: scale(1) translate(-108%, -55%);
transform: scale(1) translate(-108%, -55%);
}
.Grid-row:nth-child(2) .Card:nth-child(2).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(2) .Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
-webkit-transform: scale(1) translate(-108%, 55%);
transform: scale(1) translate(-108%, 55%);
}
.Grid-row:nth-child(2) .Card:nth-child(2).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(2) .Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
-webkit-transform: scale(2.1) translate(26%, 0%);
transform: scale(2.1) translate(26%, 0%);
}
.Grid-row:nth-child(2) .Card:nth-child(3).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(2) .Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
-webkit-transform: scale(1) translate(-222%, -55%);
transform: scale(1) translate(-222%, -55%);
}
.Grid-row:nth-child(2) .Card:nth-child(3).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(2) .Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
-webkit-transform: scale(1) translate(-222%, 55%);
transform: scale(1) translate(-222%, 55%);
}
.Grid-row:nth-child(2) .Card:nth-child(3).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(2) .Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
-webkit-transform: scale(2.1) translate(-29%, 0%);
transform: scale(2.1) translate(-29%, 0%);
}
.Grid-row:nth-child(3) .Card:nth-child(1).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(3) .Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
-webkit-transform: scale(1) translate(6%, -223%);
transform: scale(1) translate(6%, -223%);
}
.Grid-row:nth-child(3) .Card:nth-child(1).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(3) .Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
-webkit-transform: scale(1) translate(6%, -113%);
transform: scale(1) translate(6%, -113%);
}
.Grid-row:nth-child(3) .Card:nth-child(1).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(3) .Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
-webkit-transform: scale(2.1) translate(81%, -80%);
transform: scale(2.1) translate(81%, -80%);
}
.Grid-row:nth-child(3) .Card:nth-child(2).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(3) .Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
-webkit-transform: scale(1) translate(-108%, -223%);
transform: scale(1) translate(-108%, -223%);
}
.Grid-row:nth-child(3) .Card:nth-child(2).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(3) .Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
-webkit-transform: scale(1) translate(-108%, -113%);
transform: scale(1) translate(-108%, -113%);
}
.Grid-row:nth-child(3) .Card:nth-child(2).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(3) .Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
-webkit-transform: scale(2.1) translate(26%, -80%);
transform: scale(2.1) translate(26%, -80%);
}
.Grid-row:nth-child(3) .Card:nth-child(3).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(3) .Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
-webkit-transform: scale(1) translate(-222%, -223%);
transform: scale(1) translate(-222%, -223%);
}
.Grid-row:nth-child(3) .Card:nth-child(3).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(3) .Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
-webkit-transform: scale(1) translate(-222%, -113%);
transform: scale(1) translate(-222%, -113%);
}
.Grid-row:nth-child(3) .Card:nth-child(3).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(3) .Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
-webkit-transform: scale(2.1) translate(-29%, -80%);
transform: scale(2.1) translate(-29%, -80%);
}
.Gallery {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #f5f5f5;
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
transition: none;
padding: 18rem 0;
overflow-y: scroll;
}
.Gallery-header {
position: absolute;
left: 0;
right: 0;
top: 0;
background-color: #eee;
padding-bottom: 5rem;
}
.Gallery-close {
position: absolute;
right: 1rem;
top: 1rem;
font-size: 3rem;
opacity: 0.5;
cursor: pointer;
}
.Gallery-close:hover {
opacity: 0.8;
}
.Gallery-images {
display: flex;
width: 47rem;
margin: 0 auto;
justify-content: space-between;
margin-bottom: 1rem;
}
.Gallery-images:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.33s;
opacity: 0;
-webkit-transform: translate(0, 3rem) scale(1.1);
transform: translate(0, 3rem) scale(1.1);
}
.Gallery-images:nth-child(4) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.44s;
opacity: 0;
-webkit-transform: translate(0, 3rem) scale(1.1);
transform: translate(0, 3rem) scale(1.1);
}
.Gallery-images:nth-child(5) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.55s;
opacity: 0;
-webkit-transform: translate(0, 3rem) scale(1.1);
transform: translate(0, 3rem) scale(1.1);
}
.Gallery-images:nth-child(6) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.66s;
opacity: 0;
-webkit-transform: translate(0, 3rem) scale(1.1);
transform: translate(0, 3rem) scale(1.1);
}
.Gallery-left {
flex: 1 auto;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.Gallery-image {
display: block;
width: 15rem;
height: 9.5rem;
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
background: #aebfc7;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
.Gallery-image--primary {
width: 31rem;
height: 20rem;
background-color: #673ab7;
}
.Gallery--active {
z-index: 100;
background: #fff;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
transition: all 0.5s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
}
.Gallery--active .Gallery-close {
display: block;
}
.Gallery--active .Gallery-images {
opacity: 1;
-webkit-transform: none;
transform: none;
}