@font-face {
    font-family: "Love_Trust";
    src: url('assets/webfonts/Love_Trust.ttf');
}

.contain {
    display: grid;
    grid-gap: 0.35rem;
    grid-template-columns: repeat(12, 60px);
    grid-template-rows: repeat(6, 60px);
        margin-left: 54px;
}

.smallcontain {
    display:none;
}
.smallcontain {
    display: none;
    grid-gap: 0.35rem;
    grid-template-columns: repeat(6, 30px);
    grid-template-rows: repeat(6, 30px);
        margin-left: 54px;
}

/***************************************************/
/************** Smallest Screen ********************/
/***************************************************/
 @media (min-width: 50px) and (max-width: 319px) {
.smallcontain {
    display: grid;
    grid-gap: 0.35rem;
    grid-template-columns: repeat(6, 30px);
    grid-template-rows: repeat(6, 30px);
       margin-left: -50px;
        margin-top: -112px;
}

.items_trans {
   display:none;
}

.contain {
    display:none;
}


}    
   

/***************************************************/
/************** iPhone6  ***************************/
/***************************************************/
 @media (min-width: 320px) and (max-width: 480px) {
.smallcontain {
    display: grid;
    grid-gap: 0.35rem;
    grid-template-columns: repeat(6, 30px);
    grid-template-rows: repeat(6, 30px);
             margin-left: -65px;
        margin-top: -112px;
}

.items_trans {
   display:none;
}

.contain {
    display:none;
}

.carousel-items {
    height:300px;
}
}    
   
  
  @media (min-width: 481px) and (max-width: 511px) {
.smallcontain {
    display: grid;
    grid-gap: 0.35rem;
    grid-template-columns: repeat(6, 30px);
    grid-template-rows: repeat(6, 30px);
             margin-left: -18px;
        margin-top: -112px;
}

.items_trans {
   display:none;
}

.contain {
    display:none;
}

.carousel-items {
    height:300px;
}


}    
  
    

/***************************************************/
/************** iPhone6 Plus 414px *****************/
/***************************************************/
@media (min-width: 512px) and (max-width: 767px){
.contain {
    display: grid;
    grid-gap: 0.35rem;
    grid-template-columns: repeat(6, 60px);
    grid-template-rows: repeat(6, 60px);
    margin-left: -64px;
    margin-top: -110px;
}

.items_trans {
   display:none;
}

.items {
    margin-top:130px;
     margin-left:132px;
}
.smallcontain {
    display:none;
}

}

/***************************************************/
/************** iPad********************************/
/***************************************************/
@media (min-width: 768px) and (max-width: 1023px) {
.contain {
    display: grid;
    grid-gap: 0.35rem;
    grid-template-columns: repeat(6, 60px);
    grid-template-rows: repeat(6, 60px);
        margin-left: 54px;
}

.items_trans {
   display:none;
}

.items {
    margin-top:130px;
     margin-left:132px;
}
.smallcontain {
    display:none;
}
}    
  
/***************************************************/
/************** iPad Pro***************************/
/***************************************************/
@media (min-width: 1024px) and (max-width: 1199px) {
.contain {
    display: grid;
    grid-gap: 0.35rem;
    grid-template-columns: repeat(12, 60px);
    grid-template-rows: repeat(6, 60px);
        margin-left: 54px;
}

.smallcontain {
    display:none;
}
}


    
/* GLOBAL STYLES */

.items {
    border: none;
    font-size: 2em;
    font-family: sans-serif;
    font-weight: bold;
    background-color: #000;
    margin-top:130px;
     margin-left:0px;
}

.items_trans {
    border: none;
    font-size: 2em;
    font-family: sans-serif;
    font-weight: bold;
    margin-top:130px;
    margin-left:0px;
}


/* ------------------------------------------------------------
#brand icons animation
------------------------------------------------------------ */

.anim {
    transform: scale(1);
    transition: all .4s ease-in-out;
}

.anim:hover {
    transform: scale(1.2);
    transition: all .4s ease-in-out;
    -webkit-box-shadow: 5px 3px 13px 1px rgba(0, 0, 0, 0.34);
    box-shadow: 5px 3px 13px 1px rgba(0, 0, 0, 0.34);
}