@charset "UTF-8";
/* =============================================================================================
                              ________  __      __  _________
                              \______ \/  \    /  \/   _____/
                                |    |  \   \/\/   /\_____  \ 
                                |    `   \        / /        \
                               /_______  /\__/\  / /_______  /
                                       \/      \/          \/ 
                          WMS - Website Management Software (c) 2022
                                   by Direct Web Solutions

    The following document, also known as index.css, is developed for the sole use 
    of directwebsolutions.ca by the team at Direct Web Solutions. This design was 
    developed by us and is considered the property of our company. Please do not 
    steal the code from this template as we have worked hard on it to make our 
    business successful. If you would like to take parts of the css for use in
    your own project, you may do so, but copying all of it or cloning our website 
    would be grounds to pursue legal action. Thanks for understanding and have a 
    great day!
    
    ~ Darryn Fehr,
    Direct Web Solutions
    
    ----------------------------------------------------------------------------------------
    @category    User Defined
    @package     WMS User Website
    @license     https://www.directwebsolutions.ca/wms/v3/license 3.0+ License
    @version     Release: 3.0.1
============================================================================================= */

header .portal-content{z-index:3;position:absolute;top:20px;left:0;width:100%;}
header .portal-navdots{text-align:center;color:#fff;width:100%;position:absolute;bottom:10px;left:0;right:0;z-index:2 !important;}
header .portal-navdots .nav-dot{z-index:3 !important;top:-5px;width:11px;height:11px;margin:0 4px;position:relative;border-radius:100%;display:inline-block;background-color:#ccc;background-color:rgba(255,255,255,0.5);}
header .portal-navdots .nav-dot:hover{cursor:pointer;background-color:#fff;background-color:rgba(255,255,255,0.8);}
header .portal-navdots .active{background-color:#fff;background-color:rgba(255,255,255,0.8);}
header .slides{display:none;}
header .portal-header{z-index:1;height:510px;background-image:url("../images/index/slides/1.webp");background-repeat:no-repeat;position:relative;background-size:cover;}
header .portal-header::before{z-index:2;width:100%;height:100%;position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.6);content:"";}
header .head .portal-title{line-height:1.55em;padding:0 20px;font-family:Roboto,sans-serif;margin-top:110px;text-transform:uppercase;text-align:center;font-weight:900;}
header .head .portal-tagline{line-height:1.55em;padding:0 20px;padding-top:9px;max-width:480px;font-size:16px;text-align:center;margin:0 auto;}
header .head .portal-tagurl{text-align:center;padding-top:20px;}
header .head .portal-taglink{color:#fff;text-decoration:none;display:inline-block;transition:.2s linear;padding:11px 17px;border:1px solid #7fb85e;border-radius:12px;}
header .head .portal-taglink:hover{border:1px solid #3e5a2e;transition:.2s linear;}
header .portal-slider .fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;}
main .index .monitoring{padding:50px 0 0;overflow:hidden;background:#fafafa url("../images/index/monitoring_bg.webp") repeat-x center bottom;}
main .index .monitoring .padding{padding:0;padding-left:10px;padding-right:10px;}
main .index .monitoring .title{font-family:'LatoHeavy', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;color:#5A5A5A;text-rendering:optimizeLegibility;line-height:1.1;padding-bottom:12px;padding-top:12px;font-weight:400;text-align:center;font-size:34px;}
main .index .monitoring .center{text-align:center;}
main .index .monitoring .image{width:100%;display:block;}
main .index .topindex .title{color:#333;text-align:center;margin-bottom:25px;font-size:34px;font-family:'LatoBold', sans-serif;letter-spacing:-0.02em;font-weight:900;line-height:1.3;margin-top:12px;text-rendering: optimizelegibility;}
main .index .topindex .title span{color:#7fb85e;}
main .index .topindex p{font-size:15px;letter-spacing:.02em;text-align:center;line-height:1.5;margin:0 0 17px 0;font-weight:300;}
main .monitoring .image img{width:100%;height:auto;-ms-interpolation-mode:bicubic;display:inline-block;vertical-align:middle;visibility:visible;animation-delay:0.3s;animation-name:fadeInUp;}
main .monitoring .image ::selection,main .monitoring .image ::-moz-selection{background:transparent;}
main .index .index-about{background:#eaedf2 url("../images/index/about_us_bg.webp") top right;min-height:895px;padding-top:215px;}
main .index .smallhr{border:solid #7fb85e;border-top-width:medium;border-right-width:medium;border-bottom-width:medium;border-left-width:medium;border-width:2px 0 0;clear:both;height:0;margin:21px 0 42px;max-width:100px;}
main .index .index-hostingtop{text-align:center;position:relative;background:#fff;border-bottom:1px solid #eee;padding:45px 0;}
main .index .index-hostingtop:after, main .index-hostingtop:before{top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
main .index .index-hostingtop:after{border-color:rgba(255,255,255,0);border-top-color:#fff;border-width:15px;margin-left:-15px;}
main .index .index-hostingtop:before{border-color:rgba(238,238,238,0);border-top-color:#eee;border-width:16px;margin-left:-16px;}
main .index .index-hostingtop .title{text-transform:uppercase;font-size:34px;font-family:'Lato',sans-serif;letter-spacing:-0.02em;font-weight:900;color:#333;line-height:1.3;margin-bottom:12px;margin-top:12px;text-rendering:optimizelegibility;}
main .index .index-hostingtop .title span{color:#7fb85e;}
main .index .index-hostingtop .text-center{font-size:17px;letter-spacing:.02em;;color:#666;text-align:center;padding-bottom:50px;}
main .index .index-hostingtop .calltoaction-button{margin-top:20px;font-size:16px;padding:12px 15px;border:1px solid #3e5a2e;color:#3e5a2e;transition:200ms all;text-transform:uppercase;}
main .index .index-hostingtop .calltoaction-button:hover{border:1px solid #337db0;color:#337db0;transition:200ms all;text-decoration:none;}
main .index .index-about .surrounder{max-width:550px;text-align:justify;}
main .index .index-about .surrounder .title{text-transform:uppercase;font-size:34px;font-family:'Lato',sans-serif;letter-spacing:-0.02em;font-weight:900;color:#333;line-height:1.3;margin-bottom:12px;margin-top:12px;text-rendering:optimizelegibility;}
main .index .index-about .surrounder .title span{color:#7fb85e;}
main .index .index-about .surrounder .btn:hover{background:#ffffff;color:#7fb85e;text-decoration:none;border:1px solid #7fb85e;}
main .index .index-about .surrounder .p{font-family:inherit;font-size:17px;line-height:1.5;margin:0 0 17px 0;font-weight:300;margin-bottom:36px;}
main .index .index-about .surrounder .undertitle{font-weight:300;font-size:30px;margin-bottom:35px;}
main .index .index-about .surrounder .btn{-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);-o-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;border:1px solid #fff;border-radius:4px;background:#7fb85e;color:#fff;font-size:14px;letter-spacing:.06em;font-weight:400;padding:7px 18px 8px;text-shadow:none;}
main .index .customsol{text-align:center;position:relative;background:#e1ebed;border:1px solid #e1ebed;}
main .index .customsol:after,main .customsol:before{bottom:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
main .index .customsol:after{border-color:rgba(225,235,237,0);border-bottom-color:#e1ebed;border-width:15px;margin-left:-15px;}
main .index .customsol:before{border-color:rgba(225,235,237,0);border-bottom-color:#e1ebed;border-width:16px;margin-left:-16px;}
main .index .customsol .title{font-size:19px;color:#3D3F40;margin-bottom:30px;}
main .index .customsol .calltoaction-button{-moz-box-shadow:0 10px 14px -7px #ccc;-webkit-box-shadow:0 10px 14px -7px #ccc;box-shadow:0 10px 14px -7px #ccc;background-color:#78b3d4;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #5590b1;display:inline-block;cursor:pointer;color:#ffffff;font-weight:bold;padding:6px 40px;text-decoration:none;text-shadow:0 1px 0 #5b8a3c;font-family:inherit;line-height:1.4;margin-bottom:17px;font-size:14px;}
main .index .customsol .calltoaction-button:hover{background-color:#333;color:#ffffff;text-decoration:none;border:1px solid #000;text-shadow:none;}
main .index .index-blockview{background:#fff;color:#222;text-align:justify;text-align-last: center;}
main .index .index-blockview .row{position:relative;overflow:hidden;min-height:1px;width:100%;display:table;padding-top:65px;padding-bottom:30px;}
main .index .index-blockview .row .block-grid-item{width:25%;float:left;}
main .index .index-blockview [class*="block-grid-"]::before, main .index-blockview [class*="block-grid-"]::after{content:" ";display:table;}
main .index .index-blockview .row .block-grid-item .shadow-effect{background:#fff;margin:20px;border-radius:4px;text-align:center;box-shadow:0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);}
main .index .index-blockview .row .block-grid-item .shadow-effect .padder{padding:20px;padding-top:40px;min-height:290px;position:relative;}
main .index .index-blockview .row .block-grid-item .shadow-effect .padder .typcn{font-size:70px;color:#7fb85e;}
main .index .index-blockview .row .block-grid-item .shadow-effect .padder .title{font-family:'Lato', sans-serif;letter-spacing:.06em;font-size:12px;font-weight:900;line-height:1.3;margin-bottom:12px;margin-top:12px;text-rendering:optimizelegibility;}
main .index .index-blockview .row .block-grid-item .shadow-effect .padder p{letter-spacing:.02em;font-size:12px;color:#666;text-align:center;}
main .index .index-blockview .row .block-grid-item .shadow-effect .padder .linker{position:absolute;bottom:20px;left:0;right:0;}
main .index .index-blockview .row .block-grid-item .shadow-effect .padder .linker .btn{-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);-o-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;border:1px solid #fff;border-radius:4px;background:#7fb85e;color:#fff;font-size:11px;letter-spacing:.06em;font-weight:400;padding:7px 18px 8px;margin-top:10px;display:inline-block;text-shadow:none;}
main .index .index-blockview .row .block-grid-item .shadow-effect .padder .linker .btn:hover{background:#ffffff;color:#7fb85e;text-decoration:none;border:1px solid #7fb85e;}
main .index .hostingplans{display:block;background-color:#222;background-image:url("../images/index/servers_bg.webp");background-position:center;background-repeat:no-repeat;background-size:cover;color:#222;padding:30px 0;}
main .index .hostingplans .rowitem{width:25%;float:left;}
main .index .hostingplans .rowitem .title-features{font-family:'Open Sans',Arial,sans-serif;background:#337db0;padding:12px 0;text-align:center;letter-spacing:.07em;color:#fff;font-weight:800;font-size:17px;position:relative;}
main .index .hostingplans .rowitem .pricing-table,main .index .hostingplans .rowitem .features{list-style:none;line-height:1;border:0;margin:0 0 1.25em 0;padding:0;margin-bottom:1rem;}
main .index .hostingplans .rowitem .features{background:#ededed;overflow:hidden;}
main .index .hostingplans .rowitem .features .bullet-item{height:42px;list-style:none;line-height:1;background-color:#ededed;text-align:left;color:#333;font-size:14px;border-bottom:solid 1px #D7D7D7;padding:0.9375em;font-weight:normal;}
main .index .hostingplans .rowitem .title-alt{font-family:'Open Sans',Arial,sans-serif;background:#3e5a2e;padding:12px 0;text-align:center;letter-spacing:.07em;color:#fff;font-weight:800;font-size:17px;position:relative;}
main .index .hostingplans .rowitem .pricing-table .bullet-item{height:42px;background-color:#7fb85e;padding:0.9375em;text-align:center;color:#fff;font-size:14px;font-weight:normal;border-bottom:solid 1px #71a851;border-left:solid 1px #71a851;list-style:none;line-height:1;}
main .index .hostingplans .rowitem .pricing-table .price{overflow:hidden;border-bottom:solid 1px #71a851;padding:14px 0 20px;height:88px;font-family:'LatoBold',Arial,sans-serif;background:#fff;text-align:center;color:#7E8D97;font-weight:900;font-size:15px;list-style:none;line-height:1;}
main .index .hostingplans .rowitem .pricing-table .cta-button{background:#3d3f40;padding:4px 0;border-radius:0;text-align:center;}
main .index .hostingplans .rowitem .pricing-table .cta-button p{padding:14px 0 2px;text-align:center;font-family:inherit;font-weight:normal;line-height:1.45;margin-bottom:17px;font-size:17px;}
main .index .hostingplans .rowitem .pricing-table .cta-button span a{-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);-o-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;font-size:14px;background:#337db0;padding:5px 17px;border-radius:6px;color:#fff;}
main .index .hostingplans .show-for-small{display:none;}
main .index .hostingplans .rowitem .pricing-table .price .anually{color:#7E8D97;font-weight:900;font-size:33px;display:block;padding:15px 0;}
main .index .hostingplans .rowitem .pricing-table .price .anually sub{font-size:14px;padding-left:2px;font-weight:400;text-shadow:none;top:0;vertical-align:baseline;position:relative;}
main .index .hostingplans .rowitem .pricing-table .price .monthly{color:#7E8D97;font-weight:900;font-size:33px;display:block;padding:15px 0;}
main .index .hostingplans .rowitem .pricing-table .price .monthly sub{font-size:14px;padding-left:2px;font-weight:400;text-shadow:none;top:0;vertical-align:baseline;position:relative;}
main .index .hostingplans .rowitem .selection{width:100%;height:88px;background:#fff;border-bottom:1px solid #ccc;}
main .index .hostingplans .rowitem .selection .period{padding:0;padding-top:26px;list-style:none;display:table;margin:0 auto;text-align:center;}
main .index .hostingplans .rowitem .selection .period li{background:#e3e3e3;border:1px solid #bbb;-webkit-box-shadow:inset 0 0 1px 1px #f6f6f6;-moz-box-shadow:inset 0 0 1px 1px #f6f6f6;box-shadow:inset 0 0 1px 1px #f6f6f6;color:#333;line-height:1;text-align:center;float:left;text-shadow:0 1px 0 #fff;padding:8px 13px 10px;font-size:13px;font-weight:600;}
main .index .hostingplans .rowitem .selection .period .colored{background:#78b3d4;text-shadow:0 1px 0 #333;color:#fff;}
main .index .hostingplans .rowitem .selection .period li a{text-decoration:none;color:inherit;cursor:pointer;}
main .index .hostingplans .rowitem .pricing-table .cta-button span a:hover{background:#ffffff;color:#7fb85e;text-decoration:none;border:1px solid #7fb85e;}
@media screen and (max-width:1008px){
    main .index .monitoring .title, main .index .monitoring .center{max-width:600px;margin:0 auto;}
}
@media screen and (max-width:888px){
    main .index .index-blockview .row .block-grid-item{width:50%;float:left;}
}
@media screen and (max-width:750px){
    main .index .index-about{background:#eaedf2;min-height:520px;padding-top:38px;}
    main .index .index-about .surrounder{max-width:100%;}
}
@media screen and (max-width:730px){
    main .index .hostingplans .rowitem{width:100%;float:left;}
    main .index .hostingplans .rowitem .title-features{font-family:'Open Sans',Arial,sans-serif;background:#337db0;padding:12px 0;text-align:center;letter-spacing:.07em;color:#fff;font-weight:800;font-size:17px;position:relative;}
    main .index .hostingplans .rowitem .features .bullet-item{display:none;}
    main .index .hostingplans .show-for-small{display:inline-block;padding-left:5px;}
    main .index .hostingplans .hide-for-small{display:none;}
    main .index .hostingplans .rowitem .pricing-table i{display:none;}
}
@media screen and (max-width:660px){
    main .index .monitoring{padding-top:10px}
    main .index .monitoring .title{font-size:20px;}
    main .index .monitoring .center{padding-bottom:10px;}
    main .index .monitoring .title, main .monitoring .center{max-width:330px;}
}
@media screen and (max-width:470px){
    main .index .index-blockview .row .block-grid-item{width:100%;float:left;}
}
@media screen and (max-width:421px){
    header .portal-title{font-size:22px;margin-top:90px;}
}