/*========================== — S U B T R A C T -------------------------- Version 1 http://getsubtract.com ==========================*/ /*============================================================ RESET THE CSS ============================================================*/ *, *:before, *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } html { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, hr, 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, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video { margin:0; padding:0; border:0;font-size:100%; vertical-align:baseline; background:transparent; font:inherit; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } body { line-height:1; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } ol, ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a:hover, a:active, :focus { outline:0; } ins { text-decoration:none; } del { text-decoration:line-through; } table { border-collapse:collapse; border-spacing:0; } /*============================================================ DEFAULT CLASSES ============================================================*/ /* Display */ .no-bg { background:none; } .no-display { display:none; } .no-border { border:0; } /* Margin */ .no-margin { margin:0; } .no-margin-top { margin-top:0; } .no-margin-bottom { margin-bottom:0; } .no-margin-left { margin-left:0; } .no-margin-right { margin-right:0; } /* Padding */ .no-padding { padding:0; } .no-padding-top { padding-top:0; } .no-padding-bottom { padding-bottom:0; } .no-padding-left { padding-left:0; } .no-padding-right { padding-right:0; } /* Position */ .left { float:left; } .right { float:right; } .center { margin:0 auto; } .always-center { display: block !important; margin-left: auto !important; margin-right: auto !important; float:none !important; } /* Align Text */ .text-left { text-align:left; } .text-right { text-align:right; } .text-center { text-align:center; } /* Images */ img.align-left { float:left; margin:0 2.0rem 1.5rem 0; } img.align-right { float:right; margin:0 0 1.5rem 2.0rem; } img.img-responsive { max-width:100%; height:auto; } /* Add .img-responsive class to make the images responsive. */ .content { font: 1em/1.4 Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;} .title { font: 1.7em/1.2 Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;} .code { font: 0.8em/1.6 Monaco, Mono-Space, monospace;} .disabled { pointer-events: none;opacity: 0.5;} .inline { display:inline; margin-right:20px; } .opac { opacity:.6; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .opac:hover { opacity:1; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .hidden { display:none; } /* Advanced Styling CSS */ .embossed-light { border: 1px solid rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);} .embossed-heavy { border: 1px solid rgba(0,0,0,0.1); box-shadow: inset 0 2px 3px rgba(255,255,255,0.3), inset 0 -2px 3px rgba(0,0,0,0.3), 0 1px 1px rgba(255,255,255,0.9);} .gradient-light-linear { background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));} .gradient-dark-linear { background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));} .gradient-light-radial { background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));} .gradient-dark-radial { background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));} .light-rounded { border-radius: 3px;} .heavy-rounded { border-radius: 8px;} .full-rounded { border-radius: 50%;} .barrel-rounded { border-radius: 20px/60px;} .mac { display: block;border: none;border-radius: 20px;padding: 5px 8px;color: #333;box-shadow: inset 0 2px 0 rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,0.1);} .mac:focus { outline: none; box-shadow: inset 0 2px 0 rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,0.1), 0 0 5px 1px #51CBEE;} .inset-shadow { box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.3); } .imgborder { border:1px solid #d1cec6; background:#fff; padding:10px; } .border { width:100%; border-top:3px solid #d8d8d8; clear:both; margin:40px 0px; } .half-border { width:50%; border-top:1px solid #d1cec6; clear:both; margin:20px auto 20px; } .bottom-line { border-bottom:3px solid #d8d8d8; } /* Spacing */ .pad-top { margin-top:20px !important; } .pad-bottom { margin-bottom:20px !important; } .pad-top-40 { margin-top:40px !important; } .pad-bottom-40 { margin-bottom:40px !important; } .pad-bottom-60 { margin-bottom:60px !important; } .x-pad-bottom { margin-bottom:0px !important; } .x-pad-top { margin-top:0px !important; } .x-pad-full { margin:0px !important; } .margin-full { margin:40px 0px; } .padding-t50 { padding-top:50px !important; } .padding-b50 { padding-bottom:50px !important; } .x-padding-t { padding-top:0px !important; } .x-padding-b { padding-bottom:0px !important; } .p-space p { margin-bottom:0px !important; } .p-space2 p { margin-bottom:0px; } .pad-small { padding:20px 0px !important; } .pad-med { padding:30px 0px !important; } .padding-top { padding-top:20px !important; } /* Useful CSS */ .img-control { max-width:100% !important; } .relative { position:relative; } .inblock { display:inline-block; } .overflow { overflow:hidden; } /* Mobile CSS */ .late-show { display:none !important; } .later-show { display:none !important; } .early-show { display:block !important; } .earlier-show { display:block !important; } .early-100 { width:inherit; } .early-50 { width:inherit; } .transition { -webkit-transition: all .1s 0 cubic-bezier(.25, .25, .75, .75); -moz-transition: all .1s 0 cubic-bezier(.25, .25, .75, .75); -o-transition: all .1s 0 cubic-bezier(.25, .25, .75, .75); -ms-transition: all .1s 0 cubic-bezier(.25, .25, .75, .75); transition: all .1s 0 cubic-bezier(.25, .25, .75, .75); -moz-transition-duration: .1s; -moz-transition-property: all; -moz-transition-delay: 0; } /* Clearfix */ .clearfix:before, .clearfix:after { content:" "; display:table; } .clearfix:after { clear:both; } .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; } /*============================================================ BUTTONS ============================================================*/ .button, .button:visited { background: #ccc; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; cursor: pointer; } .button:hover { background-color: #111; color: #fff; } .button:active { top: 1px; } .small.button, .small.button:visited { font-size: 11px; padding: ; } .button, .button:visited, .medium.button, .medium.button:visited { font-size: 12px; font-size: 1.2rem; font-weight: bold; line-height: 1; } .large.button, .large.button:visited { font-size: 18px; font-size: 1.8rem; font-weight: bold; padding: 18px 42px; } .clean.button, .clean.button:visited { background-color: transparent; border:2px solid #fff; color:#fff; } .clean.button:hover { background-color: #fff; border:2px solid #fff; color:#20779c; } .white.button, .white.button:visited { background-color: transparent; border:2px solid #fff; color:#fff; } .white.button:hover { background-color: #fff; color:#2f2f5c; } .blue.button, .blue.button:visited { background-color: #1d9cb3; border:2px solid #1d9cb3; } .blue.button:hover { background-color: #20779c; border:2px solid #20779c; } .red.button, .red.button:visited { background: rgba(203,31,40); } .red.button:hover { background: rgba(166,38,48); } .magenta.button, .magenta.button:visited { background-color: #a9014b; } .magenta.button:hover { background-color: #630030; } .orange.button, .orange.button:visited { background-color: #ff5c00; } .orange.button:hover { background-color: #d45500; } .yellow.button, .yellow.button:visited { background-color: #ffb515; } .yellow.button:hover .standard.medium { padding: 5px 8px; font-size: 12px; } .standard.large { padding: 10px 15px; font-size: 21px; font-weight: bold; } .standard.scaled { -webkit-transform: scale(2); -webkit-transform-origin: bottom left; } .hundred { width:100%; } /*============================================================ ACCORDION ============================================================*/ .accordion { list-style-type: none; padding: 0; margin: 0 0 30px; border-top: none; border-left: none; } .accordion ol { padding: 0; margin: 0; float: left; display: block; width: 100%; list-style:none; } .accordion li { background: #fff; cursor: pointer; list-style-type: none; padding: 0; margin: 0; float: left;display: block; width: 100%; border-bottom:1px solid #f3efe4; } .accordion li.active>a:after { font-family: 'FontAwesome'; content: '\f0d8'; float:right; color:#b2aba4; } .accordion li div { padding: 20px; background: #f7f6f5; display: block; clear: both; float: left; width: 100%; } .accordion li div p { margin-bottom:0px; font-size:1.6em; color:#ab2c5c; } .accordion a { text-decoration: none; font-size:16px; font-size:1.6em; color: #545454; padding: 20px 25px 20px 20px; display: block; cursor: pointer; line-height:20px; } .accordion a:after { font-family: 'FontAwesome'; content: '\f0d7'; float:right; color:#ab2c5c; } .accordion li div a { padding:0px; display:inline; background:none; color:#239c6d; text-shadow:rgba(255, 255, 255, 0.2) 0px 1px 0px;} .accordion li:last-child { border-bottom:none; } /* Level 2 */ .accordion li ol li { background: #7FD2FF; font-size: 0.9em; } /*============================================================ GRID - 1200px ============================================================*/ .container { margin:0 auto; width:1200px; } .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { display:inline; float:left; margin-left:10px; margin-right:10px; position:relative; } .container .grid-1 { width:80px; } .container .grid-2 { width:180px; } .container .grid-3 { width:280px; } .container .grid-4 { width:380px;} .container .grid-5 { width:480px; } .container .grid-6 { width:580px; } .container .grid-7 { width:680px; } .container .grid-8 { width:780px; } .container .grid-9 { width:880px; } .container .grid-10 { width:980px; } .container .grid-11 { width:1080px; } .container .grid-12 { width:1180px; } /*============================================================ GRID - 960px ============================================================*/ @media only screen and (min-width: 960px) and (max-width: 1199px) { .container { width: 960px; } .container .grid-1 { width:60px; } .container .grid-2 { width:140px; } .container .grid-3 { width:220px; } .container .grid-4 { width:300px; } .container .grid-5 { width:380px; } .container .grid-6 { width:460px; } .container .grid-7 { width:540px; } .container .grid-8 { width:620px; } .container .grid-9 { width:700px; } .container .grid-10 { width:780px; } .container .grid-11 { width:860px; } .container .grid-12 { width:940px; } } /*============================================================ GRID - 720px ============================================================*/ @media only screen and (min-width: 720px) and (max-width: 959px) { .container { width:720px; } .container .grid-1 { width:40px; } .container .grid-2 { width:100px; } .container .grid-3 { width:160px; } .container .grid-4 { width:220px; } .container .grid-5 { width:280px; } .container .grid-6 { width:340px; } .container .grid-7 { width:400px; } .container .grid-8 { width:460px; } .container .grid-9 { width:520px; } .container .grid-10 { width:580px; } .container .grid-11 { width:640px; } .container .grid-12 { width:700px; } } /*============================================================ GRID - 719px and Below ============================================================*/ @media only screen and (max-width: 719px) { .container { width:90%; } .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { width:100%; margin:0; } .container .grid-1, .container .grid-2, .container .grid-3, .container .grid-4, .container .grid-5, .container .grid-6, .container .grid-7, .container .grid-8, .container .grid-9, .container .grid-10, .container .grid-11, .container .grid-12 { width:100%; } }