@import url('https://fonts.googleapis.com/css?family=Exo:100,300,400,500,700|Roboto:100,300,400,700');

/*
    font-family: 'Roboto', sans-serif;
    font-family: 'Exo', sans-serif;
*/

/*---------------------------------------------- colors*/

.bg-color-name-title {
    background-color: #676767;
}

.ui-menu-color-home {
    background-color: #e67e22;
}

.ui-menu-color-resume {
    background-color: #9b59b6;
}

.ui-menu-color-contact {
    background-color: #3498db;
}

.ui-menu-color-download {
    background-color: #525252;
}

/*.menu-item a:hover {*/

/*    background-color: rgba(0, 0, 0, 0.3);*/

/*}*/

.bg-color-three-reasons {
    background-color: white;
    /*background-color: red;*/
}

.bg-color-personal-info {
    /*background-color: #f4f4f4;*/
    background-color: #e67e22;
}

.bg-color-work-history {
    background-color: #9b59b6;
}

.bg-color-contact {
    /*background-color: #3498db;*/
    background-color: white;
}


/*------------------------------------------------- specials paddings / margins / text */

h1,
h2,
h3,
h4,
h5 {
    margin: 0
}


.general-sub {
    font-family: 'Exo', sans-serif;
    color: #fafafa;
}

.row-table {
    display: table;
}

.section-column {
    display: table-cell;
    padding: 0 30px 30px;
    float: none;
}

.history-heading,
.section-heading {
    font-family: 'Exo', sans-serif;
    font-weight: 300;
    margin-top: 25px;
    margin-bottom: 40px;
}

/*------------------------------------------------- header*/

header {
    margin: 0;
}

.heading {
    margin-left: 2rem;
}

.logo {
    /*background-image: url('../images/rosie.jpg');*/
    background-image: url('../images/girl-image.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /*min-height: 360px;*/
    min-height: 300px;
    /*transition: all 0.5s ease-in-out;*/
    /*-moz-transition: all 0.5s ease-in-out;*/
    /*-webkit-transition: all 0.5s ease-in-out;*/
    /*-o-transition: all 0.5s ease-in-out;*/
     transition: opacity .4s  ease-in-out; 
     -moz-transition: opacity .4s  ease-in-out; 
     -o-transition: opacity .4s  ease-in-out; 
     -webkit-transition: opacity .4s  ease-in-out; 

}

.logo:hover {
    opacity: 0.9;
}

.name {
    font-family: 'Exo', sans-serif;
    font-weight: 100;
    font-size: 46px;
    /*margin-top: 50px;*/
    margin-top: 3rem;
    color: #fff;
    display: inline-block
}

/*.name:hover {*/
/*    background-color: rgba(0, 0, 0, 0.5);*/
/*}*/


.title {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 28px;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
    color: #fff;
}

.list-inline-item:not(:last-child) {
    /*overwrite BS CSS to remove margin*/
    margin-right: 0;
    margin-left: 0;
}

/*css trick to remove extra margin in the nav items by setting font size=0*/

.menu-container {
    font-size: 0;
}

/*then set font-size with the #nav id to the li child to normal size*/

#nav>li {
    font-size: 14px;
    padding: 0;
}

#nav {
    /*remove extra spacing at the bottom*/
    margin: 0;
}


.menu-item {
    height: 120px;
    text-align: center;
    padding: 0;
}

.menu-item a {
    text-decoration: none;
    color: white;
    width: 100%;
    /*height: 120px;*/
    height: 100%;
    display: block;
    /*background: rgba(255, 0, 0, .3);*/
}

/*font-awesome icon*/

.menu-item i {
    display: block;
    color: #fafafa;
    padding-top: 2.3rem;
    font-size: 28px;
}

.menu-item span {
    display: block;
    text-transform: uppercase;
    padding-top: 5px;
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 14px;
}


/*------------------------------------------------- hover.css*/

.hvr-sweep-to-bottom:before {
    background: rgba(0, 0, 0, 0.3);
}




/*------------------------------------------------- footer*/

footer {
    background-color: #525252;
    color: #fafafa;
    min-height: 120px;
}

.cv-pdf i {
    font-size: 18px;
    color: #fafafa;
    text-align-last: center;
    padding-left: 5px;
    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.cv-pdf i:hover {
    color: #e84610;
}


.social-links {
    padding-bottom: 15px;
}

.social-links i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 10px 0;
    text-align: center;
    font-size: 13px;
    color: #fafafa;
    background-color: #8f8f8f;
    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.social-links i:hover {
    background-color: #e84610;
}


/*------------------------------------------------- 3 reasons*/

.three-reasons-icon {
    font-size: 26px;
    color: #e67e22;
}

.three-reasons-heading {
    margin-bottom: 15px;
}


/*------------------------------------------------- personal info */

.personal-info-item {
    display: block;
    margin-bottom: 20px;
    /*clear: both;*/
    /*ga perlu nih*/
    /*just to make sure in case we're using floats*/
}

.personal-info-item .key,
.personal-info-item .value {
    padding-right: 8px;
    display: inline-block;
}

.personal-info-item .key p,
.personal-info-item .value p {
    margin: 0;
}

.personal-info-item .key {
    width: 30%;
    margin-right: 21px;
    padding-top: 2px;
    /*vertical-align: top;*/
    /*ga perlu nih*/
}

.personal-info-item .key p {
    font-weight: 700;
}

.personal-info-item .value {
    /*position: relative;*/
    /*ga perlu nih*/
    width: 60%;
}

/*------------------------------------------------- SKILLS */

.progress {
    position: relative;
    height: 25px;
    margin-bottom: 4px;
}

.progress-type {
    position: absolute;
    left: 0px;
    font-weight: 400;
    padding: 3px 30px 2px 10px;
    color: #fafafa;
    background-color: rgba(25, 25, 25, .2);
    height: 100%;
}


/*------------------------------------------------- work history */

.history-heading {
    color: #fafafa;
    margin-bottom: 10px;
}

.timeline-item {
    /*padding: 4em 2em 0em 2em;*/
    padding: 3em 2em 0em 2em;
    position: relative;
    color: #fafafa;
    border-left: 1px solid;
    /*margin-left: 6px;*/
    margin-left: 3px;
}

.timeline-item p {
    padding: 0;
    margin: 0;
}

.timeline-item:before {
    content: attr(data-dates);
    position: absolute;
    left: 2.5em;
    /*top: 3em;*/
    top: 2em;
    display: block;
    font-family: "Exo", sans-serif;
    font-weight: 500;
    font-size: 0.8em;
    padding: 0;
    margin: 0;
}

.timeline-item:after {
    width: 12px;
    height: 12px;
    top: 1.8em;
    left: -6px;
    /*display: block;*/
    /*top: 2.4em;*/
    position: absolute;
    border-radius: 12px;
    content: '';
    background: #fafafa;
}

.history-items {
    margin-bottom: 30px;
}

/*------------------------------------------------- contact */

.contact-heading {
    font-family: "Exo", sans-serif;
    font-weight: 300;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}


.form-center {
    /*mobile first*/
    max-width: 80%;
    margin: 2rem auto;
    /*margin-bottom: 3rem;*/
}

/*just FYI, you can target button type*/

button[type="submit"] {
    margin-top: 15px;
    margin-bottom: 20px;
    color: #fafafa;
    /*background-color: #e84610;*/
}


/* ----------------------------------------Media Queries for desktop*/

@media(min-width: 992px) {

    .form-center {
        max-width: 50%;
        /*min-height: 240px;*/
        /*min-height: 900px;*/
        margin: 2rem auto;
        margin-bottom: 3rem;
    }
    
}