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