/*Welcome to Custom CSS in Thought Industries! Follow the instructions in green to customize this trial instance's homepage. */
/*Thought Industries uses a series of variables to connect the colors you can choose in Branding to your sites. Using these variables can make updating branding and white labeling Panoramas much faster and easier.*/
/*Variables list:
    --font
    --alt-font
    --accent-color
    --secondary-color
    --link-color
    --accent-highlight-color
    --accent-highlight-background-color
    --accent-tinted-color-70
    --accent-tinted-color-80
    --accent-tinted-color-90
    --accent-contrast-color
    --accent-contrast-tinted-background-color
    --accent-hover-color
    --secondary-hover-color
    --secondary-contrast-color
    --link-hover-color
Example Syntax "{background: var(--accent-color)"
*/

/*To change the size of the logo on the homepage, adjust the max-width below: */
.header .company__beta-logo {max-width: 250px;}

/*To change the color of the "Manager Access" button, adjust the hex code color below:*/
.nav--top ul a {background: var(--accent-color);}

/*To change the color of the "Sign Up Now" CTA button on the hero image:*/
.hero .btn--primary {background-color: var(--accent-color);}

/*To change the background color of the icon set on the homepage, adjust the hex code color below: */
.tri{background-color: var(--accent-color);}

/*To change the color of the "You May Like" section on the homeoage, adjust the hex code color below: */
.dashboard-section6 {background-color: #B1BD99}





/*Here's the rest of the CSS that makes this site pretty-- feel free to play around, but save a copy of the original CSS somewhere so you can always go back to what it looked like orginally!*/
/*Triangel Background*/
.tri{
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
}
/*  Home Page */
#cart-button {display:none;}
.container { max-width: 100%; }
.padnone {padding:1rem 0rem !important;}
.dashboard-section9 .widget__title { font-size: 36px; font-weight: bold; color: #333;}
.iconset .widget__title { font-size: 36px; font-weight: bold; color: #fff;}
.hero__caption .h4 { display: block; font-size: 14px; margin-bottom: 20px; }
.hero .hero__caption .hero__title { color: black; font-size: 35px; font-weight: 700;}
.hero .hero__caption span {font-size: 14px;}
.hero .btn--primary { color:white !important; border: 2px solid white; border-radius: 10px; font-size: 15px;}

/*Large Screen */
@media only screen and (min-width: 1025px){
.container { max-width: 100%; }
.header--microsite { padding: 1rem 5rem 0; background:#fff;}
.header__inner {max-height:100px;}
.header--microsite .top-bar { border: 0; display: inline-block; width: calc(100% - 160px - 300px);margin-left: 300px; background: none; padding: 0px 0; margin-top: 12px; bottom:100px;}
.nav--top {margin-top: 12px;}
.nav--top ul a {font-size:16px; text-transform:capitalize; color:#fff; border-radius: 10px; padding:7.5px;}
.nav--top ul a:hover {font-size:16px; text-transform:capitalize; background:transparent; color:var(--accent-color); border: 2px solid var(--accent-color); border-radius: 10px; padding:7.5px;}
.header--microsite .top-bar .top-bar-section {  display: block; text-align: center; width: 100%; }
.header--microsite .top-bar .top-bar-section ul { display: block; width: 100%; text-align: right; margin-top: 15px; }
.header--microsite .top-bar .top-bar-section::after { content: ''; display: block; clear: both; }
.header--microsite .top-bar .top-bar-section li { display: inline-block; float: none; padding: 0; background: none; }
.header--microsite .top-bar .top-bar-section li:not(.has-form) a:not(.button) { background: none; color:#000;}
.hero .hero__caption { width: 35%; }
.hero .hero__caption { background: transparent; left: 9%; top: 50%; transform: translateY(-50%); bottom: auto;}
}

/*Medium Screen*/
@media only screen and (min-width: 48.063em){
.header--microsite { padding: 1rem 5rem 0; background:#fff;}
.header__inner {max-height:100px;}
.header--microsite .top-bar { border: 0; display: inline-block; width: calc(100% - 160px - 300px);margin-left: 300px; background: none; padding: 0px 0; margin-top: 12px; bottom:100px;}
.nav--top {margin-top: 12px;}
.nav--top ul a {font-size:16px; text-transform:capitalize; color:#fff; border-radius: 10px;}
.nav--top ul a:hover {font-size:16px; text-transform:capitalize; background:transparent; color:var(--accent-color); border: 2px solid var(--accent-color); border-radius: 10px;}
.header--microsite .top-bar .top-bar-section {  display: block; text-align: center; width: 100%; }
.header--microsite .top-bar .top-bar-section ul { display: block; width: 100%; text-align: right; margin-top: 15px;}
.header--microsite .top-bar .top-bar-section::after { content: ''; display: block; clear: both; }
.header--microsite .top-bar .top-bar-section li { display: inline-block; float: none; padding: 0; background: none; }
.header--microsite .top-bar .top-bar-section li:not(.has-form) a:not(.button) { background: none; color:#000;}
.hero .hero__caption { width: 35%; }
.hero .hero__caption { background: transparent; left: 9%; top: 50%; transform: translateY(-50%); bottom: auto;}
}

/*Mobile Screen*/
@media (min-width: 768px) and (max-width: 1024px){
.header--microsite { padding: 1rem 1rem 0; /*height:100px;*/ background:#fff;}
.top-bar{    overflow: hidden; height: 3rem; line-height: 3rem; position: relative; background: #fff; margin-bottom: 0;}
.nav--top {margin-top: 12px;}
.nav--top ul a {font-size:12px; text-transform:capitalize; color:#fff; border-radius: 10px; padding:7.5px;}
.nav--top ul a:hover {font-size:12px; text-transform:capitalize; background:transparent; color:var(--accent-color); border: 2px solid var(--accent-color); border-radius: 10px; padding:7.5px;}
}

/*  Dashboard */
.dashboard-section6 .featured-content-multi-carousel {width: 80%;margin-left: auto;margin-right: auto;margin-bottom: 54px;}
.dashboard-section6 .widget__title { font-size: 56px; font-weight: bold; margin: 100px 0 54px 0; color: #2e2e2e;}
.dashboard-section6 .featured-content-multi-carousel-item {background: transparent;text-align: center;border-right: 0px solid;}
.dashboard-section6 .featured-content-multi-carousel-item img { border-radius: 39px; }  
.dashboard-section6 .featured-content-multi-carousel-item__body { text-align:left }
.dashboard-section6 .featured-content-multi-carousel-item__title {padding: 0 .5em; margin-top: 21px; font-size: 23px;}
.dashboard-section6 .featured-content-multi-carousel-item__description {font-size: 15px;}
.dashboard-section6 .featured-content-multi-carousel__nav-right .icon-navigateright, .dashboard-section6 .featured-content-multi-carousel__nav-left .icon-navigateleft{font-size: 40px;color: #696ab0;}
.dashboard-section6 .featured-content-multi-carousel__nav-left { left: 7%; }
.dashboard-section6 .featured-content-multi-carousel__nav-right { right: 7%; }


 /*Divider */
.tios-divider{  background: #f2f2f2; color: #F0F1F2;}
.tios-divider .left-col {  width: 32px; height: auto;}
.tios-divider .right-col .title { font-size: 14px;}
/*tios-Cards*/
.tios-container { display: flex; flex-wrap: wrap;}
.tios-container .tios-card { width: 100%; height: auto; min-height: 205px; border:2px solid #F1F3F5; border-radius: 4px; background-color: #F1F3F5; transition: 0.3s all ease-in-out; position: relative;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0px 1px 3px 1px  #DDD; -moz-box-shadow:    0px 1px 3px 1px  #DDD;box-shadow:         1px 1px 3px 1px  #DDD; }
.tios-container .tios-card .cardContent {display: flex; flex-direction: column; justify-content: left; align-items: left; text-align: left; padding: 24px; }
.tios-container .tios-card .cardContent .icon {color: #343A40; font-size: 32px; padding: 8px 0px;}
.tios-container .tios-card .cardContent figure { margin: 0;}
.tios-container .tios-card .cardContent .title {font-size: 24px; color: #000; font-weight: bold; margin:0px;}
.tios-container .tios-card .cardContent .desc { color: #868E96; font-size: 16px; line-height:24px; padding: 8px 0px;}
.tios-container .tios-card a { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.tios-container .tios-card:hover {box-shadow: none;border:2px solid #697885;}

.btn--primary, .btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-contrast-color);
    border-radius: 25px;
}