@charset "UTF-8";



*,
::after,
::before {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    border: 0;
}


::-moz-selection {
    background: rgba(16, 93, 28, 0.5);
    color: #fff;
    text-shadow: none;
}

::selection {
    background: rgba(16, 93, 28, 0.5);
    color: #fff;
    text-shadow: none;
}

.wrapper {
    padding: 10px
}

footer {
    margin: 20px auto;
    padding: 0.3em;
    color: #4d4d4d;
    text-align: center
}

footer a {
    color: #c3c3c3;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
}

footer a:hover {
    color: #7deb6f;
}



.box-thumb {
    width: 95%;
    max-width: 648px; 
    margin: 0 auto; /* center */
    padding: 0;
    overflow: hidden;
    position: relative; 
    cursor: pointer;

    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.box-thumbYesNo {
    width: 100%;
    max-width: 648px; 
    margin: 0 auto; 
    padding: 0;
    overflow: hidden;
    position: relative; 
    cursor: pointer;

    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.box-thumb_qrt {
    width: 95%;
    max-width: 400px;
    max-height: 400px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    position: relative;
    cursor: pointer;

    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.box-thumb_400 {
    height: 400px;
    max-height: 400px;
    width: auto;
    max-width: 500px;
    margin: 0 auto; /* center */
    padding: 0;
    overflow: hidden;
    position: relative; 
    cursor: pointer;

    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.box-thumb_400x600 {
    height: 400px;
    max-height: 400px;
    width: auto;
    max-width: 600px;
    margin: 0 auto; /* center */
    padding: 0;
    overflow: hidden;
    position: relative; 
    cursor: pointer;

    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.box-thumb_400x700 {
    height: 400px;
    max-height: 400px;
    width: auto;
    max-width: 700px;
    margin: 0 auto; /* center */
    padding: 0;
    overflow: hidden;
    position: relative; 
    cursor: pointer;

    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

/*
.img_question{width: 100px ;}
.cimg_sortable {
width: 90%;
height:auto;
}

.cimg_sortable {
width: 140%;
height:auto;
}
*/

@media only screen and (max-height: 590px)
{
 .img_question{width: 200px ;}
 .img_questionYesNo{width: 300px ;}
 .img_questionYesNo2{width: 300px ;}
}

@media only screen and (min-height: 591px) and (max-height: 620px)
{
 .img_question{width: 220px ;}
 .img_questionYesNo{width: 450px ;}
 .img_questionYesNo2{width: 380px ;}
}

@media only screen and (min-height: 621px) and (max-height: 680px)
{
 .img_question{width: 250px ;}
 .img_questionYesNo{width: 510px ;}
 .img_questionYesNo2{width: 510px ;}
}

@media only screen and (min-height: 681px) and (max-height: 1000px)
{
 .img_question{width: 270px ;}
 .img_questionYesNo{width: 550px ;}
 .img_questionYesNo2{width: 550px ;}
/* .cimg_sortable {width: 10px;height:auto;} */ 

 
}


@media only screen and (min-width:300px) and  (max-width: 800px)
{
 .cimg_sortable {width: 150px;height:auto;}  
}

@media only screen and (min-width:801px) and  (max-width: 1000px)
{
 .cimg_sortable {width: 200px;height:auto;}  
}

@media only screen and (min-width:1001px) and  (max-width: 1250px)
{
 .cimg_sortable {width: 250px;height:auto;}  
}

@media only screen and (min-width:1251px) and  (max-width: 1300px)
{
 .cimg_sortable {width: 300px;height:auto;}  
}

@media only screen and (min-width:1301px) and  (max-width: 1900px)
{
 .cimg_sortable {width: 350px;height:auto;}   
}
    
    
    
@media only screen and (max-width: 1100px)
{
    
/*.cimg_sortable {width: 350px;height:auto;}*/
   
 .box-thumb {
    width: 100%;
    max-width: 648px; /* отзывчивые размеры  (опционально) */
    margin: 0 auto; /* распологаем по центру */
    padding: 0;
    overflow: hidden;
    position: relative; /* относительное позиционирование */
    cursor: pointer;
/* Внешняя тень блока с изображением */
    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

 .box-thumbYesNo {
    width: 100%;
    max-width: 648px; /* отзывчивые размеры  (опционально) */
    margin: 0 auto; /* распологаем по центру */
    padding: 0;
    overflow: hidden;
    position: relative; /* относительное позиционирование */
    cursor: pointer;
/* Внешняя тень блока с изображением */
    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

    .box-thumb_qrt {
        width: 95%;
        max-width: 400px;
        max-height: 400px;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        position: relative;
        cursor: pointer;

        -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

}



@media only screen and (max-width: 1000px) and (orientation: portrait)
{
    .img_question{width: 100% ;}
    .img_questionYesNo{width: 400px ;}
    .img_questionYesNo2{width: 400px ;}
    .cimg_sortable {width: 90%;height:auto;}
    
   .box-thumb {
    width: 100%;
     /* отзывчивые размеры  (опционально) */
    margin: 0 auto; /* распологаем по центру */
    padding: 0;
    overflow: hidden;
    position: relative; /* относительное позиционирование */
    cursor: pointer;
/* Внешняя тень блока с изображением */
    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

    .box-thumb_qrt {
       /* width: 100%;*/
        height:  800px;
        /* отзывчивые размеры  (опционально) */
        margin: 0 auto; /* распологаем по центру */
        padding: 0;
        overflow: hidden;
        position: relative; /* относительное позиционирование */
        position: relative; /* относительное позиционирование */
        cursor: pointer; border: 1px solid #000;
        /* Внешняя тень блока с изображением */
      /*  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);*/
    }

/* 
 * Стили изображения внутри 
 * родительского контейнера 
*/
.box-thumb img {
    max-width: 100%;
	width: 100%;
    height: auto;
    display: block;
/* трансформация - реальный масштаб картинки */
    -webkit-transform: scale(1);
    transform: scale(1);
/* время исполнения трансформации */
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}

   .box-thumbYesNo {
    width: 100%;
     /* отзывчивые размеры  (опционально) */
    margin: 0 auto; /* распологаем по центру */
    padding: 0;
    overflow: hidden;
    position: relative; /* относительное позиционирование */
    cursor: pointer;
/* Внешняя тень блока с изображением */
    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

/* 
 * Стили изображения внутри 
 * родительского контейнера 
*/
.box-thumbYesNo img {
    max-width: 100%;
	width: 100%;
    height: auto;
    display: block;
/* трансформация - реальный масштаб картинки */
    -webkit-transform: scale(1);
    transform: scale(1);
/* время исполнения трансформации */
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}


}