html {}

body { color: #0D5EAF; font-family: "Cambria Math", "Cambria", "Optima", "Palatino Linotype", "Palatino", "Georgia"; font-size: 12pt;
    display:flex; flex-direction:column; flex: 1; margin: 0px auto; min-width: 900px; background-color: silver; background-repeat: no-repeat;

background-image: radial-gradient(circle at calc(50% - 285px) 100px, white 0%, rgba(210, 210, 210, 0.2) 5%, rgba(150, 150, 150, 0.2) 15%,
	rgba(210, 210, 210, 0.5) 30%, rgba(100, 100, 100, 0.2) 50%, rgba(210, 210, 210, 0.5) 70%, rgba(90, 90, 90, 0.8) 95%);
}

.bgcontainer { position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: -1; }
.bgdiv { height: 100%; width: 100%; background-repeat: no-repeat; opacity: 0;

    background-image:
    radial-gradient(circle at calc(50% - 285px) 100px, white 0%, rgba(210, 210, 210, 0.2) 5%, rgba(150, 150, 150, 0.2) 10%,
    rgba(210, 210, 210, 0.8) 15%, rgba(100, 100, 100, 0.2) 30%, rgba(210, 210, 210, 0.5) 40%, rgba(90, 90, 90, 0.8) 80%);
    
    transform-origin: calc(50% - 285px) 100px;
    transform: scale(1);
    animation: sonicwave 5s infinite;
    animation-timing-function: linear;
}

.container { min-height: 100vh; width: 100%; display: flex; flex-direction: column; }
.topdiv { text-align: center; height: 150px; min-width: 720px; padding-top: 2vh; }
.topdiv img { height: 70%; }
.subtitle { margin-top: 5px; font-size: 36px; }

.middlediv { width: 100%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; min-width: 700px; margin: auto; padding-bottom: 2vh; }
.innerdiv { width: 100%; padding: 10px; }

.expertdiv { width: 26%; min-width: 300px; max-width: 450px; display: flex; flex-direction: column; margin: 1vw; border-radius: 20px; }
.markets { background-color: pink; width: 100%; min-width: 900px; max-width: 930px; margin: auto; margin-top: 1vh; border: 8px solid #8050A0; border-radius: 28px; color: #8050A0; }

.headeritem { width: 100%; margin: auto; display: flex; align-items: center; justify-content: center; border-radius: 20px 20px 0 0; padding-top: 3px; padding-bottom: 3px; }
.headeritem { background-image: linear-gradient(white, silver); font-variant: small-caps; font-weight: bold; font-size: 28px; text-shadow: 1px 1px white; }

.textitems { display: flex; flex-direction: column; justify-content: center; padding-top: 1vh; padding-bottom: 1vh; border-radius: 0 0 20px 20px; }
.textitems { background-image: linear-gradient(white, lightgrey); font-variant: small-caps; font-size: 24px; }
.textitems p { margin: 2%; }

.marketitems { display: flex; flex-direction: row; justify-content: center; border-radius: 0 0 20px 20px; padding-top: 2vh; padding-bottom: 2vh; }
.marketitems { background-image: linear-gradient(white, lightgrey); font-variant: small-caps; font-size: 26px; text-shadow: 1px 1px white; color: #8050A0; }
.marketitems p { margin: 0 20px 0 20px; }

.footer { width: 100%; height: 32px; display: flex; flex-direction: column; min-width: 650px; margin-top: auto; background-image: linear-gradient(white, grey); padding-top: 5px; padding-bottom: 5px; }
.footer div {margin: auto; font-size: 14px; }
.footer div img { height: 9px; width: 10px; margin-bottom: -1px; }
.footadd { color: #8050A0; }

@keyframes sonicwave {
    0% { transform: scale(1); opacity: 0 }
    25% { transform: scale(1.25); opacity: 0.8 }
	50% { transform: scale(1.5); opacity: 1 }
    75% { transform: scale(1.75); opacity: 0.8 }
    100% { transform: scale(2); opacity: 0 }
}

@media only screen and (max-width: 1000px) and (orientation: portrait) {
    .expertdiv { width: 310px; margin-left: 3vw; margin-right: 3vw; }
}