/* ------------------------------------------------------------------ * legacy.css — Bootstrap + ธีม Porto เฉพาะส่วนที่เว็บนี้ใช้จริง * ------------------------------------------------------------------ * สร้างอัตโนมัติ : สแกนหน้าเว็บทุกหน้า (ทั้งแบบผู้ใช้ทั่วไปและล็อกอินแอดมิน) * แล้วตัดกฎที่ไม่มีใครเรียกใช้ออก ใช้แทน 4 ไฟล์เดิม * vendor/bootstrap/css/bootstrap.min.css * css/theme.css / css/theme-elements.css * css/skins/skin-corporate-4.css / css/custom.css * * ⚠ ถ้าเพิ่มคลาสใหม่ที่มาจาก Bootstrap หรือธีมเดิม ต้องสร้างไฟล์นี้ใหม่ * วิธีสร้าง : ดู tools/build-legacy-css.md * ------------------------------------------------------------------ */ /* ===== มาจาก vendor/bootstrap/css/bootstrap.min.css ===== */ /*! * Bootstrap v4.1.3 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,h1,h2,h3,h4,h5{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:80%;font-weight:400}.list-unstyled{padding-left:0;list-style:none}.blockquote{margin-bottom:1rem;font-size:1.25rem}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}code{font-size:87.5%;color:#e83e8c;word-break:break-word}a>code{color:inherit}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.col-3,.col-6,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-7,.col-md-8,.col-md-9{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}@media (min-width:768px){.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}.table{width:100%;margin-bottom:1rem;background-color:transparent}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table tbody+tbody{border-top:2px solid #dee2e6}.table .table{background-color:#fff}.table-bordered{border:1px solid #dee2e6}.table-bordered td,.table-bordered th{border:1px solid #dee2e6}.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive>.table-bordered{border:0}.form-control{display:block;width:100%;height:calc(2.25rem + 2px);padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media screen and (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.form-control::-webkit-input-placeholder{color:#6c757d;opacity:1}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control:-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}select.form-control[multiple],select.form-control[size]{height:auto}textarea.form-control{height:auto}.btn{display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media screen and (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:focus,.btn:hover{text-decoration:none}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.btn.disabled,.btn:disabled{opacity:.65}.btn:not(:disabled):not(.disabled){cursor:pointer}a.btn.disabled{pointer-events:none}.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0062cc;border-color:#005cbf}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-info{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-info.focus,.btn-info:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-warning{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#212529;background-color:#e0a800;border-color:#d39e00}.btn-warning.focus,.btn-warning:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle{color:#212529;background-color:#d39e00;border-color:#c69500}.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#c82333;border-color:#bd2130}.btn-danger.focus,.btn-danger:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#bd2130;border-color:#b21f2d}.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-light{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#212529;background-color:#e2e6ea;border-color:#dae0e5}.btn-light.focus,.btn-light:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-light.disabled,.btn-light:disabled{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle{color:#212529;background-color:#dae0e5;border-color:#d3d9df}.btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-primary{color:#007bff;background-color:transparent;background-image:none;border-color:#007bff}.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#007bff;background-color:transparent}.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{transition:opacity .15s linear}@media screen and (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease}@media screen and (prefers-reduced-motion:reduce){.collapsing{transition:none}}.dropdown{position:relative}.dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu.show{display:block}.nav{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.breadcrumb{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.pagination{display:-ms-flexbox;display:flex;padding-left:0;list-style:none;border-radius:.25rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.badge-primary{color:#fff;background-color:#007bff}.badge-primary[href]:focus,.badge-primary[href]:hover{color:#fff;text-decoration:none;background-color:#0062cc}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-success hr{border-top-color:#b1dfbb}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}.progress{display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:not(:disabled):not(.disabled){cursor:pointer}.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover{color:#000;text-decoration:none;opacity:.75}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .arrow::after,.popover .arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.carousel{position:relative}.border{border:1px solid #dee2e6!important}.border-0{border:0!important}.border-white{border-color:#fff!important}.rounded{border-radius:.25rem!important}.clearfix::after{display:block;clear:both;content:""}.d-none{display:none!important}.d-inline{display:inline!important}.d-block{display:block!important}.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.float-left{float:left!important}.float-right{float:right!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.w-100{width:100%!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.mt-1{margin-top:.25rem!important}.mb-1{margin-bottom:.25rem!important}.mt-2{margin-top:.5rem!important}.mb-2{margin-bottom:.5rem!important}.mt-3{margin-top:1rem!important}.mb-3{margin-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.mb-4{margin-bottom:1.5rem!important}.mt-5{margin-top:3rem!important}.p-0{padding:0!important}.py-0{padding-top:0!important}.px-0{padding-right:0!important}.py-0{padding-bottom:0!important}.px-0{padding-left:0!important}.pb-2{padding-bottom:.5rem!important}.pt-4{padding-top:1.5rem!important}.px-4{padding-right:1.5rem!important}.px-4{padding-left:1.5rem!important}.py-5{padding-top:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.mx-auto{margin-right:auto!important}.mx-auto{margin-left:auto!important}.text-justify{text-align:justify!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-uppercase{text-transform:uppercase!important}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:focus,a.text-primary:hover{color:#0062cc!important}.text-danger{color:#dc3545!important}a.text-danger:focus,a.text-danger:hover{color:#bd2130!important}.text-muted{color:#6c757d!important}.visible{visibility:visible!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}blockquote{border:1px solid #adb5bd;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #dee2e6!important}} /* ===== มาจาก css/theme.css ===== */ /* Name: theme.css Written by: Okler Themes - (http://www.okler.net) Theme Version: 7.2.0 */ html { direction: ltr; overflow-x: hidden; -webkit-box-shadow: none !important; box-shadow: none !important; } body a { outline: none !important; } .body { background-color: #FFF; } li { line-height: 24px; } /* Responsive */ @media (max-width: 575px) { body { font-size: 17px; line-height:22px; } } /* Header */ #header { position: relative; z-index: 1030; } #header .header-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: ease height 300ms; transition: ease height 300ms; } @media (max-width: 991px) { #header .header-container:not(.container):not(.container-fluid) .header-nav-main { padding: 0 0.75rem; } } #header .container { position: relative; } @media (max-width: 767px) { #header .container { width: 100%; } } #header .header-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: stretch; align-self: stretch; max-height: 100%; } #header .header-column { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: stretch; align-self: stretch; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #header .header-column .header-row { -webkit-box-pack: inherit; -ms-flex-pack: inherit; justify-content: inherit; } #header .header-logo { margin: 0px; position: relative; z-index: 1; } #header .header-logo img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; top: 0; } #header .header-nav { padding: 16px 0; padding: 1rem 0; min-height: 70px; } #header .header-nav-features { position: relative; padding-left: 20px; margin-left: 10px; } #header .header-nav-features:before, #header .header-nav-features:after { background: rgba(0, 0, 0, 0.03); content: none; width: 1px; height: 16px; position: absolute; display: block; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); left: 0; } #header .header-nav-features.header-nav-features-light:before, #header .header-nav-features.header-nav-features-light:after { background: rgba(255, 255, 255, 0.1); } #header .header-nav-features:not(.header-nav-features-no-border):before, #header .header-nav-features:not(.header-nav-features-no-border):after { content: ''; } #header .header-nav-features:not(.header-nav-features-no-border):after { display: none; } #header .header-nav-features .header-nav-features-dropdown { opacity: 0; top: -10000px; position: absolute; -webkit-box-shadow: 0 10px 30px 10px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 30px 10px rgba(0, 0, 0, 0.05); background: #FFF; padding: 17px; min-width: 300px; z-index: 10000; right: 100%; margin-right: -25px; margin-top: 30px; -webkit-transition: opacity .2s ease-out; transition: opacity .2s ease-out; pointer-events: none; } #header .header-nav-features .header-nav-features-dropdown:before { content: ''; display: block; position: absolute; top: 0; right: 5px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid white; -webkit-transform: translate3d(-7px, -6px, 0); transform: translate3d(-7px, -6px, 0); } #header .header-nav-features .header-nav-features-dropdown.show { opacity: 1; top: auto; pointer-events: all; } #header .header-nav-features .header-nav-features-search-reveal .header-nav-features-search-hide-icon { display: none; text-decoration: none; } #header .header-nav-features .header-nav-features-search-reveal .header-nav-features-search-show-icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; text-decoration: none; } #header .header-nav-features .header-nav-features-search-reveal.show .header-nav-features-search-hide-icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #header .header-nav-features .header-nav-features-search-reveal.show .header-nav-features-search-show-icon { display: none; } #header .header-social-icons { margin-left: 16px; margin-left: 1rem; } #header .header-btn-collapse-nav { background: #CCC; color: #FFF; display: none; float: right; margin: 0 0 0 16px; margin: 0 0 0 1rem; } #header.header-no-border-bottom .header-body { padding-bottom: 0 !important; border-bottom: 0 !important; } #header.header-effect-shrink { -webkit-transition: ease height 300ms; transition: ease height 300ms; } #header.header-effect-shrink .header-top { -webkit-transition: ease height 300ms; transition: ease height 300ms; } #header.header-effect-shrink .header-container { min-height: 100px; } #header.header-effect-shrink .header-logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } html #header.header-bottom-slider { position: absolute; bottom: 0; } html #header.header-bottom-slider .header-body { border-top: 1px solid rgba(255, 255, 255, 0.4); } html.sticky-header-active #header.header-bottom-slider .header-body { border-top-color: transparent; } @media (max-width: 991px) { html #header.header-bottom-slider .header-nav-main { top: calc(100% + 15px); } html.sticky-header-active #header.header-bottom-slider .header-nav-main { top: 100%; } } html:not(.sticky-header-active) #header.header-transparent-light-bottom-border .header-body { border-bottom: 1px solid rgba(68, 68, 68, 0.4); } html:not(.sticky-header-active) #header.header-transparent-dark-bottom-border .header-body { border-bottom: 1px solid rgba(255, 255, 255, 0.4); } html.sticky-header-active #header .header-body { position: fixed; border-bottom-color: rgba(234, 234, 234, 0.5); -webkit-box-shadow: 0 0 3px rgba(234, 234, 234, 0.5); box-shadow: 0 2px 12px rgba(218, 218, 218, 0.79); } html.sticky-header-active #header.header-effect-shrink .header-body { position: relative; } html.sticky-header-enabled #header .header-logo-sticky-change { position: relative; } html.sticky-header-enabled #header .header-logo-sticky-change img { position: absolute; top: 0; left: 0; } /* Header Nav Main */ @media (min-width: 992px) { #header .header-nav-main { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; height: auto !important; } #header .header-nav-main nav { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } #header .header-nav-main nav > ul > li { height: 100%; -ms-flex-item-align: stretch; align-self: stretch; margin-left: 0px; } #header .header-nav-main nav > ul > li > a:after { display: none; } #header .header-nav-main nav > ul > li > a:active { background-color: transparent; text-decoration: none; color: #CCC; } #header .header-nav-main nav > ul > li > a.dropdown-toggle .fa-chevron-down { display: none; } #header .header-nav-main nav > ul > li > a.active { background-color: transparent; } #header .header-nav-main nav > ul > li.open > a, #header .header-nav-main nav > ul > li:hover > a { background: #CCC; color: #FFF; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu { top: -10000px; display: block; opacity: 0; left: auto; border-radius:40px; border: 0; border-top: 3px solid #CCC; -webkit-box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.07); box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.07); margin: 0; min-width: 200px; padding: 5px 0; text-align: left; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a { border-bottom: 1px solid #f7f7f7; color: #777; font-size: 0.8em; font-weight: 400; padding: 6px 18px 6px 18px; position: relative; text-transform: none; letter-spacing: -0.5px; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:hover, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:focus, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a.active, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:active { background-color: transparent; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:hover > a, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:focus > a, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.active > a, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:active > a { background-color: #f8f9fa; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu { position: relative; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > a .fa-chevron-down { display: none; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > a:after { font-family: 'Font Awesome 5 Free'; content: "\f054"; font-weight: 900; position: absolute; top: 50%; font-size: 0.5rem; opacity: 0.7; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .2s ease-out; transition: all .2s ease-out; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu { left: 100%; display: block; margin-top: -8px; margin-left: -1px; border-radius: 4px; opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu.open > a:after, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu:hover > a:after { opacity: 1; right: 15px; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu.open > .dropdown-menu, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu:hover > .dropdown-menu { top: 0; opacity: 1; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu.dropdown-reverse:hover > a:after { right: 30px; -webkit-transform: translateY(-50%) rotateY(180deg); transform: translateY(-50%) rotateY(180deg); } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu.dropdown-reverse > .dropdown-menu { left: auto; right: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:last-child a { border-bottom: 0; } #header .header-nav-main nav > ul > li.dropdown.open > a, #header .header-nav-main nav > ul > li.dropdown:hover > a { /*border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 0 0;*/ position: relative; } #header .header-nav-main nav > ul > li.dropdown.open > a:before, #header .header-nav-main nav > ul > li.dropdown:hover > a:before { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: -3px; } #header .header-nav-main nav > ul > li.dropdown.open > .dropdown-menu, #header .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu { top: auto; display: block; opacity: 1; } #header .header-nav-main nav > ul > li.dropdown.dropdown-reverse > .dropdown-menu { left: auto; right: 0; } #header .header-nav-main nav > ul > li.dropdown-mega { position: static; } #header .header-nav-main nav > ul > li.dropdown-mega > .dropdown-menu { border-radius: 4px; left: 15px; right: 15px; width: auto; } #header .header-nav-main nav > ul > li .wrapper-items-cloned i { display: none; } #header .header-nav-main.header-nav-main-square nav > ul > li.dropdown .thumb-info, #header .header-nav-main.header-nav-main-square nav > ul > li.dropdown .thumb-info-wrapper { border-radius: 0 !important; } } @media (min-width: 992px) { #header .header-nav-main a > .thumb-info-preview { position: absolute; display: block; left: 100%; opacity: 0; border: 0; padding-left: 10px; background: transparent; overflow: visible; margin-top: 15px; top: -10000px; -webkit-transition: opacity .2s ease-out, -webkit-transform .2s ease-out; transition: opacity .2s ease-out, -webkit-transform .2s ease-out; transition: transform .2s ease-out, opacity .2s ease-out; transition: transform .2s ease-out, opacity .2s ease-out, -webkit-transform .2s ease-out; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } #header .header-nav-main a > .thumb-info-preview .thumb-info-wrapper { background: #FFF; display: block; border-radius: 4px; border: 0; -webkit-box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08); margin: 0; padding: 4px; text-align: left; width: 190px; } #header .header-nav-main a > .thumb-info-preview .thumb-info-image { -webkit-transition: all 6s linear 0s; transition: all 6s linear 0s; width: 182px; height: 136px; min-height: 0; } #header .header-nav-main a:hover > .thumb-info-preview { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); top: 0; opacity: 1; margin-top: -5px; } #header .header-nav-main .dropdown-reverse a > .thumb-info-preview { -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); right: 100%; left: auto; padding-left: 0; margin-right: 10px; } #header .header-nav-main .dropdown-reverse a:hover > .thumb-info-preview { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #header .header-nav-bar { z-index: 1; } #header .header-nav-bar .header-container { min-height: 0; height: auto !important; } #header .header-nav-bar .header-nav { min-height: 60px; } #header .header-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-item-align: stretch; align-self: stretch; } #header .header-nav.header-nav-click-to-open nav > ul > li.dropdown .dropdown-menu, #header .header-nav.header-nav-click-to-open nav > ul > li.dropdown li.dropdown-submenu > .dropdown-menu { -webkit-transition: opacity .2s ease-out; transition: opacity .2s ease-out; } #header .header-nav.header-nav-click-to-open nav > ul > li.dropdown:hover:not(.open) .dropdown-menu { top: -10000px; opacity: 0; } #header .header-nav.header-nav-click-to-open nav > ul > li.dropdown.open .dropdown-menu > li.dropdown-submenu:hover:not(.open) .dropdown-menu { top: -10000px; opacity: 0; } } /* Header Arrows */ /* Header Nav Main Dark Text */ /* Header Nav Main Colors */ /* Header Nav Main Dark Text */ /* Header Nav Main Stretch */ /* Header Narrow */ /* Header Nav Vertical */ @media (min-width: 992px) { html.side-header #header.side-header .header-nav-main nav > ul > li > a.dropdown-toggle .fa-chevron-down, html.side-header-hamburguer-sidebar #header.side-header .header-nav-main nav > ul > li > a.dropdown-toggle .fa-chevron-down { display: block; position: absolute; right: 7px; width: 30px; height: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 0.5rem; } html.side-header #header.side-header .header-nav-main nav > ul > li > a.dropdown-toggle .fa-chevron-down:before, html.side-header-hamburguer-sidebar #header.side-header .header-nav-main nav > ul > li > a.dropdown-toggle .fa-chevron-down:before { content: none; } html.side-header #header.side-header .header-nav nav, html.side-header-hamburguer-sidebar #header.side-header .header-nav nav { display: block !important; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-expand .thumb-info-preview, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-expand .thumb-info-preview { display: none; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-columns .thumb-info-preview, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-columns .thumb-info-preview { display: none; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide { height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide .header-nav-main, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide .header-nav-main { height: 100% !important; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav > ul, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav > ul { height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav > ul > li, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav > ul > li { height: auto; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: ease all 300ms; transition: ease all 300ms; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul.next-menu, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul.next-menu { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } @-webkit-keyframes sideMenuArrow { 0% { left: 5px; } 50% { left: 10px; } 100% { left: 5px; } } @keyframes sideMenuArrow { 0% { left: 5px; } 50% { left: 10px; } 100% { left: 5px; } } @-webkit-keyframes sideMenuArrowBack { 0% { right: 5px; } 50% { right: 10px; } 100% { right: 5px; } } @keyframes sideMenuArrowBack { 0% { right: 5px; } 50% { right: 10px; } 100% { right: 5px; } } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul > li.dropdown > a.dropdown-toggle, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul > li.dropdown > a.dropdown-toggle { display: inline-block; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul > li.dropdown > a.dropdown-toggle:before, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul > li.dropdown > a.dropdown-toggle:before { display: none !important; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul > li.dropdown > a.dropdown-toggle:after, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul > li.dropdown > a.dropdown-toggle:after { font-family: 'Font Awesome 5 Free'; content: "\f054"; font-weight: 900; position: relative; font-size: 0.5rem; opacity: 0.7; display: inline-block; border: 0; top: auto; left: 5px; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul > li.dropdown > a.dropdown-toggle:hover:after, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul > li.dropdown > a.dropdown-toggle:hover:after { -webkit-animation: sideMenuArrow 600ms ease; animation: sideMenuArrow 600ms ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul > li.dropdown .dropdown-menu li a, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul > li.dropdown .dropdown-menu li a { background: transparent; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li { position: static; text-align: center; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li a, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li a { display: inline-block; width: 100%; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li ul, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li ul { visibility: hidden; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li ul.visible, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li ul.visible { visibility: visible; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.back-button > a, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.back-button > a { cursor: pointer; background: transparent; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.back-button > a:before, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.back-button > a:before { font-family: 'Font Awesome 5 Free'; content: "\f053"; font-weight: 900; position: relative; font-size: 0.5rem; opacity: 0.7; display: inline-block; border: 0; top: -1px; right: 5px; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.back-button > a:hover:before, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.back-button > a:hover:before { -webkit-animation: sideMenuArrowBack 600ms ease; animation: sideMenuArrowBack 600ms ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown .dropdown-menu, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown .dropdown-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; top: 50% !important; left: 100%; padding: 0; margin: 0 !important; opacity: 1; border-top: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: translate3d(0, -50%, 0) !important; transform: translate3d(0, -50%, 0) !important; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown .dropdown-menu::-webkit-scrollbar, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown .dropdown-menu::-webkit-scrollbar { width: 5px; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown .dropdown-menu::-webkit-scrollbar-thumb, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown .dropdown-menu::-webkit-scrollbar-thumb { border-radius: 0px; background: rgba(204, 204, 204, 0.5); } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown .dropdown-menu.next-menu, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown .dropdown-menu.next-menu { -webkit-transform: translate3d(-100%, -50%, 0) !important; transform: translate3d(-100%, -50%, 0) !important; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown .dropdown-menu li.dropdown-submenu, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown .dropdown-menu li.dropdown-submenu { position: static; } html.side-header #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown-submenu, html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-slide nav ul li.dropdown-submenu { position: static; } } /* Header Floating */ #header.header-floating-icons .nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #header.header-floating-icons .header-nav-main nav > ul > li { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-left: 0; } #header.header-floating-icons .header-nav-main nav > ul > li > a > i { pointer-events: none; } #header.header-floating-icons .header-nav-main nav > ul > li > a.active { background: #FFF !important; } #header.header-floating-icons .header-nav-main nav > ul > li > a.active:after { background: #FFF; } @media (min-width: 992px) { #header.header-floating-icons { background: transparent; height: 0; min-height: 0 !important; } #header.header-floating-icons .header-nav-main nav > ul > li { height: auto; } #header.header-floating-icons .header-row { display: block; position: absolute; top: 12px; left: -60px; } #header.header-floating-icons .header-body { position: fixed; top: 0; left: 0; background: transparent; min-height: 0; padding: 0; border: none; } #header.header-floating-icons .header-nav { padding: 0 !important; } #header.header-floating-icons .header-nav-main { margin: 0; -webkit-box-shadow: 0px 0px 80px 0px rgba(62, 62, 62, 0.3); box-shadow: 0px 0px 80px 0px rgba(62, 62, 62, 0.3); } #header.header-floating-icons .header-nav-main nav > ul > li { border-bottom: 1px solid #CCC; } #header.header-floating-icons .header-nav-main nav > ul > li:hover > a { background: #FFF; } #header.header-floating-icons .header-nav-main nav > ul > li:hover > a > span { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } #header.header-floating-icons .header-nav-main nav > ul > li > a { font-size: 25px; padding: 18px; -webkit-perspective: 770px; perspective: 770px; background: #F7F7F7; border-radius: 0; -webkit-transform: translateZ(0); transform: translateZ(0); } #header.header-floating-icons .header-nav-main nav > ul > li > a:after { content: ''; display: block; position: absolute; top: 0; right: 0; width: 100%; height: 102%; z-index: -1; } #header.header-floating-icons .header-nav-main nav > ul > li > a > span { opacity: 0; position: absolute; top: 0; left: 125.5%; background: #FFF; padding: 0 25px; height: 100%; line-height: 4.1; white-space: nowrap; font-size: 14px; z-index: -2; -webkit-transition: ease transform 300ms; transition: ease transform 300ms; -webkit-box-shadow: 0px 0px 80px 0px rgba(62, 62, 62, 0.15); box-shadow: 0px 0px 80px 0px rgba(62, 62, 62, 0.15); -webkit-transform-origin: -19% 0%; transform-origin: -19% 0%; -webkit-transform: rotateY(88deg); transform: rotateY(88deg); } #header.header-floating-icons .header-nav-main nav > ul > li > a > span:before { content: ''; display: block; position: absolute; top: 50%; left: -4px; padding: 10px; background: #FFF; z-index: -1; -webkit-transform: translate(0, -50%) rotate(45deg); transform: translate(0, -50%) rotate(45deg); } } @media (min-width: 992px) and (max-width: 1281px) { #header.header-floating-icons .header-row { left: -19px; } #header.header-floating-icons .header-nav-main nav > ul > li > a { padding: 9.8px; -webkit-perspective: 450px; perspective: 450px; } #header.header-floating-icons .header-nav-main nav > ul > li > a > span { line-height: 3; } } @media (max-width: 991px) { #header.header-floating-icons { position: fixed; top: 23px; right: 10px; } #header.header-floating-icons .header-body { background: transparent; border: none; min-height: 0; } #header.header-floating-icons .header-btn-collapse-nav { padding: 15px 20px; margin: 0; } #header.header-floating-icons .header-nav-main { position: absolute; right: 0px; top: 77px; max-width: 53px; overflow: hidden; -webkit-box-shadow: 0px 0px 15px 0px rgba(62, 62, 62, 0.2); box-shadow: 0px 0px 15px 0px rgba(62, 62, 62, 0.2); } #header.header-floating-icons .header-nav-main:before { content: none; } #header.header-floating-icons .header-nav-main nav { padding: 0; margin: 0 !important; max-height: none; } #header.header-floating-icons .header-nav-main nav > ul { display: block; padding: 0; } #header.header-floating-icons .header-nav-main nav > ul > li { display: inline-block; border: none; } #header.header-floating-icons .header-nav-main nav > ul > li > a { font-size: 1.7em; margin: 0; padding: 15px; background: #F7F7F7; border-radius: 0; border-bottom: 1px solid #e2e2e2; } #header.header-floating-icons .header-nav-main nav > ul > li > a > span { display: none; } #header.header-floating-icons .header-nav-main nav > ul > li:last-child > a { border-bottom: 0; } } /* Header Nav Main Mobile */ @media (max-width: 991px) { #header .header-nav-main { position: absolute; background: transparent; width: 100%; top: 100%; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } #header .header-nav-main:before { content: ''; display: block; position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; background: #FFF; z-index: -1; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #header .header-nav-main nav { max-height: 50vh; overflow: hidden; overflow-y: auto; padding: 0 15px; -webkit-transition: ease all 500ms; transition: ease all 500ms; } #header .header-nav-main nav.collapsing { overflow-y: hidden; } #header .header-nav-main nav::-webkit-scrollbar { width: 5px; } #header .header-nav-main nav::-webkit-scrollbar-thumb { border-radius: 0px; background: rgba(204, 204, 204, 0.5); } #header .header-nav-main nav > ul { padding-top: 15px; padding-bottom: 15px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #header .header-nav-main nav > ul li { border-bottom: 1px solid #e8e8e8; clear: both; display: block; float: none; margin: 0; padding: 0; position: relative; } #header .header-nav-main nav > ul li a { font-size: 15px; font-style: normal; line-height: 20px; padding: 8px 18px; border-radius: 4px; text-align: left; } #header .header-nav-main nav > ul li a .fa-caret-down { line-height: 35px; min-height: 38px; min-width: 30px; position: absolute; right: 5px; text-align: center; top: 0; } #header .header-nav-main nav > ul li a.dropdown-toggle { position: relative; } #header .header-nav-main nav > ul li a.dropdown-toggle:after { content: none; } #header .header-nav-main nav > ul li a.dropdown-toggle .fa-chevron-down { position: absolute; top: 0; right: 0; width: 30px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 0.6rem; } #header .header-nav-main nav > ul li a:active { background-color: #f8f9fa; color: inherit; } #header .header-nav-main nav > ul li.dropdown .dropdown-menu { background: transparent; padding: 0; margin: 0; font-size: 13px; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; border: 0; clear: both; display: none; float: none; position: static; } #header .header-nav-main nav > ul li.dropdown .dropdown-menu li.dropdown-submenu > a { position: relative; } #header .header-nav-main nav > ul li.dropdown .dropdown-menu li.dropdown-submenu > a:after { content: none; } #header .header-nav-main nav > ul li.dropdown .dropdown-menu li.dropdown-submenu > a .fa-chevron-down { position: absolute; top: 0; right: 0; width: 30px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 0.6rem; } #header .header-nav-main nav > ul li.dropdown .dropdown-menu li.dropdown-submenu.open > .dropdown-menu { display: block; margin-left: 20px; } #header .header-nav-main nav > ul li.dropdown.open > .dropdown-menu { display: block; margin-left: 20px; } #header .header-nav-main nav > ul li:last-child { border-bottom: 0; } #header .header-nav-main nav > ul > li > a { text-transform: uppercase; margin-top: 1px; margin-bottom: 1px; color: #CCC; } #header .header-nav-main nav > ul > li > a:active { color: #CCC; } #header .header-nav-main nav > ul > li > a.active { color: #FFF !important; background: #CCC; } #header .header-nav-main nav > ul > li > a.active:focus, #header .header-nav-main nav > ul > li > a.active:hover { color: #FFF; background: #CCC; } #header .header-nav-main a > .thumb-info-preview { display: none !important; } #header .header-nav-bar .header-container { min-height: 0; height: auto !important; } #header .header-nav-bar .header-nav { min-height: 60px !important; padding: 0; } #header .header-btn-collapse-nav { outline: 0; display: block; position: relative; z-index: 1; } } /* Header Nav Main Mobile Dark */ @media (max-width: 991px) { #header .header-nav-main.header-nav-main-mobile-dark:before { background-color: #212529; } #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li > a { color: #dedede; } #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li > a.active { color: #FFF; } #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li .dropdown-menu > li a { color: #969696; } #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li .dropdown-menu > li a.active { color: #FFF; } #header .header-nav-main.header-nav-main-mobile-dark nav > ul li { border-bottom: 1px solid #3e3e3e; } #header .header-nav-main.header-nav-main-mobile-dark nav > ul li:last-child { border-bottom: 0; } #header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:hover, #header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:focus, #header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:active { background-color: #2b2b2b; } } /* Header Nav Main Dark Text */ /* Header Nav Vertical */ /* Side Header Hamburguer Sidebar */ @media (max-width: 991px) { html.side-header-hamburguer-sidebar #header.side-header .header-row-side-header { width: 100%; } html.side-header-hamburguer-sidebar #header.side-header .header-nav { height: 100%; } html.side-header-hamburguer-sidebar #header.side-header .header-nav .header-nav-main { position: relative; top: 0; left: 0; -webkit-transform: none; transform: none; } html.side-header-hamburguer-sidebar #header.side-header .header-nav nav { display: block !important; max-height: 69vh; padding: 0 8px 0 0; } html.side-header-hamburguer-sidebar #header.side-header .header-nav.header-nav-links-vertical-expand .thumb-info-preview { display: none; } } /* Responsive */ @media (min-width: 992px) { #header .header-body:not(.h-100) { height: auto !important; } } @media (max-width: 991px) { #header .header-logo img { z-index: 1; } #header .header-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } /* Mega Menu (Signin/SignUp) */ /* Responsive */ @media (min-width: 992px) { html.side-header .main .container, html.side-header #footer .container { padding: 0 35px; width: auto !important; max-width: 1210px; } html.side-header:not(.side-header-above) body > .body { margin: 0 0 0 255px; width: auto; overflow-x: hidden; overflow-y: visible; } } @media (min-width: 992px) { html.side-header #header.side-header { position: fixed; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); top: 0; left: 0; max-width: 255px; width: 100%; height: 100%; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) transform 300ms; transition: cubic-bezier(0.55, 0, 0.1, 1) transform 300ms; } html.side-header #header.side-header:not(.header-transparent) { background: #FFF; } html.side-header #header.side-header.side-header-hide { -webkit-transform: translateX(100%); transform: translateX(100%); } html.side-header #header.side-header .header-body { border-top: 0; } html.side-header #header.side-header .header-container { width: 100%; } html.side-header #header.side-header .header-row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } html.side-header #header.side-header .header-logo { margin: 2rem 0; } html.side-header #header.side-header .header-nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } html.side-header #header.side-header .header-nav-main, html.side-header #header.side-header .header-nav-main nav, html.side-header #header.side-header .header-nav-main .nav { width: 100%; } html.side-header #header.side-header .nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } html.side-header #header.side-header .header-nav-main nav > ul > li.dropdown > a.dropdown-toggle:after { content: ""; border-color: transparent transparent transparent #CCC; position: absolute; right: 15px; top: 50%; border-top: .3em solid; border-bottom: .3em solid transparent; border-left: .3em solid transparent; border-right: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } html.side-header #header.side-header .header-nav-main nav > ul > li.dropdown.open > .dropdown-menu, html.side-header #header.side-header .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu { top: 3px; left: 100%; border-top: 0; border-left: 5px solid #CCC; margin-left: -5px; } html.side-header #header.side-header .header-nav-main nav > ul > li.dropdown li.dropdown-submenu:hover > .dropdown-menu { margin-top: -5px; border-top: 0; } html.side-header #header.side-header .header-nav-main nav > ul > li.dropdown.open > a, html.side-header #header.side-header .header-nav-main nav > ul > li.dropdown:hover > a { padding-bottom: 0.5rem; } html.side-header #header.side-header .header-nav-main nav > ul > li.dropdown.open > a:before, html.side-header #header.side-header .header-nav-main nav > ul > li.dropdown:hover > a:before { content: none; } html.side-header #header.side-header .header-nav-main nav > ul > li.dropdown-mega { position: relative !important; } html.side-header #header.side-header .header-nav-main nav > ul > li.dropdown-mega .dropdown-menu { min-width: 720px; } html.side-header #header.side-header .header-nav-main nav > ul > li { margin-top: 1px; } html.side-header #header.side-header .header-nav-main nav > ul > li > a { display: -webkit-box; display: -ms-flexbox; display: flex; } html.side-header #header.side-header .header-nav-main nav > ul > li .dropdown-menu.dropdown-reverse li a { padding-right: 8px; padding-left: 20px; } html.side-header #header.side-header .header-nav-main nav > ul > li .dropdown-menu.dropdown-reverse li.dropdown-submenu > a:after { border-width: 4px 4px 4px 0; } html.side-header-right:not(.side-header-above) body > .body { margin: 0 255px 0 0; } html.side-header-right #header.side-header { left: auto; right: 0; } html.side-header-right #header.side-header .header-nav:not(.header-nav-links-vertical-slide):not(.header-nav-links-vertical-expand) .header-nav-main nav > ul > li.dropdown > a.dropdown-toggle { padding-right: 0px; padding-left: 30px; } html.side-header-right #header.side-header .header-nav:not(.header-nav-links-vertical-slide):not(.header-nav-links-vertical-expand) .header-nav-main nav > ul > li.dropdown > a.dropdown-toggle:after { left: 15px; right: auto; border-right: .3em solid transparent; border-left: 0; } html.side-header-right #header.side-header .header-nav:not(.header-nav-links-vertical-slide):not(.header-nav-links-vertical-expand) .header-nav-main nav > ul > li.dropdown.open > .dropdown-menu, html.side-header-right #header.side-header .header-nav:not(.header-nav-links-vertical-slide):not(.header-nav-links-vertical-expand) .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; right: 100%; left: auto; border-right: 5px solid #CCC; border-left: 0; margin-left: 0; margin-right: -5px; border-radius: 4px 0 0 4px; opacity: 1; } html.side-header-right #header.side-header.side-header-hide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } html.side-header-right.side-header-right-no-reverse #header.side-header .header-nav:not(.header-nav-links-vertical-slide) .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > a { padding-left: 25px; } html.side-header-right.side-header-right-no-reverse #header.side-header .header-nav:not(.header-nav-links-vertical-slide) .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > a:after { left: initial; right: 20px; } } @media (min-width: 992px) and (max-width: 1199px) { html.side-header:not(.side-header-above) body > .body { margin: 0; } html.side-header #header.side-header { left: -255px; z-index: 20 !important; } html.side-header.side-header-right #header.side-header { left: auto; right: -255px; } } @media (min-width: 1200px) { html.side-header.side-header-hide #header.side-header { left: 0; -webkit-transform: translateX(0); transform: translateX(0); } html.side-header.side-header-right.side-header-hide #header.side-header { left: auto; right: 0; -webkit-transform: translateX(0); transform: translateX(0); } } @media (max-width: 991px) { html.side-header #header.side-header .header-container { height: auto !important; } } @media (max-height: 768px) { html.side-header #header .header-nav-main nav > ul > li.dropdown.open > .dropdown-menu, html.side-header #header .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu { top: auto; } } html.side-header-hamburguer-sidebar .main .container, html.side-header-hamburguer-sidebar #footer .container { padding: 0 35px; width: auto !important; max-width: 1210px; } html.side-header-hamburguer-sidebar:not(.side-header-above) body > .body { margin: 0 0 0 255px; width: auto; overflow-x: hidden; overflow-y: visible; } html.side-header-hamburguer-sidebar #header.side-header { background: #FFF; position: fixed; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); top: 0; left: 0; max-width: 255px; width: 100%; height: 100%; -webkit-transform: translateX(0); transform: translateX(0); z-index: 9991; } html.side-header-hamburguer-sidebar #header.side-header.side-header-hide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } html.side-header-hamburguer-sidebar #header.side-header .header-body { border-top: 0; height: 100% !important; } html.side-header-hamburguer-sidebar #header.side-header .header-container { width: 100%; height: 100% !important; } html.side-header-hamburguer-sidebar #header.side-header .header-row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } html.side-header-hamburguer-sidebar #header.side-header .header-logo { margin: 32px 0; margin: 2rem 0; } html.side-header-hamburguer-sidebar #header.side-header .header-nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } html.side-header-hamburguer-sidebar #header.side-header .header-nav-main, html.side-header-hamburguer-sidebar #header.side-header .header-nav-main nav, html.side-header-hamburguer-sidebar #header.side-header .header-nav-main .nav { width: 100%; } html.side-header-hamburguer-sidebar #header.side-header .nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } html.side-header-hamburguer-sidebar.side-header-hamburguer-sidebar-right #header.side-header { left: auto; right: 0; } html.side-header-hamburguer-sidebar.side-header-hamburguer-sidebar-right #header.side-header.side-header-hide { -webkit-transform: translateX(100%); transform: translateX(100%); } html.side-header-overlay-full-screen body > .body { margin: 0; width: auto; overflow-x: hidden; overflow-y: visible; } html.side-header-overlay-full-screen #header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(51, 51, 51, 0.99); position: fixed; -webkit-box-shadow: 0 0 18px rgba(68, 68, 68, 0.07); box-shadow: 0 0 18px rgba(68, 68, 68, 0.07); top: 0; left: 0; width: 100vw; height: 100vh; padding-top: 48px; padding-top: 3rem; opacity: 0; visibility: hidden; -webkit-transition: ease opacity 300ms, ease visibility 300ms; transition: ease opacity 300ms, ease visibility 300ms; } html.side-header-overlay-full-screen #header:not(.side-header-hide) { opacity: 1; visibility: visible; -webkit-transition: ease opacity 300ms, ease visibility 300ms; transition: ease opacity 300ms, ease visibility 300ms; } html.side-header-overlay-full-screen #header .header-container:after { content: none; } html.side-header-overlay-full-screen #header .header-body { background-color: transparent; border: 0; } html.side-header-overlay-full-screen #header .header-row-side-header { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; margin: 0 auto; } html.side-header-overlay-full-screen #header .header-nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } html.side-header-overlay-full-screen #header .header-nav-main, html.side-header-overlay-full-screen #header .header-nav-main nav, html.side-header-overlay-full-screen #header .header-nav-main .nav { width: 100%; } html.side-header-overlay-full-screen #header .nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } html.side-header-overlay-full-screen #header .header-nav-main { position: relative; } html.side-header-overlay-full-screen #header .header-nav-main:before { content: none; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li { text-align: center; position: static; margin-top: 1px; height: auto; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li > a { display: inline-block; border: 0; font-size: 28.8px; font-size: 1.8rem; text-transform: none; color: #FFF; padding: 15px 0 !important; font-weight: 600; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li > a:after { top: -2px !important; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li > a.open, html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li > a:focus, html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li > a:active, html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li > a.active { background: transparent; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li a .fa-chevron-down { display: none !important; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li.dropdown .dropdown-menu { position: static; background: transparent !important; -webkit-box-shadow: none; box-shadow: none; display: none !important; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a { border: 0; font-size: 17.6px; font-size: 1.1rem; color: #FFF; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:after { display: none; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li.dropdown .dropdown-submenu { position: static; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li.dropdown .dropdown-submenu .dropdown-menu a { font-size: 12px; font-size: 0.75rem; opacity: 0.7; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li.dropdown.open > .dropdown-menu, html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li.dropdown .dropdown-submenu.open > .dropdown-menu { display: block !important; opacity: 1; width: 100%; text-align: center; padding: 15px 0; margin: 0; -webkit-transform: none; transform: none; position: static; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li.dropdown.open > .dropdown-menu li a, html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li.dropdown .dropdown-submenu.open > .dropdown-menu li a { background: transparent; } @media (max-width: 991px) { html.side-header-overlay-full-screen #header .header-row-side-header { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } html.side-header-overlay-full-screen #header .header-nav { height: 100%; } html.side-header-overlay-full-screen #header .header-nav-main { position: absolute; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } html.side-header-overlay-full-screen #header .header-nav-main nav { max-height: 80vh; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul li { border-bottom: 0; } html.side-header-overlay-full-screen #header .header-nav-main nav > ul li a { text-align: center; } } body[data-plugin-section-scroll] #header .header-body { background: transparent; } /* Page Header */ .page-header .breadcrumb { background: none; margin: 0; padding: 0; position: relative; z-index: 1; } .page-header .breadcrumb.breadcrumb-block { background: #212529; display: inline-block !important; padding: 7.2px 19.2px; padding: .45rem 1.2rem; border-radius: 4px; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); } .page-header .breadcrumb.breadcrumb-light { color: #FFF; } .page-header .breadcrumb.breadcrumb-light a { color: #FFF; } .page-header .breadcrumb.breadcrumb-light .active { opacity: 0.7; } .page-header .sub-title { display: block; font-size: 1.2em; font-weight: 300; margin: 0; opacity: 0.8; color: #fff; } .page-header .page-header-extra-button { position: absolute; width: 100%; bottom: 50px; left: 0; right: 0; z-index: 5; } .page-header.page-header-sm { padding: 30px 0; } .page-header.page-header-sm h1 { font-size: 22px; } .page-header.page-header-lg { padding: 50px 0; } .page-header.page-header-lg h1 { font-size: 40px; } .page-header.page-header-classic .page-header-title-border { width: 0; height: 5px; position: absolute; bottom: 0; background: transparent; z-index: 1; } .page-header.page-header-modern h1 { font-size: 28px; } .page-header.page-header-modern.page-header-sm h1 { font-size: 22px; } .page-header.page-header-modern.page-header-md { padding: 50px 0; } .page-header.page-header-modern.page-header-lg { padding: 65px 0; } .page-header.page-header-modern.page-header-lg h1 { font-size: 32px; } .page-header.page-header-modern.page-header-background { padding: 130px 0; background-size: cover; } .page-header.page-header-modern.page-header-background.page-header-background-pattern { background-size: auto; background-repeat: repeat; background-attachment: fixed; } .page-header.page-header-modern.page-header-background.page-header-background-sm { padding: 50px 0; } .page-header.page-header-modern.page-header-background.page-header-background-md { padding: 150px 0; } .page-header.page-header-modern.page-header-background.page-header-background-lg { padding: 250px 0; } /* Position */ /* Box Shadow */ /* Inverted */ /* Letter Spacing */ /* Cursor */ /* Font Size */ /* Line Height */ /* Opacity */ /* Scale */ /* Top / Bottom / Left / Right */ /* Outline */ /* Text Decoration */ /* Text Transform */ .text-uppercase { text-transform: uppercase !important; } /* States */ .text-muted { color: #999 !important; } html.dark .text-muted { color: #505461 !important; } /* Overflow */ .overflow-hidden { overflow: hidden !important; } /* Z-Index */ /* Colors */ /* Weights */ b, strong { font-weight: 700 !important; } /* Letter Space */ /* Borders */ .rounded { border-radius: 5px !important; } /* General Helpers */ /* Width */ /* Grid */ /* RTL */ /* #Footer */ #footer { background: #5E17BE; border-top: 0px solid #7B28CD; font-size: 17px; margin-top: 50px; padding: 0; position: relative; clear: both; } #footer h1, #footer h2, #footer h3, #footer h4, #footer h5 { color: #FFF; } #footer a:not(.btn) { color: #FFF; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } #footer a:not(.btn):hover { text-decoration: none; color: #FFF; } #footer a:not(.btn):focus, #footer a:not(.btn):active { color: #CCC; } #footer form { opacity: 0.85; } #footer form label.error { line-height: 16px; margin: 5px 0 -5px; display: block; clear: both; } #footer form .alert { padding: 6px; text-align: center; } #footer .logo img { position: relative; top: 2px; } #footer .twitter [class*="fa-"] { clear: both; font-size: 1.5em; position: relative; top: 3px; margin-right: -22px; left: -30px; color: #FFF; } #footer .twitter .meta { color: #999; display: block; font-size: 0.9em; padding-top: 3px; opacity: 0.5; } #footer .twitter ul { list-style: none; margin: 0; padding: 0; } #footer .twitter ul li { padding-bottom: 20px; padding-left: 30px; } #footer .twitter ul li:last-child { padding-bottom: 0; } /* Dark Version */ html.dark body, html.dark .body { background-color: #212529; } html.dark.boxed .body { background-color: #212529; } html.dark #header .header-top { background: #2c3237; border-bottom-color: #333940; } html.dark #header .header-body { background: #212529; border-top-color: #333940; } html.dark #header .header-nav-bar { background-color: #262a2f; } html.dark #header .header-nav-features .header-nav-features-dropdown { background: #262a2f; } html.dark #header .header-nav-features .header-nav-features-dropdown:before { border-bottom-color: #262a2f; } html.dark.sticky-header-active #header .header-body { border-bottom-color: #333940; -webkit-box-shadow: none; box-shadow: none; } html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5 { color: #FFF; } html.dark .alert h1, html.dark .alert h2, html.dark .alert h3, html.dark .alert h4, html.dark .alert h5 { color: #111; } html.dark blockquote { border-color: #2c3237; } html.dark section.section { background-color: #262a2f; border-top-color: #2c3237; } html.dark .dropdown-menu > li a { color: #FFF; } html.dark .dropdown-menu > li a:hover, html.dark .dropdown-menu > li a:focus { background-color: #333940; } html.dark .nav > li > a:hover, html.dark .nav > li > a:focus { background-color: #333940; } html.dark section.timeline:after { background: #505050; background: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 0)), color-stop(8%, #505050), color-stop(92%, #505050), to(rgba(80, 80, 80, 0))); background: linear-gradient(to bottom, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%); } html.dark .form-control { background-color: #2c3237; border-color: #2c3237; } html.dark .btn-light { background-color: #2c3237; border-color: #2c3237; color: #FFF; } html.dark .btn.disabled, html.dark .btn.disabled:hover, html.dark .btn.disabled:active, html.dark .btn.disabled:focus, html.dark .btn[disabled], html.dark .btn[disabled]:hover, html.dark .btn[disabled]:active, html.dark .btn[disabled]:focus { border-color: #2c3237 !important; } html.dark .pagination > li > a, html.dark .pagination > li > span { background-color: #2c3237; border-color: #282d31; } html.dark .page-header { border-bottom-color: #1c2023; } html.dark .page-header-light { background-color: #333940; } html.dark .toggle > label { background-color: #333940; } html.dark .featured-box { background: #333940; border-left-color: #333940; border-right-color: #333940; border-bottom-color: #333940; } html.dark .progress { background: #333940; } html.dark .arrow { background-image: url(../img/arrows-dark.png); } html.dark .img-thumbnail, html.dark .thumb-info { background-color: #2c3237; border-color: #2c3237; } html.dark .thumb-info .thumb-info-wrapper:after { background-color: rgba(33, 37, 41, 0.9); } html.dark .thumb-info-social-icons { border-top-color: #3c444b; } html.dark .popover { background-color: #333940; border: 1px solid #2c3237; } html.dark .popover.top > .arrow { border-top-color: #2c3237; } html.dark .popover.top > .arrow:after { border-top-color: #333940; } html.dark .popover.right > .arrow { border-right-color: #2c3237; } html.dark .popover.right > .arrow:after { border-right-color: #333940; } html.dark .popover.bottom > .arrow { border-bottom-color: #2c3237; } html.dark .popover.bottom > .arrow:after { border-bottom-color: #333940; } html.dark .popover.left > .arrow { border-left-color: #2c3237; } html.dark .popover.left > .arrow:after { border-left-color: #333940; } html.dark .page-header { border-bottom-color: #2c3237; } html.dark .table > thead > tr > th, html.dark .table > tbody > tr > th, html.dark .table > thead > tr > td, html.dark .table > tbody > tr > td, html.dark .table-bordered { border-color: #2c3237; } html.dark .table-striped > tbody > tr:nth-child(2n+1) > td, html.dark .table-striped > tbody > tr:nth-child(2n+1) > th { background-color: #333940; } html.dark hr { background-image: -webkit-gradient(linear, right top, left top, from(#212529), color-stop(#3F4247), to(#212529)); background-image: linear-gradient(to left, #212529, #3F4247, #212529); } html.dark hr.light { background-image: -webkit-gradient(linear, right top, left top, from(#212529), color-stop(#3F4247), to(#212529)); background-image: linear-gradient(to left, #212529, #3F4247, #212529); } html.dark hr.solid { background: #3F4247; } html.dark .product-thumb-info { background-color: #2c3237; border-color: transparent; } html.dark .dialog { background-color: #212529; } html.dark .loading-overlay { background: #212529; } html.dark .sort-destination-loader:after { background-color: #212529; } /* Responsive */ @media (min-width: 992px) { html.dark #header .header-nav-main:not(.header-nav-main-light) nav > ul > li.dropdown:not(.dropdown-full-color) .dropdown-menu { background: #262a2f; } html.dark #header .header-nav-main:not(.header-nav-main-light) nav > ul > li.dropdown:not(.dropdown-full-color) .dropdown-menu li:hover > a, html.dark #header .header-nav-main:not(.header-nav-main-light) nav > ul > li.dropdown:not(.dropdown-full-color) .dropdown-menu li:focus > a, html.dark #header .header-nav-main:not(.header-nav-main-light) nav > ul > li.dropdown:not(.dropdown-full-color) .dropdown-menu li.active > a, html.dark #header .header-nav-main:not(.header-nav-main-light) nav > ul > li.dropdown:not(.dropdown-full-color) .dropdown-menu li:active > a { background: #333940; } html.dark #header .header-nav-main:not(.header-nav-main-light) nav > ul > li.dropdown:not(.dropdown-full-color) .dropdown-menu li a { border-bottom-color: #333940; } html.dark #header .header-nav-main:not(.header-nav-main-light) nav > ul > li.dropdown:not(.dropdown-full-color) .dropdown-menu li a:hover, html.dark #header .header-nav-main:not(.header-nav-main-light) nav > ul > li.dropdown:not(.dropdown-full-color) .dropdown-menu li a:focus, html.dark #header .header-nav-main:not(.header-nav-main-light) nav > ul > li.dropdown:not(.dropdown-full-color) .dropdown-menu li a.active, html.dark #header .header-nav-main:not(.header-nav-main-light) nav > ul > li.dropdown:not(.dropdown-full-color) .dropdown-menu li a:active { background: #333940; } html.dark #header .header-nav-main:not(.header-nav-main-light) a > .thumb-info-preview .thumb-info-wrapper { background: #333940; } } @media (max-width: 991px) { html.dark #header .header-nav-main:before { background-color: #212529; } html.dark #header .header-nav-main nav::-webkit-scrollbar-thumb { border-color: transparent; background: #39404c; } html.dark #header .header-nav-main nav > ul li { border-bottom-color: #333940; } html.dark #header .header-nav-main nav ul li a:active { background-color: #1e1e1e; color: #FFF; } } /* Boxed Layout */ html.boxed body { background-color: transparent; background-position: 0 0; background-repeat: repeat; } html.boxed .body { position: relative; background-color: transparent; border-radius: 5px; border-top: 5px solid #CCC; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); margin: 25px auto; max-width: 1200px; height: auto; } html.boxed #header .header-body { border-top-color: transparent; } html.boxed #header.header-effect-shrink .header-body { max-width: 1200px; } html.boxed .main { background-color: #FFF; overflow: hidden; } html.boxed #footer { margin-top: 0; border-bottom: 4px solid #1A1C1E; border-radius: 0 0 5px 5px; } /* Responsive */ @media (min-width: 1200px) { html.boxed.sticky-header-active #header .header-body { width: 100%; max-width: 1200px; } } @media (min-width: 992px) { html.boxed.sticky-header-active #header:not(.header-effect-shrink) .header-body { position: fixed !important; padding-left: 15px; padding-right: 15px; } html.boxed.sticky-header-active #header:not(.header-effect-shrink) .header-nav-bar { margin: 0 -15px -9px; } } @media (max-width: 991px) { html.boxed .body { margin: 0 auto; border-radius: 0; } } @media (max-width: 767px) { /* Boxed */ html.boxed { background: none !important; } } /* ===== มาจาก css/theme-elements.css ===== */ @charset "UTF-8"; /* Name: theme-elements.css Written by: Okler Themes - (http://www.okler.net) Theme Version: 7.2.0 */ /* Accordion */ /* Animations */ .appear-animation { opacity: 0; } .appear-animation-visible { opacity: 1; } /* Transitions */ /* Mask Up */ @-webkit-keyframes maskUp { from { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskUp { from { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* Mask Right */ @-webkit-keyframes maskRight { from { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskRight { from { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* Mask Down */ @-webkit-keyframes maskDown { from { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskDown { from { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* Mask Left */ @-webkit-keyframes maskLeft { from { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes maskLeft { from { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes headerReveal { from { top: -150px; } to { top: 0; } } @keyframes headerReveal { from { top: -150px; } to { top: 0; } } /* Fade In Up Shorter */ @-webkit-keyframes fadeInUpShorter { from { opacity: 0; -webkit-transform: translate(0, 50px); transform: translate(0, 50px); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpShorter { from { opacity: 0; -webkit-transform: translate(0, 50px); transform: translate(0, 50px); } to { opacity: 1; -webkit-transform: none; transform: none; } } /* Fade In Left Shorter */ @-webkit-keyframes fadeInLeftShorter { from { opacity: 0; -webkit-transform: translate(50px, 0); transform: translate(50px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftShorter { from { opacity: 0; -webkit-transform: translate(50px, 0); transform: translate(50px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } /* Fade In Right Shorter */ @-webkit-keyframes fadeInRightShorter { from { opacity: 0; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightShorter { from { opacity: 0; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } /* Fade In Down Shorter */ @-webkit-keyframes fadeInDownShorter { from { opacity: 0; -webkit-transform: translate(0, -50px); transform: translate(0, -50px); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownShorter { from { opacity: 0; -webkit-transform: translate(0, -50px); transform: translate(0, -50px); } to { opacity: 1; -webkit-transform: none; transform: none; } } /* Expand In */ @-webkit-keyframes expandIn { from { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes expandIn { from { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /* Gradient Transition */ @-webkit-keyframes gradientTransition { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes gradientTransition { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Slider Scroll Button Animation */ @-webkit-keyframes sliderScrollButton { 0% { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } 70% { opacity: 1; -webkit-transform: translate3d(-50%, 10px, 0); transform: translate3d(-50%, 10px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-50%, 10px, 0); transform: translate3d(-50%, 10px, 0); } } @keyframes sliderScrollButton { 0% { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } 70% { opacity: 1; -webkit-transform: translate3d(-50%, 10px, 0); transform: translate3d(-50%, 10px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-50%, 10px, 0); transform: translate3d(-50%, 10px, 0); } } /* Arrow Left Right */ @-webkit-keyframes arrowLeftRight { 0% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } 50% { -webkit-transform: translate3d(1px, 0, 0); transform: translate3d(1px, 0, 0); } 100% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } } @keyframes arrowLeftRight { 0% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } 50% { -webkit-transform: translate3d(1px, 0, 0); transform: translate3d(1px, 0, 0); } 100% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); } } /* Nav Item Arrow */ @-webkit-keyframes navItemArrow { 0% { position: relative; left: -1px; } 50% { position: relative; left: 3px; } 100% { position: relative; left: -1px; } } @keyframes navItemArrow { 0% { position: relative; left: -1px; } 50% { position: relative; left: 3px; } 100% { position: relative; left: -1px; } } /* Hover 3d Effect */ /* Arrows */ .arrow { background: transparent url(../img/arrows.png) no-repeat 0 0; width: 47px; height: 120px; display: inline-block; position: relative; } /* Responsive */ @media (max-width: 575px) { .arrow { display: none; } } /* Background Scales Overlay */ /* Background Transparent */ /* Background White and Black */ /* Labels */ .badge-primary { background-color: #CCC; color: #FFF; } .badge.badge-sm { padding: 10px 15px; } /* Circular Bars */ /* Progress */ .progress { border-radius: 25px; height: 20px; background: #FAFAFA; overflow: visible; } .progress-bar-tooltip { position: absolute; padding: 4px 8px; background-color: #333; color: #FFF; line-height: 15px; font-size: 11px; display: block; position: absolute; top: -28px; right: 5px; border-radius: 3px; opacity: 0; } .progress-bar-tooltip:after { border-color: #333 transparent; border-style: solid; border-width: 5px 5px 0; bottom: -5px; content: ""; display: block; left: 13px; position: absolute; width: 0; } /* Borders */ /* Buttons */ .btn { font-size: 17px; padding: 8.528px 14.928px; padding: 0.533rem 0.933rem; cursor: pointer; } .btn.btn-sm { font-size: 12.8px; font-size: 0.8rem; padding: 4.8px 10.4px; padding: 0.3rem 0.65rem; } .btn.btn-lg { padding: 10px 30px; border-radius: 50px; } html body .btn.focus, html body .btn:focus, html body .btn.active, html body .btn:active, html body.body .btn.focus, html body.body .btn:focus, html body.body .btn.active, html body.body .btn:active { -webkit-box-shadow: none !important; box-shadow: none !important; } /* Dropdown Buttons */ /* Default */ .btn-default { color: #333; background-color: #fff; border-color: #ccc; -webkit-box-shadow: none !important; box-shadow: none !important; } .btn-default:hover, .btn-default:active, .btn-default:focus { color: #333; background-color: #e6e6e6; border-color: #adadad; } /* Outline */ /* Modern */ /* Rounded */ /* Rounded */ /* 3d */ /* Arrow */ /* Icons */ /* Dropdown Button */ .btn.dropdown-toggle:after { margin-left: .155em; vertical-align: .155em; } /* Colors */ .btn-primary { background-color: #CCC; border-color: #CCC #CCC #b3b3b3; color: #FFF; } .btn-primary:hover, .btn-primary.hover { background-color: #dfdfdf; border-color: #e6e6e6 #e6e6e6 #CCC; color: #FFF; } .btn-primary:focus, .btn-primary.focus { -webkit-box-shadow: 0 0 0 3px rgba(204, 204, 204, 0.5); box-shadow: 0 0 0 3px rgba(204, 204, 204, 0.5); } .btn-primary.disabled, .btn-primary:disabled { background-color: #CCC; border-color: #CCC #CCC #b3b3b3; } .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle { background-color: #b9b9b9; background-image: none; border-color: #b3b3b3 #b3b3b3 #999999; } .btn-warning { background-color: #ffc107; border-color: #ffc107 #ffc107 #d39e00; color: #FFF; } .btn-warning:hover, .btn-warning.hover { background-color: #ffcb2d; border-color: #ffce3a #ffce3a #ffc107; color: #FFF; } .btn-warning:focus, .btn-warning.focus { -webkit-box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.5); box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.5); } .btn-warning.disabled, .btn-warning:disabled { background-color: #ffc107; border-color: #ffc107 #ffc107 #d39e00; } .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle { background-color: #e0a800; background-image: none; border-color: #d39e00 #d39e00 #a07800; } .btn-danger { background-color: #dc3545; border-color: #dc3545 #dc3545 #bd2130; color: #FFF; } .btn-danger:hover, .btn-danger.hover { background-color: #e25663; border-color: #e4606d #e4606d #dc3545; color: #FFF; } .btn-danger:focus, .btn-danger.focus { -webkit-box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5); box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5); } .btn-danger.disabled, .btn-danger:disabled { background-color: #dc3545; border-color: #dc3545 #dc3545 #bd2130; } .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle { background-color: #c82333; background-image: none; border-color: #bd2130 #bd2130 #921925; } .btn-info { background-color: #1067d9; color: #FFF; } .btn-info:hover, .btn-info.hover { background-color: #1bc0da; border-color: #1fc8e3 #1fc8e3 #17a2b8; color: #FFF; } .btn-info:focus, .btn-info.focus { -webkit-box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.5); box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.5); } .btn-info.disabled, .btn-info:disabled { background-color: #17a2b8; border-color: #17a2b8 #17a2b8 #117a8b; } .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle { background-color: #138496; background-image: none; border-color: #117a8b #117a8b #0c525d; } /* Button Light */ html body .btn-light { border-color: #d9d9d9 #d9d9d9 #bfbfbf; color: #777; } html body .btn-light:hover, html body .btn-light.hover { background-color: #f2f2f2; border-color: #e6e6e6 #e6e6e6 #cccccc; color: #777; } html body .btn-light:focus, html body .btn-light.focus { -webkit-box-shadow: 0 0 0 3px rgba(191, 191, 191, 0.5); box-shadow: 0 0 0 3px rgba(191, 191, 191, 0.5); } html body .btn-light.disabled, html body .btn-light:disabled { border-color: #bfbfbf #bfbfbf #bfbfbf; } html body .btn-light:active, html body .btn-light.active, .show > html body .btn-light.dropdown-toggle { border-color: #bfbfbf #bfbfbf #bfbfbf; } /* Hamburguer */ .hamburguer-btn { background: transparent; outline: 0 !important; border: none; width: 30px; height: 30px; padding: 0; margin: 15px; display: inline-block; position: relative; cursor: pointer; } .hamburguer-btn .close { opacity: 0; -webkit-transition: ease all 300ms; transition: ease all 300ms; } .hamburguer-btn .close span { position: absolute; top: 50%; left: 50%; width: 0; height: 1px; background: #333; -webkit-transition: ease all 300ms; transition: ease all 300ms; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } .hamburguer-btn .close span:nth-child(1) { -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); } .hamburguer-btn .close span:nth-child(2) { -webkit-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); } .hamburguer-btn.active .close { opacity: 1; -webkit-transition: ease all 300ms; transition: ease all 300ms; } .hamburguer-btn.active .close span { width: 80%; -webkit-transition: ease all 300ms; transition: ease all 300ms; } .hamburguer-btn.active .close span:nth-child(2) { -webkit-transition-delay: 300ms; transition-delay: 300ms; } /* Hamburguer Sticky Colors */ /* Badge */ /* Gradient */ /* Call to Action */ /* Responsive */ /* * IE 11 Fixes */ /* * IE 9 Fixes */ /* Cards */ .card { position: relative; border: 1px solid rgba(0, 0, 0, 0.06); } /* Flip Card */ /* Owl Carousel */ .owl-carousel { margin-bottom: 20px;/* Navigation */ /* Dots */ /* Image Thumbnail */ } .owl-carousel .owl-item img { -webkit-transform-style: unset; transform-style: unset; } /* Hover Items with Opacity */ /* Carousel Sync */ /* Spaced */ /* Testimonials */ /* Responsive */ /* Carousel Areas */ /* Responsive */ /* Carousel Center Active Item */ .owl-carousel.carousel-center-active-item .owl-item { opacity: 0.2; -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; } .owl-carousel.carousel-center-active-item .owl-item.current { opacity: 1 !important; } /* Grey */ /* Countdown */ .countdown { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; } .countdown > span { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; width: 25%; font-size: 16px; font-size: 1rem; line-height: 1.5; color: #777; } .countdown > span > span { display: block; font-size: 48px; font-size: 3rem; line-height: 1; color: #212529; } @media (max-width: 767px) { .countdown { -ms-flex-wrap: wrap; flex-wrap: wrap; } .countdown > span { -ms-flex-preferred-size: calc(50% - 15px); flex-basis: calc(50% - 15px); max-width: calc(50% - 15px); width: calc(50% - 15px); margin-bottom: 30px; } .countdown > span:nth-child(3), .countdown > span:nth-child(4) { margin-bottom: 0; } } @media (max-width: 576px) { .countdown > span { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; width: 100%; margin-bottom: 50px; } .countdown > span:nth-child(3) { margin-bottom: 50px; } } /* Counters */ .counters .counter { text-align: center; } .counters [class*="fa-"] { display: block; font-size: 35px; line-height: 35px; margin-bottom: 5px; } .counters strong { display: block; font-weight: bold; font-size: 50px; line-height: 50px; } .counters label { display: block; font-weight: 100; font-size: 20px; line-height: 20px; } /* Dividers */ hr { background: rgba(0, 0, 0, 0.06); border: 0; height: 1px; margin: 22px 0; } hr.solid { background: rgba(0, 0, 0, 0.06); } hr.light { background: rgba(255, 255, 255, 0.15); } hr.pattern { background: none; position: relative; } hr.pattern:after { background: transparent url(../img/patterns/worn_dots.png) repeat 0 0; content: ""; display: block; height: 15px; position: absolute; top: 50%; margin-top: -7px; width: 100%; } @-webkit-keyframes dividerProgress25 { from { width: 0; } to { width: 25%; } } @keyframes dividerProgress25 { from { width: 0; } to { width: 25%; } } /* Dropdowns */ /* Icon Featured */ /* Featured Box */ .featured-box { background: #FFF; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #DFDFDF; border-left: 1px solid #ECECEC; border-radius: 8px; border-right: 1px solid #ECECEC; -webkit-box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.05); margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; min-height: 100px; position: relative; text-align: center; z-index: 1; } .featured-box h4 { font-size: 1.3em; font-weight: 400; letter-spacing: -0.7px; margin-top: 5px; margin-bottom: 5px; } /* Featured Box Left */ /* Featured Boxes - Flat */ /* Featured Boxes - Style 2 */ /* Featured Boxes - Style 3 */ /* Featured Boxes - Style 4 */ /* Featured Boxes - Style 5, 6 and 7 */ /* Featured Boxes - Style 6 */ /* Featured Boxes - Style 7 */ /* Featured Boxes - Style 8 */ /* Featured Boxes Modern */ /* Featured Boxes */ .featured-boxes .featured-box { margin-bottom: 24px; margin-bottom: 1.5rem; margin-top: 24px; margin-top: 1.5rem; } /* Effects */ @-webkit-keyframes toRightFromLeft { 49% { -webkit-transform: translate(100%); transform: translate(100%); } 50% { opacity: 0; -webkit-transform: translate(-100%); transform: translate(-100%); } 51% { opacity: 1; } } @keyframes toRightFromLeft { 49% { -webkit-transform: translate(100%); transform: translate(100%); } 50% { opacity: 0; -webkit-transform: translate(-100%); transform: translate(-100%); } 51% { opacity: 1; } } /* Feature Box */ /* Style 2 */ /* Style 3 */ /* Style 4 */ /* Style 5 */ /* Style 6 */ /* Feature Box Icon Size */ /* Reverse All Resolutions */ /* Reverse */ /* Full Width */ /* * IE */ .flag { width: 16px; height: 11px; background: url(../img/flags.png) no-repeat; } /* Forms */ form label { font-weight: normal; } textarea { resize: vertical; } select { border: 1px solid #E5E7E9; border-radius: 6px; outline: none; } .label { font-weight: normal; } label.required:after { content: "*"; font-size: 0.8em; margin: 0.3em; position: relative; top: -2px; } .form-control { border-color: rgba(0, 0, 0, 0.09); } .form-control:not(.form-control-lg) { font-size: 12px; font-size: 0.75rem; line-height: 1.3; } .form-control:not(.form-control-sm):not(.form-control-lg) { font-size: 15px; } .form-control:focus { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; border-color: #CCC; } .form-control.error { border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .form-control.error:focus { border-color: #843534; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; } /* Form - iOS Override */ input[type="text"], input[type="password"], input[type="datetime"], input[type="date"], input[type="time"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], textarea { -webkit-appearance: none; } .form-control::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="datetime"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="time"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="color"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #bdbdbd; } .form-control::-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="datetime"]::-moz-placeholder, input[type="date"]::-moz-placeholder, input[type="time"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="color"]::-moz-placeholder, textarea::-moz-placeholder { color: #bdbdbd; } .form-control:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="datetime"]:-ms-input-placeholder, input[type="date"]:-ms-input-placeholder, input[type="time"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="url"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="color"]:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #bdbdbd; } /* Form - Bootstrap Override */ .btn-lg { line-height: 1.334; } /* Forms Validations */ label.error { color: #c10000; font-size: 0.9em; line-height: 18px; padding: 5px 0 0; } /* Simple Search */ /* Captcha */ .captcha { clear: both; overflow: hidden; background: #F2F2F2; text-align: center; margin-bottom: 20px; max-width: 160px; height: 78px; position: relative; } .captcha input { border: 0; } .captcha-image { float: left; position: relative; top: -5px; left: -13px; } /* Form Styles */ /* Headings */ h1.small { font-size: 2.2em; line-height: 42px; font-weight: 600; } h1.dark, h2.dark, h3.dark, h4.dark, h5.dark { color: #212529; } h1.light, h2.light, h3.light, h4.light, h5.light { color: #FFF; } /* Heading */ /* Modal Titles */ /* Responsive */ @media (max-width: 575px) { h2 { line-height: 50px; } } /* Icons */ /* Font Awesome List */ /* Simple Line Icons List */ /* Porto Icons */ /* Area Expanded Change */ /* Icon Animated */ /* Elements Sahadow Icon */ /* Thumbnails */ .img-thumbnail { border-radius: 4px; position: relative; } .img-thumbnail img { border-radius: 4px; } /* Image Gallery */ /* Thumbnail Gallery */ /* Responsive */ /* Masonry */ /* Masonry Loading */ .masonry-loader { height: auto; overflow: visible; position: relative; } .masonry-loader:after { -webkit-transition: all 0.5s; transition: all 0.5s; content: ' '; background: #FFF; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 1; opacity: 0; } .masonry-loader .bounce-loader { display: none; } .masonry-loader.masonry-loader-showing { height: 200px; overflow: hidden; } .masonry-loader.masonry-loader-showing:after { opacity: 1; } .masonry-loader.masonry-loader-showing .bounce-loader { display: block; } .masonry-loader.masonry-loader-loaded:after { display: none; } /* Mockup */ /* Hover Effect 3d */ .hover-effect-3d .thumb-info { will-change: box-shadow; -webkit-transition: -webkit-box-shadow 300ms; transition: -webkit-box-shadow 300ms; transition: box-shadow 300ms; transition: box-shadow 300ms, -webkit-box-shadow 300ms; } .hover-effect-3d .thumb-info:hover { -webkit-box-shadow: 0px 17px 20px -15px rgba(33, 37, 41, 0.6); box-shadow: 0px 17px 20px -15px rgba(33, 37, 41, 0.6); } .hover-effect-3d .thumb-info .thumb-info-title { -webkit-transition: ease-out opacity .2s !important; transition: ease-out opacity .2s !important; } .hover-effect-3d .thumb-info .thumb-info-action { -webkit-transition: ease-out opacity .2s !important; transition: ease-out opacity .2s !important; } .hover-effect-3d .thumb-info .thumb-info-action .thumb-info-action-icon { pointer-events: none; } .hover-effect-3d .thumb-info.thumb-info-centered-info .thumb-info-title { top: 35%; } /* Arrows */ /* Close */ /* No Margins */ /* Zoom */ /* Animnate */ /* Fade */ /* Dialog */ .dialog { background: white; padding: 20px 30px; text-align: left; margin: 40px auto; position: relative; max-width: 600px; } /* White Popup Block */ /* Lightbox Opened */ html.lightbox-opened.sticky-header-active #header .header-body { padding-right: 17px; } /* Modal Opened */ .modal-open { padding-right: 0 !important; } /* List */ .list li { margin-bottom: 13px; } .list.list-unstyled { padding-left: 0; padding-right: 0; } .list-unstyled { padding-left: 0; padding-right: 0; } /* Sitemap */ ul.sitemap > li > a { font-weight: bold; } ul.sitemap.list li { margin: 0 0 3px 0; } ul.sitemap.list ul { margin-bottom: 5px; margin-top: 5px; } /* Loading Overlay */ .loading-overlay-showing { overflow: hidden; } .loading-overlay-showing > .loading-overlay { opacity: 1; visibility: visible; } .loading-overlay { -webkit-transition: visibility 0s ease-in-out 0.5s, opacity 0.5s ease-in-out; transition: visibility 0s ease-in-out 0.5s, opacity 0.5s ease-in-out; bottom: 0; left: 0; position: absolute; opacity: 0; right: 0; top: 0; visibility: hidden; background: #FFF; } body > .loading-overlay { position: fixed; z-index: 999999; } /* Bounce Loading */ .bounce-loader { -webkit-transition: all 0.2s; transition: all 0.2s; margin: -9px 0 0 -35px; text-align: center; width: 70px; left: 50%; position: absolute; top: 50%; z-index: 10000; } .bounce-loader .bounce1, .bounce-loader .bounce2, .bounce-loader .bounce3 { -webkit-animation: 1.4s ease-in-out 0s normal both infinite bouncedelay; animation: 1.4s ease-in-out 0s normal both infinite bouncedelay; background-color: #CCC; border-radius: 100%; -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); display: inline-block; height: 18px; width: 18px; } .bounce-loader .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .bounce-loader .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } /* Maps */ /* Google Map */ /* Clearfix */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } /* Container */ /* Fluid Col */ /* Min Height */ /* Hide Text */ /* Box Shadow */ /* Border Radius */ .border-radius { border-radius: 4px !important; } /* Sample Item */ /* Sample Sub Items Lightbox */ /* Magnific Popup Demo Options */ /* Pagination */ .pagination { position: relative; z-index: 1; } .pagination > li > a, .pagination > li > span, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: #CCC; -webkit-box-shadow: none !important; box-shadow: none !important; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #CCC; border-color: #CCC; -webkit-box-shadow: none !important; box-shadow: none !important; } /* Read More */ /* Offset Anchor */ /* Responsive */ /* Show Grid */ /* Alerts */ .alert [class*="fa-"] { margin-right: 8px; font-size: 1.1em; } .alert ul { padding: 0; margin: 7px 0 0 40px; } .alert ul li { font-size: 0.9em; } /* Embed Responsive */ /* Half Section */ /* Content Grid */ /* Alert Admin */ /* Not Included */ /* Tip */ /* Ajax Box */ /* Go to Demos */ /* Notice Top Bar */ .notice-top-bar { position: fixed; top: 0; left: 0; width: 100%; background: #d01a34; z-index: -1; } /* Hover effetcs */ .hover-effect-1.portfolio-item .thumb-info { -webkit-box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0); box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0); -webkit-transition: ease box-shadow 300ms; transition: ease box-shadow 300ms; } .hover-effect-1.portfolio-item:hover .thumb-info, .hover-effect-1.portfolio-item.show .thumb-info { -webkit-box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.4); box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.4); } /* Border Radius */ /* Sticky Wrapper */ .sticky-wrapper { position: fixed; width: 100% !important; z-index: 11; } .sticky-wrapper .sticky-body { display: -webkit-box; display: -ms-flexbox; display: flex; background: #FFF; width: 100%; z-index: 10; -webkit-transition: ease background 300ms; transition: ease background 300ms; } .sticky-wrapper.sticky-wrapper-transparent .sticky-body { background: transparent; } .sticky-wrapper.sticky-wrapper-effect-1 { position: absolute !important; } .sticky-wrapper.sticky-wrapper-effect-1.sticky-effect-active .sticky-body { position: fixed; background: #FFF; -webkit-animation: headerReveal 0.4s ease-in; animation: headerReveal 0.4s ease-in; } /* Highlighted Word */ @-webkit-keyframes pencilAnimation { from { width: 0; } to { width: 74px; } } @keyframes pencilAnimation { from { width: 0; } to { width: 74px; } } /* Curved Border */ /* Vertical Divider */ /* Popup */ /* Nav */ .nav > li > a:hover, .nav > li > a:focus { background: transparent; } /* Nav List */ /* Nav Pills */ /* Nav Light */ /* Nav Active Style - Active Bottom Border */ /* Nav Secondary */ /* Boxed */ /* Section Scroll - Dots Navigation */ .section-scroll-dots-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: fixed; top: 50%; right: 30px; background: #FFF; border-radius: 35px; padding: 9.6px; padding: 0.6rem; z-index: 10; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .section-scroll-dots-navigation > ul { margin: 8px 0; margin: 0.5rem 0; } .section-scroll-dots-navigation > ul:hover > li.active:hover > a > span { opacity: 1; visibility: visible; } .section-scroll-dots-navigation > ul:hover > li.active > a > span { opacity: 0; visibility: hidden; } .section-scroll-dots-navigation > ul > li { position: relative; margin-bottom: 4.8px; margin-bottom: 0.3rem; } .section-scroll-dots-navigation > ul > li:last-child { margin-bottom: 0; } .section-scroll-dots-navigation > ul > li:hover { background: transparent; } .section-scroll-dots-navigation > ul > li:hover > a > span { opacity: 1; visibility: visible; } .section-scroll-dots-navigation > ul > li.active > a:before { opacity: 1; } .section-scroll-dots-navigation > ul > li > a { position: relative; width: 15px; height: 15px; display: block; padding: 4.8px; padding: 0.3rem; } .section-scroll-dots-navigation > ul > li > a:before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); width: 8px; height: 8px; border-radius: 100%; opacity: 0.3; background: #CCC; -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; } .section-scroll-dots-navigation > ul > li > a > span { position: absolute; top: 50%; right: calc(100% + 20px); background: #FFF; color: #212529; font-size: 12.8px; font-size: 0.8rem; font-weight: 800; padding: 3.2px 16px; padding: 0.2rem 1rem; border-radius: 4px; white-space: nowrap; opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -webkit-transition: ease opacity 300ms; transition: ease opacity 300ms; } .section-scroll-dots-navigation > ul > li > a > span:after { content: ''; position: absolute; top: 50%; left: 100%; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #F7F7F7; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } @media (max-width: 767px) { .section-scroll-dots-navigation { right: 15px; } } /* Overlays */ .overlay { position: relative;/* Backward */ } .overlay:before { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background: #212529; opacity: 0; pointer-events: none; -webkit-transition: ease opacity 300ms 100ms; transition: ease opacity 300ms 100ms; } .overlay:hover:before, .overlay.show:before { opacity: 0.8; } .overlay .container { position: relative; z-index: 3; } /* Overlay Colors */ /* Parallax */ .parallax { background-color: transparent; background-position: 50% 50%; background-repeat: repeat; background-attachment: fixed; position: relative; clear: both; } .parallax:not(.page-header):not(.match-height):not([class*="section-height-"]) { margin: 70px 0; padding: 50px 0; } .parallax blockquote { border: 0; padding: 0 10%; } .parallax blockquote i.fa-quote-left { font-size: 34px; position: relative; left: -5px; } .parallax blockquote p { font-size: 24px; line-height: 30px; } .parallax blockquote span { font-size: 16px; line-height: 20px; color: #999; position: relative; left: -5px; } .parallax-disabled .parallax-background { background-attachment: scroll !important; background-position: 50% 50% !important; } /* Pricing Tables */ /* Process */ .process { text-align: center; } /* Scroll to Top */ html .scroll-to-top { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; background: #404040; border-radius: 4px 4px 0 0; bottom: 0; color: #FFF; display: block; height: 9px; opacity: 0; padding: 10px 10px 35px; position: fixed; right: 10px; text-align: center; text-decoration: none; min-width: 50px; z-index: 1040; font-size: 0.8em; } html .scroll-to-top:hover { opacity: 1; } html .scroll-to-top.visible { opacity: 0.75; } html .scroll-to-top span { display: inline-block; padding: 0 5px; } html.lightbox-opened .scroll-to-top { right: 27px; } html.ie11 .scroll-to-top { right: 25px; } /* Responsive */ @media (max-width: 991px) { html .scroll-to-top.hidden-mobile { display: none !important; } } /* Scrollable */ .scrollable { overflow: hidden; position: relative; width: 100%; } .scrollable .scrollable-content { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; padding: 0 37px 0 0; overflow-x: hidden; overflow-y: scroll; outline: none; } .scrollable .scrollable-content::-webkit-scrollbar { visibility: hidden; } .scrollable .scrollable-pane { bottom: 0; opacity: 0.01; position: absolute; right: 5px; top: 0; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; width: 4px; } .scrollable .scrollable-slider { border-radius: 5px; background: none repeat scroll 0 0 #CCC; margin: 0; position: relative; -webkit-transition: opacity 0.2s ease 0s; transition: opacity 0.2s ease 0s; opacity: 0; } .scrollable:hover .scrollable-slider { opacity: 1; } /* Section Featured */ section.section { margin: 30px 0; padding: 50px 0; } section.section.section-height-1 { padding: 12.307px 0; padding: 0.7692307692rem 0; } section.section.section-height-2 { padding: 36.923px 0; padding: 2.3076923077rem 0; } section.section.section-height-3 { padding: 73.846px 0; padding: 4.6153846154rem 0; } section.section.section-height-4 { padding: 110.769px 0; padding: 6.9230769231rem 0; } section.section.section-height-5 { padding: 147.692px 0; padding: 9.2307692308rem 0; } /* Responsive */ /* Sidebar */ aside .twitter [class*="fa-"] { clear: both; font-size: 1.5em; position: relative; top: 3px; margin-right: -22px; left: -30px; color: #212529; } aside .twitter .meta { display: block; font-size: 0.9em; padding-top: 3px; } aside .twitter ul { list-style: none; margin: 0; padding: 0; } aside .twitter ul li { padding-bottom: 20px; padding-left: 30px; } aside .twitter ul li:last-child { padding-bottom: 0; } /* Home Slider - Revolution Slider */ .slider-container { background: #151719; height: 500px; overflow: hidden; width: 100%; direction: ltr; } .slider-container.transparent { background-color: transparent; } .slider-container.light { background-color: #EAEAEA; } /* Revolution Slider Typewriter Addon */ /* Slider With Overlay */ /* Slider Scroll Button */ /* Arrows */ /* Bullets */ /* Slider IE Fix */ /* Embed Border */ /* Defaults */ /* Slider With Overlay */ /* Slider Contact Form */ /* Responsive */ /* Boxed */ html.boxed .slider-container { width: 100% !important; left: auto !important; } /* Home Slider - Nivo Slider */ /* Side Header - Full Screen Slider Height On Mobile */ @media (max-width: 991px) { html.side-header .slider-container.fullscreen-slider { height: calc(100vh - 84px) !important; } } /* Social Icons */ /* Sort Source Wrapper */ /* Sort Source */ .sort-source { clear: both; } .sort-source > li > a { padding: 6px 12px; text-decoration: none; } /* Sort Source Style 2 */ /* Sort Source Style 3 */ /* Sort Destination */ .sort-destination { overflow: hidden; } .sort-destination .isotope-item { min-width: 1px; } .sort-destination.full-width .isotope-item .thumb-info img { border-radius: 0; } /* Sort Loading */ .sort-destination-loader { height: auto; overflow: hidden; position: relative; } .sort-destination-loader:after { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; content: ' '; background: #FFF; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 1; opacity: 0; } .sort-destination-loader .bounce-loader { display: none; } .sort-destination-loader.sort-destination-loader-showing { max-height: 200px; } .sort-destination-loader.sort-destination-loader-showing:after { opacity: 1; } .sort-destination-loader.sort-destination-loader-showing .bounce-loader { display: block; } .sort-destination-loader.sort-destination-loader-loaded { overflow: visible; } .sort-destination-loader.sort-destination-loader-loaded:after { display: none; } /* Responsive */ @media (min-width: 992px) { .col-md-4.isotope-item:nth-child(3n+1) { clear: both; } .col-md-3.isotope-item:nth-child(4n+1) { clear: both; } .col-md-2.isotope-item:nth-child(6n+1) { clear: both; } } @media (max-width: 991px) { .sort-destination.isotope { overflow: visible !important; height: auto !important; } } @media (max-width: 767px) { .isotope-item { position: static !important; text-align: center; width: 100%; margin-left: auto; margin-right: auto; -webkit-transform: none !important; transform: none !important; } .isotope-item.product { position: relative !important; } .sort-destination { height: auto !important; } } /* Tables */ .table td, .table th { border-color: rgba(0, 0, 0, 0.06); } .table > thead > tr > td.primary, .table > tbody > tr > td.primary, .table > thead > tr > th.primary, .table > tbody > tr > th.primary, .table > thead > tr.primary > td, .table > tbody > tr.primary > td, .table > thead > tr.primary > th, .table > tbody > tr.primary > th { background-color: #CCC; color: #FFF; } .table > thead > tr > td.success, .table > tbody > tr > td.success, .table > thead > tr > th.success, .table > tbody > tr > th.success, .table > thead > tr.success > td, .table > tbody > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr.success > th { background-color: #28a745; color: #FFF; } .table > thead > tr > td.info, .table > tbody > tr > td.info, .table > thead > tr > th.info, .table > tbody > tr > th.info, .table > thead > tr.info > td, .table > tbody > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr.info > th { background-color: #17a2b8; color: #FFF; } .table > thead > tr > td.dark, .table > tbody > tr > td.dark, .table > thead > tr > th.dark, .table > tbody > tr > th.dark, .table > thead > tr.dark > td, .table > tbody > tr.dark > td, .table > thead > tr.dark > th, .table > tbody > tr.dark > th { background-color: #212529; color: #FFF; } /* Tabs */ /* Right Aligned */ /* Bottom Tabs */ /* Vertical */ /* Vertical - Left Side */ /* Vertical - Right Side */ /* Justified */ /* Bottom Tabs with Justified Nav */ /* Center */ /* Navigation */ /* Simple */ /* Responsive */ /* Testimonials */ /* Style 2 */ /* Style 3 */ /* Style 4 */ /* Style 5 */ /* Style 6 */ /* Style 7 */ /* With Quotes */ /* Transparent Background */ /* Alternarive Font */ /* Light */ /* Thumb Info */ .thumb-info .thumb-info-wrapper { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); border-radius: 4px; margin: 0; overflow: hidden; display: block; position: relative; } .thumb-info .thumb-info-wrapper.thumb-info-wrapper-demos { max-height: 330px; } .thumb-info .thumb-info-wrapper-opacity-0:after { opacity: 0.0; } .thumb-info .thumb-info-wrapper-opacity-1:after { opacity: 0.1; } .thumb-info .thumb-info-wrapper-opacity-2:after { opacity: 0.2; } .thumb-info .thumb-info-wrapper-opacity-3:after { opacity: 0.3; } .thumb-info .thumb-info-wrapper-opacity-4:after { opacity: 0.4; } .thumb-info .thumb-info-wrapper-opacity-5:after { opacity: 0.5; } .thumb-info .thumb-info-wrapper-opacity-6:after { opacity: 0.6; } .thumb-info .thumb-info-wrapper-opacity-7:after { opacity: 0.7; } .thumb-info .thumb-info-wrapper-opacity-8:after { opacity: 0.8; } .thumb-info .thumb-info-wrapper-opacity-9:after { opacity: 0.9; } .thumb-info .thumb-info-action-icon { -webkit-transition: all 0.3s; transition: all 0.3s; background: #CCC; border-radius: 0 0 0 4px; display: inline-block; font-size: 25px; height: 50px; line-height: 50px; position: absolute; right: -100px; text-align: center; top: -100px; width: 50px; z-index: 2; } .thumb-info .thumb-info-action-icon i { font-size: 14px; right: 50%; position: absolute; top: 50%; color: #FFF; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); margin: -2px -1px 0 0px; } .thumb-info .thumb-info-inner em { display: block; font-size: 0.8em; font-style: normal; font-weight: normal; } .thumb-info .thumb-info-title { -webkit-transition: all 0.3s; transition: all 0.3s; background: rgba(33, 37, 41, 0.8); color: #FFF; left: 0; position: absolute; z-index: 2; max-width: 90%; font-size: 16px; line-height: 24px; padding: 13px 21px 2px; bottom: 13%; } .thumb-info .thumb-info-type { background-color: #CCC; border-radius: 2px; display: inline-block; float: left; font-size: 13px; letter-spacing: 0; margin: 8px -2px -15px 0px; padding: 2px 12px; text-transform: uppercase; z-index: 2; line-height: 2.3; } .thumb-info .owl-carousel { z-index: auto; } .thumb-info .owl-carousel .owl-dots { z-index: 2; } .thumb-info img { /*-webkit-transition: all 0.3s ease; transition: all 0.3s ease;*/ border-radius: 3px; position: relative; width: 100%; } .thumb-info:hover .thumb-info-wrapper:after { opacity: 1; } .thumb-info:hover .thumb-info-action-icon { right: 0; top: 0; } .thumb-info:hover .thumb-info-title { background: rgba(33, 37, 41, 0.9); } .thumb-info:hover img { /*-webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);*/ } .thumb-info.thumb-info-no-zoom img { -webkit-transition: none; transition: none; } .thumb-info.thumb-info-no-zoom:hover img { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .thumb-info.thumb-info-lighten .thumb-info-wrapper:after { background: rgba(23, 23, 23, 0.25); } .thumb-info.thumb-info-hide-wrapper-bg .thumb-info-wrapper:after { display: none; } .thumb-info.thumb-info-centered-icons .thumb-info-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 50%; left: 0; right: auto; bottom: auto; width: 100%; height: 45px; text-align: center; opacity: 0; -webkit-transition: opacity .2s ease-out, -webkit-transform .2s ease-out; transition: opacity .2s ease-out, -webkit-transform .2s ease-out; transition: transform .2s ease-out, opacity .2s ease-out; transition: transform .2s ease-out, opacity .2s ease-out, -webkit-transform .2s ease-out; -webkit-transform: translate3d(0, -70%, 0); transform: translate3d(0, -70%, 0); z-index: 2; } .thumb-info.thumb-info-centered-icons .thumb-info-action a { text-decoration: none; } .thumb-info.thumb-info-centered-icons .thumb-info-action-icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 35px; height: 35px; font-size: 14px; border-radius: 50%; margin-right: 5px; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; z-index: 2; } .thumb-info.thumb-info-centered-icons .thumb-info-action-icon i { margin: 0; } .thumb-info.thumb-info-centered-icons .thumb-info-action-icon:hover { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); } .thumb-info:hover.thumb-info-centered-icons .thumb-info-action { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .thumb-info:hover.thumb-info-centered-icons .thumb-info-action-icon { position: relative; } .thumb-info.thumb-info-centered-info .thumb-info-title { background: transparent; left: 5%; width: 90%; -webkit-transition: opacity .2s ease-out, -webkit-transform .2s ease-out; transition: opacity .2s ease-out, -webkit-transform .2s ease-out; transition: transform .2s ease-out, opacity .2s ease-out; transition: transform .2s ease-out, opacity .2s ease-out, -webkit-transform .2s ease-out; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); top: 50%; bottom: auto; opacity: 0; text-align: center; padding: 0; position: absolute; } .thumb-info.thumb-info-centered-info .thumb-info-type { float: none; } .thumb-info.thumb-info-centered-info:hover .thumb-info-title { opacity: 1; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } .thumb-info.thumb-info-bottom-info .thumb-info-title { background: #FFF; left: 0; width: 100%; max-width: 100%; -webkit-transition: opacity .2s ease-out, -webkit-transform .2s ease-out; transition: opacity .2s ease-out, -webkit-transform .2s ease-out; transition: transform .2s ease-out, opacity .2s ease-out; transition: transform .2s ease-out, opacity .2s ease-out, -webkit-transform .2s ease-out; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); top: auto; bottom: 0; opacity: 0; padding: 15px; text-shadow: none; color: #777; } .thumb-info.thumb-info-bottom-info .thumb-info-type { float: none; background: none; padding: 0; margin: 0; } .thumb-info.thumb-info-bottom-info:hover .thumb-info-title { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .thumb-info.thumb-info-bottom-info:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .thumb-info.thumb-info-bottom-info-linear .thumb-info-title { background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255, 255, 255, 0.8)), to(transparent)) repeat scroll 0 0 rgba(255, 255, 255, 0); background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0, transparent 100%) repeat scroll 0 0 rgba(255, 255, 255, 0); } .thumb-info.thumb-info-bottom-info-dark .thumb-info-title { background: #212529; color: #FFF; } .thumb-info.thumb-info-bottom-info-dark-linear .thumb-info-title { background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(33, 37, 41, 0.8)), to(transparent)) repeat scroll 0 0 rgba(0, 0, 0, 0); background: linear-gradient(to top, rgba(33, 37, 41, 0.8) 0, transparent 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); } .thumb-info.thumb-info-bottom-info-show-more img { -webkit-transform: none !important; transform: none !important; } .thumb-info.thumb-info-bottom-info-show-more .thumb-info-title { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .thumb-info.thumb-info-bottom-info-show-more .thumb-info-show-more-content { -webkit-transition: ease max-height 800ms; transition: ease max-height 800ms; overflow: hidden; max-height: 0; display: block; } .thumb-info.thumb-info-bottom-info-show-more:hover .thumb-info-show-more-content { max-height: 300px; } .thumb-info.thumb-info-push-hor img { -webkit-transform: translatex(-18px); transform: translatex(-18px); width: calc(100% + 19px); max-width: none; } .thumb-info.thumb-info-push-hor:hover img { -webkit-transform: translatex(0); transform: translatex(0); } .thumb-info.thumb-info-block .thumb-info-action-icon { top: 15px; right: 15px; opacity: 0; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .thumb-info.thumb-info-block .thumb-info-wrapper:before { content: ""; background: rgba(255, 255, 255, 0.9); -webkit-transition: all 0.3s; transition: all 0.3s; border-radius: 0; bottom: 16px; bottom: 1rem; color: #FFF; left: 16px; left: 1rem; position: absolute; right: 16px; right: 1rem; top: 16px; top: 1rem; display: block; opacity: 0; z-index: 2; } .thumb-info.thumb-info-block:hover .thumb-info-wrapper:before { opacity: 1; } .thumb-info.thumb-info-block:hover .thumb-info-action-icon { opacity: 1; } .thumb-info.thumb-info-block.thumb-info-block-dark .thumb-info-wrapper:before { background: rgba(33, 37, 41, 0.9); } .thumb-info.thumb-info-hide-info-hover .thumb-info-wrapper:after { opacity: 0.65; } .thumb-info.thumb-info-hide-info-hover .thumb-info-title { opacity: 1; top: 50%; } .thumb-info.thumb-info-hide-info-hover .thumb-info-type { float: none; } .thumb-info.thumb-info-hide-info-hover:hover .thumb-info-wrapper:after { opacity: 0.1; } .thumb-info.thumb-info-hide-info-hover:hover .thumb-info-title { opacity: 0; } .thumb-info.thumb-info-slide-info-hover .thumb-info-wrapper:after { opacity: 0.65; } .thumb-info.thumb-info-slide-info-hover .thumb-info-wrapper-no-opacity:after { opacity: 1; } .thumb-info.thumb-info-slide-info-hover .thumb-info-title { opacity: 1; top: 0; height: 100%; top: 0; -webkit-transform: none !important; transform: none !important; } .thumb-info.thumb-info-slide-info-hover .thumb-info-type { float: none; } .thumb-info.thumb-info-slide-info-hover .thumb-info-slide-info-hover-1, .thumb-info.thumb-info-slide-info-hover .thumb-info-slide-info-hover-2 { -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) top 500ms; transition: cubic-bezier(0.55, 0, 0.1, 1) top 500ms; position: absolute; left: 0; width: 100%; text-align: center; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } .thumb-info.thumb-info-slide-info-hover .thumb-info-slide-info-hover-2 { top: 150%; } .thumb-info.thumb-info-slide-info-hover:hover .thumb-info-slide-info-hover-1 { top: -50%; } .thumb-info.thumb-info-slide-info-hover:hover .thumb-info-slide-info-hover-2 { top: 50%; } .thumb-info.thumb-info-no-borders .thumb-info-wrapper { border: 0; padding: 0; margin: 0; border-radius: 0; } .thumb-info.thumb-info-no-borders .thumb-info-wrapper:after { border-radius: 0; bottom: 0; left: 0; right: 0; top: 0; } .thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded, .thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded img, .thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded .thumb-info-wrapper, .thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded .thumb-info-wrapper:after { border-radius: 4px; } .thumb-info.thumb-info-preview .thumb-info-wrapper:after { display: none; } .thumb-info.thumb-info-preview .thumb-info-image { min-height: 232px; display: block; background-position: center top; background-repeat: no-repeat; background-size: 100% auto; position: relative; -webkit-transition: background-position 0.8s linear 0s; transition: background-position 0.8s linear 0s; } .thumb-info.thumb-info-preview:hover .thumb-info-image { -webkit-transition: background-position 2.5s linear 0s; transition: background-position 2.5s linear 0s; background-position: center bottom; } .thumb-info.thumb-info-preview.thumb-info-preview-short:hover .thumb-info-image { -webkit-transition: background-position 1s linear 0s; transition: background-position 1s linear 0s; } .thumb-info.thumb-info-preview.thumb-info-preview-long:hover .thumb-info-image { -webkit-transition: background-position 5s linear 0s; transition: background-position 5s linear 0s; } .thumb-info.thumb-info-no-overlay .thumb-info-wrapper:after { content: none; } .thumb-info.thumb-info-no-bg { background: transparent; } /* Thumb Info Ribbon */ .thumb-info-ribbon { background: #999; position: absolute; margin: -16px 0 0 0; padding: 5px 13px 6px; right: 15px; z-index: 1; } .thumb-info-ribbon:before { border-right: 10px solid #646464; border-top: 16px solid transparent; content: ""; display: block; height: 0; left: -10px; position: absolute; top: 0; width: 7px; } .thumb-info-ribbon span { color: #FFF; font-size: 1.1em; font-family: "Shadows Into Light", cursive; } /* Thumb Info - Full Width */ .full-width .thumb-info img { border-radius: 0 !important; } /* Thumb Info Caption */ .thumb-info-caption { padding: 10px 0; } .thumb-info-caption .thumb-info-caption-text, .thumb-info-caption p { font-size: 0.9em; margin: 0; padding: 15px 0; display: block; } /* Thumb Info Side Image */ .thumb-info-side-image .thumb-info-side-image-wrapper { padding: 0; float: left; margin-right: 20px; } .thumb-info-side-image-right .thumb-info-side-image-wrapper { float: right; margin-left: 20px; margin-right: 0; } /* Thumb Info Social Icons */ .thumb-info-social-icons { margin: 0; padding: 0; display: block; } .thumb-info-social-icons a { background: #CCC; border-radius: 25px; display: inline-block; height: 30px; line-height: 30px; text-align: center; width: 30px; } .thumb-info-social-icons a:hover { text-decoration: none; } .thumb-info-social-icons a span { display: none; } .thumb-info-social-icons a i { color: #FFF; font-size: 0.9em; font-weight: normal; } /* Responsive */ @media (max-width: 991px) { .thumb-info .thumb-info-title { font-size: 14px; } .thumb-info .thumb-info-more { font-size: 11px; } } /* Timeline */ section.timeline { width: 100%; margin: 50px 0 0; position: relative; float: left; padding-bottom: 120px; } section.timeline:before { background: #505050; background: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 0)), color-stop(8%, #505050), color-stop(92%, #505050), to(rgba(80, 80, 80, 0))); background: linear-gradient(to bottom, rgba(80, 80, 80, 0) 0%, #505050 8%, #505050 92%, rgba(80, 80, 80, 0) 100%); content: ""; display: block; height: 100%; left: 50%; margin-left: -2px; position: absolute; top: -60px; width: 3px; z-index: 0; filter: alpha(opacity=35); opacity: 0.35; } @media (max-width: 767px) { section.timeline { width: 100%; margin: 0; } } @media (max-width: 575px) { section.timeline { width: auto; float: none; margin-left: 0; margin-right: 0; } } /* Toggles */ .toggle { margin: 10px 0 20px; position: relative; clear: both; } .toggle .toggle { margin: 10px 0 0; } .toggle > input { cursor: pointer; filter: alpha(opacity=0); height: 45px; margin: 0; opacity: 0; position: absolute; width: 100%; z-index: 2; } .toggle > label { -webkit-transition: all .15s ease-out; transition: all .15s ease-out; background: #f7f7f7; border-left: 3px solid #CCC; border-radius: 5px; color: #CCC; display: block; min-height: 20px; padding: 12px 20px 12px 10px; position: relative; cursor: pointer; font-weight: 400; } .toggle > label:-moz-selection { background: none; } .toggle > label i.fa-minus { display: none; } .toggle > label i.fa-plus { display: inline; } .toggle > label:selection { background: none; } .toggle > label:before { content: " "; position: absolute; top: calc(50% + 1px); right: 14px; border-color: #CCC; border-top: 1px solid; border-right: 1px solid; width: 8px; height: 8px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: top 0.3s, -webkit-transform 0.3s; transition: top 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, top 0.3s; transition: transform 0.3s, top 0.3s, -webkit-transform 0.3s; -webkit-transform: rotate(-45deg) translate3d(0, -50%, 0); transform: rotate(-45deg) translate3d(0, -50%, 0); -webkit-transform-origin: 35%; transform-origin: 35%; } .toggle > label:hover { background: #f5f5f5; } .toggle > label + p { color: #999; display: block; overflow: hidden; padding-left: 30px; text-overflow: ellipsis; white-space: nowrap; height: 25px; } .toggle > label i { font-size: 0.7em; margin-right: 8px; position: relative; top: -1px; } .toggle > .toggle-content { display: none; } .toggle > .toggle-content > p { margin-bottom: 0; padding: 10px 0; } .toggle.active i.fa-minus { display: inline; } .toggle.active i.fa-plus { display: none; } .toggle.active > label { background: #f7f7f7; border-color: #CCC; } .toggle.active > label:before { top: calc(50% - 8px); -webkit-transform: rotate(135deg); transform: rotate(135deg); } .toggle.active > p { white-space: normal; } .toggle > p.preview-active { height: auto; white-space: normal; } /* Blockquotes */ blockquote { border-left: 5px solid #eee; margin: 0 0 16px 0; margin: 0 0 1rem 0; padding: 8px 16px; padding: 0.5rem 1rem; font-size: 1em; } /* Small */ small, .small { font-size: 70%; } /* Paragraphs */ p { color: #666; line-height: 22px; margin: 0 0 20px; } /* Lead */ /* Links */ a, a:hover, a:focus { color: #CCC; } /* Drop Caps */ /* Default Font Style */ /* Alternative Font Style */ /* Gradient Text */ /* Small Sup style */ /* Text Color Default */ .text-default { color: #777 !important; } /* Video */ section.video { background-position: 50% 50%; background-repeat: no-repeat; padding: 50px 0; position: relative; overflow: hidden; width: 100%; } section.video .container { position: relative; z-index: 3; } html.boxed section.video > div:first-child { z-index: 0 !important; } html.boxed section.video > div:first-child video { z-index: 0 !important; } /* rotate-1 */ @-webkit-keyframes word-rotator-rotate-1-in { 0% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } 35% { -webkit-transform: rotateX(120deg); transform: rotateX(120deg); opacity: 0; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); opacity: 1; } } @keyframes word-rotator-rotate-1-in { 0% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } 35% { -webkit-transform: rotateX(120deg); transform: rotateX(120deg); opacity: 0; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); opacity: 1; } } @-webkit-keyframes word-rotator-rotate-1-out { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } 35% { -webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); opacity: 1; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } } @keyframes word-rotator-rotate-1-out { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } 35% { -webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); opacity: 1; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } } /* type */ @-webkit-keyframes word-rotator-pulse { from, to { background-color: transparent; } 50% { background-color: black; } } @keyframes word-rotator-pulse { from, to { background-color: transparent; } 50% { background-color: black; } } @-webkit-keyframes word-rotator-pulse-light { from, to { background-color: transparent; } 50% { background-color: white; } } @keyframes word-rotator-pulse-light { from, to { background-color: transparent; } 50% { background-color: white; } } /* rotate-2 */ @-webkit-keyframes word-rotator-rotate-2-in { 0% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(-10deg); transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0deg); transform: translateZ(-20px) rotateX(0deg); } } @keyframes word-rotator-rotate-2-in { 0% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(-10deg); transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0deg); transform: translateZ(-20px) rotateX(0deg); } } @-webkit-keyframes word-rotator-rotate-2-out { 0% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0); transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-100deg); transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-90deg); transform: translateZ(-20px) rotateX(-90deg); } } @keyframes word-rotator-rotate-2-out { 0% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0); transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-100deg); transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-90deg); transform: translateZ(-20px) rotateX(-90deg); } } /* loading-bar */ /* slide */ @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } } /* clip */ /* zoom */ @-webkit-keyframes zoom-in { 0% { opacity: 0; -webkit-transform: translateZ(100px); transform: translateZ(100px); } 100% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes zoom-in { 0% { opacity: 0; -webkit-transform: translateZ(100px); transform: translateZ(100px); } 100% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @-webkit-keyframes zoom-out { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } 100% { opacity: 0; -webkit-transform: translateZ(-100px); transform: translateZ(-100px); } } @keyframes zoom-out { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } 100% { opacity: 0; -webkit-transform: translateZ(-100px); transform: translateZ(-100px); } } @-webkit-keyframes word-rotator-rotate-3-in { 0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes word-rotator-rotate-3-in { 0% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @-webkit-keyframes word-rotator-rotate-3-out { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @keyframes word-rotator-rotate-3-out { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } /* scale */ @-webkit-keyframes scale-up { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 60% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes scale-up { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 60% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes scale-down { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 60% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } } @keyframes scale-down { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 60% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } } /* push */ @-webkit-keyframes push-in { 0% { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 60% { opacity: 1; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes push-in { 0% { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 60% { opacity: 1; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes push-out { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 60% { opacity: 0; -webkit-transform: translateX(110%); transform: translateX(110%); } 100% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes push-out { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 60% { opacity: 0; -webkit-transform: translateX(110%); transform: translateX(110%); } 100% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } } /* Custom Map */ /* Home Intro */ /* Home Intro Compact */ /* Responsive */ @media (max-width: 991px) { /* Home Intro */ } @media (max-width: 767px) { /* Home Intro */ } /* Home Concept SVG Animations */ @-webkit-keyframes animatedLineBg { from { stroke-dasharray: 1000; } to { stroke-dasharray: 1360; } } @keyframes animatedLineBg { from { stroke-dasharray: 1000; } to { stroke-dasharray: 1360; } } @-webkit-keyframes animatedLineSmallCircle { from { stroke-dasharray: 1000; } to { stroke-dasharray: 1120; } } @keyframes animatedLineSmallCircle { from { stroke-dasharray: 1000; } to { stroke-dasharray: 1120; } } @-webkit-keyframes animatedLineBigCircle { from { stroke-dasharray: 1000; } to { stroke-dasharray: 1266; } } @keyframes animatedLineBigCircle { from { stroke-dasharray: 1000; } to { stroke-dasharray: 1266; } } @-webkit-keyframes animatedInitialPin { 0% { -webkit-transform: translate(2px, 69px) scale(0.23); transform: translate(2px, 69px) scale(0.23); } 33% { -webkit-transform: translate(2px, 79px) scale(0.23); transform: translate(2px, 79px) scale(0.23); } 66% { -webkit-transform: translate(2px, 74px) scale(0.23); transform: translate(2px, 74px) scale(0.23); } 100% { -webkit-transform: translate(2px, 79px) scale(0.23); transform: translate(2px, 79px) scale(0.23); } } @keyframes animatedInitialPin { 0% { -webkit-transform: translate(2px, 69px) scale(0.23); transform: translate(2px, 69px) scale(0.23); } 33% { -webkit-transform: translate(2px, 79px) scale(0.23); transform: translate(2px, 79px) scale(0.23); } 66% { -webkit-transform: translate(2px, 74px) scale(0.23); transform: translate(2px, 74px) scale(0.23); } 100% { -webkit-transform: translate(2px, 79px) scale(0.23); transform: translate(2px, 79px) scale(0.23); } } @-webkit-keyframes animatedFinalPin { 0% { -webkit-transform: translate(325px, -19px) scale(0.23) rotate(36deg); transform: translate(325px, -19px) scale(0.23) rotate(36deg); } 33% { -webkit-transform: translate(325px, -13px) scale(0.23) rotate(36deg); transform: translate(325px, -13px) scale(0.23) rotate(36deg); } 66% { -webkit-transform: translate(325px, -16px) scale(0.23) rotate(36deg); transform: translate(325px, -16px) scale(0.23) rotate(36deg); } 100% { -webkit-transform: translate(325px, -13px) scale(0.23) rotate(36deg); transform: translate(325px, -13px) scale(0.23) rotate(36deg); } } @keyframes animatedFinalPin { 0% { -webkit-transform: translate(325px, -19px) scale(0.23) rotate(36deg); transform: translate(325px, -19px) scale(0.23) rotate(36deg); } 33% { -webkit-transform: translate(325px, -13px) scale(0.23) rotate(36deg); transform: translate(325px, -13px) scale(0.23) rotate(36deg); } 66% { -webkit-transform: translate(325px, -16px) scale(0.23) rotate(36deg); transform: translate(325px, -16px) scale(0.23) rotate(36deg); } 100% { -webkit-transform: translate(325px, -13px) scale(0.23) rotate(36deg); transform: translate(325px, -13px) scale(0.23) rotate(36deg); } } /* Firefox Final Pin Animation */ @-webkit-keyframes animatedFinalPinFirefox { 0% { -webkit-transform: translate(193px, -16px) scale(0.23) rotate(36deg); transform: translate(193px, -16px) scale(0.23) rotate(36deg); } 33% { -webkit-transform: translate(193px, -10px) scale(0.23) rotate(36deg); transform: translate(193px, -10px) scale(0.23) rotate(36deg); } 66% { -webkit-transform: translate(193px, -13px) scale(0.23) rotate(36deg); transform: translate(193px, -13px) scale(0.23) rotate(36deg); } 100% { -webkit-transform: translate(193px, -10px) scale(0.23) rotate(36deg); transform: translate(193px, -10px) scale(0.23) rotate(36deg); } } @keyframes animatedFinalPinFirefox { 0% { -webkit-transform: translate(193px, -16px) scale(0.23) rotate(36deg); transform: translate(193px, -16px) scale(0.23) rotate(36deg); } 33% { -webkit-transform: translate(193px, -10px) scale(0.23) rotate(36deg); transform: translate(193px, -10px) scale(0.23) rotate(36deg); } 66% { -webkit-transform: translate(193px, -13px) scale(0.23) rotate(36deg); transform: translate(193px, -13px) scale(0.23) rotate(36deg); } 100% { -webkit-transform: translate(193px, -10px) scale(0.23) rotate(36deg); transform: translate(193px, -10px) scale(0.23) rotate(36deg); } } /* Home Concept */ /* Responsive */ /* Portfolio */ /* Portfolio Info */ /* Portfolio List */ /* Portfolio Details */ /* Portfolio Modal */ /* Portfolio Navigation */ /* Responsive */ /* Team List */ ul.team-list .team-item .thumb-info-social-icons { margin: 0 10px; } /* Responsive */ /* Search Results */ /* Page 404 */ /* Responsive */ /* ===== มาจาก css/skins/skin-corporate-4.css ===== */ a { color: #717171; } a:hover { color: #717171; } a:focus { color: #717171; } a:active { color: #717171; } /* Color Transition */ @-webkit-keyframes colorTransition { 0% { background-color: #0b71e1; } 33% { background-color: #0167d7; } 66% { background-color: #ededed; } 100% { background-color: #395563; } } @keyframes colorTransition { 0% { background-color: #0b71e1; } 33% { background-color: #0167d7; } 66% { background-color: #ededed; } 100% { background-color: #395563; } } html .badge-primary { background-color: #0b71e1; } html .btn-primary { background-color: #0b71e1; border-color: #0b71e1 #0b71e1 #0959b0; color: #ffffff; } html .btn-primary:hover, html .btn-primary.hover { background-color: #1e84f4; border-color: #2a8bf5 #2a8bf5 #0b71e1; color: #ffffff; } html .btn-primary:focus, html .btn-primary.focus { -webkit-box-shadow: 0 0 0 3px rgba(11, 113, 225, 0.5); box-shadow: 0 0 0 3px rgba(11, 113, 225, 0.5); } html .btn-primary.disabled, html .btn-primary:disabled { background-color: #0b71e1; border-color: #0b71e1 #0b71e1 #0959b0; } html .btn-primary:active, html .btn-primary.active { background-color: #095fbd !important; background-image: none !important; border-color: #0959b0 #0959b0 #064080 !important; } html .show > .btn-primary.dropdown-toggle { background-color: #095fbd !important; background-image: none !important; border-color: #0959b0 #0959b0 #064080 !important; } html .btn-light { background-color: #ffffff; border-color: #ffffff #ffffff #e6e6e6; color: #777777; } html .btn-light:hover, html .btn-light.hover { background-color: #ffffff; border-color: #ffffff #ffffff #ffffff; color: #777777; } html .btn-light:focus, html .btn-light.focus { -webkit-box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); } html .btn-light.disabled, html .btn-light:disabled { background-color: #ffffff; border-color: #ffffff #ffffff #e6e6e6; } html .btn-light:active, html .btn-light.active { background-color: #ececec !important; background-image: none !important; border-color: #e6e6e6 #e6e6e6 #cccccc !important; } html .show > .btn-light.dropdown-toggle { background-color: #ececec !important; background-image: none !important; border-color: #e6e6e6 #e6e6e6 #cccccc !important; } .pagination > li > a, .pagination > li > span, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: #0b71e1; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #0b71e1 !important; border-color: #0b71e1; } body.dark .pagination > li > a, body.dark .pagination > li > span, body.dark .pagination > li > a:hover, body.dark .pagination > li > span:hover, body.dark .pagination > li > a:focus, body.dark .pagination > li > span:focus { color: #0b71e1; } body.dark .pagination > .active > a, body.dark .pagination > .active > span, body.dark .pagination > .active > a:hover, body.dark .pagination > .active > span:hover, body.dark .pagination > .active > a:focus, body.dark .pagination > .active > span:focus { background-color: #0b71e1; border-color: #0b71e1; } .pagination > .active > a, body.dark .pagination > .active > a { background-color: #0b71e1; border-color: #0b71e1 #0b71e1 #0959b0; color: #ffffff; } .pagination > .active > a:hover, body.dark .pagination > .active > a:hover, .pagination > .active > a.hover, body.dark .pagination > .active > a.hover { background-color: #1e84f4; border-color: #2a8bf5 #2a8bf5 #0b71e1; color: #ffffff; } .pagination > .active > a:focus, body.dark .pagination > .active > a:focus, .pagination > .active > a.focus, body.dark .pagination > .active > a.focus { -webkit-box-shadow: 0 0 0 3px rgba(11, 113, 225, 0.5); box-shadow: 0 0 0 3px rgba(11, 113, 225, 0.5); } .pagination > .active > a.disabled, body.dark .pagination > .active > a.disabled, .pagination > .active > a:disabled, body.dark .pagination > .active > a:disabled { background-color: #0b71e1; border-color: #0b71e1 #0b71e1 #0959b0; } .pagination > .active > a:active, body.dark .pagination > .active > a:active, .pagination > .active > a.active, body.dark .pagination > .active > a.active { background-color: #095fbd !important; background-image: none !important; border-color: #0959b0 #0959b0 #064080 !important; } section.page-header .page-header-title-border { background-color: #0b71e1 !important; } section.page-header.custom-product { background-color: #0a65c9; border-top-color: #0b6cd7; } html .page-header-color.page-header-primary { background-color: #0b71e1; border-bottom-color: #0b71e1; color: #ffffff; } html .page-header-color.page-header-primary h1 { color: #ffffff; } html .page-header-color.page-header-primary h1 span { color: #ffffff; } html .page-header-color.page-header-primary a { color: #ffffff; } html .page-header-color.page-header-primary .breadcrumb > .active { color: #ffffff; } html .page-header-color.page-header-secondary { background-color: #0167d7; border-bottom-color: #0167d7; color: #ffffff; } html .page-header-color.page-header-secondary h1 { color: #ffffff; } html .page-header-color.page-header-secondary h1 span { color: #ffffff; } html .page-header-color.page-header-secondary a { color: #ffffff; } html .page-header-color.page-header-secondary .breadcrumb > .active { color: #ffffff; } html .page-header-color.page-header-tertiary { background-color: #ededed; border-bottom-color: #ededed; color: #777777; } html .page-header-color.page-header-tertiary h1 { color: #777777; } html .page-header-color.page-header-tertiary h1 span { color: #777777; } html .page-header-color.page-header-tertiary a { color: #777777; } html .page-header-color.page-header-tertiary .breadcrumb > .active { color: #777777; } html .page-header-color.page-header-quaternary { background-color: #395563; border-bottom-color: #395563; color: #ffffff; } html .page-header-color.page-header-quaternary h1 { color: #ffffff; } html .page-header-color.page-header-quaternary h1 span { color: #ffffff; } html .page-header-color.page-header-quaternary a { color: #ffffff; } html .page-header-color.page-header-quaternary .breadcrumb > .active { color: #ffffff; } html .page-header-color.page-header-dark { background-color: #212529; border-bottom-color: #212529; color: #ffffff; } html .page-header-color.page-header-dark h1 { color: #ffffff; } html .page-header-color.page-header-dark h1 span { color: #ffffff; } html .page-header-color.page-header-dark a { color: #ffffff; } html .page-header-color.page-header-dark .breadcrumb > .active { color: #ffffff; } html .page-header-color.page-header-light { background-color: #ffffff; border-bottom-color: #ffffff; color: #777777; } html .page-header-color.page-header-light h1 { color: #777777; } html .page-header-color.page-header-light h1 span { color: #777777; } html .page-header-color.page-header-light a { color: #777777; } html .page-header-color.page-header-light .breadcrumb > .active { color: #777777; } html .thumb-info .thumb-info-action-icon-primary { background-color: #0b71e1; } html .thumb-info .thumb-info-action-icon-primary i { color: #ffffff; } html .thumb-info .thumb-info-action-icon-secondary { background-color: #0167d7; } html .thumb-info .thumb-info-action-icon-secondary i { color: #ffffff; } html .thumb-info .thumb-info-action-icon-tertiary { background-color: #ededed; } html .thumb-info .thumb-info-action-icon-tertiary i { color: #777777; } html .thumb-info .thumb-info-action-icon-quaternary { background-color: #395563; } html .thumb-info .thumb-info-action-icon-quaternary i { color: #ffffff; } html .thumb-info .thumb-info-action-icon-dark { background-color: #212529; } html .thumb-info .thumb-info-action-icon-dark i { color: #ffffff; } html .thumb-info .thumb-info-action-icon-light { background-color: #ffffff; } html .thumb-info .thumb-info-action-icon-light i { color: #777777; } .thumb-info-ribbon:before { border-right-color: #074c98; border-left-color: #074c98; } .thumb-info.thumb-info-block-primary .thumb-info-wrapper:before { background: rgba(11, 113, 225, 0.9); } .parallax blockquote i.fa-quote-left { color: #0b71e1; } section.video blockquote i.fa-quote-left { color: #0b71e1; } #header .header-btn-collapse-nav { background: #0b71e1; } @media (min-width: 992px) { #header .header-nav-main nav > ul > li > a { color: #0b71e1; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu { border-top-color: #0b71e1; } #header .header-nav-main nav > ul > li.dropdown.open > a:before, #header .header-nav-main nav > ul > li.dropdown:hover > a:before { border-bottom-color: #0b71e1; } #header .header-nav-main nav > ul:not(:hover) > li > a.active { background-color: #0b71e1; color: #ffffff; } html.side-header #header.side-header .header-nav-main nav > ul li.dropdown.open > .dropdown-menu, html.side-header #header.side-header .header-nav-main nav > ul li.dropdown:hover > .dropdown-menu { border-left-color: #0b71e1; } html.side-header-right #header.side-header .header-nav-main nav > ul li.dropdown.open > .dropdown-menu, html.side-header-right #header.side-header .header-nav-main nav > ul li.dropdown:hover > .dropdown-menu { border-right-color: #0b71e1; } } @media (max-width: 991px) { #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a { color: #0b71e1; } #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a:active { color: #0b71e1; } #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a.active { background: #0b71e1; } #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a.active:focus, #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a.active:hover { background: #0b71e1; } #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li > a.active { background: #0b71e1; } #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li > a.active:focus, #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li > a.active:hover { background: #0b71e1; } } html.boxed .body { border-top-color: #0b71e1; } /* ===== มาจาก css/custom.css ===== */ @import "mobile_menu.css"; @import "card.css"; @import "custom-bg.css"; .ug-thumb-ratio-set{background-color:rgba(240, 240, 240, 0) !important;} body { background-color: #FFF; color: #555; font-family: 'Prompt', 'Noto Sans Thai', Tahoma, sans-serif; font-size: 17px; line-height: 25px; margin: 0; } p { color: #555; line-height: 25px !important; margin: 0px !important; } .mb-4 { margin-bottom: 2.0rem !important; } .font-1 { font-family: 'Prompt', 'Noto Sans Thai', Tahoma, sans-serif; } .font-2, .btn { font-family: 'Prompt', 'Noto Sans Thai', Tahoma, sans-serif; } h1 { font-size: 35px; font-weight: 400; line-height: 39px; } h2 { font-size: 22px; font-weight: 400; line-height: 28px; } h3 { font-size: 20px; font-weight: 400; line-height: 31px; } h4 { font-size: 18px; font-weight: 400; line-height: 25px; } h5 { font-size: 20px; font-weight: 400; line-height: 32px; } .btn { border-radius: 40px !important; } .header-btn-collapse-nav{ font-size: 22px; } #header.header-effect-shrink .header-container { min-height: 80px; } .text-primary { color: #bd0001 !important; } .text-white { color: #FFF !important; } .text-red { color: #D7000B !important; } .text-orange { color: #FD8134 !important; } .text-blue { color: #47aef1 !important; } .text-brown { color: #CC7E47 !important; } .text-yellow { color: #FFC61C !important; } .btn-danger:hover, .btn-danger.hover { box-shadow: 0px 2px 15px #999; } .btn { padding: 9px 24px !important; } .category img { width: 100%; border: 0px solid #F4F4F4; border-radius: 10px; transition: ease all 0.3s; } .category img:hover { transition: ease all 0.3s; box-shadow: 0px 2px 15px #00000059; } .thumb-info:hover { transition: ease all 0.3s; /*box-shadow: 0px 9px 20px #0000000a;*/ margin-top: -10px !important; /* background: #FFF;*/ } .thumb-info { display: block; position: relative; text-decoration: none; max-width: 100%; /*background-color: #FFFFFF;*/ border-radius: 8px; padding: 10px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: ease all 0.3s; } .thumb-info .thumb-info-inner { -webkit-transition: all 0.3s; transition: all 0.3s; display: block; font-size: 18px; line-height: 26px; max-height: 51px; overflow: hidden; } .thumb-info .thumb-info-type, .thumb-info .thumb-info-action-icon, .thumb-info-social-icons a, .thumb-info-ribbon { background-color: #cc040e; color: #666; } .input-lg { font-size: 18px !important; line-height: 25px !important; height: 50px !important; padding: 0px 15px !important; } .badge { font-weight: 500 !important; } .page-header { background-color: #212529; padding: 16px 0; position: relative; text-align: left; z-index: 1; } html .badge-primary { background-image:linear-gradient(120deg, #910000 0%, #D30000 100%); color: #FFFFFF !important; font-size: 14px; } html .badge-primary:hover { background-color: #D9D9D9 !important; color: #000 !important; } .btn-primary { background-image: linear-gradient(120deg, #C40000 0%, #E6AC00 100%); color: #FFF !important; border: 0px !important; } .btn-primary:hover { background-color: #20AAFF !important; color: #FFF !important; border: 0px !important; box-shadow: 0px 2px 15px #999; transition: ease all 0.3s; } .btn-lg { font-size: 20px !important; } /* DESKTOP */ .page-header { background-color: #373737 !important; } .page-header a { text-decoration: none; font-size: 14px; } .page-header .breadcrumb > li { display: inline-block; text-transform: uppercase; text-shadow: none; color: #c1c1c1; font-size: 14px; } .page-header .breadcrumb > li + li:before { color: inherit; opacity: 0.8; font-family: 'Font Awesome 5 Free'; font-weight: 900; content: "\f105"; padding: 0 7px 0 5px; } #header .header-nav-main nav > ul > li.open > a, #header .header-nav-main nav > ul > li:hover > a { background: #0b71e100; } #header .header-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #FFFFFF; -webkit-transition: min-height 0.3s ease; transition: min-height 0.3s ease; width: 100%; border-top: 3px solid #EDEDED; border-bottom: 1px solid transparent; z-index: 1001; /*box-shadow: 0px 3px 13px #d2d2d2;*/ } #header .header-nav-main nav > ul > li > a { color: #979797 !important; } #header .header-nav-main nav > ul > li > a:hover { color: #be2121 !important; } #header .header-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: 0px 2px 15px #66666645; min-height: 47px; background-color: #169ef2; } #header .header-nav-main nav > ul > li > a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 30px; color: #CCC; font-size: 16px; font-style: normal; padding: 8px 23px; text-transform: uppercase; } section.page-header .page-header-title-border { background-color: #00AEEF !important; } .page-header .breadcrumb a { color: #ff1919 !important; } .page-header.page-header-classic:after { content: ''; width: 100%; height: 1px; /*background: #a1e3ff;*/ position: absolute; bottom: 0; left: 0; } .page-header h1 { color: #ff1919 !important; display: inline-block; font-size: 27px; line-height: 36px; margin: 0; padding: 0; font-weight: 400; position: relative; top: 1px; } .page-header.page-header-classic .page-header-title-border { width: 0; height: 5px; position: absolute; bottom: 0; background: #c1c1c1 !important; z-index: 1; } /* MOBILE */ @media (max-width: 991px) { #header .header-nav-main nav > ul li { border-bottom: 0px solid #e8e8e8; } #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a.active { background: linear-gradient(120deg, #b80101 0%, #fff 95%) !important; color: #FFF !important; } #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a { color: #9b9b9b !important; font-size: 17px; } #header .header-btn-collapse-nav { background: #b90101 !important; color: #FFF; border: 4px solid #ccc; padding: 12px 14px; border-radius: 40px; margin-top: 0px; } } #footer { background: #202020; box-shadow: 0px -5px 20px #0009; } .thumb-info.thumb-info-no-borders, .thumb-info.thumb-info-no-borders img { border: 0; padding: 0px; margin: 0; border-radius: 0; } .thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded, .thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded img, .thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded .thumb-info-wrapper, .thumb-info.thumb-info-no-borders.thumb-info-no-borders-rounded .thumb-info-wrapper::after { border-radius: 6px !important; } .thumb-info .thumb-info-wrapper:after { content: ""; /*background: rgba(0, 0, 0, 0.34);*/ -webkit-transition: all 0.3s; transition: all 0.3s; border-radius: 4px; bottom: -4px; color: #FFF; left: -4px; position: absolute; right: -4px; top: -4px; display: block; opacity: 0; z-index: 1; } .thumb-info.thumb-info-bottom-info-dark .thumb-info-title { background: #000c !important; color: #FFF; }