.dynamicTile .col-sm-2.col-xs-4{
    padding:5px;
}

.dynamicTile .col-sm-4.col-xs-8{
    padding:5px;
}

.dynamicTile .col-sm-6{
    padding:0px;
}

.dynamicTile .col-sm-6.col-xs-11{
    padding:5px;
}

#tile1{
    background: rgb(0,172,238);
}

#tile2{
    background: rgb(255,215,0);
}

#tile3{
    background: rgb(71,193,228);
}

#tile4
{
    background-color: #B2B2B2;
}

#tile5{
    background: purple;
}

#tile6{
    background: rgb(62,157,215);
}

#tile7{
    background: white;
}

#tile8{
    background: rgb(209,70,37);
}

#tile9{
    background: rgb(0,142,0);
}

#tile10{
    background: rgb(0,93,233);
}

#tile11{
    background: rgb(255,128,0);
}

#tile12{
    background: black;
}

#tile13{
    background: rgb(209,70,37);
}

#tile14{
   background: rgb(255,128,0);
}
.tilecaption{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%); 
    margin:0!important;
    text-align: center;
    color:white;
    font-family: Segoe UI;
    font-weight: lighter;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)  
{
    h1, .h1
    {
        font-size:18px;
    }
    
    .tilecaption
    {
        font-size:18px;
    }
    
    h2, .h2
    {
        font-size:16px;
    }
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)  
{
        .dynamicTile .col-sm-6.col-xs-11{
    padding-left:0px;
    padding-right:0px;
    width:50%;
    }
    
    h1, .h1
    {
        font-size:18px;
    }
    
    h2, .h2
    {
        font-size:16px;
    }
}

    


@media (max-width: 480px) 
{
    .dynamicTile .col-sm-6.col-xs-11{
    padding-left:0px;
    padding-right:0px;
    width:99%;
    }
    
    h1, .h1
{
    font-size:18px;
}

h2, .h2
{
    font-size:16px;
}
}

@media (max-width: 640px) {
    /*Logo*/
    .dynamicTile .col-sm-6.col-xs-11{
    padding-left:0px;
    padding-right:0px;
    width:99%;
    }

h1, .h1
{
    font-size:18px;
}

h2, .h2
{
    font-size:16px;
}

}


@media (max-width: 360px) {
    /*Logo*/
    .dynamicTile .col-sm-6.col-xs-11{
    padding-left:0px;
    padding-right:0px;
    width:99%;
    }

h1, .h1
{
    font-size:18px;
}

h2, .h2
{
    font-size:16px;
}

}


@media (max-width: 320px) {
    /*Logo*/
.dynamicTile .col-sm-6.col-xs-11{
    padding-left:0px;
    padding-right:0px;
    width:99%;
}

h1, .h1
{
    font-size:18px;
}

h2, .h2
{
    font-size:16px;
}

}