/*Simulations Css Start*/
.simulation_screen_main{width:100%; height:calc(100vh - 40px); color:#000; background-repeat:no-repeat;}

.simulation_startpage{width:100%; height:calc(100vh - 40px);}
.simulations_start{width: 80%;
    position: absolute;
    height:auto;
    min-height:280px;
    padding:20px;
    background: rgba(255, 255, 255, 0.6);
    z-index: 99999;
    bottom:40px;
    left:150px;
    border-radius:10px;
}
 .simulations_start h4{font-family:'roboto_slabbold'; font-size:18px; line-height:30px;}
 .simulation_speech span{font-family: 'roboto_slabregular'; font-size:18px; text-align:justify;}
 .startcharacter_pic{width: 80%;
    margin:0px auto;
    min-height: auto;
    position:absolute;
    bottom:0px;
    right:150px;
    text-align:right;}

    .start_button{position:absolute;
    z-index: 999999;
    text-align: center;
    width:70%;
    bottom:60px;
    font-family:regular;}

    .start_button button{border: none;
    background: #339be0;
    padding:8px 35px 8px 35px;
    border-radius: 4px;
    text-align: center;
    margin-left:40%;
    color: #fff;}

/*Simulations Css Start*/

.simulation_main_div{width:100%; height:100%; position: absolute; top: 0px;}

.simulation_first_screen{width:95%; margin:0px auto; height:50% !important; display:table; margin-top:20px;}
 
.conversation_speech{
    width:75%; 
    height:auto; 
    float:left; 
    background: rgba(255, 255, 255, 0.6);
    border-radius:4px;
    padding:20px;
    text-align:justify;}

.conversation_speech span{font-family: 'roboto_slabregular'; font-size:16px;}

.conversation_screen{
    width:25%; 
    float:right;
}
.conversation_screen img{float:right; width:220px;}

.simulations_next_buttons{width:100%; height:5%;}
.next_buttons{width:100%; margin: 0px auto; margin-top:0px;}
.next_buttons button{border:none; background:none; float:left;}
.next_buttons i{font-size:24px; float:left; background-color:#0a77bf; color:#fff;
margin:10px;  padding:2px 14px 4px 14px; line-height:30px; border-radius:100px; cursor:pointer;}
.next_buttons i:hover{background-color:#339be0;}

.simulation_second_screen{width:95%; height:50%; display:table; margin:0px auto;}
.second_screen_div{width:95%; height:auto; display:table;}

.conversation_second_screen{
    width:25%; 
    float:left;
}
.conversation_second_screen img{float:left;}

.conversation_second_speech{
    width:75%; 
    height:auto; 
    float:right; 
    background: rgba(255, 255, 255, 0.6);
    border-radius:4px;
    padding:20px;
    text-align:justify;
    position: absolute;
    bottom: 100px;
    right: 15px;
}
.conversation_second_speech span{font-family:regular; font-size:16px;}

.simulation_decisions{width:100%; height: auto; margin:0px; padding:0px;}
.conversation_screen_list{width:100%; height:auto; padding:0px; display:table;}

.conversation_screen_list img{float:left;}

.simulation_decisions{}
.simulation_decisions ul{width:350px; float:right; list-style:none;}
.simulation_decisions ul li{padding:0px; 
    border-radius:4px; 
    min-width:200px; 
    border-bottom: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.6);
}

.simulation_decisions ul li button{width:100%; 
    border:none; 
    padding:5px 10px 5px 15px;
    line-height:18px; 
    font-family:regular; 
    font-size:16px; 
    border-radius:2px; 
    text-align:left;
    background:none;
}

.simulation_decisions ul li span{
    background-color:#0a77bf; 
    border-radius:100px; 
    text-align:center; color:#fff; 
    margin-right:10px;     
    float: left;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding-right: 1px;}

.decisions_list{
    font-family:'roboto_slabregular'; 
    font-size:14px;
    text-align:left;
    width: 85%; float: left; line-height: inherit;
}

.startagain_button button{
    border: none;
    background: #339be0;
    padding:8px 35px 8px 35px;
    border-radius: 4px;
    margin-top:30px;
    color: #fff;
    float:right;
}

/*Simulations Css End*/

@media screen and (max-width:640px) and (min-width:480px) {

     .simulation_main_div{width:100%; height:100%; margin:0px auto; padding-bottom:00px; /*overflow:auto; overflow-x: hidden;*/}
    .simulation_startpage{
        width:100%;
        height:auto;
        margin:0px auto;
    }

    .simulations_start{
        width:95%;
        height:70%;
        position: absolute;
        bottom:70px;
        left:8px;
        margin:0px auto;
        padding:20px;
        top:50px;
        background: rgba(255, 255, 255, 0.6);
        overflow:auto;
        overflow-x: hidden;
    }
    .simulation_speech span{height:360px; font-size:16px;}
    .startcharacter_pic{
        position:relative; width:100%; height:auto;
    }
    .startcharacter_pic img{position:absolute; left:0px;}
    .start_button {   
    height: auto;
    text-align: center;
    position: absolute;
    bottom:20px;
    }

    .conversation_speech{
        width:70%; float:left; padding:10px;
        height:230px; overflow-y:scroll;
        text-align:left; line-height:18px;
    }
    .conversation_screen{width:30%; height:auto; float:right;}
    .conversation_screen img{width:100px;}

    .conversation_screen_list img{width:85px; float: left;}
    .simulation_decisions ul{width:72%; float:right; border-radius:0px 0px 0px 0px;}
    .simulation_decisions ul li{padding:5px; border-radius:0px;}
    .simulation_decisions ul li button{padding:0px;}
    .decisions_list{line-height:20px;}

    .conversation_second_screen img{width:100px;}
    .conversation_second_speech{font-family:regular; font-size:16px; overflow-y:scroll;
        height: 210px; text-align: left;}
    .conversation_second_speech span{overflow-y:scroll;}
    .startagain_button button{margin-top:10px;}

}

@media screen and (max-width:480px) and (min-width:320px) {

    .simulation_main_div{width:100%; height:100%; margin:0px auto; padding-bottom: 0px; /*overflow:auto; overflow-x: hidden;*/}
    .simulation_startpage{
        width:100%;
        height:calc(100vh - 40px);
        margin:0px auto;
    }

    .simulations_start{
        width:95%;
        height:65% !important;
        position: absolute;
        bottom:70px;
        left:8px;
        margin:0px auto;
        padding:20px;
        top:50px;
        background: rgba(255, 255, 255, 0.6);
        overflow:auto;
        overflow-x: hidden;
    }
    .simulation_speech span{height:360px; 
        font-size:16px;}
    .startcharacter_pic{
        position:relative; width:100%; height:auto; right:0px;
    }
    .startcharacter_pic img{position:absolute; left:0px;}
    .start_button {   
    height: auto;
    text-align: center;
    position: absolute;
    bottom:80px;
    }

    .conversation_speech{
        width:70%; float:left; padding:10px;
        height:230px; overflow-y:scroll;
        text-align:left; background: rgba(255, 255, 255, 0.6);
    }
    .conversation_screen{width:30%; height:auto; float:right;}
    .conversation_screen img{width:100px;}

    .conversation_screen_list img{width:85px; float: left;}
    .simulation_decisions ul{width:72%; float:right; border-radius:0px 0px 0px 0px;}
    .simulation_decisions ul li{padding:5px; border-radius:0px;}
    .simulation_decisions ul li button{padding:0px;}
    .decisions_list{line-height:20px;}

    .conversation_second_screen img{width:100px;}
    .conversation_second_speech{font-family:regular; font-size:16px; overflow-y:scroll;
        height: 210px; text-align: left;}
    .conversation_second_speech span{overflow-y:scroll;}
    .startagain_button button{margin-top:10px;}

}

@media screen and (max-width:320px){
    .simulations_start{height:60%;}
    .start_button{position:absolute; bottom:130px;}
    .simulation_main_div{width:100%; height:100%; margin:0px auto; padding-bottom:0px; /*overflow:auto; overflow-x: hidden;*/}
    }


.spin-add{
    -webkit-animation:  blinkbutton 1s linear;
    -moz-animation: blinkbutton  1s linear;
    animation: blinkbutton 1s linear;
}
.spin-add-icon{
    -webkit-animation:  blinkicon 1s linear;
    -moz-animation: blinkicon  1s linear;
    animation: blinkicon 1s linear;
}

.activeBtn.wronganswer{
    border: 1px solid #e84c3d !important;
   -webkit-animation:  blinklabel 1.2s linear;
    -moz-animation: blinklabel  1.2s linear;
    animation: blinklabel 1.2s linear;
}
.activeBtn.correctanswer{
    border: 1px solid #10b395 !important;
   -webkit-animation:  blink 1.2s linear;
    -moz-animation: blink  1.2s linear;
    animation: blink 1.2s linear;
}

@keyframes blinkbutton {  
    0%   {opacity: 0; background-color: #10b395;}
    25%  {opacity: 1; background-color: #fff;}
    50%  {opacity: 0; background-color: #10b395;}
    75%  {opacity: 1;background-color: #fff;}
    100% {opacity: 0; background-color: #10b395;}
  }
@-webkit-keyframes blinkbutton {
     0%   {opacity: 0; background-color: #10b395; }
    25%  {opacity: 1;background-color: #fff;}
    50%  {opacity: 0;background-color: #10b395;}
    75%  {opacity: 1;background-color: #fff;}
    100% {opacity: 0;background-color: #10b395;}
}
@keyframes blinkicon {  
  0%   {opacity: 0; color: #10b395;}
  25%  {opacity: 1; color: #FDE35E;}
  50%  {opacity: 0; color: #10b395;}
  75%  {opacity: 1; color: #FDE35E;}
  100% {opacity: 0; color: #10b395;}
}
@-webkit-keyframes blinkicon {  
  0%   {opacity: 0; color: #10b395;}
  25%  {opacity: 1; color: #FDE35E;}
  50%  {opacity: 0; color: #10b395;}
  75%  {opacity: 1; color: #FDE35E;}
  100% {opacity: 0; color: #10b395;}
}

@keyframes blinklabel {  
  0%   {opacity: 0; background-color: #EC180D;}
  25%  {opacity: 1; background-color: #fff;}
  50%  {opacity: 0; background-color: #EC180D;}
  75%  {opacity: 1; background-color: #fff;}
  100% {opacity: 0; background-color: #EC180D;}
}
@-webkit-keyframes blinklabel {  
  0%   {opacity: 0; background-color: #EC180D;}
  25%  {opacity: 1; background-color: #fff;}
  50%  {opacity: 0; background-color: #EC180D;}
  75%  {opacity: 1; background-color: #fff;}
  100% {opacity: 0; background-color: #EC180D;}
}
@media screen and  (min-width:600px) and (max-width:715px){
    .conversation_screen img, .conversation_screen_list img{width: 220px;}
}