/* CSS Document */
/* ------------- clear ------------- */
html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, "Open Sans", sans-serif; font-size: 14px; background: #fff; color: #333;}
ul, ol { list-style:none; margin: 0; padding: 0; }
:focus {outline: 0;}

/* ------------- default ------------- */
a{color: #da1921;text-decoration: none;}
a:hover{text-decoration: underline; color: #f00;}
a.box{display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9;}
a.box:hover{text-decoration: none;}
h1, h2, h3, h4{margin: 10px 0; padding: 0;}
p{margin: 0 0 10px 0; padding: 0; font-size: 16px;line-height: 24px; text-align: justify;}
.hidden{display: none;}
.center{text-align: center;}
.t-right{text-align: right;}
.relative{position: relative;}
.inline-block{display: inline-block;}
img.responsive{max-width: 100% !important;}
.line-through{text-decoration: line-through;}
.clear{clear: both;width: 100%;height: 0px;}
.space-10px{width: 100%;height: 10px;}
.space-20px{width: 100%;height: 20px;}
.space-30px{width: 100%;height: 30px;}
.space-50px{width: 100%;height: 50px;}
img#preloader{position: absolute; top: 7px; left: 7px; z-index: 99999; display: none;}
.half{width: calc(50% - 40px); margin: 0 20px; float: left;}
.third{width: calc(33% - 40px); margin: 0 20px; float: left;}
.fourth{width: calc(25% - 40px); margin: 0 20px; float: left;}
.ph30{padding-top: 30px !important; padding-bottom: 30px !important;}

.youtube-holder{max-width: 100%; position: relative; margin: 0; height: 0px; overflow: hidden; padding-bottom: 56.25%;}
.youtube-holder iframe{position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;}

/* ------------- w3d page templates ------------- */
div.w3dtemplate{font-size: 16px; padding-bottom: 20px;}
div.w3dtemplate.view2 img.tmpimage{width: 500px; margin: 0 20px 20px 0; float: left;}
div.w3dtemplate.view3 img.tmpimage{width: 500px; margin: 0 0 20px 20px; float: right;}
div.w3dtemplate.view4 div.tmpimagebox{width: calc(50% - 20px); margin: 0 20px 20px 0; float: left;}
div.w3dtemplate div.tmpimagebox img{width: 100%;}
div.w3dtemplate div.tmpcontent{width: 50%; float: left;}
div.w3dtemplate.view5 div.tmpimagebox{width: calc(50% - 20px); margin: 0 0 20px 20px; float: right;}
div.w3dtemplate.view6 img.tmpimage{max-width: 100%;}
div.w3dtemplate ul{list-style: inside;}
div.w3dtemplate ul li{font-size: 16px;line-height: 24px; padding-bottom: 5px;}

/* ------------- popup ------------- */
div.mfp-inline-holder div.mfp-content{width: calc(100% - 50px);max-width: 600px;background: #fff;padding: 20px;border: 1px solid #666; -moz-border-radius: 4px; border-radius: 4px;}
div.mfp-inline-holder div.mfp-content div.pp-ttl{font-size: 18px;margin-bottom: 10px;border-bottom: 1px solid; padding-bottom: 3px; color: #666;}
div.mfp-inline-holder div.mfp-content .success{color: #046b04;}
div.mfp-inline-holder div.mfp-content .warning{color: #ce6000;}
div.mfp-inline-holder div.mfp-content .error{color: #900;}

/* ------------- w3dgraph ------------ */
div.w3dgraph-holder{border: 1px solid #efefef; background: #efefef; padding: 5px;width: 300px;text-align: center;display: block;margin: 5px;}
div.w3dgraph-holder div.wgtitle{padding-bottom: 2px;font-size: 12px;font-weight: bold;}
div.w3dgraph-holder div.targetOuter{position: relative; overflow: hidden;text-align: center;background-color: #fff;margin: 0;width: 100%;height: 150px; display: inline-table;border-radius: 4px; -moz-border-radius: 4px;}
div.w3dgraph-holder div.targetOuter div.targetLayer{vertical-align: middle;display: table-cell;width: 100%;height: 150px;}
div.w3dgraph-holder div.targetOuter div.targetLayer img{height: 100%;width: 100%;object-fit: contain;}
.icon-choose-image{position: absolute;opacity: 0.1;top: 50%;left: 50%; font-size: 48px; color: #000; margin-top: -24px;margin-left: -24px;width: 48px;height: 48px;}
.g-inputFile{padding: 5px 0px;margin-top: 0px;background-color: #FFFFFF;width: 48px;height: 40px; line-height: 40px;overflow: hidden;opacity: 0;cursor: pointer;}
div.w3dgraph-holder img.upload-img{display: none;}
div.w3dgraph-holder div.g-btns{text-align: center; height: 22px; padding-top: 5px;}

/* for 800px or less */
@media screen and (max-width: 800px) {
	div.w3dtemplate.view2 img.tmpimage{width: 100%;margin: 0 0 20px 0;}
	div.w3dtemplate.view3 img.tmpimage{width: 100%;margin: 0 0 20px 0;}
	div.w3dtemplate.view4 div.tmpimagebox{width: 100%;margin: 0 0 20px 0;}
	div.w3dtemplate.view5 div.tmpimagebox{width: 100%;margin: 0 0 20px 0;}
	div.w3dtemplate div.tmpcontent{width: 100%;}
	
	div.w3dtemplate{font-size: 14px;}
}