body {
    background: #0f0f0f;
    background: #0b1a27;
    background: #0f0f0f;
}

header {
    position: relative;
    height: 800px;
    min-height: 500px;
    background: #161415 url(../images/header-background.jpg) no-repeat top center;
}

.headerBackground {
    width: 100%;
    text-align: center;
    overflow: hidden;
    background-size: cover !important;
    -webkit-background-size: cover !important;
}

#backgroundSparklesContainer {
    /*opacity: 0.9;*/
}

.backgroundSparkle {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    /*opacity: 0;*/
}

.sparkleContainerOuter50 {
    position: absolute;
    top: 425px;
    left: 250px;
    width: 50px;
    height: 50px;
    display: table;
    /*background: darkgrey;*/
}

.sparkleContainerMiddle50 {
    display: table-cell;
    vertical-align: middle;
}

.sparkleInner50 {
    margin-left: auto;
    margin-right: auto;
    background-size: cover !important;
    -webkit-background-size: cover !important;
}

#whiteSparkleTest2 {
    background: url('../images/Sparkles/50/SparkleWhite50.png') no-repeat top center;
}

#sparklesContainer {
    /*z-index: 10;*/
}

.sparkle {
    position: absolute;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    z-index: 10;
}

#sparkleT1 {
    background: url('../images/Sparkles/50/SparkleWhite50.png') no-repeat top center;
    top: 190px;
    left: 60px;
    height: 20px;
    width: 20px;
}

#sparkleT2 {
    /* background: url('../images/Sparkles/50S/SparkleWhite50.png') no-repeat top center;*/
    display: none !important;
    background: none !important;
}

#sparkleT3 {
    /* background: url('../images/Sparkles/50S/SparkleWhite50.png') no-repeat top center; */
    display: none !important;
    background: none !important;
}



@keyframes growUpSparkle50b {
    0% {
        opacity: 0.2;
        height: 0px;
        width: 0px;

    }

    100% {
        height: 50px;
        width: 50px;
        opacity: 0.8;
        /*transform: rotate(15deg);*/
        transform: rotateZ(0deg);
        /*transform: translate(-25px,-25px);*/
    }
}

.growUpSparkleAniamtionI1b {
    animation: growUpSparkle50b 1.3s infinite;
    animation-direction: alternate;
}


/* 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;
    text-align: center;
}



/* 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: goldenrod;
}

/* 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: goldenrod;
}

/* 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: #333;
    background-color: #0f283c;
}

/* 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: #433840;
    background: #2B2B2B;
    background: #0f304a;
    padding-top: 96px;
    padding-bottom: 66px;
    overflow: hidden;
}

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

/*#about a:hover, #about a:focus { color: goldenrod; }*/

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

#about p {
    line-height: 35px;
    color: #a1a1a1;
    color: #c6c2c2;
    /*line-height: 30px;*/
    /*color: #7A7A7A;*/
}

.aboutIntroduction {
    margin-bottom: 20px;
    text-align: justify;
    text-justify: inter-word;
}

.aboutIntroductionLast {
    margin-bottom: 40px;
    text-align: justify;
    text-justify: inter-word;
}

#ImMacGyver {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    height: 23px;
}

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

#about .profile-pic2 {
    position: relative;
    width: 200px;
    height: 200px;
    transition: 0.5s all;
}

#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;
    background: #4c97d7;
}

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

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

.aboutDatabases {
    list-style: circle;
    margin-left: 15px;
    color: #a1a1a1;
    color: #d2d1d1;
}


/* ------------------------------------------------------------------ */
/* d. Resume Section
/* ------------------------------------------------------------------ */

#resume,
#skills {
    background: #fff;
    overflow: hidden;
}

#resume {
    padding-top: 90px;
    border-bottom: 1px dotted grey;
}

#skills {
    padding-top: 5px;
    padding-bottom: 72px;
}

#resume a,
#resume a:visited {
    color: goldenrod;
}

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

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

#resume h1 span,
#skills h1 span {
    border-bottom: 3px solid goldenrod;
    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;
    border-bottom: 1px solid #E8E8E8;
}

.work {
    padding-bottom: 50px;
}

.education {
    padding-bottom: 90px;
}

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

/*----------------------------------------------*/
/*	Skill Bars
/*----------------------------------------------*/

.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: #ccc;
    height: 42px;
    border-radius: 3px;
}

.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: #313131;
    display: inline-block;
    height: 42px;
    line-height: 42px;
    border-radius: 3px 0 0 3px;
}

/*
.PHP {
  	width: 35%;
  	-moz-animation: PHP 2s ease;
  	-webkit-animation: PHP 2s ease;
}
@-moz-keyframes PHP {
   0%   { 
      width: 0px;  
    }
   100% { 
      width: 35%;  
    }
 }
 @-webkit-keyframes PHP {
    0%   { 
       width: 0px;  
    }
    100% { 
       width: 35%;  
    }
 }
.SQL {
  	width: 35%;
  	-moz-animation: SQL 2s ease;
  	-webkit-animation: SQL 2s ease;
}
.HTML {
  	width: 25%;
  	-moz-animation: HTML 2s ease;
  	-webkit-animation: HTML 2s ease;
}
.CSS {
  	width: 20%;
  	-moz-animation: CSS 2s ease;
  	-webkit-animation: CSS 2s ease;
}
.JavaScript {
  	width: 20%;
  	-moz-animation: JavaScript 2s ease;
  	-webkit-animation: JavaScript 2s ease;
}
.jQuery {
  	width: 15%;
  	-moz-animation: jQuery 2s ease;
  	-webkit-animation: jQuery 2s ease;
}
.AJAX {
  	width: 10%;
  	-moz-animation: AJAX 2s ease;
  	-webkit-animation: AJAX 2s ease;
}
.Java {
  	width: 30%;
  	-moz-animation: Java 2s ease;
  	-webkit-animation: Java 2s ease;
}
.Photoshop {
  	width: 25%;
  	-moz-animation: Photoshop 2s ease;
  	-webkit-animation: Photoshop 2s ease;
}

@-moz-keyframes PHP {
  0%   { 
     width: 0px;  
   }
  100% { 
     width: 35%;  
   }
}
@-webkit-keyframes PHP {
   0%   { 
      width: 0px;  
   }
   100% { 
      width: 35%;  
   }
}
@-moz-keyframes SQL {
  0%   { width: 0px;  }
  100% { width: 35%;  }
}
@-moz-keyframes HTML {
  0%   { width: 0px;  }
  100% { width: 25%;  }
}
@-moz-keyframes CSS {
  0%   { width: 0px;  }
  100% { width: 20%;  }
}
@-moz-keyframes JavaScript {
  0%   { width: 0px;  }
  100% { width: 20%;  }
}
@-moz-keyframes jQuery {
  0%   { width: 0px;  }
  100% { width: 15%;  }
}
@-moz-keyframes AJAX {
  0%   { width: 0px;  }
  100% { width: 10%;  }
}
@-moz-keyframes Java {
  0%   { width: 0px;  }
  100% { width: 30%;  }
}
@-moz-keyframes Photoshop {
  0%   { width: 0px;  }
  100% { width: 25%;  }
}

@-webkit-keyframes PHP {
  0%   { width: 0px;  }
  100% { width: 35%;  }
}
@-webkit-keyframes SQL {
  0%   { width: 0px;  }
  100% { width: 35%;  }
}
@-webkit-keyframes HTML {
  0%   { width: 0px;  }
  100% { width: 25%;  }
}
@-webkit-keyframes CSS {
  0%   { width: 0px;  }
  100% { width: 20%;  }
}
@-webkit-keyframes JavaScript {
  0%   { width: 0px;  }
  100% { width: 20%;  }
}
@-webkit-keyframes jQuery {
  0%   { width: 0px;  }
  100% { width: 15%;  }
}
@-webkit-keyframes AJAX {
  0%   { width: 0px;  }
  100% { width: 10%;  }
}
@-webkit-keyframes Java {
  0%   { width: 0px;  }
  100% { width: 30%;  }
}
@-webkit-keyframes Photoshop {
  0%   { width: 0px;  }
  100% { width: 25%;  }
}
*/

/* ------------------------------------------------------------------ */
/* e. Portfolio Section
/* ------------------------------------------------------------------ */

#portfolio {
    background: #ebeeee;
    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: #95A3A3;
}

/* Portfolio Content */
#portfolio-wrapper .columns {
    margin-bottom: 36px;
}

.portfolio-item .item-wrap {
    background: #fff;
    overflow: hidden;
    position: relative;

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

/* overlay */
.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;
}

/* on hover */
.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 */
.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;
    height: 65px;
}

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

.GoButton {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100px;
    height: 65px;
    background-color: green;
    color: white;
    line-height: 65px;
    text-align: center;
    cursor: pointer;
    transition: color 0.3s linear;
}

.GoButton:hover,
.CloseButton:hover {
    color: goldenrod !important;
}

.CloseButton {
    position: absolute;
    bottom: 0px;
    left: 100px;
    width: 90px;
    height: 65px;
    background-color: Maroon;
    color: white;
    line-height: 65px;
    text-align: center;
    transition: color 0.3s linear;
}

.GoButton,
.CloseButton {
    font: 11px/65px 'opensans-bold', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-indent: 4px;
}

.disabledButton,
.disabledButton:hover {
    cursor: not-allowed;
    background-color: #838C95;
    color: lightgray !important;
}

/* fadein/fadeout effect for modal popup
/* ------------------------------------------------------------------ */

/* content at start */
.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;
}

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

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

/* ------------------------------------------------------------------ */
/* f. Call To Action Section
/* ------------------------------------------------------------------ */

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

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

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

#call-to-action .header-col h1:before {
    font-family: 'FontAwesome';
    content: "\f0ac";
    padding-right: 10px;
    font-size: 72px;
    line-height: 72px;
    text-align: left;
    float: left;
    color: #fff;
}

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

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

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

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

/*#
call-to-action .button {
	color:#fff;
   background: #0D0D0D;
}
*/
#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;
}

/* ------------------------------------------------------------------
/* g. Testimonials
/* ------------------------------------------------------------------ */

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

/*	Blockquotes */
#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;
    padding: 10px;
    /*background-color: rgba(0, 0, 0, 0.6);*/
}

#testimonials blockquote cite:before {
    content: "\2014 \0020";
}

#testimonials blockquote cite a,
#testimonials blockquote cite a:visited {
    color: #8B9798;
    border: none
}

#testimonials blockquote p {
    background-color: rgba(0, 0, 0, 0.6);
    padding-left: 10px;
    padding-right: 10px;
}


/* Flex Slider
/* ------------------------------------------------------------------ */

/* Reset */
.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;
}

/* Necessary Styles */
.flexslider {
    position: relative;
    zoom: 1;
    margin: 0;
    padding: 0;
}

.flexslider .slides {
    zoom: 1;
}

.flexslider .slides>li {
    position: relative;
}

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides>li {
    display: none;
    -webkit-backface-visibility: hidden;
}

/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container {
    zoom: 1;
    position: relative;
}

/* Clearfix for .slides */
.slides:before,
.slides:after {
    content: " ";
    display: table;
}

.slides:after {
    clear: both;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides>li:first-child {
    display: block;
}

/* Slider Styles */
.slides {
    zoom: 1;
}

.slides>li {
    /*margin-right: 5px; */
    overflow: hidden;
}

/* Control Nav */
.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;
}

/* ------------------------------------------------------------------ */
/* h. Contact Section
/* ------------------------------------------------------------------ */

#contact {
    background: #191919;
    padding-top: 96px;
    padding-bottom: 102px;
    color: #636363;
}

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

#contact a,
#contact a:visited {
    color: goldenrod;
}

#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 */
#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: #373233;
    margin-bottom: 42px;
    border: 0;
    outline: none;
    font-size: 15px;
    line-height: 24px;
    width: 65%;
}

#contact input:focus,
#contact textarea:focus,
#contact select:focus {
    color: #fff;
    background-color: goldenrod;
}

#contact button.submit {
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    background: #0D0D0D;
    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: goldenrod;
    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: goldenrod;
}

#message-warning i,
#message-success i {
    margin-right: 10px;
}

#image-loader {
    display: none;
    position: relative;
    left: 18px;
    top: 17px;
}


/* Twitter Feed */
#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;
}


/* ------------------------------------------------------------------ */
/* i. Footer
/* ------------------------------------------------------------------ */

footer {
    padding-top: 48px;
    margin-bottom: 48px;
    color: #303030;
    font-size: 14px;
    text-align: center;
    position: relative;
    background-color: #0f0f0f;
}

footer a,
footer a:visited {
    color: #525252;
}

footer a:hover,
footer a:focus {
    color: #fff;
}

/* copyright */
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;
}

/* social links */
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 To Top Button */
#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;
}

.Kuli {
    color: #9e0b0f;
}

.dGray {
    color: #555555;
}

.tGray {
    color: #707070;
}

.fBlue {
    color: #0d6cbb;
}

.mWhite {
    color: white;
}

.Title1 {
    font-size: 27px;
}

.Title2 {
    font-size: 21px;
}

.Title3 {
    font-size: 16px;
    color: black;
}

.f12 {
    font-size: 12px;
}

.Title4 {
    margin-top: 12px;
    margin-bottom: 6px;
}

.Title5 {
    margin-top: 6px;
}

.myList {
    margin-left: 24px;
}

.StandOut1 {
    color: white;
}

.StandOut2 {
    color: #90b9f9;
    font-weight: bold;
}

.StandOut3 {
    /*color: #b7b7b7;*/
    color: #e1e1e1;
    color: #f3f0f0;
}

.StandOut4 {
    color: #b7b7b7;
    font-weight: bold;
}

.StandOut5 {
    color: #ffba48;
}

.Bold {
    font-weight: bold;
}

.Italic {
    font-style: italic;
}

.inlineBlock {
    display: inline-block;
}

.discList {
    display: list-item;
    list-style: disc;
    margin-top: 15px;
    margin-left: 25px;
}

.circleList {
    display: list-item;
    list-style: circle;
    margin-left: 45px;
}

.achievementsHeader {
    margin-bottom: 10px;
}

.achievementMedal {
    background-image: url('../images/medal19x27.png');
    width: 20px;
    height: 27px;
    margin-top: 5px;
}

.medalLikeLogo {
    background-repeat: no-repeat;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    margin: 0;
    padding: 0;
}

#achievementsList li {
    display: list-item;
    list-style: unset;
    margin-top: 15px;
    margin-left: 25px;
}

.listTable {
    margin-left: 5px;
}

.listTableRow {
    margin-top: 13px;
}

.listTableCell {
    display: table-cell;
}

.listTableCell1 {
    width: 35px;
}

.listTableCell2 {
    vertical-align: top;
}

.hoverLink:hover,
.hoverLink:focus {
    color: goldenrod !important;
    font-weight: bold;
}

.hoverLink {
    color: #0d6cbb !important;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer !important;
}

#SartoriusWork {
    padding-bottom: 60px;
}

#CadcorpWork {
    margin-top: 60px;
    padding-top: 25px;
    border-top: 1px solid #E8E8E8;

    /* Align under the 3-column header (typical 12-col grid: 3/12 = 25% ; 9/12 = 75%) */
    clear: both;
    float: none;
    /* override grid float */
    width: 75%;
    /* same width as .nine.columns */
    margin-left: 25%;
    /* push it to start where the 9-column area starts */
    box-sizing: border-box;
    /* keep padding inside width */
}

#sonyTesterWork {
    margin-top: 60px;
    border-top: 1px solid #E8E8E8;
}

#StreamLink1 {
    text-decoration: underline;
}

/*
.skillTableCell1 {
   width: 40px;
}
*/
.skillTableCell2 {
    vertical-align: middle;
    text-indent: 10px;
}

.skillLogo {
    height: 30px;
}

.cSharpLogo {
    width: 27px;
    background-image: url('../images/Logos/cSharp27x30.png');
}

.dotNetFrameworkLogo {
    width: 30px;
    background-image: url('../images/Logos/framework30x30.png');
}

.dotNetCoreLogo {
    width: 30px;
    background-image: url('../images/Logos/core30x30.png');
}

.entityFrameworkLogo {
    width: 30px;
    background-image: url('../images/Logos/entityFramework30x30.png');
}

.javaScriptLogo {
    width: 30px;
    background-image: url('../images/Logos/javaScript27x30.png');
}

.ajaxLogo {
    width: 69px;
    background-image: url('../images/Logos/Ajax69x30.png');
}

.restApiLogo {
    width: 38px;
    background-image: url('../images/Logos/restApi38x30.png');
}

.jQueryLogo {
    width: 32px;
    background-image: url('../images/Logos/jQuery32x30.png');
}

.htmlLogo {
    width: 27px;
    background-image: url('../images/Logos/html27x30.png');
}

.cssLogo {
    width: 27px;
    background-image: url('../images/Logos/css26x30.png');
}

.photoshopLogo {
    width: 31px;
    background-image: url('../images/Logos/photoshop31x30.png');
}

.sqlLogo {
    width: 53px;
    background-image: url('../images/Logos/sql53x30.png');
}

.sqlServerLogo {
    width: 28px;
    background-image: url('../images/Logos/sqlServer28x30.png');
}

.mySqlLogo {
    width: 30px;
    background-image: url('../images/Logos/mySql30x30.png');
}

.powerBILogo {
    width: 40px;
    background-image: url('../images/Logos/powerBI40x30.png');
}

.typeScriptLogo {
    width: 32px;
    background-image: url('../images/Logos/typeScript32x30.png');
}

.phpLogo {
    width: 57px;
    background-image: url('../images/Logos/php57x30.png');
}

.javaLogo {
    width: 22px;
    background-image: url('../images/Logos/java22x30.png');
}

.tortoiseSvnLogo {
    width: 56px;
    background-image: url('../images/Logos/tortoiseSvn56x30.png');
}

.gitLogo {
    width: 30px;
    background-image: url('../images/Logos/git30x30.png');
}

/* -----  C#  ----- */
.cSharp {
    width: 45%;
    -moz-animation: cSharp 2s ease;
    -webkit-animation: cSharp 2s ease;
}

@-moz-keyframes cSharp {
    0% {
        width: 0px;
    }

    100% {
        width: 45%;
    }
}

@-webkit-keyframes cSharp {
    0% {
        width: 0px;
    }

    100% {
        width: 45%;
    }
}

/* -----  .Net Framework  ----- */
.dotNetFramework {
    width: 60%;
    -moz-animation: dotNetFramework 2s ease;
    -webkit-animation: dotNetFramework 2s ease;
}

@-moz-keyframes dotNetFramework {
    0% {
        width: 0px;
    }

    100% {
        width: 60%;
    }
}

@-webkit-keyframes dotNetFramework {
    0% {
        width: 0px;
    }

    100% {
        width: 60%;
    }
}

/* -----  .Net Core  ----- */
.dotNetCore {
    width: 20%;
    -moz-animation: dotNetCore 2s ease;
    -webkit-animation: dotNetCore 2s ease;
}

@-moz-keyframes dotNetCore {
    0% {
        width: 0px;
    }

    100% {
        width: 20%;
    }
}

@-webkit-keyframes dotNetCore {
    0% {
        width: 0px;
    }

    100% {
        width: 20%;
    }
}

/* -----  Entity Framework  ----- */
.entityFramework {
    width: 30%;
    -moz-animation: entityFramework 2s ease;
    -webkit-animation: entityFramework 2s ease;
}

@-moz-keyframes entityFramework {
    0% {
        width: 0px;
    }

    100% {
        width: 30%;
    }
}

@-webkit-keyframes entityFramework {
    0% {
        width: 0px;
    }

    100% {
        width: 30%;
    }
}

/* -----  JavaScript  ----- */
.javaScript {
    width: 50%;
    -moz-animation: javaScript 2s ease;
    -webkit-animation: javaScript 2s ease;
}

@-moz-keyframes javaScript {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    }
}

@-webkit-keyframes javaScript {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    }
}

/* -----  AJAX  ----- */
.ajax {
    width: 45%;
    -moz-animation: ajax 2s ease;
    -webkit-animation: ajax 2s ease;
}

@-moz-keyframes ajax {
    0% {
        width: 0px;
    }

    100% {
        width: 45%;
    }
}

@-webkit-keyframes ajax {
    0% {
        width: 0px;
    }

    100% {
        width: 45%;
    }
}

/* -----  REST API  ----- */
.restApi {
    width: 35%;
    -moz-animation: restApi 2s ease;
    -webkit-animation: restApi 2s ease;
}

@-moz-keyframes restApi {
    0% {
        width: 0px;
    }

    100% {
        width: 35%;
    }
}

@-webkit-keyframes restApi {
    0% {
        width: 0px;
    }

    100% {
        width: 35%;
    }
}

/* -----  jQuery  ----- */
.jQuery {
    width: 65%;
    -moz-animation: jQuery 2s ease;
    -webkit-animation: jQuery 2s ease;
}

@-moz-keyframes jQuery {
    0% {
        width: 0px;
    }

    100% {
        width: 65%;
    }
}

@-webkit-keyframes jQuery {
    0% {
        width: 0px;
    }

    100% {
        width: 65%;
    }
}

/* -----  HTML  ----- */
.html {
    width: 70%;
    -moz-animation: html 2s ease;
    -webkit-animation: html 2s ease;
}

@-moz-keyframes html {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    }
}

@-webkit-keyframes html {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    }
}

/* -----  CSS  ----- */
.css {
    width: 65%;
    -moz-animation: css 2s ease;
    -webkit-animation: css 2s ease;
}

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

    100% {
        width: 65%;
    }
}

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

    100% {
        width: 65%;
    }
}

/* -----  Photoshop  ----- */
.photoshop {
    width: 50%;
    -moz-animation: photoshop 2s ease;
    -webkit-animation: photoshop 2s ease;
}

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

    100% {
        width: 50%;
    }
}

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

    100% {
        width: 50%;
    }
}

/* -----  SQL  ----- */
.sql {
    width: 40%;
    -moz-animation: sql 2s ease;
    -webkit-animation: sql 2s ease;
}

@-moz-keyframes sql {
    0% {
        width: 0px;
    }

    100% {
        width: 40%;
    }
}

@-webkit-keyframes sql {
    0% {
        width: 0px;
    }

    100% {
        width: 40%;
    }
}

/* -----  SQL Server ----- */
.sqlServer {
    width: 30%;
    -moz-animation: sqlServer 2s ease;
    -webkit-animation: sqlServer 2s ease;
}

@-moz-keyframes sqlServer {
    0% {
        width: 0px;
    }

    100% {
        width: 30%;
    }
}

@-webkit-keyframes sqlServer {
    0% {
        width: 0px;
    }

    100% {
        width: 30%;
    }
}

/* -----  MySQL ----- */
.mySql {
    width: 45%;
    -moz-animation: mySql 2s ease;
    -webkit-animation: mySql 2s ease;
}

@-moz-keyframes mySql {
    0% {
        width: 0px;
    }

    100% {
        width: 45%;
    }
}

@-webkit-keyframes mySql {
    0% {
        width: 0px;
    }

    100% {
        width: 45%;
    }
}

/* -----  PowerBI Custom Visuals ----- */
.powerBI {
    width: 20%;
    -moz-animation: powerBI 2s ease;
    -webkit-animation: powerBI 2s ease;
}

@-moz-keyframes powerBI {
    0% {
        width: 0px;
    }

    100% {
        width: 20%;
    }
}

@-webkit-keyframes powerBI {
    0% {
        width: 0px;
    }

    100% {
        width: 20%;
    }
}

/* -----  TypeScript ----- */
.typeScript {
    width: 10%;
    -moz-animation: typeScript 2s ease;
    -webkit-animation: typeScript 2s ease;
}

@-moz-keyframes typeScript {
    0% {
        width: 0px;
    }

    100% {
        width: 10%;
    }
}

@-webkit-keyframes typeScript {
    0% {
        width: 0px;
    }

    100% {
        width: 10%;
    }
}

/* -----  PHP ----- */
.php {
    width: 30%;
    -moz-animation: php 2s ease;
    -webkit-animation: php 2s ease;
}

@-moz-keyframes php {
    0% {
        width: 0px;
    }

    100% {
        width: 30%;
    }
}

@-webkit-keyframes php {
    0% {
        width: 0px;
    }

    100% {
        width: 30%;
    }
}

/* -----  Java ----- */
.java {
    width: 15%;
    -moz-animation: java 2s ease;
    -webkit-animation: java 2s ease;
}

@-moz-keyframes java {
    0% {
        width: 0px;
    }

    100% {
        width: 15%;
    }
}

@-webkit-keyframes java {
    0% {
        width: 0px;
    }

    100% {
        width: 15%;
        width: 15%;
    }
}

/* -----  TortoiseSVN ----- */
.tortoiseSvn {
    width: 55%;
    -moz-animation: tortoiseSvn 2s ease;
    -webkit-animation: tortoiseSvn 2s ease;
}

@-moz-keyframes tortoiseSvn {
    0% {
        width: 0px;
    }

    100% {
        width: 55%;
    }
}

@-webkit-keyframes tortoiseSvn {
    0% {
        width: 0px;
    }

    100% {
        width: 55%;
    }
}

/* -----  Git ----- */
.git {
    width: 10%;
    -moz-animation: git 2s ease;
    -webkit-animation: git 2s ease;
}

@-moz-keyframes git {
    0% {
        width: 0px;
    }

    100% {
        width: 10%;
    }
}

@-webkit-keyframes git {
    0% {
        width: 0px;
    }

    100% {
        width: 10%;
    }
}

ul {
    list-style-position: outside;
}

.marginTop25 {
    margin-top: 25px;
}

.marginTop15 {
    margin-top: 15px;
}

#graduateEngineerContainer {
    margin-left: 20px;
}

.UniLogo {
    height: 30px;
}

.UniLogo24 {
    height: 24px;
}

.font24 {
    font-size: 24px;
}

.font18 {
    font-size: 18px;
}

.font14 {
    font-size: 13px;
}

.font10 {
    font-size: 10px;
}

.black {
    color: black;
}

.FooterIcon {
    vertical-align: middle;
    margin: 30px 23px 10px 23px;
    width: 80px;
    z-index: 1;
}

.MenuBG {
    position: absolute;
    left: 0px;
    top: 0;
    width: 100%;
    height: 50px;
    opacity: 1;
}

.MenuBGin {
    position: relative;
    margin: 0 auto 18px auto;
    background-color: #1b68b5;
    background-color: black;
}

#MenuBGin1 {
    top: 0px;
    width: 620px;
    height: 45px;
    opacity: 0.5;
    opacity: 0.6;
}

#MenuBGin2 {
    top: 1px;
    width: 612px;
    height: 39px;
    opacity: 0.8;
    opacity: 0.6;
}


.pageBodyBeforeEnter {
    overflow-x: hidden;
}

.pageBodyOnEnter {
    overflow: hidden !important;
    background-color: white;
}

#sureEnter {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    overflow: hidden;
}

#sureEnterWhiteScreenCover {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.8;
    /*z-index: 100;*/
}

#sureEnterBubble {
    /*
   filter: drop-shadow(0px 5px 5px black);
   -webkit-filter: drop-shadow(0px 5px 5px black);
   -moz-filter: drop-shadow(0px 5px 5px black);
   -o-filter: drop-shadow(0px 5px 5px black);
   -ms-filter: drop-shadow(0px 5px 5px black);
   */
    opacity: 0.8;
}

#sureEnterMiddleCover1 {
    background-color: white;
    /*opacity: 0.8;*/
    opacity: 0.3;
    height: 100px;
    top: 5px;
}

#sureEnterMiddleCover2 {
    background-color: white;
    opacity: 0.5;
}

.sureEnterFog {
    position: absolute;
    left: 0px;
    width: calc(100% + 5px);
    height: 50px;
    z-index: 100;
    background: url('../images/fogTop.png') no-repeat top center;
    overflow: hidden;
    background-size: 100% 50px;
    -webkit-background-size: 100% 50px;

}

#sureEnterTopFog {
    top: 5px;
}

#sureEnterBottomFog {
    bottom: 5px;
}

#noSpam {
    position: absolute;
    top: 85px;
    left: 0px;
    width: 100%;
    line-height: 35px;
    text-align: center;
    /*text-transform: capitalize;*/
    /*color: goldenrod;*/
    z-index: 10;
}

.silverColor {
    color: #838C95;
}


.brightenEnterButton {
    animation: brightenEnterButton 2s;
}

@keyframes brightenEnterButton {
    50% {
        filter: drop-shadow(0px 5px 5px black) brightness(1.5);
        -webkit-filter: drop-shadow(0px 5px 5px black) brightness(1.5);
        -moz-filter: drop-shadow(0px 5px 5px black) brightness(1.5);
        -o-filter: drop-shadow(0px 5px 5px black) brightness(1.5);
        -ms-filter: drop-shadow(0px 5px 5px black) brightness(1.5);
    }
}

#enterButton {
    position: absolute;
    top: 200px;
    left: calc(50% - 150px);
    width: 300px;
    border: 0px;
    outline: none;
    /*filter: brightness(1);*/
    /*
   transition: filter 0.5s linear;
   filter: drop-shadow(0px 5px 5px black)  
   brightness(1);
   */
}

/*
#enterButton:hover {   
	filter: drop-shadow(0px 5px 5px black) 
   brightness(1.2);
	-webkit-filter: drop-shadow(0px 5px 5px black) 
   brightness(1.2);
	-moz-filter: drop-shadow(0px 5px 5px black)  
   brightness(1.2);
	-o-filter: drop-shadow(0px 5px 5px black) 
   brightness(1.2);
	-ms-filter: drop-shadow(0px 5px 5px black)
   brightness(1.2);
	cursor: pointer;
}
*/
.textBorder1px {
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 1px 0 #000, 0 -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;
}

#music {
    position: fixed;
    z-index: 101;
}

#S1 {
    position: fixed;
    left: 30px;
    top: 15px;
    width: 40px;
}

#speakerBgImage {
    opacity: 0.5;
}

.speakerPosition {
    position: fixed;
    top: 10px;
    left: 25px;
    width: 46px;
    height: 46px;
}



.introductionAllContainer {
    position: absolute;
    top: calc(11.5% + 44px);
    left: 0px;
    width: 100%;
}

.backgroundContainerVertical {
    position: absolute;
    top: 0px;
    height: 500px;
}

.backgroundContainerHorizontal {
    left: calc(50% - 370px);
    width: 741px;
}

.orangeBackgroundLineContainer {
    position: absolute;
    top: 65px;
    left: 0px;
    height: 110px;
    width: 100%;
    z-index: 1;
}

.backgroundContainer {
    position: absolute;
    width: 741px;
    height: 500px;
}

.KolosWorksBG {
    position: absolute;
    width: 100%;
    height: 110px;
}

#KolosWorksBG1 {
    background-color: black;
    opacity: 0.1;
}

#KolosWorksBG2 {
    background-color: orange;
    opacity: 0.6;
}



#MainBG {
    position: relative;
    margin: 0 auto 18px auto;
    opacity: 0.85;
}

#bubble,
#bubbleTop {
    opacity: 0.85;
}

#bubbleBottom {
    opacity: 0.92;
}

#sharkTooth2 {
    opacity: 0.7;
}

.bubble {
    position: absolute;
    top: 0px;
    left: 0px;
}



a,
a:visited {
    text-decoration: none;
    outline: 0;
    color: lightblue;
    font-weight: bold;

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

a:hover,
a:focus {
    color: goldenrod;
    font-weight: bold;
}

.whiteColor {
    color: #fff;
}

#downCircle:hover,
#downCircle:focus,
.goldenRod {
    color: goldenrod;
}

.dalekShadow {
    text-shadow: 0px 5px 5px black;
}

.introductionContainer {
    font-family: 'Lobster Two', Helvetica, sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
}

#kolosWorksTextContainer {
    position: absolute;
    top: calc(50% - 185px);
    height: 110px;
    width: 100%;
    text-align: center;
    z-index: 2;
    line-height: 110px;
    white-space: nowrap;
    letter-spacing: 1px;
}

.displayBlock {
    display: block;
}

#KolosWorksTextContainer1 {
    position: absolute;
    left: 0px;
    top: 105px;
    width: 100%;
    height: 40px;
    z-index: 2;
}

#KolosWorksTextContainer2 {
    position: relative;
    margin: 0 -130px 18px -130px;
    height: 40px;
}

.CamelLowcase {
    font-size: 34px;
    color: white;
    font-weight: bold;
}

.CamelCapital {
    font-size: 47px;
}


.HeadlineContainer {
    position: absolute;
    left: 0px;
    margin: -25px auto 18px auto;
    width: 100%;
    height: 40px;
    /*text-shadow: 0px 2px 2px white !important;*/
}

#HeadlineContainer1 {
    top: 215px;
}

#HeadlineContainer2 {
    top: 255px;
}

#HeadlineContainer3 {
    top: 305px;
}

#HeadlineContainer4 {
    top: 353px;
}

.HeadlineContainerIn {
    position: absolute;
    left: 0px;
    width: 100%;
    text-align: center;
    height: 40px;
}

@keyframes glowUpKolosWorks {
    50% {
        text-shadow: 0px 0px 50px white;
    }
}

.glowUpKolosWorksDada {
    animation: glowUpKolosWorks 7s infinite;
}

.HeadlineContainerInA {

    text-shadow: 0px 0px 20px black !important;
}

.HeadlineContainerInB {

    text-shadow: 0px 0px 10px black !important;
}

.HeadlineContainerInC {

    text-shadow: 0px 0px 5px black !important;
}

.HeadlineContainerInD {

    text-shadow: 0px 0px 2px black !important;
}


/* 
sparkle color codes:
#ffff91
*/
#SmallSocialIconsContainer {
    position: relative;
    margin: 0 auto 18px auto;
    width: 280px;
    height: 50px;
}

.smallSocialIconHref {
    position: absolute;
    height: 50px;
    width: 50px;
}

.SmallSocialIcon {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40px;
    height: 40px;
    transition: all 0.5s;
}

#SmallSocialIcon1 {
    left: 0px;
}

#SmallSocialIcon2 {
    left: 80px;
}

#SmallSocialIcon3 {
    left: 160px;
}

#SmallSocialIcon4 {
    left: 240px;
}

.highlightedSocialIcon {
    top: -5px;
    left: -5px;
    width: 50px;
    height: 50px;
}




.torchContainer {
    position: absolute;
    top: 67px;
    width: 83px;
    height: 245px;
    z-index: 3;
}

.torchBody,
.torchBackground,
.torchFlame {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.torchBody {
    top: 0px;
    opacity: 0.8;
}

.torchBackground {
    top: 0px;
}

.torchBody {
    top: 0px;
    opacity: 0.8;
    width: 83px;
    height: 245px;
}

.torchBackground {
    top: 0px;
    width: 83px;
    height: 245px;
}

.torchFlame {
    top: 14px;
    width: 52px;
    height: 71px;
}

#torchLeftContainer {
    left: calc(50% - 375px);
}

#torchLeft {
    left: 0px;
}

#torchLeftBackground {
    left: 0px;
}

#flameLeft {
    left: 21px;
}

#torchRightContainer {
    right: calc(50% - 375px);
}

#torchRight {
    right: 0px;
}

#torchRightBackground {
    right: 0px;
}

#flameRight {
    left: 21px;
}




#smallKolosWorksLogoBackground {
    position: absolute;
    top: -27px;
    left: calc(50% - 32px);
    width: 64px;
    z-index: 3;
    opacity: 0.8;
}

#smallKolosWorksLogo {
    position: absolute;
    z-index: 3;
    width: 66px;
    left: calc(50% - 33px);
    top: -35px;
}



#EmailMe {
    color: white;
    font-size: 24px;
    margin-top: 32px;
    font-weight: bold;
}

#GiveSpace {
    margin-top: 35px;
}

#GiveSpace2 {
    margin-top: 30px;
}

#FooterLineContainer {
    font-family: Times New Roman, Times, serif;
    margin-top: 0px;
    margin-bottom: 20px;
    width: 100%;
    line-height: 25px;
    background-color: black;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #e1e1e1;
}

.FooterLineText {
    display: inline-block;
    margin: 0px 10px;
}

#unLimited {
    font-size: 12px;
    font-style: italic;
}

#Socialize {
    margin-top: 50px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #e1e1e1;
}

#SocializeLine {
    background-repeat: repeat-x;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    min-width: 225px;
    width: 48%;
    height: 10px;
}

.f26 {
    font-size: 26px;
}

#KolosWorksFooter {
    margin-top: 30px;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #e1e1e1;
}

.KWfooterCap {
    font-size: 36px;
    color: white;
}


@media (max-width: 600px) {

    .backgroundSparkle,
    .sparkle {
        display: none !important;
        background: none !important;
        /* Prevents images from being fetched */
    }
}

@media (min-width: 767px) {

    #torchLeftBackground,
    #torchRightBackground {
        background-image: url("../images/TorchBg.png");
    }

    #flameLeft,
    #flameRight {
        background-image: url("../images/Flame.gif");
    }

    #torchLeft,
    #torchRight {
        background-image: url("../images/Torch.png");
    }
}

.education {
    border-bottom: 0px !important;
}

/* WELCOME TO KOLOSWORKS - Text */
@media (max-width: 600px) {
    .CamelLowcase {
        font-size: 30px;
    }

    .CamelCapital {
        font-size: 40px;
    }
}

@media (max-width: 500px) {
    .CamelLowcase {
        font-size: 26px;
    }

    .CamelCapital {
        font-size: 36px;
    }

    .introductionContainer {
        font-size: 17px;
    }
}

@media (max-width: 430px) {
    .CamelLowcase {
        font-size: 24px;
    }

    .CamelCapital {
        font-size: 34px;
    }

    .introductionContainer {
        font-size: 15px;
    }
}

@media (max-width: 400px) {
    .CamelLowcase {
        font-size: 20px;
    }

    .CamelCapital {
        font-size: 30px;
    }

    .introductionContainer {
        font-size: 12px;
    }
}

@media (max-width: 340px) {
    .CamelLowcase {
        font-size: 18px;
    }

    .CamelCapital {
        font-size: 26px;
    }

    .introductionContainer {
        font-size: 11px;
    }
}

/* WELCOME TO KOLOSWORKS - Text  -- END*/




@media (max-width: 870px) {

    #youtube-iframe,
    #progress-bar {
        width: 500px !important;
    }
}

#skills {
    padding-top: 60px;
    text-align: center;
}

.education {
    padding-bottom: 40px !important;
}

#skills h1 {
    padding-bottom: 40px !important;
}

.hokiGap {
    padding-bottom: 15px;
}

#noSpam {
    font-size: 20px !important;
}

@media (max-width: 767px) {
    .row {
        width: 560px !important;
    }

    #resume h3,
    #resume .info {
        text-align: left !important;
    }

    #CadcorpWork {
        margin-left: 0px !important;
        margin-top: 0px !important;
    }
}

@media (max-width: 766.98px) {

    #torchLeftContainer,
    #torchRightContainer,
    .MenuBG {
        display: none;
    }

    /*
    #youtube-iframe,
    #progress-bar {
        width: 400px !important;
    }
        */
}

@media (max-width: 600px) {
    .row {
        width: 90% !important;
    }

    #youtube-iframe,
    #progress-bar {
        width: 80vw !important;
    }

    #progress-bar {
        left: 0% !important;
        transform: unset !important;
    }

    .work,
    .education {
        width: 100% !important;
    }

    .work .row.item,
    .education .row.item {
        width: 100% !important;
    }

    .work .main-col,
    .education .main-col {
        padding-right: 0px !important;
    }

    .work .twelve.columns,
    .education .twelve.columns {
        padding-right: 0px !important;
        padding-left: 45px !important;
    }
    #oddsTellerExplainMore {
        display: none;
    }
}


@media (max-width: 420px) {
    .bars li em {
        font: 12px 'opensans-bold', sans-serif !important;
    }
}

@media (max-width: 390px) {
    #noSpam {
        font-size: 18px !important;
    }
}

@media (max-width: 380px) {
    .bars li em {
        font: 10px 'opensans-bold', sans-serif !important;
    }
}