@charset "utf-8";

/* CSS Document */

a.whats-new-bordered {
    overflow: visible;
}

.col33 {
    width: 32.2%;
    float: left;
    position: relative;
}

.col17 {
    width: 17.7%;
    float: left;
    position: relative;
}

.col41 {
    width: 41.4%;
    float: left;
    position: relative;
}

.col40 {
    width: 40.8%;
    float: left;
    position: relative;
}

.col60 {
    width: 59.2%;
    float: left;
    position: relative;
}

.marketing-container {
    max-width: 1366px;
}

.banner-image {
    position: relative;
    width: 100%;
}

.button-right {
    float: right;
    margin-right: 15px;
}

.title-block {
    /*If the z-index goes above 20 it will overlap the mobile header*/
    z-index: 15;
    position: absolute;
    font-family: "Museo", "Times New Roman", Times, serif;
    color: #FFFFFF;
    line-height: normal;
    margin: 15px;
    left: 15px;
    /*This seems to be the most common percent width on the image to use*/
    width: 50%;
    /*It seems to alter best when done from the bottom*/
    bottom: 5%;
    text-shadow: 1px 1px 4px #676767;
}

.title-block a {
    /*Used for shadowing title text over light/dark colored images.*/
    color: #FFFFFF;
}

.title-block.grey {
    /*Used for alternate title text over light colored images.*/
    color: #676767;
}

.title-block.shadow {
    /*Used for shadowing title text over light/dark colored images.*/
    text-shadow: 1px 1px 4px #676767;
}

.title-block-half {
    /*If the z-index goes above 20 it will overlap the mobile header*/
    z-index: 15;
    position: relative;
    /* font-family: "Museo", "Times New Roman", Times, serif; */
    color: #676767;
    line-height: normal;
    margin: 0;
    padding: 5px 5px 5px 15px;
    /*This seems to be the most common percent width on the image to use*/
    font-size: 200%;
    clear: both;
}

.title-block-half a {
    /*Used for shadowing title text over light/dark colored images.*/
    text-decoration: none;
}


/*As much here for reference for now*/

.cr-font-xsmall {
    font-size: 9px;
}

.cr-font-small {
    font-size: 12px;
}

.cr-font-medium {
    font-size: 14px;
}

.cr-font-large {
    font-size: 17px;
}

.cr-font-xlarge {
    font-size: 20px;
}

.cr-font-primary {
    font-size: 22px;
}


/*INTENDED FOR PERCENTAGES OFF!*/

.cr-super-text {
    /*Attempting to create a scalable super text*/
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 190%;
    margin-bottom: 0px;
    margin-top: -5px;
}


/*INTENDED FOR DOLLAR OFF!*/

.cr-super-text.dollar {
    font-size: 190%;
}

.cr-super-span {
    font-size: 40%;
    margin-left: -65px;
}

sup {
    font-size: 45%;
    vertical-align: top;
    /*This is needed to overwrite a magento default*/
    top: 1em;
}

.title-block.category {
    font-size: 18px;
}

.title-block p {
    margin: 0;
}

.cr-primary-font {
    font-family: "Lato", Helvetica, Arial, sans-serif;
}

.title-block.large {
    font-size: 190%;
}

.title-block.full-content.left {
    bottom: 35px;
    width: 100%;
    text-shadow: none;
}

.title-block.full-content.left > .button-title {
    margin-top: 10px;
}

.title-block.half-content {
    width: 50%;
}

.title-block.half-content.wide {
    width: 65%;
}

.title-block.full-content {
    width: 40%;
}

.title-secondary-text {
    font-size: 17px;
    margin-bottom: 5px;
}

.title-primary {
    font-size: 200%;
    line-height: 1;
}

.title-secondary {
    font-size: 150%;
}

.title-right-pad {
    padding-right: 15px;
    text-align: right;
}

.title-promo {
    margin-top: 1%;
    margin-bottom: 1%;
    font-size: 2vh;
    font-style: italic;
}

.cr-cms-wrapper {
    /* display: inline-block; */
    clear: both;
    overflow: hidden;
}

.full-content-block {
    float: left;
    margin-bottom: 2%;
    max-height: 683px;
    position: relative;
}

.half-content-block {
    float: left;
    margin-bottom: 2%;
    max-height: 450px;
    margin-right: 2%;
    max-width: 48%;
    width: 48%;
    position: relative;
}

.half-content-block-tall {
    float: left;
    margin-bottom: 2%;
    margin-right: 2%;
    max-width: 48%;
    position: relative;
}

.half-content-block-img-copy {
    float: left;
    margin-bottom: 2%;
    margin-right: 1%;
    max-width: 48%;
    position: relative;
}

.half-content-block-img-copy p {
    padding: 5px;
}

.one-quarter-content-block {
    float: left;
    margin-bottom: 2%;
    max-height: 436px;
    margin-right: 2%;
    max-width: 24%;
    position: relative;
}

.one-fifth-content-block {
    float: left;
    margin-bottom: 2%;
    /*max-height: 436px;*/
    margin-right: 2%;
    max-width: 18%;
    position: relative;
}

.one-third-content-block {
    float: left;
    margin-bottom: 2%;
    max-height: 436px;
    margin-right: 1%;
    max-width: 32%;
    position: relative;
}

.one-third-content-block img,
.one-quarter-content-block img {
    width: 100%;
}

.half-content-block.no-right,
.half-content-block-tall.no-right {
    margin-right: 0px;
}

.one-third-content-block.no-right,
.one-quarter-content-block {
    margin-right: 0;
}

.one-one-content-block {
    float: left;
    margin-bottom: 10px;
    max-width: 16.6%;
    width: 100%;
    position: relative;
}

.one-one-content-block.no-right {
    margin-right: 0px;
}

.one-one-content-block img {
    width: 100%;
}

.one-one-content-block a {
    text-decoration: none;
}

.one-one-category p {
    font-size: 14px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    text-align: center;
    color: #8e9092;
    margin-top: -10px;
    margin-bottom: 10px;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.icons {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 4%;
    padding-top: 5px;
    border-top: 1px solid #8e9092;
    border-bottom: 1px solid #8e9092;
}

.icon-title h1 {
    font-size: 24px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    color: #8e9092;
    margin-bottom: -16px;
    margin-left: 33px;
    position: relative;
    z-index: 15;
    padding: 0 10px;
    background-color: #ffffff;
    display: table;
}

.no-icons {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: -2%;
    border-top: 1px solid #8e9092;
}

.no-icon-title h1 {
    font-size: 24px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    color: #8e9092;
    margin-bottom: -16px;
    margin-left: 33px;
    position: relative;
    z-index: 15;
    padding: 0 10px;
    background-color: #ffffff;
    display: table;
}


/*THIS index is added by magento - but maybe we wouldn't want it for other cms pages?*/

.cms-index-index .col-main {
    width: 100%;
    padding: 0 7%;
}

.cms-index-index .main-container {
    padding: 0;
}

#ribbon {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a2c74e+0,e8efcb+35,e8efcb+65,a2c74e+100 */
    background: #a2c74e;
    /* Old browsers */
    background: -moz-linear-gradient(left, #a2c74e 0%, #e8efcb 35%, #e8efcb 65%, #a2c74e 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #a2c74e 0%, #e8efcb 35%, #e8efcb 65%, #a2c74e 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #a2c74e 0%, #e8efcb 35%, #e8efcb 65%, #a2c74e 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a2c74e', endColorstr='#a2c74e', GradientType=1);
    /* IE6-9 */
    max-width: 1366px;
    margin: 0 auto;
    overflow: hidden;
}

#ribbon a:link,
#ribbon a:hover,
#ribbon a:visited,
#ribbon a {
    color: #676767;
    text-decoration: none;
}

#inner-ribbon {
    margin: 0 auto;
    width: 80%;
}

#ribbon.updated {
    background: #FFFFFF;
    /* Old browsers */
    background: -moz-linear-gradient(left, #FFFFFF 0%, #FFFFFF 35%, #FFFFFF 65%, #FFFFFF 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #FFFFFF 0%, #FFFFFF 35%, #FFFFFF 65%, #FFFFFF 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 35%, #FFFFFF 65%, #FFFFFF 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF', GradientType=1);
    /* IE6-9 */
    padding: 10px 0;
}

#inner-ribbon.updated {
    border-top: 2px solid #85bb1f;
    border-bottom: 2px solid #85bb1f;
    overflow: auto;
    width: 100%;
}

.ribbon-half-a {
    border-right: 1px solid #676767;
}

.ribbon-one,
.ribbon-two,
.ribbon-three,
.ribbon-four,
.ribbon-half-a,
.ribbon-half-b,
.ribbon-full {
    float: left;
    text-align: center;
    margin: 1% 0;
    padding: 0 1%;
}

.ribbon-one,
.ribbon-two,
.ribbon-three,
.ribbon-four {
    width: 25%;
}

.ribbon-half-a,
.ribbon-half-b {
    width: 50%;
}

.ribbon-one p,
.ribbon-two p,
.ribbon-three p,
.ribbon-four p,
.ribbon-half-a p,
.ribbon-half-b p {
    margin: 0;
}

.ribbon-full {
    width: 100%;
}


/*Sometimes there will be more content in one div than the other - use these classes to set which side the border is on 
Try not to use more than one border on each div*/

.ribbon-border-right {
    border-right: 1px solid #676767;
}

.ribbon-border-left {
    border-left: 1px solid #676767;
}


/* Black Friday & Christmas Ribbon Styling 11/2016 */

#inner-ribbon.updated.black-friday {
    border-top: 0;
    border-bottom: 0;
    background: #231f20;
    color: #bc965c;
}

#inner-ribbon.updated.black-friday a {
    color: #bc965c;
    font-size: 18px;
}

#inner-ribbon.updated.christmas {
    border-top: 0;
    border-bottom: 0;
    background: #761919;
    color: #fff;
}

#inner-ribbon.updated.christmas a {
    color: #fff;
}


/* !Black Friday & Christmas Ribbon Styling 11/2016 */

.hover_group:hover {
    opacity: 1;
}

#projectsvg {
    position: relative;
    width: 100%;
    padding-bottom: 52%;
    vertical-align: middle;
    margin: 0;
    overflow: hidden;
}

#projectsvg svg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}


/* Can be removed after the 10th anniversary is over */

#ribbon-anniversary {
    height: 5vw;
}

#ribbon-anniversary,
#ribbon-anniversary-shop {
    /*background: url('https://s3-us-west-2.amazonaws.com/shop-content/images/home/Cricut10Top-Banner-1366.jpg') no-repeat;*/
    background: url('https://s3-us-west-2.amazonaws.com/static.cricut.com/shop-content/images/home/Cricut10Top-Banner-1366-v2.jpg') no-repeat;
    background-size: contain;
    width: 100%;
    max-width: 1365px;
    margin: 0 auto;
}

#ribbon-anniversary-shop {
    height: 5.4vw;
}

.three-quarter-content-block {
    max-width: 1366px;
    width: 70%;
    margin-right: 1%;
    float: left;
}

.quarter-content-block {
    width: 28%;
    float: left;
    padding: 1% 0 2% 0;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    float: none;
}

.video-container .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.side-lined {
    line-height: initial;
    text-align: center;
    font-weight: normal;
    margin: 28px 0;
}

.side-lined span {
    display: inline-block;
    position: relative;
}

.side-lined span:before,
.side-lined span:after {
    content: "";
    position: absolute;
    height: 5px;
    border-top: 1px solid #808285;
    top: 20px;
    width: 600px;
}

.side-lined span:before {
    right: 100%;
    margin-right: 15px;
}

.side-lined span:after {
    left: 100%;
    margin-left: 15px;
}

.whats-new-item {
    max-width: 320px;
    /* width: 31%; */
    margin: 0 13px;
}

.whats-new-item:before {
    content: 'NEW';
    position: absolute;
    top: -13px;
    left: -13px;
    background: #80bb41;
    width: 45px;
    height: 45px;
    text-align: center;
    padding-top: 12px;
    border-radius: 100px;
    color: #fff;
    font-weight: bolder;
    display: none;
}

.whats-new-item > img {
    border: 1px solid #6c6d6f;
}

.whats-new-container {
    max-width: 1038px;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.whats-new-container > div {
    text-align: left;
    /*float: none;*/
    /*padding-right: 10px;*/
    vertical-align: text-top;
}

.whats-new-bordered {
    display: block;
    width: 100%;
    border: 1px solid #8e9092;
    line-height: 0;
}

.access-logo {
    margin-top: 5px;
}


/* Comparison chart styles */

table.comparison-table {
    border-collapse: collapse;
}

table.comparison-table td {
    padding-top: 10px;
    padding-bottom: 10px;
}

table.comparison-table td:last-child {
    border-right: 0;
}

table.comparison-table td:first-child {
    padding-left: 10px;
}

table.comparison-table tbody tr {
    border-bottom: 1px solid #b3b3b4;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

table.comparison-table tbody tr:last-child {
    border-bottom: 0;
}

table.comparison-table tbody tr:hover {
    background: #f4f4f4;
}

table.comparison-table tbody tr:last-child {
    border-bottom: 0;
}

td.rtecenter img {
    margin: 0 auto;
}

.rtecenter img {
    margin: 0 auto;
}

.feature {
    padding: 20px 0;
}

.feature img {
    margin-bottom: 10px;
}

.feature.last {
    border-bottom: 1px solid #b3b3b4;
    margin-bottom: 50px;
    padding-bottom: 50px;
}

.rtecenter {
    text-align: center;
}

.visible-lg-block {
    display: block;
}

.hidden-lg {
    display: none;
}

.whats-new-container .one-fifth-content-block:first-child {
    margin-left: 1%;
}

.one-fifth {
    width: 19%;
    float: left;
    margin-right: 1.2%;
}

.row .one-fifth:last-child {
    margin-right: 0;
}

.vinylTextVlign {
    margin-top: 30%;
    margin-right: 4%;
}

@media only screen and (min-width: 980px) {
    .whats-new-item {
        width: 30%;
    }
    .whats-new-container > div {
        display: inline-block;
    }
    .comparison-table tbody tr:last-child {
        background: #becec2;
    }
    .whats-new-container .one-quarter-content-block.width-fix {
        max-width: 23.2%;
    }
    .whats-new-container .one-quarter-content-block.width-fix .whats-new-bordered img {
        height: 178px;
    }
}

@media only screen and (max-width:1365px) {}

@media only screen and (max-width:1199px) {
    .cr-super-text {
        font-family: "Lato", Helvetica, Arial, sans-serif;
        margin-bottom: 0px;
        margin-top: -5px;
    }
    /*INTENDED FOR DOLLAR OFF!*/
    .cr-super-text.dollar {
        font-size: 190%;
    }
    .cr-super-span {
        font-size: 40%;
        margin-left: -34px;
    }
    .title-block.full-content {
        width: 45%;
    }
    .title-block.large {
        font-size: 190%;
    }
    .hide-large {
        display: none;
    }
    .full-content-block,
    .half-content-block,
    .half-content-block-tall,
    .one-third-content-block,
    .one-quarter-content-block {
        margin-bottom: 1%;
    }
    .half-content-block-img-copy {
        margin-right: 1%;
        margin-bottom: 1%;
        max-width: 49%;
    }
    .one-third-content-block {
        max-width: 32.65%;
        margin-right: 1%;
    }
    .ribbon-one p,
    .ribbon-two p,
    .ribbon-three p,
    .ribbon-four p {
        font-size: 13px;
    }
    /*Comparison table styes */
    .visible-lg-block {
        display: none;
    }
    .hidden-lg {
        display: block;
    }
}

@media only screen and (max-width:979px) {
    .one-third-content-block,
    .one-quarter-content-block {
        max-width: 49%;
        margin-right: 1%;
        margin-bottom: 1%;
    }
    .one-third-content-block.no-right {
        margin-right: 1%;
    }
    .one-third-content-block.whats-new-item {
        width: 45%;
    }
    .half-content-block,
    .half-content-block-tall,
    .half-content-block.no-right,
    .half-content-block-tall.no-right,
    .one-quarter-content-block.no-right {
        margin-right: 1% !important;
        max-width: 49%;
        width: 49%;
    }
    .half-content-block-img-copy {
        margin-right: 1%;
        margin-bottom: 3%;
        max-width: 48%;
    }
    .replace-margin-top {
        margin-top: 1%;
    }
    .title-block.category {
        font-size: 27px;
    }
    .title-secondary-text {
        font-size: 14px;
        margin-bottom: 4px;
    }
    .half-content.wide {
        width: 70%;
    }
    .second-title {
        margin-bottom: 4px;
    }
    .cr-super-text {
        margin-bottom: 0px;
        margin-top: -5px;
    }
    .cr-super-span {
        margin-left: -32px;
    }
    .one-one-content-block {
        float: left;
        margin-bottom: 10px;
        max-width: 25%;
        width: 100%;
        position: relative;
    }
    #ribbon-anniversary {
        height: 5.4vw;
    }
    #ribbon-anniversary-shop {
        height: 6.4vw;
    }
    .ribbon-four {
        display: none;
    }
    .ribbon-one,
    .ribbon-two,
    .ribbon-three {
        width: 33%;
    }
}

@media only screen and (max-width:770px) {
    .full-content-block {
        margin-right: 0;
    }
    .marketing-container {
        margin-top: 10px;
    }
    .half-content-block,
    .half-content-block-tall,
    .half-content-block-img-copy,
    .one-quarter-content-block,
    .three-quarter-content-block,
    .one-fifth-content-block,
    .col40,
    .col60 {
        width: 99%;
        max-width: 99%;
        margin-right: 0;
    }
    .hide-medium {
        display: none;
    }
    .title-secondary-text {
        font-size: 12px;
    }
    .title-promo {
        margin-top: 2%;
    }
    .cr-super-text {
        margin-bottom: 0px;
    }
    /*INTENDED FOR DOLLAR OFF!*/
    .cr-super-text.dollar {
        font-size: 190%;
    }
    .cr-super-span {
        margin-left: -44px;
    }
    .title-block.wide {
        width: 86%;
    }
    .large.half-content.wide {
        width: 50%;
    }
    .title-block.category {
        font-size: 23px;
    }
    .title-block.full-content {
        bottom: -10%;
        width: 100%;
        font-size: 150%;
        /*color: grey;*/
        /*text-shadow: none;*/
        margin: 0 0 55px 0;
    }
    .title-block.full-content.left {
        top: 68%;
    }
    .button-title {
        float: right;
        margin-right: 30px;
    }
    .title-block-half {
        font-size: 175%;
    }
    .p-margin-bottom {
        margin-bottom: 5px;
    }
    .cms-index-index .main-container {
        padding: 1px;
        top: 43px;
    }
    .one-one-content-block {
        float: left;
        margin-bottom: 10px;
        max-width: 33%;
        width: 100%;
        position: relative;
    }
    .icon-title h1,
    .no-icon-title h1 {
        font-size: 20px;
        margin-bottom: -12px;
        margin-left: auto;
        margin-right: auto;
    }
    .ribbon-three {
        display: none;
    }
    .ribbon-one,
    .ribbon-two {
        width: 50%;
        margin: 2% 0;
        padding: 0 2%;
    }
    #ribbon-anniversary,
    #ribbon-anniversary-shop {
        background: url('https://s3-us-west-2.amazonaws.com/shop-content/images/home/Cricut10Top-Banner_780.jpg') no-repeat;
        width: 100%;
        height: 11.5vw;
        background-size: contain;
    }
    .three-quarter-content-block,
    {
        width: 100%;
        margin-right: 0%;
        float: none;
    }
    .quarter-content-block {
        width: 100%;
        padding: 3%;
        margin-top: 2%;
        margin-bottom: 2%;
        float: none;
        overflow: hidden;
        height: auto;
    }
    .whats-new-container .one-fifth-content-block:first-child {
        margin-left: 1%;
    }
    .row .one-fifth {
        margin-right: 0;
        float: initial;
        width: 99%;
        margin-bottom: 1%;
    }
    .vinylTextVlign {
        margin-top: 0%;
    }
}

@media only screen and (max-width:599px) {
    .hide-small {
        display: none;
    }
    .cr-super-text {
        margin-bottom: 0px;
    }
    .title-block.category {
        font-size: 21px;
    }
    .title-block.full-content {
        bottom: -18%;
    }
    .title-block.full-content.left {
        top: 49%;
    }
    .quarter-content-block {
        padding: 3% 7% 3% 3%;
    }
}

@media only screen and (max-width:479px) {
    .hide-xsmall {
        display: none;
    }
    .button-title {
        margin-top: 8px;
    }
    .title-promo {
        margin-top: 3%;
    }
    .cr-super-span {
        margin-left: -15px;
    }
    .title-block {
        margin-bottom: 0;
    }
    .title-block.category {
        font-size: 12px;
    }
    .title-block.full-content {
        font-size: 145%;
    }
    .title-block.full-content.left {
        top: 35%;
        width: 94%;
    }
    .one-one-category p {
        font-size: 10px;
        margin-top: -5px;
        margin-bottom: 5px;
    }
    .icon-title h1,
    .no-icon-title h1 {
        font-size: 16px;
        margin-bottom: -9px;
    }
    .ribbon-one p,
    .ribbon-two p {
        font-size: 11px;
    }
    .one-third-content-block.whats-new-item {
        width: 100%;
    }
}

@media only screen and (max-width:360px) {
    #ribbon-anniversary,
    #ribbon-anniversary-shop {
        background: url('https://s3-us-west-2.amazonaws.com/shop-content/images/home/Cricut10Top-Banner_375.jpg') no-repeat;
        width: 100%;
        background-size: contain;
    }
    #ribbon-anniversary {
        height: 22.66vw;
    }
    #ribbon-anniversary-shop {
        height: 23.66vw;
    }
    .ribbon-one p,
    .ribbon-two p {
        font-size: 10px;
    }
}