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

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;}

img {width: 50%;}

header {background-color:#008d55;width: 100%;height: 68px;position: fixed;top: 0;left: 0;z-index: 100;border-bottom: 2px solid #008d55;}

footer {background: #2E3639; width: 100%;height: auto;position: relative;bottom: 0;left: 0;z-index: 100;}
#unihackathonlogo{margin-left: 35px;float: left;width: 280px;height: 60px;margin-top:4px;background: url(unihackathonlogo.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;}

#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:#111111;	width:100%;height:2700px;}

#1strow{height:500px;width:100%;}
.1strowspecs{background-image: url('cover.jpg'); width: 100%;background-repeat: no-repeat;background-size: cover;height:500px;}


.newboxes {
    display: none;
}

.container .box {
  float: left;
  width: 150px;
  margin: 20px;
}

.container .box .top {
  padding: 12px;
  background-color: blue;
  color: white;
  cursor: pointer;
}

.container .box .bottom {
  padding: 12px;
  background-color: red;
  color: white;
  display: none;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-family:sans-serif;font-weight:bolder;letter-spacing:0px;color:#010101;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-family:sans-serif;font-weight:bolder;letter-spacing:0px;color:#010101;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-family:sans-serif;font-weight:bolder;letter-spacing:0px;color:#010101;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-family:sans-serif;font-weight:bolder;letter-spacing:0px;color:#010101;
}


#blackcodingscreen{height:400px;width:100%;background:#111111;}
.biggerdetailsbig{ font-size: 300%;font-family:verdana;color:#f8fdfa; letter-spacing: -3px;margin-top:5%;font-weight:lighter;  }
.calldetailsbig{font-size:200%;font-family: Verdana, Arial, Helvetica, sans-serif;color:#ffffff; letter-spacing: -1px;
}



#details{width:100%;height:600px;background:#111111;margin-top:3%;}

.box2 {
  background: linear-gradient(to right,  #008d55 0%,#718d00 100%);
  height:530px;
  padding: 2% 5px; /* Added a percentage value for top/bottom padding to keep the wrapper inside of the parent */
  
  -webkit-transform: skewY(-177deg);
  -moz-transform: skewY(-177deg);
  -ms-transform: skewY(-177deg);
  -o-transform: skewY(-177deg);
  transform: skewY(-177deg);
}

.box2 > .wraptest2 {
  -webkit-transform: skewY(177deg);
  -moz-transform: skewY(177deg);
  -ms-transform: skewY(177deg);
  -o-transform: skewY(177deg);
  transform: skewY(177deg);
}


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


.calldetails{font-size:140%;font-family: Verdana, Arial, Helvetica, sans-serif;color:#333333; letter-spacing: -1px;
}

.center{	text-align: center;}

#processflow{width:100%;height:300px;background:#111111;margin-top:5%;}
#processflow1{ position:absolute;left: 1%;width: 23%;text-align: center;vertical-align: middle;}
#processflow2{ position:absolute;left: 26%;width: 23%;text-align: center;vertical-align: middle;}
#processflow3{ position:absolute;left: 51%;width: 23%;text-align: center;vertical-align: middle;}
#processflow4{ position:absolute;left: 76%;width: 23%;text-align: center;vertical-align: middle;}

#partnerhead{width:100%;height:350px;background:#111111;margin-top:5%;}

.box1 {
  background: linear-gradient(to right,  #718d00 0%,#008d55 100%);
  height:300px;
  padding: 3% 5px; /* Added a percentage value for top/bottom padding to keep the wrapper inside of the parent */
  
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  -o-transform: skewY(-3deg);
  transform: skewY(-3deg);
}

.box1 > .wraptest1 {
  -webkit-transform: skewY(3deg);
  -moz-transform: skewY(3deg);
  -ms-transform: skewY(3deg);
  -o-transform: skewY(3deg);
  transform: skewY(3deg);
}

.biggerdetails{ font-size: 220%;font-family:sans-serif;color:#f8fdfa; letter-spacing: 0px;margin-top:1%;font-weight:lighter; }
.biggerdetails1{ font-size: 200%;font-family:sans-serif;color:#f8fdfa; letter-spacing:-1px;font-weight:lighter; }



#6steps{height:650px;width:100%;margin-top:2px;}
.stepsfeaturer{font-size: 190%;font-family: Verdana;color:#111111; letter-spacing: -1px;line-height:100px;text-align: center;vertical-align: middle;}
#1strow{height:175px;width:100%;}
#step1{ position:absolute;left: 12%; width: 36%; }
#step2{position:absolute;left:50%; width: 36%;  }

#2ndrow{height:175px;width:100%;margin-top:50%;}
#step3{ position:absolute;left: 12%; width: 36%; }
#step4{position:absolute;left:50%; width: 36%;  }


.step1bg{height:175px;width:100%;margin-top:2%;border:1px solid #cccccc;font-size: 120%;font-family: Verdana;color:#42570a; letter-spacing: -1px;padding:2% 4%;}
.step2bg{height:175px;width:100%;margin-top:2%;border:1px solid #cccccc;font-size: 120%;font-family: Verdana;color:#42570a; letter-spacing: -1px;padding:2% 4%;}


.step3bg{height:175px;width:100%;margin-top:20%;border:1px solid #cccccc;font-size: 120%;font-family: Verdana;color:#42570a; letter-spacing: -1px;padding:2% 4%;}
.step4bg{height:175px;width:100%;margin-top:20%;border:1px solid #cccccc;font-size: 120%;font-family: Verdana;color:#42570a; letter-spacing: -1px;padding:2% 4%;}


.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; }

div#envelope{

width: 80%;
margin: 5px 15% 5px 12.5%;
padding:5px 0;

border-radius:10px;
}
form{
width:80%;
margin:3% 5%;
}

/* Makes responsive fields. Sets size and field alignment.*/
input[type=text]{
margin-bottom: 20px;
margin-top: 10px;
width:100%;
padding: 15px;
border-radius:5px;
border:1px solid #aacc00;
}
input[type=submit]
{

margin-bottom: 20px;
width:100%;
padding: 10px;
border-radius:3px;
border:1px solid #aacc00;
background-color: #aacc00;
color:#ffffff;
font-size:1.8em;
cursor:pointer;
font-family: Verdana, Arial, Helvetica, sans-serif;
letter-spacing: 0px;
font-weight:bold;
margin:4% 2%;

}
#submit:hover
{
background-color: #a2c401;
}
textarea{
width:100%;
padding: 15px;
margin-top: 10px;
border:1px solid #a2c401;
border-radius:5px;
margin-bottom: 20px;
resize:none;
}
input[type=text]:focus,textarea:focus {
border-color: #3be989;
}

.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color:#b2f561;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

#liveboard{width:100%;height:500px;}

#newjoinee{width:100%;height:400px; background: linear-gradient(to right,  #07b5d4 0%,#1e96ac 100%);}


.newjoinee{ font-size: 220%;font-family: Verdana;color:#fffff; letter-spacing: -3px;line-height:200px; }
.bigger { font-size: 330%;font-family: Verdana;color:#fffff; letter-spacing: -3px;line-height:290px; }



table{		width:  100%;margin:auto;}

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


#column1{		position:absolute;	background:#111111;		 left: 0px;width:100%;height:520px;	}
#column2{		position:absolute;	background:#111111;	left:60.1%;width:39.9%;	height:auto;}
#holder{font-family: Verdana, Arial, Helvetica, sans-serif;font size:20px;height:520px;	width:100%;		margin-top:50px;	padding:17px 0px;}

#top{	width:40%;	height:80px;margin-left:30%;background:#aacc00;border: 1px solid #f7f7f7;	}
#top p{margin-top:10%;margin-left;10%;}
#top h1{margin-left:32px;	line-height:8px; color:#ffffff;	padding:0px;}
#top h2{margin-top:3%;}
#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;margin-left:30%;width:40%;	height:auto; 	border: 1px solid #fff;}
#bottom p{margin-left:30px;	margin-top:23px;	margin-right:2px;} 
#bottom h2{margin-left:3%;margin-top:3%;}

.maintestbutton1{	display: block;	width: 100%;max-width: 400px; min-width:50px;height: 50px;		 border-style: solid; border-radius: 15px 30px; padding: 25px;
margin-top: 20px; border-color:#ffffff;	text-align: center;	text-decoration:none;	font-size: 140%;font-family:sans-serif;color:#ffffff; letter-spacing: 1px;	font-weight:bold;	text-align: center;vertical-align:middle;}
.maintestbutton1:hover{	background-color:#ffffff;color:#005c38;	}


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

/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px)
{
}

/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px)
{

div#envelope{

width: 80%;
margin: 2px 4% 2px 8%;
padding:5px 0;
border-radius:10px;
}

form{
width:80%;
margin:4% 5%;
}

/* Makes responsive fields. Sets size and field alignment.*/
input[type=text]{
margin-bottom: 20px;
margin-top: 10px;
width:100%;
padding: 15px;
border-radius:5px;
border:1px solid #aacc00;
}

input[type=submit]
{
margin-bottom: 20px;
width:100%;
padding: 10px;
border-radius:3px;
border:1px solid #aacc00;
background-color: #aacc00;
color:#ffffff;
font-size:1.8em;
cursor:pointer;
font-family: Verdana, Arial, Helvetica, sans-serif;
letter-spacing: 0px;
font-weight:bold;
margin:3% 4%;

}

#submit:hover
{
background-color: #a2c401;
}
textarea{
width:100%;
padding: 15px;
margin-top: 10px;
border:1px solid #a2c401;
border-radius:5px;
margin-bottom: 20px;
resize:none;
}
input[type=text]:focus,textarea:focus {
border-color: #3be989;
}
#holder{font-family: Verdana, Arial, Helvetica, sans-serif;font size:20px;height:auto;	width:100%;		margin-top:50px;	padding:17px 0px;}


}

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

header {background-color:#008d55;
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(mobileunihackathonlogo.png) no-repeat center;display: block;}

#main{background:#111111;	width:100%;height:2000px;}

#blackcodingscreen{height:200px;width:100%;background:#111111;}
.biggerdetailsbig{ font-size: 200%;font-family:verdana;color:#f8fdfa; letter-spacing: -3px;margin-top:5%;font-weight:lighter;  }
.calldetailsbig{font-size:150%;font-family: Verdana, Arial, Helvetica, sans-serif;color:#ffffff; letter-spacing: -1px;
}

.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color:#bddd2a;
  z-index: 201;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  top: 10%;
  left: 24%;
  width: 50%;
  height: 50%;
  padding: 7px;
  background-color: white;
  z-index: 202;
  overflow: auto;
}

div#envelope{

width: 60%;
margin: 5px 15% 5px 12.5%;
padding:5px 0;

border-radius:10px;
}
form{
width:60%;
margin:3% 5%;
}

#details{width:100%;height:500px;background:#111111;margin-top:3%;}
.box2{height:460px;}

#processflow{width:100%;height:180px;background:#111111;margin-top:5%;}

#6steps{height:100px;width:100%;margin-top:1%;}
.stepsfeaturer{font-size: 120%;font-family: Verdana;color:#42570a; letter-spacing: -1px;line-height:60px;text-align: center;vertical-align: middle;}

.calldetails{font-size:90%;font-family: Verdana, Arial, Helvetica, sans-serif;color:#333333; letter-spacing: -1px;}

.maintestbutton1{	display: block;	width: 100%;max-width: 200px; min-width:50px;height: 50px;		 border-style: solid; border-radius: 15px 30px; padding: 15px;
margin-top: 20px; border-color:#ffffff;	text-align: center;	text-decoration:none;	font-size: 140%;font-family:sans-serif;color:#ffffff; letter-spacing: 1px;	font-weight:bold;	text-align: center;vertical-align:middle;}
.maintestbutton1:hover{	background-color:#ffffff;color:#005c38;	}


#holder{font-family: Verdana, Arial, Helvetica, sans-serif;font size:20px;height:auto;	width:100%;		margin-top:50px;	padding:17px 0px;}

}

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

header {background-color:#008d55;
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(mobileunihackathonlogo.png) no-repeat center;display: block;}

#main{background:#111111;	width:100%;height:1800px;}

#blackcodingscreen{height:200px;width:100%;background:#111111;}
.biggerdetailsbig{ font-size: 200%;font-family:verdana;color:#f8fdfa; letter-spacing: -3px;margin-top:5%;font-weight:lighter;  }
.calldetailsbig{font-size:150%;font-family: Verdana, Arial, Helvetica, sans-serif;color:#ffffff; letter-spacing: -1px;
}

.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color:#bddd2a;
  z-index: 201;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  top: 10%;
  left: 24%;
  width: 50%;
  height: 50%;
  padding: 7px;
  background-color: white;
  z-index: 202;
  overflow: auto;
}

div#envelope{

width: 60%;
margin: 5px 15% 5px 12.5%;
padding:5px 0;

border-radius:10px;
}
form{
width:60%;
margin:3% 3%;
}

#details{width:100%;height:400px;background:#111111;margin-top:3%;}
.box2{height:360px;}

#processflow{width:100%;height:140px;background:#111111;margin-top:5%;}

#6steps{height:100px;width:100%;margin-top:1%;}
.stepsfeaturer{font-size: 120%;font-family: Verdana;color:#42570a; letter-spacing: -1px;line-height:60px;text-align: center;vertical-align: middle;}

.calldetails{font-size:120%;font-family: Verdana, Arial, Helvetica, sans-serif;color:#333333; letter-spacing: -1px;}

.maintestbutton1{	display: block;	width: 100%;max-width: 200px; min-width:50px;height: 50px;		 border-style: solid; border-radius: 15px 30px; padding: 15px;
margin-top: 20px; border-color:#ffffff;	text-align: center;	text-decoration:none;	font-size: 140%;font-family:sans-serif;color:#ffffff; letter-spacing: 1px;	font-weight:bold;	text-align: center;vertical-align:middle;}
.maintestbutton1:hover{	background-color:#ffffff;color:#005c38;	}


#holder{font-family: Verdana, Arial, Helvetica, sans-serif;font size:20px;height:auto;	width:100%;		margin-top:50px;	padding:17px 0px;}

}

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: 250px; 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:5px 0 5px 0;	margin-top:3px;	margin-bottom:3px;	margin-right:13px;}
.ctabutton50:hover{	background-color:#6c6e70;	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; 
   } 
}