/* ------------- Контейнер с адаптивными блоками------------- */
.masonry {
    margin: 1.5em 0;
    padding: 0;
    column-gap: 1.5em; /* Общее расстояние между колонками */
    font-size: .85em;
    -moz-column-gap: 1.5em; /* Расстояние между колонками для Firefox */
    -webkit-column-gap: 1.5em; /* Расстояние между колонками  для Safari, Chrome и iOS */
}

/* Элементы в виде плиток с содержанием */
.item {
    display: inline-block;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box; /* Изменения алгоритма расчета ширины и высоты элемента.*/
    -moz-box-sizing: border-box; /* Для Firefox */
    -webkit-box-sizing: border-box; /* Для Safari, Chrome, iOS иAndroid */
}

/* Стили картинок, видое и фреймов внутри адаптивных плиток */
img, iframe {
    1max-width: 100%;
    1height: auto;
    1display: block;
}

/* Стили ссылок внутри плиток */
.item a {
    text-decoration: none;
    color: #359CC6;
    margin: 0 10px;
}

    /* Стили ссылок при наведении */
    .item a:hover {
        color: #E88F00;
        border-bottom: 1px dotted #9F1D35;
    }

/* Медиа-запросы для различных размеров адаптивного макета */
@media only screen and (min-width: 300px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 500px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 1000px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1400px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}



.curved-hz-2 {
    position: relative;
    padding: 1em;
    margin: 2em 2px 4em;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

    .curved-hz-2:before,
    .curved-hz-2:after {
        content: "";
        position: absolute;
        z-index: -2;
    }

    .curved-hz-2:before {
        top: 0px;
        bottom: 0px;
        left: 10px;
        right: 10px;
        -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.6);
        -moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
        box-shadow: 0 0 15px rgba(0,0,0,0.6);
        -moz-border-radius: 100px / 10px;
        border-radius: 100px / 10px;
    }





.de .den, .de .denErr, .de .dene, .de .deneOn, .de .denem, .de .denem1, .de .denemErr, .de .deneme {
    position: absolute;
    left: 50%;
    top: 50%;
}

.de {
    position: relative;
    width: 240px;
    height: 240px;
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    background-color: transparent;
}

.den {
    position: relative;
    width: 210px;
    height: 210px;
    margin: -105px 0 0 -105px;
    border-radius: 100%;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);
    background: #df3341;
    background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));
    background: -webkit-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);
    background: linear-gradient(to right, #df3341 0%,#d4f355 50%,#61c0ec 100%);
    position: relative;
}

.denErr {
    position: relative;
    width: 210px;
    height: 210px;
    margin: -105px 0 0 -105px;
    border-radius: 100%;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);
    background: #df3341;
    background: -moz-linear-gradient(left, gray 0%, white 50%,black 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,black), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));
    background: -webkit-linear-gradient(left, gray 0%,#d4f355 50%,#61c0ec 100%);
    background: linear-gradient(to right, gray 0%,white 50%,silver 100%);
    position: relative;
}


.dene {
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    border-radius: 100%;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
    background: #f2f6f5;
    background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
    background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
}

.deneOn {
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    border-radius: 100%;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
    background: #f2f6f5;
    background: -moz-linear-gradient(top, gold 0%, #cbd5d6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, gold), color-stop(100%, #cbd5d6));
    background: -webkit-linear-gradient(top, gold 0%, #cbd5d6 100%);
    background: -o-linear-gradient(top, gold 0%, #cbd5d6 100%);
}

.denem {
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 100%;
    background: #cbd5d6;
    background: -moz-linear-gradient(top, white 0%, #f2f6f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
    background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
}

.denem1 {
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 100%;
    background: #cbd5d6;
    background: -moz-linear-gradient(top, red 0%, #f2f6f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(100%, #f2f6f5));
    background: -webkit-linear-gradient(top, red 10%, #f2f6f5 100%);
}

.denemErr {
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 100%;
    background: #cbd5d6;
    background: -moz-linear-gradient(top, silver 0%, #f2f6f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, gray), color-stop(100%, #f2f6f5));
    background: -webkit-linear-gradient(top, gray 10%, #f2f6f5 100%);
}



.deneme {
    padding: 3px 10px 0 10px;
    width: 120px;
    height: 137px;
    display: inline-block;
    margin: -70px 0 0 -70px;
    color: #555;
    text-shadow: 1px 1px 1px white;
    font-family: 'Dosis';
    font-size: 50px;
    font-weight: 400;
    text-align: center;
}

    .deneme span {
        font-size: 30px;
        font-weight: 200;
    }

    .deneme strong {
        position: absolute;
        right: 10px;
        top: 25px;
        font-size: 34px;
    }


.box {
    background:#FFF;
    padding: 10px;
}

.boxAlert {
    background:lemonchiffon;
    padding: 10px;
}

.boxWall {
    padding: 10px;
    height: 150px;
    -moz-border-radius: 20px / 20px;
    border-radius: 20px / 20px;
    border-width: 3px;
    border-style: solid;
    border-color:#f2f6f5;
}

.boxWallH {
    padding: 10px;
    -moz-border-radius: 20px / 20px;
    border-radius: 20px / 20px;
    border-width: 3px;
    border-style: solid;
    border-color:#f2f6f5;
}

.boxWallVirt {
    padding: 10px;
    height: 150px;
    -moz-border-radius: 20px / 20px;
    border-radius: 20px / 20px;
    border-width: 3px;
    border-style: solid;
    border-color:#359cc6;
}

.wallAlert {
    background:red;
    color: white;
    border-color: yellow;
    border-width: 3px;
    border-style: solid;
}

.wallNormalOff {
    background:#fff;
    text-shadow: 2px 2px 1px white;
    border-color:silver;
}

.wallNormalOn {
    background:floralwhite;
    border-color:red;
    text-shadow: 1px 1px 1px white;
}

.wallTimeOut {
    background:gainsboro;
    color:#555555;
    text-shadow: 3px 3px 3px white;
    border-color:white;
    border-width: 3px;
    border-style: solid;

}

.wallError {
    background:lightslategray;
    text-shadow: 3px 3px 3px black;
    color: white;
    border-color: gray;
    border-width: 3px;
    border-style: solid;
}



/*==================================================
 * Effect dev
 * ===============================================*/
.effectDev
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}


/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

a.button {
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: .5em 2em;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #FDBE33 #000 #D77206;
  border-radius: 6px;
  background: linear-gradient(#F3AE0F, #E38916) #E38916;
  transition: 0.2s;
} 
a.button:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
a.button:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }





.tempera{
    margin: 3px;
    text-shadow: 1px 1px 1px white;
    font-family: 'Dosis';
    font-size: 50px;
    font-weight: 500;
    text-align: center;
}

    .tempera span {
        font-size: 20px;
        font-weight: 200;
    }

    .tempera strong {
        position: absolute;
        right: 40px;
        top: 45px;
        font-size: 34px;
    }