@charset "UTF-8";
/* CSS Document */

body {-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background: #f5f6f7;
    overflow-x: hidden;
    font-weight: 400;
    font-size: 18px;
    color: #000;font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif'}




.header{
    background:#034289;
    z-index: 998;	}


.row {width: 100%;
    float: left}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline}

/*

.header header {background: #034289;
    padding-left: 0;
    height: 100px;
    color: #fff;}

.placeholder {box-sizing: border-box;
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%}

.header header #logo {background: #034289;
    position: relative;
    height: 100%;
    float: left;
    z-index: 2}

.header header #logo:after {background: #034289;
    position: absolute;
    height: 80px;
    right: -20px;
    width: 20px;
    content: '';
    top: 10px}

.header header #logo img {background: #034289;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    top: 50%;
    float: right}
*/


/** Header **/
.header-title {line-height: 25px;font-size: 24px;font-weight:500;color:#fff;padding:38px 0 30px 30px;}

#logo img {width:80%;}


/** Apps **/
.wrap-area {max-width:900px;margin:20px auto 45px auto;margin-top:10%;background:#fff; min-height:400px;color: #474747;position:relative;padding: 0;border-radius: 0px;-webkit-border-radius: 0px;-moz-border-radius: 0px;-o-border-radius: 0px;-khtml-border-radius: 0px;padding:40px;-webkit-box-shadow: 0px 2px 20px -6px rgba(0,0,0,0.66);-moz-box-shadow: 0px 2px 20px -6px rgba(0,0,0,0.66);
box-shadow: 0px 2px 20px -6px rgba(0,0,0,0.66);}

.app-area{background-color: #f7f7f7;z-index: 0;overflow:auto;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;margin: 20px 0;width:60%;padding:20px 50px 50px 30px;float:left;}
.logo-area {float:right;width: 30%;}
.logo-area img {max-width:100%;}

h3 {font-weight: 600;font-size: 17px;	font-style: normal;line-height: 18px}
h1 {color: #000;	font-size: 22px;line-height: 28px; margin:0;}
.intro-text {color: #000;}

.app-area a {color: #298cda;text-decoration:none;font-size:14px;}
.app-area img {width:120px;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;margin-bottom:5px;margin-top:30px;border:1px solid #efefef;}
.app-area-left {float:left; width:175px;}
.app-area-right {float:left; width: calc(100% - 175px);}



.dwn-btn {margin-top: 20px;width:250px; padding:8px; background:#034289;color:#fff; border:2px solid #034289;border-radius: 50px; text-align:center;font-size:16px; font-weight:600;}
.dwn-btn:hover {color:#034289;background:transparent;}

.version {color: #7b7b7b;text-decoration:none;font-size:14px;}
.footer {color: #7b7b7b; text-align:center;font-size:13px;padding:20px 0;}


.bg-main {background-image: url("../img/bg-dcb.jpg"); background-size:cover; background-position:top;background-repeat: no-repeat;}



@media screen and (max-width: 992px) {
	.wrap-area {max-width:80%;overflow: auto;}
	.app-area {width: 90%;}
	.logo-area {float:left;width: 100%;}
	.logo-area img {max-width:240px;}
}


@media screen and (max-width: 600px) {
	.logo-area{display:none;}
	.app-area-left {float:none; width:100%;}
.app-area-right {float:none; width: 100%}
	.app-area {padding: 20px 20px 50px 20px;}
}

@media screen and (max-width: 400px) {
	.logo-area{display:none;}
	.app-area-left {float:none; width:100%;}
.app-area-right {float:none; width: 100%}
	.wrap-area {    box-shadow: 0px 2px 20px -6px rgba(0, 0, 0, 0.40); padding: 20px 25px;margin-top: 25px;    max-width: 80%;}
	.app-area {padding: 20px 20px 50px 20px;}
}