/*
** - Navigation bar -
*/
.my-navbar{
    /* background: #292a46; */
    background-image: linear-gradient(-122deg, rgba(245, 33, 33, 0) 82%, rgba(255, 255, 255, 0.08) 15%), linear-gradient(-108deg, rgba(27, 0, 255, 0) 80%, rgba(255, 255, 255, 0.08) 15%), linear-gradient(-101deg, rgba(255, 33, 33, 0) 79%, rgba(255, 255, 255, 0.08) 15%), radial-gradient(circle at center center, rgb(2, 32, 60) 0%, rgb(2, 32, 60) 100%);
    
}

.navbar-nav a{
    color: #fff;
    font: 600 .95em 'Open Sans';
}

.navbar-nav a:hover {
    color: #f3314b;
}

.me-info{
    color: #fff;
    text-align: right; 
    
}

.navbar-brand h1{
    font: 500 2.2em Montaga;
}

.navbar-brand h3{
    font: .75em 'Open Sans';
} 


/* 
**  - Header section - 
*/
header{
    padding-top: calc(6rem + 106px);
    padding-bottom: 8.7rem;
    width: 100%;
    /* background: #383a53; */
    background:linear-gradient(-90deg,rgba(245,249,252,0) .5%,hsla(0,0%,100%,.08) 0),radial-gradient(circle,#02203c 0,#02203c 100%);
}

ion-icon {
    font-size: 115px;
}

header.masthead h1{
    font: 4em Montaga;
}

hr{
    border-top: solid 1px  #f3314b;
	width: 30%;
	margin-top: 15px;
}

header.masthead h2{
    font: 1.75em 'Open Sans';
}


/* 
**  - Portfolio Section - 
*/
.my-portfolio{
    padding: 100px 0 100px 0;
}

.my-portfolio h2{
    color: #292a46 !important;
    font: 500 2em Montaga;
}

.my-portfolio hr{
    width: 12%
}

.wrk-description img{
    padding:1px;
    border-radius: 20px/10px ;
    border:1px solid #d1d2e0;
}

.wrk-description h3{
    font-family: Montaga;
    color:#292a46;
    text-align: center;
    margin: 10px 0 0 0px;
}

.wrk-description p{
    font-family: 'Open Sans';
    color:#383a53;
    text-align: center;
}


/* 
**  - Footer Section - 
*/
.footer{
    /* background: #383a53; */
    background:linear-gradient(-90deg,rgba(245,249,252,0) 99%,hsla(0,0%,100%,.08) 0),radial-gradient(circle,#02203c 0,#02203c 100%);
    color:#fff;
}

.ftr-titles{
    font: 1.3em Montaga;
    margin-top: 2.5em !important;
}

.btn-social {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.30rem;
    line-height: 2.3rem;
}

.lead {
    font: 1.05em 'Open Sans';
}

.lead a{
    font-weight: 600;
    color: rgb(233, 221, 221);
}

.lead a:hover{
    color: #f3314b;    
}


/* 
**  - Responsive Styleing - 
*/
@media screen and (max-width: 991px){
    /** - Navigation bar - **/
    .navbar-brand h1 {
        font: 500 2em Montaga;
        margin: 25px 0 3px 0px;
    }

    .navbar-brand h3 {    
        font: .80em 'Open Sans';
    }

    /** - Header section - **/
    ion-icon{
        font-size: 5.9em;
    }

    ion-icon[name=laptop]{
        margin-left: 4px;
    }

    header.masthead h1 {
        font-size: 3.5em;
    }

    header.masthead h2 {
        font-size: 1.8em;
        margin-bottom: 35px !important;
    }

    /** - Portfolio Section - **/
    .my-portfolio h2{
        font-size: 1.85em;
    }

    .wrk-description {
        padding: 12px;
    }

    .portfolio-item {
        margin: 12px 0 75px 0;
    }

    .wrk-description h3{
        font: 100 1.8em Montaga;
        margin: 12px 0 0 0px;
    }

    .wrk-description p {
        font-size: 1.1em;
        margin: 3px 0 0 0;
    }

    /** - Footer Section - **/
    .ftr-titles {
        font: 1.2em Montaga;
    }

    .lead {
        font-size: .95em;
    }
}

@media screen and (max-width: 767px){
    /** - Navigation bar - **/
    .navbar-brand h1 {
        font: 500 1.6em Montaga;
    }

    .navbar-brand h3 {    
        font: .60em 'Open Sans';
    }

    /** - Header section - **/
    ion-icon{
        font-size: 5.2em;
    }

    ion-icon[name=laptop]{
        margin-left: 3px;
    }

    header.masthead h1 {
        font-size: 2.7em;
    }

    header.masthead h2 {
        font-size: 1.3em;
    }

    /** - Portfolio Section - **/
    .wrk-description {
        padding: 8px;
    }

    .portfolio-item {
        margin: 10px 0 70px 0;
    }

    .wrk-description h3{
        font: 100 1.75em Montaga;
    }

    .wrk-description p {
        font-size: 1em;
    }

    /** - Footer Section - **/
    .ftr-titles {
        font: 1.6em Montaga;
    }
    .frst-title{
        margin-top: 3.5em !important;
    }

    .lead {
        font-size: 1em;
    }
}


@media screen and (max-width: 500px){
    /** - Navigation bar - **/
    .navbar-toggler {
        margin: 7px 65px 0 7px;
    }
    .navbar-brand h1 {
        font: 500 1.4em Montaga;
        margin: 6px 0 4px 6px;
    }

    .navbar-brand h3 {    
        font: .57em 'Open Sans';
    }

    /** - Header section - **/
    .my-icons{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 0 30px;
    }

    ion-icon[name=tablet-landscape]{
        order: 0;
        font-size: 7.1em;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    ion-icon[name=phone-portrait]{
        order: 1;
        font-size: 3.1em;
        padding: 0 .07em 0 0;
    }

    ion-icon[name=laptop]{
        order: 2;
        font-size: 3.05em;
        padding: 0 0 0 .10em;
    }

    header.masthead h1 {
        font-size: 2.2em;
    }

    header.masthead h2 {
        font-size: 1.1em;
    }

    /** - Portfolio Section - **/
    .wrk-description {
        padding: 5px;
    }

    .wrk-description h3{
        font: 100 1.6em Montaga;
    }

    .wrk-description p {
        font-size: .95em;
    }


    /** - Footer Section - **/
    .ftr-titles {
        font: 1.3em Montaga;
    }

    .frst-title{
        margin-top: 3.5em !important;
    }

    .lead {
        font-size: .95em;
    }
}


/*  1 breakpoint around 500 px.  
    2 breakpoint around 767px. 
    3 breakpoint around 991px. 
*/