github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/card.css (about)

     1  /*!
     2   * # Semantic UI x.x - Item
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributorss
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  
    13  /*******************************
    14              Standard
    15  *******************************/
    16  
    17  
    18  /*--------------
    19        Card
    20  ---------------*/
    21  
    22  .ui.cards > .card,
    23  .ui.card {
    24    max-width: 100%;
    25    position: relative;
    26    display: -webkit-box;
    27    display: -webkit-flex;
    28    display: -ms-flexbox;
    29    display: flex;
    30    -webkit-box-orient: vertical;
    31    -webkit-box-direction: normal;
    32    -webkit-flex-direction: column;
    33        -ms-flex-direction: column;
    34            flex-direction: column;
    35    width: 290px;
    36    min-height: 0px;
    37    background: #ffffff;
    38    padding: 0em;
    39    border: none;
    40    border-radius: 0.2857rem;
    41    box-shadow: 0px 3px 0px 0px #d4d4d5, 0px 0px 0px 1px #d4d4d5;
    42    -webkit-transition: box-shadow 0.2s ease;
    43            transition: box-shadow 0.2s ease;
    44    z-index: '';
    45  }
    46  .ui.card {
    47    margin: 1em 0em;
    48  }
    49  .ui.cards > .card a,
    50  .ui.card a {
    51    cursor: pointer;
    52  }
    53  .ui.card:first-child {
    54    margin-top: 0em;
    55  }
    56  .ui.card:last-child {
    57    margin-bottom: 0em;
    58  }
    59  
    60  /*--------------
    61        Cards
    62  ---------------*/
    63  
    64  .ui.cards {
    65    display: -webkit-box;
    66    display: -webkit-flex;
    67    display: -ms-flexbox;
    68    display: flex;
    69    margin: -0.875em -0.5em;
    70    -webkit-flex-wrap: wrap;
    71        -ms-flex-wrap: wrap;
    72            flex-wrap: wrap;
    73  }
    74  .ui.cards > .card {
    75    display: -webkit-box;
    76    display: -webkit-flex;
    77    display: -ms-flexbox;
    78    display: flex;
    79    margin: 0.875em 0.5em;
    80    float: none;
    81  }
    82  
    83  /* Clearing */
    84  .ui.cards:after,
    85  .ui.card:after {
    86    display: block;
    87    content: ' ';
    88    height: 0px;
    89    clear: both;
    90    overflow: hidden;
    91    visibility: hidden;
    92  }
    93  
    94  /* Consecutive Card Groups Preserve Row Spacing */
    95  .ui.cards ~ .ui.cards {
    96    margin-top: 0.875em;
    97  }
    98  
    99  /*--------------
   100    Rounded Edges
   101  ---------------*/
   102  
   103  .ui.cards > .card > :first-child,
   104  .ui.card > :first-child {
   105    border-radius: 0.2857rem 0.2857rem 0em 0em !important;
   106  }
   107  .ui.cards > .card > :last-child,
   108  .ui.card > :last-child {
   109    border-radius: 0em 0em 0.2857rem 0.2857rem !important;
   110  }
   111  
   112  /*--------------
   113       Images
   114  ---------------*/
   115  
   116  .ui.cards > .card > .image,
   117  .ui.card > .image {
   118    display: block;
   119    position: relative;
   120    padding: 0em;
   121    background: rgba(0, 0, 0, 0.05);
   122  }
   123  .ui.cards > .card > .image > img,
   124  .ui.card > .image > img {
   125    display: block;
   126    width: 100%;
   127    height: auto;
   128    border-radius: 0.2857rem 0.2857rem 0em 0em;
   129    border: none;
   130  }
   131  .ui.cards > .card > .image:only-child > img,
   132  .ui.card > .image:only-child > img {
   133    border-radius: 0.2857rem;
   134  }
   135  
   136  /*--------------
   137       Content
   138  ---------------*/
   139  
   140  .ui.cards > .card > .content,
   141  .ui.card > .content {
   142    -webkit-box-flex: 1;
   143    -webkit-flex-grow: 1;
   144        -ms-flex-positive: 1;
   145            flex-grow: 1;
   146    background: none;
   147    margin: 0em;
   148    padding: 1em 1em;
   149    box-shadow: none;
   150    font-size: 1em;
   151    border: none;
   152    border-radius: 0em;
   153  }
   154  .ui.cards > .card > .content:after,
   155  .ui.card > .content:after {
   156    display: block;
   157    content: ' ';
   158    height: 0px;
   159    clear: both;
   160    overflow: hidden;
   161    visibility: hidden;
   162  }
   163  .ui.cards > .card > .content > .header,
   164  .ui.card > .content > .header {
   165    display: block;
   166    margin: 0em;
   167    font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
   168    color: rgba(0, 0, 0, 0.85);
   169  }
   170  
   171  /* Default Header Size */
   172  .ui.cards > .card > .content > .header:not(.ui),
   173  .ui.card > .content > .header:not(.ui) {
   174    font-weight: bold;
   175    font-size: 1.2em;
   176    margin-top: -0.165em;
   177    line-height: 1.33em;
   178  }
   179  .ui.cards > .card > .content > .meta + .description,
   180  .ui.cards > .card > .content > .header + .description,
   181  .ui.card > .content > .meta + .description,
   182  .ui.card > .content > .header + .description {
   183    margin-top: 0.5em;
   184  }
   185  
   186  /*--------------
   187       Floated
   188  ---------------*/
   189  
   190  .ui.cards > .card [class*="left floated"],
   191  .ui.card [class*="left floated"] {
   192    float: left;
   193  }
   194  .ui.cards > .card [class*="right floated"],
   195  .ui.card [class*="right floated"] {
   196    float: right;
   197  }
   198  
   199  /*--------------
   200       Aligned
   201  ---------------*/
   202  
   203  .ui.cards > .card [class*="left aligned"],
   204  .ui.card [class*="left aligned"] {
   205    text-align: left;
   206  }
   207  .ui.cards > .card [class*="center aligned"],
   208  .ui.card [class*="center aligned"] {
   209    text-align: center;
   210  }
   211  .ui.cards > .card [class*="right aligned"],
   212  .ui.card [class*="right aligned"] {
   213    text-align: right;
   214  }
   215  
   216  /*--------------
   217    Content Image
   218  ---------------*/
   219  
   220  .ui.cards > .card .content img,
   221  .ui.card .content img {
   222    display: inline-block;
   223    vertical-align: middle;
   224    width: auto;
   225  }
   226  .ui.cards > .card img.avatar,
   227  .ui.cards > .card .avatar img,
   228  .ui.card img.avatar,
   229  .ui.card .avatar img {
   230    width: 2.5em;
   231    height: 2.5em;
   232    border-radius: 500rem;
   233  }
   234  
   235  /*--------------
   236     Description
   237  ---------------*/
   238  
   239  .ui.cards > .card > .content > .description,
   240  .ui.card > .content > .description {
   241    clear: both;
   242    color: rgba(0, 0, 0, 0.5);
   243  }
   244  
   245  /*--------------
   246      Paragraph
   247  ---------------*/
   248  
   249  .ui.cards > .card > .content p,
   250  .ui.card > .content p {
   251    margin: 0em 0em 0.5em;
   252  }
   253  .ui.cards > .card > .content p:last-child,
   254  .ui.card > .content p:last-child {
   255    margin-bottom: 0em;
   256  }
   257  
   258  /*--------------
   259        Meta
   260  ---------------*/
   261  
   262  .ui.cards > .card .meta,
   263  .ui.card .meta {
   264    font-size: 0.9em;
   265    color: rgba(0, 0, 0, 0.4);
   266  }
   267  .ui.cards > .card .meta *,
   268  .ui.card .meta * {
   269    margin-right: 0.3em;
   270  }
   271  .ui.cards > .card .meta :last-child,
   272  .ui.card .meta :last-child {
   273    margin-right: 0em;
   274  }
   275  .ui.cards > .card .meta [class*="right floated"],
   276  .ui.card .meta [class*="right floated"] {
   277    margin-right: 0em;
   278    margin-left: 0.3em;
   279  }
   280  
   281  /*--------------
   282        Links
   283  ---------------*/
   284  
   285  
   286  /* Generic */
   287  .ui.cards > .card > .content a:not(.ui),
   288  .ui.card > .content a:not(.ui) {
   289    color: '';
   290    -webkit-transition: color 0.2s ease;
   291            transition: color 0.2s ease;
   292  }
   293  .ui.cards > .card > .content a:not(.ui):hover,
   294  .ui.card > .content a:not(.ui):hover {
   295    color: '';
   296  }
   297  
   298  /* Header */
   299  .ui.cards > .card > .content > a.header,
   300  .ui.card > .content > a.header {
   301    color: rgba(0, 0, 0, 0.85);
   302  }
   303  .ui.cards > .card > .content > a.header:hover,
   304  .ui.card > .content > a.header:hover {
   305    color: #00b2f3;
   306  }
   307  
   308  /* Meta */
   309  .ui.cards > .card .meta > a:not(.ui),
   310  .ui.card .meta > a:not(.ui) {
   311    color: rgba(0, 0, 0, 0.4);
   312  }
   313  .ui.cards > .card .meta > a:not(.ui):hover,
   314  .ui.card .meta > a:not(.ui):hover {
   315    color: rgba(0, 0, 0, 0.8);
   316  }
   317  
   318  /*--------------
   319       Buttons
   320  ---------------*/
   321  
   322  .ui.cards > .card > .buttons:last-child,
   323  .ui.card > .buttons:last-child,
   324  .ui.cards > .card > .button:last-child,
   325  .ui.card > .button:last-child {
   326    margin: 0em 0em -1px;
   327    width: 100%;
   328  }
   329  
   330  /*--------------
   331        Dimmer
   332  ---------------*/
   333  
   334  .ui.cards > .card .dimmer,
   335  .ui.card .dimmer {
   336    background-color: '';
   337    z-index: 10;
   338  }
   339  
   340  /*--------------
   341       Labels
   342  ---------------*/
   343  
   344  
   345  /*-----Star----- */
   346  
   347  
   348  /* Icon */
   349  .ui.cards > .card > .content .star.icon,
   350  .ui.card > .content .star.icon {
   351    cursor: pointer;
   352    opacity: 0.75;
   353    -webkit-transition: color 0.2s ease;
   354            transition: color 0.2s ease;
   355  }
   356  .ui.cards > .card > .content .star.icon:hover,
   357  .ui.card > .content .star.icon:hover {
   358    opacity: 1;
   359    color: #ffb70a;
   360  }
   361  .ui.cards > .card > .content .active.star.icon,
   362  .ui.card > .content .active.star.icon {
   363    color: #ffe623;
   364  }
   365  
   366  /*-----Like----- */
   367  
   368  
   369  /* Icon */
   370  .ui.cards > .card > .content .like.icon,
   371  .ui.card > .content .like.icon {
   372    cursor: pointer;
   373    opacity: 0.75;
   374    -webkit-transition: color 0.2s ease;
   375            transition: color 0.2s ease;
   376  }
   377  .ui.cards > .card > .content .like.icon:hover,
   378  .ui.card > .content .like.icon:hover {
   379    opacity: 1;
   380    color: #ff2733;
   381  }
   382  .ui.cards > .card > .content .active.like.icon,
   383  .ui.card > .content .active.like.icon {
   384    color: #ff2733;
   385  }
   386  
   387  /*----------------
   388    Extra Content
   389  -----------------*/
   390  
   391  .ui.cards > .card > .extra,
   392  .ui.card > .extra {
   393    max-width: 100%;
   394    min-height: 0em !important;
   395    -webkit-box-flex: 0;
   396    -webkit-flex-grow: 0;
   397        -ms-flex-positive: 0;
   398            flex-grow: 0;
   399    position: static;
   400    background: none;
   401    width: auto;
   402    margin: 0em 0em;
   403    padding: 0.75em 1em;
   404    top: 0em;
   405    left: 0em;
   406    color: rgba(0, 0, 0, 0.4);
   407    box-shadow: none;
   408    -webkit-transition: color 0.2s ease;
   409            transition: color 0.2s ease;
   410    border-top: 1px solid rgba(0, 0, 0, 0.05);
   411  }
   412  .ui.cards > .card > .extra a:not(.ui),
   413  .ui.card > .extra a:not(.ui) {
   414    color: rgba(0, 0, 0, 0.4);
   415  }
   416  .ui.cards > .card > .extra a:not(.ui):hover,
   417  .ui.card > .extra a:not(.ui):hover {
   418    color: #00b2f3;
   419  }
   420  
   421  
   422  /*******************************
   423             Variations
   424  *******************************/
   425  
   426  
   427  /*-------------------
   428          Fluid
   429  --------------------*/
   430  
   431  .ui.fluid.card {
   432    width: 100%;
   433    max-width: 9999px;
   434  }
   435  
   436  /*-------------------
   437          Link
   438  --------------------*/
   439  
   440  .ui.cards a.card:hover,
   441  .ui.link.cards .card:hover,
   442  a.ui.card:hover,
   443  .ui.link.card:hover {
   444    cursor: pointer;
   445    z-index: 5;
   446    background: '';
   447    border: none;
   448    box-shadow: 0px 3px 0px 0px #bebebf, 0px 0px 0px 1px rgba(39, 41, 43, 0.3);
   449  }
   450  
   451  /*-------------------
   452         Colors
   453  --------------------*/
   454  
   455  .ui.black.cards > .card,
   456  .ui.cards > .black.card,
   457  .ui.black.card {
   458    box-shadow: 0px 3px 0px 0px #1b1c1d, 0px 0px 0px 1px #d4d4d5;
   459  }
   460  .ui.blue.cards > .card,
   461  .ui.cards > .blue.card,
   462  .ui.blue.card {
   463    box-shadow: 0px 3px 0px 0px #006e93, 0px 0px 0px 1px #d4d4d5;
   464  }
   465  .ui.green.cards > .card,
   466  .ui.cards > .green.card,
   467  .ui.green.card {
   468    box-shadow: 0px 3px 0px 0px #5bbd72, 0px 0px 0px 1px #d4d4d5;
   469  }
   470  .ui.orange.cards > .card,
   471  .ui.cards > .orange.card,
   472  .ui.orange.card {
   473    box-shadow: 0px 3px 0px 0px #e07b53, 0px 0px 0px 1px #d4d4d5;
   474  }
   475  .ui.pink.cards > .card,
   476  .ui.cards > .pink.card,
   477  .ui.pink.card {
   478    box-shadow: 0px 3px 0px 0px #d9499a, 0px 0px 0px 1px #d4d4d5;
   479  }
   480  .ui.purple.cards > .card,
   481  .ui.cards > .purple.card,
   482  .ui.purple.card {
   483    box-shadow: 0px 3px 0px 0px #564f8a, 0px 0px 0px 1px #d4d4d5;
   484  }
   485  .ui.red.cards > .card,
   486  .ui.cards > .red.card,
   487  .ui.red.card {
   488    box-shadow: 0px 3px 0px 0px #d95c5c, 0px 0px 0px 1px #d4d4d5;
   489  }
   490  .ui.teal.cards > .card,
   491  .ui.cards > .teal.card,
   492  .ui.teal.card {
   493    box-shadow: 0px 3px 0px 0px #00b5ad, 0px 0px 0px 1px #d4d4d5;
   494  }
   495  .ui.yellow.cards > .card,
   496  .ui.cards > .yellow.card,
   497  .ui.yellow.card {
   498    box-shadow: 0px 3px 0px 0px #f2c61f, 0px 0px 0px 1px #d4d4d5;
   499  }
   500  
   501  /* Hover */
   502  .ui.black.cards > .card:hover,
   503  .ui.cards > .black.card:hover,
   504  .ui.black.card:hover {
   505    box-shadow: 0px 3px 0px 0px #1b1c1d, 0px 0px 0px 1px #d4d4d5;
   506  }
   507  .ui.blue.cards > .card:hover,
   508  .ui.cards > .blue.card:hover,
   509  .ui.blue.card:hover {
   510    box-shadow: 0px 3px 0px 0px #0079a2, 0px 0px 0px 1px #d4d4d5;
   511  }
   512  .ui.green.cards > .card:hover,
   513  .ui.cards > .green.card:hover,
   514  .ui.green.card:hover {
   515    box-shadow: 0px 3px 0px 0px #66c17b, 0px 0px 0px 1px #d4d4d5;
   516  }
   517  .ui.orange.cards > .card:hover,
   518  .ui.cards > .orange.card:hover,
   519  .ui.orange.card:hover {
   520    box-shadow: 0px 3px 0px 0px #e28560, 0px 0px 0px 1px #d4d4d5;
   521  }
   522  .ui.pink.cards > .card:hover,
   523  .ui.cards > .pink.card:hover,
   524  .ui.pink.card:hover {
   525    box-shadow: 0px 3px 0px 0px #dc56a1, 0px 0px 0px 1px #d4d4d5;
   526  }
   527  .ui.purple.cards > .card:hover,
   528  .ui.cards > .purple.card:hover,
   529  .ui.purple.card:hover {
   530    box-shadow: 0px 3px 0px 0px #5c5594, 0px 0px 0px 1px #d4d4d5;
   531  }
   532  .ui.red.cards > .card:hover,
   533  .ui.cards > .red.card:hover,
   534  .ui.red.card:hover {
   535    box-shadow: 0px 3px 0px 0px #dc6868, 0px 0px 0px 1px #d4d4d5;
   536  }
   537  .ui.teal.cards > .card:hover,
   538  .ui.cards > .teal.card:hover,
   539  .ui.teal.card:hover {
   540    box-shadow: 0px 3px 0px 0px #00c4bc, 0px 0px 0px 1px #d4d4d5;
   541  }
   542  .ui.yellow.cards > .card:hover,
   543  .ui.cards > .yellow.card:hover,
   544  .ui.yellow.card:hover {
   545    box-shadow: 0px 3px 0px 0px #f3ca2d, 0px 0px 0px 1px #d4d4d5;
   546  }
   547  
   548  /*--------------
   549     Card Count
   550  ---------------*/
   551  
   552  .ui.one.cards {
   553    margin-left: 0em;
   554    margin-right: 0em;
   555  }
   556  .ui.one.cards > .card {
   557    width: 100%;
   558  }
   559  .ui.two.cards {
   560    margin-left: -1em;
   561    margin-right: -1em;
   562  }
   563  .ui.two.cards > .card {
   564    width: -webkit-calc( 50%  -  2em );
   565    width: calc( 50%  -  2em );
   566    margin-left: 1em;
   567    margin-right: 1em;
   568  }
   569  .ui.two.cards > .card:nth-child(2n+1) {
   570    clear: left;
   571  }
   572  .ui.three.cards {
   573    margin-left: -1em;
   574    margin-right: -1em;
   575  }
   576  .ui.three.cards > .card {
   577    width: -webkit-calc( 33.33333333%  -  2em );
   578    width: calc( 33.33333333%  -  2em );
   579    margin-left: 1em;
   580    margin-right: 1em;
   581  }
   582  .ui.three.cards > .card:nth-child(3n+1) {
   583    clear: left;
   584  }
   585  .ui.four.cards {
   586    margin-left: -0.75em;
   587    margin-right: -0.75em;
   588  }
   589  .ui.four.cards > .card {
   590    width: -webkit-calc( 25%  -  1.5em );
   591    width: calc( 25%  -  1.5em );
   592    margin-left: 0.75em;
   593    margin-right: 0.75em;
   594  }
   595  .ui.four.cards > .card:nth-child(4n+1) {
   596    clear: left;
   597  }
   598  .ui.five.cards {
   599    margin-left: -0.75em;
   600    margin-right: -0.75em;
   601  }
   602  .ui.five.cards > .card {
   603    width: -webkit-calc( 20%  -  1.5em );
   604    width: calc( 20%  -  1.5em );
   605    margin-left: 0.75em;
   606    margin-right: 0.75em;
   607  }
   608  .ui.five.cards > .card:nth-child(5n+1) {
   609    clear: left;
   610  }
   611  .ui.six.cards {
   612    margin-left: -0.75em;
   613    margin-right: -0.75em;
   614  }
   615  .ui.six.cards > .card {
   616    width: -webkit-calc( 16.66666667%  -  1.5em );
   617    width: calc( 16.66666667%  -  1.5em );
   618    margin-left: 0.75em;
   619    margin-right: 0.75em;
   620  }
   621  .ui.six.cards > .card:nth-child(6n+1) {
   622    clear: left;
   623  }
   624  .ui.seven.cards {
   625    margin-left: -0.5em;
   626    margin-right: -0.5em;
   627  }
   628  .ui.seven.cards > .card {
   629    width: -webkit-calc( 14.28571429%  -  1em );
   630    width: calc( 14.28571429%  -  1em );
   631    margin-left: 0.5em;
   632    margin-right: 0.5em;
   633  }
   634  .ui.seven.cards > .card:nth-child(7n+1) {
   635    clear: left;
   636  }
   637  .ui.eight.cards {
   638    margin-left: -0.5em;
   639    margin-right: -0.5em;
   640  }
   641  .ui.eight.cards > .card {
   642    width: -webkit-calc( 12.5%  -  1em );
   643    width: calc( 12.5%  -  1em );
   644    margin-left: 0.5em;
   645    margin-right: 0.5em;
   646    font-size: 11px;
   647  }
   648  .ui.eight.cards > .card:nth-child(8n+1) {
   649    clear: left;
   650  }
   651  .ui.nine.cards {
   652    margin-left: -0.5em;
   653    margin-right: -0.5em;
   654  }
   655  .ui.nine.cards > .card {
   656    width: -webkit-calc( 11.11111111%  -  1em );
   657    width: calc( 11.11111111%  -  1em );
   658    margin-left: 0.5em;
   659    margin-right: 0.5em;
   660    font-size: 10px;
   661  }
   662  .ui.nine.cards > .card:nth-child(9n+1) {
   663    clear: left;
   664  }
   665  .ui.ten.cards {
   666    margin-left: -0.5em;
   667    margin-right: -0.5em;
   668  }
   669  .ui.ten.cards > .card {
   670    width: -webkit-calc( 10%  -  1em );
   671    width: calc( 10%  -  1em );
   672    margin-left: 0.5em;
   673    margin-right: 0.5em;
   674  }
   675  .ui.ten.cards > .card:nth-child(10n+1) {
   676    clear: left;
   677  }
   678  
   679  /*-------------------
   680        Doubling
   681  --------------------*/
   682  
   683  
   684  /* Mobily Only */
   685  @media only screen and (max-width: 767px) {
   686    .ui.two.doubling.cards {
   687      margin-left: 0em;
   688      margin-right: 0em;
   689    }
   690    .ui.two.doubling.cards .card {
   691      width: 100%;
   692      margin-left: 0em;
   693      margin-right: 0em;
   694    }
   695    .ui.three.doubling.cards {
   696      margin-left: -1em;
   697      margin-right: -1em;
   698    }
   699    .ui.three.doubling.cards .card {
   700      width: -webkit-calc( 50%  -  2em );
   701      width: calc( 50%  -  2em );
   702      margin-left: 1em;
   703      margin-right: 1em;
   704    }
   705    .ui.four.doubling.cards {
   706      margin-left: -1em;
   707      margin-right: -1em;
   708    }
   709    .ui.four.doubling.cards .card {
   710      width: -webkit-calc( 50%  -  2em );
   711      width: calc( 50%  -  2em );
   712      margin-left: 1em;
   713      margin-right: 1em;
   714    }
   715    .ui.five.doubling.cards {
   716      margin-left: -1em;
   717      margin-right: -1em;
   718    }
   719    .ui.five.doubling.cards .card {
   720      width: -webkit-calc( 50%  -  2em );
   721      width: calc( 50%  -  2em );
   722      margin-left: 1em;
   723      margin-right: 1em;
   724    }
   725    .ui.six.doubling.cards {
   726      margin-left: -1em;
   727      margin-right: -1em;
   728    }
   729    .ui.six.doubling.cards .card {
   730      width: -webkit-calc( 50%  -  2em );
   731      width: calc( 50%  -  2em );
   732      margin-left: 1em;
   733      margin-right: 1em;
   734    }
   735    .ui.seven.doubling.cards {
   736      margin-left: -1em;
   737      margin-right: -1em;
   738    }
   739    .ui.seven.doubling.cards .card {
   740      width: -webkit-calc( 33.33333333%  -  2em );
   741      width: calc( 33.33333333%  -  2em );
   742      margin-left: 1em;
   743      margin-right: 1em;
   744    }
   745    .ui.eight.doubling.cards {
   746      margin-left: -1em;
   747      margin-right: -1em;
   748    }
   749    .ui.eight.doubling.cards .card {
   750      width: -webkit-calc( 33.33333333%  -  2em );
   751      width: calc( 33.33333333%  -  2em );
   752      margin-left: 1em;
   753      margin-right: 1em;
   754    }
   755    .ui.nine.doubling.cards {
   756      margin-left: -1em;
   757      margin-right: -1em;
   758    }
   759    .ui.nine.doubling.cards .card {
   760      width: -webkit-calc( 33.33333333%  -  2em );
   761      width: calc( 33.33333333%  -  2em );
   762      margin-left: 1em;
   763      margin-right: 1em;
   764    }
   765    .ui.ten.doubling.cards {
   766      margin-left: -1em;
   767      margin-right: -1em;
   768    }
   769    .ui.ten.doubling.cards .card {
   770      width: -webkit-calc( 33.33333333%  -  2em );
   771      width: calc( 33.33333333%  -  2em );
   772      margin-left: 1em;
   773      margin-right: 1em;
   774    }
   775  }
   776  
   777  /* Tablet Only */
   778  @media only screen and (min-width: 768px) and (max-width: 991px) {
   779    .ui.two.doubling.cards {
   780      margin-left: 0em;
   781      margin-right: 0em;
   782    }
   783    .ui.two.doubling.cards .card {
   784      width: 100%;
   785      margin-left: 0em;
   786      margin-right: 0em;
   787    }
   788    .ui.three.doubling.cards {
   789      margin-left: -1em;
   790      margin-right: -1em;
   791    }
   792    .ui.three.doubling.cards .card {
   793      width: -webkit-calc( 50%  -  2em );
   794      width: calc( 50%  -  2em );
   795      margin-left: 1em;
   796      margin-right: 1em;
   797    }
   798    .ui.four.doubling.cards {
   799      margin-left: -1em;
   800      margin-right: -1em;
   801    }
   802    .ui.four.doubling.cards .card {
   803      width: -webkit-calc( 50%  -  2em );
   804      width: calc( 50%  -  2em );
   805      margin-left: 1em;
   806      margin-right: 1em;
   807    }
   808    .ui.five.doubling.cards {
   809      margin-left: -1em;
   810      margin-right: -1em;
   811    }
   812    .ui.five.doubling.cards .card {
   813      width: -webkit-calc( 33.33333333%  -  2em );
   814      width: calc( 33.33333333%  -  2em );
   815      margin-left: 1em;
   816      margin-right: 1em;
   817    }
   818    .ui.six.doubling.cards {
   819      margin-left: -1em;
   820      margin-right: -1em;
   821    }
   822    .ui.six.doubling.cards .card {
   823      width: -webkit-calc( 33.33333333%  -  2em );
   824      width: calc( 33.33333333%  -  2em );
   825      margin-left: 1em;
   826      margin-right: 1em;
   827    }
   828    .ui.eight.doubling.cards {
   829      margin-left: -1em;
   830      margin-right: -1em;
   831    }
   832    .ui.eight.doubling.cards .card {
   833      width: -webkit-calc( 33.33333333%  -  2em );
   834      width: calc( 33.33333333%  -  2em );
   835      margin-left: 1em;
   836      margin-right: 1em;
   837    }
   838    .ui.eight.doubling.cards {
   839      margin-left: -0.75em;
   840      margin-right: -0.75em;
   841    }
   842    .ui.eight.doubling.cards .card {
   843      width: -webkit-calc( 25%  -  1.5em );
   844      width: calc( 25%  -  1.5em );
   845      margin-left: 0.75em;
   846      margin-right: 0.75em;
   847    }
   848    .ui.nine.doubling.cards {
   849      margin-left: -0.75em;
   850      margin-right: -0.75em;
   851    }
   852    .ui.nine.doubling.cards .card {
   853      width: -webkit-calc( 25%  -  1.5em );
   854      width: calc( 25%  -  1.5em );
   855      margin-left: 0.75em;
   856      margin-right: 0.75em;
   857    }
   858    .ui.ten.doubling.cards {
   859      margin-left: -0.75em;
   860      margin-right: -0.75em;
   861    }
   862    .ui.ten.doubling.cards .card {
   863      width: -webkit-calc( 20%  -  1.5em );
   864      width: calc( 20%  -  1.5em );
   865      margin-left: 0.75em;
   866      margin-right: 0.75em;
   867    }
   868  }
   869  
   870  /*-------------------
   871        Stackable
   872  --------------------*/
   873  
   874  @media only screen and (max-width: 767px) {
   875    .ui.stackable.cards {
   876      display: block !important;
   877    }
   878    .ui.stackable.cards .card:first-child {
   879      margin-top: 0em !important;
   880    }
   881    .ui.stackable.cards > .card {
   882      display: block !important;
   883      height: auto !important;
   884      margin: 1em 1em;
   885      padding: 0 !important;
   886      width: -webkit-calc( 100%  -  2em ) !important;
   887      width: calc( 100%  -  2em ) !important;
   888    }
   889  }
   890  
   891  /*--------------
   892        Size
   893  ---------------*/
   894  
   895  .ui.cards > .card {
   896    font-size: 1em;
   897  }
   898  
   899  
   900  /*******************************
   901           Theme Overrides
   902  *******************************/
   903  
   904  
   905  
   906  /*******************************
   907      User Variable Overrides
   908  *******************************/
   909