You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
2.3 KiB
131 lines
2.3 KiB
@import "icons";
|
|
@import "normalize";
|
|
|
|
h1
|
|
{
|
|
font-weight:700;
|
|
font-size:24px;
|
|
text-align: center;
|
|
color:#666;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
#top-slider
|
|
{
|
|
position: relative;
|
|
max-width: 100vw;
|
|
width: 100vw;
|
|
height: 50vh;
|
|
overflow: hidden;
|
|
}
|
|
#slider-position
|
|
{
|
|
width: 100vw;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
i
|
|
{
|
|
content:"\00a0";
|
|
display: inline-block;
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 20px;
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
color:lightseagreen;
|
|
&.on
|
|
{
|
|
background-color:lightseagreen;
|
|
}
|
|
}
|
|
}
|
|
.slider
|
|
{
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
bottom:0;
|
|
right:0;
|
|
picture
|
|
{
|
|
display: block;
|
|
position:relative;
|
|
max-width:100vw;
|
|
overflow: hidden;
|
|
}
|
|
.slide
|
|
{
|
|
width:100vw;
|
|
height:50vh;
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
bottom:0;
|
|
right:0;
|
|
transition: all 0.01s;
|
|
z-index:1;
|
|
}
|
|
.slider-nav
|
|
{
|
|
position:absolute;
|
|
z-index:12;
|
|
top:50%;
|
|
left:0;
|
|
right:0;
|
|
height:15vh;
|
|
//background-color:red;
|
|
transform: translateY(-50%);
|
|
display: inline-block;
|
|
line-height: 15vh;
|
|
i
|
|
{
|
|
color:rgba(255,255,255,0.75);
|
|
font-size:9vh;
|
|
line-height: 1;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
span
|
|
{
|
|
display: block;
|
|
position: absolute;
|
|
opacity:0;
|
|
&:hover
|
|
{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.pause
|
|
{
|
|
width:34%;
|
|
left:33%;
|
|
text-align: center;
|
|
}
|
|
.next
|
|
{
|
|
width:33%;
|
|
left:67%;
|
|
text-align:right;
|
|
}
|
|
.prev
|
|
{
|
|
width:33%;
|
|
text-align:left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ico-pause2
|
|
{
|
|
pointer-events: none;
|
|
}
|
|
|
|
#slide-1
|
|
{
|
|
background: url(./imgs/full/forest-river.jpg);
|
|
background-position: center center;
|
|
background-size: 100% auto;
|
|
}
|