%PDF-1.5 %���� ºaâÚÎΞ-ÌE1ÍØÄ÷{òò2ÿ ÛÖ^ÔÀá TÎ{¦?§®¥kuµùÕ5sLOšuY
Server IP : www.kowitt.ac.th / Your IP : 216.73.216.118 Web Server : Microsoft-IIS/7.5 System : Windows NT SERVER02 6.1 build 7601 (Windows Server 2008 R2 Standard Edition Service Pack 1) i586 User : IUSR ( 0) PHP Version : 5.6.31 Disable Function : NONE MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /BK/wwwroot/mis/student/assets/css/ |
Upload File : |
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic"); @import url("font-awesome.min.css"); /* Astral by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;} body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { -webkit-text-size-adjust: none; } mark { background-color: transparent; color: inherit; } input::-moz-focus-inner { border: 0; padding: 0; } input, select, textarea { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; } /* Row */ .row { display: flex; flex-wrap: wrap; box-sizing: border-box; align-items: stretch; } .row > * { box-sizing: border-box; } .row.gtr-uniform > * > :last-child { margin-bottom: 0; } .row.aln-left { justify-content: flex-start; } .row.aln-center { justify-content: center; } .row.aln-right { justify-content: flex-end; } .row.aln-top { align-items: flex-start; } .row.aln-middle { align-items: center; } .row.aln-bottom { align-items: flex-end; } .row > .imp { order: -1; } .row > .col-1 { width: 8.3333333333%; } .row > .off-1 { margin-left: 8.3333333333%; } .row > .col-2 { width: 16.6666666667%; } .row > .off-2 { margin-left: 16.6666666667%; } .row > .col-3 { width: 25%; } .row > .off-3 { margin-left: 25%; } .row > .col-4 { width: 33.3333333333%; } .row > .off-4 { margin-left: 33.3333333333%; } .row > .col-5 { width: 41.6666666667%; } .row > .off-5 { margin-left: 41.6666666667%; } .row > .col-6 { width: 50%; } .row > .off-6 { margin-left: 50%; } .row > .col-7 { width: 58.3333333333%; } .row > .off-7 { margin-left: 58.3333333333%; } .row > .col-8 { width: 66.6666666667%; } .row > .off-8 { margin-left: 66.6666666667%; } .row > .col-9 { width: 75%; } .row > .off-9 { margin-left: 75%; } .row > .col-10 { width: 83.3333333333%; } .row > .off-10 { margin-left: 83.3333333333%; } .row > .col-11 { width: 91.6666666667%; } .row > .off-11 { margin-left: 91.6666666667%; } .row > .col-12 { width: 100%; } .row > .off-12 { margin-left: 100%; } .row.gtr-0 { margin-top: 0em; margin-left: 0em; } .row.gtr-0 > * { padding: 0em 0 0 0em; } .row.gtr-0.gtr-uniform { margin-top: 0em; } .row.gtr-0.gtr-uniform > * { padding-top: 0em; } .row.gtr-25 { margin-top: -0.3125em; margin-left: -0.3125em; } .row.gtr-25 > * { padding: 0.3125em 0 0 0.3125em; } .row.gtr-25.gtr-uniform { margin-top: -0.3125em; } .row.gtr-25.gtr-uniform > * { padding-top: 0.3125em; } .row.gtr-50 { margin-top: -0.625em; margin-left: -0.625em; } .row.gtr-50 > * { padding: 0.625em 0 0 0.625em; } .row.gtr-50.gtr-uniform { margin-top: -0.625em; } .row.gtr-50.gtr-uniform > * { padding-top: 0.625em; } .row { margin-top: -1.25em; margin-left: -1.25em; } .row > * { padding: 1.25em 0 0 1.25em; } .row.gtr-uniform { margin-top: -1.25em; } .row.gtr-uniform > * { padding-top: 1.25em; } .row.gtr-150 { margin-top: -1.875em; margin-left: -1.875em; } .row.gtr-150 > * { padding: 1.875em 0 0 1.875em; } .row.gtr-150.gtr-uniform { margin-top: -1.875em; } .row.gtr-150.gtr-uniform > * { padding-top: 1.875em; } .row.gtr-200 { margin-top: -2.5em; margin-left: -2.5em; } .row.gtr-200 > * { padding: 2.5em 0 0 2.5em; } .row.gtr-200.gtr-uniform { margin-top: -2.5em; } .row.gtr-200.gtr-uniform > * { padding-top: 2.5em; } @media screen and (max-width: 1680px) { .row { display: flex; flex-wrap: wrap; box-sizing: border-box; align-items: stretch; } .row > * { box-sizing: border-box; } .row.gtr-uniform > * > :last-child { margin-bottom: 0; } .row.aln-left { justify-content: flex-start; } .row.aln-center { justify-content: center; } .row.aln-right { justify-content: flex-end; } .row.aln-top { align-items: flex-start; } .row.aln-middle { align-items: center; } .row.aln-bottom { align-items: flex-end; } .row > .imp-xlarge { order: -1; } .row > .col-1-xlarge { width: 8.3333333333%; } .row > .off-1-xlarge { margin-left: 8.3333333333%; } .row > .col-2-xlarge { width: 16.6666666667%; } .row > .off-2-xlarge { margin-left: 16.6666666667%; } .row > .col-3-xlarge { width: 25%; } .row > .off-3-xlarge { margin-left: 25%; } .row > .col-4-xlarge { width: 33.3333333333%; } .row > .off-4-xlarge { margin-left: 33.3333333333%; } .row > .col-5-xlarge { width: 41.6666666667%; } .row > .off-5-xlarge { margin-left: 41.6666666667%; } .row > .col-6-xlarge { width: 50%; } .row > .off-6-xlarge { margin-left: 50%; } .row > .col-7-xlarge { width: 58.3333333333%; } .row > .off-7-xlarge { margin-left: 58.3333333333%; } .row > .col-8-xlarge { width: 66.6666666667%; } .row > .off-8-xlarge { margin-left: 66.6666666667%; } .row > .col-9-xlarge { width: 75%; } .row > .off-9-xlarge { margin-left: 75%; } .row > .col-10-xlarge { width: 83.3333333333%; } .row > .off-10-xlarge { margin-left: 83.3333333333%; } .row > .col-11-xlarge { width: 91.6666666667%; } .row > .off-11-xlarge { margin-left: 91.6666666667%; } .row > .col-12-xlarge { width: 100%; } .row > .off-12-xlarge { margin-left: 100%; } .row.gtr-0 { margin-top: 0em; margin-left: 0em; } .row.gtr-0 > * { padding: 0em 0 0 0em; } .row.gtr-0.gtr-uniform { margin-top: 0em; } .row.gtr-0.gtr-uniform > * { padding-top: 0em; } .row.gtr-25 { margin-top: -0.3125em; margin-left: -0.3125em; } .row.gtr-25 > * { padding: 0.3125em 0 0 0.3125em; } .row.gtr-25.gtr-uniform { margin-top: -0.3125em; } .row.gtr-25.gtr-uniform > * { padding-top: 0.3125em; } .row.gtr-50 { margin-top: -0.625em; margin-left: -0.625em; } .row.gtr-50 > * { padding: 0.625em 0 0 0.625em; } .row.gtr-50.gtr-uniform { margin-top: -0.625em; } .row.gtr-50.gtr-uniform > * { padding-top: 0.625em; } .row { margin-top: -1.25em; margin-left: -1.25em; } .row > * { padding: 1.25em 0 0 1.25em; } .row.gtr-uniform { margin-top: -1.25em; } .row.gtr-uniform > * { padding-top: 1.25em; } .row.gtr-150 { margin-top: -1.875em; margin-left: -1.875em; } .row.gtr-150 > * { padding: 1.875em 0 0 1.875em; } .row.gtr-150.gtr-uniform { margin-top: -1.875em; } .row.gtr-150.gtr-uniform > * { padding-top: 1.875em; } .row.gtr-200 { margin-top: -2.5em; margin-left: -2.5em; } .row.gtr-200 > * { padding: 2.5em 0 0 2.5em; } .row.gtr-200.gtr-uniform { margin-top: -2.5em; } .row.gtr-200.gtr-uniform > * { padding-top: 2.5em; } } @media screen and (max-width: 1280px) { .row { display: flex; flex-wrap: wrap; box-sizing: border-box; align-items: stretch; } .row > * { box-sizing: border-box; } .row.gtr-uniform > * > :last-child { margin-bottom: 0; } .row.aln-left { justify-content: flex-start; } .row.aln-center { justify-content: center; } .row.aln-right { justify-content: flex-end; } .row.aln-top { align-items: flex-start; } .row.aln-middle { align-items: center; } .row.aln-bottom { align-items: flex-end; } .row > .imp-large { order: -1; } .row > .col-1-large { width: 8.3333333333%; } .row > .off-1-large { margin-left: 8.3333333333%; } .row > .col-2-large { width: 16.6666666667%; } .row > .off-2-large { margin-left: 16.6666666667%; } .row > .col-3-large { width: 25%; } .row > .off-3-large { margin-left: 25%; } .row > .col-4-large { width: 33.3333333333%; } .row > .off-4-large { margin-left: 33.3333333333%; } .row > .col-5-large { width: 41.6666666667%; } .row > .off-5-large { margin-left: 41.6666666667%; } .row > .col-6-large { width: 50%; } .row > .off-6-large { margin-left: 50%; } .row > .col-7-large { width: 58.3333333333%; } .row > .off-7-large { margin-left: 58.3333333333%; } .row > .col-8-large { width: 66.6666666667%; } .row > .off-8-large { margin-left: 66.6666666667%; } .row > .col-9-large { width: 75%; } .row > .off-9-large { margin-left: 75%; } .row > .col-10-large { width: 83.3333333333%; } .row > .off-10-large { margin-left: 83.3333333333%; } .row > .col-11-large { width: 91.6666666667%; } .row > .off-11-large { margin-left: 91.6666666667%; } .row > .col-12-large { width: 100%; } .row > .off-12-large { margin-left: 100%; } .row.gtr-0 { margin-top: 0em; margin-left: 0em; } .row.gtr-0 > * { padding: 0em 0 0 0em; } .row.gtr-0.gtr-uniform { margin-top: 0em; } .row.gtr-0.gtr-uniform > * { padding-top: 0em; } .row.gtr-25 { margin-top: -0.3125em; margin-left: -0.3125em; } .row.gtr-25 > * { padding: 0.3125em 0 0 0.3125em; } .row.gtr-25.gtr-uniform { margin-top: -0.3125em; } .row.gtr-25.gtr-uniform > * { padding-top: 0.3125em; } .row.gtr-50 { margin-top: -0.625em; margin-left: -0.625em; } .row.gtr-50 > * { padding: 0.625em 0 0 0.625em; } .row.gtr-50.gtr-uniform { margin-top: -0.625em; } .row.gtr-50.gtr-uniform > * { padding-top: 0.625em; } .row { margin-top: -1.25em; margin-left: -1.25em; } .row > * { padding: 1.25em 0 0 1.25em; } .row.gtr-uniform { margin-top: -1.25em; } .row.gtr-uniform > * { padding-top: 1.25em; } .row.gtr-150 { margin-top: -1.875em; margin-left: -1.875em; } .row.gtr-150 > * { padding: 1.875em 0 0 1.875em; } .row.gtr-150.gtr-uniform { margin-top: -1.875em; } .row.gtr-150.gtr-uniform > * { padding-top: 1.875em; } .row.gtr-200 { margin-top: -2.5em; margin-left: -2.5em; } .row.gtr-200 > * { padding: 2.5em 0 0 2.5em; } .row.gtr-200.gtr-uniform { margin-top: -2.5em; } .row.gtr-200.gtr-uniform > * { padding-top: 2.5em; } } @media screen and (max-width: 980px) { .row { display: flex; flex-wrap: wrap; box-sizing: border-box; align-items: stretch; } .row > * { box-sizing: border-box; } .row.gtr-uniform > * > :last-child { margin-bottom: 0; } .row.aln-left { justify-content: flex-start; } .row.aln-center { justify-content: center; } .row.aln-right { justify-content: flex-end; } .row.aln-top { align-items: flex-start; } .row.aln-middle { align-items: center; } .row.aln-bottom { align-items: flex-end; } .row > .imp-medium { order: -1; } .row > .col-1-medium { width: 8.3333333333%; } .row > .off-1-medium { margin-left: 8.3333333333%; } .row > .col-2-medium { width: 16.6666666667%; } .row > .off-2-medium { margin-left: 16.6666666667%; } .row > .col-3-medium { width: 25%; } .row > .off-3-medium { margin-left: 25%; } .row > .col-4-medium { width: 33.3333333333%; } .row > .off-4-medium { margin-left: 33.3333333333%; } .row > .col-5-medium { width: 41.6666666667%; } .row > .off-5-medium { margin-left: 41.6666666667%; } .row > .col-6-medium { width: 50%; } .row > .off-6-medium { margin-left: 50%; } .row > .col-7-medium { width: 58.3333333333%; } .row > .off-7-medium { margin-left: 58.3333333333%; } .row > .col-8-medium { width: 66.6666666667%; } .row > .off-8-medium { margin-left: 66.6666666667%; } .row > .col-9-medium { width: 75%; } .row > .off-9-medium { margin-left: 75%; } .row > .col-10-medium { width: 83.3333333333%; } .row > .off-10-medium { margin-left: 83.3333333333%; } .row > .col-11-medium { width: 91.6666666667%; } .row > .off-11-medium { margin-left: 91.6666666667%; } .row > .col-12-medium { width: 100%; } .row > .off-12-medium { margin-left: 100%; } .row.gtr-0 { margin-top: 0em; margin-left: 0em; } .row.gtr-0 > * { padding: 0em 0 0 0em; } .row.gtr-0.gtr-uniform { margin-top: 0em; } .row.gtr-0.gtr-uniform > * { padding-top: 0em; } .row.gtr-25 { margin-top: -0.3125em; margin-left: -0.3125em; } .row.gtr-25 > * { padding: 0.3125em 0 0 0.3125em; } .row.gtr-25.gtr-uniform { margin-top: -0.3125em; } .row.gtr-25.gtr-uniform > * { padding-top: 0.3125em; } .row.gtr-50 { margin-top: -0.625em; margin-left: -0.625em; } .row.gtr-50 > * { padding: 0.625em 0 0 0.625em; } .row.gtr-50.gtr-uniform { margin-top: -0.625em; } .row.gtr-50.gtr-uniform > * { padding-top: 0.625em; } .row { margin-top: -1.25em; margin-left: -1.25em; } .row > * { padding: 1.25em 0 0 1.25em; } .row.gtr-uniform { margin-top: -1.25em; } .row.gtr-uniform > * { padding-top: 1.25em; } .row.gtr-150 { margin-top: -1.875em; margin-left: -1.875em; } .row.gtr-150 > * { padding: 1.875em 0 0 1.875em; } .row.gtr-150.gtr-uniform { margin-top: -1.875em; } .row.gtr-150.gtr-uniform > * { padding-top: 1.875em; } .row.gtr-200 { margin-top: -2.5em; margin-left: -2.5em; } .row.gtr-200 > * { padding: 2.5em 0 0 2.5em; } .row.gtr-200.gtr-uniform { margin-top: -2.5em; } .row.gtr-200.gtr-uniform > * { padding-top: 2.5em; } } @media screen and (max-width: 736px) { .row { display: flex; flex-wrap: wrap; box-sizing: border-box; align-items: stretch; } .row > * { box-sizing: border-box; } .row.gtr-uniform > * > :last-child { margin-bottom: 0; } .row.aln-left { justify-content: flex-start; } .row.aln-center { justify-content: center; } .row.aln-right { justify-content: flex-end; } .row.aln-top { align-items: flex-start; } .row.aln-middle { align-items: center; } .row.aln-bottom { align-items: flex-end; } .row > .imp-small { order: -1; } .row > .col-1-small { width: 8.3333333333%; } .row > .off-1-small { margin-left: 8.3333333333%; } .row > .col-2-small { width: 16.6666666667%; } .row > .off-2-small { margin-left: 16.6666666667%; } .row > .col-3-small { width: 25%; } .row > .off-3-small { margin-left: 25%; } .row > .col-4-small { width: 33.3333333333%; } .row > .off-4-small { margin-left: 33.3333333333%; } .row > .col-5-small { width: 41.6666666667%; } .row > .off-5-small { margin-left: 41.6666666667%; } .row > .col-6-small { width: 50%; } .row > .off-6-small { margin-left: 50%; } .row > .col-7-small { width: 58.3333333333%; } .row > .off-7-small { margin-left: 58.3333333333%; } .row > .col-8-small { width: 66.6666666667%; } .row > .off-8-small { margin-left: 66.6666666667%; } .row > .col-9-small { width: 75%; } .row > .off-9-small { margin-left: 75%; } .row > .col-10-small { width: 83.3333333333%; } .row > .off-10-small { margin-left: 83.3333333333%; } .row > .col-11-small { width: 91.6666666667%; } .row > .off-11-small { margin-left: 91.6666666667%; } .row > .col-12-small { width: 100%; } .row > .off-12-small { margin-left: 100%; } .row.gtr-0 { margin-top: 0em; margin-left: 0em; } .row.gtr-0 > * { padding: 0em 0 0 0em; } .row.gtr-0.gtr-uniform { margin-top: 0em; } .row.gtr-0.gtr-uniform > * { padding-top: 0em; } .row.gtr-25 { margin-top: -0.3125em; margin-left: -0.3125em; } .row.gtr-25 > * { padding: 0.3125em 0 0 0.3125em; } .row.gtr-25.gtr-uniform { margin-top: -0.3125em; } .row.gtr-25.gtr-uniform > * { padding-top: 0.3125em; } .row.gtr-50 { margin-top: -0.625em; margin-left: -0.625em; } .row.gtr-50 > * { padding: 0.625em 0 0 0.625em; } .row.gtr-50.gtr-uniform { margin-top: -0.625em; } .row.gtr-50.gtr-uniform > * { padding-top: 0.625em; } .row { margin-top: -1.25em; margin-left: -1.25em; } .row > * { padding: 1.25em 0 0 1.25em; } .row.gtr-uniform { margin-top: -1.25em; } .row.gtr-uniform > * { padding-top: 1.25em; } .row.gtr-150 { margin-top: -1.875em; margin-left: -1.875em; } .row.gtr-150 > * { padding: 1.875em 0 0 1.875em; } .row.gtr-150.gtr-uniform { margin-top: -1.875em; } .row.gtr-150.gtr-uniform > * { padding-top: 1.875em; } .row.gtr-200 { margin-top: -2.5em; margin-left: -2.5em; } .row.gtr-200 > * { padding: 2.5em 0 0 2.5em; } .row.gtr-200.gtr-uniform { margin-top: -2.5em; } .row.gtr-200.gtr-uniform > * { padding-top: 2.5em; } } /* Basic */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background-image: url("images/overlay.png"), url("images/bg.jpg"); background-repeat: repeat, no-repeat; background-size: auto, 100% 100%; background-attachment: fixed; overflow-y: scroll; } body.is-preload *, body.is-preload *:before, body.is-preload *:after { -moz-animation: none !important; -webkit-animation: none !important; -ms-animation: none !important; animation: none !important; -moz-transition: none !important; -webkit-transition: none !important; -ms-transition: none !important; transition: none !important; } body, input, textarea, select { font-family: 'Source Sans Pro', sans-serif; font-weight: 300; color: #777777; font-size: 20pt; line-height: 1.75em; } @media screen and (max-width: 1680px) { body, input, textarea, select { font-size: 15pt; } } @media screen and (max-width: 1280px) { body, input, textarea, select { font-size: 14pt; } } @media screen and (max-width: 736px) { body, input, textarea, select { font-size: 12pt; } } @media screen and (max-width: 360px) { body, input, textarea, select { font-size: 11pt; } } strong, b, h1, h2, h3, h4, h5, h6 { font-weight: 400; color: #363636; } h1 { font-size: 2.4em; letter-spacing: -0.015em; } h2 { font-size: 1.8em; letter-spacing: -0.015em; } h3, h4, h5, h6 { font-size: 1.25em; letter-spacing: -0.015em; } @media screen and (max-width: 736px) { h1 { font-size: 1.75em; } h2 { font-size: 1.375em; } h3, h4, h5, h6 { font-size: 1em; } } blockquote { border-left: solid 0.5em #ddd; padding: 1em 0 1em 2em; font-style: italic; } em, i { font-style: italic; } hr { border: 0; border-top: solid 1px #ddd; padding: 1.5em 0 0 0; margin: 1.75em 0 0 0; } sub { position: relative; top: 0.5em; font-size: 0.8em; } sup { position: relative; top: -0.5em; font-size: 0.8em; } br.clear { clear: both; } p, ul, ol, dl, table, blockquote, form { margin-bottom: 2em; } /* Table */ table { width: 100%; } table.default tbody tr { border-bottom: solid 1px #f4f4f4; } table.default td { padding: 0.5em 1em 0.5em 1em; } table.default th { text-align: left; font-weight: 400; padding: 0.5em 1em 0.5em 1em; } table.default thead { border-bottom: solid 2px #f4f4f4; } /* Form */ form label { display: block; font-weight: 400; color: #363636; margin: 0 0 1em 0; } form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea { -webkit-appearance: none; border: 0; background: #f4f4f4; padding: 0.75em; width: 100%; -moz-transition: background-color .25s ease-in-out; -webkit-transition: background-color .25s ease-in-out; -ms-transition: background-color .25s ease-in-out; transition: background-color .25s ease-in-out; } form input[type="text"]:focus, form input[type="email"]:focus, form input[type="password"]:focus, form select:focus, form textarea:focus { background: #f8f8f8; } form input[type="text"], form input[type="email"], form input[type="password"], form select { line-height: 1.35em; } form ::-webkit-input-placeholder { color: #999; } form :-moz-placeholder { color: #999; } form ::-moz-placeholder { color: #999; } form :-ms-input-placeholder { color: #999; } /* Section/Article */ section, article { margin-bottom: 3em; } section > :last-child, section:last-child, article > :last-child, article:last-child { margin-bottom: 0; } header { margin: 0 0 1.5em 0; } header > p { margin: 0.5em 0 0 0; color: #aaa; } @media screen and (max-width: 736px) { header { margin: 0 0 1em 0; } } /* Image */ .image { display: inline-block; } .image img { display: block; width: 100%; } .image.fit { display: block; width: 100%; } .image.featured { display: block; width: 100%; margin: 0 0 2em 0; } .image.left { float: left; margin: 0 2em 2em 0; } .image.centered { display: block; margin: 0 0 2em 0; } .image.centered img { margin: 0 auto; width: auto; } /* Button */ input[type="button"], input[type="submit"], input[type="reset"], button, .button { -moz-transition: background-color .25s ease-in-out; -webkit-transition: background-color .25s ease-in-out; -ms-transition: background-color .25s ease-in-out; transition: background-color .25s ease-in-out; -webkit-appearance: none; display: inline-block; background-color: #222222; color: #ffffff; border: 0; cursor: pointer; outline: 0; padding: 0.7em 1.5em 0.7em 1.5em; } input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover, .button:hover { background-color: #333333; } input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, button:active, .button:active { background-color: #444444; } input[type="button"].alt, input[type="submit"].alt, input[type="reset"].alt, button.alt, .button.alt { background-color: #777777; } input[type="button"].alt:hover, input[type="submit"].alt:hover, input[type="reset"].alt:hover, button.alt:hover, .button.alt:hover { background-color: #888888; } input[type="button"].alt:active, input[type="submit"].alt:active, input[type="reset"].alt:active, button.alt:active, .button.alt:active { background-color: #999999; } input[type="button"].small, input[type="submit"].small, input[type="reset"].small, button.small, .button.small { font-size: 0.75em; } input[type="button"].large, input[type="submit"].large, input[type="reset"].large, button.large, .button.large { font-size: 1.25em; padding: 0.5em 1.25em 0.5em 1.25em; } input[type="button"].xlarge, input[type="submit"].xlarge, input[type="reset"].xlarge, button.xlarge, .button.xlarge { font-size: 1.5em; padding: 0.5em 1.25em 0.5em 1.25em; } @media screen and (max-width: 736px) { input[type="button"], input[type="submit"], input[type="reset"], button, .button { width: 100%; } } /* List */ ul { list-style: disc; padding-left: 1em; } ul li { padding-left: 0.5em; } ol { list-style: decimal; padding-left: 1.25em; } ol li { padding-left: 0.25em; } /* Actions */ ul.actions { list-style: none; padding-left: 0; } ul.actions li { display: inline-block; padding-left: 0; margin: 0 0 0 0.5em; } ul.actions li:first-child { margin-left: 0; } @media screen and (max-width: 736px) { ul.actions li { display: block; margin: 0.75em 0 0 0; } ul.actions li:first-child { margin-top: 0; } } /* Icons */ .icon { position: relative; text-decoration: none; } .icon:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } .icon > .label { display: none; } /* Nav */ #nav { text-align: center; height: 4.25em; cursor: default; } #nav a { position: relative; display: inline-block; color: #ffffff; width: 1em; height: 1em; line-height: 0.9em; font-size: 2.5em; margin: 0 0.25em 0 0.25em; opacity: 0.35; outline: 0; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; -ms-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; } #nav a.icon:before { padding-right: 0; } #nav a:before { font-size: 0.8em; } #nav a:after { content: ''; display: block; position: absolute; left: 50%; bottom: -0.75em; margin-left: -0.5em; border-bottom: solid 0em #ffffff; border-left: solid 0.5em transparent; border-right: solid 0.5em transparent; -moz-transition: border-bottom-width .25s ease-in-out; -webkit-transition: border-bottom-width .25s ease-in-out; -ms-transition: border-bottom-width .25s ease-in-out; transition: border-bottom-width .25s ease-in-out; } #nav a span { display: block; position: absolute; background: #222222; color: #ffffff; top: -2.75em; font-size: 0.3em; height: 2.25em; line-height: 2.25em; left: 50%; opacity: 0; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; -ms-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; width: 5.5em; margin-left: -2.75em; } #nav a span:after { content: ''; display: block; position: absolute; bottom: -0.4em; left: 50%; margin-left: -0.6em; border-top: solid 0.6em #222222; border-left: solid 0.6em transparent; border-right: solid 0.6em transparent; } #nav a:hover { opacity: 1.0; } #nav a:hover span { opacity: 1.0; } #nav a.active { opacity: 1.0; } #nav a.active:after { border-bottom-width: 0.5em; } @media screen and (max-width: 980px) { #nav a span { display: none; } } /* Wrapper */ #wrapper { width: 45em; margin: 0 auto; min-height: 100vh; max-width: 100%; padding: 4em 0; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } body.is-preload #wrapper { opacity: 0; } @media screen and (max-width: 1280px) { #wrapper { padding: 3em 0; max-width: calc(100% - 6em); } } @media screen and (max-width: 980px) { #wrapper { padding: 1.5em 0; max-width: calc(100% - 8em); } } @media screen and (max-width: 736px) { #wrapper { padding: 1em 0; max-width: calc(100% - 2em); } } @media screen and (max-width: 360px) { #wrapper { padding: 1em 0; max-width: 100%; } } /* Main */ #main { position: relative; overflow: hidden; width: 100%; background: #ffffff; box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.25); -moz-transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out; -webkit-transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out; -ms-transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out; transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out; } #main > .panel { -moz-transition: opacity 0.25s ease-in-out; -webkit-transition: opacity 0.25s ease-in-out; -ms-transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out; margin-bottom: 0; position: relative; padding: 3.5em 2.5em 2.5em 2.5em; width: 100%; } #main > .panel.inactive { opacity: 0; } @media screen and (max-width: 736px) { #main > .panel { padding: 2em 1.5em 1.5em 1.5em; } } #main > .panel.intro { padding: 0; height: 20em; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-direction: row; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; } #main > .panel.intro .pic { text-decoration: none; position: relative; -moz-flex-grow: 0; -webkit-flex-grow: 0; -ms-flex-grow: 0; flex-grow: 0; -moz-flex-shrink: 0; -webkit-flex-shrink: 0; -ms-flex-shrink: 0; flex-shrink: 0; width: 17em; height: 100%; } #main > .panel.intro .pic:before { content: ''; position: absolute; top: 0; left: 0; background: url("images/overlay.png"); width: 100%; height: 100%; z-index: 1; } #main > .panel.intro .pic img { position: relative; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-object-fit: cover; -webkit-object-fit: cover; -ms-object-fit: cover; object-fit: cover; -moz-object-position: center; -webkit-object-position: center; -ms-object-position: center; object-position: center; } #main > .panel.intro .pic .arrow { display: block; position: absolute; right: 0; top: 50%; margin-top: -1.375em; width: 2.75em; height: 2.75em; background: #000; background: rgba(0, 0, 0, 0.75); color: #ffffff; text-align: center; line-height: 2.75em; font-size: 1.5em; z-index: 1; -moz-transition: width .15s ease-in-out, padding-right .15s ease-in-out; -webkit-transition: width .15s ease-in-out, padding-right .15s ease-in-out; -ms-transition: width .15s ease-in-out, padding-right .15s ease-in-out; transition: width .15s ease-in-out, padding-right .15s ease-in-out; } #main > .panel.intro .pic .arrow:before { position: relative; padding-right: 0; top: 0.125em; } #main > .panel.intro .pic .arrow span { display: block; text-indent: -9999px; } #main > .panel.intro .pic:hover .arrow { width: 3em; padding-right: 0.25em; } #main > .panel.intro header { -moz-flex-grow: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1; -moz-flex-shrink: 1; -webkit-flex-shrink: 1; -ms-flex-shrink: 1; flex-shrink: 1; padding: 3.5em 2.5em; margin-bottom: 0; width: 100%; } #main > .panel.intro header h1 { line-height: 1.25em; margin-bottom: 0; } #main > .panel.intro header p { letter-spacing: -0.015em; font-size: 1.25em; margin: 0.25em 0 0 0; } @media screen and (max-width: 980px) { #main > .panel.intro { -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: auto; } #main > .panel.intro .pic { height: 25em; width: 100%; } #main > .panel.intro header { padding: 4em; text-align: center; } } @media screen and (max-width: 736px) { #main > .panel.intro .pic { height: 20em; } #main > .panel.intro header { padding: 2.75em 2em 2.5em 2em; } #main > .panel.intro header p { font-size: 1em; margin: 0.25em 0 0 0; } } /* Footer */ #footer { color: rgba(255, 255, 255, 0.45); text-align: center; padding: 2em 0 0 0; font-size: 0.75em; } #footer a { color: #ddd; color: rgba(255, 255, 255, 0.65); -moz-transition: color .25s ease-in-out; -webkit-transition: color .25s ease-in-out; -ms-transition: color .25s ease-in-out; transition: color .25s ease-in-out; } #footer a:hover { color: white; } #footer .copyright { list-style: none; padding-left: 0; } #footer .copyright li { display: inline-block; padding-left: 1em; margin-left: 1em; border-left: solid 1px rgba(255, 255, 255, 0.25); line-height: 1; } #footer .copyright li:first-child { padding-left: 0; margin-left: 0; border-left: 0; } @media screen and (max-width: 736px) { #footer .copyright li { padding-left: 0.5em; margin-left: 0.5em; } }