@import url('https://fonts.googleapis.com/css?family=Roboto:300,700');
body {font-family: 'Roboto', sans-serif; color:#636467; font-weight:300; padding-bottom:100px;}
.blue {color:#00467f;}
.red {color:#ef4056;}
h3 {font-size:22px;font-weight:300;}

.header,.footer,.content {max-width:930px;width:100%;margin:0 auto;}

.logo img {padding:10px;width:100%;max-width:305px;}

.content-title {font-size:2.5em;text-align:center;padding:50px 0 50px 0;font-weight:300;}
ul {list-style:none;}
ul li {width:auto;}

.progress-bar {text-align:center;}
.progress-bar li {display:inline-block;}
.progress-bar li > a {display:none;}
.progress-bar li a {color: white; font-size: small;}
.progress-bar li.icon {
    background:#ffffff;
    border-radius:15%;
    background-position: center  center;
    background-repeat: no-repeat;
    background-size:contain;
    position:relative;
    padding:0}
.progress-bar li.icon > div {
    height:100%;
    width:100%;
    background:#ffffff;
    border: 1px #7f7f82 solid;
    border-radius:15%;
    position:relative;
    background-position: center  center;
    background-repeat: no-repeat;
    background-size:auto;
    display:table
}
.progress-bar li.labeltext > div {background: #ef4857; border: 1px #ef4857 solid; }
.progress-bar li.separator {letter-spacing: 2px;overflow:hidden;white-space: nowrap;line-height:0;vertical-align: middle;color:#636466;}
.progress-bar li.active > div { background-color: #636467; border: 1px #636467 solid; }
.progress-bar li.active a {display:block;width:100%;height:100%; text-align: center;}
.progress-bar li.active > div > a {display:block;width:100%;height:100%; text-align: center;display:table-cell; vertical-align: middle; font-size:20px; font-weight:300;}
.progress-bar li.questionmark > div > a {display:block;width:100%;height:100%; text-align: center;display:table-cell; vertical-align: middle; font-size:28px;}

.progress-bar li.oven > div,
.progress-bar li.questionmark > div {background: #ef4857;  }
.progress-bar li.oven > div,
.progress-bar li.questionmark > div {border: 1px #ef4857 solid; background: #ef4857;  }
.progress-bar li.oven.active > div {
    background-image:url(../img/ico_cooking_hat.png);
    background-position: center  center;
    background-repeat: no-repeat;
    background-size:auto;
}

.close {display:none;background:url(../img/btn_close.png) no-repeat center center;position:absolute;top:-10px;left:-10px;width:25px;height:25px;}
.active .close {display:block;}

.choices {text-align:center; margin-top:50px;}
.choice-item {display:inline-block;background-position:center center;background-repeat: no-repeat; background-size: contain; margin:0 10px 0 10px;}
.choice-item > div {display:table;}
.choice-item a {display:table-cell;height:95px;vertical-align:middle; color:white; font-size:22px;}

.content-smaller .choice-item a { height:90px }

.receipt-content {width: auto; margin:0 auto; padding-top:30px; text-align:center;}

.instructions {
    text-align: left;
    margin:10px 0 0px 0;
    text-align:center;
    border: 1px #ef4857 solid;
    border-radius:15px;
    max-width: 614px;
    margin: 0 auto;
    margin-top: 25px;
}
.instructions-content {padding:20px; text-align: left; display:inline-block;}
.instructions-content h3 {padding:0 0 0 0; font-weight:700; font-size:18px;}
.instructions-content p {padding:0 0 7px 0;}

.temps {padding:4px;margin:10px 0 25px 0; display: table; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center;}
.temps-content-left {background-color: white; width: 200px; display: table-cell;}
.temp-text { display: table-cell; width: calc(100% - 200px); text-align: left; font-size: 13px; color: #00467f; vertical-align: middle; padding: 10px; background:#bde3f5;padding:10px;color:#00467f; }

.chef-tips {
    margin:0 0 35px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;

    border: 1px #ef4857 solid;
    border-radius:15px;
    max-width: 614px;
    margin: 0 auto;
    margin-top: 30px;
}
.chef-tips h3 {
    font-size: 18px;
    font-weight: 700;
}
.chef-tips-left {
    width: 48%;
    float: left;
    border-right: 1px #ef4857 solid;
}
.chef-tips-left .content-box {
    padding: 20px 10px 20px 20px;
}
.chef-tips-right {
    text-align: left;
    float: left;
    width: 50%;
}
.chef-tips-right .content-box {
    padding: 20px 20px 20px 15px;
}


.baking {
    margin:0 0 35px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;

    border: 1px #ef4857 solid;
    border-radius:15px;
    max-width: 614px;
    margin: 0 auto;
    margin-top: 30px;
}
.baking h3 {
    font-size: 18px;
    font-weight: 700;
}
.baking-left {
    width: 48%;
    float: left;
    border-right: 1px #ef4857 solid;
}
.baking-left .content-box {
    padding: 20px 10px 20px 20px;
}
.baking-right {
    text-align: left;
    float: left;
    width: 50%;
}
.baking-right .content-box {
    padding: 20px 20px 20px 15px;
}



.inthebag { display:inline-block; height: 107px; padding: 5px; margin: 45px 0 25px 0; }
.inthebag > div { display: table-cell; vertical-align: middle; text-align: center; }
.inthebag > div > img { max-width: 100%; }
.inthebag-small {
    padding: 15px 5px;
    margin: 50px 0 25px 0;
    display: none;
}
.inthebag-small > div { display: table; min-width: 100%; min-height: 100%; }
.inthebag-small > div > div { display: table-cell; vertical-align: middle; text-align: center; }
.inthebag-small > div > img { max-width: 100%; max-height: 100%; }

.chef-tips-content {
    padding:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}


.params > div:not(.clear) {float:left;}
.params p {font-size:11px;color:#00467f;line-height:16px;}
.oven-symbol {width:137px;height:117px;padding:0 13px 0 0;}
.temperature-info {width:calc(50% - 80px);}
.temperature-box {
    background:url(../img/ico_degree.png) no-repeat left center;
    height:63px;
    margin-right: 20px;
    margin:0 auto;
    display: inline-block;

    background-size: 39px 45px;
    padding-left: 60px;
}
.temperature-box .temperature-content {
    font-size: 35px;
    margin-top: 15px;
}

.time-box {
    background:url(../img/ico_clock.png) no-repeat left center;
    height:64px;
    margin-right: 20px;
    margin:0 auto;
    display:inline-block;
    background-size: 45px 45px;
    padding-left: 60px;
}
.time-box .time-content {
    font-size: 35px;
    margin-top: 10px;
}

.celsius {padding:104px 0 0 0;color:#00467f;font-size:12px;text-align:center; font-weight: bold;}
.fahrenheit {padding:0;color:#00467f;font-size:8px;text-align:center;}
.temperature-info p {float:left;width:calc(100% - 70px);padding:0 5px;}
.times-icons {width:103px; float: left;}
.times-icons > div {background:url(../img/ico_time.png) no-repeat center center;padding:42px 24px 18px 24px;text-align:center;margin: 7px 0;font-size:14px;font-weight:bold;color:#00467f;  height: 62px; width: calc(103px - 48px); background-position-y: 12px; display: table;}
.times-icons > div > div {display: table-cell; vertical-align: middle;}

.time-info p {float:left;width:calc(100% - 70px);padding:0 5px;}

.recipies {margin:25px 0 25px 0;}
.recipies h3 {margin:0 0 25px 0; font-weight:700; font-size: 18px;}
.recipies .recipies-item {
    float:left;
    margin:0 0 0 1.5%;
    width: 32.3%;
    padding:10px 5px 10px 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;

    border: 1px #ef4857 solid;
    border-radius:15px;
}
.recipies .recipies-item:nth-child(2) {margin:0;}
.recipies.recipies-count-1 .recipies-item:nth-child(2) {margin-left:34%;}
.recipies.recipies-count-2 .recipies-item:nth-child(2) {margin-left:17%;}
.recipies.recipies-count-3 .recipies-item:nth-child(2) {margin-left:0;}
.recipies-item-content {padding:10px;min-height:250px;display:block;}
.recipies-item-content h5 {font-weight: 700; color:#636467;}
.recipies-item-content > a {font-size:16px;color:#ef4857;padding:25px 0 0 0;font-weight:700;display:block;}
.recipies-item-content p {font-size:16px;line-height:20px;padding:0 0 7px 0;}

.social-icons {margin: 50px 0 47px 0;}
.social-icons.alone {margin: 50px 0 0 0;}
.social-icons a {margin: 0 10px 0 0;display:inline-block;border-radius:14px;}
.a2a_button_facebook {background:#45619D;}
.a2a_button_twitter {background:#55ACEE;}
.a2a_s_facebook {background-size:50% 50%;background-position: center center;background-repeat: no-repeat;}
.a2a_kit .a2a_svg {background-size:50% 50%;background-position: center center;background-repeat: no-repeat !important;}
.a2a_count {background:none !important;color:#fff !important;border:none !important;}
.a2a_button_facebook .a2a_count {background:#758AB7 !important;border-radius:14px !important;}
.a2a_button_twitter .a2a_count {background:#88C5F3 !important;border-radius:14px !important;}
.a2a_count::before, .a2a_count::after {content: '' !important;border-image: none !important;
    border-style: none !important;
    border-width: 0 !important;}

.fancybox-default a.fancybox-close,
.fancybox-default a.fancybox-expand,
.fancybox-default a.fancybox-nav span,
.fancybox-dark a.fancybox-close,
.fancybox-dark a.fancybox-expand,
.fancybox-dark a.fancybox-nav span {
    background-image: url('../img/btn_close.png');
    right: -12px;
    width: 25px;
    top: -12px;
    height: 24px;
}

.fancybox-default-skin-open {
    box-shadow: none;
}

.fancybox-default-skin {
    background-color: transparent;
}

.helptext {
    text-align: center;
    font-size: 1.5em;
    color: #00467f;
}

.helptext a {
    color: #00467f;
    font-weight: bold;
}

.helptext img {
    margin-left: 10px;
    margin-bottom: 5px;
    max-height: 35px;
    vertical-align: middle;
}
.notifyText {
    margin: 50px 0 10px 0;
    text-align: center;
}

h5 {font-size:16px;color:#00467f;padding:0 0 10px 0;font-weight:bold;}

.embed p { /*color:#ef4857;*/font-size:14px;word-wrap:break-word;}

.embed h3 {
    font-weight: 700;
    font-size: 18px;
}

.embed {
    padding:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;

    border: 1px #ef4857 solid;
    border-radius:15px;
    max-width: 614px;
    margin: 0 auto;
}

.embed > div {
    padding:10px;
}


.footer {text-align:center;font-size:1.875em;padding:43px 0 12px 0;}


.underfooter { margin-bottom: 25px; }


.explanation-container { margin: 0 auto; max-width:614px; }
.explanation {margin:30px 0px 10px 0px; border: 1px #ef4857 solid; border-radius:15px;}
.explanation-content {padding:20px; text-align: left;}
.explanation-title {/*padding:0 0 7px 0;*/ font-weight:700; font-size: 18px;}
.explanation-text {padding:0 0 7px 0; font-weight:300;}

@media (max-width:800px){
    .close {top:-10px;left:-10px;}
}
@media (max-width:768px){
    .progress-bar li.icon > div {background-size:75%;}
    .progress-bar li.oven.active > div {background-size:75%;}
    .close {top:-10px;left:-10px;}
    .footer {padding:30px 10px 30px 10px;width:calc(100% - 20px);}

    .progress-bar li.questionmark > div > a {font-size:18px;}
    .temperature-box {
        background-size: 27px 35px;
        padding-left: 40px;
    }
    .time-box {
        background-size: 35px 35px;
        padding-left: 50px;
    }
    .time-box .time-content,
    .temperature-box .temperature-content{
        font-size: 22px;
        margin-top: 20px;
    }
    .temperature-box .temperature-content {
        margin-top: 23px;
    }
    .progress-bar li.active > div > a {
        font-size: 14px;
    }
    .social-icons {margin: 30px 0 30px 0;}
    .social-icons.alone {margin: 30px 0 0 0;}
    .social-icons .title {display:block; font-size:1.2em !important;}
    .explanation-container.category { margin-left: 15px; margin-right: 15px; }
}
@media (max-width:640px){
    .close {top:-10px;left:-10px; width:20px;height:20px;background-size:70%;}
    .content-title {font-size:1.7em; padding: 35px 0 35px 0;}
    .footer {font-size:1.4em;}
    .oven-symbol {display:none;}
    .temperature-info {width:50%;}
    .time-info {width:50%;}
    .recipies .recipies-item {width:calc(100% - 10px);margin:0 0 10px 0;padding:5px; float:none; display:inline-block;}
    .recipies .recipies-item:nth-child(2) {margin:0 0 10px 0;}
    .recipies.recipies-count-1 .recipies-item:nth-child(2) {margin-left:0;}
    .recipies.recipies-count-2 .recipies-item:nth-child(2) {margin-left:0;}
    .recipies.recipies-count-3 .recipies-item:nth-child(2) {margin-left:0;}
    .receipt-content {width: auto; min-width:calc(100% - 30px);padding:0 15px; }
    .chef-tips { width: auto; height: auto; }
    .inthebag { display: none; }
    .inthebag-small { display: block; }
    .chef-tips-content { margin-left: 0; }
    .chef-tips { margin-bottom: 20px;}
    .temperature-box {margin-top: 0px;}
    .progress-bar li a { font-size: 1px;}
}
@media (max-width:480px){
    .temperature-info {width:100%;}
    .time-info {width:100%;}

    .time-box .time-content{
        font-size: 18px;
        margin-top: 25px;
    }

    .temperature-box .temperature-content{
        font-size: 18px;
        margin-top: 25px;
    }

    .chef-tips img {
        max-width:100px;
    }
}
@media (max-width:420px){
    .close {top:-10px;left:-10px;width:20px;height:20px;}
    .content-title {font-size:1.6em;}
    .footer{font-size:1.2em;}
}


.a2a_default_style a {
    float: none !important;
    background: #fff !important;
    height: 25px;
}

.a2a_button_facebook .a2a_count {
    background: #ef4857 !important;
}