/*
DONT FORGET TO ADD THIS INTO THE HEAD - in order to make sure
we are Turning off Number Detection in iOS
because If we plan to add phone links to our markup,
then we may also want to consider disabling iOS from auto-detecting phone numbers and overriding
our styles. Thus we will be adding the following to the document <head> to turn it off:
<meta name="format-detection" content="telephone=no">
*/
/*
REFERENCE
http://jsbin.com/leyeve/edit?html,css,js,output
https://jsbin.com/hafebeh/edit?html,css,output
https://css-tricks.com/the-current-state-of-telephone-links/
*/
/*
<!-- https://css-tricks.com/the-current-state-of-telephone-links/ -->
https://jsbin.com/hafebeh/edit?html,css,output
<meta name="format-detection" content="telephone=no">
<a rel="nofollow" href="tel:+4940564343" >040 / 56 43 43</a>
*/
#telephone[href^="tel:"]:before { content: "\260E"; margin-right: 0.5em; } /*display: block;*/
@media only screen and (max-width: 480px) {
/* https://medium.com/written-in-code/customizing-phone-number-auto-links-with-css-4315b18e89f7#.ge8570qem*/
#telephone[href^=tel] {
background-color: #f5f5f5;
background-image: linear-gradient(to bottom,#ffffff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1)
rgba(0, 0, 0, 0.1)
rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 1px 2px rgba(0, 0, 0, 0.05);
color: #333; /* color: orange; */
display: block;
/* font-size: 125%;*/
font-style: normal;
line-height: 20px;
/* margin: 20px 0 0;*/
padding: 10px 20px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
/* width: 100vH;*/
padding: 5px ;
margin: 15px 15px 15px 0px ;
font-size: 1.15rem ;
}
#telephone strong {
color: #5d711b;
font-weight: 700;
}
.mobile-off {
display:none;
}
}
@media only screen and (min-width: 480px) {
#telephone:hover, #telephone:visited, #telephone:link, #telephone:active {
display:none;
text-decoration: none;/*underline*/
color: black;
cursor: default;
margin: 15px 0px 15px 0px;
}
}
/*
#telephone[href^="tel"]:link,
#telephone[href^="tel"]:visited,
#telephone[href^="tel"]:hover {
text-decoration: none;
color: #000;
#telephone[href^="tel"]:link,
#telephone[href^="tel"]:visited,
#telephone[href^="tel"]:hover {
text-decoration: underline;
color: black;
}
*/