/*--------------------------------------------------------------
# Main Icons
--------------------------------------------------------------*/

  .icon-main {
	    	background-image: url(../icons/icon.png);
		background-repeat:  no-repeat;
		background-size:  cover;
background-position: center center;
	width: 50px;
	height: 50px;
	display: flex;

	justify-content: center;
	align-items: center;

	margin-left: 11px;
	margin-right:11px;
	margin-top: 15px;
		
}
  .icon-main:hover {
	    	background-image: url(../icons/icon-footer.png);
		background-repeat:  no-repeat;
		background-size:  cover;
background-position: center center;
	width: 50px;
	height: 50px;
	display: flex;

	justify-content: center;
	align-items: center;

	margin-left: 11px;
	margin-right:11px;
	margin-top: 15px;
	
}

.icon-main img{
	width: 33;
height: auto;
	 transition:2.5s; 


}
.icon-main img:hover{
    background:url("imageThatAppearsAfterHovering.png");
    -o-transform:rotate(720deg);
    -ms-transform:rotate(720deg);
    -moz-transform:rotate(720deg);
    -webkit-transform:rotate(720deg);
    transform:rotate(720deg); /* How many times it'll rotate = degrees÷360 */
}


/*--------------------------------------------------------------
# Main Icons
--------------------------------------------------------------*/

  .icon-social {
	    	background-image: url(../icons/icon.png);
		background-repeat:  no-repeat;
		background-size:  cover;
background-position: center center;
	width: 45px;
	height: 45px;
	display: flex;

	justify-content: center;
	align-items: center;

margin-left: 6px;
	margin-right:6px;
	margin-top: 15px;
		
}
  .icon-social:hover {
	    	background-image: url(../icons/icon2.png);
		background-repeat:  no-repeat;
		background-size:  cover;
background-position: center center;
width: 45px;
	height: 45px;
	display: flex;

	justify-content: center;
	align-items: center;

	margin-left: 6px;
	margin-right:6px;
	margin-top: 15px;
	
}

.icon-social img{
	width: 30;
height: auto;
	 transition:2.5s; 


}
.icon-social img:hover{
    background:url("imageThatAppearsAfterHovering.png");
    -o-transform:rotate(720deg);
    -ms-transform:rotate(720deg);
    -moz-transform:rotate(720deg);
    -webkit-transform:rotate(720deg);
    transform:rotate(720deg); /* How many times it'll rotate = degrees÷360 */
}


/*--------------------------------------------------------------
# Internal-Icons
--------------------------------------------------------------*/

  .icon {
	    	background-image: url(../icons/icon.png);
		background-repeat:  no-repeat;
		background-size:  cover;
background-position: center center;
	width: 45px;
	height: 45px;
	display: flex;

	justify-content: center;
	align-items: center;
	 transition:2.5s; 

	
}
.icon:hover{
	    	background-image: url(../icons/icon.png);
		background-repeat:  no-repeat;
		background-size:  cover;
background-position: center center;
	width: 45px;
	height: 45px;
	display: flex;

	justify-content: center;
	align-items: center;
	 transition:2.5s; 

}
.icon img{
	width: 27;
height: auto;
	 transition:2.5s; 

}
.icon img:hover{
    background:url("imageThatAppearsAfterHovering.png");
    -o-transform:rotate(720deg);
    -ms-transform:rotate(720deg);
    -moz-transform:rotate(720deg);
    -webkit-transform:rotate(720deg);
    transform:rotate(720deg); /* How many times it'll rotate = degrees÷360 */
}

/*--------------------------------------------------------------
# Footer Icons
--------------------------------------------------------------*/

  .icon-footer {
	    	background-image: url(../icons/icon-footer.png);
		background-repeat:  no-repeat;
		background-size:  cover;
background-position: center center;
	width: 25px;
	height: 25px;
	display: flex;

	justify-content: center;
	align-items: center;

	margin-left: 15px;
	margin-right:15px;
	
}



  .icon-footer:hover{
	    	background-image: url(../icons/icon-footer.png);
		background-repeat:  no-repeat;
		background-size:  cover;
background-position: center center;
	width: 25px;
	height: 25px;
	display: flex;

	justify-content: center;
	align-items: center;

	margin-left: 15px;
	margin-right:15px;
	
}
.icon-footer img{
	width: 18;
height: auto;
transition:2.5s; 
}

.icon-footer img:hover{
    background:url("imageThatAppearsAfterHovering.png");
    -o-transform:rotate(920deg);
    -ms-transform:rotate(920deg);
    -moz-transform:rotate(920deg);
    -webkit-transform:rotate(920deg);
    transform:rotate(920deg); /* How many times it'll rotate = degrees÷360 */
}


/*--------------------------------------------------------------
# Footer Icons
--------------------------------------------------------------*/

  .icon-footer-internal {
	    	background-image: url(../icons/icon-footer.png);
		background-repeat:  no-repeat;
		background-size:  cover;
background-position: center center;
	width: 35px;
	height: 35px;
	display: flex;

	justify-content: center;
	align-items: center;

	margin-left: 30px;
	margin-right:30px;
	
}



  .icon-footer-internal:hover{
	    	background-image: url(../icons/icon.png);
		background-repeat:  no-repeat;
		background-size:  cover;
background-position: center center;
	width: 35px;
	height: 35px;
	display: flex;

	justify-content: center;
	align-items: center;

	margin-left: 30px;
	margin-right:30px;
	
}
.icon-footer-internal img{
	width: 20;
height: auto;
transition:2.5s; 
}

.icon-footer-internal img:hover{
    background:url("imageThatAppearsAfterHovering.png");
    -o-transform:rotate(920deg);
    -ms-transform:rotate(920deg);
    -moz-transform:rotate(920deg);
    -webkit-transform:rotate(920deg);
    transform:rotate(920deg); /* How many times it'll rotate = degrees÷360 */
}
/*--------------------------------------------------------------
# Swap
--------------------------------------------------------------*/

.swap a {
  display: block;

}



.swap a:hover img {
  opacity: 1;
  transition: all .6s ease-in-out;
}