/*!
Theme Name: Cafe U
Theme URI: http://www.Ez-IT-Solutions.com/WordPress/Themes/Cafe-U/
Author: Ez IT Solutions
Author URI: http://www.Ez-IT-Solutions.com
Description: A custom WordPress theme designed for Cafe U in Mineola, Tx.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cafe-u
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Cafe U is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

.fa-facebook:before {
  margin-left: -1px;
}

.social {
  /* margin: 60px auto 0px auto; */
  text-align: center;
}
.social h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 30px;
  text-transform: uppercase;
  color: #212121;
  letter-spacing: 3px;
}
.social h1 span {
  display: inline-block;
}
.social h1 span:before, .social h1 span:after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background-color: #212121;
  margin: 0px 0px 0px 2px;
}
.effect {
  width: 100%;
  /* padding: 50px 0px 70px 0px; */
  background-color: #212121;
}
.effect h2 {
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 3px;
}
.effect:nth-child(2) {
  margin-top: 50px;
}
.effect:nth-child(2n+1) {
  background-color: #fff;
}
.effect:nth-child(2n+1) h2 {
  color: #212121;
}
.effect .buttons {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.effect a:last-child {
  margin-right: 0px;
}

.effect {
  /*display: flex; !!!uncomment this line !!!*/
}
.effect a {
  text-decoration: none !important;
  color: #fff !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-right: 20px;
  font-size: 22px;
  overflow: hidden;
  position: relative;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.effect a i {
  position: relative;
  z-index: 3;
}
.effect a.fb, .effect a.fb:hover {
  background-color: #3b5998 !important;
}

.social .buttons i {
	font-weight: normal !important;
    font-family: FontAwesome !important;
}

.social .buttons i.fa.fa-facebook {
  margin-top: 1px;
  margin-left: 2px;
}

.social .buttons i.fa.fa-tiktok {
  font-size: 20px !important;
}

.effect a.tw, .effect a.tw:hover {
  background-color: #00aced !important;
}
.effect a.g-plus, .effect a.g-plus:hover {
  background-color: #dd4b39 !important;
}
.effect a.tiktok, .effect a.tiktok:hover {
  background-color: #ff0050 !important;
}
.effect a.pinterest, .effect a.pinterest:hover {
  background-color: #cb2027 !important;
}
.effect a.insta, .effect a.insta:hover {
  background-color: #bc2a8d !important;
}
.social .buttons i.fa.fa-instagram {
  margin-left: 1px;
}
.effect a.in, .effect a.in:hover {
  background-color: #007bb6 !important;
}
.effect a.vimeo, .effect a.vimeo:hover {
  background-color: #1ab7ea !important;
}

/* laertes effect */
.effect.laertes a {
  text-shadow: 1px 5px 5px rgba(0,0,0,.5) !important;
  box-shadow: 0 2px 2px rgba(101,53,12,0.5), 0 4px 4px rgba(255,255,255,0.5), 0 8px 8px rgba(255,255,255,1), 0 16px 16px rgba(0,0,0,0.15) !important;
  
  transition: all 0.2s linear 0s !important;
  /* border: 2px solid rgb(0, 0, 0, 0.15); */
  /* border: 2px solid rgb(81, 64, 59, 0.25); */
  border: 2px solid rgb(35, 23, 16, 0.45);
  
  padding: 2px !important;
  background-clip: content-box;

  /* 

  ////////////////////////////////////////////////////////////////////////////////////////
  //                                                                                    //
  //  IF WE HIDE THIS BACKGROUND COLOR - WE GET FULL SOCIAL COLORED BACKGROUNDS!!!!     //
  //                                                                                    //
  ////////////////////////////////////////////////////////////////////////////////////////

  */

  /* background-color: rgba(81, 64, 59, .75); */
  background-color: rgba(101,53,12,.85) !important;

}
.effect.laertes a i {
  transition: all 0.2s linear 0s;
}
.effect.laertes a:hover {
  border-radius: 50%/20%;
  opacity: 1;
  filter: alpha(opacity=100);
}
.effect.laertes a:hover i {
  transform: scale(1.1);
  text-shadow: 0 0 12px rgba(33, 33, 33, 0.6);
}