/*
    Author: Cory Fugate
    Date: 8/17/13
*/

/*** reset css ***/
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, dialog,footer, header, hgroup, menu, nav, section {display:block;}
body {  line-height: 1.5;}
a img { border: none; }
:focus { outline: 0; }
/*** end reset ***/

body{
    background: url('../images/noisy.png');
    background-color: #053046;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
}

.fade-in {
    animation: fadeIn 0.2s ease-out;
}

.slow-fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.container{
    max-width: 1440px;
    width: 90%;
    margin: auto;
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}


/**** Header Styles ****/
nav{
    height: 100px;
    background-color: rgba(221,221,221,0.5)
}

.nav-links {
    position: absolute;
    top: 34px;
    right: 258px;
    border-right: 1px solid #d0d3d6;
    padding-right: 24px;
    height: 34px;
    display: flex;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    transition: border 0.2s;
    padding-top: 4px;
}

.nav-links a:nth-child(2) {
    margin-left: 36px;
}

.nav-links a.active {
    font-weight: 500;
    border-bottom: 4px solid #053046;
    color: #053046;
}

.nav-links a:hover{border-bottom:4px solid #053046;}

h1 {
    margin:22px 20px 0 0;
    font-size: 38px;
    color: #053046;
    text-transform: uppercase;
    float: left;
    font-weight: 200;
    display: flex;
    align-items: center;
    gap: 8px;
}

h1 img {
    height: 35px;
    width: 35px;
}

h1:hover{
   cursor: pointer;
}

h1 .letterA{letter-spacing: -3px;}
h1 .letterG{letter-spacing: 1px;}

h2{
    font-size: 14px;
    font-weight: 200;
    text-transform: uppercase;
    float: left;
    color: #a2a2a2;
    margin-top: 40px;
}

nav ul, footer ul{
    list-style: none;
    position: absolute;
    top: 32px;
    right: 15px;
}

nav ul li, footer ul li{
    display: inline-block;
    text-align:center;
    margin-left: 10px;
}

ul li.social{line-height: 0;}

ul li a{
    position: relative;
    overflow: hidden;
    display: inline-block;
    height: 35px;
    width: 35px;
}

ul li .label{
    display: block;
    height: 100%;
    width: 100%;
    transition: top 0.35s, left 0.35s;
    background-color: #fff;
    color: #c2c2c2;
    text-decoration: none;
    top: 0%;
    position: relative
}

ul li .label.hov-label{
    color: rgb(255,255,255);
    background-color: #053046;
}

ul li.social:hover .label {top: -100%;}
ul li.contactme:hover .hov-label{left: 0%;}
ul li.contactme:hover .label:first-child{left: 100%;}


ul li a i{
    position: relative;
    top: 8px;
}
ul li a i.icon-twitter{position:relative; top:9px;}
.icon-github:before { font-size: 18px; }

ul li.contactme {
    position: relative;
    cursor: pointer;
    height: 35px;
    width: 115px;
    overflow: hidden;
}

ul li.contactme .label{
    background-color: #053046;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 400;
    color: rgb(255, 255, 255);
    left: 0%;
    position: relative;
}

ul li.contactme .hov-label{position:absolute;left:-100%}

ul li.contactme .label span{position:relative; top: 9px;}
ul li.contactme .hov-label span{position:relative; top: 4px;}
/**** end Header Styles ****/



/**** Portfolio Grid/Item Containers ****/
#portfolio-grid{
    position: relative;
    left: 0%;
    width: 100%;
    transition: left .5s;
}

#portfolio-grid.show-item{
    left: -100%;
    float:left;
    position: absolute;
}

#portfolio-item{
    position: absolute;
    
    left:100%;
    width:100%;
    transition: left .5s;
}

#portfolio-item>div{
    max-width: 970px;
    width: 87%;
    margin: auto;
    margin-top: 12px;
}

#portfolio-item.show-item{
    position: relative;
    left:0%;
}


/**** Portfolio Filters ****/
.work-filter.container{
    list-style: none;
    text-transform: uppercase;
    color: #707070;
    font-size: 14px;
    font-weight: 300;
    margin-top: 15px;
}

.work-filter li, .work-filter span{
    float: left;
    display: inline-block;
    margin-right: 10px;
    padding: 0 8px;
    cursor: pointer;
    list-style:none;
    transition: border 0.2s;
    border-bottom:0px solid rgb(255, 255, 255);
}
.work-filter span{padding-left:0; cursor: default;}
.work-filter li.active{border-bottom:4px solid #053046; font-weight: 500; color: #053046;}
.work-filter li:hover{border-bottom:4px solid #053046;}


/**** Portfolio Grid Items ****/
#mywork{
    clear: left;
    padding: 15px 15px 0;
    max-width: 1440px;
    width: 90%;
    margin:auto;
}

#mywork > div{
    background-color: #FFF;
    float: left;
    width: calc(33.333333% - 30px);
    margin: 0 15px 30px 15px;
    height: 264px;
    position: relative;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: opacity .5s;

    opacity: 0;
    display: none;
}

#mywork > div div.thumb{
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transition-delay: unset;
    display:block;
    top: 0;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

#mywork > div div.thumb:hover {
    transition-delay: 0.3s;
}

#mywork > div[data-workitem=missionary] div.thumb{background: url('../images/thumbs/missionary-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=photobook] div.thumb{background: url('../images/thumbs/photobook-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=opdrop] div.thumb{background: url('../images/thumbs/opdrop-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=lebron] div.thumb{background: url('../images/thumbs/lebron-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=safewise] div.thumb{background: url('../images/thumbs/safewise-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=usability5] div.thumb{background: url('../images/thumbs/usability-thumb-purple.png') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=miscprint] div.thumb{background: url('../images/thumbs/misc-print-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=robbed] div.thumb{background: url('../images/thumbs/robbed-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=miscweb] div.thumb{background: url('../images/thumbs/misc-web-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=wd] div.thumb{background: url('../images/thumbs/wd-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=disaster] div.thumb{background: url('../images/thumbs/disaster-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=mlbcollage] div.thumb{background: url('../images/thumbs/mlbcollage-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=slctemple] div.thumb{background: url('../images/thumbs/slctemple-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=cashmere] div.thumb{background: url('../images/thumbs/cashmere-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=pb] div.thumb{background: url('../images/thumbs/pb-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=mtn] div.thumb{background: url('../images/thumbs/mtn-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=cloud] div.thumb{background: url('../images/thumbs/cloud-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=sk8] div.thumb{background: url('../images/thumbs/streetsk8-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=perf] div.thumb{background: url('../images/thumbs/slides-perf-thumb.jpg') no-repeat center center; background-size: cover;}
#mywork > div[data-workitem=quickwin] div.thumb{background: url('../images/thumbs/slides-quickWins-thumb.jpg') no-repeat center center; background-size: cover;}

#mywork > div .overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    display:block;
    top: 100%;
    transition: top .5s;
    background-color: rgba(0, 118, 163, 0.8);
}


#mywork > div .description{
    position: absolute;
    display: block;
    top: -100%;
    transition: top .5s;
    color: #FFF;
    padding: 25px;
}

#mywork > div h3{
    font-weight: 300;
    font-size: 20px;
    text-transform: uppercase;
    line-height: 1.2;
}

#mywork > div p{
    font-weight: 200;
    font-size: 14px;
    margin-top: 10px;
}

.action-btn{
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    display: block;
    background-color: #FFF;
    padding: 10px 30px;
    color: #053046;
}

#mywork > div .action-btn{
    bottom: 25px;
    left: -200px;
    transition: left .35s;

    position: absolute;
}

.action-btn i{
    font-size: 16px;
    left: 2px;
    transition: left .35s;
    position: relative;
}

.action-btn:hover i{left: 12px;}

#mywork > div:hover{cursor: pointer;}
#mywork > div:hover .overlay{top: 0%;}
#mywork > div:hover .description{top: 0%;}
#mywork > div:hover .action-btn{left: 25px;}
#mywork > div:hover .thumb{transform: scale(1.2)}

/**** About Me Page ****/
.about-me-page h2, .about-me-page h3 {
    font-size: 21px;
    font-weight: 600;
    text-transform: uppercase;
    color: #053046;
    display: block;
    float: none;
    margin: 16px 0 8px;
}

.about-me-page h2:before, .about-me-page h3:before {
    content: "";
    display: inline-block;
    width: 60px;
    height: 16px;
    background-color: #053046;
    margin-right: 8px;
}

.about-me-page h3 {
    font-size: 16px;
    font-weight: 500;
    margin-top: 0;
}

.about-me-page h3:before {
    width: 36px;
    height: 14px;
    position: relative;
    top: 1px;
}

.about-me-page a {
    color: #053046;
    text-decoration: none;
    border-bottom: 3px dotted #053046;
    padding-bottom: 1px;
    font-weight: 400;
    transition: all 0.2s;
}

.about-me-page a:hover {
    color: #e6822b;
    border-bottom: 3px dotted #e6822b;
}

.work-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 48px;
}

.work-container > div {
    flex: 2 0 60%;
}

.work-container > img {
    flex: 1 0 calc(40% - 48px);
    min-width: 0;
}

.big-blurb {
    font-size: 32px;
    margin-bottom: 24px;
}

.big-blurb strong {
    font-weight: 500;
    color: #053046;
}

.little-blurb {
    font-size: 20px;
    line-height: 1.6;
}

.education-degree {
    font-weight: 500;
}

.education-item {
    margin-bottom: 16px;
}

.work-container > div.work-education {
    flex: 1 0 calc(40% - 112px);
    min-width: 0;
    padding: 32px 32px;
    background-color: #e9e9e9;
}

.experience-item {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.experience-details {
    flex: 1 0 170px;
}

.experience-description {
    flex: 2 0 calc(100% - 170px - 24px);
}

.experience-title {
    font-weight: 600;
}

.life-background {
    background-color: #053046;
    color: #fff;
    border-bottom: 1px solid #055879;
    padding: 24px 0 48px;
}

.life-background h2 {
    color: #fff;
    font-weight: 500;
}

.life-background p {
    margin-bottom: 16px;
    max-width: 900px;
}

.life-background h2:before {
    background-color: #fff;
}

.life-background a {
    color: #fff;
    border-bottom: 3px dotted #fff;
}

.life-background a:hover {
    color: #e6822b;
    border-bottom: 3px dotted #e6822b;
}

ul.photo-container {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 24px 0 0 0;
  margin: -16px;
}

ul.photo-container li {
  height: 40vh;
  flex-grow: 1;
  margin: 16px;
}

ul.photo-container li:last-child {
  flex-grow: 10;
}

ul.photo-container img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}



@media (max-aspect-ratio: 1/1) and (max-width: 750px) {
  ul.photo-container ul {
    flex-direction: row;
  }

  ul.photo-container li {
    height: auto;
    width: 100%;
  }
  ul.photo-container img {
    width: 100%;
    min-width: 0;
  }
}



/**** Portfolio Item Page ****/
.slide-to-reveal-sb #portfolio-item{opacity: 0;left:200%}
.slide-to-reveal-sb #portfolio-item.show-item{opacity: 1;left:0%;min-height:500px;}

#portfolio-item h2 {
    font-size: 56px;
    font-weight: 200;
    color: #053046;
    text-transform: none;
    float: none;
    margin-top: -3px;
    margin-bottom: 18px;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#portfolio-item h2 .item-detail {
    font-size: 13px;
    padding: 3px 12px;
    font-weight: 400;
    background: #e0e3e6;
    color: #707070;
    width: auto;
    display: inline-block;
}

#portfolio-item h3{
    font-size: 28px;
    font-weight: 200;
    color: #053046;
    text-transform: none;
    float: none;
    margin-top: 50px;
    margin-bottom: 10px;
    line-height: 1.1;
}

#portfolio-item p{
    margin: 15px 0;
}

#portfolio-item a{
    display: inline-block;
    font-weight: 400;
    text-decoration: none;
    color: #fff;
    background-color: #279669;
    padding: 8px 24px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

#portfolio-item a:hover i{
    left: 12px;
}

#portfolio-item a:hover {
    background-color: #21825b;
}

#portfolio-item a i{
    position: relative;
    transition: left .35s;
    left: 4px;
}

#port-footer{
    position: relative;
    top: -30px;
}

#back-to-port, #back-to-top{
    text-transform: uppercase;
    color: #a0a0a0;
    font-size: 14px;
    font-weight: 200;
}

#back-to-top{float:right;position: relative; top: 2px; transition: color .35s;}
#back-to-top i{left:0px;}
#back-to-top:hover {color: rgb(0, 118, 163)}
#back-to-top:hover i{left:0px;}

#back-to-port:hover, #back-to-top:hover{
    cursor:pointer;
}
#back-to-port i{position:relative;transition: right .35s; right: 0px;}

#back-to-port:hover i{right: 12px;}

#portfolio-item .intro{
    float: left;
    width: 100%
}

#portfolio-item img.thumb{
    float: left;
    margin-right: 24px;
}

#portfolio-item .screenshots{
    margin-bottom: 82px;
    padding: 24px 40px;
    position: relative;
    clear: left;
    width: 100%;
    background-color: rgba(10,10,10, 0.05);
    top: 24px;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}

#portfolio-item .screenshots img{
    display: block;
    margin: auto;
    max-width: 100%;
    margin-bottom: 24px;
}

#portfolio-item .screenshots h3{
    border-bottom: 1px #CCC solid;
    max-width: 600px;
    margin: auto;
    margin-bottom: 10px;
    padding-top: 20px;
}

#portfolio-item .screenshots h3.full-width-header {
    max-width: none;
}

#portfolio-item .screenshots .screenshots-btn-widget {
    background-color: #e0e3e6;
    padding: 36px;
    width: 600px;
    margin: 15px auto;
    text-align: center;   
}

#portfolio-item #logos {
    height: 1150px;
    margin: auto;
    width: 720px;
}

#portfolio-item #logos img{
    width: 340px;
    float: left;
    margin: 10px !important;
}

#portfolio-item #logos h3{
    max-width: 700px;
}

#portfolio-item h3 span{
    position: relative;
    font-size: 14px;
    padding: 3px 12px;
    font-weight: 300;
    background: #ccc;
    color: #777;
    top: 5px;
    float: right;
}




/**** Footer specifc styles ****/
footer{
    clear: left;
    background-color: #053046;
    color: rgb(255,255,255);
    height: 100px;
}

footer p{font-size: 12px;margin-top:40px;float:left;width: 50%;}

footer ul li.contactme .label{
    background-color: rgb(255, 255, 255);
    color: #053046;
}
footer ul li.contactme a{
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/*footer ul li.contactme {top:-18px;} not sure whhy this was here*/
footer ul li.contactme a i{top:0px;}

footer ul li{
    border: 1px solid rgb(255, 255, 255);
}

footer ul li .label{
    background-color: #053046;
    color: rgb(255, 255, 255);
}

footer ul li .label.hov-label{
    color: #053046;
    background-color: rgb(255,255,255);
}

.ut-outline {
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    background-image: url(../images/ut.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

footer .archive-msg {
    position: absolute;
    bottom: 10px;
    left: 15px;
    font-size: 10px;
    color: #a0a0a0;
}

.signature-container {
    position: absolute;
    display: flex;
    align-items: center;
    height: 100px;
    width: 156px;
    left: 50%;
    margin-left: -78px;
    top: 0;
    cursor: pointer;
}

.skateboard {
    position: relative;
    bottom: 4px;
    left: 2px;
    width: 38px;
    height: 38px;
    background-image: url(../images/kickflip/kf1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.signature {
    height: 36px;
    width: 124px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/cf-signature.svg);
}


/**** Sidebar Stuff ****/
#maincontent{
    position:relative;
    z-index:100;
    right:0;
    background: url('../images/noisybg.png');
    box-shadow: 1px 0px 1px #555;
    transition: right .5s;
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    max-width:100%;
    overflow: hidden;
}

#sidebar{
    opacity: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    position: fixed;
    top: 0;
    right: 0px;
    width: 410px;
    padding: 30px;
    z-index:99;
    height: 100%;
    background-color: #053046;
    color: #fff;
    transition: right .25s;
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}

#maincontent.slide-to-reveal-sb{right: 410px;}
#maincontent.slide-to-reveal-sb:before{opacity: 0.3;
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
display: block;
z-index: 101;
content: "";}

#sidebar h3{
    text-transform: uppercase;
    font-size: 24px;
    margin: -16px 0 18px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #235168;
}

#sidebar h3 i {
    display: inline;
    margin-right: 12px;
    font-size: 32px;
    position: relative;
    top: 2px;
}

#sidebar label {
    font-size: 13px;
    margin: 20px 0 5px;
    display: block;
}

input, textarea{
    box-shadow: 1px 1px 3px #044863 inset;
    border: 1px solid transparent;
    background-color: #235168;
    font-family: 'Raleway';
    font-weight: 200;
    color: #fff;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

input:-internal-autofill-selected {
    background-color: #235168 !important;
    background-image: none !important;
    color: #fff !important;
}

input:focus, textarea:focus{
    border: 1px solid #258abb;
}

input {
    height: 40px;
    font-size: 18px;
    padding-left:10px;
}

textarea{
    height: 200px;
    font-size: 17px;
    padding:10px;
}

#sidebar .action-btn{
    margin-top: 10px;
    font-size: 16px;
    width: 200px;
    text-align: center;
    font-weight: 500;
    padding: 12px 30px;
    display: inline-block;
    text-transform: none;
    cursor: pointer;
    box-shadow: none;
    border: none;
    font-family: 'Raleway';
}

#sidebar .action-btn:not(.disabled):hover, #sidebar .action-btn:not(.disabled):focus {
    box-shadow: 0px 0px 8px #fff;
}

#sidebar .action-btn:active {
    box-shadow: none;
}

#sidebar .action-btn.disabled{
    opacity: .5;
}

#sidebar .action-btn i {font-size: 18px; top:1px;}
#sidebar .action-btn:hover i {left: 18px; cursor: pointer;}
#sidebar .action-btn.disabled:hover i {left: 2px;cursor: defalut;}

#sidebar .close{
    text-align: center;
    width: 30px;
    color: #fff;
    font-size: 24px;
    position: absolute;
    right: 22px;
    top: 18px;
    text-transform: lowercase;
    font-weight: 100;
    line-height: 1.5;
    opacity: 0.3;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
}
#sidebar .close:hover{opacity: .7;cursor:pointer;}
#sidebar #contact-form{display:block;}
#sidebar #contact-links{display:none;}
#sidebar #contact-links ol{list-style:none;font-size:18px;margin-top:25px;}
/*#sidebar #contact-links ol li {border-top:1px solid #108bb5;padding:10px;}*/
#sidebar #contact-links ol li.contactme a{border-bottom: 1px solid #108bb5;}
#sidebar #contact-links ol li a{display: block; border-top: 1px solid #108bb5; padding: 10px; color:#fff;position:relative;text-decoration:none;}
#sidebar #contact-links ol li i{position:absolute;top:14px;left: 8px;}
#sidebar #contact-links ol li i.icon-twitter{top:15px;}
#sidebar #contact-links ol li i.icon-github { top: 15px; }
#sidebar #contact-links ol li i.icon-github:before { font-size: 20px; }
#sidebar #contact-links ol li span{margin-left:40px;}

#sidebar #contact-links ol li:active{background-color:#fff;}
#sidebar #contact-links ol li:active a{color:#053046;}

#portfolio-item-content .sources-section { margin-bottom: 75px; }
#portfolio-item-content .sources-section ul { margin: 5px 30px; }
#portfolio-item-content .sources-section li a { font-size: 13px; display: inline; background-color: none; height: auto; width: auto; padding: 0; background-color: transparent; color: #0076a3;}
#portfolio-item-content .sources-section li a:hover { text-decoration: underline; }

/**** Loading Placeholder ****/
#loading{
    font-weight: 300;
    padding-top: 100px;
    font-size: 48px;
    min-height: 1200px;
    display: block;
    margin: auto;
    width: 220px;
    color: #ddd;
}

#loading span{
    margin: 0 4px;
    display: inline-block;
    border-radius: 50%;
    background-color: #ddd;
    height: 5px;
    width: 5px;
    animation-duration: 1.5s;
    animation-delay: .75s;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-delay: .75s;
    -webkit-animation-iteration-count: infinite;
    
}

.uno{animation-name: uno; -webkit-animation-name: uno;}
.dos{animation-name: dos; -webkit-animation-name: dos;}
.tres{animation-name: tres; -webkit-animation-name: tres;}

@-webkit-keyframes uno {
0% {background-color: #aaa;}
50% {background-color: #ddd;}
100% {background-color: #ddd;}
}

@keyframes uno {
0% {background-color: #aaa;}
50% {background-color: #ddd;}
100% {background-color: #ddd;}
}

@-webkit-keyframes dos {
0% {background-color: #ddd;}
50% {background-color: #aaa;}
100% {background-color: #ddd;}
}

@keyframes dos {
0% {background-color: #ddd;}
50% {background-color: #aaa;}
100% {background-color: #ddd;}
}

@-webkit-keyframes tres {
0% {background-color: #ddd;}
50% {background-color: #ddd;}
100% {background-color: #aaa;}
}

@keyframes tres {
0% {background-color: #ddd;}
50% {background-color: #ddd;}
100% {background-color: #aaa;}
}

/**** Responsiveness ****/
@media screen and (max-width: 1440px) {
    #mywork > div {height: 240px;}
}

@media screen and (max-width: 1260px) {
    #mywork > div {height: 210px;}
}

@media screen and (max-width: 1044px) {
    nav h2 {display: none;}
    .work-container {
        flex-direction: column;
    }
    .work-container > img {
        width: 90%;
    }
}

@media screen and (max-width: 900px) {
    .container.content{margin-top:15px;}
    #mywork > div {width: calc(50% - 30px); height: 200px;}
    h1{ margin: 15px 20px 0 0;}
    .nav-links {top: 68px; right: auto; border-right: none; height: 32px; }
    nav ul {top: 25px;}

    #portfolio-item img.thumb{display: none;}
    #portfolio-item .screenshots{width:116%; margin-left:-8%;}

    #portfolio-item #logos {height: 1050px;width: 600px;}
    #portfolio-item #logos img{width: 280px;float: left;margin: 10px !important;}
    #portfolio-item #logos h3{max-width: 600px;}
    #portfolio-item .screenshots .screenshots-btn-widget {
        width: calc(100% - 72px);
    }

}

@media screen and (max-width: 750px) {
    footer ul{display: block; width: 160px; margin: auto; position: static; padding-top: 40px; text-align: center;}
    footer p{width: 95%; margin-top: 10px; text-align: center;}
    footer{height:300px;}
    footer .container {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    footer .signature-container {
        position: static;
        margin-left: 0;
    }
    footer ul li.contactme{display:none;}
}

@media screen and (max-width: 650px) {
    nav ul li{display:none;}
    nav ul {height: 35px; width: 35px; background-color: #FFF;top: 25px; cursor:pointer; border: 1px solid transparent; transition: all 0.1s;}
    /* nav ul:hover:before { height: 6px; position: relative; top :-1px; transition: all 0.3s;}
    nav ul:hover:after { top: -16px; transition: all 0.3s;} */

    /* https://codepen.io/pranjal9599/pen/yJRNoL*/
    /* https://codepen.io/fabean/pen/XXegoQ */  

    nav ul:before{
        content: " ";
        display: inline-block;
        width: 22px;
        height: 5px;
        border-top: 2px solid #053046;
        border-bottom: 2px solid #053046;
        margin: 10px 6px 0 6px;
        transition: all 0.1s;
    }
    nav ul:after{
        content: " ";
        display: inline-block;
        width: 22px;
        height: 0px;
        border-top: 2px solid #053046;
        margin: 0 6px;
        position: relative;
        top: -17px;
        transition: all 0.1s;
    }

    nav ul:hover{background-color: #053046; transition: all 0.3s;}
    nav ul:hover:before{border-color: #fff;}
    nav ul:hover:after{border-color: #fff;}
    
    #sidebar #contact-form{display:none;}
    #sidebar #contact-links{display:block;}
    #sidebar{width: 275px;}
    #maincontent.slide-to-reveal-sb{right: 275px;}

    #portfolio-item #logos {height: auto;width: auto;}
    #portfolio-item #logos img{width: auto;float: none; margin:0 auto 15px !important;}
    
    /*remove contact form from sidebar, just have social stuff and a "mailto" link */
}

@media screen and (max-width: 500px) {
    #mywork > div {width: calc(100% - 30px); height: 200px;}
    .work-filter.container { display: none;}
}

@media screen and (max-width: 450px) {
    h1 {font-size:30px;}
    nav ul { top: 20px; }
    .work-filter li, .work-filter span{padding: 0 4px;}
}


/********* Font Awesome **********/
@font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=3.2.1');src:url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;}
[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none;}
.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em;}
a [class^="icon-"],a [class*=" icon-"]{display:inline;}
[class^="icon-"].icon-fixed-width,[class*=" icon-"].icon-fixed-width{display:inline-block;width:1.1428571428571428em;text-align:right;padding-right:0.2857142857142857em;}[class^="icon-"].icon-fixed-width.icon-large,[class*=" icon-"].icon-fixed-width.icon-large{width:1.4285714285714286em;}
.icons-ul{margin-left:2.142857142857143em;list-style-type:none;}.icons-ul>li{position:relative;}
.icons-ul .icon-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;text-align:center;line-height:inherit;}
[class^="icon-"].hide,[class*=" icon-"].hide{display:none;}
.icon-muted{color:#eeeeee;}
.icon-light{color:#ffffff;}
.icon-dark{color:#333333;}
.icon-border{border:solid 1px #eeeeee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.icon-2x{font-size:2em;}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.icon-3x{font-size:3em;}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.icon-4x{font-size:4em;}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.icon-5x{font-size:5em;}.icon-5x.icon-border{border-width:5px;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;}
.pull-right{float:right;}
.pull-left{float:left;}
[class^="icon-"].pull-left,[class*=" icon-"].pull-left{margin-right:.3em;}
[class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em;}
[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}
.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none;}
.btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large{line-height:.9em;}
.btn [class^="icon-"].icon-spin,.nav [class^="icon-"].icon-spin,.btn [class*=" icon-"].icon-spin,.nav [class*=" icon-"].icon-spin{display:inline-block;}
.nav-tabs [class^="icon-"],.nav-pills [class^="icon-"],.nav-tabs [class*=" icon-"],.nav-pills [class*=" icon-"],.nav-tabs [class^="icon-"].icon-large,.nav-pills [class^="icon-"].icon-large,.nav-tabs [class*=" icon-"].icon-large,.nav-pills [class*=" icon-"].icon-large{line-height:.9em;}
.btn [class^="icon-"].pull-left.icon-2x,.btn [class*=" icon-"].pull-left.icon-2x,.btn [class^="icon-"].pull-right.icon-2x,.btn [class*=" icon-"].pull-right.icon-2x{margin-top:.18em;}
.btn [class^="icon-"].icon-spin.icon-large,.btn [class*=" icon-"].icon-spin.icon-large{line-height:.8em;}
.btn.btn-small [class^="icon-"].pull-left.icon-2x,.btn.btn-small [class*=" icon-"].pull-left.icon-2x,.btn.btn-small [class^="icon-"].pull-right.icon-2x,.btn.btn-small [class*=" icon-"].pull-right.icon-2x{margin-top:.25em;}
.btn.btn-large [class^="icon-"],.btn.btn-large [class*=" icon-"]{margin-top:0;}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x,.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-top:.05em;}
.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x{margin-right:.2em;}
.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-left:.2em;}
.nav-list [class^="icon-"],.nav-list [class*=" icon-"]{line-height:inherit;}
.icon-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.icon-stack [class^="icon-"],.icon-stack [class*=" icon-"]{display:block;text-align:center;position:absolute;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;}
.icon-stack .icon-stack-base{font-size:2em;*line-height:1em;}
.icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}
a .icon-stack,a .icon-spin{display:inline-block;text-decoration:none;}
@-moz-keyframes spin{0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(359deg);}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(359deg);}}@-o-keyframes spin{0%{-o-transform:rotate(0deg);} 100%{-o-transform:rotate(359deg);}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg);} 100%{-ms-transform:rotate(359deg);}}@keyframes spin{0%{transform:rotate(0deg);} 100%{transform:rotate(359deg);}}.icon-rotate-90:before{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.icon-rotate-180:before{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
.icon-rotate-270:before{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.icon-flip-horizontal:before{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1);}
.icon-flip-vertical:before{-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1);}
a .icon-rotate-90:before,a .icon-rotate-180:before,a .icon-rotate-270:before,a .icon-flip-horizontal:before,a .icon-flip-vertical:before{display:inline-block;}
.icon-glass:before{content:"\f000";}
.icon-music:before{content:"\f001";}
.icon-search:before{content:"\f002";}
.icon-envelope-alt:before{content:"\f003";}
.icon-heart:before{content:"\f004";}
.icon-star:before{content:"\f005";}
.icon-star-empty:before{content:"\f006";}
.icon-user:before{content:"\f007";}
.icon-film:before{content:"\f008";}
.icon-th-large:before{content:"\f009";}
.icon-th:before{content:"\f00a";}
.icon-th-list:before{content:"\f00b";}
.icon-ok:before{content:"\f00c";}
.icon-remove:before{content:"\f00d";}
.icon-zoom-in:before{content:"\f00e";}
.icon-zoom-out:before{content:"\f010";}
.icon-power-off:before,.icon-off:before{content:"\f011";}
.icon-signal:before{content:"\f012";}
.icon-gear:before,.icon-cog:before{content:"\f013";}
.icon-trash:before{content:"\f014";}
.icon-home:before{content:"\f015";}
.icon-file-alt:before{content:"\f016";}
.icon-time:before{content:"\f017";}
.icon-road:before{content:"\f018";}
.icon-download-alt:before{content:"\f019";}
.icon-download:before{content:"\f01a";}
.icon-upload:before{content:"\f01b";}
.icon-inbox:before{content:"\f01c";}
.icon-play-circle:before{content:"\f01d";}
.icon-rotate-right:before,.icon-repeat:before{content:"\f01e";}
.icon-refresh:before{content:"\f021";}
.icon-list-alt:before{content:"\f022";}
.icon-lock:before{content:"\f023";}
.icon-flag:before{content:"\f024";}
.icon-headphones:before{content:"\f025";}
.icon-volume-off:before{content:"\f026";}
.icon-volume-down:before{content:"\f027";}
.icon-volume-up:before{content:"\f028";}
.icon-qrcode:before{content:"\f029";}
.icon-barcode:before{content:"\f02a";}
.icon-tag:before{content:"\f02b";}
.icon-tags:before{content:"\f02c";}
.icon-book:before{content:"\f02d";}
.icon-bookmark:before{content:"\f02e";}
.icon-print:before{content:"\f02f";}
.icon-camera:before{content:"\f030";}
.icon-font:before{content:"\f031";}
.icon-bold:before{content:"\f032";}
.icon-italic:before{content:"\f033";}
.icon-text-height:before{content:"\f034";}
.icon-text-width:before{content:"\f035";}
.icon-align-left:before{content:"\f036";}
.icon-align-center:before{content:"\f037";}
.icon-align-right:before{content:"\f038";}
.icon-align-justify:before{content:"\f039";}
.icon-list:before{content:"\f03a";}
.icon-indent-left:before{content:"\f03b";}
.icon-indent-right:before{content:"\f03c";}
.icon-facetime-video:before{content:"\f03d";}
.icon-picture:before{content:"\f03e";}
.icon-pencil:before{content:"\f040";}
.icon-map-marker:before{content:"\f041";}
.icon-adjust:before{content:"\f042";}
.icon-tint:before{content:"\f043";}
.icon-edit:before{content:"\f044";}
.icon-share:before{content:"\f045";}
.icon-check:before{content:"\f046";}
.icon-move:before{content:"\f047";}
.icon-step-backward:before{content:"\f048";}
.icon-fast-backward:before{content:"\f049";}
.icon-backward:before{content:"\f04a";}
.icon-play:before{content:"\f04b";}
.icon-pause:before{content:"\f04c";}
.icon-stop:before{content:"\f04d";}
.icon-forward:before{content:"\f04e";}
.icon-fast-forward:before{content:"\f050";}
.icon-step-forward:before{content:"\f051";}
.icon-eject:before{content:"\f052";}
.icon-chevron-left:before{content:"\f053";}
.icon-chevron-right:before{content:"\f054";}
.icon-plus-sign:before{content:"\f055";}
.icon-minus-sign:before{content:"\f056";}
.icon-remove-sign:before{content:"\f057";}
.icon-ok-sign:before{content:"\f058";}
.icon-question-sign:before{content:"\f059";}
.icon-info-sign:before{content:"\f05a";}
.icon-screenshot:before{content:"\f05b";}
.icon-remove-circle:before{content:"\f05c";}
.icon-ok-circle:before{content:"\f05d";}
.icon-ban-circle:before{content:"\f05e";}
.icon-arrow-left:before{content:"\f060";}
.icon-arrow-right:before{content:"\f061";}
.icon-arrow-up:before{content:"\f062";}
.icon-arrow-down:before{content:"\f063";}
.icon-mail-forward:before,.icon-share-alt:before{content:"\f064";}
.icon-resize-full:before{content:"\f065";}
.icon-resize-small:before{content:"\f066";}
.icon-plus:before{content:"\f067";}
.icon-minus:before{content:"\f068";}
.icon-asterisk:before{content:"\f069";}
.icon-exclamation-sign:before{content:"\f06a";}
.icon-gift:before{content:"\f06b";}
.icon-leaf:before{content:"\f06c";}
.icon-fire:before{content:"\f06d";}
.icon-eye-open:before{content:"\f06e";}
.icon-eye-close:before{content:"\f070";}
.icon-warning-sign:before{content:"\f071";}
.icon-plane:before{content:"\f072";}
.icon-calendar:before{content:"\f073";}
.icon-random:before{content:"\f074";}
.icon-comment:before{content:"\f075";}
.icon-magnet:before{content:"\f076";}
.icon-chevron-up:before{content:"\f077";}
.icon-chevron-down:before{content:"\f078";}
.icon-retweet:before{content:"\f079";}
.icon-shopping-cart:before{content:"\f07a";}
.icon-folder-close:before{content:"\f07b";}
.icon-folder-open:before{content:"\f07c";}
.icon-resize-vertical:before{content:"\f07d";}
.icon-resize-horizontal:before{content:"\f07e";}
.icon-bar-chart:before{content:"\f080";}
.icon-twitter-sign:before{content:"\f081";}
.icon-facebook-sign:before{content:"\f082";}
.icon-camera-retro:before{content:"\f083";}
.icon-key:before{content:"\f084";}
.icon-gears:before,.icon-cogs:before{content:"\f085";}
.icon-comments:before{content:"\f086";}
.icon-thumbs-up-alt:before{content:"\f087";}
.icon-thumbs-down-alt:before{content:"\f088";}
.icon-star-half:before{content:"\f089";}
.icon-heart-empty:before{content:"\f08a";}
.icon-signout:before{content:"\f08b";}
.icon-linkedin-sign:before{content:"\f08c";}
.icon-pushpin:before{content:"\f08d";}
.icon-external-link:before{content:"\f08e";}
.icon-signin:before{content:"\f090";}
.icon-trophy:before{content:"\f091";}
.icon-github-sign:before{content:"\f092";}
.icon-upload-alt:before{content:"\f093";}
.icon-lemon:before{content:"\f094";}
.icon-phone:before{content:"\f095";}
.icon-unchecked:before,.icon-check-empty:before{content:"\f096";}
.icon-bookmark-empty:before{content:"\f097";}
.icon-phone-sign:before{content:"\f098";}
.icon-twitter:before{content:"\f099";}
.icon-facebook:before{content:"\f09a";}
.icon-github:before{content:"\f09b";}
.icon-unlock:before{content:"\f09c";}
.icon-credit-card:before{content:"\f09d";}
.icon-rss:before{content:"\f09e";}
.icon-hdd:before{content:"\f0a0";}
.icon-bullhorn:before{content:"\f0a1";}
.icon-bell:before{content:"\f0a2";}
.icon-certificate:before{content:"\f0a3";}
.icon-hand-right:before{content:"\f0a4";}
.icon-hand-left:before{content:"\f0a5";}
.icon-hand-up:before{content:"\f0a6";}
.icon-hand-down:before{content:"\f0a7";}
.icon-circle-arrow-left:before{content:"\f0a8";}
.icon-circle-arrow-right:before{content:"\f0a9";}
.icon-circle-arrow-up:before{content:"\f0aa";}
.icon-circle-arrow-down:before{content:"\f0ab";}
.icon-globe:before{content:"\f0ac";}
.icon-wrench:before{content:"\f0ad";}
.icon-tasks:before{content:"\f0ae";}
.icon-filter:before{content:"\f0b0";}
.icon-briefcase:before{content:"\f0b1";}
.icon-fullscreen:before{content:"\f0b2";}
.icon-group:before{content:"\f0c0";}
.icon-link:before{content:"\f0c1";}
.icon-cloud:before{content:"\f0c2";}
.icon-beaker:before{content:"\f0c3";}
.icon-cut:before{content:"\f0c4";}
.icon-copy:before{content:"\f0c5";}
.icon-paperclip:before,.icon-paper-clip:before{content:"\f0c6";}
.icon-save:before{content:"\f0c7";}
.icon-sign-blank:before{content:"\f0c8";}
.icon-reorder:before{content:"\f0c9";}
.icon-list-ul:before{content:"\f0ca";}
.icon-list-ol:before{content:"\f0cb";}
.icon-strikethrough:before{content:"\f0cc";}
.icon-underline:before{content:"\f0cd";}
.icon-table:before{content:"\f0ce";}
.icon-magic:before{content:"\f0d0";}
.icon-truck:before{content:"\f0d1";}
.icon-pinterest:before{content:"\f0d2";}
.icon-pinterest-sign:before{content:"\f0d3";}
.icon-google-plus-sign:before{content:"\f0d4";}
.icon-google-plus:before{content:"\f0d5";}
.icon-money:before{content:"\f0d6";}
.icon-caret-down:before{content:"\f0d7";}
.icon-caret-up:before{content:"\f0d8";}
.icon-caret-left:before{content:"\f0d9";}
.icon-caret-right:before{content:"\f0da";}
.icon-columns:before{content:"\f0db";}
.icon-sort:before{content:"\f0dc";}
.icon-sort-down:before{content:"\f0dd";}
.icon-sort-up:before{content:"\f0de";}
.icon-envelope:before{content:"\f0e0";}
.icon-linkedin:before{content:"\f0e1";}
.icon-rotate-left:before,.icon-undo:before{content:"\f0e2";}
.icon-legal:before{content:"\f0e3";}
.icon-dashboard:before{content:"\f0e4";}
.icon-comment-alt:before{content:"\f0e5";}
.icon-comments-alt:before{content:"\f0e6";}
.icon-bolt:before{content:"\f0e7";}
.icon-sitemap:before{content:"\f0e8";}
.icon-umbrella:before{content:"\f0e9";}
.icon-paste:before{content:"\f0ea";}
.icon-lightbulb:before{content:"\f0eb";}
.icon-exchange:before{content:"\f0ec";}
.icon-cloud-download:before{content:"\f0ed";}
.icon-cloud-upload:before{content:"\f0ee";}
.icon-user-md:before{content:"\f0f0";}
.icon-stethoscope:before{content:"\f0f1";}
.icon-suitcase:before{content:"\f0f2";}
.icon-bell-alt:before{content:"\f0f3";}
.icon-coffee:before{content:"\f0f4";}
.icon-food:before{content:"\f0f5";}
.icon-file-text-alt:before{content:"\f0f6";}
.icon-building:before{content:"\f0f7";}
.icon-hospital:before{content:"\f0f8";}
.icon-ambulance:before{content:"\f0f9";}
.icon-medkit:before{content:"\f0fa";}
.icon-fighter-jet:before{content:"\f0fb";}
.icon-beer:before{content:"\f0fc";}
.icon-h-sign:before{content:"\f0fd";}
.icon-plus-sign-alt:before{content:"\f0fe";}
.icon-double-angle-left:before{content:"\f100";}
.icon-double-angle-right:before{content:"\f101";}
.icon-double-angle-up:before{content:"\f102";}
.icon-double-angle-down:before{content:"\f103";}
.icon-angle-left:before{content:"\f104";}
.icon-angle-right:before{content:"\f105";}
.icon-angle-up:before{content:"\f106";}
.icon-angle-down:before{content:"\f107";}
.icon-desktop:before{content:"\f108";}
.icon-laptop:before{content:"\f109";}
.icon-tablet:before{content:"\f10a";}
.icon-mobile-phone:before{content:"\f10b";}
.icon-circle-blank:before{content:"\f10c";}
.icon-quote-left:before{content:"\f10d";}
.icon-quote-right:before{content:"\f10e";}
.icon-spinner:before{content:"\f110";}
.icon-circle:before{content:"\f111";}
.icon-mail-reply:before,.icon-reply:before{content:"\f112";}
.icon-github-alt:before{content:"\f113";}
.icon-folder-close-alt:before{content:"\f114";}
.icon-folder-open-alt:before{content:"\f115";}
.icon-expand-alt:before{content:"\f116";}
.icon-collapse-alt:before{content:"\f117";}
.icon-smile:before{content:"\f118";}
.icon-frown:before{content:"\f119";}
.icon-meh:before{content:"\f11a";}
.icon-gamepad:before{content:"\f11b";}
.icon-keyboard:before{content:"\f11c";}
.icon-flag-alt:before{content:"\f11d";}
.icon-flag-checkered:before{content:"\f11e";}
.icon-terminal:before{content:"\f120";}
.icon-code:before{content:"\f121";}
.icon-reply-all:before{content:"\f122";}
.icon-mail-reply-all:before{content:"\f122";}
.icon-star-half-full:before,.icon-star-half-empty:before{content:"\f123";}
.icon-location-arrow:before{content:"\f124";}
.icon-crop:before{content:"\f125";}
.icon-code-fork:before{content:"\f126";}
.icon-unlink:before{content:"\f127";}
.icon-question:before{content:"\f128";}
.icon-info:before{content:"\f129";}
.icon-exclamation:before{content:"\f12a";}
.icon-superscript:before{content:"\f12b";}
.icon-subscript:before{content:"\f12c";}
.icon-eraser:before{content:"\f12d";}
.icon-puzzle-piece:before{content:"\f12e";}
.icon-microphone:before{content:"\f130";}
.icon-microphone-off:before{content:"\f131";}
.icon-shield:before{content:"\f132";}
.icon-calendar-empty:before{content:"\f133";}
.icon-fire-extinguisher:before{content:"\f134";}
.icon-rocket:before{content:"\f135";}
.icon-maxcdn:before{content:"\f136";}
.icon-chevron-sign-left:before{content:"\f137";}
.icon-chevron-sign-right:before{content:"\f138";}
.icon-chevron-sign-up:before{content:"\f139";}
.icon-chevron-sign-down:before{content:"\f13a";}
.icon-html5:before{content:"\f13b";}
.icon-css3:before{content:"\f13c";}
.icon-anchor:before{content:"\f13d";}
.icon-unlock-alt:before{content:"\f13e";}
.icon-bullseye:before{content:"\f140";}
.icon-ellipsis-horizontal:before{content:"\f141";}
.icon-ellipsis-vertical:before{content:"\f142";}
.icon-rss-sign:before{content:"\f143";}
.icon-play-sign:before{content:"\f144";}
.icon-ticket:before{content:"\f145";}
.icon-minus-sign-alt:before{content:"\f146";}
.icon-check-minus:before{content:"\f147";}
.icon-level-up:before{content:"\f148";}
.icon-level-down:before{content:"\f149";}
.icon-check-sign:before{content:"\f14a";}
.icon-edit-sign:before{content:"\f14b";}
.icon-external-link-sign:before{content:"\f14c";}
.icon-share-sign:before{content:"\f14d";}
.icon-compass:before{content:"\f14e";}
.icon-collapse:before{content:"\f150";}
.icon-collapse-top:before{content:"\f151";}
.icon-expand:before{content:"\f152";}
.icon-euro:before,.icon-eur:before{content:"\f153";}
.icon-gbp:before{content:"\f154";}
.icon-dollar:before,.icon-usd:before{content:"\f155";}
.icon-rupee:before,.icon-inr:before{content:"\f156";}
.icon-yen:before,.icon-jpy:before{content:"\f157";}
.icon-renminbi:before,.icon-cny:before{content:"\f158";}
.icon-won:before,.icon-krw:before{content:"\f159";}
.icon-bitcoin:before,.icon-btc:before{content:"\f15a";}
.icon-file:before{content:"\f15b";}
.icon-file-text:before{content:"\f15c";}
.icon-sort-by-alphabet:before{content:"\f15d";}
.icon-sort-by-alphabet-alt:before{content:"\f15e";}
.icon-sort-by-attributes:before{content:"\f160";}
.icon-sort-by-attributes-alt:before{content:"\f161";}
.icon-sort-by-order:before{content:"\f162";}
.icon-sort-by-order-alt:before{content:"\f163";}
.icon-thumbs-up:before{content:"\f164";}
.icon-thumbs-down:before{content:"\f165";}
.icon-youtube-sign:before{content:"\f166";}
.icon-youtube:before{content:"\f167";}
.icon-xing:before{content:"\f168";}
.icon-xing-sign:before{content:"\f169";}
.icon-youtube-play:before{content:"\f16a";}
.icon-dropbox:before{content:"\f16b";}
.icon-stackexchange:before{content:"\f16c";}
.icon-instagram:before{content:"\f16d";}
.icon-flickr:before{content:"\f16e";}
.icon-adn:before{content:"\f170";}
.icon-bitbucket:before{content:"\f171";}
.icon-bitbucket-sign:before{content:"\f172";}
.icon-tumblr:before{content:"\f173";}
.icon-tumblr-sign:before{content:"\f174";}
.icon-long-arrow-down:before{content:"\f175";}
.icon-long-arrow-up:before{content:"\f176";}
.icon-long-arrow-left:before{content:"\f177";}
.icon-long-arrow-right:before{content:"\f178";}
.icon-apple:before{content:"\f179";}
.icon-windows:before{content:"\f17a";}
.icon-android:before{content:"\f17b";}
.icon-linux:before{content:"\f17c";}
.icon-dribbble:before{content:"\f17d";}
.icon-skype:before{content:"\f17e";}
.icon-foursquare:before{content:"\f180";}
.icon-trello:before{content:"\f181";}
.icon-female:before{content:"\f182";}
.icon-male:before{content:"\f183";}
.icon-gittip:before{content:"\f184";}
.icon-sun:before{content:"\f185";}
.icon-moon:before{content:"\f186";}
.icon-archive:before{content:"\f187";}
.icon-bug:before{content:"\f188";}
.icon-vk:before{content:"\f189";}
.icon-weibo:before{content:"\f18a";}
.icon-renren:before{content:"\f18b";}