/* ___________________________________ Basics ___________________________________ */
body {
font-family: 'Asap', sans-serif;
height: 100%;
position:absolute;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
color: #333;
}
a {
color: #e21837;
}
.noRedLink a,
.noRedLink {
color: #425893;
}
a:hover,
a:focus {
text-decoration: none;
}
hr {
border: 1px solid #cee8e3;
}
dialogbox {
padding: 29px;
}
dialogboxclose {
top: 6px;
right: 12px;
}
img {
max-width: 100%;
}
/* ___________________________________ Fonts ___________________________________ */
#main-content-area h1,
h1 {
font-family: 'Asap', sans-serif;
font-size: 65px;
font-weight: 600;
text-transform: uppercase;
}
#main-content-area h2, h2 {
font-size:45px;
margin:30px 0;
font-style: italic;
}
#main-content-area h3,
h3 {
font-size: 28px;
line-height: 32px;
}
#main-content-area h4,
h4 {
font-size: 30px;
font-style: italic;
}
#main-content-area h5,
h5 {
font-weight: 700;
font-style: italic;
font-size: 24px;
margin-bottom: 20px;
line-height: 22px;
}
#main-content-area p,
p {
font-weight: 300;
font-size: 20px;
margin-bottom: 20px;
line-height: 22px;
}
/* ___________________________________ menu ___________________________________ */
.menuContainer {
}
.menuHeight {
height:96px;
}
.navbar {
margin-bottom:0px;
}
.fixed-top {
position: fixed;
width:100%;
z-index:10;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.shadowmenu{
webkit-box-shadow: 0px 16px 132px -41px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 16px 132px -41px rgba(0,0,0,0.75);
box-shadow: 0px 16px 132px -41px rgba(0,0,0,0.75);
}
.whitebg {
background-color:white;
}
.white a, .white, .white i, .white a i{
color:white;
}
.logoContainer {
width:240px;
}
.logoSmallContainer {
width:77px;
}
.rightMenu > * {
color: #333;
margin-left:15px;
font-size:16px;
}
.rightMenu {
margin-right:10px;
}
#main-Menu li a{
margin-right:15px;
color: #333;
font-size:16px;
padding:36px 0;
border-top: 4px solid rgba(255, 0, 0, 0);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#main-Menu > li:hover > a{
border-top: 4px solid #e21837;
}
#main-Menu li ul li a {
border-top:0;
padding: 20px;
margin-right:0;
}
#main-Menu li ul li {
margin-right:0;
}
#main-Menu li > ul {
background-color:white;
-webkit-box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
-moz-box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
}
#main-Menu li ul li a:hover {
border-top:0;
background-color:#333;
color:white;
}
.s8-navigationPrimaryMobile {
display:none;
}
/* ___________________________________ slider ___________________________________ */
#featured_rotator img , .cover, .maskBottom, .maskTop {
height: 800px;
}
.banner {
position: relative;
width:100%;
}
.cover {
position: absolute;
width:100%;
top:0;
left:0;
background: rgb(66,15,61);
background: linear-gradient(117deg, rgba(66,15,61,1) 0%, rgba(0,87,79,1) 100%);
opacity:0.5;
}
.maskBottom {
position: absolute;
width:100%;
bottom:-2px;
right:-4px;
background: url('/media/website_designs/7/maskbottom.png') no-repeat right bottom;
background-size: 110%;
}
.maskTop {
position: absolute;
width:100%;
top:97px;
left:-3px;
background: url('/media/website_designs/7/masktop3.png') no-repeat left top;
background-size: 100%;
}
.containerBanner{
color:white;
}
.textbanner {
position: absolute;
color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#bannerMovePrevious,
#bannerMoveNext,
#TopbannerMovePrevious,
#TopbannerMoveNext {
bottom: 50%;
position: absolute;
opacity: 0;
}
.banner:hover #bannerMovePrevious,
.banner:hover #bannerMoveNext,
.topBanner:hover #TopbannerMovePrevious,
.topBanner:hover #TopbannerMoveNext {
opacity: 0.5;
}
.banner:hover #bannerMovePrevious:hover,
.banner:hover #bannerMoveNext:hover,
.topBanner:hover #TopbannerMovePrevious:hover,
.topBanner:hover #TopbannerMoveNext:hover {
opacity: 1;
}
#bannerMovePrevious,
#TopbannerMovePrevious {
left: 30px;
}
#bannerMoveNext,
#TopbannerMoveNext {
right: 30px;
}
#bannerMovePrevious img,
#bannerMoveNext img,
#TopbannerMovePrevious img,
#TopbannerMoveNext img {
width: 35px;
}
#featured_rotator img {
object-fit:cover;
width:100%;
max-height:100%;
}
/* ___________________________________ FORM STYLES ___________________________________ */
input,
textarea {
padding: 10px 12px;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
}
.turquoisegradient {
margin-top: 0;
background: rgb(76,216,255);
background: linear-gradient(27deg, rgba(76,216,255,1) 0%, rgba(30,255,234,1) 79%);
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: white;
transition: all 0.2s ease;
}
.turquoisegradient:hover {
background: rgb(31,193,237);
background: linear-gradient(27deg, rgba(31,193,237,1) 0%, rgba(80,30,255,1) 98%);
color: white;
}
.turquoise {
margin-top: 0;
border: 2px solid #75d7cc;
background: #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
transition: all 0.2s ease;
}
.turquoise:hover {
border: 2px solid white;
background: white;
color: #75d7cc;
}
.turquoiseborderwhite {
margin-top: 0;
border: 2px solid #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
transition: all 0.2s ease;
}
.turquoiseborderwhite:hover {
color: #ffffff;
background-color: #75d7cc;
}
.turquoiseborder {
margin-top: 0;
border: 2px solid #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #425893;
transition: all 0.2s ease;
}
.turquoiseborder:hover {
color: #ffffff;
background-color: #75d7cc;
}
.blueborder {
margin-top: 0;
border: 2px solid #425893;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #425893;
transition: all 0.2s ease;
}
.blueborder:hover {
color: #ffffff;
background-color: #425893;
}
.boxed .rouge {
font-size: 18px;
}
button[type=submit], .btn-red, .red-btn, .rouge {
margin-top: 0;
background-color: #d91f2f;
border: 0px solid #d91f2f;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
}
.btn-red, .red-btn, .rouge {
margin-top:20px;
position:relative;
}
.btn-red:hover, .red-btn:hover, .rouge:hover {
color: #ffffff;
background-color: #be1a28;
}
.btn-red:visited, .red-btn:visited, .rouge:visited {
color: #ffffff;
}
.btn-red:focus, .red-btn:focus, .rouge:focus {
color: #ffffff;
}
.dataShowMore {
margin-top: 0;
border: 2px solid #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #425893;
transition: all 0.2s ease;
}
.dataShowMore:visited {
}
.dataShowMore:hover {
color: #ffffff;
background-color: #75d7cc;
}
.dataShowMore::before,
.dataShowMore::after {
background-image: url('/media/website_designs/6/img/arrow2.png');
}
div.formRow {
/*background: none; font-size: 1.25em; color:#425893;*/
font-size: 1.25em;
color: #425893;
margin-bottom: 5px;
background-color: #e9f6f3;
padding: 10px;
border-radius: 5px;
}
/* ___________________________________ magins & paddings ___________________________________ */
.padding-top120 {
padding-top:120px;
}
/* ___________________________________ flex layout ___________________________________ */
.flexheight {
display: flex; /* or inline-flex */
flex-direction:column;
justify-content: space-between;
}
/* ___________________________________ Content ___________________________________ */
.fullheight {
min-height: 100%;
}
.fullheightGreen {
background: rgb(255,234,253);
background: linear-gradient(129deg, rgba(255,234,253,1) 0%, rgba(206,249,245,1) 100%);
min-height: 100%;
}
.fullheightBlue {
background-color: blue;
min-height: 100%;
}
.centered {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.bluediv {
width:200px;
background-color: blue;
padding:20px;
margin-left:10px;
}
/* ___________________________________ RESPONSIVE BREAKPOINT STYLES ___________________________________ */
@media screen and (max-width:991px) {
.rightMenu > * {
color: #333;
}
.logoSmallContainer {
width: 90px;
}
.s8-navigationPrimary {
display:none;
}
}
@media screen and (max-width: 767px) {
dialogbox {
width:80%!important;
}
}
/* ___________________________________ Basics ___________________________________ */
body {
font-family: 'Asap', sans-serif;
height: 100%;
position:absolute;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
color: #333;
}
a {
color: #e21837;
}
.noRedLink a,
.noRedLink {
color: #425893;
}
a:hover,
a:focus {
text-decoration: none;
}
hr {
border: 1px solid #cee8e3;
}
dialogbox {
padding: 29px;
}
dialogboxclose {
top: 6px;
right: 12px;
}
img {
max-width: 100%;
}
/* ___________________________________ Fonts ___________________________________ */
#main-content-area h1,
h1 {
font-family: 'Asap', sans-serif;
font-size: 65px;
font-weight: 600;
text-transform: uppercase;
}
#main-content-area h2, h2 {
font-size:45px;
margin:30px 0;
font-style: italic;
}
#main-content-area h3,
h3 {
font-size: 28px;
line-height: 32px;
}
#main-content-area h4,
h4 {
font-size: 30px;
font-style: italic;
}
#main-content-area h5,
h5 {
font-weight: 700;
font-style: italic;
font-size: 24px;
margin-bottom: 20px;
line-height: 22px;
}
#main-content-area p,
p {
font-weight: 300;
font-size: 20px;
margin-bottom: 20px;
line-height: 22px;
}
/* ___________________________________ menu ___________________________________ */
.menuContainer {
}
.menuHeight {
height:96px;
}
.navbar {
margin-bottom:0px;
}
.fixed-top {
position: fixed;
width:100%;
z-index:10;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.shadowmenu{
webkit-box-shadow: 0px 16px 132px -41px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 16px 132px -41px rgba(0,0,0,0.75);
box-shadow: 0px 16px 132px -41px rgba(0,0,0,0.75);
}
.whitebg {
background-color:white;
}
.white a, .white, .white i, .white a i{
color:white;
}
.logoContainer {
width:240px;
}
.logoSmallContainer {
width:77px;
}
.rightMenu > * {
color: #333;
margin-left:15px;
font-size:16px;
}
.rightMenu {
margin-right:10px;
}
#main-Menu li a{
margin-right:15px;
color: #333;
font-size:16px;
padding:36px 0;
border-top: 4px solid rgba(255, 0, 0, 0);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#main-Menu > li:hover > a{
border-top: 4px solid #e21837;
}
#main-Menu li ul li a {
border-top:0;
padding: 20px;
margin-right:0;
}
#main-Menu li ul li {
margin-right:0;
}
#main-Menu li > ul {
background-color:white;
-webkit-box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
-moz-box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
}
#main-Menu li ul li a:hover {
border-top:0;
background-color:#333;
color:white;
}
.s8-navigationPrimaryMobile {
display:none;
}
/* ___________________________________ slider ___________________________________ */
#featured_rotator img , .cover, .maskBottom, .maskTop {
height: 800px;
}
.banner {
position: relative;
width:100%;
}
.cover {
position: absolute;
width:100%;
top:0;
left:0;
background: rgb(66,15,61);
background: linear-gradient(117deg, rgba(66,15,61,1) 0%, rgba(0,87,79,1) 100%);
opacity:0.5;
}
.maskBottom {
position: absolute;
width:100%;
bottom:-2px;
right:-4px;
background: url('/media/website_designs/7/maskbottom.png') no-repeat right bottom;
background-size: 110%;
}
.maskTop {
position: absolute;
width:100%;
top:97px;
left:-3px;
background: url('/media/website_designs/7/masktop3.png') no-repeat left top;
background-size: 100%;
}
.containerBanner{
color:white;
}
.textbanner {
position: absolute;
color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#bannerMovePrevious,
#bannerMoveNext,
#TopbannerMovePrevious,
#TopbannerMoveNext {
bottom: 50%;
position: absolute;
opacity: 0;
}
.banner:hover #bannerMovePrevious,
.banner:hover #bannerMoveNext,
.topBanner:hover #TopbannerMovePrevious,
.topBanner:hover #TopbannerMoveNext {
opacity: 0.5;
}
.banner:hover #bannerMovePrevious:hover,
.banner:hover #bannerMoveNext:hover,
.topBanner:hover #TopbannerMovePrevious:hover,
.topBanner:hover #TopbannerMoveNext:hover {
opacity: 1;
}
#bannerMovePrevious,
#TopbannerMovePrevious {
left: 30px;
}
#bannerMoveNext,
#TopbannerMoveNext {
right: 30px;
}
#bannerMovePrevious img,
#bannerMoveNext img,
#TopbannerMovePrevious img,
#TopbannerMoveNext img {
width: 35px;
}
#featured_rotator img {
object-fit:cover;
width:100%;
max-height:100%;
}
/* ___________________________________ FORM STYLES ___________________________________ */
input,
textarea {
padding: 10px 12px;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
}
.turquoisegradient {
margin-top: 0;
background: rgb(76,216,255);
background: linear-gradient(27deg, rgba(76,216,255,1) 0%, rgba(30,255,234,1) 79%);
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: white;
transition: all 0.2s ease;
}
.turquoisegradient:hover {
background: rgb(31,193,237);
background: linear-gradient(27deg, rgba(31,193,237,1) 0%, rgba(80,30,255,1) 98%);
color: white;
}
.turquoise {
margin-top: 0;
border: 2px solid #75d7cc;
background: #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
transition: all 0.2s ease;
}
.turquoise:hover {
border: 2px solid white;
background: white;
color: #75d7cc;
}
.turquoiseborderwhite {
margin-top: 0;
border: 2px solid #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
transition: all 0.2s ease;
}
.turquoiseborderwhite:hover {
color: #ffffff;
background-color: #75d7cc;
}
.turquoiseborder {
margin-top: 0;
border: 2px solid #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #425893;
transition: all 0.2s ease;
}
.turquoiseborder:hover {
color: #ffffff;
background-color: #75d7cc;
}
.blueborder {
margin-top: 0;
border: 2px solid #425893;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #425893;
transition: all 0.2s ease;
}
.blueborder:hover {
color: #ffffff;
background-color: #425893;
}
.boxed .rouge {
font-size: 18px;
}
button[type=submit], .btn-red, .red-btn, .rouge {
margin-top: 0;
background-color: #d91f2f;
border: 0px solid #d91f2f;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
}
.btn-red, .red-btn, .rouge {
margin-top:20px;
position:relative;
}
.btn-red:hover, .red-btn:hover, .rouge:hover {
color: #ffffff;
background-color: #be1a28;
}
.btn-red:visited, .red-btn:visited, .rouge:visited {
color: #ffffff;
}
.btn-red:focus, .red-btn:focus, .rouge:focus {
color: #ffffff;
}
.dataShowMore {
margin-top: 0;
border: 2px solid #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #425893;
transition: all 0.2s ease;
}
.dataShowMore:visited {
}
.dataShowMore:hover {
color: #ffffff;
background-color: #75d7cc;
}
.dataShowMore::before,
.dataShowMore::after {
background-image: url('/media/website_designs/6/img/arrow2.png');
}
div.formRow {
/*background: none; font-size: 1.25em; color:#425893;*/
font-size: 1.25em;
color: #425893;
margin-bottom: 5px;
background-color: #e9f6f3;
padding: 10px;
border-radius: 5px;
}
/* ___________________________________ magins & paddings ___________________________________ */
.padding-top120 {
padding-top:120px;
}
/* ___________________________________ flex layout ___________________________________ */
.flexheight {
display: flex; /* or inline-flex */
flex-direction:column;
justify-content: space-between;
}
/* ___________________________________ Content ___________________________________ */
.fullheight {
min-height: 100%;
}
.fullheightGreen {
background: rgb(255,234,253);
background: linear-gradient(129deg, rgba(255,234,253,1) 0%, rgba(206,249,245,1) 100%);
min-height: 100%;
}
.fullheightBlue {
background-color: blue;
min-height: 100%;
}
.centered {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.bluediv {
width:200px;
background-color: blue;
padding:20px;
margin-left:10px;
}
/* ___________________________________ RESPONSIVE BREAKPOINT STYLES ___________________________________ */
@media screen and (max-width:991px) {
.rightMenu > * {
color: #333;
}
.logoSmallContainer {
width: 90px;
}
.s8-navigationPrimary {
display:none;
}
}
@media screen and (max-width: 767px) {
dialogbox {
width:80%!important;
}
}