.dragColumn
{
    font-family: 'Open sans', sans-serif;
    font-size: 1.1em;

    height: 18em;
    margin-top: 0;
    margin-bottom: 0;

    text-align: center;

    color: white;
    border: 1px dashed #16a79d;
}

.dragColumnHeader
{
    font-size: 1.1em;

    height: 3em;
    margin-bottom: 0;
    padding-top: .7em;

    text-align: center;

    border: 1px dashed #16a79d;
    background-color: #16a79d;
}

li
{
    list-style-type: none;
}
ul.dragarea
{
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

#selectableStatements
{
    font-family: 'Open sans', sans-serif;

    height: 3em;

    cursor: pointer;
}

.draggableItem
{
    font-size: 1em;

    display: none;

    height: auto;
    padding: .5em 0;

    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    text-align: center;
    vertical-align: middle;

    color: #32343a;
    border-bottom: 1px dashed #16a79d;
    background-color: #f4ac42;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
}

#buttonsHolder
{
    position: relative;

    display: block;

    margin: auto;
    margin: 1% 0 1% 3%;
}

#suggestions
{
    position: relative;
    top: -1.5%;

    height: auto;
}

#suggestions ul
{
    font-family: 'Open sans', sans-serif;

    margin-top: 0;

    border: 1px solid #fff;
    background-color: #16a79d;
}

#suggestions ul li
{
    padding: .2em .5em;
}
.show
{
    visibility: visible;
}

.hide
{
    visibility: hidden;
}
li.disabled
{
    background-color: #ccc;
}

#prevStatementBtn
{
    float: right;
}


/* ----------- Large Display ----------- */

@media screen and (min-width: 1920px) and (min-height: 1080px)
{
    /* Styles */
    .dragColumn {
        height: 24em;
    }
}


/* ----------- Laptop HiDPI screen ----------- */

@media screen and (min-width: 1440px) and (min-height: 900px)
{
    /* Styles */
}


/* ----------- Laptop ----------- */

@media screen and (max-width: 1366px) and (max-height: 768px)
{
    /* Styles */
    #resetBtn,
    #showAnswersBtn
    {
        height: auto;
    }

    .dragColumn
    {
        height: 15em;
    }
   /*  #buttonsHolder,
   #activity
   {
       position: relative;
   } */
    #buttonsHolder
    {
        margin: 1% 0 1% 3%;
    }
    #suggestions ul
    {
        margin-bottom: 0;
    }
    /* #dragHome
    {
        position: relative;
    
        display: block;
    } */
}


/* ----------- Laptop MDPI screen ----------- */

@media screen and (min-width: 1280px) and (min-height: 800px)
{
    /* Styles */
}


/* ----------- iPad ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
   /* .draggableItem {
      
       padding: 0.4em 0;
   } */
   .dragColumnHeader {
       font-size: 1em;
       margin-top: 0;
   }
    /* Styles */
    .dragColumn
    {
        height: 15em;
    }
}


/* ----------- iPhone 5 ----------- */

@media only screen and (min-device-width: 568px) and (min-device-height: 320px)
{
    /* Styles */
}