/*! qik_reset.css | v171121.36 Copyright QikCss 2010 - 2016 | MIT License | http://QikCss.com */ /* qik_reset.css is a simple css reset to display elements uniformly across multiple browsers. */ /* Making changes to qik_reset.css is not recommended. */ /*#region - RESET - */ /*=======================================================================================RESET */ /*Element RESET*/ .accordion, article, .article, #Aside, aside, .aside, #Banner, .banner, .blk, body, .box, .boxSm, .boxLg, .col, #Content, .content, details, .details, .eqlHght, .eqlHghtGrp, figcaption, figure, footer, #Footer, .footer, form, .form, header, #Header, .header, hgroup, hr, html, img, .img, iframe, main, #Main, .main, .mat1em, .mat2em, .mat3em, .mat4em, .mat5em, .mat6em, #MediaMinder, menu, .menu, .modal, .modalDialog, nav, #Nav, .nav, #NavMain, #NavMobile, #NavFooter, #NavMobileRow, #NavMobileMenu, .navMbl, #Page, .pnl, .row, .rowSzr, .rowTranspHgt005, .rowTranspHgt010, .rowTranspHgt020, .rowTranspHgt040, .rowTranspHgt060, .rowTranspHgt080, .rowTranspHgt100, .rowTranspHgt120, .rowTranspHgt140, .rowTranspHgt160, .rowTranspHgt180, .rowTranspHgt200, .rowTranspHgt220, .rowTranspHgt240, .rowTranspHgt260, .rowTranspHgt280, .rowTranspHgt300, .rowTranspHgt320, .rowTranspHgt340, .rowTranspHgt360, .rowTranspHgt400, section, .section, summary, .summary, .szRow, #SzColorBar { width: 100%; display: block; float: none; background: none; background-color: transparent; margin: 0; padding: 0; } /*#endregion - RESET - */ /*! qik_scaffold.css | v171121.131Copyright QikCss 2010 - 2016 | MIT License | http://QikCss.com */ /* qik_scaffold.css is a simple lightweight scaffold wireframe for fast repsonsive project prototyping in any media screen size. */ /* Making changes to qik_scaffold.css is not recommended. */ /*#region - SCAFFOLD - */ /*=======================================================================================Scaffold */ /* These classes are used to scaffold/wire-frame to DOM. They control order, flow, element colaspe and media queries. */ /*DONOT use to directly contain content elements such as h1, ul, p, etc.*/ /*#region - PAGE -*/ /*======================================================================================= Page */ /* A master scoffolding element that is a child of used only to set the default page width of the entire website. */ #Page { position: relative; overflow: hidden; margin: 0 auto; background-color: transparent; } /*#endregion Page */ /*#region - ROW -*/ /*======================================= row */ /* A scoffolding element only used to divide the DOM and any other element horizontally. */ #Banner, .banner, footer, #Footer, .footer, header, #Header, .header, Main, main, .main, nav, #Nav, .nav, #NavMain, #NavMobile, #NavFooter, #NavMobileRow, #NavMobileMenu, .navMbl, .row, .rowSzr, .rowTranspHgt005, .rowTranspHgt010, .rowTranspHgt020, .rowTranspHgt040, .rowTranspHgt060, .rowTranspHgt080, .rowTranspHgt100, .rowTranspHgt120, .rowTranspHgt140, .rowTranspHgt160, .rowTranspHgt180, .rowTranspHgt200, .rowTranspHgt220, .rowTranspHgt240, .rowTranspHgt260, .rowTranspHgt280, .rowTranspHgt300, .rowTranspHgt320, .rowTranspHgt340, .rowTranspHgt360, .rowTranspHgt400, .szRow, section, .section { position: relative; width: 100%; height: auto; left: 0; right: 0; background-color: inherit; } /*ie hack*/ * + html .row { clear: both; float: left; } /* NOTE: used to size and center a row horizontally. */ .szRow, .rowSzr { margin: 0 auto; } /* NOTE: used to ad an open transparent row exposing an image. */ .rowTranspHgt005 {height: 5px;} .rowTranspHgt010 {height: 10px;} .rowTranspHgt020 {height: 20px;} .rowTranspHgt030 {height: 30px;} .rowTranspHgt040 {height: 40px;} .rowTranspHgt050 {height: 50px;} .rowTranspHgt060 {height: 60px;} .rowTranspHgt070 {height: 70px;} .rowTranspHgt080 {height: 80px;} .rowTranspHgt090 {height: 90px;} .rowTranspHgt100 {height: 100px;} .rowTranspHgt110 {height: 110px;} .rowTranspHgt120 {height: 120px;} .rowTranspHgt130 {height: 130px;} .rowTranspHgt140 {height: 140px;} .rowTranspHgt150 {height: 150px;} .rowTranspHgt160 {height: 160px;} .rowTranspHgt170 {height: 170px;} .rowTranspHgt180 {height: 180px;} .rowTranspHgt190 {height: 190px;} .rowTranspHgt200 {height: 200px;} .rowTranspHgt220 {height: 220px;} .rowTranspHgt240 {height: 240px;} .rowTranspHgt260 {height: 260px;} .rowTranspHgt280 {height: 280px;} .rowTranspHgt300 {height: 300px;} .rowTranspHgt320 {height: 320px;} .rowTranspHgt340 {height: 340px;} .rowTranspHgt360 {height: 360px;} .rowTranspHgt380 {height: 380px;} .rowTranspHgt400 {height: 400px;} /*#endregion Row*/ /*#region - COLUMN -*/ /*======================================= col */ /* A scoffolding element only used to divide the DOM or any other elements vertically. */ /*CANNOT/should not be styled with border or shadow. Can be style with backgound.*/ /*To create shadowed column like objects add a Content Container (below) with a shadow class applied.(.shdw2 in qik_style.css) */ .col, .aside, #Aside, aside { display: inline-block; width: 100%; height: 100%; position: relative; top: 0; bottom: 0; clear: none; vertical-align: top; /*margin-right: -4.000px;*/ margin-left: -2.5px; margin-right: -2.5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*.col:first-of-type { margin-left: -2.5px; }*/ /*hack to target IE7/8/9*/ * + html .col, * + html .aside, * + html #Aside, * + html aside { display: block; float: left !important; } /*#endregion Column*/ /*#endregion Scaffold*/ /*! qik_content.css | v171121.202 Copyright QikCss 2010 - 2016 | MIT License | http://QikCss.com */ /* qik_content.css is a collection of peconfigured containers to control uniform content presentation over multiple browsers */ /* Making changes to qik_content.css is not recommended. */ /* Use qik_theme.css to extend/override/style. */ /*#region - CONTENT CONTAINER - */ /* These class are contaniners/wrappers. They are used only to hold and control content elements such as h1, ul, p, etc. */ /* DONOT use for scaffolding/wire-framing the DOM */ /*#region CIRCLE */ /*not included input reset*/ div col > .cir { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .cir { clear: both; display: block; position: relative; width: 100%; height: auto; max-height: 100%; background: rgb(218, 178, 137); padding: 50% 0 ; margin:0 auto; border: 1px solid tan; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cir > * { display: inline-block; position: absolute; left: 0; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); text-align: center; padding: 0; margin: 0 ; } .cir > * > *, .cir > * > * > * { text-align: center; padding: .2em 0 ; margin: 0 auto; font-size: .186rem; } /*#endregion */ /*#region BOX */ /*====================================== box */ /* NOTE: a content wrapper used to contain content in a box format horizonataly centered in its parent with top & bottom mmargin. */ /* Use .w? class to override width. has default margin/padding. Can be overriden/styled using qik_theme.css */ .box { clear: both; width: 80%; position: relative; margin: 2em auto; padding: .5em 0; border: 1px solid #999; } .boxLrg { clear: both; width: 90%; position: relative; margin: 3em auto; padding: .5em 0; border: 1px solid #999; } .boxSml { clear: both; width: 70%; position: relative; margin: 1em auto; padding: .5em 0; border: 1px solid #999; } /*#endregion Box*/ /*#region MAT */ /*======================================= mat */ /* NOTE: a content wrapper used to contain content in a matted format horizonataly centered in its parent. */ /* CANNOT override width. Can override border-width, margin, padding, background using qik_theme.css */ .mat1em, .mat { clear: both; width: auto; position: relative; border: 1em solid #f5f5dc; margin-left: auto; margin-right: auto; } .mat2em { clear: both; width: auto; position: relative; border: 2em solid #f5f5dc; margin-left: auto; margin-right: auto; } .mat3em { clear: both; width: auto; position: relative; border: 3em solid #f5f5dc; margin-left: auto; margin-right: auto; } .mat4em { clear: both; width: auto; position: relative; border: 4em solid #f5f5dc; margin-left: auto; margin-right: auto; } .mat5em { clear: both; width: auto; position: relative; border: 5em solid #f5f5dc; margin-left: auto; margin-right: auto; } .mat6em { clear: both; width: auto; position: relative; border: 6em solid #f5f5dc; margin-left: auto; margin-right: auto; } /*#endregion Mat*/ /*#region PANEL */ /*======================================= pnl */ /* NOTE: a content wrapper used to contain content in a panel format horizonataly centered in its parent with top/bottom margin and raduis corners. /* Use .w? class to override width. has default margin/padding. Can be overriden/styled using qik_theme.css */ .pnl { clear: both; width: 75%; position: relative; background-color: #fafcff; border: 1px solid #f1f1f1; -ms-border-radius: 9px; border-radius: 9px; -webkit-box-shadow: 3px 3px 7px 1px #ccc; -ms-box-shadow: 3px 3px 7px 1px #ccc; box-shadow: 3px 3px 7px 1px #ccc; margin: 10% auto; padding: .45em 0; } /*#endregion Panel*/ /*#region WRAP */ /*====================================== wrp */ /* A content wrapper used to contain content in a columnar format horizonataly centered in its parent. */ /* Use .w? class to override width. has default margin/padding. Can be overriden/styled using qik_theme.css */ /* Block .blk is included here as legacy support till 2016 */ .wrp { clear: both; width: 85%; position: relative; background-color: transparent; margin: 0 auto; padding: .5em 0; } /*#endregion wrap*/ /*#endregion */ /*! qik_setup.css | v16021817.28 Copyright QikCss 2010 - 2016 | MIT License | http://QikCss.com */ /* qik_setup.css is used to set up the base page size, font type and size and color schema */ /* Making changes to qik_reset.css is not recommended. */ /* Use qik_theme.css to extend/override/style. */ /*===============================================================SETUP */ /*#region - SETUP - */ /* Set global page size backgound color and font size /* use only em to set global website font size*/ html { background: #fff; } body { font-size: 16px; font-family: sans-serif; font-weight: 200; line-height: 1.45; color: #2e2e2e; background: transparent; } #Page { background: transparent; } /*#endregion SETUP */ /*! qik_element.css | v171121-2047 Copyright QikCss 2010 - 2016 | MIT License | http://QikCss.com */ /* qik_element.css is a collection of peconfigured containers to control uniform content presentation over multiple browsers */ /* Making changes to qik_element.css is not recommended. */ /* Use qik_theme.css to extend/override/style. */ /*#region - ELEMENT - */ /*===================================================ELEMENT */ audio { display: inline-block; vertical-align: baseline; } br { line-height: 1.43em; overflow: hidden; } /*#region - BUTTON - */ button, input.btn, a.btn, .navMblBtn, .xxnavMblBtnLable { display: inline-block; background-color: #f4f4f4; line-height: 1.5em; font-size: .9em; font-weight: normal; color: #2e2e2e; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; margin: 5px 0; padding: 7px 10px; border: #d9d9d9 1px solid; -ms-border-radius: 4px; border-radius: 4px; } .before:before { content: "\0020"; text-align: left; font-size: .9em; color: #575353; } .after:after { content: "\0020"; text-align: right; font-size: .9em; color: #575353; } .iconChvrn { content: "\0020\226B"; } .iconChvrnDbl { content: "\0020\226B"; } .navMblBtnLable { content: "menu"; } button:hover, input.btn:hover, a.btn:hover, button:focus, input.btn:focus, a.btn:focus, button:active, input.btn:active, a.btn:active .menuBtn:hover, .menuBtnLable:hover { color: #000; background-color: #f6f3eb !important; border-color: #b5aaa3 !important; text-decoration: none; } button[disabled] { cursor: default; -ms-opacity: .6; opacity: .6; } button.xLrg, .btn.xLrg { padding: 10px 16px; font-size: 22px; line-height: 1.6; -ms-border-radius: 8px; border-radius: 8px; } button.lrg, .btn.lrg { padding: 10px 16px; font-size: 18px; line-height: 1.33em; -ms-border-radius: 6px; border-radius: 6px; } button.sml, button.small, .btn.sml, .btn.small, button.smlr, button.smaller, .btn.smlr, .btn.smaller, button.xSml, button.xSmall, .btn.xSml, .btn.xSmall { padding: 4px 9px; font-size: 11px; line-height: 1.5em; -ms-border-radius: 3px; border-radius: 3px; } button.smlr, button.smaller, .btn.smlr, .btn.smaller { padding: 2px 5px; } button.xSml, button.xSmall, .btn.xSml, .btn.xSmall { padding: 1px 5px; } button.danger, .btn.danger { background: #f6b4b3; color: #ac403e; } button.error, .btn.error { background: #f47474; color: #ea0000; } button.info, .btn.info { background: #b1ddf3; color: #31799c; } button.mute, .btn.mute, button.disable, .btn.disable { background: #f2f2f2; color: #cfcfcf; } button.primary, .btn.primary { background: #b2d5f3; color: #377db9; } button.success, .btn.success { background: #b0f3b1; color: #39793a; } button.warn, .btn.warn { background: #f3cbaf; color: #b18a47; } /*#endregion */ canvas { display: inline-block; vertical-align: baseline; } /*#region - FORM - */ fieldset { margin: .5em; padding: .5em; border: 1px solid #c0c0c0; } .field-validation-error { color: #b94a48; } .field-validation-valid { display: none; } form { display: block; width: 100%; margin: 0; padding: 0; } /*#endregion */ footer, #Footer { background-color: #fff; font-size: .9em; color: #565656; } hr { width: 95%; height: 1px; position: relative; vertical-align: middle; color: #D6D6D6; margin: .5em auto; padding: 0; border-top: 1px solid #8f8f8f; } hr.style3 { height: .8em; background-color: #333; } hr.style6 { height: .8em; background-color: #666; } hr.style9 { height: .8em; background-color: #999; } hr.styleC { height: .8em; background-color: #ccc; } hr.styleE { height: .8em; background-color: #eee; } hr.styleF { height: .8em; background-color: #fff; } header, #Header { background-color: #fff; font-size: 1.1em; color: #565656; } iframe { position: relative; width: 100% !important; max-width: 100%; position: relative; top: 0; bottom: 0; } img, .img { position: relative; width: 100%; max-width: 100%; height: auto; margin: 0 auto; vertical-align: middle; border: 0; } img.descrpt { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #fff; color: #595D61; visibility: hidden; -ms-opacity: 0; opacity: 0; margin: 0; padding: 2.5%; } img.thumb { display: inline-block; height: auto; padding: 4px; line-height: 1.43em; background-color: #ffffff; border: 1px solid #dddddd; -ms-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } img.hvr:hover, img.descrpt:hover, img.thumb:hover { visibility: visible; -ms-opacity: 1; opacity: 1; } /*#region - INPUT - */ input { width: 95%; max-width: 1024px; line-height: 1em; font-weight: normal; color: inherit; font: inherit; -ms-border-radius: 4px 4px; border-radius: 4px 4px; -webkit-transition: all linear 200ms; -moz-transition: all linear 200ms; -ms-transition: all linear 200ms; -o-transition: all linear 200ms; transition: all linear 200ms; margin: .3em auto; padding: .3em; border: 1px solid #d9d9d9; } input[type=text], input[type=text-area], input[type=password], textarea { background-color: #ffffff; border: 1px solid #cccccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; } input[type=text]:focus, input[type=text-area]:focus, input[type=password]:focus, textarea:focus { border-color: rgba(82, 168, 236, 0.8); outline: 0; outline: thin dotted \9; /* IE6-9 */ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } input.btn, input[type=button], input[type=reset], input[type=submit] { width: auto; display: inline-block; background-color: #f9f9f9; line-height: 1.2em; font-size: .9em; font-weight: normal; color: #2e2e2e; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; margin: 5px 0; padding: 7px 10px; border: #d9d9d9 1px solid; -ms-border-radius: 4px; border-radius: 4px; } input.btn:hover, input[type=button]:hover, input.btn:hover, input[type=button]:focus, input.btn:hover, input[type=button].active { color: #000 !important; background-color: #f6f3eb !important; border-color: #b5aaa3 !important; text-decoration: none; } input[type="checkbox"], input[type="radio"] { width: auto; line-height: inherit; padding: .3em; } input[type="checkbox"].chkdShdwGrn:checked, input[type="radio"].chkdShdwGrn:checked { width: auto; line-height: inherit; padding: .3em; -webkit-box-shadow: 0 0 8px 1.5px greenyellow; -ms-box-shadow: 0 0 8px 1.5px greenyellow; box-shadow: 0 0 8px 1.5px greenyellow; color: green !important; } input[type="checkbox"].chkdShdwRed:checked, input[type="radio"].chkdShdwRed:checked { width: auto; line-height: inherit; padding: .3em; -webkit-box-shadow: 0 0 6px 1px rgba(254, 11, 6, 0.75); -ms-box-shadow: 0 0 6px 1px rgba(254, 11, 6, 0.75); box-shadow: 0 0 6px 1px rgba(254, 11, 6, 0.75); color: red; } input[type="checkbox"].chkdShdwBlu:checked, input[type="radio"].chkdShdwBlu:checked { width: auto; line-height: inherit; padding: .3em; -webkit-box-shadow: 0 0 6px 1px rgba(11, 146, 252, 0.80); -ms-box-shadow: 0 0 6px 1px rgba(11, 146, 252, 0.80); box-shadow: 0 0 6px 1px rgba(11, 146, 252, 0.80); color: blue; } input.danger { background: #f6b4b3; color: #ac403e; } input.error { background: #f47474; color: #ea0000; } input.info { background: #b1ddf3; color: #31799c; } input.mute { background: #f2f2f2; color: #cfcfcf; } input.primary { background: #b2d5f3; color: #377db9; } input.success { background: #b0f3b1; color: #39793a; } input.warn { background: #f3cbaf; color: #b18a47; } input.chkToView1 ~ p.chkToViewContent1, input.chkToView2 ~ p.chkToViewContent2, input.chkToView3 ~ p.chkToViewContent3, input.chkToView4 ~ p.chkToViewContent4, input.chkToView5 ~ p.chkToViewContent5, input.chkToView6 ~ p.chkToViewContent6, input.chkToView7 ~ p.chkToViewContent7, input.chkToView8 ~ p.chkToViewContent8, input.chkToView9 ~ p.chkToViewContent9 { display: block; -ms-opacity: 0; opacity: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; margin: 0; padding: 0; } input.chkToView1:checked ~ p.chkToViewContent1, input.chkToView2:checked ~ p.chkToViewContent2, input.chkToView3:checked ~ p.chkToViewContent3, input.chkToView4:checked ~ p.chkToViewContent4, input.chkToView5:checked ~ p.chkToViewContent5, input.chkToView6:checked ~ p.chkToViewContent6, input.chkToView7:checked ~ p.chkToViewContent7, input.chkToView8:checked ~ p.chkToViewContent8, input.chkToView9:checked ~ p.chkToViewContent9 { -ms-opacity: 1; opacity: 1; line-height: initial; font-size: 100%; height: auto; margin: initial; padding: initial; } /*#endregion */ optgroup { font-weight: bold; margin: 0; } picture { position: relative; width: 100%; max-width: 100%; height: auto; margin: 0 auto; vertical-align: middle; border: 0; } progress { display: inline-block; vertical-align: baseline; } select { width: 100%; max-width: 300px; text-transform: none; color: inherit; font: inherit; margin: 0; } /*#region - TABLE - */ table { width: 99.5%; background: #fff; color: #444; font-size: 70%; font-family: Helvextica, Arial, sans-serif; text-align: left; margin: 2% auto; border-collapse: collapse; border-spacing: 0; } thead { font-weight: 600; background: #eee; } tbody { background: transparent; } tfoot { background: #eee; } tr, th, td { border: 0px solid #808080; padding: 1%; } th { font-weight: 600; background-color: #ddd; } table.bdr0 tr, table.bdr0 th, table.bdr0 td { border: none; } /*- alternating row colors - even -------------------------------------------------*/ table.altRowClrEvn tr:nth-child(even) { background: #f5f5f5; } table.altRowClrEvn tr:nth-child(odd) { background: #fff; } /*- alternating row colors - odd ------------------------------------------------------*/ table.altRowClrOdd tr:nth-child(odd), table.altRowClr tr:nth-child(odd) { background: #f5f5f5; } table.altRowClrOdd tr:nth-child(even), table.altRowClr tr:nth-child(even) { background: #fff; } /*Table Style------------------------------------------------------------------------------*/ table.style0 tr, table.style0 th, table.style0 td { background-color: #fff; border-bottom: 1px solid #ddd; } table.style1 tr, table.style1 th, table.style1 td { background-color: #fff; border-right: 1px solid #ddd; } table.style1 th, table.style1 td:first-child { border-left: 1px solid #ddd; } table.style2 tr, table.style2 th, table.style2 td { background-color: #fff; border: 1px solid #ddd; } table.style3 tr, table.style3 th, table.style3 td { border: 1px solid #ddd; } table.style3 tr:nth-child(even) { background: #f5f5f5; } table.style3 tr:nth-child(odd) { background: #fff; } table.style4 tr, table.style4 th, table.style4 td { border: 1px solid #ddd; } table.style4 tr:nth-child(odd) { background: #f5f5f5; } table.style4 tr:nth-child(even) { background: #fff; } table.style5 tr, table.style5 th, table.style5 td { background-color: #fff; border-bottom: 1px solid #ddd; } table.style6 tr, table.style6 th, table.style6 td { background-color: #fff; border-bottom: 1px solid #ddd; } /*#endregion */ video { display: inline-block; vertical-align: baseline; } /*#endregion Style_Element*/ /*#region CLASS */ /*#region -background */ .danger {background: #f6b4b3; color: #ac403e;} .error {background: #f47474; color: #ea0000;} .info {background: #b1ddf3; color: #31799c;} .mute {background: #f2f2f2; color: #cfcfcf;} .primary {background: #b2d5f3; color: #377db9;} .success {background: #b0f3b1; color: #39793a;} .warn {background: #f3cbaf; color: #b18a47;} .bkg0 {background-color: #000;} .bkg3 {background-color: #333 !important;} .bkg6 {background-color: #666 !important;} .bkg9 {background-color: #999 !important;} .bkgC {background-color: #ccc !important;} .bkgE {background-color: #eee !important;} .bkgF {background-color: #fff !important;} .bkgDanger {background: #f6b4b3;} .bkgError {background: #f47474;} .bkgInfo {background: #b1ddf3;} .bkgMute {background: #f2f2f2;} .bkgNone {background-color: transparent !important;} .bkgPrimary {background: #b2d5f3;} .bkgTransp {background-color: transparent !important;} .bkgSuccess {background: #b0f3b1;} .bkgWarn {background: #f3cbaf;} /*#endregion background*/ /*#region - border - */ .bdr0 {border: 1px solid #000;} .bdr0-B, .bdr0-TB {border-bottom: 1px solid #000;} .bdr0-L, .bdr0-LR {border-left: 1px solid #000;} .bdr0-R, .bdr0-LR {border-right: 1px solid #000;} .bdr0-T, .bdr0-TB {border-top: 1px solid #000;} .bdr3 {border: 1px solid #333;} .bdr3-B, .bdr3-TB {border-bottom: 1px solid #333;} .bdr3-L, .bdr3-LR {border-left: 1px solid #333;} .bdr3-R, .bdr3-LR {border-right: 1px solid #333;} .bdr3-T, .bdr3-TB {border-top: 1px solid #333;} .bdr6 {border: 1px solid #666;} .bdr6-B, .bdr6-TB {border-bottom: 1px solid #666;} .bdr6-L, .bdr6-LR {border-left: 1px solid #666;} .bdr6-R, .bdr6-LR {border-right: 1px solid #666;} .bdr6-T, .bdr6-TB {border-top: 1px solid #666;} .bdr9 {border: 1px solid #999;} .bdr9-B, .bdr9-TB {border-bottom: 1px solid #999;} .bdr9-L, .bdr9-LR {border-left: 1px solid #999;} .bdr9-R, .bdr9-LR {border-right: 1px solid #999;} .bdr9-T, .bdr9-TB {border-top: 1px solid #999;} .bdrC {border: 1px solid #ccc;} .bdrC-B, .bdrC-TB {border-bottom: 1px solid #ccc;} .bdrC-L, .bdrC-LR {border-left: 1px solid #ccc;} .bdrC-R, .bdrC-LR {border-right: 1px solid #ccc;} .bdrC-T, .bdrC-TB {border-top: 1px solid #ccc;} .bdrE {border: 1px solid #eee;} .bdrE-B, .bdrE-TB {border-bottom: 1px solid #eee;} .bdrE-L, .bdrE-LR {border-left: 1px solid #eee;} .bdrE-R, .bdrE-LR {border-right: 1px solid #eee;} .bdrE-T, .bdrE-TB {border-top: 1px solid #eee;} .bdrF {border: 1px solid #fff;} .bdrF-B, .bdrF-TB {border-bottom: 1px solid #fff;} .bdrF-L, .bdrF-LR {border-left: 1px solid #fff;} .bdrF-R, .bdrF-LR {border-right: 1px solid #fff;} .bdrF-T, .bdrE-TB {border-top: 1px solid #fff;} .bdrNone {border: none} .bdrNone-B, .bdr0-TB {border-bottom: none} .bdrNone-L, .bdr0-LR {border-left: none} .bdrNone-R, .bdr0-LR {border-right: none} .bdrNone-T, .bdr0-TB {border-top: none} .bdrR {border: 1px solid red !important;} .bdrB {border: 1px solid blue !important;} .bdrY {border: 1px solid Yellow !important;} .bdrG {border: 1px solid green !important;} .bdrDanger {border: 1px solid #f85552;} .bdrError {border: 1px solid #f61313;} .bdrInfo {border: 1px solid #63c3f3;} .bdrMute {border: 1px solid #e6e0e0;} .bdrPrimary {border: 1px solid #65b2f4;} .bdrTransp {border: 1px solid transparent !important;} .bdrSuccess {border: 1px solid #67f369;} .bdrWarn {border: 1px solid #f4a066;} /*#endregion border*/ /*#region - box-shadow - */ .shdw0 { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } .shdw2 { -webkit-box-shadow: 2px 2px 2px 2px #ccc; -moz-box-shadow: 2px 2px 2px 2px #ccc; -ms-box-shadow: 2px 2px 2px 2px #ccc; box-shadow: 2px 2px 2px 2px #ccc; } .shdw4 { -webkit-box-shadow: 2px 2px 4px 2px #727272; -moz-box-shadow: 2px 2px 4px 2px #727272; -ms-box-shadow: 2px 2px 4px 2px #727272; box-shadow: 2px 2px 4px 2px #727272; } .shdw6 { -webkit-box-shadow: 2px 2px 6px 2px #595D61; -moz-box-shadow: 2px 2px 6px 2px #595D61; -ms-box-shadow: 2px 2px 6px 2px #595D61; box-shadow: 2px 2px 6px 2px #595D61; } .shdw8 { -webkit-box-shadow: 3px 3px 8px 3px #333; -moz-box-shadow: 3px 3px 8px 3px #333; -ms-box-shadow: 3px 3px 8px 3px #333; box-shadow: 3px 3px 8px 3px #333; } .shdwIn4 { -webkit-box-shadow: Inset 2px 2px 4px 2px #333; -moz-box-shadow: Inset 2px 2px 4px 2px #333; -ms-box-shadow: Inset 2px 2px 4px 2px #333; box-shadow: Inset 2px 2px 4px 2px #333; } /*#endregion box-shadow*/ /*#region - radius - */ .rad0 { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; overflow: hidden; } .rad3 { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; overflow: hidden; } .rad5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; overflow: hidden; } .rad7 { -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; overflow: hidden; } .rad9 { -webkit-border-radius: 9px; -moz-border-radius: 9px; -ms-border-radius: 9px; border-radius: 9px; overflow: hidden; } .rad11 { -webkit-border-radius: 11px; -moz-border-radius: 11px; -ms-border-radius: 11px; border-radius: 11px; overflow: hidden; } .rad17 { -webkit-border-radius: 17px; -moz-border-radius: 17px; -ms-border-radius: 17px; border-radius: 17px; overflow: hidden; } .rad25 { -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; overflow: hidden; } .rad50 { -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; border-radius: 50px; overflow: hidden; } .rad90 { -webkit-border-radius: 90px; -moz-border-radius: 90px; -ms-border-radius: 90px; border-radius: 90px; overflow: hidden; } /*#endregion radius*/ /*#region - display - */ .dsply0 { display: none; } .dsplyBlk { display: block; } .dsplyInln, .inln { display: inline; } .dsplyInlnBlk, .inlnBlk { display: inline-block; } .hide, .hideTarget, .isHidden { visibility: hidden; } .show, .showTarget { visibility: visible; } .isCollapsedHgt { height: 0; overflow: hidden; } .isCollapsedWdth { width: 0; overflow: hidden; } .isCollapsedMaxHgt { height: 100%; max-height: 0; overflow: hidden; } .isCollapsedMaxWdth { max-width: 0; overflow: hidden; } .isCollapsedMaxHgt:hover { max-height: 1000px; overflow: visible; } .isCollapsed { width: 0; height: 0; overflow: hidden; } /*#endregion display*/ /*#region - event - */ .clck { cursor: pointer; text-decoration: none; color: inherit; border: none; } .hvr0:hover {background-color: transparent !important;} .hvr3:hover {background-color: #333 !important;} .hvr6:hover {background-color: #666 !important;} .hvr9:hover {background-color: #999 !important;} .hvrC:hover {background-color: #ccc !important;} .hvrE:hover {background-color: #eee !important;} .hvrF:hover {background-color: #fff !important;} /*#endregion event*/ /*#region - images - */ /*#region - filmstrip - */ .bdrFilmStrip { border-top: 8px dashed #666; border-bottom: 8px dashed #666; } .filmstrip { display: block; position: relative; background: #333; width: 350%; overflow: hidden; padding: 0; margin: 0; } .filmstrip ul{ display: block; height: 128px; border-top: 8px dashed #666; border-bottom: 8px dashed #666; padding: 0; margin: 3px 0; } .filmstrip li{ display: inline-block; float: left\9; width: 180px; padding: 0; margin: .35em 1.3em; } .filmstrip li iframe{ display: inline; width: 100%; height: 100px; padding: .5em 1.5em; margin: 0; } .filmstrip ul:first-child{ padding-left: 0; margin-left: 0; } /*#endregion */ /*#region Parallax */ .rowParlx { -webkit-perspective: 1px; -moz-perspective: 1px; -ms-perspective: 1px; -o-perspective: 1px; perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: visible; -webkit-perspective-origin-x: 100%; -moz-perspective-origin-x: 100%; -ms-perspective-origin-x: 100%; -o-perspective-origin-x: 100%; perspective-origin-x: 100%; } .parlxForgrnd, .parlxBkgrnd, .rowParlx > * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .parlxBkgrnd { -webkit-transform: translateZ(-1px) scale(2); -moz-transform: translateZ(-1px) scale(2); -ms-transform: translateZ(-1px) scale(2); -o-transform: translateZ(-1px) scale(2); transform: translateZ(-1px) scale(2); } .parlxForgrnd { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .parlxBkgrnd-2 { -webkit-transform: translateZ(-2px) scale(3); -moz-transform: translateZ(-2px) scale(3); -ms-transform: translateZ(-2px) scale(3); -o-transform: translateZ(-2px) scale(3); transform: translateZ(-2px) scale(3); } .parlxBkgrnd-3 { -webkit-transform: translateZ(-3px) scale(4); -moz-transform: translateZ(-3px) scale(4); -ms-transform: translateZ(-3px) scale(4); -o-transform: translateZ(-3px) scale(4); transform: translateZ(-3px) scale(4); } .parlxBkgrnd-4 { -webkit-transform: translateZ(-4px) scale(5); -moz-transform: translateZ(-4px) scale(5); -ms-transform: translateZ(-4px) scale(5); -o-transform: translateZ(-4px) scale(5); transform: translateZ(-4px) scale(5); } .parlxBkgrnd-5 { -webkit-transform: translateZ(-5px) scale(6); -moz-transform: translateZ(-5px) scale(6); -ms-transform: translateZ(-5px) scale(6); -o-transform: translateZ(-5px) scale(6); transform: translateZ(-5px) scale(6); } .parlxBkgrnd-6 { -webkit-transform: translateZ(-6px) scale(7); -moz-transform: translateZ(-6px) scale(7); -ms-transform: translateZ(-6px) scale(7); -o-transform: translateZ(-6px) scale(7); transform: translateZ(-6px) scale(7); } .parlxBkgrnd-7 { -webkit-transform: translateZ(-7px) scale(8); -moz-transform: translateZ(-7px) scale(8); -ms-transform: translateZ(-7px) scale(8); -o-transform: translateZ(-7px) scale(8); transform: translateZ(-7px) scale(8); } /*#endregion */ /*#region - Scroller - */ .scrollerHz { display: block; position: relative; width: auto; white-space: nowrap !important; text-align: center; overflow: auto; background: #ccc; } .scrollerHz > * { display: inline-block; position: relative; padding: .6em .2em; } .scrollerHz > * > * { display: inline-block; position: relative; position: relative; } * + html .scrollerHz > * { display: inline; width: auto; } * + html .scrollerHz > * > * { display: inline; position: relative; width: auto; } /*#endregion */ /*#endregion */ /*#region - modal - */ /*===================================================MODAL */ /* styles for the modal dialog box */ body > #Modal:target { overflow: hidden !important; } #Modal { display: inline-block; width: 100%; height: 100%; visibility: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #747373; background-color: rgba(30, 30, 30, 0.5); z-index: 500; } #Modal:target { display: inline; visibility: visible; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } #ModalDialog { display: block; height: auto; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #fff; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 4px 3px 7px #727272; -webkit-box-shadow: 4px 3px 7px #727272; -ms-box-shadow: 4px 3px 7px #727272; box-shadow: 4px 3px 7px #727272; margin: 8% 5%; padding: 1.5em; z-index: 1000; } #Modal header { display: block; width: 100%; background: #ccc; border-top: 1px solid #b5aaa3; -moz-border-radius: 9px 9px 0 0; -webkit-border-radius: 9px 9px 0 0; -ms-border-radius: 9px 9px 0 0; border-radius: 9px 9px 0 0; padding: 1.5em 0; } #Modal footer { display: block; width: 100%; background: #ccc; border-bottom: 1px solid #b5aaa3; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -ms-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; padding: 1.5em 0; } #Modal > .btn { float: right; margin: 0 5em; } /*#endregion MODAL */ /*#region - outline - */ .outln0 {outline: none;} .outln1 {outline: 1px solid #ffa400;} .outln2 {outline: 1px solid #4cff00;} .outln3 {outline: 1px solid #333;} .outln6 {outline: 1px solid #666;} .outln9 {outline: 1px solid #999;} .outlnC {outline: 1px solid #ccc;} .outlnE {outline: 1px solid #eee;} .outlnF {outline: 1px solid #fff;} /*#endregion outline*/ /*#region - scroller - */ .rowScroller { white-space: nowrap; overflow: auto; text-align: center; } .rowScroller > * { display: inline-block; } /*#endregion */ /*#region - margin - */ .mrg0 {margin: 0;} .mrg1 {margin: 1%;} .mrg2 {margin: 2%;} .mrg3 {margin: 3%;} .mrg4 {margin: 4%;} .mrg5 {margin: 5%;} .mrg6 {margin: 6%;} .mrg7 {margin: 7%;} .mrg8 {margin: 8%;} .mrg9 {margin: 9%;} .mrg10 {margin: 10%;} .mrg15 {margin: 15%;} .mrg20 {margin: 20%;} .mrgBtm0 {margin: 0;} .mrgBtm1 {margin-bottom: 1%;} .mrgBtm2 {margin-bottom: 2%;} .mrgBtm3 {margin-bottom: 3%;} .mrgBtm4 {margin-bottom: 4%;} .mrgBtm5 {margin-bottom: 5%;} .mrgBtm6 {margin-bottom: 6%;} .mrgBtm7 {margin-bottom: 7%;} .mrgBtm8 {margin-bottom: 8%;} .mrgBtm9 {margin-bottom: 9%;} .mrgBtm10 {margin-bottom: 10%;} .mrgBtm15 {margin-bottom: 15%;} .mrgBtm20 {margin-bottom: 20%;} .mrgLft0 {margin: 0;} .mrgLft1 {margin-left: 1%;} .mrgLft2 {margin-left: 2%;} .mrgLft3 {margin-left: 3%;} .mrgLft4 {margin-left: 4%;} .mrgLft5 {margin-left: 5%;} .mrgLft6 {margin-left: 6%;} .mrgLft7 {margin-left: 7%;} .mrgLft8 {margin-left: 8%;} .mrgLft9 {margin-left: 9%;} .mrgLft10 {margin-left: 10%;} .mrgLft15 {margin-left: 15%;} .mrgLft20 {margin-left: 20%;} .mrgRt0 {margin: 0;} .mrgRt1 {margin-right: 1%;} .mrgRt2 {margin-right: 2%;} .mrgRt3 {margin-right: 3%;} .mrgRt4 {margin-right: 4%;} .mrgRt5 {margin-right: 5%;} .mrgRt6 {margin-right: 6%;} .mrgRt7 {margin-right: 7%;} .mrgRt8 {margin-right: 8%;} .mrgRt9 {margin-right: 9%;} .mrgRt10 {margin-right: 10%;} .mrgRt15 {margin-right: 15%;} .mrgRt20 {margin-right: 20%;} .mrgTop0 {margin: 0;} .mrgTop1 {margin-top: 1%;} .mrgTop2 {margin-top: 2%;} .mrgTop3 {margin-top: 3%;} .mrgTop4 {margin-top: 4%;} .mrgTop5 {margin-top: 5%;} .mrgTop6 {margin-top: 6%;} .mrgTop7 {margin-top: 7%;} .mrgTop8 {margin-top: 8%;} .mrgTop9 {margin-top: 9%;} .mrgTop10 {margin-top: 10%;} .mrgTop15 {margin-top: 15%;} .mrgTop20 {margin-top: 20%;} /*#endregion margin*/ /*#region - padding - */ .pad0 {padding: 0;} .pad1 {padding: 1%;} .pad2 {padding: 2%;} .pad3 {padding: 3%;} .pad4 {padding: 4%;} .pad5 {padding: 5%;} .pad6 {padding: 6%;} .pad7 {padding: 7%;} .pad8 {padding: 8%;} .pad9 {padding: 9%;} .pad10 {padding: 10%;} .pad15 {padding: 15%;} .pad20 {padding: 20%;} .padBtm0 {padding-bottom: 0;} .padBtm1 {padding-bottom: 1%;} .padBtm2 {padding-bottom: 2%;} .padBtm3 {padding-bottom: 3%;} .padBtm4 {padding-bottom: 4%;} .padBtm5 {padding-bottom: 5%;} .padBtm6 {padding-bottom: 6%;} .padBtm7 {padding-bottom: 7%;} .padBtm8 {padding-bottom: 8%;} .padBtm9 {padding-bottom: 9%;} .padBtm10 {padding-bottom: 10%;} .padBtm15 {padding-bottom: 15%;} .padBtm20 {padding-bottom: 20%;} .padLft0 {padding-left: 0;} .padLft1 {padding-left: 1%;} .padLft2 {padding-left: 2%;} .padLft3 {padding-left: 3%;} .padLft4 {padding-left: 4%;} .padLft5 {padding-left: 5%;} .padLft6 {padding-left: 6%;} .padLft7 {padding-left: 7%;} .padLft8 {padding-left: 8%;} .padLft9 {padding-left: 9%;} .padLft10 {padding-left: 10%;} .padLft15 {padding-left: 15%;} .padLft20 {padding-left: 20%;} .padRt0 {padding-right: 0;} .padRt1 {padding-right: 1%;} .padRt2 {padding-right: 2%;} .padRt3 {padding-right: 3%;} .padRt4 {padding-right: 4%;} .padRt5 {padding-right: 5%;} .padRt6 {padding-right: 6%;} .padRt7 {padding-right: 7%;} .padRt8 {padding-right: 8%;} .padRt9 {padding-right: 9%;} .padRt10 {padding-right: 10%;} .padRt15 {padding-right: 15%;} .padRt20 {padding-right: 20%;} .padTop0 {padding-top: 0;} .padTop1 {padding-top: 1%;} .padTop2 {padding-top: 2%;} .padTop3 {padding-top: 3%;} .padTop4 {padding-top: 4%;} .padTop5 {padding-top: 5%;} .padTop6 {padding-top: 6%;} .padTop7 {padding-top: 7%;} .padTop8 {padding-top: 8%;} .padTop9 {padding-top: 9%;} .padTop10 {padding-top: 10%;} .padTop15 {padding-top: 15%;} .padTop20 {padding-top: 20%;} /*#endregion padding*/ /*#region - alignment - */ /*=================================================== alignment */ .ctrHz { display: block; float: none; margin-left: auto; margin-right: auto; } .ctrVrt { display: block; position: relative; margin-top: 0; margin-bottom: 0; } .hAlgnLft { float: left; margin-left: 0; margin-right: auto; } .hAlgnCtr { display: block; float: none; margin-left: auto; margin-right: auto; } .hAlgnRt { display: block; float: right; margin-left: auto; margin-right: 0; } .vAlgnBtm { position: relative; vertical-align: bottom !important; } .vAlgnMid { display: inline-block; position: relative; vertical-align: middle !important; margin-top: 0; margin-bottom: 0; } .vAlgnSblng { display: inline-block; position: relative; vertical-align: middle !important; } .vAlgnTop { position: relative; vertical-align: top !important; } .fxdTop { position: fixed; top: 0; right: 0; left: 0; } .fxdBtm { display: inline; position: fixed !important; bottom: 0; right: 0; left: 0; z-index: 1000; } .flt0 {float: none;} .fltRt {float: right;} .fltLft {float: left;} .posRel {position: relative;} .posStatc {position: static;} .posFxd {position: fixed;} .posAbslt {position: Absolute;} .posInhrt {position: inherit;} /*#endregion Alignment*/ /*#region - size - */ /*======================================================================================= Size */ /*#region - Width in em's'" - */ .w40em {width: 40em;} .w35em {width: 35em;} .w30em {width: 30em;} .w25em {width: 25em;} .w20em {width: 20em;} .w19em {width: 19em;} .w18em {width: 18em;} .w17em {width: 17em;} .w16em {width: 16em;} .w15em {width: 15em;} .w14em {width: 14em;} .w13em {width: 13em;} .w12em {width: 12em;} .w11em {width: 11em;} .w10em {width: 10em;} .w9em {width: 9em;} .w8em {width: 8em;} .w7em {width: 7em;} .w6em {width: 6em;} .w5em {width: 5em;} .w4em {width: 4em;} .w3em {width: 3em;} .w2em {width: 2em;} .w1em {width: 1em;} .w08em {width: .08em;} .w05em {width: .05em;} .w03em {width: 03em;} /*#endregion */ /*#region - Equal Width Columns - */ html > body .col.wEql:nth-child(1):nth-last-child(1), html > body .col.wEql:nth-child(1):nth-last-child(1) ~ .col.wEql { width: 100%; } html > body .col.wEql:nth-child(1):nth-last-child(2), html > body .col.wEql:nth-child(1):nth-last-child(2) ~ .col.wEql { width: 50%; } html > body .col.wEql:nth-child(1):nth-last-child(3), html > body .col.wEql:nth-child(1):nth-last-child(3) ~ .col.wEql { width: 33.3333%; } html > body .col.wEql:nth-child(1):nth-last-child(4), html > body .col.wEql:nth-child(1):nth-last-child(4) ~ .col.wEql { width: 25%; } html > body .col.wEql:nth-child(1):nth-last-child(5), html > body .col.wEql:nth-child(1):nth-last-child(5) ~ .col.wEql { width: 20%; } html > body .col.wEql:nth-child(1):nth-last-child(6), html > body .col.wEql:nth-child(1):nth-last-child(6) ~ .col.wEql { width: 16.6666%; } html > body .col.wEql:nth-child(1):nth-last-child(7), html > body .col.wEql:nth-child(1):nth-last-child(7) ~ .col.wEql { width: 14.28571%; } html > body .col.wEql:nth-child(1):nth-last-child(8), html > body .col.wEql:nth-child(1):nth-last-child(8) ~ .col.wEql { width: 12.5%; } html > body .col.wEql:nth-child(1):nth-last-child(9), html > body .col.wEql:nth-child(1):nth-last-child(9) ~ .col.wEql { width: 11.1111%; } html > body .col.wEql:nth-child(1):nth-last-child(10), html > body .col.wEql:nth-child(1):nth-last-child(10) ~ .col.wEql { width: 10%; } html > body .col.wEql:nth-child(1):nth-last-child(11), html > body .col.wEql:nth-child(1):nth-last-child(11) ~ .col.wEql { width: 9.0909%; } html > body .col.wEql:nth-child(1):nth-last-child(12), html > body .col.wEql:nth-child(1):nth-last-child(12) ~ .col.wEql { width: 8.333111111%; } /*#endregion */ /*#region - % Width - */ /*======================================================================================= Width-% */ .w100 {width: 100%;} .w99 {width: 99%;} .w98 {width: 98%;} .w97 {width: 97%;} .w96 {width: 96%;} .w95 {width: 95%;} .w94 {width: 94%;} .w93 {width: 93%;} .w92 {width: 92%;} .w91 {width: 91%;} .w90 {width: 90%;} .w89 {width: 89%;} .w88 {width: 88%;} .w87 {width: 87%;} .w86 {width: 86%;} .w85 {width: 85%;} .w84 {width: 84%;} .w83 {width: 83%;} .w82 {width: 82%;} .w81 {width: 81%;} .w80 {width: 80%;} .w79 {width: 79%;} .w78 {width: 78%;} .w77 {width: 77%;} .w76 {width: 76%;} .w75 {width: 75%;} .w74 {width: 74%;} .w73 {width: 73%;} .w72 {width: 72%;} .w71 {width: 71%;} .w70 {width: 70%;} .w69 {width: 69%;} .w68 {width: 68%;} .w67 {width: 67%;} .w66 {width: 66.6663%;} .w65 {width: 65%;} .w64 {width: 64%;} .w63 {width: 63%;} .w62 {width: 62%;} .w61 {width: 61%;} .w60 {width: 60%;} .w59 {width: 59%;} .w58 {width: 58%;} .w57 {width: 57%;} .w56 {width: 56%;} .w55 {width: 55%;} .w54 {width: 54%;} .w53 {width: 53%;} .w52 {width: 52%;} .w51 {width: 51%;} .w50 {width: 50%;} .w49 {width: 49%;} .w48 {width: 48%;} .w47 {width: 47%;} .w46 {width: 46%;} .w45 {width: 45%;} .w44 {width: 44%;} .w43 {width: 43%;} .w42 {width: 42%;} .w41 {width: 41%;} .w40 {width: 40%;} .w39 {width: 39%;} .w38 {width: 38%;} .w37 {width: 37%;} .w36 {width: 36%;} .w35 {width: 35%;} .w34 {width: 34%;} .w33 {width: 33.3331%;} .w32 {width: 32%;} .w31 {width: 31%;} .w30 {width: 30%;} .w29 {width: 29%;} .w28 {width: 28%;} .w27 {width: 27%;} .w26 {width: 26%;} .w25 {width: 25%;} .w24 {width: 24%;} .w23 {width: 23%;} .w22 {width: 22%;} .w21 {width: 21%;} .w20 {width: 20%;} .w19 {width: 19%;} .w18 {width: 18%;} .w17 {width: 17%;} .w16 {width: 16%;} .w15 {width: 15%;} .w14 {width: 14%;} .w13 {width: 13%;} .w12 {width: 12%;} .w11 {width: 11%;} .w10 {width: 10%;} .w9 {width: 9%;} .w8 {width: 8%;} .w7 {width: 7%;} .w6 {width: 6%;} .w5 {width: 5%;} .w4 {width: 4%} .w3 {width: 3%} .w2 {width: 2%} .w1 {width: 1%} .w09 {width: .09%} .w08 {width: .08%} .w07 {width: .07%} .w06 {width: .06%} .w05 {width: .05%} .w04 {width: .04%} .w03 {width: .03%} .w02 {width: .02%} .w01 {width: .01%} .w0 {width: 0;} .wAuto {width: auto;} /*#endregion Width_Set*/ /*#region - Max_Width - */ /*======================================= mxW# */ .mxW10 {max-width: 10px;} .mxW20 {max-width: 20px;} .mxW25 {max-width: 25px;} .mxW30 {max-width: 30px;} .mxW35 {max-width: 35px;} .mxW40 {max-width: 40px;} .mxW45 {max-width: 45px;} .mxW50 {max-width: 50px;} .mxW55 {max-width: 55px;} .mxW60 {max-width: 60px;} .mxW65 {max-width: 65px;} .mxW70 {max-width: 70px;} .mxW75 {max-width: 75px;} .mxW80 {max-width: 80px;} .mxW85 {max-width: 85px;} .mxW90 {max-width: 90px;} .mxW95 {max-width: 95px;} .mxW100 {max-width: 100px;} .mxW110 {max-width: 110px;} .mxW120 {max-width: 120px;} .mxW130 {max-width: 130px;} .mxW140 {max-width: 140px;} .mxW150 {max-width: 150px;} .mxW160 {max-width: 160px;} .mxW170 {max-width: 170px;} .mxW180 {max-width: 180px;} .mxW190 {max-width: 190px;} .mxW200 {max-width: 200px;} .mxW210 {max-width: 210px;} .mxW220 {max-width: 220px;} .mxW230 {max-width: 230px;} .mxW240 {max-width: 240px;} .mxW250 {max-width: 250px;} .mxW260 {max-width: 260px;} .mxW270 {max-width: 270px;} .mxW280 {max-width: 280px;} .mxW290 {max-width: 290px;} .mxW300 {max-width: 300px;} .mxW310 {max-width: 310px;} .mxW320 {max-width: 320px;} .mxW330 {max-width: 330px;} .mxW340 {max-width: 340px;} .mxW350 {max-width: 350px;} .mxW360 {max-width: 360px;} .mxW370 {max-width: 370px;} .mxW380 {max-width: 380px;} .mxW390 {max-width: 390px;} .mxW400 {max-width: 400px;} .mxW410 {max-width: 410px;} .mxW420 {max-width: 420px;} .mxW430 {max-width: 430px;} .mxW440 {max-width: 440px;} .mxW450 {max-width: 450px;} .mxW460 {max-width: 460px;} .mxW470 {max-width: 470px;} .mxW480 {max-width: 480px;} .mxW490 {max-width: 490px;} .mxW500 {max-width: 500px;} .mxW510 {max-width: 510px;} .mxW520 {max-width: 520px;} .mxW530 {max-width: 530px;} .mxW540 {max-width: 540px;} .mxW550 {max-width: 550px;} .mxW560 {max-width: 560px;} .mxW570 {max-width: 570px;} .mxW580 {max-width: 580px;} .mxW590 {max-width: 590px;} .mxW600 {max-width: 600px;} .mxW610 {max-width: 610px;} .mxW620 {max-width: 620px;} .mxW630 {max-width: 630px;} .mxW640 {max-width: 640px;} .mxW650 {max-width: 650px;} .mxW660 {max-width: 660px;} .mxW670 {max-width: 670px;} .mxW680 {max-width: 680px;} .mxW690 {max-width: 690px;} .mxW700 {max-width: 700px;} .mxW710 {max-width: 710px;} .mxW720 {max-width: 720px;} .mxW730 {max-width: 730px;} .mxW740 {max-width: 740px;} .mxW750 {max-width: 750px;} .mxW760 {max-width: 760px;} .mxW770 {max-width: 770px;} .mxW780 {max-width: 780px;} .mxW790 {max-width: 790px;} .mxW800 {max-width: 800px;} .mxW840 {max-width: 840px;} .mxW860 {max-width: 860px;} .mxW900 {max-width: 900px;} .mxW940 {max-width: 940px;} .mxW960 {max-width: 960px;} .mxW980 {max-width: 980px;} .mxW1000 {max-width: 1000px;} .mxW1024 {max-width: 1024px;} .mxW1050 {max-width: 100px;} .mxW1080 {max-width: 1080px;} .mxW1150 {max-width: 1150px;} .mxW1200 {max-width: 1200px;} .mxW1280 {max-width: 1280px;} .mxW1320 {max-width: 1320px;} .mxW1360 {max-width: 1320px;} .mxW1400 {max-width: 1400px;} .mxW1440 {max-width: 1440px;} .mxW1600 {max-width: 1600px;} .mxW1680 {max-width: 1680px;} .mxW1920 {max-width: 1920px;} /*#endregion Max_Width*/ /*#region - Fixed_Width - */ /*======================================= mxW# */ .fxdW10 {width: 10px;} .fxdW20 {width: 20px;} .fxdW25 {width: 25px;} .fxdW30 {width: 30px;} .fxdW35 {width: 35px;} .fxdW40 {width: 40px;} .fxdW45 {width: 45px;} .fxdW50 {width: 50px;} .fxdW55 {width: 55px;} .fxdW60 {width: 60px;} .fxdW65 {width: 65px;} .fxdW70 {width: 70px;} .fxdW75 {width: 75px;} .fxdW80 {width: 80px;} .fxdW85 {width: 85px;} .fxdW90 {width: 90px;} .fxdW95 {width: 95px;} .fxdW100 {width: 100px;} .fxdW110 {width: 110px;} .fxdW120 {width: 120px;} .fxdW130 {width: 130px;} .fxdW140 {width: 140px;} .fxdW150 {width: 150px;} .fxdW160 {width: 160px;} .fxdW170 {width: 170px;} .fxdW180 {width: 180px;} .fxdW190 {width: 190px;} .fxdW200 {width: 200px;} .fxdW210 {width: 210px;} .fxdW220 {width: 220px;} .fxdW230 {width: 230px;} .fxdW240 {width: 240px;} .fxdW250 {width: 250px;} .fxdW260 {width: 260px;} .fxdW270 {width: 270px;} .fxdW280 {width: 280px;} .fxdW290 {width: 290px;} .fxdW300 {width: 300px;} .fxdW310 {width: 310px;} .fxdW320 {width: 320px;} .fxdW330 {width: 330px;} .fxdW340 {width: 340px;} .fxdW350 {width: 350px;} .fxdW360 {width: 360px;} .fxdW370 {width: 370px;} .fxdW380 {width: 380px;} .fxdW390 {width: 390px;} .fxdW400 {width: 400px;} .fxdW410 {width: 410px;} .fxdW420 {width: 420px;} .fxdW430 {width: 430px;} .fxdW440 {width: 440px;} .fxdW450 {width: 450px;} .fxdW460 {width: 460px;} .fxdW470 {width: 470px;} .fxdW480 {width: 480px;} .fxdW490 {width: 490px;} .fxdW500 {width: 500px;} .fxdW510 {width: 510px;} .fxdW520 {width: 520px;} .fxdW530 {width: 530px;} .fxdW540 {width: 540px;} .fxdW550 {width: 550px;} .fxdW560 {width: 560px;} .fxdW570 {width: 570px;} .fxdW580 {width: 580px;} .fxdW590 {width: 590px;} .fxdW600 {width: 600px;} .fxdW610 {width: 610px;} .fxdW620 {width: 620px;} .fxdW630 {width: 630px;} .fxdW640 {width: 640px;} .fxdW650 {width: 650px;} .fxdW660 {width: 660px;} .fxdW670 {width: 670px;} .fxdW680 {width: 680px;} .fxdW690 {width: 690px;} .fxdW700 {width: 700px;} .fxdW710 {width: 710px;} .fxdW720 {width: 720px;} .fxdW730 {width: 730px;} .fxdW740 {width: 740px;} .fxdW750 {width: 750px;} .fxdW760 {width: 760px;} .fxdW770 {width: 770px;} .fxdW780 {width: 780px;} .fxdW790 {width: 790px;} .fxdW800 {width: 800px;} .fxdW840 {width: 840px;} .fxdW860 {width: 860px;} .fxdW900 {width: 900px;} .fxdW940 {width: 940px;} .fxdW960 {width: 960px;} .fxdW980 {width: 980px;} .fxdW1000 {width: 1000px;} .fxdW1024 {width: 1024px;} .fxdW1050 {width: 100px;} .fxdW1080 {width: 1080px;} .fxdW1150 {width: 1150px;} .fxdW1200 {width: 1200px;} .fxdW1280 {width: 1280px;} .fxdW1320 {width: 1320px;} .fxdW1360 {width: 1320px;} .fxdW1400 {width: 1400px;} .fxdW1440 {width: 1440px;} .fxdW1600 {width: 1600px;} .fxdW1680 {width: 1680px;} .fxdW1920 {width: 1920px;} /*#endregion Max_Width*/ /*#region - Height - */ .h0005px { height: 5px; } .h0010px { height: 10px; } .h0020px { height: 20px; } .h0040px { height: 40px; } .h0060px { height: 60px; } .h0080px { height: 80px; } .h0100px { height: 100px; } .h0120px { height: 120px; } .h0140px { height: 140px; } .h0160px { height: 160px; } .h0180px { height: 180px; } .h0200px { height: 200px; } .h0220px { height: 220px; } .h0240px { height: 240px; } .h0260px { height: 260px; } .h0280px { height: 280px; } .h0300px { height: 300px; } .h0320px { height: 320px; } .h0340px { height: 340px; } .h0360px { height: 360px; } .h0380px { height: 380px; } .h0400px { height: 400px; } .h0500px { height: 500px; } .h0600px { height: 600px; } .h0700px { height: 700px; } .h0800px { height: 800px; } .h0900px { height: 900px; } .h1000px { height: 1000px; } .h1100px { height: 1100px; } .h1200px { height: 1200px; } .h1300px { height: 1300px; } .h1400px { height: 1400px; } .h1500px { height: 1500px; } .h1600px { height: 1600px; } /*#endregion */ /*#endregion SIZE */ /*#endregion class*/ /*! qik_navigation.css | v171121-631 Copyright QikCss 2010 - 2016 | MIT License | http://QikCss.com */ /* qik_navigation.css is a collection of peconfigured containers to control uniform content presentation over multiple browsers */ /* Making changes to qik_navigation.css is not recommended. */ /* Use qik_theme.css to extend/override/style. */ /*#region - NAVIGATION - */ /*===================================================NAVIGATION */ /*#region - Nav (base) - */ /*--------- base nav style all nav style inherit or overide this ----------*/ nav { height: auto; max-height: 100%; position: relative; } /*#Nav, #NavMain, #NavMobile, #NavFooter, #MenuListMbl, .navMbl { background: transparent; }*/ nav ul, .nav ul { list-style: none; /*xbackground: #efefef; xbackground: linear-gradient(to bottom, #efefef 0, #bbbbbb 100%); xbackground: -moz-linear-gradient(to bottom, #efefef 0, #bbbbbb 100%); xbackground: -webkit-linear-gradient(to bottom, #efefef 0,#bbbbbb 100%);*/ } /*nav > ul{ background-color: transparent; border: none; }*/ nav, .nav { display: block; width: 100%; text-align: center; font-size: inherit; padding: 0; margin: 0; } nav ul li, .nav ul li { display: inline; padding: .65em 0; /* padding controls the target click area width for the 'a' element*/ text-decoration: none; margin: auto; border: 1px solid #d9d9d9; -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } nav ul li:hover, .xxnav li:hover { background-color: #d9d9d9; border-color: #b5aaa3; } nav ul li.active, .xxnav li.active { background-color: #fff; border-color: #000; } nav ul a, .xxnav a { display: inline-block; line-height: 1.8em; /* line-height controls the target click area height for the 'li' element. Must be applied in li element*/ line-height: 2.5em\9; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match line-height in current browers. Must be applied in a element*/ color: #444; text-decoration: none; text-align: center; margin: 0 auto; padding: .3765em 2em; /* padding controls the target click area width for the 'a' element*/ padding: 0\9 0; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match 'a' height in current browers ! */ padding: 0\9 1.8em\9; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match 'a' padding in current browers! */ } nav ul a:hover, .nav a:hover { color: #000; } nav ul li.active a, .nav li.active a { color: #000; } nav ul ul { display: none; background: blue; padding: 1.3em; } nav ul li:hover > ul { display: block; } nav li ul ul { display: inline; display: block; padding: .65em 0; /* padding controls the target click area width for the 'a' element*/ text-decoration: none; margin: auto; border: 1px solid #d9d9d9; -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .nav ul ul li:hover { background-color: #d9d9d9; border-color: #b5aaa3; } .nav ul ul li.active { background-color: #fff; border-color: #000; } .nav ul ul a { display: inline-block; line-height: 1.8em; /* line-height controls the target click area height for the 'li' element. Must be applied in li element*/ line-height: 2.5em\9; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match line-height in current browers. Must be applied in a element*/ color: #444; text-decoration: none; text-align: center; margin: 0 auto; padding: .3765em 2em; /* padding controls the target click area width for the 'a' element*/ padding: 0\9 0; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match 'a' height in current browers ! */ padding: 0\9 1.8em\9; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match 'a' padding in current browers! */ } .nav ul ul a:hover { color: #000; } .nav ul ul li.active a { color: #000; } /*#endregion nav */ /*#region - Mobile - */ /*--------- mobile nav style ----------*/ .navMbl, #NavMobile { display: none\9; display: block; width: 100%; height: auto; position: relative; text-align: left; background: #f2f1f0; margin: 0 auto; padding: .8em 7%; z-index: 900; -webkit-box-shadow: inset 0 -3px 9px 0 #aaa; -ms-box-shadow: inset 0 -3px 9px 0 #aaa; box-shadow: inset 0 -3px 9px 0 #aaa; } .navMbl > .navMblBtn { margin: 0; padding: .5em; border: #fff 1px solid; -ms-border-radius: 7px; border-radius: 7px; -webkit-box-shadow: 0 3px 10px 0 #bbb; -ms-box-shadow: 0 3px 10px 0 #bbb; box-shadow: 0 3px 10px 0 #bbb; } .navMbl span { color: #888; font-size: .9em; padding: 0 1%; } #NavMobile { display: none\9; /*fix ei8,7,6*/ height: 46px; padding: .5em 0; } #NavMobileRow { width: 100%; position: fixed; top: 0; background: #f2f1f0; margin: 0 auto; padding: 8px 7.5% 5px 7.5%; z-index: 900; } #NavMobileRow p { display: inline; position: relative; color: #cfcbcb; margin: 0; padding: 0; font-size: 1em; } #NavMobileRow > .btn{ margin: 0; padding: .3em; border: #d9d9d9 1px solid; -ms-border-radius: 4px; border-radius: 4px; } #NavMobileRow .icon3Bar, .navMbl .icon3Bar { display: block; width: 16px; border-top: 3px solid #565656; border-bottom: 9px double #565656; height: 1px; margin: 4px 3px; padding: 1px; } #NavMobileMenu, #NavMblList { width: 85%; height: auto; position: fixed; top: 0; left: 0; right: 0; margin-top: -900px; margin-right: auto; margin-bottom: 0; margin-left: auto; padding: 40px 0 20px 0; background-color: #f2f1f0; background-color: rgba(242, 241, 240, .95); z-index: 1000; -ms-border-radius: 7px; border-radius: 7px; -webkit-transition: margin 0700ms; -moz-transition: margin 0700ms; -ms-transition: margin 0700ms; -o-transition: margin 0700ms; transition: margin 0700ms; } #NavMobileMenu:target, #NavMblList:target { margin-top: 0; -webkit-transition: margin 0700ms; -moz-transition: margin 0700ms; -ms-transition: margin 0700ms; -o-transition: margin 0700ms; transition: margin 0700ms; } #NavMobileMenu li, #NavMblList > li { display: block; width: 85%; max-width: 250px; line-height: 3em; /* line-height controls the target click area height for the 'li' element. Must be applied in li element*/ background: #f4f4f4; margin: .5em auto; margin: 0\9 .12em\9; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match 'li' spacing in current browers ! */ padding: .1em 0; padding: 0em\9 0; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match 'li' height in current browers ! */ border: 1px solid #d9d9d9; -moz-border-radius: 6px; -webkit-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; } #NavMobileMenu li:last-child, #NavMblList li:last-child { display: block; background: none; line-height: 3em; /* line-height controls the target click area height for the 'li' element. Must be applied in li element*/ margin: auto; padding: 0; border: none; } #NavMobileMenu li a, #NavMblList li a { display: block; width: auto; text-align: center; text-decoration: none; } #NavMobileMenu li:last-child a, #NavListMbl li:last-child a { text-decoration: underline; } /*#endregion NavMobile */ /*#region - Bar - */ /*-------- nav Bar style (inherits/overrides "Nav") -------------*/ nav > .nav.bar { background-color: black; border: none; } .nav.bar { margin: 0; background-color: #000; } .nav.bar > li { background-color: transparent; border-color: #b2b2b2; border-width: 0 0 0 1px; border-style: solid; margin: 0 0 0 -2px; margin: 0\9; } .nav.bar > li:last-child { border-width: 0 1px 0 1px; } .nav.bar li:hover { background-color: #eee; border-width: 1px; border-style: solid; } .nav.bar li.active { background-color: #eee; border-color: #fff; border-width: 1px; border-style: solid; margin: 0 -1px 0 0; } .nav.bar a { font-size: inherit; color: #fff; } .nav.bar a:hover { color: #555; } .nav.bar li.active a { color: #444; } .nav.bar.style0 { background-color: transparent; color: #777; border: none; } .nav.bar.style0 > li { background-color: transparent; border: none; } .nav.bar.style0 li.active { background-color: #fafafa; border: 1px solid #eee; } .nav.bar.style0 li:hover { background-color: transparent; border: 1px solid #ddd; } .nav.bar.style0 a { color: #777; } .nav.bar.style0 li.active a { color: #000; } .nav.bar.style0 {background-color: transparent;} .nav.bar.style3 {background-color: #333;} .nav.bar.style6 {background-color: #666;} .nav.bar.style9 {background-color: #999;} .nav.bar.styleC {background-color: #ccc;} .nav.bar.styleE {background-color: #eee;} .nav.bar.styleF {background-color: #fff;} /*#endregion nav bar */ /*#region - Block - */ .nav.blk { display: block; width: 100%; text-align: center; font-size: inherit; padding: 0; margin: 0; } .nav.blk li { background-color: #666; line-height: 3em; /* line-height controls the target click area height for the 'li' element. Must be applied in li element*/ text-decoration: none; margin: auto; margin: 0\9 .12em\9; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match 'li' spacing in current browers ! */ padding: 0em\9 0; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match 'li' height in current browers ! */ border: 1px solid #b5aaa3; } .nav.blk li:hover { background-color: #353022; border-color: #b5aaa3; } .nav.blk li.active { background-color: #fff !important; border-color: #b5aaa3 !important; } .nav.blk a { display: inline-block; line-height: 2.5em\9; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match line-height in current browers. Must be applied in a element*/ color: #f6f3eb; text-decoration: none; text-align: center; margin: 0 auto; padding: 0\9 1.8em\9; /* IMPORTANT! \9 value is for ie8/7/6 ONLY. Adjust to match 'a' padding in current browers! */ } .nav.blk a:hover { color: #fff; } .nav.blk li.active a { color: #666 !important; } /*#endregion blk*/ /*#region - Button - */ /*--------- nav Button style (inherits/overrides "Nav") ----------*/ .nav.btn { margin: 1em 0; } .nav.btn > li { background-color: #fff; border-color: #d9d9d9; -ms-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .nav.btn li:hover { background-color: #ebe6d7; border-color: #b5aaa3; } .nav.btn li:active { background-color: #f1eada; border-color: #b5aaa3 !important; margin: 0; } .nav.btn a { font-size: inherit; color: #2e2e2e; } .nav.btn a:hover { color: black; } .nav.btn li.active a{ color: #645E5A !important; } .nav.btn.style1 li { -ms-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } .nav.btn.style2 li { -ms-border-radius: 11px; -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; } .nav.btn.style3 li { -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .nav.btn.style4 li { -ms-border-radius: 7px 2px; -moz-border-radius: 7px 2px; -webkit-border-radius: 7px 2px; border-radius: 7px 2px; } .nav.btn.style5 li { -ms-border-radius: 11px 4px; -moz-border-radius: 11px 4px; -webkit-border-radius: 11px 4px; border-radius: 11px 4px; } .nav.btn.style6 li { -ms-border-radius: 15px 6px; -moz-border-radius: 15px 6px; -webkit-border-radius: 15px 6px; border-radius: 15px 6px; } /*#endregion nav btn */ /*#region - Tab - */ /*--------- nav Tab style (inherits/overrides "Nav") ----------*/ ul.nav.tab.bdrBtm { border-bottom: 1px solid #eee; } .nav.tab > li { position: relative; bottom: -.57654px; bottom: -3px\9; background-color: #fafafa; border-color: #ccc; -ms-border-radius: 8px 24px 0 0; -moz-border-radius: 8px 24px 0 0; -webkit-border-radius: 8px 24px 0 0; border-radius: 8px 24px 0 0; margin: 0 0 .03em -3.765px; } .nav.tab > li:hover { background-color: #f6f3eb; border-color: #b5aaa3; } .nav.tab li.active { background-color: #fff !important; border-color: #b5aaa3 !important; border-bottom-color: #fff !important; padding-bottom: .66543em; z-index: 5; -webkit-box-shadow: 0 -4px 5px 0 #ececec; -ms-box-shadow: 0 -4px 5px 0 #ececec; box-shadow: 0 -4px 5px 0 #ececec; } .nav.tab a { font-size: inherit; color: #6f6f6f; padding-top: .5em; } .nav.tab a:hover { color: #000 !important; } .nav.tab li.active a { color: #d16c46 !important; } .nav.tab.style1 li { -ms-border-radius: 8px 24px 0 0; -moz-border-radius: 8px 24px 0 0; -webkit-border-radius: 8px 24px 0 0; border-radius: 8px 24px 0 0; } .nav.tab.style2 li { -ms-border-radius: 10px 30px 0 0; -moz-border-radius: 10px 30px 0 0; -webkit-border-radius: 10px 30px 0 0; border-radius: 10px 30px 0 0; } .nav.tab.style3 li { -ms-border-radius: 15px 45px 0 0; -moz-border-radius: 15px 45px 0 0; -webkit-border-radius: 15px 45px 0 0; border-radius: 15px 45px 0 0; } .nav.tab.style4 li { -ms-border-radius: 18px 20px 0 0; -moz-border-radius: 18px 20px 0 0; -webkit-border-radius: 18px 20px 0 0; border-radius: 18px 20px 0 0; } .nav.tab.style5 li { -ms-border-radius: 26px 30px 0 0; -moz-border-radius: 26px 30px 0 0; -webkit-border-radius: 26px 30px 0 0; border-radius: 26px 30px 0 0; } .nav.tab.style6 li { -ms-border-radius: 36px 40px 0 0; -moz-border-radius: 36px 40px 0 0; -webkit-border-radius: 36px 40px 0 0; border-radius: 36px 40px 0 0; } /*#endregion - nav tab -*/ /*#region - Group - */ .nav.group > li { margin-left: -2px; margin-right: -2px; -ms-border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .nav.group li:first-child { margin-left: -3px; margin-right: -3px; -ms-border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px; } .nav.group li:last-child { margin-left: -3px; margin-right: -3px; -ms-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; } /*#endregion */ /*#endregion NAVIGATION */ /*! qik_text.css | v171121.536 Copyright QikCss 2010 - 2017 | MIT License | http://QikCss.com */ /* qik_text.css is a collection of peconfigured containers to control uniform content presentation over multiple browsers */ /* Making changes to qik_text.css is not recommended. */ /* Use qik_theme.css to extend/override/style. */ /*#region - Text - */ /*===================================================TEXT */ /*#region - TEXT ELEMENT - */ a { color: inherit; font-size: inherit; cursor: pointer; } address { font-size: 1em; font-style: italic; line-height: 1.35em; color: inherit; text-align: left; margin: .2em 0; padding: .05em .1em; } abbr[title] { border-bottom: 1px dotted; } b { font-weight: bold; } blockquote { margin: 1em 40px; } blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } code { font-family: monospace, monospace; font-size: 1em; } dfn { font-style: italic; } figure { margin: 1em 40px; } /*#region - TEXT HEADING - */ /*===================================================heading */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: inherit; margin: 0; } h1, .h1 { color: #8f8f8f; font-size: 2em; padding: 1em .1em .005em .1em; } h2, .h2 { color: #1f6c8b; font-size: 1.7em; padding: .035em .2em; } h3, .h3 { color: #6f6f6f; font-size: 1.55em; padding: .04em .25em; } h4, .h4 { color: #1f779b; font-size: 1.45em; padding: .05em .3em; } h5, .h5 { color: #5f5f5f; font-size: 1.3em; padding: .06em .35em; } h6, .h6 { color: #1f789b; font-size: 1.2em; padding: .07em .4em; } header h1 { font-size: 2.5em; } header h2 { font-size: 2em; } header h3 { font-size: 1.8em; } header h4 { font-size: 1.6em; } h1 + p { margin-top: -.42em; } h2 + p { margin-top: -.33em; } h3 + p { margin-top: -.31em; } h4 + p { margin-top: -.35em; } h5 + p { margin-top: -.3em; } h6 + p { margin-top: -.3em; } /*#endregion Text_Heading*/ kbd { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 1em; } mark { background: #ff0; color: inherit; } /*#region - TEXT LIST - */ /*===================================================list */ ol, ul { font-size: 1em; line-height: 1.5em; color: inherit; margin: .5em 0; padding: 0 .5em .5em 2.5em; } ol > li, ul > li { margin: 0; padding: 0; } /*#endregion Text_List*/ p { font-size: 1em; color: inherit; text-align: left; padding: .3em .5em; } p:last-child { margin-bottom: .2em; padding-bottom: .5em; } pre { display: block; font-size: 1.05em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; white-space: pre-wrap; color: inherit; -ms-word-break: break-all; -moz-word-break: break-all; -o-word-break: break-all; word-break: break-all; -ms-word-wrap: break-word; word-wrap: break-word; margin: .3em 0; padding: .37em; overflow: auto; border: 1px solid #ccc; -ms-border-radius: 4.5px; -moz-border-radius: 4.5px; -webkit-border-radius: 4.5px; border-radius: 4.5px; } samp { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 1em; } small { font-size: 80%; } strong { font-weight: bold; } sup { position: relative; top: -0.5em; font-size: 78%; line-height: 0; vertical-align: baseline; } sub { position: relative; bottom: -0.25em; font-size: 75%; line-height: 0; vertical-align: baseline; } textarea { width: 95%; min-height: 3em; -moz-resize: vertical; -ms-resize: vertical; -o-resize: vertical; resize: vertical; color: inherit; font: inherit; margin: .3em 0; padding: .3em; overflow: auto; border: 1px solid #d9d9d9; -ms-border-radius: 4px 4px; border-radius: 4px 4px; -webkit-transition: all linear 200ms; -moz-transition: all linear 200ms; -ms-transition: all linear 200ms; -o-transition: all linear 200ms; transition: all linear 200ms; } /*#endregion element*/ /*#region - TEXT LINK - */ /*===================================================link */ /*See TEXT ELEMENT*/ /*a { color: inherit; font-size: inherit; cursor: pointer; }*/ /*#endregion Text_Link */ /*#region - TEXT CLASS - */ /*#region - after / before - ICON */ .after { display: inline-block; content: " "; color: #575353; } .after.bar:after { content: "\00A0 \007C \00A0"; font-weight: bold; font-size: 1.1em; } .after.copyright:after { content: "\200A \200A \00A9"; font-weight: bold; font-size: 1.1em; } .after.iconChvrnUp:after { content: "\00A0 \00A0 \^"; } .after.iconChvrnDwn:after { content: "\00A0 \00A0 \02C7"; } .after.iconChvrnLft:after { content: "\00A0 \00A0 \2039"; } .after.iconChvrnRt:after { content: "\00A0 \00A0 \203A"; } .after.iconChvrnLftDbl:after { content: "\00A0 \00A0 \00AB"; } .after.iconChvrnRtDbl:after { content: "\00A0 \00A0 \00BB"; } .after.iconArrowUp:after { content: "\00A0 \00A0 \25B4"; font-size: 1.1em; } .after.iconArrowRt:after { content: "\00A0 \00A0 \25B8"; font-size: 1.1em; } .after.iconArrowDwn:after { content: "\00A0 \00A0 \25BE"; font-size: 1.1em; } .after.iconArrowLft:after { content: "\00A0 \00A0 \25C2"; font-size: 1.1em; } .after.registered:after { content: "\200A \00AE"; font-weight: bold; font-size: 1.1em; } .after.trademark:after { content: "\200A \2122"; font-weight: bold; font-size: 1.1em; } .before:before { display: inline-block; content: ""; color: #575353; } .before.bar:before { content: "\00A0 \007C \00A0"; font-weight: 300; font-size: 1.1em; } .before.copyright:before { content: "\00A9 \200A \200A"; font-weight: bold; font-size: 1.1em; } .before.iconChvrnLft:before { content: "\2039\00A0 \00A0 "; } .before.iconChvrnRt:before { content: "\203A\00A0 \00A0 "; } .before.iconChvrnLftDbl:before { content: "\00BB\00A0 \00A0 "; } .before.iconChvrnRtDbl:before { content: "\00BB\00A0 \00A0 "; } .before.iconArrowUp:before { content: "\25B4\00A0 \00A0 "; font-size: 1.1em; } .before.iconArrowRt:before { content: "\25B8\00A0 \00A0 "; font-size: 1.1em; } .before.iconArrowDwn:before { content: "\25BE\00A0 \00A0 "; font-size: 1.1em; } .before.iconArrowLft:before { content: "\25C2\00A0 \00A0 "; font-size: 1.1em; } .before.registered:before { content: "\00AE \200A \200A"; font-weight: bold; font-size: 1.1em; } .before.trademark:before { content: "\2122 \200A"; font-weight: bold; font-size: 1.1em; } /*#endregion */ .txtDecorNone, .noDecor { text-decoration: none; list-style-type: none; list-style-image: none; list-style-position: inside; list-style: none; } .txtWrapNone { white-space: nowrap; -webkit-text-wrap: none; -moz-text-wrap: none; -ms-text-wrap: none; -o-text-wrap: none; text-wrap: none; } .txtAlgnCtr {text-align: center !important;} .txtAlgnJst {text-align: justify !important;} .txtAlgnLft {text-align: left !important;} .txtAlgnRt {text-align: right !important;} .txtClrDanger {color: red !important;} .txtClrError {color: #c84442 !important;} .txtClrInfo {color: #4e93b5 !important;} .txtClrMute {color: #b5aaa3 !important;} .txtClrPrimary {color: #3f7db4 !important;} .txtClrSuccess {color: #3b803c !important;} .txtClrWarn {color: #d16c46 !important;} .txtClr3 {color: #333 !important;} .txtClr6 {color: #666 !important;} .txtClr9 {color: #999 !important;} .txtClrC {color: #ccc !important;} .txtClrE {color: #eee !important;} .txtClrF {color: #fff !important;} .txtClrHvr0:hover {color: transparent !important;} .txtClrHvr3:hover {color: #333 !important;} .txtClrHvr6:hover {color: #666 !important;} .txtClrHvr9:hover {color: #999 !important;} .txtClrHvrC:hover {color: #ccc !important;} .txClrtHvrE:hover {color: #eee !important;} .txtClrHvrF:hover {color: #fff !important;} .txtShdwNone { -webkit-text-shadow: none; -ms-text-shadow: none; text-shadow: none; } .txtShdw0 { -webkit-text-shadow: .05em .05em #000; -ms-text-shadow: .05em .05em #000; text-shadow: .05em .05em #000; } .txtShdw3 { -webkit-text-shadow: .05em .05em #333; -ms-text-shadow: .05em .05em #333; text-shadow: .05em .05em #333; } .txtShdw6 { -webkit-text-shadow: .05em .05em #666; -ms-text-shadow: .05em .05em #666; text-shadow: .05em .05em #666; } .txtShdw9 { -webkit-text-shadow: .05em .05em #999; -ms-text-shadow: .05em .05em #999; text-shadow: .05em .05em #999; } .txtShdwC{ -webkit-text-shadow: .05em .05em #ccc; -ms-text-shadow: .05em .05em #ccc; text-shadow: .05em .05em #ccc; } .txtShdwD { -webkit-text-shadow: .05em .05em #ddd; -ms-text-shadow: .05em .05em #ddd; text-shadow: .05em .05em #ddd; } .txtShdwE { -webkit-text-shadow: .05em .05em #eee; -ms-text-shadow: .05em .05em #eee; text-shadow: .05em .05em #eee; } .txtShdwF { -webkit-text-shadow: .05em .05em #fff; -ms-text-shadow: .05em .05em #fff; text-shadow: .05em .05em #fff; } .txtSz_03em {font-size: .3em;} .txtSz_05em {font-size: .5em;} .txtSz_06em, .txtSzXsml, .xSml, .xSmall {font-size: .60em;} .txtSz_07em, .txtSzSmlr, .smlr, .smaller {font-size: .70em;} .txtSz_08em, .txtSzSml, .sml, .small {font-size: .80em;} .txtSz_09em {font-size: .9em;} .txtSz_1em {font-size: 1em;} .txtSz_1-2em, .txtSzLrg, .lrg, .large {font-size: 1.20em;} .txtSz_1-3em {font-size: 1.3em;} .txtSz_1-4em, .txtSzLrgr, .lrgr, .larger {font-size: 1.40em;} .txtSz_1-5em {font-size: 1.5em;} .txtSz_1-6em, .txtSzXlrg, .xLrg, .xLarge {font-size: 1.60em;} .txtSz_1-7em {font-size: 1.7em;} .txtSz_1-9em {font-size: 1.9em;} .txtSz_2em {font-size: 2em;} .txtSz_2-3em {font-size: 2.3em;} .txtSz_2-5em {font-size: 2.5em;} .txtSz_2-7em {font-size: 2.7em;} .txtSz_2-9em {font-size: 2.9em;} .txtSz_3em {font-size: 3em;} .txtWgt100 {font-weight: 100;} .txtWgt200 {font-weight: 200;} .txtWgt300 {font-weight: 300;} .txtWgt400 {font-weight: 400;} .txtWgt500 {font-weight: 500;} .txtWgt600 {font-weight: 600;} .txtWgt700 {font-weight: 700;} .txtWgt800 {font-weight: 800;} .txtWgt900 {font-weight: 900;} .txtWgtBold {font-weight: bold;} .txtWgtBolder {font-weight: bolder;} .txtWgtLighter {font-weight: lighter;} .undrln { text-decoration: underline;} /*#endregion */ /*#endregion text*/ /*! qik_animate.css | v171121.2009 Copyright QikCss 2010 - 2018 | MIT License | http://QikCss.com */ /* To customize you project it is recommend you override only the customized elements/atributes in a seperate Qik_Theme css found at http://QikCss.com */ /*====================================================== ANIMATION / HOVER / TRANSFORM / TRANSITION ================================================*/ /*#region ACCORDION */ .accordion > input{ display: none; cursor: pointer; } .accordion > input:checked + label { background: #999; color: red; } .accordion > input[type = checkbox]:checked + label:hover:before { content: " \25BC "; color: green; -ms-text-shadow: 4px 4px 4px #ccc; text-shadow: 4px 4px 4px #ccc; text-align: left; } .accordion > input[type = radio]:checked + label:hover:before { content: " \25BC "; color: green; -ms-text-shadow: 4px 4px 4px #ccc; text-shadow: 4px 4px 4px #ccc; text-align: left; } .accordion > article > p { padding: 1.1em 2em; } .accordion:not(param:focus) { } /*#region - row - */ /*Row*/ .row.accordion > label { display: block; position: relative; width: 100%; height: auto; cursor: pointer; color: #ccc; padding: .8em; background: rgb(125,126,125); background: linear-gradient(to top, rgba(125,126,125,1) 0, rgba(141,141,141,1) 100%); border-bottom: 2px double #000; } .row.accordion > label:hover, .row.accordion > input:checked + label:hover { background: #ddd; color: #666; border-bottom: 2px double #bbb; } .row.accordion > label:hover:after, .row.accordion > input:checked + label:hover:after { content: " \25B2 "; color: red; -ms-text-shadow: 4px 4px 4px #ccc; text-shadow: 4px 4px 4px #ccc; text-align: right; /*content: ''; position: relative; display: inline-block; width: 25%; height: 24px; right: 13px; top: 7px; background: url('Images/Icons/arrowDown.png') no-repeat center center;*/ } /*.hvrXpndr > :first-child:before { content: " \25BC "; color: green; -ms-text-shadow: 4px 4px 4px #ccc; text-shadow: 4px 4px 4px #ccc; text-align: left; } .hvrXpndr:hover > :first-child:before { content: " \25B2 "; color: red; -ms-text-shadow: 4px 4px 4px #ccc; text-shadow: 4px 4px 4px #ccc; text-align: right; }*/ .row.accordion > input[type = radio] ~ article { height: 100%; max-height: 0; overflow: hidden; -webkit-transition: max-height 300ms ease; -moz-transition: max-height 300ms ease; -ms-transition: max-height 300ms ease; -o-transition: max-height 300ms ease; transition: max-height 300ms ease; } .row.accordion > input[type = checkbox] ~ article { height: 100%; max-height: 0; overflow: hidden; -webkit-transition: max-height 300ms ease; -moz-transition: max-height 300ms ease; -ms-transition: max-height 300ms ease; -o-transition: max-height 300ms ease; transition: max-height 300ms ease; } .row.accordion > input[type = checkbox]:checked ~ article, .row.accordion > input[type = radio]:checked ~ article { max-height: 1000px; -webkit-transition: max-height 1s ease; -moz-transition: max-height 1s ease; -ms-transition: max-height 1s ease; -o-transition: max-height 1s ease; transition: max-height 1s ease; } /*#endregion */ /*#region - col - */ /*Column*/ /*.col.accordion { width: auto; border: 1px solid blue; } .col.accordion > div.col > label { display: block; position: relative; width: auto; cursor: pointer; color: #ccc; padding: .8em; background: rgb(125,126,125); background: linear-gradient(to top, rgba(125,126,125,1) 0, rgba(141,141,141,1) 100%); border-bottom: 2px double #000; border: 1px solid red; } .col.accordion > label:hover, .col.accordion > input:checked + label:hover { background: #ddd; color: #666; border-bottom: 2px double #bbb; } .col.accordion > label:hover:after, .col.accordion > input:checked + label:hover:after { content: ''; position: relative; display: inline-block; width: 25%; height: 24px; right: 13px; top: 7px; background: url('Images/Icons/arrowDown.png') no-repeat center center; } .col.accordion > div.col:nth-child(2) { display: inline-block; position: relative; width: 0px; xwidth: 0; overflow: hidden; border: 1px solid yellow; } .col.accordion > div.col:nth-child(1):checked ~ div.col:nth-child(2){ width: 300px; }*/ /*#endregion */ /*#endregion */ /*#region - ANIMATION - */ /* ========== Animation Effects ========== */ /*#region - EASE - */ /* ==================== Ease ==================== */ .ease0100, .ease0100 img { -webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; -ms-transition: all 100ms ease; -o-transition: all 100ms ease; transition: all 100ms ease; } .ease0200, .ease0200 img { -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .ease, .ease img, .ease0300, .ease0300 img { -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .ease0400, .ease0400 img { -moz-transition: all 400ms ease; -o-transition: all 400ms ease; -webkit-transition: all 400ms ease; -ms-transition: all 400ms ease; transition: all 400ms ease; } .ease0500, .ease0500 img { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .ease0600, .ease0600 img { -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } .ease0700, .ease0700 img { -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; } .ease0800, .ease0800 img { -webkit-transition: all 800ms ease; -moz-transition: all 800ms ease; -ms-transition: all 800ms ease; -o-transition: all 800ms ease; transition: all 800ms ease; } .ease0900, .ease0900 img { -webkit-transition: all 900ms ease; -moz-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: all 900ms ease; } .ease1000, .ease1000 img { -moz-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .ease1500, .ease1500 img { -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease; -webkit-transition: all 1.5s ease; -ms-transition: all 1.5s ease; transition: all 1.5s ease; } .ease2000, .ease2000 img { -moz-transition: all 2s ease; -o-transition: all 2s ease; -webkit-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; } .ease2500, .ease2500 img { -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; -webkit-transition: all 2.5s ease; -ms-transition: all 2.5s ease; transition: all 2.5s ease; } /*#endregion ease*/ /*#region - EXPAND - */ .expndDwn { margin-top: -800px; max-width: 480px; -moz-transition: 500ms all; -o-transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; transition: 500ms all; } .expndDwn:target{ margin-top: 30px; -moz-transition: 500ms all; -o-transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; transition: 500ms all; } .expndLft { margin-right: -202%; margin-left: 102%; position: fixed; background-color: #999; text-align: center; -moz-transition: 500ms all; -o-transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; transition: 500ms all; z-index: 1000; } .expndLft:target { max-width: 480px; margin-right: 0; margin-left: 0; -moz-transition: 500ms all; -o-transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; transition: 500ms all; } .expndRt { max-width: 480px; margin-left: -202%; margin-right: 102%; position: fixed; background-color: #999; -moz-transition: 500ms all; -o-transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; transition: 500ms all; z-index: 1000; } .expndRt:target { margin-left: 0; margin-right: 0; -moz-transition: 500ms all; -o-transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; transition: 500ms all; } .expndUp { margin-bottom: -800px; -moz-transition: 500ms all; -o-transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; transition: 500ms all; } .expndUp:target { margin-bottom: 30px; -moz-transition: 500ms all; -o-transition: 500ms all; -webkit-transition: 500ms all; -ms-transition: 500ms all; transition: 500ms all; } /*#endregion expand*/ /*#region - FLY IN - */ /* ========== Fly In ========== */ .flyInTop { position: relative; -moz-animation: animflyInTop 800ms; -o-animation: animflyInTop 800ms; -webkit-animation: animflyInTop 800ms; -ms-animation: animflyInTop 800ms; animation: animflyInTop 800ms; } .flyInRt { position: relative; -moz-animation: animflyInRt 500ms; -o-animation: animflyInRt 500ms; -webkit-animation: animflyInRt 500ms; -ms-animation: animflyInRt 500ms; animation: animflyInRt 500ms; } .flyInBtm { position: relative; -moz-animation: animflyInBtm 800ms; -o-animation: animflyInBtm 800ms; -webkit-animation: animflyInBtm 800ms; -ms-animation: animflyInBtm 800ms; animation: animflyInBtm 800ms; } .flyInLft { position: relative; -moz-animation: animflyInLft 500ms; -o-animation: animflyInLft 500ms; -webkit-animation: animflyInLft 500ms; -ms-animation: animflyInLft 500ms; animation: animflyInLft 500ms; } @-moz-keyframes animflyInTop { from {top: -2000px;} to {top: 0;} } @-o-keyframes animflyInTop { from {top: -2000px;} to {top: 0;} } @-webkit-keyframes animflyInTop { from {top: -2000px;} to {top: 0;} } @-ms-keyframes animflyInTop { from {top: -2000px;} to {top: 0;} } @keyframes animflyInTop { from {top: -2000px;} to {top: 0;} } @-moz-keyframes animflyInRt { from {right: -2000px;} to {right: 0;} } @-o-keyframes animflyInRt { from {right: -2000px;} to {right: 0;} } @-webkit-keyframes animflyInRt { from {right: -2000px;} to {right: 0;} } @-ms-keyframes animflyInRt { from {right: -2000px;} to {right: 0;} } @keyframes animflyInRt { from {right: -2000px;} to {right: 0;} } @-moz-keyframes animflyInBtm { from {bottom: -2000px;} to {bottom: 0;} } @-o-keyframes animflyInBtm { from {bottom: -2000px;} to {bottom: 0;} } @-webkit-keyframes animflyInBtm { from {bottom: -2000px;} to {bottom: 0;} } @-ms-keyframes animflyInBtm { from {bottom: -2000px;} to {bottom: 0;} } @keyframes animflyInBtm { from {bottom: -2000px;} to {bottom: 0;} } @-moz-keyframes animflyInLft { from {left: -2000px;} to {left: 0;} } @-o-keyframes animflyInLft { from {left: -2000px;} to {left: 0;} } @-webkit-keyframes animflyInLft { from {left: -2000px;} to {left: 0;} } @-ms-keyframes animflyInLft { from {left: -2000px;} to {left: 0;} } @keyframes animflyInLft { from {left: -2000px;} to {left: 0;} } /*#endregion - Fly In - */ /*#region - FADE IN - */ /* ========== Fade In ========== */ .appear { -ms-opacity: 1; opacity: 1; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .fadeIn { -ms-opacity: 1; opacity: 1; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } /*#endregion Fade In */ /*#region - CROSS FADE - */ /* ========== Cross Fade ========== */ .crossFade1Imgs, .crossFade2Imgs, .crossFade3Imgs, .crossFade4Imgs, .crossFade5Imgs, .crossFade6Imgs, .crossFade7Imgs, .crossFade8Imgs { display: block; position: relative; width: 100%; height: auto; margin: 0; padding: 0; } .crossFade1Imgs figure, .crossFade2Imgs figure, .crossFade3Imgs figure, .crossFade4Imgs figure, .crossFade5Imgs figure, .crossFade6Imgs figure, .crossFade7Imgs figure, .crossFade8Imgs figure { display: block; position: absolute; width: 100%; top: 0; -ms-opacity: 0; opacity: 0; margin: 0; padding: 0; } .crossFade1Imgs figcaption, .crossFade2Imgs figcaption, .crossFade3Imgs figcaption, .crossFade4Imgs figcaption, .crossFade5Imgs figcaption, .crossFade6Imgs figcaption, .crossFade7Imgs figcaption, .crossFade8Imgs figcaption { position: absolute; bottom: 0; color: #fff; background: rgba(0,0,0, .45); font-size: 1.2em; -ms-opacity: 0; opacity: 0; -webkit-transition: opacity .8s; -moz-transition: opacity .8s; -ms-transition: opacity .8s; -o-transition: opacity .8s; transition: opacity .8s; } .crossFade1Imgs:hover figure figcaption, .crossFade2Imgs:hover figure figcaption, .crossFade3Imgs:hover figure figcaption, .crossFade4Imgs:hover figure figcaption, .crossFade5Imgs:hover figure figcaption, .crossFade6Imgs:hover figure figcaption, .crossFade7Imgs:hover figure figcaption, .crossFade8Imgs:hover figure figcaption { -ms-opacity: 1; opacity: 1; -webkit-transition: opacity .8s; -moz-transition: opacity .8s; -ms-transition: opacity .8s; -o-transition: opacity .8s; transition: opacity .8s; } /*--Cross Fade Animation for 1 Images--*/ .crossFade1Imgs figure:nth-child(1) { position: relative; -ms-opacity: 1; opacity: 1; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; -ms-transition: all 0.15s linear; transition: all 0.15s linear; } /*--Cross Fade Animation for 2 Images--*/ .crossFade2Imgs figure:nth-child(1) { position: relative; -moz-animation: crossfade2 14s 0 infinite; -o-animation: crossfade2 14s 0 infinite; -webkit-animation: crossfade2 14s 0 infinite; -ms-animation: crossfade2 14s 0 infinite; animation: crossfade2 14s 0 infinite; } .crossFade2Imgs figure:nth-child(2) { -moz-animation: crossfade2 14s 7s infinite; -o-animation: crossfade2 14s 7s infinite; -webkit-animation: crossfade2 14s 7s infinite; -ms-animation: crossfade2 14s 7s infinite; animation: crossfade2 14s 7s infinite; } /*--Cross Fade Animation for 3 Images--*/ .crossFade3Imgs figure:nth-child(1) { position: relative; -moz-animation: crossfade3 21s 0s infinite; -o-animation: crossfade3 21s 0s infinite; -webkit-animation: crossfade3 21s 0s infinite; -ms-animation: crossfade3 21s 0s infinite; animation: crossfade3 21s 0s infinite; } .crossFade3Imgs figure:nth-child(2) { -moz-animation: crossfade3 21s 7s infinite; -o-animation: crossfade3 21s 7s infinite; -webkit-animation: crossfade3 21s 7s infinite; -ms-animation: crossfade3 21s 7s infinite; animation: crossfade3 21s 7s infinite; } .crossFade3Imgs figure:nth-child(3) { -moz-animation: crossfade3 21s 14s infinite; -o-animation: crossfade3 21s 14s infinite; -webkit-animation: crossfade3 21s 14s infinite; -ms-animation: crossfade3 21s 14s infinite; animation: crossfade3 21s 14s infinite; } /*--Cross Fade Animation for 4 Images--*/ .crossFade4Imgs figure:nth-child(1) { position: relative; -moz-animation: crossfade4 28s 0s infinite; -o-animation: crossfade4 28s 0s infinite; -webkit-animation: crossfade4 28s 0s infinite; -ms-animation: crossfade4 28s 0s infinite; animation: crossfade4 28s 0s infinite; } .crossFade4Imgs figure:nth-child(2) { -moz-animation: crossfade4 28s 7s infinite; -o-animation: crossfade4 28s 7s infinite; -webkit-animation: crossfade4 28s 7s infinite; -ms-animation: crossfade4 28s 7s infinite; animation: crossfade4 28s 7s infinite; } .crossFade4Imgs figure:nth-child(3) { -moz-animation: crossfade4 28s 14s infinite; -o-animation: crossfade4 28s 14s infinite; -webkit-animation: crossfade4 28s 14s infinite; -ms-animation: crossfade4 28s 14s infinite; animation: crossfade4 28s 14s infinite; } .crossFade4Imgs figure:nth-child(4) { -moz-animation: crossfade4 28s 21s infinite; -o-animation: crossfade4 28s 21s infinite; -webkit-animation: crossfade4 28s 21s infinite; -ms-animation: crossfade4 28s 21s infinite; animation: crossfade4 28s 21s infinite; } /*--Cross Fade Animation for 5 Images--*/ .crossFade5Imgs figure:nth-child(1) { position: relative; -moz-animation: crossfade5 35s 0s infinite; -o-animation: crossfade5 35s 0s infinite; -webkit-animation: crossfade5 35s 0s infinite; -ms-animation: crossfade5 35s 0s infinite; animation: crossfade5 35s 0s infinite; } .crossFade5Imgs figure:nth-child(2) { -moz-animation: crossfade5 35s 7s infinite; -o-animation: crossfade5 35s 7s infinite; -webkit-animation: crossfade5 35s 7s infinite; -ms-animation: crossfade5 35s 7s infinite; animation: crossfade5 35s 7s infinite; } .crossFade5Imgs figure:nth-child(3) { -moz-animation: crossfade5 35s 14s infinite; -o-animation: crossfade5 35s 14s infinite; -webkit-animation: crossfade5 35s 14s infinite; -ms-animation: crossfade5 35s 14s infinite; animation: crossfade5 35s 14s infinite; } .crossFade5Imgs figure:nth-child(4) { -moz-animation: crossfade5 35s 21s infinite; -o-animation: crossfade5 35s 21s infinite; -webkit-animation: crossfade5 35s 21s infinite; -ms-animation: crossfade5 35s 21s infinite; animation: crossfade5 35s 21s infinite; } .crossFade5Imgs figure:nth-child(5) { -moz-animation: crossfade5 35s 28s infinite; -o-animation: crossfade5 35s 28s infinite; -webkit-animation: crossfade5 35s 28s infinite; -ms-animation: crossfade5 35s 28s infinite; animation: crossfade5 35s 28s infinite; } /*--Cross Fade Animation for 6 Images--*/ .crossFade6Imgs figure:nth-child(1) { position: relative; -moz-animation: crossfade6 36s 0s infinite; -o-animation: crossfade6 36s 0s infinite; -webkit-animation: crossfade6 36s 0s infinite; -ms-animation: crossfade6 36s 0s infinite; animation: crossfade6 36s 0s infinite; } .crossFade6Imgs figure:nth-child(2) { -moz-animation: crossfade6 36s 6s infinite; -o-animation: crossfade6 36s 6s infinite; -webkit-animation: crossfade6 36s 6s infinite; -ms-animation: crossfade6 36s 6s infinite; animation: crossfade6 36s 6s infinite; } .crossFade6Imgs figure:nth-child(3) { -moz-animation: crossfade6 36s 12s infinite; -o-animation: crossfade6 36s 12s infinite; -webkit-animation: crossfade6 36s 12s infinite; -ms-animation: crossfade6 36s 12s infinite; animation: crossfade6 36s 12s infinite; } .crossFade6Imgs figure:nth-child(4) { -moz-animation: crossfade6 36s 18s infinite; -o-animation: crossfade6 36s 18s infinite; -webkit-animation: crossfade6 36s 18s infinite; -ms-animation: crossfade6 36s 18s infinite; animation: crossfade6 36s 18s infinite; } .crossFade6Imgs figure:nth-child(5) { -moz-animation: crossfade6 36s 24s infinite; -o-animation: crossfade6 36s 24s infinite; -webkit-animation: crossfade6 36s 24s infinite; -ms-animation: crossfade6 36s 24s infinite; animation: crossfade6 36s 24s infinite; } .crossFade6Imgs figure:nth-child(6) { -moz-animation: crossfade6 36s 30s infinite; -o-animation: crossfade6 36s 30s infinite; -webkit-animation: crossfade6 36s 30s infinite; -ms-animation: crossfade6 36s 30s infinite; animation: crossfade6 36s 30s infinite; } /*--Cross Fade Animation for 7 Images--*/ .crossFade7Imgs figure:nth-child(1) { position: relative; -moz-animation: crossfade7 35s 0s infinite; -o-animation: crossfade7 35s 0s infinite; -webkit-animation: crossfade7 35s 0s infinite; -ms-animation: crossfade7 35s 0s infinite; animation: crossfade7 35s 0s infinite; } .crossFade7Imgs figure:nth-child(2) { -moz-animation: crossfade7 35s 5s infinite; -o-animation: crossfade7 35s 5s infinite; -webkit-animation: crossfade7 35s 5s infinite; -ms-animation: crossfade7 35s 5s infinite; animation: crossfade7 35s 5s infinite; } .crossFade7Imgs figure:nth-child(3) { -moz-animation: crossfade7 35s 10s infinite; -o-animation: crossfade7 35s 10s infinite; -webkit-animation: crossfade7 35s 10s infinite; -ms-animation: crossfade7 35s 10s infinite; animation: crossfade7 35s 10s infinite; } .crossFade7Imgs figure:nth-child(4) { -moz-animation: crossfade7 35s 15s infinite; -o-animation: crossfade7 35s 15s infinite; -webkit-animation: crossfade7 35s 15s infinite; -ms-animation: crossfade7 35s 15s infinite; animation: crossfade7 35s 15s infinite; } .crossFade7Imgs figure:nth-child(5) { -moz-animation: crossfade7 35s 20s infinite; -o-animation: crossfade7 35s 20s infinite; -webkit-animation: crossfade7 35s 20s infinite; -ms-animation: crossfade7 35s 20s infinite; animation: crossfade7 35s 20s infinite; } .crossFade7Imgs figure:nth-child(6) { -moz-animation: crossfade7 35s 25s infinite; -o-animation: crossfade7 35s 25s infinite; -webkit-animation: crossfade7 35s 25s infinite; -ms-animation: crossfade7 35s 25s infinite; animation: crossfade7 35s 25s infinite; } .crossFade7Imgs figure:nth-child(7) { -moz-animation: crossfade7 35s 30s infinite; -o-animation: crossfade7 35s 30s infinite; -webkit-animation: crossfade7 35s 30s infinite; -ms-animation: crossfade7 35s 30s infinite; animation: crossfade7 35s 30s infinite; } /*--Cross Fade Animation for 8 Images--*/ .crossFade8Imgs figure:nth-child(1) { position: relative; -ms-opacity: 1; opacity: 1; -moz-animation: crossfade8 40s 0s infinite; -o-animation: crossfade8 40s 0s infinite; -webkit-animation: crossfade8 40s 0s infinite; -ms-animation: crossfade8 40s 0s infinite; animation: crossfade8 40s 0s infinite; } .crossFade8Imgs figure:nth-child(2) { -moz-animation: crossfade8 40s 5s infinite; -o-animation: crossfade8 40s 5s infinite; -webkit-animation: crossfade8 40s 5s infinite; -ms-animation: crossfade8 40s 5s infinite; animation: crossfade8 40s 5s infinite; } .crossFade8Imgs figure:nth-child(3) { -moz-animation: crossfade8 40s 10s infinite; -o-animation: crossfade8 40s 10s infinite; -webkit-animation: crossfade8 40s 10s infinite; -ms-animation: crossfade8 40s 10s infinite; animation: crossfade8 40s 10s infinite; } .crossFade8Imgs figure:nth-child(4) { -moz-animation: crossfade8 40s 15s infinite; -o-animation: crossfade8 40s 15s infinite; -webkit-animation: crossfade8 40s 15s infinite; -ms-animation: crossfade8 40s 15s infinite; animation: crossfade8 40s 15s infinite; } .crossFade8Imgs figure:nth-child(5) { -moz-animation: crossfade8 40s 20s infinite; -o-animation: crossfade8 40s 20s infinite; -webkit-animation: crossfade8 40s 20s infinite; -ms-animation: crossfade8 40s 20s infinite; animation: crossfade8 40s 20s infinite; } .crossFade8Imgs figure:nth-child(6) { -moz-animation: crossfade8 40s 25s infinite; -o-animation: crossfade8 40s 25s infinite; -webkit-animation: crossfade8 40s 25s infinite; -ms-animation: crossfade8 40s 25s infinite; animation: crossfade8 40s 25s infinite; } .crossFade8Imgs figure:nth-child(7) { -moz-animation: crossfade8 40s 30s infinite; -o-animation: crossfade8 40s 30s infinite; -webkit-animation: crossfade8 40s 30s infinite; -ms-animation: crossfade8 40s 30s infinite; animation: crossfade8 40s 30s infinite; } .crossFade8Imgs figure:nth-child(8) { -moz-animation: crossfade8 40s 35s infinite; -o-animation: crossfade8 40s 35s infinite; -webkit-animation: crossfade8 40s 35s infinite; -ms-animation: crossfade8 40s 35s infinite; animation: crossfade8 40s 35s infinite; } @keyframes crossfade2 { 0% { opacity: 0; } 10% { opacity: 1; } 46% { opacity: 1; } 52% { opacity: 0; } } @keyframes crossfade3 { 0% { opacity: 0; } 6% { opacity: 1; } 30% { opacity: 1; } 34% { opacity: 0; } } @keyframes crossfade4 { 0% { opacity: 0; } 6% { opacity: 1; } 22% { opacity: 1; } 26% { opacity: 0; } } @keyframes crossfade5 { 0% { opacity: 0; } 6% { opacity: 1; } 17% { opacity: 1; } 21% { opacity: 0; } } @keyframes crossfade6 { 0% { opacity: 0; } 5% { opacity: 1; } 14.6% { opacity: 1; } 17.6% { opacity: 0; } } @keyframes crossfade7 { 0% { opacity: 0; } 4% { opacity: 1; } 12.3% { opacity: 1; } 15.3% { opacity: 0; } } @keyframes crossfade8 { 0% { opacity: 0; } 4% { opacity: 1; } 12.3% { opacity: 1; } 15.3% { opacity: 0; } } /*#endregion Cross Fade*/ /*#region - IMAGE SLIDER - */ /*#endregion image slider*/ /*#region - DELAY - */ /* ===== Delay ===== */ .delay0100 { -moz-animation-delay: 100ms; -o-animation-delay: 100ms; -webkit-animation-delay: 100ms; -ms-animation-delay: 100ms; animation-delay: 100ms; } .delay0200 { -moz-animation-delay: 200ms; -o-animation-delay: 200ms; -webkit-animation-delay: 200ms; -ms-animation-delay: 500ms; animation-delay: 200ms; } .delay0300 { -moz-animation-delay: 300ms; -o-animation-delay: 300ms; -webkit-animation-delay: 300ms; -ms-animation-delay: 300ms; animation-delay: 300ms; } .delay0400 { -moz-animation-delay: 400ms; -o-animation-delay: 400ms; -webkit-animation-delay: 400ms; -ms-animation-delay: 400ms; animation-delay: 400ms; } .delay0500 { -moz-animation-delay: 500ms; -o-animation-delay: 500ms; -webkit-animation-delay: 500ms; -ms-animation-delay: 500ms; animation-delay: 500ms; } .delay0600 { -moz-animation-delay: 600ms; -o-animation-delay: 600ms; -webkit-animation-delay: 600ms; -ms-animation-delay: 600ms; animation-delay: 600ms; } .delay0700 { -moz-animation-delay: 700ms; -o-animation-delay: 700ms; -webkit-animation-delay: 700ms; -ms-animation-delay: 700ms; animation-delay: 700ms; } .delay0800 { -moz-animation-delay: 800ms; -o-animation-delay: 800ms; -webkit-animation-delay: 800ms; -ms-animation-delay: 800ms; animation-delay: 800ms; } .delay0900 { -moz-animation-delay: 900ms; -o-animation-delay: 900ms; -webkit-animation-delay: 900ms; -ms-animation-delay: 900ms; animation-delay: 900ms; } .delay1000 { -moz-animation-delay: 1s; -o-animation-delay: 1s; -webkit-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s; } .delay1500 { -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; -ms-animation-delay: 1.5s; animation-delay: 1.5s; } .delay2000 { -moz-animation-delay: 2s; -o-animation-delay: 2s; -webkit-animation-delay: 2s; -ms-animation-delay: 2s; animation-delay: 2s; } .delay2500 { -moz-animation-delay: 2.5s; -o-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; -ms-animation-delay: 2.5s; animation-delay: 2.5s; } .delay3000 { -moz-animation-delay: 3s; -o-animation-delay: 3s; -webkit-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } /*#endregion - Delay -*/ /*#region - DURATION - */ /* ===== Duration ===== */ .duratn0100 { -moz-animation-duration: 100ms; -o-animation-duration: 100ms; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; } .duratn0200 { -moz-animation-duration: 200ms; -o-animation-duration: 200ms; -webkit-animation-duration: 200ms; -ms-animation-duration: 200ms; animation-duration: 200ms; } .duratn0300 { -moz-animation-duration: 300ms; -o-animation-duration: 300ms; -webkit-animation-duration: 300ms; -ms-animation-duration: 300ms; animation-duration: 300ms; } .duratn0400 { -moz-animation-duration: 400ms; -o-animation-duration: 400ms; -webkit-animation-duration: 400ms; -ms-animation-duration: 400ms; animation-duration: 400ms; } .duratn0500 { -moz-animation-duration: 500ms; -o-animation-duration: 500ms; -webkit-animation-duration: 500ms; -ms-animation-duration: 500ms; animation-duration: 500ms; } .duratn0600 { -moz-animation-duration: 600ms; -o-animation-duration: 600ms; -webkit-animation-duration: 600ms; -ms-animation-duration: 600ms; animation-duration: 600ms; } .duratn0700 { -moz-animation-duration: 700ms; -o-animation-duration: 700ms; -webkit-animation-duration: 700ms; -ms-animation-duration: 700ms; animation-duration: 700ms; } .duratn0800 { -moz-animation-duration: 800ms; -o-animation-duration: 800ms; -webkit-animation-duration: 800ms; -ms-animation-duration: 800ms; animation-duration: 800ms; } .duratn0900 { -moz-animation-duration: 900ms; -o-animation-duration: 900ms; -webkit-animation-duration: 900ms; -ms-animation-duration: 900ms; animation-duration: 900ms; } .duratn1000 { -moz-animation-duration: 1s; -o-animation-duration: 1s; -webkit-animation-duration: 1s; -ms-animation-duration: 1s; animation-duration: 1s; } .duratn1500 { -moz-animation-duration: 1.5s; -o-animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -ms-animation-duration: 1.5s; animation-duration: 1.5s; } .duratn2000 { -moz-animation-duration: 2s; -o-animation-duration: 2s; -webkit-animation-duration: 2s; -ms-animation-duration: 2s; animation-duration: 2s; } .duratn3000 { -moz-animation-duration: 3s; -o-animation-duration: 3s; -webkit-animation-duration: 3s; -ms-animation-duration: 3s; animation-duration: 3s; } .duratn4000 { -moz-animation-duration: 4s; -o-animation-duration: 4s; -webkit-animation-duration: 4s; -ms-animation-duration: 4s; animation-duration: 4s; } /*#endregion - Duration - */ /*#region - Transition - */ .trans0300 { -webkit-transition:all 300ms ease-in-out; -moz-transition:all 300ms ease-in-out; -ms-transition:all 300ms ease-in-out; -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; } .trans0500 { -webkit-transition:all 500ms ease-in-out; -moz-transition:all 500ms ease-in-out; -ms-transition:all 500ms ease-in-out; -o-transition:all 500ms ease-in-out; transition:all 500ms ease-in-out; } .trans0700 { -webkit-transition:all 700ms ease-in-out; -moz-transition:all 700ms ease-in-out; -ms-transition:all 700ms ease-in-out; -o-transition:all 700ms ease-in-out; transition:all 700ms ease-in-out; } .trans1000 { -webkit-transition:all 1000ms ease-in-out; -moz-transition:all 1000ms ease-in-out; -ms-transition:all 1000ms ease-in-out; -o-transition:all 1000ms ease-in-out; transition:all 1000ms ease-in-out; } .trans1300 { -webkit-transition:all 1300ms ease-in-out; -moz-transition:all 1300ms ease-in-out; -ms-transition:all 1300ms ease-in-out; -o-transition:all 1300ms ease-in-out; transition:all 1300ms ease-in-out; } .trans1500 { -webkit-transition:all 1500ms ease-in-out; -moz-transition:all 1500ms ease-in-out; -ms-transition:all 1500ms ease-in-out; -o-transition:all 1500ms ease-in-out; transition:all 1500ms ease-in-out; } .trans1700 { -webkit-transition:all 1700ms ease-in-out; -moz-transition:all 1700ms ease-in-out; -ms-transition:all 1700ms ease-in-out; -o-transition:all 1700ms ease-in-out; transition:all 1700ms ease-in-out; } .trans2000 { -webkit-transition:all 2s ease; -moz-transition:all 2s ease; -ms-transition:all 2s ease; -o-transition:all 2s ease; transition:all 2000ms ease-in-out; } .trans2300 { -webkit-transition:all 2300ms ease-in-out; -moz-transition:all 2300ms ease-in-out; -ms-transition:all 2300ms ease-in-out; -o-transition:all 2300ms ease-in-out; transition:all 2300ms ease-in-out; } .trans2500 { -webkit-transition:all 2500ms ease-in-out; -moz-transition:all 2500ms ease-in-out; -ms-transition:all 2500ms ease-in-out; -o-transition:all 2500ms ease-in-out; transition:all 2500ms ease-in-out; } .trans2700 { -webkit-transition:all 2700ms ease-in-out; -moz-transition:all 2700ms ease-in-out; -ms-transition:all 2700ms ease-in-out; -o-transition:all 2700ms ease-in-out; transition:all 2700ms ease-in-out; } .trans3000 { -webkit-transition:all 3000ms ease-in-out; -moz-transition:all 3000ms ease-in-out; -ms-transition:all 3000ms ease-in-out; -o-transition:all 3000ms ease-in-out; transition:all 3000ms ease-in-out; } /*#endregion */ /*#endregion Animation Effects*/ /*#region - HOVER - */ /* ========== Hover Effects ========== */ /*#region - OPACITY - */ /* ========== Opactiy ========== */ .hvrOpcty1:hover { -ms-opacity: 1; opacity: 1; } .hvrOpcty0:hover { -ms-opacity: 0; opacity: 0; } /*#endregion */ /*#region - CARD FLIP - */ /* ==================== Card Flip ==================== */ .hvrCardFlip > .front { position: relative; top: 0; -moz-transform: perspective(800px) rotateY(0); -ms-transform: perspective(800px) rotateY(0); -o-transform: perspective(800px) rotateY(0); -webkit-transform: perspective(800px) rotateY(0); transform: perspective(800px) rotateY(0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: transform .5s linear 0; -moz-transition: transform .5s linear 0; -ms-transition: transform .5s linear 0; -o-transition: transform .5s linear 0; transition: transform .5s linear 0; } .hvrCardFlip > .back { position: absolute; top: 0; -moz-transform: perspective(800px) rotateY(180deg); -ms-transform: perspective(800px) rotateY(180deg); -o-transform: perspective(800px) rotateY(180deg); -webkit-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: transform .5s linear 0; -moz-transition: transform .5s linear 0; -ms-transition: transform .5s linear 0; -o-transition: transform .5s linear 0; transition: transform .5s linear 0; } .hvrCardFlip:hover .front { -moz-transform: perspective(800px) rotateY(-180deg); -ms-transform: perspective(800px) rotateY(-180deg); -o-transform: perspective(800px) rotateY(-180deg); -webkit-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); cursor: pointer; } .hvrCardFlip:hover .back { -moz-transform: perspective(800px) rotateY(0); -ms-transform: perspective(800px) rotateY(0); -o-transform: perspective(800px) rotateY(0); -webkit-transform: perspective(800px) rotateY(0); transform: perspective(800px) rotateY(0); cursor: pointer; } /*#region - Card Caption - */ /*#endregion Card Caption - */ /*#region - CARD EXPAND - */ /*.hvrExpndrStatic { display: block; width: 100%; position: relative; background: #777; margin: .2em 0; } div.hvrExpndrStatic :first-child { color: burlywood; } .hvrExpndrDynamic { display: block; width: 100%; height: 0; overflow: hidden; position: relative; background: #fff; padding: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all 500ms ease; transition: all .3s ease; } .hvrExpndrStatic:hover .hvrExpndrDynamic:hover { height: auto; xmin-height: 150px; padding: 2em 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .rowHvrOpen { width: 100%; height: auto; max-height: 2.35em; display: block; background: coral; border: 1px solid red; transition: all 600ms; } .rowHvrOpen:hover { width: 100%; height: auto; max-height: 1000px; } #RowClckOpen { width: 100%; height: auto; max-height: 2.35em; display: block; background: coral; border: 1px solid red; transition: all 600ms; } #RowClckOpen:target { max-height: 1000px; }*/ /*.accordion { xxwidth: 100%; display: block; position: relative; top: 0; bottom:0; margin: 0 auto; padding: 0; } .accordion .static { height: auto; background: red; } .accordion .dynamic { height: auto; max-height: 0px; visibility: hidden; background: blue; } .accordion .dynamic:target { max-height: 1000px; visibility: visible; position: relative; top: 0; bottom:0; } .accordion .static:hover .dynamic:hover { visibility: visible; max-height: 1000px; background: none; }*/ /*div:nth-child(n+3):hover .rowHvrXpndr{ max-height: 1000px; } */ .hvrXpndr { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; cursor: pointer; background: coral; border-top: 1px solid #ddd; border-bottom: 1px solid #aaa; margin: 0; padding: 0; } .hvrXpndr > :first-child { display: block; position: relative; cursor: pointer; width: 100%; background: #ccc; margin: 0; padding: .9em 1.5em; } .hvrXpndr > :first-child:before { content: " \25BC "; color: green; -ms-text-shadow: 4px 4px 4px #ccc; text-shadow: 4px 4px 4px #ccc; text-align: left; } .hvrXpndr:hover > :first-child:before { content: " \25B2 "; color: red; -ms-text-shadow: 4px 4px 4px #ccc; text-shadow: 4px 4px 4px #ccc; text-align: right; } .hvrXpndr > :nth-child(1n+2), .hvrXpndr> :nth-child(1n+2) { display: block; position: relative; width: 100%; height: 100%; max-height: 0; overflow: hidden; margin: 0; padding-top: 0; padding-bottom: 0; color: blue; -webkit-transition: all .05s linear, max-height .1s ease; -moz-transition: all .05s linear, max-height .1s ease; -ms-transition: all .05s linear, max-height .1s ease; -o-transition: all .05s linear, max-height .1s ease; transition: all .05s linear, max-height .1s ease; } .hvrXpndr:hover > :first-child, .hvrXpndr:focus > :first-child { -webkit-box-shadow: 0px 3px 15px #666; -ms-box-shadow: 0px 3px 15px #666; box-shadow: 0px 3px 15px #666; } .hvrXpndr:focus > :nth-child(1n+2), .hvrXpndr:hover > :nth-child(1n+2), .hvrXpndr > :nth-child(1n+2):focus { max-height: 1000px; padding-top: .7em; padding-bottom: .7em; -webkit-transition: all .05s linear, max-height .85s ease-in-out; -moz-transition: all .05s linear, max-height .85s ease-in-out; -ms-transition: all .05s linear, max-height .85s ease-in-out; -o-transition: all .05s linear, max-height .85s ease-in-out; transition: all .05s linear, max-height .85s ease-in-out; } /*#endregion */ /*#endregion Card Flip*/ /*#region - LIFT - */ /* ========== Lift ========== */ div.wrp ~ .hvrShdwLift { padding-top: 30px; padding-bottom: 130px; } .hvrShdwLift:hover { -moz-transform: scale(1.10); -ms-transform: scale(1.10); -o-transform: scale(1.10); -webkit-transform: scale(1.10); transform: scale(1.10); z-index: 900; -webkit-box-shadow: 20px 30px 30px -3px rgba(222, 222, 222, 015); -ms-box-shadow: 20px 30px 30px -3px rgba(222, 222, 222, 015); box-shadow: 20px 30px 30px -3px rgba(222, 222, 222, 015); -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } /*#endregion hover Lift*/ /*#region - ROTATE - */ /* ==================== Rotate ==================== */ .hvrRotate005:hover { -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); z-index: 900; } .hvrRotate010:hover { -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); z-index: 900; } .hvrRotate015:hover { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); z-index: 900; } .hvrRotate020:hover { -moz-transform: rotate(20deg) !important; -ms-transform: rotate(20deg) !important; -o-transform: rotate(20deg) !important; -webkit-transform: rotate(20deg) !important; transform: rotate(20deg) !important; z-index: 900; } .hvrRotate030:hover { -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); z-index: 900; } .hvrRotate035:hover { -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg); z-index: 900; } .hvrRotate040:hover { -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); -webkit-transform: rotate(40deg); transform: rotate(40deg); z-index: 900; } .hvrRotate045:hover { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 900; } .hvrRotate050:hover { -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); -webkit-transform: rotate(50deg); transform: rotate(50deg); z-index: 900; } .hvrRotate060:hover { -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); z-index: 900; } .hvrRotate070:hover { -moz-transform: rotate(70deg); -ms-transform: rotate(70deg); -o-transform: rotate(70deg); -webkit-transform: rotate(70deg); transform: rotate(70deg); z-index: 900; } .hvrRotate080:hover { -moz-transform: rotate(80deg); -ms-transform: rotate(80deg); -o-transform: rotate(80deg); -webkit-transform: rotate(80deg); transform: rotate(80deg); z-index: 900; } .hvrRotate090:hover { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); z-index: 900; } .hvrRotate100:hover { -moz-transform: rotate(100deg); -ms-transform: rotate(100deg); -o-transform: rotate(100deg); -webkit-transform: rotate(100deg); transform: rotate(100deg); z-index: 900; } .hvrRotate180:hover { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); z-index: 900; } .hvrRotate270:hover { -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); z-index: 900; } .hvrRotate360:hover { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); z-index: 900; } /*#endregion hover rotate*/ /*#region - SCALE - */ /* ========== Scale ========== */ .hvrScale050:hover { -moz-transform: scale(0.50); -ms-transform: scale(0.50); -o-transform: scale(0.50); -webkit-transform: scale(0.50); transform: scale(0.50); } .hvrScale060:hover { -moz-transform: scale(0.60); -ms-transform: scale(0.60); -o-transform: scale(0.60); -webkit-transform: scale(0.60); transform: scale(0.60); } .hvrScale070:hover { -moz-transform: scale(0.70); -ms-transform: scale(0.70); -o-transform: scale(0.70); -webkit-transform: scale(0.70); transform: scale(0.70); } .hvrScale080:hover { -moz-transform: scale(0.80); -ms-transform: scale(0.80); -o-transform: scale(0.80); -webkit-transform: scale(0.80); transform: scale(0.80); } .hvrScale090:hover { -moz-transform: scale(0.90); -ms-transform: scale(0.90); -o-transform: scale(0.90); -webkit-transform: scale(0.90); transform: scale(0.90); } .hvrScale095:hover { -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); } .hvrScale105:hover { -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); z-index: 900; } .hvrScale110:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); z-index: 900; } .hvrScale120:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); z-index: 900; } .hvrScale130:hover { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); z-index: 900; } .hvrScale140:hover { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4); -o-transform: scale(1.4); transform: scale(1.4); z-index: 900; } .hvrScale150:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); z-index: 900; } .hvrScale160:hover { -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); z-index: 900; } .hvrScale170:hover { -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -ms-transform: scale(1.7); -o-transform: scale(1.7); transform: scale(1.7); z-index: 900; } .hvrScale180:hover { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -o-transform: scale(1.8); transform: scale(1.8); z-index: 900; } .hvrScale190:hover { -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -ms-transform: scale(1.9); -o-transform: scale(1.9); transform: scale(1.9); z-index: 900; } .hvrScale200:hover { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); z-index: 900; } /*#endregion hover scale*/ /*#region - SHADOW - */ /* ========= Shadow ========= */ .hvrShdw0:hover { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } .hvrShdw2:hover { -moz-box-shadow: 2px 2px 2px 2px #ccc; -webkit-box-shadow: 2px 2px 2px 2px #ccc; -ms-box-shadow: 2px 2px 2px 2px #ccc; box-shadow: 2px 2px 2px 2px #ccc; } .hvrShdw4:hover { -moz-box-shadow: 2px 2px 4px 2px #727272; -webkit-box-shadow: 2px 2px 4px 2px #727272; -ms-box-shadow: 2px 2px 4px 2px #727272; box-shadow: 2px 2px 4px 2px #727272; } .hvrShdw6:hover { -webkit-box-shadow: 2px 2px 6px 2px #595D61; -ms-box-shadow: 2px 2px 6px 2px #595D61; -moz-box-shadow: 2px 2px 6px 2px #595D61; box-shadow: 2px 2px 6px 2px #595D61; } .hvrShdw8:hover { -moz-box-shadow: 3px 3px 8px 3px #333; -webkit-box-shadow: 3px 3px 8px 3px #333; -ms-box-shadow: 3px 3px 8px 3px #333; box-shadow: 3px 3px 8px 3px #333; } .hvrShdwIn4:hover { -moz-box-shadow: Inset 2px 2px 4px 2px #333; -webkit-box-shadow: Inset 2px 2px 4px 2px #333; -ms-box-shadow: Inset 2px 2px 4px 2px #333; box-shadow: Inset 2px 2px 4px 2px #333; } /*#endregion hover shadow*/ /*#endregion Hover Effects*/ /*#region - COLOR PICKER - */ #ColorPicker { width: 300px; height: 300px; margin: 120px 0 0 -55px; padding: 0; cursor: crosshair; } #ColorSlider { width: 50px; height: 300px; margin: -120px 0 0 70px; padding: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); cursor: crosshair; } /*#endregion color picker */ /*! qik_mediaquery.css | v171121.1126 Copyright QikCss 2010 - 2018 | MIT License | http://QikCss.com */ /* qik_mediaquery.css is a preset css transformation based on view port width. */ /* Making changes to qik_mediaquery.css is not recommended. */ /* Use qik_theme.css to extend/override/style. */ /*=======================================================================================MEDIA QUERY */ /*#region - MEDIA QUERY - */ /*=================================================== Media Query */ /* Sets the DOM response to media width sizes. DO NOT override here in qik_base.css Should be overriden in qik_style.css or preferably qik_theme.css */ /*#region - Large 1681px - and up -*/ /*=================================================== Large */ @media screen and (min-width: 1681px) { #NavMobile, .navMbl, .lrgHide, .mblTblDskLrgHide, .smlShow, .mblShow, .tblShow, .dskShow, .tblDskLrgHide, .dskLrgHide { display: none !important; } .lrgShow, .mblTblDskLrgShow, .tblDskLrgShow, .dskLrgShow { display: block; } body { font-size: 1.1em !important; } header > h1, header > h2 { font-size: .9em; } p { font-size: 1.15em !important; } .txtRespnsv { font-size: 2.4em; } .mat1em { border-width: 1.5em; } .mat2em { border-width: 3em; } .mat3em { border-width: 4em; } .mat4em { border-width: 5em; } .mat5em { border-width: 6em; } .mat6em { border-width: 7em; } } /*#endregion Large*/ /*#region - Desktop 1051px - 1680px - */ /*=================================================== Desktop */ @media only screen and ( min-width: 1055px) and (max-width: 1680px) { #NavMobile, .navMbl, .dskHide, .tblDskLrgHide, .dskLrgHide, .smlShow, .mblShow, .tblShow, .lrgShow { display: none !important; } .smlMblTblDskShow, #NavMobile.smlMblTblDskShow, .navMbl.smlMblTblDskShow { display: block !important; } } @media screen and (max-width: 1680px) { .smlMblTblDskHide, .mblTblDskHide, .tblDskHide { display: none !important; } .smlMblTblDskShow, .mblTblDskShow, .tblDskShow { display: block; } .txtRespnsv { font-size: 1.7em; } /*#region - Desktop Width - */ .dskW100 { width: 99.95%; } .dskW99 { width: 98.95%; } .dskW98 { width: 97.95%; } .dskW97 { width: 96.95%; } .dskW96 { width: 95.95%; } .dskW95 { width: 94.95%; } .dskW94 { width: 93.95%; } .dskW93 { width: 92.95%; } .dskW92 { width: 91.95%; } .dskW91 { width: 90.95%; } .dskW90 { width: 89.95%; } .dskW89 { width: 88.95%; } .dskW88 { width: 87.95%; } .dskW87 { width: 86.95%; } .dskW86 { width: 85.95%; } .dskW85 { width: 84.95%; } .dskW84 { width: 83.95%; } .dskW83 { width: 82.95%; } .dskW82 { width: 81.95%; } .dskW81 { width: 80.95%; } .dskW80 { width: 79.95%; } .dskW75 { width: 74.95%; } .dskW70 { width: 69.95%; } .dskW66 { width: 66.633%; } .dskW65 { width: 64.95%; } .dskW60 { width: 59.95%; } .dskW55 { width: 54.95%; } .dskW50 { width: 49.95%; } .dskW45 { width: 44.95%; } .dskW40 { width: 39.95%; } .dskW35 { width: 34.95%; } .dskW33 { width: 33.3168%; } .dskW30 { width: 29.95%; } .dskW25 { width: 24.98%; } .dskW20 { width: 19.975%; } .dskW16 { width: 16.66%; } .dskW15 { width: 14.95%; } .dskW10 { width: 9.95%; } .dskW5 { width: 4.95%; } /*#endregion Desktop Width */ } /*#endregion Desktop*/ /*#region - Tablet 1050px - 551px - */ /*=================================================== Tablet */ @media all and (min-width: 551px ) and (max-width: 1056px) { #NavMobile, .navMbl, .tblHide, .tblDskHide, .tblDskLrgHide, .smlShow, .mblShow, .dskShow, .lrgShow { display: none !important; } .smlMblTblShow, .smlMblTblDskShow, #NavMobile.smlMblTblShow, #NavMobile.smlMblTblDskShow, .navMbl.smlMblTblShow, .navMbl.smlMblTblDskShow { display: block; } } @media screen and (max-width: 1050px) { .smlMblTblHide, .mblTblHide { display: none; } #NavMobile.smlMblTblShow, #NavMobile.mblTblShow { display: block; } body { font-size: .95em !important; } .txtRespnsv { font-size: .9em; } .mat1em { border-width: .8em; } .mat2em { border-width: 1.5em; } .mat3em { border-width: 2.2em; } .mat4em { border-width: 3em; } .mat5em { border-width: 3.1em; } .mat6em { border-width: 3.2em; } /*#region - Tablet Width - */ .tblW100 { width: 99.95%; } .tblW99 { width: 98.95%; } .tblW98 { width: 97.95%; } .tblW97 { width: 96.95%; } .tblW96 { width: 95.95%; } .tblW95 { width: 94.95%; } .tblW94 { width: 93.95%; } .tblW93 { width: 92.95%; } .tblW92 { width: 91.95%; } .tblW91 { width: 90.95%; } .tblW90 { width: 89.95%; } .tblW89 { width: 88.95%; } .tblW88 { width: 87.95%; } .tblW87 { width: 86.95%; } .tblW86 { width: 85.95%; } .tblW85 { width: 84.95%; } .tblW84 { width: 83.95%; } .tblW83 { width: 82.95%; } .tblW82 { width: 81.95%; } .tblW81 { width: 80.95%; } .tblW80 { width: 79.95%; } .tblW75 { width: 74.95%; } .tblW70 { width: 69.95%; } .tblW66 { width: 66.633%; } .tblW65 { width: 64.95%; } .tblW60 { width: 59.95%; } .tblW55 { width: 54.95%; } .tblW50 { width: 49.95%; } .tblW45 { width: 44.95%; } .tblW40 { width: 39.95%; } .tblW35 { width: 34.95%; } .tblW33 { width: 33.3168%; } .tblW30 { width: 29.95%; } .tblW25 { width: 24.98%; } .tblW20 { width: 19.975%; } .tblW16 { width: 16.66%; } .tblW15 { width: 14.95%; } .tblW10 { width: 9.95%; } .tblW5 { width: 4.95%; } /*#endregion Tablet Width */ } /*#endregion Tablet */ /*#region - Mobile 201px - 550px - */ /*=================================================== Mobile */ @media screen and ( min-width: 241px ) and ( max-width: 550px ) { #NavMain, .mblHide, .smlShow, .tblShow, .dskShow, .lrgShow { display: none !important; } .smlMblShow, .smlMblTblShow, .smlMblTblDskShow, #NavMobile.smlMblShow, #NavMobile.smlMblTblShow, #NavMobile.smlMblTblDskShow, .navMbl.smlMblShow, .navMbl.smlMblTblShow, .navMbl.smlMblTblDskShow { display: block !important; } } @media screen and (max-width: 550px) { .smlMblHide { display: none !important; } .smlMblShow { display: block; } body { font-size: .93em !important; } p { font-size: .98em !important; } .txtRespnsv { font-size: .65rem; } .box { width: 93%; } .pnl { width: 93%; } .mat1em { border-width: .6em; } .mat2em { border-width: .75em; } .mat3em { border-width: 1.03em; } .mat4em { border-width: 1.5em; } .mat5em { border-width: 1.5em; } .mat6em { border-width: 1.5em; } /*#region - Mobile Width - */ .mblW100 { width: 99.95%; } .mblW99 { width: 98.95%; } .mblW98 { width: 97.95%; } .mblW97 { width: 96.95%; } .mblW96 { width: 95.95%; } .mblW95 { width: 94.95%; } .mblW94 { width: 93.95%; } .mblW93 { width: 92.95%; } .mblW92 { width: 91.95%; } .mblW91 { width: 90.95%; } .mblW90 { width: 89.95%; } .mblW89 { width: 88.95%; } .mblW88 { width: 87.95%; } .mblW87 { width: 86.95%; } .mblW86 { width: 85.95%; } .mblW85 { width: 84.95%; } .mblW84 { width: 83.95%; } .mblW83 { width: 82.95%; } .mblW82 { width: 81.95%; } .mblW81 { width: 80.95%; } .mblW80 { width: 79.95%; } .mblW75 { width: 74.95%; } .mblW70 { width: 69.95%; } .mblW66 { width: 66.633%; } .mblW65 { width: 64.95%; } .mblW60 { width: 59.95%; } .mblW55 { width: 54.95%; } .mblW50 { width: 49.95%; } .mblW45 { width: 44.95%; } .mblW40 { width: 39.95%; } .mblW35 { width: 34.95%; } .mblW33 { width: 33.3168%; } .mblW30 { width: 29.95%; } .mblW25 { width: 24.98%; } .mblW20 { width: 19.975%; } .mblW16 { width: 16.66%; } .mblW15 { width: 14.95%; } .mblW10 { width: 9.95%; } .mblW5 { width: 4.95%; } /*#endregion Mobile Width */ } /*#endregion Mobile */ /*#region - Small 1px - 200px - */ /*=================================================== Small */ @media screen and (max-width: 260px) { #NavMain, .smlHide, .mblShow, .tblShow, .dskShow, .lrgShow { display: none !important; } .smlShow, .smlMblShow, .smlMblTblShow, .smlMblTblDskShow, #NavMobile.smlShow, #NavMobile.smlMblShow, #NavMobile.smlMblTblShow, #NavMobile.smlMblTblDskShow, .navMbl.smlShow, .navMbl.smlMblShow, .navMbl.smlMblTblShow, .navMbl.smlMblTblDskShow { display: block !important; } body { font-size: .8em !important; } header > h1, header > h2 { font-size: .7em; } h1, h2, h3, h4, h5, h6, .h7, .h8, .h9 { font-size: .6em; } nav ul li a { font-size: .8em; } .txtRespnsv { font-size: .45em !important; } /*#region Small Width */ .smlW100 { width: 99.95%; } .smlW99 { width: 98.95%; } .smlW98 { width: 97.95%; } .smlW97 { width: 96.95%; } .smlW96 { width: 95.95%; } .smlW95 { width: 94.95%; } .smlW94 { width: 93.95%; } .smlW93 { width: 92.95%; } .smlW92 { width: 91.95%; } .smlW91 { width: 90.95%; } .smlW90 { width: 89.95%; } .smlW89 { width: 88.95%; } .smlW88 { width: 87.95%; } .smlW87 { width: 86.95%; } .smlW86 { width: 85.95%; } .smlW85 { width: 84.95%; } .smlW84 { width: 83.95%; } .smlW83 { width: 82.95%; } .smlW82 { width: 81.95%; } .smlW81 { width: 80.95%; } .smlW80 { width: 79.95%; } .smlW75 { width: 74.95%; } .smlW70 { width: 69.95%; } .smlW66 { width: 66.633%; } .smlW65 { width: 64.95%; } .smlW60 { width: 59.95%; } .smlW55 { width: 54.95%; } .smlW50 { width: 49.95%; } .smlW45 { width: 44.95%; } .smlW40 { width: 39.95%; } .smlW35 { width: 34.95%; } .smlW33 { width: 33.3168%; } .smlW30 { width: 29.95%; } .smlW25 { width: 24.98%; } .smlW20 { width: 19.975%; } .smlW16 { width: 16.66%; } .smlW15 { width: 14.95%; } .smlW10 { width: 9.95%; } .smlW5 { width: 4.95%; } /*#endregion */ } /*#endregion Small*/ /*#endregion Media Query*/ /*#region - MEDIA_SIZE_INFO_BAR - */ /*===================================================== - MEDIA INFORMATION BAR - */ #MediaMinder { display: block; visibility: visible; width: 100%; height: 30px; position: fixed; bottom: 0; line-height: 1.6em; text-align: center; font-family: Arial; font-weight: normal; font-size: 16px; margin: 1em 0; padding: .3em; outline: 1px solid black; z-index: 1000; } @media screen and (min-width: 2048px) { #MediaMinder { background-color: black; color: #fff; } #MediaMinder::after { content: "2048px jumbotron and larger"; } } @media screen and (max-width: 2047px) { #MediaMinder { background-color: #808080; color: black; } #MediaMinder::after { content: "1920px very large screens"; } } @media screen and (max-width: 1919px) { #MediaMinder { background-color: #999; } #MediaMinder::after { content: "1600px large desktop"; } } @media screen and (max-width: 1599px) { #MediaMinder { background-color: #c4d2e0; } #MediaMinder::after { content: "1536px - desktop -"; } } @media screen and (max-width: 1535px) { #MediaMinder { background-color: #e0e3e6; } #MediaMinder::after { content: "1440px - desktop -"; } } @media screen and (max-width: 1439px) { #MediaMinder { background-color: #0e3a76; color: #fff; } #MediaMinder::after { content: "1280px - desktop -"; } } @media screen and (max-width: 1279px) { #MediaMinder { background-color: #1637a1; } #MediaMinder::after { content: "1200px - desktop -"; } } @media screen and (max-width: 1199px) { #MediaMinder { background-color: #102ee4; } #MediaMinder::after { content: "1080px - desktop -"; } } @media screen and (max-width: 1079px) { #MediaMinder { background-color: #0063ff; } #MediaMinder::after { content: "1024px - desktop -"; } } @media screen and (max-width: 1023px) { #MediaMinder { background-color: #3bb6f5; color: black; } #MediaMinder::after { content: "960px - medium desktop -"; } } @media screen and (max-width: 959px) { #MediaMinder { background-color: #8ed4f8; } #MediaMinder::after { content: "800px - small desktop -"; } } @media screen and (max-width: 799px) { #MediaMinder { background-color: #00ff90; } #MediaMinder::after { content: "768px - small laptop -"; } } @media screen and (max-width: 767px) { #MediaMinder { background-color: #00ff21; } #MediaMinder::after { content: "720px - large tablet portrait - phablet landscape -"; } } @media screen and (max-width: 719px) { #MediaMinder { background-color: #4cff00; } #MediaMinder::after { content: "640px - medium tablet portrait - large phone landscape"; } } @media screen and (max-width: 639px) { #MediaMinder { background-color: #4cff00; } #MediaMinder::after { content: "600px - tablet, phablet portrait - typical phone landscape"; } } @media screen and (max-width: 599px) { #MediaMinder { background-color: #b6ff00; } #MediaMinder::after { content: "540px - large phone portrait - small phone landscape"; } } @media screen and (max-width: 539px) { #MediaMinder { background-color: #ffd800; } #MediaMinder::after { content: "480px - medium phone portrait "; } } @media screen and (max-width: 479px) { #MediaMinder { background-color: #ff6a00; } #MediaMinder::after { content: "320px - typical phone portrait"; } } @media screen and (max-width: 319px) { #MediaMinder { background-color: #ff0000; } #MediaMinder::after { content: "240px - very small phone portrait"; } } @media screen and (max-width: 239px) { #MediaMinder { background-color: #ff0000; } #MediaMinder::after { content: "under 239px - realy small device"; } } /*#endregion - Media Information Bar - */