/*<img class="icon icon-instagram">
* metodos de utilizando passar o parametro icon
*
*
*/

.pointer{
  cursor: pointer;
}

.icon{
  background-repeat:no-repeat;
  background-position: center;
  background-color: transparent;
  display: inline-block;
  font-style:normal;
  font-variant:normal;
  text-rendering:auto;
  line-height:1;
  background-size: 100% 100%;
  width: 32px;
  height: 32px;
  border: none;
}

.icon-withtext{
  justify-items: center;
  align-content: center;
}

.icon-phone{
  background-image: url('image/icon-phone.png');
}

.icon-facebook{
  background-image: url('image/icon-facebook.png');
}
.icon-instagram{
  background-image: url('image/icon-instagram.png');
}
.icon-gmail{
  background-image: url('image/icon-gmail.png');
}
.icon-copy{
  background-image: url('image/icon-copy.png');
}

.icon-email{
  background-image: url('image/icon-email.png');
}

/*https://www.iconfinder.com/icons/299040/star_icon*/
.icon-star{
  background-image: url('image/icon-star.png');
}

/*https://www.iconfinder.com/icons/384897/bell_decoration_ring_icon*/
.icon-bell{
  background-image: url('image/icon-bell.png');
}

/*https://www.iconfinder.com/icons/3838430/engine_gear_setting_icon*/
.icon-gear{
  background-image: url('iamge/icon-gear.png');
}

/**/
.icon-house{
  background-image: url('image/icon-house.png');
}

/*https://www.iconfinder.com/icons/3940044/dig_shovel_icon*/
.icon-shovel{
  background-image: url('image/icon-shovel.png');
}

/*https://www.iconfinder.com/icons/410519/linkedin_social_icon*/
.icon-linkedin{
  background-image: url('image/icon-linkedin.png');
}

.icon-whatsapp{
  background-image: url('image/icon-whatsapp.png');
}

/*https://www.iconfinder.com/icons/293686/loading_icon*/
.icon-loading-ios{
  background-image: url("image/icon-loading-ios.png");
}

/*https://www.iconfinder.com/icons/5298720/buffering_loading_icon*/
.icon-loading{
  background-image: url('image/icon-loading.png');
}

.icon-excel{
  background-image: url('image/icon-excel.png');
}

/*https://www.iconfinder.com/icons/2993664/brand_brands_logo_logos_word_icon*/
.icon-word{
  background-image: url('image/icon-word.png');
}

/**/
.icon-powerpoint{
  background-image: url('image/icon-powerpoint.png');
}

/*https://www.iconfinder.com/icons/2993670/brand_brands_logo_logos_paypal_icon*/
.icon-paypal{
  background-image: url('image/icon-paypal.png');
}

.icon-playstore{
  background-image: url('image/icon-playstore.png');
}

/*https://www.iconfinder.com/icons/2799204/business_management_office_setting_success_icon*/
.icon-gear-checked{
  background-image: url('image/icon-gear-checked.png');
}

/*https://www.iconfinder.com/icons/3592826/employee_human_member_office_remove_remove_user_user_icon*/
.icon-human-comercial{
  background-image: url('image/icon-human-comercial.png');
}

/*https://www.iconfinder.com/icons/3592847/general_office_repair_repair_tool_screwdriver_tools_wrench_icon*/
.icon-repair{
  background-image: url('image/icon-repair.png');
}

/*https://www.iconfinder.com/icons/3592864/general_graph_increase_office_rise_statistics_success_icon*/
.icon-graphpanel{
  background-image: url('image/icon-graphpanel.png');
}

/*https://www.iconfinder.com/icons/3592819/general_graph_office_overview_part_pie_chart_portion_icon*/
.icon-graphpizza{
  background-image: url('image/icon-graphpizza.png');
}

/*https://www.iconfinder.com/icons/3605332/construction_engineer_hard_hat_helmet_protection_safety_icon*/
.icon-helmet{
  background-image: url('image/icon-helmet.png');
}

/*https://www.iconfinder.com/icons/3605317/centimeter_geometric_measure_measurement_ruler_rulers_scale_icon*/
.icon-measure{
  background-image: url('image/icon-measure.png');
}

/*https://www.iconfinder.com/icons/3440894/add_additional_document_file_filetype_paper_icon*/
.icon-document-add{
  background-image: url('image/icon-document-add.png');
}

/*https://www.iconfinder.com/icons/3440879/delete_document_file_filetype_paper_remove_icon*/
.icon-document-remove{
  background-image: url('image/icon-document-remove.png');
}


.icon-marketing-cloud{
  background-image: url('image/icon-marketing-cloud.png');
}

.icon-web-analit{
  background-image: url('image/icon-web-analit.png');
}

/*https://www.iconfinder.com/icons/2944874/alerts_bell_interface_smart_sound_icon*/
.icon-bell-alert{
  background-image: url('image/icon-bell-alert.png');
}

.icon-calendar{
  background-image: url('image/icon-calendar.png');
}

.icon-graphmoney{
  background-image: url('image/icon-graph-money.png');
}

.icon-coin-dolar{
  background-image: url('image/icon-coin-dolar.png');
}

.icon-profile{
  background-image: url('image/icon-profile.png');
}

.icon-arrow-curver-left{
  background-image: url('image/icon-arrow-curve-left.png');
}

.icon-arrow-curver-right{
  background-image: url('image/icon-arrow-curve-right.png');
}

.icon-arrow-curver-left:hover{
  opacity: 0.5;
}

.icon-arrow-curver-right:hover{
  opacity: 0.5;
}

.icon-phone-black{
  background-image: url('image/icon-phone-black.png');
}

/*
Arrow in slide
 */

.icon-items-arrow{
  display: block;
  position: absolute;
  padding: 1%;
  width: 100%;
  top: 40%;
}

.icon-arrow-left{
  float: left;
  clear: both;
  cursor: pointer;
  background-image: url('image/arrow-left.png');
}
.icon-arrow-right{
  float: right;
  cursor: pointer;
  background-image: url('image/arrow-right.png');
}

.icon-arrow-right,.icon-arrow-left{
    background-color: #bfbfbf;
    opacity: 0.7;
}

.icon-arrow-right:hover,.icon-arrow-left:hover{
    opacity: 1;
}

.icon-arrow-right:active,.icon-arrow-left:active{
    background-color: #666666;
}

/*
end arrow in slide
 */


/*Toda a parte de animação estara abaixo
*sempre que utilizar alguma animação deve ser utilizado
*o icon-animate || icon-animate-slow
*para formatar a transição caso crie a propria transição
*não precisa utilizar
*
*/

 .icon-animate{
  transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
}

/*Utilizando o icon-animate-infinite
* ira ser linear e infinito
*/
.icon-animate-infinite{
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/*Utilizando quando quiser que a animação seja um pouco mais lenta
*/
.icon-animate-slow{
  transition: all 2s ease 0s;
	-moz-transition: all 2s ease 0s;
	-webkit-transition: all 2s ease 0s;
	-ms-transition: all 2s ease 0s;
  -o-transition: all 2s ease 0s;
}

.icon-rotate-hover:hover{
  transform: scale(1.15) rotate(360deg);
	-webkit-transform: scale(1.1) rotate(360deg);
	-moz-transform: scale(1.1) rotate(360deg);
	-ms-transform: scale(1.1) rotate(360deg);
	-o-transform: scale(1.1) rotate(360deg);
}

/*Keyframes da animação chamada rotate estão abaixo*/
.icon-rotate{
  animation-name: rotate;
  animation-duration: 2s;
}

@keyframes rotate{
  to{transform: rotate(360deg);}
  /*
	-webkit-transform: scale(1.1) rotate(360deg);
	-moz-transform: scale(1.1) rotate(360deg);
	-ms-transform: scale(1.1) rotate(360deg);
	-o-transform: scale(1.1) rotate(360deg);*/
}

@-webkit-keyframes rotate{
  to{transform: rotate(360deg);}
}
/*Fim das animações do rotate*/


/*Animações de chacoalhar*/
.icon-shake{
  animation-name: shake;
  animation-duration: 0.2s;
  animation-iteration-count: 3;
}

.icon-shake-hover:hover{
  animation-name: shake;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-iteration-count: 3;
}

@keyframes shake{
  20%{transform:rotate(20deg)}
  50%{transform:rotate(0deg)}
  75%{transform:rotate(-20deg)}
  100%{transform:rotate(0deg)}
}
/*Fim das animações de chacoalhar*/

.icon-translate-hover:hover{
  transition: all 2s ease 0s;
  transform: rotateY(360deg); /* Standard syntax */
}

.icon-translate{
  animation-name: translateY;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes translateY{
  to{transform: rotateY(360deg);}
}