armanty-quests/src/sass/other.sass
2020-11-28 17:15:17 +03:00

350 lines
6.9 KiB
Sass

@import "fonts"
.full-page__border
margin-top: -20px
padding: 25px 0
height: 144px
background: #f2f2f2 url(../img/holiday/border-wave-line.svg) center center no-repeat
background-size: 100% 48px
//background: #f2f2f2 url(../../img/holiday/border-wave-line.svg) center center no-repeat
//background-size: 100% 48px
.item
height: 577px
width: 777px
position: relative
.page
&-header
height: 408px
position: relative
display: flex
align-items: center
justify-content: center
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5)
h1
position: relative
z-index: 2
font-family: 'PT Sans', sans-serif
font-size: 48px
font-weight: 600
line-height: 0.75
letter-spacing: 0.4px
text-align: center
color: #ffffff
&-overlay
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background: rgba(0, 0, 0, .35)
.wonderplugin3dcarousel-text
display: none
.wonderplugin3dcarousel-item
a
display: none
#carousel-mobile
display: none
img
margin: 0 auto
display: block !important
width: 100%
height: 100%
max-width: 435px
.map-block-in-home
&::after
background-color: #f2f2f2 !important
.footer-in-home
&::before
background-color: #f2f2f2 !important
.places-slider
position: relative
overflow: visible !important
&::after
content: ''
display: block
width: 163px
height: 331px
background: url('../img/places/balloon-blue.svg') center no-repeat
position: absolute
left: -75px
top: -50px
&::before
content: ''
display: block
background: url('../img/places/balloon-red.svg') center no-repeat
position: absolute
right: -60px
top: -200px
width: 197px
height: 423px
z-index: 100
.quest-description__icons
padding-top: 8px
.main
margin-top: 35px
margin-bottom: 35px
.contacts-image
transform: translateY(10px)
.callback-modal
display: none
height: 100vh
// position: fixed
&__layout
background-color: rgba(0, 0, 0, .6)
position: fixed
top: 0
bottom: 0
left: 0
width: 100%
z-index: 999999
&__body
position: fixed
top: 100px
left: 50%
transform: translateX(-50%)
z-index: 9999999
color: #303133
max-width: 300px
background: #ffffff
box-shadow: 0 1px 3px rgba(0,0,0,.3)
margin: 0 auto
padding: 25px 20px
padding-top: 10px
border-radius: 5px
&__close
display: flex
width: 100%
justify-content: flex-end
i
cursor: pointer
font-size: 20px
.gllr_image_block
margin-bottom: 20px
p
width: 240px !important
height: 180px !important
img
width: 240px !important
height: 180px !important
border: none !important
&:nth-child(4n+2)
// margin: 0 20px
margin-left: 20px
margin-right: 10px
&:nth-child(4n+3)
margin-left: 10px
margin-right: 20px
@media screen and (max-width: 1024px)
.main
height: 250px !important
#carousel
display: none
#carousel-mobile
display: flex
justify-content: space-around
align-items: center
.slick-arrow
border-radius: 50%
outline: none
width: 36px !important
height: 36px !important
display: flex
justify-content: center
align-items: center
border: none
opacity: 0.5
transition: opacity .3s ease-in-out
padding: 1px 12px
&:hover
opacity: 1
.present .container
&::after
right: 0 !important
&::before
left: -72px !important
.places-slider
&:before
right: -30px
@media screen and (max-width: 800px)
h1
font-size: 34px
line-height: 1.1
.page-header
background-position: top center !important
height: 200px
.present .container
&::after
display: none !important
&::before
display: none !important
.places-slider
&:before
display: none
&::after
display: none
@media screen and (max-width: 576px)
.btn-round
padding: 15px !important
.main
margin-top: 0
.page-header
h1
font-size: 28px
line-height: 1.2
#carousel-mobile
.slick-arrow
display: none !important
.main
height: 200px !important
padding: 0 !important
img
width: 100% !important
.header-navmenu__item
&:first-child
display: none
.btn-round
padding: 14px 20px
font-size: 18px
font-weight: 600
letter-spacing: 1.2px
text-align: center
text-transform: uppercase
box-shadow: 0 2px 12px 0 rgba(56, 72, 95, 0.49)
margin-right: auto
margin-left: auto
border-radius: 44px
min-width: 165px
background-color: $main-color
border-color: $main-color
&:hover
background-color: darken($main-color, 10%)
border-color: $main-color
.hide
display: none
.owl-carousel
padding: 0
.owl-nav button
outline: none
.container
overflow: hidden
.owl-dots
display: flex
justify-content: center
.owl-dot
border: 1px solid #f2f2f2 !important
width: 30px !important
height: 3px !important
margin: 10px !important
.active
background-color: #000000 !important
border: 3px solid #f2f2f2 !important
.owl-stage-outer
padding-bottom: 15px !important
.ent
.owl-stage-outer
padding-bottom: 30px !important
.principals
.owl-stage-outer
padding: 15px !important
.discount
.owl-stage-outer
padding: 15px 0 !important
.btn-danger
background-color: $main-color
border-color: $main-color
&:hover
border-color: $main-color
.btn-outline-danger
color: $main-color
border-color: $main-color
&:hover
background-color: $main-color
border-color: $main-color
color: #fff
.wave
& > div
background-color: #f2f2f2
&::before
width: 100%
height: 112px
content: ''
display: block
position: relative
// top: -10px
left: 0
background: url(../img/wave/border-wave-top.svg) center no-repeat
background-size: 100% 112px
&::after
width: 100%
height: 112px
content: ''
display: block
position: relative
// top: -10px
bottom: 0
left: 0
background: url(../img/wave/border-wave-bottom.svg) center no-repeat
background-size: 100% 112px
&-no-bottom
&::after
display: none
&-no-top
&::before
display: none
.form-block
padding-bottom: 10px
.hide-menu
display: block !important
#carousel img
transform: scale(1.2)
@media (min-width: 1200px)
.container, .container-lg, .container-md, .container-sm, .container-xl
max-width: 1195px
@media screen and (max-width: 770px)
.wave
&::before
background-size: 100% 55px
height: 55px
&::after
background-size: 100% 55px
height: 55px
@media screen and (max-width: 480px)
h2
font-size: 28px !important
.var-line
.row
max-width: 100%
margin: 0
.packages-item
width: 255px
.full-page__border
height: auto !important
display: none
.callback-modal__body
width: 80%
.form-block
padding-bottom: 10px
.wave>div
background: #fff