/*Mobile Devices*/
@media only screen and (min-width: 200px) and (max-width: 780px) 
{
   .social {
     position:absolute;
    right:10px;
    padding-top:60px;
   }
   .logoarea {
    text-align:center;
   }
   .logo {
       margin-top:0px;
       max-width:250px;
       max-height:150px;
     
    }
   .carousel-content {
        display:none
    }
  .carousel-box {
    margin-bottom: 0;
    padding: 0;
    background-color:transparent;
    background: rgba(0,0,0,0.2);
}
     #divContentSection img {
        max-width:98%;
        height:auto;
        margin-bottom:10px;
    }

    /* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
        width:100%;
        border:solid 0px #e9e9e9
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 0px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #eee; 
		position: relative;
	    padding-top:10px;
	}

    td img {
        max-width:250px
    }
	    
    td:before { 
	    /* Now like a table header */
	    position: absolute;
	    /* Top/left values mimic padding */
	    top: 16px;
	    left: 6px;
	    width: 50%; 
	    padding-right: 5px; 
	    white-space: nowrap;
    }
}
@media only screen and (min-width: 240px) and (max-width: 600px) {
    /*disable carousel text when in mobile*/
  
   .ProductAreaContainer {
    -moz-column-count: 1;
    -moz-column-gap: 10px;
    -webkit-column-count: 1;
    -webkit-column-gap: 10px;
    column-count: 1;
    column-gap: 10px;
    }
    .btn {margin-top:3px}
}
/*Other Devices*/
@media only screen and (min-width:481px) {

}

@media screen and (min-width:1200px) {
    .box:after {
        content: '';
        display: table;
        clear: both;
    }

      .carousel-box:after {
        content: '';
        display: table;
        clear: both;
    }
}