@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i');

/* HTML5 Tags */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }

/* Misc */
input[type=button], input[type=submit]  { -webkit-appearance: none; -webkit-border-radius: 0; }
::-webkit-input-placeholder { color: #5e5e5e; }
:-moz-placeholder { color: #5e5e5e; opacity: 1; }
::-moz-placeholder { color: #5e5e5e; opacity: 1; }
:-ms-input-placeholder { color: #5e5e5e; }

/* Main */
* { border: 0px; margin: 0px; padding: 0px; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: Roboto; }
body:after { content: 'desktop'; display: none; }
@media (max-width:991px) { body:after { content: 'tablet'; } }
@media (max-width:766px) { body:after { content: 'mobile'; } }
.point { cursor: pointer; }
ul, ol{ margin: 1em 0; padding: 0 0 0 40px; }
.img-responsive { width: 100%; display: block; }
.vdo-responsive { width: 100%; display: block; }
.img-hidden { visibility: hidden; }
.anchor { padding-top: 40px; margin-top: -40px; }
.maxlines { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
.border { border: solid 1px red; }
.container-fluid { max-width: 1200px; }

h1 { margin: 0px 0px 5px 0px; font-size: 34px; }
h2 { margin: 5px 0px 15px 0px; font-size: 20px; }

@media (max-width:991px) { }
@media (max-width:766px) { }
@media (max-width:320px) { }

/* Header */
header { width: 100%; height: 80px; border-bottom: solid 1px #ddd; margin-bottom: 30px; }
header nav { text-align: right; margin-top: 30px; }
header nav ul { list-style-type: none; margin-left: 0px; padding-left: 0px;}
header nav ul li { display: inline-block; margin-left: 0px; }
header nav ul .flexMenu-popup { z-index: 9999; position: absolute; top: 65px; right: 5px; padding: 0px; text-align: left; background-color: #fff; border: solid 1px #c6cacc; margin: 0px; }
header nav ul .flexMenu-popup li { white-space: nowrap; padding: 10px 20px 10px 10px; margin-bottom: 5px; display: block; border-bottom: solid 1px #ddd; }
header nav ul .flexMenu-popup li:last-child { border: 0px; }
header nav a, header .login a { color: #000; white-space: nowrap; border-bottom: solid 1px transparent; display: inline-block; margin-right: 20px; }
header nav a:hover, header nav .current, header .login a:hover, header .login a.current { color: #000; text-decoration: none; border-bottom: solid 1px #000; }
@media (max-width:766px) { 
	header { height: 60px; }
	header nav { text-align: right; margin-top: 20px; }
}

/* A */
a { color: #000; }
a:hover { color: #000; }

/* Logo */
.logo { padding: 10px 0px; }
.logo img { max-height: 60px; max-width: 140px !IMPORTANT; }
@media (max-width:766px) { 
	.logo img { max-width: 95px !IMPORTANT; }
}

/* Breadcrumb */
.breadcrumb { padding: 0px; background-color: transparent; }
.breadcrumb a { color: #000; }
.breadcrumb .divider img { margin-top: -4px; }
.breadcrumb .active { color: #000; text-decoration: underline; }

/* Back */
.back { min-height: 35px; font-size: 14px; padding-bottom: 10px; }
.back a { display: inline-block; color: #000; border-bottom: solid 1px transparent; }
.back a:hover { color: #000; text-decoration: none; border-bottom: solid 1px #d000a4; }
@media (max-width:766px) {
	.back { height: auto; text-align: center; }
	.back a { margin-bottom: 20px; margin-top: 20px; }
}

/* Mobile Menu */
.mobilemenubutton { width: 68px; height: 68px; line-height: 68px; border-radius: 68px; text-align: center; background-color: #d000a4; box-shadow: 0px 0px 10px #505050; color: #fff; cursor: pointer; position: fixed; bottom: 20px; left: 10px; z-index: 99; }
.mobilemenu { box-shadow: 0px 5px 5px #c0c0c0; z-index: 9; position: absolute; top: 54px; padding: 20px 20px 100px 20px; background-color: #fff; width: 100%; }
.mobilemenu .items a { line-height: 45px; color: #000; display: block; border-bottom: solid 1px #dcdcdc; }
.mobilemenu .items a:hover, .mobilemenu .items a.current { color: #000; text-decoration: none; border-bottom: solid 1px #d000a4; }

/* Responsive items */
table { max-width: 100%; height: auto !important; }
img { max-width: 100%; height: auto !important; }
iframe { max-width: 100%; max-height: auto !important; }

/* Fluid Youtube Video */
.vdowrap { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
.vdowrap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Form Error */
select.error, input[type=text].error, input[type=password].error, input[type=email].error, input[type=tel].error, textarea.error, button.error { border: solid 1px #e72121;}
.errormsg { display: inline-block; margin-top: 10px; font-weight: normal; position: relative; margin-left: 0px; color: #fff; background-color: #e72121; border-radius: 6px; padding: 5px 15px; line-height: 20px; white-space: nowrap; }
.errormsg .arrow { z-index: 1; position: absolute; top: -8px; left: 15px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #e72121; }

main { }

/* Card */
.card { position: relative !IMPORTANT; }
.card.active { cursor: pointer; }
.card.active:hover { opacity: 0.6; }
.card .card-title { margin: 10px 0px 5px 0px; }
.card .card-text { font-size: 14px; }
.card .card-body { position: relative !IMPORTANT; }
.card .text-muted { color: red !IMPORTANT; position: absolute; right: 15px; bottom: 15px; }
.card.active .text-muted { color: green !IMPORTANT; }
@media (max-width:991px) { 
    .card-columns {
        -webkit-column-count:2;
        -moz-column-count:2;
        column-count:2;
    }
}
@media (max-width:766px) { 
    .card-columns {
        -webkit-column-count:1;
        -moz-column-count:1;
        column-count:1;
    }
}

footer { margin-top: 30px; padding-bottom: 30px; border-top: solid 1px #ddd; background-image: linear-gradient(#eee, #c0c0c0); }
footer .address { line-height: 24px; }
footer .address h4 { margin: 5px 0px; }
footer .address .tiny { font-size: 12px; color: #505050; }
footer .address a { color: #000; }
footer .logo { margin-top: 20px; }
footer .logo img { max-height: 100%; max-width: 180px !IMPORTANT; }
@media (max-width:766px) { 
	footer .logo img { max-width: 140px !IMPORTANT; }
	footer .address { margin-top: 10px; font-size: 12px; line-height: 20px; }
	footer .address h4 { font-size: 20px; }
	footer .address .tiny { font-size: 10px; }
}