@media screen and (min-width : 1024px) {
    #wrapper  {
        background-image: url("../img/tapet_cut.jpg");
        background-position: 50%  0%;
        background-position-y: 0px;
        background-size: auto 1157px;
        background-repeat: no-repeat;

    }
}

.container .left img {
    width: 13px;
    margin-top: -2px;
}

.container .right img {
    width: 60px;
    margin-top: 10px;
}
.container .center img {
    width: 125px;
    margin-top: 11px;
}

.this_mobil{
    display: none;
}
.this_web{
    display: block;
}
@media screen and  (max-width : 1024px) {
    .this_mobil{
        display: block;
    }
    .this_web{
        display: none;
    }
}
@media screen and (min-width : 720px) and (max-width : 1024px) {
    .container .left img {
        width: 33px;
        margin-top: 3px;
    }

    .container .right img {
        width: 60px;
        margin-top: 10px;
    }
    .container .center img {
        width: 100px;
        margin-top: 11px;
    }
}
@media screen and (min-width : 640px) and (max-width : 720px) {

    .container .left img {
        width: 33px;
        margin-top: 3px;
    }

    .container .right img {
        width: 60px;
        margin-top: 10px;
    }
    .container .center img {
        width: 100px;
        margin-top: 11px;
    }

}
@media screen and (min-width : 480px) and (max-width : 640px) {
    .container .left img {
        width: 33px;
        margin-top: 8px;
    }

    .container .right img {
        width: 60px;
        margin-top: 15px;
    }
    .container .center img {
        width: 100px;
        margin-top: 16px;
    }
}
@media screen and (min-width : 360px) and (max-width : 480px) {
    .container .left img {
        width: 33px;
        margin-top: 3px;
    }

    .container .right img {
        width: 60px;
        margin-top: 10px;
    }
    .container .center img {
        width: 100px;
        margin-top: 11px;
    }
}
@media screen and (min-width : 320px) and (max-width : 360px) {
    .container .left img {
        width: 33px;
        margin-top: 3px;
    }

    .container .right img {
        width: 60px;
        margin-top: 10px;
    }
    .container .center img {
        width: 80px;
        margin-top: 11px;
    }
}



input{
    text-align: center;
}
.ngdialog-overlay{

    background-color: #172f44 !important;
    opacity: 0.6 !important;
}
textarea:focus, input:focus{
    outline: 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.another_share_button{
    display: none;
}
h1{

    font-family: 'ReformaNarrowMedium';
    font-size:68px;
    padding: 0px;

    width: 80%;
    text-align: center;
    margin: 0 auto;
    font-weight: normal;
}
h5 {
    font-size: 32px;
    padding: 0px;
line-height: 1em;
    width: 45%;
    text-align: center;
    margin: 0 auto;
}
.secound_fotter ,.tree_fotter{
    font-family:  sans-serif ;
    font-size: 13px;
}

.view1_start_button,.share_button_img,.continue_to_next_qustion ,.start_from_begging ,.first_prat_into_header div ,.second_prat_into_header div ,.artical_text
,.view1_footer a  ,.first_part_header div ,.ngdialog-content div{
    cursor: pointer;
}


/* entypo8**************** hide fro, share button********************************************* */
.reddit ,.pinterest ,.linkedin{

    display: none !important;
}

/* entypo8************************************************************* */




.sb-social ul li:before{
    margin-left: 30px !important;
    left: 0px; !important;
}
.sb-social ul li:after{
    margin-left: 30px !important;
    left: 0px; !important;
}
/* entypo8************************************************************* */
body{
    direction: rtl;

// font-family: 'ReformaNarrowMedium' !important;
}

.progress.vertical{
    height: 300px !important;
}
.progress-bar{
    font-size: 30% !important;
}
.progress.vertical .bar {
    -webkit-transition: height 2s ease-in-out;
    -moz-transition: height 2s ease-in-out;
    -ms-transition: height 2s ease-in-out;
    -o-transition: height 2s ease-in-out;
    transition: height 2s ease-in-out;
}
.scound_part_view1_page{

    background-image: url("../img/secound_part_backround.png");
    background-repeat: no-repeat;
    width:5%;
    float: right;

    height: 762px;
}

.share_by_email, .share_by_google, .share_by_facebook_genral, .share_by_twitter, .share_by_whatsapp {
    margin-bottom: 10px;
    width: 20%;
    height: 160px;
    display: inline-block;
    background-size: 135px 142px !important;
}



.share_by_email:hover {
    background-image: url('../img/share_mb.png');
}

.share_by_email {
    background:transparent url('../img/share_mw.png') center top no-repeat;
}

.share_by_google:hover {
    background-image: url('../img/share_gb.png');
}

.share_by_google {
    background:transparent url('../img/share_gw.png') center top no-repeat;
}
.share_by_facebook_genral:hover {
    background-image: url('../img/share_fb.png');
}

.share_by_facebook_genral {
    background:transparent url('../img/share_fw.png') center top no-repeat;
}
.share_by_twitter:hover {
    background-image: url('../img/share_tb.png');
}

.share_by_twitter {
    background:transparent url('../img/share_tw.png') center top no-repeat;
}

.share_by_whatsapp:hover {
    background-image: url('../img/share_wb.png');
}

.share_by_whatsapp {
    background:transparent url('../img/share_ww.png') center top no-repeat;
}

.ngdialog{
    height: 1800px;
}

.ngdialog_pop_up .ngdialog-content {
    width: 55% !important;
    background: black !important;
    color: #b1b1b1 !important;
    position: fixed !important;
    top:50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%,-50%) !important;
    -ms-transform: translate(-50%,-50%) !important;
    transform: translate(-50%,-50%) !important;
    padding: 1% !important;
    text-align: center;

}




.ngdialog_pop_up_share .ngdialog-content {
    background: transparent !important;
    color: #b1b1b1 !important;
    text-align: center;
    position: absolute;
    height: 500px;
    width: 224px;
    margin: 0px;
    top: 197px;

    -ms-transform: translate(-50%,-50%) !important;

    left: 50% !important;
    -webkit-transform: translateX(-50%) !important;
    -ms-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
}

.pop_up_view1_share_button .close_the_share_buttom {
    font-family: "ReformaNarrowRegular";
    margin-top: 20px;
    font-size: 27px;
    border: 2px solid;
    border-radius: 25px;
    background: #57C4C4 !important;
    width: 50%;
    /* margin-right: 32%; */
    color: white !important;
    margin: 0 auto;
    text-decoration: none;
}
.pop_up_view1_share_button .close_the_share_buttom:hover{
    text-decoration: underline;
}

.ngdialog_pop_up .ngdialog-content:hover{
    background-color: white !important;
}
.ngdialog_pop_up .ngdialog-content .pop_up_view1 .pop_up_view1_text  {
    color: #7A7B7D;
    text-align: center;
    margin-bottom: 3%;
    font-size: 40px;
}
.ngdialog_pop_up .ngdialog-content .pop_up_view1 .pop_up_view1_buttom {
    border: 2px solid;
    border-radius: 25px;
    background: #57C5C2 !important;
    color: white !important;
    font-size:25px;
    padding: .2%;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    width: 40%;
    margin-right: 30%;
    border: 6px double;

}
.ngdialog_pop_up .ngdialog-content .pop_up_view1 .pop_up_view1_buttom:hover {
    background: #3AA8A7 !important;
}
.view1_page{
    max-width: 960px;
    margin-right: 12px;
    margin-left: 12px;
    margin: auto;
    background-size: 100%;
    /*
     background-image: url("../img/conteiner_bg.png");
    */

    background-repeat: no-repeat;
    text-align: center;

}
.view1_page_first_div{
    background-color: white;
    padding: 0px;
/*
max-width: 750px;
 */
margin:auto ;
}
.view1_banner{
margin-bottom: 1%;
}
.view1_banner img {
width: 100%;
height: 80px ;
}
.view1_first_header{

text-align: center;
width: 90%;
margin-right: 5%;
margin-left: 5%;
}
.view1_first_header .view1_first_header1 {
float:right;
display: inline;
}
.view1_first_header .view1_first_header2 {
display: inline;
}
.view1_first_header .view1_first_header2 img{
width: 95px !important;
}
.view1_first_header .view1_first_header1 img {
width: 80px;
}
.view1_first_header .view1_first_header3 {
float:left;
display: inline;
}
.view1_first_header .view1_first_header3 img {
width: 20px;
display: inline;
}
.view1_my_current_age_is{
margin-bottom: 20px;
margin-top: 20px;
font-size: 55px;
color: #045167;
}
#my_pop_up_age{
display: inline ;
}
.view1_first_header .view1_first_header3 span {
float: left;
display: inline;
}
.view1_start_button{
display: inline;
padding: 2.5%;
padding-left: 5%;
padding-right: 5%;
border: 1px solid;
border-radius: 80px;
text-align: center;
color: #FFFFFF;
width: 59%;
background-color: #a4a4a4;

border: 6px double;
}
.share_button_img{
font-family: "ReformaNarrowRegular";
background-color:#56C3C3 ;
padding: 0px;
padding-left: 8%;
padding-right: 8%;

border-radius: 25px;
color:#FFFFFF ;
font-size: 22px;
border: 6px double;
border-color: #FFFFFF;
float: left;
}
.share_button_img:hover{

    background-color:#3AA8A7 ;

}
.share_button_img img{
width: 15px;
height: auto;
margin-left: 5px;
}
.view1_start_button .view1_start_button_img{
text-align: left;
display: inline;
margin-right: 10px;
}
.view1_start_button .view1_start_button_img img{
width: 20px;
}
.view1_start_button .view1_start_button_text{
display: inline;
text-align: right;
font-size: 55px;
vertical-align: middle;



}

.first_fotter{
font-size: 21px;
font-family: "ReformaNarrowRegular";
}


.clear_all{
clear: both;
}
.view1_cake{
margin-top: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
.view1_cake img{
width:80%;
display: inline;
}
.view1_footer{
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-color: #d3d3d3;
padding-top: 1%;
padding-bottom: 1%;
    margin-top: 0px;
}
.view1_footer .view1_footer_img1{
width: 120px;
margin-right:1%;
margin-left:1%;
padding-top: 13px;
}
.view1_footer .view1_footer_img2{
width: 120px;
margin-right:1%;
margin-left:1%;
}
.view1_footer .view1_footer_img1:hover{
background-color:#E0E0E0 ;
}
.view1_footer .view1_footer_img2:hover{
background-color:#E0E0E0 ;
}
@media screen and (max-width : 450px) {
.view1_first_header .view1_first_header1 img {
   width: 50px;
}
.view1_first_header .view1_first_header2 img {
   width: 70px !important;
}




}
.share_by_whatsapp    {

display: none;


}
@media screen and (max-width : 720px) {
    .view1_footer{

        margin-top: 30px;
    }
    .ngdialog_pop_up .ngdialog-content .pop_up_view1 .pop_up_view1_text  {

        font-size: 37px;
    }
.share_button_img {
   margin-top: 20px !important;
   float: none;
   margin: 0 auto;
   width: 100px;
}
.ngdialog_pop_up_share .ngdialog-content{
   top: 100px;
}

.ngdialog_pop_up .ngdialog-close ,.ngdialog.ngdialog-theme-default .ngdialog-close{
   display: none;
}

.share_by_email , .share_by_facebook_genral  , .share_by_whatsapp {
   margin-bottom: 10px;
   width: 80px;
   height: 142px;
   display: block;
   background-size: 60px 60px !important;
   margin-right: 43%;

}

.share_by_google  , .share_by_twitter  {

   display: none;


}

.start_from_begging{
   float: none;
   max-width: 80%;

   text-align: center;
   font-size: 20px;
}

}

#my_age_input{
border: solid 2px;
color: #57C4C4;
width: 70px;
border-radius: 9px;
}
@media screen and (min-width : 800px) {
.view1_page{
   padding-top: 2%;
}

}


@media screen and (min-width : 720px) and (max-width : 1080px) {



}



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



}





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


}





@media screen and (min-width : 720px)  {

.ngdialog_pop_up_share .ngdialog-content {

   width: 680px;

}

.pop_up_view1_share_button .close_the_share_buttom {

   width: 20%;

}
}

@media screen and (max-width : 720px) {
h5{
  width: 100%;
}

.the_share_div{
   float: right;
   margin-left: auto ;
   margin-right: auto ;

   width: 100%;
   margin-bottom: 10px;


}
.view1_start_button{
   padding: 2%;
   padding-right: 4%;
   padding-left: 4%;
}

.view1_my_current_age_is span{
   display: block;
   margin-bottom: -10px;
}
.view1_page_first_div{
   padding-right: 5%;
   padding-left: 5%;
}
.view1_footer{
   border-bottom-style: none;
   border-width:1px;
}
.all_fotter_text{

   display: none;
}

.the_title_of_the_page{
   width: 100%;
   display: block;
}


.view1_footer{
   font-size: 11px;
}






}


@media screen and (min-width : 720px) and (max-width : 1080px) {

#my_age_input{
   font-size: 55px;
}
}

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


}

@media screen and (min-width : 360px) and (max-width : 480px) {
    .ngdialog_pop_up .ngdialog-content .pop_up_view1 .pop_up_view1_text {

        font-size: 35px;
    }

.share_button_img {

   font-size: 20px;

}
.share_button_img img {
   width: 12px;

}
}

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

.ngdialog_pop_up_share .ngdialog-content {

   left: 25%;
}
}
@media screen and (max-width : 359px) {
    .container .left img {
        width: 33px;
        margin-top: 3px;
    }
    .ngdialog_pop_up .ngdialog-content .pop_up_view1 .pop_up_view1_text {

        font-size: 30px;
    }
    .pop_up_view1_share_button .close_the_share_buttom {

        font-size: 25px;

    }
.share_button_img {

   font-size: 20px;

}
.share_button_img img {
   width: 12px;

}
.ngdialog-content {
   max-height: 460px;
   overflow-y: auto;
}
.share_by_email, .share_by_google, .share_by_facebook_genral, .share_by_twitter, .share_by_whatsapp{
   width: 80px;
   height: 64px;
   display: block;
   background-size: 66px 63px !important;
}

.view1_my_current_age_is span{
   display: block;
   font-size: 30px;
   margin-bottom: -10px;
}

.ngdialog_pop_up_share .ngdialog-content {
   top: 80px;

}
.ngdialog_pop_up .ngdialog-content {

   top: 300px;
   left: 170px !important;
}


.the_title_of_the_page {

   font-size: 37px !important;
}

}


.container {
    width:100%;
    text-align:center;
    max-width: 960px;
}

.left {
    float:left;
    width:10%;
    margin-top: 0.5%;
    margin-left: 1%;
}

.center {
    display: inline-block;
    margin:0 auto;
    width:70%;
}

.right {
    float:right;
    width:10%;
}