*{ box-sizing: border-box; } body{ margin: 0; } .row:after{ content: " "; display: table; clear:both; } .row [class^="col_"], .row [class*=" col_"]{ float: left; width: 100%; } .row .col_12{ width: 100%; display: block; } .row .col_11{ width: 91%; display: block; } .row .col_10{ width: 83%; display: block; } .row .col_9{ width: 75%; display: block; } .row .col_8{ width: 66%; display: block; } .row .col_7{ width: 58.5%; display: block; } .row .col_6{ width: 50%; display: block; } .row .col_5{ width: 41.5%; display: block; } .row .col_4{ width: 33.33%; display: block; } .row .col_3{ width: 25%; display: block; } .row .col_2{ width: 16.5%; display: block; } .row .col_1{ width: 9%; display: block; } .flex, .equal_flex{ display: table; } .success, .button.success, button.success { color: #155724; background-color: #66c571; border-color: #c3e6cb; } button.success, .button.success{ color: #fff } button.success:hover, .button.success:hover{ background: #5ad168; } .warning, .button.warning, button.warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; } button.warning:hover, .button.warning:hover{ background: #fdd557; } .danger, .button.danger, button.danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } button.danger:hover, .button.danger:hover{ background: #da636e; } .positive, .button.positive, button.positive { color: #004085; background-color: #cce5ff; border-color: #b8daff; } button.positive:hover, .button.positive:hover{ background: #a5c5e6; } .well { padding: 10px; margin: 10px auto; position: relative; display: table; break-inside: avoid; page-break-inside: avoid; } @supports (display: flex){ .flex{ display: flex; flex-wrap: wrap; justify-content: center; } .equal_flex{ display: flex; -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ flex: 1; flex-wrap: wrap; justify-content: center; } } @supports not (display: flex){ .flex > *, .equal_flex > *{ display: table-cell; } } .table{ display: table; } .table .cell{ display: table-cell !important; } .padded{ padding: 15px; } .margins{ margin: 15px; } .left_align{ text-align: left; } .center_align{ text-align: center; } .right_align{ text-align: right; } @media only screen { } @media only screen and (max-width: 500px){ .row .col_xxs_12{ width: 100%; display: block; } .row .col_xxs_11{ width: 91%; display: block; } .row .col_xxs_10{ width: 83%; display: block; } .row .col_xxs_9{ width: 75%; display: block; } .row .col_xxs_8{ width: 66%; display: block; } .row .col_xxs_7{ width: 58.5%; display: block; } .row .col_xxs_6{ display: block; width: 50%; } .row .col_xxs_5{ display: block; width: 41.5%; } .row .col_xxs_4{ display: block; width: 33.33%; } .row .col_xxs_3{ display: block; width: 25%; } .row .col_xxs_2{ display: block; width: 16.5%; } .row .col_xxs_1{ width: 9%; display: block; } .left_align_xxs{ text-align: left; } .center_align_xxs{ text-align: center; } .right_align_xxs{ text-align: right; } .table_xxs{ display: table; } .table_xxs .cell{ display: table-cell !important; } .xxs_hidden{ display: none !important; } .padded_xxs{ padding: 15px; } .margins_xxs{ margin: 10px; } .xxs_left_float{ float:left !important; } .xxs_right_float{ float:right !important; } } @media only screen and (min-width: 500.1px) and (max-width: 767px){ .row .col_xs_12{ display: block; width: 100%; } .row .col_xs_11{ width: 91%; display: block; } .row .col_xs_10{ width: 83%; display: block; } .row .col_xs_9{ width: 75%; display: block; } .row .col_xs_8{ width: 66%; display: block; } .row .col_xs_7{ width: 58.5%; display: block; } .row .col_xs_6{ display: block; width: 50%; } .row .col_xs_5{ display: block; width: 41.5%; } .row .col_xs_4{ display: block; width: 33.33%; } .row .col_xs_3{ display: block; width: 25%; } .row .col_xs_2{ display: block; width: 16.5%; } .row .col_xs_1{ width: 9%; display: block; } .left_align_xs{ text-align: left; } .center_align_xs{ text-align: center; } .right_align_xs{ text-align: right; } .table_xs{ display: table; } .table_xs .cell{ display: table-cell !important; } .xs_hidden{ display: none !important; } .padded_xs{ padding: 15px; } .margins_xs{ margin: 10px; } .xs_left_float{ float:left !important; } .xs_right_float{ float:right !important; } } @media only screen and (min-width: 767.1px) and (max-width: 921px){ .row .col_sm_12{ display: block; width: 100%; } .row .col_sm_11{ width: 91%; display: block; } .row .col_sm_10{ width: 83%; display: block; } .row .col_sm_9{ width: 75%; display: block; } .row .col_sm_8{ width: 66%; display: block; } .row .col_sm_7{ width: 58.5%; display: block; } .row .col_sm_6{ display: block; width: 50%; } .row .col_sm_5{ display: block; width: 41.5%; } .row .col_sm_4{ display: block; width: 33.33%; } .row .col_sm_3{ display: block; width: 25%; } .row .col_sm_2{ display: block; width: 16.5%; } .row .col_sm_1{ width: 9%; display: block; } .left_align_sm{ text-align: left; } .center_align_sm{ text-align: center; } .right_align_sm{ text-align: right; } .table_sm{ display: table; } .table_sm .cell{ display: table-cell !important; } .sm_hidden{ display: none !important; } .padded_sm{ padding: 15px; } .margins_sm{ margin: 10px; } .sm_left_float{ float:left !important; } .sm_right_float{ float:right !important; } } @media only screen and (min-width: 921.1px) and (max-width: 1199px){ .row .col_md_12{ display: block; width: 100%; } .row .col_md_11{ width: 91%; display: block; } .row .col_md_10{ width: 83%; display: block; } .row .col_md_9{ width: 75%; display: block; } .row .col_md_8{ width: 66%; display: block; } .row .col_md_7{ width: 58.5%; display: block; } .row .col_md_6{ display: block; width: 50%; } .row .col_md_5{ display: block; width: 41.5%; } .row .col_md_4{ display: block; width: 33.33%; } .row .col_md_3{ display: block; width: 25%; } .row .col_md_2{ display: block; width: 16.5%; } .row .col_md_1{ width: 9%; display: block; } .left_align_md{ text-align: left; } .center_align_md{ text-align: center; } .right_align_md{ text-align: right; } .table_md{ display: table; } .table_md .cell{ display: table-cell !important; } .padded_md{ padding: 15px; } .margins_md{ margin: 10px; } .md_hidden{ display: none !important; } .md_left_float{ float:left !important; } .md_right_float{ float:right !important; } } @media only screen and (min-width: 1199.1px){ .row .col_lg_12{ display: block; width: 100%; } .row .col_lg_11{ width: 91%; display: block; } .row .col_lg_10{ width: 83%; display: block; } .row .col_lg_9{ width: 75%; display: block; } .row .col_lg_8{ width: 66%; display: block; } .row .col_lg_7{ width: 58.5%; display: block; } .row .col_lg_6{ display: block; width: 50%; } .row .col_lg_5{ display: block; width: 41.5%; } .row .col_lg_4{ display: block; width: 33.33%; } .row .col_lg_3{ display: block; width: 25%; } .row .col_lg_2{ display: block; width: 16.5%; } .row .col_lg_1{ width: 9%; display: block; } .left_align_lg{ text-align: left; } .center_align_lg{ text-align: center; } .right_align_lg{ text-align: right; } .table_lg{ display: table; } .table_lg .cell{ display: table-cell !important; } .padded_lg{ padding: 15px; } .margins_lg{ margin: 10px; } .lg_hidden{ display: none !important; } .lg_left_float{ float:left !important; } .lg_right_float{ float:right !important; } } @media only screen and (min-width: 1399.1px){ .row .col_xl_12{ display: block; width: 100%; } .row .col_xl_11{ width: 91%; display: block; } .row .col_xl_10{ width: 83%; display: block; } .row .col_xl_9{ width: 75%; display: block; } .row .col_xl_8{ width: 66%; display: block; } .row .col_xl_7{ width: 58.5%; display: block; } .row .col_xl_6{ display: block; width: 50%; } .row .col_xl_5{ display: block; width: 41.5%; } .row .col_xl_4{ display: block; width: 33.33%; } .row .col_xl_3{ display: block; width: 25%; } .row .col_xl_2{ display: block; width: 16.5%; } .row .col_xl_1{ width: 9%; display: block; } .left_align_xl{ text-align: left; } .center_align_xl{ text-align: center; } .right_align_xl{ text-align: right; } .table_xl{ display: table; } .table_xl .cell{ display: table-cell !important; } .padded_xl{ padding: 15px; } .margins_xl{ margin: 10px; } .xl_hidden{ display: none !important; } .xl_left_float{ float:left !important; } .xl_right_float{ float:right !important; } } @media only screen and (min-width: 1599.1px){ .row .col_xxl_12{ display: block; width: 100%; } .row .col_xxl_11{ width: 91%; display: block; } .row .col_xxl_10{ width: 83%; display: block; } .row .col_xxl_9{ width: 75%; display: block; } .row .col_xxl_8{ width: 66%; display: block; } .row .col_xxl_7{ width: 58.5%; display: block; } .row .col_xxl_6{ display: block; width: 50%; } .row .col_xxl_5{ display: block; width: 41.5%; } .row .col_xxl_4{ display: block; width: 33.33%; } .row .col_xxl_3{ display: block; width: 25%; } .row .col_xxl_2{ display: block; width: 16.5%; } .row .col_xxl_1{ width: 9%; display: block; } .left_align_xxl{ text-align: left; } .center_align_xxl{ text-align: center; } .right_align_xxl{ text-align: right; } .table_xxl{ display: table; } .table_xxl .cell{ display: table-cell !important; } .padded_xxl{ padding: 15px; } .margins_xxl{ margin: 10px; } .xxl_hidden{ display: none !important; } .xxl_left_float{ float:left !important; } .xxl_right_float{ float:right !important; } } @media print{ .row .col_print_12{ display: block; width: 100%; } .row .col_print_11{ width: 91%; display: block; } .row .col_print_10{ width: 83%; display: block; } .row .col_print_9{ width: 75%; display: block; } .row .col_print_8{ width: 66%; display: block; } .row .col_print_7{ width: 58.5%; display: block; } .row .col_print_6{ display: block; width: 50%; } .row .col_print_5{ display: block; width: 41.5%; } .row .col_print_4{ display: block; width: 33.33%; } .row .col_print_3{ display: block; width: 25%; } .row .col_print_2{ display: block; width: 16.5%; } .row .col_print_1{ width: 9%; display: block; } .left_align_print{ text-align: left; } .center_align_print{ text-align: center; } .right_align_print{ text-align: right; } .table_print{ display: table; } .table_print .cell{ display: table-cell !important; } .print_left_float{ float:left !important; } .print_right_float{ float:right !important; } .print_hidden{ display: none !important; } } @media (min-width: 500.1px){ .central_container{ max-width: 700px; margin: auto; } } .table, .table_xxs, .table_xs, .table_sm, .table_md, .table_lg{ width: 100%; } .lead{ font-size: 120%; } .banner{ padding: 20px 10px; background: #f0f0f0; } .banner .content, .banner_bg .content{ max-width: 1600px; margin: auto; position: relative; } .banner.nth-child(odd){ background: #f8f8f8; } .banner .header{ font-size: 200%; } .banner .header .sm{ font-size:50%; } .banner_bg{ position: relative; } .banner_bg > img, .banner_img img{ width: 100%; max-height: 300px; display: block; } .banner_bg > img{ opacity: 0; } .banner_bg.big img{ min-height: 100vh; max-height: 100vh; } .banner_bg .background{ background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 10; } .banner_bg .mask{ background: #000; opacity:0.4; z-index: 11; } .banner_bg .background, .banner_bg .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .uppercase{ text-transform: uppercase; } .footer{ padding: 5px 0; background: #ddd; text-align: center; color:#000; } @media only screen and (min-width: 1024.1px){ .banner_bg .background{ background-attachment: fixed; } } @media only screen and (max-height: 450px){ .banner_bg > img, .banner_img img{ max-height: 200px; } } @media only screen{ .print_only{ display: none; } } @media only print{ .central_container{ max-width: none !important; } .banner{ background-image: none !important; } .padded_print{ padding: 15px; } .margins_print{ margin: 10px; } }