@import url(font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Pattaya|Work+Sans:400,200,300);

html{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark);
}
body{
    background: #ccc;
    margin: 2% 0!important;
}
.container {
    box-shadow: 1px 1.5px 1px #000;
    border-radius: 15px;
    background: #F2F2F2;
    margin: 0 auto;
}
.row {
    justify-content:center;
}
#container {
    width: 100%;
    height: auto;
    margin: 0 auto;
}
header img{
    width: 90%;
    height: auto;
    margin: 0 auto;
    text-align: center;
}


a:link {
    text-decoration: none;
}

iframe,
object,
embed {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    
}
.mobile{
 cursor: url('../images/finger.png'), auto;
}

#tapMe,#spacerun{    
    background-image: url(../images/hand.png);
    background-repeat: no-repeat;
    background-position: 30% 2em;  
}

#icon{
    width: 5rem;
}


/* Box Model */

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


/* Basic */

@-ms-viewport {
    width: device-width;
}

@media screen and (max-width: 480px) {
    html,
    body {
        min-width: 320px;
    }
}



/*Hover effect*/


.char {
    opacity: 1;
    display: block;
    margin: auto;
    transition: .5s ease;
    padding-right: .2rem;
    width: 100%;
    height: 20rem;
    padding: 2%
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.picture {
    position: relative;
    display: inline-block;
}

.picture:hover .char {
    opacity: 0.3;
}

.picture:hover .middle {
    opacity: 1;
}

.text {
    background-color: #0B89D5;
    color: white;
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
}
/* Media Queries */

@media screen and (max-width: 736px) {
    .columns {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
    #tapMe,#spacerun{
    background-position:-10em 0%;
}

}

@media screen and (max-width: 480px) {
    .columns {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
    #tapMe,#spacerun{
    background-image: none;
}

}