* {
/* With these codes padding and border does not increase it's width and gives intuitive style.*/

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body{margin: 0;margin: 0;padding: 0;width: 100%;font-family: 'Open Sans', sans-serif;height:auto;background:#effbf5;}

ul.navbar a{color: #444444;text-decoration: none;font-weight: normal;line-height: 200%;}
ul.navbar a:hover{color: #78de00;}
ul.navbar1 a{color: #444444;text-decoration: none;font-weight: normal;line-height: 200%;}
ul.navbar1 a:hover{color: #78de00;}

header {background-color:#fdfdfd;
/*Opacity start*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    /*Opacity end*/

width: 100%;height: 68px;position: fixed;top: 0;left: 0;z-index: 100;border-bottom: 2px solid lightgrey;}

footer {background: #2E3639; width: 100%;height: auto;position: relative;bottom: 0;left: 0;z-index: 100;}
#logo{margin-left: 35px;float: left;width: 280px;height: 60px;margin-top:4px;background: url(unihiringlogo.png) no-repeat center;display: block;}

nav{float: right;padding: 1px 1px 0 0; color:#ffffff;font-family: Verdana, Arial, Helvetica, sans-serif;font-size:0.9em;font-weight:lighter;line-height:1px;padding:11px 11px;}
nav1{float: right;padding: 1px 1px 0 0; color:#ffffff;font-family: Verdana, Arial, Helvetica, sans-serif;font-size:0.9em;font-weight:lighter;line-height:1px;padding:11px 11px;}

#menu-icon {display: hidden;width: 40px;height: 40px;background: #363636 url(icon-mobile.png) center;}
a:hover#menu-icon {background-color: #444;border-radius: 4px 4px 0 0;}

ul.navbar { list-style: none; }
ul.navbar li{display: inline-block;float: left;padding: 1px 2px}
ul.navbar1 { list-style: none; }
ul.navbar1 li{display: inline-block;float: left;padding: 1px 2px}


.current {color: #3bbf98;}
section {margin: 80px auto 40px;max-width: 980px;position: relative;padding: 20px}
/*MEDIA QUERY*/
@media only screen and (max-width : 640px) { /*If device width is higher than 640px use this css and if less than 640px use above */
header {position: fixed;}
body{font-size: 3.2vw;height:auto;}
.bigger{font-size: 3.2vw;height:auto;}
#clients{height:315px;background:#f0f0f0;width:100%;}
#menu-icon {display:none;}
nav ul, nav:active ul { display: none;position: absolute;padding: 20px;background: #363636;right: 20px; top: 60px;width: 50%;border-radius: 4px 0 4px 4px;}
nav li {text-align: center;width: 100%;padding: 10px 0;margin: 0;}
nav:hover ul {display: block;top:0px;z-index:100;}
}

#main{ background:#edf5f2;	height:1000px;}

form{
width:40%;
margin:3% 20%;
}

/* Makes responsive fields. Sets size and field alignment.*/

input[type="file"] {
cursor:pointer;
}


#submit
{

margin-bottom: 7px;
width:100%;
padding: 2% 2%;
border-radius:4px;
border:2px solid #ffffff;
background:#6ad3ed;
font-family: Verdana, Arial, Helvetica, sans-serif;
letter-spacing: -1px;
text-align: center;
vertical-align: middle;
font-weight:bold;
color:#ffffff;
font-size:1.4em;
cursor:pointer;


}
#submit:hover
{
background:#ffffff;
color:#6ad3ed;	
}






.ctabutton2{		display: inline-block;	font-family: 'Open Sans', sans-serif;	width: 100px; height: 35px;	background:#fdfdfd;	border-radius: 15px;	text-align: center;	text-decoration:none;	letter-spacing: 0.5px;line-height:95px;font-size: 140%;	color:#444444;	font-weight:lighter;}
.ctabutton2:hover{ color: #78de00;}

.ctabutton3{display: inline-block;	font-family:verdana;	width: 100px;	background:#ffffff;	text-align: center;	text-decoration:none;font-size: 100%;color:#000a04;	font-weight:bolder;letter-spacing:-1px; padding: 2px 14px;margin-right:10px;margin-top:4px;border:2px solid #78de00;}
.ctabutton3:hover{border:3px solid #78de00; }


#column{width:100%;height:380px;}
#column1{		position:absolute;		 left: 0px;width:52%;height:370px;	}
#column2{		position:absolute;		left:52.1%;width:47.9%;	height:auto;}
.column1bg{ background-image: url('image3.png'); width: 100%;
    background-size: 100% 100%;
}


#partnerhead{width:100%;height:200px;background:#6ad3ed;
margin-top:65px;}

#details1{ position:absolute;left: 0px; width: 25%;text-align: center;
vertical-align: middle; }
#details3{position:absolute;left:75%; width: 25%;text-align: center;
vertical-align: middle;  }
#details2{position:absolute;  left:25%; width: 50%; text-align: center;
vertical-align: middle; }


.calldetails{font-size:18px;font-family: Verdana, Arial, Helvetica, sans-serif;color:#333333; letter-spacing: -1px;
}
.biggerdetails{ font-size: 250%;;font-family: Verdana;color:#ffffff; letter-spacing: -3px;line-height:40px;margin-top:60px; }




caption{	font:Arial;font-size: 2em; font-weight:bold;text-align:center;text-color:#49aa7b;}




.center{	text-align: center;}

table{		border-collapse: collapse;	width:  100%;margin:auto;}

table a:link, table a:visited, table a:active {
  color: #35b58f;
  text-decoration: none;
}

table a:hover {
  color: #b9b9b9;
  text-decoration: underline;
}

#tabCtrl table{		border-collapse: collapse;	width:  100%;margin:auto;}
#tabCtrl th{	font-family: Verdana, Arial, Helvetica, sans-serif;			padding:5 5 5 5;	font-size: 0.9em; font-weight:normal;		background:#edf5f2;}
#tabCtrl td{	font-family: Verdana, Arial, Helvetica, sans-serif;			padding:5 5 5 5;	font-size: 0.9em; font-weight:normal;		background:#ffffff;	}
#tabCtrl{padding: 5% 0%;}

img{width:28%;}

#6steps{height:450px;width:100%;margin-top:5px;}
.stepsfeaturer{font-size: 220%;font-family: Verdana;color:#42570a; letter-spacing: -1px;line-height:100px;text-align: center;vertical-align: middle;}
#1strow{height:225px;width:100%;}
#step1{ position:absolute;left: 10%; width: 25%;text-align: center;vertical-align: middle; }
#step2{position:absolute;left:37.5%; width: 25%;text-align: center;vertical-align: middle;  }
#step3{position:absolute;  left:65%; width: 25%; text-align: center;vertical-align: middle; }
#2ndrow{height:225px;width:100%;margin-top:50%;}
#step4{ position:absolute;left: 10%; width: 25%;text-align: center;vertical-align: middle;  }
#step5{position:absolute;left:37.5%; width: 25%;text-align: center;vertical-align: middle; }
#step6{position:absolute;  left:65%; width: 25%; text-align: center;vertical-align: middle; }

.step1bg{height:225px;background:#bde9bb;width:100%;margin-top:2%;}
.step2bg{height:225px;background:#ade3aa;width:100%;margin-top:2%;}
.step3bg{height:225px;background:#9ed89d;width:100%;margin-top:2%;}

.step4bg{height:225px;background:#91e0b3;width:100%;margin-top:22%;}
.step5bg{height:225px;background:#7dd7b3;width:100%;margin-top:22%;}
.step6bg{height:225px;background:#75d6bd;width:100%;margin-top:22%;}

.step1bg:hover{background:#75d6bd;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=80);
    -moz-opacity: 0.80;-khtml-opacity: 0.8;opacity: 0.8;}
.step2bg:hover{background:#7dd7b3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=80);
    -moz-opacity: 0.80;-khtml-opacity: 0.8;opacity: 0.8;}
.step3bg:hover{background:#91e0b3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=80);
    -moz-opacity: 0.80;-khtml-opacity: 0.8;opacity: 0.8;}
.step4bg:hover{background:#9ed89d;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=80);
    -moz-opacity: 0.80;-khtml-opacity: 0.8;opacity: 0.8;}
.step5bg:hover{background:#ade3aa;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=80);
    -moz-opacity: 0.80;-khtml-opacity: 0.8;opacity: 0.8;}
.step6bg:hover{background:#bde9bb;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=80);
    -moz-opacity: 0.80;-khtml-opacity: 0.8;opacity: 0.8;}




.call{font-size:18px;font-family: Verdana, Arial, Helvetica, sans-serif;color:#333333; letter-spacing: -1px;
}
.bigger { font-size: 250%;;font-family: Verdana;color:#8cc63f; letter-spacing: -3px;line-height:280px; }

#featured{height:80px;background:#edf5f2;width:100%;}
.featurer{font-size: 250%;;font-family: Verdana;color:#aacc00; letter-spacing: -3px;margin-left:105px;line-height:90px;margin-top:40px;}

#clients{height:500px;background:#edf5f2;width:100%;}

#clients1{ position:absolute;left: 0px; width: 33.3%;text-align: center;
vertical-align: middle; }
#clients3{position:absolute;left:66.6%; width: 33.3%;text-align: center;
vertical-align: middle;  }
#clients2{position:absolute;  left:33.3%; width: 33.3%; text-align: center;
vertical-align: middle; }




#holder{font-family: Verdana, Arial, Helvetica, sans-serif;font size:20px;height:auto;	width:100%;	margin-top:50px;	}
#top{	width:100%;	height:53px;		background:#bee2bf;		border: 1px solid #f7f7f7;	padding:21px 13px;	}
#top h1{margin-left:32px;	line-height:8px; color:#ffffff;	padding:0px;}
#top h2{margin-left:32px;color:#ffffff;	line-height:6px;	padding:0px;}
#top h3{	color:#ffffff;margin-left:32px;line-height:2px;margin-top:14px;	padding:1px;}
#top h4{margin-left:32px;	line-height:2px;color:#ffffff;	}
#top h5{margin-left:32px;	line-height:3px;	padding:1px;color:#2f353e;}
#bottom{	background:#ffffff;	width:100%;	height:auto; 	border: 1px solid #fff;}
#bottom p{margin-left:30px;	margin-top:3px;	margin-right:2px;} 

#bottom .responsive-image{
    width: 100%;
    background-size: 100% 100%;
} 

/* Retina display */
@media screen and (min-width: 1024px){


.bigger{font-size: 3.2vw;height:auto;}
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
   

.bigger{font-size: 3.2vw;height:auto;}
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
  
#6steps{height:650px;width:100%;margin-top:5px;}
.stepsfeaturer{font-size: 220%;font-family: Verdana;color:#42570a; letter-spacing: -1px;line-height:100px;text-align: center;vertical-align: middle;}
#1strow{height:225px;width:100%;}
#step1{ position:absolute;left: 10%; width: 25%;text-align: center;vertical-align: middle; }
#step2{position:absolute;left:37.5%; width: 25%;text-align: center;vertical-align: middle;  }
#step3{position:absolute;  left:65%; width: 25%; text-align: center;vertical-align: middle; }
#2ndrow{height:225px;width:100%;margin-top:50%;}
#step4{ position:absolute;left: 10%; width: 25%;text-align: center;vertical-align: middle;  }
#step5{position:absolute;left:37.5%; width: 25%;text-align: center;vertical-align: middle; }
#step6{position:absolute;  left:65%; width: 25%; text-align: center;vertical-align: middle; }

.step1bg{height:225px;background:#bde9bb;width:100%;margin-top:2%;}
.step2bg{height:225px;background:#ade3aa;width:100%;margin-top:2%;}
.step3bg{height:225px;background:#9ed89d;width:100%;margin-top:2%;}

.step4bg{height:225px;background:#91e0b3;width:100%;margin-top:32%;}
.step5bg{height:225px;background:#7dd7b3;width:100%;margin-top:32%;}
.step6bg{height:225px;background:#75d6bd;width:100%;margin-top:32%;}

.bigger{font-size: 9.2vw;height:auto;}
.call{font-size: 2.2vw;height:auto;}
#clients{height:180px;background:#edf5f2;width:100%;}

#main{ background:#edf5f2;	height:1000px;}

#tabCtrl{padding: 18% 0%;}

}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){

header {background-color:#f8fdfa;
/*Opacity start*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    /*Opacity end*/

width: 100%;height: 60px;position: fixed;top: 0;left: 0;z-index: 100;}

#logo{float: none;margin:0;text-align: center;width: 100%;height: 50px;
margin-top:5px;background: url(mobilelogo.png) no-repeat center;display: block;}

#main{height:700px;}

#details1{ position:absolute;left: 0px; width: 15%;text-align: center;
vertical-align: middle; }
#details3{position:absolute;left:85%; width: 15%;text-align: center;
vertical-align: middle;  }
#details2{position:absolute;  left:15%; width: 70%; text-align: center;
vertical-align: middle; }
 
#partnerhead{width:100%;height:220px;background: linear-gradient(to right,  #68dd51 0%,#9780b1 100%);
margin-top:60px;}
.biggerdetails{ font-size: 250%;font-family: Verdana;color:#ffffff; letter-spacing: -3px;line-height:30px;margin-top:20px; }

img{width:70%;}
#6steps{height:500px;width:100%;margin-top:7%;}
.stepsfeaturer{font-size: 140%;font-family: Verdana;color:#42570a; letter-spacing: -2px;line-height:70px;text-align: center;vertical-align: middle;}
#1strow{height:250px;width:100%;}
#step1{ position:absolute;left: 5%; width: 27.5%;text-align: center;vertical-align: middle; }
#step2{position:absolute;left:36.25%; width:27.5%;text-align: center;vertical-align: middle;  }
#step3{position:absolute;  left:67.5%; width:27.5%; text-align: center;vertical-align: middle; }
#2ndrow{height:250px;width:100%;margin-top:60%;}
#step4{ position:absolute;left: 5%; width: 27.5%;text-align: center;vertical-align: middle;  }
#step5{position:absolute;left:36.25%; width:27.5%;text-align: center;vertical-align: middle; }
#step6{position:absolute;  left:67.5%; width:27.5%; text-align: center;vertical-align: middle; }

.step1bg{height:250px;background:#bde9bb;width:100%;margin-top:1%;font-size: 2.1vw;}
.step2bg{height:250px;background:#ade3aa;width:100%;margin-top:1%;font-size: 2.1vw;}
.step3bg{height:250px;background:#9ed89d;width:100%;margin-top:1%;font-size: 2.1vw;}

.step4bg{height:250px;background:#91e0b3;width:100%;margin-top:42%;font-size: 2.1vw;}
.step5bg{height:250px;background:#7dd7b3;width:100%;margin-top:42%;font-size: 2.1vw;}
.step6bg{height:250px;background:#75d6bd;width:100%;margin-top:42%;font-size: 2.1vw;}

.bigger{font-size: 7.2vw;height:auto;}
.call{font-size: 2.2vw;height:auto;}
#clients{height:180px;background:#edf5f2;width:100%;}
#featured{height:70px;background:#edf5f2;width:100%;}
.featurer{font-size: 250%;;font-family: Verdana;color:#aacc00; letter-spacing: -1px;margin-left:35px;line-height:90px;margin-top:20px;}

#tabCtrl{padding: 18% 0%;}

}

/* Mobile LD */
@media screen and (max-width: 350px){

header {background-color:#f8fdfa;
/*Opacity start*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    /*Opacity end*/

width: 100%;height: 60px;position: fixed;top: 0;left: 0;z-index: 100;}

#logo{float: none;margin:0;text-align: center;width: 100%;height: 50px;
margin-top:5px;background: url(mobilelogo.png) no-repeat center;display: block;}

#main{height:700px;}

#details1{ position:absolute;left: 0px; width: 15%;text-align: center;
vertical-align: middle; }
#details3{position:absolute;left:85%; width: 15%;text-align: center;
vertical-align: middle;  }
#details2{position:absolute;  left:15%; width: 70%; text-align: center;
vertical-align: middle; }

#partnerhead{width:100%;height:220px;background: linear-gradient(to right,  #68dd51 0%,#9780b1 100%);
margin-top:60px;}
.biggerdetails{ font-size: 250%;font-family: Verdana;color:#ffffff; letter-spacing: -3px;line-height:30px;margin-top:20px; }

img{width:95%;}

#6steps{height:350px;width:100%;margin-top:7%;}
.stepsfeaturer{font-size: 160%;font-family: Verdana;color:#42570a; letter-spacing: -2px;line-height:80px;text-align: center;vertical-align: middle;}
#1strow{height:200px;width:100%;}
#step1{ position:absolute;left: 5%; width: 27.5%;text-align: center;vertical-align: middle; }
#step2{position:absolute;left:36.25%; width:27.5%;text-align: center;vertical-align: middle;  }
#step3{position:absolute;  left:67.5%; width:27.5%; text-align: center;vertical-align: middle; }
#2ndrow{height:200px;width:100%;margin-top:65%;}
#step4{ position:absolute;left: 5%; width: 27.5%;text-align: center;vertical-align: middle;  }
#step5{position:absolute;left:36.25%; width:27.5%;text-align: center;vertical-align: middle; }
#step6{position:absolute;  left:67.5%; width:27.5%; text-align: center;vertical-align: middle; }

.step1bg{height:200px;background:#bde9bb;width:100%;margin-top:1%;font-size: 2.1vw;}
.step2bg{height:200px;background:#ade3aa;width:100%;margin-top:1%;font-size: 2.1vw;}
.step3bg{height:200px;background:#9ed89d;width:100%;margin-top:1%;font-size: 2.1vw;}

.step4bg{height:200px;background:#91e0b3;width:100%;margin-top:52%;font-size: 2.1vw;}
.step5bg{height:200px;background:#7dd7b3;width:100%;margin-top:52%;font-size: 2.1vw;}
.step6bg{height:200px;background:#75d6bd;width:100%;margin-top:52%;font-size: 2.1vw;}

  
.bigger{font-size: 7.2vw;height:auto;}
.call{font-size: 2.2vw;height:auto;}
#clients{height:180px;background:#edf5f2;width:100%;}
#featured{height:70px;background:#edf5f2;width:100%;}
.featurer{font-size: 250%;;font-family: Verdana;color:#aacc00; letter-spacing: -3px;margin-left:35px;line-height:90px;margin-top:20px;}

#tabCtrl{padding: 18% 0%;}
} 

caption{	font:Arial;font-size: 2em; font-weight:bold;text-align:center;text-color:#49aa7b;}
.center{	text-align: center;}
.table{		border-collapse: collapse;	width:  100%;margin:auto;}th{	font-family: Verdana, Arial, Helvetica, sans-serif;	boder-top: solid 25px;	boder-bottom: solid 25px;	padding:15 15 15 15;	font-size: 0.9em; font-weight:normal;		background:#ffffff;}td{	font-family: Verdana, Arial, Helvetica, sans-serif;	boder-top: solid 25px;	boder-bottom: solid 25px;	padding:15 15 15 15;	font-size: 0.9em; font-weight:normal;		background:#ffffff;	}

#main img
{
max-width:100%; 
max-height:100%;
margin:auto;
display:block;
}

.ctabutton9{	display: block;width: 100%;max-width: 250px; min-width:50px;height: 35px;	background:#79b61f;	border-radius: 3px;	text-align: center;	text-decoration:none;	line-height:30px;	font-size:1.2em;	color:#ffffff;	font-weight:normal;padding:5px 0 5px 0;	margin-top:3px;	margin-bottom:3px;	margin-right:13px;}
.ctabutton9:hover{	background-color:#67a42b;	box-shadow:1px 1px 2px #eeeeee;	}


.ctabutton50{	display: block;	width: 100%;max-width: 200px; min-width:50px; height: 35px;	background:#97999a;	border-radius: 3px;	text-align: center;	text-decoration:none;	line-height:30px;	font-size:1.2em;	color:#ffffff;	font-weight:normal;padding:6px 0 6px 0;margin-top:3px;	margin-bottom:3px;	margin-right:13px;}.ctabutton50:hover{	background-color:#6c6e70;		}


.ctabutton1{	display: block;	width: 100%;max-width: 250px;min-width:50px;height: 35px;	background:#79b61f;	border-radius: 3px;	text-align: center;vertical-align:middle;	text-decoration:none;	line-height:30px;	font-size:1.2em;	color:#ffffff;	font-weight:normal;padding:2px 0 2px 0;	margin-top:3px;	margin-bottom:3px;	margin-right:13px;}
.ctabutton1:hover{	background-color:#67a42b;	box-shadow:1px 1px 2px #eeeeee;	}


@import url(http://weloveiconfonts.com/api/?family=zocial); 

 * { 
   margin: 0; 
    padding: 0; 
 } 
 @font-face { 
   font-family: 'zocial', sans-serif; 
} 
[data-icon]:before { 
    font-family: 'zocial'; 
    content: attr(data-icon); 
    -webkit-font-smoothing: antialiased; 
} 

 body { 

    font-family: 'Verdana', sans-serif; 
 } 

 a { 
text-decoration: none; 
  -webkit-transition: all .2s linear; 
  -moz-transition: all .2s linear; 
  -ms-transition: all .2s linear; 
  -o-transition:  all .2s linear; 
  transition: all .2s linear; 
} 
clear { 
   clear: both;  } 




footer .splitter { 
  background-color: #ac0; 
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), 
  color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), 
  color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), 
  to(transparent)); 
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
  transparent 75%, transparent); 
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
  transparent 75%, transparent); 
  background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
  transparent 75%, transparent); 
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
  transparent 75%, transparent); 
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
  transparent 75%, transparent); 

  -webkit-background-size: 50px 50px; 
  -moz-background-size: 50px 50px; 
   background-size: 50px 50px;    
  -moz-box-shadow: 1px 1px 8px gray; 
  -webkit-box-shadow: 1px 1px 8px gray; 
   box-shadow: 1px 1px 8px gray; 
   height: 20px; 
  } 





footer > ul { 
    list-style: none outside none; 
    margin: 0 auto; 
    max-width: 1200px; 
    overflow: hidden; 
    padding: 25px 0; 
    position: relative; 
    width: 100%; 
 } 

footer > ul li { 
    float: left; 
    padding: 20px 5px; 
    width: 25%; 
    box-sizing:border-box; 
   -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
 } 

 footer > ul li:first-child { 
   padding-left: 0; 
} 


 footer > ul li:nth-child(3) { 
    padding-right: 0; 
} 


footer > ul li .icon { 
   color: #999999; 
   float: left; 
   font-size: 80px; 
   line-height: 80px; 
 } 

 footer > ul li .text { 
  color: #848889; 
  font-size: 13px; 
  line-height: 20px; 
  margin-left: 10%; 
  position: relative; 
  text-align: centre; 
 } 

.text h4 { 
    color: #FFFFFF; 
    font-size: 24px; 
    font-weight: bold; 
    margin-bottom: 10px; 
} 

.text a { 
    border-bottom: 1px dotted transparent; 
    color: #FFDD00; 
    font-weight: bold; 
 } 
 .text a:hover { 
   border-color: #FFDD00;  } 



footer .bar { 
   background-color: #1E2629; 
   padding: 36px 0; 
height:auto;
} 

   footer .bar-wrap { 
   font-size: 12px; 
   margin: 0 auto; 
   max-width: 1200px; 
   position: relative; 
   width: 100%; 
height:auto;
 } 


.links { 
  float: left; 
  list-style: none outside none;
  position: relative; 
 } 

 .links li { 
    float: left; 
   margin-right: 10px; 
} 

 .links a { 
  color: #778888; 
} 

.links a:hover { 
    color: #FFFFFF; 
} 



.social { 
    position: absolute; 
    right: 0; 
    top: 0; 
 } 

 .social a { 
   color: #778888; 
   margin-left: 20px; 
} 

 .social a:hover { 
   color: #FFFFFF; 
} 

.social .icon { 
   display: inline-block;
  font-size: 36px; 
   margin-right: 5px; 
   vertical-align: middle;   
   -webkit-transition: -webkit-transform .3s linear; 
  -moz-transition: -moz-transform .3s linear; 
   -ms-transition: -ms-transform .3s linear; 
   -o-transition:  -o-transform .3s linear; 
  transition: transform .3s linear; 

 } 

.social a:hover  .icon { 
   -webkit-transform: rotate(360deg); 
   -moz-transform: rotate(360deg); 
  -ms-transform: rotate(360deg); 
   -o-transform: rotate(360deg); 
   transform: rotate(360deg); 

} 

 .social .info { 
   display: inline-block; 
   vertical-align: middle; 
 } 

.social .info .follow { 
  display: block; 
 } 

.social .info .num { 
   display: block; 
 } 

.copyright { 
   color: #778888; 
   margin-top: 5px; 
 } 


@media screen and (max-width: 1000px){ 
  .links, .social, .copyright{ 
      float:none; 
      text-align:center; 
  } 

   .social { 
      position:relative; 
      margin:10px 0; 
  } 

   .links li { 
      display:inline-block; 
      float:none; 
   } 

  .bar { 
     position:relative; 
   } 
   .bar-wrap { 
     margin-bottom:0; 
   } 
} 

 @media screen and (max-width: 835px)  { 
   footer > ul li { 
     float:none; 
      width:auto; 
   } 
 } 

 @media screen and (max-width: 768px)  { 
 .links li { 
     margin-right:5px; 
   } 
}