html { -webkit-text-size-adjust: auto;} 


@font-face {font-family: "basic"; src: url("basic.ttf");}

@font-face {font-family: "extra"; src: url("extra.otf");}



A:link {text-decoration: none; color: black;}

A:visited {text-decoration: none; color: white;}

A:active {text-decoration: none; color: black;}

A:hover {text-decoration: none; color: black;}

body {background:#f2f2f2;}

div { 
 -ms-user-select: None;
 -moz-user-select: None;
 -webkit-user-select: None; }



.container {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

.overlay {
 position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 2s linear;
  background-color: #f2f2f2;//#ffe6ff;
 transition-delay: 1s;
  -webkit-transition-delay: 1s;
}

.container:hover .overlay , element:active {
  opacity: .97;
}

.image {
  display: block;
  position: relative;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.extra{
  font-family: "extra";
  font-weight: lighter;
  position:  absolute;
  text-align: center;
  color: black;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}


.basic {
  font-family: "basic"; 
  position:  absolute;
  text-align: center;
  color: black;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}


/* ############## Device = PC, Laptops, Desktops Screen = B/w 1025px to higher resolution desktops ############## */
@media (min-width: 1025px){
  
//body {background:orange;}


.image {
  width: 30%;
  top: 20%;
}


.basic{
  font-size: 250%; 
  top: 50%;
  left: 50%;
}


.extra{
  font-size: 650%; 
  top: 60%;
  left: 50%;
}
  
} /*End*/



/* ############## Device = Ipads (portrait) Screen = B/w 768px to 1024px ############## */

@media (min-width: 768px) and (max-width: 1024px) {
  
// body {background:green;}

.image {
  width: 80%;
  top: 10%;
}


.basic {
  font-size: 200%; 
  top: 40%;
  left: 50%;
}


.extra{
  font-size: 650%; 
  top: 53%;
  left: 50%;
}

} /*End*/







/* ############## Device = Ipad (landscape) Screen = B/w 768px to 1024px ############## */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

//  body {background:blue;}


.image {
  width: 50%;
  top: 10%;
}


.basic {
  font-size: 250%; 
  top: 42%;
  left: 50%;
}



.extra{
  font-size: 550%; 
  top: 58%;
  left: 50%;
}

} /*End*/






/* ############## Device = iPhone  (Landscape) Screen = B/w 481px to 767px ##############*/

@media (min-width: 481px) and (max-width: 767px) {
  
 //  body {background:yellow;}


.image {
  width: 35%;
  top: 10%;
}


.basic {
  font-size: 100%; 
  top:38%;
  left: 50%;
}

.extra{
  font-size: 180%; 
  top: 50%;
  left: 50%;
}

} /*End*/







/* ############## Device = iPhone (Portrait) Screen = B/w 320px to 479px ##############*/

@media (min-width: 320px) and (max-width: 480px) {
  

 // body {background:red;}


.image {
  top: 20%;
  width: 80%;
}


.basic {
  font-size: 100%; 
  top: 40%;
  left: 50%;
}


.extra{
  font-size: 450%; 
  top: 53%;
  left: 50%;
}
  
} /*End*/