@font-face {
    font-family: Rajdhani-Regular;
    src: url(../fonts/Rajdhani-Regular.ttf) format("truetype")
}

ol, ul {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0
}

.clear {
    display: inline-table
}

/* Hide from IE/Mac \*/
* html .clear {
    height: 1%
}

.clear {
    display: block
}

/* Hide from IE/Mac */
body {
    line-height: 1em !important;
    background-color: #000;
    margin: 0 auto;
    padding: 0 0 30px 0;
    /*font: normal 2em "Rajdhani-Regular", Arial, Tahoma, Verdana, sans-serif !important;*/
font: normal 2em "Helvetica Neue",Helvetica,Arial,sans-serif;
    letter-spacing: 1px;
    color: #444;
    /*line-height: 26px*/
}

#wrap {
    font: normal 22px "Rajdhani-Regular", Arial, Tahoma, Verdana, sans-serif;

    width: 950px;
    margin: 0 auto;
    padding: 30px;
    border-bottom: 5px solid #d90;
    background-color: #fff;
    margin-top: 8em;
    margin-bottom: 4em;
}

@media print {
    #wrap {
        margin-top: 1em;
    }
}

#btn-language-switcher button.dropdown-toggle {
    height: 32px;
}

.navbar * {
    margin-bottom: 0;
    text-decoration: none;
    letter-spacing: 2px;
}

.stars-sup {
    font-size: 75%;
    position: relative;
    top: -6px;
    left: 6px;
}

.wordcloud {
    width: 380px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.filter-greyscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.used-technologies {
    list-style: disc;
    margin: 2em 0em 0em 2em;
}

a {
    color: #d40;
    text-decoration: underline;
    outline: none
}

a:hover {
    color: #000 !important
}

a img {
    border: 0
}

p {
    margin: 1em 0 0 0;
    padding: 0
}

p:first-child {
    margin-top: 0
}

strong, .strong {
    font-weight: bold
}

em {
    font-style: italic
}

ul {
    margin: 1em 0 0 20px;
    list-style-type: square
}

pre {
    background: #eee;
    margin: 1em 0 0 0;
    display: block;
    padding: 20px;
    white-space: pre-wrap
}

.mt0 {
    margin-top: 0 !important
}

.mt10 {
    margin-top: 10px !important
}

.mt20 {
    margin-top: 20px !important
}

.mt30 {
    margin-top: 30px !important
}

.ml0 {
    margin-left: 0 !important
}

.left {
    float: left !important
}

.right {
    float: right !important
}

.ruler {
    clear: both;
    display: block;
    height: 1px;
    width: 100%;
    border-bottom: 1px solid #fc0;
    margin: 0 0 30px 0;
    padding: 30px 0 0 0
}

.section {
    width: 900px;
    clear: both;
    margin-top: 50px;
    border-top: 1px solid #000
}

.topsection {
    margin-top: 0 !important;
    border-top: 4px solid #000
}

.column {
    width: 280px;
    float: left;
    margin-right: 30px;
    padding-top: 30px
}

.largecolumn {
    width: 590px;
    float: right;
    margin-right: 0;
    padding-top: 30px;
    /*font-size: 110%;*/
}

.lastcolumn {
    margin-right: 0 !important
}

.largecolumn .column {
    padding-top: 0
}

.titlecolumn {
    margin-left: 0 !important;
    border-top: 1px solid #000;
    padding-top: 29px
}

.topsection .titlecolumn {
    border-top: 2px solid #000
}

/* 03. Content elements */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.1em;
    color: #000;
    padding: 0;
    margin: 1em 0 0.5em 0
}

h1 {
    font-weight: bold;
    font-size: 40px;
    letter-spacing: -1px
}

h2 {
    font-weight: bold;
    font-size: 34px;
    letter-spacing: -.61px
}

h3 {
    font-weight: bold;
    font-size: 28px;
    letter-spacing: -.61px
}

h4 {
    font-weight: bold;
    font-size: 24px;
    letter-spacing: -.61px;
    color: #666
}

h1.myname {
    font: normal bold 60px Arial, Tahoma, Verdana, sans-serif;
    color: #000;
    margin: 0;
    padding: 0;
    line-height: 56px;
    letter-spacing: -2px
}

h4.myjob {
    font: normal bold 24px Arial, Tahoma, Verdana, sans-serif;
    color: #444;
    margin-top: 5px;
    padding: 0;
    line-height: 36px;
    letter-spacing: -1px
}

h2.sectiontitle {
    font: normal bold 36px Arial, Tahoma, Verdana, sans-serif;
    color: #444;
    margin: 0;
    padding: 0;
    line-height: 36px;
    letter-spacing: -1px
}

/* 03.A Imagery */
.photo {
    padding: 8px;
    background: #fff;
    border: 1px solid #ccc
}

.photo70x70 {
    width: 70px;
}

.photo100x100 {
    width: 100px;
    height: 100px;
}

.myphoto {
    float: left;
    margin: 5px 15px 0 0;
    width: 260px;
}

/* 03.B Social Media */
ul.socialmedia {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none
}

ul.socialmedia li {
    display: inline-block;
    margin: 0 7px 0 0;
    padding: 0;
    float: left
}

ul.socialmedia li a {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    text-indent: -9999px
}

ul.socialmedia a.rss {
    background-position: 0 0
}

ul.socialmedia a.rss:hover {
    background-position: 0 -24px
}

ul.socialmedia a.twitter {
    background-position: -24px 0
}

ul.socialmedia a.twitter:hover {
    background-position: -24px -24px
}

ul.socialmedia a.facebook {
    background-position: -48px 0
}

ul.socialmedia a.facebook:hover {
    background-position: -48px -24px
}

ul.socialmedia a.linkedin {
    background-position: -72px 0
}

ul.socialmedia a.linkedin:hover {
    background-position: -72px -24px
}

ul.socialmedia a.flickr {
    background-position: -96px 0
}

ul.socialmedia a.flickr:hover {
    background-position: -96px -24px
}

ul.socialmedia a.youtube {
    background-position: -120px 0
}

ul.socialmedia a.youtube:hover {
    background-position: -120px -24px
}

ul.socialmedia a.yahoo {
    background-position: -144px 0
}

ul.socialmedia a.yahoo:hover {
    background-position: -144px -24px
}

ul.socialmedia a.skype {
    background-position: -168px 0
}

ul.socialmedia a.skype:hover {
    background-position: -168px -24px
}

/* 03.C Simple Lists */
ul.simplelist {
    clear: both;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none !important
}

/* 03.D Skills */
.skill h3 {
    margin-top: 0
}

.skillbar {
    display: block;
    width: 280px;
    height: 14px;
    font-size: 1px;
    line-height: 12px;
    background: #efefef;
}

.skillbarfill {
    height: 14px;
    /*text-indent: -9999px;*/
    font-size: 1px;
    line-height: 14px;
    background: #ccc;
}

.skill .skill10 {
    width: 10% !important
}

.skill .skill20 {
    width: 20% !important
}

.skill .skill30 {
    width: 30% !important
}

.skill .skill40 {
    width: 40% !important
}

.skill .skill50 {
    width: 50% !important
}

.skill .skill60 {
    width: 60% !important
}

.skill .skill70 {
    width: 70% !important
}

.skill .skill80 {
    width: 80% !important
}

.skill .skill90 {
    width: 90% !important
}

.skill .skill100 {
    width: 100% !important
}

/* 03.E Jobs */
.employer h3, .employer h4 {
    margin-top: 0
}

.employer-tools {
    text-transform: capitalize;
}

/* 03.F Education */
.studies h3 {
    margin-top: 0
}

.studies h4 {
    margin: 0
}

/* 03.G Clients &Works */
.clients h3, .works h3 {
    margin-top: 0
}

ul.thumbs {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.thumbs li {
    float: left;
    margin: 10px 20px 10px 0px;
}

/* Mobile Stles */

@media (max-width: 900px) {

    * {
        letter-spacing: 0 !important;
    }

    body {
        background: #fff none !important;
        margin: 0;
        /*padding: 30px;*/
        font-size: 1em;
    }

    #wrap {
        width: 100%;
        padding: 30px;
        background-image: none;
        margin-top:0px;
        margin-bottom:0px;
    }

    #wrap, .titlecolumn {
        border: none !important;
    }

    .section {
        width: 100%;
    }

    .column, .largecolumn, .titlecolumn {
        float: none;
        clear: both;
        width: 100% !important;
        margin-left: 0;
    }

    .ruler {
        width: 100%;
        float: none;
        clear: both;
    }


    .employer {
        margin-bottom: 30px;
    }

    .thumbs li {
        margin: 5px 20px 5px 0 !important;
    }

    .cvoptions {
        display: none !important;
    }

}


/*Big screen*/


@media (min-width: 1200px) {

    * {
        letter-spacing: 0 !important;
    }

    /*body {*/
        /*background: #fff none !important;*/
        /*margin: 0;*/
        /*!*padding: 30px;*!*/
        /*font-size: 1em;*/
    /*}*/

    /*#wrap {*/
        /*width: 100%;*/
        /*padding: 30px;*/
        /*background-image: none;*/
        /*margin-top:0px;*/
        /*margin-bottom:0px;*/
    /*}*/

    #wrap {
        border: none !important;
        width: 1200px;
    }

    .section {
        width: 100%;
    }

    .column{
        width: 380px;
    }

    .column.titlecolumn {
        width: 280px;
    }

    .largecolumn {
        width: 790px;
    }

    .ruler {
        width: 100%;
        float: none;
        clear: both;
    }


    .employer {
        margin-bottom: 30px;
    }

    .thumbs li {
        margin: 5px 20px 5px 0 !important;
    }

    .cvoptions {
        display: none !important;
    }

}

/* 04. CV Options */
.cvoptions {
    position: fixed;
    top: 40%;
    display: block;
    width: 23px;
    margin: 0;
    padding: 8px 8px 8px 0;
    z-index: 100001 !important;
    list-style: none;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.6)
}

.cvoptions li {
    width: 23px;
    height: 23px;
    margin: 1px 0 0 0;
    padding: 0;
    float: left
}

.cvoptions li a {
    width: 23px;
    height: 23px;
    display: block;
    text-indent: -9999px
}

/* 05. Contact Form */
#contactbody {
    background: #fff;
    margin: 0 auto
}

#contactformwrapper {
    width: 300px;
    margin: 0 auto;
    padding: 20px 20px 0 20px
}

#contactbody h2 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
    margin-bottom: 20px
}

#contactbody label {
    font-size: 14px;
    font-weight: bold;
    color: #666;
    vertical-align: top;
    display: inline-block;
    width: 80px;
    margin-right: 10px;
    line-height: 30px
}

#contactbody label.error {
    display: block;
    width: 200px;
    margin: 0 0 0 90px;
    color: #f00;
    font-size: 11px;
    font-weight: normal;
    font-style: italic;
    line-height: 20px
}

#contactbody .textbox {
    width: 200px;
    background: #fff;
    border: 1px solid #bbb;
    font: normal normal 12px Arial, Tahoma, Verdana, sans-serif
}

#contactbody input.textbox {
    line-height: 24px;
    height: 24px
}

#contactbody textarea.textbox {
    line-height: 18px
}

#contactbody .button {
    width: 120px;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: #222;
    border: 0;
    cursor: pointer
}

#contactbody .button:hover {
    background: #790
}

#contactbody p {
    margin: 0 0 5px 0 !important;
    padding: 0 !important
}

#contactbody .formsuccess {
    font-size: 14px;
    font-weight: bold
}

#contactbody .formerror {
    display: block;
    margin-bottom: 10px;
    color: #f00
}

/* tipsy styles */
.tipsy {
    font-size: 20px;
    font-family: arial, Tahoma;
    position: absolute;
    padding: 5px;
    z-index: 100000;
}

.tipsy-inner {
    background-color: #000;
    color: #FFF;
    max-width: 200px;
    padding: 5px 8px 4px 8px;
    text-align: center;
}

/* Rounded corners */
.tipsy-inner {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/

.tipsy-arrow {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border: 5px dashed #000;
}

/* Rules to colour arrows */
.tipsy-arrow-n {
    border-bottom-color: #000;
}

.tipsy-arrow-s {
    border-top-color: #000;
}

.tipsy-arrow-e {
    border-left-color: #000;
}

.tipsy-arrow-w {
    border-right-color: #000;
}

.tipsy-n .tipsy-arrow {
    top: 0px;
    left: 50%;
    margin-left: -5px;
    border-bottom-style: solid;
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-nw .tipsy-arrow {
    top: 0;
    left: 10px;
    border-bottom-style: solid;
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-ne .tipsy-arrow {
    top: 0;
    right: 10px;
    border-bottom-style: solid;
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-s .tipsy-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top-style: solid;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-sw .tipsy-arrow {
    bottom: 0;
    left: 10px;
    border-top-style: solid;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-se .tipsy-arrow {
    bottom: 0;
    right: 10px;
    border-top-style: solid;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-e .tipsy-arrow {
    right: 0;
    top: 50%;
    margin-top: -5px;
    border-left-style: solid;
    border-right: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.tipsy-w .tipsy-arrow {
    left: 0;
    top: 50%;
    margin-top: -5px;
    border-right-style: solid;
    border-left: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}