@charset "utf-8";
body{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:14px;line-height:18px;}
.loading{position:relative;width:100%;min-height:100%;height:100%;height:auto !important;background:#fff;position:fixed;top:0;left:0;bottom:0;z-index:100000;}
a{color:#036;}
.loading i{position:absolute;left:50%;top:50%;color:#fff;font-size:70px}
html, body{ height: 100vh;overflow:hidden;margin:0;padding:0; }
li,ol{color:#57666e}
.content{overflow: auto;position: relative;padding: 0px;margin: 0px;width: 77vw;height: 100vh;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.content.hidden{ display: none; }
.sidebar{background:url(../images/homebg.png) no-repeat center bottom #fff;width:25vw;display:block;right:0;top:0;height:100vh;position:fixed;min-width:250px;}
.logo{background:#fff;padding:15px 15px 10px 15px;text-align:center;height:55px}
.logo img{max-width:300px;}
.qlinks{list-style-type:none;margin:0;padding:0;}
.qlinks {margin: 0 auto;display: table;table-layout: auto;float: none;width: 100%;}
.qlinks>li {display: table-cell;float: none;text-align: center;}
.qlinks>li>a {line-height:10px;display:block;padding:30px 0;text-decoration:none;}
.qlinks>li>a:hover {background-color:rgba(255,255,255,0.5) !important}
.sideContent{height:calc( 100vh - 166px);}
.qlinks li:nth-child(1) a{background:url(../images/homeicon.png) no-repeat center center;}
.qlinks li:nth-child(2) a{background:url(../images/homeicon2.png) no-repeat center center;}
.qlinks li:nth-child(3) a{background:url(../images/homeicon3.png) no-repeat center center;}
.qlinks li:nth-child(4) a{background:url(../images/homeicon4.png) no-repeat center center;}
.menu{list-style-type:none;margin:5% 0 0 25%;padding:0}
.menu li a{display:block;font-size:16px;padding:10px;color:#4f5e65; text-decoration:none;line-height:16px;}
.menu li a:hover{font-size:17px;line-height:16px;}
.mCSB_dragger_bar:before{position: absolute;font-family: 'FontAwesome';top: 0;left: 10px;font-size:30px;content: "\f106";line-height: 20px;}
.mCSB_dragger_bar:after{position: absolute;font-family: 'FontAwesome';font-size:30px;bottom: 0;left: 10px;content: "\f107";line-height: 23px;}
section{margin-bottom:50px;margin-left: 40px;min-height:calc(100vh - 139px);}
footer{margin:0 0 0 40px;height:32px;border-top:1px solid #ccc;padding:10px 0;font-size:11px;color:#555;}
section#home{min-height:auto !important}
.projects{padding:0;border-top:1px solid #eee;}
.projects li{list-style:none;clear:both;border-bottom:1px solid #eee;overflow:auto;padding: 10px;}
.projects li img{float:left;margin-right:10px;width:200px;}
.projects li a{text-decoration:underline;color:#036}
.projects li h5,.projects li h3{color:#036}
.projects li:nth-child(even){background:#f9f9f9;}
.service li, #services ol li{padding:3px 0;border-bottom:1px solid #d7dde0;color:#57666e}
.firstpara::first-letter {font-size:20px;color:#80939d;}
#mCSB_1_container{margin-right:0;}
.proimage{max-width:200px;clear:both;}
h1{font-size:5em;line-height:1em;color:#d5dbde;margin-top:20px;font-family:system-ui;}
.homeimg{float:left;margin:0 20px 20px 0}
.sidebar{-webkit-box-shadow: -4px 0px 13px 0px rgba(0,0,0,0.4);-moz-box-shadow: -4px 0px 13px 0px rgba(0,0,0,0.4);box-shadow: -4px 0px 13px 0px rgba(0,0,0,0.4);z-index: 1;border-left: 1px solid #eeef;}
.welcome{background: url(../banners/021.jpg) no-repeat right top;background-size: contain;padding-right: 20%;height: 100vh;}
.aboutpage{background: url(../banners/03.jpg) no-repeat right top;background-size: contain;padding-right: 20%;height: 100vh;}
.portfoliopage{background: url(../banners/04.jpg) no-repeat right top;background-size: contain;padding-right: 20%;height: 100vh;}
.servicespage{background: url(../banners/05.jpg) no-repeat right top;background-size: contain;padding-right: 20%;height: 100vh;}
.thankspage{background: url(../banners/06.jpg) no-repeat right top;background-size: contain;padding-right: 20%;height: 100vh;}
.aboutpage{background: url(../banners/07.jpg) no-repeat right top;background-size: contain;padding-right: 20%;height: 100vh;}
.contactpage{background: url(../banners/08.jpg) no-repeat right top;background-size: contain;padding-right: 20%;height: 100vh;}
.btn{background:#4c5a61;padding:5px 10px;text-decoration:none;color:#fff;}
.service{padding-left: 165px;}
.contactbox{float:left;background:#f1f1f1;padding: 15px;width:100%;}
.contactbox input, .contactbox textarea{width:90%;padding: 5px 0;}
@keyframes blinking {0% {background-color: #00000040;}100% {background-color: #f9f9f9;}}.blink {animation: blinking 1s infinite;}