@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);#container:after,ul.social-buttons:after,#contact ul.button-stack a:after,#contact ul.button-stack a.button:after,ul.cards li div.card-wrap div.info a.outline-border-button:after,ul.cards li div.card-wrap div.info ul.buttons:after,ul.cards li div.card-wrap div.info:after,ul.cards:after,nav ul:after,nav:after,#contact header.hero .content .subscribe header:after,#contact header.hero .content .subscribe:after,#contact header.hero .content:after,div.thumb-grid:after,div.columns .left:after,div.columns .right:after,#home div.columns .right .publishing section.content:after,#home div.columns .right .publishing:after,#home div.columns .right .social:after,.page-template-game div.columns .left div.content div.title ul.buttons:after,.page-template-game div.columns .left div.content div.overview div.awards:after,.page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-carousel:after,.page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-nav:after,.page-template-game div.columns .right .sidebar .content div.game-features ul:after,.page-template-game div.columns .right .sidebar .content div.more-images ul:after,.page-template-game div.columns .right .sidebar .content div.communication ul li:after,div.columns:after,#home div.top-story .body .content:after,#home div.top-story .body:after,div.story-columns .more-stories ul li:after,div.story-columns .second-story:after,div.story-columns .second-story section:after,div.story-columns:after,#publishing div.overview div.columns:after,div.publishing-features ul:after,div.lets-do-this a.button:after,div.dev-story .content-wrap header:after,div.articles:after,div#navbelow div a:after,div#navbelow:after,div#tweet-feed:after,footer ul:after,footer:after,.search section:after,.blog article.first .excerpt-wrap:after,.blog article.second .excerpt-wrap:after,.single article.first .excerpt-wrap:after,.single article.second .excerpt-wrap:after,.blog article ul.share-buttons:after,.single article ul.share-buttons:after,.blog article.card header h2:after,.single article.card header h2:after,.blog article.card ul.share-buttons:after,.single article.card ul.share-buttons:after,.blog article.card:after,.single article.card:after,.blog aside .content ul.more-stories li a:after,.single aside .content ul.more-stories li a:after,.search aside .content ul.more-stories li a:after,.page-template-default aside .content ul.more-stories li a:after,.page-template-presskit aside .content ul.more-stories li a:after,.blog aside .content section.most-popular ul li:after,.single aside .content section.most-popular ul li:after,.search aside .content section.most-popular ul li:after,.page-template-default aside .content section.most-popular ul li:after,.page-template-presskit aside .content section.most-popular ul li:after,.clearfix:after,.manual-carousel .slide .info ul.button-set:after,.manual-carousel .carousel-wrap:after{content:"";display:table;clear:both;}@font-face{font-family:'icomoon';src:url("../fonts/icomoon.eot?e09f3z");src:url("../fonts/icomoon.eot?#iefixe09f3z") format("embedded-opentype"),url("../fonts/icomoon.ttf?e09f3z") format("truetype"),url("../fonts/icomoon.woff?e09f3z") format("woff"),url("../fonts/icomoon.svg?e09f3z#icomoon") format("svg");font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.icon-play_trailer .path1:before{content:"\e61f";color:black;}.icon-play_trailer .path2:before{content:"\e620";margin-left:-1.01953125em;color:white;}.icon-arrow:before{content:"\e600";}.icon-plus2:before{content:"\e61d";}.icon-development:before{content:"\e60c";}.icon-marketing:before{content:"\e60d";}.icon-promotion:before{content:"\e60e";}.icon-support:before{content:"\e60f";}.icon-porting:before{content:"\e610";}.icon-noodlecake:before{content:"\e601";}.icon-consulting:before{content:"\e618";}.icon-amazon:before{content:"\e606";}.icon-blackberry:before{content:"\e608";}.icon-roku:before{content:"\e61a";}.icon-ouya:before{content:"\e619";}.icon-joystick:before{content:"\e609";}.icon-controller:before{content:"\e611";}.icon-facebook:before{content:"\e612";}.icon-vine:before{content:"\e61b";}.icon-embiggen:before{content:"\e61e";}.icon-plus:before{content:"\e114";}.icon-minus:before{content:"\e115";}.icon-expand-less:before{content:"\e616";}.icon-expand-more:before{content:"\e617";}.icon-back:before{content:"\e607";}.icon-forward:before{content:"\e613";}.icon-chevron-left2:before{content:"\e614";}.icon-chevron-right2:before{content:"\e615";}.icon-close:before{content:"\e117";}.icon-email-open:before{content:"\e602";}.icon-email:before{content:"\e603";}.icon-notifications:before{content:"\e604";}.icon-gplay:before{content:"\e605";}.icon-chevron-right:before{content:"\e60a";}.icon-chevron-left:before{content:"\e60b";}.icon-inbox:before{content:"\e122";}.icon-quote-left:before{content:"\f10d";}.icon-play-circle:before{content:"\f144";}.icon-mail-forward:before{content:"\f064";}.icon-apple:before{content:"\f179";}.icon-paper-plane-o:before{content:"\f1d9";}.icon-life-bouy:before{content:"\f1cd";}.icon-search:before{content:"\f002";}.icon-spinner:before{content:"\e97a";}.icon-steam:before{content:"\eaad";}.icon-windows8:before{content:"\eac3";}.icon-twitter:before{content:"\ea91";}.icon-youtube:before{content:"\ea9a";}.icon-youtube2:before{content:"\e61c";}.mfp-arrow-left,.mfp-arrow-right{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:110px;background-color:transparent;font-size:2rem;cursor:pointer;color:white;-webkit-transition:background-color 0.5s ease-out;-moz-transition:background-color 0.5s ease-out;-ms-transition:background-color 0.5s ease-out;-o-transition:background-color 0.5s ease-out;transition:background-color 0.5s ease-out;}.mfp-arrow-left:hover,.mfp-arrow-right:hover{background-color:#5466c1;-webkit-transition:background-color 0.5s ease-out;-moz-transition:background-color 0.5s ease-out;-ms-transition:background-color 0.5s ease-out;-o-transition:background-color 0.5s ease-out;transition:background-color 0.5s ease-out;}.mfp-arrow-left:after,.mfp-arrow-right:after{display:none!important;}.mfp-arrow-left svg,.mfp-arrow-right svg{display:none;}.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:0.8;filter:alpha(opacity=80);}.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:none!important;-webkit-backface-visibility:hidden;}.mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0 8px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle;}.mfp-align-top .mfp-container:before{display:none;}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045;}.mfp-inline-holder .mfp-content,.mfp-ajax-holder .mfp-content{width:100%;cursor:auto;}.mfp-ajax-cur{cursor:progress;}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{}.mfp-zoom{}.mfp-auto-cursor .mfp-content{cursor:auto;}.mfp-close,.mfp-arrow,.mfp-preloader,.mfp-counter{-webkit-user-select:none;-moz-user-select:none;user-select:none;}.mfp-loading.mfp-figure{display:none;}.mfp-hide{display:none!important;}.mfp-preloader{color:#CCC;position:absolute;top:50%;width:auto;text-align:center;margin-top:-0.8em;left:8px;right:8px;z-index:1044;}.mfp-preloader a{color:#CCC;}.mfp-preloader a:hover{color:#FFF;}.mfp-s-ready .mfp-preloader{display:none;}.mfp-s-error .mfp-content{display:none;}button.mfp-close,button.mfp-arrow{overflow:visible;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;display:block;outline:none;padding:0;z-index:1046;-webkit-box-shadow:none;box-shadow:none;}button::-moz-focus-inner{padding:0;border:0;}.mfp-close{position:absolute;right:-1.33em;top:0em;text-decoration:none;text-align:center;padding:0 0 18px 10px;color:#FFF;font-style:normal;font-size:2em;font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";filter:alpha(opacity=65);-moz-opacity:0.65;-khtml-opacity:0.65;opacity:0.65;-webkit-opacity:0.65;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;-ms-transition:opacity 0.5s ease-out;-o-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;}.mfp-close:before{content:"\e117";}.mfp-close:hover,.mfp-close:focus{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;-webkit-opacity:1;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;-ms-transition:opacity 0.5s ease-out;-o-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;}.mfp-close-btn-in .mfp-close{color:#333;}.mfp-image-holder .mfp-close,.mfp-iframe-holder .mfp-close{color:#FFF;text-align:right;padding-right:6px;width:100%;}.mfp-counter{position:absolute;top:0;right:0;color:#CCC;font-size:12px;line-height:18px;white-space:nowrap;}.mfp-arrow{position:absolute;opacity:0.65;filter:alpha(opacity=65);margin:0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent;}.mfp-arrow:hover,.mfp-arrow:focus{opacity:1;filter:alpha(opacity=100);}.mfp-arrow:before,.mfp-arrow:after,.mfp-arrow .mfp-b,.mfp-arrow .mfp-a{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:medium inset transparent;}.mfp-arrow:after,.mfp-arrow .mfp-a{border-top-width:13px;border-bottom-width:13px;top:8px;}.mfp-arrow:before,.mfp-arrow .mfp-b{border-top-width:21px;border-bottom-width:21px;opacity:0.7;}.mfp-arrow-left{left:0;padding:0em;-webkit-border-top-left-radius:0px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:0px;}.mfp-arrow-left:before{width:50%;height:auto;padding:0em;margin:0em;border-bottom-width:0em;border-top-width:0em;padding-left:25%;content:"\e607";}.mfp-arrow-right{right:0;padding:0em;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:0px;-moz-border-radius-bottomright:0px;-moz-border-radius-bottomleft:5px;border-top-left-radius:5px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:5px;}.mfp-arrow-right:before{width:auto;height:auto;padding:0em;margin:0em;border-bottom-width:0em;border-top-width:0em;padding-left:25%;content:"\e613";}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px;}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px;}.mfp-iframe-holder .mfp-close{top:-40px;}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%;}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000;}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:40px 0 40px;margin:0 auto;}.mfp-figure{line-height:0;}.mfp-figure:after{content:'';position:absolute;left:0;top:40px;bottom:40px;display:block;right:0;width:auto;height:auto;z-index:-1;box-shadow:0 0 8px rgba(0,0,0,0.6);background:#444;}.mfp-figure small{color:#BDBDBD;display:block;font-size:12px;line-height:14px;}.mfp-figure figure{margin:0;}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto;}.mfp-title{text-align:left;line-height:18px;color:#F3F3F3;word-wrap:break-word;padding-right:36px;}.mfp-image-holder .mfp-content{max-width:100%;}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer;}@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0;}.mfp-img-mobile img.mfp-img{padding:0;}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0;}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px;}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,0.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0;}.mfp-img-mobile .mfp-counter{right:5px;top:3px;}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,0.6);position:fixed;text-align:center;padding:0;}}@media all and (max-width: 900px) {.mfp-arrow{-webkit-transform:scale(0.75);transform:scale(0.75);}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0;}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%;}.mfp-container{padding-left:6px;padding-right:6px;}}.mfp-ie7 .mfp-img{padding:0;}.mfp-ie7 .mfp-bottom-bar{width:600px;left:50%;margin-left:-300px;margin-top:5px;padding-bottom:5px;}.mfp-ie7 .mfp-container{padding:0;}.mfp-ie7 .mfp-content{padding-top:44px;}.mfp-ie7 .mfp-close{top:0;right:0;padding-top:0;}.mfp-fade.mfp-bg{opacity:0;-webkit-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;transition:all 0.4s ease-out;}.mfp-fade.mfp-bg.mfp-ready{opacity:0.8;}.mfp-fade.mfp-bg.mfp-removing{opacity:0;}.mfp-fade.mfp-wrap .mfp-content{opacity:0;-webkit-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;transition:all 0.4s ease-out;}.mfp-fade.mfp-wrap.mfp-ready .mfp-content{opacity:1;}.mfp-fade.mfp-wrap.mfp-removing .mfp-content{opacity:0;}@-webkit-keyframes logo-animation{0%{background-position:center center;}50%{background-position:center -5em;}50.1% { background-position: center 5em; } 100% { background-position: center center; } } @-moz-keyframes logo-animation { 0% { background-position: center center; } 50% { background-position: center -5em; } 50.1% { background-position: center 5em; } 100% { background-position: center center; } } @-o-keyframes logo-animation { 0% { background-position: center center; } 50% { background-position: center -5em; } 50.1% { background-position: center 5em; } 100% { background-position: center center; } } @keyframes logo-animation { 0% { background-position: center center; } 50% { background-position: center -5em; } 50.1% { background-position: center 5em; } 100% { background-position: center center; } } @-webkit-keyframes cloud-animation { 0% { left: -160px; } 100% { left: 110%; } } @-moz-keyframes cloud-animation { 0% { left: -160px; } 100% { left: 110%; } } @-o-keyframes cloud-animation { 0% { left: -160px; } 100% { left: 110%; } } @keyframes cloud-animation { 0% { left: -160px; } 100% { left: 110%; } } @-webkit-keyframes search-animation { 0% { width: 0px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } 1% { } 25% { width: 100%; } 75% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; } } @-moz-keyframes search-animation { 0% { width: 0px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } 1% { } 25% { width: 100%; } 75% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; } } @-o-keyframes search-animation { 0% { width: 0px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } 1% { } 25% { width: 100%; } 75% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; } } @keyframes search-animation { 0% { width: 0px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } 1% { } 25% { width: 100%; } 75% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; } } @-webkit-keyframes countspan-animation { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } } @-moz-keyframes countspan-animation { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } } @-o-keyframes countspan-animation { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } } @keyframes countspan-animation { 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } } @-webkit-keyframes mobile-nav-close { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } } @-moz-keyframes mobile-nav-close { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } } @-o-keyframes mobile-nav-close { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } } @keyframes mobile-nav-close { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } } @-webkit-keyframes spinner-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-moz-keyframes spinner-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-o-keyframes spinner-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes spinner-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @font-face { font-family: 'PT-Schoolhouse'; src: url("../fonts/pt_schoolhouse-webfont.eot"); src: url("../fonts/pt_schoolhouse-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/pt_schoolhouse-webfont.woff2") format("woff2"), url("../fonts/pt_schoolhouse-webfont.woff") format("woff"), url("../fonts/pt_schoolhouse-webfont.ttf") format("truetype"), url("../fonts/pt_schoolhouse-webfont.svg#pt_schoolhousenormal") format("svg"); font-weight: normal; font-style: normal; } body, html { width: 100%; height: 100%; font-size: 14px; font-family: "Quicksand", Helvetica, Arial, sans-serif; margin: 0em; padding: 0em; background: #a8a8a8 url("../img/bg.jpg") left top repeat-x; background-position: left top; position: relative; } @media (min-width: 480px) and (max-width: 759px) { body, html { overflow: auto; background: none; -webkit-overflow-scrolling: touch; } } @media (max-width: 479px) { body, html { overflow: auto; background: none; -webkit-overflow-scrolling: touch; } } body.disable-hover, html.disable-hover { pointer-events: none; } #container { max-width: 1440px; height: auto !important; position: relative; min-height: 100%; width: 100%; height: 100%; margin: 0em auto; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #container.fixed { padding-top: 55px; } #home #container { background: black; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNzEzNDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, black 0%, #071345 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, #071345)); background: -webkit-linear-gradient(top, black 0%, #071345 100%); background: -o-linear-gradient(top, black 0%, #071345 100%); background: -ms-linear-gradient(top, black 0%, #071345 100%); background: linear-gradient(to bottom, black 0%, #071345 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#071345',GradientType=0 ); } #publishing #container { background-color: #012d78; background-image: url("../img/publishing-sky_gradient.png"), url("../img/bg-publishing.png"); background-repeat: no-repeat, repeat; background-size: 740px 740px, 210px 210px; background-position: right 75px, left top; } @media (min-width: 760px) and (max-width: 1079px) { #publishing #container { background-position: right 55px; background-size: 640px 640px, 210px 210px; } } @media (min-width: 480px) and (max-width: 759px) { #publishing #container { background-position: right -180px top 55px; background-size: 580px 580px, 210px 210px; } } @media (max-width: 479px) { #publishing #container { background-image: url(""), url("../img/bg-publishing.png"); } } #about #container { padding-top: 0em; background-image: url("../img/header-about.jpg"); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; background-size: cover; background-color: #071345; } @media (min-width: 480px) and (max-width: 759px) { #about #container { background-size: auto 100%; background-attachment: scroll; } } @media (max-width: 479px) { #about #container { background-size: auto 100%; background-attachment: scroll; } } #games #container { background-color: #071345; background: #071345 url("../img/px_header-darkblue.png") repeat left top; background-position: left top; z-index: 0; } #games #container #spinner { background-color: #071345; text-align: center; display: none; } #games #container #spinner.on { display: block; } #games #container #spinner .icon-spinner { display: inline-block; font-size: 3em; height: 1em; line-height: 1; color: #fcfdff; margin: 0.5em; margin-top: 0em; text-shadow: 0 0 0.25em rgba(255, 255, 255, 0.3); animation: spinner-rotate 1s infinite steps(8); } .page-template-game #container { background-color: #071345; } #careers #container, .blog #container, .single #container, .search #container, .page-template-default #container, .page-template-presskit #container { background-color: #071345; } #services #container { background-color: #071345; background-image: url("../img/header-services.png"); background-position: center top; background-size: contain; background-repeat: no-repeat; } @media (min-width: 480px) and (max-width: 759px) { #services #container { background-size: auto; } } @media (max-width: 479px) { #services #container { background-size: auto; } } @media (max-width: 479px) { #container { padding-top: 0em !important; } } @media (min-width: 480px) and (max-width: 759px) { #container { padding-top: 0em !important; } } @media (min-width: 760px) and (max-width: 1079px) { #container { padding-top: 0em !important; } } h1, h2, h3, h4, h5, h6 { letter-spacing: 0.07em; } h1.center-lined, h2.center-lined, h3.center-lined, h4.center-lined, h5.center-lined, h6.center-lined { position: relative; z-index: 0; } h1.center-lined span, h2.center-lined span, h3.center-lined span, h4.center-lined span, h5.center-lined span, h6.center-lined span { background-color: #eff5ff; padding: 0.5em 0.75em; } h1.center-lined::after, h2.center-lined::after, h3.center-lined::after, h4.center-lined::after, h5.center-lined::after, h6.center-lined::after { display: block; content: ""; width: 100%; height: 1px; background-color: #d7d5c9; position: absolute; top: 50%; left: 0em; z-index: -1; } #contact h1.center-lined, #contact h2.center-lined, #contact h3.center-lined, #contact h4.center-lined, #contact h5.center-lined, #contact h6.center-lined { font-family: "PT-Schoolhouse", sans-serif; letter-spacing: 0.07em; color: #8a8a88; } @media (max-width: 479px) { h1.center-lined::after, h2.center-lined::after, h3.center-lined::after, h4.center-lined::after, h5.center-lined::after, h6.center-lined::after { display: none; } } p { font-family: "Quicksand", Helvetica, Arial, sans-serif; font-size: 1.15em; font-weight: 400; line-height: 1.6em; color: #656565; } p.headline::after { display: block; content: " "; position: absolute; width: 20px; height: 4px; background-color: #e1e1e1; margin: 2em auto 2em -10px; left: 50%; } ul.social-buttons { display: inline-block; margin: 0em auto; padding: 0em; list-style: none; padding-bottom: 1em; text-align: center; } ul.social-buttons li { float: left; margin-right: 0.5em; } ul.social-buttons li a { font-size: 1rem; padding: 0.3em 0.4em 0.2em; color: white; /* border-top-width: 3px; border-top-style: solid; color: white; */ -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } ul.social-buttons li a span { font-size: 1rem; text-shadow: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } ul.social-buttons li a:hover { text-decoration: none; } ul.social-buttons li a:hover span { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; -webkit-opacity: 0.5; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } ul.social-buttons li.twitter a { background-color: #00aced; box-shadow: 0px -2px 0px 0px #89d4f0; } ul.social-buttons li.facebook a { padding-left: 0.7em; padding-right: 0.6em; background-color: #3b5998; box-shadow: 0px -2px 0px 0px #7c96cc; } ul.social-buttons li.youtube a { background-color: #bb0000; box-shadow: 0px -2px 0px 0px #f07474; } ul.social-buttons li.vine { display: none; } ul.social-buttons li.vine a { background-color: #00a478; box-shadow: 0px -2px 0px 0px #22deaf; } #contact ul.social-buttons, #careers ul.social-buttons { padding: 2em 0em; } #contact ul.social-buttons li a, #careers ul.social-buttons li a { padding: 0.6em 0.7em 0.5em; font-size: 1.15em; } #contact ul.social-buttons li a span, #careers ul.social-buttons li a span { font-size: 1.15em; } #contact ul.social-buttons li.facebook a, #careers ul.social-buttons li.facebook a { padding-left: 0.9em; padding-right: 0.9em; } @media (min-width: 760px) and (max-width: 1079px) { #contact ul.social-buttons li a, #careers ul.social-buttons li a { font-size: 1.15em; } #contact ul.social-buttons li a span, #careers ul.social-buttons li a span { font-size: 1.15em; } } @media (min-width: 480px) and (max-width: 759px) { #contact ul.social-buttons li a, #careers ul.social-buttons li a { font-size: 1.1em; } #contact ul.social-buttons li a span, #careers ul.social-buttons li a span { font-size: 1.1em; } } @media (max-width: 479px) { #contact ul.social-buttons li a, #careers ul.social-buttons li a { font-size: 1em; } #contact ul.social-buttons li a span, #careers ul.social-buttons li a span { font-size: 1em; } } #home ul.social-buttons { float: right; padding-top: 1.5em; } #home ul.social-buttons li a { padding: 0.8em 1em; } #home ul.social-buttons li.vine { margin-right: 0em; } #home ul.social-buttons li.facebook a { padding: 0.8em 1.3em; } #home ul.social-buttons li.youtube a { padding: 0.7em 1em; } #home ul.social-buttons li.youtube a span[class*='icon-'] { font-size: 1.15em; } ul.share-buttons { margin: 0em; padding: 0em; list-style: none; } ul.share-buttons li { display: inline-block; margin-right: 0.5em; } ul.share-buttons li a { color: #5466c1; border-color: #5466c1; padding: 0.7em 0.7em 0.5em; border-width: 1px; border-style: solid; border-color: #5466c1; color: #5466c1; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } ul.share-buttons li.twitter a { padding-left: 0.7em; padding-right: 0.6em; } ul.share-buttons li.facebook a { padding-left: 0.9em; padding-right: 0.9em; } ul.share-buttons li.share a { padding-left: 0.7em; padding-right: 0.6em; } ul.button-stack { margin: 0em; padding: 0em; list-style: none; } ul.button-stack a, ul.button-stack a.button { display: block; width: 100%; padding-left: 0em; padding-right: 0em; margin: 0em; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } ul.button-stack li { display: block; height: inherit; max-width: 50%; margin: 3px auto 0em auto; padding: 0em; } ul.button-stack li:first-child a, ul.button-stack li:first-child a.button { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } @media (min-width: 1080px) and (max-width: 1199px) { ul.button-stack li { max-width: 70%; } ul.button-stack li a, ul.button-stack li a.button { font-size: 1.15em; } } @media (min-width: 480px) and (max-width: 759px) { ul.button-stack li { max-width: 60%; } } @media (max-width: 479px) { ul.button-stack li { max-width: 80%; } } #contact ul.button-stack { width: 26%; position: relative; left: 36.99%; /* position: absolute; left: 36.99%; bottom: 0em; */ } #contact ul.button-stack li { max-width: none; } #contact ul.button-stack a, #contact ul.button-stack a.button { padding: 1em 1em; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #contact ul.button-stack a span, #contact ul.button-stack a.button span { margin: 0em; } #contact ul.button-stack a span[class*='icon-'], #contact ul.button-stack a.button span[class*='icon-'] { float: right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } #contact ul.button-stack a span[class*='icon-email-open'], #contact ul.button-stack a.button span[class*='icon-email-open'] { display: none; } #contact ul.button-stack a:hover span, #contact ul.button-stack a.button:hover span { margin: 0em; } #contact ul.button-stack a:hover span[class*='icon-'], #contact ul.button-stack a.button:hover span[class*='icon-'] { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } #contact ul.button-stack a:hover span[class*='icon-email'], #contact ul.button-stack a.button:hover span[class*='icon-email'] { display: none; } #contact ul.button-stack a:hover span[class*='icon-email-open'], #contact ul.button-stack a.button:hover span[class*='icon-email-open'] { display: inline; } @media (min-width: 1080px) and (max-width: 1199px) { #contact ul.button-stack li { max-width: none; } } @media (min-width: 760px) and (max-width: 960px) { #contact ul.button-stack { width: 65%; left: auto; margin: 0em auto; } } @media (min-width: 480px) and (max-width: 759px) { #contact ul.button-stack { width: 85%; left: auto; margin: 0em auto; } #contact ul.button-stack li { max-width: none; } } @media (max-width: 479px) { #contact ul.button-stack { width: 92%; left: auto; margin: 0em auto; } #contact ul.button-stack li { max-width: none; } } ul.cards { width: 100%; margin: 0em; padding: 1.5em 0.75em; list-style: none; background-image: url("../img/page_gradient-fallback.png"); background-position: left bottom -500px; background-repeat: repeat-x; background-size: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul.cards li { display: block; width: 25%; height: 350px; padding: 0.5em; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul.cards li:nth-child(1) div.card-wrap { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 15px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } ul.cards li:nth-child(4) div.card-wrap { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 15px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } ul.cards li:last-child div.card-wrap { -webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px; } ul.cards li.bl-cap div.card-wrap { -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-left-radius: 15px; } ul.cards li div.card-wrap { width: 100%; height: 100%; position: relative; background-image: url("../img/px_default-light.png"); overflow: hidden; transform: translate3d(0, 0, 0); background-color: white; cursor: pointer; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; /* div.canvas-wrap { height: 100%; background-image: url('../img/px_default.png'); @include nc-opacity(0.3); canvas { width: auto; height: 100%; } } */ } ul.cards li div.card-wrap div.info { width: 100%; position: absolute; height: auto; top: 40%; bottom: -40%; background-color: rgba(255, 255, 255, 0.85); border-top: 2px solid white; text-align: center; padding-bottom: 1.5em; -webkit-transition: bottom 0.2s ease-out; -moz-transition: bottom 0.2s ease-out; -ms-transition: bottom 0.2s ease-out; -o-transition: bottom 0.2s ease-out; transition: bottom 0.2s ease-out; } ul.cards li div.card-wrap div.info h1 { padding: 1em 1em 0.5em 1em; margin: 0em; font-size: 1.4em; font-family: "PT-Schoolhouse", sans-serif; color: #5466c1; font-weight: 400; } ul.cards li div.card-wrap div.info span { display: block; position: relative; color: #9e9e97; /* &::after { display: block; content: " "; width: 20px; height: 4px; position: absolute; bottom: 0em; } */ } ul.cards li div.card-wrap div.info span:not([class*='icon-']) { font-family: "Quicksand", Helvetica, Arial, sans-serif; } ul.cards li div.card-wrap div.info p { font-size: 1em; padding: 0em 1em 0.75em 1em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } ul.cards li div.card-wrap div.info div.content { min-height: 280px; } ul.cards li div.card-wrap div.info div.icon-wrap { position: relative; z-index: 1; margin-top: -40px; } ul.cards li div.card-wrap div.info div.icon { width: 120px; height: 120px; margin: 0em auto; position: relative; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } ul.cards li div.card-wrap div.info div.icon::after { display: block; content: " "; position: absolute; width: 140px; height: 21px; background-image: url("../img/icon_shadow.png"); background-repeat: no-repeat; background-size: 100% 100%; bottom: -10px; left: -10px; z-index: -1; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } ul.cards li div.card-wrap div.info div.icon img { width: 100%; } ul.cards li div.card-wrap div.info div.press-kit { position: absolute; bottom: 0em; left: 0em; border-top-width: 1px; border-top-style: solid; border-top-color: #5466c1; border-right-width: 1px; border-right-style: solid; border-right-color: #5466c1; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } ul.cards li div.card-wrap div.info div.press-kit a { padding: 0.7em; } ul.cards li div.card-wrap div.info div.press-kit a span { display: inline; color: #5466c1; } ul.cards li div.card-wrap div.info a.outline-border-button { border-color: #5466c1; } ul.cards li div.card-wrap div.info a.outline-border-button span { float: left; color: #5466c1; } ul.cards li div.card-wrap div.info a.outline-border-button::after { border-color: #5466c1; } ul.cards li div.card-wrap div.info ul.buttons { width: 100%; list-style: none; margin: 0em; padding: 0em; position: absolute; bottom: 0em; } ul.cards li div.card-wrap div.info ul.buttons li { width: auto; height: auto; float: right; text-align: center; padding: 0em; padding-right: 0.8em; margin: 0em; /* border-top-width: 1px; border-top-color: $nc-button-blue; border-top-style: solid; border-left-width: 1px; border-left-color: $nc-button-blue; border-left-style: solid; */ /* &:first-child { float: left; border-left: none; border-right-width: 1px; border-right-color: $nc-button-blue; border-right-style: solid; @include nc-border-radius(0px, 5px, 0px, 0px); } */ } ul.cards li div.card-wrap div.info ul.buttons li a { text-align: center; font-size: 1em; color: #5466c1; padding: 0.7em; text-decoration: none; } ul.cards li div.card-wrap div.info ul.buttons li a span { display: inline; font-size: 1.15em; color: #5466c1; } ul.cards li div.card-wrap div.info ul.buttons li:last-child { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } ul.cards li div.card-wrap div.info ul.buttons li.store.last { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } ul.cards li div.card-wrap div.info ul.buttons li.store.amazon a { padding: 0.9em 0.6em 0.5em; } ul.cards li div.card-wrap div.info ul.buttons li.store.blackberry a { padding: 0.9em 0.6em 0.7em; } ul.cards li div.card-wrap div.info ul.buttons li.store.blackberry a span[class*='icon-'] { font-size: 0.9em; } ul.cards li div.card-wrap a.share { position: absolute; right: 1em; top: 1em; text-decoration: none; z-index: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } ul.cards li div.card-wrap a.share span[class*='icon-'] { color: #5466c1; } @media (min-width: 1080px) and (max-width: 1199px) { ul.cards li:nth-child(3) div.card-wrap { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 15px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } ul.cards li:nth-child(4) div.card-wrap { -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; } ul.cards li:last-child div.card-wrap { -webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px; } } @media (min-width: 760px) and (max-width: 1079px) { ul.cards li:nth-child(3) div.card-wrap { -webkit-border-top-right-radius: 15px; -moz-border-radius-topright: 15px; border-top-right-radius: 15px; } ul.cards li:nth-child(4) div.card-wrap { -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; } } @media (min-width: 480px) and (max-width: 759px) { ul.cards li:nth-child(2) div.card-wrap { -webkit-border-top-right-radius: 15px; -moz-border-radius-topright: 15px; border-top-right-radius: 15px; } ul.cards li:nth-child(4) div.card-wrap { -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; } } @media (max-width: 479px) { ul.cards li:first-child div.card-wrap { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } ul.cards li:nth-child(4) div.card-wrap { -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; } ul.cards li:last-child div.card-wrap { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } } @media (min-width: 1080px) and (max-width: 1199px) { ul.cards li { width: 33%; } ul.cards li div.card-wrap:hover div.info { top: auto; bottom: 0em; -webkit-transition: bottom 0.2s ease-out; -moz-transition: bottom 0.2s ease-out; -ms-transition: bottom 0.2s ease-out; -o-transition: bottom 0.2s ease-out; transition: bottom 0.2s ease-out; } ul.cards li div.card-wrap:hover div.info span { padding-bottom: 0em; -webkit-transition: padding-bottom 0.2s ease-out; -moz-transition: padding-bottom 0.2s ease-out; -ms-transition: padding-bottom 0.2s ease-out; -o-transition: padding-bottom 0.2s ease-out; transition: padding-bottom 0.2s ease-out; } ul.cards li div.card-wrap:hover div.info p { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } ul.cards li div.card-wrap:hover div.info div.icon { width: 80px; height: 80px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } ul.cards li div.card-wrap:hover div.info div.icon::after { width: 100px; height: 15px; bottom: -6px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } ul.cards li div.card-wrap:hover div.info ul.buttons { display: block; } ul.cards li div.card-wrap:hover a.share { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } } @media (min-width: 1200px) { ul.cards li div.card-wrap:hover div.info { top: auto; bottom: 0em; -webkit-transition: bottom 0.2s ease-out; -moz-transition: bottom 0.2s ease-out; -ms-transition: bottom 0.2s ease-out; -o-transition: bottom 0.2s ease-out; transition: bottom 0.2s ease-out; } ul.cards li div.card-wrap:hover div.info span { padding-bottom: 0em; -webkit-transition: padding-bottom 0.2s ease-out; -moz-transition: padding-bottom 0.2s ease-out; -ms-transition: padding-bottom 0.2s ease-out; -o-transition: padding-bottom 0.2s ease-out; transition: padding-bottom 0.2s ease-out; } ul.cards li div.card-wrap:hover div.info p { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } ul.cards li div.card-wrap:hover div.info div.icon { width: 80px; height: 80px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } ul.cards li div.card-wrap:hover div.info div.icon::after { width: 100px; height: 15px; bottom: -6px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } ul.cards li div.card-wrap:hover div.info ul.buttons { display: block; } ul.cards li div.card-wrap:hover a.share { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } } @media (min-width: 760px) and (max-width: 1079px) { ul.cards li { width: 33%; height: 260px; } ul.cards li div.card-wrap div.canvas-wrap { /* background-image: url('../img/px_default.png'); background-position: center top; */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; -webkit-opacity: 0.2; } ul.cards li div.card-wrap div.info { bottom: -45%; } ul.cards li div.card-wrap div.info h1 { font-size: 1em; } ul.cards li div.card-wrap div.info span { font-size: 0.8em; } ul.cards li div.card-wrap div.info div.icon { width: 80px; height: 80px; } ul.cards li div.card-wrap div.info div.icon::after { width: 100px; height: 15px; bottom: -6px; } } @media (min-width: 480px) and (max-width: 759px) { ul.cards li { width: 50%; height: 260px; } ul.cards li div.card-wrap div.canvas-wrap { background-image: url("../img/px_default.png"); background-position: center top; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; -webkit-opacity: 0.2; } ul.cards li div.card-wrap div.info { bottom: -45%; } ul.cards li div.card-wrap div.info h1 { font-size: 1em; } ul.cards li div.card-wrap div.info span { font-size: 0.8em; } ul.cards li div.card-wrap div.info div.icon { width: 80px; height: 80px; } ul.cards li div.card-wrap div.info div.icon::after { width: 100px; height: 15px; bottom: -6px; } } @media (max-width: 479px) { ul.cards li { width: 100%; height: 260px; } ul.cards li div.card-wrap div.canvas-wrap { /* background-image: url('../img/px-default.png'); background-position: center top; */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; -webkit-opacity: 0.2; } ul.cards li div.card-wrap div.info { bottom: -45%; } ul.cards li div.card-wrap div.info h1 { font-size: 1em; } ul.cards li div.card-wrap div.info span { font-size: 0.8em; } ul.cards li div.card-wrap div.info div.icon { width: 100px; height: 100px; } ul.cards li div.card-wrap div.info div.icon::after { width: 112px; height: 17px; bottom: -9px; } } em { color: #1f3291; text-transform: uppercase; letter-spacing: 0.3em; font-style: normal; font-weight: normal; } .blog em, .single em, .search em, .page-template-default em, .page-template-presskit em { color: #87b7fb; text-transform: none; font-style: italic; letter-spacing: 0.1em; } a { font-family: "Quicksand", Helvetica, Arial, sans-serif; display: inline-block; color: #5466c1; text-decoration: none; font-weight: 700; position: relative; /* ANIMATED LINK DECORATION &::after { display: block; width: 0em; height: 1px; content: ""; position: absolute; bottom: 0.1em; background-color: $nc-button-blue; @include nc-transition(width, 0.2s); } */ } a:href, a:visited, a:active { outline: none; } a:href img, a:visited img, a:active img { border: none; } a img { border: none; } a.button { padding: 0.65em 1em 0.8em; font-family: "Quicksand", Helvetica, Arial, sans-serif; overflow: hidden; text-align: center; color: white; font-size: 1.5em; text-decoration: none; background-color: #5466c1; -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out; -ms-transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out; box-shadow: 0px -2px 0px 0px #7e8fe5; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } a.button span[class*='icon-'] { position: relative; top: 0.07em; } a.button:hover { background-color: #4455a7; -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out; -ms-transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out; } a.outline-button { color: white; padding: 0.7em 1em; border-width: 1px; border-style: solid; font-size: 1em; cursor: pointer !important; text-decoration: none; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } a.outline-button.white { border-color: white; } a.outline-border-button { padding: 0.8em 1.4em 0.8em 1.15em; color: white; border: 1px solid white; text-decoration: none; font-weight: 700; font-size: 1.15em; position: relative; margin: 0em auto; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } a.outline-border-button span[class*='icon-'] { padding-right: 0.2em; padding-left: 0em; -webkit-transition: padding 0.2s linear; -moz-transition: padding 0.2s linear; -ms-transition: padding 0.2s linear; -o-transition: padding 0.2s linear; transition: padding 0.2s linear; } a.outline-border-button:hover span[class*='icon-'] { padding-right: 0em; padding-left: 0.2em; -webkit-transition: padding 0.2s linear; -moz-transition: padding 0.2s linear; -ms-transition: padding 0.2s linear; -o-transition: padding 0.2s linear; transition: padding 0.2s linear; } #about header a.outline-border-button span[class*='icon-'] { margin-right: auto; margin-left: auto; } #about header a.outline-border-button:hover span[class*='icon-'] { margin-right: auto; margin-left: auto; } a.outline-border-button::after { display: block; content: " "; width: 100%; height: 10px; background-color: transparent; position: absolute; left: -1px; top: -4px; border-top-style: solid; border-top-width: 1px; border-top-color: white; border-right-style: solid; border-right-width: 1px; border-right-color: white; border-left-style: solid; border-left-width: 1px; border-left-color: white; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } a.outline-border-button.blue { color: #5466c1; border-color: #5466c1; } a.outline-border-button.blue::after { border-color: #5466c1; } a.text-button { font-size: 1.4em; font-family: "PT-Schoolhouse", sans-serif; color: white; text-decoration: none; letter-spacing: 0.07em; /* #home & { span[class*='icon-'] { margin-right: 0.05rem; } &:hover { span[class*="icon-"] { margin-right: 0em; margin-left: 0.05em; } } } */ } a.text-button span[class*="icon-"] { margin-right: 0.2em; margin-left: 0em; font-size: 0.8em; -webkit-transition: margin 0.1s ease-out; -moz-transition: margin 0.1s ease-out; -ms-transition: margin 0.1s ease-out; -o-transition: margin 0.1s ease-out; transition: margin 0.1s ease-out; } a.text-button:hover span[class*="icon-"] { margin-right: 0em; margin-left: 0.2em; -webkit-transition: margin 0.1s ease-out; -moz-transition: margin 0.1s ease-out; -ms-transition: margin 0.1s ease-out; -o-transition: margin 0.1s ease-out; transition: margin 0.1s ease-out; } a.text-button:hover span { margin-left: 0em; -webkit-transition: margin-left 0.1s ease-out; -moz-transition: margin-left 0.1s ease-out; -ms-transition: margin-left 0.1s ease-out; -o-transition: margin-left 0.1s ease-out; transition: margin-left 0.1s ease-out; } a.arrow-link span[class*='icon-'] { margin-right: 0.3em; margin-left: 0em; -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -ms-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; transition: margin 0.2s ease-out; } a.arrow-link:hover span[class*='icon-'] { margin-right: 0em; margin-left: 0.3em; text-decoration: none; -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -ms-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; transition: margin 0.2s ease-out; } a.test-button { display: inline-block; min-width: 200px; padding: 1em; background-color: #ba0001; color: white; text-decoration: none; font-size: 1.5em; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } a.test-button:hover { background-color: #f21b1c; } a.screen-thumb { width: auto; position: relative; } a.screen-thumb div { position: absolute; width: 100%; height: 100%; background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.7))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#b3000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -ms-transition: opacity 1s ease-out; -o-transition: opacity 1s ease-out; transition: opacity 1s ease-out; } a.screen-thumb:hover div { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-transition: opacity 0.4s ease-out; -moz-transition: opacity 0.4s ease-out; -ms-transition: opacity 0.4s ease-out; -o-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } a.screen-thumb img { width: 100%; } a.svg { position: relative; cursor: pointer !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a.svg::after { content: ""; display: block; position: absolute; top: -5px; right: 0; bottom: 0; left: 0; cursor: pointer !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 479px) { a.text-button span[class*='icon-'] { margin-right: 0em; } } *.centered { text-align: center; } img { height: auto; max-width: 100%; vertical-align: middle; } nav { width: 100%; background-color: #1f3291; position: relative; } nav ul { position: relative; float: left; margin: 0em; /* margin-right: -5px; margin-bottom: -4px; */ font-size: 1.2em; padding: 0em; list-style: none; } nav ul li { position: relative; text-align: center; float: left; border-right: 1px solid #5466c1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } nav ul li a { color: white; padding: 1em 0em; width: 100%; padding-left: 0em; padding-right: 0em; text-transform: uppercase; font-family: "PT-Schoolhouse", sans-serif; letter-spacing: 0.05em; -webkit-font-smoothing: antialiased; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } nav ul li a:hover { color: #5466c1; } nav ul li.current_page_item a { color: #5466c1; } nav ul#primary { width: 52%; } nav ul#primary li { width: 18.5%; } nav ul#primary li:first-child { width: 25%; background: -moz-radial-gradient(center, ellipse cover, #394a9e 0%, #1f3291 49%); background: -webkit-gradient(radial, center top, 0px, center center, 100%, color-stop(0%, #394a9e), color-stop(49%, #1f3291)); background: -webkit-radial-gradient(top, ellipse cover, #394a9e 0%, #1f3291 49%); background: -o-radial-gradient(top, ellipse cover, #394a9e 0%, #1f3291 49%); background: -ms-radial-gradient(top, ellipse cover, #394a9e 0%, #1f3291 49%); background: radial-gradient(ellipse at top, #394a9e 0%, #1f3291 49%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#394a9e', endColorstr='#1f3291',GradientType=1 ); } nav ul#primary li:first-child a { width: 100%; position: relative; padding-left: 0em; padding-right: 0em; text-indent: -10000px; } nav ul#primary li:first-child a:hover::before { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } nav ul#primary li:first-child a::after { display: block; width: 100%; height: 100%; content: ""; background-image: url("../img/noodlecake-mark.png"); background-size: 48px 40px; -webkit-background-size: 48px 40px; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0em; top: 0em; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { nav ul#primary li:first-child a::after { background-image: url("../img/noodlecake-mark@2x.png"); /* background-size: $w $h; -webkit-background-size: $w $h; */ } } nav ul#primary li:first-child a::before { display: block; width: 100%; height: 100%; content: ""; background-image: url("../img/noodlecake-mark-shadow.png"); background-size: 136px 130px; -webkit-background-size: 136px 130px; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0em; top: 0em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { nav ul#primary li:first-child a::before { background-image: url("../img/noodlecake-mark-shadow@2x.png"); /* background-size: $w $h; -webkit-background-size: $w $h; */ } } nav ul#secondary { width: 48%; } nav ul#secondary li { width: 20%; } nav ul#secondary li.searchbox { width: 60%; height: 100%; } nav ul#secondary li a { color: #7e8fe5; } nav ul#secondary li a:hover { color: #5466c1; } nav ul#secondary li #searchform { margin: 0em; padding: 0em; width: 100%; position: relative; } nav ul#secondary li #searchform input[type='text'] { margin: 0; border: 0; padding: 0; display: inline-block; vertical-align: middle; white-space: normal; background: none; padding: 1.7em 1.2em 0.9em; font-size: 1em; width: 100%; background-color: transparent; margin-top: -12px; min-height: 100%; font-family: "Quicksand", Helvetica, Arial, sans-serif; color: #5466c1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } nav ul#secondary li #searchform input[type='text']::-webkit-input-placeholder { color: #5466c1; } nav ul#secondary li #searchform input[type='text']:focus { background-color: white; color: #353535; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } nav ul#secondary li #searchform input[type='text']:focus::-webkit-input-placeholder { color: #d7d5c9; } nav ul#secondary li #searchform button { display: block; height: 100%; background: red; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; cursor: pointer; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: none; background-color: transparent; color: white; font-size: 1.2em; position: absolute; right: 0.6em; top: 0em; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } nav ul#secondary li #searchform button::before { content: "\f002"; } nav ul#secondary li #searchform:hover input[type='text'] { background-color: white; color: #353535; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } nav ul#secondary li #searchform:hover input[type='text']::-webkit-input-placeholder { color: #d7d5c9; } nav ul#secondary li #searchform:hover button { color: #1f3291; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } nav ul#secondary li #searchform:hover button:focus { outline: 0; } nav ul#secondary li:last-child { border-right: none; } nav .mobile-nav { position: absolute; display: none; right: 1em; top: 0.9em; z-index: 1; padding: 0em; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } @media (min-width: 480px) and (max-width: 759px) { nav .mobile-nav { display: block; } } @media (max-width: 479px) { nav .mobile-nav { display: block; } } @media (max-width: 980px) { nav .mobile-nav { display: block; } } nav .mobile-nav .tcon { appearance: none; border: none; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 30px; transition: 0.3s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 35px; background: transparent; outline: none; } nav .mobile-nav .tcon > * { display: block; } nav .mobile-nav .tcon:hover, nav .mobile-nav .tcon:focus { outline: none; } nav .mobile-nav .tcon::-moz-focus-inner { border: 0; } nav .mobile-nav .tcon-menu__lines { display: inline-block; height: 2px; width: 25px; border-radius: 1px; transition: 0.3s; background: white; position: relative; } nav .mobile-nav .tcon-menu__lines::before, nav .mobile-nav .tcon-menu__lines::after { display: inline-block; height: 2px; width: 35px; border-radius: 1px; transition: 0.3s; background: white; content: ''; position: absolute; left: 0; -webkit-transform-origin: 1px center; transform-origin: 1px center; width: 100%; } nav .mobile-nav .tcon-menu__lines::before { top: 8px; } nav .mobile-nav .tcon-menu__lines::after { top: -8px; } nav .mobile-nav .tcon-transform .tcon-menu__lines { -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8); } nav .mobile-nav .tcon-transform .tcon-menu__lines::before, nav .mobile-nav .tcon-transform .tcon-menu__lines::after { background: white; } nav .mobile-nav .tcon-menu--xbutterfly { width: auto; } nav .mobile-nav .tcon-menu--xbutterfly .tcon-menu__lines::before, nav .mobile-nav .tcon-menu--xbutterfly .tcon-menu__lines::after { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; transition: top .3s .6s ease, -webkit-transform .3s ease; transition: top .3s .6s ease, transform .3s ease; } nav .mobile-nav .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines { background: transparent; } nav .mobile-nav .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::before, nav .mobile-nav .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::after { top: 0; transition: top .3s ease, -webkit-transform .3s .5s ease; transition: top .3s ease, transform .3s .5s ease; width: 35px; } nav .mobile-nav .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } nav .mobile-nav .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::after { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); } nav .mobile-nav .tcon-visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } nav .mobile-nav .tcon-visuallyhidden:active, nav .mobile-nav .tcon-visuallyhidden:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } @media (min-width: 1080px) and (max-width: 1199px) { nav ul#primary li { width: 20%; } nav ul#primary li:first-child { width: 20%; } } @media (min-width: 760px) and (max-width: 1079px) { nav ul#primary li { width: 20%; } nav ul#primary li:first-child { width: 20%; } } @media (max-width: 980px) { nav ul { float: none; } nav ul#primary { max-height: 3.4em; } nav ul#primary, nav ul#secondary { width: 100%; overflow: hidden; -webkit-transition: max-height 0.5s ease-out; -moz-transition: max-height 0.5s ease-out; -ms-transition: max-height 0.5s ease-out; -o-transition: max-height 0.5s ease-out; transition: max-height 0.5s ease-out; } nav ul#primary li, nav ul#secondary li { width: 100%; overflow: hidden; border-bottom: 0px solid #1f3291; -webkit-transition: border-bottom 0.5s ease-out; -moz-transition: border-bottom 0.5s ease-out; -ms-transition: border-bottom 0.5s ease-out; -o-transition: border-bottom 0.5s ease-out; transition: border-bottom 0.5s ease-out; } nav ul#primary li:first-child, nav ul#secondary li:first-child { width: 100%; } nav ul#primary li.searchbox, nav ul#secondary li.searchbox { width: 100%; } nav ul#primary li #searchform input[type='text'], nav ul#secondary li #searchform input[type='text'] { margin-top: -4px; padding: 0em; background-color: white; padding: 1em; } nav ul#primary li #searchform input[type='text']::-webkit-input-placeholder, nav ul#secondary li #searchform input[type='text']::-webkit-input-placeholder { color: #d7d5c9; } nav ul#primary li #searchform button, nav ul#secondary li #searchform button { color: #1f3291; } nav ul li { float: none; border-right: none; } nav ul#secondary { max-height: 0em; } nav.active ul#primary, nav.active ul#secondary { max-height: 500px; -webkit-transition: max-height 0.5s ease-out; -moz-transition: max-height 0.5s ease-out; -ms-transition: max-height 0.5s ease-out; -o-transition: max-height 0.5s ease-out; transition: max-height 0.5s ease-out; } nav.active ul#primary li, nav.active ul#secondary li { border-bottom: 1px solid #5466c1; -webkit-transition: border-bottom 0.5s ease-out; -moz-transition: border-bottom 0.5s ease-out; -ms-transition: border-bottom 0.5s ease-out; -o-transition: border-bottom 0.5s ease-out; transition: border-bottom 0.5s ease-out; } nav.active ul#secondary { max-height: 500px; } } #games header { width: 100%; position: relative; overflow: hidden; margin: 0em auto; padding: 0em 0em 3em; } #games header img { width: 100%; position: absolute; top: 0em; left: 0em; } #games header .title { width: 800px; height: 400px; position: absolute; left: 50%; top: 0em; margin: 0em auto 0em -400px; } #games header .title.games { background-position: center center; } #games header .title::before, #games header .title::after { display: block; content: " "; width: 100%; height: 400px; position: absolute; top: 0em; background-color: rgba(30, 51, 142, 0.9); } #games header .title::before { left: -800px; } #games header .title::after { right: -800px; } #games header h1 { color: rgba(192, 217, 255, 0.8); font-size: 5em; font-family: "PT-Schoolhouse", sans-serif; font-weight: 400; margin: 0em; padding: 0.75em 0em 0em; text-shadow: 0px 3px 0px rgba(7, 19, 69, 0.25); } #games header h2 { color: white; font-size: 1.3em; } #games header p { font-size: 1.15em; padding: 1em 0em 2em; color: white; margin: 0em auto; } #games header a.outline-border-button { width: 25%; } @media (min-width: 760px) and (max-width: 1079px) { #games header { /* background-image: url('../img/px-default.png'); background-position: center top; & .canvas-wrap { display: none; } */ } #games header .title-two p { font-size: 1.15em; } } @media (min-width: 480px) and (max-width: 759px) { #games header h1 { font-size: 3.5em; } #games header h2 { font-size: 1.1em; } #games header p { font-size: 1.1em; } #games header a.outline-border-button { width: 33%; font-size: 1.1em; } } @media (max-width: 479px) { #games header { height: auto; overflow: auto; /* background-image: url('../img/px-default.png'); background-position: center top; */ } #games header .title { position: relative; } #games header .title-two { position: relative; } #games header .title-two h1 { font-size: 3em; } #games header .title-two h2 { font-size: 1em; } #games header .title-two p { font-size: 1em; } #games header .title-two a.outline-border-button { font-size: 1em; } #games header a.outline-border-button { width: auto; } } #about header { position: relative; height: 100%; max-height: 100%; } #about header .content-wrap { background-image: url("../img/page_gradient-fallback.png"); background-position: left bottom; background-repeat: repeat-x; background-size: 1px 500px; } #about header .content { margin: 0em 1.5em; text-align: center; color: white; position: relative; overflow: auto; background-image: url("../img/header-about.jpg"); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; background-size: cover; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } #about header .content p { color: white; } #about header .content .page-content { padding: 6em 0em 3em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; } #about header .content .page-content p { text-align: justify; padding: 1em 0em; } #about header .content .center-clip { max-width: 70%; } @media (min-width: 480px) and (max-width: 759px) { #about header .content { background-size: auto 100%; background-attachment: scroll; } #about header .content .center-clip { max-width: 90%; } } @media (max-width: 479px) { #about header .content { background-size: auto 100%; background-attachment: scroll; } #about header .content .center-clip { max-width: 95%; } } #about header .title h1 { position: relative; color: white; font-family: "PT-Schoolhouse", sans-serif; letter-spacing: 0.07em; font-size: 5em; } #about header .title .introduction p { padding: 0em 0em 3em 0em; } #about header .title a.continue, #about header .title div.continue { color: #5466c1; font-size: 3em; } #about header .title a.continue span[class='icon-minus'], #about header .title div.continue span[class='icon-minus'] { position: relative; top: -0.3em; } #about header .title a.continue:hover, #about header .title div.continue:hover { text-decoration: none; } #about header .overlay-wrap { width: 100%; left: 0em; bottom: 0em; } #about header .overlay { position: relative; background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size: cover; text-align: center; margin: 0em auto; } #about header .overlay a { margin: 5em 0em 3em; } @media (min-width: 760px) and (max-width: 1079px) { #about header .title h1 { font-size: 4em; } #about header .title .introduction p { font-size: 0.9em; } #about header .overlay a { font-size: 1em; margin: 3em 0em 2em; } #about header .content p { font-size: 0.9em; line-height: 1.6em; } } @media (min-width: 480px) and (max-width: 759px) { #about header .title h1 { font-size: 4em; } #about header .title .introduction p { font-size: 1.1em; } #about header .overlay-wrap { position: relative; } #about header .overlay { background-image: none; } #about header .overlay a { font-size: 1.1em; margin: 3em 0em; } #about header .content { margin: 0em 1em; } #about header .content p { font-size: 1.1em; } #about header .content .page-content { padding-bottom: 0em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } } @media (max-width: 479px) { #about header .title h1 { font-size: 4em; } #about header .title .introduction p { font-size: 1em; } #about header .overlay-wrap { position: relative; } #about header .overlay { position: relative; background-image: none; } #about header .overlay a { font-size: 1em; margin: 3em 0em; } #about header .content { margin: 0em 0.25em; } #about header .content p { font-size: 1em; } #about header .content .page-content { padding-bottom: 0em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; } } #services header { background-repeat: no-repeat; background-position: center bottom; text-align: center; overflow: auto; background-attachment: fixed; } #services header .content { max-width: 55%; margin: 0em auto; padding: 12em 0em; } #services header .content h2 { color: #c0d9ff; letter-spacing: 0em; padding-top: 2em; } #services header .content p { font-size: 1.15em; color: white; } #services header .consulting-logo { display: block; width: 400px; height: 59px; text-indent: -10000px; margin: 0em auto; background-image: url("../img/logo-ncc.png"); background-size: 100% 100%; -webkit-background-size: 100% 100%; background-repeat: no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #services header .consulting-logo { background-image: url("../img/logo-ncc@2x.png"); /* background-size: $w $h; -webkit-background-size: $w $h; */ } } #services header span[class*='icon-'] { position: relative; padding: 0.05em; color: #9e9e97; font-size: 4em; -webkit-border-top-left-radius: 100%; -webkit-border-top-right-radius: 100%; -webkit-border-bottom-right-radius: 100%; -webkit-border-bottom-left-radius: 100%; -moz-border-radius-topleft: 100%; -moz-border-radius-topright: 100%; -moz-border-radius-bottomright: 100%; -moz-border-radius-bottomleft: 100%; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; } @media (min-width: 760px) and (max-width: 1079px) { #services header .content { max-width: 70%; padding: 6em 0em; } #services header .content p { font-size: 1.15em; } } @media (min-width: 480px) and (max-width: 759px) { #services header .content { max-width: 85%; padding: 4em 0em; } #services header .content p { font-size: 1.1em; } #services header .content .title h2 { padding-top: 0.5em; } #services header .consulting-logo { width: 350px; height: 52px; } } @media (max-width: 479px) { #services header .content { max-width: 90%; padding: 2em 0em; } #services header .content p { font-size: 1em; } #services header .content .title h2 { padding-top: 0em; } #services header .consulting-logo { width: 270px; height: 40px; } } .page-template-default .page-content header, .page-template-presskit .page-content header { padding: 3em 3em 1em 0em; position: relative; margin-left: 3em; } .page-template-default .page-content header h1, .page-template-presskit .page-content header h1 { font-family: "PT-Schoolhouse", sans-serif; color: #8a8a88; font-size: 1.7em; } .page-template-default .page-content header::after, .page-template-presskit .page-content header::after { display: block; content: ""; width: 100%; height: 10px; background-image: url("../img/px_divider-grey.png"); background-position: left top; background-repeat: repeat-x; position: absolute; bottom: 0em; right: 0em; } #publishing header.hero { height: auto; color: white; text-align: center; position: relative; padding: 4em 0em 6em; overflow: auto; } #publishing header.hero h1 { font-family: "PT-Schoolhouse", sans-serif; font-weight: 400; font-size: 5em; margin-bottom: 0em; z-index: 1; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } #publishing header.hero p { max-width: 40%; color: white; font-size: 1.15em; padding: 1em; margin: 0em auto; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } @media (min-width: 1080px) and (max-width: 1199px) { #publishing header.hero { padding: 3em 0em 5em; } #publishing header.hero p { max-width: 55%; } } @media (min-width: 760px) and (max-width: 1079px) { #publishing header.hero { padding: 2.25em 0em 4em; } #publishing header.hero p { max-width: 55%; } } @media (min-width: 480px) and (max-width: 759px) { #publishing header.hero { padding: 3em 0em 5em; } #publishing header.hero h1 { font-size: 3.5em; padding-left: 1em; padding-right: 1em; } #publishing header.hero p { font-size: 1.1em; max-width: 65%; } } @media (max-width: 479px) { #publishing header.hero { padding: 0.5em 0em 1.5em; } #publishing header.hero h1 { font-size: 3.5em; } #publishing header.hero p { font-size: 1.1em; max-width: 80%; } } #publishing header.hero .scene { width: 100%; height: 100%; position: absolute; overflow: hidden; bottom: 0em; left: 0em; top: 0em; } #publishing header.hero .scene .clouds { width: 152px; height: 95px; position: absolute; z-index: 0; right: 12em; top: 4em; background-image: url("../img/publishing-clouds_2.png"); background-size: 100% 100%; -webkit-background-size: 100% 100%; background-repeat: no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #publishing header.hero .scene .clouds { background-image: url("../img/publishing-clouds_2@2x.png"); /* background-size: $w $h; -webkit-background-size: $w $h; */ } } @media (min-width: 1080px) and (max-width: 1199px) { #publishing header.hero .scene .clouds { width: 130px; height: 81px; right: 6em; } } @media (min-width: 760px) and (max-width: 1079px) { #publishing header.hero .scene .clouds { width: 107px; height: 67px; right: -0.75em; } } @media (min-width: 480px) and (max-width: 759px) { #publishing header.hero .scene .clouds { width: 89px; height: 56px; right: -2em; top: 6em; } } @media (max-width: 479px) { #publishing header.hero .scene .clouds { display: none; } } #publishing header.hero .scene .trees { width: 141px; height: 209px; position: absolute; right: 6em; bottom: 0em; background-image: url("../img/publishing-trees.png"); background-size: 100% 100%; -webkit-background-size: 100% 100%; background-repeat: no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #publishing header.hero .scene .trees { background-image: url("../img/publishing-trees@2x.png"); /* background-size: $w $h; -webkit-background-size: $w $h; */ } } @media (min-width: 1080px) and (max-width: 1199px) { #publishing header.hero .scene .trees { right: 5em; width: 121px; height: 179px; } } @media (min-width: 760px) and (max-width: 1079px) { #publishing header.hero .scene .trees { width: 99px; height: 147px; right: 3em; } } @media (min-width: 480px) and (max-width: 759px) { #publishing header.hero .scene .trees { width: 82px; height: 122px; right: 1.5em; } } @media (max-width: 479px) { #publishing header.hero .scene .trees { display: none; } } #publishing header.hero .scene .hills { width: 257px; height: 225px; position: absolute; left: 4em; bottom: 0em; background-position: center bottom; background-image: url("../img/publishing-hills-2.png"); background-size: 100% 100%; -webkit-background-size: 100% 100%; background-repeat: no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #publishing header.hero .scene .hills { background-image: url("../img/publishing-hills-2@2x.png"); /* background-size: $w $h; -webkit-background-size: $w $h; */ } } @media (min-width: 1080px) and (max-width: 1199px) { #publishing header.hero .scene .hills { left: 2em; width: 205px; height: 180px; } } @media (min-width: 760px) and (max-width: 1079px) { #publishing header.hero .scene .hills { left: 2em; width: 180px; height: 158px; } } @media (max-width: 900px) { #publishing header.hero .scene .hills { left: -0.5em; } } @media (min-width: 480px) and (max-width: 759px) { #publishing header.hero .scene .hills { display: none; } } @media (max-width: 479px) { #publishing header.hero .scene .hills { display: none; /* left: -3em; width: 180px; height: 158px; */ } } #publishing header.hero .scene-blueprint { width: 100%; height: 100%; position: absolute; left: 0em; top: 0em; display: none; } #publishing header.hero .content { position: relative; z-index: 0; } .blog header.hero, .single header.hero, .search header.hero, .page-template-default header.hero, .page-template-presskit header.hero { height: 520px; background-image: url("../img/px_header-darkblue.png"); background-repeat: repeat; background-position: left top; position: relative !important; padding: 1px 0em; z-index: 0; margin-bottom: -360px; } .blog header.hero:after, .single header.hero:after, .search header.hero:after, .page-template-default header.hero:after, .page-template-presskit header.hero:after { display: block; content: ""; width: 100%; height: 200px; background-image: url("../img/page_gradient-fallback.png"); background-size: 1px 200px; background-repeat: repeat-x; background-position: left bottom; position: absolute; left: 0em; bottom: 0em; } @media (min-width: 480px) and (max-width: 759px) { .blog header.hero, .single header.hero, .search header.hero, .page-template-default header.hero, .page-template-presskit header.hero { margin-bottom: -420px; } } .single header.hero, .search header.hero { margin-bottom: -460px; } @media (max-width: 479px) { .single header.hero, .search header.hero { margin-bottom: -520px; } } @media (max-width: 479px) { .blog header.hero, .page-template-default header.hero, .page-template-presskit header.hero { margin-bottom: -460px; } } .page-template-game header.hero { white-space: 100% !important; height: 720px; background-color: #87b7fb; overflow: hidden; position: relative; margin: 0em auto; margin-bottom: -600px; } .page-template-game header.hero .canvas-wrap { position: relative; width: 100%; height: auto; background-image: url("../img/px_default.png"); background-repeat: repeat; background-position: left top; } .page-template-game header.hero .canvas-wrap canvas { width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; } .page-template-game header.hero .overlay { width: 100%; height: 100%; background-color: rgba(0, 24, 118, 0.9); position: absolute; left: 0em; top: 0em; } .page-template-game header.hero .fade { width: 100%; height: 400px; background-image: url("../img/page_gradient-fallback.png"); background-repeat: repeat-x; background-position: left bottom; background-size: 1px 100%; position: absolute; bottom: 0em; /* background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZjVmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2VmZjVmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZmY1ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(239,245,255,0) 0%, rgba(239,245,255,1) 60%, rgba(239,245,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,245,255,0)), color-stop(60%,rgba(239,245,255,1)), color-stop(100%,rgba(239,245,255,1))); background: -webkit-linear-gradient(top, rgba(239,245,255,0) 0%,rgba(239,245,255,1) 60%,rgba(239,245,255,1) 100%); background: -o-linear-gradient(top, rgba(239,245,255,0) 0%,rgba(239,245,255,1) 60%,rgba(239,245,255,1) 100%); background: -ms-linear-gradient(top, rgba(239,245,255,0) 0%,rgba(239,245,255,1) 60%,rgba(239,245,255,1) 100%); background: linear-gradient(to bottom, rgba(239,245,255,0) 0%,rgba(239,245,255,1) 60%,rgba(239,245,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00eff5ff', endColorstr='#eff5ff',GradientType=0 ); */ } @media (min-width: 760px) and (max-width: 1079px) { .page-template-game header.hero .canvas-wrap { height: 100%; background-image: url("../img/px-default.png"); background-size: cover; background-repeat: no-repeat; background-position: center top; } .page-template-game header.hero .canvas-wrap canvas { display: none; } } @media (min-width: 480px) and (max-width: 759px) { .page-template-game header.hero .canvas-wrap { height: 100%; background-image: url("../img/px-default.png"); background-size: cover; background-repeat: no-repeat; background-position: center top; } .page-template-game header.hero .canvas-wrap canvas { display: none; } } @media (max-width: 479px) { .page-template-game header.hero .canvas-wrap { height: 100%; background-image: url("../img/px-default.png"); background-size: cover; background-repeat: no-repeat; background-position: center top; } .page-template-game header.hero .canvas-wrap canvas { display: none; } } #contact header.hero { padding: 6em 0em 0em 0em; background-color: #5466c1; background-image: url("../img/page_gradient-fallback.png"), url("../img/px-pattern.png"); background-repeat: repeat-x, repeat; background-size: 1px 500px, auto; background-position: left bottom, left top; background-attachment: scroll, fixed; /* border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: white; */ } #contact header.hero h1 { font-family: "PT-Schoolhouse", sans-serif; font-size: 5em; letter-spacing: 0.07em; color: #fcfdff; margin: 0em; } #contact header.hero p { font-size: 1.15em; color: #fcfdff; } #contact header.hero a.button { font-family: "PT-Schoolhouse", sans-serif; letter-spacing: 0.07em; } #contact header.hero a.button span[class*='icon-'] { margin-right: 0.15em; margin-left: 0em; -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -ms-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; transition: margin 0.2s ease-out; } #contact header.hero a.button:hover span[class*='icon-'] { margin-right: 0em; margin-left: 0.15em; -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -ms-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; transition: margin 0.2s ease-out; } #contact header.hero .content { margin: 0em 1.5em; position: relative; } #contact header.hero .content .mailing-address { width: 36.99%; padding: 2em; background-color: #fcfdff; background-position: right -50px bottom -25px; position: absolute; left: 0em; bottom: 0em; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 15px; background-image: url("../img/mail_stamp.jpg"); background-size: 342px 210px; -webkit-background-size: 342px 210px; background-repeat: no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #contact header.hero .content .mailing-address { background-image: url("../img/mail_stamp@2x.jpg"); /* background-size: $w $h; -webkit-background-size: $w $h; */ } } #contact header.hero .content .mailing-address h2 { font-family: "PT-Schoolhouse", sans-serif; color: #9e9e97; letter-spacing: 0.07em; } #contact header.hero .content .mailing-address p { color: #9e9e97; } #contact header.hero .content .subscribe { width: 36.99%; background-image: none; background-color: #fcfdff; border: none; padding: 2em; position: absolute; right: 0em; bottom: 0em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 0px; } #contact header.hero .content .subscribe header h2 { font-family: "PT-Schoolhouse", sans-serif; color: #9e9e97; text-align: left; letter-spacing: 0.07em; float: left; margin: 0em; padding: 0em; } #contact header.hero .content .subscribe header h2 span[class*='icon-'] { color: #9e9e97; font-size: 1em; text-shadow: none; } #contact header.hero .content .subscribe header a.text-button { float: right; } #contact header.hero .content .subscribe p { color: #9e9e97; text-align: left; padding: 0.5em 0em; } #contact header.hero .content .subscribe form input[type=email], #contact header.hero .content .subscribe form input[type=text] { border-color: #9e9e97; } @media (min-width: 1080px) and (max-width: 1199px) { #contact header.hero .content .mailing-address, #contact header.hero .content .subscribe { font-size: 0.85em; } } @media (min-width: 760px) and (max-width: 1079px) { #contact header.hero .content .mailing-address, #contact header.hero .content .subscribe { font-size: 0.85em; } } @media (min-width: 760px) and (max-width: 960px) { #contact header.hero .content .mailing-address, #contact header.hero .content .subscribe { width: auto; position: relative; } #contact header.hero .content .mailing-address { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #contact header.hero .content .subscribe { border-top: 1px solid #071345; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } } @media (min-width: 480px) and (max-width: 759px) { #contact header.hero .content { margin: 0em 1em; } #contact header.hero .content .mailing-address, #contact header.hero .content .subscribe { width: auto; position: relative; } #contact header.hero .content .mailing-address { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #contact header.hero .content .subscribe { border-top: 1px solid #071345; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } } @media (max-width: 479px) { #contact header.hero .content { margin: 0em 0.25em; } #contact header.hero .content .mailing-address, #contact header.hero .content .subscribe { width: auto; position: relative; } #contact header.hero .content .mailing-address { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #contact header.hero .content .mailing-address h2 { text-align: center; float: none; } #contact header.hero .content .subscribe { border-top: 1px solid #071345; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } #contact header.hero .content .subscribe header h2 { text-align: center; float: none; } #contact header.hero .content .subscribe header a.text-button { float: none; padding-top: 0.5em; } #contact header.hero .content .subscribe p { text-align: center; } } @media (min-width: 760px) and (max-width: 1079px) { #contact header.hero { padding: 4em 0em 0em 0em; } #contact header.hero h1 { font-size: 4em; } #contact header.hero .content.center-clip { padding-left: 0em; padding-right: 0em; } #contact header.hero p { font-size: 1.15em; } #contact header.hero a.button { font-size: 1.15em; } } @media (min-width: 480px) and (max-width: 759px) { #contact header.hero { padding: 3em 0em 0em 0em; background-attachment: scroll, scroll; } #contact header.hero h1 { font-size: 3.5em; } #contact header.hero .content.center-clip { padding-left: 0em; padding-right: 0em; } #contact header.hero p { font-size: 1.1em; padding-bottom: 1em; } #contact header.hero a.button { font-size: 1.15em; } } @media (max-width: 479px) { #contact header.hero { padding: 2em 0em 0em 0em; background-attachment: scroll, scroll; } #contact header.hero h1 { font-size: 3em; } #contact header.hero p { font-size: 1em; padding-bottom: 1em; } #contact header.hero a.button { font-size: 1em; } } #careers header.hero { background-image: url("../img/px_header-darkblue.png"); background-repeat: repeat; background-position: left top; position: relative !important; padding: 4em 0em; z-index: 0; color: #fcfdff; } #careers header.hero h1 { font-family: "PT-Schoolhouse", sans-serif; font-size: 5em; letter-spacing: 0.07em; color: #fcfdff; margin: 0em; } #careers header.hero p { font-size: 1.15em; color: #87b7fb; } #careers header.hero p b { color: #fcfdff; } #careers header.hero a.button { font-family: "PT-Schoolhouse", sans-serif; letter-spacing: 0.07em; margin-top: 0.5em; } #careers header.hero a.button span[class*='icon-'] { margin-right: 0.15em; margin-left: 0em; -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -ms-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; transition: margin 0.2s ease-out; } #careers header.hero a.button:hover span[class*='icon-'] { margin-right: 0em; margin-left: 0.15em; -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -ms-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; transition: margin 0.2s ease-out; } #careers header.hero ul li { color: #87b7fb; padding: 0.5em 0em; } #careers header.hero div.center-clip { text-align: left; } #careers header.hero div.center-clip h1 { text-align: center; } #careers header.hero div.center-clip h2 { color: #fcfdff; } @media (min-width: 760px) and (max-width: 1079px) { #careers header.hero { padding: 4em 0em; } #careers header.hero h1 { font-size: 4em; } #careers header.hero .content.center-clip { padding-left: 0em; padding-right: 0em; } #careers header.hero p { font-size: 1.15em; } #careers header.hero a.button { font-size: 1.15em; } } @media (min-width: 480px) and (max-width: 759px) { #careers header.hero { padding: 3em 0em; background-attachment: scroll, scroll; } #careers header.hero h1 { font-size: 3.5em; } #careers header.hero .content.center-clip { padding-left: 0em; padding-right: 0em; } #careers header.hero p { font-size: 1.1em; } #careers header.hero a.button { font-size: 1.15em; } } @media (max-width: 479px) { #careers header.hero { padding: 2em 0em; background-attachment: scroll, scroll; } #careers header.hero h1 { font-size: 3em; } #careers header.hero p { font-size: 1em; } #careers header.hero a.button { font-size: 1em; } } .search header.archiveshead { background-color: #071345; color: #87b7fb; padding: 3em; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .search header.archiveshead span { color: white; } @media (min-width: 480px) and (max-width: 759px) { .search header.archiveshead { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } } @media (max-width: 479px) { .search header.archiveshead { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } } .error404 header.hero { height: auto; background-color: #071345; color: white; text-align: center; overflow: auto; padding: 6em 0em; } .error404 header.hero h1 { font-size: 5em; font-family: "PT-Schoolhouse", sans-serif; padding: 0em 0em; margin: 0em; } .error404 header.hero h2 { color: #87b7fb; } .error404 header.hero p { color: white; padding: 1em 0em; } @media (min-width: 480px) and (max-width: 759px) { .error404 header.hero { padding-top: 2em; padding-bottom: 2em; } } @media (max-width: 479px) { .error404 header.hero { padding-top: 1em; padding-bottom: 1em; } } div.socialize { padding: 2em 1em; background-color: #071345; } div.socialize h2 { color: #fcfdff; margin-bottom: 0em; } div.socialize h2 span { background-color: #071345; } @media (max-width: 479px) { div.socialize h2 span { padding: 0em; background-color: transparent; } } div.thumb-grid { width: 33%; float: right; } div.thumb-grid ul { width: 100%; height: auto; list-style: none; margin: 0em; padding: 0em; } div.thumb-grid ul li { width: 50%; float: left; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } div.thumb-grid ul li a { width: 100%; } @media only screen and (max-width: 800px) { div.thumb-grid ul li { width: 100%; float: none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } } div.yt-container { position: relative; width: 660px; height: 373px; overflow: hidden; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 8px !important; -webkit-border-bottom-right-radius: 8px !important; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 8px !important; -moz-border-radius-bottomright: 8px !important; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; border-bottom-left-radius: 0px; } div.bp-indicator { display: none; width: 100%; height: 2px; position: fixed; bottom: 0em; right: 0em; background-color: black; z-index: 100000; } @media (max-width: 479px) { div.bp-indicator { background-color: red; } } @media (min-width: 480px) and (max-width: 759px) { div.bp-indicator { background-color: green; } } @media (min-width: 760px) and (max-width: 1079px) { div.bp-indicator { background-color: cyan; } } @media (min-width: 1080px) and (max-width: 1199px) { div.bp-indicator { background-color: yellow; } } @media (min-width: 1200px) { div.bp-indicator { background-color: magenta; } } div.px-header { width: 100%; height: 340px; background-image: url("../img/px_header-A.png"); background-position: left top; background-repeat: repeat; background-color: #87b7fb; position: relative; } div.px-header.pxB { background-image: url("../img/px_header-B.png"); } div.px-header.pxC { background-image: url("../img/px_header-C.png"); } div.px-header.pxD { background-image: url("../img/px_header-D.png"); } div.px-header.pxE { background-image: url("../img/px_header-E.png"); } div.px-header.pxF { background-image: url("../img/px_header-F.png"); } div.angle-grad { width: 50%; margin: 0em auto; height: 300px; position: relative; background: black; background: -moz-linear-gradient(120deg, black 0%, transparent 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, black), color-stop(100%, transparent)); background: -webkit-linear-gradient(120deg, black 0%, transparent 100%); background: -o-linear-gradient(120deg, black 0%, transparent 100%); background: -ms-linear-gradient(120deg, black 0%, transparent 100%); background: linear-gradient(120deg, black 0%, transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 ); } div.columns { width: auto; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } div.columns .left { width: 56%; margin: 0em; float: left; background: #fcfdff; position: relative; } div.columns .right { width: auto; height: auto; overflow: hidden; } #home div.columns { margin: 0em 1.5em; background-color: #bdd9ff; padding: 0em; } #home div.columns .right { padding: 1.2em 1.2em 0em 1.2em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #home div.columns .right .publishing { margin-bottom: 1.5em; position: relative; overflow: hidden; text-align: left; box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.1); } #home div.columns .right .publishing h1 { font-family: "PT-Schoolhouse", sans-serif; color: white; letter-spacing: 3px; font-weight: 400 !important; font-size: 2.5em; padding: 4em 3rem 1em 3rem; background-image: url("../img/game_screen-header.png"); background-repeat: no-repeat; background-position: center bottom; margin: 0em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } #home div.columns .right .publishing section.content { background-image: url("../img/home-publishing_bg.jpg"); background-repeat: no-repeat; background-position: center bottom; background-size: cover; position: relative; padding: 4em 0em; text-align: center; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } #home div.columns .right .publishing p { font-size: 1.15em; color: white; max-width: none; line-height: 1.7em; margin: 0em; padding: 0em 6em; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } #home div.columns .right .publishing p::after { display: none; } #home div.columns .right .publishing a.outline-border-button { margin-top: 2em; font-family: "PT-Schoolhouse", sans-serif; letter-spacing: 0.07em; } #home div.columns .right .social .yt-wrap { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; overflow: hidden !important; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); background-color: black; -webkit-border-top-left-radius: 8px !important; -webkit-border-top-right-radius: 8px !important; -webkit-border-bottom-right-radius: 8px !important; -webkit-border-bottom-left-radius: 8px !important; -moz-border-radius-topleft: 8px !important; -moz-border-radius-topright: 8px !important; -moz-border-radius-bottomright: 8px !important; -moz-border-radius-bottomleft: 8px !important; border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; border-bottom-left-radius: 8px !important; /* .youtubeEmbed .play { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAERklEQVR4nOWbTWhcVRTHb1IJVoxGtNCNdal2JYJReC6GWuO83PM/59yUS3FRFARdFlwYP1CfiojQWt36sRCUurRIdVFXIn41lAoVdRGrG1M01YpKrWjiYmaSl8ybZJL3cd+YA//NLObd3++eO8x79z5jSq5Gw+8kov0AP8vMR5l1BtBZQM4B8ks75wCdZdYZZj5qLZ4hov2Nht9Z9vhKKSIaB/gI4M4w62KeAO6Mte4lYOq20FxrlqqOibhHmeWbvNC9ZfDX1mLae391aN6limO/gwgvAPJbWeAZuSDingdwXTBw7/0IsyaA/Fkh+KqOkD+YNfHej1QKD+y7iVlOhgLvFqFfNJvNGyuBJ+KDAF8MDd0tgS8y64OlgSdJMsysL4cG7SOHkyQZLhTee7+d2R2rAVy/S+Jd7/32ouBHAP4gNNRGQyTHc/84NhqNywZp5rvjjnnvt21aABFeCQ+RLwAf2hQ8s7sv9OCLk6AHNgQvIrvbfzKCD76g/O6cu7lf/iER/aQGgy448pExZmhdegAPhR9sObFWH1gT3lp7DaA/5bkIgJhZPgsNmz02novj+KqeApj1ubwXWe4kdyeznAgNvTpE/HQmvKqOMeuFogTUVQSRno+iaLRLAJF7uIgL9O4ubgL8aWgB7S44mNX+35YpICUiAvS9sBLkq1WzT+NFffl6AuoiApi6NT37h6sWkBIRZGkQ8YtLgyji6e1mBYTqCEBPG2Naz+0BWQgtoGoRgCzEsd9hAN1X5BfnFZASUfrSAFQNsyZ1FJASUVpHiLinDJG8U2cBZYogkrcNs5waBAGdstbeU9zdqpw0gPwwSAI6VUxHyFlDpOcHUUBBIuYNs14aZAE5RVwyzPr3/0EAEY0TyfGNjBWQvwZ+CTSbehfAH29mrID8bET0+0EUkAd8WYDOmqJ3ecsG30yr9wqRfm6Y+a1BEFDEjHfHvWmY9ck6CygHvBVr8Xhtb4ZE5HZA3y8DvBNA1TjnrmXWf+sioMwZX5V/VHXMGGMMoKdDCxCRvRWBdzKzdHEO+EisilbPyopHYqp6S9UCAsz4iojI7hUDAtyXVQgIDd6KnOoaWNkbI6FaPSuZGyMArsi7MZoloB4zviI/Nhr3X95jltwTRQmoIfgisy5ai+me67OI7fE4nrqjrqfK1t0eby0FPRB6oGVlchL3rgnfrq19RKbVBdhV9IOSwJmfmJi4vi/4ThERitwyCxVAFqydshuCX5awhQ9KtmuIWd8IDZED/nXT77rvVVv6sHRKwjYi91poqP7Dr+Y6JJ1VSZIMA3wkPNy6bX+o8Bcm0sXMdwM8Fxo0A3xORPaWBp6uPXsmbxCRD0NDL0dOANhVCXy6iAjMcjbcrMt3RITKwdMVRdFo+y5yvkL4eWZ+zHt/ZVD4dEVRNGotpst+dZZZH8k86lqn2pIvT/eqrNfn2xuyqYPZ8mv7s8pfn/8Pybm4TIjanscAAAAASUVORK5CYII=") no-repeat center center; background-size: 64px 64px; position: absolute; height: 100%; width: 100%; opacity: .8; filter: alpha(opacity=80); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .youtubeEmbed .play:hover { opacity: 1; filter: alpha(opacity=100); } */ } #home div.columns .right .social .yt-wrap div#yt-player { width: 100% !important; } #home div.columns .right .social .yt-wrap iframe { position: absolute; top: -0.5%; left: -0.5%; width: 101% !important; height: 101% !important; } #home div.columns .right .social .yt-wrap .yt-button { position: absolute; width: 100%; height: 100%; left: 0em; top: 0em; z-index: 100; background-image: url("../img/bg-home_playlist.jpg"); background-position: center center; background-repeat: no-repeat; cursor: pointer; text-align: center; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } #home div.columns .right .social .yt-wrap .yt-button.off { display: none; } #home div.columns .right .social .yt-wrap .yt-button:hover { background-color: rgba(0, 0, 0, 0.6); -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out; -ms-transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out; } #home div.columns .right .social .yt-wrap .yt-button:hover div.overlay { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; -webkit-opacity: 0.8; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } #home div.columns .right .social .yt-wrap .yt-button a { color: white; text-decoration: none; font-size: 1.15em; padding-top: 2rem; } #home div.columns .right .social .yt-wrap .yt-button h1 { display: block; width: 100%; font-size: 1.15em; color: white; position: absolute; bottom: 1em; font-weight: 100; } #home div.columns .right .social .yt-wrap .yt-button h1 span { font-size: 0.7em; color: #d7d5c9; } #home div.columns .right .social .yt-wrap .yt-button video { width: 100%; height: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } #home div.columns .right .social .yt-wrap .yt-button div.overlay { width: 100%; height: 100%; position: absolute; left: 0em; top: 0em; background-image: url("../img/yt_logo_white@2x.png"), url("../img/texture-scan_lines.png"); background-repeat: no-repeat, repeat; background-position: center center, left top; background-size: 96px 68px, 1px 4px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } #home div.columns .right .social .yt-wrap .youtubeEmbed { background-position: center; background-repeat: no-repeat; position: relative; display: block; overflow: hidden; transition: all 200ms ease-out; cursor: pointer; margin: 40px auto 0 auto; } #home div.columns .left { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 15px; } @media (min-width: 1080px) and (max-width: 1199px) { #home div.columns .right .publishing h1 { padding-top: 2em; } } @media (min-width: 760px) and (max-width: 1079px) { #home div.columns .left { width: 100%; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #home div.columns .right .social { width: 50%; float: right; padding-left: 1.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #home div.columns .right .social .yt-wrap .yt-button { background-size: 75px 53px; } #home div.columns .right .social .yt-wrap .yt-button a { color: white; text-decoration: none; font-size: 1.15em; padding-top: 1rem; } #home div.columns .right .publishing { max-width: 50%; float: left; } #home div.columns .right .publishing h1 { padding: 2.5em 3rem 1em 3rem; } #home div.columns .right .publishing p { padding-left: 1em; padding-right: 1em; } } @media (min-width: 480px) and (max-width: 759px) { #home div.columns { margin: 0em 1em; padding-bottom: 1em; } #home div.columns .left { width: 100%; float: none; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #home div.columns .right { padding: 1.5em 1.5em 0em 1.5em; } #home div.columns .right .publishing { height: auto; margin: 0em; background-position: center top; background-size: auto 100%; margin-bottom: 1.5em; } #home div.columns .right .publishing h1 { font-size: 1.8em; padding: 2.8em 1rem 1.5em 1.5rem; background-position: center bottom; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } #home div.columns .right .publishing section.content { padding: 2.5rem 1.5rem 3rem; } #home div.columns .right .publishing p { font-size: 1.1em; color: white; max-width: none; padding: 0em 4em; margin: 0em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } #home div.columns .right .publishing p::after { display: none; } #home div.columns .right .publishing a.text-button { font-size: 1.1em; float: none; } #home div.columns .right .social { height: auto; } #home div.columns .right .social .yt-wrap .yt-button div.overlay { background-image: url("../img/texture-scan_lines.png"); background-repeat: repeat; background-position: left top; background-size: 1px 4px; } #home div.columns .right .social ul.social-buttons { width: 100%; } #home div.columns .right .social ul.social-buttons li { margin-right: 0em; width: 33%; padding-right: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #home div.columns .right .social ul.social-buttons li:first-child { padding-left: 0em; } #home div.columns .right .social ul.social-buttons li:last-child { padding-right: 0em; } #home div.columns .right .social ul.social-buttons li a { width: 100%; padding-left: 0em; padding-right: 0em; } } @media (min-width: 480px) and (max-width: 540px) { #home div.columns .right .publishing p { padding: 0em 2em; } } @media (max-width: 479px) { #home div.columns { margin: 0em 0.25em; padding-bottom: 1em; } #home div.columns .left { width: 100%; float: none; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #home div.columns .right { padding-left: 0.75em; padding-right: 0.75em; } #home div.columns .right .publishing { height: auto; margin: 0em; background-position: center top; background-size: auto 100%; } #home div.columns .right .publishing h1 { font-size: 1.8em; padding: 2.8em 1rem 1.5em 1.5rem; background-position: center bottom; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); } #home div.columns .right .publishing section.content { padding: 2.5rem 1.5rem 3rem; } #home div.columns .right .publishing p { font-size: 1em; color: white; max-width: none; margin: 0em; padding: 0em 1em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } #home div.columns .right .publishing p::after { display: none; } #home div.columns .right .publishing a.text-button { font-size: 1em; float: none; } #home div.columns .right .social { height: auto; } #home div.columns .right .social .yt-wrap { margin-top: 1.5em; } #home div.columns .right .social .yt-wrap .yt-button div.overlay { background-image: url("../img/texture-scan_lines.png"); background-repeat: repeat; background-position: left top; background-size: 1px 4px; } #home div.columns .right .social ul.social-buttons { width: 100%; } #home div.columns .right .social ul.social-buttons li { margin-right: 0em; width: 33%; padding-right: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #home div.columns .right .social ul.social-buttons li:first-child { padding-left: 0em; } #home div.columns .right .social ul.social-buttons li:last-child { padding-right: 0em; } #home div.columns .right .social ul.social-buttons li a { width: 100%; padding-left: 0em; padding-right: 0em; } } .page-template-game div.columns { margin: 0em 1.5em; position: relative; background-color: #eff5ff; } .page-template-game div.columns .left { width: 60%; z-index: 1; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 15px; box-shadow: 3px 0px 8px 0px rgba(0, 0, 0, 0.1); } .page-template-game div.columns .left div.content { text-align: left; } .page-template-game div.columns .left div.content div.title { width: auto; position: relative; background-color: transparent; margin-left: 2.4rem; margin-bottom: 10px; } .page-template-game div.columns .left div.content div.title h1 { font-family: "PT-Schoolhouse", sans-serif; font-weight: 400; margin: 0em; padding: 0em; padding: 1em 1.5em 0.2em 0em; } .page-template-game div.columns .left div.content div.title p { margin: 0em; padding: 0em; font-size: 1.15em; margin-right: 3em; color: #9e9e97; } .page-template-game div.columns .left div.content div.title a.share { font-size: 1.2rem; /* position: absolute; top: 0.8em; right: 0.8em; */ color: #5466c1; text-decoration: none; padding: 0.7em 0.7em 0em 0.8em; padding-left: 0.5em; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .page-template-game div.columns .left div.content div.title div.title-wrap { margin-left: 170px; } .page-template-game div.columns .left div.content div.title div.price-tag { position: absolute; padding: 0.5em 1.5em; background-color: #87b7fb; color: white; font-size: 1.3em; font-weight: 600; top: 0em; right: 0em; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 5px; } .page-template-game div.columns .left div.content div.title ul.buttons { margin: 0em; padding: 2em 1em 1em 0em; list-style: none; bottom: 0em; left: 0em; } .page-template-game div.columns .left div.content div.title ul.buttons li { display: block; /* border-width: 1px; border-style: solid; border-color: $nc-button-blue; */ border-bottom: none; border-left: none; float: left; padding-right: 0.8em; padding-bottom: 0.8em; } .page-template-game div.columns .left div.content div.title ul.buttons li:first-child { /* border-left-width: 1px; border-left-style: solid; border-left-color: $nc-button-blue; */ } .page-template-game div.columns .left div.content div.title ul.buttons a { text-decoration: none; font-size: 1.15em; color: #5466c1; } .page-template-game div.columns .left div.content div.title ul.buttons a.outline-border-button { padding: 0.7em 0.8em 0.6em; border-color: #5466c1; } .page-template-game div.columns .left div.content div.title ul.buttons a.outline-border-button::after { border-color: #5466c1; } .page-template-game div.columns .left div.content div.title ul.buttons a.outline-border-button span { padding-right: 0em; } .page-template-game div.columns .left div.content div.title ul.buttons a.outline-border-button:hover span { padding-left: 0em; padding-right: 0em; -webkit-transition: none 0.5s ease-out; -moz-transition: none 0.5s ease-out; -ms-transition: none 0.5s ease-out; -o-transition: none 0.5s ease-out; transition: none 0.5s ease-out; } .page-template-game div.columns .left div.content div.title ul.buttons a object { height: 48px; } .page-template-game div.columns .left div.content div.title::after { display: block; width: 100%; margin-left: 2.1rem; height: 10px; display: block; content: " "; position: absolute; background-image: url("../img/px_divider-grey.png"); background-repeat: repeat-x; right: 0em; bottom: -10px; } .page-template-game div.columns .left div.content div.icon-wrap { position: relative; z-index: 1; margin-top: -20px; float: left; text-align: center; } .page-template-game div.columns .left div.content div.icon { width: 138px; height: 138px; margin-bottom: 1em; position: relative; } .page-template-game div.columns .left div.content div.icon::after { display: block; content: " "; position: absolute; width: 160px; height: 24px; background-image: url("../img/icon_shadow.png"); background-repeat: no-repeat; background-size: 100% 100%; bottom: -10px; left: -10px; z-index: -1; } .page-template-game div.columns .left div.content div.icon img { width: 100%; } .page-template-game div.columns .left div.content div.yt-wrap { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; background-color: #8a8a88; } .page-template-game div.columns .left div.content div.yt-wrap div#yt-player { width: 100% !important; } .page-template-game div.columns .left div.content div.yt-wrap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .page-template-game div.columns .left div.content div.yt-wrap div.banner { width: 100%; height: 100%; position: absolute; left: 0em; top: 0em; overflow: hidden; } .page-template-game div.columns .left div.content div.yt-wrap div.banner img { max-width: none; position: absolute; left: 0em; top: 0em; } .page-template-game div.columns .left div.content div.yt-wrap div.banner img.scale-width { height: auto; width: 100%; } .page-template-game div.columns .left div.content div.yt-wrap div.banner img.scale-height { height: 100%; width: auto; } .page-template-game div.columns .left div.content div.yt-wrap div.banner div.wrap { display: none; } .page-template-game div.columns .left div.content div.yt-wrap div.yt-button { cursor: pointer; } .page-template-game div.columns .left div.content div.yt-wrap div.yt-button img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .page-template-game div.columns .left div.content div.yt-wrap div.yt-button div.wrap { display: block; position: relative; width: 100%; height: 100%; /* right: 2em; bottom: 2em; */ color: white; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; -webkit-opacity: 0.8; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } .page-template-game div.columns .left div.content div.yt-wrap div.yt-button div.wrap p { padding: 1em 0.5em 0.5em 0em; margin: 0em; color: white; float: left; line-height: 1em; } .page-template-game div.columns .left div.content div.yt-wrap div.yt-button div.wrap div[class*='icon-'], .page-template-game div.columns .left div.content div.yt-wrap div.yt-button div.wrap span[class*='icon-'] { font-size: 8em; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: font-size 0.5s ease-out; -moz-transition: font-size 0.5s ease-out; -ms-transition: font-size 0.5s ease-out; -o-transition: font-size 0.5s ease-out; transition: font-size 0.5s ease-out; } .page-template-game div.columns .left div.content div.yt-wrap div.yt-button.off { display: none; } .page-template-game div.columns .left div.content div.yt-wrap div.yt-button:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .page-template-game div.columns .left div.content div.yt-wrap div.yt-button:hover div.wrap { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; -webkit-opacity: 0.5; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .page-template-game div.columns .left div.content div.overview { padding: 2em 3em 4em 3em; } .page-template-game div.columns .left div.content div.overview p { padding: 1em 0em; margin: 0em; } .page-template-game div.columns .left div.content div.overview div.awards { text-align: center; margin: 0em 2em; padding: 1.5rem 0em; } .page-template-game div.columns .left div.content div.overview div.awards .award { width: 45%; padding: 2em; background-color: transparent; float: left; border: 1px solid #d7d5c9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.1); } .page-template-game div.columns .left div.content div.overview div.awards .award:nth-child(even) { float: right; } .page-template-game div.columns .left div.content div.overview div.awards .award img { margin-bottom: 1em; } .page-template-game div.columns .left div.content div.overview div.awards .award h1 { font-size: 1.25em; margin: 0em; padding: 0em 0em 0.25rem; } .page-template-game div.columns .left div.content div.overview div.awards .award p { padding: 0em; color: #87b7fb; } .page-template-game div.columns .left div.content div.overview img, .page-template-game div.columns .left div.content div.overview video, .page-template-game div.columns .left div.content div.overview iframe { max-width: 100%; } .page-template-game div.columns .left div.content div.overview img, .page-template-game div.columns .left div.content div.overview video { height: auto; } .page-template-game div.columns .left div.content div.overview a img { display: block; } .page-template-game div.columns .left div.content div.overview .developer-info { padding-top: 0em; margin-bottom: 1em; position: relative; } .page-template-game div.columns .left div.content div.overview .developer-info a { padding-top: 0.5em; } .page-template-game div.columns .left div.content div.overview .developer-info a img, .page-template-game div.columns .left div.content div.overview .developer-info img { display: block; max-width: 75% !important; height: auto; margin: 0em auto; } .page-template-game div.columns .left div.content div.overview .developer-info::after { display: block; content: ""; width: 20px; height: 4px; background-color: #c0d9ff; position: absolute; left: 0em; bottom: -4px; } .page-template-game div.columns .left div.content div.overview .developer-info.centered::after { left: 50%; bottom: -4px; margin-left: -10px; } .page-template-game div.columns .right .sidebar { position: relative; top: 0em; } .page-template-game div.columns .right .sidebar .content { overflow: hidden; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel { background-color: #49493d; background-image: url("../img/px_footer.png"); background-repeat: repeat; position: relative; margin: 1.5em; overflow: hidden; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-carousel { width: 100%; margin: 0em; padding: 0em; list-style: none; overflow: hidden; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-carousel li { display: block; height: auto; margin-right: 1em; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-carousel li a { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; cursor: pointer; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-carousel li a div.overlay { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); position: absolute; left: 0em; top: 0em; text-align: center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-carousel li a div.overlay span[class*='icon-'] { display: block; width: 100%; text-align: center; font-size: 4em; color: rgba(255, 255, 255, 0.7); padding: 0em; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-carousel li a:hover div.overlay { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-carousel li img { width: 100%; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-nav { margin: 0em; list-style: none; position: absolute; right: 0em; top: 0em; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-nav li { display: block; float: left; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-nav li a { color: white; padding: 0.7rem 0.5rem 0.5rem 0rem; text-decoration: none; cursor: pointer !important; /* &.screenshot-prev { margin-right: 1px; @include nc-border-radius(5px, 0px, 0px, 0px); } */ } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel ul.owl-nav li a span[class*='icon'] { color: white; font-size: 1.5em; cursor: pointer; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel h1 { display: inline-block; font-size: 1em; margin: 0em; letter-spacing: 0px; color: white; padding: 1em 0em 1em 1em; } .page-template-game div.columns .right .sidebar .content div.screenshot-carousel span { padding: 1em 0em; color: #9e9e97; } .page-template-game div.columns .right .sidebar .content div.game-features { margin: 1.5em; } .page-template-game div.columns .right .sidebar .content div.game-features h1 { background-color: #071345; color: white; font-size: 1.6em; padding: 0.3em 0em; text-align: center; font-family: "PT-Schoolhouse", sans-serif; letter-spacing: 0.1em; font-weight: 400; margin: 0em; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .page-template-game div.columns .right .sidebar .content div.game-features ul { margin: 0em; padding: 0em; list-style: none; margin-top: 2px; overflow: hidden; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .page-template-game div.columns .right .sidebar .content div.game-features ul li.row div { padding: 1em; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:last-child div:first-child { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 5px; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:last-child div:last-child { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 0px; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div:first-child { background-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div:last-child { background-color: #87b7fb; } .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(odd) div:nth-child(odd) { background-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(odd) div:nth-child(even) { background-color: #87b7fb; } .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(even) div:nth-child(odd) { background-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(even) div:nth-child(even) { background-color: #87b7fb; } .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div { width: 100%; } .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div:first-child { float: none; } .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div:last-child { float: none; } .page-template-game div.columns .right .sidebar .content div.more-images { padding: 0.75em 1.5em; margin: 0em; } .page-template-game div.columns .right .sidebar .content div.more-images h1 { font-family: "Quicksand", Helvetica, Arial, sans-serif; color: #87b7fb; font-size: 1.3em; font-weight: 400; margin-top: 0em; text-align: center; } .page-template-game div.columns .right .sidebar .content div.more-images ul { margin: 0em; padding: 0em; list-style: none; text-align: center; } .page-template-game div.columns .right .sidebar .content div.more-images ul li { display: inline-block; width: 23.5%; max-width: 100px; position: relative; height: 100px; padding: 0em 1% 0.75em 1%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .page-template-game div.columns .right .sidebar .content div.more-images ul li a { display: block; width: 100%; height: 100%; background-position: center center; overflow: hidden; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .page-template-game div.columns .right .sidebar .content div.more-images ul li img { position: relative; } .page-template-game div.columns .right .sidebar .content div.more-images ul li img.landscape { max-height: 100px; } .page-template-game div.columns .right .sidebar .content div.more-images ul li:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; -webkit-opacity: 0.8; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -ms-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .page-template-game div.columns .right .sidebar .content div.communication { padding: 1.5em; } .page-template-game div.columns .right .sidebar .content div.communication ul { margin: 0em; padding: 0em; list-style: none; } .page-template-game div.columns .right .sidebar .content div.communication ul li { border: 1px solid #c0d9ff; margin-bottom: 1em; background-color: white; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .page-template-game div.columns .right .sidebar .content div.communication ul li div { padding: 1em 0em; text-align: center; font-size: 1.15em; } .page-template-game div.columns .right .sidebar .content div.communication ul li div:first-child { width: 33%; float: left; border-right: 1px solid #c0d9ff; font-family: "PT-Schoolhouse", sans-serif; color: #87b7fb; font-weight: 400; letter-spacing: 0.1em; } .page-template-game div.columns .right .sidebar .content div.communication ul li div h1 { position: relative; } .page-template-game div.columns .right .sidebar .content div.communication ul li div a { color: #87b7fb; text-decoration: none; font-weight: 600; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } .page-template-game div.columns .right .sidebar .content div.communication ul li div a:hover { color: #5466c1; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } @media (min-width: 1080px) and (max-width: 1199px) { .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(odd) div:nth-child(odd), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(odd) div:nth-child(odd) { background-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(odd) div:nth-child(even), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(odd) div:nth-child(even) { background-color: #87b7fb; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(even) div:nth-child(odd), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(even) div:nth-child(odd) { background-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(even) div:nth-child(even), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(even) div:nth-child(even) { background-color: #87b7fb; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div, .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div { width: 100%; float: none; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div:first-child, .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div:first-child { float: none; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div:last-child, .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div:last-child { float: none; } .page-template-game div.columns .right .sidebar .content div.communication ul { /* padding-left: 2em; padding-right: 2em; padding-bottom: 2em; */ } .page-template-game div.columns .right .sidebar .content div.communication ul li div { padding: 0.5em 0em; } .page-template-game div.columns .right .sidebar .content div.communication ul li div:first-child { width: 100%; float: none; border-right: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .more-images { padding-left: 0em; } } @media (min-width: 760px) and (max-width: 1079px) { .page-template-game div.columns .left { width: 100%; float: none; position: relative; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; box-shadow: "none"; } .page-template-game div.columns .left div.content div.title div.price-tag { /* width: auto; padding-left: 1.5em; padding-right: 1.5em; left: auto; bottom: 0em; right: 0em; */ -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 5px; } .page-template-game div.columns .right { width: auto; float: none; } .page-template-game div.columns .right .sidebar { margin-top: 0em; } .page-template-game div.columns .right .sidebar .content { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .page-template-game div.columns .right .sidebar .content div.game-features li.row:last-child div:first-child { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 5px; } .page-template-game div.columns .right .sidebar .content div.game-features li.row:last-child div:last-child { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 0px; } .page-template-game div.columns .right .sidebar .content div.game-features li.row div { padding: 1em; } .page-template-game div.columns .right .sidebar .content div.communication ul li div { padding: 1em 0em; } .page-template-game div.columns .right .sidebar .content div.communication ul li div:first-child { width: 33%; float: left; border-right: 1px solid #c0d9ff; border-bottom: none; } } @media (min-width: 480px) and (max-width: 759px) { .page-template-game div.columns { margin: 0em 1em; } .page-template-game div.columns .left { width: 100%; float: none; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .page-template-game div.columns .left div.content div.title div.price-tag { /* width: auto; padding-left: 1.5em; padding-right: 1.5em; left: auto; bottom: 0em; right: 0em; @include nc-border-radius(5px, 0px, 0px, 0px); */ -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 5px; } .page-template-game div.columns .left div.content div.icon-wrap { padding-bottom: 1em; } .page-template-game div.columns .right { width: auto; float: none; } .page-template-game div.columns .right .sidebar { margin-top: 0em; } .page-template-game div.columns .right .sidebar .content { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(odd) div:nth-child(odd), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(odd) div:nth-child(odd) { background-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(odd) div:nth-child(even), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(odd) div:nth-child(even) { background-color: #87b7fb; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(even) div:nth-child(odd), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(even) div:nth-child(odd) { background-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(even) div:nth-child(even), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(even) div:nth-child(even) { background-color: #87b7fb; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div, .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div { width: 100%; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div:first-child, .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div:first-child { float: none; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div:last-child, .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div:last-child { float: none; } .page-template-game div.columns .right .sidebar .content div.communication ul { /* padding-left: 2em; padding-right: 2em; padding-bottom: 2em; */ } .page-template-game div.columns .right .sidebar .content div.communication ul li div { padding: 0.5em 0em; } .page-template-game div.columns .right .sidebar .content div.communication ul li div:first-child { width: 100%; float: none; border-right: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .more-images ul li { max-height: 85px; } } @media (max-width: 479px) { .page-template-game div.columns { margin: 0em 0.25em; } .page-template-game div.columns .left { width: 100%; float: none; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .page-template-game div.columns .left div.content { position: relative; } .page-template-game div.columns .left div.content div.title { margin: 0em 0em 10px 0em; } .page-template-game div.columns .left div.content div.title div.price-tag { display: block; position: relative; padding-left: 0em; padding-right: 0em; width: 33%; text-align: center; left: auto; bottom: auto; right: auto; margin: 0em auto 0em auto; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .page-template-game div.columns .left div.content div.title .share { position: absolute; z-index: 2; } .page-template-game div.columns .left div.content div.title div.title-wrap { margin-left: 0rem; padding: 0em 1.5rem; position: relative; text-align: center; } .page-template-game div.columns .left div.content div.title div.title-wrap ul.buttons { display: inline-block; margin: 0em auto; position: relative; text-align: center; padding-right: 0em; } .page-template-game div.columns .left div.content div.title div.title-wrap ul.buttons li { padding-left: 0em; padding-right: 0em; padding-bottom: 1.2em; width: 100%; /* border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: $nc-button-blue; &:first-child { @include nc-border-radius(5px, 0px, 5px, 0px); } &:last-child { @include nc-border-radius(0px, 5px, 0px, 5px); } */ } .page-template-game div.columns .left div.content div.title div.title-wrap ul.buttons li a object { height: 60px; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .page-template-game div.columns .left div.content div.title div.title-wrap h1 { padding-left: 0em; padding-right: 0em; } .page-template-game div.columns .left div.content div.title div.title-wrap p { margin-right: 0em; } .page-template-game div.columns .left div.content div.icon-wrap { float: none; width: 100%; top: -50px; margin-bottom: -50px; } .page-template-game div.columns .left div.content div.icon-wrap div.icon { position: relative; margin: 0em auto; } .page-template-game div.columns .left div.content div.icon-wrap:after { content: ""; display: table; clear: both; } .page-template-game div.columns .left div.content div.overview { padding: 2em; } .page-template-game div.columns .left div.content div.yt-wrap div.yt-button div.wrap div[class*='icon-'] { font-size: 5em; } .page-template-game div.columns .right { width: auto; float: none; } .page-template-game div.columns .right .sidebar { margin-top: 0em; } .page-template-game div.columns .right .sidebar .content { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .page-template-game div.columns .right .sidebar .content div.communication ul { /* padding-left: 2em; padding-right: 2em; padding-bottom: 2em; */ } .page-template-game div.columns .right .sidebar .content div.communication ul li div { padding: 0.5em 0em; } .page-template-game div.columns .right .sidebar .content div.communication ul li div:first-child { width: 100%; float: none; border-right: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(odd) div:nth-child(odd), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(odd) div:nth-child(odd) { background-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(odd) div:nth-child(even), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(odd) div:nth-child(even) { background-color: #87b7fb; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(even) div:nth-child(odd), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(even) div:nth-child(odd) { background-color: #c0d9ff; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row:nth-child(even) div:nth-child(even), .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row:nth-child(even) div:nth-child(even) { background-color: #87b7fb; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div, .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div { width: 100%; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div:first-child, .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div:first-child { float: none; } .page-template-game div.columns .right .sidebar .content div.game-features ul.even li.row div:last-child, .page-template-game div.columns .right .sidebar .content div.game-features ul.odd li.row div:last-child { float: none; } .page-template-game div.columns .right .sidebar .more-images ul li { height: 65px; max-width: 65px; } } .blog div.columns, .single div.columns, .search div.columns, .page-template-default div.columns, .page-template-presskit div.columns { position: relative; margin: 0em 1.5em; } .blog div.columns .left, .single div.columns .left, .search div.columns .left, .page-template-default div.columns .left, .page-template-presskit div.columns .left { width: 66%; background-color: transparent; padding-right: 1.5em; position: relative; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: "none !important"; } .blog div.columns .left h1.title, .single div.columns .left h1.title, .search div.columns .left h1.title, .page-template-default div.columns .left h1.title, .page-template-presskit div.columns .left h1.title { font-family: "PT-Schoolhouse", sans-serif; font-weight: 400; font-size: 5em; line-height: 0.6em; color: white; margin: 0em 0em 0em 1rem; padding: 0em; } .blog div.columns .right, .single div.columns .right, .search div.columns .right, .page-template-default div.columns .right, .page-template-presskit div.columns .right { position: relative; } .blog div.columns .right .fixed-wrap, .single div.columns .right .fixed-wrap, .search div.columns .right .fixed-wrap, .page-template-default div.columns .right .fixed-wrap, .page-template-presskit div.columns .right .fixed-wrap { width: 100%; } @media (min-width: 760px) and (max-width: 1079px) { .blog div.columns, .single div.columns, .search div.columns, .page-template-default div.columns, .page-template-presskit div.columns { margin-top: -420px; } } @media (min-width: 480px) and (max-width: 759px) { .blog div.columns, .single div.columns, .search div.columns, .page-template-default div.columns, .page-template-presskit div.columns { margin: 0em 1em; } .blog div.columns .left, .single div.columns .left, .search div.columns .left, .page-template-default div.columns .left, .page-template-presskit div.columns .left { width: 100%; float: none; padding-right: 0em; } .blog div.columns .left h1.title, .single div.columns .left h1.title, .search div.columns .left h1.title, .page-template-default div.columns .left h1.title, .page-template-presskit div.columns .left h1.title { font-size: 3.5em; } .blog div.columns .right, .single div.columns .right, .search div.columns .right, .page-template-default div.columns .right, .page-template-presskit div.columns .right { width: 100%; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .blog div.columns .right .scrollmagic-pin-spacer, .single div.columns .right .scrollmagic-pin-spacer, .search div.columns .right .scrollmagic-pin-spacer, .page-template-default div.columns .right .scrollmagic-pin-spacer, .page-template-presskit div.columns .right .scrollmagic-pin-spacer { height: auto !important; } } @media (max-width: 479px) { .blog div.columns, .single div.columns, .search div.columns, .page-template-default div.columns, .page-template-presskit div.columns { margin: 0em 0.25em; } .blog div.columns .left, .single div.columns .left, .search div.columns .left, .page-template-default div.columns .left, .page-template-presskit div.columns .left { width: 100%; float: none; padding-right: 0em; } .blog div.columns .left h1.title, .single div.columns .left h1.title, .search div.columns .left h1.title, .page-template-default div.columns .left h1.title, .page-template-presskit div.columns .left h1.title { font-size: 3.5em; } .blog div.columns .right, .single div.columns .right, .search div.columns .right, .page-template-default div.columns .right, .page-template-presskit div.columns .right { width: 100%; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .blog div.columns .right .scrollmagic-pin-spacer, .single div.columns .right .scrollmagic-pin-spacer, .search div.columns .right .scrollmagic-pin-spacer, .page-template-default div.columns .right .scrollmagic-pin-spacer, .page-template-presskit div.columns .right .scrollmagic-pin-spacer { height: auto !important; } } .page div.columns, .search div.columns { margin: 0em 1.5em; } .page div.columns .left .page-content, .search div.columns .left .page-content { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 15px; } .search div.columns section { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #d7d5c9; } .search div.columns section:last-child { border-bottom: none; } .search div.columns section header h1 a { font-family: "PT-Schoolhouse", sans-serif; font-size: 1em; color: #8a8a88; letter-spacing: 0.07em; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } .search div.columns section header h1 a:hover { color: #5466c1; text-decoration: none; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } @media (min-width: 480px) and (max-width: 759px) { .page div.columns, .search div.columns { margin: 0em 1em; } .page div.columns .left .page-content, .search div.columns .left .page-content { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } } @media (max-width: 479px) { .page div.columns, .search div.columns { margin: 0em 0.25em; } .page div.columns .left .page-content, .search div.columns .left .page-content { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } } #home div.top-story { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #d7d5c9; box-shadow: 3px 0px 8px 0px rgba(0, 0, 0, 0.1); } #home div.top-story p { font-size: 1.15em; margin: 0em; } #home div.top-story header { padding: 3em 2.1rem 3em 0em; position: relative; margin-bottom: 10px; margin-left: 2.1rem; } #home div.top-story header h1 { font-family: "Quicksand", Helvetica, Arial, sans-serif; font-weight: 300; padding: 0em 0em 0.3em 0em; margin: 0em; max-width: 50%; font-size: 1.7em; color: #9e9e97; } #home div.top-story header a { max-width: 55%; font-family: "PT-Schoolhouse", sans-serif; font-size: 2.1em; text-decoration: none; color: #8a8a88; letter-spacing: 0.05em; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } #home div.top-story header a:hover { color: #5466c1; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } #home div.top-story header .date { position: absolute; right: 2.1rem; bottom: 2.1rem; } #home div.top-story header .date p { color: #9e9e97; } #home div.top-story header .date p.year { font-size: 1.15em; font-weight: 700; text-align: right; } #home div.top-story header::after { width: 100%; display: block; content: ""; margin-left: 2.1rem; height: 10px; display: block; position: absolute; background-image: url("../img/px_divider-blue.png"); background-repeat: repeat-x; right: 0em; bottom: -10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #home div.top-story .body { position: relative; padding: 2em 0em 3em 2.1rem; } #home div.top-story .body a.text-button { color: #5466c1; padding: 1.4em 1em 1.4em 0em; float: right; } #home div.top-story .body a.article-image { display: block; width: 33%; height: auto; margin-left: 2em; overflow: hidden; /* background-image: url('../img/top_story-photo.png'); background-position: center center; background-repeat: no-repeat; background-color: $nc-dark-grey; */ float: right; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 5px; } #home div.top-story .body a.article-image img { max-width: 100%; } #home div.top-story .body p { padding: 0em 0em 2em 0em; } #home div.top-story .body .content { width: auto; display: inline; } #home div.top-story .body ul.share-buttons { margin-top: 1.1rem; float: left; } @media (min-width: 760px) and (max-width: 1079px) { #home div.top-story header a { max-width: 80%; } } @media (min-width: 480px) and (max-width: 759px) { #home div.top-story .body { padding-right: 2em; } #home div.top-story .body p { font-size: 1.1em; } #home div.top-story .body a.article-image { display: none; } } @media (max-width: 479px) { #home div.top-story header { padding: 1.5rem 1.5em 1.5em 0em; margin-left: 1.5em; } #home div.top-story header h1 { font-size: 1.4em; padding-bottom: 0em; } #home div.top-story header a { max-width: none; font-size: 1.7em; color: #5466c1; } #home div.top-story header .date { position: relative; right: auto; bottom: auto; padding: 0.3em 0em 0.6em 0em; } #home div.top-story header .date p { margin: 0em; display: inline; } #home div.top-story header .date p.year { text-align: left; } #home div.top-story .body { padding: 1em 0em; } #home div.top-story .body a.text-button { padding: 1.4em 1em 1.4em 1.5rem; } #home div.top-story .body a.article-image { display: none; } #home div.top-story .body .content { width: 100%; max-width: none; float: none; } #home div.top-story .body p { font-size: 1em; padding: 1em 1.2em 1.5em 1.5rem; } #home div.top-story .body ul.share-buttons { margin-left: 1.5em; } } div.story-columns { width: 100%; } div.story-columns p { font-size: 1.15em; } div.story-columns .more-stories { width: 40%; float: right; border-bottom: none; background-color: #eeeeee; } div.story-columns .more-stories ul { width: auto; position: relative; margin: 0em; list-style: none; padding: 0em 1.5em; } div.story-columns .more-stories ul::before { display: block; content: ""; width: 1px; height: 100%; position: absolute; background-color: #d7d5c9; left: -1px; top: 0em; } div.story-columns .more-stories ul li { padding: 1.4em 1em 1.4em 0em; border-bottom-style: solid; border-bottom-color: #d7d5c9; border-bottom-width: 1px; } div.story-columns .more-stories ul li a { color: #8a8a88; text-decoration: none; font-family: "PT-Schoolhouse", sans-serif; font-size: 1.15em; letter-spacing: 1px; padding-top: 0.5em; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } div.story-columns .more-stories ul li a:hover { color: #5466c1; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } div.story-columns .more-stories ul li a.text-button { float: right; } div.story-columns .more-stories ul li:first-child a.text-button { float: none; padding-top: 0em; } div.story-columns .more-stories ul li:last-child { border-bottom: none; } div.story-columns .more-stories .text-button { color: #5466c1; } div.story-columns .second-story { width: 60%; float: left; border-right-style: solid; border-right-color: #d7d5c9; border-right-width: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.story-columns .second-story section { padding: 3rem 2.1rem; } div.story-columns .second-story section:last-child { padding-top: 0em; } div.story-columns .second-story header { padding-bottom: 1rem; } div.story-columns .second-story header a { font-family: "PT-Schoolhouse", sans-serif; font-size: 2.1em; text-decoration: none; color: #8a8a88; padding-bottom: 0.2em; letter-spacing: 0.05em; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } div.story-columns .second-story header a:hover { color: #5466c1; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } div.story-columns .second-story header .date { font-family: "Quicksand", Helvetica, Arial, sans-serif; color: #9e9e97; } div.story-columns .second-story p { margin: 0em; padding: 0em; } div.story-columns .second-story a.text-button { position: relative; color: #5466c1; float: right; margin: 0.5em 0rem 0.5em 0rem; } div.story-columns .second-story ul.share-buttons { margin-top: 0em; float: left; } @media (min-width: 760px) and (max-width: 1079px) { div.story-columns { /* .more-stories { width: 100%; float: none; } .second-story { width: 100%; float: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: $nc-pale-grey; @include nc-shadows('box', 0px 3px 8px 0px rgba(0, 0, 0, 0.1)); } */ } } @media (min-width: 480px) and (max-width: 759px) { div.story-columns .more-stories { width: 100%; float: none; } div.story-columns .more-stories ul::before { display: none; } div.story-columns .second-story { width: 100%; float: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #d7d5c9; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); } div.story-columns .second-story p { font-size: 1.1em; } } @media (max-width: 479px) { div.story-columns .more-stories { width: 100%; float: none; } div.story-columns .more-stories ul { padding-left: 1.5rem; } div.story-columns .more-stories ul::before { display: none; } div.story-columns .second-story { width: 100%; float: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #d7d5c9; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); } div.story-columns .second-story section { padding: 1.5rem; } div.story-columns .second-story header a { font-size: 1.7em; } div.story-columns .second-story p { font-size: 1em; } } div.subscribe { width: 100%; height: auto; padding: 2rem 0em; text-align: center; background-color: #79a0e5; border-top: 1px solid #c0d9ff; background-image: url("../img/mail_px.png"); background-size: 200px 200px; -webkit-background-size: 200px 200px; background-repeat: no-repeat; box-shadow: inset 0px -6px 6px 0px rgba(0, 0, 0, 0.07); background-repeat: repeat; background-attachment: fixed; /* #home & { width: auto; margin-left: 1.5em; margin-right: 1.5em; @include nc-box-sizing(border-box); @include nc-border-radius(15px); } */ } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { div.subscribe { background-image: url("../img/mail_px@2x.png"); /* background-size: $w $h; -webkit-background-size: $w $h; */ } } #home div.subscribe { width: auto; margin-left: 1.5em; margin-right: 1.5em; margin-top: 1.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } div.subscribe a.text-button { color: #5466c1; font-weight: 700; text-decoration: none; font-family: "Quicksand", Helvetica, Arial, sans-serif; font-size: 1em; } div.subscribe a.text-button span[class*='icon-'] { color: #5466c1; font-size: 1em; text-shadow: 0px 0px 0px transparent; } div.subscribe span[class*='icon-'] { color: white; font-size: 3rem; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1); } div.subscribe h1 { font-family: "Quicksand", Helvetica, Arial, sans-serif; color: white; letter-spacing: 0px; font-weight: 100; font-size: 2.5em; padding: 0em; margin: 0em; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1); } div.subscribe p { padding: 1em 0em 2em 0em; color: white; margin: 0em auto; } div.subscribe form { display: block; margin: 0em auto; position: relative; padding-bottom: 1.5em; } div.subscribe form input[type=email], div.subscribe form input[type=text] { width: 100%; display: block; font-family: "Quicksand", Helvetica, Arial, sans-serif; font-size: 1.15em; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #7e8fe5; color: #8a8a88; padding: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } div.subscribe form button { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; cursor: pointer; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border: none; background-color: transparent; color: #5466c1; font-size: 1.15em; position: absolute; right: 0.5em; top: 1.1em; } div.subscribe form button::before { content: "\e613"; text-indent: 0px; } div.subscribe form button span { display: block; text-indent: -10000px; } @media (min-width: 480px) and (max-width: 759px) { #home div.subscribe { margin-left: 1em; margin-right: 1em; } div.subscribe span[class*='icon-'] { font-size: 2em; } div.subscribe h1 { font-size: 1.8em; } div.subscribe form input[type=email], div.subscribe form input[type=text] { font-size: 1em; } div.subscribe form button { top: 0.8em; } } @media (max-width: 479px) { div.subscribe { padding: 1.5em 0em; } #home div.subscribe { margin-left: 0.25em; margin-right: 0.25em; } div.subscribe span[class*='icon-'] { font-size: 2em; } div.subscribe h1 { font-size: 1.8em; } } #publishing div.overview { background-color: white; position: relative; z-index: 1; margin: 0em 1.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } #publishing div.overview h2 { display: block; color: #1f3291; position: relative; font-family: "PT-Schoolhouse", sans-serif; font-size: 2em; font-weight: 400; margin: 0em; padding-bottom: 1rem; margin-bottom: 1rem; letter-spacing: 2px; } #publishing div.overview h2::after { display: block; width: 20px; height: 4px; content: " "; position: absolute; background-color: #1f3291; left: 0em; bottom: -4px; } #publishing div.overview p { font-size: 1.15em; } #publishing div.overview div.columns { position: relative; padding: 6em 6em 3em 6em; } #publishing div.overview div.columns div.left { width: 52%; max-width: 66%; background-color: transparent; background: transparent; box-shadow: none; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #publishing div.overview div.columns div.isometric-scrims { width: 650px; height: 670px; position: absolute; right: 0em; bottom: -177px; } #publishing div.overview div.columns div.isometric-scrims .scrim { width: 590px; height: 355px; position: absolute; left: 0em; bottom: 0em; background-position: center top; background-repeat: no-repeat; left: 30px; } #publishing div.overview div.columns div.isometric-scrims .scrim.a { width: 650px; height: 429px; left: auto; } #publishing div.overview div.columns div.isometric-scrims .scrim.b { margin-bottom: 21%; } #publishing div.overview div.columns div.isometric-scrims .scrim.b.active { margin-bottom: 34%; } #publishing div.overview div.columns div.isometric-scrims .scrim.c { margin-bottom: 28%; } #publishing div.overview div.columns div.isometric-scrims .scrim.c.active { margin-bottom: 48%; } #publishing div.overview div.columns div.isometric-scrims .scrim.d { margin-bottom: 37%; } #publishing div.overview div.columns div.isometric-scrims .scrim.d.active { margin-bottom: 66%; } #publishing div.overview div.columns div.isometric-scrims .scrim.e { margin-bottom: 46%; } #publishing div.overview div.columns div.isometric-scrims .scrim.e.active { margin-bottom: 92%; } #publishing div.overview div.columns div.isometric-scrims .scrim.active { margin-top: 0px; } @media (min-width: 1200px) and (max-width: 1400px) { #publishing div.overview div.columns div.isometric-scrims { width: 580px; height: 598px; bottom: -120px; } #publishing div.overview div.columns div.isometric-scrims .scrim { width: 527px; height: 317px; left: 25px; } #publishing div.overview div.columns div.isometric-scrims .scrim.a { width: 580px; height: 383px; } } @media (min-width: 1080px) and (max-width: 1199px) { #publishing div.overview div.columns div.isometric-scrims { width: 520px; height: 536px; bottom: -120px; } #publishing div.overview div.columns div.isometric-scrims .scrim { width: 472px; height: 284px; left: 24px; } #publishing div.overview div.columns div.isometric-scrims .scrim.a { width: 520px; height: 343px; } } @media (min-width: 760px) and (max-width: 1079px) { #publishing div.overview div.columns { padding: 4em 4em 2em 4em; } #publishing div.overview div.columns div.left { width: auto; max-width: none; float: none; margin: 0em auto; } #publishing div.overview div.columns div.isometric-scrims { display: none; } #publishing div.overview p { font-size: 1.15em; } } @media (min-width: 480px) and (max-width: 759px) { #publishing div.overview p { font-size: 1.1em; text-align: center; } #publishing div.overview div.columns { padding: 3em 3em 1.5em 3em; } #publishing div.overview div.columns div.left { width: auto; max-width: none; float: none; margin: 0em auto; } #publishing div.overview div.columns div.isometric-scrims { display: none; } } @media (max-width: 479px) { #publishing div.overview { margin-left: 0.25em; margin-right: 0.25em; } #publishing div.overview p { font-size: 1em; text-align: center; } #publishing div.overview div.columns { padding: 1.5em; } #publishing div.overview div.columns div.left { width: auto; max-width: none; float: none; margin: 0em auto; } #publishing div.overview div.columns div.isometric-scrims { display: none; } } div.publishing-features { width: 100%; position: relative; } div.publishing-features div.feature-wrap { overflow: hidden; } div.publishing-features ul { display: block; margin: 0em; padding: 0em; list-style: none; background-image: url("../img/publishing_features.png"); background-attachment: fixed; } div.publishing-features ul li { width: 25%; min-height: 100%; float: left; position: relative; z-index: 0; padding: 5em 0.8em 0em 0.8em; background-position: left top; background-attachment: fixed; color: white; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.publishing-features ul li::after { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e61d"; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 3em; position: absolute; right: -1.5rem; top: 3.5em; z-index: 1; } div.publishing-features ul li:nth-child(1) { z-index: 4; } div.publishing-features ul li:nth-child(2) { z-index: 3; } div.publishing-features ul li:nth-child(3) { z-index: 2; } div.publishing-features ul li:nth-child(4) { z-index: 1; } div.publishing-features ul li:nth-child(4)::after { display: none; } div.publishing-features ul li.development { background-color: rgba(255, 150, 0, 0.8); } div.publishing-features ul li.marketing { background-color: rgba(76, 189, 0, 0.8); } div.publishing-features ul li.promotion { background-color: rgba(248, 216, 0, 0.8); } div.publishing-features ul li.support { background-color: rgba(221, 6, 36, 0.8); } div.publishing-features ul li span { font-size: 2.5em; text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.15); } div.publishing-features ul li h1 { margin: 0em; padding: 0.2em 0.5em 0em 0.5em; text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.15); } div.publishing-features ul li p { display: block; padding: 3em 1.8em 5em; position: relative; font-size: 1.15em; margin: 0em; text-align: left; color: white; /* &::after { display: block; content: ""; width: 36px; height: 36px; //background-image: red; position: absolute; top: -22px; left: 50%; margin-left: -18px; background-repeat: repeat; background-attachment: fixed; @include nc-border-radius(100%); } */ } div.publishing-features .porting { margin: 0em auto; max-width: 70%; position: relative; overflow: hidden; text-align: center; padding: 2em 1em; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; /* div[class*='icon'] { color: #ececec; float: left; font-size: 8rem; position: absolute; left: 0.5rem; bottom: -0.5rem; } */ } div.publishing-features .porting h1 { color: #8a8a88; font-family: "PT-Schoolhouse", sans-serif; margin: 0em; font-weight: 400; padding: 0em 0em 0em 0rem; position: relative; z-index: 2; } div.publishing-features .porting p { display: block; padding: 0.3em 0em 0em 0em; margin: 0em; position: relative; z-index: 1; } div.publishing-features .porting p::before { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; left: 50%; top: 50%; font-size: 8em; color: #ececec; content: "\e610"; z-index: -1; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } @media (min-width: 1080px) and (max-width: 1199px) { div.publishing-features ul li { width: 50%; } div.publishing-features ul li::after { display: none; } div.publishing-features ul li p { margin-bottom: 0.8em; } div.publishing-features .porting { max-width: 85%; } } @media (min-width: 760px) and (max-width: 1079px) { div.publishing-features ul li { width: 50%; } div.publishing-features ul li::after { display: none; } div.publishing-features ul li p { font-size: 1.15em; margin-bottom: 0.8em; } div.publishing-features .porting { max-width: 90%; } } @media (min-width: 480px) and (max-width: 759px) { div.publishing-features ul li { width: 100%; padding-top: 2em; } div.publishing-features ul li::after { right: auto; top: 100%; margin-left: -1.5rem; margin-top: -1.5rem; } div.publishing-features ul li p { font-size: 1.1em; margin-bottom: 0.8em; padding: 1.5em; } div.publishing-features .porting { max-width: 95%; } div.publishing-features .porting div[class*='icon'] { top: 0.2em; bottom: auto; } } @media (max-width: 479px) { div.publishing-features { padding: 0em 0em; } div.publishing-features div.feature-wrap { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } div.publishing-features ul li { width: 100%; padding-top: 2em; } div.publishing-features ul li::after { right: auto; top: 100%; margin-left: -1.5rem; margin-top: -1.5rem; } div.publishing-features ul li p { font-size: 1em; margin-bottom: 0.8em; padding: 1.5em; } div.publishing-features .porting { max-width: 100%; } div.publishing-features .porting div[class*='icon'] { top: 0.2em; bottom: auto; } } div.center-clip { text-align: center; max-width: 50%; margin: 0em auto; padding: 0em 3em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #services div.center-clip { max-width: 60%; } #services div.center-clip p { padding: 1em 0em; text-align: justify; } @media (min-width: 1080px) and (max-width: 1199px) { div.center-clip { max-width: 70%; } } @media (min-width: 760px) and (max-width: 1079px) { div.center-clip { max-width: 80%; } } @media (min-width: 480px) and (max-width: 759px) { div.center-clip { max-width: 88%; } } @media (max-width: 479px) { div.center-clip { padding-left: 1em; padding-right: 1em; max-width: 98%; } } div.new-horizons { position: relative; padding-bottom: 3em; margin-top: -3rem; z-index: 0; } div.new-horizons span[class*='icon-'] { color: white; font-size: 9.5em; position: relative; z-index: 1; } div.new-horizons section.content { border-top-width: 1px; border-top-style: solid; border-top-color: rgba(255, 255, 255, 0.4); padding: 2em; background-image: url("../img/bg_texture-new_horizons.png"); background-size: auto 100%; background-repeat: repeat-x; background-position: left top; position: relative; margin-top: -1em; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } div.new-horizons h1 { font-family: "PT-Schoolhouse", sans-serif; color: white; font-weight: 400; font-size: 2em; } div.new-horizons p { font-size: 1.15em; color: white; } @media (min-width: 480px) and (max-width: 759px) { div.new-horizons { max-width: none; padding-left: 1.5rem; padding-right: 1.5rem; } } @media (max-width: 479px) { div.new-horizons { max-width: none; padding-left: 0.25em; padding-right: 0.25em; } } div.lets-do-this { padding-bottom: 3em; } div.lets-do-this h1 { font-family: "PT-Schoolhouse", sans-serif; color: white; font-size: 2.2em; font-weight: 400; } div.lets-do-this h1 span { background-color: #071345; } div.lets-do-this h1::after { background-color: #eff5ff; } div.lets-do-this p { color: white; padding-bottom: 1em; } div.lets-do-this a.button { font-family: "PT-Schoolhouse", sans-serif; /* span[class*='icon-'] { font-size: 0.8em; margin-right: 0.2em; @include nc-transition(margin); } &:hover { span[class*='icon-'] { margin-right: 0em; margin-left: 0.2em; @include nc-transition(margin); } } */ } div.lets-do-this a.button span { margin: 0em; } div.lets-do-this a.button span:first-child { position: relative; top: 2px; margin-right: 1em; } div.lets-do-this a.button span[class*='icon-'] { float: right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } div.lets-do-this a.button span[class*='icon-email-open'] { display: none; } div.lets-do-this a.button:hover span { margin: 0em; } div.lets-do-this a.button:hover span:first-child { margin-right: 1em; } div.lets-do-this a.button:hover span[class*='icon-'] { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } div.lets-do-this a.button:hover span[class*='icon-email'] { display: none; } div.lets-do-this a.button:hover span[class*='icon-email-open'] { display: inline; } @media (max-width: 479px) { div.lets-do-this { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } } div.dev-story { padding-top: 6em; background-image: url("../img/publishing-dev_story-background.jpg"); background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; margin: 0em 1.5em; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } div.dev-story .content-wrap { max-width: 70%; margin: 0em auto; overflow: auto; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } div.dev-story .content-wrap header { position: relative; padding: 0em 0em 0em 28%; z-index: 0; } div.dev-story .content-wrap header h1 { font-family: "PT-Schoolhouse", sans-serif; font-size: 3.4em; float: left; padding: 0em; margin: 0em; font-weight: 400; text-transform: uppercase; margin-bottom: -0.2em; color: rgba(255, 255, 255, 0.9); } div.dev-story .content-wrap .content { background-color: rgba(255, 255, 255, 0.9); padding: 3em 5em 3em 28%; position: relative; border-top-width: 1px; border-top-style: solid; border-top-color: rgba(255, 255, 255, 0.9); z-index: 1; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } div.dev-story .content-wrap .content a.share { display: block; padding: 1.5em 0.2em 0.1em 0em; color: #5466c1; position: absolute; right: 1em; top: 0em; } div.dev-story .content-wrap .content a.title { font-family: "PT-Schoolhouse", sans-serif; color: #5466c1; font-size: 2em; letter-spacing: 0.06em; } div.dev-story .content-wrap .content a.title span[class*='icon-'] { margin-left: 0em; font-size: 0.7em; -webkit-transition: margin-left 0.5s ease-out; -moz-transition: margin-left 0.5s ease-out; -ms-transition: margin-left 0.5s ease-out; -o-transition: margin-left 0.5s ease-out; transition: margin-left 0.5s ease-out; } div.dev-story .content-wrap .content a.title:hover { text-decoration: none; } div.dev-story .content-wrap .content a.title:hover span[class*='icon-'] { margin-left: 0.2em; -webkit-transition: margin-left 0.5s ease-out; -moz-transition: margin-left 0.5s ease-out; -ms-transition: margin-left 0.5s ease-out; -o-transition: margin-left 0.5s ease-out; transition: margin-left 0.5s ease-out; } div.dev-story .content-wrap .content div p { margin: 0em 0em; } div.dev-story .content-wrap .content p { text-align: justify; } div.dev-story .content-wrap .content blockquote { position: relative; color: #9e9e97; padding-left: 3.5em; margin: 0em; padding-top: 1rem; padding-bottom: 1rem; } div.dev-story .content-wrap .content blockquote::before { display: block; font-family: 'icomoon'; content: "\f10d"; position: absolute; color: #87b7fb; font-size: 2.5rem; left: 0em; top: 2rem; } div.dev-story .content-wrap .content blockquote p { color: #9e9e97; } div.dev-story .content-wrap .content blockquote footer { text-align: right; } div.dev-story .content-wrap .content blockquote footer span strong { font-size: 1rem; display: block; } div.dev-story .hand { position: absolute; bottom: -340px; background-size: 100% 100%; z-index: 1; -webkit-transform: translateX(-10%); -moz-transform: translateX(-10%); -ms-transform: translateX(-10%); -o-transform: translateX(-10%); transform: translateX(-10%); } div.dev-story .hand.anim { bottom: -100px; } div.dev-story #mmm-fingers .hand { width: 498px; height: 806px; background-image: url("../img/publishing-dev_story-mmmfingers.png"); background-position: left top; background-repeat: no-repeat; } @media (min-width: 1200px) and (max-width: 1380px) { div.dev-story .content-wrap { max-width: 85%; } div.dev-story .hand { left: -100px; bottom: -300px; } div.dev-story .hand.anim { bottom: -100px; } } @media (min-width: 1080px) and (max-width: 1199px) { div.dev-story { background-image: none; } div.dev-story .content-wrap { max-width: 100%; } div.dev-story .content-wrap .content { padding-left: 33%; } div.dev-story .content-wrap header { padding-left: 33%; } div.dev-story .hand { left: -140px; -webkit-transform: translateX(-2%); -moz-transform: translateX(-2%); -ms-transform: translateX(-2%); -o-transform: translateX(-2%); transform: translateX(-2%); } div.dev-story .hand.anim { bottom: -70px; } } @media (min-width: 760px) and (max-width: 1079px) { div.dev-story { background-image: none; } div.dev-story .content-wrap { max-width: 100%; } div.dev-story .content-wrap .content { padding: 5em; } div.dev-story .content-wrap .content blockquote { margin-left: 260px; } div.dev-story .content-wrap header { padding-left: 3rem; } div.dev-story #mmm-fingers .hand { width: 280px; height: 453px; bottom: -200px; left: 0px; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @media (max-width: 860px) { div.dev-story .content-wrap { max-width: 100%; } div.dev-story .content-wrap .content { padding: 4em; } div.dev-story .content-wrap .content blockquote { margin-left: auto; } div.dev-story #mmm-fingers .hand { display: none; } } @media (min-width: 480px) and (max-width: 759px) { div.dev-story { background-image: none; } div.dev-story .content-wrap { max-width: 100%; } div.dev-story .content-wrap .content { padding: 3em 3em 3em 3em; } div.dev-story .content-wrap .content blockquote { padding-left: 2em; padding-right: 2em; text-align: left; } div.dev-story .content-wrap .content blockquote::before { display: none; } div.dev-story .content-wrap header { padding-left: 3rem; } div.dev-story .hand { display: none; } } @media (max-width: 479px) { div.dev-story { margin-left: 0.25em; margin-right: 0.25em; background-image: none; } div.dev-story .content-wrap { max-width: 100%; } div.dev-story .content-wrap header { padding-left: 1rem; font-size: 0.8em; } div.dev-story .content-wrap .content { padding: 2em; } div.dev-story .content-wrap .content blockquote { padding-left: 1em; padding-right: 1em; text-align: left; } div.dev-story .content-wrap .content blockquote::before { display: none; } div.dev-story .hand { display: none; } } div.nav-wrapper { width: 100%; position: relative; left: 0em; top: 0em; z-index: 1000; } @media (min-width: 760px) and (max-width: 1079px) { div.nav-wrapper { position: relative; left: auto; top: auto; z-index: auto; } } @media (min-width: 480px) and (max-width: 759px) { div.nav-wrapper { position: relative; left: auto; top: auto; z-index: auto; } } @media (max-width: 479px) { div.nav-wrapper { position: relative; left: auto; top: auto; z-index: auto; } } div.preload { display: none; } #games div .canvas-wrap { position: absolute; width: 100%; height: 100%; top: 0em; left: 0em; } #games div .canvas-wrap canvas { width: auto; height: 100%; left: 0em; top: 0em; } #games div .canvas-wrap .overlay { width: 100%; height: 100%; position: absolute; left: 0em; top: 0em; background-color: rgba(7, 19, 69, 0.9); /* background-image: url('../img/page_gradient-fallback.png'); background-position: left bottom; background-repeat: repeat-x; background-size: auto; */ } div.articles { position: relative; } .single div.articles, .search div.articles, .page-template-default div.articles, .page-template-presskit div.articles { margin-top: 3em; } div#navbelow { padding: 3em 3em 0em 3em; overflow: hidden; } div#navbelow div.nav-prev a { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } div#navbelow div.nav-prev.half { width: 49.8%; float: right; } div#navbelow div.nav-prev.half a { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } div#navbelow div.nav-next a { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } div#navbelow div.nav-next.half { width: 50%; float: left; } div#navbelow div.nav-next.half a { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } div#navbelow div a { display: block; font-family: "PT-Schoolhouse", sans-serif; font-size: 1.15em; width: 100%; letter-spacing: 0.07em; background-color: #5466c1; color: white; padding: 1em 0em; text-align: center; -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out; -ms-transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out; /* &::after { display: block; content: ""; width: 100%; height: 20%; position: absolute; left: -1px; top: -3px; border-top: 1px solid $nc-button-blue; border-left: 1px solid $nc-button-blue; border-right: 1px solid $nc-button-blue; @include nc-border-radius(5px, 5px, 0px, 0px); } */ } div#navbelow div a span { margin: 0em; padding: 0em; } div#navbelow div a span[class*='icon-'] { position: relative; top: 0.1em; } div#navbelow div a:hover { text-decoration: none; background-color: #4455a7; -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out; -ms-transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out; } .page-template-default div#navbelow, .page-template-presskit div#navbelow { display: none; } #games div#navbelow { padding: 0em 0em 2em 0em; overflow: auto; background-color: #071345; } #games div#navbelow div.buttons { max-width: 50%; margin: 0em auto; } #games div#navbelow div.nav-prev a, #games div#navbelow div.nav-next a { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } #games div#navbelow div.nav-prev.half a { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 0px; } #games div#navbelow div.nav-next.half a { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 5px; } @media (min-width: 760px) and (max-width: 1079px) { div#navbelow { padding: 2em 2em 0em 2em; } div#navbelow div a { font-size: 1.15em; } } @media (min-width: 760px) and (max-width: 900px) { div#navbelow { padding: 0em; } div#navbelow div.nav-next a { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 5px; } div#navbelow div.nav-next.half a { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 5px; } div#navbelow div.nav-prev a { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 5px; } div#navbelow div.nav-prev.half a { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 0px; } } @media (max-width: 479px) { div#navbelow { padding: 0em 0em 0em 0em; } div#navbelow div.nav-next a { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } div#navbelow div.nav-next.half a { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 15px; } div#navbelow div.nav-prev a { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } div#navbelow div.nav-prev.half a { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 0px; } #games div#navbelow div.buttons { max-width: none; padding: 0em 1.5em; } } #services div.page-content { margin: 0em 1.5em; } #contact div.page-content .center-clip { padding: 3em 0em; } #contact div.page-content .center-clip p { font-size: 1.15em; } @media (min-width: 480px) and (max-width: 759px) { #contact div.page-content .center-clip p { font-size: 1.1em; } #contact div.page-content .center-clip h1.center-lined { font-size: 1.75em; } } @media (max-width: 479px) { #contact div.page-content .center-clip { padding-left: 1em; padding-right: 1em; } #contact div.page-content .center-clip p { font-size: 1em; } #contact div.page-content .center-clip h1.center-lined { font-size: 1.5em; } } @media (max-width: 479px) { #services div.page-content { margin: 0em 0.25em; } } .search div.page-content, .page-template-default div.page-content, .page-template-presskit div.page-content { background: white; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 0px; } @media (max-width: 479px) { .search div.page-content, .page-template-default div.page-content, .page-template-presskit div.page-content { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } } .search div.page-content a, .search div.page-content img, .search div.page-content a img, .page-template-default div.page-content a, .page-template-default div.page-content img, .page-template-default div.page-content a img, .page-template-presskit div.page-content a, .page-template-presskit div.page-content img, .page-template-presskit div.page-content a img { max-width: 100%; height: auto; } div.page-gradient { overflow: auto; background: url("../img/page_gradient-fallback.png") left top repeat-x; background-size: auto 100%; /* background: -moz-linear-gradient(top, rgba(5,18,68,0) 0%, rgba(5,18,68,0) 0%, rgba(5,18,68,1) 33%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(5,18,68,0)), color-stop(0%, rgba(5,18,68,0)), color-stop(33%, rgba(5,18,68,1))); background: -webkit-linear-gradient(top, rgba(5,18,68,0) 0%, rgba(5,18,68,0) 0%, rgba(5,18,68,1) 33%); background: -o-linear-gradient(top, rgba(5,18,68,0) 0%, rgba(5,18,68,0) 0%, rgba(5,18,68,1) 33%); background: -ms-linear-gradient(top, rgba(5,18,68,0) 0%, rgba(5,18,68,0) 0%, rgba(5,18,68,1) 33%); background: linear-gradient(to bottom, rgba(5,18,68,0) 0%, rgba(5,18,68,0) 0%, rgba(5,18,68,1) 33%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#051244', endColorstr='#051244', GradientType=0 ); */ } div#tweet-feed { position: relative; width: auto; height: inherit; background-color: white; margin-top: 1.5em; overflow: hidden; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } div#tweet-feed a.tweet { display: block; height: 100%; float: left; /* background: white; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 37%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(37%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 37%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 37%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 37%,rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 37%,rgba(255,255,255,1) 100%); */ } div#tweet-feed a.tweet span { display: block; color: #00aced; font-size: 1.25em; padding: 1em; } div#tweet-feed div.feed { padding: 1em; padding-left: 0em; } footer { position: relative; width: 100%; z-index: 0; } footer ul { margin: 0em; padding: 0em; list-style: none; background-color: #071345; } footer ul li { width: 25%; height: auto; float: left; border-right-width: 1px; border-right-style: solid; border-right-color: #5466c1; padding: 3em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer ul li:last-child { border-right: none; } footer ul li h1 { font-size: 1.75em; margin: 0em; padding: 0em; } footer ul li h1 a { margin: 0em; padding: 0em; padding-bottom: 0.5em; color: #5466c1; font-family: "PT-Schoolhouse", sans-serif; } footer ul li p { color: #c0d9ff; margin: 0em; padding: 2em 0em; font-size: 1em; } footer ul li p.copyright { padding: 0em; font-size: 1em; } footer ul li span { color: #87b7fb; } footer ul li span[class*='icon-noodlecake'] { font-size: 2.5em; } footer ul li a { display: block; font-size: 1.15em; position: relative; bottom: 0em; left: 0em; } @media (min-width: 1080px) and (max-width: 1199px) { footer ul { padding: 0em 3em; } footer ul li { width: 33%; /* &:first-child { padding-left: 0em; } &:nth-child(3) { padding-right: 0em; } */ } footer ul li.support { border-right: none; } footer ul li.foot { width: 100%; border-top-width: 1px; border-top-style: solid; border-top-color: #5466c1; /* padding-left: 0em; padding-right: 0em; */ } footer ul li.foot p { max-width: 50%; } } @media (min-width: 760px) and (max-width: 1079px) { footer ul { padding: 3em; } footer ul li { width: 50%; } footer ul li.contact-us { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #5466c1; } footer ul li.publishing { border-right: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #5466c1; } footer ul li span { color: #87b7fb; } footer ul li span[class*='icon-noodlecake'] { font-size: 3em; } } @media (min-width: 480px) and (max-width: 759px) { footer ul { padding: 2em; font-size: 0.9em; } footer ul li { width: 100%; padding: 2em; border-right: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #5466c1; } footer ul li.foot { border-bottom: none; } } @media (max-width: 479px) { footer ul { padding: 1em; font-size: 0.8em; } footer ul li { width: 100%; padding: 2em; border-right: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #5466c1; } footer ul li.foot { border-bottom: none; } } .blog article section.post-content img, .single article section.post-content img { /* width: 100%; height: auto; */ } .blog article section.post-content img.aligncenter, .single article section.post-content img.aligncenter { margin: 0em auto; } .search section, .page-template-default .page-content section, .page-template-presskit .page-content section { padding: 3em; } .search section p:first-child, .page-template-default .page-content section p:first-child, .page-template-presskit .page-content section p:first-child { margin-top: 0em; } #services section.panel { /* margin-left: 1.5em; margin-right: 1.5em; */ overflow: auto; z-index: auto; background-color: #87b7fb; } #services section.panel p { color: white; } #services section.panel h2 { font-family: "PT-Schoolhouse", sans-serif; font-weight: 400; font-size: 2em; padding: 0em; margin: 0em; letter-spacing: 0.07em; text-align: left; color: white; } #services section.panel.first { background-image: url("../img/bg-services.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #0a52b6; overflow: hidden; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } #services section.panel.first h2 { color: #c0d9ff; } #services section.panel.first span[class*='icon-arrow'] { color: #111f5f; font-size: 3em; position: absolute; top: 0em; left: 50%; margin-top: 0em; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: top 0.5s ease-out; -moz-transition: top 0.5s ease-out; -ms-transition: top 0.5s ease-out; -o-transition: top 0.5s ease-out; transition: top 0.5s ease-out; } #services section.panel.second { background-color: #4194f0; background-image: url("../img/bg-services2.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } #services section.panel.pinned span[class*='icon-arrow'] { top: -100px; -webkit-transition: top 0.5s ease-out; -moz-transition: top 0.5s ease-out; -ms-transition: top 0.5s ease-out; -o-transition: top 0.5s ease-out; transition: top 0.5s ease-out; } #services section.panel .center-clip { margin-top: 20%; } #services section.last { background-color: #071345; position: relative; overflow: auto; } #services section.last p { color: #353535; text-align: center; } #services section.last h1 span[class*='icon-'] { font-size: 2em; color: #9e9e97; } #services section.last .section-last-wrap { background-color: white; overflow: auto; padding: 6em 0em; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } #services section.last a.button { font-family: "PT-Schoolhouse", sans-serif; letter-spacing: 0.07em; } #services section.last a.button span[class*='icon-'] { margin-right: 0.15em; margin-left: 0em; -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -ms-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; transition: margin 0.2s ease-out; } #services section.last a.button:hover span[class*='icon-'] { margin-right: 0em; margin-left: 0.15em; -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -ms-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; transition: margin 0.2s ease-out; } @media (min-width: 760px) and (max-width: 1079px) { #services section.panel .center-clip, #services section.last .center-clip { max-width: 70%; } } @media (min-width: 480px) and (max-width: 759px) { #services section.panel .center-clip, #services section.last .center-clip { max-width: 90%; margin: 0em auto; } #services section.panel { padding: 4em 0em; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #services section.panel.first { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #services section.panel.first span[class*='icon-arrow'] { display: none; } #services section.panel.second { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #services section.panel div.center-clip p { text-align: left; } #services section.last .section-last-wrap { padding: 2em 0em; } } @media (max-width: 479px) { #services section.panel .center-clip, #services section.last .center-clip { padding-left: 1em; padding-right: 1em; max-width: 95%; margin: 0em auto; } #services section.panel .center-clip span[class*='icon-consulting'], #services section.last .center-clip span[class*='icon-consulting'] { font-size: 2em; } #services section.panel { padding: 2em 0em; } #services section.panel.first { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #services section.panel.first span[class*='icon-arrow'] { display: none; } #services section.panel.second { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #services section.panel div.center-clip p { text-align: left; } #services section.last .section-last-wrap { padding: 2em 0em; } #services section.last a.button span[class*='icon-'] { display: none; } } .search section a.text-button { color: #5466c1; float: right; } .search section header h1 { margin: 0em; } .blog article, .single article { position: relative; margin-bottom: 1.5em; } .blog article.first, .blog article.second, .single article.first, .single article.second { background: white; padding-bottom: 3em; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.07); } .blog article.first header, .blog article.second header, .single article.first header, .single article.second header { position: relative; padding: 3em 0em 1.6em; margin-right: -3em; } .blog article.first header:after, .blog article.second header:after, .single article.first header:after, .single article.second header:after { display: block; width: 100%; max-width: 100%; height: 10px; display: block; content: " "; position: absolute; background-image: url("../img/px_divider-grey.png"); background-repeat: repeat-x; right: 0em; bottom: 0em; } .blog article.first header h1.top-story, .blog article.second header h1.top-story, .single article.first header h1.top-story, .single article.second header h1.top-story { color: #8a8a88; font-size: 1.7em; font-weight: 100; padding: 0em 0em 0.5em 0em; margin: 0em; } .blog article.first header h2, .blog article.second header h2, .single article.first header h2, .single article.second header h2 { margin: 0em; margin-bottom: 0.25em; } .blog article.first header h2.post-title, .blog article.second header h2.post-title, .single article.first header h2.post-title, .single article.second header h2.post-title { color: #8a8a88; font-family: "PT-Schoolhouse", sans-serif; font-size: 1.7rem; max-width: 90%; } .blog article.first header h2.post-title a, .blog article.second header h2.post-title a, .single article.first header h2.post-title a, .single article.second header h2.post-title a { color: #8a8a88; font-family: "PT-Schoolhouse", sans-serif; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } .blog article.first header h2.post-title a:hover, .blog article.second header h2.post-title a:hover, .single article.first header h2.post-title a:hover, .single article.second header h2.post-title a:hover { color: #5466c1; text-decoration: none; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } .blog article.first .billboard, .blog article.second .billboard, .single article.first .billboard, .single article.second .billboard { display: block; width: 100%; overflow: hidden; padding: 0em; } .blog article.first .billboard img, .blog article.second .billboard img, .single article.first .billboard img, .single article.second .billboard img { max-width: 100%; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .blog article.first .billboard div[class*='icon-'], .blog article.second .billboard div[class*='icon-'], .single article.first .billboard div[class*='icon-'], .single article.second .billboard div[class*='icon-'] { position: absolute; left: 50%; top: 50%; font-size: 8em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; -webkit-opacity: 0.8; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -moz-transform: translateX(-50%) translateY(-50%) scale(1); -ms-transform: translateX(-50%) translateY(-50%) scale(1); -o-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } .blog article.first .billboard:hover img, .blog article.second .billboard:hover img, .single article.first .billboard:hover img, .single article.second .billboard:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .blog article.first .billboard:hover div[class*='icon-'], .blog article.second .billboard:hover div[class*='icon-'], .single article.first .billboard:hover div[class*='icon-'], .single article.second .billboard:hover div[class*='icon-'] { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; -webkit-opacity: 0.5; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.9); -moz-transform: translateX(-50%) translateY(-50%) scale(0.9); -ms-transform: translateX(-50%) translateY(-50%) scale(0.9); -o-transform: translateX(-50%) translateY(-50%) scale(0.9); transform: translateX(-50%) translateY(-50%) scale(0.9); -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } .blog article.first div.yt-wrap, .blog article.second div.yt-wrap, .single article.first div.yt-wrap, .single article.second div.yt-wrap { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; background-color: #8a8a88; } .blog article.first div.yt-wrap div#yt-player, .blog article.second div.yt-wrap div#yt-player, .single article.first div.yt-wrap div#yt-player, .single article.second div.yt-wrap div#yt-player { width: 100% !important; } .blog article.first div.yt-wrap iframe, .blog article.second div.yt-wrap iframe, .single article.first div.yt-wrap iframe, .single article.second div.yt-wrap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .blog article.first div.yt-wrap div.yt-button, .blog article.second div.yt-wrap div.yt-button, .single article.first div.yt-wrap div.yt-button, .single article.second div.yt-wrap div.yt-button { width: 100%; height: 100%; position: absolute; left: 0em; top: 0em; cursor: pointer; overflow: hidden; } .blog article.first div.yt-wrap div.yt-button img, .blog article.second div.yt-wrap div.yt-button img, .single article.first div.yt-wrap div.yt-button img, .single article.second div.yt-wrap div.yt-button img { width: 100%; position: absolute; left: 0em; top: 0em; min-height: 100%; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .blog article.first div.yt-wrap div.yt-button div.wrap, .blog article.second div.yt-wrap div.yt-button div.wrap, .single article.first div.yt-wrap div.yt-button div.wrap, .single article.second div.yt-wrap div.yt-button div.wrap { position: relative; width: 100%; height: 100%; /* right: 2em; bottom: 2em; */ color: white; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; -webkit-opacity: 0.8; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } .blog article.first div.yt-wrap div.yt-button div.wrap p, .blog article.second div.yt-wrap div.yt-button div.wrap p, .single article.first div.yt-wrap div.yt-button div.wrap p, .single article.second div.yt-wrap div.yt-button div.wrap p { padding: 1em 0.5em 0.5em 0em; margin: 0em; color: white; float: left; line-height: 1em; } .blog article.first div.yt-wrap div.yt-button div.wrap div[class*='icon-'], .blog article.first div.yt-wrap div.yt-button div.wrap span[class*='icon-'], .blog article.second div.yt-wrap div.yt-button div.wrap div[class*='icon-'], .blog article.second div.yt-wrap div.yt-button div.wrap span[class*='icon-'], .single article.first div.yt-wrap div.yt-button div.wrap div[class*='icon-'], .single article.first div.yt-wrap div.yt-button div.wrap span[class*='icon-'], .single article.second div.yt-wrap div.yt-button div.wrap div[class*='icon-'], .single article.second div.yt-wrap div.yt-button div.wrap span[class*='icon-'] { font-size: 8em; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: font-size 0.5s ease-out; -moz-transition: font-size 0.5s ease-out; -ms-transition: font-size 0.5s ease-out; -o-transition: font-size 0.5s ease-out; transition: font-size 0.5s ease-out; } .blog article.first div.yt-wrap div.yt-button.off, .blog article.second div.yt-wrap div.yt-button.off, .single article.first div.yt-wrap div.yt-button.off, .single article.second div.yt-wrap div.yt-button.off { display: none; } .blog article.first div.yt-wrap div.yt-button:hover img, .blog article.second div.yt-wrap div.yt-button:hover img, .single article.first div.yt-wrap div.yt-button:hover img, .single article.second div.yt-wrap div.yt-button:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .blog article.first div.yt-wrap div.yt-button:hover div.wrap, .blog article.second div.yt-wrap div.yt-button:hover div.wrap, .single article.first div.yt-wrap div.yt-button:hover div.wrap, .single article.second div.yt-wrap div.yt-button:hover div.wrap { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; -webkit-opacity: 0.5; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .blog article.first .article-wrap, .blog article.second .article-wrap, .single article.first .article-wrap, .single article.second .article-wrap { padding-left: 12em; padding-right: 3em; position: relative; } .blog article.first .excerpt-wrap, .blog article.second .excerpt-wrap, .single article.first .excerpt-wrap, .single article.second .excerpt-wrap { position: relative; padding: 0.75em 0em; } .blog article.first .excerpt-wrap p, .blog article.second .excerpt-wrap p, .single article.first .excerpt-wrap p, .single article.second .excerpt-wrap p { font-size: 1.15em; color: #9e9e97; line-height: 2em; margin-bottom: 1em; } .blog article.first .excerpt-wrap:after, .blog article.second .excerpt-wrap:after, .single article.first .excerpt-wrap:after, .single article.second .excerpt-wrap:after { display: block; content: ""; width: 20px; height: 4px; position: absolute; left: 0em; bottom: 0em; background-color: #d7d5c9; } .blog article.first .date, .blog article.second .date, .single article.first .date, .single article.second .date { position: absolute; top: 3em; left: 3em; width: 6em; z-index: 1; } .blog article.second, .single article.second { margin-bottom: 0em; } .blog article.second p, .single article.second p { padding-bottom: 1em; } .blog article.second a.text-button, .single article.second a.text-button { color: #5466c1; float: right; } .blog article ul.share-buttons, .single article ul.share-buttons { margin: 0em; padding: 0.75em 0em; list-style: none; } .blog article ul.share-buttons li, .single article ul.share-buttons li { float: left; margin-right: 0.5em; } .blog article ul.share-buttons li a:hover, .single article ul.share-buttons li a:hover { text-decoration: none; } .blog article ul.share-buttons li a span.counts, .single article ul.share-buttons li a span.counts { padding-left: 0.75em; margin-left: 0.75em; border-left-width: 1px; border-left-style: solid; border-left-color: #5466c1; -webkit-animation-name: countspan-animation; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: countspan-animation; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: countspan-animation; -ms-animation-duration: 1s; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; animation-name: countspan-animation; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: linear; } .blog article .date, .single article .date { text-align: center; color: white; } .blog article .date .day, .single article .date .day { font-size: 3.75em; font-weight: 700; padding: 0.3rem 0em 0rem; background-color: #87b7fb; letter-spacing: 0em; line-height: 1em; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .blog article .date .month, .single article .date .month { font-size: 1em; font-weight: 400; padding: 0em 0em 0.5rem 0em; border-bottom: 1px solid white; background-color: #87b7fb; } .blog article .date .year, .single article .date .year { font-size: 1em; font-weight: 400; padding: 0.5em 0em; margin-bottom: 1px; background-color: #87b7fb; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .blog article.card, .single article.card { width: 50%; padding-top: 1.5em; margin-bottom: 0em; float: left; background-color: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: none; } .blog article.card .article-wrap, .single article.card .article-wrap { background-color: white; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.07); } .blog article.card:nth-child(1) .article-wrap, .single article.card:nth-child(1) .article-wrap { overflow: hidden; -webkit-border-top-left-radius: 15px; -moz-border-radius-topleft: 15px; border-top-left-radius: 15px; } .blog article.card:nth-child(1), .blog article.card:nth-child(2), .single article.card:nth-child(1), .single article.card:nth-child(2) { padding-top: 0em; } .blog article.card:nth-child(odd), .single article.card:nth-child(odd) { padding-right: 0.75em; } .blog article.card:nth-child(even), .single article.card:nth-child(even) { padding-left: 0.75em; } .blog article.card:nth-child(5) .article-wrap, .single article.card:nth-child(5) .article-wrap { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 15px; } .blog article.card header, .single article.card header { padding: 0em; position: relative; background-image: url("../img/px_footer.png"); background-color: #87b7fb; background-repeat: repeat; background-position: left bottom; padding: 1.5em; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .blog article.card header h2, .single article.card header h2 { position: relative; margin: 0em; z-index: 1; padding-bottom: 0.25em; } .blog article.card header h2 a, .single article.card header h2 a { display: block; font-family: "PT-Schoolhouse", sans-serif; color: white; font-weight: normal; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } .blog article.card header h2 a:hover, .single article.card header h2 a:hover { text-decoration: none; color: #5466c1; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } .blog article.card header time, .single article.card header time { position: relative; color: white; } .blog article.card header div.canvas-wrap, .single article.card header div.canvas-wrap { display: none; width: 100%; height: 100%; position: absolute; left: 0em; top: 0em; z-index: 0; background-image: url("../img/px_default.png"); -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .blog article.card header div.canvas-wrap canvas, .single article.card header div.canvas-wrap canvas { position: relative; z-index: -1; width: 100%; height: 100%; } .blog article.card ul.share-buttons, .single article.card ul.share-buttons { position: relative; padding-bottom: 2em; margin-bottom: 1em; float: none !important; } .blog article.card ul.share-buttons::before, .single article.card ul.share-buttons::before { display: block; content: ""; position: absolute; width: 20px; height: 4px; background-color: #e1e1e1; left: 0em; bottom: 0em; } .blog article.card .text-button, .single article.card .text-button { color: #5466c1; float: right; } .blog article.card .excerpt-wrap, .single article.card .excerpt-wrap { padding: 2rem 2rem 3rem 2rem; position: relative; } .blog article.card .excerpt-wrap p, .single article.card .excerpt-wrap p { display: block; overflow: hidden; } .blog article:last-child, .single article:last-child { margin-bottom: 0em; } .blog article p, .single article p { font-size: 1.15em; margin-bottom: 2em; } .blog article p:last-child, .single article p:last-child { margin-bottom: 0em; } .blog article .post-content a, .blog article .post-content img, .blog article .post-content a img, .single article .post-content a, .single article .post-content img, .single article .post-content a img { max-width: 100% !important; height: auto; } @media (min-width: 760px) and (max-width: 1079px) { .blog article p, .single article p { font-size: 1.15em; } .blog article a.text-button, .single article a.text-button { font-size: 1.15em; } .blog article.first .date, .blog article.second .date, .single article.first .date, .single article.second .date { width: 3.8em; left: 2em; } .blog article.first .article-wrap, .blog article.second .article-wrap, .single article.first .article-wrap, .single article.second .article-wrap { padding-left: 8em; padding-right: 2em; } .blog article.first .article-wrap:last-child, .blog article.second .article-wrap:last-child, .single article.first .article-wrap:last-child, .single article.second .article-wrap:last-child { padding-left: 2em; } .blog article.first .excerpt-wrap p, .blog article.second .excerpt-wrap p, .single article.first .excerpt-wrap p, .single article.second .excerpt-wrap p { font-size: 1.1em; } .blog article.first header, .blog article.second header, .single article.first header, .single article.second header { margin-right: -2em; } .blog article.first header h1.top-story, .blog article.second header h1.top-story, .single article.first header h1.top-story, .single article.second header h1.top-story { font-size: 1.15em; } .blog article.first header h2.post-title, .blog article.second header h2.post-title, .single article.first header h2.post-title, .single article.second header h2.post-title { font-size: 1.5em; } .blog article .date, .single article .date { width: 3.8em; } .blog article .date .day, .single article .date .day { font-size: 1.8em; } .blog article .date .year, .single article .date .year { padding: 0.25em 0em; } .blog article.card:nth-child(5) div.article-wrap, .single article.card:nth-child(5) div.article-wrap { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .blog article.card:last-child div.article-wrap, .single article.card:last-child div.article-wrap { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 15px; } .blog article.card header h2 a, .single article.card header h2 a { font-size: 0.9em; } .blog article.card header .date, .single article.card header .date { width: auto; left: 1em; top: 1em; } .blog article.card header .date .day, .single article.card header .date .day { display: inline; background-color: transparent; font-size: 1em; padding: 0em; margin: 0em; padding-right: 0.25em; } .blog article.card header .date .month, .single article.card header .date .month { display: inline; background-color: transparent; font-size: 1em; padding: 0em; margin: 0em; border-bottom: none; padding-right: 0.25em; } .blog article.card header .date .year, .single article.card header .date .year { display: inline; background-color: transparent; font-size: 1em; padding: 0em; margin: 0em; } .blog article.card .excerpt-wrap, .single article.card .excerpt-wrap { padding: 1rem 1rem 2rem 1rem; } } @media (min-width: 760px) and (max-width: 900px) { .blog article.card, .single article.card { width: 100%; } .blog article.card:nth-child(odd), .single article.card:nth-child(odd) { padding-right: 0em; } .blog article.card:nth-child(even), .single article.card:nth-child(even) { padding-left: 0em; } } @media (min-width: 480px) and (max-width: 759px) { .blog article.first .date, .blog article.second .date, .single article.first .date, .single article.second .date { width: 3.8em; left: 2em; } .blog article.first .date .day, .blog article.second .date .day, .single article.first .date .day, .single article.second .date .day { font-size: 1.8rem; } .blog article.first .date .year, .blog article.second .date .year, .single article.first .date .year, .single article.second .date .year { padding: 0.25em 0em; } .blog article.first .article-wrap, .blog article.second .article-wrap, .single article.first .article-wrap, .single article.second .article-wrap { padding-left: 8em; padding-right: 2em; } .blog article.first .article-wrap:last-child, .blog article.second .article-wrap:last-child, .single article.first .article-wrap:last-child, .single article.second .article-wrap:last-child { padding-left: 2em; } .blog article.first .excerpt-wrap p, .blog article.second .excerpt-wrap p, .single article.first .excerpt-wrap p, .single article.second .excerpt-wrap p { font-size: 1.1em; } .blog article.first header, .blog article.second header, .single article.first header, .single article.second header { margin-right: -2em; } .blog article.first header h1.top-story, .blog article.second header h1.top-story, .single article.first header h1.top-story, .single article.second header h1.top-story { font-size: 1.15em; } .blog article.first header h2.post-title, .blog article.second header h2.post-title, .single article.first header h2.post-title, .single article.second header h2.post-title { max-width: none; font-size: 1.5em; } .blog article.first, .single article.first { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .blog article.second, .single article.second { margin-bottom: 0.75em; } .blog article:first-child.card div.article-wrap, .single article:first-child.card div.article-wrap { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .blog article:nth-child(5).card div.article-wrap, .single article:nth-child(5).card div.article-wrap { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .blog article:last-child, .single article:last-child { /* &.card { div.article-wrap { @include nc-border-radius(5px, 5px, 15px, 15px); } } */ } .blog article.card, .single article.card { width: 100%; padding: 0.75em 0em 0.75em 0em; } .blog article.card:nth-child(odd), .single article.card:nth-child(odd) { padding-right: 0em; } .blog article.card:nth-child(even), .single article.card:nth-child(even) { padding-left: 0em; } } @media (max-width: 479px) { .blog article.first header, .blog article.second header, .single article.first header, .single article.second header { margin-right: -2em; } .blog article.first header h2.post-title, .blog article.second header h2.post-title, .single article.first header h2.post-title, .single article.second header h2.post-title { margin-right: 5rem; } .blog article.first .date, .blog article.second .date, .single article.first .date, .single article.second .date { width: 3.8em; left: auto; right: 1em; top: -0.5em; } .blog article.first .date .day, .blog article.second .date .day, .single article.first .date .day, .single article.second .date .day { font-size: 1.8rem; } .blog article.first .date .year, .blog article.second .date .year, .single article.first .date .year, .single article.second .date .year { padding: 0.25em 0em; } .blog article.first .article-wrap, .blog article.second .article-wrap, .single article.first .article-wrap, .single article.second .article-wrap { padding-left: 2em; padding-right: 2em; } .blog article.first .excerpt-wrap p, .blog article.second .excerpt-wrap p, .single article.first .excerpt-wrap p, .single article.second .excerpt-wrap p { font-size: 1em; } .blog article.first div.yt-wrap div.yt-button div.wrap div[class*='icon-'], .blog article.first div.yt-wrap div.yt-button div.wrap span[class*='icon-'], .blog article.second div.yt-wrap div.yt-button div.wrap div[class*='icon-'], .blog article.second div.yt-wrap div.yt-button div.wrap span[class*='icon-'], .single article.first div.yt-wrap div.yt-button div.wrap div[class*='icon-'], .single article.first div.yt-wrap div.yt-button div.wrap span[class*='icon-'], .single article.second div.yt-wrap div.yt-button div.wrap div[class*='icon-'], .single article.second div.yt-wrap div.yt-button div.wrap span[class*='icon-'] { font-size: 5em; } .blog article.first header h1.top-story, .blog article.second header h1.top-story, .single article.first header h1.top-story, .single article.second header h1.top-story { font-size: 1.15em; } .blog article.first header h2.post-title, .blog article.second header h2.post-title, .single article.first header h2.post-title, .single article.second header h2.post-title { font-size: 1.5em; } .blog article.first, .single article.first { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .blog article:first-child.card, .single article:first-child.card { padding-bottom: 1.5em; } .blog article:first-child.card div.article-wrap, .single article:first-child.card div.article-wrap { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .blog article.card, .single article.card { width: 100%; } .blog article.card:nth-child(5).card div.article-wrap, .single article.card:nth-child(5).card div.article-wrap { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .blog article.card:nth-child(odd), .single article.card:nth-child(odd) { padding-right: 0em; } .blog article.card:nth-child(even), .single article.card:nth-child(even) { padding-left: 0em; } .blog article.card .excerpt-wrap, .single article.card .excerpt-wrap { padding: 2em 2em 3em 2em; } } .single article.first { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 15px; } @media (min-width: 480px) and (max-width: 759px) { .single article.first { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } } @media (max-width: 479px) { .single article.first { -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } } @media (min-width: 760px) and (max-width: 1079px) { .blog.paged article:first-child, .single.paged article:first-child { padding-bottom: 1.5em; } } .blog aside h2.sidebar-title, .single aside h2.sidebar-title, .search aside h2.sidebar-title, .page-template-default aside h2.sidebar-title, .page-template-presskit aside h2.sidebar-title { color: white; font-size: 1.4em; font-weight: 400; margin: 0em; padding: 0.5em 0em 0.4em; letter-spacing: 0px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .blog aside .content, .single aside .content, .search aside .content, .page-template-default aside .content, .page-template-presskit aside .content { background-color: #f6f9ff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 5px; box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.07); } .blog aside .content ul.more-stories, .single aside .content ul.more-stories, .search aside .content ul.more-stories, .page-template-default aside .content ul.more-stories, .page-template-presskit aside .content ul.more-stories { margin: 0em; padding: 0em; list-style: none; padding-right: 3em; } .blog aside .content ul.more-stories li, .single aside .content ul.more-stories li, .search aside .content ul.more-stories li, .page-template-default aside .content ul.more-stories li, .page-template-presskit aside .content ul.more-stories li { padding-left: 1em; border-bottom: 1px solid #e1e1e1; } .blog aside .content ul.more-stories li a, .single aside .content ul.more-stories li a, .search aside .content ul.more-stories li a, .page-template-default aside .content ul.more-stories li a, .page-template-presskit aside .content ul.more-stories li a { display: block; font-family: "PT-Schoolhouse", sans-serif; font-size: 1.15em; color: #5466c1; padding: 1em 0em; letter-spacing: 0.1em; } .blog aside .content ul.more-stories li a span, .single aside .content ul.more-stories li a span, .search aside .content ul.more-stories li a span, .page-template-default aside .content ul.more-stories li a span, .page-template-presskit aside .content ul.more-stories li a span { max-width: 75%; } .blog aside .content ul.more-stories li a div[class*='icon-'], .single aside .content ul.more-stories li a div[class*='icon-'], .search aside .content ul.more-stories li a div[class*='icon-'], .page-template-default aside .content ul.more-stories li a div[class*='icon-'], .page-template-presskit aside .content ul.more-stories li a div[class*='icon-'] { display: block; margin-right: 0.3em; margin-left: 0em; height: 100%; float: left; -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -ms-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; transition: margin 0.2s ease-out; } .blog aside .content ul.more-stories li a div, .single aside .content ul.more-stories li a div, .search aside .content ul.more-stories li a div, .page-template-default aside .content ul.more-stories li a div, .page-template-presskit aside .content ul.more-stories li a div { max-width: 75%; float: left; } .blog aside .content ul.more-stories li a:hover, .single aside .content ul.more-stories li a:hover, .search aside .content ul.more-stories li a:hover, .page-template-default aside .content ul.more-stories li a:hover, .page-template-presskit aside .content ul.more-stories li a:hover { text-decoration: none; } .blog aside .content ul.more-stories li a:hover div[class*='icon-'], .single aside .content ul.more-stories li a:hover div[class*='icon-'], .search aside .content ul.more-stories li a:hover div[class*='icon-'], .page-template-default aside .content ul.more-stories li a:hover div[class*='icon-'], .page-template-presskit aside .content ul.more-stories li a:hover div[class*='icon-'] { margin-right: 0em; margin-left: 0.3em; -webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -ms-transition: margin 0.2s ease-out; -o-transition: margin 0.2s ease-out; transition: margin 0.2s ease-out; } .blog aside .content ul.more-stories li a .fade-out, .single aside .content ul.more-stories li a .fade-out, .search aside .content ul.more-stories li a .fade-out, .page-template-default aside .content ul.more-stories li a .fade-out, .page-template-presskit aside .content ul.more-stories li a .fade-out { width: 10%; height: 100%; } .blog aside .content section.most-popular, .single aside .content section.most-popular, .search aside .content section.most-popular, .page-template-default aside .content section.most-popular, .page-template-presskit aside .content section.most-popular { padding-left: 3em; } .blog aside .content section.most-popular h2, .single aside .content section.most-popular h2, .search aside .content section.most-popular h2, .page-template-default aside .content section.most-popular h2, .page-template-presskit aside .content section.most-popular h2 { font-size: 1.15em; margin: 0em; padding: 1.5em 0em 0.8em 0em; color: #9e9e97; font-weight: 400; } .blog aside .content section.most-popular ul, .single aside .content section.most-popular ul, .search aside .content section.most-popular ul, .page-template-default aside .content section.most-popular ul, .page-template-presskit aside .content section.most-popular ul { margin: 0em; padding: 0em; list-style: none; border-top: 1px solid #e1e1e1; } .blog aside .content section.most-popular ul li, .single aside .content section.most-popular ul li, .search aside .content section.most-popular ul li, .page-template-default aside .content section.most-popular ul li, .page-template-presskit aside .content section.most-popular ul li { border-bottom: 1px solid #e1e1e1; } .blog aside .content section.most-popular ul li a, .single aside .content section.most-popular ul li a, .search aside .content section.most-popular ul li a, .page-template-default aside .content section.most-popular ul li a, .page-template-presskit aside .content section.most-popular ul li a { padding: 1em 0em; } .blog aside .content section.most-popular ul li a:hover, .single aside .content section.most-popular ul li a:hover, .search aside .content section.most-popular ul li a:hover, .page-template-default aside .content section.most-popular ul li a:hover, .page-template-presskit aside .content section.most-popular ul li a:hover { text-decoration: none; } .blog aside .content section.most-popular ul li div.place-icon, .single aside .content section.most-popular ul li div.place-icon, .search aside .content section.most-popular ul li div.place-icon, .page-template-default aside .content section.most-popular ul li div.place-icon, .page-template-presskit aside .content section.most-popular ul li div.place-icon { width: 30px; height: 30px; margin: 0.5em 1em 0.5em 0em; position: relative; background-position: center center; background-repeat: no-repeat; float: left; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-image: url("../img/leaderboard-position_marker-BG.png"); background-size: 80px 80px; -webkit-background-size: 80px 80px; background-repeat: no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .blog aside .content section.most-popular ul li div.place-icon, .single aside .content section.most-popular ul li div.place-icon, .search aside .content section.most-popular ul li div.place-icon, .page-template-default aside .content section.most-popular ul li div.place-icon, .page-template-presskit aside .content section.most-popular ul li div.place-icon { background-image: url("../img/leaderboard-position_marker-BG@2x.png"); /* background-size: $w $h; -webkit-background-size: $w $h; */ } } .blog aside .content section.most-popular ul li div.place-icon::after, .single aside .content section.most-popular ul li div.place-icon::after, .search aside .content section.most-popular ul li div.place-icon::after, .page-template-default aside .content section.most-popular ul li div.place-icon::after, .page-template-presskit aside .content section.most-popular ul li div.place-icon::after { display: block; content: "1"; width: 100%; height: 100%; line-height: 30px; text-align: center; font-family: "PT-Schoolhouse", sans-serif; font-size: 1.15em; color: white; position: absolute; left: 0em; top: 0em; } .blog aside .content section.most-popular ul li.first div.place-icon, .single aside .content section.most-popular ul li.first div.place-icon, .search aside .content section.most-popular ul li.first div.place-icon, .page-template-default aside .content section.most-popular ul li.first div.place-icon, .page-template-presskit aside .content section.most-popular ul li.first div.place-icon { background-color: #e5d306; } .blog aside .content section.most-popular ul li.first div.place-icon::after, .single aside .content section.most-popular ul li.first div.place-icon::after, .search aside .content section.most-popular ul li.first div.place-icon::after, .page-template-default aside .content section.most-popular ul li.first div.place-icon::after, .page-template-presskit aside .content section.most-popular ul li.first div.place-icon::after { content: "1"; } .blog aside .content section.most-popular ul li.second div.place-icon, .single aside .content section.most-popular ul li.second div.place-icon, .search aside .content section.most-popular ul li.second div.place-icon, .page-template-default aside .content section.most-popular ul li.second div.place-icon, .page-template-presskit aside .content section.most-popular ul li.second div.place-icon { background-color: #c5c3b2; } .blog aside .content section.most-popular ul li.second div.place-icon::after, .single aside .content section.most-popular ul li.second div.place-icon::after, .search aside .content section.most-popular ul li.second div.place-icon::after, .page-template-default aside .content section.most-popular ul li.second div.place-icon::after, .page-template-presskit aside .content section.most-popular ul li.second div.place-icon::after { content: "2"; } .blog aside .content section.most-popular ul li.third div.place-icon, .single aside .content section.most-popular ul li.third div.place-icon, .search aside .content section.most-popular ul li.third div.place-icon, .page-template-default aside .content section.most-popular ul li.third div.place-icon, .page-template-presskit aside .content section.most-popular ul li.third div.place-icon { background-color: #b06d1e; } .blog aside .content section.most-popular ul li.third div.place-icon::after, .single aside .content section.most-popular ul li.third div.place-icon::after, .search aside .content section.most-popular ul li.third div.place-icon::after, .page-template-default aside .content section.most-popular ul li.third div.place-icon::after, .page-template-presskit aside .content section.most-popular ul li.third div.place-icon::after { content: "3"; } .blog aside .content div.subscribe, .single aside .content div.subscribe, .search aside .content div.subscribe, .page-template-default aside .content div.subscribe, .page-template-presskit aside .content div.subscribe { width: auto; padding-top: 0em; padding-bottom: 1em; margin: 3em 3em 0em 3em; border-top: none; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: none; } .blog aside .content div.subscribe header, .single aside .content div.subscribe header, .search aside .content div.subscribe header, .page-template-default aside .content div.subscribe header, .page-template-presskit aside .content div.subscribe header { background-color: white; color: #87b7fb; position: relative; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .blog aside .content div.subscribe header span[class*='icon-notifications'], .single aside .content div.subscribe header span[class*='icon-notifications'], .search aside .content div.subscribe header span[class*='icon-notifications'], .page-template-default aside .content div.subscribe header span[class*='icon-notifications'], .page-template-presskit aside .content div.subscribe header span[class*='icon-notifications'] { color: #87b7fb; position: absolute; font-size: 2.5em; padding: 0.2em; left: 50%; top: -0.6em; margin-left: -0.75em; background-color: white; -webkit-border-top-left-radius: 100%; -webkit-border-top-right-radius: 100%; -webkit-border-bottom-right-radius: 100%; -webkit-border-bottom-left-radius: 100%; -moz-border-radius-topleft: 100%; -moz-border-radius-topright: 100%; -moz-border-radius-bottomright: 100%; -moz-border-radius-bottomleft: 100%; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; text-shadow: none; } .blog aside .content div.subscribe header h1, .single aside .content div.subscribe header h1, .search aside .content div.subscribe header h1, .page-template-default aside .content div.subscribe header h1, .page-template-presskit aside .content div.subscribe header h1 { font-size: 1.8em; color: #87b7fb; padding: 1em 0em 0.5em 0em; text-shadow: none; } .blog aside .content div.subscribe header ul.social-buttons li a span[class*='icon-'], .single aside .content div.subscribe header ul.social-buttons li a span[class*='icon-'], .search aside .content div.subscribe header ul.social-buttons li a span[class*='icon-'], .page-template-default aside .content div.subscribe header ul.social-buttons li a span[class*='icon-'], .page-template-presskit aside .content div.subscribe header ul.social-buttons li a span[class*='icon-'] { font-size: 1em; text-shadow: none; } .blog aside .content div.subscribe p, .single aside .content div.subscribe p, .search aside .content div.subscribe p, .page-template-default aside .content div.subscribe p, .page-template-presskit aside .content div.subscribe p { font-size: 1em; max-width: none; padding: 1em 1em; } .blog aside .content div.subscribe form, .single aside .content div.subscribe form, .search aside .content div.subscribe form, .page-template-default aside .content div.subscribe form, .page-template-presskit aside .content div.subscribe form { max-width: none; padding: 0em 2em 0.75em; } .blog aside .content div.subscribe form button, .single aside .content div.subscribe form button, .search aside .content div.subscribe form button, .page-template-default aside .content div.subscribe form button, .page-template-presskit aside .content div.subscribe form button { right: 2em; top: 0.8em; } .blog aside .content div.subscribe form input[type=email], .blog aside .content div.subscribe form input[type=text], .single aside .content div.subscribe form input[type=email], .single aside .content div.subscribe form input[type=text], .search aside .content div.subscribe form input[type=email], .search aside .content div.subscribe form input[type=text], .page-template-default aside .content div.subscribe form input[type=email], .page-template-default aside .content div.subscribe form input[type=text], .page-template-presskit aside .content div.subscribe form input[type=email], .page-template-presskit aside .content div.subscribe form input[type=text] { font-size: 1em; margin-top: 1.5em; } @media (min-width: 760px) and (max-width: 1079px) { .blog aside .content div.subscribe, .single aside .content div.subscribe, .search aside .content div.subscribe, .page-template-default aside .content div.subscribe, .page-template-presskit aside .content div.subscribe { margin: 3em 2em 0em 2em; } .blog aside .content div.subscribe form button, .single aside .content div.subscribe form button, .search aside .content div.subscribe form button, .page-template-default aside .content div.subscribe form button, .page-template-presskit aside .content div.subscribe form button { top: 0.6em; } .blog aside .content div.subscribe form input[type=email], .blog aside .content div.subscribe form input[type=text], .single aside .content div.subscribe form input[type=email], .single aside .content div.subscribe form input[type=text], .search aside .content div.subscribe form input[type=email], .search aside .content div.subscribe form input[type=text], .page-template-default aside .content div.subscribe form input[type=email], .page-template-default aside .content div.subscribe form input[type=text], .page-template-presskit aside .content div.subscribe form input[type=email], .page-template-presskit aside .content div.subscribe form input[type=text] { font-size: 0.85em; } } @media (min-width: 760px) and (max-width: 900px) { .blog aside .content div.subscribe, .single aside .content div.subscribe, .search aside .content div.subscribe, .page-template-default aside .content div.subscribe, .page-template-presskit aside .content div.subscribe { margin: 3em 0em 0em 0em !important; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .blog aside .content div.subscribe header, .single aside .content div.subscribe header, .search aside .content div.subscribe header, .page-template-default aside .content div.subscribe header, .page-template-presskit aside .content div.subscribe header { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } } @media (max-width: 479px) { .blog aside .content div.subscribe, .single aside .content div.subscribe, .search aside .content div.subscribe, .page-template-default aside .content div.subscribe, .page-template-presskit aside .content div.subscribe { margin: 3em 0em 0em 0em !important; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .blog aside .content div.subscribe header, .single aside .content div.subscribe header, .search aside .content div.subscribe header, .page-template-default aside .content div.subscribe header, .page-template-presskit aside .content div.subscribe header { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } } .blog aside.fixed h2.sidebar-title, .single aside.fixed h2.sidebar-title, .search aside.fixed h2.sidebar-title, .page-template-default aside.fixed h2.sidebar-title, .page-template-presskit aside.fixed h2.sidebar-title { color: #9e9e97; text-shadow: none; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } @media (min-width: 760px) and (max-width: 900px) { .blog aside .content ul.more-stories, .single aside .content ul.more-stories, .search aside .content ul.more-stories, .page-template-default aside .content ul.more-stories, .page-template-presskit aside .content ul.more-stories { padding-right: 0em; } } @media (min-width: 480px) and (max-width: 759px) { .blog aside h2.sidebar-title, .single aside h2.sidebar-title, .search aside h2.sidebar-title, .page-template-default aside h2.sidebar-title, .page-template-presskit aside h2.sidebar-title { text-shadow: "none"; } .blog aside .content, .single aside .content, .search aside .content, .page-template-default aside .content, .page-template-presskit aside .content { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } } @media (max-width: 479px) { .blog aside h2.sidebar-title, .single aside h2.sidebar-title, .search aside h2.sidebar-title, .page-template-default aside h2.sidebar-title, .page-template-presskit aside h2.sidebar-title { text-shadow: "none"; } .blog aside .content, .single aside .content, .search aside .content, .page-template-default aside .content, .page-template-presskit aside .content { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } .blog aside .content ul.more-stories, .single aside .content ul.more-stories, .search aside .content ul.more-stories, .page-template-default aside .content ul.more-stories, .page-template-presskit aside .content ul.more-stories { padding-right: 0em; } } .blog aside h2.sidebar-title.page, .single aside h2.sidebar-title.page { display: none; } @media (min-width: 760px) and (max-width: 900px) { .single aside .content div.subscribe { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 5px; } } @media (max-width: 479px) { .single aside .content div.subscribe { -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } } .search aside h2.sidebar-title.default, .page-template-default aside h2.sidebar-title.default, .page-template-presskit aside h2.sidebar-title.default { display: none; } .search aside h2.sidebar-title.page, .page-template-default aside h2.sidebar-title.page, .page-template-presskit aside h2.sidebar-title.page { display: block; } .search aside .content div.subscribe, .page-template-default aside .content div.subscribe, .page-template-presskit aside .content div.subscribe { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } form input:focus { outline: none; border: none; } .header canvas { width: 100% !important; } .blog iframe, .single iframe, .page-template-default iframe, .page-template-presskit iframe { max-width: 100%; } @media (max-width: 479px) { .mobile-only { display: block; } } @media (min-width: 480px) and (max-width: 759px) { .mobile-only { display: none; } } @media (min-width: 760px) and (max-width: 1079px) { .mobile-only { display: none; } } @media (min-width: 1080px) and (max-width: 1199px) { .mobile-only { display: none; } } @media (min-width: 1200px) { .mobile-only { display: none; } } @media (max-width: 479px) { .tablet-only { display: none; } } @media (min-width: 480px) and (max-width: 759px) { .tablet-only { display: block; } } @media (min-width: 760px) and (max-width: 1079px) { .tablet-only { display: none; } } @media (min-width: 1080px) and (max-width: 1199px) { .tablet-only { display: none; } } @media (min-width: 1200px) { .tablet-only { display: none; } } @media (max-width: 479px) { .medium-only { display: none; } } @media (min-width: 480px) and (max-width: 759px) { .medium-only { display: none; } } @media (min-width: 760px) and (max-width: 1079px) { .medium-only { display: block; } } @media (min-width: 1080px) and (max-width: 1199px) { .medium-only { display: none; } } @media (min-width: 1200px) { .medium-only { display: none; } } @media (max-width: 479px) { .desktop-only { display: none; } } @media (min-width: 480px) and (max-width: 759px) { .desktop-only { display: none; } } @media (min-width: 760px) and (max-width: 1079px) { .desktop-only { display: none; } } @media (min-width: 1080px) and (max-width: 1199px) { .desktop-only { display: block; } } @media (min-width: 1200px) { .desktop-only { display: none; } } @media (max-width: 479px) { .large-only { display: none; } } @media (min-width: 480px) and (max-width: 759px) { .large-only { display: none; } } @media (min-width: 760px) and (max-width: 1079px) { .large-only { display: none; } } @media (min-width: 1080px) and (max-width: 1199px) { .large-only { display: none; } } @media (min-width: 1200px) { .large-only { display: block; } } .manual-carousel { width: 100%; height: 420px; overflow: hidden; background-color: black; position: relative; } .manual-carousel .slide { position: relative; display: inline-block; width: 3%; height: 100%; overflow: hidden; margin: 0em; padding: 0em; cursor: pointer; } .manual-carousel .slide a.slide-card, .manual-carousel .slide div.slide-card { background-position: center center; background-size: 100% auto; background-repeat: no-repeat; height: auto; } .manual-carousel .slide a.slide-card img, .manual-carousel .slide div.slide-card img { /* width: auto; height: auto; */ position: absolute; max-width: none; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .manual-carousel .slide canvas { position: absolute; top: 0em; left: 0em; } .manual-carousel .slide .fade { width: 100%; height: 100%; text-align: center; position: absolute; left: 0em; top: 0em; margin: 0em; padding: 0em; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgIDxzdG9wIG9mZnNldD0iNzMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 73%, black 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(73%, rgba(0, 0, 0, 0.4)), color-stop(100%, black)); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 73%, black 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 73%, black 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 73%, black 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 73%, black 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#000000',GradientType=0 ); color: white; /* @include nc-opacity(1); @include nc-transition(all); */ } .manual-carousel .slide .fade h1.slide-title { display: block; width: auto; height: auto; font-family: "PT-Schoolhouse", sans-serif; font-size: 1em; letter-spacing: 0.07em; margin: 0em; padding: 0em; line-height: 1.6em; color: white; position: absolute; left: 50%; top: 50%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(-90deg); -o-transform: translateX(-50%) translateY(-50%) rotate(-90deg); transform: translateX(-50%) translateY(-50%) rotate(-90deg); } .manual-carousel .slide .logo { display: inline-block; position: absolute; margin: 0em; right: 2em; bottom: 1.5em; max-width: 20%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .manual-carousel .slide .logo img { width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .manual-carousel .slide .info { display: none; display: block; height: auto; width: 100%; position: absolute; left: 0em; bottom: 0em; bottom: -100%; background-position: left top; background-repeat: repeat-x; text-align: left; padding: 4em 2em 0em 2em; background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.9) 89%, rgba(0, 0, 0, 0.9) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(89%, rgba(0, 0, 0, 0.9)), color-stop(100%, rgba(0, 0, 0, 0.9))); background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.9) 89%, rgba(0, 0, 0, 0.9) 100%); background: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.9) 89%, rgba(0, 0, 0, 0.9) 100%); background: -ms-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.9) 89%, rgba(0, 0, 0, 0.9) 100%); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 89%, rgba(0, 0, 0, 0.9) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 ); -webkit-transition: bottom 0.4s ease-out; -moz-transition: bottom 0.4s ease-out; -ms-transition: bottom 0.4s ease-out; -o-transition: bottom 0.4s ease-out; transition: bottom 0.4s ease-out; } .manual-carousel .slide .info a.button { position: relative; bottom: 0em; margin-right: 1px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .manual-carousel .slide .info a.title:hover { color: #5466c1; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } .manual-carousel .slide .info a.title, .manual-carousel .slide .info h1.title { width: auto; height: auto; font-family: "PT-Schoolhouse", sans-serif; color: white; font-size: 2.5em; letter-spacing: 0.07em; padding: 1em 0em 0.3em 0em; margin: 0em; text-decoration: none; display: none; -webkit-transition: color 0.5s ease-out; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out; } .manual-carousel .slide .info p { display: none; padding: 0em 3em 2em 0em; font-family: "Quicksand", Helvetica, Arial, sans-serif; max-width: 50%; color: white; text-align: left; margin: 0em; white-space: normal; } .manual-carousel .slide .info p::after { display: none; } .manual-carousel .slide .info ul.button-set { display: none; margin: 0em; padding: 0em; padding-bottom: 2em; list-style: none; } .manual-carousel .slide .info ul.button-set li { display: block; padding: 0em; padding-right: 0.8em; margin: 0em; float: left; line-height: 0em; } .manual-carousel .slide .info ul.button-set li a { font-size: 1.15em; position: relative; /* padding-left: 0.8em; padding-right: 0.8em; */ line-height: normal; background-color: transparent; cursor: pointer !important; -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out; -ms-transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out; } .manual-carousel .slide .info ul.button-set li a.outline-border-button { padding-left: 0.8em; padding-right: 0.8em; } .manual-carousel .slide .info ul.button-set li a.outline-border-button:hover { background-color: rgba(255, 255, 255, 0.2); -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out; -ms-transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out; } .manual-carousel .slide .info ul.button-set li a.outline-border-button:hover span[class*='icon-'] { padding-right: 0.2em; padding-left: 0em; -webkit-transition: none 0.5s ease-out; -moz-transition: none 0.5s ease-out; -ms-transition: none 0.5s ease-out; -o-transition: none 0.5s ease-out; transition: none 0.5s ease-out; } .manual-carousel .slide .info ul.button-set li a object { height: 48px; } .manual-carousel .slide .info ul.button-set li.presskit a span { font-size: 0.7em; } .manual-carousel .slide.active { width: 82%; z-index: 2; cursor: pointer; } .manual-carousel .slide.active .fade { display: none; } .manual-carousel .slide.active .logo img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-opacity: 1; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .manual-carousel .slide.active a.slide-card, .manual-carousel .slide.active div.slide-card { position: relative; width: 100%; height: 100%; background-size: 100% auto; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .manual-carousel .slide.active .info { display: block; } .manual-carousel .slide.active .info a.title, .manual-carousel .slide.active .info h1.title { display: block !important; } .manual-carousel .slide.active .info p { display: block; } .manual-carousel .slide.active .info ul.button-set { display: block; } .manual-carousel .slide.active canvas { height: 0px; display: none; } .manual-carousel .carousel-wrap { height: 100%; white-space: nowrap; overflow: hidden; font-size: 0px; } .manual-carousel .carousel-wrap .slide { font-size: 1rem; } .manual-carousel a.carousel-controls { position: absolute; bottom: 1rem; font-size: 3em; color: white; z-index: 50; text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.75); } .manual-carousel a.carousel-prev { right: 4rem; } .manual-carousel a.carousel-next { right: 1rem; } .manual-carousel .controls { position: absolute; bottom: 0em; right: 0em; padding: 1em; z-index: 101; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .manual-carousel .controls a { color: white; font-size: 3em; text-decoration: none; border: none; } @media (min-width: 1200px) { .manual-carousel .slide.active:hover .logo img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .manual-carousel .slide.active:hover a.slide-card, .manual-carousel .slide.active:hover div.slide-card { /* background-size: 102% auto; @include nc-transition(background-size, 1s); */ } .manual-carousel .slide.active:hover a.slide-card img, .manual-carousel .slide.active:hover div.slide-card img { -webkit-transform: translate(-50%, -50%) scale(1.05); -moz-transform: translate(-50%, -50%) scale(1.05); -ms-transform: translate(-50%, -50%) scale(1.05); -o-transform: translate(-50%, -50%) scale(1.05); transform: translate(-50%, -50%) scale(1.05); -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } .manual-carousel .slide.active:hover .info { display: block; bottom: 0%; -webkit-transition: bottom 0.4s ease-out; -moz-transition: bottom 0.4s ease-out; -ms-transition: bottom 0.4s ease-out; -o-transition: bottom 0.4s ease-out; transition: bottom 0.4s ease-out; } } @media (min-width: 1080px) and (max-width: 1199px) { .manual-carousel { height: 400px; } .manual-carousel .slide.active:hover .logo img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .manual-carousel .slide.active:hover a.slide-card, .manual-carousel .slide.active:hover div.slide-card { /* background-size: 100% auto; @include nc-transition(background-size, 1s); */ } .manual-carousel .slide.active:hover .info { display: block; bottom: 0%; -webkit-transition: bottom 0.4s ease-out; -moz-transition: bottom 0.4s ease-out; -ms-transition: bottom 0.4s ease-out; -o-transition: bottom 0.4s ease-out; transition: bottom 0.4s ease-out; } } @media (min-width: 760px) and (max-width: 1079px) { .manual-carousel { height: 300px; } .manual-carousel .slide { width: 4%; } .manual-carousel .slide.active { width: 84%; } .manual-carousel .slide.active:hover .logo img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .manual-carousel .slide.active:hover a.slide-card, .manual-carousel .slide.active:hover div.slide-card { /* background-size: 100% auto; @include nc-transition(background-size, 1s); */ } .manual-carousel .slide.active:hover .info { display: block; bottom: 0%; -webkit-transition: bottom 0.4s ease-out; -moz-transition: bottom 0.4s ease-out; -ms-transition: bottom 0.4s ease-out; -o-transition: bottom 0.4s ease-out; transition: bottom 0.4s ease-out; } .manual-carousel a.carousel-controls.carousel-prev { right: auto; left: 1rem; } } @media (min-width: 480px) and (max-width: 759px) { .manual-carousel { height: 260px; } .manual-carousel .slide { width: 5%; } .manual-carousel .slide a.slide-card, .manual-carousel .slide div.slide-card { background-size: cover; } .manual-carousel .slide.active { width: 90%; } .manual-carousel .slide.active .logo { max-width: 30%; right: 0.25em; bottom: 0.25em; } .manual-carousel .slide.active:hover .info { display: none; } .manual-carousel .slide.active .info { display: none; } .manual-carousel .slide.active a.slide-card, .manual-carousel .slide.active div.slide-card { background-size: cover; } .manual-carousel .slide .fade { background: rgba(0, 0, 0, 0.8); } .manual-carousel .slide .fade h1.slide-title { display: none; } .manual-carousel .slide canvas { height: 0px; display: none; } .manual-carousel a.carousel-controls { font-size: 3em; } .manual-carousel a.carousel-controls.carousel-prev { right: auto; left: 1rem; } } @media (max-width: 479px) { .manual-carousel { height: 170px; } .manual-carousel .slide { width: 5%; } .manual-carousel .slide a.slide-card, .manual-carousel .slide div.slide-card { background-size: auto 100%; } .manual-carousel .slide.active { width: 90%; } .manual-carousel .slide.active .logo { max-width: 40%; right: auto; bottom: auto; left: 50%; top: 0.25em; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .manual-carousel .slide.active .info { display: none; } .manual-carousel .slide.active a.slide-card, .manual-carousel .slide.active div.slide-card { background-size: auto 100%; } .manual-carousel .slide.active canvas { height: 0px; display: none; } .manual-carousel .slide .fade { background: rgba(0, 0, 0, 0.8); } .manual-carousel .slide .fade h1.slide-title { display: none; } .manual-carousel a.carousel-controls { font-size: 3em; } .manual-carousel a.carousel-controls.carousel-prev { right: auto; left: 0em; bottom: 0em; } .manual-carousel a.carousel-controls.carousel-next { bottom: 0em; right: 0em; left: auto; } } div.test { width: 50%; height: 100px; background: black; -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -ms-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out; } div.test.fyou { width: 100%; -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -ms-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out; } /* == WordPress WYSIWYG Editor Styles == */ .entry-content img { margin: 0 0 1.5em 0; } .alignleft, img.alignleft { margin-right: 1.5em; display: inline; float: left; } .alignright, img.alignright { margin-left: 1.5em; display: inline; float: right; } .aligncenter, img.aligncenter { margin-right: auto !important; margin-left: auto !important; display: block !important; clear: both !important; text-align: center !important; } .wp-caption { margin-bottom: 1.5em; text-align: center; padding-top: 5px; } .wp-caption img { border: 0 none; padding: 0; margin: 0; } .wp-caption p.wp-caption-text { line-height: 1.5; font-size: 10px; margin: 0; } .wp-smiley { margin: 0 !important; max-height: 1em; } blockquote.left { margin-right: 20px; text-align: right; margin-left: 0; width: 33%; float: left; } blockquote.right { margin-left: 20px; text-align: left; margin-right: 0; width: 33%; float: right; }