* { box-sizing: border-box; } .pad { padding-right: 0.5%; padding-left: 0.5%; background-clip: content-box; } .row { display: block; float: left; width: 100%; } .RI img, .ri img, img.RI, img.ri { width: 100%; height: auto; } /*Responsive Image*/ .clear { clear: both; } .flex-container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: flex-start; flex-wrap: wrap; } .flex-center { display: flex; justify-content: center; align-items: center; } /*float defaults - before cut off points*/ .d-1of12, .d-2of24, .d-1of11, .d-1of10, .d-1of9, .d-1of8, .d-3of24 , .d-1of7, .d-2of12, .d-1of6, .d-4of24 , .d-1of5, .d-3of12, .d-1of4, .d-6of24 , .d-4of12, .d-1of3, .d-8of24, .d-5of12, .d-10of24, .d-6of12, .d-1of2, .d-12of24, .d-7of12, .d-14of24, .d-8of12, .d-2of3, .d-16of24, .d-9of12, .d-3of4, .d-18of24 , .d-10of12, .d-20of24, .d-11of12, .d-22of24 , .d-12of12,.d-all, .d-1of1, .d-24of24, .d-1of24, .d-5of24, .d-7of24, .d-9of24, .d-11of24, .d-13of24, .d-15of24, .d-17of24, .d-19of24, .d-21of24, .d-23of24,.sd-1of12,.sd-1of11,.sd-1of10,.sd-1of9,.sd-1of8,.sd-1of7 ,.sd-2of12,.sd-3of12, .sd-1of4,.sd-4of12, .sd-1of3,.sd-5of12,.sd-6of12, .sd-1of2,.sd-7of12,.sd-8of12, .sd-2of3,.sd-9of12, .sd-3of4,.sd-10of12,.sd-11of12,.sd-12of12, .sd-all, .sd-1of1,.t-1of12,.t-1of11,.t-1of10,.t-1of9,.t-1of8,.t-1of7 ,.t-2of12,.t-3of12, .t-1of4,.t-4of12, .t-1of3,.t-5of12,.t-6of12, .t-1of2,.t-7of12,.t-8of12, .t-2of3,.t-9of12, .t-3of4,.t-10of12,.t-11of12,.t-12of12, .t-all, .t-1of1, .m-1of12,.m-1of11,.m-1of10,.m-1of9,.m-1of8 ,.m-1of7,.m-2of12, .m-1of6,.m-3of12, .m-1of4,.m-4of12, .m-2of6, .m-1of3,.m-5of12,.m-6of12, .m-3of6, .m-1of2,.m-7of12,.m-8of12, .m-4of6, .m-2of3,.m-9of12, .m-3of4,.m-10of12, .m-5of6,.m-11of12,.m-12of12, .m-6of6, .m-all, .m-1of1,.sm-1of12,.sm-1of11,.sm-1of10,.sm-1of9,.sm-1of8,.sm-1of7,.sm-2of12, .sm-1of6,.sm-3of12, .sm-1of4,.sm-4of12, .sm-2of6, .sm-1of3,.sm-5of12,.sm-6of12, .sm-3of6, .sm-1of2,.sm-7of12,.sm-8of12, .sm-4of6, .sm-2of3,.sm-9of12, .sm-3of4,.sm-10of12, .sm-5of6,.sm-11of12,.sm-12of12, .sm-6of6, .sm-3of3, .sm-all, .sm-1of1 {float: left;} .left { float: left; } .right { float: right; } /*Desktop*/ .d-1of12, .d-2of24 { width: 8.33333333333%; flex-basis: 8.33333333333%; } .d-1of11 { width: 9.0909%; flex-basis: 9.0909%; } .d-1of10 { width: 10%; flex-basis: 10%; } .d-1of9 { width: 11.1111%; flex-basis: 11.1111%; } .d-1of8, .d-3of24 { width: 12.5%; flex-basis: 12.5%; } .d-1of7 { width: 14.2857%; flex-basis: 14.2857%; } .d-2of12, .d-1of6, .d-4of24 { width: 16.6666666667%; flex-basis: 16.6666666667%; } .d-1of5 { width: 20%; flex-basis: 20%; } .d-3of12, .d-1of4, .d-6of24 { width: 25%; flex-basis: 25%; } .d-4of12, .d-1of3, .d-8of24 { width: 33.3333333333%; flex-basis: 33.3333333333%; } .d-5of12, .d-10of24 { width: 41.6666666667%; flex-basis: 41.6666666667%; } .d-6of12, .d-1of2, .d-12of24 { width: 50%; flex-basis: 50%; } .d-7of12, .d-14of24 { width: 58.3333333333%; flex-basis: 58.3333333333%; } .d-8of12, .d-2of3, .d-16of24 { width: 66.6666666667%; flex-basis: 66.6666666667%; } .d-9of12, .d-3of4, .d-18of24 { width: 75%; flex-basis: 75%; } .d-10of12, .d-20of24 { width: 83.3333333333%; flex-basis: 83.3333333333%; } .d-11of12, .d-22of24 { width: 91.6666666667%; flex-basis: 91.6666666667%; } .d-12of12,.d-all, .d-1of1, .d-24of24 { width: 100%; flex-basis: 100%; } .d-1of24 { width: 4.166666667%; flex-basis:4.166666667%; } .d-5of24 { width: 20.83333333%; flex-basis: 20.83333333%; } .d-7of24 { width: 29.16666667%; flex-basis: 29.16666667%; } .d-9of24 { width: 37.5%; flex-basis: 37.5%; } .d-11of24 { width: 45.83333333%; flex-basis: 45.83333333%; } .d-13of24 { width: 54.16666667%; flex-basis: 54.16666667%; } .d-15of24 { width: 62.5%; flex-basis: 62.5%; } .d-17of24 { width: 70.83333333%; flex-basis: 70.83333333% } .d-19of24 { width: 79.16666667%; flex-basis: 79.16666667% } .d-21of24 { width: 87.5%; flex-basis:87.5% } .d-23of24 { width: 95.83333333%; flex-basis:95.83333333% } .d-none { display: none; } .d-block {display: block;} .d-left { float: left; } .d-right { float: right; } @media (max-width: 1280px) { /*Small Desktop*/ .sd-1of12 { width: 8.33333333333%; ; flex-basis: 8.33333333333%; } .sd-1of11 { width: 9.0909%; ; flex-basis: 9.0909%; } .sd-1of10 { width: 10%; ; flex-basis: 10%; } .sd-1of9 { width: 11.1111%; flex-basis: 11.1111%; } .sd-1of8 { width: 12.5%; ; flex-basis: 12.5%; } .sd-1of7 { width: 14.2857%; ; flex-basis: 14.2857%; } .sd-2of12 { width: 16.6666666667%; flex-basis: 16.6666666667%; } .sd-3of12, .sd-1of4 { width: 25%; flex-basis: 25%; } .sd-4of12, .sd-1of3 { width: 33.3333333333%; flex-basis: 33.3333333333%; } .sd-5of12 { width: 41.6666666667%; flex-basis: 41.6666666667%; } .sd-6of12, .sd-1of2 { width: 50%; flex-basis: 50%; } .sd-7of12 { width: 58.3333333333%; flex-basis: 58.3333333333%; } .sd-8of12, .sd-2of3 { width: 66.6666666667%; flex-basis: 66.6666666667%; } .sd-9of12, .sd-3of4 { width: 75%; flex-basis: 75%; } .sd-10of12 { width: 83.3333333333%; flex-basis: 83.3333333333%; } .sd-11of12 { width: 91.6666666667%; flex-basis: 91.6666666667%; } .sd-12of12, .sd-all, .sd-1of1 { width: 100%; flex-basis: 100%; } .sd-none { display: none; } .sd-block { display: block; } .sd-left { float: left; } .sd-right { float: right; } } @media(max-width: 1029px) { /*Tablet*/ .t-1of12 { width: 8.33333333333%; flex-basis: 8.33333333333%; } .t-1of11 { width: 9.0909%; flex-basis: 9.0909%; } .t-1of10 { width: 10%; flex-basis: 10%; } .t-1of9 { width: 11.1111%; flex-basis: 11.1111%; } .t-1of8 { width: 12.5%; flex-basis: 12.5%; } .t-1of7 { width: 14.2857%; flex-basis: 14.2857%; } .t-2of12 { width: 16.6666666667%; flex-basis: 16.6666666667%; } .t-3of12, .t-1of4 { width: 25%; flex-basis: 25%; } .t-4of12, .t-1of3 { width: 33.3333333333%; flex-basis: 33.3333333333%; } .t-5of12 { width: 41.6666666667%; flex-basis: 41.6666666667%; } .t-6of12, .t-1of2 { width: 50%; flex-basis: 50%; } .t-7of12 { width: 58.3333333333%; flex-basis: 58.3333333333%; } .t-8of12, .t-2of3 { width: 66.6666666667%; flex-basis: 66.6666666667%; } .t-9of12, .t-3of4 { width: 75%; flex-basis: 75%; } .t-10of12 { width: 83.3333333333%; flex-basis: 83.3333333333%; } .t-11of12 { width: 91.6666666667%; flex-basis: 91.6666666667%; } .t-12of12, .t-all, .t-1of1 { width: 100%; flex-basis: 100%; } .t-none { display: none; } .t-block { display: block; } .t-left { float: left; } .t-right { float: right; } } @media(max-width: 767px) { /*Mobile*/ .m-1of12 { width: 8.33333333333%; flex-basis: 8.33333333333%; } .m-1of11 { width: 9.0909%; flex-basis: 9.0909%; } .m-1of10 { width: 10%; flex-basis: 10%; } .m-1of9 { width: 11.1111%; flex-basis: 11.1111%; } .m-1of8 { width: 12.5%; flex-basis: 12.5%; } .m-1of7 { width: 14.2857%; flex-basis: 14.2857%; } .m-2of12, .m-1of6 { width: 16.6666666667%; flex-basis: 16.6666666667%; } .m-3of12, .m-1of4 { width: 25%; flex-basis: 25%; } .m-4of12, .m-2of6, .m-1of3 { width: 33.3333333333%; flex-basis: 33.3333333333%; } .m-5of12 { width: 41.6666666667%; flex-basis: 41.6666666667%; } .m-6of12, .m-3of6, .m-1of2 { width: 50%; flex-basis: 50%; } .m-7of12 { width: 58.3333333333%; flex-basis: 58.3333333333%; } .m-8of12, .m-4of6, .m-2of3 { width: 66.6666666667%; flex-basis: 66.6666666667%; } .m-9of12, .m-3of4 { width: 75%; flex-basis: 75%; } .m-10of12, .m-5of6 { width: 83.3333333333%; flex-basis: 83.3333333333%; } .m-11of12 { width: 91.6666666667%; flex-basis: 91.6666666667%; } .m-12of12, .m-6of6, .m-all, .m-1of1 { width: 100%; flex-basis: 100%; } .m-none { display: none; } .m-block { display: block; } .m-left { float: left; } .m-right { float: right; } } @media(max-width: 480px) { /*Small Mobile*/ .sm-1of12 { width: 8.33333333333%; flex-basis: 8.33333333333%; } .sm-1of11 { width: 9.0909%; flex-basis: 9.0909%; } .sm-1of10 { width: 10%; flex-basis: 10%; } .sm-1of9 { width: 11.1111%; flex-basis: 11.1111%; } .sm-1of8 { width: 12.5%; flex-basis: 12.5%; } .sm-1of7 { width: 14.2857%; flex-basis: 14.2857%; } .sm-2of12, .sm-1of6 { width: 16.6666666667%; flex-basis: 16.6666666667%; } .sm-3of12, .sm-1of4 { width: 25%; flex-basis: 25%; } .sm-4of12, .sm-2of6, .sm-1of3 { width: 33.3333333333%; flex-basis: 33.3333333333%; } .sm-5of12 { width: 41.6666666667%; flex-basis: 41.6666666667%; } .sm-6of12, .sm-3of6, .sm-1of2 { width: 50%; flex-basis: 50%; } .sm-7of12 { width: 58.3333333333%; flex-basis: 58.3333333333%; } .sm-8of12, .sm-4of6, .sm-2of3 { width: 66.6666666667%; flex-basis: 66.6666666667%; } .sm-9of12, .sm-3of4 { width: 75%; flex-basis: 75%; } .sm-10of12, .sm-5of6 { width: 83.3333333333%; flex-basis: 83.3333333333%; } .sm-11of12 { width: 91.6666666667%; flex-basis: 91.6666666667%; } .sm-12of12, .sm-6of6, .sm-3of3, .sm-all, .sm-1of1 { width: 100%; flex-basis: 100%; } .sm-none { display: none; } .sm-block { display: block; } .sm-left { float: left; } .sm-right { float: right; } }