@charset "UTF-8";

/*!
 * ConvergenWeb - info@convergenceweb.ch
 * socialsicons.css 
 * Copyright (c) 2021 ConvergenceWeb
 */

.icon-link-trame {
  width: auto;
  height: 5vh;
  display:flex;
  flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
}

.icon-link {
  width: 50px;
  height: 50px;
  background-color: #fff;
  line-height: 60px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  outline: none;
  margin-right: 1vw !important;
  border-radius: 60px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  float:right;
}
.icon-link.fill.facebook {
  background-color: #3b5998;
}
.icon-link.fill.facebook:hover {
  background-color: #fff;
}
.icon-link.fill.facebook:hover .fa-facebook {
  color: #3b5998;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}

.icon-link.fill.instagram {
  background-color: #e4405f;
}
.icon-link.fill.instagram:hover {
  background-color: #fff;
}
.icon-link.fill.instagram:hover .fa-instagram {
  color: #e4405f;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}

.icon-link.fill.tumblr {
  background-color: #32506d;
}
.icon-link.fill.tumblr:hover {
  background-color: #fff;
}
.icon-link.fill.tumblr:hover .fa-tumblr {
  color: #32506d;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.linkedin {
  background-color: #007bb6;
}
.icon-link.fill.linkedin:hover {
  background-color: #fff;
}
.icon-link.fill.linkedin:hover .fa-linkedin {
  color: #007bb6;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.twitter {
  background-color: #00aced;
}
.icon-link.fill.twitter:hover {
  background-color: #fff;
}
.icon-link.fill.twitter:hover .fa-twitter {
  color: #00aced;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.google-plus {
  background-color: #dd4b39;
}
.icon-link.fill.google-plus:hover {
  background-color: #fff;
}
.icon-link.fill.google-plus:hover .fa-google-plus {
  color: #dd4b39;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.reddit {
  background-color: #8bbbe3;
}
.icon-link.fill.reddit:hover {
  background-color: #fff;
}
.icon-link.fill.reddit:hover .fa-reddit {
  color: #8bbbe3;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.youtube {
  background-color: #df1c31;
}
.icon-link.fill.youtube:hover {
  background-color: #fff;
}
.icon-link.fill.youtube:hover .fa-youtube {
  color: #df1c31;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.pinterest {
  background-color: #b81621;
}
.icon-link.fill.pinterest:hover {
  background-color: #fff;
}
.icon-link.fill.pinterest:hover .fa-pinterest {
  color: #b81621;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.github {
  background-color: #444;
}
.icon-link.fill.github:hover {
  background-color: #fff;
}
.icon-link.fill.github:hover .fa-github {
  color: #444;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.envelope {
  background-color: #333;
}
.icon-link.fill.envelope:hover {
  background-color: #fff;
}
.icon-link.fill.envelope:hover .fa-envelope {
  color: #333;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link.fill.soundcloud {
  background-color: #f50;
}
.icon-link.fill.soundcloud:hover {
  background-color: #fff;
}
.icon-link.fill.soundcloud:hover .fa-soundcloud {
  color: #f50;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link.brand {
  background-color: #fff;
}
.icon-link.brand .fa {
  color: #006FC2;
}
.icon-link.round {
  border-radius: 50%;
}
.icon-link.round-corner {
  border-radius: 5px;
}
.icon-link:hover {
  -webkit-transition: background-color 150ms ease-in-out;
  transition: background-color 150ms ease-in-out;
  height: 56px;
  line-height: 56px;
  width: 56px;
  background-color: #bf0d3e;
}
.icon-link:hover.facebook {
  border: 2px solid #fff;
}
.icon-link:hover.instagram {
  border: 2px solid #fff;
}
.icon-link:hover.tumblr {
  border: 2px solid #32506d;
}
.icon-link:hover.linkedin {
  border: 2px solid #fff;
}
.icon-link:hover.twitter {
  border: 2px solid #00aced;
}
.icon-link:hover.google-plus {
  border: 2px solid #dd4b39;
}
.icon-link:hover.reddit {
  border: 2px solid #8bbbe3;
}
.icon-link:hover.youtube {
  border: 2px solid #df1c31;
}
.icon-link:hover.pinterest {
  border: 2px solid #b81621;
}
.icon-link:hover.github {
  border: 2px solid #444;
}
.icon-link:hover.envelope {
  border: 2px solid #fff;
}
.icon-link:hover.soundcloud {
  border: 2px solid #f50;
}
.icon-link:hover .fa {
  line-height: 56px;
}
.icon-link:hover .fa-facebook {
  color: #fff;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-instagram {
  color: #fff;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-tumblr {
  color: #32506d;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-linkedin {
  color: #fff;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-twitter {
  color: #00aced;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-google-plus {
  color: #dd4b39;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-reddit {
  color: #8bbbe3;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-youtube {
  color: #df1c31;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-pinterest {
  color: #b81621;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-github {
  color: #444;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-envelope {
  color: #fff;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link:hover .fa-soundcloud {
  color: #f50;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.icon-link .fa {
  color: #000;
  line-height: 50px;
  font-size: 30px;
}

.brand-icons {
  background-color: #ddd;
  padding: 10px 0;
}

/******************************** BOOTSTRAP MEDIA QUERIES ********************************/
/*Screens portrait */
@media screen and (max-width: 1199px) and (orientation: portrait) {
.icon-link-trame {
    width: auto;
    height: 8vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
}
.icon-link {
  width: 3.5vw;
  height: 3.5vw;
  line-height: 5vw;
}
.icon-link .fa {
  font-size: 2.5vw;
  line-height: 0;
  
}
.icon-link:hover {
  height:  3.5vw;
  width:  3.5vw;
  line-height:5vw;
}
.icon-link:hover .fa {
    line-height: 5vw;
}			
}

@media screen and (max-width: 767px) and (orientation: portrait) {
.icon-link {
  width: 8vw;
  height: 8vw;
  line-height: 8vw;
  margin-right:5vw;
}
.icon-link .fa {
  font-size: 4vw;
  line-height: 8vw;
  
}
.icon-link:hover {
  height: 8vw;
  width: 8vw;
  line-height:8vw;
}
.icon-link:hover .fa {
    line-height: 8vw;
}			
}




/* Screens landscape */

@media screen and (max-width: 1199px) and (orientation: landscape) {
.icon-link-trame {
    height: 8vh;
}
.icon-link {
  width: 2.5vw;
  height: 2.5vw;
  line-height: 2.8vw;
  margin-right:1vw !important;
}
.icon-link .fa {
  font-size: 1.8vw;
  line-height: 0vh;
  margin-right: 0.2vw;
}
.icon-link:hover {
  height: 2.5vw;
  width: 2.5vw;
 line-height: 2.8vw;
}
.icon-link:hover .fa {
  line-height: 2.8vw;
}	
}

/* Sm Screen landscape iPhone 11 & pro & pro max */
@media screen and (min-width: 812px) and (max-width: 926px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {

}



/******************************** Lg BOOTSTRAP MEDIA QUERIES ********************************/

/* Lg Screen I*/
@media screen and (min-width: 1200px) {
.icon-link {
  width: 3vh;
  height: 3vh;
  line-height: 3vh;
  margin-right:0.5vw;
}
.icon-link .fa {
  font-size: 1.4vh;
  line-height: 3.2vh;
  
}
.icon-link:hover {
  height: 3vh;
  width: 3vh;
  line-height: 3vh;
}
.icon-link:hover .fa {
    line-height: 3vh;
}			
}

/* Lg Screen iPad Pro landscape*/
@media only screen and (min-width: 1366px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.icon-link {
  width: 3vh;
  height: 3vh;
  line-height: 2.7vw;
  margin-right:2vw;
  margin-top:0;
}
.icon-link .fa {
  line-height: 0;
  font-size: 1.3vw;
}
.icon-link:hover {
  height: 2.5vh;
  width:2.5vh; 
  line-height: 2.3vw;
}
}

/* Lg Screen UHD>>> */
@media screen and (min-width: 2561px){
.icon-link {
  width: 2.5vh;
  height: 2.5vh;
  line-height: 3vh;
  margin-right:0.5vw;
}
.icon-link .fa {
  font-size: 1.2vh;
  line-height: 0vh;
  
}
.icon-link:hover {
 width: 2.5vh;
  height: 2.5vh;
  line-height: 2.7vh;
}
.icon-link:hover .fa {
    line-height: 2.7vh;
}		
}