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

    The following document, also known as contact.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
============================================================================================= */

main .contact-info-row, main .contact-form-row, main .contact-submission{width:100%;box-sizing:border-box;display:block;}
main .contact-info-row{padding-top:30px;}
main .contact-info-row .info-row-alpha{width:60%;float:left;}
main .contact-info-row .info-row-alpha .contact-hspacer{padding-left:20px;}
main .contact-info-row .info-row-alpha i{width:22px;}
main .contact-info-row .info-row-alpha .contact-top-block{width:100%;display:block;}
main .contact-info-row .info-row-alpha .contact-top-block .contact-blockchunk{float:left;width:50%;}
main .contact-info-row .info-row-alpha .contact-subcontent{padding-left:43px;padding-top:10px;padding-bottom:0;}
main .contact-info-row .info-row-alpha .contact-blockchunk .contact-subcontent{padding-bottom:30px;}
main .contact-info-row .info-row-beta{width:40%;float:right;}
main .contact-info-row .info-row-beta .map{border:1px solid #ccc;padding:10px;}
main .contact-info-row .info-row-beta .map #map{height:200px;}
main .contact-info-row .info-row-beta .map #map .gm-style-cc{display:none;}
main .contact-form-row .contact-form-cover{position:relative;}
main .contact-form-row .contact-form-cover .contact-form-cover-bg{position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(242,246,246,0.7);z-index:2;display:none;}
main .contact-form-row .contact-row-alpha{width:50%;float:left;}
main .contact-form-row .contact-row-beta{width:50%;float:right;}
main .contact-form-row .contact-row-alpha :focus{outline:none;}
main .contact-form-row .contact-row-alpha input[type="text"],main .contact-form-row .contact-row-alpha input[type="tel"],main .contact-form-row .contact-row-alpha input[type="email"]{font:16px "Lato",Arial,sans-serif;color:#333;width:100%;box-sizing:border-box;letter-spacing:1px;background:transparent;}
main .contact-form-row .contact-row-alpha .contact-input{padding-top:20px;position:relative;width:90%;}
main .contact-form-row .contact-row-alpha .contact-input .contact-title,main .contact-form-row .contact-row-beta .contact-input .contact-title{font-weight:600;padding-bottom:4px;}
main .contact-form-row .contact-row-alpha .contact-input .slideinput{border:0;padding:7px 0;border-bottom:1px solid #ccc;}
main .contact-form-row .contact-row-alpha .contact-input .slideinput ~ .focus-border{position:absolute;bottom:0;left:50%;width:0;height: 2px;background-color:#3399FF;transition:0.4s;}
main .contact-form-row .contact-row-alpha .contact-input .slideinput:focus ~ .focus-border{width:100%;transition: 0.4s;left:0;}
main .contact-form-row .contact-row-alpha .contact-input input:invalid{box-shadow:none;}
main .contact-form-row .contact-row-alpha .contact-input input:invalid ~ .focus-border{background-color:red !important;}
main .contact-form-row .contact-row-beta textarea{font:16px "Lato",Arial,sans-serif;color:#333;width:100%;box-sizing:border-box;letter-spacing:1px;background:transparent;resize:none;min-height:110px;}
main .contact-form-row .contact-row-beta select{font:16px "Lato",Arial,sans-serif;color:#333;width:100%;box-sizing:border-box;letter-spacing:1px;background:transparent;}
main .contact-form-row .contact-row-beta .contact-input .slideselect{border:0;padding:7px 0;border-bottom:1px solid #ccc;}
main .contact-form-row .contact-row-beta .contact-input .slideselect ~ .focus-border{position:absolute;bottom:0;left:50%;width:0;height: 2px;background-color:#3399FF;transition:0.4s;}
main .contact-form-row .contact-row-beta .contact-input .slideselect:focus ~ .focus-border{width:100%;transition: 0.4s;left:0;}
main .contact-form-row .contact-row-beta .contact-input{margin-top:20px;position:relative;}
main .contact-form-row .contact-row-beta .contact-input .contact-textarea{position:relative;}
main .contact-form-row .contact-row-beta .contact-input .slideinput{border:1px solid #ccc;padding:7px 14px 9px;transition:0.4s;}
main .contact-form-row .contact-row-beta .contact-input .slideinput ~ .focus-border:before,main .contact-form-row .contact-row-beta .contact-input .slideinput ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.3s;}
main .contact-form-row .contact-row-beta .contact-input .slideinput ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
main .contact-form-row .contact-row-beta .contact-input .slideinput ~ .focus-border i:before,main .contact-form-row .contact-row-beta .contact-input .slideinput ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #3399FF; transition: 0.4s;}
main .contact-form-row .contact-row-beta .contact-input .slideinput ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
main .contact-form-row .contact-row-beta .contact-input .slideinput:focus ~ .focus-border:before,main .contact-form-row .contact-row-beta .contact-input .slideinput:focus ~ .focus-border:after{width: 100%; transition: 0.3s;}
main .contact-form-row .contact-row-beta .contact-input .slideinput:focus ~ .focus-border i:before,main .contact-form-row .contact-row-beta .contact-input .slideinput:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;}
main .contact-form-row .contact-row-beta .contact-input .contact-textarea .contact-counter{position:absolute;bottom:2px;left:2px;background:#fff;color:#222;font-size:10px;padding:0 4px;filter:opacity(80%);}
main .contact-submission{text-align:center;padding-top:30px;padding-bottom:10px;}
main .contact-submission .submit{display:inline-block;border-radius:4px;background-color:#6c9b48;border:none;color:#FFFFFF;text-align:center;font-size:13px;padding:10px 16px;min-width:150px;transition:all 0.5s;cursor:pointer;}
main .contact-submission .submit span{cursor:pointer;display:inline-block;position:relative;transition:0.5s;}
main .contact-submission .submit span:after{content:'\00bb';position:absolute;opacity:0;top:0;right:-20px;transition:0.5s;}
main .contact-submission .submit:hover span{padding-right:25px;}
main .contact-submission .submit:hover span:after{opacity:1;right:0;}
main .contact-submission :focus{outline:none;}
main #contact-js{font-weight:bold;padding-top:20px;}
main .contact-error{color:#a94442;background-color:#f2dede;border-color:#ebccd1;padding:12px;display:none;}
@media screen and (max-width:780px){
    main .contact-info-row .info-row-alpha .contact-top-block .contact-blockchunk{float:none;width:100%;}
    main .contact-info-row .info-row-beta{width:50%;float:right;}
    main .contact-info-row .info-row-alpha{width:50%;float:left;}
}
@media screen and (max-width:634px){
    main .contact-info-row .info-row-alpha .contact-top-block .contact-blockchunk{float:left;width:50%;}
    main .contact-info-row .info-row-beta{width:100%;float:none;padding-top:10px;}
    main .contact-info-row .info-row-alpha{width:100%;float:none;}
    main .contact-info-row .info-row-alpha .writetous{display:none;}
    main .contact-form-row .contact-row-alpha .contact-input{width:100%;}
    main .contact-form-row .contact-row-alpha{width:100%;float:none;}
    main .contact-form-row .contact-row-beta{width:100%;float:none;}
}
@media screen and (max-width:585px){
    main .contact-info-row .info-row-alpha .contact-top-block .contact-blockchunk{float:none;width:100%;text-align:center;}
}