/* List of samples */
div.sampleslist
{
   margin: 10px;
   display:flex;
   flex-wrap:wrap;
   justify-content:center;
}
div.singlesample
{
    flex:1;
    flex-basis:40%;
    min-width:400px;
    max-width:500px;
    margin:30px;
    display:flex;
    flex-wrap:nowrap;
}

/* Sample cards */
div.singlesample-image
{
   flex:1;
   flex-basis:30%;
   margin-right:10px;
}

div.singlesample-image.clickable
{
  cursor:pointer;
}

div.singlesample-image img
{
    padding:3px;
    border:3px solid transparent;
}

div.singlesample-image.clickable img:hover
{
    border:3px solid #356ad0;
    border-radius:5px;
}

div.singlesample-description
{
   flex:1;
   flex-basis:69%;
}

div.singlesample-description > h4
{
    margin:10px 0 0 0;
    font-size:20px;
    font-weight:bold;
    color:#888888;
}

div.singlesample-description > p
{
   text-align:left;
}

div.singlesample-description > p.categorytag
{
   margin-top:5px;
   margin-bottom:15px;
   font-weight:medium;
   font-size:14px;
   text-transform:uppercase;
   font-style:italic;
}

/* Tutorial cards */
div.tutorial
{
    flex-shrink:1;
    flex-grow:0;
    flex-basis:300px;
    margin:10px;
}

div.tutorial-image
{
  display:block;
  width:144px;
  height:144px;
  margin:auto;
  border:2px solid transparent;
  border-radius:5px;
  padding:0px;
}

div.tutorial-image.clickable {
  cursor:pointer;
}

div.tutorial-image div.tutorial-image-circle
{
    width:110px;
    height:110px;
    padding:0;
    border-radius:55px;
    background-color:#0071C5;
    margin:15px;
}

div.tutorial-image img
{
    width:110px;
    height:110px;
    margin:0;
    padding:15px;
}

div.tutorial-image.clickable:hover
{
    border:2px solid #356ad0;
    border-radius:5px;
}

div.tutorial-description, p.tutorial-description
{
    text-align:center;
}

div.tutorial-description > h4
{
    margin:10px 0 0 0;
    font-size:21px;
    font-weight:bold;
    color:#222222;
}


/* Hardware cards */
.padding-images {
   padding-left:20px;
   padding-right:20px;
   display:inline-block;
   min-width:200px;
   text-align:center;
}

.padding-images > a > img {
   display:block;
   height:100px;
}

.padding-images > p {
   text-align:center;
}


select.dropdownmenu {
   width: 270px;
   height: 35px;
   font-size:16px;
   background-color: white;
}

div.hidden {
    display:none;
}