body {
    background: #f5f5f5;
    color: #555;
    font-family: 'Lato',sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: 0.5px;
    text-align: center;
}
input,textarea,select {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    width: 100%;
    letter-spacing: 0.5px;
}
p { padding-bottom: 15px }
h1,h2,h3,h4,h5,h6 {
    font-weight: 600;
    word-spacing: 1px;
    margin-bottom: 30px;
    color: #333;
}
h1 { font-size: 45px; line-height: 60px; }
h2 { font-size: 26px; line-height: 40px; }
h3 { font-size: 20px }
h4 { font-size: 16px }
h5 { font-size: 14px }
h6 { font-size: 12px }
a, a:hover { text-decoration: none; }
a { color: #2d676f; }
a:hover { color: #337f89; }
img { max-width: 100%; height: auto; }
ul, li { list-style: none; list-style-type: none; padding: 0; margin: 0; }
dl dd, dt {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
dl dd:after {
  content: " ";
  display: table;
  clear: both;
}
dl dd { width: 50%; text-align: left; margin-bottom: 10px; }
dl dt { width: 50%; text-align: right; }

p.intro{ font-size: 24px;font-weight: lighter;line-height: 34px;padding-bottom: 45px; }
p.intro.big{ font-size: 34px;line-height: 44px; padding-bottom: 30px; }



.img-rounded,.img-rounded img {border-radius: 15px; overflow: hidden; }
.img-circle { border-radius: 600px; overflow: hidden; }
.btn.btn-primary { background-color: #2d676f; border-color: #2d676f; color: #fff; }
.btn.btn-primary:hover { background-color: #337f89; }
span.btn.btn-primary:hover { background-color: #2d676f; cursor: default; }
.well {
    background-color: #eee;
    border: 1px solid #ccc;
}
.well,
.well h1,
.well h2,
.well h3,
.well h4,
.well h5,
.well h6,
.well p,
.well span { color: #333; }

header .navbar-brand-container {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
header.scrolled .navbar-brand { display: inline-block; }
header .language-toggler { margin: 10px 15px; }
header .language-toggler .btn-lang-toggler { margin: 0 2px;}
header .language-toggler .btn-lang-toggler img { border-radius: 60px; width: 20px; border: 1px solid #999;  opacity: 0.5;}
header .language-toggler .btn-lang-toggler img:hover {border-color: white; opacity: 1;}
header .language-toggler .btn-lang-toggler.active img { border-color: #337f89; opacity: 1;}

footer { background: #000 !important; color: #fff !important; }
footer p { padding-bottom: 0; }

section {
    padding-bottom: 90px;
    min-height: 350px;
}

section.sugar { color: #eee; }
section.sugar, section.sugar .icon-container div { background-color: #2d676f; }
section.sugar .icon-container div,
section.sugar h1,
section.sugar h2,
section.sugar h3,
section.sugar h4,
section.sugar h5,
section.sugar h6 { color: #fff; }
section.sugar a { color: #ddd; }
section.sugar a:hover { color: #fff; }
section.sugar .btn.btn-primary { background-color: #ddd; }
section.sugar .btn.btn-primary:hover { background-color: #fff; }

section.coffee { color: #ccc }
section.coffee, section.coffee .icon-container div { background-color: #222; }
section.coffee .icon-container div, 
section.coffee h1,
section.coffee h2,
section.coffee h3,
section.coffee h4,
section.coffee h5,
section.coffee h6 {
    color: #eee;
}
section.coffee .well {
    background-color: #1e1e1e;
    opacity: 20%;
    border-width: 0;
}
section.coffee .well,
section.coffee .well h1,
section.coffee .well h2,
section.coffee .well h3,
section.coffee .well h4,
section.coffee .well h5,
section.coffee .well h6,
section.coffee .well p,
section.coffee .well span { color: #eee; }

section.cream { color: #111; }
section.cream, section.cream .icon-container div { background-color: #f5f5f5; }
section.cream .icon-container div,
section.cream h1,
section.cream h2,
section.cream h3,
section.cream h4,
section.cream h5,
section.cream h6 {
    color: #333;
}

section .icon-container {
    position: relative;
    top: -35px;
    width: 100%;
    height: 53px;
    text-align: center;
}
section .icon-container div {
    padding: 5px; 
    width: 60px; 
    height: 60px; 
    margin: 0 auto; 
    border-radius: 60px; 
    line-height: 60px; 
}
section .icon-container div .fa { z-index: 999; font-size: 32px;}

.wrap {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}
.date-detail {
    font-weight: lighter;
    font-style: italic;
}

.infoset { margin-bottom: 30px; }
.skillset, .langset { margin-bottom: 10px; }
.skillset .btn { margin: 10px 5px 0 5px; }
.skillset dt { margin-top: 15px; }

.social-links-container a {margin-left: 10px; margin-right: 10px; color: #337f89; transition: color 1s;}
.social-links-container a i {font-size: 18px; }
.social-links-container .social-facebook:hover {color: #4c66a4; }
.social-links-container .social-twitter:hover {color: #55acee; }
.social-links-container .social-plus:hover {color: #cc3732; }
.social-links-container .social-linkedin:hover {color: #287bbc; }
.social-links-container .social-github:hover {color: #f3f3f3; }
.social-links-container .social-rss:hover {color: #ff9300; }

#home { padding: 100px 0 60px 0;}
#home .row { margin: 0; }
#home #img-container { text-align: right; }
#home #img-container #ccimage {
    float: right;
    margin: 20px auto 20px auto;
    width: 150px;
    border: 4px solid white;
}

#home #data-container {
    text-align: left;
    margin-top: 30px;
}

#services .service img { width: 150px; }
#services .service h3 { margin-bottom: 10px; }
#services .service p { margin-bottom: 50px; }

#skills .buttoned .btn { margin-bottom: 5px; }

#education section { padding-bottom: 0; min-height: 0; margin-bottom: 60px; }
#education section .info, #education section .main {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
#education section .main { width: 60%; text-align: left; padding-top: 29px; }
#education section .info { width: 40%; text-align: right; }
#education section .info h3,
#education section .info p { margin: 10px 0; }
#education section ul { margin-bottom: 20px; }

#employment .well h3 { margin-bottom: 15px; }
#employment .well h4 { font-size: 30px; margin-bottom: 20px; }
#employment .well h4 { color: #2d676f; }

#contact-form .field-container {margin-top: 20px;}
#contact-form label {display: inline-block; width: 18%;float: left; text-align: right; margin-right: 2%;}
#contact-form input, #contact-form textarea {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    font-size: 15px;
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    padding: 5px 10px;
    width: 80%;
}
#contact-form textarea {height: auto;}
#contact-form section.coffee input,
#contact-form section.coffee textarea {background: #444; border-color: #545454; color: #ccc;}
#contact-form input.error, #contact-form textarea.error {margin-bottom: 10px; }
#contact-form > .alert {opacity: 0; transition: opacity 2s ease-out; }
#contact-form .field-container .alert {padding: 3px 2px; margin-left: 20%;}
#contact-form .btn {margin-top: 20px;}
::-webkit-input-placeholder { font-family: Arial,Helvetica,sans-serif; font-style: italic;}
::-moz-placeholder { font-family: Arial,Helvetica,sans-serif; font-style: italic; } /* firefox 19+ */
:-ms-input-placeholder { font-family: Arial,Helvetica,sans-serif; font-style: italic; } /* ie */
input:-moz-placeholder, textarea:-moz-placeholder  { font-family: Arial,Helvetica,sans-serif; font-style: italic; }


/* Scroll to Top */
#scrolltop {
    display: block;
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10;
    display: none;
    
    text-align: center;
    background: #2d676f;
    opacity: .5;
    border-radius: 5px;
    cursor: pointer;

    text-decoration: none;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.10);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
}
#scrolltop:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
#scrolltop .fa, #scrolltop .fa {
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    height: 40px;
    padding: 0;
    text-align: center;
    color: #fff;
}


/* Parallax Background */
.parallax { background-position: 50% 500%; background-repeat: no-repeat; background-attachment: fixed; }
#about {background-image: url(../img/bg-user.png); }
#personalinfo {background-image: url(../img/bg-nameplate.png); }
#education {background-image: url(../img/bg-certificate.png); }
#employment {background-image: url(../img/bg-share_alt.png); }
#services {background-image: url(../img/bg-ok_2.png); }
#skills {background-image: url(../img/bg-cogwheels.png); }
#bonus {background-image: url(../img/bg-gift.png); }
#portfolio {background-image: url(../img/bg-briefcase.png); }
#clients {background-image: url(../img/bg-group.png); }
#testimonials {background-image: url(../img/bg-comments.png); }
#services2 {background-image: url(../img/bg-dislikes.png); }
#social {background-image: url(../img/bg-heart.png); }
#tweetr {background-image: url(../img/bg-bullhorn.png); }
#contact {background-image: url(../img/bg-envelope.png); }
#download {background-image: url(../img/bg-paperclip.png); }

/* Large desktop and above */
@media (min-width: 1200px) {
  .wrap {   width: 980px;  }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 991px) {
    .wrap {    width: 768px;  }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .wrap {   width: 100%;  }

    #education section .main { width: 100%; text-align: center; padding-top: 0; }
    #education section .info { width: 100%; text-align: center; }
}

/* Landscape phone to landscape tablet and desktop */
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-collapse.collapse.in { display: block!important; }
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: #2a2a2a;
        opacity: 0.7;
        border: 0;
        box-shadow: none;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        color: #999;
    }

    dl dd { width: 100%; text-align: center; }
    dl dt { width: 100%; text-align: center; }

    #home #data-container {
        text-align: center;
        margin-top: 0;
    }

    #home #img-container #ccimage { float: none; }

    #skills .stared dd { width: 50%; text-align: left; }
    #skills .stared dt { width: 50%; text-align: right; }
    #skills .buttoned dd { margin: 10px 0 30px 0; }
}

/* landscape tablet and desktop to large desktop and above */
@media (min-width: 992px) {
    header .navbar-brand { display: none; }
}