@charset "UTF-8";
/* CSS Document */


/************************************************************** viewport >1401 **************************************************************/
@media only screen and (min-width: 1400px) {
.wrapper {width:1380px; margin:0 auto;}
.container {width:100%;}

.bg-main {background:url("../pics/bg.jpg"); background-size:cover; }
.heading-space {padding-top:100px!important;}
.invoiceNOW-tag {position: absolute; top: 50%; transform: translateY(-50%); right:5% }
.overlay-banner {position: absolute; top: 0; start: 0; width: 100%; height: 100%; background-color: #000; opacity:0;}

/*#iSolveCloud .tab-pane {border-right:0; border-left:0; border-bottom:0;}    */

.laptop-screens {width:800px; margin:0 auto}
#screens {position: absolute; width:546px; left: 50%; transform: translateX(-50%); top:55px }    
#screens .item {min-height:415px}
#screens .item >  p {margin-top:40px; font-size: .9em;}
.about-screens {width:100%; margin:0 auto; }
    
    
    
}




/************************************************************** viewport 1301 to 1399 **************************************************************/
@media only screen and (min-width: 1301px) and (max-width:1399px) {
.wrapper {width:1280px; margin:0 auto; }
.container {width:100%;}

.bg-main {background:url("../pics/bg.jpg"); background-size:cover; }
.heading-space {padding-top:100px!important;}
.invoiceNOW-tag {position: absolute; top: 50%; transform: translateY(-50%); right:5% }
.overlay-banner {position: absolute; top: 0; start: 0; width: 100%; height: 100%; background-color: #000; opacity:0;}
    
/*#iSolveCloud .tab-pane {border-right:0; border-left:0; border-bottom:0;}    */
    
.laptop-screens {width:800px; margin:0 auto}
#screens {position: absolute; width:546px; left: 50%; transform: translateX(-50%); top:55px }    
#screens .item {min-height:415px}
#screens .item >  p {margin-top:40px; font-size: .9em;}
.about-screens {width:100%; margin:0 auto; }



}




/************************************************************** viewport 1201 to 1300 **************************************************************/
@media only screen and (min-width: 1201px) and (max-width:1300px) {
.wrapper {width:1180px; margin:0 auto; }
.container {width:100%;}
    
.bg-main {background:url("../pics/bg.jpg"); background-size:cover; }
.heading-space {padding-top:100px!important;}
.invoiceNOW-tag {position: absolute; top: 50%; transform: translateY(-50%); right:5% }
.overlay-banner {position: absolute; top: 0; start: 0; width: 100%; height: 100%; background-color: #000; opacity:0;}
    
/*#iSolveCloud .tab-pane {border-right:0; border-left:0; border-bottom:0;}    */
    
.laptop-screens {width:800px; margin:0 auto}
#screens {position: absolute; width:546px; left: 50%; transform: translateX(-50%); top:55px }    
#screens .item {min-height:415px}
#screens .item >  p {margin-top:40px; font-size: .9em;}
.about-screens {width:100%; margin:0 auto; }

    
    

}



/************************************************************** viewport 980 to 1200 **************************************************************/
@media only screen and (min-width: 980px) and (max-width:1200px) {
.wrapper {width:980px; margin:0 auto;}
.container {width:100%}
    
.bg-main {background:url("../pics/bg.jpg"); background-size:cover; }
.heading-space {padding-top:100px!important;}
.invoiceNOW-tag {position: absolute; top: 50%; transform: translateY(-50%); right:1% }
.overlay-banner {position: absolute; top: 0; start: 0; width: 100%; height: 100%; background-color: #000; opacity:0;}
    

    
.laptop-screens {width:800px; margin:0 auto}
#screens {position: absolute; width:546px; left: 50%; transform: translateX(-50%); top:55px }    
#screens .item {min-height:415px}
#screens .item >  p {margin-top:40px; font-size: .9em;}
.about-screens {width:100%; margin:0 auto; }


}



/************************************************************** viewport 980 to 992 - ac **************************************************************/
@media only screen and (min-width: 980px) and (max-width:992px) {



}



/************************************************************** viewport 941 to 979 **************************************************************/
@media only screen and (min-width: 941px) and (max-width: 979px) {
.wrapper {width:100%;}
.container {width:100%}
    
.bg-main {background:url("../pics/bg.jpg"); background-size:cover; }
.heading-space {padding-top:100px!important;}
.invoiceNOW-tag {position: absolute; top: 50%; transform: translateY(-50%); right:1% }
.overlay-banner {position: absolute; top: 0; start: 0; width: 100%; height: 100%; background-color: #000; opacity:0;}

.laptop-screens {width:800px; margin:0 auto}
#screens {position: absolute; width:546px; left: 50%; transform: translateX(-50%); top:55px }    
#screens .item {min-height:415px}
#screens .item >  p {margin-top:40px; font-size: .9em;}
.about-screens {width:100%; margin:0 auto; }

	

	
}



/************************************************************** viewport 768 to 940 **************************************************************/
@media only screen and (min-width: 768px) and (max-width: 940px) {
.wrapper {width:100%;}
.container {width:100%}

.heading-space {padding-top:100px!important;}
.invoiceNOW-tag {position: absolute; top: 50%; transform: translateY(-50%); right:5% }
.overlay-banner {position: absolute; top: 0; start: 0; width: 100%; height: 100%; background-color: #000; opacity:0;}
    
.laptop-screens {width:700px; margin:0 auto}
#screens {position: absolute; width:478px; left: 50%; transform: translateX(-50%); top:50px }    
#screens .item {min-height:380px}
#screens .item >  p {margin-top:30px; font-size: .9em}
.about-screens {width:100%; margin:0 auto; }



}
	
	

/************************************************************** viewport 480 to 767 **************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.wrapper {width:100%;}
    
.bg-main {background:url("../pics/bg-mobile.jpg"); background-size:contain; background-position: top center }
.bg-aboutUs {background-position: 35% center!important;}
.logo {width:120px; height: auto}
.heading-space {padding-top:90px!important;}
.invoiceNOW-tag {position: absolute; bottom: 1%; right:5% }
.bg-invoiceNOW {background-position: 20% 100%!important;}
.overlay-banner {position: absolute; top: 0; start: 0; width: 100%; height: 100%; background-color: #fff; opacity:.2;}

#mainNav ul {width:100%!important; background-color:#f9f9f9; padding:10px;}    
#mainNav ul.navbar-nav a.nav-link {font-weight: normal;  padding:10px;}
#mainNav, #mainNav.scrolled {background:rgba(249,249,249,1)!important; box-shadow:0 0 0 0!important; }
#mainNav.scrolled .logo {transform: scale(0.8); margin-top:-10px;}
#mainNav ul > li {padding-right:0px;}
#navbarCollapse {box-shadow: 0 -5px 5px -5px #ccc; margin-top:10px;}
.navbar-toggler:focus {box-shadow: 0 0 0 0rem!important;}
    
.laptop-screens {width:450px; margin:0 auto}
#screens {position: absolute; width:307px; left: 50%; transform: translateX(-50%); top:30px }    
#screens .item {min-height:320px}
#screens .item >  p {margin-top:10px; font-size: .9em}
.about-screens {width:100%; margin:0 auto; }

	

}



/************************************************************** viewport 321 to 479 **************************************************************/
@media only screen and (min-width: 321px) and (max-width: 479px) {
.wrapper {width:100%;}

.bg-main {background:url("../pics/bg-mobile.jpg"); background-size:contain; }
.bg-aboutUs {background-position: 36% center!important;}
.logo {width:120px; height: auto}
.heading-space {padding-top:90px!important;}
.invoiceNOW-tag {position: absolute; bottom: 1%; right:5% }
.bg-invoiceNOW {background-position: 20% 100%!important;}
.overlay-banner {position: absolute; top: 0; start: 0; width: 100%; height: 100%; background-color: #fff; opacity:.2;}

    
#mainNav ul {width:100%!important; background-color:#f9f9f9; padding:10px;}    
#mainNav ul.navbar-nav a.nav-link {font-weight: normal;  padding:10px;}
#mainNav, #mainNav.scrolled {background:rgba(249,249,249,1)!important; box-shadow:0 0 0 0!important; }
#mainNav ul > li {padding-right:0px;}
.navbar-toggler:focus {box-shadow: 0 0 0 0rem!important;}
#navbarCollapse {box-shadow: 0 -5px 5px -5px #ccc; margin-top:10px;}
    
.laptop-screens {width:310px; margin:0 auto}
#screens {position: absolute; width:212px; left: 50%; transform: translateX(-50%); top:20px }    
#screens .item {min-height:250px;}
#screens .item >  p {margin-top:0px; font-size: .9em}
.about-screens {width:100%; margin:0 auto; }
    

	
}


/************************************************************** viewport <320 **************************************************************/

@media only screen and (max-width: 320px) {
.wrapper {width:100%}

.bg-main {background:url("../pics/bg-mobile.jpg"); background-size:contain; }
.bg-aboutUs {background-position: 38% center!important;}
.logo {width:120px; height: auto}
.heading-space {padding-top:90px!important;}
.invoiceNOW-tag {position: absolute; bottom: 1%; right:5% }
.bg-invoiceNOW {background-position: 20% 100%!important;}
.overlay-banner {position: absolute; top: 0; start: 0; width: 100%; height: 100%; background-color: #fff; opacity:.2;}
    
.laptop-screens {width:300px; margin:0 auto}
#screens {position: absolute; width:205px; left: 50%; transform: translateX(-50%); top:20px }    
#screens .item {min-height:250px;}
#screens .item >  p {margin-top:-10px; font-size: .9em}
.about-screens {width:100%; margin:0 auto; }

    
#mainNav ul {width:100%!important; background-color:#f9f9f9; padding:10px;}    
#mainNav ul.navbar-nav a.nav-link {font-weight: normal;  padding:10px;}
#mainNav, #mainNav.scrolled {background:rgba(249,249,249,1)!important; box-shadow:0 0 0 0!important; }
#mainNav ul > li {padding-right:0px;}
.navbar-toggler:focus {box-shadow: 0 0 0 0rem!important;}
#navbarCollapse {box-shadow: 0 -5px 5px -5px #ccc; margin-top:10px;}


}