:root {
	--resizeFactor: 1.0;
	/*Factor to multiply all sizes. This factor is created by javascript on page resize or load.*/
    --fontFamily: Arial, Helvetica, sans-serif;
    /*Generic font family for the entire site*/
    --backgroundColor1: #c1ccc8;
    /*Main text area background*/
    --backgroundColor2: #dee4e2;
    /*Main text area background*/
    --textColor1: #36454f;
    /*Main text area font colour*/
    --bannerTextColor: white;
    /*Colour of the slide in text on the main top banner*/
    --buttonBackground: white;
    /*Colour of the background of the site buttons*/
    --buttonBackgroundHover: lightgray;
    /*Colour of the background of the site buttons when in hover*/
    --buttonTextColor: #808080;
    /*Colour of the text of the site buttons*/
    --buttonTextColorHover: black;
    /*Colour of the text of the site buttons when in hover*/
    --navBarLogoTextColor: white;
    /*Colour of the text in the main logo/name in the top bar*/
    --navBarLogoTextSize: calc(20px + 1vw);
    /*Size of the text in the main logo/name in the top bar*/
    --navBarBackground: black;
    /*Colour of the top bar*/
    --navBarTextColor: white;
    /*Colour of the links in the top bar*/
    --navBarTextColorHover: gray;
    /*Colour of the text in the top bar when in hover*/
    --navBarBackgroundColorHover: black;
    /*Colour of the background in the top bar when in hover*/
    --navBarTextSize: calc(2px + 1vw);
    /*Size of the text for the links in the top bar*/
    --textDetailsFontSize: calc(8px + 1vw);
    /*Size of the text for the main text*/
    --textFillDetailsFontSize: calc(20px + 1vw);
    /*Size of the text for the address    --textFillDetailsSplash: calc(5px + 3.2vw);    */
    --textFillDetailsSplash: calc(-2px + 5.2vw);
    /*Size of the text in the main sliding banner*/
    --textDetailsFooterFontSize: calc(10px + 0.5vw);
    /*Size of the smaller text in the main sliding banner*/
    --textDetailsFooterFontSizeSmaller: calc(8px + 0.5vw);
    /*Size of the text for the main text in the footer*/
    --textColorFooter1: white;
    /*Colour of the text for the main text in the footer*/
    /*--footerHeaderBackgroundColor1: #1e1d1d;*/
    --footerHeaderBackgroundColor1: #1e1d1d;
    /*Colour of the footer and header background*/
    --iconBackground: #dfeae6;
    /*Colour of the background of icon backgrounds home page*/
    --captionFontSize: calc(8px + 0.8vw);
}

a {
    text-decoration: none;
    color: #36454f;
}

a:hover {
    color: black;
    text-decoration: underline;
}

.table th,
.table td {
    border-top: 0;
}

.body {
    background-color: var(--backgroundColor1);
}

.footer-layout {
    background-color: var(--footerHeaderBackgroundColor1);
    padding-left: 10%;
    padding-right: 10%;
}

.nav-bar-fised {
    z-index: 10 !important;
}

.nav-wrapper-extended {
    background: var(--navBarBackground);
    padding-left: 10%;
    padding-right: 10%;
    color: var(--navBarTextColor);
    /*font-size: var(--navBarTextSize);*/
    font-size: 10px !important;
}

.nav-components {
    font-size: var(--navBarTextSize);
    color: var(--navBarTextColor);
}

.nav-wrapper-image {
    height: calc(40px);
    width: calc(40px);
    vertical-align: middle;
}

.nav-wrapper-mobile-image {
    height: 40px;
    width: 40px;
    vertical-align: middle;
    margin-top: 10%;
}

.nav-wrapper-mobile {
    background: var(--navBarBackground);
    padding-left: 10%;
    padding-right: 10%;
    color: var(--navBarTextColor);
    font-family: var(--fontFamily);
    font-size: 24;
}

.nav-wrapper-mobile-components {
    background: var(--navBarBackground);
    color: var(--navBarTextColor);
    font-family: var(--fontFamily);
    font-size: 24;
}

.nav-wrapper-mobile-components:hover {
    font-size: 24;
    color: gray !important;
    background: var(--navBarBackground) !important;
}

.nav-wrapper-mobile-new {
    background: var(--navBarBackground);
    padding-left: 20% !important;
    padding-right: 10%;
    color: var(--navBarTextColor);
    font-family: var(--fontFamily);
    font-size: 24;
}

.nav-wrapper-mobile-new:hover {
    font-size: 24;
    color: gray !important;
    background-color: var(--navBarBackgroundColorHover) !important;
}

.nav-components:hover {
    font-size: var(--navBarTextSize);
    color: var(--navBarTextColorHover);
    border: 0px solid red;
}

.brand-logo-extended {
    font-size: var(--navBarLogoTextSize) !important;
    color: var(--navBarLogoTextColor) !important;
    width: calc(30vw);
    min-width: 300px;
}

.parent {
    object-fit: contain;
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 100%;
    border: 0px solid RED;
   
}

.child {
    text-align: center;
    font-family: var(--fontFamily);
    font-size: 42;
    font-weight: normal;
    line-height: 120%;
    color: #36454f;
    padding-left: 10%;
    padding-right: 10%;
    display: inline-block;
    border: 0px solid red;
    padding: 1rem 1rem;
    vertical-align: top;
    margin: 5px;
}

.brand-logo-text {
    font-size: 42 !important;
    color: red;
}

.parent1 {
    background-image: url("images/scroll.png");
    background-width: 2000px;
    border: 0px solid blue;
    animation: fadeIn 1.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.parent2 {
    background-width: 2000px;
    border: 0px solid blue;
    height: calc(100px + 10vw) !important;
}

.transparent-img {
    max-height: 360px;
    opacity: 0;
}

.details-icon {
    width: 120px;
    height: 120px;
}

.text-fill-index {
    text-align: center;
    padding: 70px 0;
    background-color: var(--backgroundColor1);
    font-family: var(--fontFamily);
    font-size: 42;
    font-weight: normal;
    line-height: 120%;
    color: var(--textColor1);
    padding-left: 10%;
    padding-right: 10%;
    border: 0px black;
    height: calc(50px + 1vw) !important;
}

.text-fill-banner {
    align: center;
    text-align: center;
    padding: 0px 0;
    background-color: var(--backgroundColor1);
    font-family: var(--fontFamily);
    font-size: 40;
    font-weight: normal;
    line-height: 120%;
    color: #e5e4e2;
    padding-left: 0%;
    padding-right: 0%;
    border: 0px solid yellow;
    position: relative;
    height: calc(80px + 2vw);
}

.text-fill-banner-splash-generic {
    margin-left: 0;
    margin-top: calc(120px + 8vw);
    text-align: center;
    padding: 0px 0;
    font-family: var(--fontFamily);
    font-size: calc(28px + 1.75vw) !important;
    font-weight: normal;
    line-height: 120%;
    text-shadow: 0px 0px 20px black, 0px 0px 20px black, 0px 0px 20px black;
    /*
	color: #E5E4E2;
	*/
    color: var(--bannerTextColor);
    padding-top: calc(30px - 0.4vw);
    padding-left: 10%;
    padding-right: 10%;
    border: 0px solid red;
    transition: 0.4s ease;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.text-fill-banner-splash-small {
    margin-left: 0;
    margin-top: 0%;
    text-align: center;
    padding: 0px 0;
    font-family: var(--fontFamily);
    font-size: calc(20px + 1.75vw) !important;
    font-weight: normal;
    line-height: 120%;
    text-shadow: 0px 0px 20px black, 0px 0px 20px black, 0px 0px 20px black;
    /*
	color: #E5E4E2;
	*/
    color: var(--bannerTextColor);
    padding-top: calc(30px - 0.4vw);
    padding-left: 10%;
    padding-right: 10%;
    border: 0px solid red;
    transition: 0.4s ease;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.text-details {
    text-align: center;
    padding: 38px 0;
    background-color: var(--backgroundColor1);
    font-family: var(--fontFamily);
    font-size: var(--textDetailsFontSize);
    font-weight: normal;
    line-height: 120%;
    color: var(--textColor1);
    padding-left: 10%;
    padding-right: 10%;
    border: 0px black;
}

.text-details-smaller {
    text-align: center;
    padding: 38px 0;
    background-color: var(--backgroundColor1);
    font-family: var(--fontFamily);
    font-size: var(--textDetailsFontSizeSmaller);
    font-weight: normal;
    line-height: 120%;
    color: var(--textColor1);
    padding-left: 10%;
    padding-right: 10%;
    border: 0px black;
}



.text-details-footer {
    text-align: left;
    padding: 38px 0;
    background-color: var(--footerHeaderBackgroundColor1) !important;
    font-family: var(--fontFamily);
    font-size: var(--textDetailsFooterFontSize);
    font-weight: normal;
    line-height: 120%;
    color: var(--textColorFooter1) !important;
    padding-left: 10%;
    padding-right: 10%;
    border: 0px green;
}

.text-details-footer a:hover,
.text-details-footer a.active {
    color: var(--textColorFooter1) !important;
    text-decoration: underline;
    background-color: var(--footerHeaderBackgroundColor1);
    border: 0px green;
}

.text-fill-details {
    text-align: center;
    padding: 50px 0;
    background-color: var(--backgroundColor1);
    font-family: var(--fontFamily);
    font-size: var(--textFillDetailsFontSize) !important;
    font-weight: normal !important;
    line-height: 120%;
    color: var(--textColor1);
    padding-left: 10%;
    padding-right: 10%;
    border: 0px black;
    height: 80%;
}

.text-fill-banner-img {
    border: 0px blue;
    opacity: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    text-shadow: 0px 0px 20px black, 0px 0px 20px black, 0px 0px 20px black;
}

.text-detail-image {
    text-align: center;
    padding: 38px 0;
    font-family: var(--fontFamily);
    font-size: calc(var(--textDetailsFontSize) * 1.2);
    font-weight: normal;
    line-height: 120%;
    color: white;
    padding-left: 10%;
    padding-right: 10%;
    border: 0px black;
    text-shadow: 0px 0px 20px black, 0px 0px 20px black, 0px 0px 20px black;
}


.text-fill-banner-splash {
	height: 400px;
    margin-left: -4000;
    /*margin-top: calc(55px + 11vw);*/
    margin-top: calc(80px + 11vw);
    text-align: center;
    padding: 0px 0;
    font-family: var(--fontFamily);
    font-size: var(--textFillDetailsSplash) !important;
    font-weight: normal;
    line-height: 120%;
    text-shadow: 0px 0px 20px black, 0px 0px 20px black, 0px 0px 20px black;
    color: var(--bannerTextColor);
    padding-left: 10%;
    padding-right: 10%;
    border: 0px solid red;
    transition: 0.4s ease;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.text-fill-banner-button {
    box-shadow: 0px 0px 20px black;
    border-radius: 25px;
    margin-top: calc(50px + 5.5vw);
    margin-left: auto;
    margin-right: auto;
    width: calc(100px + 10vw);
    height: calc(18px + 1.6vw);
    text-align: center;
    padding: 6px 0;
    background-color: var(--buttonBackground);
    font-family: var(--fontFamily);
    font-size: calc(10px + 1vw) !important;
    font-weight: normal;
    line-height: 140%;
    color: var(--buttonTextColor);
    border: 0px solid green;
    transition: 0.4s ease;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.text-fill-banner-logo {
    margin-top: calc(10px + 3vw);
    margin-left: auto;
    margin-right: auto;
    width: calc(200px + 10vw);
    height: calc(200px + 1.6vw);
    text-align: center;
    padding: 0px 0;
    font-family: var(--fontFamily);
    font-size: calc(10px + 1vw) !important;
    font-weight: normal;
    line-height: 140%;
    color: var(--buttonTextColor);
    border: 0px solid red;
    transition: 0.4s ease;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.text-fill-details-logo {
    margin-top: calc(75px + 6vw);
    margin-left: auto;
    margin-right: auto;
    width: calc(200px + 10vw);
    height: calc(200px + 1.6vw);
    text-align: center;
    padding: 0px 0;
    font-family: var(--fontFamily);
    font-size: calc(10px + 1vw) !important;
    font-weight: normal;
    line-height: 140%;
    color: var(--buttonTextColor);
    border: 0px solid red;
    transition: 0.4s ease;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 100;
}

.video-credit{
	position: absolute; 
	border: 0px solid white; 
	width: 100%;
	text-align: center;
	font-family: var(--fontFamily);
    font-size: calc(10px + 1vw) !important;
    font-weight: normal;
    line-height: 140%;
    z-index: 100;
}

.details-button{
	opacity: 1.0;
}

.details-button:hover {
	opacity: 0.6;
    transition: 0.3s;
}

.text-fill-banner-button:hover {
    background-color: var(--buttonBackgroundHover);
    color: var(--buttonTextColorHover);
}

.details-icon {
    width: calc(45px + 3vw);
    height: calc(45px + 3vw);
}

.details-icon-large {
    width: calc(100px + 3vw);
    height: calc(100px + 3vw);
}

.flyer-icon-large {
    height: calc(100px + 3vw);
}

.details-links {
    padding-top: 1%;
    border: 0px solid black;
    spacing: 100px;
    text-align: center !important;
    font-size: calc(14px + 1vw) !important;
}

.details-links-icons {
    width: calc(90% - 55vw);
    min-width: 140px;
    max-width: 50%;
    /*background-color: var(--iconBackground);
    border-radius: 25px;*/
}

.dropdown-new {
    background-color: var(--footerHeaderBackgroundColor1);
    font-family: var(--fontFamily);
    font-size: var(--navBarTextSize);
    font-weight: normal;
    line-height: 120%;
    color: #ffffff !important;
}

.dropdown-content: {
    color: white !important;
}

.dropdown-content li:hover,
.dropdown-content li.active {
    background-color: var(--navBarBackgroundColorHover) !important;
}

.div-generic {
    padding-left: calc(((100% / 5) - 100px) + 40px);
    padding-right: calc(((100% / 5) - 100px) + 40px);
    background-color: var(--backgroundColor1);
    font-family: var(--fontFamily);
    border: 0px solid green;
}
.div-email-form {
    width: 100%;
    min-width: 300px;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: calc((100% / 5) - 100px);
    padding-right: calc((100% / 5) - 100px);
    font-size: calc(12px + 1vw);
    font-weight: 100;
    color: var(--textColor1);
    border: 0px solid red;
}

.div-email-form-label {
    font-family: var(--fontFamily);
    font-size: var(--textDetailsFontSize);
    font-weight: 100;
    color: var(--textColor1);
}

.div-email-form-input {
    font-family: var(--fontFamily) !important;
    font-size: var(--textDetailsFontSize) !important;
    height: calc(24px + 1vw) !important;
    font-weight: 100 !important;
    color: var(--textColor1) !important;

    padding-left: 10px !important;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid black !important;
}

.div-email-form-textbox {
    font-family: var(--fontFamily) !important;
    font-size: var(--textDetailsFontSize) !important;
    font-weight: 100 !important;
    height: calc((18px + 1vw) * 10) !important;
    color: var(--textColor1) !important;
    border: 1px solid black !important;
    border-radius: 5px !important;
    padding-left: 10px !important;
}

.div-image {
    background-color: #cccccc;
    height: calc(250px + 11vw);
    width: 100%;
    margin-left: 0%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.button-email-form {
    font-family: var(--fontFamily) !important;
    font-size: var(--textDetailsFontSize) !important;
    font-weight: 100 !important;
    color: var(--textColor1) !important;
    border: 1px solid black !important;
    border-radius: 5px !important;
    margin: 1%;
}

.vid-container {
}

.vid-container .video {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    z-index: 0;
    border: 0px solid yellow;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.vid-container .caption {
    z-index: 2;
    position: absolute;
    text-align: center;
    vertical-align: bottom;
    color: #dc0000;
    padding: 10px;
}

.caption-box {
    width: 100%;
    z-index: 2;
    position: absolute;
    text-align: center;
    vertical-align: bottom;
    color: white;
    padding: 10px;
    border: 0px solid red;
    font-family: var(--fontFamily);
    font-size: var(--captionFontSize) !important;
    text-shadow: 0px 0px 20px black, 0px 0px 20px black, 0px 0px 20px black;
}

.sponsor-box2 {
    width: 100%;
    z-index: 2;
    margin-top: calc(-20px + 28vw);
    position: absolute;
    text-align: center;
    vertical-align: bottom;
    color: white;
    padding: 10px;
    border: 0px solid red;
    font-family: var(--fontFamily);
    font-size: var(--textDetailsFontSize) !important;
    text-shadow: 0px 0px 20px black, 0px 0px 20px black, 0px 0px 20px black;
}

.sponsor-ticker {
    width: 100%;
    z-index: 2;
    position: absolute; bottom: 0;
    text-align: center;
    vertical-align: bottom;
    color: white;
    padding: 10px;
    border: 0px solid red;
    font-family: var(--fontFamily);
    font-size: var(--textDetailsFontSize) !important;
    line-height: 160%;
    text-shadow: 0px 0px 20px black, 0px 0px 20px black, 0px 0px 20px black;
}

.google-map {
    padding-bottom: 30%;
    position: relative;
    margin: auto;
    padding-left: 10%;
    padding-right: 10%;
    border: 0px solid yellow;
}

.google-map iframe {
    margin-top: 0%;
    margin-right: 10%;
    margin-left: 10%;
    height: 80%;
    width: 80%;
    max-height: 500px;
    left: 0;
    top: 0;
    position: absolute;
    border: 0px solid red;
}

.hr-body {
    border: 1px solid var(--footerHeaderBackgroundColor1);
    border-radius: 5px;
    width: calc(200px + 20vw);
}

.exhibitors-image {
	background-color: black;
    height: calc(250px + 11vw);
    width: 100%;
    margin-left: 0%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
	-webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: opacity 200ms linear;
    /*transition: background-image 5s opacity;*/

}