@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

/* Variable style in the head of the template   :root { --primary: ; } */

html {
    scroll-behavior: smooth;
}
body {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    background-image:linear-gradient(rgba(255,255,255,0.65),rgba(255,255,255,0.65));
    background-color: var(--primary);
    text-align: center;
    margin: 0px auto; 
    max-width: 1200px;
    line-height: 1; 
    padding: 0px;
}
a, a:hover, a:active, a:visited {
 text-decoration: none;
 cursor: pointer;
}
h1 { 
 font-size: 32px; 
 color: #fff; 
 font-family: 'Noto Sans', sans-serif;
 font-weight: 700; 
}
h2 { 
 font-size: 28px; 
 color: var(--primary); 
 font-family: 'Noto Sans', sans-serif;
 font-weight: 700; 
 margin: 0;
 padding-top: 20px;
}
h3 { 
 font-size: 20px; 
 color: var(--primary); 
 font-family: Roboto, serif; 
 font-weight: 400; 
}
h3 a { 
 text-decoration: none; 
 color: var(--primary); 
}
p, li{ 
 font-size: 16px;
 color: #333;
 line-height: 1.25em; 
 padding: 0;
}
p a, a:active, a:visited, li a, li a:active, li a:visited { 
 font-size: 16px; 
 color: var(--primary); 
 text-decoration: none;
}
p a:hover, li a:hover {
 text-decoration: underline;
 color: var(--primary);
}
i {
 color: #fff;
}
.icon_container {
 font-size: 30px;
 background: var(--primary);
 position: absolute;
 border-radius: 0.25em; 
 padding: 0.25em;
}
sup {
 font-size: .65em;
}
.col {
 padding: 0;
}
#header {
 background: #fff;
}
.client_logo {
 padding: 20px;
 text-align: left;
}
.client_logo img {
 max-height: 70px;
 max-width: 100%;
}
.login_btn {
 padding: 20px;
 text-align: right;
}
.login_btn p {
 padding: 10px 30px;
 color: #fff;
 background-color: var(--primary);
 display: inline;
 border-radius: 10px;
}
.login_btn p:hover {
 opacity: 0.85;
}
.hero {
 background: #ccc;
 max-height: 400px;
 overflow: hidden;
}
.hero img{
 width: 100%;
 max-width: 1920px;
}
.intro {
 padding: 20px 50px;
 background: var(--primary);
}
.intro p {
 color: #fff;
}
#body {
 background-color: #fff;
}
.row {
 margin: 0;
}
.callout_heading {
 padding-top: 20px;
}
.callout_row {
 padding: 10px 20px 10px 20px;
}
.callouts {
 padding: 10px;
}
.callout_card {
 background: #fff;
 width: 100%;
 padding: 20px;
 margin: 10px;
 transition: all 0.2s ease-in-out 0s;
}
.callout_card:hover { 
 position: relative;
 top: -3px;
 box-shadow: 0 0 10px #DDD;
 border-radius: 10px;
}
.callout {
 text-align: left;
}
.callout h3, .callout p {
 position: relative;
 left: 70px;
 margin-right: 70px;
}
.mobileapp {
 background: #F5F5F5;
 padding: 0 30px 20px 30px;
 text-align: center;
}
.mobileapp div {
 background: #F5F5F5;
}
.mobileapp img {
 max-height: 60px;
 padding:0 10px;
 transition: all 0.2s ease-in-out 0s; 
}
.mobileapp img:hover {
 transform: scale(1.05);
}
.mobileapp_card {
 padding-top: 20px;
}
.disclosure {
 padding: 20px 20px 0 20px;
 text-align: left;
 line-height: 1.5;
 color: #fff;
 background: var(--primary);
}
.footer {
 padding: 20px;
 background: var(--primary);
 color: #fff;
 text-align: left;
}
.footer a, .footer a:active, .footer a:visited {
 text-decoration: underline;
 font-size: 12px;
 color: #fff;
}
.oa_logo {
 text-align: left;
 padding: 20px 20px 0;
 background: var(--primary);
}
.oa_logo img {
 max-height: 40px;
}
.advisorinfo {
 list-style-type: none;
 position: relative;
 left: 70px;
 margin-right: 70px;
 padding: 0;
 line-height: 2.5;
}
.advisorinfo i {
 color: var(--primary);
 padding-right: 10px;
}
.advisorinfo li {
 display: inline-block;
 padding-right: 10px;
}
.eolanguage {
 position: relative;
 left: 70px;
 margin-right: 70px;
 text-align: left;
}
.eolanguage a, .eolanguage i{
 color: var(--primary);
 padding-right: 10px;
}
.eolanguage a:hover {
 text-decoration: underline;
}
.modal-body {
 text-align: left;
}
.modal_btn {
 padding: 20px;
 text-align: center;
}
.modal_btn p {
 padding: 10px 30px;
 color: #fff;
 background-color: var(--primary);
 display: inline;
 border-radius: 10px;
}
.modal_btn p:hover {
 opacity: 0.85;
}