wp/wp-admin/css/about-rtl.css
changeset 9 177826044cd9
parent 7 cf61fcea0001
child 16 a86126ab1dd4
equal deleted inserted replaced
8:c7c34916027a 9:177826044cd9
     6     1.2 Structure
     6     1.2 Structure
     7     1.3 Point Releases
     7     1.3 Point Releases
     8    2.0 About Page
     8    2.0 About Page
     9     2.1 Typography
     9     2.1 Typography
    10     2.2 Structure
    10     2.2 Structure
    11     2.3 Floating Header Layout
       
    12    3.0 Credits & Freedoms Pages
    11    3.0 Credits & Freedoms Pages
    13 ------------------------------------------------------------------------------*/
    12 ------------------------------------------------------------------------------*/
    14 
    13 
    15 /*------------------------------------------------------------------------------
    14 /*------------------------------------------------------------------------------
    16   1.0 - Global: About, Credits, Freedoms
    15   1.0 - Global: About, Credits, Freedoms
    38 }
    37 }
    39 
    38 
    40 .about-wrap hr {
    39 .about-wrap hr {
    41 	border: 0;
    40 	border: 0;
    42 	height: 0;
    41 	height: 0;
    43 	margin: 0;
    42 	margin: 3em 0 0;
    44 	border-top: 1px solid rgba(0, 0, 0, 0.1);
    43 	border-top: 1px solid rgba(0, 0, 0, 0.1);
    45 }
    44 }
    46 
    45 
    47 .about-wrap img {
    46 .about-wrap img {
    48 	margin: 0;
    47 	margin: 0;
    49 	max-width: 100%;
    48 	width: 100%;
    50 	height: auto;
    49 	height: auto;
    51 	vertical-align: middle;
    50 	vertical-align: middle;
    52 }
    51 }
    53 
    52 
    54 .about-wrap .jetpack-video-wrapper {
    53 .about-wrap .inline-svg img {
    55 	margin-bottom: 0;
    54 	max-width: 100%;
       
    55 	width: auto;
       
    56 	height: auto;
       
    57 }
       
    58 
       
    59 .about-wrap video {
       
    60 	margin: 1.5em auto;
    56 }
    61 }
    57 
    62 
    58 /* WordPress Version Badge */
    63 /* WordPress Version Badge */
    59 
    64 
    60 .wp-badge {
    65 .wp-badge {
    69 	padding-top: 120px;
    74 	padding-top: 120px;
    70 	height: 40px;
    75 	height: 40px;
    71 	display: inline-block;
    76 	display: inline-block;
    72 	width: 140px;
    77 	width: 140px;
    73 	text-rendering: optimizeLegibility;
    78 	text-rendering: optimizeLegibility;
    74 	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    79 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    75 }
    80 }
    76 
    81 
    77 .svg .wp-badge {
    82 .svg .wp-badge {
    78 	background-image: url(../images/wordpress-logo-white.svg?ver=20160308);
    83 	background-image: url(../images/wordpress-logo-white.svg?ver=20160308);
    79 }
    84 }
    88 
    93 
    89 .about-wrap .nav-tab {
    94 .about-wrap .nav-tab {
    90 	padding-left: 15px;
    95 	padding-left: 15px;
    91 	padding-right: 15px;
    96 	padding-right: 15px;
    92 	font-size: 18px;
    97 	font-size: 18px;
       
    98 	line-height: 1.33333333;
    93 }
    99 }
    94 
   100 
    95 /* 1.1 - Typography */
   101 /* 1.1 - Typography */
    96 
       
    97 .about-wrap p {
       
    98 	line-height: 1.5;
       
    99 	font-size: 14px;
       
   100 }
       
   101 
       
   102 .about-wrap .feature-section p {
       
   103 	max-width: 55em;
       
   104 	margin-right: auto;
       
   105 	margin-left: auto;
       
   106 }
       
   107 
   102 
   108 .about-wrap h1 {
   103 .about-wrap h1 {
   109 	margin: 0.2em 0 0 200px;
   104 	margin: 0.2em 0 0 200px;
   110 	padding: 0;
   105 	padding: 0;
   111 	color: #32373c;
   106 	color: #32373c;
   112 	line-height: 1.2em;
   107 	line-height: 1.2;
   113 	font-size: 2.8em;
   108 	font-size: 2.8em;
   114 	font-weight: 400;
   109 	font-weight: 400;
   115 }
   110 }
   116 
   111 
   117 .about-wrap h2 {
   112 .about-wrap h2 {
   127 	font-size: 1.4em;
   122 	font-size: 1.4em;
   128 	line-height: 1.5;
   123 	line-height: 1.5;
   129 }
   124 }
   130 
   125 
   131 .about-wrap h4 {
   126 .about-wrap h4 {
       
   127 	font-size: 16px;
   132 	color: #23282d;
   128 	color: #23282d;
   133 }
   129 }
   134 
   130 
   135 .about-wrap .changelog h2 {
   131 .about-wrap p {
   136 	font-size: 1.4em;
   132 	line-height: 1.5;
   137 	font-weight: 600;
   133 	font-size: 16px;
   138 	text-align: right;
       
   139 }
       
   140 
       
   141 .about-wrap .changelog h3 {
       
   142 	margin: 1.33em 0;
       
   143 	font-size: 1em;
       
   144 	line-height: inherit;
       
   145 	color: #23282d;
       
   146 }
   134 }
   147 
   135 
   148 .about-wrap code,
   136 .about-wrap code,
   149 .about-wrap ol li p {
   137 .about-wrap ol li p {
   150 	font-size: 14px;
   138 	font-size: 14px;
   151 	font-weight: 400;
   139 	font-weight: 400;
   152 }
   140 }
   153 
   141 
       
   142 .about-wrap figcaption {
       
   143 	font-size: 13px;
       
   144 	text-align: center;
       
   145 	color: white;
       
   146 	text-overflow: ellipsis;
       
   147 }
       
   148 
   154 .about-wrap .about-description,
   149 .about-wrap .about-description,
   155 .about-wrap .about-text {
   150 .about-wrap .about-text {
   156 	margin-top: 1.4em;
   151 	margin-top: 1.4em;
   157 	font-weight: 400;
   152 	font-weight: 400;
   158 	line-height: 1.6em;
   153 	line-height: 1.6;
   159 	font-size: 19px;
   154 	font-size: 19px;
   160 }
   155 }
   161 
   156 
   162 .about-wrap .about-text {
   157 .about-wrap .about-text {
   163 	margin: 1em 0 1em 200px;
   158 	margin: 1em 0 1em 200px;
   164 	min-height: 60px;
       
   165 	color: #555d66;
   159 	color: #555d66;
   166 }
   160 }
   167 
   161 
   168 /* 1.2 - Structure */
   162 /* 1.2 - Structure */
   169 
   163 
   170 .about-wrap [class$="-col"] {
   164 .about-wrap .has-1-columns,
   171 	display: -webkit-box;
   165 .about-wrap .has-2-columns,
   172 	display: flex;
   166 .about-wrap .has-3-columns,
   173 	-webkit-box-pack: justify;
   167 .about-wrap .has-4-columns {
   174 	justify-content: space-between;
   168 	display: -ms-grid;
   175 	flex-wrap: wrap;
   169 	display: grid;
   176 }
   170 	max-width: 800px;
   177 
   171 	margin-top: 40px;
   178 .about-wrap .feature-section.one-col {
   172 	margin-right: auto;
   179 	margin: 0 auto;
   173 	margin-left: auto;
   180 	max-width: 700px;
   174 }
   181 }
   175 
   182 
   176 .about-wrap .column {
   183 .about-wrap .inline-svg img {
   177 	margin-left: 20px;
       
   178 	margin-right: 20px;
       
   179 }
       
   180 
       
   181 .about-wrap .is-wide {
       
   182 	max-width: 760px;
       
   183 }
       
   184 
       
   185 .about-wrap .is-fullwidth {
   184 	max-width: 100%;
   186 	max-width: 100%;
   185 	width: 100%;
   187 }
   186 	height: auto;
   188 
   187 }
   189 .about-wrap .has-1-columns {
   188 
   190 	display: block;
   189 .about-wrap .inline-svg.full-width {
   191 	max-width: 680px;
   190 	margin-bottom: 120px;
   192 	margin: 0 auto 40px;
   191 }
   193 }
   192 
   194 
   193 .about-wrap [class$="-col"] .col {
   195 .about-wrap .has-2-columns {
   194 	-webkit-box-flex: 1;
   196 	-ms-grid-columns: 1fr 1fr;
   195 	flex: 1;
   197 	grid-template-columns: 1fr 1fr;
   196 }
   198 }
   197 
   199 
   198 .about-wrap .two-col .col {
   200 .about-wrap .has-2-columns .column:nth-of-type(2n+1) {
   199 	min-width: 47%;
   201 	-ms-grid-column: 1;
   200 	max-width: 47%;
   202 	grid-column-start: 1;
   201 }
   203 }
   202 
   204 
   203 .about-wrap .three-col .col {
   205 .about-wrap .has-2-columns .column:nth-of-type(2n) {
   204 	-webkit-align-self: flex-start;
   206 	-ms-grid-column: 2;
   205 	align-self: flex-start;
   207 	grid-column-start: 2;
   206 	min-width: 31%;
   208 }
   207 	max-width: 31%;
   209 
   208 }
   210 .about-wrap .has-2-columns.is-wider-right {
   209 
   211 	-ms-grid-columns: 1fr 2fr;
   210 .about-wrap .two-col img {
   212 	grid-template-columns: 1fr 2fr;
   211 	margin-bottom: 1.5em;
   213 }
   212 }
   214 
   213 
   215 .about-wrap .has-2-columns.is-wider-left {
   214 .about-wrap .feature-video .mejs-controls {
   216 	-ms-grid-columns: 2fr 1fr;
   215 	display: none !important;
   217 	grid-template-columns: 2fr 1fr;
   216 }
   218 }
   217 
   219 
   218 .about-wrap .feature-video .mejs-overlay-loading span {
   220 .about-wrap .has-3-columns {
   219 	background: transparent; /* Hide loading.gif */
   221 	-ms-grid-columns: (1fr)[3];
       
   222 	grid-template-columns: repeat(3, 1fr);
       
   223 }
       
   224 
       
   225 .about-wrap .has-3-columns .column:nth-of-type(3n+1) {
       
   226 	-ms-grid-column: 1;
       
   227 	grid-column-start: 1;
       
   228 }
       
   229 
       
   230 .about-wrap .has-3-columns .column:nth-of-type(3n+2) {
       
   231 	-ms-grid-column: 2;
       
   232 	grid-column-start: 2;
       
   233 }
       
   234 
       
   235 .about-wrap .has-3-columns .column:nth-of-type(3n) {
       
   236 	-ms-grid-column: 3;
       
   237 	grid-column-start: 3;
       
   238 }
       
   239 
       
   240 .about-wrap .has-4-columns {
       
   241 	-ms-grid-columns: (1fr)[4];
       
   242 	grid-template-columns: repeat(4, 1fr);
       
   243 }
       
   244 
       
   245 .about-wrap .has-4-columns .column:nth-of-type(4n+1) {
       
   246 	-ms-grid-column: 1;
       
   247 	grid-column-start: 1;
       
   248 }
       
   249 
       
   250 .about-wrap .has-4-columns .column:nth-of-type(4n+2) {
       
   251 	-ms-grid-column: 2;
       
   252 	grid-column-start: 2;
       
   253 }
       
   254 
       
   255 .about-wrap .has-4-columns .column:nth-of-type(4n+3) {
       
   256 	-ms-grid-column: 3;
       
   257 	grid-column-start: 3;
       
   258 }
       
   259 
       
   260 .about-wrap .has-4-columns .column:nth-of-type(4n) {
       
   261 	-ms-grid-column: 4;
       
   262 	grid-column-start: 4;
       
   263 }
       
   264 
       
   265 .about-wrap .column :first-child {
       
   266 	margin-top: 0;
       
   267 }
       
   268 
       
   269 .about-wrap .aligncenter {
       
   270 	text-align: center;
       
   271 }
       
   272 
       
   273 .about-wrap .alignleft {
       
   274 	float: right;
       
   275 	margin-left: 40px;
       
   276 }
       
   277 
       
   278 .about-wrap .alignright {
       
   279 	float: left;
       
   280 	margin-right: 40px;
       
   281 }
       
   282 
       
   283 .about-wrap .is-vertically-aligned-top {
       
   284 	align-self: start;
       
   285 }
       
   286 
       
   287 .about-wrap .is-vertically-aligned-center {
       
   288 	align-self: center;
       
   289 }
       
   290 
       
   291 .about-wrap .is-vertically-aligned-bottom {
       
   292 	align-self: end;
   220 }
   293 }
   221 
   294 
   222 /* 1.3 - Point Releases */
   295 /* 1.3 - Point Releases */
   223 
   296 
   224 .about-wrap .point-releases {
   297 .about-wrap .point-releases {
   225 	margin-top: 5px;
   298 	margin-top: 5px;
   226 	border-bottom: 1px solid #ddd;
   299 	border-bottom: 1px solid #ddd;
   227 }
   300 }
   228 
   301 
       
   302 .about-wrap .changelog {
       
   303 	margin-bottom: 40px;
       
   304 }
       
   305 
   229 .about-wrap .changelog.point-releases h3 {
   306 .about-wrap .changelog.point-releases h3 {
   230 	padding-top: 35px;
   307 	padding-top: 35px;
   231 }
   308 }
   232 
   309 
   233 .about-wrap .changelog.point-releases h3:first-child {
   310 .about-wrap .changelog.point-releases h3:first-child {
   234 	padding-top: 7px;
   311 	padding-top: 7px;
       
   312 }
       
   313 
       
   314 .about-wrap .changelog.feature-section .col {
       
   315 	margin-top: 40px;
   235 }
   316 }
   236 
   317 
   237 /*------------------------------------------------------------------------------
   318 /*------------------------------------------------------------------------------
   238   2.0 - About Page
   319   2.0 - About Page
   239 ------------------------------------------------------------------------------*/
   320 ------------------------------------------------------------------------------*/
   240 
   321 
   241 /* 2.1 - Typography */
   322 /* 2.1 - Typography */
   242 
   323 
   243 .about-wrap .feature-section.two-col h3 {
       
   244 	margin-top: 0;
       
   245 }
       
   246 
       
   247 .about-wrap .feature-section h4 {
       
   248 	margin: 1.4em 0 0.6em 0;
       
   249 	font-size: 1em;
       
   250 }
       
   251 
       
   252 .about-wrap .feature-section p {
       
   253 	margin-top: 0.6em;
       
   254 }
       
   255 
       
   256 .about-wrap .lead-description {
   324 .about-wrap .lead-description {
   257 	font-size: 1.5em;
   325 	font-size: 1.5em;
   258 	text-align: center;
   326 	text-align: center;
   259 }
   327 }
   260 
   328 
   261 .about-wrap .two-col-text {
   329 .about-wrap .feature-section p {
   262 	-webkit-column-count: 2;
   330 	margin-top: 0.6em;
   263 	column-count: 2;
       
   264 	-webkit-column-gap: 40px;
       
   265 	column-gap: 40px;
       
   266 }
       
   267 
       
   268 .about-wrap .two-col-text p:first-of-type {
       
   269 	margin-top: 0;
       
   270 }
       
   271 
       
   272 .about-wrap .streamlined-updates p,
       
   273 .about-wrap .native-fonts p {
       
   274 	margin-bottom: 3em;
       
   275 }
   331 }
   276 
   332 
   277 /* 2.2 - Structure */
   333 /* 2.2 - Structure */
   278 
   334 
   279 .about-wrap .headline-feature.feature-video {
   335 .about-wrap .headline-feature {
   280 	position: relative;
   336 	margin: 0 auto 40px;
   281 	margin: 40px 0;
   337 	max-width: 680px;
   282 	padding-bottom: 56.25%;
   338 }
       
   339 
       
   340 .about-wrap .headline-feature h2 {
       
   341 	margin: 50px 0 0;
       
   342 }
       
   343 
       
   344 .about-wrap .headline-feature img {
       
   345 	max-width: 600px;
   283 	width: 100%;
   346 	width: 100%;
   284 	max-width: 100%;
       
   285 	height: 0;
       
   286 	text-align: center;
       
   287 }
       
   288 
       
   289 .about-wrap .feature-video embed {
       
   290 	position: absolute;
       
   291 	top: 0;
       
   292 	right: 0;
       
   293 	width: 100%;
       
   294 	height: 100%;
       
   295 }
       
   296 
       
   297 .about-wrap .featured-image {
       
   298 	text-align: center;
       
   299 }
       
   300 
       
   301 .about-wrap .feature-section {
       
   302 	overflow: hidden;
       
   303 	padding: 0 0 40px;
       
   304 }
       
   305 
       
   306 .about-wrap .feature-section.no-heading {
       
   307 	padding-top: 35px;
       
   308 }
       
   309 
       
   310 .about-wrap .feature-section .media-container {
       
   311 	overflow: hidden;
       
   312 }
       
   313 
       
   314 .about-wrap .feature-section img {
       
   315 	margin-bottom: 1em;
       
   316 }
       
   317 
       
   318 .about-wrap .embed-container {
       
   319 	text-align: center;
       
   320 }
       
   321 
       
   322 .about-wrap .embed-container iframe {
       
   323 	max-width: 100%;
       
   324 }
       
   325 
       
   326 .about-wrap .wp-embedded-content {
       
   327 	max-width: 100%;
       
   328 }
       
   329 
       
   330 .about-wrap .feature-section .col {
       
   331 	margin-top: 40px;
       
   332 }
       
   333 
       
   334 .about-wrap .changelog {
       
   335 	margin-bottom: 40px;
       
   336 }
       
   337 
       
   338 .about-wrap .changelog.feature-section .col {
       
   339 	margin-top: 40px;
       
   340 }
   347 }
   341 
   348 
   342 /* Return to Dashboard Home link */
   349 /* Return to Dashboard Home link */
   343 
   350 
   344 .about-wrap .return-to-dashboard {
   351 .about-wrap .return-to-dashboard {
   350 .about-wrap .return-to-dashboard a {
   357 .about-wrap .return-to-dashboard a {
   351 	text-decoration: none;
   358 	text-decoration: none;
   352 	padding: 0 5px;
   359 	padding: 0 5px;
   353 }
   360 }
   354 
   361 
   355 /* 2.3 Floating Header Layout */
       
   356 
       
   357 .about-wrap .floating-header-section {
       
   358 	display: -ms-grid;
       
   359 	display: grid;
       
   360 	grid-gap: 0 60px;
       
   361 	-ms-grid-columns: 5fr 11fr;
       
   362 	grid-template-columns: 5fr 11fr;
       
   363 	max-width: 1020px;
       
   364 	margin: 0 auto 120px;
       
   365 }
       
   366 
       
   367 .about-wrap .floating-header-section .section-header {
       
   368 	-ms-grid-column: 1;
       
   369 	grid-column: 1;
       
   370 	position: relative;
       
   371 	min-width: 230px;
       
   372 	max-width: 300px;
       
   373 }
       
   374 
       
   375 .about-wrap .floating-header-section h2 {
       
   376 	margin: 0;
       
   377 	text-align: right;
       
   378 	position: absolute;
       
   379 }
       
   380 
       
   381 .about-wrap .floating-header-section .section-content {
       
   382 	-ms-grid-column: 2;
       
   383 	grid-column: 2;
       
   384 	display: -webkit-box;
       
   385 	display: flex;
       
   386 	-webkit-box-pack: justify;
       
   387 	justify-content: space-between;
       
   388 	-webkit-box-align: start;
       
   389 	align-items: flex-start;
       
   390 	-webkit-box-orient: horizontal;
       
   391 	-webkit-box-direction: normal;
       
   392 	flex-flow: row wrap;
       
   393 	-webkit-box-flex: 2;
       
   394 	flex-grow: 2;
       
   395 	flex-shrink: 0;
       
   396 }
       
   397 
       
   398 .about-wrap .floating-header-section .section-item {
       
   399 	-webkit-box-flex: 1;
       
   400 	flex-grow: 1;
       
   401 	max-width: calc(50% - 30px);
       
   402 }
       
   403 
       
   404 .about-wrap .floating-header-section .section-item:nth-child(1),
       
   405 .about-wrap .floating-header-section .section-item:nth-child(2) {
       
   406 	margin-bottom: 60px;
       
   407 }
       
   408 
       
   409 .about-wrap .floating-header-section .section-item:nth-child(1):nth-last-child(2),
       
   410 .about-wrap .floating-header-section .section-item:nth-child(2):nth-last-child(1) {
       
   411 	margin-bottom: 0;
       
   412 }
       
   413 
       
   414 .about-wrap .floating-header-section.has-long-title {
       
   415 	display: block;
       
   416 }
       
   417 
       
   418 .about-wrap .floating-header-section.has-long-title .section-header {
       
   419 	max-width: 100%;
       
   420 }
       
   421 
       
   422 .about-wrap .floating-header-section.has-long-title h2 {
       
   423 	position: static;
       
   424 	margin-bottom: 60px;
       
   425 }
       
   426 
       
   427 .about-wrap .floating-header-section.has-long-title .section-content {
       
   428 	-webkit-box-pack: start;
       
   429 	justify-content: flex-start;
       
   430 }
       
   431 
       
   432 .about-wrap .floating-header-section.has-long-title .section-item {
       
   433 	max-width: 300px;
       
   434 	margin-bottom: 0;
       
   435 }
       
   436 
       
   437 .about-wrap .floating-header-section.has-long-title .section-item + .section-item {
       
   438 	margin-right: 60px;
       
   439 }
       
   440 
       
   441 /*------------------------------------------------------------------------------
   362 /*------------------------------------------------------------------------------
   442   3.0 - Credits & Freedoms Pages
   363   3.0 - Credits & Freedoms Pages
   443 ------------------------------------------------------------------------------*/
   364 ------------------------------------------------------------------------------*/
   444 
   365 
   445 /* Credits */
   366 /* Credits */
   446 
   367 
   447 .about-wrap h3.wp-people-group {
   368 .about-wrap h2.wp-people-group {
   448 	margin: 2.6em 0 1.33em;
   369 	margin: 2.6em 0 1.33em;
   449 	padding: 0;
   370 	padding: 0;
   450 	font-size: 16px;
   371 	font-size: 16px;
   451 	line-height: inherit;
   372 	line-height: inherit;
       
   373 	font-weight: 600;
       
   374 	text-align: right;
   452 }
   375 }
   453 
   376 
   454 .about-wrap .wp-people-group {
   377 .about-wrap .wp-people-group {
   455 	padding: 0 5px;
   378 	padding: 0 5px;
   456 	margin: 0 -5px 0 -15px;
   379 	margin: 0 -5px 0 -15px;
   491 
   414 
   492 .about-wrap .wp-person .web {
   415 .about-wrap .wp-person .web {
   493 	margin: 6px 0 2px;
   416 	margin: 6px 0 2px;
   494 	font-size: 16px;
   417 	font-size: 16px;
   495 	font-weight: 400;
   418 	font-weight: 400;
   496 	line-height: 2em;
   419 	line-height: 2;
   497 	text-decoration: none;
   420 	text-decoration: none;
   498 }
   421 }
   499 
   422 
   500 .about-wrap .wp-person .title {
   423 .about-wrap .wp-person .title {
   501 	display: block;
   424 	display: block;
   523 .freedoms-php .about-wrap ol p {
   446 .freedoms-php .about-wrap ol p {
   524 	font-weight: 400;
   447 	font-weight: 400;
   525 	margin: 0.6em 0;
   448 	margin: 0.6em 0;
   526 }
   449 }
   527 
   450 
       
   451 .freedoms-php .has-4-columns {
       
   452 	margin-bottom: 40px;
       
   453 }
       
   454 
       
   455 .freedoms-php .column .freedoms-image {
       
   456 	background-image: url('https://s.w.org/wp-content/themes/pub/wporg-main/images/freedoms-2x.png');
       
   457 	background-size: 100%;
       
   458 	padding-top: 100%;
       
   459 }
       
   460 
       
   461 .freedoms-php .column:nth-of-type(2) .freedoms-image {
       
   462 	background-position: 100% 34%;
       
   463 }
       
   464 
       
   465 .freedoms-php .column:nth-of-type(3) .freedoms-image {
       
   466 	background-position: 100% 66%;
       
   467 }
       
   468 
       
   469 .freedoms-php .column:nth-of-type(4) .freedoms-image {
       
   470 	background-position: 100% 100%;
       
   471 }
       
   472 
   528 /*------------------------------------------------------------------------------
   473 /*------------------------------------------------------------------------------
   529   4.0 - Media Queries
   474   4.0 - Media Queries
   530 ------------------------------------------------------------------------------*/
   475 ------------------------------------------------------------------------------*/
   531 
   476 
   532 @media screen and (max-width: 1250px) {
       
   533 	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(1),
       
   534 	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(2) {
       
   535 		margin: 0 0 60px;
       
   536 	}
       
   537 
       
   538 	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(3),
       
   539 	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
       
   540 		margin: 0;
       
   541 	}
       
   542 
       
   543 	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(2),
       
   544 	.about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
       
   545 		margin-right: 60px;
       
   546 	}
       
   547 }
       
   548 
       
   549 @media screen and (max-width: 782px) {
   477 @media screen and (max-width: 782px) {
   550 	.about-wrap .two-col-text {
   478 	.about-wrap .has-3-columns,
   551 		-webkit-column-count: 1;
   479 	.about-wrap .has-4-columns {
   552 		column-count: 1;
   480 		-ms-grid-columns: 1fr 1fr;
   553 	}
   481 		grid-template-columns: 1fr 1fr;
   554 
   482 	}
   555 	.about-wrap .two-col .col,
   483 
   556 	.about-wrap .three-col .col {
   484 	.about-wrap .has-3-columns .column:nth-of-type(3n+1),
   557 		min-width: 48% !important;
   485 	.about-wrap .has-4-columns .column:nth-of-type(4n+1) {
   558 	}
   486 		-ms-grid-column: 1;
   559 
   487 		grid-column-start: 1;
   560 	.about-wrap .three-col img {
   488 		-ms-grid-row: 1;
       
   489 		grid-row-start: 1;
       
   490 	}
       
   491 
       
   492 	.about-wrap .has-3-columns .column:nth-of-type(3n+2),
       
   493 	.about-wrap .has-4-columns .column:nth-of-type(4n+2) {
       
   494 		-ms-grid-column: 2;
       
   495 		grid-column-start: 2;
       
   496 		-ms-grid-row: 1;
       
   497 		grid-row-start: 1;
       
   498 	}
       
   499 
       
   500 	.about-wrap .has-3-columns .column:nth-of-type(3n),
       
   501 	.about-wrap .has-4-columns .column:nth-of-type(4n+3) {
       
   502 		-ms-grid-column: 1;
       
   503 		grid-column-start: 1;
       
   504 		-ms-grid-row: 2;
       
   505 		grid-row-start: 2;
       
   506 	}
       
   507 
       
   508 	.about-wrap .has-4-columns .column:nth-of-type(4n) {
       
   509 		-ms-grid-column: 2;
       
   510 		grid-column-start: 2;
       
   511 		-ms-grid-row: 2;
       
   512 		grid-row-start: 2;
       
   513 	}
       
   514 }
       
   515 
       
   516 @media screen and (max-width: 600px) {
       
   517 	.about-wrap .has-2-columns,
       
   518 	.about-wrap .has-3-columns,
       
   519 	.about-wrap .has-4-columns {
   561 		display: block;
   520 		display: block;
   562 		margin: 0 auto;
   521 	}
   563 	}
   522 
   564 
   523 	.about-wrap :not(.is-wider-right):not(.is-wider-left) .column {
   565 	.about-wrap .floating-header-section {
   524 		margin-left: 0;
   566 		display: block;
   525 		margin-right: 0;
   567 	}
   526 	}
   568 
   527 
   569 	.about-wrap .floating-header-section .section-header,
   528 	.about-wrap .has-2-columns.is-wider-right,
   570 	.about-wrap .floating-header-section .section-content {
   529 	.about-wrap .has-2-columns.is-wider-left {
   571 		max-width: 100%;
   530 		display: -ms-grid;
   572 	}
   531 		display: grid;
   573 
       
   574 	.about-wrap .floating-header-section h2 {
       
   575 		position: static;
       
   576 		margin-bottom: 60px;
       
   577 	}
   532 	}
   578 }
   533 }
   579 
   534 
   580 @media only screen and (max-width: 500px) {
   535 @media only screen and (max-width: 500px) {
   581 	.about-wrap {
   536 	.about-wrap {
   595 	.about-wrap .wp-badge {
   550 	.about-wrap .wp-badge {
   596 		position: relative;
   551 		position: relative;
   597 		margin-bottom: 1.5em;
   552 		margin-bottom: 1.5em;
   598 		width: 100%;
   553 		width: 100%;
   599 	}
   554 	}
   600 
   555 }
   601 	.about-wrap .two-col .col,
   556 
   602 	.about-wrap .three-col .col {
   557 @media only screen and (max-width: 480px) {
   603 		min-width: 100% !important;
   558 	.about-wrap .has-2-columns.is-wider-right,
   604 	}
   559 	.about-wrap .has-2-columns.is-wider-left {
   605 
   560 		display: block;
   606 	.about-wrap .under-the-hood.three-col .col,
   561 	}
   607 	.about-wrap .under-the-hood.two-col .col,
   562 
   608 	.about-wrap .under-the-hood.one-col .col {
   563 	.about-wrap .column {
   609 		margin-bottom: 2em;
   564 		margin-left: 0;
   610 		padding-bottom: 0;
   565 		margin-right: 0;
   611 	}
   566 	}
   612 
   567 
   613 	.about-wrap .under-the-hood:nth-of-type(2n),
   568 	.about-wrap .has-2-columns.is-wider-right img,
   614 	.about-wrap .under-the-hood:nth-of-type(3n) {
   569 	.about-wrap .has-2-columns.is-wider-left img {
   615 		margin-top: 0;
   570 		max-width: 160px;
   616 	}
   571 	}
   617 
   572 }
   618 	.about-wrap .under-the-hood:nth-of-type(2n) h3,
       
   619 	.about-wrap .under-the-hood:nth-of-type(3n) h3 {
       
   620 		margin-top: 0;
       
   621 	}
       
   622 
       
   623 	.about-wrap .floating-header-section {
       
   624 		margin-bottom: 60px;
       
   625 		grid-gap: 30px 0;
       
   626 	}
       
   627 
       
   628 	.about-wrap .inline-svg.full-width {
       
   629 		margin-bottom: 60px;
       
   630 	}
       
   631 
       
   632 	.about-wrap .floating-header-section h2 {
       
   633 		word-break: break-all;
       
   634 		-webkit-hyphens: auto;
       
   635 		-ms-hyphens: auto;
       
   636 		hyphens: auto;
       
   637 	}
       
   638 
       
   639 	.about-wrap .floating-header-section .section-content .section-item {
       
   640 		max-width: 100%;
       
   641 		margin: 0 0 60px;
       
   642 	}
       
   643 }