armanty-quests/home.css

735 lines
20 KiB
CSS

.ent-container p {
font-size: 24px;
letter-spacing: 0.5px;
text-align: center;
color: #1e212b;
max-width: 940px;
margin: 20px auto;
margin-bottom: 0; }
.quest-description__icons_main {
padding: 20px 0 !important;
color: #fff;
display: flex;
flex-direction: row;
justify-content: space-between; }
.quest-description__icons_main div {
padding: 0 !important; }
.quest-description__icons_main img {
height: 20px;
width: auto !important;
margin: 0 auto; }
.quest-description__icons_main .quest-age img {
height: 44px; }
.ent {
padding-top: 70px;
padding-bottom: 20px;
position: relative;
font-family: 'PT Sans', sans-serif; }
.ent-slider {
padding-top: 35px; }
.ent-container .owl-item:nth-child(4n+2) h3 {
color: #5CBAE9; }
.ent-container .owl-item:nth-child(4n+2) button {
color: #ffffff; }
.ent-container .owl-item:nth-child(4n+2) a {
background: url("../../img/icons/arkids.svg") center 1px no-repeat;
background-size: 102%; }
.ent-container .owl-item:nth-child(2n+3) h3 {
color: #F08D37; }
.ent-container .owl-item:nth-child(2n+3) button {
color: #ffffff; }
.ent-container .owl-item:nth-child(2n+3) a {
background: url("../../img/icons/faraon.svg") center 1px no-repeat;
background-size: 102%;
background-size: 102%; }
.ent-container .owl-item:nth-child(2n+4) h3 {
color: #33cc33; }
.ent-container .owl-item:nth-child(2n+4) button {
color: #ffffff; }
.ent-container .owl-item:nth-child(2n+4) a {
background: url("../../img/icons/departure-quests.svg") center 1px no-repeat;
background-size: 102%; }
.ent-container h2 {
margin: 0;
text-align: center;
font-size: 40px;
font-weight: 600;
letter-spacing: 0.5px;
color: #1e212b; }
.ent-container__quest {
height: 380px;
max-width: 360px;
border-radius: 20px;
position: relative; }
.ent-container__quest-overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.43), rgba(0, 0, 0, 0.57));
z-index: 50;
border-radius: 20px; }
.ent-container__quest-content {
position: relative;
z-index: 99;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%; }
.ent-container__quest-content div {
padding: 40px;
padding-bottom: 0; }
.ent-container__quest-content h3 {
font-size: 32px;
font-weight: 600;
letter-spacing: 0.4px;
margin-bottom: 12px;
color: red; }
.ent-container__quest-content p {
color: #ffffff;
font-size: 22px !important;
letter-spacing: 0.5px; }
.ent-container__quest-content a {
background: transparent;
width: 100%;
background-size: 360px 72px;
height: 74px;
padding: 23px;
display: block;
position: absolute;
transition: 0.2s;
bottom: 0;
left: 0;
right: 0;
z-index: 70;
border-radius: 0 0 20px 20px;
overflow: hidden;
background: url("../../img/icons/eger.svg") center 1px no-repeat;
background-size: 102%; }
.ent-container__quest-content a:hover {
height: 80px; }
.ent-container__quest-content a:hover button {
font-size: 22px; }
.ent-container__quest-content a button {
background: transparent;
transition: 0.2s;
border: none;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.4px;
text-align: center;
width: 100%;
color: #ffffff;
text-decoration: none;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.4px;
text-align: center;
text-transform: uppercase;
outline: none; }
.ent .ent-container__quest-content h3 {
font-size: 32px; }
.ent .ent-container__quest-content p {
font-size: 16px;
text-align: left; }
.ent .ent-container__quest-content a button {
text-align: center; }
@media screen and (max-width: 576px) {
.ent-container__quest-content br {
display: none; }
.ent {
margin-top: 0;
padding-top: 40px !important;
padding-bottom: 0px; }
.ent:before, .ent:after {
display: none !important; }
.ent-slider {
padding-top: 0; }
.ent-container h2 {
font-size: 28px !important; }
.ent-container p {
font-size: 16px !important; }
.ent-container__quest {
height: 280px !important;
margin-top: 25px;
max-width: 260px !important; }
.ent-container__quest-content div {
padding: 15px; }
.ent-container__quest-content h3 {
font-size: 20px !important; }
.ent-container__quest-content p {
font-size: 14px !important; }
.ent .owl-item:nth-child(3n+1) h3 {
color: #5CBAE9; }
.ent .owl-item:nth-child(3n+1) a {
background-size: 360px 70px;
background: url("../../img/icons/arkids.svg") center 1px no-repeat; }
.ent .owl-item:nth-child(3n+1) a button {
color: #ffffff; }
.ent .owl-item:nth-child(3n+2) h3 {
color: #F08D37; }
.ent .owl-item:nth-child(3n+2) a {
background-size: 360px 70px;
background: url("../../img/icons/faraon.svg") center 1px no-repeat; }
.ent .owl-item:nth-child(3n+2) a button {
color: #ffffff; }
.ent .owl-item:nth-child(3n) h3 {
color: red; }
.ent .owl-item:nth-child(3n) a {
background-size: 360px 70px;
background: url("../../img/icons/eger.svg") center 1px no-repeat !important; }
.ent .owl-item:nth-child(3n) a button {
color: #ffffff; }
.ent .owl-item:nth-child(2n+4) h3 {
color: #33cc33; }
.ent .owl-item:nth-child(2n+4) button {
color: #ffffff; }
.ent .owl-item:nth-child(2n+4) a {
background: url("../../img/icons/departure-quests.svg") center 1px no-repeat !important;
background-size: 360px 70px; } }
.discount {
padding-top: 40px;
background: #f2f2f2; }
.discount h2 {
color: #1e212b;
font-family: 'PT Sans', sans-serif;
font-size: 40px;
font-weight: 600;
letter-spacing: 0.5px;
line-height: normal;
margin-bottom: 40px;
text-align: center; }
.discount .owl-carousel .owl-item img {
width: auto;
max-height: 280px; }
.discount-slider {
position: relative;
max-width: 1200px;
margin-right: auto;
margin-left: auto; }
.discount-slider__prev {
align-items: center;
background-color: #f2f2f2;
border-radius: 50%;
color: #dc3545;
cursor: pointer;
display: flex;
font-size: 32px;
height: 55px;
justify-content: center;
left: -70px;
position: absolute;
top: 50%;
transform: translateY(-27px);
width: 55px; }
.discount-slider__next {
align-items: center;
background-color: #f2f2f2;
border-radius: 50%;
color: #dc3545;
cursor: pointer;
display: flex;
font-size: 32px;
height: 55px;
justify-content: center;
position: absolute;
right: -70px;
top: 50%;
transform: translateY(-27px);
width: 55px; }
.discount-item {
font-family: 'PT Sans', sans-serif;
height: 536px;
margin-left: auto;
margin-right: auto;
position: relative;
width: 360px; }
.discount-item__badge {
align-items: center;
background: url("../../img/discount/promo-badge-small.png") center center no-repeat;
color: #ffffff;
display: flex;
font-size: 28px;
font-weight: 600;
height: 77px;
justify-content: center;
left: -51px;
position: absolute;
text-align: center;
top: 28px;
transform: rotateZ(-29deg);
width: 397px;
z-index: 3; }
.discount-item__content {
align-items: center;
border-radius: 39px;
border: 5px solid #ffffff;
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5);
display: flex;
flex-direction: column;
height: 100%;
padding: 80px 35px 20px 35px;
position: absolute; }
.discount-item__content p {
color: #ffffff;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.1px;
line-height: 1.25;
margin: 0 0 12px 0;
text-align: center; }
.discount-item__content button {
background-color: #fff;
border: none;
color: #dc3545;
width: 100%; }
.discount-item__content img {
height: 280px;
max-width: 100%; }
.discount-modal {
display: none;
font-family: 'PT Sans', sans-serif;
height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: 99999; }
.discount-modal-close {
color: #FFF;
cursor: pointer;
font-size: 20px;
font-style: normal;
line-height: 44px;
opacity: 0.65;
position: absolute;
right: -100px;
top: -50px; }
.discount-modal-layout {
background: rgba(0, 0, 0, 0.85);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%; }
.discount-modal-wrapper {
background: #ffffff;
border-radius: 39px;
border: 8px solid #ffffff;
height: 523px;
left: 50%;
position: relative;
top: 50%;
transform: translateX(-460px) translateY(-262px);
width: 920px;
z-index: 2; }
.discount-modal-slider {
height: 100%; }
.discount-modal-slider .owl-stage {
height: 100%; }
.discount-modal-slider .owl-stage-outer {
border-radius: 30px;
height: 100%;
padding: 0 !important; }
.discount-modal-slider .owl-stage-outer .owl-item {
height: 100%; }
.discount-modal-slider-nav {
align-items: center;
background-color: #f2f2f2;
border-radius: 50%;
color: #dc3545;
cursor: pointer;
display: flex;
font-size: 32px;
height: 55px;
justify-content: center;
position: absolute;
right: -100px;
top: 50%;
transform: translateY(-27px);
width: 55px; }
.discount-modal-slider-nav i {
transform: translateX(4px); }
.discount-modal-slider-nav-prev {
right: 0;
left: -100px; }
.discount-modal-slider-nav-prev i {
transform: translateX(-2px); }
.discount-modal-slider-item {
align-items: center;
background: #ffffff;
border-radius: 10px;
display: flex;
height: 100%;
justify-content: space-between;
position: relative; }
.discount-modal-slider-item img {
width: auto !important;
max-width: 100%; }
.discount-modal-slider-item-badge {
align-items: center;
background: url("../../img/discount/promo-badge-large.png") center center no-repeat;
color: #ffffff;
display: flex;
font-size: 26px;
font-weight: 600;
height: 77px;
justify-content: center;
left: -51px;
line-height: 77px;
position: absolute;
text-align: center;
top: 28px;
transform: rotateZ(-29deg);
width: 432px; }
.discount-modal-slider-item__img {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 360px; }
.discount-modal-slider-item__text {
align-self: flex-start;
display: flex;
flex-direction: column;
font-size: 20px;
height: 100%;
justify-content: space-between;
letter-spacing: 0.2px;
line-height: 1.5;
max-width: 540px;
padding: 10px 30px; }
.discount-modal-slider-item__text button {
background: #2bbb73;
border: none;
width: 295px; }
.discount-modal-slider-item__text button:hover {
background: #21925a; }
@media screen and (max-width: 576px) {
.discount {
padding-bottom: 20px;
padding-top: 20px; }
.discount h2 {
margin: 0 auto 20px auto; }
.discount-item {
height: 350px;
width: 260px;
max-width: 100%; }
.discount-item__badge {
align-items: center;
background: url(../../img/discount/promo-badge-small.png) center center no-repeat;
background-size: cover;
color: #fff;
display: flex;
font-size: 18px;
font-weight: 600;
height: 48px;
justify-content: center;
left: -31px !important;
position: absolute;
text-align: center;
top: 26px;
transform: rotateZ(-29deg);
width: 277px;
z-index: 3; }
.discount-item__content {
padding: 80px 10px; }
.discount-item__content img {
max-height: 123px !important; }
.discount-item__content p {
min-height: 50px;
font-size: 14px;
font-weight: normal; }
.discount-item__content button {
width: auto;
font-size: 16px; }
.discount-modal {
padding: 10px; }
.discount-modal-close {
display: none; }
.discount-modal .owl-stage-outer {
border-radius: 15px; }
.discount-modal-wrapper {
height: 470px;
left: 0;
max-width: 100%;
top: 50%;
transform: translateY(-225px); }
.discount-modal-slider-item {
flex-direction: column;
justify-content: center; }
.discount-modal-slider-item__img {
display: none; }
.discount-modal-slider-item-badge {
background: none;
color: #000000;
font-size: 24px;
height: 40px;
position: initial;
text-align: center;
transform: none; }
.discount-modal-slider-item__text {
font-size: 16px;
height: auto; }
.discount-modal-slider-item__text p {
margin: 5px 0 !important; }
.discount-modal-slider-item__text a {
display: none;
justify-content: center; }
.discount-modal-slider-item__text a button {
width: 200px;
font-size: 14px; } }
.present {
font-family: 'PT Sans', sans-serif;
padding-bottom: 20px;
padding-top: 60px; }
.present .container {
position: relative;
padding-top: 10px;
overflow: visible; }
.present .container::before {
content: '';
display: block;
width: 296px;
height: 293px;
background: url("../../img/present/cube-purple.png") center no-repeat;
position: absolute;
top: -100px;
left: -100px; }
.present .container::after {
content: '';
display: block;
width: 296px;
height: 293px;
background: url("../../img/present/cube-yellow.png") center no-repeat;
position: absolute;
top: -215px;
right: -100px; }
.present-layout {
padding-bottom: 30px; }
.present h2 {
text-align: center;
font-size: 40px;
font-weight: 600;
letter-spacing: 0.5px;
color: #1e212b;
line-height: normal;
margin-bottom: 75px; }
.present-item {
display: flex;
align-items: center;
position: relative;
margin-bottom: 70px; }
.present-item:last-child {
flex-direction: row-reverse;
margin-bottom: 15px; }
.present-item:last-child img {
left: -115px; }
.present-item:last-child .present-item__text {
right: 115px;
left: 115px;
padding: 70px 251px 0 100px;
border-radius: 20px 0 0 20px;
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5); }
.present-item img {
position: relative;
z-index: 2;
left: 115px;
width: 360px;
height: 360px; }
.present-item__text {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 757px;
height: 360px;
position: absolute;
right: 115px;
top: 0;
background-color: #f2f2f2;
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5);
padding: 70px 100px 0 251px;
border-radius: 0 20px 20px 0;
z-index: 1; }
.present-item__text h3 {
font-size: 32px;
font-weight: 600;
line-height: 1.22;
letter-spacing: 0.3px;
margin: 0 0 10px 0; }
.present-item__text p {
margin: 22px 0;
max-width: 400px;
font-size: 22px;
line-height: 1.45;
letter-spacing: 0.5px; }
.present-item__text a {
font-size: 18px;
font-weight: 600;
letter-spacing: 1.2px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
vertical-align: middle;
line-height: 1.3;
border: 0; }
.present-item__text a button {
width: 260px;
box-shadow: 0 2px 12px 0 rgba(56, 72, 95, 0.49); }
@media screen and (max-width: 1200px) {
.present-item__text {
max-width: 530px;
padding: 20px 25px; }
.present-item:last-child .present-item__text {
padding: 20px !important; } }
@media screen and (max-width: 770px) {
.present-item {
height: 250px; }
.present-item img {
max-height: 122px;
left: 0 !important;
right: 0 !important; }
.present-item__text {
max-width: 530px;
padding: 20px;
box-shadow: none;
position: relative;
right: 0 !important;
left: 0 !important;
height: auto; }
.present-item__text h3 {
font-size: 14px; }
.present-item__text p {
font-size: 14px; }
.present-item__text button {
width: 178px !important;
font-size: 16px; }
.present-item:last-child .present-item__text {
padding: 20px !important;
padding-right: 251px; } }
@media screen and (max-width: 576px) {
.present {
padding-bottom: 0; }
.present:before, .present:after {
display: none; }
.present-layout {
padding-bottom: 0; }
.present {
padding-left: 0;
padding-right: 0; }
.present h2 {
margin-bottom: 0;
margin-top: 20px; }
.present-item {
height: 200px;
margin-bottom: 0; }
.present-item img {
max-height: 110px; }
.present-item__text {
background: #fff;
max-width: 530px;
position: relative;
right: 0;
left: 0;
padding: 20px;
box-shadow: none;
height: auto; }
.present-item__text h3 {
font-size: 16px;
margin-bottom: 0; }
.present-item__text p {
margin-top: 10px;
margin-bottom: 10px; }
.present-item:last-child .present-item__text {
padding: 10px !important;
padding-right: 251px;
box-shadow: none; }
.present-item__text button {
max-width: 100px !important;
padding: 5px;
font-size: 14px !important; }
.present {
padding-top: 0; } }
.principals {
background: #f2f2f2;
padding-top: 40px;
padding-bottom: 30px;
max-width: 1200px;
margin-right: auto;
margin-left: auto; }
.principals .owl-stage {
display: flex;
align-items: center; }
.principals .owl-item img {
width: auto;
max-height: 104px; }
.principals h2 {
text-align: center;
font-size: 40px;
font-weight: 600;
letter-spacing: 0.5px;
color: #1e212b;
line-height: normal;
margin-bottom: 40px; }
.principals-slider {
padding: 0; }
.principals-slider__prev {
background-color: #f2f2f2;
font-size: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 55px;
height: 55px;
color: #dc3545;
position: absolute;
top: 33%;
left: -100px;
transform: translateY(-27px);
cursor: pointer;
outline: none; }
.principals-slider__next {
background-color: #f2f2f2;
font-size: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 55px;
height: 55px;
color: #dc3545;
position: absolute;
top: 33%;
right: -100px;
transform: translateY(-27px);
cursor: pointer; }
@media screen and (max-width: 480px) {
.principals {
padding-top: 20px !important;
padding-bottom: 0 !important; }
.principals h2 {
margin-bottom: 0; } }
div.places.places_home, div.places_home .places-layout {
background: #ffffff !important;
padding-top: 20px; }
@media screen and (max-width: 576px) {
div.places.places_home, div.places_home .places-layout {
padding-top: 0 !important; } }
/*# sourceMappingURL=home.css.map */