body {
    margin: 0px;
    padding: 0px;
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #222222;
    width: 100%;
    height: 100%;
    font-weight: 300;
}

html {
    width: 100%;
    height: 100%;
}

s {
    visibility: hidden;
}

.bold {
    font-weight: bold;
}

div.clear {
    clear: both;
    line-height: 0px;
    font-size: 0px;
    height: 0;
}

/*Block 1*/

.intro-section {
  width: 100vw;
  height: 100vh;
}

div.main-hold {
    text-align: center;
    top: 15%;
    width: 100%;
    position: absolute;
}

div.podskazki-holder {
    color: white;
    font-size: 18px;
    text-align: center;
    width: 100%;
    margin-bottom: 15px;
}

img.icon-img {
    width: 100%;
    max-width: 88px;
}

a.icon-p {
    display: block;
    margin: 0 auto;
    width: 55px;
    height: 49px;
    background-repeat: no-repeat;
    text-decoration: none;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    behavior: url(PIE.htc);

}

a.icon-p:hover {
    text-decoration: none;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

a.icon-p.used:hover {
    text-decoration: none;
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
}

.pod-1 {
    background-image: url(../templates/doc2/images/fl.png);
}

.pod-2 {
    background-image: url(../images/i_02.png);
}

.pod-3 {
    background-image: url(../templates/doc2/images/fl.png);
}

.tooltip-inner {
    font-family: 'Roboto', sans-serif;
    padding: 10px;
    font-size: 15px;
    background-color: #2174bd;
    z-index: 99999;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #2174bd;
}

a.used {
    text-decoration: none;
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
}

div.line-q {
    background-image: url(../images/sol.png);
    background-repeat: repeat-x;
    background-position: center;
    margin: 40px 0 30px 0;
}

div.outer-question {
    background-repeat: repeat-x;
    background-position: center;
    background-color: #0a0f2a;
    padding: 2px;
    -webkit-border-radius: 800px;
    -moz-border-radius: 800px;
    border-radius: 800px;
}

div.question-holder {
    font-size: 20px;
    text-align: center;
    color: white;
    padding: 10px 20px 10px 20px;
    border: 1px solid #6d29b6;
    -webkit-border-radius: 800px;
    -moz-border-radius: 800px;
    border-radius: 800px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#52558c), to(#08085a));
    background: -webkit-linear-gradient(#52558c, #08085a);
    background: -moz-linear-gradient(#52558c, #08085a);
    background: -ms-linear-gradient(#52558c, #08085a);
    background: -o-linear-gradient(#52558c, #08085a);
    background: linear-gradient(#752dc3, #4f1a89);
    -pie-background: linear-gradient(#52558c, #08085a);
    behavior: url(PIE.htc);
}

div.line-a {
    background-image: url(../images/sol.png);
    background-repeat: repeat-x;
    background-position: center;
    margin: 0px 0 30px 0;
}

div.outer-answer {
background-image: url(../images/outer_questin_bcg.gif);
    background-repeat: repeat-x;
    background-position: center;
    background-color: #a9bfcc;
    padding: 2px;
    -webkit-border-radius: 800px;
    -moz-border-radius: 800px;
    border-radius: 800px;
    behavior: url(PIE.htc);
}

.table-disp {
    display: table;
    width: 100%;
}

a.answer-holder {
    outline: 0;
    display: table-cell;
    vertical-align: middle;
    width: 10%;
    height: 60px; /*увеличить высоту в случае ответа трех строчек - 1/3*/
    text-decoration: none;
    font-size: 18px;
    text-align: left;
    color: white;
    padding: 5px 20px 5px 20px;
    border: 1px solid #262b43;
    -webkit-border-radius: 800px;
    -moz-border-radius: 800px;
    border-radius: 800px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#063e74), to(#08085a));
    background: -webkit-linear-gradient(#063e74, #08085a);
    background: -moz-linear-gradient(#063e74, #08085a);
    background: -ms-linear-gradient(#063e74, #08085a);
    background: -o-linear-gradient(#063e74, #08085a);
   background: linear-gradient(#752dc3, #4f1a89);
    -pie-background: linear-gradient(#063e74, #08085a);
    behavior: url(PIE.htc);
}

div.text-hold {
    width: 90%;
    display: table-cell;
    vertical-align: middle;
    height: 60px; /*увеличить высоту в случае ответа трех строчек - 2/3*/
}

.answer-holder span {
    color: #fff;
    float: left;
    line-height: 60px; /*увеличить высоту в случае ответа трех строчек - 3/3*/
    width: 5%;
    display: table-cell;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

a.answer-holder:hover {
    border: 1px solid #6f8432;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f44336), to(#c73c32));
    background: -webkit-linear-gradient(#f44336, #c73c32);
    background: -moz-linear-gradient(#f44336, #c73c32);
    background: -ms-linear-gradient(#f44336, #c73c32);
    background: -o-linear-gradient(#f44336, #c73c32);
    background: linear-gradient(#8cbd15, #567212);
    -pie-background: linear-gradient(#f44336, #c73c32);
    text-decoration: none;
    behavior: url(PIE.htc);

}

a.incorrect, a.incorrect:hover {
    border: 1px solid #620000;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e90000), to(#9F0000));
    background: -webkit-linear-gradient(#e90000, #9F0000);
    background: -moz-linear-gradient(#e90000, #9F0000);
    background: -ms-linear-gradient(#e90000, #9F0000);
    background: -o-linear-gradient(#e90000, #9F0000);
    background: linear-gradient(#e90000, #9F0000);
    -pie-background: linear-gradient(#e90000, #9F0000);
    behavior: url(PIE.htc);
}

a.correct, a.correct:hover {
    border: 1px solid #1c7500;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#36bf0b), to(#196C00));
    background: -webkit-linear-gradient(#36bf0b, #196C00);
    background: -moz-linear-gradient(#36bf0b, #196C00);
    background: -ms-linear-gradient(#36bf0b, #196C00);
    background: -o-linear-gradient(#36bf0b, #196C00);
    background: linear-gradient(#36bf0b, #196C00);
    -pie-background: linear-gradient(#36bf0b, #196C00);
    behavior: url(PIE.htc);
}

a.answer-holder:hover span {
    color: #fff;
}

div.progress-section {
    border-top: 1px solid #738934;
    padding: 30px 0 20px 0;
    text-align: center;
    color: #738934;
    font-size: 18px;
    line-height: 40px;

}

.progress-section span {
    margin: 0 15px 0 15px;
}

span.selected-q {

    padding: 3px 15px 5px 15px;
    -webkit-border-radius: 800px;
    -moz-border-radius: 800px;
    border-radius: 800px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#561d94), to(#6d29b6));
    background: -webkit-linear-gradient(#561d94, #6d29b6);
    background: -moz-linear-gradient(#561d94, #6d29b6);
    background: -ms-linear-gradient(#561d94, #6d29b6);
    background: -o-linear-gradient(#561d94, #6d29b6);
    background: linear-gradient(#561d94, #6d29b6);
    -pie-background: linear-gradient(#561d94, #6d29b6);
    behavior: url(PIE.htc);
}

span.bonus {
    color: #ff8713;
}

@media (max-width: 992px) {
    .intro-section {
        background-size: cover;
    }

    div.question-holder {
        font-size: 20px;
    }

    a.answer-holder {
        font-size: 17px;
    }

    div.progress-section {
        font-size: 17px;
    }

}

@media (max-width: 767px) {

    .intro-section {
		background: #eef1f3;
        background-size: auto 100%;
    }

    div.main-hold {
        top: 20%;
    }

    div.question-holder {
        font-size: 16px;
        padding: 10px 10px 10px 10px;

    }

    a.answer-holder {
        font-size: 13px;
    }

    div.line-a {
        background-image: none;
        margin: 0;
    }

    div.outer-answer {
        margin-bottom: 20px;
        padding: 4px;
    }

    .progress-section span {
        margin: 0 5px 0 5px;
    }

}

/*modal*/

.modal-answer {
    border: 6px solid #403635;
    font-size: 18px;
    color: #2a2626;
    padding: 10px 20px 10px 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #8bc34a;
}

.correct-answer{
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#36bf0b), to(#196C00));
    background: -webkit-linear-gradient(#36bf0b, #196C00);
    background: -moz-linear-gradient(#36bf0b, #196C00);
    background: -ms-linear-gradient(#36bf0b, #196C00);
    background: -o-linear-gradient(#36bf0b, #196C00);
    background: linear-gradient(#36bf0b, #196C00);
    -pie-background: linear-gradient(#36bf0b, #196C00);
}

.card-holder{
    width: 500px;
    height: 313px;
    background: url(../images/card.png);
    background-size:contain;
    color:#523700;
    font-size: 25px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    position: relative;
    margin:0 auto;
}

.card-holder .balance{
    position: relative;
    top:170px;
    right: 45px;
    text-align: right;
    text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}

.card-holder .cname{
    position: relative;
    top:202px;
    left:48px;
    text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}

.card-input{
    font-size: 36px;
    width: 460px;
    margin: 0 auto;
}

.card-input input{
    width: 102px;
    font-size: 36px;
    height: 52px;
}

div.line-a-modal {
    position: absolute;
    width: 100%;
    background-image: url(../images/bcg_line.gif);
    background-repeat: repeat-x;
    background-position: 50% 27%;
    margin: 0;
    z-index: 9999;
}

div.outer-answer-2 {
    margin: 0px auto 47px auto;
    background-image: url(../images/outer_questin_bcg.gif);
    background-repeat: repeat-x;
    background-position: center;
    background-color: #a9bfcc;
    padding: 6px;
    -webkit-border-radius: 800px;
    -moz-border-radius: 800px;
    border-radius: 800px;
    behavior: url(PIE.htc);
}

a.answer-holder-2 {
    display: block;
    text-decoration: none;
    font-size: 18px;
    text-align: center;
    color: white;
    padding: 10px 20px 10px 20px;
    -webkit-border-radius: 800px;
    -moz-border-radius: 800px;
    border-radius: 800px;
    border: 1px solid #536618;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#561d94), to(#6d29b6));
    background: -webkit-linear-gradient(#561d94, #6d29b6);
    background: -moz-linear-gradient(#561d94, #6d29b6);
    background: -ms-linear-gradient(#561d94, #6d29b6);
    background: -o-linear-gradient(#561d94, #6d29b6);
    background: linear-gradient(#561d94, #6d29b6);
    -pie-background: linear-gradient(#561d94, #6d29b6);
    behavior: url(PIE.htc);
}



a.answer-holder-3 {
    display: block;
    text-decoration: none;
    font-size: 18px;
    text-align: center;
    color: white;
    padding: 10px 20px 10px 20px;
    -webkit-border-radius: 800px;
    -moz-border-radius: 800px;
    border-radius: 800px;
    border: 1px solid #536618;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#561d94), to(#6d29b6));
    background: -webkit-linear-gradient(#561d94, #6d29b6);
    background: -moz-linear-gradient(#561d94, #6d29b6);
    background: -ms-linear-gradient(#561d94, #6d29b6);
    background: -o-linear-gradient(#561d94, #6d29b6);
    background: linear-gradient(#561d94, #6d29b6);
    -pie-background: linear-gradient(#561d94, #6d29b6);
    behavior: url(PIE.htc);
}

a.answer-holder-3:hover {
    border: 1px solid #a15001;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#561d94), to(#6d29b6));
    background: -webkit-linear-gradient(#561d94, #6d29b6);
    background: -moz-linear-gradient(#561d94, #6d29b6);
    background: -ms-linear-gradient(#561d94, #6d29b6);
    background: -o-linear-gradient(#561d94, #6d29b6);
    background: linear-gradient(#561d94, #6d29b6);
    -pie-background: linear-gradient(#561d94, #6d29b6);
    text-decoration: none;
    behavior: url(PIE.htc);

}

div.line-h {
    margin: 0 0 20px 0;
}

div.letter {
    float: left;
    margin: 0 10px 0 0;
}

.orng {
    color: #ff8713;
}

.winner-im{
    background-repeat: no-repeat;
    background-position: center;
	width:100%;
	height:200px;
	-moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
}

.winner-im-text{
	font-size: 2.4em;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 6px;
    padding-top: 14px;
    text-shadow: #684833 2px 0px, #6c4a35 2px 2px, #684833 0px 2px, #684833 -2px 2px, #684833 -2px 0px, #684833 -2px -2px, #684833 0px -2px, #684833 2px -2px;
}

div.progress-bbr {
    float: left;
    background-color: #ff0000;
    width: 14px;
    height: 25px;
    margin: 0 10px 0 0;
}

div.progress-bbr-2 {
    float: left;
    background-color: #ffff00;
    width: 25px;
    height: 25px;
    margin: 0 10px 0 0;
}

div.progress-bbr-3 {
    float: left;
    background-color: #00ff00;
    width: 5px;
    height: 25px;
    margin: 0 10px 0 0;
}

div.progress-bbr-4 {
    float: left;
    background-color: #e6692d;
    width: 25px;
    height: 25px;
    margin: 0 10px 0 0;
}

div.progress-bbr-5 {
    float: left;
    background-color: #00ffff;
    width: 180px;
    height: 25px;
    margin: 0 10px 0 0;
}

/*@media (max-width: 767px) { 
   div.progress-bbr {width: 3px; }
   div.progress-bbr-2 {width: 3px; }
   div.progress-bbr-3 {width: 3px; }
   div.progress-bbr-4 {width: 3px; }   
   div.progress-bbr-5 {width: 20px; }  
 
}*/

.modal-backdrop.in {
    opacity: 0.8;
}

.text-hold s {
    color: #ccc;
}

.modal-body .head {
    margin: 0px 0px 20px 0px;
    /*font-weight: bold;*/
    font-size: 24px;
}

#audiencehelpbutton, #friendhelpbutton {
    display: none;
}

.per-progress {
    font-size: 24px;
}

.fb_iframe_widget > span, .fb_iframe_widget > span > iframe {
    width: 150px !important;
    height: 24px !important;
}

.onp-facebook-share-ru_RU {
    width: 150px !important;
}

#__okShare0 {
    width: 100px !important;
    height: 20px !important;
    visibility: visible !important;
}

div.onp-sociallocker-button-vk-share > div.onp-sociallocker-button-inner-wrap {
    width: 165px !important;
}