@media (min-width:992px) and (max-width: 1199px){
    .training-box{
        width: 90%;
    }
    .training-box .training-content{
        width: 100%;
    }
    .different-day-boxes-wrapper > a{
        width: 85%!important;
    }
    .different-day-boxes-wrapper > a .different-day-content{
        width: 100%!important;
    }
}


@media (min-width: 1080px){
    .bail-description .modal-dialog{
        max-width: 40%;
    }
}


@media (min-width:768px) and (max-width: 991px){
    .stats .stats-list{
        width: 70%;
    }
    .shelter .rect-pattern{
        top: 75%;
    }
    #loginRegisterModal .tab-content form{
        width: 75%;
    }
    .bail-description .modal-dialog{
        max-width: 60%;
    }
    .ideas-wrapper .idea-box .progress-without-caret{
        width: 70vw!important;
    }
    .jumbotron-content .jumbotron-desc h1{
        margin-top: 20%;
    }
    .jumbotron .navigation{
        right: -3%;
    }
    .training-box{
        width: 100%;
    }
    .training-box .training-content{
        width: 100%;
    }
    .different-day-boxes-wrapper > a{
        width: 100%!important;
    }
    .different-day-boxes-wrapper > a .different-day-content{
        width: 100%!important;
    }

}

@media (max-width: 1199px){
    .trainings-page .training-box{
        width: 100%;
    }
}

@media (max-width: 991px){
    .offcanvas ul.menu-items li a{
        padding: 10px 15px;
        display: flex;
        color: var(--color-text);
        justify-content: space-between;
        align-items: center;
        text-transform: capitalize;
        position: relative;
        transition: all 0.3s ease;
    }
    .offcanvas ul.menu-items li a span i{
        margin-right: 5px;
    }
    .offcanvas ul.menu-items li a > i{
        transition: all 0.3s ease;
    }
    .offcanvas ul.menu-items li a[aria-expanded=true]{
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }
    .offcanvas ul.menu-items li a[aria-expanded=true] > i {
        transform: rotate(-180deg);
    }
    .offcanvas ul.menu-items li a:hover,
    .offcanvas ul.menu-items li a:focus{
        color: var(--main-color);
    }
    .training-box .donate-link{
        bottom: auto;
        top: 0;
    }
    .shelter .rect-pattern img{
        width: 30vw;
    }
    .progress-caret > span:nth-child(3){
        top: -100%;
    //bottom: -130%;
    }
    .transparency-file .transparency-file-box{
        width: 90%;
    }
    .view-donations-tab-wrapper table,
    .myAccount #donations table{
        table-layout: auto;
    }
    .view-donations .view-donations-filter > div,
    .bails-page .bails-filter > div,
    .shelter-page .shelter-filter > div,
    .myAccount .view-donations-filter > div{
        width: 50%!important;
    }
    .result-val-bails-filter > div,
    .result-val-shelter-filter > div{
        width: 50%;
    }
    .loginRegister-wrapper .tab-content form,
    .myAccount .tab-content form.register-form{
        width: 75%;
    }
    .news-details .container,
    .news-details-comments .container{
        max-width: 95%;
    }
    .news-details-box{
        width: 95%;
    }
    .news-details-box > img{
        width: 75%;
    }
    .box-model-two > div.box-left{
        width: 50%;
    }
    .box-model-two > div.box-right{
        width: 50%;
    }
    .progress-without-caret{
        width: 100%!important;
    }
    .training-details #trainingDetailsCarousel .carousel-item img{
        width: 70%;
    }
    .progress-without-caret > span:nth-child(2) > span:nth-child(2),
    .progress-without-caret > span:nth-child(3) > span:nth-child(2){
        font-size: .85rem;
    }
    .ideas-wrapper{
        flex-direction: column;
    }
    .ideas-wrapper .idea-box{
        width: 70vw;
        margin: 0 auto 80px;
    }
    .idea-box-up .rect-pattern{
        width: 25%;
    }
}

@media (min-width: 576px) and (max-width: 899px){


}

@media (max-width: 865px){
    .ideas-wrapper{
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    .ideas-wrapper .idea-box{
        width: 85vw;
        margin-bottom: 10vw;
    }
    .idea-box-up .rect-pattern img{
        width: 23vw;
    }
    .progress-without-caret{
        width: 60vw;
    }
}

@media (max-width: 767px){
    .jumbotron{
        flex-direction: column;
    }
    .jumbotron > div {
        width: 100%;
    }
    .stats .stats-list{
        width: 90%;
    }
    .row > div:nth-child(2) .box-model{
        transform: translateY(0)!important;
    }
    .about-wrapper{
        flex-direction: column-reverse;
    }
    .about-img img{
        width: auto;
        height: 600px;
    }
    .shelter .rect-pattern{
        top: 90%;
    }
    .box-model-two{
        flex-direction: column;
    }
    .box-model-two > div{
        width: 100%!important;

    }
    .box-model-two > div:first-child{
        margin-bottom: 25px;
    }
    .box-model-two > div.box-right{
        padding: 0;
        height: auto;
    }
    .box-model-two > div.box-right > *{
        margin-bottom: 35px;
    }
    .box-model-two > div.box-right .box-right-under-top{
        margin-bottom: 85px;
    }
    .box-model-two .donate-link{
        margin: 20px auto 0;
    }
    .trainings-page .training-box{
        flex-direction: column;
        height: auto;
        margin-bottom: 40px;
    }
    .trainings-page .training-img img{
        width: 100%;
        transform: scaleY(1) translateX(0);
    }
    .trainings-page .progress-caret > span:nth-child(3){
        top: auto;
        bottom: 0;
    }
    .trainings-page .training-content{
        padding: 25px;
    }
    .training-box .donate-link{
        margin-top: 10px;
    }
    .bail-info .box-model-two .progress-without-caret{
        margin-bottom: 0;
        margin-top: 40px;
    }
    .training-box{
        flex-direction: column;
        width: 95%;
        margin: auto;
        margin-bottom: 50px;
    }
    .training-img img{
        width: 100%;
        transform: scaleY(1);
        transform-origin: bottom;
        border: 4px solid var(--main-color);
        border-radius: 30px;
        height: auto;
    }
    .training-content{
        padding: 20px;
        transform: translateX(0);
        border-radius: 0px 0px 30px 30px;
        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
        height: auto;
    }
    .different-day-box{
        flex-direction: column;
        width: 95%;
        margin: auto;
        margin-bottom: 50px;
    }
    .different-day-boxes-wrapper > a:nth-child(even){
        flex-direction: column;
    }
    .different-day-overlay{
        transform: scaleY(1);
    }
    .different-day img{
        width: 100%;
        transform: scaleY(1);
        transform-origin: bottom;
        border: 4px solid var(--main-color);
        border-radius: 30px;
        height: auto;
    }
    .different-day-content{
        padding: 20px;
        transform: translateX(0);
        border-radius: 0px 0px 30px 30px;
        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
        height: auto;
    }
    .different-day-img-content{
        padding: 10px;
    }
    .different-day-boxes-wrapper > a:nth-child(even) .different-day-content{
        padding: 25px;
        transform: translateX(0px);
        border-radius: 0px 0px 30px 30px;
    }
}

@media (min-width: 576px) and (max-width: 767px){
    .jumbotron .slider {
        height: 70vw;
        width: 70vw;
        margin: 60px auto 0px;
    }
    .search-model form{
        width: 70%;
    }
    .suggest-someone-to-join-training-box form{
        width: 70%;
    }
    #loginRegisterModal .tab-content form{
        width: 85%;
    }
    .bail-description .modal-dialog{
        max-width: 85%;
    }
    .ideas-wrapper .idea-box .progress-without-caret{
        width: 60vw!important;
    }
    .map-contact{
        flex-direction: column;
    }
    .map-contact #myMap{
        width: 100%;
        height: 300px;
    }
    .map-contact .contact-us-wrapper{
        width: 100%;
    }
}

@media (min-width: 640px) and (max-width: 767px){
    .projects .container{
        max-width: 90%;
    }
}

@media (max-width: 639px){
    .box-model-objectMedia{
        flex-direction: column;
    }
    .box-model-objectMedia > img{
        width: 100%;
        height: auto;
        transform: translateX(0)!important;
    }
    .projects .box-model-objectMedia > div{
        transform: translateX(0)!important;
    }
}

@media (max-width: 699px){
    .stats .stats-list .stats-item span.stats-title{
        flex-direction: column;
    }
    .news-details-box > div.news-details-box-action{
        flex-wrap: wrap;
    }
    .news-details-box > div.news-details-box-action > button{
        width: 100%;
    }
    .news-details-box > div.news-details-box-action > span{
        width: 50%;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .news-details-box > div.news-details-box-action > ul{
        width: 100%;
    }
    .trainings-page .nav-tabs{
        flex-direction: column;
        align-items: center;
        border-radius: 25px;
    }
    .trainings-page .nav-tabs > li{
        width: 100%;
    }
    .trainings-page .nav-tabs .nav-link{
        width: 100%;
    }
}

@media (max-width: 575px){
    .navbar{
        background: var(--second-color)!important;
        padding-top: 7px!important;
        padding-bottom: 7px!important;
    }
    .btnToggler-logo{
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .navbar-inferior-lg .btn-offcanvas{
        border-color: #fff;
        background: #fff;
        border-width: 1px;
    }
    .navbar-inferior-lg .btn-offcanvas i{
        color: var(--main-color);
    }

    /* end header */

    .section-title span{
        font-size: 1.6rem;
    }


    .training-box{
        flex-direction: column;
        width: 95%;
        margin: auto;
        margin-bottom: 50px;
    }
    .training-img img{
        width: 100%;
        transform: scaleY(1);
        transform-origin: bottom;
        border: 4px solid var(--main-color);
        border-radius: 30px;
        height: auto;
    }
    .training-content{
        padding: 20px;
        transform: translateX(0);
        border-radius: 0px 0px 30px 30px;
        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
        height: auto;
    }
    .ideas-wrapper .idea-box{
        margin-bottom: 20vw;
        position: relative;
    }
    .progress-without-caret{
        width: 100%;
    }
    .idea-box-up .map-beneficiaries{
        margin-bottom: 30px;
    }
    .ideas-wrapper .idea-box .donate-link{
        position: absolute;
        top: 0;
        right: 0;
    }
    .training h2.training-title{
        width: auto;
    }
    .different-day h2.different-day-title,
    .different-day p.different-day-under-title{
        width: auto;
        padding-left: 10%;
    }
    .stats .stats-list{
        flex-direction: column;
    }
    .stats .stats-list li{
        margin-bottom: 35px;
    }
    .stats .stats-list .stats-item span.stats-val{
        margin-bottom: 5px;
    }
    .about-img img{
        width: 90%;
        height: auto;
        margin: auto;
        display: block;
    }
    .about .logo-pattern img{
        width: 90%;
    }
    .different-day-box{
        flex-direction: column;
        width: 95%;
        margin: auto;
        margin-bottom: 50px;
    }
    .different-day-boxes-wrapper > a:nth-child(even){
        flex-direction: column;
    }
    .different-day-overlay{
        transform: scaleY(1);
    }
    .different-day img{
        width: 100%;
        transform: scaleY(1);
        transform-origin: bottom;
        border: 4px solid var(--main-color);
        border-radius: 30px;
        height: auto;
    }
    .different-day-content{
        padding: 20px;
        transform: translateX(0);
        border-radius: 0px 0px 30px 30px;
        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
        height: auto;
    }
    .different-day-img-content{
        padding: 10px;
    }
    .different-day-boxes-wrapper > a:nth-child(even) .different-day-content{
        padding: 25px;
        transform: translateX(0px);
        border-radius: 0px 0px 30px 30px;
    }
    .different-day .rect-double-pattern,
    .jumbotron-content .rect-pattern{
        display: none;
    }
    .map-contact-with-title .map-contact-wrapper{
        flex-direction: column;
    }
    .map-contact-with-title .map-contact-wrapper .contact-us-wrapper{
        position: static;
        width: 100%;
        height: auto;
    }
    .usage-policy .logo-pattern{
        top: 50%;
    }
    .usage-policy .logo-pattern img,
    .whoAreWe-enterpriseIdea .logo-pattern img{
        height: max-content;
        width: 100%;
    }
    section .logo-pattern img{
        width: 100%;
        height: max-content;
        opacity: .4;
    }
    .contact .contact-wrapper{
        flex-direction: column;
    }
    .contact .contact-wrapper .contact-img{
        width: 100%;
    }
    .contact .contact-wrapper .contact-img img{
        width: 100%;
        height: auto;
    }
    .contact .contact-us-wrapper{
        width: 100%;
    }
    .search-model form{
        width: 90%;
    }
    .view-donations .view-donations-filter,
    .bails-page .bails-filter,
    .shelter-page .shelter-filter,
    .myAccount .view-donations-filter{
        flex-direction: column;
        align-items: center;
    }
    .view-donations .view-donations-filter > div,
    .bails-page .bails-filter > div,
    .shelter-page .shelter-filter > div,
    .myAccount .view-donations-filter > div{
        width: 90%!important;
        margin: 15px auto !important;
    }
    .result-val-bails-filter,
    .result-val-shelter-filter{
        flex-direction: column;
        align-items: center;
    }
    .result-val-bails-filter > div,
    .result-val-shelter-filter > div{
        width: 100%;
        margin-bottom: 25px;
    }
    .loginRegister-wrapper .tab-content form,
    .myAccount .tab-content form.register-form{
        width: 90%;
    }
    .loginRegister .rect-circle2-pattern img{
        height: 230px;
    }
    .box-model-objectMedia{
        flex-direction: column;
    }
    .box-model-objectMedia > img{
        width: 100%;
        height: auto;
    }
    .objectives .nav-tabs{
        flex-direction: column;
        align-items: center;
        border-radius: 25px;
    }
    .objectives .nav-tabs > li{
        width: 100%;
    }
    .objectives .nav-tabs .nav-link{
        width: 100%;
    }
    .training-details #trainingDetailsCarousel .carousel-item img{
        width: 90%;
    }
    .training-details #trainingDetailsCarousel ol.carousel-indicators li a img{
        width: 50px;
        height: 50px;
    }
    .training-details .progress-caret{
        width: 60%;
        margin: 80px 10px 15px;
    }
    .training-conditions .training-conditions-list-wrapper{
        flex-direction: column;
        padding: 20px 10px 20px 35px;
    }
    .training-conditions .training-conditions-list-wrapper ol{
        padding: 0;
    }
    .training-conditions .training-conditions-list-wrapper ol:first-child{
        border-right: 0;
        border-bottom: 1px solid #fff;
        padding-bottom: 25px;
    }
    .training-conditions .training-conditions-list-wrapper ol:last-child{
        padding-top: 25px;
    }
    .suggest-someone-to-join-training-box form{
        width: 90%;
    }
    #loginRegisterModal .tab-content form{
        width: 100%;
    }
    #donationOptions .btn-option .donationOption-box{
        flex-direction: column;
    }
    #donationOptions .btn-option .donationOption-box img{
        margin-bottom: 20px;
    }
    #donationOptions .btn-option .donationOption-box .donationOption-box-content > h4,
    #donationOptions .btn-option .donationOption-box .donationOption-box-content > span{
        text-align: center!important;
    }
    #epaymentDonation .formDollarCurrency,
    #epaymentDonation .formIraqiDinarCurrency{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
	            "a b"
	            "c d"
	            "e ."
	            "f f";
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        justify-items: stretch;
        align-items: stretch;
        padding-bottom: 30px;
    }
    .progress-caret > span:nth-child(3) > span:nth-child(2){
        font-size: .8rem;
    }
    .bail-description{
        padding-bottom: 100px;
    }
    .bail-description .rect-circle2-pattern img{
        height: 200px;
    }
    .jumbotron .slider {
        height: 95vw;
        width: 95vw;
        margin: 60px auto 0px;
    }
    .jumbotron .slide-video .btn-player > span.fa-stack{
        font-size: 1.8em;
    }
    .jumbotron .navigation{
        right: -2%;
    }

}