/* Use these classes to set the width of a column. */
.box-100p{ width: 100%; }
.box-10  { width: 10px; }
.box-14  { width: 14px; }
.box-16  { width: 16px; }
.box-20  { width: 20px; }
.box-25  { width: 25px; }
.box-30  { width: 30px; }
.box-40  { width: 40px; }
.box-50  { width: 50px; }
.box-60  { width: 60px; }
.box-70  { width: 70px; }
.box-80  { width: 80px; }
.box-90  { width: 90px; }
.box-100 { width: 100px; }
.box-110 { width: 110px; }
.box-120 { width: 120px; }
.box-130 { width: 130px; }
.box-140 { width: 140px; }
.box-145 { width: 145px; }
.box-150 { width: 150px; }
.box-156 { width: 156px; }
.box-170 { width: 170px; }
.box-180 { width: 180px; }
.box-190 { width: 190px; }
.box-200 { width: 200px; }
.box-230 { width: 230px; }
.box-250 { width: 250px; }
.box-270 { width: 270px; }
.box-282 { width: 282px; }
.box-300 { width: 300px; }
.box-310 { width: 310px; }
.box-320 { width: 320px; }
.box-350 { width: 350px; }
.box-390 { width: 390px; }
.box-400 { width: 400px; }
.box-430 { width: 430px; }
.box-450 { width: 450px; }
.box-470 { width: 470px; }
.box-510 { width: 510px; }
.box-550 { width: 550px; }
.box-560 { width: 560px; }
.box-590 { width: 590px; }
.box-620 { width: 620px; }
.box-630 { width: 630px; }
.box-650 { width: 650px; }
.box-670 { width: 670px; }
.box-680 { width: 680px; }
.box-710 { width: 710px; }
.box-730 { width: 730px; }
.box-750 { width: 750px; }
.box-780 { width: 780px; }
.box-790 { width: 790px; }
.box-792 { width: 792px; }
.box-830 { width: 830px; }
.box-870 { width: 870px; }
.box-910 { width: 910px; }
.box-950 { width: 950px; }



/* Add these to a box to padding right. */
.pad-right-0    { padding-right: 0; }
.pad-right-4    { padding-right: 4px; }
.pad-right-5    { padding-right: 5px; }
.pad-right-6    { padding-right: 6px; }
.pad-right-8    { padding-right: 8px; }
.pad-right-10   { padding-right: 10px; }
.pad-right-12   { padding-right: 12px; }
.pad-right-14   { padding-right: 14px; }
.pad-right-16   { padding-right: 16px; }
.pad-right-18   { padding-right: 18px; }
.pad-right-20   { padding-right: 20px; }
.pad-right-40   { padding-right: 40px; }
.pad-right-80   { padding-right: 80px; }
.pad-right-120  { padding-right: 120px; }
.pad-right-160  { padding-right: 160px; }
.pad-right-200  { padding-right: 200px; }


/* Add these to a box to padding left. */
.pad-left-0    { padding-left: 0; }
.pad-left-3    { padding-left: 3px; }
.pad-left-4    { padding-left: 4px; }
.pad-left-5    { padding-left: 5px; }
.pad-left-6    { padding-left: 6px; }
.pad-left-8    { padding-left: 8px; }
.pad-left-10   { padding-left: 10px; }
.pad-left-12   { padding-left: 12px; }
.pad-left-14   { padding-left: 14px; }
.pad-left-15   { padding-left: 15px; }
.pad-left-16   { padding-left: 16px; }
.pad-left-18   { padding-left: 18px; }
.pad-left-20   { padding-left: 20px; }
.pad-left-22   { padding-left: 22px; }
.pad-left-36   { padding-left: 36px; }
.pad-left-30   { padding-left: 30px; }
.pad-left-40   { padding-left: 40px; }
.pad-left-80   { padding-left: 80px; }
.pad-left-120  { padding-left: 120px; }
.pad-left-160  { padding-left: 160px; }
.pad-left-200  { padding-left: 200px; }


.pad-left-5pp    { padding-left: 5%; }

 /* Add these to a box to padding top. */
.pad-top-0    { padding-top: 0;}
.pad-top-4    { padding-top: 4px;}
.pad-top-5    { padding-top: 5px;}
.pad-top-6    { padding-top: 6px;}
.pad-top-8    { padding-top: 8px;}
.pad-top-10   { padding-top: 10px;}
.pad-top-15   { padding-top: 15px;}
.pad-top-20   { padding-top: 20px;}
.pad-top-25   { padding-top: 25px;}
.pad-top-30   { padding-top: 30px;}
.pad-top-35   { padding-top: 35px;}
.pad-top-50   { padding-top: 50px;}

 /* Add these to a box to padding down. */
.pad-bottom-0    { padding-bottom: 0; }
.pad-bottom-4    { padding-bottom: 4px; }
.pad-bottom-5    { padding-bottom: 5px; }
.pad-bottom-6    { padding-bottom: 6px; }
.pad-bottom-10   { padding-bottom: 10px; }
.pad-bottom-20   { padding-bottom: 20px;}
.pad-bottom-30   { padding-bottom: 30px;}
.pad-bottom-40   { padding-bottom: 40px;}
.pad-bottom-50   { padding-bottom: 50px;}

/* Add these to a box to margin left. */
.mar-left-5       {margin-left: 5px;}
.mar-left-6       {margin-left: 6px;}
.mar-left-7       {margin-left: 7px;}
.mar-left-8       {margin-left: 8px;}
.mar-left-9       {margin-left: 9px;}
.mar-left-10     {margin-left: 10px;}
.mar-left-12     {margin-left: 12px;}
.mar-left-15     {margin-left: 15px;}
.mar-left-16     {margin-left: 16px;}
.mar-left-20     {margin-left: 20px;}
.mar-left-24     {margin-left: 24px;}
.mar-left-25     {margin-left: 25px;}
.mar-left-28     {margin-left: 28px;}
.mar-left-30     {margin-left: 30px;}
.mar-left-48     {margin-left: 48px;}
.mar-left-54     {margin-left: 54px;}

.mar-left-5pp    {margin-left: 5%;}


 /* Add these to a box to margin right. */
.mar-right-2    {margin-right: 2px;}
.mar-right-5    {margin-right: 5px;}
.mar-right-6    {margin-right: 6px;}
.mar-right-7    {margin-right: 7px;}
.mar-right-8    {margin-right: 8px;}
.mar-right-9    {margin-right: 9px;}
.mar-right-10   {margin-right: 10px;}
.mar-right-11   {margin-right: 11px;}
.mar-right-12   {margin-right: 12px;}
.mar-right-13   {margin-right: 13px;}
.mar-right-14   {margin-right: 14px;}
.mar-right-15   {margin-right: 15px;}
.mar-right-16   {margin-right: 16px;}
.mar-right-17   {margin-right: 17px;}
.mar-right-18   {margin-right: 18px;}
.mar-right-20   {margin-right: 20px;}
.mar-right-22   {margin-right: 22px;}
.mar-right-24   {margin-right: 24px;}
.mar-right-25   {margin-right: 25px;}
.mar-right-26   {margin-right: 26px;}
.mar-right-30   {margin-right: 30px;}
.mar-right-33   {margin-right: 33px;}
.mar-right-40   {margin-right: 40px;}
.mar-right-45   {margin-right: 45px;}
.mar-right-50   {margin-right: 50px;}
.mar-right-60   {margin-right: 60px;}
.mar-right-160  {margin-right: 160px;}

 /* Add these to a box to margin down. */
.mar-bottom-0     {margin-bottom: 0 !important; }
.mar-bottom-3     {margin-bottom: 3px;}
.mar-bottom-4     {margin-bottom: 4px;}
.mar-bottom-5     {margin-bottom: 5px;}
.mar-bottom-7     {margin-bottom: 7px;}
.mar-bottom-8     {margin-bottom: 8px;}
.mar-bottom-10    {margin-bottom: 10px;}
.mar-bottom-12    {margin-bottom: 12px;}
.mar-bottom-15    {margin-bottom: 15px;}
.mar-bottom-20    {margin-bottom: 20px;}
.mar-bottom-30    {margin-bottom: 30px;}
.mar-bottom-40    {margin-bottom: 40px;}
.mar-bottom-50    {margin-bottom: 50px;}
.mar-bottom-100   {margin-bottom: 100px;}

 /* Add these to a box to margin top. */
.mar-top-0     {margin-top: 0;}
.mar-top-1     {margin-top: 1px;}
.mar-top-2     {margin-top: 2px;}
.mar-top-3     {margin-top: 3px;}
.mar-top-4     {margin-top: 4px;}
.mar-top-5     {margin-top: 5px;}
.mar-top-6     {margin-top: 6px;}
.mar-top-7     {margin-top: 7px;}
.mar-top-8     {margin-top: 8px;}
.mar-top-10    {margin-top: 10px;}
.mar-top-12    {margin-top: 12px;}
.mar-top-15    {margin-top: 15px;}
.mar-top-20    {margin-top: 20px;}
.mar-top-25    {margin-top: 25px;}
.mar-top-30    {margin-top: 30px;}
.mar-top-70    {margin-top: 70px;}

.mar-top-m2     {margin-top: -2px;}


.padding-20 {padding: 20px;}


.row-flex {display: flex; justify-content: center;} 
    .row-flex div {word-break: break-word;}

.row-flex-wrap {display: flex; flex-wrap: wrap;} 
    .row-flex-wrap > div {padding-bottom: 20px;} /* This is the column*/
        .row-flex-wrap > div > .panel {height: 100%;} /*This is for fill backgroun-color*/



/* The last column in a row needs this class. */
.last, div.last { margin-right: 0; }




/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow:hidden;
    width: 100%;
}
.clearfix {
    display: block;
    clear: both;
}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear {
    clear:both;
    float: left;
}


.border-bottom {border-bottom: 1px solid #e5e5e5; padding-bottom: 24px;}

.no-padding-vertical, .no_padding_vertical {padding-top: 0; padding-bottom: 0;}

.no-padding-horizontal, .no_padding_horizontal {padding-left: 0 !important; padding-right: 0 !important;}

.no-margin-vertical, .no_margin_vertical {margin-top: 0; margin-bottom: 0;}



@media (min-width: 320px) {
    .small_pad_left_mw-320 {padding-left: 5px;}
}

@media (min-width: 768px) {
    .no_pad_left_sm_md_lg {padding-left: 0;}
    .no_pad_right_sm_md_lg {padding-right: 0;}
    .no_padding_horizontal_sm_md_lg {padding-right: 0; padding-left: 0;}

    .row-flex--sm-md-lg {display: flex; align-items: stretch;}
}

@media (max-width: 991px) {
    .no_pad_horizontal_xs_sm {padding-left: 0; padding-right: 0;}
}

@media (max-width: 768px) {
    .no_pad_horizontal_xs {padding-left: 0; padding-right: 0;}
    .no_pad_left_xs {padding-left: 0;}
    .no_padding_horizontal_xs {padding-right: 0; padding-left: 0;}

    .xs-60  {width: 60px;}
    .xs-160 {width: 160px;}
    .xs-200 {width: 200px;}
}