.branding-method-box {
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 2px;
    overflow: hidden;
    vertical-align: middle; /* for Safari */
}
.branding-method-box *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.branding-method-box.branding-method-emb .branding-method-icon {
    margin-top: -6px;
}
.branding-method-box .branding-method-label {
    padding: 8px 0px 0px 0px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    font-weight: normal;
    font-size: 11px;
    line-height: 14px;
    text-shadow: 0px 1px 1px #666;
    text-transform: uppercase;
    height: 36px;
}
.branding-method-box .branding-method-icon {
    margin-top: 5px;
    color: #fff;
    font-size: 30px;
    text-shadow: 0px 1px 1px #666;
    text-align: center;
}
/* I have to specifically set style for .fa here, isn't it overkill to set .fa globally in main_css.css? */
.branding-method-box .branding-method-icon .fa, .branding-method-box .branding-method-icon .fas{
    top: inherit;
    color: #fff;
    font-size: 30px;
}
.branding-method-icon-text1 {
    font-size: 22px;
    display: inline-block;
    position: relative;
    right: -3px;
    top: -5px;
}
.branding-method-icon-text1 > span:nth-child(2) {
    padding-left: 2px;
}
.branding-method-icon-text2 {
    font-size: 10px;
    position: absolute;
    right: 8px;
    bottom: 0px;
    text-transform: uppercase;
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
}
.branding-method-box .photo-printing-colors {
    height: 44px;
    padding-top: 7px;
}
.branding-method-box .photo-printing-colors div {
    display: inline-block;
    float: left;
    width: 25%;
    height: 100%;
}
.branding-method-box .photo-printing-colors div:nth-child(1) {
    background-color: #1ed0c6;
    border-bottom-left-radius: 2px;
}
.branding-method-box .photo-printing-colors div:nth-child(2) {
    background-color: #f504d0;
}
.branding-method-box .photo-printing-colors div:nth-child(3) {
    background-color: #fff32b;
}
.branding-method-box .photo-printing-colors div:nth-child(4) {
    background-color: #000;
    border-bottom-right-radius: 2px;
}

/** Medium size **/
.branding-method-box.branding-method-box-large {
    width: 120px;
    height: 120px;
    border-radius: 4px;
}
.branding-method-box.branding-method-box-large .photo-printing-colors div:nth-child(1) {
    border-bottom-left-radius: 4px;
}
.branding-method-box.branding-method-box-large .photo-printing-colors div:nth-child(4) {
    border-bottom-right-radius: 4px;
}

.branding-method-box-large .branding-method-label{
    padding: 8px 5px 0px 5px;
    font-size: 14px;
}

.branding-method-box-large .branding-method-icon-text1{
    top: -15px;
}

.branding-method-box-large .branding-method-icon-text2{
    font-size: 12px;
    bottom: 20px;
    left: 65px;
    right: unset;
}

.branding-method-box-large .photo-printing-colors{
    height: 84px;
}

.branding-method-box-large .branding-method-icon .fa{
    font-size: 60px;
}

.branding-method-box-large .branding-method-icon .fas{
    font-size: 50px;
}

/** Mini size **/
.branding-method-box.branding-method-box-mini {
    width: 40px;
    height: 40px;
    margin-bottom: 3px;
}
.branding-method-box.branding-method-box-mini .branding-method-icon .fa, .branding-method-box.branding-method-box-mini .branding-method-icon .fas {
    top: inherit;
    color: #fff;
    font-size: 23px;
}
.branding-method-box.branding-method-box-mini .branding-method-icon {
    margin-top: 4px;
    font-size: 23px;
}
.branding-method-box.branding-method-box-mini.branding-method-dpr .branding-method-icon {
    margin-top: 0;
}
.branding-method-box.branding-method-box-mini .photo-printing-colors {
    height: 18px;
    padding-top: 0px;
}

/* for twipsy */
.branding-method-box {
    position: relative;
    overflow: visible;
}
.branding-method-box:hover .twipsy{
    display: block;
}
.branding-method-box .branding-method-video-container {
    float: left;
    margin: 5px 10px 0 0;
    position: relative;
    height: 100px;
}
.branding-method-box .branding-method-video-loading {
    position: absolute;
    left: 80px;
    top: 35px;
}
.branding-method-box.branding-method-box-mini .twipsy .twipsy-inner{width:300px;padding:5px 10px;}
.branding-method-box.has-video .twipsy .twipsy-inner{padding:5px 10px;text-align:left;}
.branding-method-box.has-video .twipsy .twipsy-inner p{margin:0;}
.branding-method-box.has-video .twipsy .twipsy-inner h4{margin:0;font-size:16px;}

.branding-method-box.branding-method-box-mini .branding-method-name,.branding-method-label-single-in{font-weight: bold;margin:0;}
.branding-method-box.branding-method-box-mini .branding-method-desc,.branding-method-desc-single-in{margin:0;}