| OLD | NEW | 
| (Empty) |  | 
 |    1 body | 
 |    2 { | 
 |    3   font-family: "Source Sans Pro", Arial, sans-serif; | 
 |    4   margin: 0; | 
 |    5   /* Start below fixed navbar */ | 
 |    6   padding-top: 4em; | 
 |    7   line-height: 1.5; | 
 |    8 } | 
 |    9  | 
 |   10 #content, | 
 |   11 #blog | 
 |   12 { | 
 |   13   padding-bottom: 2em; | 
 |   14 } | 
 |   15  | 
 |   16 a img | 
 |   17 { | 
 |   18   border: none; | 
 |   19 } | 
 |   20  | 
 |   21 a:link, a:visited | 
 |   22 { | 
 |   23   color: #555; | 
 |   24 } | 
 |   25  | 
 |   26 button | 
 |   27 { | 
 |   28   cursor: pointer; | 
 |   29 } | 
 |   30  | 
 |   31 code, pre | 
 |   32 { | 
 |   33   font-family: monospace; | 
 |   34 } | 
 |   35  | 
 |   36 pre | 
 |   37 { | 
 |   38   background: #ececec; | 
 |   39   padding: 1em; | 
 |   40   overflow: auto; | 
 |   41 } | 
 |   42  | 
 |   43 .sprite | 
 |   44 { | 
 |   45   display: inline-block; | 
 |   46   font-size: 0px; /* fix for IE6 height bug */ | 
 |   47   background-image: url(../img/sprite-main.png); | 
 |   48   background-repeat: no-repeat; | 
 |   49 } | 
 |   50  | 
 |   51 .toc | 
 |   52 { | 
 |   53   display: inline-block; | 
 |   54   border: 1px solid #aaa; | 
 |   55   background: #fff; | 
 |   56   padding: 16px 20px; | 
 |   57 } | 
 |   58  | 
 |   59 .toc ul | 
 |   60 { | 
 |   61   list-style: none; | 
 |   62   margin: 0; | 
 |   63   padding: 0; | 
 |   64 } | 
 |   65  | 
 |   66 .toc ul ul | 
 |   67 { | 
 |   68   padding-left: 40px; | 
 |   69 } | 
 |   70  | 
 |   71 .toc li | 
 |   72 { | 
 |   73   margin: 4px 0; | 
 |   74 } | 
 |   75  | 
 |   76 #social-list ul | 
 |   77 { | 
 |   78   list-style: none; | 
 |   79   padding: 0; | 
 |   80   margin: 0; | 
 |   81 } | 
 |   82  | 
 |   83 div.animation[started="false"]:before | 
 |   84 { | 
 |   85   content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ%2B
     Ih5AAAAFVBMVEUAgAAAgAD%2F%2F%2F%2Fr9uvY7Ni%2B376h0aGeNpcsAAAAAXRSTlNtc%2BXFgwAAA
     DVJREFUeF5dzVEKACAMAlC7QW6t%2F7r%2FIYOBEPr1GOgw2AHiduaHkwKXwBK4BYZdylrpy4K%2BP%2
     Fu5C1CVKVSzAAAAAElFTkSuQmCC); | 
 |   86   padding-left: 0px; | 
 |   87   padding-right: 3px; | 
 |   88 } | 
 |   89  | 
 |   90 html[dir="rtl"] div.animation[started="false"]:before | 
 |   91 { | 
 |   92   padding-left: 3px; | 
 |   93   padding-right: 0px; | 
 |   94 } | 
 |   95  | 
 |   96 div.animation[started="false"] | 
 |   97 { | 
 |   98   cursor: pointer; | 
 |   99 } | 
 |  100  | 
 |  101 div.animation[started="true"] | 
 |  102 { | 
 |  103   box-sizing: initial; | 
 |  104   -moz-user-select: none; | 
 |  105 } | 
 |  106  | 
 |  107 .animation img | 
 |  108 { | 
 |  109   max-width: none; | 
 |  110 } | 
 |  111  | 
 |  112 .alert | 
 |  113 { | 
 |  114   display: block; | 
 |  115   padding: 15px; | 
 |  116   margin: 15px 0; | 
 |  117   background-color: #fff; | 
 |  118   border: 1px solid #a1a1a1; | 
 |  119 } | 
 |  120  | 
 |  121 [dir="ltr"] .alert | 
 |  122 { | 
 |  123   border-left: 5px solid #d14841; | 
 |  124 } | 
 |  125  | 
 |  126 [dir="rtl"] .alert | 
 |  127 { | 
 |  128   border-right: 5px solid #d14841; | 
 |  129 } | 
 |  130  | 
 |  131 /****************************************************************************** | 
 |  132  * .section | 
 |  133  *****************************************************************************/ | 
 |  134  | 
 |  135 .section | 
 |  136 { | 
 |  137   padding: 2em 0; | 
 |  138 } | 
 |  139  | 
 |  140 /****************************************************************************** | 
 |  141  * .content | 
 |  142  *****************************************************************************/ | 
 |  143  | 
 |  144 .content h1, | 
 |  145 .content .h1, | 
 |  146 .content h2, | 
 |  147 .content h3, | 
 |  148 .content h4, | 
 |  149 .content h5 | 
 |  150 { | 
 |  151   font-weight: bold; | 
 |  152   margin: 32px 0 16px 0; | 
 |  153   margin: 2rem 0 1rem 0; | 
 |  154   line-height: 1.4; | 
 |  155 } | 
 |  156  | 
 |  157 .content h1, | 
 |  158 .content .h1 { font-size: 1.4em; } | 
 |  159 .content h2 { font-size: 1.3em; } | 
 |  160 .content h3 { font-size: 1.2em; } | 
 |  161 .content h4 { font-size: 1.1em; } | 
 |  162 .content h5 { font-size: 1em; } | 
 |  163  | 
 |  164 @media(min-width: 576px) | 
 |  165 { | 
 |  166   .content h1, | 
 |  167   .content .h1 { font-size: 1.6em; } | 
 |  168   .content h2 { font-size: 1.4em; } | 
 |  169   .content h3 { font-size: 1.3em; } | 
 |  170   .content h4 { font-size: 1.2em; } | 
 |  171   .content h5 { font-size: 1.1em; } | 
 |  172 } | 
 |  173  | 
 |  174 @media(min-width: 768px) | 
 |  175 { | 
 |  176   .content h1, | 
 |  177   .content .h1 | 
 |  178   { | 
 |  179     font-size: 2.4em; | 
 |  180     line-height: 1.3; | 
 |  181   } | 
 |  182  | 
 |  183   .content h2 { font-size: 1.6em; } | 
 |  184 } | 
 |  185  | 
 |  186 .content a, | 
 |  187 .content a:visited | 
 |  188 { | 
 |  189   color: #c70d2c; | 
 |  190 } | 
 |  191  | 
 |  192 /* Buttons | 
 |  193  ******************************************************************************/ | 
 |  194  | 
 |  195 .button | 
 |  196 { | 
 |  197   padding: 0.5em 2em; | 
 |  198   border: none; | 
 |  199   text-align: center; | 
 |  200 } | 
 |  201  | 
 |  202 .button:hover, | 
 |  203 .button:active, | 
 |  204 .button:focus | 
 |  205 { | 
 |  206   text-decoration: none; | 
 |  207 } | 
 |  208  | 
 |  209 @media(max-width: 767px) | 
 |  210 { | 
 |  211   .button | 
 |  212   { | 
 |  213     display: block; | 
 |  214     width: 100%; | 
 |  215   } | 
 |  216 } | 
 |  217  | 
 |  218 .button.primary | 
 |  219 { | 
 |  220   color: #fff !important; | 
 |  221   background-color: #c70d2c !important; | 
 |  222   box-shadow: 0px 2px 5px #95989A; | 
 |  223 } | 
 |  224  | 
 |  225 .button.primary:hover | 
 |  226 { | 
 |  227   background-color: #E00F32 !important; | 
 |  228 } | 
 |  229  | 
 |  230 .button.primary:active | 
 |  231 { | 
 |  232   background-color: #AD102A !important; | 
 |  233 } | 
 |  234  | 
 |  235 .button.accent, | 
 |  236 .button.accent:visited | 
 |  237 { | 
 |  238   background: #077CA6 !important; | 
 |  239   color: #fff !important; | 
 |  240   margin-left: 2px; | 
 |  241   margin-right: 2px; | 
 |  242 } | 
 |  243  | 
 |  244 .button.accent:hover, | 
 |  245 .button.accent:active, | 
 |  246 .button.accent:focus | 
 |  247 { | 
 |  248   box-shadow: inset 0 0 0 3px #005D80; | 
 |  249 } | 
 |  250  | 
 |  251 /******************************************************************************* | 
 |  252  * .fg-* utilities | 
 |  253  ******************************************************************************/ | 
 |  254  | 
 |  255 .fg-accent | 
 |  256 { | 
 |  257   color: #077CA6; | 
 |  258 } | 
 |  259  | 
 |  260 .bg-secondary | 
 |  261 { | 
 |  262   color: #000; | 
 |  263   background-color: #F4F4F4; | 
 |  264 } | 
 |  265  | 
 |  266 /******************************************************************************* | 
 |  267  * #navbar | 
 |  268  ******************************************************************************/ | 
 |  269  | 
 |  270  #navbar | 
 |  271 { | 
 |  272   min-height: 4em; | 
 |  273   background-color: #c70d2c; | 
 |  274   position: fixed; | 
 |  275   z-index: 2; | 
 |  276   width: 100%; | 
 |  277   top: 0; | 
 |  278   transition: top 0.2s ease-in-out; | 
 |  279 } | 
 |  280  | 
 |  281 @media(max-width: 991px) | 
 |  282 { | 
 |  283   #navbar | 
 |  284   { | 
 |  285     overflow: auto; | 
 |  286   } | 
 |  287 } | 
 |  288  | 
 |  289 #navbar li | 
 |  290 { | 
 |  291   list-style-type: none; | 
 |  292 } | 
 |  293  | 
 |  294 #navbar .container | 
 |  295 { | 
 |  296   padding-left: 0; | 
 |  297   padding-right: 0; | 
 |  298 } | 
 |  299  | 
 |  300 /* #navbar #navbar-logo | 
 |  301  ******************************************************************************/ | 
 |  302  | 
 |  303 #navbar-logo | 
 |  304 { | 
 |  305   /* padding is visible in hover background-color change */ | 
 |  306   padding: 0em 1em; | 
 |  307   color: #fff; | 
 |  308 } | 
 |  309  | 
 |  310 #navbar-logo:hover, | 
 |  311 #navbar-logo:active, | 
 |  312 #navbar-logo:focus | 
 |  313 { | 
 |  314   background-color: #AE0013; | 
 |  315   text-decoration: none; | 
 |  316 } | 
 |  317  | 
 |  318 #navbar-logo, | 
 |  319 #navbar-logo > * | 
 |  320 { | 
 |  321   float: left; | 
 |  322 } | 
 |  323  | 
 |  324 [dir="rtl"] #navbar-logo, | 
 |  325 [dir="rtl"] #navbar-logo > * | 
 |  326 { | 
 |  327   float: right; | 
 |  328 } | 
 |  329  | 
 |  330 #navbar-logo img | 
 |  331 { | 
 |  332   height: 4em; | 
 |  333   padding: 0.5em 0em; | 
 |  334   margin: 0em 1em 0em 0em; | 
 |  335 } | 
 |  336  | 
 |  337 [dir="rtl"] #navbar-logo > img | 
 |  338 { | 
 |  339   margin: 0em  0em 0em 1em; | 
 |  340 } | 
 |  341  | 
 |  342 #navbar-logo > span | 
 |  343 { | 
 |  344   /* full-height: 2.91 * 1.375 = ~4em */ | 
 |  345   line-height: 2.91em; | 
 |  346   font-size: 1.375em; | 
 |  347 } | 
 |  348  | 
 |  349 /* #navbar #navbar-menu-toggle | 
 |  350  ******************************************************************************/ | 
 |  351  | 
 |  352 #navbar-menu-toggle | 
 |  353 { | 
 |  354   float: right; | 
 |  355   padding: 1em; | 
 |  356 } | 
 |  357  | 
 |  358 [dir="rtl"] #navbar-menu-toggle | 
 |  359 { | 
 |  360   float: left; | 
 |  361 } | 
 |  362  | 
 |  363 /* show on mobile */ | 
 |  364 #navbar-menu-toggle, | 
 |  365 #navbar-menu-toggle > img | 
 |  366 { | 
 |  367   display: block; | 
 |  368 } | 
 |  369  | 
 |  370 /* hide on desktop */ | 
 |  371 @media(min-width: 992px) | 
 |  372 { | 
 |  373   #navbar-menu-toggle | 
 |  374   { | 
 |  375     display: none; | 
 |  376   } | 
 |  377 } | 
 |  378  | 
 |  379 #navbar-menu-toggle > img | 
 |  380 { | 
 |  381   /* plus 2em padding = 4em */ | 
 |  382   height: 2em; | 
 |  383 } | 
 |  384  | 
 |  385 #navbar-menu-toggle:hover, | 
 |  386 #navbar-menu-toggle:active, | 
 |  387 #navbar-menu-toggle:focus | 
 |  388 { | 
 |  389   background-color: #AE0013; | 
 |  390 } | 
 |  391  | 
 |  392 /* #navbar #navbar-menu | 
 |  393  ******************************************************************************/ | 
 |  394  | 
 |  395 #navbar-menu a | 
 |  396 { | 
 |  397   display: block; | 
 |  398   color: #fff; | 
 |  399   text-decoration: none; | 
 |  400 } | 
 |  401  | 
 |  402 /* #navbar #navbar-menu #navbar-locale-menu | 
 |  403  ******************************************************************************/ | 
 |  404  | 
 |  405 /* caret */ | 
 |  406 #navbar-locale-selected:after | 
 |  407 { | 
 |  408   display: inline-block; | 
 |  409   width: 0; | 
 |  410   height: 0; | 
 |  411   margin: 0em 0em 0em 0.255em; | 
 |  412   vertical-align: .255em; | 
 |  413   content: ""; | 
 |  414   border-top: .3em solid; | 
 |  415   border-right: .3em solid transparent; | 
 |  416   border-left: .3em solid transparent; | 
 |  417 } | 
 |  418  | 
 |  419 [dir="rtl"] #navbar-locale-selected:after | 
 |  420 { | 
 |  421   margin: 0em 0.255em 0em 0em; | 
 |  422 } | 
 |  423  | 
 |  424 #navbar-locale-menu | 
 |  425 { | 
 |  426   display: none; | 
 |  427 } | 
 |  428  | 
 |  429 #navbar-locale-menu.visible | 
 |  430 { | 
 |  431   display: block; | 
 |  432 } | 
 |  433  | 
 |  434 #navbar-locale-menu > li > a | 
 |  435 { | 
 |  436   padding: 0.75em 1em; | 
 |  437 } | 
 |  438  | 
 |  439 #navbar-locale-menu > li > a:hover, | 
 |  440 #navbar-locale-menu > li > a:active, | 
 |  441 #navbar-locale-menu > li > a:focus | 
 |  442 { | 
 |  443   background-color: #434343; | 
 |  444 } | 
 |  445  | 
 |  446 /* #navbar #navbar-menu (desktop) | 
 |  447  ******************************************************************************/ | 
 |  448  | 
 |  449 @media(min-width: 992px) | 
 |  450 { | 
 |  451   #navbar-menu | 
 |  452   { | 
 |  453     float: right; | 
 |  454   } | 
 |  455  | 
 |  456   [dir="rtl"] #navbar-menu | 
 |  457   { | 
 |  458     float: left; | 
 |  459   } | 
 |  460  | 
 |  461   #navbar-menu > li, | 
 |  462   #navbar-menu > li > a | 
 |  463   { | 
 |  464     display: inline-block; | 
 |  465   } | 
 |  466  | 
 |  467   #navbar-menu > li > a | 
 |  468   { | 
 |  469     padding: 0em 1em; | 
 |  470     line-height: 4em; | 
 |  471   } | 
 |  472  | 
 |  473   #navbar-menu > li > a:hover, | 
 |  474   #navbar-menu > li > a:active, | 
 |  475   #navbar-menu > li > a:focus | 
 |  476   { | 
 |  477     background-color: #AE0013; | 
 |  478   } | 
 |  479  | 
 |  480   /* #navbar #navbar-menu #navbar-locale-menu | 
 |  481    ****************************************************************************/ | 
 |  482  | 
 |  483   #navbar-locale-menubar | 
 |  484   { | 
 |  485     position: relative; | 
 |  486   } | 
 |  487  | 
 |  488   #navbar-locale-menu | 
 |  489   { | 
 |  490     position: absolute; | 
 |  491     min-width: 16em; | 
 |  492     max-height: 20em; | 
 |  493     max-height: 50vh; | 
 |  494     top: 100%; | 
 |  495     right: 0px; | 
 |  496     overflow: auto; | 
 |  497     z-index: 9001; | 
 |  498     background-color: #292929; | 
 |  499   } | 
 |  500  | 
 |  501   [dir="rtl"] #navbar-locale-menu | 
 |  502   { | 
 |  503     right: auto; | 
 |  504     left: 0px; | 
 |  505   } | 
 |  506 } | 
 |  507  | 
 |  508 /* #navbar #navbar-menu (mobile) | 
 |  509  ******************************************************************************/ | 
 |  510  | 
 |  511 @media(max-width: 991px) | 
 |  512 { | 
 |  513   #navbar-menu | 
 |  514   { | 
 |  515     display: none; | 
 |  516     float: left; | 
 |  517     clear: both; | 
 |  518     width: 100%; | 
 |  519     background-color: #292929; | 
 |  520     overflow-y: scroll; | 
 |  521     max-height: 416px; | 
 |  522     max-height: 80vh; | 
 |  523   } | 
 |  524  | 
 |  525   #navbar-menu.visible | 
 |  526   { | 
 |  527     display: block; | 
 |  528   } | 
 |  529  | 
 |  530   #navbar-menu li a | 
 |  531   { | 
 |  532     padding: 0.75em 1em; | 
 |  533   } | 
 |  534  | 
 |  535   #navbar-menu li a:hover, | 
 |  536   #navbar-menu li a:active, | 
 |  537   #navbar-menu li a:focus | 
 |  538   { | 
 |  539     background-color: #434343; | 
 |  540   } | 
 |  541 } | 
 |  542  | 
 |  543 /******************************************************************************* | 
 |  544  * #footer | 
 |  545  ******************************************************************************/ | 
 |  546  | 
 |  547 #footer | 
 |  548 { | 
 |  549   overflow: auto; | 
 |  550   padding: 2em 0em; | 
 |  551   color: #ececec; | 
 |  552   background-color: #292929; | 
 |  553   font-size: 0.9em; | 
 |  554 } | 
 |  555  | 
 |  556 /* #footer body | 
 |  557  ******************************************************************************/ | 
 |  558  | 
 |  559 #footer h5 | 
 |  560 { | 
 |  561   margin-top: 1em; | 
 |  562   margin-bottom: 1.5em; | 
 |  563 } | 
 |  564  | 
 |  565 #footer h5:after | 
 |  566 { | 
 |  567   content: ""; | 
 |  568   display: block; | 
 |  569   width: 1.25em; | 
 |  570   height: 0.125em; | 
 |  571   margin-top: 0.5em; | 
 |  572   background-color: #ececec; | 
 |  573 } | 
 |  574  | 
 |  575 #footer ul | 
 |  576 { | 
 |  577   padding: 0em; | 
 |  578   list-style-type: none; | 
 |  579 } | 
 |  580  | 
 |  581 #footer a | 
 |  582 { | 
 |  583   color: #ececec; | 
 |  584 } | 
 |  585  | 
 |  586 #footer a:hover, | 
 |  587 #footer a:active, | 
 |  588 #footer a:focus | 
 |  589 { | 
 |  590   color: #fff; | 
 |  591   text-decoration: underline; | 
 |  592 } | 
 |  593  | 
 |  594 /* #footer #social-list | 
 |  595  ******************************************************************************/ | 
 |  596  | 
 |  597 #social-list ul | 
 |  598 { | 
 |  599   /* negative margin canceled out by li margin below */ | 
 |  600   margin: 0em -0.375em; | 
 |  601 } | 
 |  602  | 
 |  603 #social-list li | 
 |  604 { | 
 |  605   float: left; | 
 |  606   margin: 0em 0.375em; | 
 |  607 } | 
 |  608  | 
 |  609 [dir="rtl"] #social-list li | 
 |  610 { | 
 |  611   float: right; | 
 |  612 } | 
 |  613  | 
 |  614 #social-list img | 
 |  615 { | 
 |  616   height: 2em; | 
 |  617 } | 
 |  618  | 
 |  619 @media(min-width: 1200px) | 
 |  620 { | 
 |  621   #social-list img | 
 |  622   { | 
 |  623     height: 3em; | 
 |  624   } | 
 |  625 } | 
 |  626  | 
 |  627 /* #footer #footer-legal | 
 |  628  ******************************************************************************/ | 
 |  629  | 
 |  630 #footer-legal | 
 |  631 { | 
 |  632   margin-top: 1em; | 
 |  633 } | 
 |  634  | 
 |  635 @media(min-width: 1200px) | 
 |  636 { | 
 |  637   #footer-legal | 
 |  638   { | 
 |  639     margin-top: 2em; | 
 |  640   } | 
 |  641 } | 
 |  642  | 
 |  643 /* #footer #footer-legal #legal-list | 
 |  644  ******************************************************************************/ | 
 |  645  | 
 |  646 #legal-list li | 
 |  647 { | 
 |  648   float: left; | 
 |  649 } | 
 |  650  | 
 |  651 [dir="rtl"] #legal-list li | 
 |  652 { | 
 |  653   float: right; | 
 |  654 } | 
 |  655  | 
 |  656 #legal-list li:after | 
 |  657 { | 
 |  658   margin: 0em 0.375em; | 
 |  659 } | 
 |  660  | 
 |  661 /* IE9+ only */ | 
 |  662 #legal-list li::after | 
 |  663 { | 
 |  664   content: "|" | 
 |  665 } | 
 |  666  | 
 |  667 #legal-list li:last-of-type::after | 
 |  668 { | 
 |  669   content: none; | 
 |  670 } | 
 |  671  | 
 |  672 /* float copyright and legal links left and right on ~desktop */ | 
 |  673 @media(min-width: 1200px) | 
 |  674 { | 
 |  675   #copyright-notice | 
 |  676   { | 
 |  677     float: left; | 
 |  678   } | 
 |  679  | 
 |  680   [dir="rtl"] #copyright-notice | 
 |  681   { | 
 |  682     float: right; | 
 |  683   } | 
 |  684  | 
 |  685   #legal-list | 
 |  686   { | 
 |  687     float: right; | 
 |  688   } | 
 |  689  | 
 |  690   [dir="rtl"] #legal-list | 
 |  691   { | 
 |  692     float: left; | 
 |  693   } | 
 |  694 } | 
 |  695  | 
 |  696 /* hide all footer links except #social-list on ~mobile */ | 
 |  697 @media(max-width: 767px) | 
 |  698 { | 
 |  699   #footer .column | 
 |  700   { | 
 |  701     display: none; | 
 |  702   } | 
 |  703  | 
 |  704   /* overriding display:none above */ | 
 |  705   #footer #social-list | 
 |  706   { | 
 |  707     display: block; | 
 |  708   } | 
 |  709 } | 
 |  710  | 
 |  711 /* Video | 
 |  712  ****************************************************************************/ | 
 |  713  | 
 |  714 .video-parent | 
 |  715 { | 
 |  716   position: relative; | 
 |  717   display: block; | 
 |  718   width: 100%; | 
 |  719   padding: 0; | 
 |  720   border: 1px solid #c9c9c9; | 
 |  721   box-shadow: 1px 1px 0 0 #dbdbdb; | 
 |  722   overflow: hidden; | 
 |  723 } | 
 |  724  | 
 |  725 .video-parent.has-iframe::before | 
 |  726 { | 
 |  727   display: block; | 
 |  728   content: ""; | 
 |  729   padding-top: 56.25%; | 
 |  730 } | 
 |  731  | 
 |  732 .video-parent iframe | 
 |  733 { | 
 |  734   position: absolute; | 
 |  735   top: 0; | 
 |  736   bottom: 0; | 
 |  737   left: 0; | 
 |  738   width: 100%; | 
 |  739   height: 100%; | 
 |  740   border: 0; | 
 |  741 } | 
 |  742  | 
 |  743 .video-link | 
 |  744 { | 
 |  745   display: block; | 
 |  746   position: relative; | 
 |  747 } | 
 |  748  | 
 |  749 .video-thumbnail | 
 |  750 { | 
 |  751   width: 100%; | 
 |  752   transition: opacity 0.8s; | 
 |  753   opacity: 0.2; | 
 |  754 } | 
 |  755  | 
 |  756 .hide-disclaimer .video-thumbnail | 
 |  757 { | 
 |  758   opacity: 1; | 
 |  759 } | 
 |  760  | 
 |  761 .video-disclaimer | 
 |  762 { | 
 |  763   visibility: visible; | 
 |  764   opacity: 1; | 
 |  765   position: absolute; | 
 |  766   bottom: 0; | 
 |  767   left: 0; | 
 |  768   padding: 1em; | 
 |  769   background-color: #fff; | 
 |  770   font-size: 0.9em; | 
 |  771   text-align: center; | 
 |  772   transition: opacity 0.8s; | 
 |  773 } | 
 |  774  | 
 |  775 .hide-disclaimer .video-disclaimer | 
 |  776 { | 
 |  777   visibility: hidden; | 
 |  778   opacity: 0; | 
 |  779 } | 
 |  780  | 
 |  781 .video-play | 
 |  782 { | 
 |  783   position: absolute; | 
 |  784   top: 50%; | 
 |  785   left: 50%; | 
 |  786   width: 80px; | 
 |  787   margin-top: -60px; | 
 |  788   margin-left: -40px; | 
 |  789 } | 
 |  790  | 
 |  791 .hide-disclaimer .video-play | 
 |  792 { | 
 |  793   margin-top: -40px; | 
 |  794 } | 
 |  795  | 
 |  796 /****************************************************************************** | 
 |  797  * .item-group | 
 |  798  *****************************************************************************/ | 
 |  799  | 
 |  800 .item-group | 
 |  801 { | 
 |  802   text-align: center; | 
 |  803   padding-top: 3em; | 
 |  804   padding-bottom: 3em; | 
 |  805 } | 
 |  806  | 
 |  807 .item-group img | 
 |  808 { | 
 |  809   height: 5em; | 
 |  810   width: auto; | 
 |  811 } | 
 |  812  | 
 |  813 .item-group h2 | 
 |  814 { | 
 |  815   text-transform: uppercase; | 
 |  816 } | 
 |  817  | 
 |  818 @media (max-width: 575px) | 
 |  819 { | 
 |  820   .item-group .column | 
 |  821   { | 
 |  822     margin-bottom: 3em; | 
 |  823   } | 
 |  824  | 
 |  825   .item-group .column:last-of-type | 
 |  826   { | 
 |  827     margin-bottom: 0; | 
 |  828   } | 
 |  829 } | 
 |  830  | 
 |  831 @media (min-width: 576px) and (max-width: 1023px) | 
 |  832 { | 
 |  833   .item-group | 
 |  834   { | 
 |  835     text-align: left; | 
 |  836   } | 
 |  837  | 
 |  838   [dir="rtl"] .item-group | 
 |  839   { | 
 |  840     text-align: right; | 
 |  841   } | 
 |  842  | 
 |  843   .item-group .column | 
 |  844   { | 
 |  845     position: relative; | 
 |  846     width: auto; | 
 |  847     padding: 0 3em 2em 10.5em; | 
 |  848     min-height: 7em; /* Height of image plus 2em bottom padding */ | 
 |  849   } | 
 |  850  | 
 |  851   [dir="rtl"] .item-group .column | 
 |  852   { | 
 |  853     padding: 0 10.5em 2em 3em; | 
 |  854   } | 
 |  855  | 
 |  856   .item-group .column:last-of-type | 
 |  857   { | 
 |  858     padding-bottom: 0; | 
 |  859     min-height: 6em; /* Height of image */ | 
 |  860   } | 
 |  861  | 
 |  862   .item-group img | 
 |  863   { | 
 |  864     position: absolute; | 
 |  865     left: 3em; | 
 |  866     top: 0.5em; | 
 |  867   } | 
 |  868  | 
 |  869   [dir="rtl"] .item-group img | 
 |  870   { | 
 |  871     left: auto; | 
 |  872     right: 3em; | 
 |  873   } | 
 |  874  | 
 |  875   .item-group h2 | 
 |  876   { | 
 |  877     margin: 0; | 
 |  878   } | 
 |  879 } | 
 |  880  | 
 |  881 /* Horizontal List | 
 |  882  ******************************************************************************/ | 
 |  883  | 
 |  884 .horizontal-list | 
 |  885 { | 
 |  886   display: inline; | 
 |  887   list-style: none; | 
 |  888 } | 
 |  889  | 
 |  890 .horizontal-list, | 
 |  891 .content .horizontal-list | 
 |  892 { | 
 |  893   padding: 0; | 
 |  894 } | 
 |  895  | 
 |  896 .horizontal-list li | 
 |  897 { | 
 |  898   display: inline; | 
 |  899   list-style: none; | 
 |  900 } | 
| OLD | NEW |