body{background:#ffffff;font-family: 'Open Sans', sans-serif;font-weight: 400;overflow-x:hidden;color:#575757;position: relative;font-size:14px;}
h1, h2, h3, h4, h5, h6{font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;}
	
a{color:#f28020;-webkit-transition:all 0.2s ease-in 0s;-o-transition:all 0.2s ease-in 0s;transition:all 0.2s ease-in 0s;}
.btn{-webkit-transition:all 0.2s ease-in 0s;-o-transition:all 0.2s ease-in 0s;transition:all 0.2s ease-in 0s;}
	
a:hover{color:#f28020;}

::-moz-placeholder{color:#666666;opacity:1;}
::-webkit-input-placeholder{color:#666666;opacity:1;}
:-ms-input-placeholder{color:#666666;opacity:1;}

/* Start h2 */
h2{font-size: 40px; font-weight: 400;}	
h2 span{color: #28a7e9;font-weight: bold;}
/* End h2 */

/* == Header Css == */
.header{width:100%;padding:15px 0px;}
.header > .container {text-align: center;}
.fixed-top {position: fixed; top: 0; left: 0; width: 100%;  background-color: #fff; z-index: 2;}
.fixed-top + .bg-hero {padding-top: 60px;}
.logo img{width:185px;height:42px;}

.headRight{margin-top:5px;}
.searchGlobal{width:250px;float: left;}
.searchGlobal .form-control{padding:5px 12px;font-size:0.9rem;}
.searchGlobal .form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);}
.searchGlobal .btn{padding:5px 12px;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;font-size:14px;}
.searchGlobal .btn:focus{box-shadow:none !important;}

.contactSupport {float: right; margin-left: 10px; margin-top: 5px; position: relative;}
.toggleMenu{padding:0px 0px 10px 0px;display:block;}
.toggleBtn{display:none;}
.contactSupport ul {position: absolute; top: 30px; right: 0; width: 100%; background: #fff; min-width: 200px; list-style: none; margin: 0; padding: 10px 0; box-shadow: 0px 2px 20px -8px rgba(0,0,0,0.8); border-radius: 6px; overflow: hidden; display: none;z-index:3;}
.contactSupport ul:hover{display:block;}
.contactSupport ul li {text-align: left; width: 100%; float: left;}
.contactSupport ul li a {padding: 5px 20px; display: inline-block; width: 100%; line-height: normal;font-size:14px;}
.contactSupport ul li a i {font-size: 10px; margin-right: 5px; float: left; margin-top: 6px;}
.contactSupport ul li a span {float: left; width: 90%;}
.contactSupport ul li a:hover, .contactSupport ul li.active a {background-color:#f17f1f; color: #fff; text-decoration: none;}

/* == Banner Css == */
.bg-hero{background-color: #e1f4f8; background-repeat: no-repeat; background-position: bottom right; background-size:contain;}
.bannerSection{width:100%;position:relative;height:450px;display:table;}
.bannerSection::after{content:"";clear:both;display:inline-block; width: 500px; height: 330px; background-size: 500px !important; position: absolute; right: 0; top: 20px;}
.bgNone{background:none;}
.bannerSection img{width:100%;}
.bannerCaptionBox{max-width:100%;height:100%;text-align:left;padding:0px 320px 30px 0px;display:table-cell;
    vertical-align:middle;}
.bannerCaptionBox h1{color:#f08030;font-size:45px;font-weight:600;font-family: 'Open Sans', sans-serif;margin-top:0;margin-bottom:0px;letter-spacing: -2px;}
.bannerCaptionBox p{color:#595858;font-size:18px;font-family: 'Roboto', sans-serif;font-weight: 300;line-height:28px;margin-top:10px;max-width: 70%;}
.banner-icon{width:150px;position:absolute;right:0px;top:50%;-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);}

.homePage .bg-hero {background-color: #fbf2ec;}
.homePage .bannerSection:after {background: url('../images/bg-icon-index.png') no-repeat left bottom; height: 390px;}

.accountManagement .bg-hero {background-color: #fbf2ec;}
.accountManagement .bannerSection:after {background: url('../images/bg-icon-account.png') no-repeat left center; height: 450px;}

.projectManagement .bg-hero {background-color: #fbf2ec;}
.projectManagement .bannerSection:after {background: url('../images/bg-icon-projectmgmt.png') no-repeat left center; height: 450px;}

.proofingComponent .bg-hero {background-color: #fbf2ec;}
.proofingComponent .bannerSection:after {background: url('../images/bg-icon-proof-review.png') no-repeat left center;height: 450px;}

.analyticsReporting .bg-hero {background-color: #fbf2ec;}
.analyticsReporting .bannerSection:after {background: url('../images/bg-icon-analytics.png') no-repeat left center;height: 450px;}

.smartDesign .bg-hero {background-color: #fbf2ec;}
.smartDesign .bannerSection:after {background: url('../images/bg-icon-smartdesign.png') no-repeat left center;height: 450px;}


.contentMain{padding-bottom:40px;margin-top:40px;}
.steps h2{text-align:center;margin-bottom:20px;font-family: 'Roboto', sans-serif; font-size: 40px; font-weight: 300; color: #000;}
.five-col .col-md-2{max-width:20% !important;flex:auto;}
.step-re{width:100%;display:inline-block;text-align:center;}
.step-re a{text-decoration: none; color: inherit; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; display: inline-block; padding: 30px 0; background-position: center top; background: url('../images/spacer.png') no-repeat center 30%;}
.step-re .st-title {width: 100%; display: inline-block; margin-top: 20px;}
.step-re .st-icon {width: 100%; height: 86px; display: inline-block; background-color: transparent; padding: 0; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; position: relative; overflow: hidden;}
.step-re .st-icon::before {content:''; display:inline-block; width: 100%; height: 86px; position: absolute; left: 0; top: 0; opacity: 0; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1);}
.step-re a:hover {text-decoration: none; color: inherit; background: url('../images/hoverCircle.png') no-repeat center 5px;}
.step-re .st-icon img {opacity: 1;}
.step-re a:hover .st-icon img {opacity: 0;}
.step-re a:hover .st-icon::before {opacity: 1; transform: scale(0.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8);}
.step-re a:visited, .step-re a:focus{outline: none; border: none;}

.icon-account-management::before {background:url('../images/ms1.png') no-repeat center bottom;}
.icon-project-management::before {background:url('../images/ms2.png') no-repeat center bottom;}
.icon-proofing-artworks::before {background:url('../images/ms3.png') no-repeat center bottom;}
.icon-smart-design::before {background:url('../images/ms4.png') no-repeat center bottom;}
.icon-analytics-reporting::before {background:url('../images/ms5.png') no-repeat center bottom;}

.step-re .st-icon img{max-width: 100%; width: auto; height: auto; display: inline-block; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;}
.step-re .st-title h1{font-size: 22px; font-family: 'Roboto', sans-serif; font-weight: 300; color: #000; max-width: 85%;
display: inline-block; margin-top: 10px;}
.step-re .st-title p{text-decoration: none; color: #8a8a8a;}

/* == Footer Css Start == */
.footer{width:100%;padding:15px 0px;background:#f0f0f0;display:table;}
.footer p{margin:0px;color:#888;font-size:14px;}
.footer p a{color:#888;}

/* == Go To Top Css Start == */
.go-top{width:42px;height:42px;cursor:pointer;position:fixed;bottom:10px;right:15px;text-align:center;-webkit-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;z-index:8;display:none;background:#f17f1f;border-radius:50%;overflow:hidden;line-height:38px;font-size:25px;color:#fff;}
.go-top::before{position:absolute;content:"";height:100%;top:0px;left:0px;width:100%;background:#3e467b;z-index:-1;-webkit-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;border-radius:50%;-webkit-transform:scale(0);-o-transform:scale(0);transform:scale(0);}
.go-top:hover::before{background:#424b4d;-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1);}

/* == Tabbed Content Css == */ 
.tabbedMenu.active{position:fixed;top:72px;background:#f28020;left:0;z-index:1;box-shadow:0px 0px 20px 0px #ddd; height:auto; overflow: hidden;}
.tabbedMenu.active ul {justify-content:center; min-height: 55px;}
.tabbedMenu.active ul li, .tabbedMenu.active ul li a {color: #fff;}
.tabbedMenu.active ul li a {padding: 10px 10px; -webkit-transition:none;transition:none; height: 100%;}
.tabbedMenu.active ul li a.active {color: #fff;}
.tabbedMenu.active ul li a:hover p{color:#fff;}
.tabbedMenu.active ul li.active {background:url('../images/up-arrow.png') no-repeat center bottom; background-size: 20px;}
.tabbedMenu.active ul li p {font-size: 13px; margin-top: 5px; font-weight: 600 !important;}
.tabbedMenu.active ul li a::before {margin-bottom: 0px; margin-top: 5px;}
.tabbedMenu.active ul li .nav-icon {display: none;}
.tabbedMenu{width:100%;}
.tabbedMenu ul{justify-content:center; list-style:none;margin:0;padding:0;counter-reset: li-counter;display:flex;}
.tabbedMenu ul li{width:auto;max-width:190px;display:inline-block;border-right:1px solid #ddd;text-align: center; padding-bottom: 5px; padding-top: 5px;}
.tabbedMenu ul li .nav-icon {width: auto; display: inline-block; margin-bottom: 15px; padding-top: 10px;}
.tabbedMenu ul li .nav-icon > img {height: 60px; width: auto;}
.tabbedMenu ul li:last-child{border-right: none;}
.tabbedMenu.active ul li a::before {display: none;}
.tabbedMenu ul li a{width:100%;float:left;padding:15px;box-sizing:border-box;text-decoration:none;color:#888;font-size:18px; font-weight: 100;}
.tabbedMenu ul li a.active{color:#f28020;}
.tabbedMenu ul li a:visited,.tabbedMenu ul li a:focus{outline:none;border:none;}
.tabbedMenu ul li a p{margin-bottom:0px;}
.tabbedMenu ul li a:hover p{color:#f28020;}

.tabbedContent {width: 100%; /* float: left; */ padding: 0; box-sizing: border-box; counter-reset: headingCounter;}
.tabbedContent2 {width: 100%; /* float: left; */ padding: 0; box-sizing: border-box;}
.tabbedContent2 h2 {font-family: 'Roboto', sans-serif; font-size: 40px !important; font-weight: 300 !important; color: #000 !important; line-height: normal; text-align: center;}
.intro {width: 100%; /* float: left;  border-bottom: 1px solid #ddd; */ padding-bottom: 20px; margin-top: 40px;}
.intro h2 {font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: 300; color: #333; line-height: normal; margin-left: 0;}
.tabWrapper h2 {font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: 300; color: #333; line-height: normal; margin-left: 0; counter-reset: subHeadingCounter;}
.tabWrapper h2 + h3 {margin-top: 20px;}
.tabWrapper h3::before {content:counter(headingCounter) '.' counter(subHeadingCounter); counter-increment: subHeadingCounter; width: 30px; height: 30px; display: inline-block; padding: 8px; background-color:#f28020; color: #fff; border-radius: 50%; line-height: 14px; margin-right: 15px; margin-bottom: 10px; font-size: 12px; font-family: 'Roboto', sans-serif; font-weight: 500; text-align: center; position: relative; top: -3px;}
.tabWrapper h2 span {color: #333; font-weight: 300;}
.tabWrapper h2::before {content:counter(headingCounter); counter-increment: headingCounter; width: 30px; height: 30px; display: inline-block; padding: 8px; background-color:#f28020; color: #fff; border-radius: 50%; line-height: 14px; margin-right: 25px; margin-bottom: 10px; font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: 500; text-align: center; position: relative; top: -3px;}
.tabWrapper h3, .tabWrapper h4 {font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 300; color: #333; }
.tabWrapper h3,.tabWrapper p, .tabWrapper h4, .tabWrapper h5 {padding: 0 60px;}
.tabWrapper h3 {margin-top: 60px;  line-height: normal; margin-bottom: -10px;}
.tabWrapper h3 span {color: #f28020; font-weight: 500;}
.tabWrapper h5 {margin-top: 60px;  line-height: normal; font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 300;} 
.tabWrapper h5 span {color: #f28020; font-weight: 500;}
.tabWrapper h2 + ul, .tabWrapper h2 + ol {margin-top: 0;}
.tabWrapper ul, .tabWrapper ol {margin-left:80px;margin-top:20px;/* width: 95%; */}
.tabWrapper ul > .img-holder:first-child, .tabWrapper ol > .img-holder:first-child {margin-top: -10px;}
.tabWrapper ul li, .tabWrapper ol li {margin-bottom:35px; line-height: 26px; font-size: 16px;}
.img-holder {display: inline-block; margin-top:15px; margin-bottom: 10px; width: 100%;}
.img-holder + li {margin-top: 30px;}
.img-holder img {max-width: 100%; width: auto; height: auto; box-shadow: 0px 0px 10px 0px #b5b5b5;}
.tabWrapper p {line-height:20px;margin-top:20px;}
.tabWrapper .tab-menus {margin-left: 55px;}
.divider {margin-bottom: 90px;}

.tabWrapper{width:100%;/* float:left; */padding:50px 0 50px;}
.tabWrapper:nth-child(2n-2) {background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}

.img-justified {max-width: 400px;float: right;margin-top: 30px;margin-left: 30px;}

.header-title {width: auto; display: inline-block; font-size: 14px;}
.header-title h2 {font-size: 22px; font-family: 'Roboto', sans-serif; margin-top: 8px; font-weight: 300;}


.contact {width: 100%; float: left; padding:65px 0 65px;}
.contact h2 {text-align: center; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 30px;}
.contact p {text-align: center;}
.contact form {margin-top: 20px;}
.contact form .btn-success {margin-top: 20px;}

.btn-success {background-color:#fff;border-color:#f28020;color:#f28020;}
.btn-success:hover, .btn-success:active, .btn-success:focus{background-color:#f28020 !important;border-color:#f28020 !important;color:#fff;}
.btn-success:active, .btn-success:focus{box-shadow: 0 0 0 0.2rem rgba(242, 128, 32, 0.5) !important;}
.instructions{font-size:12px;margin-top:-10px;color:red;}
.asterik::before {content: '*'; color: red;}

.or-seperator {width: 100%;text-align: center;display: inline-block;font-size: 20px;}

.inner-btns li {margin-bottom: 5px !important;}
.homePage #contact {border-top:1px solid #e1e1e1;}
.homePage .fixed-top {box-shadow: 0px 1px 5px 0px #e1e1e1;}

#success {    width: 100%;
    text-align: center;
    display: inline-block;
    padding: 0px 0 40px;
    color: green;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
}
#success .error {color: red;}

.contactSupport a {font-size: 16px;}

/* ===== Responsive Css ===== */
@media only screen and (max-width: 1199px) {
	.header-title h2{font-size:16px;}
	.bannerSection::after {width:350px; height: 390px; background-size: 100% !important; background-position: center; top: 0;}
}

@media only screen and (max-width: 991px) {
	.bannerSection{background-size:330px;background-position:right bottom;}
	.bannerCaptionBox{padding-right:200px;}
	.bannerCaptionBox h1{font-size:35px;line-height:38px;}
	.bannerCaptionBox p{font-size:14px;line-height:20px;margin-top:10px;margin-bottom:10px;}
	.banner-icon{width:100px;}
	.header-title{display:none;}
	.toggleBtn{display:block;font-size:20px;color:#f28020;padding:0px 5px;line-height:1px;background:none;margin-top:6px;padding-left:15px}
	.toggleBtn:focus{box-shadow:none;outline:none;}
	.toggleMenu{display:none;}
	.tabbedMenu.active{height:auto;}
	.tabbedMenu.active ul li p{font-size:11px;margin-top:0;}
	.tabbedMenu.active ul li a {padding:15px 10px;}
	.contactSupport ul{top:20px;}
	.homePage .bannerSection:after {background-size: 90% !important;}
	.bannerSection {height: 250px;}
	.bannerCaptionBox {padding-bottom: 0;}
	.bannerSection::after {max-width: 280px; background-size: 100% !important; height: 250px !important; background-position: right center !important;}
}

@media only screen and (max-width: 767px) {
	.header.fixed-top{position:relative;}
	.header > .container{max-width:100%;}
	.headRight{width:100%;}
	.searchGlobal{width:100%;margin-top:10px;}
	.contactSupport{font-size:12px;position:absolute;right:15px;top:20px;}
	.fixed-top + .bg-hero{padding-top:0;}
	.five-col .col-md-2{max-width: 50% !important;}
	.five-col .col-md-2:last-child{float:none !important;margin:0 auto;margin-bottom:0px;}
	.contentMain{padding-bottom:50px;margin-top:50px;}
	.tabbedMenu ul{display:block;}
	.tabbedMenu.active ul{display:flex;}
	.tabbedMenu ul li{max-width:33%;display:inline-block;margin:0px -2px 5px;vertical-align:middle;vertical-align: top;}
	.tabbedMenu ul li:nth-child(3){border-right:0px;}
	.tabbedMenu ul li a{padding:10px;font-size:12px;}
	.intro h2{font-size:24px !important;}
	.tabWrapper h2{font-size:24px;position:relative;padding-left:40px;}
	.tabWrapper h2::before{position:absolute;left:0px;top:0px;}
	.img-justified{padding:0px 0px 0px 40px;margin:0px;float:none;max-width:100%;}
	.tabWrapper ul, .tabWrapper ol{margin-left:20px;}
	.tabWrapper h3, .tabWrapper p{padding:0 20px;}
	.tabbedMenu.active{top:0px;height:0;overflow:visible;}
	.tabbedMenu.active ul{background:#f28020;}
	.tabbedMenu.active ul li a::before{content: counter(li-counter); counter-increment: li-counter; width: 25px; height: 25px; display: inline-block;text-align:center;background-color:#f28020; color: #fff; border-radius: 50%; line-height: 25px;margin:0px;font-size:18px;}
	.tabbedMenu.active ul li p{display:none;}
	.tabbedMenu.active ul li{border-right:1px solid #e0761c !important;}
	.tabbedMenu.active ul li:last-child{border-right:0px !important;}
	.tabbedMenu.active ul li{margin:0px;}
	.tabbedMenu.active ul li a{padding:14px 10px;text-align:center;}
	.tabbedMenu.active ul li.active{background-size:15px;}
	.toggleBtn{position:absolute;right:15px;top:20px;}
	.contactSupport ul{top:30px;}
	.bannerCaptionBox {width: 100%; padding: 30px 0 0;display: inline-block;text-align: center;}
	.bannerCaptionBox p {max-width: 100%;}
	.bannerSection::after {height: 250px; left: 50%; margin-left: -140px; top: 120px;}
	.bannerSection {height: 350px;}
}

@media only screen and (max-width: 575px) {
	.logo img{width:155px;height:auto;}
	.bannerSection{background-size:190px;background-position:center right;}
	.bannerCaptionBox h1{font-size:24px;line-height:30px;}
	.steps h2{font-size:28px;}
	.steps h2{text-align:center;margin-bottom:25px;}
	.go-top{width:32px;height:32px;line-height:32px;font-size:20px;right:10px;bottom:5px;}
	.intro h2{font-size:22px !important;}
	.tabWrapper h2{font-size:22px;}
	.bannerSection::after {max-width: 280px !important; margin-left: -150px !important; top: 130px;}
	.bannerSection {height: 370px;}
	.homePage .bannerSection:after {margin-left: -140px;}
}

@media only screen and (max-width: 360px) {
	.five-col .col-md-2{max-width: 100% !important;}

}