/* * # Semantic - Grid * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Theme *******************************/ /* ███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ ██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ ███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ ╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ ███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ ╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ */ /******************************* Folders *******************************/ /* Path to theme packages */ /* Path to site override folder */ /******************************* Themes *******************************/ /* To override a theme for an individual element specify theme name below Be sure to update the user folder name (see README) */ /* Global */ /* Elements */ /* Collections */ /* Modules */ /* Views */ /******************************* Import Directives *******************************/ /*------------------ Load Default -------------------*/ /******************************* Site Settings *******************************/ /*------------------- Paths --------------------*/ /*------------------- Fonts --------------------*/ /*------------------- Site Colors --------------------*/ /*--- Colors ---*/ /*------------------- Page --------------------*/ /*------------------- Background Colors --------------------*/ /* Used for differentiating neutrals */ /* Used for differentiating layers */ /*------------------- Grid --------------------*/ /*------------------- Breakpoints --------------------*/ /******************************* Power-User *******************************/ /*------------------- Icons --------------------*/ /* Max Width of Icon */ /*------------------- Easing --------------------*/ /*--- Light Variations ---*/ /*--- Neutrals ---*/ /*--- Colored Backgrounds ---*/ /*--- Colored Text ---*/ /*--- Colored Headers ---*/ /*------------------- Emotive Colors --------------------*/ /* Mood */ /* Solid Background Color */ /* Status */ /* Darkened Headers */ /*------------------- Neutral Text --------------------*/ /*------------------- Brand Colors --------------------*/ /*------------------- Grid Columns --------------------*/ /*------------------- Borders --------------------*/ /*------------------- Sizes --------------------*/ /*------------------- Transitions --------------------*/ /******************************* States *******************************/ /*------------------- Disabled --------------------*/ /*------------------- Hover --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Down (:active) --------------------*/ /*--- Colors ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /*------------------- Active --------------------*/ /*--- Standard ---*/ /*--- Emotive ---*/ /*--- Neutrals ---*/ /******************************* Grid *******************************/ /* Inherited From Site */ /******************************* Grid *******************************/ /******************************* Variations *******************************/ /*-------------- Page ---------------*/ /* Column Gutters */ /*-------------- Relaxed ---------------*/ /*-------------- Divided ---------------*/ /*-------------- Celled ---------------*/ /*-------------- Stackable ---------------*/ /*------------------ Load Theme -------------------*/ /*------------------ Load Site -------------------*/ /******************************* User Global Variables *******************************/ /******************************* User Variable Overrides *******************************/ /*------------------ Override Mix-in -------------------*/ /******************************* Standard *******************************/ .ui.grid { display: block; text-align: left; font-size: 0em; margin: 0%; padding: 0%; box-sizing: border-box; } body > .ui.grid:not(.page) { margin-left: 0% !important; margin-right: 0% !important; } .ui.grid:after, .ui.row:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /*------------------- Columns --------------------*/ /* Standard 16 column */ .ui.grid > .column, .ui.grid > .row > .column { display: inline-block; text-align: left; font-size: 1rem; width: 6.25%; padding-left: 1.5%; padding-right: 1.5%; box-sizing: border-box; vertical-align: top; } .ui.grid > * { padding-left: 1.5%; padding-right: 1.5%; } /*------------------- Rows --------------------*/ .ui.grid > .row { display: block; width: 100% !important; margin-top: 0.75rem; padding: 0.75rem 0% 0%; font-size: 0rem; } .ui.grid > :first-child { padding-top: 0rem; margin-top: 0rem; } /*------------------- Columns --------------------*/ /* Vertical padding when no rows */ .ui.grid > .column:not(.row) { margin-top: 0.75rem; margin-bottom: 0.75rem; } /*------------------- Content --------------------*/ .ui.grid > .row > img, .ui.grid > .row > .column > img { max-width: 100%; } .ui.grid .column > .ui.segment:only-child { margin: 0em; } /*------------------- Loose Coupling --------------------*/ .ui.grid .row + .ui.divider { margin: 0.75rem 1.5%; } /******************************* Variations *******************************/ /*----------------------- Page Grid (Responsive) -------------------------*/ .ui.page.grid { min-width: 320px; padding-left: 0%; padding-right: 0%; width: auto; margin-left: 13%; margin-right: 13%; } @media only screen and (max-width: 767px) { .ui.page.grid { width: auto; margin-left: 1em; margin-right: 1em; } } @media only screen and (min-width: 768px) { .ui.page.grid { width: auto; margin-left: 8%; margin-right: 8%; } } @media only screen and (min-width: 992px) { .ui.page.grid { width: auto; margin-left: 13%; margin-right: 13%; } } @media only screen and (min-width: 1400px) { .ui.page.grid { width: auto; margin-left: 18%; margin-right: 18%; } } @media only screen and (min-width: 1900px) { .ui.page.grid { width: auto; margin-left: 23%; margin-right: 23%; } } /*------------------- Column Count --------------------*/ /* Grid Based */ .ui.one.column.grid > .row > .column, .ui.one.column.grid > .column { width: 100%; } .ui.two.column.grid > .row > .column, .ui.two.column.grid > .column { width: 50%; } .ui.three.column.grid > .row > .column, .ui.three.column.grid > .column { width: 33.33333333%; } .ui.four.column.grid > .row > .column, .ui.four.column.grid > .column { width: 25%; } .ui.five.column.grid > .row > .column, .ui.five.column.grid > .column { width: 20%; } .ui.six.column.grid > .row > .column, .ui.six.column.grid > .column { width: 16.66666667%; } .ui.seven.column.grid > .row > .column, .ui.seven.column.grid > .column { width: 14.28571429%; } .ui.eight.column.grid > .row > .column, .ui.eight.column.grid > .column { width: 12.5%; } .ui.nine.column.grid > .row > .column, .ui.nine.column.grid > .column { width: 11.11111111%; } .ui.ten.column.grid > .row > .column, .ui.ten.column.grid > .column { width: 10%; } .ui.eleven.column.grid > .row > .column, .ui.eleven.column.grid > .column { width: 9.09090909%; } .ui.twelve.column.grid > .row > .column, .ui.twelve.column.grid > .column { width: 8.33333333%; } .ui.thirteen.column.grid > .row > .column, .ui.thirteen.column.grid > .column { width: 7.69230769%; } .ui.fourteen.column.grid > .row > .column, .ui.fourteen.column.grid > .column { width: 7.14285714%; } .ui.fifteen.column.grid > .row > .column, .ui.fifteen.column.grid > .column { width: 6.66666667%; } .ui.sixteen.column.grid > .row > .column, .ui.sixteen.column.grid > .column { width: 6.25%; } /* Row Based Overrides */ .ui.grid > .one.column.row > .column { width: 100% !important; } .ui.grid > .two.column.row > .column { width: 50% !important; } .ui.grid > .three.column.row > .column { width: 33.33333333% !important; } .ui.grid > .four.column.row > .column { width: 25% !important; } .ui.grid > .five.column.row > .column { width: 20% !important; } .ui.grid > .six.column.row > .column { width: 16.66666667% !important; } .ui.grid > .seven.column.row > .column { width: 14.28571429% !important; } .ui.grid > .eight.column.row > .column { width: 12.5% !important; } .ui.grid > .nine.column.row > .column { width: 11.11111111% !important; } .ui.grid > .ten.column.row > .column { width: 10% !important; } .ui.grid > .eleven.column.row > .column { width: 9.09090909% !important; } .ui.grid > .twelve.column.row > .column { width: 8.33333333% !important; } .ui.grid > .thirteen.column.row > .column { width: 7.69230769% !important; } .ui.grid > .fourteen.column.row > .column { width: 7.14285714% !important; } .ui.grid > .fifteen.column.row > .column { width: 6.66666667% !important; } .ui.grid > .sixteen.column.row > .column { width: 6.25% !important; } /* Assume full width with one column */ .ui.grid > .column:only-child, .ui.grid > .row > .column:only-child { width: 100%; } /*------------------- Column Width --------------------*/ /* Sizing Combinations */ .ui.grid > .row > .one.wide.column, .ui.grid > .column.row > .one.wide.column, .ui.grid > .one.wide.column, .ui.column.grid > .one.wide.column { width: 6.25% !important; } .ui.grid > .row > .two.wide.column, .ui.grid > .column.row > .two.wide.column, .ui.grid > .two.wide.column, .ui.column.grid > .two.wide.column { width: 12.5% !important; } .ui.grid > .row > .three.wide.column, .ui.grid > .column.row > .three.wide.column, .ui.grid > .three.wide.column, .ui.column.grid > .three.wide.column { width: 18.75% !important; } .ui.grid > .row > .four.wide.column, .ui.grid > .column.row > .four.wide.column, .ui.grid > .four.wide.column, .ui.column.grid > .four.wide.column { width: 25% !important; } .ui.grid > .row > .five.wide.column, .ui.grid > .column.row > .five.wide.column, .ui.grid > .five.wide.column, .ui.column.grid > .five.wide.column { width: 31.25% !important; } .ui.grid > .row > .six.wide.column, .ui.grid > .column.row > .six.wide.column, .ui.grid > .six.wide.column, .ui.column.grid > .six.wide.column { width: 37.5% !important; } .ui.grid > .row > .seven.wide.column, .ui.grid > .column.row > .seven.wide.column, .ui.grid > .seven.wide.column, .ui.column.grid > .seven.wide.column { width: 43.75% !important; } .ui.grid > .row > .eight.wide.column, .ui.grid > .column.row > .eight.wide.column, .ui.grid > .eight.wide.column, .ui.column.grid > .eight.wide.column { width: 50% !important; } .ui.grid > .row > .nine.wide.column, .ui.grid > .column.row > .nine.wide.column, .ui.grid > .nine.wide.column, .ui.column.grid > .nine.wide.column { width: 56.25% !important; } .ui.grid > .row > .ten.wide.column, .ui.grid > .column.row > .ten.wide.column, .ui.grid > .ten.wide.column, .ui.column.grid > .ten.wide.column { width: 62.5% !important; } .ui.grid > .row > .eleven.wide.column, .ui.grid > .column.row > .eleven.wide.column, .ui.grid > .eleven.wide.column, .ui.column.grid > .eleven.wide.column { width: 68.75% !important; } .ui.grid > .row > .twelve.wide.column, .ui.grid > .column.row > .twelve.wide.column, .ui.grid > .twelve.wide.column, .ui.column.grid > .twelve.wide.column { width: 75% !important; } .ui.grid > .row > .thirteen.wide.column, .ui.grid > .column.row > .thirteen.wide.column, .ui.grid > .thirteen.wide.column, .ui.column.grid > .thirteen.wide.column { width: 81.25% !important; } .ui.grid > .row > .fourteen.wide.column, .ui.grid > .column.row > .fourteen.wide.column, .ui.grid > .fourteen.wide.column, .ui.column.grid > .fourteen.wide.column { width: 87.5% !important; } .ui.grid > .row > .fifteen.wide.column, .ui.grid > .column.row > .fifteen.wide.column, .ui.grid > .fifteen.wide.column, .ui.column.grid > .fifteen.wide.column { width: 93.75% !important; } .ui.grid > .row > .sixteen.wide.column, .ui.grid > .column.row > .sixteen.wide.column, .ui.grid > .sixteen.wide.column, .ui.column.grid > .sixteen.wide.column { width: 100% !important; } /*---------------------- Centered -----------------------*/ .ui.centered.grid, .ui.centered.grid > .row, .ui.grid .centered.row { text-align: center; } .ui.centered.grid > .column:not(.aligned), .ui.centered.grid > .row > .column:not(.aligned), .ui.grid .centered.row > .column:not(.aligned) { text-align: left; } /*---------------------- Relaxed -----------------------*/ .ui.relaxed.grid > .column:not(.row), .ui.relaxed.grid > .row > .column { padding-left: 2.5%; padding-right: 2.5%; } .ui.very.relaxed.grid > .column:not(.row), .ui.very.relaxed.grid > .row > .column { padding-left: 4%; padding-right: 4%; } /* Coupling with UI Divider */ .ui.relaxed.grid .row + .ui.divider { margin-left: 2.5%; margin-right: 2.5%; } .ui.very.relaxed.grid .row + .ui.divider { margin-left: 4%; margin-right: 4%; } /*---------------------- Fitted -----------------------*/ .ui.fitted.grid { margin-left: -1.5%; margin-right: -1.5%; } .ui.relaxed.fitted.grid { margin-left: -2.5%; margin-right: -2.5%; } .ui.very.relaxed.fitted.grid { margin-left: -4%; margin-right: -4%; } /*---------------------- "Floated" -----------------------*/ .ui.grid .left.floated.column { float: left; } .ui.grid .right.floated.column { float: right; } /*---------------------- Divided -----------------------*/ .ui.divided.grid:not(.vertically) > .column:not(.row), .ui.divided.grid:not(.vertically) > .row > .column { box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.3); } .ui.divided.grid:not(.vertically) > .column:first-child, .ui.divided.grid:not(.vertically) > .row > .column:first-child { box-shadow: none; } /* Divided Row */ .ui.grid > .divided.row > .column { box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.3); } .ui.grid > .divided.row > .column:first-child { box-shadow: none; } /* Vertically Divided */ .ui.vertically.divided.grid > .row { position: relative; } .ui.vertically.divided.grid > .row:before { position: absolute; content: ''; top: 0px; left: 0px; width: 97%; height: 1px; margin: 0% 1.5%; box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.3); } .ui.vertically.divided.grid > .row:first-child:before { box-shadow: none; } /* Inverted Divided */ .ui.inverted.divided.grid > .row { box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15), -2px 0px 0px 0px rgba(0, 0, 0, 0.15); } .ui.inverted.vertically.divided.grid > .row { box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15), 0px -2px 0px 0px rgba(0, 0, 0, 0.15); } /* Relaxed */ .ui.relaxed.vertically.divided.grid > .row:before { margin-left: 2.5%; margin-right: 2.5%; width: 95%; } .ui.very.relaxed.vertically.divided.grid > .row:before { margin-left: 4%; margin-right: 4%; width: 92%; } /* Fitted */ /* .ui.vertically.divided.fitted.grid > .row:before { margin-left: 0%; margin-right: 0%; width: 100%; } */ /*---------------------- Celled -----------------------*/ .ui.celled.grid { display: table; table-layout: fixed; width: 100%; margin-left: 0%; margin-right: 0%; box-shadow: 0px 0px 0px 1px #dddddd; } .ui.celled.grid > .row, .ui.celled.grid > .column.row, .ui.celled.grid > .column.row:first-child { display: table; table-layout: fixed; width: 100%; margin-top: 0em; padding-top: 0em; box-shadow: 0px -1px 0px 0px #dddddd; } .ui.celled.grid > .column:not(.row), .ui.celled.grid > .row > .column { display: table-cell; padding: 0.75em; box-shadow: -1px 0px 0px 0px #dddddd; } .ui.celled.grid > .column:first-child, .ui.celled.grid > .row > .column:first-child { box-shadow: none; } .ui.celled.page.grid { box-shadow: none; } /*---------------------- Horizontally Centered -----------------------*/ /* Vertical Centered */ .ui.left.aligned.grid, .ui.left.aligned.grid > .row > .column, .ui.left.aligned.grid > .column, .ui.grid .left.aligned.column, .ui.grid > .left.aligned.row > .column { text-align: left; } .ui.center.aligned.grid, .ui.center.aligned.grid > .row > .column, .ui.center.aligned.grid > .column, .ui.grid .center.aligned.column, .ui.grid > .center.aligned.row > .column { text-align: center; } .ui.right.aligned.grid, .ui.right.aligned.grid > .row > .column, .ui.right.aligned.grid > .column, .ui.grid .right.aligned.column, .ui.grid > .right.aligned.row > .column { text-align: right; } .ui.justified.grid, .ui.justified.grid > .row > .column, .ui.justified.grid > .column, .ui.grid .justified.column, .ui.grid > .justified.row > .column { text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /*---------------------- Vertically Centered -----------------------*/ /* Vertical Centered */ .ui.top.aligned.grid, .ui.top.aligned.grid > .row > .column, .ui.top.aligned.grid > .column, .ui.grid .top.aligned.column, .ui.grid > .top.aligned.row > .column { vertical-align: top; } .ui.middle.aligned.grid, .ui.middle.aligned.grid > .row > .column, .ui.middle.aligned.grid > .column, .ui.grid .middle.aligned.column, .ui.grid > .middle.aligned.row > .column { vertical-align: middle; } .ui.bottom.aligned.grid, .ui.bottom.aligned.grid > .row > .column, .ui.bottom.aligned.grid > .column, .ui.grid .bottom.aligned.column, .ui.grid > .bottom.aligned.row > .column { vertical-align: bottom; } /*---------------------- Equal Height Columns -----------------------*/ .ui.grid > .equal.height.row, .ui.equal.height.grid { display: table; width: 100%; } .ui.equal.height.grid > .column, .ui.equal.height.grid > .row > .column, .ui.grid > .equal.height.row > .column { display: table-cell; } /*---------------------- Only (Device) -----------------------*/ /* Mobile Only */ @media only screen and (max-width: 767px) { .ui.mobile.only.grid, .ui.grid > .mobile.only.row { display: block !important; } .ui.grid > .row > .mobile.only.column { display: inline-block !important; } .ui.celled.mobile.only.grid, .ui.celled.mobile.only.grid .row, .ui.celled.grid .mobile.only.row, .ui.grid .mobile.only.equal.height.row, .ui.mobile.only.grid .equal.height.row { display: table !important; } .ui.celled.grid > .row > .mobile.only.column, .ui.celled.mobile.only.grid > .row > .column, .ui.celled.mobile.only.grid > .column { display: table-cell !important; } } @media only screen and (min-width: 768px) { .ui.mobile.only.grid, .ui.grid > .mobile.only.row, .ui.grid > .mobile.only.column, .ui.grid > .row > .mobile.only.column { display: none; } } /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.tablet.only.grid, .ui.grid > .tablet.only.row { display: block !important; } .ui.grid > .row > .tablet.only.column { display: inline-block !important; } .ui.celled.tablet.only.grid, .ui.celled.tablet.only.grid .row, .ui.celled.grid .tablet.only.row, .ui.grid .tablet.only.equal.height.row, .ui.tablet.only.grid .equal.height.row { display: table !important; } .ui.celled.grid > .row > .tablet.only.column, .ui.celled.tablet.only.grid > .row > .column, .ui.celled.tablet.only.grid > .column { display: table-cell !important; } } @media only screen and (max-width: 767px), (min-width: 992px) { .ui.tablet.only.grid, .ui.grid > .tablet.only.row, .ui.grid > .tablet.only.column, .ui.grid > .row > .tablet.only.column { display: none; } } /* Computer Only */ @media only screen and (min-width: 992px) { .ui.computer.only.grid, .ui.grid > .computer.only.row { display: block !important; } .ui.grid > .row > .computer.only.column { display: inline-block !important; } .ui.celled.computer.only.grid, .ui.celled.computer.only.grid .row, .ui.celled.grid .computer.only.row, .ui.grid .computer.only.equal.height.row, .ui.computer.only.grid .equal.height.row { display: table !important; } .ui.celled.grid > .row > .computer.only.column, .ui.celled.computer.only.grid > .row > .column, .ui.celled.computer.only.grid > .column { display: table-cell !important; } } @media only screen and (max-width: 991px) { .ui.computer.only.grid, .ui.grid > .computer.only.row, .ui.grid > .computer.only.column, .ui.grid > .row > .computer.only.column { display: none; } } /*------------------- Doubling --------------------*/ /* Mobily Only */ @media only screen and (max-width: 767px) { .ui.doubling.grid > .row { display: inline; } .ui.doubling.grid > .row > .column { margin-bottom: 1.5rem; } .ui.two.column.doubling.grid > .row > .column, .ui.two.column.doubling.grid > .column, .ui.grid > .two.column.doubling.row > .column { width: 100%; } .ui.three.column.doubling.grid > .row > .column, .ui.three.column.doubling.grid > .column, .ui.grid > .three.column.doubling.row > .column { width: 50%; } .ui.four.column.doubling.grid > .row > .column, .ui.four.column.doubling.grid > .column, .ui.grid > .four.column.doubling.row > .column { width: 50%; } .ui.five.column.doubling.grid > .row > .column, .ui.five.column.doubling.grid > .column, .ui.grid > .five.column.doubling.row > .column { width: 50%; } .ui.six.column.doubling.grid > .row > .column, .ui.six.column.doubling.grid > .column, .ui.grid > .six.column.doubling.row > .column { width: 50%; } .ui.seven.column.doubling.grid > .row > .column, .ui.seven.column.doubling.grid > .column, .ui.grid > .seven.column.doubling.row > .column { width: 33.33333333%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 33.33333333%; } .ui.nine.column.doubling.grid > .row > .column, .ui.nine.column.doubling.grid > .column, .ui.grid > .nine.column.doubling.row > .column { width: 33.33333333%; } .ui.ten.column.doubling.grid > .row > .column, .ui.ten.column.doubling.grid > .column, .ui.grid > .ten.column.doubling.row > .column { width: 33.33333333%; } .ui.twelve.column.doubling.grid > .row > .column, .ui.twelve.column.doubling.grid > .column, .ui.grid > .twelve.column.doubling.row > .column { width: 25%; } .ui.fourteen.column.doubling.grid > .row > .column, .ui.fourteen.column.doubling.grid > .column, .ui.grid > .fourteen.column.doubling.row > .column { width: 25%; } .ui.sixteen.column.doubling.grid > .row > .column, .ui.sixteen.column.doubling.grid > .column, .ui.grid > .sixteen.column.doubling.row > .column { width: 25%; } } /* Tablet Only */ @media only screen and (min-width: 768px) and (max-width: 991px) { .ui.doubling.grid > .row { display: inline; } .ui.doubling.grid > .row > .column { margin-bottom: 1.5rem; } .ui.two.column.doubling.grid > .row > .column, .ui.two.column.doubling.grid > .column, .ui.grid > .two.column.doubling.row > .column { width: 100%; } .ui.three.column.doubling.grid > .row > .column, .ui.three.column.doubling.grid > .column, .ui.grid > .three.column.doubling.row > .column { width: 50%; } .ui.four.column.doubling.grid > .row > .column, .ui.four.column.doubling.grid > .column, .ui.grid > .four.column.doubling.row > .column { width: 50%; } .ui.five.column.doubling.grid > .row > .column, .ui.five.column.doubling.grid > .column, .ui.grid > .five.column.doubling.row > .column { width: 33.33333333%; } .ui.six.column.doubling.grid > .row > .column, .ui.six.column.doubling.grid > .column, .ui.grid > .six.column.doubling.row > .column { width: 33.33333333%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 33.33333333%; } .ui.eight.column.doubling.grid > .row > .column, .ui.eight.column.doubling.grid > .column, .ui.grid > .eight.column.doubling.row > .column { width: 25%; } .ui.nine.column.doubling.grid > .row > .column, .ui.nine.column.doubling.grid > .column, .ui.grid > .nine.column.doubling.row > .column { width: 25%; } .ui.ten.column.doubling.grid > .row > .column, .ui.ten.column.doubling.grid > .column, .ui.grid > .ten.column.doubling.row > .column { width: 20%; } .ui.twelve.column.doubling.grid > .row > .column, .ui.twelve.column.doubling.grid > .column, .ui.grid > .twelve.column.doubling.row > .column { width: 16.66666667%; } .ui.fourteen.column.doubling.grid > .row > .column, .ui.fourteen.column.doubling.grid > .column, .ui.grid > .fourteen.column.doubling.row > .column { width: 14.28571429%; } .ui.sixteen.column.doubling.grid > .row > .column, .ui.sixteen.column.doubling.grid > .column, .ui.grid > .sixteen.column.doubling.row > .column { width: 12.5%; } } /*------------------- Stackable --------------------*/ @media only screen and (max-width: 767px) { .ui.stackable.grid { display: block !important; padding: 0em; margin: 0em !important; } .ui.stackable.grid > .row > .wide.column, .ui.stackable.grid > .wide.column, .ui.stackable.grid > .column.grid > .column, .ui.stackable.grid > .column.row > .column, .ui.stackable.grid > .row > .column, .ui.stackable.grid > .column { display: block !important; width: auto !important; margin: 0.75rem 0em 0em !important; padding: 0.75rem 0em 0em !important; box-shadow: none !important; } .ui.stackable.divided.grid > .column, .ui.stackable.celled.grid > .row > .column { border-top: 1px solid rgba(0, 0, 0, 0.1); } .ui.stackable.grid > .row:first-child > .column:first-child, .ui.stackable.grid > .column:first-child { margin-top: 0em !important; padding-top: 0em !important; } .ui.stackable.divided.grid > .row:first-child > .column:first-child, .ui.stackable.celled.grid > .row:first-child > .column:first-child, .ui.stackable.divided.grid > .column:first-child, .ui.stackable.celled.grid > .column:first-child { border-top: none !important; } .ui.stackable.page.grid > .row > .column, .ui.stackable.page.grid > .column { padding-left: 1.5em !important; padding-right: 1.5em !important; } /* Remove pointers from vertical menus */ .ui.stackable.grid .vertical.pointing.menu .item:after { display: none; } } /******************************* Overrides *******************************/ /******************************* Overrides *******************************/