@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,900);
html, body {
  height: 100%;
  font-family: 'Roboto', sans-serif;
  background-color: #303030;
}

    #item {
        display: block;
        position: relative;
        width: 31%;
        height: 40%;
        background-color: orange;
        border-style: none;
        border-left: 10px double #303030;
        color: #303030;
        margin: 10px;
    }
    #item:nth-child(odd) {float: left;}
    #item:nth-child(even) {float: left;}

    #left, #right {
        position: relative;
        height: 29.5%;
/*        float: left;*/
  }
  #left {
/*        padding-left: 2.4%;*/
padding-top: 5px;
      float: left;
      width: 29%;
      /* background: none; */
  }
  #left img {
      width: 90%;
  }
    #right {
        display: inline-block;
/*        padding-right: 2.4%;*/
        float: right;
        width: 70%;
    }
    #bottom {
        display: inline-block;
        position:static;
        padding-top: 20px;
/*
        padding-left: 2.4%;
        padding-right: 2.4%;
*/
    /*    border-top: 10px double #313131;*/
        width: 98%;
        height: 68.5%;
    }
@media screen and (min-width: 800px) and (max-width: 1200px){
    #item {
        display: block;
        position: relative;
        width: 47.0%;
        height: 40%;
        background-color: tomato;
        border-style: none;
        border-left: 10px double #303030;
        color: #303030;
        margin: 10px;
    }
    #item:nth-child(odd) {float: left;}
    #item:nth-child(even) {float: right;}

    #left, #right {
        position: relative;
        height: 29.5%;
    }
    #left {
        padding-left: 2.4%;
        float: left;
        width: 29%;
    }
    #left img {
        width: 80%;
    }
    #right {
        display: inline-block;
        padding-right: 2.4%;
        float: right;
        width: 70%;
    }
    #bottom {
        display: inline-block;
        position:static;
        padding-top: 30px;
        padding-left: 2.4%;
        padding-right: 2.4%;
    /*    border-top: 10px double #313131;*/
        width: 98%;
        height: 68.5%;
    }
}

@media screen and (max-width: 800px) {
    #item {
        display:table;
        position:inherit;
        width: 97%;
        min-height: 299px;
        height: 20%;
        background-color: orangered;
        border-style: none;
        border-left: 10px double #303030;
        color: #303030;
        margin: 10px;
    }
    #left, #right {
        position: relative;
        height: 29.5%;
    }
    #left {
        padding-left: 2.4%;
        float: left;
        width: 29%;
    }
    #left img {
        width: 60%;
    }
    #right {
        display: inline-block;
        padding-right: 2.4%;
        float: right;
        width: 70%;
    }
    #bottom {
        display: inline-block;
        position:static;
        padding-top: 30px;
        padding-left: 2.4%;
        padding-right: 2.4%;
    /*    border-top: 10px double #313131;*/
        width: 98%;
        height: 68.5%;
    }
}