/*
	Theme Name: Dev Profile 
	Description: This is a developer profile application.
	Author: mahbub
	Author URI: https://www.mahbubrn.com
	Version: 1.0
	Tag: developer, software programmer, software enginer, application developer, app developer, mobile app developer, system administration
*/

/* ========= CALLING FONTS */
@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap'); /* heading font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); /* body font */

/* ========= CALLING CSS */
@import url(assets/css/font-awesome.min.css); 

/* ========= RESET */
*{margin: 0; padding: 0;}

/* ========= DEFAULT CODE */
body{
    background: #F0F2F2;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
}
ul{
    list-style: none;
    overflow: hidden;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Patua One', cursive;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
}
a, a:link, a:visited, a:link:active, a:visited:active{
    text-decoration: none;
    transition: .5s;
    color: #000;
}
a:hover{color: #53B7F9;}

.clr{overflow: hidden;}
.left{
    float: left;
    margin-right: 15px;
    overflow: hidden;
}
.right{
    float: right;
    margin-left: 15px;
    overflow: hidden;
}
.nm{margin: 0;}

#scrollUp {
    background-image: url("assets/img/scrollTop.png");
    bottom: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
}

/* ========= LAYOUT */
.wrapper{
    width: 905px;
    margin: 15px auto;
    margin-bottom: 50px;
}

/* ========= SECTION */
header{
    padding: 35px 0 25px;
    overflow: hidden;
}
header h1{
    font-size: 28px;
}
header ul li{float: right;}
header ul li:nth-child(odd){
    background: #FAFAFA;
}
header ul li:nth-child(even){
    background: #fff;
}

header ul{overflow: hidden;}
header ul li a{
    padding: 5px 10px;
    display: block;
    font-size: 16px;
    border-top: 2px solid #000;
}
header ul li a:hover{
    border-top: 2px solid #53B7F9;
    color: #53B7F9;
}

section{
    padding: 25px 34px;
    background: #fff;
    position: relative;
    margin-bottom: 3px;
}
.border{
    position: absolute;
    width: 45px;
    top: 0;
    height: 100%;
    left: -46px;
    z-index: -1;
    overflow: hidden;
}
.border span{
    background: #DCE3E7;
    width: 45px;
    height: 100%;
    display: block;
    margin-top: 66px;
}

.accordion-toggle{
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 25px;
    margin-left: -80px;
    display: inline-block;
}
.icon{
    background: #53B7F9;
    color: #fff;
    float: left;
    margin-right: 4px;
    font-size: 18px;
    width: 45px;
    text-align: center;
    padding: 8px 0;
}
.accordion-toggle h3{
    padding: 10px 20px;
    background: #e7f2f9;
    display: inline-block;
}
.accordion-toggle span:after{
    content: '';
    font-family: 'FontAwesome';
    color: #999;
    margin-left: 10px;
    border: 2px solid #DEE0E0;
    padding: 2px 4px;
}
.activemenu span:after{
    transform: rotate(90deg);
    content: '';
}
.accordion-content {
    display: none;
    overflow: hidden;
}

.open{display: block;}

/* ========= HOMEPAGE */
.proImg{
    width: 20%;
}
.proImg img{
    max-width: 100%;
}
.proContent{
    width: 45%;
}
.proContent h2{
    font: 400 19px/24px "Open Sans";
    margin-bottom: 15px;
}
.proText{}
.proText ul li{
    display: block;
    margin-bottom: 7px;
}
.proText ul li span{
    text-transform: uppercase;
    background: #53B7F9;
    color: #fff;
    padding: 5px;
    display: inline-block;
    font-size: 12px;
    margin-right: 10px;
    border-left: 2px solid #5CA8DB;
}

/* --- */
.section{margin-bottom: 50px;}
.pe, .message, .posts, .single, .portfolio{
    width: 66%;
}
.title{
    background: #434B51;
    color: #fff;
    padding: 5px 10px 5px 15px;
    margin-bottom: 15px;
    text-transform: uppercase;
    overflow: hidden;
}
.title i{
    font-size: 14px;
    margin-top: 3px;
}

.peitem{
    overflow: hidden;
    margin-bottom: 15px;
    text-align: justify;
    border-left: 2px solid #53B7F9;
    padding-left: 15px;
}
.peitem-border{
    border-top: 1px solid #e3e3e3;
    margin: 20px 0;
}
.peitem span{
    color: #999;
    margin-bottom: 15px;
    display: block;
}
span.workTime{
    float: right;
    margin-top: -58px;
    text-transform: capitalize;
    border-bottom: 2px solid #e3e3e3;
    padding-bottom: 2px;
    display: inline-block;
}

.peitem h4{font: 500 14px/24px "Open Sans";}

a.btn{
    color: #fff;
    background: #434b51;
    padding: 0px 10px 0px 13px;
    text-transform: uppercase;
    font: 700 11px/32px 'Open Sans', sans-serif;
    display: inline-block;
    margin-right: 3px;
    transition: .40s;
}

a.btn:hover{
    background: #53B7F9;
}

/* --- */
.skl, .sidebar{width: 30%;}
.sklbox{margin-bottom: 35px;}
.sklbox .title{
    padding-left: 10px;
    padding-right: 7px;
}
.sklbox ul li{
    border-left: 2px solid #DCE3E7;
    padding-left: 10px;
    margin-bottom: 12px;
}
.sklbox ul li a:hover{
    color: #53B7F9;
}

span.sklline{
    border: 4px solid #DCE3E7;
    display: block;
    margin-top: 7px;
}
span.sklpercent-line{
    display: block;
    border: 4px solid #53B7F9;
    margin-top: -8px;
}

/* --- */
iframe{
    width: 100%;
    height: 360px;
    border: none;
}
.map{
    margin-bottom: 35px;
}
.message{
    margin-bottom: 50px;
}
.message ul li{
    margin: 15px 0;
    float: left;
    width: 50%;
}
.message span{
    display: block;
    text-transform: capitalize;
    margin-bottom: 7px;
}
.message input, .message textarea{
    border: 2px solid #DCE3E7;
    height: 28px;
    padding: 2px;
    padding-left: 7px;
    width: 85%;
}
.message textarea{
    height: 100px;
    width: 92%;
    padding: 5px;
    resize: vertical;
}
.message button{
    font-family: 'Patua One', cursive;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    border: 1px solid #434B51;
    background: #434B51;
    color: #fff;
    border-radius: 3px;
    padding: 8px 15px;
    margin-top: 15px;
    cursor: pointer;
}
.message button:hover{
    background: #2e3438;
    border: 1px solid #2e3438;
}

.sentStatus{
    margin-right: 30px;
    color: #999;
}

.ci ul{margin-top: 18px;}
.ci ul li{
    color: #828282;
    margin-bottom: 10px;
}
.ci ul li span{
    width: 24px;
    height: 24px;
    border: 2px solid #DCE3E7;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    margin-right: 5px;
}
.ci ul li i{
    margin-top: 5px;
}

/* ========= BLOGPAGE */
.postdate{
    text-transform: uppercase;
    text-align: center;
    border: 2px solid #DCE3E7;
    border-bottom: 0;
    margin: 45px 30px 0 0;
    width: 9%;
}
.postdate ul li{
    border-bottom: 2px solid #DCE3E7;
    padding: 7px 2px;
}
.postdate ul li h4{
    font-size: 20px;
}
.postdate ul li h5{
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 600;
}

/* --- */
.post{
    width: 81%;
    margin: 0;
    border-bottom: 2px solid #f0f0f0;
}
.post a:hover{color: #53B7F9;}
.post p{text-align: justify;}
ul.cat{
    display: block;
    color: #999;
    text-transform: capitalize;
    margin: 7px 0 15px;
}
ul.cat li{display: inline-block;}
ul.cat li a{color: #999;}

a.rm{
    background: #434B51;
    color: #fff !important;
    display: inline-block;
    padding: 8px 12px;
    margin: 20px 0;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    border-radius: 2px;
}
a.rm:hover{background: #53B7F9;}


/* --- */
.sidebar{margin-left: 15px;}
.sbitem{margin-bottom: 35px;}
.sbitem h3{
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 10px;
}
.sbitem ul li{
    border-bottom: 1px solid #e3e3e3;
}
.sbitem ul li a{
    display: inline-block;
    padding: 8px 5px;
    padding-left: 0;
    font-weight: 600;
    font-size: 12px;
}

/* --- */
.pagination{
    margin-bottom: 70px;
}
.pagination ul li{
    display: inline-block;
    padding: 2px 6px;
}
.pagination ul li.active{
    border: 2px solid #434B51;
    border-radius: 2px;
}

/* --- */
.single{
    text-align: justify;
}
.single p{
    
}
.single img{
    display: block;
    width: 100%;
    height: auto;
    margin: 15px 0;
}
.single h1, 
.single h2, 
.single h3, 
.single h4, 
.single h5, 
.single h6{
    margin: 15px 0;
}

.sharearea{
    border-bottom: 2px solid #e3e3e3;
    padding-bottom: 30px;
}
.share{text-align: right;}
.share h5{
    display: inline-block;
    font-size: 13px;
}
.share ul{
    display: inline-flex;
    margin-left: 10px;
}
.share ul li{display: inline-block;}
.share ul li a{
    border: 2px solid #ddd;
    display: inline-block;
    padding: 2px 6px;
    color: #999;
    margin: 0 1px;
    border-radius: 2px;
    font-size: 14px;
}
.share ul li a:hover{
    color: #53B7F9;
    border: 2px solid #53B7F9;
}

/* --- */
.comment{width: 100%;}

/* ========= SINGLE BLOG PAGE */

/* ========= PORTFOLIO PAGE */
.portitem{
    width: 46%;
    font-size: 13px;
    overflow: hidden;
    color: #434B51;
    margin-bottom: 30px;
    height: 220px;
}
.portitem h2{
    margin-top: 10px;
}
.portitem img{
    width: 100%;
    height: auto;
}
.portitem p{margin-bottom: 7px;}
.portitem a.btn{
    padding: 5px;
    display: inline;
}


/* ========= RESPONSIVE */
@media only screen and (min-width: 280px) and (max-width: 480px) {
    .wrapper{
        width: 80%;
        margin-right: 10px;
    }
    section{padding: 25px 15px;}
    
    /* ---- header */
    header .left, header .right{
        float: none;
        text-align: center;
        margin: 0;
    }
    header .right ul{
        width: 137px;
        margin: 0 auto;
        margin-top: 25px;
    }
    
    /* ---- main page */
    .accordion-toggle{margin-left: -61px;}
    .border span{margin-top: 68px;}
    
    .proImg, .proContent, .proText, .message, .single, .portfolio, .portitem{
        width: 100%;
        margin-bottom: 25px;
    }
    .proImg{text-align: center;}
    .proImg img{width: 60%;}
    .proContent{text-align: justify;}
    .proContent h2{text-align: center;}
    .pe, .skl{
        width: 100%;
        float: none;
        margin: 0;
    }
    .peitem .clr{text-align: left;}
    span.workTime{
        float: none;
        margin: 0;
        margin-bottom: 15px;
    }
    
    /* ---- blog page */
    .postdate{
        width: auto;
        float: none;
        margin: 0;
        margin-bottom: 15px;
        border: none;
    }
    .postdate ul li{
        text-align: left;
        border: none;
    }
    .posts, .post{
        width: 100%;
        float: none;
    }
    .section{margin-bottom: 25px;}
    .sidebar{
        margin-left: 0;
        width: 100%;
    }
    
}