.social-wrapper .row3{
    padding-left: 10rem;
}

.social-wrapper .row4{
    padding-left: 9.5rem;
}

.social-wrapper .row5{
    padding-left: 13rem;
}
.social-wrapper .row5 .hexa-button{

    margin-left: 3.5rem;
}





 

.btn-1b:before{
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    color: #fff;
    z-index: 2;
    line-height: 1.8 !important;
    font-size: 3rem;
    display: inline-block;
    padding-right: 0rem;
    

}




/*############################ btn1 ##################################*/
.btn-1::after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 32.5%;
    left: 22.5%;
    height: 20px;
    width: 20px;
    background: #000;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
/*######################### btn2 #################################*/
.btn-2::before{
    background: transparent !important;
}
.btn-2::after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 15%;
    left: 31%;
    height: 40px;
    width: 2px;
    background: #ccc;
    -webkit-box-shadow: .2rem 0.3rem .5rem rgba(0, 0, 0, .8) !important;
            box-shadow: .2rem 0.3rem .5rem rgba(0, 0, 0, .8) !important;
    border-radius: 5rem !important;
    
   
    
}

/*############################ btn3 ####################################*/
.btn-3{
    width:60px !important;
    height: 65px !important;
    border-radius: 5px;
    -webkit-box-shadow: 0.5rem 0.5rem 1.7rem rgba(0, 0, 0, 0.6);
            box-shadow: 0.5rem 0.5rem 1.7rem rgba(0, 0, 0, 0.6);
}
.btn-3::after{
    display: none !important;
    
}
.btn-3::before{
    background: none !important;
    line-height: 2.2 !important;
    padding-left: .2rem;
}

.btn-3a{
    border-radius: 50%;
    height: 70px;
    width: 70px;
}
.btn-3a::before{
    background: none !important;
    line-height: 2.3 !important;
    padding-left: .5rem !important;
}




 
 



/* ####################### INDIVIDUAL BUTTON BACKGROUND ###################################*/

/* ######### FACEBOOK  BUTTON ######### */
.btn-facebook{
    background-color: hsl(221, 44%, 42%);
}
.btn-facebook:hover{
    background-color: hsl(221, 44%, 35%);
}


/* ######### TWITTER  BUTTON ######### */

.btn-twitter{
    background-color:hsl(206, 82%, 64%);
}
.btn-twitter:hover{
    background-color:hsl(206, 82%, 60%);

}

/* ######### INSTAGRAM  BUTTON ######### */

.btn-instagram{
    background-color: hsl(33, 31%, 82%);
}
.btn-instagram:hover{
    background-color :hsl(33, 31%, 82%);

}

/* ######### PINTEREST  BUTTON ######### */

.btn-pinterest{
    background-color: hsl(358, 73%, 46%);
}
.btn-pinterest:hover{
    background-color :hsl(358, 73%, 40%);

}


/* ######### GITHUB  BUTTON ######### */

.btn-github{
    background-color: hsl(300, 100%, 25%);
}
.btn-github:hover{
    background-color :hsl(300, 100%, 20%);

}




/* ####################### Social icons by using pseudo ::before classes ######################### */

/* ######### FACEBOOK  BUTTON ######### */
.btn-facebook:before {
    
    content: "\f09a";
    


}


/* ######### TWITTER  BUTTON ######### */
.btn-twitter:before {
    
    content: "\f099";
  


}

/* ######### INSTAGRAM  BUTTON ######### */
.btn-instagram:before {
    
    content: "\f16d";
   


}

/* #########  PINTEREST  BUTTON ######### */
.btn-pinterest:before {
    
    content: "\f0d2";
  


}

/* ######### GITHUB  BUTTON ######### */
.btn-github:before {
    
    content: "\f113";
   


}



/*######################## hexa social buttons #########################*/
.hexa {
	width: 50px;
	height: 75px;
	position: relative;
    z-index:-1;
    margin:0 auto;
}
.hexa:before {
	content: "";
	left:-50px;
	display:block;
    position: relative;
    border-top: 35px solid transparent;
    border-bottom: 40px solid transparent;
}
.hexa:after {
  content: "";
  right:-50px;
  top:-75px;
  position: relative;
  display:block;
  border-top: 35px solid transparent;
  border-bottom: 40px solid transparent;
}
.hex-over {
  z-index:5;
  position:relative;
  width:100%;
  top:-70px;
  text-align:center;
  color:#fdfdfd;
  font-size:3.5rem;
  padding:5px 0px 0px 0px;
  font-weight:700 !important;
  
}

.hexa-button .btn-facebook::before{
    border-right: 20px solid #3C5A9A !important;
}

.hexa-button .btn-facebook::after{
    border-left: 20px solid #3C5A9A !important;
}


.hexa-button .btn-twitter::before{
    border-right: 20px solid #58ADEE !important;
}

.hexa-button .btn-twitter::after{
    border-left: 20px solid #58ADEE !important;
}


.hexa-button .btn-instagram::before{
    border-right: 20px solid #DFD3C3 !important;
}

.hexa-button .btn-instagram::after{
    border-left: 20px solid #DFD3C3 !important;
}


.hexa-button .btn-pinterest::before{
    border-right: 20px solid #CB2025 !important;
}

.hexa-button .btn-pinterest::after{
    border-left: 20px solid #CB2025 !important;
}

.hexa-button .btn-github::before{
    border-right: 20px solid #800080 !important;
}

.hexa-button .btn-github::after{
    border-left: 20px solid #800080 !important;
}





/*######################### MEDIA QUERIES ###########################*/
@media screen and (max-width:1200px){
    
    .btn-1b {
        font-size: 1.8rem !important;
        padding-left: 7rem !important;
    }
    
    
    .btn-1::before{
        width: 35% !important;
    }
    .btn-1::after {

        top: 32.5%;
        left: 24.5% !important;

    }
    .btn-2::after {
        left: 35.5% !important;
    }

    .btn-3::before{

    padding-left: 2rem !important;
}
.btn-3a{
    border-radius: 50%;
    height: 75px !important;
    width: 75px !important;
    
}
    .btn-3a::before{
        margin-top: .25rem !important;
    }

}

@media screen and (max-width:991px){
  
    
     .btn-1b {
        font-size: 1rem !important;
        padding-left: 5.5rem !important;
    }
    
    .btn-1b:before{
   
        width: 50px !important;;
        font-size: 2.5rem;
        line-height: 2.3 !important;


}
    .btn-1::before{
        width: 38% !important;
    }
    .btn-1::after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 32.5%;
    left: 22.5%;
    height: 20px;
    width: 20px;
    background: #000;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

    
    .btn-2::after {
        left: 37% !important;
    }

    .btn-3::before{
     
     padding: .5rem .5rem 0 2rem !important;
}
.btn-3a{
    border-radius: 50%;
    height: 65px !important;
    width: 65px !important;
    
}
    .btn-3a::before{
       padding: .1rem 0rem 0 2rem !important;
    }
    .social-wrapper .row5 .hexa-button{

    margin-left: 2rem !important;
}
    .hexa {
	 width: 45px !important;
	 height: 70px !important;
       
          
	
}
        .social-wrapper .row3{
      padding-left: 4rem !important;
      
}

.social-wrapper .row4{
    padding-left: 4rem !important;
    
}

.social-wrapper .row5{
    padding-left: 8rem !important;
    
    
}
.social-wrapper .row5 .hexa-button{
  
}
.hexa:before {
	
	left:-45px !important;
    border-bottom: 35px solid transparent !important;
}
.hexa:after {
    right:-45px !important;
   top:-70px !important;
   border-bottom: 35px solid transparent !important;
}
.hex-over {

  top:-70px;
 
  font-size:2.5rem !important;
  padding:17px 10px 0px 12px !important;

  
}
    
}

@media screen and (max-width:767px){

   
    
    .row{
    }

    .btn-1b{
        margin: .5rem !important;
        width: 50%;
        position: relative;
        left: 0px;
         font-size: 1.8rem !important;
        
     }

     .btn-1b:before{
         line-height: 5rem !important;
         background: rgba(0, 0, 0, 1);
         font-size: 2rem !important;
         color: #fff;
         padding-top: .4rem;
         width: 60px !important;

     }
    
 

    .btn-1::after{

        left:17% !important;
   
}

    
    .btn-2::after {
        left: 23.5% !important;
    }
    
    .social-wrapper .row3{
      padding-left: 0 !important;
      margin-top: 0rem !important;
}

.social-wrapper .row4{
    padding-left: 0rem !important;
    margin-top: 0 !important;
}

.social-wrapper .row5{
    padding-left: 0rem !important;
    margin-top: 0px !important;
    margin-left: -2.5rem !important;
}
.social-wrapper .row5 .hexa-button{
  margin-top: -3rem !important;
}
    .social-wrapper .row5 .first-child{
        margin-left: 4.2rem !important
    }    
       .btn-3::before{
       padding: 1rem .5rem 0 .7rem !important;
}

    .btn-3a::before{
       padding: .7rem 0rem 0 .7rem !important;
    }
    
  

 }

@media screen and (max-width:575px){
  
    .btn-1::before{
        width: 23% !important;
    }
      .btn-1::after{

        left:16.5% !important;
   
}
    .btn-2::after{
        left: 23% !important;
    }
}

@media screen and (max-width:480px){

    .jumbotron h1{
        font-size: 2.5rem !important;
    }
    .jumbotron p{
        font-size: 1.5rem !important;
    }
    .btn-1b{
       
        
       
    }
    .btn-1 , .btn-2{
        width: 50% !important;
        font-size:1.4rem !important;
    }
    .btn-1::before{
       width: 55px !important;
    }
    
    .btn-1::after{

        left:19% !important;
   
}
    .btn-2::before{
        margin-left: -.79rem !important
    }
    .btn-2::after {
        left: 28% !important;
    }
     footer{
        
        width: 100% !important;
    }

 }