diff --git a/static/css/sass/_banner.scss b/static/css/sass/_banner.scss
index 8b5f8d42e36d1b4f7d7239bcb6f55aabef50fadd..92ac7262fe7fd69b1c8abb420e3a49bb096cfeac 100644
--- a/static/css/sass/_banner.scss
+++ b/static/css/sass/_banner.scss
@@ -32,10 +32,10 @@ $banner-index-marker-height: 2px;
 #banner-wrapper {
     position: relative;
     z-index: 5;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;     // Main axis alignment.
-    align-items: center;                // Cross axis alignment.
+    @include display-flex;
+    @include flex-direction(column);
+    @include justify-content(space-between);     // Main axis alignment.
+    @include align-items(center);                // Cross axis alignment.
 }
 
 .banner-image {
@@ -62,24 +62,24 @@ $banner-index-marker-height: 2px;
 #banner-text {
     position: absolute;
     z-index: 6;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    @include display-flex;
+    @include flex-direction(column);
+    @include justify-content(center);
+    @include align-items(center);
 }
 
 #banner-index-list {
     position: absolute;
     bottom: 0;
     left: 0;
-    display: flex;
+    @include display-flex;
     width: 100%;
 }
 
 #banner-index-list li {
     display: inline-block;
     height: $banner-index-marker-height;
-    flex-grow: 1;
+    @include flex-grow(1);
     background-color: $color-nav-fg;
 }
 
@@ -165,8 +165,8 @@ $banner-index-marker-height: 2px;
         position: absolute;
         top: 105px;
         left: 0;
-        display: flex;
-        justify-content: space-between;
+        @include display-flex;
+        @include justify-content(space-between);
     }
 
     .arrow-container {
diff --git a/static/css/sass/_body.scss b/static/css/sass/_body.scss
index 18faa061bd8c236f9d1ecee79a0646890668ed5b..f7275418f8e0f254aa8cf23afd65d0be079d1ab2 100644
--- a/static/css/sass/_body.scss
+++ b/static/css/sass/_body.scss
@@ -40,8 +40,8 @@ body {
     z-index: 1;
 
     // Set site to span minimum of full screen height.
-    display: flex;
-    flex-direction: column;
+    @include display-flex;
+    @include flex-direction(column);
     min-height: 100vh;
 }
 
@@ -50,8 +50,8 @@ body {
     z-index: 10;
 
     // Force bodywrapper to take up vertical space, if there is any.
-    display: flex;
-    flex-grow: 1;
+    @include display-flex;
+    @include flex-grow(1);
 }
 
 main {
diff --git a/static/css/sass/_content_draws.scss b/static/css/sass/_content_draws.scss
index 60f3f5a75ee9e9f7f09575880eac5ffdccef02b6..0e35e5a2e1ae542294fc158e7a6fa4253cc01405 100644
--- a/static/css/sass/_content_draws.scss
+++ b/static/css/sass/_content_draws.scss
@@ -40,25 +40,25 @@ $border-color: #aaa;
 
 #draws-page {
     .round-container {
-      display: flex;
-      flex-direction: row;
+      @include display-flex;
+      @include flex-direction(row);
     }
 
     .round {
-      display: flex;
-      flex-direction: column;
+      @include display-flex;
+      @include flex-direction(column);
 
       .spacer {
-        flex-grow: 1;
+        @include flex-grow(1);
       }
 
       .spacer:first-child,
       .spacer:last-child {
-        flex-grow: .5;
+        @include flex-grow(.5);
       }
 
       .game-spacer {
-        flex-grow: 1;
+        @include flex-grow(1);
       }
     }
 
@@ -202,7 +202,7 @@ $border-color: #aaa;
     }
 
     .round {
-      justify-content: center;
+      @include justify-content(center);
     }
 }
 
diff --git a/static/css/sass/_content_frontPage.scss b/static/css/sass/_content_frontPage.scss
index 0349f405db31b3eaae765ac1b369d2ab621c5254..134d274dfb770d3a3076c1cbb58cbc6052c03991 100644
--- a/static/css/sass/_content_frontPage.scss
+++ b/static/css/sass/_content_frontPage.scss
@@ -23,9 +23,9 @@
 }
 
 .days-until-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    @include display-flex;
+    @include flex-direction(column);
+    @include justify-content(center);
     border: 1px solid #CCC;
     border-radius: 10px;
     max-width: 172px;
@@ -68,14 +68,14 @@
 //**************************************************
 
 #front-page-left-center-doc {
-    flex-grow: 1;
+    @include flex-grow(1);
 }
 
 #front-page-left-center {
-    display: flex;
+    @include display-flex;
 
     @media (max-width: $tablet-max) {
-        flex-wrap: wrap;
+        @include flex-wrap(wrap);
     }
 
     @media (max-width: $phone-max) {
@@ -84,23 +84,23 @@
 }
 
 #front-page-columns {
-    display: flex;              // Display as flex.
-    justify-content: center;    // Main axis alignment.
+    @include display-flex;              // Display as flex.
+    @include justify-content(center);    // Main axis alignment.
 
     @media (max-width: $tablet-max) {
-        flex-wrap: wrap;
+        @include flex-wrap(wrap);
         display: block;
     }
 }
 
 #front-page-left {
     text-align: center;
-    /*display: flex;              // Display as flex.
-    align-items: center;        // Cross axis alignment.
-    flex-direction: column; */
+    /*@include display-flex;              // Display as flex.
+    @include align-items(center);        // Cross axis alignment.
+    @include flex-direction(column); */
 
     @media (max-width: $tablet-max) {
-        order: 1;
+        @include order(1);
     }
 
     @media (max-width: $phone-max) {
@@ -111,21 +111,21 @@
 }
 
 #front-page-center {
-    display: flex;              // Display as flex.
-    /*justify-content: center;*/// Main axis alignment.
-    flex-grow: 1;
+    @include display-flex;              // Display as flex.
+    /*@include justify-content(center);*/// Main axis alignment.
+    @include flex-grow(1);
 
     @media (max-width: $tablet-max) {
-        order: 3;
+        @include order(3);
     }
 }
 
 #front-page-right {
-    /*display: flex;              // Display as flex.
-    justify-content: center;    // Main axis alignment.*/
+    /*@include display-flex;              // Display as flex.
+    @include justify-content(center);    // Main axis alignment.*/
 
     @media (max-width: $tablet-max) {
-        order: 2;
+        @include order(2);
         margin-left: auto;
         margin-right: auto;
     }
diff --git a/static/css/sass/_content_generics.scss b/static/css/sass/_content_generics.scss
index cf05b2ed71db836b9d9a50534bf2c63948ac66ca..d97949d11a49f0a14f843daf55534ceceafad266 100644
--- a/static/css/sass/_content_generics.scss
+++ b/static/css/sass/_content_generics.scss
@@ -45,16 +45,16 @@
 //**************************************************
 
 .form-field-div {
-    display: flex;              // Display as flex.
-    justify-content: center;    // Main axis alignment.
-    align-items: center;        // Cross axis alignment.
-    flex-direction: column;
+    @include display-flex;              // Display as flex.
+    @include justify-content(center);    // Main axis alignment.
+    @include align-items(center);        // Cross axis alignment.
+    @include flex-direction(column);
 }
 
 .form-field-label,
 .form-field-singleline,
 .form-field-label-singleline {
-    align-self: flex-start;
+    @include align-self(flex-start);
 }
 
 //**************************************************
diff --git a/static/css/sass/_content_news.scss b/static/css/sass/_content_news.scss
index e535f341f73392f2cd66b7fa7b14f9b3ae255a6c..331009f759cfc4e32b4ceffb1de4da9c75b9ea32 100644
--- a/static/css/sass/_content_news.scss
+++ b/static/css/sass/_content_news.scss
@@ -34,39 +34,39 @@
 //*************************
 
 #article-main {
-    display: flex;
+    @include display-flex;
 
     @media (max-width: $phone-max) {
-        flex-wrap: wrap;
+        @include flex-wrap(wrap);
     }
 }
 
 #article-container {
-    flex-grow: 1;
+    @include flex-grow(1);
 }
 
 // Container for summary group.
 #news-summaries {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    align-content: flex-start;
+    @include display-flex;
+    @include justify-content(center);
+    @include flex-wrap(wrap);
+    @include align-content(flex-start);
 }
 
 // Individual summaries, + spacer.
 .news-summary,
 .news-summary-spacer {
     position: relative;
-    display: flex;
-    flex-direction: column;
+    @include display-flex;
+    @include flex-direction(column);
 }
 
 .news-summary {
 
     .news-content {
-        flex-grow: 1;
+        @include flex-grow(1);
     }
-    
+
     .placeholder {
         position: absolute;
         top: 0;
@@ -123,28 +123,28 @@
 //*************************
 
 #date-nav {
-    display: flex;
+    @include display-flex;
 }
 
 #date-nav {
 
     .stretch {
-        flex-grow: 1;
+        @include flex-grow(1);
     }
 
     a {
         display: block;
-        flex-basis: 0;
+        @include flex-basis(0);
     }
 
     .empty,
     a {
-        flex-grow: 1;
+        @include flex-grow(1);
     }
 
     .date-current {
         display: block;
-        align-self: center;
+        @include align-self(center);
 
         @media (max-width: $phone-mid) {
             display: none;
@@ -154,7 +154,7 @@
 
 .date-nav-current {
     display: none;
-    align-self: center;
+    @include align-self(center);
 
     @media (max-width: $phone-mid) {
         display: block;
@@ -173,12 +173,12 @@
 .potd-list {
 
     @media (max-width: $phone-max) {
-        display: flex;
-        flex-wrap: wrap;
+        @include display-flex;
+        @include flex-wrap(wrap);
         overflow: auto;
-        justify-content: center;
+        @include justify-content(center);
     }
-    
+
     a {
         display: block;
     }
@@ -189,49 +189,49 @@
 
     #drilldown {
 
-        display: flex;
-        flex-grow: 1;
+        @include display-flex;
+        @include flex-grow(1);
         overflow: auto;
         overflow-y: auto !important;
     }
-    
+
     #drilldown {
-        
+
         .news-list {
-            justify-content: center;    // Main axis alignment.
-            align-items: center;        // Cross axis alignment.
+            @include justify-content(center);    // Main axis alignment.
+            @include align-items(center);        // Cross axis alignment.
         }
-        
+
         .news-list {
-        
+
             li {
-                display: flex;
-                flex-grow: 1;
-                
+                @include display-flex;
+                @include flex-grow(1);
+
                 ol {
-                    flex-grow: 1;
-                    
+                    @include flex-grow(1);
+
                     li {
-                        justify-content: center;    // Main axis alignment.
-                        align-items: center;        // Cross axis alignment.
-                        flex-direction: row;
-                        flex-grow: 0;
+                        @include justify-content(center);    // Main axis alignment.
+                        @include align-items(center);        // Cross axis alignment.
+                        @include flex-direction(row);
+                        @include flex-grow(0);
                     }
-                    
+
                     a {
-                        display: flex;
-                        justify-content: center;    // Main axis alignment.
-                        align-items: center;        // Cross axis alignment.
+                        @include display-flex;
+                        @include justify-content(center);    // Main axis alignment.
+                        @include align-items(center);        // Cross axis alignment.
                     }
                 }
             }
-            
-            
+
+
         }
-        
+
         li ol {
-            display: flex;
-            flex-wrap: wrap;
+            @include display-flex;
+            @include flex-wrap(wrap);
         }
     }
 }
@@ -280,7 +280,7 @@
     p {
         margin: 0;
     }
-    
+
     .placeholder {
         width: 100%;
         height: 100%;
@@ -408,47 +408,47 @@
 }
 
 // Phone news nav section.
-#drilldown { 
-    
+#drilldown {
+
     .news-list {
-        
+
         span {
-            
+
             @media (max-width: $phone-max) {
                 min-width: 50px;
                 padding-top: 10px;
                 padding-left: 5%;
             }
         }
-        
+
         li {
             @media (max-width: $phone-max) {
                 width: 95%;
                 max-width: none;
             }
         }
-        
+
         ol {
-            
+
             li {
                 @media (max-width: $phone-max) {
                     width: auto;
                     min-width: 15%;
                     margin: 5px;
                 }
-                
+
                 @media (max-width: $phone-mid) {
                     min-width: 25%;
                 }
             }
-            
+
             a {
                 @media (max-width: $phone-max) {
                     width: 100%;
                     height: 100%;
                 }
             }
-        } 
+        }
     }
 }
 
@@ -533,7 +533,7 @@
 }
 
 .news-summary {
-    
+
     .placeholder {
         background-color: rgba(255, 255, 255, 0.1);
     }
@@ -624,22 +624,22 @@
 //*************************
 
 #drilldown {
-    
+
     // Phone news nav section.
     @media (max-width: $phone-max) {
-        
+
         .news-list {
-            
+
             li {
                 text-align: initial;
             }
-            
+
             ol {
-            
+
                 a {
                     font-size: 0.90em;
                 }
-            } 
+            }
         }
     }
 }
diff --git a/static/css/sass/_content_players.scss b/static/css/sass/_content_players.scss
index 5b1ec77711fde73dded5494d4c37bea7fd372af6..59081dec68a05381949c847cba7601ded7ecf392 100644
--- a/static/css/sass/_content_players.scss
+++ b/static/css/sass/_content_players.scss
@@ -28,15 +28,15 @@
 #player-list {
 
     form {
-        flex-direction: row;
-        flex-wrap: wrap;
+        @include flex-direction(row);
+        @include flex-wrap(wrap);
     }
 
     .sort-div {
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
-        flex-direction: column;
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
+        @include flex-direction(column);
     }
 
     .sort-div {
@@ -53,33 +53,33 @@
     .player-div {
 
         ul {
-            display: flex;              // Display as flex.
-            justify-content: center;    // Main axis alignment.
-            align-items: center;        // Cross axis alignment.
-            flex-wrap: wrap;
+            @include display-flex;              // Display as flex.
+            @include justify-content(center);    // Main axis alignment.
+            @include align-items(center);        // Cross axis alignment.
+            @include flex-wrap(wrap);
 
             li:not(.seed) {
-                display: flex;              // Display as flex.
-                justify-content: center;    // Main axis alignment.
-                align-items: center;        // Cross axis alignment.
-                flex-grow: 1;
+                @include display-flex;              // Display as flex.
+                @include justify-content(center);    // Main axis alignment.
+                @include align-items(center);        // Cross axis alignment.
+                @include flex-grow(1);
 
                 @media (max-width: $phone-max) {
-                    flex-basis: 200px;
+                    @include flex-basis(200px);
                 }
 
                 @media (min-width: $tablet-min) and (max-width: $tablet-max) {
-                    flex-basis: 250px;
+                    @include flex-basis(250px);
                 }
 
                 @media (min-width: $laptop-min) {
-                    flex-basis: 300px;
+                    @include flex-basis(300px);
                 }
 
                 a {
-                    display: flex;              // Display as flex.
-                    justify-content: center;    // Main axis alignment.
-                    align-items: center;        // Cross axis alignment.
+                    @include display-flex;              // Display as flex.
+                    @include justify-content(center);    // Main axis alignment.
+                    @include align-items(center);        // Cross axis alignment.
                 }
             }
         }
diff --git a/static/css/sass/_content_sponsors.scss b/static/css/sass/_content_sponsors.scss
index 61e77ed87c0d41c9db4fc8d6753636d02c6ac501..915bea50012fb9b8fca5773b65571edd41456b90 100644
--- a/static/css/sass/_content_sponsors.scss
+++ b/static/css/sass/_content_sponsors.scss
@@ -26,45 +26,45 @@
 //**************************************************
 
 .company-list {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
+    @include display-flex;
+    @include flex-direction(column);
+    @include flex-wrap(wrap);
 
     @media (min-width: $phone-mid) {
-        flex-direction: row;
+        @include flex-direction(row);
     }
 }
 
 .company-list {
 
     li {
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
-        flex-grow: 1;
-        flex-basis: 100px;
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
+        @include flex-grow(1);
+        @include flex-basis(100px);
 
         @media (min-width: $laptop-min) {
-            flex-basis: 150px;
+            @include flex-basis(150px);
         }
     }
 
     a {
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
     }
 
     img {
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
     }
 
     p {
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
     }
 }
 
diff --git a/static/css/sass/_footer.scss b/static/css/sass/_footer.scss
index 798bcad82479bb5ee066a5989cdc1fd9a6e21e1d..8b3169f32e413a2b428544f13391c5259ce257c2 100644
--- a/static/css/sass/_footer.scss
+++ b/static/css/sass/_footer.scss
@@ -31,36 +31,36 @@
 footer {
     position: relative;
     z-index: 30;
-    display: flex;              // Display as flex.
-    justify-content: center;    // Main axis alignment.
-    align-items: center;        // Cross axis alignment.
-    flex-direction: column;
+    @include display-flex;              // Display as flex.
+    @include justify-content(center);    // Main axis alignment.
+    @include align-items(center);        // Cross axis alignment.
+    @include flex-direction(column);
 }
 
 footer {
-    
+
     .link-div {
         position: relative;
-        display: flex;
+        @include display-flex;
         z-index: 31;
-        justify-content: space-between;     // Main axis alignment.
-        align-items: center;                // Cross axis alignment.
+        @include justify-content(space-between);     // Main axis alignment.
+        @include align-items(center);                // Cross axis alignment.
     }
-    
+
     .sitemap-toggle {
         z-index: 32;
-        display: flex;              // Display as flex.
-    justify-content: center;    // Main axis alignment.
-    align-items: center;        // Cross axis alignment.
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
     }
-    
+
     .sitemap-toggle {
-        
+
         a {
             z-index: 33;
-            display: flex;              // Display as flex.
-            justify-content: center;    // Main axis alignment.
-            align-items: center;        // Cross axis alignment.
+            @include display-flex;              // Display as flex.
+            @include justify-content(center);    // Main axis alignment.
+            @include align-items(center);        // Cross axis alignment.
         }
     }
 }
@@ -74,39 +74,39 @@ footer {
 //**************************************************
 
 footer {
-    
+
     .social-media {
         z-index: 32;
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
     }
-    
+
     .social-media {
-        
+
         li {
             z-index: 33;
-            display: flex;              // Display as flex.
-            justify-content: center;    // Main axis alignment.
-            align-items: center;        // Cross axis alignment.
+            @include display-flex;              // Display as flex.
+            @include justify-content(center);    // Main axis alignment.
+            @include align-items(center);        // Cross axis alignment.
         }
-        
+
         a {
             z-index: 33;
-            display: flex;              // Display as flex.
-            justify-content: center;    // Main axis alignment.
-            align-items: center;        // Cross axis alignment.
+            @include display-flex;              // Display as flex.
+            @include justify-content(center);    // Main axis alignment.
+            @include align-items(center);        // Cross axis alignment.
         }
-        
+
         img {
             z-index: 33;
-            display: flex;              // Display as flex.
-            justify-content: center;    // Main axis alignment.
-            align-items: center;        // Cross axis alignment.
+            @include display-flex;              // Display as flex.
+            @include justify-content(center);    // Main axis alignment.
+            @include align-items(center);        // Cross axis alignment.
         }
-        
+
         @media (max-width: $phone-mid) {
-            
+
             p {
                 display: none;
             }
@@ -139,30 +139,30 @@ footer {
 }
 
 footer {
-    
+
     .link-div {
         width: 90%;
         height: 100%;
         max-height: 50px;
         padding-top: 5px;
     }
-    
+
     p {
         padding: 0;
         //padding-top: 5px;
         margin: 0;
     }
-    
+
     .sitemap-toggle {
         height: 50px;
         min-width: 20%;
     }
-    
+
     img {
         max-width: 30px;
         max-height: 30px;
         padding-right: 5px;
-        
+
         @media (max-width: $phone-max) {
             max-width: 25px;
         }
@@ -178,13 +178,13 @@ footer {
 //**************************************************
 
 footer {
-    
+
     .social-media {
         min-width: 30%;
     }
-    
+
     .social-media {
-        
+
         li {
             height: 100%;
             min-height: 40px;
@@ -192,7 +192,7 @@ footer {
             padding-right: 5%;
             padding-left: 5%;
         }
-        
+
         @media (max-width: $phone-mid) {
             a {
                 margin-right: 5%;
@@ -228,12 +228,12 @@ footer {
 }
 
 footer {
-    
+
     a,
     p {
         text-align: center;
     }
-    
+
     a:link,
     a:visited {
         color: $color-white;
@@ -289,7 +289,7 @@ footer {
 //**************************************************
 
 footer {
-    
+
     .social-media {
         list-style-type: none;
     }
diff --git a/static/css/sass/_genericClasses.scss b/static/css/sass/_genericClasses.scss
index a3145500a0738bddfc3089c5af13cee5bd59c17e..b16e1e0fab3e122de47db9daa542fe768884b91a 100644
--- a/static/css/sass/_genericClasses.scss
+++ b/static/css/sass/_genericClasses.scss
@@ -11,6 +11,57 @@
 // To be loaded with _variables.scss before any standard file.
 
 
+@mixin display-flex {
+    display: -webkit-flex;
+    display: flex;
+}
+
+@mixin flex-direction($value) {
+    -webkit-flex-direction: $value;
+    flex-direction: $value;
+}
+
+@mixin flex-grow($value) {
+    -webkit-flex-grow: $value;
+    flex-grow: $value;
+}
+
+@mixin order($value) {
+    -webkit-order: $value;
+    order: $value;
+}
+
+@mixin justify-content($value) {
+    -webkit-justify-content: $value;
+    justify-content: $value;
+}
+
+@mixin align-content($value) {
+    -webkit-align-content: $value;
+    align-content: $value;
+}
+
+@mixin flex-wrap($value) {
+    -webkit-flex-wrap: $value;
+    flex-wrap: $value;
+}
+
+@mixin align-items($value) {
+    -webkit-align-items: $value;
+    align-items: $value;
+}
+
+@mixin flex-basis($value) {
+    -webkit-flex-basis: $value;
+    flex-basis: $value;
+}
+
+@mixin align-self($value) {
+    -webkit-align-self: $value;
+    align-self: $value;
+}
+
+
 //****************************************************************************************************
 //****************************************************************************************************
 //***************************************Reusable Generic Classes*************************************
@@ -31,9 +82,9 @@
 
 // Center flex content.
 %flex-center {
-    display: flex;              // Display as flex.
-    justify-content: center;    // Main axis alignment.
-    align-items: center;        // Cross axis alignment.
+    @include display-flex;              // Display as flex.
+    @include justify-content(center);    // Main axis alignment.
+    @include align-items(center);        // Cross axis alignment.
 }
 
 %nav-img-size {
diff --git a/static/css/sass/_nav.scss b/static/css/sass/_nav.scss
index e9071cdcaac72612407ce6ea44f1b7a11768c998..a9ed135c6de9a7cbf486d9d4365ce1b94047184d 100644
--- a/static/css/sass/_nav.scss
+++ b/static/css/sass/_nav.scss
@@ -85,73 +85,73 @@ nav {
 // Set to centered vert flexbox.
 #header-nav {
     position: relative;
-    display: flex;
-    flex-direction: column;
+    @include display-flex;
+    @include flex-direction(column);
 }
 
 #header-nav {
     .nav-wrapper {
-        order: 1;
+        @include order(1);
     }
 
     .nav-other {
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
-        order: 0;
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
+        @include order(0);
     }
 
     .nav-other {
-        
+
         @media (max-width: $phone-mid) {
-            flex-wrap: wrap;
-            justify-content: space-around;
+            @include flex-wrap(wrap);
+            @include justify-content(space-around);
         }
-        
+
         header {
-            display: flex;              // Display as flex.
-            justify-content: center;    // Main axis alignment.
-            align-items: center;        // Cross axis alignment.
-            flex-grow: 9;
-            flex-basis: 10%;
-            order: 2;
-            
+            @include display-flex;              // Display as flex.
+            @include justify-content(center);    // Main axis alignment.
+            @include align-items(center);        // Cross axis alignment.
+            @include flex-grow(9);
+            @include flex-basis(10%);
+            @include order(2);
+
             @media (max-width: $phone-mid) {
-                order: 3;
-                flex-basis: 100%;
+                @include order(3);
+                @include flex-basis(100%);
             }
         }
 
         .nav-logo-wrapper {
-            order: 1;
-            
+            @include order(1);
+
             @media (max-width: $phone-mid) {
-                order: 1;
+                @include order(1);
             }
         }
 
         .nav-form-wrapper {
             display: none;  // temporarily hide.
-            flex-grow: 1;
-            flex-basis: 10%;
-            order: 3;
+            @include flex-grow(1);
+            @include flex-basis(10%);
+            @include order(3);
         }
 
         .mobile-nav-icon-wrapper {
-            order: 3;
+            @include order(3);
 
             @media (max-width: $laptop-min) {
                 padding: 10px;
             }
-            
+
             @media (max-width: $phone-mid) {
-                order: 2;
+                @include order(2);
             }
         }
 
         .nav-tourn-dates {
-            order: 4;
-            flex-grow: 1;
+            @include order(4);
+            @include flex-grow(1);
         }
     }
 }
@@ -171,22 +171,22 @@ nav {
     // Set to centered horiz flexbox with equal spacing between items.
     .nav-main-menu {
         position: relative;
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
-        flex-grow: 1;
-        align-content: space-around;    // Handling of extra space.
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
+        @include flex-grow(1);
+        @include align-content(space-around);    // Handling of extra space.
     }
 
     // Set to have equal spacing for li link elements.
     .nav-link {
         position: relative;
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
-        flex-grow: 1.5;
-        flex-basis: 75px;
-        align-content: space-around;    // Handling of extra space.
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
+        @include flex-grow(1.5);
+        @include flex-basis(75px);
+        @include align-content(space-around);    // Handling of extra space.
     }
 
     // Set to hide submenus initially and align properly when shown.
@@ -195,33 +195,33 @@ nav {
         display: none;
         top: 50px;
         left: 0;
-        flex-direction: column;
-        justify-content: center;        // Main axis alignment.
-        align-items: center;            // Cross axis alignment.
-        align-content: space-around;    // Handling of extra space.
+        @include flex-direction(column);
+        @include justify-content(center);        // Main axis alignment.
+        @include align-items(center);            // Cross axis alignment.
+        @include align-content(space-around);    // Handling of extra space.
     }
 
     // Show submenus on hover.
     .nav-main-menu li:hover > ul {
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
     }
 
     .nav-sublink {
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
-        flex-grow: 1;
-        flex-basis: 50px;
-        align-content: space-around;    // Handling of extra space.
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
+        @include flex-grow(1);
+        @include flex-basis(50px);
+        @include align-content(space-around);    // Handling of extra space.
     }
 
     a {
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
-        flex-wrap: wrap;
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
+        @include flex-wrap(wrap);
     }
 
     // Hide icons on horizontal.
@@ -253,42 +253,42 @@ nav {
 
     .nav-main-menu {
         display: block;
-        flex-direction: column;
-        flex-grow: 1;
+        @include flex-direction(column);
+        @include flex-grow(1);
     }
 
     .nav-link {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
+        @include display-flex;
+        @include flex-direction(column);
+        @include flex-grow(1);
     }
 
     .nav-link a {
-        justify-content: flex-start;
+        @include justify-content(flex-start);
     }
 
     // Set to hide submenus initially.
     .nav-sub-menu {
         display: none;
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
-        flex-wrap: wrap;
-        flex-grow: 1;
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
+        @include flex-wrap(wrap);
+        @include flex-grow(1);
     }
 
     .nav-sublink {
-        flex-grow: 1;
+        @include flex-grow(1);
     }
 
     .nav-sublink a {
-        justify-content: center;
+        @include justify-content(center);
     }
 
     a {
-        display: flex;              // Display as flex.
-        justify-content: center;    // Main axis alignment.
-        align-items: center;        // Cross axis alignment.
-        flex-wrap: wrap;
+        @include display-flex;              // Display as flex.
+        @include justify-content(center);    // Main axis alignment.
+        @include align-items(center);        // Cross axis alignment.
+        @include flex-wrap(wrap);
     }
 }
 
@@ -366,25 +366,25 @@ footer {
 .mytabs {
 
     #menu {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
+        @include display-flex;
+        @include flex-wrap(wrap);
+        @include justify-content(center);
     }
 
     #menu li {
-        display: flex;
-        flex-grow: 1;
-        flex-wrap: wrap;
-        flex-basis: 200px;
-        justify-content: center;
+        @include display-flex;
+        @include flex-grow(1);
+        @include flex-wrap(wrap);
+        @include flex-basis(200px);
+        @include justify-content(center);
     }
 
     #menu li a {
-        display: flex;
-        flex-wrap: wrap;
-        flex-grow: 1;
-        flex-basis: 200px;
-        justify-content: center;
+        @include display-flex;
+        @include flex-wrap(wrap);
+        @include flex-grow(1);
+        @include flex-basis(200px);
+        @include justify-content(center);
     }
 }
 
@@ -433,22 +433,22 @@ nav {
 #header-nav {
 
     .nav-other {
-        
+
         header {
             padding: 0;
             margin: 0;
             margin-bottom: 10px;
         }
-        
+
         .nav-logo-wrapper {
-        
+
             @media (max-width: $phone-mid) {
                 max-width: 60%;
             }
         }
-        
+
         .mobile-nav-icon-wrapper {
-        
+
             @media (max-width: $phone-mid) {
                 max-width: 35%;
             }
diff --git a/static/css/sass/usta.scss b/static/css/sass/usta.scss
index 4b1d0cf848536b47a92f1c5c8ec0e814d13577a9..b0d733115c56c8ce141250a857c65bc9fcb8c3a3 100644
--- a/static/css/sass/usta.scss
+++ b/static/css/sass/usta.scss
@@ -115,6 +115,7 @@
 
 // Class for displaying as flex. Mostly for Javascript purposes.
 .display-flex {
+    display: -webkit-flex !important;
     display: flex !important;
 }
 
diff --git a/static/css/sass/usta_admin.scss b/static/css/sass/usta_admin.scss
index bfd4e332273937b58b81431ea62784bddc0901c3..ba814820fdade8482da0e3723c642b5eb5712715 100644
--- a/static/css/sass/usta_admin.scss
+++ b/static/css/sass/usta_admin.scss
@@ -7,21 +7,22 @@
 
 // Import statements
 @import '_variables';
+@import '_genericClasses';
 
 
 
 // Change admin header so that user info (normally on right side) doesn't dissapear on smaller screens.
 
 #header {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+    @include display-flex;
+    @include flex-wrap(wrap);
+    @include justify-content(space-between);
 
     height: auto;
     min-height: 40px;
 
     @media (max-width: 1006px) {
-        justify-content: flex-start;
+        @include justify-content(flex-start);
     }
 }
 
diff --git a/static/css/usta.css b/static/css/usta.css
index 445b89ba1cd5383347dee7e8646afaf6bbb04cef..cd535cb0b31182c6a2bc8bff6a8103718e590488 100644
--- a/static/css/usta.css
+++ b/static/css/usta.css
@@ -57,6 +57,7 @@ nav img {
   display: inline-block !important; }
 
 .display-flex {
+  display: -webkit-flex !important;
   display: flex !important; }
 
 .display-none {
@@ -189,14 +190,18 @@ body {
 #site-wrapper {
   position: relative;
   z-index: 1;
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: column;
   flex-direction: column;
   min-height: 100vh; }
 
 #body-wrapper {
   position: relative;
   z-index: 10;
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
 
 main {
@@ -442,92 +447,146 @@ nav ul ul li a {
 
 #header-nav {
   position: relative;
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: column;
   flex-direction: column; }
 
 #header-nav .nav-wrapper {
+  -webkit-order: 1;
   order: 1; }
 #header-nav .nav-other {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-order: 0;
   order: 0; }
 @media (max-width: 550px) {
   #header-nav .nav-other {
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
+    -webkit-justify-content: space-around;
     justify-content: space-around; } }
 #header-nav .nav-other header {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-grow: 9;
   flex-grow: 9;
+  -webkit-flex-basis: 10%;
   flex-basis: 10%;
+  -webkit-order: 2;
   order: 2; }
   @media (max-width: 550px) {
     #header-nav .nav-other header {
+      -webkit-order: 3;
       order: 3;
+      -webkit-flex-basis: 100%;
       flex-basis: 100%; } }
 #header-nav .nav-other .nav-logo-wrapper {
+  -webkit-order: 1;
   order: 1; }
   @media (max-width: 550px) {
     #header-nav .nav-other .nav-logo-wrapper {
+      -webkit-order: 1;
       order: 1; } }
 #header-nav .nav-other .nav-form-wrapper {
   display: none;
+  -webkit-flex-grow: 1;
   flex-grow: 1;
+  -webkit-flex-basis: 10%;
   flex-basis: 10%;
+  -webkit-order: 3;
   order: 3; }
 #header-nav .nav-other .mobile-nav-icon-wrapper {
+  -webkit-order: 3;
   order: 3; }
   @media (max-width: 1024px) {
     #header-nav .nav-other .mobile-nav-icon-wrapper {
       padding: 10px; } }
   @media (max-width: 550px) {
     #header-nav .nav-other .mobile-nav-icon-wrapper {
+      -webkit-order: 2;
       order: 2; } }
 #header-nav .nav-other .nav-tourn-dates {
+  -webkit-order: 4;
   order: 4;
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
 
 .horiz-nav .nav-main-menu {
   position: relative;
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-grow: 1;
   flex-grow: 1;
+  -webkit-align-content: space-around;
   align-content: space-around; }
 .horiz-nav .nav-link {
   position: relative;
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-grow: 1.5;
   flex-grow: 1.5;
+  -webkit-flex-basis: 75px;
   flex-basis: 75px;
+  -webkit-align-content: space-around;
   align-content: space-around; }
 .horiz-nav .nav-sub-menu {
   position: absolute;
   display: none;
   top: 50px;
   left: 0;
+  -webkit-flex-direction: column;
   flex-direction: column;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-align-content: space-around;
   align-content: space-around; }
 .horiz-nav .nav-main-menu li:hover > ul {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center; }
 .horiz-nav .nav-sublink {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-grow: 1;
   flex-grow: 1;
+  -webkit-flex-basis: 50px;
   flex-basis: 50px;
+  -webkit-align-content: space-around;
   align-content: space-around; }
 .horiz-nav a {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap; }
 .horiz-nav img {
   display: none; }
@@ -539,28 +598,44 @@ nav ul ul li a {
 
 .vert-nav .nav-main-menu {
   display: block;
+  -webkit-flex-direction: column;
   flex-direction: column;
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
 .vert-nav .nav-link {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: column;
   flex-direction: column;
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
 .vert-nav .nav-link a {
+  -webkit-justify-content: flex-start;
   justify-content: flex-start; }
 .vert-nav .nav-sub-menu {
   display: none;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
 .vert-nav .nav-sublink {
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
 .vert-nav .nav-sublink a {
+  -webkit-justify-content: center;
   justify-content: center; }
 .vert-nav a {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap; }
 
 .mobile-nav-icon-wrapper {
@@ -587,20 +662,33 @@ footer .nav-wrapper .nav-sub-menu {
   display: none; }
 
 .mytabs #menu {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-justify-content: center;
   justify-content: center; }
 .mytabs #menu li {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-grow: 1;
   flex-grow: 1;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-flex-basis: 200px;
   flex-basis: 200px;
+  -webkit-justify-content: center;
   justify-content: center; }
 .mytabs #menu li a {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-flex-grow: 1;
   flex-grow: 1;
+  -webkit-flex-basis: 200px;
   flex-basis: 200px;
+  -webkit-justify-content: center;
   justify-content: center; }
 
 .nav-main-menu {
@@ -830,9 +918,13 @@ nav img {
 #banner-wrapper {
   position: relative;
   z-index: 5;
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: column;
   flex-direction: column;
+  -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-align-items: center;
   align-items: center; }
 
 .banner-image {
@@ -856,21 +948,27 @@ nav img {
 #banner-text {
   position: absolute;
   z-index: 6;
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: column;
   flex-direction: column;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center; }
 
 #banner-index-list {
   position: absolute;
   bottom: 0;
   left: 0;
+  display: -webkit-flex;
   display: flex;
   width: 100%; }
 
 #banner-index-list li {
   display: inline-block;
   height: 2px;
+  -webkit-flex-grow: 1;
   flex-grow: 1;
   background-color: #000; }
 
@@ -918,7 +1016,9 @@ nav img {
   position: absolute;
   top: 105px;
   left: 0;
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: space-between;
   justify-content: space-between; }
 #banner-wrapper .arrow-container {
   position: relative;
@@ -1056,47 +1156,72 @@ nav img {
 footer {
   position: relative;
   z-index: 30;
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-direction: column;
   flex-direction: column; }
 
 footer .link-div {
   position: relative;
+  display: -webkit-flex;
   display: flex;
   z-index: 31;
+  -webkit-justify-content: space-between;
   justify-content: space-between;
+  -webkit-align-items: center;
   align-items: center; }
 footer .sitemap-toggle {
   z-index: 32;
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center; }
 footer .sitemap-toggle a {
   z-index: 33;
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center; }
 
 footer .social-media {
   z-index: 32;
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center; }
 footer .social-media li {
   z-index: 33;
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center; }
 footer .social-media a {
   z-index: 33;
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center; }
 footer .social-media img {
   z-index: 33;
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center; }
 @media (max-width: 550px) {
   footer .social-media p {
@@ -1214,14 +1339,19 @@ nav img {
     padding-bottom: 30px; } }
 
 .form-field-div {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-direction: column;
   flex-direction: column; }
 
 .form-field-label,
 .form-field-singleline,
 .form-field-label-singleline {
+  -webkit-align-self: flex-start;
   align-self: flex-start; }
 
 table {
@@ -1311,17 +1441,24 @@ nav img {
     padding-bottom: 30px; } }
 
 #draws-page .round-container {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: row;
   flex-direction: row; }
 #draws-page .round {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: column;
   flex-direction: column; }
   #draws-page .round .spacer {
+    -webkit-flex-grow: 1;
     flex-grow: 1; }
   #draws-page .round .spacer:first-child,
   #draws-page .round .spacer:last-child {
-    flex-grow: .5; }
+    -webkit-flex-grow: 0.5;
+    flex-grow: 0.5; }
   #draws-page .round .game-spacer {
+    -webkit-flex-grow: 1;
     flex-grow: 1; }
 #draws-page .round-names li {
   display: inline-block; }
@@ -1364,6 +1501,7 @@ nav img {
 #draws-page .round-container {
   font-size: .9em; }
 #draws-page .round {
+  -webkit-justify-content: center;
   justify-content: center; }
 
 #draws-page li.game {
@@ -1439,8 +1577,11 @@ nav img {
   width: 100%; }
 
 .days-until-container {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: column;
   flex-direction: column;
+  -webkit-justify-content: center;
   justify-content: center;
   border: 1px solid #CCC;
   border-radius: 10px;
@@ -1467,50 +1608,61 @@ nav img {
   margin-bottom: 10px; }
 
 #front-page-left-center-doc {
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
 
 #front-page-left-center {
+  display: -webkit-flex;
   display: flex; }
   @media (max-width: 1023px) {
     #front-page-left-center {
+      -webkit-flex-wrap: wrap;
       flex-wrap: wrap; } }
   @media (max-width: 767px) {
     #front-page-left-center {
       display: initial; } }
 
 #front-page-columns {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center; }
   @media (max-width: 1023px) {
     #front-page-columns {
+      -webkit-flex-wrap: wrap;
       flex-wrap: wrap;
       display: block; } }
 
 #front-page-left {
   text-align: center;
-  /*display: flex;              // Display as flex.
-  align-items: center;        // Cross axis alignment.
-  flex-direction: column; */ }
+  /*@include display-flex;              // Display as flex.
+  @include align-items(center);        // Cross axis alignment.
+  @include flex-direction(column); */ }
   @media (max-width: 1023px) {
     #front-page-left {
+      -webkit-order: 1;
       order: 1; } }
   @media (max-width: 767px) {
     #front-page-left h2 {
       display: none; } }
 
 #front-page-center {
+  display: -webkit-flex;
   display: flex;
-  /*justify-content: center;*/
+  /*@include justify-content(center);*/
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
   @media (max-width: 1023px) {
     #front-page-center {
+      -webkit-order: 3;
       order: 3; } }
 
 #front-page-right {
-  /*display: flex;              // Display as flex.
-  justify-content: center;    // Main axis alignment.*/ }
+  /*@include display-flex;              // Display as flex.
+  @include justify-content(center);    // Main axis alignment.*/ }
   @media (max-width: 1023px) {
     #front-page-right {
+      -webkit-order: 2;
       order: 2;
       margin-left: auto;
       margin-right: auto; } }
@@ -1691,27 +1843,37 @@ nav img {
     padding-bottom: 30px; } }
 
 #article-main {
+  display: -webkit-flex;
   display: flex; }
   @media (max-width: 767px) {
     #article-main {
+      -webkit-flex-wrap: wrap;
       flex-wrap: wrap; } }
 
 #article-container {
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
 
 #news-summaries {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-align-content: flex-start;
   align-content: flex-start; }
 
 .news-summary,
 .news-summary-spacer {
   position: relative;
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: column;
   flex-direction: column; }
 
 .news-summary .news-content {
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
 .news-summary .placeholder {
   position: absolute;
@@ -1734,18 +1896,23 @@ nav img {
   float: left; }
 
 #date-nav {
+  display: -webkit-flex;
   display: flex; }
 
 #date-nav .stretch {
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
 #date-nav a {
   display: block;
+  -webkit-flex-basis: 0;
   flex-basis: 0; }
 #date-nav .empty,
 #date-nav a {
+  -webkit-flex-grow: 1;
   flex-grow: 1; }
 #date-nav .date-current {
   display: block;
+  -webkit-align-self: center;
   align-self: center; }
   @media (max-width: 550px) {
     #date-nav .date-current {
@@ -1753,6 +1920,7 @@ nav img {
 
 .date-nav-current {
   display: none;
+  -webkit-align-self: center;
   align-self: center; }
   @media (max-width: 550px) {
     .date-nav-current {
@@ -1761,9 +1929,12 @@ nav img {
 @media (max-width: 767px) {
   .news-list,
   .potd-list {
+    display: -webkit-flex;
     display: flex;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
     overflow: auto;
+    -webkit-justify-content: center;
     justify-content: center; } }
 .news-list a,
 .potd-list a {
@@ -1771,30 +1942,46 @@ nav img {
 
 @media (max-width: 767px) {
   #drilldown {
+    display: -webkit-flex;
     display: flex;
+    -webkit-flex-grow: 1;
     flex-grow: 1;
     overflow: auto;
     overflow-y: auto !important; }
 
   #drilldown .news-list {
+    -webkit-justify-content: center;
     justify-content: center;
+    -webkit-align-items: center;
     align-items: center; }
   #drilldown .news-list li {
+    display: -webkit-flex;
     display: flex;
+    -webkit-flex-grow: 1;
     flex-grow: 1; }
     #drilldown .news-list li ol {
+      -webkit-flex-grow: 1;
       flex-grow: 1; }
       #drilldown .news-list li ol li {
+        -webkit-justify-content: center;
         justify-content: center;
+        -webkit-align-items: center;
         align-items: center;
+        -webkit-flex-direction: row;
         flex-direction: row;
+        -webkit-flex-grow: 0;
         flex-grow: 0; }
       #drilldown .news-list li ol a {
+        display: -webkit-flex;
         display: flex;
+        -webkit-justify-content: center;
         justify-content: center;
+        -webkit-align-items: center;
         align-items: center; }
   #drilldown li ol {
+    display: -webkit-flex;
     display: flex;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap; } }
 .news-summary,
 .news-summary-spacer {
@@ -2075,39 +2262,59 @@ nav img {
     padding-bottom: 30px; } }
 
 #player-list form {
+  -webkit-flex-direction: row;
   flex-direction: row;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap; }
 #player-list .sort-div {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-direction: column;
   flex-direction: column; }
 #player-list .sort-div .field-group {
   display: inline-block; }
 #player-list .sort-div .field-group div {
   display: inline-block; }
 #player-list .player-div ul {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap; }
   #player-list .player-div ul li:not(.seed) {
+    display: -webkit-flex;
     display: flex;
+    -webkit-justify-content: center;
     justify-content: center;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-flex-grow: 1;
     flex-grow: 1; }
     @media (max-width: 767px) {
       #player-list .player-div ul li:not(.seed) {
+        -webkit-flex-basis: 200px;
         flex-basis: 200px; } }
     @media (min-width: 768px) and (max-width: 1023px) {
       #player-list .player-div ul li:not(.seed) {
+        -webkit-flex-basis: 250px;
         flex-basis: 250px; } }
     @media (min-width: 1024px) {
       #player-list .player-div ul li:not(.seed) {
+        -webkit-flex-basis: 300px;
         flex-basis: 300px; } }
     #player-list .player-div ul li:not(.seed) a {
+      display: -webkit-flex;
       display: flex;
+      -webkit-justify-content: center;
       justify-content: center;
+      -webkit-align-items: center;
       align-items: center; }
 
 #player-list .sort-div {
@@ -2259,33 +2466,52 @@ nav img {
     padding-bottom: 30px; } }
 
 .company-list {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-direction: column;
   flex-direction: column;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap; }
   @media (min-width: 550px) {
     .company-list {
+      -webkit-flex-direction: row;
       flex-direction: row; } }
 
 .company-list li {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center;
+  -webkit-flex-grow: 1;
   flex-grow: 1;
+  -webkit-flex-basis: 100px;
   flex-basis: 100px; }
   @media (min-width: 1024px) {
     .company-list li {
+      -webkit-flex-basis: 150px;
       flex-basis: 150px; } }
 .company-list a {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center; }
 .company-list img {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center; }
 .company-list p {
+  display: -webkit-flex;
   display: flex;
+  -webkit-justify-content: center;
   justify-content: center;
+  -webkit-align-items: center;
   align-items: center; }
 
 .company-list {
diff --git a/static/css/usta_admin.css b/static/css/usta_admin.css
index 4a78ef1ee8bc55ef6c454b4dfdec801205e7c254..5e2270990ad720fbe17c1935971f75d3790fa79b 100644
--- a/static/css/usta_admin.css
+++ b/static/css/usta_admin.css
@@ -1,11 +1,15 @@
 #header {
+  display: -webkit-flex;
   display: flex;
+  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
+  -webkit-justify-content: space-between;
   justify-content: space-between;
   height: auto;
   min-height: 40px; }
   @media (max-width: 1006px) {
     #header {
+      -webkit-justify-content: flex-start;
       justify-content: flex-start; } }
 
 #header #site-name a {