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.
126 lines
2.7 KiB
126 lines
2.7 KiB
3 years ago
|
@media (min-width: 576px) {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
/* Header */
|
||
|
|
.header-top-block {
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.site-brand img {
|
||
|
|
max-height: 60px;
|
||
|
|
}
|
||
|
|
/* Header -> Page Header */
|
||
|
|
.page-header {
|
||
|
|
padding: 2rem 0 2rem 0;
|
||
|
|
}
|
||
|
|
/* Frontpage */
|
||
|
|
.homepage-content .block-title::before {
|
||
|
|
position: absolute;
|
||
|
|
content: '';
|
||
|
|
width: 40px;
|
||
|
|
height: 2px;
|
||
|
|
background: var(--primary);
|
||
|
|
top: 50%;
|
||
|
|
-webkit-transform: translateX(-50px);
|
||
|
|
transform: translateX(-50px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.homepage-content .block-title::after {
|
||
|
|
position: absolute;
|
||
|
|
content: '';
|
||
|
|
width: 40px;
|
||
|
|
height: 2px;
|
||
|
|
background: var(--primary);
|
||
|
|
top: 50%;
|
||
|
|
-webkit-transform: translateX(10px);
|
||
|
|
transform: translateX(10px);
|
||
|
|
}
|
||
|
|
.region-content-home-top .block:nth-child(odd) {
|
||
|
|
margin-bottom: 10rem;
|
||
|
|
}
|
||
|
|
.region-content-home-top .block:last-child:nth-child(odd) {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.region-content-home-top .block:nth-child(even) {
|
||
|
|
padding: 0 0 4rem 0;
|
||
|
|
}
|
||
|
|
.region-content-home-top .block:nth-child(even)::before {
|
||
|
|
position: absolute;
|
||
|
|
content: '';
|
||
|
|
top: -10rem;
|
||
|
|
left: 0;
|
||
|
|
height: 10rem;
|
||
|
|
width: 100%;
|
||
|
|
background: #f0f0f0;
|
||
|
|
clip-path: polygon(0 0, 100% 90%, 100% 100%, 0% 100%);
|
||
|
|
}
|
||
|
|
/* Notice */
|
||
|
|
.notice-block {
|
||
|
|
width: 98%;
|
||
|
|
}
|
||
|
|
.notice-block::before {
|
||
|
|
position: absolute;
|
||
|
|
content: '';
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
background-color: var(--secondary);
|
||
|
|
width: 95%;
|
||
|
|
height: 100%;
|
||
|
|
z-index: -1;
|
||
|
|
transform: rotate(-5deg);
|
||
|
|
}
|
||
|
|
.feature {
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 992px) {
|
||
|
|
/* Header */
|
||
|
|
.site-brand img {
|
||
|
|
max-height: 80px;
|
||
|
|
}
|
||
|
|
/* Header -> Main menu */
|
||
|
|
.menu-wrap ul.menu li {
|
||
|
|
background: linear-gradient(to bottom, transparent 50%, var(--dark) 50%);
|
||
|
|
background-size: 100% 200%;
|
||
|
|
transition: all 0.2s linear;
|
||
|
|
}
|
||
|
|
.menu-wrap ul.menu li:hover {
|
||
|
|
a {
|
||
|
|
|
||
|
|
color: var(--light);
|
||
|
|
}
|
||
|
|
background-position: 0 -100%;
|
||
|
|
}
|
||
|
|
ul.main-menu li a:hover {
|
||
|
|
color: var(--primary);
|
||
|
|
}
|
||
|
|
.menu-wrap .menu li span.dropdown-arrow {
|
||
|
|
-webkit-transition: all 0.3s ease-in-out;
|
||
|
|
-o-transition: all 0.3s ease-in-out;
|
||
|
|
transition: all 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
.menu-wrap ul.menu li.expanded:hover .dropdown-arrow,
|
||
|
|
.menu-wrap ul.menu li.collapsed:hover .dropdown-arrow {
|
||
|
|
-webkit-transform: rotate(135deg);
|
||
|
|
-ms-transform: rotate(135deg);
|
||
|
|
transform: rotate(135deg);
|
||
|
|
}
|
||
|
|
.menu-wrap ul.menu ul.submenu {
|
||
|
|
top: 36px;
|
||
|
|
background-color: var(--dark);
|
||
|
|
}
|
||
|
|
.menu-wrap ul.menu ul.submenu li {
|
||
|
|
border-bottom: 1px solid var(--primary);
|
||
|
|
}
|
||
|
|
.menu-wrap ul.menu ul.submenu li a:hover {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 1170px) {
|
||
|
|
/* Header */
|
||
|
|
.site-brand img {
|
||
|
|
max-height: 90px;
|
||
|
|
}
|
||
|
|
}
|