/* Style body by adding background image and set it to cover, add font-family */
body{
    font-family: 'Poppins', sans-serif;
    background-color: #1D2831;
    background: url(images/bg_about.jpg) no-repeat center center fixed;
    background-size: cover;
}
/*Style brand*/
.logo{
    height: 50px;
}

/*Style nav bar*/
.navbar-dark{
    background: rgba(0, 0, 0, 0.80);
/*    background: transparent;*/
    border-bottom: 1px solid dimgrey;
}
.navbar-nav li a{
    color: darkgray;
    font-size: 17px;
    margin: 0 auto;
    margin-right: 35px;
    padding: 15px 0;
}

.navbar-nav li a:hover{
    color: white;
}
.navbar-toggler-icon{
    color: white;
}

.hrr{
/*    height: 1px;*/
    border-top: 1px solid rgba(82, 170, 222, 0.80);
    width: 50%;
    margin: 0 auto;
    padding-bottom: 30px;
}

/*HELLO*/
#hello{
    background-color: #1D2831;
    background: url(/images/bg_main.jpg) center center;
    background-size: cover;
    height: 100vh;
    width: 100%;
}

/*Style jumbotron*/
.jumbotron{
/*
    background-color: #1D2831;
    background: url(/images/bg_main.jpg) center center;
    background-size: cover;
*/
    height: 100vh;
    width: 100%;
    background-color: transparent;
    color: white;
    text-align: center;
/*    margin-top: 80px;*/
    padding-top: 40vh;
    margin-bottom: 0;
/*    padding: 10px;*/
    letter-spacing: 2.5px; 
/*    border-bottom: 2px solid red;*/
}
.jumbotron h2{
    font-size: 32px;
    font-weight: 300;
    line-height: 1.3em;
}
#jumbName{
    color: #52aade;
    font-weight: 400;
}
.btn-hello{
    color: white;
    border: 1px solid white;
}
.btn-hello:hover{
    color: #52aade;
/*    border: 1px solid #52aade;*/
}

/*ABOUT*/
.about{
    color: white;
    background-color: rgba(14, 29, 38, 0.85);
    padding-top: 80px; 
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 50px;
}
#rowIconAbout{
    padding-bottom: 70px;
}
.about h3{
    color: #52aade;
}
.about p{
    font-weight: 300;
}
.aboutIcons{
    text-align: center;
}
#iconMe{
    text-align: center;
    padding: 0 40px;
}
.aboutImg{
    height: 100px;    
}
.aboutMeImg{
/*    height: 300px;*/
    width: 50%;
}
.tittles{
    font-size: 30px;
/*    text-align: center;*/
    margin: 0 auto;
    padding: 30px 0 50px 0;
    text-decoration: underline;
}
/*
#group{
    flex: 100px;
}
*/
.progress{
    margin-bottom: 0px;
    background-color: lightgrey;
}
.skills{
    background-color: #52aade;
    width: 30%;
    text-align: center;
    float: left;
}
.btnAbout{
    background: transparent;
    border: 1px solid #52aade;
    color: white;
}
.btnAbout:hover{
    color: #52aade;
}
#skillbg{
/*    background-color: lightgrey;*/
    padding: 0;
}
#skillprogress{
    padding-left: 0;
    padding-right:  0;
}
.progress{
    width: 60%;
/*    text-align: center;*/
    float: left;
    border-radius: 0px;
}
.skillpercentage{
    background-color: lightgrey;
    color: dimgrey;
    text-align: right;
    width: 10%;
    text-align: center;
    float: left;
}

/*PORTFOIO*/
.portfolio{
    color: white;
    background-color: rgba(14, 29, 38, 0.85);
    padding: 50px 0;
/*    text-align: center;*/
}
.rowWidth{
    max-width: 1200px;
    margin: 0 auto;
}
.portImage{
    text-align: center;
}
.portImage img{
    width: 100%;
}
.portfolio h3{
    color: #52aade;
}
.txtLeft{
    text-align: left;
}
.txtRight{
    text-align: right;
}
.portContent{
    height: 100%; /* 350px; */
    background-color: rgba(82, 170, 222, 0.10);
    padding: 30px 30px;
    font-weight: 200;
    margin-bottom: 30px;
}

/*CONTACT*/
.contact{
    color: white;
    background-color: rgba(82, 170, 222, 0.70);
    padding-top: 50px; 
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 150px;
}

.btnContact{
    width: 200px;
    float: right;
    background: transparent;
    border: 1px solid #fff;
}
.btnContact:hover{
    color: #0e1d26;
}
.form-group{
    justify-content: center;
}

/*FOOTER*/
#footer{
    background: #0e1d26;
    color: white;
    font-weight: 200;
    padding: 15px 0;
    text-align: center;
}


/*RESPONSIVE*/
@media screen and (max-width: 768px){
    
/*    ABOUT*/
    .about{
        padding-top: 40px; 
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 25px;
    }
    .aboutMeImg{
        width: 80%;
    }
    #iconMe{
        padding: 40px 0;
    }
    
/*    CONTACT*/
    .contact{
        padding-top: 25px; 
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 100px;
    }
}