body, div, input, ul, li, a {
    font: 12px 'Abel', 'Open Sans',Verdana,Arial,Helvetica,sans-serif;
	font-weight: 500;   
	line-height: 110%; 
	letter-spacing:0.5px; 
	text-decoration: none;
	text-decoration-style: none;
    list-style: none;
    margin:0px;
    padding:0px; 
    color:#151615;
}

*, *::before, *::after {
    padding: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
}


/* Hover out */
.nav-ctn ul li a, .download-link-btn a, .close-img-preview, .info-link, .app-nav-ul li a,
.faq-nav-ul li a{
    color:#151615;
    transition: color 0.5s ease-in-out;
}

/* Hover in */
.nav-ctn ul li a:hover, .download-link-btn a:hover, .close-img-preview:hover, .info-link:hover,
.app-nav-ul li a:hover, .faq-nav-ul li a:hover{
    color: #e6ff02;
    transition: color 0.5s ease-in-out;
}


body{
    overflow:auto;
}

.main-body{
    width:100%;
    height: auto;
    display: block;
}

.header {
    width:100%;
    height: auto;
    padding: 0px 0px 100px 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: 50% 60%;
    background-image: url(../infonii/header-bg.svg), radial-gradient(circle at center bottom, #2DCF62 37%, #21B251 73%, #169E43 90%);
}

.menu-ctn{
    width:100%;
    height: 160px;
    margin:0px auto 0px auto;
    padding:0px;
    position: fixed;
}

.menu-scroll-top{
    transform: translateY(-110px);
    transition: transform 0.9s ease 0s; 
}

.menu-scroll-bottom{
    transform: translateY(0px);
    transition: transform 0.9s ease 0s;
}

.ricasko-logo{
    width:150px;
    height: auto;
    margin:0px auto 0px auto;
    padding: 5px;     
}

.ricasko-logo img{
    width: inherit;
    height: auto;
    margin: 20px auto 0px auto;
}

.main-menu-ctn{
    width:100%;
    height: 40px;
}

.nav-ctn {
    width: 100%;
    height:40px;
    margin: 10px auto 0px auto;  
    text-align: center;
}

.nav-scroll-top {
    background-color: #2DCF62;
    transition: background-color 1.9s ease 0;
}

.nav-ctn ul {
    width:auto;
    height: inherit;
}

.nav-ctn ul li{
    width: auto;
    height: inherit;
    display: inline-block;
    margin: 12px 10px 0px 10px;
}

.nav-ctn ul li a{
    font-size: 18px; 
    text-align: center;
    color: #151615;

}

.welcome-msg-ctn{
    width: 100%;
    height: auto;
    margin: 0px auto 20px auto;
    padding: 150px 10px 0px 10px;
    color: #ffffff;
    text-align: center;
}

.welcome-msg-ctn h1{
    font: 20px 'Abel','Open Sans',Verdana,Arial,Helvetica,sans-serif;
    padding: 5px;
}

.welcome-msg-ctn h2{
    font: 18px 'Quicksand', 'Open Sans', Helvetica,sans-serif;
    padding: 5px;
}

.welcome-msg-ctn h3{
    font: 18px 'Indie Flower', 'Open Sans', Helvetica,sans-serif;
    padding: 5px;
}

.main-content-ctn {
    width: 80%;
    height: auto;
    margin: 10px auto 0px auto;
}

.project-title{
    width: auto;
    height: auto;
    font-size: 34px;
    margin: 0px 0px 40px 0px;
    font-weight: bold;
}

.project-ctn{
    width: 100%;
    height: auto;
    margin: 0px auto 0px auto;
}

.project-ctn ul {
    width: 100%;
    height: auto;
    margin: 0px 0px 40px 0px;
}

.project-ctn ul li {
    width: auto;
    height: inherit;
    display: inline-block;
    margin: 0px 10px 10px 0px;
    vertical-align: top;
}

.project-img {
    width:80px;
    height: inherit;
}

.project-img img {
    width:80px;
    height: auto;
    margin:0px 0px 10px 0px;
}

.project-desc{
    width: 100%;
    height: inherit;
    font: 18px 'Quicksand';
    text-align: justify;
}

.site-title{
    width:100%;
    height: auto;
    padding: 0px 0px 10px 0px;
}

.site-title a{
    font-weight: bold;
    font-size: 20px;
}

.footer{
    width:100%;
    height: auto;
    display: block;
    background:#169E43;
}

.copy-right{
    width:100%;
    height: auto;
    font-size: 18px;
    color:#151615;
    margin:0px auto 0px auto;
    padding: 50px 0px 50px 0px;
    text-align: center;
}

.contact-email{
    font-size: 20px;
    color: #151615;
    padding: 10px 0px 50px 10px;
}


/* BisaGps CSS */
.bisa-gps-ctn{
    width: 100%;
    height: auto;
    margin: 0px auto 0px auto;
}

.app-nav{
    width:100%;
    height: auto;
    border: 1px solid #aaaaaa;
    box-shadow: 0px 0px 2px #aaaaaa;
    border-radius: 4px;
    margin: 4px 0px 10px 0px;
}

.app-nav-ul{
    width:100%;
    height: inherit;
    text-align: center;
}

.app-nav-ul li{
    width: auto;
    height: inherit;
    padding: 4px 10px 4px 10px;
    display: inline-block;
    border-right: 1px solid #aaaaaa;
}

.app-nav-ul li a{
    font-size: 18px;
}


.bisa-gps-display-img{
    width:100%;
    height: auto;
    margin:0px 0px 20px 0px;
}

.bisa-gps-intro{
    width: 100%;
    height: auto;
    margin: 0px 0px 20px 0px;
}

.bisa-gps-intro li{
    width: 90%;
    height: auto;
    display: block;
    margin: 10px 0px 0px 0px;
    max-width: 500px;
}

.bisa-gps-logo {
    width:100px;
    height: inherit;
}

.bisa-gps-logo img {
    width:100px;
    height: auto;
    margin:0px 0px 0px 0px;
}

.bisa-gps-desc{
    width: 100%;
    height: inherit;
    font: 18px 'Quicksand', 'Open Sans';
}

.download-link-btn{
    width:100%;
    height: 30px;
}

.download-link-btn a{
    font-weight: bold;
    font-size: 20px;
    background: rgb(36, 230, 101);
    border-bottom: 2px solid #002910;
    padding:0px 4px 0px 4px;
}

.app-screen-shots{
    width: 100%;
    height: 190px;
    white-space: nowrap;  
    margin:0px 0px 20px 0px;   
}

.left-nav {
    width:10%;
    height: 200px;
    display: inline-block; 
    background-image: url(../infonii/nav_left.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    white-space: nowrap;
    cursor: pointer;
    
}

.img-ctn{
    width:80%;
    height: 200px;
    overflow-y: hidden;
    overflow-x: hidden;
    white-space: nowrap;
    display: inline-block; 
    z-index: 10;   
}

.single-img-li-ctn{
    width:auto;
    height: 190px;
    margin: 0px 10px 0px 10px;
    display: inline-block;
    padding:5px; 
    
}

.single-img-li-ctn img{
    width: auto;
    height: 190px;
    cursor: pointer;
    box-shadow: 0px 1px 4px #aaaaaa;
    border-radius: 4px;
}

.right-nav{
    width:9%;
    height: 200px;
    display: inline-block; 
    background-image: url(../infonii/nav_right.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    white-space: nowrap;
    cursor: pointer;
}

/* Image Preview */
.img-preview-ctn{
    width: 100%;
    height: 100%;
    padding:10px;
    background-color: rgba(0,0,0,0.9);
    display:block;
    position: fixed;
    display: none;    
}

.img-preview-ctn-show{
    display: block;
}

.inner-preview-ctn{
    width: 85%;
    height: 100%;
    margin: 0px auto 0px auto;  
}

.close-img-preview{
    width:100%;
    height: 70px;
    text-align: right;
    color: #ffffff;
    font-size: 40px;
    padding: 0px 30px 0px 0px;
    margin: 0px 30px 0px 0px;
    cursor: pointer;
}

/* information for bisaGps app */
.sub-title{
    width:auto;
    height: auto;
    padding:0px 0px 10px 0px;
    font-size:25px;
    font-weight: bold;
}

.bisa-purpose-ul {
    width: auto;
    height: auto;
    margin:0px 0px 30px 0px;
    font-size: 25px;
}

.bisa-purpose-ul li{
    font-size: 25px; 
    text-decoration: #21B251;
    text-decoration-style: solid;
    text-indent: -40px;
    list-style:inside; 
}

.paragraph-info{
    width:auto;
    height: auto;
    padding:0px 0px 30px 0px;
    font-size:25px;
    text-align: justify;
}

.info-link{
    width:auto;
    height: auto;
    padding:0px 0px 30px 0px;
    font-size:25px;
    color: green;
}



/* Frequent Asked Questions*/
.faq-nav{
    width: 90%;
    height: auto;
    border: 1px solid #137238;
    margin: 10px auto 60px auto;
    border-radius: 10px;
}

.faq-nav-ul{
    width: 100%;
    height: inherit;
    border-radius: 10px;
    border: 1px solid #137238;
    margin: 0px auto 0px auto;
}

.faq-nav-ul li{
    width: 100%;
    height: inherit;
    padding: 10px 0px 10px 30px;
    text-align: left;
    display: block;
    border-bottom: 1px solid #137238;
    background-color: rgb(233, 252, 215);
}

.faq-nav-ul li a{
    font-size: 20px;    
}

.faq-nav-back{
    width: 100%;
    height: auto;
    font-size: 16px;
    color: #aaaaaa;
    margin: 0px 0px 40px 0px;
}

.faq-nav-back a{
    font-size: 16px;
    color: #aaaaaa;
}

.bisa-faq-order-ul{
    width: 80%;
    height: auto;
    margin:0px auto 30px auto;
    font-size: 20px;
}

.bisa-faq-order-ul li{
    font-size: 20px; 
    text-decoration-style: none; 
    text-indent: -30px;
    
    text-align: justify;
}