@font-face {
    font-family: 'myArdavanMofidi';
    src: url('../fonts/ArdavanMofidi.eot');
    src: url('../fonts/ArdavanMofidi.eot?#iefix') format('embedded-opentype'),
    url('../fonts/ArdavanMofidi.woff2') format('woff2'),
    url('../fonts/ArdavanMofidi.woff') format('woff'),
    url('../fonts/ArdavanMofidi.ttf') format('truetype'),
    url('../fonts/ArdavanMofidi.svg#ArdavanMofidi') format('svg');
    font-weight: normal;
    font-style: normal;
}

.clr-txt-gray{
    color: #bcbcbc;
}

.clr-txt-red{
    color: #ba2f2f;
}

.section-wrapper{
    position: relative;
}

.section-container{
    overflow: hidden;
    width: 100%;
}

#particles-js{
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.5;
}

#section-portfolio .boxes.box1{
    top: 100px;
    left: 0;
    width: 606px;
}

#section-portfolio .boxes.box2{
    top: 100px;
    right: 0;
    width: 257px;
}

#section-portfolio .boxes.box3{
    top: 583px;
    right: 0;
    width: 606px;
}

#section-portfolio .boxes.box4{
    top: 583px;
    left: 0;
    width: 260px;
}

#section-portfolio .boxes.box5{
    top: 949px;
    right: 0;
    width: 606px;
}

#section-portfolio .boxes.box6{
    top: 1278px;
    width: 100%;
    left: 0;
}

#section-portfolio .boxes.box7{
    top: 1706px;
    left: 0;
    width: 894px;
}

#section-portfolio .boxes.box8{
    top: 1074px;
    left: 0;
    width: 258px;
}