html,
body {
margin: 0;
padding: 0;
font-family:"Roboto", sans-serif;
font-weight:200;
background-color:white;
font-size:14px;
}
h1 {
line-height:120%;
}
.textBlock {
line-height:150%;
color:#555;
font-size:17px;
font-weight:200;
}
.mainImage {
width:100%;
height:100%;
background-image: url('/SITE-Images/HP1.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
}
.topNavWrapper {
width:100vw;
display:flex;
justify-content: center;
position: relative;
z-index:999;
}
.topNavBackground {
background-color:#c64438;
display:flex;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
position:fixed;
justify-content: center;
}
.topNav {
position: relative;
width:900px;
max-width:calc(100vw - 40px);
height:40px;
display:flex;
justify-content: space-between;
align-items: center;
color:white;
padding-left:20px;
padding-right:20px;
box-sizing: border-box;
z-index:999;
}
.topNavBackgroundRoll {
background-color:rgba(0, 0, 0, 0.9);
}
.topNavRoll {
width:100vw;
justify-content: space-around;
max-width:100vw;
}
.menuOpt, .subMnuOpt {
font-size:18px;
cursor:pointer;
}
.menuOpt:hover, .subMnuOpt:hover {
color:#c64e36;
cursor:pointer;
}
.menuOpt a, .subMnuOpt a {
color:white;
text-decoration: none;
cursor:pointer;
}
.menuOpt a:visited, .subMnuOpt a:visited {
color:white;
}
.menuOpt a:hover {
color:black;
}
.subMnuOpt a:hover {
color:#c64e36;
cursour:pointer;
}
.splash {
top:60vh;
left:50%;
margin-left:-450px;
position:absolute;
display:flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width:900px;
opacity:0;
z-index:1;
background-color:rgb(0,0,0,.3);
border-radius:10px;
}
.splashLogoBG {
background:white;
border-radius:6px;
padding:10px;
box-sizing: border-box;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.splash h1 {
font-size:38px;
color:white;
font-family:arial;
font-weight:400;
-webkit-text-stroke:2px #444;
paint-order: stroke fill;
}
.mainImage h1 {
font-size:38px;
color:white;
font-family:arial;
font-weight:800;
}
.b1 {
padding:15px;
border-radius:3px;
background-color:orange;
display:flex;
justify-content: center;
align-items: center;
color:white;
width:300px;
font-size:22px;
cursor:pointer;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
margin-bottom:20px;
}
.b1:hover {
background-color: yellowgreen;
}
#moreinfo {
width:1100px;
max-width:90vw;
line-height:140%;
text-align:left;
padding-top:50px;
}
.ctaOutter {
display:flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.ctaOutter a {
text-decoration: none;
color:black;
text-align: center;
}
.ctaOutter a:visited {
color:black;
}
.ctaOutter a:hover {
font-weight:bold;
}
.ctaWrapper {
display:flex;
justify-content: space-evenly;
flex-wrap: wrap;
margin-top:20px;
}
.ctaBox {
width:240px;
height:300px;
margin:10px;
background-color:cornflowerblue;
box-sizing: border-box;
border-radius:4px;
}
.ctaBox img {
border-radius:4px;
box-sizing: border-box;
border:2px solid silver;
}
.ctaBox img:hover {
filter: grayscale(100%);
border-color: cornflowerblue;
cursor:pointer;
}
.mobileTopBar {
display:none;
}
.subMenu {
display:flex;
flex-direction:column;
position:absolute;
margin-top:30px;
margin-left:-20px;
display:none;
}
.subMenu div {
display:flex;
align-items:center;
background-color:rgba(0, 0, 0, 0.7);
color:white;
font-size:16px;
height:30px;
padding-left:20px;
padding-right:20px;
border-top:1px solid #444;
cursor:pointer;
}
.subMenu div:hover {
color:orange;
}
.groupMenu {
display:flex;
flex-direction:column;
}
.teaserWrapper {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.teaserBlock {
display:flex;
flex-direction: column;
justify-content: center;
align-items:center;
font-size:16px;
margin:20px;
}
.teaserImage {
width:200px;
height:240px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
border-radius:4px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.teasertext {
color:#444;
margin-top:14px;
}
.teaserImage:hover {
box-shadow: rgba(0, 50, 0, 0.25) 0px 54px 55px, rgba(0, 50, 0, 0.12) 0px -12px 30px, rgba(0, 50, 0, 0.12) 0px 4px 6px, rgba(0, 50, 0, 0.17) 0px 12px 13px, rgba(0, 50, 0, 0.09) 0px -3px 5px;
}
@media only screen and (max-width: 1000px) {
.splash {
width:90vw;
margin-left:-45vw;
}
.splash h1 {
font-size:28px;
}
}
@media only screen and (max-width: 768px) {
.splash {
top:60%;
flex-direction:column;
justify-content: center;
width:90vw;
margin-left:-45vw;
}
.splash h1 {
font-size:28px;
}
.splashLogoBG {
margin-top:20px;
}
.topNavWrapper {
display:none;
}
.subMenu {
position:relative;
margin:0;
display:none;
}
.topNav {
position: relative;
width:70vw;
height:auto;
display:flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
color:white;
padding:0;
box-sizing: border-box;
z-index:999;
}
.menuOpt {
height:40px;
width:70vw;
display:flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
border-top:1px solid #222;
font-size:22px;
}
.menuOpt .subMenu {
display:none;
width:40vw;
margin-left:40px;
}
.subMnuOpt a:visited {
color:white;
}
.subMnuOpt a:hover {
color:#c64e36;
}
.menuOpt:hover, .subMnuOpt:hover {
background-color:#eee;
color:black;
}
.mobileTopBar {
display:flex;
width:100vw;
justify-content: space-between;
align-items:center;
position:fixed;
background-color:black;
color:white;
height:40px;
box-sizing: border-box;
font-size:20px;
z-index:900;
}
.topNavBackground {
top:40px;
background-color:rgba(0, 0, 0, 0.7);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-sizing: border-box;
}
.teaserWrapper {
display:flex;
justify-content: center;
}
.teaserBlock {
display:block;
box-sizing: border-box;
}
.teaserImage {
width:80vw;
height:calc(90vw * 1.2);
}
}