@charset "UTF-8";
.chevronholder {
position : absolute;
z-index : 3;
bottom : 30px;
width : 22px;
height : 22px;
left : calc(50% - 12px);
border : #E6E6E6 solid 2px;
border-radius : 50%;
}
.chevron3 {
display : inline-block;
padding : 0;
}
.chevron3:after {
content : ' ';
display : inline-block;
border-bottom : 2px solid #E6E6E6;
border-right : 2px solid #E6E6E6;
transform : rotate(45deg);
}
.chevronholder2 {
position : absolute;
z-index : 3;
bottom : 30px;
width : 22px;
height : 22px;
left : calc(50% - 11px);
border : #E6E6E6 solid 2px;
border-radius : 50%;
}
.chevron4 {
display : inline-block;
padding : 0;
margin : 5px auto 0 6px;
transform : translateY(-1px);
}
.chevron4:after {
content : ' ';
display : inline-block;
border-bottom : 2px solid #E6E6E6;
border-right : 2px solid #E6E6E6;
height : 8px;
width : 8px;
transform : rotate(-135deg);
}
#marker {
position : absolute;
z-index : -1;
width : 0;
height : 0;
top : 90vh;
}
.upbar {
height : 36px;
position : relative;
}
@media only screen and (max-width: 600px) {
.chevronholder {
bottom : 10px;
width : 18px;
height : 18px;
left : calc(50% - 10px);
}
.chevron3 {
margin : 0 auto 0 4px;
transform : translateY(-1px);
}
.chevron3:after {
height : 8px;
width : 8px;
}
.chevron4 {
margin : 5px auto 0 6px;
transform : translateY(-1px);
}
.chevron4:after {
height : 8px;
width : 8px;
}
}
@media only screen and (min-width: 600px) {
.chevronholder {
bottom : 10px;
width : 18px;
height : 18px;
left : calc(50% - 10px);
}
.chevron3 {
margin : 0 auto 0 4px;
transform : translateY(-1px);
}
.chevron3:after {
height : 8px;
width : 8px;
}
.chevron4 {
margin : 5px auto 0 6px;
transform : translateY(-1px);
}
.chevron4:after {
height : 8px;
width : 8px;
}
}
@media only screen and (min-width: 768px) {
.chevronholder {
bottom : 15px;
width : 18px;
height : 18px;
left : calc(50% - 10px);
}
.chevron3 {
margin : 0 auto 0 4px;
transform : translateY(-3px);
}
.chevron3:after {
height : 8px;
width : 8px;
}
}
@media only screen and (min-width: 992px) {
.chevronholder {
bottom : 25px;
width : 22px;
height : 22px;
left : calc(50% - 12px);
}
.chevron3 {
margin : 0 auto 0 5px;
transform : translateY(-2px);
}
.chevron3:after {
height : 10px;
width : 10px;
}
.chevron4 {
margin : 5px auto 0 5px;
transform : translateY(-2px);
}
.chevron4:after {
height : 10px;
width : 10px;
}
}
@media only screen and (min-width: 1200px) {
.chevronholder {
bottom : 30px;
width : 22px;
height : 22px;
left : calc(50% - 12px);
}
.chevron3 {
margin : 0 auto 0 5px;
transform : translateY(-2px);
}
.chevron3:after {
height : 10px;
width : 10px;
}
.chevron4 {
margin : 5px auto 0 5px;
transform : translateY(-2px);
}
.chevron4:after {
height : 10px;
width : 10px;
}
}