@import url('/components/responsive/css/responsive.css');
@import url('/components/responsive/css/centurion-grid_v2.min.css');

/* -------------------------------------------------

    Esri General Products Responsive Stylesheet

    Last Modified: July 15, 2013

---------------------------------------------------- */


@media only screen and (min-width: 200px) and (max-width: 920px) {
  
  #matrixLayout,
  .item {
    min-width: 100%;
  }
  #matrixLayout {
    margin-top: 20px;
  }
  .item {
    background-position: center left;
  }
  .item .content {
    width: 100%;
  }
    
  /* Responsive Images */
  img {
    height: auto;
    width: 100%;
  }
  
  /* Add Border Box to an Element */
  .itemList li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  /* Products Alphalist */
  div.filterContainer {
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
  }
  .filterContainer .search_input,
  .filterContainer select {
    width: 120px !important;
  }
  
}


/*  CUSTOM MOBILE QUERIES - 760 to 200 */
@media screen and (min-width: 200px) and (max-width: 760px) {
  
  /* =========================
      ArcGIS - Only 
  ========================= */
  .recentNews p { margin-top: 5px; }
  .useCase .useItemImg img,
  .useCase .useItemContent {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }
  
  .useCase .useItemContent {
    margin: 0;
  }
  
  
  /* =========================
      Carousel Fixes 
  ========================= */
  .jcarousel-skin-tango {
		width: 100%;
	}
	.jcarousel-skin-tango .jcarousel-container-horizontal,
	.jcarousel-skin-tango .jcarousel-clip-horizontal {
		width: 92%;
	}
	.jcarousel-skin-tango .jcarousel-item { width: 25%; }

  #matrixLayout,
  #matrixLayout #categoriesWidth,
  #matrixLayout .item,
  .item,
  .item .content {
    background-position: top left;
    height: 280px;
    min-width: 100% !important;
    width: 100% !important;
  }
  .item .contentWidth {
    left: 0 !important;
    margin: 0 2%;
    top: 20px;
    width: 96% !important;
  }
  #sectionTopper_left #topperText #topper_v_align h1 {
    left: 10px !important;
    top: 30px;
    width: 250px;
  }
  
  
  /*  Products Gateway  -  /products  */
  .productGradient {
    background: #E4F2F5 !important;
  }
  
  /*  Products Alpha List  -  /products/products-alpha  */
  div.filterContainer {
    max-width: 99% !important;
    min-width: 99% !important;
    width: 99% !important;
  }
  .filterContainer .search_input,
  .filterContainer select {
    width: 80px !important;
  }
  .filterContainer .filters {
    margin-right: 0 !important;
  }
  .filterContainer .expandCollapse {
    margin-left: 9px;
  }
  
  
  /*  ArcGIS - /software/arcgis/  */
  .recentNews p {
    float: none !important;
    margin-top: 0 !important;
  }
  .container_12 img,
  .itemList li {
    height: auto;
    width: 100%;
  }
  
}


/*  CUSTOM TABLET QUERIES - 920 to 761 */
@media only screen and (min-width: 761px) and (max-width: 920px) {
  
  #matrixLayout,
  #matrixLayout #categoriesWidth,
  #matrixLayout .item,
  .item {
    min-width: 100% !important;
    width: 100% !important;
  }

  
  /*  ArcGIS - /software/arcgis/  */
  .container_12 img,
  .itemList li {
    height: auto;
    width: 100%;
  }

}



#topperText h2,
#topperText h1 {
  font-size: 24px !important;
}

/* =========================
    ArcGIS - Only 
========================= */
ul.itemList li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}