@charset "utf-8";
/* CSS Document */

/*
.resource_content {width: 100%; margin: 0; float:left; clear: both; border: 1px solid #E6E6E6; padding: 45px}
.formtitle {width:100%; text-align: left; font-weight: 600; font-size: 24px; color: #2A2A2A; margin: 0 0 20px 0}
*/
.formcontainer {width: calc(100% + 22px); margin: 0 0 0 -11px; float:left; clear: both;}
a.form_box {width: calc(25% - 22px);margin: 0 11px 44px;border: 1px solid #E6E6E6;float: left;padding: 30px;position: relative;z-index: 0;}
a.form_box p{font-size: 18px; font-weight: 600; color: #606060; display: block;
    display: -webkit-box;
    height: 50px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;margin-bottom: 50px;}

.formcontainer span {position: inherit;;width: 100%;left: 0;color: #fff;font-weight: 600;display: inline-table;font-size: 14px;padding: 10px 10px 6px;text-align: left;transition:all 150ms ease;background: #ffffff;color: #606060;}
.formcontainer span img{/*filter: grayscale(1) brightness(0)invert(1);*/float: right;filter: grayscale(1) brightness(100%)invert(0);}

/*.formcontainer a.form_box:hover  span{background: #243149;}*/
.formcontainer a.form_box:hover{background: #008775}
.formcontainer a.form_box:hover  span img{filter: none;}
.formcontainer a.form_box:hover p{color:#ffffff; }
.formcontainer a.form_box:hover span{color: #008775}

.formcontainer-last a.form_box{margin-bottom: 0;}

/*responsive styles*/
@media screen and (max-width:1600px) {

.resource_container.cataloguepg .resource_content img{max-width: 1000px; width: 100%}

}
@media screen and (max-width:1400px) {
    
    .resource_container {width: calc(100% - 275px);}
    .resource_content {padding: 20px;}
    a.form_box {width: calc(33.33% - 22px); margin: 0 11px 20px;}

}

@media screen and (max-width:1200px) {
    
    a.form_box {margin: 0 5px 20px; padding: 15px}
    .formcontainer {width: calc(100% + 10px); margin: 0 0 0 -5px;}
    
}

@media screen and (max-width:1024px) {
    
a.form_box {width: calc(50% - 22px); margin: 0 11px 20px;}    
}

@media screen and (max-width:860px) {
    
    .scrollcontainer .resourcelist {width: 220px;}
    .resource_container {width: calc(100% - 230px);}
    .scrollcontainer .resourcelist a {padding:15px 25px 15px 30px;}
    .scrollcontainer .resourcelist a:before {left: 15px;top: 17px;}
    
}