/* CSS Document */

body,html{font-family: 'Open Sans', sans-serif; margin: 0; -webkit-font-smoothing: antialiased;}
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
ul,ol{list-style: none; margin: 0; padding: 0}
h1,h2,h2,h4,h5,h6,figure{margin: 0;padding: 0}
h2{font-weight:400}
p{font-size: 16px; color:#555; font-weight: 400; letter-spacing:.6px; line-height: 1.6}
a{display: inline-block; text-decoration: none}
a:hover{text-decoration:underline}
img{border:0;font-style:italic;height:auto;max-width:100%;vertical-align:middle}
button,.button.primary,input[type="button"],input[type="submit"]{background:#0078AB;border:1px solid #0078AB;color:#fff}	button:hover,button:active,button:focus,.button.primary:hover,.button.primary:active,.button.primary:focus,input[type="button"]:hover,input[type="button"]:active,input[type="button"]:focus,input[type="submit"]:hover,input[type="submit"]:active,input[type="submit"]:focus{background:#4b94d6;border:1px solid #4b94d6;color:#fff}
.button,input[type="reset"]{background-color: rgba(0, 0, 0, 0);border: 1px solid #1fa3ff;color: #1fa3ff}
.button:hover,.button:active,.button:focus,input[type="reset"]:hover,input[type="reset"]:active,input[type="reset"]:focus{opacity: 0.8;background-color: #1fa3ff;color:#fff;}
button,.button,input[type="button"],input[type="reset"],input[type="submit"]{display:inline-block;font-size:.85em; font-weight:600;border-radius: .65em; letter-spacing:.05px; line-height:1;padding:.75rem 1.5rem;text-transform:uppercase;text-decoration:none;-webkit-transition:all .3s ease-out 0s;transition:all .3s ease-out 0s}	button:hover,button:visited,button:active,button:focus,.button:hover,.button:visited,.button:active,.button:focus,input[type="button"]:hover,input[type="button"]:visited,input[type="button"]:active,input[type="button"]:focus,input[type="reset"]:hover,input[type="reset"]:visited,input[type="reset"]:active,input[type="reset"]:focus,input[type="submit"]:hover,input[type="submit"]:visited,input[type="submit"]:active,input[type="submit"]:focus{text-decoration:none}
.button+.button{margin-left:1.25rem}
.button.primary,input[type="button"],input[type="submit"]{background:#2a75ba;border:1px solid #2a75ba;color:#fff}
.gobutton{border:1px solid #16cc53;border-radius:1.6em;display:block;overflow:hidden;padding:0 3em;background-color:#16cc53;display:inline-block;color:#fff;text-decoration:none;font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:1em;margin:1.4em 0 1em;line-height:3;-webkit-transition:background-color 0.2s,border-color .2s;-moz-transition:background-color 0.2s,border-color .2s;-ms-transition:background-color 0.2s,border-color .2s;-o-transition:background-color 0.2s,border-color .2s;transition:background-color 0.2s,border-color .2s}
.button.larger{font-size:1.1em; padding: 1.5em; letter-spacing: 0.5px}
.clear{clear: both}

@media screen{
	.col{ float: left}
	.col-16{ width:16.66666667%}
	.col-20{width:20%}
	.col-25{width:25%}
	.col-30{width:30%}
	.col-33{width:33.33333333%}
	.col-40{width:40%}
	.col-50{width:50%}
	.col-60{width:60%}
	.col-65{width:65%}
	.col-70{width:70%}
	.col-75{width:75%}
	.col-100{width:100%}
	.clear-left{margin-left: 4%}
	.clear-right{margin-right: 4%}
	.spacer-top{padding-top: 65px}
	.header{background-color: #293A4A; position: fixed; top:0; width: 100%; z-index:9}
	.max-width{max-width: 75em}
	.main-content{width: 80%; max-width: 980px; margin: 0 auto; position:relative}
	.text-center{text-align:center}
	section{padding: 60px 10px}
	.icon-headline{font-size:5.6em; margin:.25em 0 .2em; color: #cdcdcd}
	#customerportal-main{background: url(//dtechghana.com/wp-content/themes/dtech/img/swing-sunset.jpg) no-repeat scroll 0 0 #1F3244; color:#fff; background-repeat: no-repeat; background-size: cover; background-position: center 0;}
	h2.sub-headline{font-size: 2em; margin:1.2em 0}
	.heading-highlight{color: #939393; display:block; font-size: 1.2em; font-weight: 300; padding-bottom: 65px; text-align: center; margin: 0 auto; max-width: 54em; -webkit-font-smoothing: antialiased;}
	#customerportal-main .heading-highlight, #customerportal-main h2{color:#fff}
	.tri-grid a{display:block; margin-left: 2.8%; margin-bottom: 45px; min-height:140px}
	.tri-grid a:hover{text-decoration: none}
	.tri-grid a i, .tri-grid a .caption{color:#56BCE6}
	/*.tri-grid a:hover i, .tri-grid a:hover .caption, .tri-grid a:hover p{color:#A3BBC7}*/
	.tri-grid .col{text-align: center; padding: 8px}
	.tri-grid i{font-size: 4.8em; font-weight: lighter; font-variant: normal}
	.tri-grid .caption{font-weight: 400; display:block}
	.tri-grid h4{font-size: 21px; font-weight: 500; padding: 15px 0}
	.tri-grid p{color: #777777; margin:0 0 12.5px; font-size: 13px; font-weight: 300; line-height: 1.6}
	.footer{color:#A3BBC7; font-size: 14px; margin: 35px auto; width:80%; text-align: center; max-width: 980px}
	.footer .hr{background-color: rgba(222, 222, 222, 0); border-top: 1px solid rgba(154, 178, 197, 0.49); padding-bottom: 8px}
	#contact-form{margin: 0 auto; margin-top: 65px; max-width: 54em}
	#contact-form .error{margin: 10px auto !important}
	.contact-form{text-align:left; margin:0 auto}
	.contact-form .form-row{ margin-bottom:20px; position: relative; width:100%}
	.contact-form .half{width: 46%; display:inline-block; margin-right: 5px}
	.contact-form .third{max-width: 120px; display:inline-block; margin-right: 5px}
	.contact-form input[type=text], .contact-form input[type=tel], .contact-form input[type=url], .contact-form input[type=password], .contact-form input[type=email],.contact-form select, .contact-form textarea {border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #fff; border: 1px solid #d1d1d1; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.05); color: #1f3244; font-weight: 300; font-size: .95em; padding: 1.015em 0.7em 0.75em; width: calc(100% - 18px); transition: all 0.1s ease-in-out}
	.contact-form textarea{min-height:120px}
	.contact-form input[type=text]:focus, .contact-form input[type=tel]:focus, .contact-form input[type=url]:focus, .contact-form input[type=password]:focus, .contact-form input[type=email]:focus, .contact-form select:focus {outline: none; box-shadow: none; border: 1px solid #3675b4}
	.contact-form label{ color: #444; display:inline-block; font-weight: 500; font-size: 17px; font-weight:600; margin: 0; margin-bottom: 10px; padding:0}
	.contact-form .loader{display:none}
	.contact-form .loader .fa{font-size: 24px; color:#66B5C6}
	.contact-form button{margin-top: 35px; padding: 25px 0; width: 100%; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px}
	.contact-form button:hover{cursor:pointer}
	.error{background-color:#d9534f; color:#fff; border-color:#d43f3a; display:none; padding: 10px; margin: 15px auto}
	.success{background-color: #396; color:#fff; margin: 10px auto; padding: 10px; text-align:center}
	.success p, .success a{color:#fff}
	.success a{text-decoration:underline}
	.success a:hover{text-decoration: none}
	#logo{padding: .65em 1.2em}
	#page-sub-header{margin: 125px auto 0; padding: 0 15px}
	#page-sub-header h2{ border-bottom: 1px solid #BFD2DB; color: #A3BBC7; font-size: 2.2em; padding-bottom: 8px; max-width:54em; margin: 0 auto}
}


@media screen and (max-width: 780px){
	.col{float: none; width: 80%}
	.col:before{display: table; content: ""}
}