body {
    margin: 0;
    font: 1em/1.5 Arial, Helvetica, sans-serif;
    background-color: #FFF;
}

.strip {
    background: #333;
    color: #fff;
    /* padding-bottom:0.2em; */

}


.strip p {
    text-align: left;
    font-size: 1.2em;
}

.cnt {
    max-width: 1400px;
    text-align: center;
}

.pad {
    padding-left: 5%;
    padding-right: 5%;
}

/* ----------------- MY -- -----------------------------------*/

.head {
    background: #FFF;
    color: #333;
    padding-left: 5%;
}


.container {
    width: 90%;
    margin: 2em auto;
    max-width: 1400px;
}

/*
p {
  text-align: left;
  margin: 0 0 1.5em 0; }

*/

h2 {
    margin-top: 0;
}


.main_img {

    width: 60%;
    overflow: hidden;
    height: 385px;
    text-align: right;
    display: inline-block;


}

.main_img img {
    position: relative;
    top: 0;

}


a:hover {
    color: #F60;
}

a.white {
    color: #FFF;
}

a.white:hover {
    color: #F60;
}

a.dark {
    color: #000;
}

a.dark:hover {
    color: #F60;
}

a.zoom img {

    transition: 1s;
}

a.zoom:hover img {

    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);

    transition: 3s;

}

.read_more {
    color: #F7F7F7;
    background-color: rgba(51, 51, 51, 0.8);
    padding: 7px 20px;
    cursor: pointer;
    display: inline-block;
    border-bottom: #CCC 2px solid;

    -webkit-box-shadow: inset -4px 0px 28px 3px rgba(0, 0, 0, 0.44);
    -moz-box-shadow: inset -4px 0px 28px 3px rgba(0, 0, 0, 0.44);
    box-shadow: inset -4px 0px 28px 3px rgba(0, 0, 0, 0.44);
}

.read_more:hover {
    border-color: #F60;
}


.main_h {
    display: block;
    position: absolute;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;

    margin-left: 3%;
    height: 385px;
    overflow: hidden;
    width: 54%;
    text-align: right;

}

.main_h h1 {
    display: inline;
    background-color: #F5F5F5;
    color: #333;
    font-size: 2em;
    vertical-align: bottom;
}

.main_h h1 a {
    color: #333;
    text-decoration: underline;
}

.main_h h1 a:hover {
    color: #F60;
}

.main_h h1:hover {
    background-color: #FFF;
    transition: 0.3s;
}

.main_h span.m_date {
    display: inline-block;
    color: #F5F5F5;
    margin-top: 80px;
    margin-bottom: 20px;
    padding: 3px 6px;
    background-color: rgba(102, 102, 102, 0.8)
}

.main_h span.descr {

    color: #CCC;

    display: block;
    margin-left: 28%;
    margin-top: 20px;
    padding: 5px;
    background-color: rgba(51, 51, 51, 0.8);
}


.phov {
    opacity: 0.8;
}

.phov:hover {
    opacity: 1;
    transition: 0.3s;
}


/*.middle { font-size:0.6em;}*/


h2 {
    font-size: 1.2em;
    line-height: 120%;
}


div.art_main {
    width: 38%;
    display: inline-block;
    vertical-align: top;
    /*background-color:#666666;*/
    height: 385px;

    margin-left: 2%;
    /*
    -webkit-box-shadow: inset 66px 0px 130px -5px rgba(0,0,0,0.44);
   -moz-box-shadow: inset 66px 0px 130px -5px rgba(0,0,0,0.44);
   box-shadow: inset 66px 0px 130px -5px rgba(0,0,0,0.44);
   */

    padding-left: 2%;
    z-index: 99;


}


div.art_main ul {
    margin: 0;
    padding: 0;
}

div.art_main ul li {
    list-style: none;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #EAEAEA;
    padding: 10px;
    color: #666;
    line-height: 130%;
}

div.art_main ul li img {
    float: left;
    margin-right: 10px;
}

div.art_main ul li img.banner {
    float: none !important;
}

div.art_main ul li span {
    display: table;
    min-height: 100px;
}

div.art_main ul li span a {
    font-size: 1.4em;
    display: inline-block;
    margin-bottom: 7px;
    line-height: 120%;
}


div.bp3-col-39-45prc {
    width: 39.45%;
    padding-left: 2.8%;
}


/* -- Begin grids
------------------------------------------------------------- */
/* -- Use this wrapper if you want to divide your columns -- */
.divide-bottom {
    border-bottom: 1px solid #ccc;
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
}

/* -- Use this wrapper if you want to block-out a column with padding 
Taken from http://csswizardry.com/2011/10/the-island-object/) -- */
.island {
    padding: 1.5em;
    background-color: #ececec;
}

.island :last-child {
    margin-bottom: 0;
}

/* -- Setup grids with base class -- */
.grid-wrap {
    margin-left: -3em;
    overflow: hidden;
    clear: both;
}

.grid-col {
    float: left;
    padding-left: 3em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.large-gutter {
    margin-left: -6em;
}

.large-gutter .grid-col {
    padding-left: 6em;
}

.half-gutter {
    margin-left: -1.5em;
}

.half-gutter .grid-col {
    padding-left: 1.5em;
}

.no-gutter {
    margin-left: 0;
}

.no-gutter .grid-col {
    padding-left: 0;
}

.reset-gutter {
    margin-left: -3em;
}

.reset-gutter .grid-col {
    padding-left: 3em;
}

ul.grid-wrap,
ol.grid-wrap {
    padding-left: 0;
    list-style: none;
}

li.grid-col {
    margin-left: 0;
    margin-bottom: 0;
}

.col-full,
.col-set-full .grid-col {
    width: 100%;
}

.col-one-half,
.col-set-one-half .grid-col {
    width: 50%;
}

.col-one-third,
.col-set-one-third .grid-col {
    width: 33.333%;
}

.col-one-quarter,
.col-set-one-quarter .grid-col {
    width: 25%;
}

.col-two-thirds {
    width: 66.666%;
}

.col-three-quarters {
    width: 75%;
}

.error-from {
    color: #F00 !important;
    border: #F00 1px solid !important;
}


/* -- Breakpoint (.bp1)
------------------------------------------------------------- */
@media only screen and (min-width: 30em) {
    .bp1-col-full,
    .bp1-col-set-full .grid-col {
        width: 100%;
    }

    .bp1-col-one-half,
    .bp1-col-set-one-half .grid-col {
        width: 50%;
    }

    .bp1-col-one-third,
    .bp1-col-set-one-third .grid-col {
        width: 33.333%;
    }

    .bp1-col-one-quarter,
    .bp1-col-set-one-quarter .grid-col {
        width: 25%;
    }

    .bp1-col-two-thirds {
        width: 66.666%;
    }

    .bp1-col-three-quarters {
        width: 75%;
    }
}

/* -- Breakpoint 2 (.bp2)
------------------------------------------------------------- */
@media only screen and (min-width: 48em) {
    .bp2-col-full,
    .bp2-col-set-full .grid-col {
        width: 100%;
    }

    .bp2-col-one-half,
    .bp2-col-set-one-half .grid-col {
        width: 50%;
    }

    .bp2-col-one-third,
    .bp2-col-set-one-third .grid-col {
        width: 33.333%;
    }

    .bp2-col-one-quarter,
    .bp2-col-set-one-quarter .grid-col {
        width: 25%;
    }

    .bp2-col-two-thirds {
        width: 66.666%;
    }

    .bp2-col-three-quarters {
        width: 75%;
    }
}

/* -- Breakpoint 3 (.bp3)
------------------------------------------------------------- */
@media only screen and (min-width: 60em) {
    .bp3-col-full,
    .bp3-col-set-full .grid-col {
        width: 100%;
    }

    .bp3-col-one-half,
    .bp3-col-set-one-half .grid-col {
        width: 50%;
    }

    .bp3-col-one-third,
    .bp3-col-set-one-third .grid-col {
        width: 33.333%;
    }

    .bp3-col-one-quarter,
    .bp3-col-set-one-quarter .grid-col {
        width: 25%;
    }

    .bp3-col-two-thirds {
        width: 66.666%;
    }

    .bp3-col-three-quarters {
        width: 75%;
    }


}