@charset "utf-8";
/* CSS Document */

/******************************

[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
4. Menu
5. Home
6. Services
7. Boxes
8. Tabs
9. Footer


******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i,800,900');

/*********************************
2. Body and some general stuff
*********************************/


/*********************************
3. Header
*********************************/

/*********************************
4. Menu
*********************************/


/*********************************
5. Home
*********************************/


/*********************************
6. Services
*********************************/

.services
{
	width: 100%;
	background: #FFFFFF;
	padding-top: 99px;
	padding-bottom: 102px;
}
.icon_boxes_row
{
	margin-top: 100px;
}
.icon_box
{
	margin-bottom: 85px;
}
.icon_box_icon
{
	width: 49px;
	height: 49px;
}
.icon_box_icon img
{
	max-width: 100%;
}
.icon_box_title
{
	font-size: 20px;
	font-weight: 600;
	color: #404040;
	padding-left: 25px;
}
.icon_box_text
{
	font-size: 14px;
	font-weight: 500;
	color: #838383;
	line-height: 2.14;
	margin-top: 21px;
}
.services_button
{
	margin-top: 4px;
}

/*********************************
7. Boxes
*********************************/

.boxes
{
	width: 100%;
}
.box
{
	width: calc(100% / 3);
	padding-top: 79px;
	padding-left: 90px;
	padding-bottom: 64px;
	padding-right: 30px;
}
.box_title
{
	font-size: 30px;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 1.2;
}
.box_subtitle
{
	font-size: 11px;
	font-weight: 600;
	color: #FFFFFF;
	text-transform: uppercase;
	line-height: 0.75;
	margin-top: 16px;
	padding-left: 1px;
}
.box_text
{
	margin-top: 60px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255,255,255,0.66);
	line-height: 2.14;
	padding-left: 3px;
}
.box_button
{
	margin-top: 77px;
}

/*********************************
8. Tabs
*********************************/


/*********************************
9. Services
*********************************/

/*tooltip Box*/
.con-tooltip {

  position: relative;
  background: #F2D1C9;
  
  border-radius: 9px;
  padding: 0 20px;
  margin: 10px;
  
  display: inline-block;
  
  transition: all 0.3s ease-in-out;
  cursor: default;

}

/*tooltip */
.tooltip {
  visibility: hidden;
  z-index: 1;
  opacity: .40;
  
  width: 500px;
  padding: 0px 20px;

  background: #333;
  color: #E086D3;
  
  position: absolute;
  top:-140%;
  left: -25%;
  

  border-radius: 9px;
  font: 16px;

  transform: translateY(9px);
  transition: all 0.3s ease-in-out;
  
  box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}


/* tooltip  after*/
.tooltip::after {
  content: " ";
  width: 0;
  height: 0;
  
  border-style: solid;
  border-width: 12px 12.5px 0 12.5px;
  border-color: #333 transparent transparent transparent;

  position: absolute;
  left: 40%;

}

.con-tooltip:hover .tooltip{
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
    transition: .3s linear;
  animation: odsoky 1s ease-in-out infinite  alternate;

}
@keyframes odsoky {
  0%{
    transform: translateY(6px);	
  }

  100%{
    transform: translateY(1px);	
  }

}

/*hover ToolTip*/
.bottom:hover {transform: translateY(6px);}

/*bottom*/

.bottom .tooltip { top:115%; left:-20%; }

.bottom .tooltip::after{
  top:-17%;
  left:40%;
  transform: rotate(180deg);
}