body { overflow-x: hidden; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } @media (max-width: 768px) { .container { width: 95%; } } .text-muted { color: #777777; } .text-primary { color: #50a2e5; } .text-danger { color: #e9573f; } p { font-size: 14px; line-height: 1.75; } p.large { font-size: 16px; } a, a:hover, a:focus, a:active, a.active { outline: none; } a { color: #50a2e5; } a:hover, a:focus, a:active, a.active { color: #248ade; } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .img-centered { margin: 0 auto; } .bg-white { background-color: #FFF; } .bg-light { background-color: #fafafa; } .bg-dark { background-color: #222222; } .btn { color: #FFF; } .btn:focus, .btn:active, .btn.active, .btn:active:focus { outline: none; } .btn-primary { color: #ffffff; background-color: #50a2e5; border-color: #50a2e5; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { color: #ffffff; background-color: #248ade; border-color: #2085d8; } .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { background-image: none; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { background-color: #50a2e5; border-color: #50a2e5; } .btn-primary .badge { color: #50a2e5; background-color: #ffffff; } .btn-tp { background: #50a2e5; } .btn-wire { background: none; border: 2px solid #FFF; padding: 15px 47px; } .btn-wire:hover, .btn-wire:focus { color: #FFF; background: rgba(255, 255, 255, 0.1); } .btn-xl { font-weight: 600; border-radius: 3px; font-size: 18px; padding: 20px 40px; } ul.social-buttons { margin-bottom: 0; } ul.social-buttons li a { display: block; height: 30px; width: 25px; font-size: 20px; line-height: 30px; color: #888; outline: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } ::-moz-selection { text-shadow: none; background: #50a2e5; } ::selection { text-shadow: none; background: #50a2e5; } img::selection { background: transparent; } img::-moz-selection { background: transparent; } body { webkit-tap-highlight-color: #50a2e5; } .topbar-nav { display: none; width: 100%; height: 35px; padding: 8px 0; background: #f9f9f9; border-bottom: 1px solid #EEE; margin-bottom: 14px; font-size: 12px; color: #AAA; } .topbar-nav li > a { color: #AAA; } .topbar-nav .topbar-left { float: left; } .topbar-nav .topbar-left li { margin-right: 5px; margin-top: 1px; } .topbar-nav .topbar-left li:last-child { margin-right: 0; } .topbar-nav .topbar-left li span { padding-right: 5px; } .topbar-nav .topbar-right { float: right; } .topbar-nav .topbar-right li { margin-right: 10px; } .topbar-nav .topbar-right li:last-child { margin-right: 0; } .topbar-nav .topbar-right li a { font-size: 15px; } .navbar-default { background-color: #FFF; border-color: transparent; margin-bottom: 0; } .navbar-default .navbar-brand { color: #555; font-size: 20px; font-weight: 600; letter-spacing: 1.4px; line-height: 26px; padding: 10px 15px; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:active, .navbar-default .navbar-brand.active { color: #555; text-decoration: underline; } .navbar-default .navbar-collapse { border-color: rgba(255, 255, 255, 0.02); } .navbar-default .navbar-toggle { background-color: #50a2e5; border-color: #50a2e5; } .navbar-default .navbar-toggle .icon-bar { background-color: white; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #50a2e5; } .navbar-default .nav li a { font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #666; font-weight: 500; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; padding: 12px 15px; } .navbar-default .nav li a:hover, .navbar-default .nav li a:focus { color: #666; outline: none; } .navbar-default .navbar-nav > .active > a { border-radius: 0; color: #666; background-color: transparent; } .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: white; background-color: #248ade; } @media (min-width: 768px) { .navbar-default { z-index: 150; position: absolute; width: 100%; background-color: transparent; padding: 25px 0 25px; border: none; transition: top ease 0.2s; } .navbar-default .navbar-brand { color: #FFF; font-size: 2em; line-height: 20px; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #FFF; outline: none; } .navbar-default .nav li a { font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #FFF; font-weight: 500; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; padding: 12px 15px; } .navbar-default .nav li a:hover, .navbar-default .nav li a:focus { color: #FFF; outline: none; } .navbar-default .navbar-right { margin-top: 8px; } .navbar-default .navbar-nav > .active > a { border-radius: 3px; } .navbar-default.navbar-shrink { position: fixed; top: -100px; background-color: #fff; padding: 22px 0; border-radius: 0; background: #fcfcfc; border-bottom: 1px solid #EEE; } .navbar-default.navbar-shrink .navbar-brand { height: 40px; color: #555; font-size: 1.5em; line-height: 18px; } .navbar-default.navbar-shrink .navbar-right { margin-top: 3px; } .navbar-default.navbar-shrink .nav li a { color: #999; padding: 8px 12px; margin-left: 7px; text-transform: none; } .navbar-default.navbar-shrink .nav li a:hover, .navbar-default.navbar-shrink .nav li a:focus { color: #333; background: transparent; } .navbar-default.navbar-shrink .navbar-nav > .active > a { position: relative; color: #555; } .navbar-default.navbar-shrink .navbar-nav > .active > a:hover, .navbar-default.navbar-shrink .navbar-nav > .active > a:focus { color: #333; background: transparent; } .navbar-default.navbar-shrink .navbar-nav > .active > a:after { content: ""; position: absolute; top: -25px; left: 0; width: 100%; height: 3px; background: #50a2e5; } .navbar-default.navbar-shrink-scroll { top: 0; } } footer { color: #FFF; background: #2f3740; padding: 15px 0; } footer span.copyright { line-height: 30px; text-transform: none; } footer ul.quicklinks { margin-bottom: 0; line-height: 30px; text-transform: none; } #hero { position: relative; text-align: center; color: white; height: 70vh; min-height: 550px; } #hero:before { z-index: -2; content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url('../img/hero_low-res.jpg'); background-repeat: none; background-attachment: scroll; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } #hero:after { z-index: -1; content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(60, 83, 111, 0.85); } #hero .intro-text { padding-top: 200px; padding-bottom: 225px; } #hero .intro-text .intro-lead-in { font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: italic; font-size: 26px; line-height: 26px; margin-bottom: 22px; } #hero .intro-text .intro-heading { max-width: 900px; text-align: center; letter-spacing: 1.2px; font-weight: 200; font-size: 40px; line-height: 58px; margin-bottom: 60px; margin-left: auto; margin-right: auto; } #hero .intro-text a { border-radius: 30px; padding: 16px 48px; text-transform: uppercase; } @media (max-width: 992px) { #hero .intro-text .intro-heading { letter-spacing: 1.1px; font-weight: 200; font-size: 26px; line-height: 40px; margin-bottom: 40px; } #hero .intro-text a { border-radius: 30px; padding: 9px 26px; text-transform: uppercase; } } section { padding: 50px 0; border-bottom: 1px solid #EEE; } section h2.section-heading { color: #555; font-size: 40px; margin-top: 0; margin-bottom: 15px; } section h3.section-subheading { font-size: 16px; text-transform: none; font-style: italic; font-weight: 400; margin-bottom: 75px; } @media (min-width: 768px) { section { padding: 70px 0; } } #services { position: relative; } #services:before { content: ""; position: absolute; bottom: 100%; left: 0; width: 100%; height: 14px; background: #50a2e5; background: rgba(0, 0, 0, 0.12); } .service-icon { margin-bottom: 22px; } .service-heading { margin: 15px 0; text-transform: none; } #features { background: url('../img/features/feature1.png') no-repeat center 200px #f9f9f9; min-height: 750px; overflow: hidden; } #features-flat { padding: 50px 0; min-height: 610px; overflow: hidden; } #features-flat img { max-width: 400px; } @media (max-width: 992px) { #features-flat { padding: 60px 0; min-height: 380px; } #features-flat h2.section-heading { margin-top: 0 !important; } #features-flat .btn { padding: 8px 30px !important; } } #call-to-action { margin-top: -1px; color: #FFF; position: relative; border: 0; max-height: 240px; overflow: hidden; } #call-to-action .section-heading { color: #FFF; } #call-to-action .section-subheading { color: #EEE; } #call-to-action:before { z-index: -2; content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url('../img/patterns/polygon/6.html'); background-repeat: none; background-attachment: scroll; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } #call-to-action:after { z-index: -1; content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); } #portfolio .portfolio-item { margin: 0 0 15px; right: 0; } #portfolio .portfolio-item .portfolio-link { display: block; position: relative; max-width: 400px; margin: 0 auto; } #portfolio .portfolio-item .portfolio-link .portfolio-hover { background: rgba(80, 162, 229, 0.9); position: absolute; width: 100%; height: 100%; opacity: 0; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; } #portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { opacity: 1; } #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { position: absolute; width: 100%; height: 20px; font-size: 20px; text-align: center; top: 50%; margin-top: -12px; color: white; } #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i { margin-top: -12px; } #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3, #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 { margin: 0; } #portfolio .portfolio-item .portfolio-caption { max-width: 400px; margin: 0 auto; background-color: white; text-align: center; padding: 25px; } #portfolio .portfolio-item .portfolio-caption h4 { text-transform: none; margin: 0; } #portfolio .portfolio-item .portfolio-caption p { font-style: italic; font-size: 16px; margin: 0; } #portfolio * { z-index: 2; } @media (min-width: 767px) { #portfolio .portfolio-item { margin: 0 0 30px; } } .team-member { margin-bottom: 50px; text-align: center; } .team-member img { border-top: 3px solid #50a2e5; padding-bottom: 0; margin: 0 auto; } .team-member h4 { margin-left: 12px; margin-top: 30px; margin-bottom: 0; text-transform: none; } .team-member p { margin-left: 12px; margin-top: 0; } .team-member .social-buttons { display: none; margin-right: 6px; margin-top: 10px; text-align: center; float: right; } section#clients { padding: 0; } section#clients img { margin: 50px auto; } section#clients .client-logo { float: left; width: 20%; } @media (max-width: 992px) { section#clients .client-logo { width: 25%; } } @media (max-width: 768px) { section#clients .client-logo { width: 33%; } } section#contact { background: #f9b24f; position: relative; padding: 50px 0; border-bottom: 1px solid #2d363f; } section#contact .section-heading { color: white; font-weight: 200; font-size: 36px; margin-bottom: 40px; } section#contact .form-group { text-align: center; float: left; width: 37%; margin-right: 2%; } section#contact .form-group:last-child { width: 22%; margin-right: 0; } section#contact .form-control { height: 54px; border-radius: 2px; border: 0; } section#contact .btn { height: 54px; padding: 13px 10px 14px; } section#contact p { margin-top: 15px; color: #FFF; text-align: center; font-size: 12px; } section#contact ::-webkit-input-placeholder { font-weight: 600; color: #bbbbbb; } section#contact :-moz-placeholder { /* Firefox 18- */ font-weight: 600; color: #bbbbbb; } section#contact ::-moz-placeholder { /* Firefox 19+ */ font-weight: 600; color: #bbbbbb; } section#contact :-ms-input-placeholder { font-weight: 600; color: #bbbbbb; } .timeline { list-style: none; padding: 0; position: relative; } .timeline:before { top: 0; bottom: 0; position: absolute; content: ""; width: 2px; background-color: #f1f1f1; left: 40px; margin-left: -1.5px; } .timeline > li { margin-bottom: 50px; position: relative; min-height: 50px; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li .timeline-panel { width: 100%; float: right; padding: 0 20px 0 100px; position: relative; text-align: left; } .timeline > li .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline > li .timeline-image { left: 0; margin-left: 0; width: 80px; height: 80px; position: absolute; z-index: 100; background-color: #50a2e5; color: white; border-radius: 100%; border: 7px solid #f1f1f1; text-align: center; } .timeline > li .timeline-image h4 { font-size: 10px; margin-top: 12px; line-height: 14px; } .timeline > li.timeline-inverted > .timeline-panel { float: right; text-align: left; padding: 0 20px 0 100px; } .timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline > li:last-child { margin-bottom: 0; } .timeline .timeline-heading h4 { margin-top: 0; color: inherit; } .timeline .timeline-heading h4.subheading { text-transform: none; } .timeline .timeline-body > p, .timeline .timeline-body > ul { margin-bottom: 0; } @media (min-width: 768px) { .timeline:before { left: 50%; } .timeline > li { margin-bottom: 100px; min-height: 100px; } .timeline > li .timeline-panel { width: 41%; float: left; padding: 0 20px 20px 30px; text-align: right; } .timeline > li .timeline-image { width: 100px; height: 100px; left: 50%; margin-left: -50px; } .timeline > li .timeline-image h4 { font-size: 13px; margin-top: 16px; line-height: 18px; } .timeline > li.timeline-inverted > .timeline-panel { float: right; text-align: left; padding: 0 30px 20px 20px; } } @media (min-width: 992px) { .timeline > li { min-height: 150px; } .timeline > li .timeline-panel { padding: 0 20px 20px; } .timeline > li .timeline-image { width: 150px; height: 150px; margin-left: -75px; } .timeline > li .timeline-image h4 { font-size: 18px; margin-top: 30px; line-height: 26px; } .timeline > li.timeline-inverted > .timeline-panel { padding: 0 20px 20px; } } @media (min-width: 1200px) { .timeline > li { min-height: 170px; } .timeline > li .timeline-panel { padding: 0 20px 20px 100px; } .timeline > li .timeline-image { width: 170px; height: 170px; margin-left: -85px; } .timeline > li .timeline-image h4 { margin-top: 40px; } .timeline > li.timeline-inverted > .timeline-panel { padding: 0 100px 20px 20px; } } .portfolio-modal .modal-content { border-radius: 0; background-clip: border-box; -webkit-box-shadow: none; box-shadow: none; border: none; min-height: 100%; padding: 100px 0; text-align: center; } .portfolio-modal .modal-content h2 { margin-bottom: 15px; font-size: 3em; } .portfolio-modal .modal-content p { margin-bottom: 30px; } .portfolio-modal .modal-content p.item-intro { margin: 20px 0 30px; font-style: italic; font-size: 16px; } .portfolio-modal .modal-content ul.list-inline { margin-bottom: 30px; margin-top: 0; } .portfolio-modal .modal-content img { margin-bottom: 30px; } .portfolio-modal .close-modal { position: absolute; width: 75px; height: 75px; background-color: transparent; top: 25px; right: 25px; cursor: pointer; } .portfolio-modal .close-modal:hover { opacity: 0.3; } .portfolio-modal .close-modal .lr { height: 75px; width: 1px; margin-left: 35px; background-color: #222222; transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ z-index: 1051; } .portfolio-modal .close-modal .lr .rl { height: 75px; width: 1px; background-color: #222222; transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari and Chrome */ z-index: 1052; } .portfolio-modal .modal-backdrop { opacity: 0; display: none; } /*=============================================== A. Misc Helpers ================================================= */ /* Vertical Align Helpers */ .va-t { vertical-align: top !important; } .va-m { vertical-align: middle !important; } .va-b { vertical-align: bottom !important; } .va-s { vertical-align: super !important; } /* Relative Position Helper */ .posr { position: relative !important; } /* Inline Block Helper */ .ib, .inline-object { display: inline-block !important; } /* pointer cursor */ .cursor { cursor: pointer !important; } /* Useful for emphasizing a disabled input */ .option-disabled { opacity: 0.6 !important; } /* unstyled input */ .input-unstyled, .input-unstyled:hover, .input-unstyled:focus { border: none !important; background: none !important; box-shadow: none !important; outline: none !important; } /*=============================================== D. Table Layout Helpers ================================================= */ /* table-layout when attached to row */ .row.table-layout { margin-left: 0; margin-right: 0; border-collapse: collapse; } .table-layout { display: table; table-layout: fixed; width: 100%; margin: 0; } /* table-layout helper content */ .table-layout > div, .table-layout > aside, .table-layout > section { vertical-align: middle; display: table-cell; float: none; } @media (max-width: 1300px) { .table-layout.table-clear-md, .table-layout.table-clear-md > div, .table-layout.table-clear-md > aside, .table-layout.table-clear-md > section { display: block; float: none; } } @media (max-width: 992px) { .table-layout.table-clear-sm, .table-layout.table-clear-sm > div, .table-layout.table-clear-sm > aside, .table-layout.table-clear-sm > section { display: block; float: none; } } @media (max-width: 767px) { .table-layout.table-clear-xs, .table-layout.table-clear-xs > div, .table-layout.table-clear-xs > aside, .table-layout.table-clear-xs > section { display: block; float: none; } } /*=============================================== D. Padding Helpers ================================================= */ .pn { padding: 0 !important; } .p1 { padding: 1px !important; } .p2 { padding: 2px !important; } .p3 { padding: 3px !important; } .p4 { padding: 4px !important; } .p5 { padding: 5px !important; } .p6 { padding: 6px !important; } .p7 { padding: 7px !important; } .p8 { padding: 8px !important; } .p10 { padding: 10px !important; } .p12 { padding: 12px !important; } .p15 { padding: 15px !important; } .p20 { padding: 20px !important; } .p25 { padding: 25px !important; } .p30 { padding: 30px !important; } .p35 { padding: 35px !important; } .p40 { padding: 40px !important; } .p50 { padding: 50px !important; } .ptn { padding-top: 0 !important; } .pt5 { padding-top: 5px !important; } .pt10 { padding-top: 10px !important; } .pt15 { padding-top: 15px !important; } .pt20 { padding-top: 20px !important; } .pt25 { padding-top: 25px !important; } .pt30 { padding-top: 30px !important; } .pt35 { padding-top: 35px !important; } .pt40 { padding-top: 40px !important; } .pt50 { padding-top: 50px !important; } .prn { padding-right: 0 !important; } .pr5 { padding-right: 5px !important; } .pr10 { padding-right: 10px !important; } .pr15 { padding-right: 15px !important; } .pr20 { padding-right: 20px !important; } .pr25 { padding-right: 25px !important; } .pr30 { padding-right: 30px !important; } .pr35 { padding-right: 35px !important; } .pr40 { padding-right: 40px !important; } .pr50 { padding-right: 50px !important; } .pbn { padding-bottom: 0 !important; } .pb5 { padding-bottom: 5px !important; } .pb10 { padding-bottom: 10px !important; } .pb15 { padding-bottom: 15px !important; } .pb20 { padding-bottom: 20px !important; } .pb25 { padding-bottom: 25px !important; } .pb30 { padding-bottom: 30px !important; } .pb35 { padding-bottom: 35px !important; } .pb40 { padding-bottom: 40px !important; } .pb50 { padding-bottom: 50px !important; } .pln { padding-left: 0 !important; } .pl5 { padding-left: 5px !important; } .pl10 { padding-left: 10px !important; } .pl15 { padding-left: 15px !important; } .pl20 { padding-left: 20px !important; } .pl25 { padding-left: 25px !important; } .pl30 { padding-left: 30px !important; } .pl35 { padding-left: 35px !important; } .pl40 { padding-left: 40px !important; } .pl50 { padding-left: 50px !important; } /* Axis Padding (both top/bottom or left/right) */ .pv5 { padding-top: 5px !important; padding-bottom: 5px !important; } .pv8 { padding-top: 8px !important; padding-bottom: 8px !important; } .pv10 { padding-top: 10px !important; padding-bottom: 10px !important; } .pv15 { padding-top: 15px !important; padding-bottom: 15px !important; } .pv20 { padding-top: 20px !important; padding-bottom: 20px !important; } .pv25 { padding-top: 25px !important; padding-bottom: 25px !important; } .pv30 { padding-top: 30px !important; padding-bottom: 30px !important; } .pv40 { padding-top: 40px !important; padding-bottom: 40px !important; } .pv50 { padding-top: 50px !important; padding-bottom: 50px !important; } .ph5 { padding-left: 5px !important; padding-right: 5px !important; } .ph8 { padding-left: 8px !important; padding-right: 8px !important; } .ph10 { padding-left: 10px !important; padding-right: 10px !important; } .ph15 { padding-left: 15px !important; padding-right: 15px !important; } .ph20 { padding-left: 20px !important; padding-right: 20px !important; } .ph25 { padding-left: 25px !important; padding-right: 25px !important; } .ph30 { padding-left: 30px !important; padding-right: 30px !important; } .ph40 { padding-left: 40px !important; padding-right: 40px !important; } .ph50 { padding-left: 50px !important; padding-right: 50px !important; } /* responsive padding helpers */ @media (min-width: 1140px) { .ptn-lg { padding-top: 0 !important; } .prn-lg { padding-right: 0 !important; } .pbn-lg { padding-bottom: 0 !important; } .pln-lg { padding-left: 0 !important; } .pt5-lg { padding-top: 5px !important; } .pr5-lg { padding-right: 5px !important; } .pb5-lg { padding-bottom: 5px !important; } .pl5-lg { padding-left: 5px !important; } } @media (min-width: 992px) { .ptn-md { padding-top: 0 !important; } .prn-md { padding-right: 0 !important; } .pbn-md { padding-bottom: 0 !important; } .pln-md { padding-left: 0 !important; } .pt5-md { padding-top: 5px !important; } .pr5-md { padding-right: 5px !important; } .pb5-md { padding-bottom: 5px !important; } .pl5-md { padding-left: 5px !important; } } /*=============================================== E. Margin Helpers ================================================= */ /* margin center helper */ .mauto { margin-left: auto; margin-right: auto; } .mn { margin: 0 !important; } .m1 { margin: 1px !important; } .m2 { margin: 2px !important; } .m3 { margin: 3px !important; } .m4 { margin: 4px !important; } .m5 { margin: 5px !important; } .m8 { margin: 8px !important; } .m10 { margin: 10px !important; } .m15 { margin: 15px !important; } .m20 { margin: 20px !important; } .m25 { margin: 25px !important; } .m30 { margin: 30px !important; } .m35 { margin: 35px !important; } .m40 { margin: 40px !important; } .m50 { margin: 50px !important; } .mtn { margin-top: 0 !important; } .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; } .mt25 { margin-top: 25px !important; } .mt30 { margin-top: 30px !important; } .mt35 { margin-top: 35px !important; } .mt40 { margin-top: 40px !important; } .mt50 { margin-top: 50px !important; } .mt70 { margin-top: 70px !important; } .mrn { margin-right: 0 !important; } .mr5 { margin-right: 5px !important; } .mr10 { margin-right: 10px !important; } .mr15 { margin-right: 15px !important; } .mr20 { margin-right: 20px !important; } .mr25 { margin-right: 25px !important; } .mr30 { margin-right: 30px !important; } .mr35 { margin-right: 35px !important; } .mr40 { margin-right: 40px !important; } .mr50 { margin-right: 50px !important; } .mbn { margin-bottom: 0 !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb35 { margin-bottom: 35px !important; } .mb40 { margin-bottom: 40px !important; } .mb50 { margin-bottom: 50px !important; } .mb70 { margin-bottom: 70px !important; } .mln { margin-left: 0 !important; } .ml5 { margin-left: 5px !important; } .ml10 { margin-left: 10px !important; } .ml15 { margin-left: 15px !important; } .ml20 { margin-left: 20px !important; } .ml25 { margin-left: 25px !important; } .ml30 { margin-left: 30px !important; } .ml35 { margin-left: 35px !important; } .ml40 { margin-left: 40px !important; } .ml50 { margin-left: 50px !important; } /* Axis Margins (both top/bottom or left/right) */ .mv5 { margin-top: 5px !important; margin-bottom: 5px !important; } .mv10 { margin-top: 10px !important; margin-bottom: 10px !important; } .mv15 { margin-top: 15px !important; margin-bottom: 15px !important; } .mv20 { margin-top: 20px !important; margin-bottom: 20px !important; } .mv25 { margin-top: 25px !important; margin-bottom: 25px !important; } .mv30 { margin-top: 30px !important; margin-bottom: 30px !important; } .mv40 { margin-top: 40px !important; margin-bottom: 40px !important; } .mv50 { margin-top: 50px !important; margin-bottom: 50px !important; } .mv70 { margin-top: 70px !important; margin-bottom: 70px !important; } .mh5 { margin-left: 5px !important; margin-right: 5px !important; } .mh10 { margin-left: 10px !important; margin-right: 10px !important; } .mh15 { margin-left: 15px !important; margin-right: 15px !important; } .mh20 { margin-left: 20px !important; margin-right: 20px !important; } .mh25 { margin-left: 25px !important; margin-right: 25px !important; } .mh30 { margin-left: 30px !important; margin-right: 30px !important; } .mh40 { margin-left: 40px !important; margin-right: 40px !important; } .mh50 { margin-left: 50px !important; margin-right: 50px !important; } .mh70 { margin-left: 70px !important; margin-right: 70px !important; } /* Negative Margin Helpers */ .mtn5 { margin-top: -5px !important; } .mtn10 { margin-top: -10px !important; } .mtn15 { margin-top: -15px !important; } .mtn20 { margin-top: -20px !important; } .mtn30 { margin-top: -30px !important; } .mrn5 { margin-right: -5px !important; } .mrn10 { margin-right: -10px !important; } .mrn15 { margin-right: -15px !important; } .mrn20 { margin-right: -20px !important; } .mrn30 { margin-right: -30px !important; } .mbn5 { margin-bottom: -5px !important; } .mbn10 { margin-bottom: -10px !important; } .mbn15 { margin-bottom: -15px !important; } .mbn20 { margin-bottom: -20px !important; } .mbn30 { margin-bottom: -30px !important; } .mln5 { margin-left: -5px !important; } .mln10 { margin-left: -10px !important; } .mln15 { margin-left: -15px !important; } .mln20 { margin-left: -20px !important; } .mln30 { margin-left: -30px !important; } /* Vertical Negative Margin "mv" + "n" + "x" */ .mvn5 { margin-top: -5px !important; margin-bottom: -5px !important; } .mvn10 { margin-top: -10px !important; margin-bottom: -10px !important; } .mvn15 { margin-top: -15px !important; margin-bottom: -15px !important; } .mvn20 { margin-top: -20px !important; margin-bottom: -20px !important; } .mvn30 { margin-top: -30px !important; margin-bottom: -30px !important; } /* Horizontal Negative Margin "mh" + "n" + "x" */ .mhn5 { margin-left: -5px !important; margin-right: -5px !important; } .mhn10 { margin-left: -10px !important; margin-right: -10px !important; } .mhn15 { margin-left: -15px !important; margin-right: -15px !important; } .mhn20 { margin-left: -20px !important; margin-right: -20px !important; } .mhn30 { margin-left: -30px !important; margin-right: -30px !important; } /*=============================================== H. Max Width Helpers ================================================= */ .fluid-width { width: 100% !important; } .mw10 { max-width: 10px !important; } .mw20 { max-width: 20px !important; } .mw30 { max-width: 30px !important; } .mw35 { max-width: 35px !important; } .mw40 { max-width: 40px !important; } .mw45 { max-width: 45px !important; } .mw50 { max-width: 50px !important; } .mw60 { max-width: 60px !important; } .mw80 { max-width: 80px !important; } .mw100 { max-width: 100px !important; } .mw140 { max-width: 140px !important; } .mw160 { max-width: 160px !important; } .mw180 { max-width: 180px !important; } .mw200 { max-width: 200px !important; } .mw240 { max-width: 240px !important; } .mw280 { max-width: 280px !important; } .mw320 { max-width: 320px !important; } .mw400 { max-width: 400px !important; } .mw450 { max-width: 450px !important; } .mw500 { max-width: 500px !important; } .mw600 { max-width: 600px !important; } .mw700 { max-width: 700px !important; } .mw800 { max-width: 800px !important; } .mw850 { max-width: 850px !important; } .mw900 { max-width: 900px !important; } .mw1000 { max-width: 1000px !important; } .mw1100 { max-width: 1100px !important; } .mw1200 { max-width: 1200px !important; }