* {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
.chromeframe {
 position: absolute;
 top: 0;
}
.clearfix {
 *zoom: 1;
}
.clearfix:before,
div:before,
.clearfix:after,
div:after {
 display: table;
 line-height: 0;
 content: "";
}
.clearfix:after,
div:after {
 clear: both;
}
/*global styles*/
a,
a:focus,
a:active {
 outline: 0;
}
body {
 background:url(../img/home-bg-1.jpg) no-repeat center bottom #e9f0f5;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-touch-callout: none;
 overflow: hidden;
 font-family: 'Merriweather', serif;
 font-size: 14px;
 font-style: normal;
 font-weight: normal;
}
.loader_wrapper {
 height: 100%;
 background: -webkit-linear-gradient(#ecf0f1, #fff);
 background: linear-gradient(#ecf0f1, #fff);
 left: 0;
 margin: 0 auto;
 position: fixed;
 right: 0;
 top: 0;
 width: 100%;
 z-index: 9999;
}
.loader_content {
 height: 100%;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
}
.loader {
 width: 60px;
 height: 60px;
}
.loader-ring {
 position: absolute;
 width: 60px;
 height: 60px;
 -webkit-transform: skew(30deg, 20deg);
 -ms-transform: skew(30deg, 20deg);
 transform: skew(30deg, 20deg);
}
.loader-ring:last-of-type {
 -webkit-transform: skew(-30deg, -20deg) scale(-1, 1);
 -ms-transform: skew(-30deg, -20deg) scale(-1, 1);
 transform: skew(-30deg, -20deg) scale(-1, 1);
}
.loader-ring:last-of-type img {
 -webkit-animation-delay: -0.5s;
 animation-delay: -0.5s;
}
.loader-ring img {
 max-width: 100%;
 height: auto;
 -webkit-animation: rotate 1s linear infinite;
 animation: rotate 1s linear infinite;
}
@-webkit-keyframes rotate {
 to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
@keyframes rotate {
 to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
.landing-page {
 position: relative;
 background:url('../img/polygonal.png') no-repeat right bottom scroll #00B29D;
 -webkit-background-size: 100% auto;
 background-size: 100% auto;
 /*height: 600px;*/
}
.landing-page .intro {
 text-align: center;
 color: #fff;
 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, 100%);
 -ms-transform: translate(-50%, 100%);
 -o-transform: translate(-50%, 100%);
 transform: translate(-50%, 100%);
 width: 660px;
}
.intro small{
 color: #ffffff;
 font-family: 'Italianno', cursive;
 font-size: 50px;
 margin-left: 20px;
 text-decoration: underline;
 text-transform: capitalize;
}
.intro p{
 font-size: 18px;
}
.navbar {
 margin-bottom: 0;
}
.navigation {
 /* background: #00B29D; */
}
.navigation .navbar-default {
 background: transparent;
 border-color: transparent;
}
.navigation .navbar-default.navbar-fixed-bottom{
 position: absolute;
}
.navigation .navbar-default.navbar-fixed-top {
 background-color: #f8f8f8;
 border-color: #e7e7e7;
}
.navigation ul {
 width: 100%;
 text-align: center;
}
.navigation ul li {
 float: none;
 display: inline-block;
}
.navbar-default .navbar-nav > li > a {
 color: #fff;
 font-weight: bold;
 padding-left: 50px;
 padding-right: 50px;
}
.navbar-default.navbar-fixed-top .navbar-nav > li > a {
 color: #555;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
 background-color: transparent;
 color: #555;
}
.navigation ul li a span {
 clear: both;
 display: block;
 font-weight: normal;
 border-top: 1px solid #ccc;
}
 .navigation .navbar-nav > li.mypic{
 overflow: hidden;
}
.navigation .navbar-nav > li.mypic a{
 padding: 0;
}
 .navigation .navbar-nav > li.mypic a span.pro-pic{
 width: 60px;
 height: 60px;
 border-radius: 100%;
 background:url(../img/me-2.jpg) no-repeat center -15px;
 display: block;
 -webkit-background-size: cover;
 background-size: cover;
 margin: 0 auto;
}
 .navigation .navbar-fixed-top .navbar-nav > li.mypic a{
 margin-top: 20px;
 }
/*.navigation .navbar-nav > li.mypic a{
 line-height: 50px;
} 
 .navigation ul li.mypic {
 display: none;
 -webkit-transition: all 0.6s ease;
 -o-transition: all 0.6s ease;
 transition: all 0.6s ease;
}
.mypic.show-pic {
 display: inline-block !important;
 -webkit-transition: all 0.6s ease;
 -o-transition: all 0.6s ease;
 transition: all 0.6s ease;
} */
/********************************************
15.0 Home portfolio panel style 1
*********************************************/
.portfolio-panel1 .container {
 padding: 70px 15px 0px 15px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.portfolio-panel1 .block-title {
 margin: 0 0 34px;
}
/* ===== Portfolio Items ===== */
.portfolio-item {
 position: relative;
 margin: 0 0 61px;
 z-index: 3;
}
.normalScroll .portfolio-panel1 .portfolio-item {
 margin: 0;
}
.megafolio-container {
 width: 100%;
 position: relative;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
.portfolio-filter {
 position: relative;
 text-align: center;
 margin: 0 0 45px;
 z-index: 2;
}
.portfolio-filter ul {
 margin: 0;
 padding: 0;
}
.portfolio-filter li.filter {
 position: relative;
 display: inline;
 max-width: inherit;
 font-size: 1em;
 font-weight: 500;
 color: #474747;
 padding: 0 18px;
 background-color: transparent;
 -webkit-transition: color 0.2s ease-in-out;
 -moz-transition: color 0.2s ease-in-out;
 -ms-transition: color 0.2s ease-in-out;
 -o-transition: color 0.2s ease-in-out;
 transition: color 0.2s ease-in-out;
}
.portfolio-filter li.filter:hover,
.portfolio-filter li.filter.selected {
 color: #00acc1;
}
.portfolio-filter li.filter:after {
 position: absolute;
 content: '';
 top: 0;
 right: 0;
 width: 11px;
 height: 17px;
 margin-top: -1px;
 margin-right: -8px;
 background: url(../images/filter-breadcrumb.png) no-repeat;
}
.portfolio-filter li.filter:last-child:after {
 background: none;
}
.portfolio-item .mega-hover {
 /* background-color: rgba(0,172,193,0.85); */
 background-color: rgba(0, 178, 157, .85);
}
.portfolio-item .mega-hovertitle {
 font-family: 'Raleway', sans-serif;
 font-size: 1.2857em;
 font-weight: 700;
 line-height: 1.2em;
 text-transform: uppercase;
 padding: 0px 0px 8px;
 left: 20%;
 bottom: 40%;
}
.portfolio-item .mega-hovertitle .mega-hoversubtitle {
 color: #fff;
 font-size: 0.7777em;
 line-height: 13px;
 font-weight: 500;
 text-transform: none;
 margin-top: 11px;
}
@media (min-width: 640px) {
 .portfolio-item .mega-hovertitle,
 .portfolio-item .mega-hovertitle .mega-hoversubtitle {
 font-size: 1em;
 }
}
@media (min-width: 1200px) {
 .portfolio-item .mega-hovertitle {
 font-size: 1.2857em;
 }
 .portfolio-item .mega-hovertitle .mega-hoversubtitle {
 font-size: 0.7777em;
 }
}
.portfolio-item .mega-hoverlink,
.portfolio-item .mega-hoverview {
 margin-top: 20px;
 background: none;
 border: rgba(255, 255, 255, 1) solid 2px;
 border-radius: 50%;
}
.portfolio-item .mega-hoverlink i,
.portfolio-item .mega-hoverview i {
 color: #fff;
 font-size: 16px;
 -webkit-transition: color 0.3s ease-in-out;
 -moz-transition: color 0.3s ease-in-out;
 -ms-transition: color 0.3s ease-in-out;
 -o-transition: color 0.3s ease-in-out;
 transition: color 0.3s ease-in-out;
}
.portfolio-item .mega-hoverlink i {
 line-height: 30px;
}
.portfolio-item .mega-hoverview i {
 line-height: 28px;
}
.portfolio-item .mega-hover:hover .mega-hoverlink:hover,
.portfolio-item .mega-hover:hover .mega-hoverview:hover {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
 filter: alpha(opacity=100);
 -moz-opacity: 1;
 -khtml-opacity: 1;
 opacity: 1;
 background-color: #212121;
 border: rgba(255, 255, 255, 0) solid 2px;
}
.portfolio-item .mega-hoverlink:hover i,
.portfolio-item .mega-hoverview:hover i {
 color: #00acc1;
}
.dark .portfolio-filter li.filter {
 color: #a7a7a7;
}
.dark .portfolio-filter li.filter:hover,
.dark .portfolio-filter li.filter.selected {
 color: #00acc1;
}
.dark .portfolio-filter li.filter:after {
 background: url(../images/filter-breadcrumb-dark.png) no-repeat;
}
.dark .portfolio-filter li.filter:last-child:after {
 background: none;
}
/* END */
.portfolio-panel1 .more-item-link {
 position: relative;
}
#about {
 background: #fff;
 position: relative;
}
.profile-bg {
 background-attachment: scroll;
 background-clip: border-box;
 background-color: rgba(0, 0, 0, 0);
 background-image: url("../img/me.jpg");
 background-origin: padding-box;
 background-position: -40px center, 0 center;
 background-repeat: no-repeat;
 background-size: cover;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 45%;
 z-index: 2;
 -webkit-transition: all 0.4s ease-in-out 0s;
 -o-transition: all 0.4s ease-in-out 0s;
 transition: all 0.4s ease-in-out 0s;
 opacity: .5;

 -webkit-filter: grayscale(100%);
 filter: grayscale(100%);
 filter: gray;
 filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}
.profile-bg:hover{
 -webkit-filter: none;
 -o-filter: none;
 filter: none;
 opacity: 1;
}
/********************************************
3.7 Progress bar
*********************************************/
.progress {
 height: 34px;
 margin-bottom: 25px;
 background-color: #f6f6f6;
 border-radius: 0px;
 -webkit-box-shadow: none;
 box-shadow: none;
}
.progress-bar {
 font-size: 12px;
 font-weight: 500;
 line-height: 34px;
 background-color: #00acc1;
 text-align: right;
 text-transform: uppercase;
 -webkit-box-shadow: none;
 box-shadow: none;
 -webkit-transition: width 2.50s ease !important;
 -moz-transition: width 2.50s ease !important;
 -o-transition: width 2.50s ease !important;
 transition: width 2.50s ease !important;
}
.progress-title {
 float: left;
 padding: 0 0 0 15px;
 opacity: 0;
 -webkit-transition: opacity 0.5s ease !important;
 -moz-transition: opacity 0.5s ease !important;
 -o-transition: opacity 0.5s ease !important;
 transition: opacity 0.5s ease !important;
 -webkit-transition-delay: 0.5s !important;
 -moz-transition-delay: 0.5s !important;
 -o-transition-delay: 0.5s !important;
 transition-delay: 0.5s !important;
}
.progress-percentage {
 padding: 0 15px 0 0;
}
.profile-desc {
 margin-bottom:20px;
 padding-left: 50px;
 padding-bottom: 0px;
}
h2.heading-title {
 font-weight: 700;
 margin-bottom: 50px;
}
.service-wrapper {
 padding-left: 50px;
 padding-bottom: 40px;
}
.service-wrapper .title{
 margin-top: 0;
 margin-bottom: 40px;
}
.service-inner {
 float: left;
 margin-bottom: 20px;
 margin-right: 17px;
 width: 47%;
}
.service-inner i {
 color: #2ecc71;
 float: left;
 font-size: 30px;
}
.service-box {
 margin-left: 40px;
 margin-top: -15px;
 padding: 0;
}
.service-box h3 {
 font-size: 17px;
 font-weight: bold;
 line-height: 24px;
 margin-bottom: 16px;
 text-transform: uppercase;
}
.service-box p {
 font-size: 14px;
 line-height: 20px;
}
/* experience */
#experience {
 /* background: #e9f0f5; */
}
/* -------------------------------- 
Modules - reusable parts of our design
-------------------------------- */
.cd-container {
 /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 margin: 0 auto;
}
.cd-container:after {
 /* clearfix */
 content: '';
 display: table;
 clear: both;
}
/* -------------------------------- 
Main components 
-------------------------------- */
header {
 height: 200px;
 line-height: 200px;
 text-align: center;
 background: #303e49;
}
header h1 {
 color: white;
 font-size: 18px;
 font-size: 1.125rem;
}
@media only screen and (min-width: 1170px) {
 header {
 height: 300px;
 line-height: 300px;
 }
 header h1 {
 font-size: 24px;
 font-size: 1.5rem;
 }
}
#cd-timeline {
 position: relative;
 padding: 2em 0;
 margin-top: 2em;
 margin-bottom: 2em;
 overflow: hidden;
}
#cd-timeline:before {
 /* this is the vertical line */
 content: '';
 position: absolute;
 top: 0;
 left: 18px;
 height: 90%;
 width: 4px;
 background: #d7e4ed;
 display: block;
}
@media only screen and (min-width: 1170px) {
 #cd-timeline {
 margin-top: 3em;
 margin-bottom: 3em;
 }
 #cd-timeline:before {
 left: 50%;
 margin-left: -2px;
 }
}
.cd-timeline-block {
 position: relative;
 margin: 2em 0;
}
.cd-timeline-block:after {
 content: "";
 display: table;
 clear: both;
}
.cd-timeline-block:first-child {
 margin-top: 0;
}
.cd-timeline-block:last-child {
 margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
 .cd-timeline-block {
 margin: 4em 0;
 }
 .cd-timeline-block:first-child {
 margin-top: 0;
 }
 .cd-timeline-block:last-child {
 margin-bottom: 0;
 }
}
.cd-timeline-img {
 position: absolute;
 top: 0;
 left: 0;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
 display: block;
 width: 24px;
 height: 24px;
 position: relative;
 left: 50%;
 top: 50%;
 margin-left: -12px;
 margin-top: -12px;
}
.cd-timeline-img.cd-picture {
 /* background: #75ce66; */
 background: #b0b0b0;
}
.cd-timeline-img.cd-movie {
 background: #c03b44;
}
.cd-timeline-img.cd-location {
 background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
 .cd-timeline-img {
 width: 60px;
 height: 60px;
 left: 50%;
 margin-left: -30px;
 /* Force Hardware Acceleration in WebKit */
 -webkit-transform: translateZ(0);
 -webkit-backface-visibility: hidden;
 }
 .cssanimations .cd-timeline-img.is-hidden {
 visibility: hidden;
 }
 .cssanimations .cd-timeline-img.bounce-in {
 visibility: visible;
 -webkit-animation: cd-bounce-1 0.6s;
 -moz-animation: cd-bounce-1 0.6s;
 animation: cd-bounce-1 0.6s;
 }
}
@-webkit-keyframes cd-bounce-1 {
 0% {
 opacity: 0;
 -webkit-transform: scale(0.5);
 }
 60% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 }
 100% {
 -webkit-transform: scale(1);
 }
}
@-moz-keyframes cd-bounce-1 {
 0% {
 opacity: 0;
 -moz-transform: scale(0.5);
 }
 60% {
 opacity: 1;
 -moz-transform: scale(1.2);
 }
 100% {
 -moz-transform: scale(1);
 }
}
@keyframes cd-bounce-1 {
 0% {
 opacity: 0;
 -webkit-transform: scale(0.5);
 -moz-transform: scale(0.5);
 -ms-transform: scale(0.5);
 -o-transform: scale(0.5);
 transform: scale(0.5);
 }
 60% {
 opacity: 1;
 -webkit-transform: scale(1.2);
 -moz-transform: scale(1.2);
 -ms-transform: scale(1.2);
 -o-transform: scale(1.2);
 transform: scale(1.2);
 }
 100% {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
 }
}
.cd-timeline-content {
 position: relative;
 margin-left: 60px;
 background: white;
 border-radius: 0.25em;
 padding: 1em;
 box-shadow: 0 3px 0 #d7e4ed;
}
.cd-timeline-content:after {
 content: "";
 display: table;
 clear: both;
}
.cd-timeline-content h2 {
 color: #303e49;
}
.cd-timeline-content p,
.cd-timeline-content .cd-read-more,
.cd-timeline-content .cd-date {
 /* font-size: 13px;
 font-size: 0.8125rem; */
}
.cd-timeline-content .cd-read-more,
.cd-timeline-content .cd-date {
 display: inline-block;
}
.cd-timeline-content p {
 margin: 1em 0;
 line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
 float: right;
 padding: .8em 1em;
 background: #acb7c0;
 color: white;
 border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
 background-color: #bac4cb;
}
.cd-timeline-content .cd-date {
 float: left;
 padding: .8em 0;
 opacity: .7;
}
.cd-timeline-content:before {
 content: '';
 position: absolute;
 top: 16px;
 right: 100%;
 height: 0;
 width: 0;
 border: 7px solid transparent;
 border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
 .cd-timeline-content h2 {
 /* font-size: 20px;
 font-size: 1.25rem; */
 }
 .cd-timeline-content p {
 /* font-size: 16px;
 font-size: 1rem; */
 }
 .cd-timeline-content .cd-read-more,
 .cd-timeline-content .cd-date {
 /* font-size: 14px;
 font-size: 0.875rem; */
 }
}
@media only screen and (min-width: 1170px) {
 .cd-timeline-content {
 margin-left: 0;
 padding: 1.6em;
 width: 45%;
 }
 .cd-timeline-content:before {
 top: 24px;
 left: 100%;
 border-color: transparent;
 border-left-color: white;
 }
 .cd-timeline-content .cd-read-more {
 float: left;
 }
 .cd-timeline-content .cd-date {
 position: absolute;
 width: 100%;
 left: 122%;
 top: 6px;
 /* font-size: 16px;
 font-size: 1rem; */
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content {
 float: right;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content:before {
 top: 24px;
 left: auto;
 right: 100%;
 border-color: transparent;
 border-right-color: white;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
 float: right;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
 left: auto;
 right: 122%;
 text-align: right;
 }
 .cssanimations .cd-timeline-content.is-hidden {
 visibility: hidden;
 }
 .cssanimations .cd-timeline-content.bounce-in {
 visibility: visible;
 -webkit-animation: cd-bounce-2 0.6s;
 -moz-animation: cd-bounce-2 0.6s;
 animation: cd-bounce-2 0.6s;
 }
}
@media only screen and (min-width: 1170px) {
 /* inverse bounce effect on even content blocks */
 .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
 -webkit-animation: cd-bounce-2-inverse 0.6s;
 -moz-animation: cd-bounce-2-inverse 0.6s;
 animation: cd-bounce-2-inverse 0.6s;
 }
}
@-webkit-keyframes cd-bounce-2 {
 0% {
 opacity: 0;
 -webkit-transform: translateX(-100px);
 }
 60% {
 opacity: 1;
 -webkit-transform: translateX(20px);
 }
 100% {
 -webkit-transform: translateX(0);
 }
}
@-moz-keyframes cd-bounce-2 {
 0% {
 opacity: 0;
 -moz-transform: translateX(-100px);
 }
 60% {
 opacity: 1;
 -moz-transform: translateX(20px);
 }
 100% {
 -moz-transform: translateX(0);
 }
}
@keyframes cd-bounce-2 {
 0% {
 opacity: 0;
 -webkit-transform: translateX(-100px);
 -moz-transform: translateX(-100px);
 -ms-transform: translateX(-100px);
 -o-transform: translateX(-100px);
 transform: translateX(-100px);
 }
 60% {
 opacity: 1;
 -webkit-transform: translateX(20px);
 -moz-transform: translateX(20px);
 -ms-transform: translateX(20px);
 -o-transform: translateX(20px);
 transform: translateX(20px);
 }
 100% {
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0);
 }
}
@-webkit-keyframes cd-bounce-2-inverse {
 0% {
 opacity: 0;
 -webkit-transform: translateX(100px);
 }
 60% {
 opacity: 1;
 -webkit-transform: translateX(-20px);
 }
 100% {
 -webkit-transform: translateX(0);
 }
}
@-moz-keyframes cd-bounce-2-inverse {
 0% {
 opacity: 0;
 -moz-transform: translateX(100px);
 }
 60% {
 opacity: 1;
 -moz-transform: translateX(-20px);
 }
 100% {
 -moz-transform: translateX(0);
 }
}
@keyframes cd-bounce-2-inverse {
 0% {
 opacity: 0;
 -webkit-transform: translateX(100px);
 -moz-transform: translateX(100px);
 -ms-transform: translateX(100px);
 -o-transform: translateX(100px);
 transform: translateX(100px);
 }
 60% {
 opacity: 1;
 -webkit-transform: translateX(-20px);
 -moz-transform: translateX(-20px);
 -ms-transform: translateX(-20px);
 -o-transform: translateX(-20px);
 transform: translateX(-20px);
 }
 100% {
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0);
 }
}

footer {
 background: #3c3c3c none repeat scroll 0 0;
 color: #fff;
 padding:90px 0 60px 0;
}
footer p{
 font-size: 15px;
 line-height: 30px;
 margin-bottom: 0;
}
footer p.cnt{
    background: #2d2d2d none repeat scroll 0 0;
    border: 3px solid #242424;
    border-radius: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 38px;
    margin: 20px auto 0;
    padding: 0 10px;
    width: 300px;
}

.social{
 margin-bottom: 0;
 padding: 20px 0;
}
footer .social{
 padding: 0;
}
.contact-info a{
 color: #fff;
}
.contact-info a i{
 margin-right: 10px;
}
.social li {
 margin: 0 20px;
}
.social li a{
 color: #fff;
 text-transform: capitalize;
 display: block;
 padding: 10px 0;
}
.social li a i{
 margin-right: 10px;
}
.social li span{
 width: 0;
 height:2px;
 background: #fff;
 display: block;
 -webkit-transition: all ease-in-out .4s;
 -o-transition: all ease-in-out .4s;
 transition: all ease-in-out .4s;

}
.social li a:hover{
 text-decoration: none;
}
.social li:hover span{
 width: 100%;
 -webkit-transition: all ease-in-out .4s;
 -o-transition: all ease-in-out .4s;
 transition: all ease-in-out .4s;
}