/*-----------------------------------------------------------------------------------

-----------------------------------------------------------------------------------*/
/*===========================
      01.COMMON css 
===========================*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800");
body {
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #121212; }

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

img {
  max-width: 100%; }

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none; }

a:focus,
a:hover {
  text-decoration: none; }

i,
span,
a {
  display: inline-block; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  margin: 0px; }

h1 {
  font-size: 48px; }

h2 {
  font-size: 36px; }

h3 {
  font-size: 28px; }

h4 {
  font-size: 22px; }

h5 {
  font-size: 18px; }

h6 {
  font-size: 16px; }

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none; }

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #121212;
  margin: 0px; }

.bg_cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%; }

/*===== All Slick Slide Outline Style =====*/
.slick-slide {
  outline: 0; }

/*===== All Section Title Style =====*/
.section-title .title {
  font-size: 44px;
  font-weight: 600;
  line-height: 55px; }
  @media (max-width: 767px) {
    .section-title .title {
      font-size: 30px;
      line-height: 35px; } }
.section-title .text {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  margin-top: 24px; }

.purpleColor {
	background-color:#563C5C;
	color:white;
}
.skyBlueColor{
	background-color:#72efe9;
	color:black;
}

body::-webkit-scrollbar {
  width: 8px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

/*===========================
        NAVBAR css 
===========================*/
.navbar-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  z-index: 99;
    background-color: cadetblue;  }
  .navbar-area .navbar {
    position: relative;
    padding: 0; }
    .navbar-area .navbar .navbar-toggler .toggler-icon {
      width: 30px;
      height: 2px;
      background-color: #fff;
      margin: 5px 0;
      display: block;
      position: relative;
      transition: all 0.3s ease-out 0s; }
    .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
      transform: rotate(45deg);
      top: 7px; }
    .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
      opacity: 0; }
    .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
      transform: rotate(135deg);
      top: -7px; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .navbar-area .navbar .navbar-collapse {
        position: absolute;
        top: 115%;
        left: 0;
        width: 100%;
        background-color: #f4f6f7;
        z-index: 8;
        padding: 10px 0;
        box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } }
    @media (max-width: 767px) {
      .navbar-area .navbar .navbar-collapse {
        position: absolute;
        top: 115%;
        left: 0;
        width: 100%;
        background-color: #f4f6f7;
        z-index: 8;
        padding: 10px 0;
        box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); } }
    .navbar-area .navbar .navbar-nav .nav-item {
      margin: 0 16px;
      position: relative; }
      .navbar-area .navbar .navbar-nav .nav-item a {
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        padding: 26px 0;
        color: #fff;
        text-transform: uppercase;
        position: relative;
        opacity: 0.8;
        transition: all 0.3s ease-out 0s; }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .navbar-area .navbar .navbar-nav .nav-item a {
            padding: 10px 0;
            display: block;
            color: #121212; } }
        @media (max-width: 767px) {
          .navbar-area .navbar .navbar-nav .nav-item a {
            padding: 10px 0;
            display: block;
            color: #121212; } }
        .navbar-area .navbar .navbar-nav .nav-item a::before {
          position: absolute;
          content: '';
          width: 32px;
          height: 4px;
          background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, white 100%);
          left: 50%;
          margin: 0 2px;
          bottom: 14px;
          transition: all 0.3s ease-out 0s;
          transform: translate(-50%) scaleX(0); }
          @media only screen and (min-width: 768px) and (max-width: 991px) {
            .navbar-area .navbar .navbar-nav .nav-item a::before {
              display: none; } }
          @media (max-width: 767px) {
            .navbar-area .navbar .navbar-nav .nav-item a::before {
              display: none; } }
      .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a {
        opacity: 1;
        color: #fff; }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a {
            color: #121212; } }
        @media (max-width: 767px) {
          .navbar-area .navbar .navbar-nav .nav-item.active > a, .navbar-area .navbar .navbar-nav .nav-item:hover > a {
            color: #121212; } }
        .navbar-area .navbar .navbar-nav .nav-item.active > a::before, .navbar-area .navbar .navbar-nav .nav-item:hover > a::before {
          transform: translate(-50%) scaleX(1); }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .navbar-area .navbar .navbar-btn {
        position: absolute;
        right: 70px;
        top: 7px; } }
    @media (max-width: 767px) {
      .navbar-area .navbar .navbar-btn {
        position: absolute;
        right: 60px;
        top: 7px; } }
    .navbar-area .navbar .navbar-btn li {
      display: inline-block;
      margin-right: 5px; }
      .navbar-area .navbar .navbar-btn li a {
        padding: 10px 16px;
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 700;
        color: #fff;
        border: 2px solid;
        border-radius: 4px;
        transition: all 0.3s ease-out 0s; }
        .navbar-area .navbar .navbar-btn li a.light {
          border-color: #fff; }
          .navbar-area .navbar .navbar-btn li a.light:hover {
            background-color: rgba(255, 255, 255, 0.4); }
        .navbar-area .navbar .navbar-btn li a.solid {
          background-color: #fff;
          border-color: #fff;
          color: #0067f4; }
          .navbar-area .navbar .navbar-btn li a.solid:hover {
            background-color: transparent;
            color: #fff; }
  .navbar-area.sticky {
    background-color: #fff;
    z-index: 999;
    position: fixed;
    box-shadow: 0px 10px 25px 0px rgba(18, 18, 18, 0.05); }
    .navbar-area.sticky .navbar .navbar-toggler .toggler-icon {
      background-color: #121212; }
    .navbar-area.sticky .navbar .navbar-nav .nav-item a {
      color: #121212;
      opacity: 0.7; }
      .navbar-area.sticky .navbar .navbar-nav .nav-item a::before {
        background: linear-gradient(to right, rgba(18, 18, 18, 0) 0%, #121212 100%); }
    .navbar-area.sticky .navbar .navbar-nav .nav-item.active, .navbar-area.sticky .navbar .navbar-nav .nav-item:hover {
      color: #121212;
      opacity: 1; }
    .navbar-area.sticky .navbar .navbar-btn li a.light {
      border-color: #0067f4;
      color: #0067f4; }
    .navbar-area.sticky .navbar .navbar-btn li a.solid {
      border-color: #0067f4;
      background-color: #0067f4;
      color: #fff; }

/*===========================
       SLIDER css 
===========================*/



.hero-slider {
	background:#000;
	border:5px solid #eaeaea;
	box-shadow:1px 1px 5px rgba(0,0,0,0.7);
	height:520px;
	margin:5% 20%;
	overflow:visible;
	position:relative;
}
.animate {
	overflow:hidden;
	height:510px;
}
.hero-slider ul {
	margin:0;
	padding:0;
	position:relative;
}
.hero-slider li {
	width:980px;
	height:510px;
	position:absolute;
	top:3px;
	top:-525px;
	list-style:none;
}

.hero-slider li.one {
	-moz-animation:cycle 25s linear infinite;	
	-webkit-animation:cycle 25s linear infinite;		
}
.hero-slider li.two {
	-moz-animation:cycletwo 25s linear infinite;
	-webkit-animation:cycletwo 25s linear infinite;		
}
.hero-slider li.three {
	-moz-animation:cyclethree 25s linear infinite;
	-webkit-animation:cyclethree 25s linear infinite;		
}
.hero-slider li.four {
	-moz-animation:cyclefour 25s linear infinite;
	-webkit-animation:cyclefour 25s linear infinite;		
}
.hero-slider li.five {
	-moz-animation:cyclefive 25s linear infinite;
	-webkit-animation:cyclefive 25s linear infinite;		
}


/* PROGRESS BAR */
.progress-bar { 
	position:relative;
	top:1px;
	width:98%; 
	height:5px;
	background:black;
	-moz-animation:fullexpand 25s ease-out infinite;
	-webkit-animation:fullexpand 25s ease-out infinite;
}

/* ANIMATION */
@-moz-keyframes cycle {
	0%  { top:0px; }
	4%  { top:0px; } 
	16% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; } 
	21% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	96% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
	
}
@-moz-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	16% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	24% { top:0px; opacity:1; } 
	36% { top:0px; opacity:1; z-index:0; } 
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	36% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; } 
	56% { top:0px; opacity:1; } 
	60% { top:325px; opacity:0; z-index:0; }
	61% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	56% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	64% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	76% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
	0%  { top:0px; }
	4%  { top:0px; }
	16% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; }
	50% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	96% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
	
}
@-webkit-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	16% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	24% { top:0px; opacity:1; } 
	36% { top:0px; opacity:1; z-index:0; } 
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; }  
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	36% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; } 
	56% { top:0px; opacity:1; z-index:0; } 
	60% { top:325px; opacity:0; z-index:0; } 
	61% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	56% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	64% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	76% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}

 
/*===========================
      VIDEO AREA
===========================*/
.video-area {
  padding-top: 120px;
  padding-bottom: 130px;
 }

.single-features {
  padding: 40px 20px 52px;
  background-color: #fff; }
  .single-features .features-title-icon .features-title a {
    font-size: 36px;
    line-height: 45px;
    color: #121212;
    transition: all 0.3s ease-out 0s;
    font-weight: 400; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .single-features .features-title-icon .features-title a {
        font-size: 24px;
        line-height: 35px; } }
    @media (max-width: 767px) {
      .single-features .features-title-icon .features-title a {
        font-size: 24px;
        line-height: 35px; } }
    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .single-features .features-title-icon .features-title a {
        font-size: 36px;
        line-height: 45px; } }
    .single-features .features-title-icon .features-title a:hover {
      color: #0067f4; }
  .single-features .features-title-icon .features-icon {
    position: relative;
    display: inline-block; }
    .single-features .features-title-icon .features-icon i {
      font-size: 88px;
      line-height: 70px;
      color: #0067f4;
      position: relative;
      z-index: 5; }
    .single-features .features-title-icon .features-icon .shape {
      position: absolute;
      top: 0;
      left: 0; }
  .single-features .features-content .text {
    font-size: 14px;
    line-height: 20px;
    color: #121212;
    margin-top: 16px; }
  .single-features .features-content .features-btn {
    color: #0067f4;
    font-size: 16px;
    font-weight: 700;
    margin-top: 29px; }

/*===========================
       15.ABOUT css 
===========================*/
.about-area{
	text-align: justify;
}

.about-area p {
	color:white;
}
.features-icon span {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url(http://jayalakshmiyatraservice.com/images/temple_icon.png) no-repeat 0px 0px;
    margin-top: 1em;
}

 .test {
	 top: 0;
	 left: 0;
	 width: 350px;
	 height: 330px;
	 margin: 0;
	 padding: 0;
	 font-size: 1vmin;
	 font-family: "Open Sans", sans-serif;
	 color: white;
	 background: #333;
	 position:relative;
}

 .test .container [class*='item'] {
	 width: 33%;
	 height: 33%;
	 border: 1px solid transparent;
	 position:absolute;
	 background: url() center center /cover no-repeat;
	 transition: all 0.5s ease-in-out;
	 z-index: 0;
}
 .test .container [class*='item']:hover {
	 border: 1px solid white;
	 z-index: 1;
}
 .test .container [class*='item']:nth-of-type(1) {
	 top: 0;
	 left: 0;
}
 .test .container [class*='item']:nth-of-type(2) {
	 top: 0;
	 left: 33%;
}
  .test .container [class*='item']:nth-of-type(3) {
	 top: 0;
	 left: 66%;
}
  .test .container [class*='item']:nth-of-type(4) {
	 top: 33%;
	 left: 0;
}
  .test .container [class*='item']:nth-of-type(5) {
	 top: 33%;
	 left: 33%;
}
  .test .container [class*='item']:nth-of-type(6) {
	 top: 33%;
	 left: 66%;
}
  .test .container [class*='item']:nth-of-type(7) {
	 top: 66%;
	 left: 0;
}
  .test .container [class*='item']:nth-of-type(8) {
	 top: 66%;
	 left: 33%;
}
  .test .container [class*='item']:nth-of-type(9) {
	 top: 66%;
	 left: 66%;
}
  .test .container input {
	 display: none;
}
  .test .container input:hover + [class*='item'] {
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 2;
}
 
.icon-color{
color: cyan;	
}
.counter-up{
	padding-top:10px;
	font-weight:bold;
}

.about-title{
	color: cyan;
font-size: 24px;
    font-weight: 500;
	
}

/*===========================
        13.PAYMENT DETAILS
===========================*/
.payment-area{


}

.payment {
    width: 130px;
    text-align: right;
display: inline-block;}
.paymentRight {
    font-weight: 700;
    color: cyan;
	padding-left:10px;
}

/*===== BACK TO TOP =====*/
.back-to-top {
  font-size: 20px;
  color: #fff;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 5px;
  background-color: #0067f4;
  text-align: center;
  z-index: 99;
  transition: all 0.3s ease-out 0s;
  display: none; }
  .back-to-top:hover {
    color: #fff;
    background-color: #0067f4; }



/*===========================
    21.photo Gallary css 
===========================*/
.gallary {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 margin: 10vmin;
	 overflow: hidden;
}
 .gallary .card {
	 flex: 1;
	 transition: all 1s ease-in-out;
	 height: 350px;
	 width:350px;
	 position: relative;
}
 .gallary .card .card__head {
	 color: black;
	 background: rgba(255, 30, 173, 0.75);
	 padding: 0.5em;
	 transform: rotate(-90deg);
	 transform-origin: 0% 0%;
	 transition: all 0.5s ease-in-out;
	 min-width: 100%;
	 text-align: center;
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 font-size: 1em;
	 white-space: nowrap;
}
 .gallary .card:hover {
	 flex-grow: 5;
}
 .gallary .card:hover img {
	 filter: grayscale(0);
}
 .gallary .card:hover .card__head {
	 text-align: center;
	 top: calc(100% - 2em);
	 color: white;
	 background: rgba(0, 0, 0, 0.5);
	 font-size: 2em;
	 transform: rotate(0deg) skew(-5deg);
}
 .gallary .card img {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
	 transition: all 1s ease-in-out;
}
 .gallary .card:not(:nth-child(5)) {
	 margin-right: 1em;
}

/*===========================
    TOUR PLANS
===========================*/
.tour .icon-box li  {
  padding: 30px;
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
  height:300px;
  width:300px;
  color:black;
  margin:30px;
  font-size:18px;
}
.tour .flex-container {
	display:flex;
	flex-flow: row wrap;
}

.tour .icon-box li::before {
  content: '';
  position: absolute;
  background:cadetblue;
  right: -60px;
  top: -40px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  transition: all 0.3s;
  z-index: -1;
  color:white;
  font-weight:bold;
}

.tour .icon-box li:hover::before {
  background:#72efe9;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
  
}

.tour .icon li {
  margin: 0 auto 20px auto;
  padding-top: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: cadetblue;
  transition: all 0.3s ease-in-out;
}

.tour .icon i {
  font-size: 36px;
  line-height: 1;
  color: #fff;
}

.tour .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

.tour  a {
  color: blue;
  text-decoration:underline;
  font-size:16px;
}

.tour .description {
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 0;
}

.tour .icon-box:hover .title a, .tour .icon-box:hover .description {
  color: #fff;
}

.tour .icon-box:hover .icon {
  background: #fff;
}

.tour .icon-box:hover .icon i {
  color: #3498db;
}
/*===========================
    21.CONTACT US BLOCK
===========================*/

.contact{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
	
}

.contact .card{
    position: relative;
    cursor: pointer;
	background-color:cadetblue
}

.contact .card .face{
    width: 300px;
    height: 200px;
    transition: 0.5s;
}

.contact .card .face.face1{
    position: relative;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
}

.contact .card:hover .face.face1{
    background: purple;
    transform: translateY(0);
}

.contact .card .face.face1 .content{
    opacity: 0.2;
    transition: 0.5s;
}

.contact .card:hover .face.face1 .content{
    opacity: 1;
}

.contact .card .face.face1 .content img{
    max-width: 100px;
}

.contact .card .face.face1 .content h3{
    margin: 10px 0 0;
    padding: 0;
    color: #fff;
    text-align: center;
    font-size: 1.5em;
}

.contact .card .face.face2{
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-100px);
}

.contact .card:hover .face.face2{
    transform: translateY(0);
}

.contact .card .face.face2 .content p{
    margin: 0;
    padding: 0;
}

.contact .card .face.face2 .content a{
    margin: 15px 0 0;
    display:  inline-block;
    text-decoration: none;
    font-weight: 900;
    color: #333;
    padding: 5px;
    border: 1px solid #333;
}

.contact .card .face.face2 .content a:hover{
    background: #333;
    color: #fff;
}