/*
=====================================================================
*  michaeljustinwhite.co.uk
*   03-18-2014
===================================================================== */

body { background: #000; }

/* --
Header Styles
-- */

header {
   position: relative;
   height: 100%;
   min-height: 500px;
   width: 100%;
   /*background: #161415 url(../images/header-background-alt.jpg) no-repeat center center;
   background-size: cover !important;
	-webkit-background-size: cover !important;*/
   text-align: center;
   overflow: hidden;
}






/* vertically center banner section */
header:before {
   content: '';
   display: inline-block;
   vertical-align: middle;
   height: 100%;
}
header .banner {
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
   width: 85%;
   padding-bottom: 30px;s
   text-align: center;
}

.scrollingBG{
  position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top:0;
    left:0;  
    background-size: cover;
  background: linear-gradient(0deg,rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(../images/chefwhitepsd.jpg);
  background-repeat: repeat-x;
  animation: animatedBackground 30s linear infinite;
}
@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: -2700px 0; }
}

header .banner-text { width: 100%; }
header .banner-text h1 {
   font: 90px/1.1em 'opensans-bold', sans-serif;
   color: #ffffff;
   letter-spacing: -2px;
   margin: 0 auto 18px auto;
   text-shadow: 0px 2px 3px rgba(25, 175, 175, .8);
}
header .banner-text h3 {
   font: 18px/1.9em 'librebaskerville-regular', serif;
   color: #ffffff;
   margin: 0 auto;
   width: 70%;
   text-shadow: 0px 2px 2px rgba(25, 175, 175, .5);
}
header .banner-text h3 span,
header .banner-text h3 a {
   color: #f4f4f4;
}
header .banner-text h3 a:hover, 
header .banner-text h3 a:active{
	font-style:italic;
   color: #000000;
}
header .banner-text hr {
   width: 60%;
   margin: 18px auto 24px auto;
   border-color: #2F2D2E;
   border-color: rgba(25, 175, 175, .1);
}

/* header social links */
header .social {
   margin: 24px 0;
   padding: 0;
   font-size: 30px;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .8);
}
header .social li {
   display: inline-block;
   margin: 0 15px;
   padding: 0;
}
header .social li a { color: #fff; }
header .social li a:hover { color: #11ABB0; }

/* scrolldown link */
header .scrolldown a {
   position: absolute;
   bottom: 30px;
   left: 50%;
   margin-left: -29px;
   color: #fff;
   display: block;
   height: 42px;
   width: 42px;
   font-size: 42px;
   line-height: 42px;
   color: #fff;
   border-radius: 100%;

   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}
header .scrolldown a:hover { color: #11ABB0; }

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#nav-wrap {
   font: 12px 'opensans-bold', sans-serif;
   width: 100%;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   margin: 0 auto;
   z-index: 100;
   position: fixed;
   left: 0;
   top: 0;
}
.opaque { background-color:#2B2B2B; }

/* hide toggle button */
#nav-wrap > a.mobile-btn { display: none; }

ul#nav {
   min-height: 48px;
   width: auto;

   /* center align the menu */
   text-align: center;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 48px;
   display: inline-block;
}

/* Links */
ul#nav li a {

/* 8px padding top + 8px padding bottom + 32px line-height = 48px */

   display: inline-block;
   padding: 8px 13px;
   line-height: 32px;
	text-decoration: none;
   text-align: left;
   color: #fff;

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #F06000; }


/* ------------------------------------------------------------------ */
/* c. About Section
/* ------------------------------------------------------------------ */

 #about {
     background: linear-gradient( rgba(0, 0, 0, 0.45), rgb(0, 0, 0)), url(../images/damSteel.jpeg);
     background-size: cover;
     background-position: 50% 50%;
     background-attachment: fixed;
     padding-top: 96px;
     padding-bottom: 66px;
     overflow: hidden;
 }

 #about a,
 #about a:visited {
     color: #fff;
 }

 #about a:hover,
 #about a:focus {
     color: #fff;
     text-shadow: 0px 0px 20px #dbdbdb;
 }

 #about h2 {
     font: 22px/30px 'opensans-bold', sans-serif;
     color: #fff;
     margin-bottom: 12px;
 }

 #about p {
     line-height: 30px;
     color: #c5c2c2;
 }

 #about .profile-pic {
     position: relative;
     width: 120px;
     height: 120px;
     border-radius: 100%;
 }

 #about .contact-details {
     width: 41.66667%;
 }

 #about .download {
     width: 58.33333%;
     padding-top: 6px;
 }

 #about .main-col {
     padding-right: 5%;
 }

 #about .download .button {
     margin-top: 6px;
     background: #444;
 }

 #about .download .button:hover {
     background: #fff;
     color: #2B2B2B;
 }

 #about .download .button i {
     margin-right: 15px;
     font-size: 20px;
 }

 #resume {
     background: linear-gradient( rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)), url(../images/sushi.jpg);
     background-size: cover;
     background-position: 50% 50%;
     background-attachment: fixed;
     /*background-color: #ffffff;*/
     /*background-image: url("data:image/svg+xml,%3Csvg width='84' height='84' viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.08'%3E%3Cpath d='M84 23c-4.417 0-8-3.584-8-7.998V8h-7.002C64.58 8 61 4.42 61 0H23c0 4.417-3.584 8-7.998 8H8v7.002C8 19.42 4.42 23 0 23v38c4.417 0 8 3.584 8 7.998V76h7.002C19.42 76 23 79.58 23 84h38c0-4.417 3.584-8 7.998-8H76v-7.002C76 64.58 79.58 61 84 61V23zM59.05 83H43V66.95c5.054-.5 9-4.764 9-9.948V52h5.002c5.18 0 9.446-3.947 9.95-9H83v16.05c-5.054.5-9 4.764-9 9.948V74h-5.002c-5.18 0-9.446 3.947-9.95 9zm-34.1 0H41V66.95c-5.053-.502-9-4.768-9-9.948V52h-5.002c-5.184 0-9.447-3.946-9.95-9H1v16.05c5.053.502 9 4.768 9 9.948V74h5.002c5.184 0 9.447 3.946 9.95 9zm0-82H41v16.05c-5.054.5-9 4.764-9 9.948V32h-5.002c-5.18 0-9.446 3.947-9.95 9H1V24.95c5.054-.5 9-4.764 9-9.948V10h5.002c5.18 0 9.446-3.947 9.95-9zm34.1 0H43v16.05c5.053.502 9 4.768 9 9.948V32h5.002c5.184 0 9.447 3.946 9.95 9H83V24.95c-5.053-.502-9-4.768-9-9.948V10h-5.002c-5.184 0-9.447-3.946-9.95-9zM50 50v7.002C50 61.42 46.42 65 42 65c-4.417 0-8-3.584-8-7.998V50h-7.002C22.58 50 19 46.42 19 42c0-4.417 3.584-8 7.998-8H34v-7.002C34 22.58 37.58 19 42 19c4.417 0 8 3.584 8 7.998V34h7.002C61.42 34 65 37.58 65 42c0 4.417-3.584 8-7.998 8H50z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");*/
     padding-top: 90px;
     padding-bottom: 72px;
     overflow: hidden;
 }

 #resume a,
 #resume a:visited {
     color: #11ABB0;
 }

 #resume a:hover,
 #resume a:focus {
     color: #313131;
 }

 #resume h1 {
     font: 18px/24px 'opensans-bold', sans-serif;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 #resume h1 span {
     border-bottom: 3px solid #11ABB0;
     padding-bottom: 6px;
 }

 #resume h3 {
     font: 25px/30px 'opensans-bold', sans-serif;
 }

 #resume .header-col {
     padding-top: 9px;
 }

 #resume .main-col {
     padding-right: 10%;
 }

 .education,
 .work {
     margin-bottom: 48px;
     padding: 24px 0px;
	 background-color:rgba(255, 255, 255,.5);
     border-bottom: 1px solid rgb(5, 181, 149);
 }

 #resume .info {
     font: 16px/24px 'librebaskerville-italic', serif;
     color: #6E7881;
     margin-bottom: 18px;
     margin-top: 9px;
 }

 #resume .info span {
     margin-right: 5px;
     margin-left: 5px;
 }

 #resume .date {
     font: 15px/24px 'opensans-regular', sans-serif;
     margin-top: 6px;
 }

 #resume .download {
     width: 58.33333%;
     padding-top: 6px;
 }

 #resume .main-col {
     padding-right: 5%;
 }

 #resume .download .button {
     color: #fff;
     margin-top: 6px;
     background: #444;
 }

 #resume .download .button:hover {
     background: #05b394;
     text-shadow: 0px 0px 20px #2B2B2B;
     color: #2B2B2B;
 }

 #resume .download .button i {
     margin-right: 15px;
     font-size: 20px;
 }

 .bars {
     width: 95%;
     float: left;
     padding: 0;
     text-align: left;
 }

 .bars .skills {
     margin-top: 36px;
     list-style: none;
 }

 .bars li {
     position: relative;
     margin-bottom: 60px;
     background: #000;
     height: 45px;
     border-radius: 3px;
     border: 1px solid red;
 }

 .bars li em {
     font: 15px 'opensans-bold', sans-serif;
     color: #313131;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: normal;
     position: relative;
     top: -36px;
 }

 .bar-expand {
     position: absolute;
     left: 0;
     top: 0;
     margin: 0;
     padding-right: 24px;
     background: linear-gradient( 45deg, rgba(5, 253, 253, 0.45), rgb(5, 181, 149));
     display: inline-block;
     height: 42px;
     line-height: 42px;
     border-radius: 3px 0 0 3px;
 }

 .management {
     width: 85%;
     -moz-animation: photoshop 2s ease;
     -webkit-animation: photoshop 2s ease;
 }

 .creativity {
     width: 80%;
     -moz-animation: illustrator 2s ease;
     -webkit-animation: illustrator 2s ease;
 }

 .budget {
     width: 85%;
     -moz-animation: wordpress 2s ease;
     -webkit-animation: wordpress 2s ease;
 }

 .rostering {
     width: 90%;
     -moz-animation: css 2s ease;
     -webkit-animation: css 2s ease;
 }

 .stock {
     width: 85%;
     -moz-animation: html5 2s ease;
     -webkit-animation: html5 2s ease;
 }

 .motivation {
     width: 100%;
     -moz-animation: jquery 2s ease;
     -webkit-animation: jquery 2s ease;
 }

 @-moz-keyframes photoshop {
     0% {
         width: 0px;
     }
     100% {
         width: 60%;
     }
 }

 @-moz-keyframes illustrator {
     0% {
         width: 0px;
     }
     100% {
         width: 55%;
     }
 }

 @-moz-keyframes wordpress {
     0% {
         width: 0px;
     }
     100% {
         width: 50%;
     }
 }

 @-moz-keyframes css {
     0% {
         width: 0px;
     }
     100% {
         width: 90%;
     }
 }

 @-moz-keyframes html5 {
     0% {
         width: 0px;
     }
     100% {
         width: 80%;
     }
 }

 @-moz-keyframes jquery {
     0% {
         width: 0px;
     }
     100% {
         width: 50%;
     }
 }

 @-webkit-keyframes photoshop {
     0% {
         width: 0px;
     }
     100% {
         width: 60%;
     }
 }

 @-webkit-keyframes illustrator {
     0% {
         width: 0px;
     }
     100% {
         width: 55%;
     }
 }

 @-webkit-keyframes wordpress {
     0% {
         width: 0px;
     }
     100% {
         width: 50%;
     }
 }

 @-webkit-keyframes css {
     0% {
         width: 0px;
     }
     100% {
         width: 90%;
     }
 }

 @-webkit-keyframes html5 {
     0% {
         width: 0px;
     }
     100% {
         width: 80%;
     }
 }

 @-webkit-keyframes jquery {
     0% {
         width: 0px;
     }
     100% {
         width: 50%;
     }
 }

 #portfolio {
     background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.82)), url(//cocina-pro.geckografix.guru/wp-content/themes/la-cocina/images/bg-header.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     background-attachment: fixed;
     background-position: 50% 50%;
     padding-top: 90px;
     padding-bottom: 60px;
 }

 #portfolio h1 {
     font: 15px/24px 'opensans-semibold', sans-serif;
     text-transform: uppercase;
     letter-spacing: 1px;
     text-align: center;
     margin-bottom: 48px;
     color: #ffffff;
 }

 #portfolio-wrapper .columns {
     margin-bottom: 36px;
 }

 .portfolio-item .item-wrap {
     background: #fff;
     overflow: hidden;
     position: relative;
     border: 1px solid #05b394;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .portfolio-item .item-wrap a {
     display: block;
     cursor: pointer;
 }

 .portfolio-item .item-wrap .overlay {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     -moz-opacity: 0;
     filter: alpha(opacity=0);
     -webkit-transition: opacity 0.3s ease-in-out;
     -moz-transition: opacity 0.3s ease-in-out;
     -o-transition: opacity 0.3s ease-in-out;
     transition: opacity 0.3s ease-in-out;
     background: url(../images/overlay-bg.png) repeat;
 }

 .portfolio-item .item-wrap .link-icon {
     display: block;
     color: #fff;
     height: 30px;
     width: 30px;
     font-size: 18px;
     line-height: 30px;
     text-align: center;
     opacity: 0;
     -moz-opacity: 0;
     filter: alpha(opacity=0);
     -webkit-transition: opacity 0.3s ease-in-out;
     -moz-transition: opacity 0.3s ease-in-out;
     -o-transition: opacity 0.3s ease-in-out;
     transition: opacity 0.3s ease-in-out;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -15px;
     margin-top: -15px;
 }

 .portfolio-item .item-wrap img {
     vertical-align: bottom;
 }

 .portfolio-item .portfolio-item-meta {
     padding: 18px
 }

 .portfolio-item .portfolio-item-meta h5 {
     font: 14px/21px 'opensans-bold', sans-serif;
     color: #fff;
 }

 .portfolio-item .portfolio-item-meta p {
     font: 12px/18px 'opensans-light', sans-serif;
     color: #c6c7c7;
     margin-bottom: 0;
 }

 .portfolio-item:hover .overlay {
     opacity: 1;
     -moz-opacity: 1;
     filter: alpha(opacity=100);
 }

 .portfolio-item:hover .link-icon {
     opacity: 1;
     -moz-opacity: 1;
     filter: alpha(opacity=100);
 }

 .popup-modal {
     max-width: 550px;
     background: #fff;
     position: relative;
     margin: 0 auto;
 }

 .popup-modal .description-box {
     padding: 12px 36px 18px 36px;
 }

 .popup-modal .description-box h4 {
     font: 15px/24px 'opensans-bold', sans-serif;
     margin-bottom: 12px;
     color: #111;
 }

 .popup-modal .description-box p {
     font: 14px/24px 'opensans-regular', sans-serif;
     color: #A1A1A1;
     margin-bottom: 12px;
 }

 .popup-modal .description-box .categories {
     font: 11px/21px 'opensans-light', sans-serif;
     color: #A1A1A1;
     text-transform: uppercase;
     letter-spacing: 2px;
     display: block;
     text-align: left;
 }

 .popup-modal .description-box .categories i {
     margin-right: 8px;
 }

 .popup-modal .link-box {
     padding: 18px 36px;
     background: #111;
     text-align: left;
 }

 .popup-modal .link-box a {
     color: #fff;
     font: 11px/21px 'opensans-bold', sans-serif;
     text-transform: uppercase;
     letter-spacing: 3px;
     cursor: pointer;
 }

 .popup-modal a:hover {
     color: #00CCCC;
 }

 .popup-modal a.popup-modal-dismiss {
     margin-left: 24px;
 }

 .mfp-fade.mfp-wrap .mfp-content .popup-modal {
     opacity: 0;
     -webkit-transition: all 200ms ease-in-out;
     -moz-transition: all 200ms ease-in-out;
     -o-transition: all 200ms ease-in-out;
     -ms-transition: all 200ms ease-in-out;
     transition: all 200ms ease-in-out;
 }

 .mfp-fade.mfp-wrap.mfp-ready .mfp-content .popup-modal {
     opacity: 1;
 }

 .mfp-fade.mfp-wrap.mfp-removing .mfp-content .popup-modal {
     opacity: 0;
 }

 #call-to-action {
     background: #fff;
     padding-top: 66px;
     padding-bottom: 48px;
 }

 #call-to-action h1 {
     font: 18px/24px 'opensans-bold', sans-serif;
     text-transform: uppercase;
     letter-spacing: 3px;
     color: #000;
     margin-bottom: 50px;
 }

 #call-to-action h1 span {
     display: none;
 }

 #call-to-action .header-col h1:before {
     font-size: 72px;
     line-height: 72px;
     text-align: center;
     color: #000;
 }

 #call-to-action .action {
     margin-top: 12px;
 }

 #call-to-action h2 {
     font: 28px/36px 'opensans-bold', sans-serif;
     color: #000;
     margin-bottom: 6px;
 }

 #call-to-action h2 a {
     color: inherit;
 }

 #call-to-action p {
     color: #636363;
     font-size: 17px;
 }

 #call-to-action .im-pres {
     margin-left: 25px;
 }

 #call-to-action hr {
     width: 80%;
     height: 2px;
     margin: 18px auto 24px auto;
     border-color: #2F2D2E;
     border-color: #000;
 }
}
#call-to-action .button:hover,
#call-to-action .button:active {
    background: #FFFFFF;
    color: #0D0D0D;
}
#call-to-action p span {
    font-family: 'opensans-semibold', sans-serif;
    color: #D8D8D8;
}
#testimonials {
    background: #1F1F1F url(../images/testimonials-bg.jpg) no-repeat center center;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    background-attachment: fixed;
    position: relative;
    min-height: 200px;
    width: 100%;
    overflow: hidden;
}
#testimonials .text-container {
    padding-top: 96px;
    padding-bottom: 66px;
}
#testimonials h1 {
    font: 18px/24px 'opensans-bold', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
}
#testimonials h1 span {
    display: none;
}
#testimonials .header-col {
    padding-top: 9px;
}
#testimonials .header-col h1:before {
    font-family: 'FontAwesome';
    content: "\f10d";
    padding-right: 10px;
    font-size: 72px;
    line-height: 72px;
    text-align: left;
    float: left;
    color: #fff;
}
#testimonials blockquote {
    margin: 0 0px 30px 0px;
    padding-left: 0;
    position: relative;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
}
#testimonials blockquote:before {
    content: none;
}
#testimonials blockquote p {
    font-family: 'librebaskerville-italic', serif;
    padding: 0;
    font-size: 24px;
    line-height: 48px;
    color: #fff
}
#testimonials blockquote cite {
    display: block;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
    color: #fff;
}
#testimonials blockquote cite:before {
    content: "\2014 \0020";
}
#testimonials blockquote cite a,
#testimonials blockquote cite a:visited {
    color: #8B9798;
    border: none
}
.flexslider a:active,
.flexslider a:focus {
    outline: none;
}
.slides,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.slides li {
    margin: 0;
    padding: 0;
}
.flexslider {
    position: relative;
    zoom: 1;
    margin: 0;
    padding: 0;
}
.flexslider .slides {
    zoom: 1;
}
.flexslider .slides>li {
    position: relative;
}
.flexslider .slides>li {
    display: none;
    -webkit-backface-visibility: hidden;
}
.flex-container {
    zoom: 1;
    position: relative;
}
.slides:before,
.slides:after {
    content: " ";
    display: table;
}
.slides:after {
    clear: both;
}
.no-js .slides>li:first-child {
    display: block;
}
.slides {
    zoom: 1;
}
.slides>li {
    overflow: hidden;
}
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -20px;
    text-align: left;
}
.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}
.flex-control-paging li a {
    width: 12px;
    height: 12px;
    display: block;
    background: #ddd;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, .3);
}
.flex-control-paging li a:hover {
    background: #CCC;
    background: rgba(255, 255, 255, .7);
}
.flex-control-paging li a.flex-active {
    background: #fff;
    background: rgba(255, 255, 255, .9);
    cursor: default;
}
#contact {
    background: #000000;
    background-image: linear-gradient( rgba(0, 0, 0, 0.45), rgb(0, 0, 0)), url(/images/preservedPorkBelly.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom center;
    padding-top: 96px;
    padding-bottom: 102px;
    color: #ffffff;
}
#contact .section-head {
    margin-bottom: 42px;
}
#contact a,
#contact a:visited {
    color: #11ABB0;
}
#contact a:hover,
#contact a:focus {
    color: #fff;
}
#contact h1 {
    font: 18px/24px 'opensans-bold', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #EBEEEE;
    margin-bottom: 6px;
}
#contact h1 span {
    display: none;
}
#contact h1:before {
    font-family: 'FontAwesome';
    content: "\f0e0";
    padding-right: 10px;
    font-size: 72px;
    line-height: 72px;
    text-align: left;
    float: left;
    color: #ebeeee;
}
#contact h4 {
    font: 16px/24px 'opensans-bold', sans-serif;
    color: #EBEEEE;
    margin-bottom: 6px;
}
#contact p.lead {
    font: 18px/36px 'opensans-light', sans-serif;
    padding-right: 3%;
}
#contact .header-col {
    padding-top: 6px;
}
#contact form {
    margin-bottom: 30px;
}
#contact label {
    font: 15px/24px 'opensans-bold', sans-serif;
    margin: 12px 0;
    color: #EBEEEE;
    display: inline-block;
    float: left;
    width: 26%;
}
#contact input,
#contact textarea,
#contact select {
    padding: 18px 20px;
    color: #eee;
    background: #37323340;
    margin-bottom: 42px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    outline: none;
    font-size: 15px;
    line-height: 24px;
    width: 65%;
}
#contact input:focus,
#contact textarea:focus,
#contact select:focus {
    color: #fff;
    background-color: rgba(17, 171, 176, 0.25);
}
#contact button.submit {
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    background: #05b394;;
    border: none;
    cursor: pointer;
    height: auto;
    display: inline-block;
    border-radius: 3px;
    margin-left: 26%;
}
#contact button.submit:hover {
    color: #0D0D0D;
    background: #fff;
}
#contact span.required {
    color: #11ABB0;
    font-size: 13px;
}
#message-warning,
#message-success {
    display: none;
    background: #0F0F0F;
    padding: 24px 24px;
    margin-bottom: 36px;
    width: 65%;
    margin-left: 26%;
}
#message-warning {
    color: #D72828;
}
#message-success {
    color: #11ABB0;
}
#message-warning i,
#message-success i {
    margin-right: 10px;
}
#image-loader {
    display: none;
    position: relative;
    left: 18px;
    top: 17px;
}
#twitter {
    margin-top: 12px;
    padding: 0;
}
#twitter li {
    margin: 6px 0px 12px 0;
    line-height: 30px;
}
#twitter li span {
    display: block;
}
#twitter li b a {
    font: 13px/36px 'opensans-regular', Sans-serif;
    color: #474747 !important;
    border: none;
}
footer {
    padding-top: 48px;
    margin-bottom: 48px;
    color: #303030;
    font-size: 14px;
    text-align: center;
    position: relative;
}
footer a,
footer a:visited {
    color: #525252;
}
footer a:hover,
footer a:focus {
    color: #11abb0;
}
footer .copyright {
    margin: 0;
    padding: 0;
}
footer .copyright li {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 24px;
}
.ie footer .copyright li {
    display: inline;
}
footer .copyright li:before {
    content: "\2022";
    padding-left: 10px;
    padding-right: 10px;
    color: #095153;
}
footer .copyright li:first-child:before {
    display: none;
}
footer .social-links {
    margin: 18px 0 30px 0;
    padding: 0;
    font-size: 30px;
}
footer .social-links li {
    display: inline-block;
    margin: 0;
    padding: 0;
    margin-left: 42px;
    color: #F06000;
}
footer .social-links li:first-child {
    margin-left: 0;
}
#go-top {
    position: absolute;
    top: -24px;
    left: 50%;
    margin-left: -30px;
}
#go-top a {
    text-decoration: none;
    border: 0 none;
    display: block;
    width: 60px;
    height: 60px;
    background-color: #525252;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color: #fff;
    font-size: 21px;
    line-height: 60px;
    border-radius: 100%;
}
#go-top a:hover {
    background-color: #0F9095;
}
@media only screen and (max-width: 1024px) {
    header .banner-text h1 {
        font: 80px/1.1em 'opensans-bold', sans-serif;
        letter-spacing: -1px;
        margin: 0 auto 12px auto;
    }
}
@media only screen and (max-width: 900px) {
    header .banner {
        padding-bottom: 12px;
    }

    header .banner-text h1 {
        font: 78px/1.1em 'opensans-bold', sans-serif;
        letter-spacing: -1px;
    }

    header .banner-text h3 {
        font: 17px/1.9em 'librebaskerville-regular', serif;
        width: 80%;
    }

    header .banner-text hr {
        width: 65%;
        margin: 12px auto;
    }

    #nav-wrap {
        font: 11px 'opensans-bold', sans-serif;
        letter-spacing: 1.5px;
    }

    #about .profile-pic {
        width: 114px;
        height: 114px;
        margin-left: 12px;
    }

    #about .contact-details {
        width: 50%;
    }

    #about .download {
        width: 50%;
    }

    #resume h1 {
        font: 16px/24px 'opensans-bold', sans-serif;
    }

    #resume .main-col {
        padding-right: 5%;
    }

    #testimonials .header-col h1:before {
        font-size: 66px;
        line-height: 66px;
    }

    #testimonials blockquote p {
        font-size: 22px;
        line-height: 46px;
    }

    #call-to-action .header-col h1:before {
        font-size: 66px;
        line-height: 66px;
    }

    #contact .section-head {
        margin-bottom: 30px;
    }

    #contact .header-col h1:before {
        font-size: 66px;
        line-height: 66px;
    }

    #contact .section-head p.lead {
        font: 17px/33px opensans-light, sans-serif;
    }
}
@media only screen and (max-width: 767px) {
    #nav-wrap {
        font: 12px 'opensans-bold', sans-serif;
        background: transparent !important;
        letter-spacing: 1.5px;
        width: auto;
        position: fixed;
        top: 0;
        right: 0;
    }

    #nav-wrap>a {
        width: 48px;
        height: 48px;
        text-align: left;
        background-color: #CC5200;
        position: relative;
        border: none;
        float: right;
        font: 0/0 a;
        text-shadow: none;
        color: transparent;
        position: relative;
        top: 0px;
        right: 30px;
    }

    #nav-wrap>a:before,
    #nav-wrap>a:after {
        position: absolute;
        border: 2px solid #fff;
        top: 35%;
        left: 25%;
        right: 25%;
        content: '';
    }

    #nav-wrap>a:after {
        top: 60%;
    }

    #nav-wrap:not( :target)>a:first-of-type,
    #nav-wrap:target>a:last-of-type {
        display: block;
    }

    #nav-wrap ul#nav {
        height: auto;
        display: none;
        clear: both;
        width: auto;
        float: right;
        position: relative;
        top: 12px;
        right: 0;
    }

    #nav-wrap:target>ul#nav {
        display: block;
        padding: 30px 20px 48px 20px;
        background: #1f2024;
        margin: 0 30px;
        clear: both;
    }

    ul#nav li {
        display: block;
        height: auto;
        margin: 0 auto;
        padding: 0 4%;
        text-align: left;
        border-bottom: 1px solid #2D2E34;
        border-bottom-style: dotted;
    }

    ul#nav li a {
        display: block;
        margin: 0;
        padding: 0;
        margin: 12px 0;
        line-height: 16px;
        border: none;
    }

    header .banner {
        padding-bottom: 12px;
        padding-top: 6px;
    }

    header .banner-text h1 {
        font: 68px/1.1em 'opensans-bold', sans-serif;
    }

    header .banner-text h3 {
        font: 16px/1.9em 'librebaskerville-regular', serif;
        width: 85%;
    }

    header .banner-text hr {
        width: 80%;
        margin: 18px auto;
    }

    header .social {
        margin: 18px 0 24px 0;
        font-size: 24px;
        line-height: 36px;
    }

    header .social li {
        margin: 0 10px;
    }

    header .scrolldown {
        display: none;
    }

    #about .profile-pic {
        display: none;
    }

    #about .download .button {
        width: 100%;
        text-align: center;
        padding: 15px 20px;
    }

    #about .main-col {
        padding-right: 30px;
    }

    #resume .header-col {
        padding-top: 0;
        margin-bottom: 48px;
        text-align: center;
    }

    #resume h1 {
        letter-spacing: 3px;
    }

    #resume .main-col {
        padding-right: 30px;
    }

    #resume h3,
    #resume .info {
        text-align: center;
    }

    .bars {
        width: 100%;
    }

    #call-to-action {
        text-align: center;
    }

    #call-to-action h1 {
        font: 16px/24px 'opensans-bold', sans-serif;
        text-align: center;
        margin-bottom: 30px;
        text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
    }

    #call-to-action h1 span {
        display: block;
    }

    #call-to-action .header-col h1:before {
        content: none;
    }

    #call-to-action p {
        font-size: 15px;
    }

    #portfolio-wrapper .columns {
        margin-bottom: 40px;
    }

    .popup-modal {
        max-width: 85%;
    }

    #testimonials .text-container {
        text-align: center;
    }

    #testimonials h1 {
        font: 16px/24px 'opensans-bold', sans-serif;
        text-align: center;
        margin-bottom: 30px;
        text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
    }

    #testimonials h1 span {
        display: block;
    }

    #testimonials .header-col h1:before {
        content: none;
    }

    #testimonials blockquote {
        padding-bottom: 24px;
    }

    #testimonials blockquote p {
        font-size: 20px;
        line-height: 42px;
    }

    .flex-control-nav {
        text-align: center;
        margin-left: -30px;
    }

    #contact {
        padding-bottom: 66px;
    }

    #contact .section-head {
        margin-bottom: 12px;
    }

    #contact .section-head h1 {
        font: 16px/24px 'opensans-bold', sans-serif;
        text-align: center;
        margin-bottom: 30px;
        text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
    }

    #contact h1 span {
        display: block;
    }

    #contact .header-col {
        padding-top: 0;
    }

    #contact .header-col h1:before {
        content: none;
    }

    #contact .section-head p.lead {
        text-align: center;
    }

    #contact label {
        float: none;
        width: 100%;
    }

    #contact input,
    #contact textarea,
    #contact select {
        margin-bottom: 6px;
        width: 100%;
    }

    #contact button.submit {
        margin: 30px 0 24px 0;
    }

    #message-warning,
    #message-success {
        width: 100%;
        margin-left: 0;
    }

    footer .copyright li:before {
        content: none;
        color: #d8e5f7;
    }

    footer .copyright li {
        margin-right: 12px;
    }

    footer .social-links {
        font-size: 22px;
    }

    footer .social-links li {
        margin-left: 18px;
    }

    #go-top {
        margin-left: -22px;
    }

    #go-top a {
        width: 54px;
        height: 54px;
        font-size: 18px;
        line-height: 54px;
    }
}
@media only screen and (max-width: 480px) {
    #nav-wrap ul#nav {
        width: auto;
        float: none;
    }

    header .banner {
        padding-top: 24px;
    }

    header .banner-text h1 {
        font: 40px/1.1em 'opensans-bold', sans-serif;
        margin: 0 auto 24px auto;
    }

    header .banner-text h3 {
        font: 14px/1.9em 'librebaskerville-regular', sans-serif;
        width: 90%;
    }

    header .social {
        font-size: 20px;
    }

    header .social li {
        margin: 0 6px;
    }

    footer .social-links {
        font-size: 20px;
    }

    footer .social-links li {
        margin-left: 14px;
    }
}