395 lines
No EOL
7 KiB
SCSS
395 lines
No EOL
7 KiB
SCSS
@charset "utf-8";
|
||
@import "~bulma";
|
||
// @import "@fontsource/open-sans"; // Defaults to weight 400.
|
||
@import "~@openfonts/open-sans_all/index.css";
|
||
|
||
.button {
|
||
text-decoration: none;
|
||
// border: 1px solid #fff;
|
||
&.is-primary {
|
||
background-color: #33cccc;
|
||
border-color: transparent;
|
||
color: #fff;
|
||
&:hover {
|
||
color: #fff;
|
||
background-color: #336699;
|
||
text-decoration: none;
|
||
border: 1px solid #fff;
|
||
}
|
||
}
|
||
&.custom-button {
|
||
// display: block;
|
||
|
||
width: 125px;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
font-size: 0.9em;
|
||
text-decoration: none;
|
||
border: 1px solid transparent;
|
||
// .fas {
|
||
// margin-right: 0.6em;
|
||
// // border-right: 1px solid #fff;
|
||
// width: 2em;
|
||
|
||
// };
|
||
.fas {
|
||
margin-right: 0.6em;
|
||
border-right: 1px solid #fff;
|
||
padding: 0.6em;
|
||
};
|
||
// strong {
|
||
// border-left: 1px solid #fff;
|
||
// padding-left: 0.6em;
|
||
// }
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.header-image {
|
||
background-image: url("./../site/img/Main-banner-homepage-xl.jpg");
|
||
background-size: cover;
|
||
background-position: top center;
|
||
background-repeat: no-repeat;
|
||
min-height: 562px;
|
||
}
|
||
.align-items-center {
|
||
-webkit-box-align: center !important;
|
||
-ms-flex-align: center !important;
|
||
align-items: center !important;
|
||
}
|
||
.h-100 {
|
||
height: 100% !important;
|
||
}
|
||
|
||
/* =Section general styling
|
||
-------- */
|
||
// section {
|
||
// text-align: center;
|
||
// padding: 60px 0 0 0;
|
||
// }
|
||
// section.normal {
|
||
// text-align: left;
|
||
// }
|
||
|
||
// .content-container {
|
||
// margin-top: 25px;
|
||
// }
|
||
// /*
|
||
|
||
|
||
.help:before {
|
||
background: url("./../site/img/Main-banner-homepage-xl.jpg");
|
||
}
|
||
|
||
.featured-bg-image {
|
||
position: relative;
|
||
/* background-color: #222222; */
|
||
background-color: gray;
|
||
color: white;
|
||
min-height: 500px;
|
||
}
|
||
.featured-bg-image:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
background-size: cover;
|
||
background-position: 50% 50%;
|
||
background-repeat: no-repeat;
|
||
// opacity: .35;
|
||
|
||
// background-size: cover;
|
||
// background-position: top center;
|
||
// background-repeat: no-repeat;
|
||
min-height: 562px;
|
||
}
|
||
/* Utilities
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
.u-full-width {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.text-center {
|
||
text-align: center !important;
|
||
}
|
||
.py-3 {
|
||
padding-top: 1rem !important;
|
||
padding-bottom: 1rem !important;
|
||
}
|
||
hr.center-line {
|
||
background: #33cccc;
|
||
}
|
||
|
||
hr.center-line {
|
||
border: 0;
|
||
height: 3px;
|
||
width: 185px;
|
||
position: relative;
|
||
margin: 1.65em auto;
|
||
opacity: 1;
|
||
}
|
||
body H1 {
|
||
// font-family: Verdana;
|
||
text-transform: uppercase;
|
||
font-weight: bold;
|
||
font-size: 1.6em;
|
||
line-height: 1.75em;
|
||
}
|
||
.lead {
|
||
font-size: 1em;
|
||
font-weight: bold;
|
||
// font-family: Verdana;
|
||
color: #495057;
|
||
margin: 0;
|
||
}
|
||
|
||
.mt-4 {
|
||
margin-top: 1.5rem !important;
|
||
}
|
||
.text-left {
|
||
text-align: left!important;
|
||
}
|
||
|
||
|
||
|
||
|
||
html,
|
||
body {
|
||
font-family: "Open Sans", sans-serif;
|
||
// font-size: 0.92rem;
|
||
margin: 0;
|
||
font-size: 1rem;
|
||
font-weight: 400;
|
||
line-height: 1.5;
|
||
color: #212529;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.columns {
|
||
margin: 0;
|
||
}
|
||
|
||
/*footer {*/
|
||
/* !*position: absolute;*!*/
|
||
/* bottom: 0;*/
|
||
/* width: 100%;*/
|
||
/*}*/
|
||
|
||
.site {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.site-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.search-button-icon {
|
||
color: rgb(219, 219, 219);
|
||
}
|
||
|
||
.search-button-icon:hover {
|
||
color: rgb(74, 74, 74);
|
||
}
|
||
|
||
|
||
.hide {
|
||
display: none;
|
||
}
|
||
|
||
// .animate_content {
|
||
// animation: animate 3s ease;
|
||
// }
|
||
|
||
// @keyframes animate {
|
||
// 10% {
|
||
// transform: scale(1, 0.004);
|
||
// }
|
||
// 35% {
|
||
// transform: scale(0.001, 0.004);
|
||
// opacity: 1;
|
||
// }
|
||
// 50% {
|
||
// transform: scale(0.001, 0.004);
|
||
// opacity: 0;
|
||
// }
|
||
// 85% {
|
||
// transform: scale(1, 0.004);
|
||
// opacity: 1;
|
||
// }
|
||
// 100% {
|
||
// transform: scale(1, 1);
|
||
// }
|
||
// }
|
||
|
||
.page_description {
|
||
font-weight: 300;
|
||
text-align: center;
|
||
}
|
||
|
||
.page_style {
|
||
background: transparent;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: auto;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
#home_padding {
|
||
margin-top: 7%;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
#featured_area {
|
||
display: none;
|
||
}
|
||
|
||
#home_message {
|
||
display: none;
|
||
}
|
||
|
||
#home_padding {
|
||
margin-top: 15%;
|
||
}
|
||
#firefox_button,
|
||
#chrome_button,
|
||
#opera_button {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 769px) {
|
||
.autocomplete-column.is-offset-one-quarter,
|
||
.autocomplete-column.is-offset-one-quarter-tablet {
|
||
margin-left: 25%;
|
||
}
|
||
|
||
.autocomplete-column.is-half,
|
||
.autocomplete-column.is-half-tablet {
|
||
flex: none;
|
||
width: 50%;
|
||
}
|
||
}
|
||
|
||
.navbar {
|
||
padding-top: 0.5rem;
|
||
padding-bottom: 0.5rem;
|
||
// display:flex;
|
||
// justify-content:center;
|
||
}
|
||
|
||
.border-bottom {
|
||
border-bottom: 1px solid #dee2e6 !important;
|
||
}
|
||
|
||
.navbar .navbar-item {
|
||
// padding-right: 2.2em;
|
||
padding-left: 2.2em;
|
||
}
|
||
.navbar-light .navbar-link:focus,
|
||
.navbar-light .navbar-link:hover {
|
||
color: rgba(0, 0, 0, 0.7);
|
||
}
|
||
.navbar-link.router-link-active,
|
||
.navbar-link:hover {
|
||
border-bottom: 2px solid #33cccc;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.navbar-light .navbar-menu .navbar-item {
|
||
// font-family: Verdana, sans-serif;
|
||
color: #212529;
|
||
font-size: 0.9em;
|
||
font-weight: 700;
|
||
}
|
||
.navbar-item img {
|
||
max-height: 6rem;
|
||
}
|
||
|
||
|
||
|
||
|
||
.card {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
word-wrap: break-word;
|
||
background-color: #fff;
|
||
background-clip: border-box;
|
||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||
border-radius: 0.25rem;
|
||
}
|
||
|
||
.card-body {
|
||
-webkit-box-flex: 1;
|
||
-ms-flex: 1 1 auto;
|
||
flex: 1 1 auto;
|
||
padding: 1rem 1rem;
|
||
}
|
||
|
||
.text-white {
|
||
color: #fff !important;
|
||
}
|
||
|
||
// .work-front {
|
||
// position: absolute;
|
||
// top: 5%;
|
||
// left: 5%;
|
||
// }
|
||
.work-front {
|
||
display: flex;
|
||
}
|
||
.work-front .box-1,
|
||
.work-front .box-2,
|
||
.work-front .box-3 {
|
||
position: absolute;
|
||
top: 85%;
|
||
left: 50%;
|
||
-webkit-transform: translate(-50%, -50%);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
// .work-back {
|
||
// position: absolute;
|
||
// top: 5%;
|
||
// left: 5%;
|
||
// }
|
||
.work-back {
|
||
display: none;
|
||
}
|
||
.work-back .box-1-hover {
|
||
position: absolute;
|
||
top: 5%;
|
||
left: 5%;
|
||
opacity: 0.9;
|
||
padding: 2%;
|
||
}
|
||
|
||
.custom-heading {
|
||
font-family: Verdana;
|
||
font-weight: bold;
|
||
font-size: 1.2em;
|
||
line-height: 1.9em;
|
||
color: #fff;
|
||
}
|
||
|
||
.work-items div:hover .work-back {
|
||
display: flex;
|
||
/* box-shadow: inset 0 0 0 10px #222; */
|
||
}
|
||
.work-items div:hover .work-front {
|
||
display: none;
|
||
} |