/* * Theme Name: DualShockers4 * Author: David Fenster * Design: Andrea Vollendorf * Description: DualShockers v4 * Version: 4.0.0a * */ @import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i"); .standard-padding, body, .zebra, .info, .all-content-wrapper, h3 + .recent-articles, body.page main .zebra, body.page main .info { padding-left: 10px; padding-right: 10px; } @media only screen and (min-width: 768px) { .standard-padding, body, .zebra, .info, .all-content-wrapper, h3 + .recent-articles, body.page main .zebra, body.page main .info { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 1280px) { .standard-padding, body, .zebra, .info, .all-content-wrapper, h3 + .recent-articles, body.page main .zebra, body.page main .info { padding-left: 3vw; padding-right: 3vw; } } .standard-padding-top, h3 + .recent-articles { padding-top: 10px; } @media only screen and (min-width: 768px) { .standard-padding-top, h3 + .recent-articles { padding-top: 30px; } } @media only screen and (min-width: 1280px) { .standard-padding-top, h3 + .recent-articles { padding-top: 3vw; } } @media only screen and (min-width: 1280px) { .takeover .standard-padding, .takeover body, .takeover .zebra, .takeover .info, .takeover .all-content-wrapper, .takeover h3 + .recent-articles, .takeover body.page main .zebra, body.page main .takeover .zebra, .takeover body.page main .info, body.page main .takeover .info { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 1280px) { .takeover .standard-padding-top, .takeover h3 + .recent-articles { padding-top: 30px; } } * { box-sizing: border-box; word-break: break-word; } .body-text, body { color: #231F20; font-family: 'Roboto', sans-serif; font-weight: normal; font-size: 14px; line-height: 22px; } body { padding-top: 60px; padding-left: 0; padding-right: 0; overflow-x: hidden; max-width: 1900px; margin: 0 auto; } body.takeover { max-width: 1100px; } h1, .h1 { font-weight: bold; text-align: center; font-size: 18px; line-height: 24px; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 1280px) { h1, .h1 { font-size: 32px; line-height: 36px; } } h2, .h2, .h2-2, #carousel article h4 a, #carousel article h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count #carousel article h4 a.share_icon > span, .carousel-articles article h4 a, .carousel-articles article h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .carousel-articles article h4 a.share_icon > span { font-weight: normal; font-size: 18px; line-height: 24px; text-align: center; overflow: hidden; } .h2-2, #carousel article h4 a, #carousel article h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count #carousel article h4 a.share_icon > span, .carousel-articles article h4 a, .carousel-articles article h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .carousel-articles article h4 a.share_icon > span { font-weight: 500; } @media only screen and (min-width: 768px) { .h2-2, #carousel article h4 a, #carousel article h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count #carousel article h4 a.share_icon > span, .carousel-articles article h4 a, .carousel-articles article h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .carousel-articles article h4 a.share_icon > span { font-size: 24px; line-height: 28px; } } @media only screen and (min-width: 1280px) { .h2-2, #carousel article h4 a, #carousel article h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count #carousel article h4 a.share_icon > span, .carousel-articles article h4 a, .carousel-articles article h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .carousel-articles article h4 a.share_icon > span { font-size: 36px; line-height: 48px; } } h3, .h3 { font-weight: bold; font-size: 26px; line-height: 36px; } h4, .h4, .view-more a, .view-more .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .view-more a.share_icon > span, .view-more a:hover, .view-more a:visited { font-weight: 500; font-size: 14px; line-height: 18px; } @media only screen and (min-width: 1280px) { h4, .h4, .view-more a, .view-more .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .view-more a.share_icon > span, .view-more a:hover, .view-more a:visited { font-size: 16px; line-height: 24px; } } h4, h4 a, h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count h4 a.share_icon > span, h4 a:visited, h4 .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count h4 a.share_icon > span:visited, h4 a:hover, h4 .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count h4 a.share_icon > span:hover, .h4, .view-more a, .view-more .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .view-more a.share_icon > span, .view-more a:hover, .view-more a:visited, .h4 a, .view-more a a, .view-more .social-strip .comment-count a.share_icon > span a, .social-strip .comment-count .view-more a.share_icon > span a, .view-more a:hover a, .view-more a:visited a, .h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .h4 a.share_icon > span, .view-more .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .view-more a.share_icon > span, .view-more .social-strip .comment-count a.share_icon > span a.share_icon > span, .social-strip .comment-count .view-more a.share_icon > span a.share_icon > span, .view-more a:hover .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .view-more a:hover a.share_icon > span, .view-more .social-strip .comment-count a.share_icon > span:hover a.share_icon > span, .social-strip .comment-count .view-more a.share_icon > span:hover a.share_icon > span, .view-more a:visited .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .view-more a:visited a.share_icon > span, .view-more .social-strip .comment-count a.share_icon > span:visited a.share_icon > span, .social-strip .comment-count .view-more a.share_icon > span:visited a.share_icon > span, .h4 a:visited, .view-more a a:visited, .view-more .social-strip .comment-count a.share_icon > span a:visited, .social-strip .comment-count .view-more a.share_icon > span a:visited, .h4 .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count .h4 a.share_icon > span:visited, .view-more .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count .view-more a.share_icon > span:visited, .view-more .social-strip .comment-count a.share_icon > span a.share_icon > span:visited, .social-strip .comment-count .view-more a.share_icon > span a.share_icon > span:visited, .social-strip .comment-count .view-more a:hover a.share_icon > span:visited, .social-strip .comment-count .view-more a:visited a.share_icon > span:visited, .h4 a:hover, .view-more a a:hover, .view-more .social-strip .comment-count a.share_icon > span a:hover, .social-strip .comment-count .view-more a.share_icon > span a:hover, .h4 .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count .h4 a.share_icon > span:hover, .view-more .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count .view-more a.share_icon > span:hover, .view-more .social-strip .comment-count a.share_icon > span a.share_icon > span:hover, .social-strip .comment-count .view-more a.share_icon > span a.share_icon > span:hover, .social-strip .comment-count .view-more a:hover a.share_icon > span:hover, .social-strip .comment-count .view-more a:visited a.share_icon > span:hover { color: #231F20; border: 0; } h5 { font-weight: normal; font-size: 12px; line-height: 16px; } @media only screen and (min-width: 1280px) { h5 { font-size: 14px; line-height: 22px; } } h5, h5 a, h5 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count h5 a.share_icon > span, h5 a:visited, h5 .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count h5 a.share_icon > span:visited, h5 a:hover, h5 .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count h5 a.share_icon > span:hover { color: #231F20; border: 0; } .hero { font-weight: bold; font-size: 24px; line-height: 30px; } @media only screen and (min-width: 1280px) { .hero { font-size: 48px; line-height: 60px; } } .subh, .meta-text, .fieldset label, body.page.page-about-dualshockers main h1 { font-weight: bold; font-size: 11px; line-height: 15px; letter-spacing: 3px; text-transform: uppercase; background: none; color: inherit; height: auto; } .archive-title, .page-title, body.page main h1 { font-size: 24px; height: 2em; line-height: 2em; margin-top: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%), #3DA9DA; color: #FFFFFF; } @media only screen and (min-width: 1280px) { .archive-title, .page-title, body.page main h1 { font-size: 48px; height: 3em; line-height: 3em; } } .page-title, body.page main h1 { margin: 0; height: 6em; line-height: 6em; } @media only screen and (min-width: 1280px) { .page-title, body.page main h1 { font-size: 48px; height: 6em; line-height: 6em; } } .meta-text, .fieldset label { color: #868686; } .blue-text { color: #3DA9DA; } .bullet-icon, .single-post .post-main-content ul li { vertical-align: middle; } .bullet-icon:before, .single-post .post-main-content ul li:before { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 0.4em; vertical-align: middle; } .bullet-icon *, .single-post .post-main-content ul li * { vertical-align: middle; } .bullet-icon-minus:before, .single-post .post-main-content ul li:before { content: "\e906"; } .bullet-icon-comments-o:before { content: "\e92b"; } .p-pop { font-weight: normal; font-size: 16px; line-height: 24px; } @media only screen and (min-width: 1280px) { .p-pop { font-size: 20px; line-height: 36px; } } .error, .alert { color: #E91619; } .zebra, .info { margin-top: 0; margin-bottom: 0; padding-top: 30px; padding-bottom: 30px; background-color: #FFFFFF; } .zebra h2:first-child, .info h2:first-child { font-weight: bold; } .zebra:nth-child(odd), .info:nth-child(odd) { background-color: #F6F6F6; } @media only screen and (min-width: 1280px) { .zebra, .info { margin-left: 0; margin-right: 0; margin-top: 30px; } } .info { font-weight: normal; } main p { font-weight: lighter; font-size: 16px; line-height: 24px; } a, .social-strip .comment-count a.share_icon > span { color: #3DA9DA; border-bottom: 1px solid #3DA9DA; text-decoration: none; } a:hover, .social-strip .comment-count a.share_icon > span:hover { color: #2B87B0; border-bottom: 1px solid #2B87B0; } a:visited, .social-strip .comment-count a.share_icon > span:visited { color: #23CA8C; border-bottom: 1px solid #23CA8C; } .nolink, ul.page-numbers li .page-numbers, .view-more a, .view-more .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .view-more a.share_icon > span, .view-more a:hover, .view-more a:visited, .ddl ul > li a, .ddl ul > li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .ddl ul > li a.share_icon > span, nav.nav-main .icon-bars, .nav-menu ul > li a, .nav-menu ul > li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .nav-menu ul > li a.share_icon > span, footer li a, footer li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count footer li a.share_icon > span, .articles-container h3 a, .articles-container h3 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .articles-container h3 a.share_icon > span, body.page main .review-results ul li a.ds_image_link, body .review-results ul li a.ds_image_link, body .review-results ul li .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count body .review-results ul li a.share_icon > span.ds_image_link, .nolink:hover, ul.page-numbers li .page-numbers:hover, .view-more a:hover, .view-more .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count .view-more a.share_icon > span:hover, .ddl ul > li a:hover, .ddl ul > li .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count .ddl ul > li a.share_icon > span:hover, nav.nav-main .icon-bars:hover, .nav-menu ul > li a:hover, .nav-menu ul > li .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count .nav-menu ul > li a.share_icon > span:hover, footer li a:hover, footer li .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count footer li a.share_icon > span:hover, .articles-container h3 a:hover, .articles-container h3 .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count .articles-container h3 a.share_icon > span:hover, body.page main .review-results ul li a.ds_image_link:hover, body .review-results ul li a.ds_image_link:hover, body .review-results ul li .social-strip .comment-count a.share_icon > span.ds_image_link:hover, .social-strip .comment-count body .review-results ul li a.share_icon > span.ds_image_link:hover, .nolink:visited, ul.page-numbers li .page-numbers:visited, .view-more a:visited, .view-more .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count .view-more a.share_icon > span:visited, .ddl ul > li a:visited, .ddl ul > li .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count .ddl ul > li a.share_icon > span:visited, nav.nav-main .icon-bars:visited, .nav-menu ul > li a:visited, .nav-menu ul > li .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count .nav-menu ul > li a.share_icon > span:visited, footer li a:visited, footer li .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count footer li a.share_icon > span:visited, .articles-container h3 a:visited, .articles-container h3 .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count .articles-container h3 a.share_icon > span:visited, body.page main .review-results ul li a.ds_image_link:visited, body .review-results ul li a.ds_image_link:visited, body .review-results ul li .social-strip .comment-count a.share_icon > span.ds_image_link:visited, .social-strip .comment-count body .review-results ul li a.share_icon > span.ds_image_link:visited { color: #231F20; border-bottom: 0; } ul { list-style-type: none; margin: 0; padding: 0; } .fieldset { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: -10px; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: center; } @media only screen and (min-width: 768px) { .fieldset { margin-right: -30px; } } @media only screen and (min-width: 1280px) { .fieldset { margin-right: -3vw; } } .fieldset .col, .fieldset .col1, .fieldset .col2, .fieldset .col3, .fieldset .col4, .fieldset .col5, .fieldset .col6, .fieldset .col7, .fieldset .col8, .fieldset .col9, .fieldset .col10, .fieldset .col11, .fieldset .col12, .fieldset .col1-phone, .fieldset .col2-phone, .fieldset .col3-phone, .fieldset .col4-phone, .fieldset .col5-phone, .fieldset .col6-phone, .fieldset .col7-phone, .fieldset .col8-phone, .fieldset .col9-phone, .fieldset .col10-phone, .fieldset .col11-phone, .fieldset .col12-phone, .fieldset .col1-tablet, .fieldset .col2-tablet, .fieldset .col3-tablet, .fieldset .col4-tablet, .fieldset .col5-tablet, .fieldset .col6-tablet, .fieldset .col7-tablet, .fieldset .col8-tablet, .fieldset .col9-tablet, .fieldset .col10-tablet, .fieldset .col11-tablet, .fieldset .col12-tablet, .fieldset .col1-desktop, .fieldset .col2-desktop, .fieldset .col3-desktop, .fieldset .col4-desktop, .fieldset .col5-desktop, .fieldset .col6-desktop, .fieldset .col7-desktop, .fieldset .col8-desktop, .fieldset .col9-desktop, .fieldset .col10-desktop, .fieldset .col11-desktop, .fieldset .col12-desktop { flex-basis: 100%; position: relative; padding: 0 10px 0 0; margin: 0 0 10px 0; } @media only screen and (min-width: 768px) { .fieldset .col, .fieldset .col1, .fieldset .col2, .fieldset .col3, .fieldset .col4, .fieldset .col5, .fieldset .col6, .fieldset .col7, .fieldset .col8, .fieldset .col9, .fieldset .col10, .fieldset .col11, .fieldset .col12, .fieldset .col1-phone, .fieldset .col2-phone, .fieldset .col3-phone, .fieldset .col4-phone, .fieldset .col5-phone, .fieldset .col6-phone, .fieldset .col7-phone, .fieldset .col8-phone, .fieldset .col9-phone, .fieldset .col10-phone, .fieldset .col11-phone, .fieldset .col12-phone, .fieldset .col1-tablet, .fieldset .col2-tablet, .fieldset .col3-tablet, .fieldset .col4-tablet, .fieldset .col5-tablet, .fieldset .col6-tablet, .fieldset .col7-tablet, .fieldset .col8-tablet, .fieldset .col9-tablet, .fieldset .col10-tablet, .fieldset .col11-tablet, .fieldset .col12-tablet, .fieldset .col1-desktop, .fieldset .col2-desktop, .fieldset .col3-desktop, .fieldset .col4-desktop, .fieldset .col5-desktop, .fieldset .col6-desktop, .fieldset .col7-desktop, .fieldset .col8-desktop, .fieldset .col9-desktop, .fieldset .col10-desktop, .fieldset .col11-desktop, .fieldset .col12-desktop { padding: 0 30px 0 0; margin: 0 0 30px 0; } } @media only screen and (min-width: 1280px) { .fieldset .col, .fieldset .col1, .fieldset .col2, .fieldset .col3, .fieldset .col4, .fieldset .col5, .fieldset .col6, .fieldset .col7, .fieldset .col8, .fieldset .col9, .fieldset .col10, .fieldset .col11, .fieldset .col12, .fieldset .col1-phone, .fieldset .col2-phone, .fieldset .col3-phone, .fieldset .col4-phone, .fieldset .col5-phone, .fieldset .col6-phone, .fieldset .col7-phone, .fieldset .col8-phone, .fieldset .col9-phone, .fieldset .col10-phone, .fieldset .col11-phone, .fieldset .col12-phone, .fieldset .col1-tablet, .fieldset .col2-tablet, .fieldset .col3-tablet, .fieldset .col4-tablet, .fieldset .col5-tablet, .fieldset .col6-tablet, .fieldset .col7-tablet, .fieldset .col8-tablet, .fieldset .col9-tablet, .fieldset .col10-tablet, .fieldset .col11-tablet, .fieldset .col12-tablet, .fieldset .col1-desktop, .fieldset .col2-desktop, .fieldset .col3-desktop, .fieldset .col4-desktop, .fieldset .col5-desktop, .fieldset .col6-desktop, .fieldset .col7-desktop, .fieldset .col8-desktop, .fieldset .col9-desktop, .fieldset .col10-desktop, .fieldset .col11-desktop, .fieldset .col12-desktop { padding: 0 3vw 0 0; margin: 0 0 3vw 0; } } @media only screen and (min-width: 768px) { .fieldset .col1 { flex: 12 12 8.33333%; } } @media only screen and (min-width: 768px) { .fieldset .col2 { flex: 12 12 16.66667%; } } @media only screen and (min-width: 768px) { .fieldset .col3 { flex: 12 12 25%; } } @media only screen and (min-width: 768px) { .fieldset .col4 { flex: 12 12 33.33333%; } } @media only screen and (min-width: 768px) { .fieldset .col5 { flex: 12 12 41.66667%; } } @media only screen and (min-width: 768px) { .fieldset .col6 { flex: 12 12 50%; } } @media only screen and (min-width: 768px) { .fieldset .col7 { flex: 12 12 58.33333%; } } @media only screen and (min-width: 768px) { .fieldset .col8 { flex: 12 12 66.66667%; } } @media only screen and (min-width: 768px) { .fieldset .col9 { flex: 12 12 75%; } } @media only screen and (min-width: 768px) { .fieldset .col10 { flex: 12 12 83.33333%; } } @media only screen and (min-width: 768px) { .fieldset .col11 { flex: 12 12 91.66667%; } } @media only screen and (min-width: 768px) { .fieldset .col12 { flex: 12 12 100%; } } .fieldset .col1-phone { flex: 12 12 8.33333%; } .fieldset .col2-phone { flex: 12 12 16.66667%; } .fieldset .col3-phone { flex: 12 12 25%; } .fieldset .col4-phone { flex: 12 12 33.33333%; } .fieldset .col5-phone { flex: 12 12 41.66667%; } .fieldset .col6-phone { flex: 12 12 50%; } .fieldset .col7-phone { flex: 12 12 58.33333%; } .fieldset .col8-phone { flex: 12 12 66.66667%; } .fieldset .col9-phone { flex: 12 12 75%; } .fieldset .col10-phone { flex: 12 12 83.33333%; } .fieldset .col11-phone { flex: 12 12 91.66667%; } .fieldset .col12-phone { flex: 12 12 100%; } @media only screen and (min-width: 768px) { .fieldset .col1-tablet { flex: 12 12 8.33333%; } } @media only screen and (min-width: 768px) { .fieldset .col2-tablet { flex: 12 12 16.66667%; } } @media only screen and (min-width: 768px) { .fieldset .col3-tablet { flex: 12 12 25%; } } @media only screen and (min-width: 768px) { .fieldset .col4-tablet { flex: 12 12 33.33333%; } } @media only screen and (min-width: 768px) { .fieldset .col5-tablet { flex: 12 12 41.66667%; } } @media only screen and (min-width: 768px) { .fieldset .col6-tablet { flex: 12 12 50%; } } @media only screen and (min-width: 768px) { .fieldset .col7-tablet { flex: 12 12 58.33333%; } } @media only screen and (min-width: 768px) { .fieldset .col8-tablet { flex: 12 12 66.66667%; } } @media only screen and (min-width: 768px) { .fieldset .col9-tablet { flex: 12 12 75%; } } @media only screen and (min-width: 768px) { .fieldset .col10-tablet { flex: 12 12 83.33333%; } } @media only screen and (min-width: 768px) { .fieldset .col11-tablet { flex: 12 12 91.66667%; } } @media only screen and (min-width: 768px) { .fieldset .col12-tablet { flex: 12 12 100%; } } @media only screen and (min-width: 1280px) { .fieldset .col1-desktop { flex: 12 12 8.33333%; } } @media only screen and (min-width: 1280px) { .fieldset .col2-desktop { flex: 12 12 16.66667%; } } @media only screen and (min-width: 1280px) { .fieldset .col3-desktop { flex: 12 12 25%; } } @media only screen and (min-width: 1280px) { .fieldset .col4-desktop { flex: 12 12 33.33333%; } } @media only screen and (min-width: 1280px) { .fieldset .col5-desktop { flex: 12 12 41.66667%; } } @media only screen and (min-width: 1280px) { .fieldset .col6-desktop { flex: 12 12 50%; } } @media only screen and (min-width: 1280px) { .fieldset .col7-desktop { flex: 12 12 58.33333%; } } @media only screen and (min-width: 1280px) { .fieldset .col8-desktop { flex: 12 12 66.66667%; } } @media only screen and (min-width: 1280px) { .fieldset .col9-desktop { flex: 12 12 75%; } } @media only screen and (min-width: 1280px) { .fieldset .col10-desktop { flex: 12 12 83.33333%; } } @media only screen and (min-width: 1280px) { .fieldset .col11-desktop { flex: 12 12 91.66667%; } } @media only screen and (min-width: 1280px) { .fieldset .col12-desktop { flex: 12 12 100%; } } .fieldset input, .fieldset textarea { display: block; width: 100%; border: 1px solid #DADADA; line-height: 1.5em; padding: 10px; color: #231F20; } .fieldset .col button, .fieldset .col1 button, .fieldset .col2 button, .fieldset .col3 button, .fieldset .col4 button, .fieldset .col5 button, .fieldset .col6 button, .fieldset .col7 button, .fieldset .col8 button, .fieldset .col9 button, .fieldset .col10 button, .fieldset .col11 button, .fieldset .col12 button, .fieldset .col1-phone button, .fieldset .col2-phone button, .fieldset .col3-phone button, .fieldset .col4-phone button, .fieldset .col5-phone button, .fieldset .col6-phone button, .fieldset .col7-phone button, .fieldset .col8-phone button, .fieldset .col9-phone button, .fieldset .col10-phone button, .fieldset .col11-phone button, .fieldset .col12-phone button, .fieldset .col1-tablet button, .fieldset .col2-tablet button, .fieldset .col3-tablet button, .fieldset .col4-tablet button, .fieldset .col5-tablet button, .fieldset .col6-tablet button, .fieldset .col7-tablet button, .fieldset .col8-tablet button, .fieldset .col9-tablet button, .fieldset .col10-tablet button, .fieldset .col11-tablet button, .fieldset .col12-tablet button, .fieldset .col1-desktop button, .fieldset .col2-desktop button, .fieldset .col3-desktop button, .fieldset .col4-desktop button, .fieldset .col5-desktop button, .fieldset .col6-desktop button, .fieldset .col7-desktop button, .fieldset .col8-desktop button, .fieldset .col9-desktop button, .fieldset .col10-desktop button, .fieldset .col11-desktop button, .fieldset .col12-desktop button, .fieldset .col .featured-lg .read-more, .featured-lg .fieldset .col .read-more, .fieldset .col1 .featured-lg .read-more, .featured-lg .fieldset .col1 .read-more, .fieldset .col2 .featured-lg .read-more, .featured-lg .fieldset .col2 .read-more, .fieldset .col3 .featured-lg .read-more, .featured-lg .fieldset .col3 .read-more, .fieldset .col4 .featured-lg .read-more, .featured-lg .fieldset .col4 .read-more, .fieldset .col5 .featured-lg .read-more, .featured-lg .fieldset .col5 .read-more, .fieldset .col6 .featured-lg .read-more, .featured-lg .fieldset .col6 .read-more, .fieldset .col7 .featured-lg .read-more, .featured-lg .fieldset .col7 .read-more, .fieldset .col8 .featured-lg .read-more, .featured-lg .fieldset .col8 .read-more, .fieldset .col9 .featured-lg .read-more, .featured-lg .fieldset .col9 .read-more, .fieldset .col10 .featured-lg .read-more, .featured-lg .fieldset .col10 .read-more, .fieldset .col11 .featured-lg .read-more, .featured-lg .fieldset .col11 .read-more, .fieldset .col12 .featured-lg .read-more, .featured-lg .fieldset .col12 .read-more, .fieldset .col1-phone .featured-lg .read-more, .featured-lg .fieldset .col1-phone .read-more, .fieldset .col2-phone .featured-lg .read-more, .featured-lg .fieldset .col2-phone .read-more, .fieldset .col3-phone .featured-lg .read-more, .featured-lg .fieldset .col3-phone .read-more, .fieldset .col4-phone .featured-lg .read-more, .featured-lg .fieldset .col4-phone .read-more, .fieldset .col5-phone .featured-lg .read-more, .featured-lg .fieldset .col5-phone .read-more, .fieldset .col6-phone .featured-lg .read-more, .featured-lg .fieldset .col6-phone .read-more, .fieldset .col7-phone .featured-lg .read-more, .featured-lg .fieldset .col7-phone .read-more, .fieldset .col8-phone .featured-lg .read-more, .featured-lg .fieldset .col8-phone .read-more, .fieldset .col9-phone .featured-lg .read-more, .featured-lg .fieldset .col9-phone .read-more, .fieldset .col10-phone .featured-lg .read-more, .featured-lg .fieldset .col10-phone .read-more, .fieldset .col11-phone .featured-lg .read-more, .featured-lg .fieldset .col11-phone .read-more, .fieldset .col12-phone .featured-lg .read-more, .featured-lg .fieldset .col12-phone .read-more, .fieldset .col1-tablet .featured-lg .read-more, .featured-lg .fieldset .col1-tablet .read-more, .fieldset .col2-tablet .featured-lg .read-more, .featured-lg .fieldset .col2-tablet .read-more, .fieldset .col3-tablet .featured-lg .read-more, .featured-lg .fieldset .col3-tablet .read-more, .fieldset .col4-tablet .featured-lg .read-more, .featured-lg .fieldset .col4-tablet .read-more, .fieldset .col5-tablet .featured-lg .read-more, .featured-lg .fieldset .col5-tablet .read-more, .fieldset .col6-tablet .featured-lg .read-more, .featured-lg .fieldset .col6-tablet .read-more, .fieldset .col7-tablet .featured-lg .read-more, .featured-lg .fieldset .col7-tablet .read-more, .fieldset .col8-tablet .featured-lg .read-more, .featured-lg .fieldset .col8-tablet .read-more, .fieldset .col9-tablet .featured-lg .read-more, .featured-lg .fieldset .col9-tablet .read-more, .fieldset .col10-tablet .featured-lg .read-more, .featured-lg .fieldset .col10-tablet .read-more, .fieldset .col11-tablet .featured-lg .read-more, .featured-lg .fieldset .col11-tablet .read-more, .fieldset .col12-tablet .featured-lg .read-more, .featured-lg .fieldset .col12-tablet .read-more, .fieldset .col1-desktop .featured-lg .read-more, .featured-lg .fieldset .col1-desktop .read-more, .fieldset .col2-desktop .featured-lg .read-more, .featured-lg .fieldset .col2-desktop .read-more, .fieldset .col3-desktop .featured-lg .read-more, .featured-lg .fieldset .col3-desktop .read-more, .fieldset .col4-desktop .featured-lg .read-more, .featured-lg .fieldset .col4-desktop .read-more, .fieldset .col5-desktop .featured-lg .read-more, .featured-lg .fieldset .col5-desktop .read-more, .fieldset .col6-desktop .featured-lg .read-more, .featured-lg .fieldset .col6-desktop .read-more, .fieldset .col7-desktop .featured-lg .read-more, .featured-lg .fieldset .col7-desktop .read-more, .fieldset .col8-desktop .featured-lg .read-more, .featured-lg .fieldset .col8-desktop .read-more, .fieldset .col9-desktop .featured-lg .read-more, .featured-lg .fieldset .col9-desktop .read-more, .fieldset .col10-desktop .featured-lg .read-more, .featured-lg .fieldset .col10-desktop .read-more, .fieldset .col11-desktop .featured-lg .read-more, .featured-lg .fieldset .col11-desktop .read-more, .fieldset .col12-desktop .featured-lg .read-more, .featured-lg .fieldset .col12-desktop .read-more { width: 100%; } .fieldset label.txtborder { color: #231F20; position: absolute; background: white; padding: 0 10px; top: calc(-0.7em); left: 5%; } .fieldset input.txtborder { border-radius: 5px; border-color: #231F20; outline: 0; height: 60px; font-size: 26px; padding-left: 20px; padding-right: 20px; } .fieldset input[type=checkbox] { width: auto; display: inline-block; } .fieldset input.toggle-checkbox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .fieldset label { display: block; padding-bottom: 10px; } .fieldset .buttons { text-align: center; } button, .featured-lg .read-more { padding: 30px 20px; background-color: #3DA9DA; color: #FFFFFF; text-transform: uppercase; font-weight: 500; letter-spacing: 3px; font-size: 11px; line-height: 1em; border: 1px solid #3DC2FF; cursor: pointer; } @media only screen and (min-width: 768px) { button, .featured-lg .read-more { font-size: 12px; } } @media only screen and (min-width: 1280px) { button, .featured-lg .read-more { font-size: 14px; } } button.btn-depth, .fieldset .buttons button[type=submit], .fieldset .buttons .featured-lg .read-more[type=submit], .featured-lg .fieldset .buttons .read-more[type=submit], .featured-lg .read-more { border-radius: 5px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%), #3DA9DA; } button.btn-glow, .fieldset .buttons button[type=submit], .fieldset .buttons .featured-lg .read-more[type=submit], .featured-lg .fieldset .buttons .read-more[type=submit], .featured-lg .btn-glow.read-more { box-shadow: 0px 0px 14px rgba(61, 194, 255, 0.5032); } .btn-block { display: block; width: 100%; padding: 0 30px; } .toggle-checkbox, .fieldset input.toggle-checkbox { display: inline-block; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; background-clip: padding-box; box-shadow: none !important; background: none transparent; } .clr { clear: both; } .inline-vcenter:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .section, .social-strip-bottom { margin-bottom: 30px; } blockquote { margin: 26px 0; border-left: solid 3px #231F20; padding-left: 10px; } blockquote, blockquote p { font-style: italic; font-weight: normal; } aside.pullquote blockquote { border-left: solid 5px #3DA9DA; } aside.pullquote blockquote, aside.pullquote blockquote p { color: #3DA9DA; font-size: 18px; font-weight: bold; line-height: 26px; font-style: normal; text-align: left; margin: 10px 0; } @media only screen and (min-width: 1280px) { aside.pullquote.full-width-pullquote { float: left; width: 85%; margin-left: calc(-150px - 3vw); max-width: 650px; min-width: 250px; padding: 30px; } aside.pullquote.full-width-pullquote blockquote, aside.pullquote.full-width-pullquote blockquote p { border: 0; margin: 0; } } @media only screen and (min-width: 1280px) and (min-width: 1280px) { aside.pullquote.full-width-pullquote blockquote, aside.pullquote.full-width-pullquote blockquote p { font-size: 26px; line-height: 36px; } } @media only screen and (min-width: 1280px) { .takeover aside.pullquote { margin-left: 0; width: 100%; float: none; } } img.responsive, .single-post .post-main img, .featured-image img { display: inline-block; width: 100%; max-width: 100%; height: auto; vertical-align: middle; } .flex-video { position: relative; padding-top: 1.5625rem; padding-bottom: 67.5%; margin-bottom: 1rem; overflow: hidden; } /*main .main-column iframe,*/ .flex-video object, .flex-video video, .flex-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } twitter-widget { margin-left: auto; margin-right: auto; } .full-width, .archive-title, .page-title, body.page main h1, .zebra, .info, .extra-width-columns-3, .single-post .post-main-content a.ds_image_link.full-width-image-link, .single-post .post-main-content .social-strip .comment-count a.share_icon > span.ds_image_link.full-width-image-link, .social-strip .comment-count .single-post .post-main-content a.share_icon > span.ds_image_link.full-width-image-link, .single-post .post-main .featured-image a.ds_image_link, .single-post .post-main .featured-image .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .single-post .post-main .featured-image a.share_icon > span.ds_image_link, .featured-articles, .review-metadata, body.page main .zebra, body.page main .info, .full-width-ad, .full-width-columns { display: block; margin-left: -10px; margin-right: -10px; } @media only screen and (min-width: 768px) { .full-width, .archive-title, .page-title, body.page main h1, .zebra, .info, .extra-width-columns-3, .single-post .post-main-content a.ds_image_link.full-width-image-link, .single-post .post-main-content .social-strip .comment-count a.share_icon > span.ds_image_link.full-width-image-link, .social-strip .comment-count .single-post .post-main-content a.share_icon > span.ds_image_link.full-width-image-link, .single-post .post-main .featured-image a.ds_image_link, .single-post .post-main .featured-image .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .single-post .post-main .featured-image a.share_icon > span.ds_image_link, .featured-articles, .review-metadata, body.page main .zebra, body.page main .info, .full-width-ad, .full-width-columns { margin-left: -30px; margin-right: -30px; } } @media only screen and (min-width: 1280px) { .full-width, .archive-title, .page-title, body.page main h1, .zebra, .info, .extra-width-columns-3, .single-post .post-main-content a.ds_image_link.full-width-image-link, .single-post .post-main-content .social-strip .comment-count a.share_icon > span.ds_image_link.full-width-image-link, .social-strip .comment-count .single-post .post-main-content a.share_icon > span.ds_image_link.full-width-image-link, .single-post .post-main .featured-image a.ds_image_link, .single-post .post-main .featured-image .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .single-post .post-main .featured-image a.share_icon > span.ds_image_link, .featured-articles, .review-metadata, body.page main .zebra, body.page main .info, .full-width-ad, .full-width-columns { margin-left: -3vw; margin-right: -3vw; } } @media only screen and (min-width: 1280px) { .takeover .full-width, .takeover .archive-title, .takeover .page-title, .takeover body.page main h1, body.page main .takeover h1, .takeover .zebra, .takeover .info, .takeover .extra-width-columns-3, .takeover .single-post .post-main-content a.ds_image_link.full-width-image-link, .single-post .post-main-content .takeover a.ds_image_link.full-width-image-link, .takeover .single-post .post-main-content .social-strip .comment-count a.share_icon > span.ds_image_link.full-width-image-link, .single-post .post-main-content .social-strip .comment-count .takeover a.share_icon > span.ds_image_link.full-width-image-link, .takeover .social-strip .comment-count .single-post .post-main-content a.share_icon > span.ds_image_link.full-width-image-link, .social-strip .comment-count .single-post .post-main-content .takeover a.share_icon > span.ds_image_link.full-width-image-link, .takeover .single-post .post-main .featured-image a.ds_image_link, .single-post .post-main .featured-image .takeover a.ds_image_link, .takeover .single-post .post-main .featured-image .social-strip .comment-count a.share_icon > span.ds_image_link, .single-post .post-main .featured-image .social-strip .comment-count .takeover a.share_icon > span.ds_image_link, .takeover .social-strip .comment-count .single-post .post-main .featured-image a.share_icon > span.ds_image_link, .social-strip .comment-count .single-post .post-main .featured-image .takeover a.share_icon > span.ds_image_link, .takeover .featured-articles, .takeover .review-metadata, .takeover body.page main .zebra, body.page main .takeover .zebra, .takeover body.page main .info, body.page main .takeover .info, .takeover.full-width, .takeover.archive-title, .takeover.page-title, body.page main h1.takeover, .takeover.zebra, .takeover.info, .takeover.extra-width-columns-3, .single-post .post-main-content a.takeover.ds_image_link.full-width-image-link, .single-post .post-main-content .social-strip .comment-count a.share_icon > span.takeover.ds_image_link.full-width-image-link, .social-strip .comment-count .single-post .post-main-content a.share_icon > span.takeover.ds_image_link.full-width-image-link, .single-post .post-main .featured-image a.takeover.ds_image_link, .single-post .post-main .featured-image .social-strip .comment-count a.share_icon > span.takeover.ds_image_link, .social-strip .comment-count .single-post .post-main .featured-image a.share_icon > span.takeover.ds_image_link, .takeover.featured-articles, .takeover.review-metadata, body.page main .takeover.zebra, body.page main .takeover.info, .takeover a.ds_image_link, .takeover .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .takeover a.share_icon > span.ds_image_link { margin-left: 0 !important; margin-right: 0 !important; } } @media only screen and (min-width: 1280px) { .extra-width-columns-3, .single-post .post-main-content a.ds_image_link.full-width-image-link, .single-post .post-main-content .social-strip .comment-count a.share_icon > span.ds_image_link.full-width-image-link, .social-strip .comment-count .single-post .post-main-content a.share_icon > span.ds_image_link.full-width-image-link { margin-left: -75px; margin-right: -75px; } } @media only screen and (min-width: 1280px) { .full-width-columns-3, .single-post.cat-reviews .main-column a.ds_image_link.full-width-image-link, .single-post.cat-reviews .main-column .social-strip .comment-count a.share_icon > span.ds_image_link.full-width-image-link, .social-strip .comment-count .single-post.cat-reviews .main-column a.share_icon > span.ds_image_link.full-width-image-link, .single-post.cat-editorials .main-column a.ds_image_link.full-width-image-link, .single-post.cat-editorials .main-column .social-strip .comment-count a.share_icon > span.ds_image_link.full-width-image-link, .social-strip .comment-count .single-post.cat-editorials .main-column a.share_icon > span.ds_image_link.full-width-image-link { margin-left: calc(-300px - 6vw); margin-right: calc(-300px - 6vw); } } /*.takeover .full-width-columns-3 { @include respond-to(desktop) { margin-left: -150px !important; margin-right: -150px - 300px !important; } } */ .drop-shadow, .ddl ul, nav.nav-main .nav-bar, nav.nav-main .nav-menu { box-shadow: 0 0 20px 0 rgba(42, 106, 135, 0.1164); } .fr { float: right; } .fl { float: left; } .hide { display: none; } @media only screen and (min-width: 1280px) { .show-desktop { display: block; } } .page-prev-next, ul.page-numbers li .page-numbers.prev, ul.page-numbers li .page-numbers.next { display: flex; align-items: center; width: auto; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; line-height: 1em; } ul.page-numbers { display: flex; align-items: center; justify-content: space-between; } ul.page-numbers li .page-numbers { display: none; min-width: 30px; height: 30px; line-height: 30px; margin: 4px; text-align: center; font-weight: 500; border-radius: 4px; padding-left: 10px; padding-right: 10px; } ul.page-numbers li .page-numbers .icon { font-size: 17px; transform: scaleX(1.5); } @media only screen and (min-width: 768px) { ul.page-numbers li .page-numbers { display: inline-block; } } ul.page-numbers li .page-numbers.prev { margin-right: 75px; } ul.page-numbers li .page-numbers.next { margin-left: 75px; } ul.page-numbers li span.page-numbers.current { color: #FFFFFF; background: #3DA9DA; } @media only screen and (min-width: 768px) { ul.page-numbers { justify-content: center; } } .view-more a, .view-more .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .view-more a.share_icon > span, .view-more a:hover, .view-more .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count .view-more a.share_icon > span:hover, .view-more a:visited, .view-more .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count .view-more a.share_icon > span:visited { display: block; margin: 0 auto 30px auto; color: #FFFFFF; text-align: center; padding: 0; width: 75%; background-color: #23CA8C; border-radius: 5px; border: 0; padding: 20px 30px; } .ddl { position: relative; display: inline-block; white-space: nowrap; outline: 0; } .ddl .ddl-click-cover, .ddl > input[type=checkbox]:checked + label:after, .ddl > input[type=checkbox]:checked:after { content: ''; display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; } .ddl > label { color: #231F20; padding: 30px; border-bottom: 1px solid black; display: flex; align-items: center; justify-content: space-between; } @media only screen and (min-width: 768px) { .ddl > label { border-bottom: 0; justify-content: center; } } .ddl input.toggle-checkbox { height: 100%; display: block; outline: 0; } .ddl > input[type=checkbox]:checked { position: fixed; right: 0; top: 0; width: 50px; height: 50px; left: auto; z-index: 22; } .ddl > input[type=checkbox]:checked + label:after { z-index: 4; background: white; opacity: 0.8; } @media only screen and (min-width: 768px) { .ddl > input[type=checkbox]:checked + label:after { display: none; } } .ddl > input[type=checkbox]:checked:after { display: none; } @media only screen and (min-width: 768px) { .ddl > input[type=checkbox]:checked:after { display: block; z-index: 1; } } @media only screen and (min-width: 768px) { .ddl > input[type=checkbox]:checked { position: absolute; top: 0; left: 0; width: 100%; z-index: auto; } } .ddl .icon-close { display: none; } .ddl input.toggle-checkbox:checked ~ .icon-close, .ddl .fieldset input.toggle-checkbox:checked ~ .icon-close { display: block; position: fixed; top: 10px; right: 0px; width: 50px; height: 50px; z-index: 21; text-align: center; font-size: 38px; transform: rotate(45deg); transform-origin: top center; line-height: 1em; } @media only screen and (min-width: 768px) { .ddl input.toggle-checkbox:checked ~ .icon-close, .ddl .fieldset input.toggle-checkbox:checked ~ .icon-close { display: none; } } .ddl input[type=checkbox]:checked ~ ul { display: block !important; } @media only screen and (min-width: 768px) { .ddl input[type=checkbox]:checked ~ ul { width: auto; position: absolute; top: auto; left: 0; margin: -10px 0 0 0; transform: scale(0.75); transform-origin: top left; min-width: 250px; max-height: 60vh; } } .ddl input[type=checkbox]:checked ~ label .dropdown-indicator { transform: rotate(-45deg); } .ddl ul { transition: max-height 0.25s ease-in-out; overflow-y: auto; width: calc(100% - 20px); max-height: calc(100vh - 20px); position: fixed; top: 0; left: 0; background: #FFFFFF; z-index: 21; margin: 10px; display: none !important; } @media only screen and (min-width: 1280px) { .ddl ul { display: flex; background-color: #FFFFFF; } } .ddl ul > li { padding: 0; position: relative; overflow: hidden; line-height: 1em; } @media only screen and (min-width: 1280px) { .ddl ul > li { border-bottom: 0; overflow: visible; height: 60px; } } .ddl ul > li a, .ddl ul > li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .ddl ul > li a.share_icon > span { padding: 20px; display: inline-block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: start; } .ddl ul > li input.toggle-checkbox:checked + a, .ddl ul > li .fieldset input.toggle-checkbox:checked + a, .ddl ul > li .social-strip .comment-count a.share_icon > input.toggle-checkbox:checked + span, .social-strip .comment-count .ddl ul > li a.share_icon > input.toggle-checkbox:checked + span, .ddl ul > li .fieldset .social-strip .comment-count a.share_icon > input.toggle-checkbox:checked + span, .social-strip .comment-count .ddl ul > li .fieldset a.share_icon > input.toggle-checkbox:checked + span, .fieldset .ddl ul > li .social-strip .comment-count a.share_icon > input.toggle-checkbox:checked + span, .social-strip .comment-count .fieldset .ddl ul > li a.share_icon > input.toggle-checkbox:checked + span { background-color: #3DA9DA; color: #FFFFFF; } .ddl-item, .ddl ul > li { font-size: 14px; font-weight: 500; border-bottom: 1px solid #DADADA; text-transform: uppercase; letter-spacing: 3px; } .ddl-item:last-child, .ddl ul > li:last-child { border-bottom: 0; } .author-bio { display: inline-block; background-color: #231F20; margin: 0 30px 30px 0; } .author-bio img { object-fit: cover; width: 300px; height: 300px; } @media only screen and (min-width: 1280px) { .author-bio img { width: 420px; height: 430px; } } .author-bio a, .author-bio .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .author-bio a.share_icon > span { border: 0; } .author-bio .author-bio-meta { padding: 30px; } .author-bio .author-bio-meta a.author-bio-name, .author-bio .author-bio-meta .social-strip .comment-count a.share_icon > span.author-bio-name, .social-strip .comment-count .author-bio .author-bio-meta a.share_icon > span.author-bio-name, .author-bio .author-bio-meta a.author-bio-name:visited, .author-bio .author-bio-meta .social-strip .comment-count a.share_icon > span.author-bio-name:visited, .social-strip .comment-count .author-bio .author-bio-meta a.share_icon > span.author-bio-name:visited, .author-bio .author-bio-meta a.author-bio-name:hover, .author-bio .author-bio-meta .social-strip .comment-count a.share_icon > span.author-bio-name:hover, .social-strip .comment-count .author-bio .author-bio-meta a.share_icon > span.author-bio-name:hover { color: #FFFFFF; } .author-bio .author-bio-meta a.author-bio-twitter, .author-bio .author-bio-meta .social-strip .comment-count a.share_icon > span.author-bio-twitter, .social-strip .comment-count .author-bio .author-bio-meta a.share_icon > span.author-bio-twitter { color: #55ACEE; display: flex; justify-content: center; align-items: center; } .author-bio .author-bio-meta > * { line-height: 30px; text-align: center; display: block; } .author-bio + h2, .author-bio + p { clear: both; } .all-content-wrapper { padding-top: 30px; position: relative; background: #FFFFFF; } .nav-main-height, nav.nav-main .nav-bar, nav.nav-main .nav-menu > div:first-child { height: 60px; } nav.nav-main { background-color: #FFFFFF; width: 100%; position: fixed; z-index: 20; left: 0; top: 0; } @media only screen and (min-width: 1280px) { nav.nav-main .nav-main-fill { display: flex; justify-content: space-between; align-items: center; box-shadow: 0 0 20px 0 rgba(42, 106, 135, 0.1164); background-color: #FFFFFF; } } nav.nav-main .nav-bar { display: flex; justify-content: space-between; align-items: center; padding-left: 30px; padding-right: 30px; background-color: #FFFFFF; width: 100%; } @media only screen and (min-width: 1280px) { nav.nav-main .nav-bar { width: auto; box-shadow: none; } } nav.nav-main .nav-bar h1 { margin: 0; font-size: 2em; line-height: 2em; } nav.nav-main .icon-bars { font-size: 20px; padding: 10px; margin-right: -10px; } @media only screen and (min-width: 1280px) { nav.nav-main .icon-bars { display: none; } } nav.nav-main .nav-menu { position: absolute; right: 0px; top: 0px; margin-left: auto; overflow-y: auto; max-height: 100vh; width: 320px; background-color: white; z-index: -1; transition: transform 100ms ease-in-out; } @media only screen and (min-width: 1280px) { nav.nav-main .nav-menu { position: static; margin: 0; width: auto; display: flex; box-shadow: none; overflow: visible; transition: none; z-index: initial; } } nav.nav-main .nav-menu.nav-menu-hidden { transform: translateX(110%); } @media only screen and (min-width: 1280px) { nav.nav-main .nav-menu.nav-menu-hidden { transform: none; } } nav.nav-main .icon-search { border: 0; line-height: 20px; background: transparent; color: #231F20; font-size: 18px; height: 100%; padding: 10px 30px; display: none; order: 1; position: relative; } @media only screen and (min-width: 1280px) { nav.nav-main .icon-search { display: block; } } nav.nav-main form.search-panel { position: relative; display: flex; align-items: flex-end; padding: 20px; } @media only screen and (min-width: 1280px) { nav.nav-main form.search-panel { display: flex; position: absolute; left: 0; top: 0; width: 100%; z-index: -1; height: 135px; background: #FFFFFF; padding: 20px 10%; transform: translateY(-100%); transition: transform 100ms ease-in-out; } } nav.nav-main form.search-panel .icon-search { display: block; padding: 0; width: 25px; height: 25px; position: absolute; margin-top: -5px; } nav.nav-main form.search-panel input { border: 0; border-bottom: 1px solid black; padding-left: 35px; font-size: 16px; line-height: 1em; padding-bottom: 5px; padding-top: 5px; display: block; width: 100%; outline: none; } nav.nav-main form.search-panel .button-search { margin-bottom: -5px; margin-left: 30px; padding: 15px 30px; white-space: nowrap; border-radius: 5px; display: none; } @media only screen and (min-width: 1280px) { nav.nav-main form.search-panel .button-search { display: inline-block; } } @media only screen and (min-width: 1280px) { nav.nav-main .toggle-checkbox:checked + .nav-menu form.search-panel, nav.nav-main .fieldset input.toggle-checkbox:checked + .nav-menu form.search-panel { transform: translateY(0%); } } img.logo { height: 20px; width: auto; } .list-item-header, .nav-menu ul > li, footer lh { font-size: 14px; font-weight: 500; border-bottom: 1px solid #DADADA; display: block; padding: 20px; text-transform: uppercase; letter-spacing: 3px; } .list-item-header:last-child, .nav-menu ul > li:last-child, footer lh:last-child { border-bottom: 0; } .nav-menu ul { display: block; white-space: nowrap; } @media only screen and (min-width: 1280px) { .nav-menu ul { display: flex; background-color: #FFFFFF; } } .nav-menu ul > li { padding: 0; position: relative; overflow: hidden; line-height: 1em; background-color: #FFFFFF; } @media only screen and (min-width: 1280px) { .nav-menu ul > li { border-bottom: 0; overflow: visible; height: 60px; } } .nav-menu ul > li a, .nav-menu ul > li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .nav-menu ul > li a.share_icon > span { padding: 20px; display: inline-block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-menu ul > li ul.menu { max-height: 0; transition: max-height 0.25s ease-in-out; background-color: #F3F3F3; } @media only screen and (min-width: 1280px) { .nav-menu ul > li ul.menu { display: block; position: relative; overflow: hidden; background-color: #FFFFFF; box-shadow: 0 0 20px 0 rgba(42, 106, 135, 0.1164); z-index: -1; } } .nav-menu ul > li ul.menu li { border-bottom: 0; border-top: 1px solid #DADADA; white-space: nowrap; background-color: #F3F3F3; } @media only screen and (min-width: 1280px) { .nav-menu ul > li ul.menu li { border: 0; height: auto; } .nav-menu ul > li ul.menu li:first-child { margin-top: 20px; } .nav-menu ul > li ul.menu li:last-child { margin-bottom: 20px; } } .nav-menu ul > li ul.menu li a, .nav-menu ul > li ul.menu li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .nav-menu ul > li ul.menu li a.share_icon > span { padding-left: 50px; } @media only screen and (min-width: 1280px) { .nav-menu ul > li ul.menu li a, .nav-menu ul > li ul.menu li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .nav-menu ul > li ul.menu li a.share_icon > span { padding-right: 50px; padding-top: 10px; padding-bottom: 10px; } } .nav-menu ul > li .toggle-checkbox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .nav-menu ul > li input[type=checkbox]:checked ~ ul.menu { max-height: 800px; } .nav-menu ul > li input[type=checkbox]:checked ~ a .dropdown-indicator, .nav-menu ul > li .social-strip .comment-count a.share_icon > input[type=checkbox]:checked ~ span .dropdown-indicator, .social-strip .comment-count .nav-menu ul > li a.share_icon > input[type=checkbox]:checked ~ span .dropdown-indicator { transform: rotate(-45deg); } .featured-articles-container + .columns { background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 600px), url(/wp-content/themes/dualshockers4/images/gray-lightning-pattern115.png); grid-template-columns: 1fr 300px auto; } .featured-articles-container + .columns .sidebar-right { padding-top: 110px; } .columns { grid-column-gap: 3vw; grid-template-columns: 1fr 300px; } @media only screen and (min-width: 1280px) { .columns { display: grid; } } .columns .main-column, .columns .main-column-top { grid-column: 1; grid-row: 2 / 100; } @media only screen and (min-width: 1280px) { .columns .main-column, .columns .main-column-top { width: auto; } } .columns .main-column-bottom { grid-column: 1 / span 2; grid-row: 101 / 200; } .columns .sidebar, .columns .sidebar-right, .columns .sidebar-right-top, .columns .sidebar-right-middle, .columns .sidebar-right-bottom { width: 300px; margin: 0 auto; grid-column: 2; } .columns .sidebar-right, .columns .sidebar-right-top { grid-row: 2; } .columns .sidebar-right-middle { grid-row: 3; display: none; } @media only screen and (min-width: 1280px) { .columns .sidebar-right-middle { display: block; } } .columns .sidebar-right-bottom { grid-row: 4; } .columns-3 { grid-template-columns: auto 1fr 300px; } .columns-3 .main-column { grid-column: 2; } .columns-3 .main-column-bottom { grid-column: 1 / span 3; } .columns-3 .sidebar, .columns-3 .columns .sidebar-right, .columns .columns-3 .sidebar-right, .columns-3 .columns .sidebar-right-top, .columns .columns-3 .sidebar-right-top, .columns-3 .columns .sidebar-right-middle, .columns .columns-3 .sidebar-right-middle, .columns-3 .columns .sidebar-right-bottom, .columns .columns-3 .sidebar-right-bottom { grid-column: 3; } .columns-3.columns-no-wide-feature .sidebar, .columns-3.columns-no-wide-feature .columns .sidebar-right, .columns .columns-3.columns-no-wide-feature .sidebar-right, .columns-3.columns-no-wide-feature .columns .sidebar-right-top, .columns .columns-3.columns-no-wide-feature .sidebar-right-top, .columns-3.columns-no-wide-feature .columns .sidebar-right-middle, .columns .columns-3.columns-no-wide-feature .sidebar-right-middle, .columns-3.columns-no-wide-feature .columns .sidebar-right-bottom, .columns .columns-3.columns-no-wide-feature .sidebar-right-bottom { grid-row: 1/4; } .columns-3 .sidebar-left { grid-column: 1; grid-row: 2/4; display: none; width: 300px; } @media only screen and (min-width: 1280px) { .columns-3 .sidebar-left { display: block; } } .columns-wide-gap { grid-column-gap: 150px; } .columns-narrow-gap { grid-column-gap: 3vw; } .takeover .columns { grid-column-gap: 30px; } .takeover .columns.columns-3 .sidebar-left { display: none; } footer { max-width: 1200px; margin-left: auto; margin-right: auto; } footer ul { flex: 1; } @media only screen and (min-width: 768px) { footer lh { border: 0; padding: 0; } } footer li a, footer li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count footer li a.share_icon > span { border-bottom: 0; font-size: 12px; font-weight: normal; display: block; padding: 10px 35px; } @media only screen and (min-width: 768px) { footer li a, footer li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count footer li a.share_icon > span { padding: 8px 0; } } footer .platforms { display: flex; flex-wrap: wrap; justify-content: flex-start; } footer .platforms lh { width: 100%; margin-bottom: 10px; } footer .platforms li { width: 33.3333333%; flex-grow: 1; } footer .platforms li a, footer .platforms li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count footer .platforms li a.share_icon > span { padding: 10px 0 10px 35px; margin: 0; } @media only screen and (min-width: 768px) { footer .platforms li a, footer .platforms li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count footer .platforms li a.share_icon > span { padding: 8px 0; } } @media only screen and (min-width: 768px) { footer .platforms li:nth-child(even) { width: 40%; } footer .platforms li:nth-child(odd) { width: 60%; } } footer lh + li a, footer lh + li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count footer lh + li a.share_icon > span { margin-top: 10px; } footer li:last-child a, footer li:last-child .social-strip .comment-count a.share_icon > span, .social-strip .comment-count footer li:last-child a.share_icon > span { margin-bottom: 10px; } footer li:last-child { border-bottom: 1px solid #DADADA; } @media only screen and (min-width: 768px) { footer li:last-child { border: 0; } } footer .follow-us { border-bottom: 1px solid #DADADA; text-align: center; padding-bottom: 20px; white-space: nowrap; } footer .follow-us lh { border-bottom: 0; } @media only screen and (min-width: 768px) { footer .follow-us lh { margin-bottom: 10px; text-align: left; margin-left: 5px; } } footer .follow-us li { display: inline-block; border: 0; } footer .follow-us li a, footer .follow-us li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count footer .follow-us li a.share_icon > span { font-size: 25px; display: inline-block; width: 2em; height: 2em; vertical-align: middle; position: relative; line-height: 2em; margin: 0; } footer .follow-us li a > *, footer .follow-us li .social-strip .comment-count a.share_icon > span > *, .social-strip .comment-count footer .follow-us li a.share_icon > span > *, footer .follow-us li a > *:before, footer .follow-us li .social-strip .comment-count a.share_icon > span > *:before, .social-strip .comment-count footer .follow-us li a.share_icon > span > *:before { color: #FFFFFF; } footer .follow-us li a > *, footer .follow-us li .social-strip .comment-count a.share_icon > span > *, .social-strip .comment-count footer .follow-us li a.share_icon > span > * { font-size: 0.9em; line-height: inherit; display: inline-block; position: absolute; left: 0; top: 0; text-align: center; width: 100%; } footer .follow-us li a .icon-circle, footer .follow-us li .social-strip .comment-count a.share_icon > span .icon-circle, .social-strip .comment-count footer .follow-us li a.share_icon > span .icon-circle { font-size: 2em; } footer .follow-us li a .icon-circle:before, footer .follow-us li .social-strip .comment-count a.share_icon > span .icon-circle:before, .social-strip .comment-count footer .follow-us li a.share_icon > span .icon-circle:before { color: #3DA9DA; } @media only screen and (min-width: 768px) { footer .follow-us { text-align: left; border: 0; } } footer .ds-footer { margin-bottom: 30px; } footer .ds-footer li { border: 0; text-align: center; } footer .ds-footer li a, footer .ds-footer li .social-strip .comment-count a.share_icon > span, .social-strip .comment-count footer .ds-footer li a.share_icon > span { line-height: 1em; margin-top: 10px; } footer .ds-footer .copyright { padding-top: 10px; } @media only screen and (min-width: 768px) { footer .ds-footer { min-width: 100%; flex: 5; } } @media only screen and (min-width: 768px) { footer .footer-menu { display: flex; flex-wrap: wrap; margin-top: 60px; } } .click-cover { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; } .dropdown-indicator { display: inline-block; border-bottom: 3px solid #231F20; width: 8px; height: 8px; transform: rotate(45deg); border-left: 3px solid black; transition: transform 100ms ease-in-out; } a.ds_image_link, .social-strip .comment-count a.share_icon > span.ds_image_link { display: block; border: 0; text-align: center; } .cat-meta-text, .article .cat-meta-text, #carousel article .cat-meta-text, .carousel-articles article .cat-meta-text { display: inline-block; background: #23CA8C; padding: 3px 10px; color: #FFFFFF; } .single-post { /* a.ds_image_link { margin: 50px -150px; margin-left: -150px; margin-right: -150px; }*/ } .single-post .post-main h1 { max-width: 700px; } .single-post .post-main h2 { text-align: left; } @media only screen and (min-width: 768px) { .single-post .post-main img { max-width: 670px; width: auto; } } @media only screen and (min-width: 1280px) { .single-post .post-main img { max-width: 100%; width: 100%; } } @media only screen and (min-width: 1280px) { .single-post .post-main.post-main-content { margin: 0 auto; } .single-post .post-main h1 { display: none; } } .single-post .post-main a.ds_image_link, .single-post .post-main .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .single-post .post-main a.share_icon > span.ds_image_link { margin-top: 25px; margin-bottom: 25px; } @media only screen and (min-width: 768px) { .single-post .post-main a.ds_image_link, .single-post .post-main .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .single-post .post-main a.share_icon > span.ds_image_link { margin-top: 35px; margin-bottom: 35px; } } .single-post .post-main .featured-image img { max-width: none; width: 100%; } .single-post .post-main .featured-image.focal-point img.ds_image { height: 33.333333vw; } @media only screen and (min-width: 1900px) { .single-post .post-main .featured-image.focal-point img.ds_image { height: 633.33327px; } } .single-post .post-main .featured-image.no-focal-point a.ds_image_link, .single-post .post-main .featured-image.no-focal-point .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .single-post .post-main .featured-image.no-focal-point a.share_icon > span.ds_image_link { margin-top: 0; margin-left: 0; margin-right: 0; } .single-post .post-main-content { margin-bottom: 20px; max-width: 100%; } .single-post .post-main-content h1 { display: none; max-width: 100%; text-align: left; } @media only screen and (min-width: 1280px) { .single-post .post-main-content h1 { display: block; } } .single-post .post-main-content a.ds_image_link, .single-post .post-main-content .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .single-post .post-main-content a.share_icon > span.ds_image_link { display: block; text-align: center; clear: both; margin-top: 25px; margin-bottom: 25px; } @media only screen and (min-width: 1280px) { .single-post .post-main-content a.ds_image_link, .single-post .post-main-content .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .single-post .post-main-content a.share_icon > span.ds_image_link { margin-top: 35px; margin-bottom: 35px; } } .single-post .post-main-content a.ds_image_link.full-width-image-link img, .single-post .post-main-content .social-strip .comment-count a.share_icon > span.ds_image_link.full-width-image-link img, .social-strip .comment-count .single-post .post-main-content a.share_icon > span.ds_image_link.full-width-image-link img { max-width: none; } .post-main-featured { grid-row: 1; grid-column: 1 / span 3; } .columns-no-wide-feature .post-main-featured { grid-column: 2; } .featured-image { position: relative; } .featured-image img { object-fit: cover; } .wp-caption { width: auto !important; } @media only screen and (min-width: 768px) { .social-strip { float: right; } } .social-strip .social-strip-buttons { float: left; margin-right: 10px; } .social-strip .share_icon { display: inline-block; margin-left: -10px; margin-right: 10px; padding: 10px; border: 0; width: 40px; font-size: 20px; text-align: left; line-height: 1em; } @media only screen and (min-width: 768px) { .social-strip .share_icon { line-height: 45px; } } @media only screen and (min-width: 1280px) { .social-strip .share_icon { font-size: 26px; line-height: 1em; } } .social-strip a.fb_share_icon, .social-strip .comment-count a.share_icon > span.fb_share_icon { color: #3B5998; } .social-strip a.t_share_icon, .social-strip .comment-count a.share_icon > span.t_share_icon { color: #55ACEE; } .social-strip .comment-count { float: right; } .social-strip .comment-count a.share_icon, .social-strip .comment-count a.share_icon > span.share_icon { width: auto; margin-right: 0; } .social-strip .comment-count a.share_icon:visited, .social-strip .comment-count a.share_icon > span.share_icon:visited, .social-strip .comment-count a.share_icon:hover, .social-strip .comment-count a.share_icon > span.share_icon:hover { color: #3DA9DA; } .social-strip .comment-count a.share_icon:before, .social-strip .comment-count a.share_icon > span.share_icon:before { vertical-align: baseline; } .social-strip .comment-count a.share_icon > span, .social-strip .comment-count a.share_icon > span.share_icon > span { position: relative; top: -3px; margin-left: 10px; font-family: Roboto; font-size: 14px; font-weight: bold; } .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count a.share_icon > span.share_icon > span:visited, .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count a.share_icon > span.share_icon > span:hover { color: #3DA9DA; } @media only screen and (min-width: 1280px) { .social-strip .comment-count a.share_icon > span, .social-strip .comment-count a.share_icon > span.share_icon > span { font-size: 16px; } } @media only screen and (min-width: 1280px) { .social-strip-top { float: left; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .social-strip-top .comment-count { float: left; } } .social-strip-bottom .social-strip-buttons { float: none; text-align: center; margin-right: 0; } @media only screen and (min-width: 768px) { .social-strip-bottom { float: none; } } .postmeta-categories { margin: 0px 0 10px 0; white-space: nowrap; height: 21px; overflow: hidden; } @media only screen and (min-width: 768px) { .postmeta-categories { margin-bottom: 35px; } } .postmeta-categories .cat-meta-text { float: left; margin-right: 10px; color: #FFF; } .author { text-align: center; position: relative; } .author a, .author .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .author a.share_icon > span, .author a:hover, .author .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count .author a.share_icon > span:hover, .author a:visited, .author .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count .author a.share_icon > span:visited { display: inline-block; font-style: normal; border-bottom: 0; color: #231F20; } .author img { border-radius: 65px; } .author .author-name { margin-top: 15px; font-weight: bold; font-size: 14px; } .author .pubtime { font-weight: normal; font-size: 12px; } @media only screen and (min-width: 768px) { .author { display: none; text-align: left; } } .author-top, .author-featured-top { display: none; float: left; } .author-top .author-avatar, .author-featured-top .author-avatar { position: absolute; } .author-top .author-name, .author-top .pubtime, .author-featured-top .author-name, .author-featured-top .pubtime { padding: 0; margin-left: 75px; } .author-index { display: block; text-align: left; } @media only screen and (min-width: 768px) { .author-index { display: flex; margin: 10px 0; white-space: nowrap; } } .author-index .author-time { display: none; } @media only screen and (min-width: 768px) { .author-index .author-time { display: inline; } } .author-index .author-avatar { display: none; } .author-index .author-name { margin: 0 7px 0 0; font-weight: lighter; font-size: 12px; display: none; } @media only screen and (min-width: 768px) { .author-index .author-name { display: block; } } .author-index .author-name:before { content: 'By '; } @media only screen and (min-width: 768px) { .author-index .author-name:after { margin-left: 7px; content: '|'; } } .author-index .author-name a, .author-index .author-name .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .author-index .author-name a.share_icon > span { font-weight: normal; } .author-pixel-dark .author a, .author-pixel-dark .author .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .author-pixel-dark .author a.share_icon > span, .author-pixel-dark .author { color: #FFFFFF; } @media only screen and (min-width: 768px) { .author-top { display: block; } } @media only screen and (min-width: 1280px) { .author-top { display: none; } .author-featured-top { display: block; position: absolute; bottom: 0; right: 0; } } .btn-comments { padding-right: 20px; border: 0; background-color: #23CA8C; text-transform: none; font-weight: bold; line-height: 50px; display: flex; justify-content: space-between; align-items: center; } .btn-comments .icon { font-size: 24px; transform: scaleX(1.5); } @media only screen and (min-width: 768px) { .btn-comments { font-size: 16px; line-height: 70px; } } .articles-container h3 { display: flex; align-items: center; justify-content: space-between; margin-top: 0; margin-bottom: 0px; padding-left: 40px; background: url(/wp-content/themes/dualshockers4/images/gray-lightning-pattern115.png) #F6F6F6; font-weight: 300; font-size: 16px; line-height: 50px; } @media only screen and (min-width: 768px) { .articles-container h3 { font-size: 18px; line-height: 75px; } } @media only screen and (min-width: 1280px) { .articles-container h3 { font-size: 24px; line-height: 110px; } } .articles-container h3 button, .articles-container h3 .featured-lg .read-more, .featured-lg .articles-container h3 .read-more { display: block; line-height: inherit; padding-top: 0; padding-bottom: 0; } @media only screen and (min-width: 768px) { .articles-container h3 button, .articles-container h3 .featured-lg .read-more, .featured-lg .articles-container h3 .read-more { width: 235px; } } @media only screen and (min-width: 1280px) { .articles-container h3 button, .articles-container h3 .featured-lg .read-more, .featured-lg .articles-container h3 .read-more { width: 360px; } } .articles { display: flex; flex-wrap: wrap; justify-content: space-between; } .article, #carousel article, .carousel-articles article { width: 100%; margin-bottom: 15px; } .article .meta-text, #carousel article .meta-text, .carousel-articles article .meta-text, .article .fieldset label, .fieldset .article label, #carousel article .fieldset label, .fieldset #carousel article label, .carousel-articles article .fieldset label, .fieldset .carousel-articles article label { margin-top: 20px; border-bottom: 0; } .article .featured-image a, #carousel article .featured-image a, .carousel-articles article .featured-image a, .article .featured-image .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .article .featured-image a.share_icon > span, #carousel article .featured-image .social-strip .comment-count a.share_icon > span, .social-strip .comment-count #carousel article .featured-image a.share_icon > span, .carousel-articles article .featured-image .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .carousel-articles article .featured-image a.share_icon > span { border: none; } .article > *:first-child .meta-text, #carousel article > *:first-child .meta-text, .carousel-articles article > *:first-child .meta-text, .article > *:first-child .fieldset label, .fieldset .article > *:first-child label, #carousel article > *:first-child .fieldset label, .fieldset #carousel article > *:first-child label, .carousel-articles article > *:first-child .fieldset label, .fieldset .carousel-articles article > *:first-child label { margin-top: 0; } .article .featured-image, #carousel article .featured-image, .carousel-articles article .featured-image { flex-shrink: 0; margin-right: 10px; } .article a.ds_image_link, #carousel article a.ds_image_link, .carousel-articles article a.ds_image_link, .article .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .article a.share_icon > span.ds_image_link, #carousel article .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count #carousel article a.share_icon > span.ds_image_link, .carousel-articles article .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .carousel-articles article a.share_icon > span.ds_image_link { margin: 0; } .article .article-content, #carousel article .article-content, .carousel-articles article .article-content { flex-grow: 1; } .article h4, #carousel article h4, .carousel-articles article h4, .article h5, #carousel article h5, .carousel-articles article h5 { margin-top: 10px; margin-bottom: 10px; } .article-sm { display: flex; padding-bottom: 15px; border-bottom: 1px solid #979797; } .article-sm .featured-image { height: 100%; } .article-sm img { width: 100px; height: 65px; } .article-sm h4 { margin: 0; font-size: 12px; line-height: 18px; font-weight: normal; } .article-md { display: flex; margin-bottom: 20px; } .article-md .featured-image { margin-right: 15px; } @media only screen and (min-width: 768px) { .article-md .featured-image { margin-right: 30px; } } @media only screen and (min-width: 1280px) { .article-md .featured-image { margin-right: 50px; } } .article-md img { width: 170px; height: 130px; } @media only screen and (min-width: 768px) { .article-md img { width: 270px; height: 150px; } } @media only screen and (min-width: 1280px) { .article-md img { width: 480px; height: 250px; } } .article-md .meta-text, .article-md .fieldset label, .fieldset .article-md label { margin-top: 0; } @media only screen and (min-width: 1280px) { .article-md .meta-text, .article-md .fieldset label, .fieldset .article-md label { margin-top: 20px; } } .article-md h5 { display: none; } @media only screen and (min-width: 1280px) { .article-md h5 { display: block; } } @media only screen and (min-width: 1280px) { .article-md.article-lg, #carousel article.article-md, .carousel-articles article.article-md { display: block; } .article-md.article-lg .featured-image, #carousel article.article-md .featured-image, .carousel-articles article.article-md .featured-image { margin-right: 0; height: auto; } } @media only screen and (min-width: 1280px) { .takeover .article-md .featured-image { margin-right: 30px; } .takeover .article-md img { width: 270px; height: 150px; } .takeover .article-md .meta-text, .takeover .article-md .fieldset label, .fieldset .takeover .article-md label { margin-top: 20px; } .takeover .article-md h5 { display: none; } .takeover .article-md.article-lg, .takeover #carousel article.article-md, #carousel .takeover article.article-md, .takeover .carousel-articles article.article-md, .carousel-articles .takeover article.article-md { display: flex; } .takeover .article-md.article-lg .featured-image, .takeover #carousel article.article-md .featured-image, #carousel .takeover article.article-md .featured-image, .takeover .carousel-articles article.article-md .featured-image, .carousel-articles .takeover article.article-md .featured-image { margin-right: 30px; } } @media only screen and (min-width: 1280px) { .article-lg img, #carousel article img, .carousel-articles article img { width: 100%; height: 500px; max-height: 36vh; } } .article-lg > *:first-child .meta-text, #carousel article > *:first-child .meta-text, .carousel-articles article > *:first-child .meta-text, .article-lg > *:first-child .fieldset label, .fieldset .article-lg > *:first-child label, #carousel article > *:first-child .fieldset label, .fieldset #carousel article > *:first-child label, .carousel-articles article > *:first-child .fieldset label, .fieldset .carousel-articles article > *:first-child label { margin-top: 0; } @media only screen and (min-width: 1280px) { .article-lg, #carousel article, .carousel-articles article { width: 47%; display: block; } } @media only screen and (min-width: 1280px) { .takeover .article-lg, .takeover #carousel article, #carousel .takeover article, .takeover .carousel-articles article, .carousel-articles .takeover article { width: 100%; } } h3 + .recent-articles { background-color: #FFFFFF; } .featured-articles { display: grid; grid-template-rows: auto 100px 100px 100px 0; grid-gap: 20px; justify-content: normal; } @media only screen and (min-width: 1280px) { .featured-articles { grid-template-columns: auto 1fr 1fr auto; grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr auto; grid-gap: 20px 40px; max-height: 600px; } } .featured { margin: 0; } .featured-lg { position: relative; grid-row: 1/6; grid-column: 1; } @media only screen and (min-width: 1280px) { .featured-lg { width: 100%; grid-column: 1/5; grid-row: 1/8; overflow: hidden; } .featured-lg .fade-overlay:before { content: ''; position: absolute; left: 0; top: 0; width: 200%; display: block; height: 100%; background: radial-gradient(20% 200% at 27% 50%, rgba(64, 64, 64, 0) 0, rgba(64, 64, 64, 0) 50%, rgba(64, 64, 64, 0.6) 60%, rgba(64, 64, 64, 0.9) 90%, #404040 100%); } .featured-lg .fade-overlay:after { content: ''; display: block; background: rgba(64, 64, 64, 0.6); width: 23%; height: 100%; position: absolute; right: 0; top: 0; min-width: 370px; } } .featured-lg .featured-image { margin-right: 0; } .featured-lg .featured-image img { height: 780px; opacity: 0.5; } @media only screen and (min-width: 1280px) { .featured-lg .featured-image img { height: 600px; max-height: none; opacity: 1; } } .featured-lg a.ds_image_link, .featured-lg .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .featured-lg a.share_icon > span.ds_image_link { height: 100%; background-color: #000000; } @media only screen and (min-width: 1280px) { .featured-lg a.ds_image_link, .featured-lg .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .featured-lg a.share_icon > span.ds_image_link { background-color: transparent; } } .featured-lg .article-content { top: 0; left: 0; padding: 60px 60px 0 60px; height: calc(780px - 300px - 80px); position: absolute; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; } @media only screen and (min-width: 1280px) { .featured-lg .article-content { width: 36%; height: 100%; justify-content: center; margin-left: 0; padding: 0 20px 0 50px; } } .featured-lg .meta-text, .featured-lg .fieldset label, .fieldset .featured-lg label { display: none; margin: 0 auto; } .featured-lg .read-more { padding: 15px; margin: 0 auto; } .featured-lg .read-more:before { content: ''; } .featured-lg * { text-align: center; color: #FFFFFF; } .featured-lg h4 { font-size: 24px; line-height: 28px; } @media only screen and (min-width: 1280px) { .featured-lg h4 { font-size: 42px; line-height: 46px; text-shadow: rgba(0, 0, 0, 0.8) 0 1px 1px; } } .featured-lg h4 a, .featured-lg h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .featured-lg h4 a.share_icon > span { color: #FFFFFF; text-shadow: rgba(0, 0, 0, 0.8) 0 1px 1px; } .featured-md { z-index: 2; grid-column: 1; height: 100px; background: #FFFFFF; padding: 15px; margin: 0 20px; width: auto; align-items: center; } @media only screen and (min-width: 1280px) { .featured-md { grid-column: 3; max-width: 55%; height: 100%; margin: 0 0 0 auto; padding: 0; background: transparent; max-width: 40%; min-width: 300px; } } .featured-md .featured-image { height: 100%; } @media only screen and (min-width: 1280px) { .featured-md .featured-image { margin-right: 20px; } } .featured-md a.ds_image_link, .featured-md .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .featured-md a.share_icon > span.ds_image_link { height: 100%; } @media only screen and (min-width: 1280px) { .featured-md a.ds_image_link, .featured-md .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .featured-md a.share_icon > span.ds_image_link { display: flex; align-items: center; } } .featured-md img { height: 100%; width: 100px; } @media only screen and (min-width: 1280px) { .featured-md img { width: 120px; height: 80px; } } .featured-md .meta-text, .featured-md .fieldset label, .fieldset .featured-md label, .featured-md .read-more { display: none; } .featured-md:nth-child(2) { grid-row: 2; } .featured-md:nth-child(3) { grid-row: 3; } .featured-md:nth-child(4) { grid-row: 4; } .featured-md:nth-child(5) { grid-row: 5; } .featured-md:nth-child(6) { grid-row: 6; } .featured-md:nth-child(n + 5) { display: none; } @media only screen and (min-width: 1280px) { .featured-md:nth-child(n + 5) { display: flex; } } @media only screen and (min-width: 1280px) { .featured-md h4, .featured-md h4 a, .featured-md h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .featured-md h4 a.share_icon > span { color: #FFFFFF; font-size: 12px; line-height: 1.25em; } } .archive-articles { flex-wrap: nowrap; flex-direction: column; } @media only screen and (min-width: 768px) { .archive-md h5 { display: block; } } /* RELATED POSTS */ .main-column .related-articles-container { display: block; } @media only screen and (min-width: 1280px) { .main-column .related-articles-container { display: none; } } .main-column .related-articles-container article:nth-child(n+2) { /* Only show the first related article */ display: none; } .main-column .articles-container-hidden { display: none; } .related-inline { background: url(/wp-content/themes/dualshockers4/images/gray-lightning-pattern115.png) #F6F6F6; } @media only screen and (min-width: 1280px) { .related-section { display: flex; flex-wrap: wrap; } } @media only screen and (min-width: 768px) { .related_posts h3 { margin-bottom: 30px; } } .related { margin-bottom: 20px; } .related .meta-text, .related .fieldset label, .fieldset .related label, .related .meta-text:hover, .related .fieldset label:hover, .fieldset .related label:hover, .related .meta-text:visited, .related .fieldset label:visited, .fieldset .related label:visited { margin-top: 20px; border-bottom: 0; color: #FFFFFF; } .related > *:first-child .meta-text, .related > *:first-child .fieldset label, .fieldset .related > *:first-child label { margin-top: 0; } @media only screen and (min-width: 1280px) { .related-lg-container { flex: 1; order: 1; max-width: 66.666666666666%; padding-right: 30px; } } @media only screen and (min-width: 1280px) { .related-md-container { display: flex; order: 0; width: 100%; } .related-md-container article:last-child.related-md { padding-right: 0; } } .related-md .featured-image { float: left; margin-right: 15px; height: 100%; } @media only screen and (min-width: 1280px) { .related-md .featured-image { float: none; height: auto; margin-right: 0px; } } .related-md a.ds_image_link, .related-md .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .related-md a.share_icon > span.ds_image_link { margin: 0; } .related-md img { width: 170px; height: 130px; } @media only screen and (min-width: 768px) { .related-md img { width: 270px; height: 140px; } } @media only screen and (min-width: 1280px) { .related-md img { width: 100%; height: 275px; } } .related-md .article-content { margin-left: calc(170px + 15px); } @media only screen and (min-width: 1280px) { .related-md .article-content { margin-left: 0; } } .related-md h4 { margin-top: 10px; } @media only screen and (min-width: 1280px) { .related-md { width: 33.33333333333%; flex-grow: 1; padding-right: 30px; } } @media only screen and (min-width: 1280px) { .related-sm-container { flex: 1; order: 1; max-width: 33.3333333333%; } } .related-sm { background: url(/wp-content/themes/dualshockers4/images/gray-lightning-pattern115.png) #F6F6F6; padding: 20px 30px; border-bottom: none; } .related-sm h4 { font-size: 14px; line-height: 18px; font-weight: 500; margin: 20px 0; } .related-sm:last-child { margin-bottom: 0; } .related-sm h5, .related-sm img { display: none; } .read-more { vertical-align: middle; } .read-more .read-more-text { font-size: 12px; vertical-align: bottom; } @media only screen and (min-width: 768px) { .read-more .read-more-text { font-size: 14px; } } .read-more:before { color: #23CA8C; } .review-metadata { padding: 30px 24px; background-color: #231F20; color: #FFFFFF; font-weight: 400; font-size: 14px; line-height: 16px; margin-bottom: 30px; display: flex; justify-content: space-between; flex-wrap: wrap; } .review-metadata label { margin-bottom: 8px; display: block; color: #868686; text-transform: uppercase; font-weight: bold; font-size: 11px; line-height: 13px; letter-spacing: 2px; } @media only screen and (min-width: 1280px) { .review-metadata label { display: inline-block; width: 115px; float: left; height: 100%; } } @media only screen and (min-width: 1280px) { .review-metadata ul { width: auto; max-width: none; } } .review-metadata li { margin-bottom: 18px; break-inside: avoid; } .review-metadata li span { padding-left: 1px; } @media only screen and (min-width: 1280px) { .review-metadata li { border-left: 5vw solid transparent; height: 47px; width: 50%; display: block; margin-bottom: 0 !important; } } .review-metadata li.review_provided_by { display: none; } .review-metadata li.review_provided_by label { width: auto; } .review-metadata li:last-child { margin-bottom: 0; } @media only screen and (min-width: 1280px) { .review-metadata { height: 300px; padding-top: 10px; padding-bottom: 10px; align-items: center; } .review-metadata li.review_provided_by { display: block; } } .review-metadata.has-boxart { margin-bottom: 100px; } @media only screen and (min-width: 768px) { .review-metadata.has-boxart { margin-bottom: 100px; } } @media only screen and (min-width: 1280px) { .review-metadata.has-boxart { margin-bottom: 80px; } } .review-metadata-left { flex-grow: 1; min-width: 50%; max-width: 50%; } @media only screen and (min-width: 1280px) { .review-metadata-left { min-width: auto; flex-grow: 0; order: 1; display: flex; flex-direction: column; height: 145px; flex-wrap: wrap; flex-basis: 50%; margin-left: -2.5vw; margin-top: 23px; flex-shrink: 1; } } .review-metadata-right { position: relative; max-width: 50%; } .review-metadata-right label.provided-by { text-align: center; max-width: 240px; padding: 0 10px; position: relative; top: 15px; left: 0; } @media only screen and (min-width: 1280px) { .review-metadata-right { width: auto; flex: 1; text-align: right; max-width: 285px; } .review-metadata-right label { display: none; } } .rating-meter { display: none; } .rating-chart-border { display: inline-block; border-radius: 50%; } .rating-chart-border-1 { padding: 10px; border: dashed 1px #3DA9DA; } .rating-10_0 .rating-chart-border-1 { border: dashed 1px rgba(61, 169, 218, 0.45); } .rating-9_5 .rating-chart-border-1 { border: dashed 1px rgba(35, 202, 140, 0.45); } .rating-6_5 .rating-chart-border-1 { border: dashed 1px rgba(246, 203, 49, 0.45); } .rating-2_5 .rating-chart-border-1 { border: dashed 1px rgba(233, 22, 25, 0.45); } .rating-chart-border-2 { padding: 8px; border: solid 1px #3DA9DA; } .rating-10_0 .rating-chart-border-2 { border: solid 1px rgba(61, 169, 218, 0.75); } .rating-9_5 .rating-chart-border-2 { border: solid 1px rgba(35, 202, 140, 0.75); } .rating-6_5 .rating-chart-border-2 { border: solid 1px rgba(246, 203, 49, 0.75); } .rating-2_5 .rating-chart-border-2 { border: solid 1px rgba(233, 22, 25, 0.75); } .rating-chart-wrapper { width: calc((50vw - 60px)); height: calc((50vw - 60px)); max-width: 200px; max-height: 200px; position: relative; } .rating-chart { width: calc((50vw - 60px)); height: calc((50vw - 60px)); max-width: 200px; max-height: 200px; } .rating-chart-hole { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #231F20; width: calc((50vw - 60px) * 0.7); height: calc((50vw - 60px) * 0.7); max-width: 140px; max-height: 140px; border-radius: 50%; } .rating-number { white-space: nowrap; text-align: center; font-weight: bold; font-size: calc((50vw - 60px) * 0.28); line-height: 1em; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: -0.3em; } @media only screen and (min-width: 520px) { .rating-number { font-size: 56px; } } .rating-text { text-align: center; font-weight: bold; font-size: calc((50vw - 60px) * 0.055); letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; line-height: 1em; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: 2.5em; } @media only screen and (min-width: 520px) { .rating-text { font-size: 11px; } } .review-boxart-container { position: relative; left: 0; top: 0; display: none; margin: 0 auto; height: 160px; overflow: visible; width: 100%; } @media only screen and (min-width: 1280px) { .review-boxart-container { flex: 2; display: block; order: 2; width: 250px; max-width: 350px; height: auto; margin: 0; } .review-boxart-container a, .review-boxart-container .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .review-boxart-container a.share_icon > span, .review-boxart-container a.ds-gallery-link, .review-boxart-container .social-strip .comment-count a.share_icon > span.ds-gallery-link, .social-strip .comment-count .review-boxart-container a.share_icon > span.ds-gallery-link, .review-boxart-container a.ds_image_link, .review-boxart-container .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count .review-boxart-container a.share_icon > span.ds_image_link { margin: 0 !important; position: absolute; top: 0; left: 0; text-align: right; width: 300px; transform: translateY(-50%); } } .has-boxart .review-boxart-container { display: block; } .review-boxart { height: 240px !important; width: auto !important; } @media only screen and (min-width: 1280px) { .review-boxart { height: 350px !important; } } .review-boxart-thumb { width: 100%; height: 100%; object-fit: cover; } body.page main form h4 { text-align: left; } body.page main form .sort-container { padding-right: 0; text-align: right; } body.page main form .sort-container .ddl { display: inline-block; } body.page main form .sort-container .ddl label { border: 0; padding: 15px 30px; background-color: #F6F6F6; } body.page main .review-results, body .review-results { margin-top: 0; overflow: hidden; } body.page main .review-results ul, body .review-results ul { display: flex; justify-content: space-evenly; flex-wrap: wrap; } @media only screen and (min-width: 768px) { body.page main .review-results ul, body .review-results ul { margin-right: -30px; justify-content: center; } } body.page main .review-results ul li, body .review-results ul li { position: relative; margin-bottom: 30px; width: 300px; display: flex; flex-direction: column; } @media only screen and (min-width: 768px) { body.page main .review-results ul li, body .review-results ul li { margin-right: 30px; } } body.page main .review-results ul li a.ds_image_link, body.page main .review-results ul li .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count body.page main .review-results ul li a.share_icon > span.ds_image_link, body .review-results ul li a.ds_image_link, body .review-results ul li .social-strip .comment-count a.share_icon > span.ds_image_link, .social-strip .comment-count body .review-results ul li a.share_icon > span.ds_image_link { width: 300px; height: 171px; margin-bottom: 0; display: block; } body.page main .review-results .review-result-metadata, body .review-results .review-result-metadata { background-color: #231F20; color: #FFFFFF; text-align: center; padding: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; } body.page main .review-results .review-result-metadata > div, body .review-results .review-result-metadata > div { margin-bottom: 15px; } body.page main .review-results .review-result-metadata > div:last-child, body .review-results .review-result-metadata > div:last-child { margin-bottom: 0; } body.page main .review-results .review-result-metadata a, body.page main .review-results .review-result-metadata .social-strip .comment-count a.share_icon > span, .social-strip .comment-count body.page main .review-results .review-result-metadata a.share_icon > span, body.page main .review-results .review-result-metadata a:visited, body.page main .review-results .review-result-metadata .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count body.page main .review-results .review-result-metadata a.share_icon > span:visited, body.page main .review-results .review-result-metadata a:hover, body.page main .review-results .review-result-metadata .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count body.page main .review-results .review-result-metadata a.share_icon > span:hover, body .review-results .review-result-metadata a, body .review-results .review-result-metadata .social-strip .comment-count a.share_icon > span, .social-strip .comment-count body .review-results .review-result-metadata a.share_icon > span, body .review-results .review-result-metadata a:visited, body .review-results .review-result-metadata .social-strip .comment-count a.share_icon > span:visited, .social-strip .comment-count body .review-results .review-result-metadata a.share_icon > span:visited, body .review-results .review-result-metadata a:hover, body .review-results .review-result-metadata .social-strip .comment-count a.share_icon > span:hover, .social-strip .comment-count body .review-results .review-result-metadata a.share_icon > span:hover { border: 0; } .rating-bubble, body.page main .review-results .rating, body .review-results .rating, #carousel article .rating, .carousel-articles article .rating { position: absolute; right: 10px; top: 10px; background: #3DA9DA; border-radius: 50%; font-size: 18px; font-weight: bolder; color: #FFFFFF; display: block; height: 60px; width: 60px; line-height: 60px; text-align: center; } .gallery { display: grid; grid-gap: 10px; margin-bottom: 1em; justify-content: center; justify-items: center; grid-template-columns: repeat(auto-fill, 150px); } .gallery br { display: none; } .gallery dl.gallery-item, .gallery figure.gallery-item { margin: 0; width: 150px; } .gallery dl.gallery-item img, .gallery figure.gallery-item img { object-fit: cover; width: 100%; height: auto; } @media only screen and (min-width: 768px) { .gallery { grid-gap: 30px; } } @media only screen and (min-width: 1280px) { .gallery { grid-gap: 3vw; } } @media only screen and (min-width: 1280px) { .gallery.full-width-gallery { margin-left: -100px; margin-right: -100px; } } #carousel, .carousel-articles { display: flex; flex-wrap: nowrap; position: relative; top: 0; left: -55%; max-width: 100%; width: 100%; height: 100%; padding: 0; } @media only screen and (min-width: 768px) { #carousel, .carousel-articles { left: 0; } } #carousel article, .carousel-articles article { width: 70%; min-width: 70%; cursor: pointer; margin: 0; padding: 0; position: relative; overflow: hidden; } @media only screen and (min-width: 768px) { #carousel article, .carousel-articles article { width: 33.333333%; min-width: 33.333333%; } } #carousel article .rating, .carousel-articles article .rating { font-size: 18px; width: 40px; height: 40px; line-height: 40px; top: 20px; right: 20px; } @media only screen and (min-width: 768px) { #carousel article .rating, .carousel-articles article .rating { font-size: 24px; width: 65px; height: 65px; line-height: 65px; } } #carousel article .article-content, .carousel-articles article .article-content { position: absolute; padding: 0 30px 23px 30px; top: initial; bottom: 0; max-width: 100%; } @media only screen and (min-width: 768px) { #carousel article .article-content, .carousel-articles article .article-content { padding: 0 40px 30px 40px; } } #carousel article .featured-image, .carousel-articles article .featured-image { margin: 0; } #carousel article .featured-image img, .carousel-articles article .featured-image img { height: 300px; max-height: 300px; opacity: 1; } @media only screen and (min-width: 768px) { #carousel article .featured-image img, .carousel-articles article .featured-image img { height: 500px; max-height: 500px; } } @media only screen and (min-width: 1280px) { #carousel article .featured-image img, .carousel-articles article .featured-image img { height: 900px; max-height: 900px; } } #carousel article .featured-image .fade-overlay, .carousel-articles article .featured-image .fade-overlay { background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0) 16%, rgba(28, 28, 28, 0.85) 89%, rgba(0, 0, 0, 0.85) 100%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #carousel article h4 a, #carousel article h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count #carousel article h4 a.share_icon > span, .carousel-articles article h4 a, .carousel-articles article h4 .social-strip .comment-count a.share_icon > span, .social-strip .comment-count .carousel-articles article h4 a.share_icon > span { color: #FFF; } #carousel article *, .carousel-articles article * { color: #FFF; } .carousel-container { position: relative; width: 100%; overflow: hidden; } .slidebtn { cursor: pointer; position: absolute; bottom: 0; height: 100%; width: 40px; display: flex; align-items: center; } .slidebtn .slidebtn-inner { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.8); width: 35px; height: 26%; } .slidebtn.prev { left: 0; } .slidebtn.prev .slidebtn-inner { border-radius: 0 5px 5px 0; } .slidebtn.next { right: 0; justify-content: flex-end; } .slidebtn.next .slidebtn-inner { border-radius: 5px 0 0 5px; } .transition { transition: .2s; } body.page .columns { display: block; } body.page main h1 { text-align: center; } body.page main h2 { margin-bottom: 30px; } body.page main h4 { text-align: center; } body.page main .main-column { width: 100%; max-width: 1330px; margin: 0 auto; grid-column: 1; } body.page main .main-column .flex-video { margin: 90px 0; } body.page main section { margin-top: 30px; } @media only screen and (min-width: 1280px) { body.page main section { margin-top: 100px; } } body.page main aside { margin: 60px auto 0 auto; padding-top: 20px; border-top: 1px solid #23CA8C; text-align: center; } @media only screen and (min-width: 768px) { body.page main aside { width: 80%; } } body.page main .zebra, body.page main .info { margin-top: 0; margin-bottom: 0; padding-top: 30px; padding-bottom: 30px; background-color: #FFFFFF; } body.page main .zebra h2, body.page main .info h2 { margin-top: 0; } body.page main .zebra h2:first-child, body.page main .info h2:first-child { font-weight: bold; } body.page main .zebra:nth-child(odd), body.page main .info:nth-child(odd) { background-color: #F6F6F6; } @media only screen and (min-width: 1280px) { body.page main .zebra, body.page main .info { margin-left: 0; margin-right: 0; margin-top: 30px; } } body.page main .page-content ul { display: flex; flex-wrap: wrap; justify-content: center; } @media only screen and (min-width: 768px) { body.page main .page-content ul { justify-content: initial; } } @media only screen and (min-width: 1280px) { body.page main .page-content ul { justify-content: initial; } } body.page main section.callout { text-align: center; } body.page main section.callout ul { justify-content: space-around; } @media only screen and (min-width: 1280px) { body.page main section.callout ul { justify-content: space-between; } } body.page main section.callout ul li { min-width: 300px; max-width: 300px; margin-bottom: 30px; } @media only screen and (min-width: 768px) { body.page main section.staff { width: calc(100% + 30px); } } body.page main section.staff ul { margin-left: 30px; } @media only screen and (min-width: 768px) { body.page main section.staff ul { margin-left: 0; } } @media only screen and (min-width: 768px) { body.page main section.staff h2 { text-align: left; } } body.page main section.staff h2.hero { text-align: center; } body.page main section.contact { text-align: center; } body.page main section.contact ul { flex-flow: column; } @media only screen and (min-width: 768px) { body.page main section.contact ul { flex-flow: row; justify-content: space-around; } } body.page.page-about-dualshockers { background: linear-gradient(175deg, rgba(255, 255, 255, 0), 700px, white 0), url(/wp-content/themes/dualshockers4/images/gray-lightning-pattern440.png) #F6F6F6; } body.page.page-about-dualshockers .all-content-wrapper { background: none transparent; } body.page.page-about-dualshockers main { padding-top: 70px; } body.page.page-about-dualshockers main h1 { margin: 0.67em 0; } body.page.page-about-dualshockers main h2 { margin: 0 0 30px 0; } @media only screen and (min-width: 1280px) { body.page.page-about-dualshockers main .main-column > p, body.page.page-about-dualshockers main .main-column > strong { margin-left: 70px; margin-right: 70px; } } body.page.page-about-dualshockers .flex-video { padding-bottom: 54.5%; } @media only screen and (min-width: 768px) { body.page.page-about-dualshockers { background: linear-gradient(175deg, rgba(255, 255, 255, 0), 70vh, white 0), url(/wp-content/themes/dualshockers4/images/gray-lightning-pattern440.png) #F6F6F6; } } .ds-ad-container { line-height: 0; overflow: hidden; margin: 30px auto; } .ds-ad-container-300 { max-width: 300px; float: none; margin: 0px auto 20px auto; } .ds-ad-container-728 { margin-top: 0; } .ds-ad-container-728.ds-ad-container-below { margin-top: 30px; } .ds-ad { position: relative; left: 50%; transform: translate(-50%, 0px); display: inline-block; } .ds-ad-300 { width: 300px; min-height: 250px; } div[id^=div-gpt-ad-] { line-height: 0; } .enthusiast_in_article_ad { position: relative; text-align: center; left: auto !important; clear: both; margin-top: 30px !important; margin-bottom: 30px !important; } .enthusiast_in_article_ad > * { display: inline-block; }