@font-face {
    font-family: 'prime';
    src:  url('../fonts/prime.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*product style*/
.prodcon{
    width: 14vw;
    height: 14vw;   
    border-radius: 50%;
    position: relative;
    float: left;
    margin-left:5%;
    margin-bottom: 5vw;
    opacity: 0;
}


.prodcon img{
    top:0;
    left:0;
    position:absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    margin:-10%;
    z-index:1;
    overflow: hidden;
}

.underlay{
    background:white;
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: relative;
    z-index:0;
    border-radius: 50%;
    box-shadow: 
        inset 0 0 0 50px rgba(100,100,100, 0.4),
        inset 0 0 0 25px rgba(40,40,40,0.8),
        0 1px 2px rgba(0,0,0,0.1);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.texthold:hover ~ .underlay{
    box-shadow: 
        inset 0 0 0 0px rgba(100,100,100, 0.4),
        inset 0 0 0 0px rgba(80,80,80,0.6),
        0 1px 2px rgba(0,0,0,0.1);
}

.texthold{
    z-index:1;
    width:100%;
    height:100%;
    top:0;
    left:0;
    position: absolute;
    border-radius: 50%;
    box-shadow: 
        inset 0 0 0 0 rgba(200,95,66, 0.4),
        0 1px 2px rgba(0,0,0,0.1);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}



.texthold:hover{
    box-shadow: 
        inset 0 0 0 200px rgba(200,95,66, 0.4),
        0 1px 2px rgba(0,0,0,0.1);
}

.texthold:hover .inner{
    opacity: 1;

    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.inner{
    opacity:0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.texthold .top{

    position:relative;
    height:50%;
    width:100%;
}

.texthold .top h3{
    margin:0;
    text-align:center;
    border:0;
    padding:0;
    height:30%;
    top:70%;
    width: 80%;
    left:10%;
    font-size: 30px;
    position: relative;
    border-bottom: 1px solid;
    color: #fff;
    text-transform: uppercase;
    font-family: 'prime', Verdana, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}

.texthold .bottom{
    position:relative;
    height:50%;
    margin:0;
    align-items: center;
    width:100%;
}

.texthold .bottom a{

    color: #fff;
    color: rgba(255,255,255,0.7);

    position: relative;
    width:80%;
    min-width: 80%;
    left:10%;
    display: block;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;	
    letter-spacing: 1px;
    padding-top: 10px;
    font-family: 'prime', Verdana, sans-serif;
    cursor: pointer;
}

.texthold a:hover{
    color: yellow;
}

.textstyle{
    font-family: 'prime', Verdana, sans-serif;

    position: absolute;
    transition: .3s all;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.prodhold{
    position: relative;
    top:60%;
    background-size: 100% 80%;
    background:white;
    min-width: 100%;
    overflow: auto;
    min-height:80%;
    
}

@media only screen and (max-device-width: 480px) and (orientation : portrait){
    .prodhold{
        top: 20%;
    }

    .prodcon{
        margin-left: 15%;
        width: 30vw;
        height: 30vw;
    }

    .texthold .top h3{
        height: 40%;
        top: 60%;
        font-size: 20px;
    }
}