/************************************* Fonts ********************************************/

@font-face {
	font-family: "Open Sans Regular";
	src: url(../fonts/OpenSans-Regular.ttf);
}

@font-face {
	font-family: "Open Sans Bold";
	src: url(../fonts/OpenSans-Bold.ttf);
}

@font-face {
	font-family: "Open Sans Semibold";
	src: url(../fonts/OpenSans-Semibold.ttf);
}

@font-face {
	font-family: "Open Sans Light";
	src: url(../fonts/OpenSans-Light.ttf);
}

@font-face {
	font-family: "Open Sans Light Italic";
	src: url(../fonts/OpenSans-LightItalic.ttf);
}

@font-face {
	font-family: "Open Sans Bold Italic";
	src: url(../fonts/OpenSans-BoldItalic.ttf);
}

@font-face {
	font-family: "Open Sans Extrabold";
	src: url(../fonts/OpenSans-ExtraBold.ttf);
}

@font-face {
	font-family: "OpenSans CondensedBold";
	src: url(../fonts/OpenSans-CondBold.ttf);
}

@font-face {
	font-family: "Open Sans Condensed Light";
	src: url(../fonts/OpenSans-CondLight.ttf);
}

/************************************* Header ********************************************/

#topnav {
	padding: 15px 0;
	position: relative;
}

h1 img {
	width: 100%;
}

.header-text {
	font-family: OpenSans CondensedBold, Verdana, Arial;
	font-size: 17px;
	color: #000;
	display: block;
	margin: 7.7% 0;
}

/************************************* Home ********************************************/

#topnav .navigation-menu {
	max-width: 675px;
	margin: 0 auto;
}

#topnav .navigation-menu li a {
	font-family: Open Sans Light, Verdana, Arial;
	text-transform: uppercase;
}

.wrapper {
	padding-top: 0;
}

.home-wrapper {
	margin: 0;
}

.text-block {
	text-align: left;
	margin-top: 15px;
	color: #000;
}

.special {
	font-family: Open Sans Semibold, Verdana, Arial;
	font-size: 20px;
}

.images-panel {
	margin-top: 30px;
}

.images-panel .about a, .images-panel .who-we-are a, .images-panel .work-packages a, .images-panel .news a, .images-panel .costs a, .images-panel .users a {
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
	display: block;
	height: 200px;
	padding: 120px 20px 0 0;
}

    .images-panel .direct-cost a, .images-panel .social-cost a, .images-panel .cost-database a, .images-panel .about2 a, .images-panel .who-we-are2 a,
    .images-panel .user-guide2 a, .images-panel .publications2 a {
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
        display: block;
        height: 200px;
        padding: 120px 20px 0 0;
    }

    /*
    .images-panel .direct-cost a, .images-panel .social-cost a, .images-panel .cost-database a, .images-panel .about2 a, .images-panel .who-we-are2 a,
    .images-panel .user-guide2 a {
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
        display: block;
        height: 200px;
        padding: 120px 20px 0 0;
    }

   .images-panel .publications2 a {
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
        display: block;
        height: 200px;
        padding: 90px 20px 0 0;
    }
        */

    .images-panel .publications3 a {
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
        display: block;
        height: 200px;
        padding: 90px 20px 0 0;
    }

.images-panel .about:hover, .images-panel .who-we-are:hover, .images-panel .work-packages:hover, .images-panel .news:hover, .images-panel .costs:hover, .images-panel .users:hover,
.images-panel .about:focus, .images-panel .who-we-are:focus, .images-panel .work-packages:focus, .images-panel .news:focus, .images-panel .costs:focus, .images-panel .users:focus {
	background-position: 0 200px;
}

    .images-panel .direct-cost:hover, .images-panel .social-cost:hover, .images-panel .about2:hover, .images-panel .who-we-are2:hover, .images-panel .user-guide2:hover, .images-panel .publications2:hover, .images-panel .publications3:hover,
    .images-panel .direct-cost:focus, .images-panel .social-cost:focus, .images-panel .about2:focus, .images-panel .who-we-are2:focus, .images-panel .user-guide2:focus, .images-panel .publications2:focus, .images-panel .publications3:focus {
        background-position: 0 200px;
    }

.images-panel .cost-database:hover,
.images-panel .cost-database:focus {
    background-color: #1F4C56;
}



.images-panel .about a h2, .images-panel .who-we-are a h2, .images-panel .work-packages a h2, .images-panel .news a h2, .images-panel .costs a h2, .images-panel .users a h2 {
    font-family: Open Sans Extrabold, Verdana, Arial;
    font-size: 60px;
    color: #fff;
    text-align: right;
}

    .images-panel .direct-cost a h2, .images-panel .social-cost a h2, .images-panel .about2 a h2, .images-panel .who-we-are2 a h2, .images-panel .user-guide2 a h2, .images-panel .publications2 a h2 {
        font-family: Open Sans Extrabold, Verdana, Arial;
        font-size: 50px;
        color: #fff;
        text-align: right;
    }

    /*
    .images-panel .direct-cost a h2, .images-panel .social-cost a h2, .images-panel .about2 a h2, .images-panel .who-we-are2 a h2, .images-panel .user-guide2 a h2 {
        font-family: Open Sans Extrabold, Verdana, Arial;
        font-size: 50px;
        color: #fff;
        text-align: right;
    }

    .images-panel .publications2 a h2 {
        font-family: Open Sans Extrabold, Verdana, Arial;
        font-size: 45px;
        color: #fff;
        text-align: right;
    }
        */

    .images-panel .publications3 a h2 {
        font-family: Open Sans Extrabold, Verdana, Arial;
        font-size: 45px;
        color: #fff;
        text-align: right;
    }

    .images-panel .cost-database a h2{
        font-family: Open Sans Extrabold, Verdana, Arial;
        font-size: 30px;
        color: #fff;
        text-align: right;
    }

.images-panel .about {
	background-image: url(../images/about.jpg);
}

.images-panel .who-we-are {
	background-image: url(../images/who-we-are.jpg);
}

.images-panel .work-packages {
	background-image: url(../images/work-packages.jpg);
}

.images-panel .news {
    background-image: url(../images/news.jpg);
}

.images-panel .costs {
    background-image: url(../images/costs.jpg);
}

.images-panel .users {
    background-image: url(../images/users.jpg);
}

.images-panel .direct-cost {
    background-image: url(../images/img-direct-cost400.png);
}

.images-panel .social-cost {
    background-image: url(../images/img_social-cost400.png);
}

.images-panel .cost-database {
    background-color: #517E88;
}

.images-panel .about2 {
    background-image: url(../images/img-about-us400.png);
}
    .images-panel .who-we-are2 {
        background-image: url(../images/img_who-we-are400.png);
    }
    .images-panel .user-guide2 {
        background-image: url(../images/img_user-guide400.png);
    }
    .images-panel .publications2 {
        background-image: url(../images/img_publications400.png);
    }
    .images-panel .publications3 {
        background-image: url(../images/img_publications400.png);
    }

.research-areas-container {
    padding-bottom: 50px;
}

.research-areas {
	font-family: Open Sans Light, Verdana, Arial;
	font-size: 27px;
	color: #000;
	text-transform: uppercase;
	margin-top: 55px;
	padding-bottom: 12px;
	border-bottom: 1px solid #000;
}



.box-01 a, .box-02 a, .box-03 a, .box-04 a, .box-05 a, .box-06 a, .box-07 a, .box-08 a, .box-09 a, .box-10 a, .box-11 a, .box-12 a, .box-13 a, .box-14 a, .box-neutral span {
    font-family: Open Sans Regular, Verdana, Arial;
    font-size: 20px;
    color: #000;
    line-height: 20px;
    border-width: 2px;
    border-style: solid;
    padding: 15px;
    margin-top: 15px;
    min-height: 153px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-neutral span {
	border: 0;
}

.box-01 a:hover, .box-02 a:hover, .box-03 a:hover, .box-04 a:hover, .box-05 a:hover, .box-06 a:hover, .box-07 a:hover, .box-08 a:hover, .box-09 a:hover, .box-10 a:hover, .box-11 a:hover, .box-12 a:hover, .box-13 a:hover, .box-14 a:hover,
.box-01 a:focus, .box-02 a:focus, .box-03 a:focus, .box-04 a:focus, .box-05 a:focus, .box-06 a:focus, .box-07 a:focus, .box-08 a:focus, .box-09 a:focus, .box-10 a:focus, .box-11 a:focus, .box-12 a:focus, .box-13 a:focus, .box-14 a:focus {
    color: #fff;
}

.box-01 a {
	color: #2177b1;
	border-color: #2177b1;
}

.box-01 a:hover, .box-01 a:focus {
	background-color: #2177b1;
}

.box-02 a {
	color: #fe802a;
	border-color: #fe802a;
}

.box-02 a:hover, .box-02 a:focus {
	background-color: #fe802a;
}

.box-03 a {
	color: #30a039;
	border-color: #30a039;
}

.box-03 a:hover, .box-03 a:focus {
	background-color: #30a039;
}

.box-04 a {
	color: #d52a2d;
	border-color: #d52a2d;
}

.box-04 a:hover, .box-04 a:focus {
	background-color: #d52a2d;
}

.box-05 a {
	color: #9367ba;
	border-color: #9367ba;
}

.box-05 a:hover, .box-05 a:focus {
	background-color: #9367ba;
}

.box-06 a {
	color: #8c564c;
	border-color: #8c564c;
}

.box-06 a:hover, .box-06 a:focus {
	background-color: #8c564c;
}

.box-07 a {
	color: #e278c0;
	border-color: #e278c0;
}

.box-07 a:hover, .box-07 a:focus {
	background-color: #e278c0;
}

.box-08 a {
	color: #7f7f7f;
	border-color: #7f7f7f;
}

.box-08 a:hover, .box-08 a:focus {
	background-color: #7f7f7f;
}

.box-09 a {
	color: #bcbd3b;
	border-color: #bcbd3b;
}

.box-09 a:hover, .box-09 a:focus {
	background-color: #bcbd3b;
}

.box-10 a {
	color: #1fbecd;
	border-color: #1fbecd;
}

.box-10 a:hover, .box-10 a:focus {
	background-color: #1fbecd;
}

.box-11 a {
    color: #ff4500;
    border-color: #ff4500;
}

.box-11 a:hover, .box-11 a:focus {
    background-color: #ff4500;
}

.box-12 a {
    color: #5f9ea0;
    border-color: #5f9ea0;
}

.box-12 a:hover, .box-12 a:focus {
    background-color: #5f9ea0;
}

.box-13 a {
    color: #8b0000;
    border-color: #8b0000;
}

.box-13 a:hover, .box-13 a:focus {
    background-color: #8b0000;
}

.box-14 a {
    color: #7070c0;
    border-color: #7070c0;
}

.box-14 a:hover, .box-14 a:focus {
    background-color: #7070c0;
}

.box-neutral span {
    /*background-color: #fcfcfc;*/
    background-color: #ebebeb;
}

.footer {
	border-top-color: #000;
}

.footer-text {
	font-family: Open Sans Regular, Verdana, Arial;
	color: #000;
	text-align: right;
}

#topnav .navigation-menu > li .submenu li a {
	white-space: normal;
}

/************************************* Media Queries ********************************************/

@media (max-width: 991px) {
	#topnav .navigation-menu li a {
		text-align: center;
	}
}