@charset 'utf-8';
/** *  * 
@author		George Iancu*
@copyright	Cube Creative Ltd (c) 2020.*
@license	Commercial
* */

/*****************
*
*   CONTAINER
*
******************/
.container{max-width: var(--container-width);padding-left: var(--container-padding-left);padding-right: var(--container-padding-right);margin-left: var(--container-margin-left);margin-right: var(--container-margin-right);width: 100%;}
.flex{ display: flex; align-items: center; gap: var(--container-gap); }
.flex.justify{ justify-content: space-between; }
.flex.evenly,
.flex.evenly > div{flex: 1;}


/*****************
*
*   FORMS
*
******************/
.formio-form{padding: 1rem;background-color: #f9f9f9;}
.formio-form .form-group{  }
.formio-form .form-group label{margin-bottom: 5px;}
.formio-form .form-group .form-control{background-color: #FFFFFF;border: 1px solid #eee;border-radius: 20px;padding: 0.5rem 1rem;}

 /* ===============  
 * 
 * CC Accordion
 * 
 * ===============
 */
 .cc_accordion { display: flex; flex-direction: column; margin: 0; }
 .cc_accordion .cc_section { margin-bottom: 0.25rem; overflow: hidden; transition: max-height 0.3s ease-out; }
 .cc_accordion .cc_section input { display: none; }
 .cc_accordion .cc_section label {display: flex;padding: 1rem;background-color: var(--secondary-color);cursor: pointer;margin: 0;align-items: center;justify-content: space-between;gap: var(--container-gap);border-radius: 10px;font-size: 22px;font-weight: bold;}
 .cc_accordion .cc_section:focus label { background-color: #2980b9;}
 .cc_accordion .cc_section label:after{content: ' ';transform: rotate(-90deg);width: 20px;height: 12px;background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="7.45px" height="4.43px" viewBox="0 0 7.45 4.43" style="overflow:visible;enable-background:new 0 0 7.45 4.43;" xml:space="preserve"><style type="text/css"> .st0-58430111{fill:%23ffffff;} </style><defs></defs><path class="st0-58430111" d="M4.67,3.72l2.61-2.61c0.23-0.23,0.23-0.6,0-0.83L7.16,0.17c-0.23-0.23-0.6-0.23-0.83,0l-2.2,2.2 c-0.23,0.23-0.6,0.23-0.83,0l-2.2-2.2c-0.23-0.23-0.6-0.23-0.83,0L0.17,0.29c-0.23,0.23-0.23,0.6,0,0.83l2.61,2.61l0.53,0.53 c0.23,0.23,0.6,0.23,0.83,0L4.67,3.72z"></path></svg>');background-repeat: no-repeat;background-size: 20px;}
 .cc_accordion .cc_section div { padding: 1rem; background-color: white; display: none; }
 .cc_accordion .cc_section.active label:after{ transform: rotate(0deg); }
 .cc_accordion .cc_section.active label + div { display: block; }
 body.is-auth .cc_accordion .cc_section div{ display: block; }



/*****************
*
*   HEADER   
*
******************/
header{background: black;border-bottom: 20px solid var(--secondary-color);margin-bottom: 5rem;}

header #topbar{ background-color: var(--primary-color);color: white;font-size: var(--body-font-size);line-height: var(--body-line-height);padding-top: 0.5rem;padding-bottom: 0.5rem; }

header #logobar{padding-top: 1.5rem;padding-bottom: 1.5rem;}
header #logobar a.logo{ display: block; }
header #logobar a.logo img{width: 260px;height: 75px;}
header #logobar > .container > div:nth-child(2){ gap: 2rem; }
header #logobar > .container > div:nth-child(2) ul{ display: flex; list-style: none; gap: 2rem; align-items: center; }
header #logobar > .container > div:nth-child(2) ul li a{color: white;text-decoration: underline;font-weight: bold;}

header #navbar > .container{ justify-content: center; margin-top: 4rem; margin-bottom: 2rem; }
header #navbar > .container > div ul{ display: flex; list-style: none; gap: 2rem; align-items: center; }
header #navbar > .container > div ul li a{color: white;font-size: var(--h6-font-size);}

header #searchbar{ padding-top: 2rem; }
header #searchbar > .container{ justify-content: center; }
header #searchbar h2{color: white;font-size: var(--h5-font-size);text-align: center;margin-bottom: 1rem;}
header #searchbar form{ padding-bottom: 1rem; }
header #searchbar form input[type="text"]{border-radius: 2rem;background-color: #F9F9F9;border: 1px solid #f3f1f1;box-shadow: none;padding: 1.5rem 1.5rem;margin: 0;color: black;min-width: 350px;}
header #searchbar form input::placeholder{ color: var(--text-color); }


header #hero{background-color: #F0F0F0;background-image: url('/themes/default/assets/img/home-hero.jpg');padding-top: 2.5rem;padding-bottom: 2.5rem;height: 700px;display: flex;flex-direction: column;align-items: center;justify-content: center;background-position: center;background-repeat: no-repeat;position: relative;background-size: cover;}
header #hero > .container > div{max-width: 70%;position: relative;z-index: 2;margin: 0 auto;text-align: center;}
header #hero > .container > div h1{color: white;text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);}
header #hero > .container > div p{color: white;font-size: 24px;text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);line-height: 1.4;}

header #hero.inner{margin-bottom: 3rem;height: 350px;background-image: none;background-color: var(--primary-color);}
header #hero.inner > .container > div{  }
header #hero.inner > .container > div.page_image{height: 600px;}
header #hero.inner > .container > div.page_image img{}


/* ===============  
 * 
 * Footer
 * 
 * ===============
 */
 footer{background: #EBEBEB;padding: 5rem 0 2.5rem 0;margin-top: 5rem;}

 footer .container{display: flex;gap: var(--container-gap);justify-content: space-between;align-items: flex-end;}
 footer .container > div{
}
 footer .container > div img{ margin-bottom: 3rem; }
 footer .container > div p,
 footer .container > div ul li a{font: normal normal normal 16px/22px Open Sans;letter-spacing: 0px;margin: 0 0 0.5rem 0;}
 footer .container > div ul li{margin-bottom: 0.5rem;text-align: right;}
 footer .container > div p.heading{font: normal normal bold 18px/25px Open Sans;margin-bottom: 1rem;}
 footer .container > div:nth-child(3){flex: 1;}
 footer .container > div ul{list-style-type: none;margin-bottom: 2rem;}
 footer .container > div ul li a{ text-decoration: underline; }
 footer .container > div ul li ul{ display: none; }


/*****************
*
*   MAIN
*
******************/
main{ }
main > .container{align-items: flex-start;}
main > .container > div:nth-child(1){flex: 1;}
main.landing > .container > div:nth-child(1) h2{ }
main.landing > .container > div:nth-child(1) .topic{gap: var(--container-gap);align-items: flex-start;border-bottom: 1px solid #cacaca;padding-bottom: 1rem;padding-top: 1rem;}
main.landing > .container > div:nth-child(1) .topic > div:nth-child(1){width: 15%;}
main.landing > .container > div:nth-child(1) .topic > div:nth-child(1) img,
main.landing > .container > div:nth-child(1) .topic > div:nth-child(1) svg{margin-top: 1rem;max-height: 90px;width: 100px;}
main.landing > .container > div:nth-child(1) .topic > div:nth-child(2){width: 40%;}
main.landing > .container > div:nth-child(1) .topic > div:nth-child(2) .title{font-weight: bold;font-size: 22px;}
main.landing > .container > div:nth-child(1) .topic > div:nth-child(2) .desc{font-size: 20px;}
main.landing > .container > div:nth-child(1) .topic > div:nth-child(2) .button{ }
main.landing > .container > div:nth-child(1) .topic > div:nth-child(3){width: 40%;}
main.landing > .container > div:nth-child(1) .topic > div:nth-child(3) .heading{ }
main.landing > .container > div:nth-child(1) .topic > div:nth-child(3) ul{list-style: none;margin-left: 0;}
main.landing > .container > div:nth-child(1) .topic > div:nth-child(3) ul li{ }
main.landing > .container > div:nth-child(1) .topic > div:nth-child(3) ul li a{ }

main > .container > div:nth-child(2){ max-width: 27%;min-width: 300px; }
main.landing > .container > div:nth-child(2) .box{background: #EBEBEB;padding: 2rem;margin-bottom: var(--container-gap);}
main.landing > .container > div:nth-child(2) .box:first-of-type{background: var(--secondary-color);}
main.landing > .container > div:nth-child(2) .box .title{font-weight: bold;font-size: 24px;}
main.landing > .container > div:nth-child(2) .box .desc{  }
main.landing > .container > div:nth-child(2) .box .button{  }
main.landing > .container > div:nth-child(2) .box:first-of-type .button{ background: black; color: white; }


main #article > section,
main #article section.keditor-container{padding-top: 2rem;}

main #article ul,
main #article ol{ margin-left: 17px; margin-bottom: 1rem; }

main #article ul li,
main #article ol li{ margin: 0.2rem 0 0.5rem 0; }

main #article a{ color: var(--primary-color); font-weight: bold; }


/*****************
*
*   Sections
*
******************/
section[data-type="component-googlemap"]{ margin-bottom: 1rem; }

/*****************
*
*   Topic
*
******************/
main > .container > div:nth-child(2) > ul.ccore-nav-root{list-style: none; margin: 0; background: #EBEBEB; padding: 1rem;}
main > .container > div:nth-child(2) > ul.ccore-nav-root > li{margin-bottom: 0.5rem; padding: 0.5rem;}
main > .container > div:nth-child(2) > ul.ccore-nav-root li a{ font-size: 16px; }
main > .container > div:nth-child(2) > ul.ccore-nav-root > li > a{font-weight: bold;margin-bottom: 1rem;}
main > .container > div:nth-child(2) > ul.ccore-nav-root > li > ul{margin-top: 0.5rem; margin-bottom: 0;}
main > .container > div:nth-child(2) > ul.ccore-nav-root > li > ul li{ }
main > .container > div:nth-child(2) > ul.ccore-nav-root > li > ul li a{ }
main > .container > div:nth-child(2) > ul.ccore-nav-root ul{ margin-top: 0; }

main > .container > div:nth-child(2) > ul.ccore-nav-root li{ margin: 0; }


/*****************
*
*   Roadmap
*
******************/
#roadmap #roadmap-header{display: flex;gap: 3rem;background: #EBEBEB;padding: 3rem;}
#roadmap #roadmap-header > div:nth-child(1){ flex: 1; }
#roadmap #roadmap-header > div:nth-child(2){ padding: 2rem;background: white;width: 350px; }
#roadmap #roadmap-header > div:nth-child(2) > p{font-size: 22px;line-height: 1.3;}
#roadmap #roadmap-filter{ margin-top: 5rem;display: flex;align-items: center;gap: 1rem; }
#roadmap #roadmap-filter form{display: flex;justify-content: space-between;width: 100%;}
#roadmap #roadmap-filter form select{margin: 0;max-width: 250px;border: none;background-color: #EBEBEB;border-radius: 10px;}
#roadmap #roadmap-list{margin-top: 1rem;border-top: 2px solid #ccc;padding-top: 1rem;}
#roadmap #roadmap-list .roadmap-mansonry{column-count: 3;column-gap: 1rem;}
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box{background-color: #EBEBEB;display: flex;margin-bottom: 1rem;break-inside: avoid;-webkit-column-break-inside: avoid; /* For Safari */page-break-inside: avoid; /* For older browsers */}
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box > div:nth-child(1){width: 70px;text-align: center;padding: 1rem 0.5rem;background: #eee;}
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box.Completed > div:nth-child(1){ background: #82DA4B; }
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box.Deployment > div:nth-child(1){ background: #3DD0FF; }
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box.Development > div:nth-child(1){ background: #F8D307; }
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box.Scheduled > div:nth-child(1){ background: #B2B2B2; }
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box.Scoping > div:nth-child(1){ background: #000000; }
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box > div:nth-child(1) svg{height: 30px;width: 100%;}
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box > div:nth-child(2){flex: 1;padding: 1rem;}
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box > div:nth-child(2) svg{max-height: 60px;}
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box > div:nth-child(2) .roadmap-box-heading{font-weight: bold;margin-bottom: 0;}
#roadmap #roadmap-list .roadmap-mansonry .roadmap-box > div:nth-child(2) .roadmap-box-short-description{ }

#roadmap #roadmap-legend{ margin-top: 10rem; }
#roadmap #roadmap-legend ul{display: flex;gap: 1rem;list-style: none;margin: 0;padding: 0;justify-content: space-between;}
#roadmap #roadmap-legend ul li{display: flex;align-items: center;gap: 0.5rem;font-weight: bold;}
#roadmap #roadmap-legend ul li svg{width: 50px;height: 50px;}



/*****************
*
*   Snippets
*
******************/
.content-box{padding: 2rem;box-shadow: 0 0 20px #eee;}

.white_drivers .content-box{ background: white; }

/**** SNIPPET 1 ****/
.snippet1{display: flex;align-items: flex-start;gap: 2rem;background-color: #F9F9F9;padding: 2rem;border-radius: 20px;margin-top: 3rem;margin-bottom: 3rem;}
.snippet1 > img{max-width: 80px;}
.snippet1 > div{ }
.snippet1 > div h2{margin-top: 0;font-size: var(--h3-font-size);}
.snippet1 > div p{ }

/**** SNIPPET 2 ****/
.snippet2{display: flex;align-items: flex-start;gap: 3rem;padding: 1rem;border-radius: 20px; margin-top: 3rem; margin-bottom: 3rem; }
.snippet2 > div:nth-child(1){ max-width: 30%; }
.snippet2 > div:nth-child(2){ flex: 1; }
.snippet2 > div h2{ margin-top: 1rem; font-size: var(--h3-font-size); }
.snippet2 > div p{font-size: 24px;font-weight: 600;}

/**** SNIPPET 3 ****/
.snippet3{ background-color: #F9F9F9;padding: 3rem;border-radius: 20px;margin-top: 3rem;margin-bottom: 3rem;}
.snippet3 > div:nth-child(2){ display: flex;background-color: #F9F9F9;padding: 1rem;align-items: flex-start;gap: 3rem; }
.snippet3 > div > div:nth-child(1){ flex: 1; }
.snippet3 > div >  div:nth-child(2){ width: 40%; }
.snippet3 > div >  div:nth-child(2) iframe{ width: 100%; }
.snippet3 > div  h2{ margin-top: 1rem; font-size: var(--h3-font-size); }
.snippet3 > div >  div p{ }

/**** SNIPPET 4 ****/
.snippet4{margin-top: 3rem;margin-bottom: 3rem;padding-top: 3rem;padding-bottom: 3rem;}
.snippet4 > div:nth-child(1){display: flex;align-items: flex-start;gap: 3rem;}
.snippet4 > div >  div{ flex: 1; }
.snippet4 > div >  div h2{margin-top: 2rem;font-size: var(--h3-font-size);}
.snippet4 > div >  div p{ }

/**** SNIPPET 5 ****/
.snippet5{margin-bottom: var(--container-gap);}
.snippet5 .snippet5-driver{text-align: center;background: var(--primary-color);border-radius: 10px;padding: 2rem;}
.snippet5 .snippet5-driver .driver-image{margin-bottom: 1rem;}
.snippet5 .snippet5-driver p{text-align: left;margin-bottom: 1.5rem;color: white;max-width: 100%;}
.snippet5 .snippet5-driver p.title{color: white;font-weight: 600;font-size: 1.7rem;display: flex;align-items: center;justify-content: space-between;gap: 1rem;line-height: 1.1;}
.snippet5 .snippet5-driver p.title img{max-width: 60px;}