#ho3 {
  width: 100%;
  height: 100vh;
  position: relative;
}

	#ho3:after {
	  content: "";
	  display: table;
	  clear: both;
	}

  .com-sec {
    width: 25%;
    height: 100%;
    float: left;
  }
  
  .quote-s,
  .quote-b {
    width: 80%;
    padding: 0;
    margin: 0 auto;
    font-size: 12px;
    text-align: center;
  }

    #com-1 {
      background-image: url('../img/rev-1.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 25%;
      width: 100%;
    }

    #com-2 {
      background-image: url('../img/rev-2.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 25%;
      width: 100%;
    }

    #com-3 {
      background-image: url('../img/rev-3.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 50%;
      width: 100%;
    }

    #com-4 {
      background-image: url('../img/rev-4.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 50%;
      width: 100%;
    }

    #com-5 {
      background-image: url('../img/rev-5.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 50%;
      width: 100%;
    }

    #com-6 {
      background-image: url('../img/rev-6.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 25%;
      width: 100%;
    }

    #com-7 {
      background-image: url('../img/rev-7.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 50%;
      width: 100%;
    }

    #com-8 {
      background-image: url('../img/rev-8.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 25%;
      width: 100%;
    }

    #com-9 {
      background-image: url('../img/rev-9.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 50%;
      width: 100%;
    }

    #com-10 {
      background-image: url('../img/rev-10.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 25%;
      width: 100%;
    }

    #com-11 {
      background-image: url('../img/rev-11.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 25%;
      width: 100%;
    }

    #col-1 {
      background: rgba(236, 41, 123, .4);
    }

    #col-2 {
      background: rgba(144, 39, 142, .4);
    }

    #col-3 {
      background: rgba(132, 195, 65, .4);
    }

    #col-4 {
      background: rgba(18, 162, 206, .4);
    }

    #col-5 {
      background: rgba(246, 146, 30, .4);
    }

    #col-6 {
      background: rgba(132, 195, 65, .4);
    }

    #col-7 {
      background: rgba(101, 45, 144, .4);
    }

    #col-8 {
      background: rgba(236, 41, 123, .4);
    }

    #col-9 {
      background: rgba(144, 39, 142, .4);
    }

    #col-10 {
      background: rgba(18, 162, 206, .4);
    }

    #col-11 {
      background: rgba(245, 235, 51, .4);
    }

    .com-name {
      width: 100%;
      padding: 0;
      margin: 0;
      font-size: 14px;
    }

    .com-col {
      width: 100%;
      height: 100%;
      text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
    }

    .com-s {
      height: 25%;
      width: 100%;
      text-align: center;
      color: white;
      text-shadow: 3px 3px 7px #333;
    }

    .com-b {
      height: 50%;
      width: 100%;
      text-align: center;
      color: white;
      text-shadow: 3px 3px 7px #333;
    }

    .star {
      width: 15px;
      filter: drop-shadow(3px 3px 7px #333);
    }


/* 481 - 768 */

@media screen and (min-width: 481px) and (max-width: 768px) {

	#ho3 {
		height: 200vh;
	}

	  .com-sec {
	    width: 50%;
	    height: 50%;
	  }

}


/* =< 500 on height */

@media screen and (max-height: 500px) {

	#ho3 {
		height: 1200px;
	}

}


/* 320 - 480 */

@media screen and (min-width: 320px) and (max-width: 480px) {
	
	#ho3 {
		height: 200vh;
	}

	  .com-sec {
	    width: 50%;
	    height: 50%;
	  }
	  
	    .star {
	      width: 10px;
	    }
	
	    .com-name {
		    font-size: 12px;
	    }
	
	  .quote-s,
	  .quote-b {
	    width: 90%;
	    font-size: 10px;
	  }
	
}


/* =< 319 */

@media screen and (max-width: 319px) {
	
}