/* ========================================================
CSS DIFP @2020 - 2021
Author - FUSIO (https://fusio.net/)
==========================================================*/
/***********************
Imports
***********************/
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,400,700|Open+Sans:300,400,600,700&display=swap');


/***********************
Reusable Styles
***********************/

/*color*/
.color-white{ color:#fff!important; }
.color-black{ color:#222!important; }
.color-grey{ color:#e3e3e3; }

.color-01{ color:#051F06; }
.color-02{ color:#8AD2DB; }

/*background color*/
.bg-color-white{ background-color:#fff; }
.bg-color-transparent-white{ background-color:rgba(255,255,255,0.5); }
.bg-color-black{ background-color:#000; }
.bg-color-transparent-black{ background-color:rgba(000,000,000,0.5); }
.bg-color-grey{ background-color:#e3e3e3; }
.bg-color-dark-grey{ background-color:#5d5d5d; }

.bg-color-01{ background-color:#051F06; }
.bg-color-01-transparent{ background-color:rgba(5,31,6,0.8); }
.bg-color-02{ background-color:#8AD2DB; }

/*fonts*/
.font-weight-light{ font-weight:300; }
.font-weight-regular{ font-weight:300; }
.font-weight-bold{ font-weight:700; }

/*text-shadow*/
.text-shadow-none{ text-shadow:0px 0px #000; }
.text-shadow-black{ text-shadow:2px 2px #000; }

/*text indent*/
.txtindent{ margin-left:2rem; }

/*image*/
.bg-img{ background-size:cover; background-repeat:no-repeat; background-position:center center; }

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/*border*/
.border-radius{ border-radius:2rem; }
.border-radius-small{ border-radius:1.2rem; }
.border-radius-smaller{ border-radius:0.5rem; }
.border-radius-smallest{ border-radius:0.25rem; }
.border-radius-circle{ border-radius:50%; }

.border-white{ border:1px solid #fff; }
.no-border{ border:0!important; }

.section-first{ padding-top:6rem; border-top:3px solid #fff; }

/*buttons*/
.btn{ border-radius:0; text-transform:uppercase; }
.btn-adv-search{ border-radius:0; text-decoration:underline; background-color:transparent; border:0; padding:0; margin:0; }

/* Specific mapael css class are below
 * 'mapael' class is added by plugin
*/
.mapael .map {
	position: relative;
}
.mapael .mapTooltip {
	position: absolute;
	background-color: #fff;
	moz-opacity: 0.70;
	opacity: 0.70;
	filter: alpha(opacity=70);
	border-radius: 10px;
	padding: 10px;
	z-index: 1000;
	max-width: 200px;
	display: none;
	color: #343434;
}
path.area{ stroke-width:0!important; }
path.link {
	/*stroke-dasharray: 0;
	stroke-dashoffset: 0;
	animation: dash 5s linear forwards;*/
}
@keyframes dash {
	to {
		stroke-dashoffset: 0;
	}
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	/* IE10+ specific styles go here */
	path.link {
		stroke-dasharray: 0;
		stroke-dashoffset: 0;
		animation: none 0s linear forwards;
	}
}
text{ font-size:12px!important; }
/*.template-book text{ font-size:4px!important; }*/
.template-book text{ font-size:24px!important; }
body.map text{ font-size:2px!important; }

circle.plot{ animation: plotAnimation 0.5s linear forwards; animation-delay:0.15s; }
@keyframes plotAnimation {
	0% { r:0; fill:#051F06; }
	50% { r:12; fill:#dd0000; }
	75% { r:3; fill:#051F06; }
	100% { r:3; fill:#051F06; }
}
.template-book circle.plot{ animation: plotAnimationSmall 0.5s linear forwards; animation-delay:0.15s; }
@keyframes plotAnimationSmall {
	0% { r:0; fill:#051F06; }
	50% { r:6; fill:#dd0000; }
	75% { r:1; fill:#051F06; }
	100% { r:1; fill:#051F06; }
}
body.map circle.plot{ animation: plotAnimationSmaller 0.5s linear forwards; animation-delay:0.15s; }
@keyframes plotAnimationSmaller {
	0% { r:0; fill:#051F06; }
	50% { r:8; fill:#dd0000; }
	75% { r:0.75; fill:#051F06; }
	100% { r:0.75; fill:#051F06; }
}
.zoomButton{ cursor:pointer; position:absolute; top:5px; right:5px; width:30px; text-align:center; margin-right:0.1rem; background-color:#051F06; color:#fff; font-weight:bold; font-size:1.2rem; }
.zoomButton:nth-child(3){  }
.zoomButton:nth-child(4){ top:35px; }
.zoomButton:nth-child(5){ top:65px; }

/*year dots*/
.section-map, .mapael .map svg{ background-color:#fff /*#93d0ff*/; background-image:url("/app/themes/difp/resources/assets/images/grey-sea.jpg"); }
.template-book .mapael .map svg{ outline: 1px solid #e3e3e3; outline-offset: -1px; }

/*new map*/
.mapael .map{ background-image: url(/app/themes/difp/resources/assets/images/difp-map-bg2.png); background-size:100%; background-repeat:no-repeat; }
.section-map, .mapael .map svg{ background-image:none; background-color:transparent; }
.section-map{ background-color:#b0c1e9; }
path.area{ display:none; }

.section-map h1{ font-size:1.4rem; font-weight:bold; }
.dots-container{ position:relative; }
.dots{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; background-color:#000; border-radius:0.25rem; width:100%; height:25px; position:relative; z-index:2; }
.dots *{ -webkit-transition: all ease-in-out 0.25s; -moz-transition: all ease-in-out 0.25s; -o-transition: all ease-in-out 0.25s; transition: all ease-in-out 0.25s; }
.dots .dot{ display:none; width:4px; height:40px; border:1px solid #051f06; margin:0.65rem; background-color:#fff; position:relative; z-index:1; }
.dots .dot .year-legend{ opacity:0; position:absolute; top:0; z-index:-1; left:-50%; border-radius:0.25rem; padding:0.25rem; color:#fff; background-color:#000; }
.dots .dot:hover .year-legend{ opacity:1; top:-45px; }
.dots .dot .year-legend::after{ content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #000; position: absolute; bottom: -6px; left: 6px; }

.slidecontainer{ width: 100%; position:absolute; top:0; left:0; z-index:3; }
.sliderYear { -webkit-appearance: none; appearance: none; width: 100%; height: 25px; background:transparent; outline: none; -webkit-transition: .2s; transition: opacity .2s; }

input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; border: 1px solid #000000; height:28px; width:28px; border-radius: 3px; background: #ffffff; cursor: pointer; margin-top:0px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
.map-play, .map-pause{ font-size:2rem; cursor:pointer; }
.map-play.active i, .map-pause.active i{ border-radius:50%; background-color:#000; color:#fff; font-weight:600; }

.volumes{ padding-bottom:1rem; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; }
.volumes .volume{ border-radius:0.25rem; padding:0 0.5rem; margin-right:0.5rem; color:#fff; background-color:#000; }

/*accordion*/
.card{ border:0; border-bottom:1px solid #333; border-radius:0!important; background-color:transparent; }
.card-header{ position:relative; background-color:transparent; border:0; border-radius:0!important; padding:0; }
.card .btn{ padding:0.75rem 0; color:#333; text-transform:none; width: 100%; text-align: left; position:relative; }
.btn-link.focus, .btn-link:focus{ text-decoration:none; text-transform:none; }

.card i {
    position: absolute;
    transform: translate(-30px, 0);
    margin-top: 10px;
    right: 0;
}
.card i:before {
    transform: translate(-2px, 0) rotate(-45deg);
}
.card i:after {
    transform: translate(2px, 0) rotate(45deg);
}
.card i:before, .card i:after {
    content: "";
    position: absolute;
    background-color: #051F06;
    width: 3px;
    height: 9px;
}
.card-body p{ font-size:0.9rem!important; margin-bottom:1rem; }
.card-body { font-size:0.9rem!important; margin-bottom:1rem; }

/*Pagination*/
.pagination{ margin:0 auto; }
.pagination-items{ width: 100%; display:inline-flex; flex-direction:row; margin:0 auto; border:1px solid #d6d6d6; border-radius:0.25rem; }
.pagination a{ padding:0.25rem 0.65rem; border-right:1px solid #d6d6d6; border-left:1px solid #d6d6d6; color:#111; }
.pagination a:hover, .pagination a.active{ background-color:#5d5d5d; color:#fff; }
.pagination-numbers{ width:100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.pagination-numbers a{ border:1px solid #d6d6d6; min-width: 5%; padding-left: 0; padding-right: 0; text-align: center; font-size:0.8rem; }
.pagination-prev, .pagination-next{ display:flex; align-items:center; }

/*loading*/

@-webkit-keyframes rotating {
    from{ -webkit-transform: rotate(0deg); }
    to{ -webkit-transform: rotate(360deg); }
}

.fa-spinner{ font-size:2rem; margin:1rem auto; display:table; -webkit-animation: rotating 2s linear infinite; }

.twitter-tweet.twitter-tweet-rendered{ margin-top:0!important; }

/***********************
HTML Tags Styles
***********************/
/* basic tags */
body{ background-color:#fff; font-family: 'Open Sans', sans-serif;  font-weight:400; }
/*Text*/
h1{  }
h2{  }
h3{  }
a{  }
a:hover{ text-decoration:none; }
p{ margin:0; }
strong{  }
hr{ border-top:1px solid #fff; }

/*list*/
ul{  }


/***********************
Form
***********************/
button{ border:0; }
.btn-browse-volume{ background-color:#e3e3e3; color:#051F06!important; text-decoration:underline; }
.btn-browse-volume.collapsed{ background-color: rgba(5,31,6,0.8); color:#fff!important; text-decoration:none; }
input{ border-radius:0!important; }
/*.home .form-control:focus{ background-color:rgba(5,31,6,0.8); }*/
.adv-btn{ padding-top:0.5rem; font-size:0.8rem; text-transform:capitalize; }
.search-books label{ width: 120px!important; min-width: 120px; text-transform:uppercase; }
.form-control{ border-radius:0!important; }

/*
.form-control:focus {
    color: #fff;
    background-color: #051F06;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
*/

/***********************
TOP NAVIGATION
***********************/
.navbar{ min-height:0; }
.navbar .animated{ animation-duration:0.5s; }
.navbar, .navbar-brand, .navbar-brand span{ -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; }
.navbar{ -webkit-transition: all ease-in-out 0.25s; -moz-transition: all ease-in-out 0.25s; -o-transition: all ease-in-out 0.25s; transition: all ease-in-out 0.25s; }
.navbar-brand{ font-size:1.4rem; color:#fff!important; margin:0; font-family: 'Merriweather', sans-serif; font-weight:400; }
.navbar-brand span{ font-size:1.8rem; }
/*on-scroll*/
.on-scroll .navbar{ box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1), 0 0px 0px 0 rgba(0, 0, 0, 0.1); }
.on-scroll .navbar-brand{ margin:0; font-size:0.93rem; }
.on-scroll .navbar-brand span{ font-size:1.2rem; }
/*on-navbaropen*/
.on-navbaropen{ overflow:hidden; }
.on-navbaropen .navbar{ min-height:100%; background-color:rgba(5,31,6,0.8)); }

.img-logo {max-width: 50%; height: auto;}

.nav-left-space{ width:40%; }
body.on-scroll .nav-left-space{ width:48%; }
body:not(.on-scroll) .nav-top-small{ position:absolute; top:0; right:1rem; }
.nav-top-small li a{ font-size:0.9rem; }

.main-nav ul li a{ -webkit-transition: all ease-in-out 0.25s; -moz-transition: all ease-in-out 0.25s; -o-transition: all ease-in-out 0.25s; transition: all ease-in-out 0.25s; }
.nav-item{ display: flex; }
.nav-link{ color:#fff; font-size:1rem; padding:0.25rem 0.5rem!important; text-transform:uppercase; display:flex; align-items:center; }
.nav-link:hover{ color:#fff; text-decoration:underline; }

/*dropdown*/
.dropdown-menu{ border-radius:0!important; padding:0.5rem 1rem; }
.navbar-nav .dropdown-menu a.dropdown-item{ padding:0.35rem 0; font-size: 0.9rem; }
.navbar-nav .dropdown-menu a.dropdown-item:last-child{ border-bottom:0px solid #dcdcdc; }
.navbar-nav .dropdown-menu a.dropdown-item:hover{  }

/*mobile navigation toggler*/
.navbar-toggler:focus, .navbar-toggler:active{ outline: 0; }
.icon-bar{ width:40px; height:6px; display: block; -o-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; margin-top:7px; } 
.icon-bar.top-bar{ margin-top:0px; } 
.navbar-toggler{ border: none; }
.navbar-toggler .top-bar{ transform:translate(2px,13px) rotate(45deg); }
.navbar-toggler .middle-bar{ opacity: 0; }
.navbar-toggler .bottom-bar{ transform:translate(2px,-13px) rotate(-45deg); }
.navbar-toggler.collapsed .top-bar{ transform: rotate(0); }
.navbar-toggler.collapsed .middle-bar{ opacity: 1; }
.navbar-toggler.collapsed .bottom-bar{ transform: rotate(0); }


/***********************
FOOTER
***********************/
#footer{  }
.footer-logo{  }
#footer h2{  }
#footer button{  }
#footer ul li a{ color:#fff!important; font-size:0.9rem; }
#footer ul li a:hover{ text-decoration:underline; }
#footer .social a{  }
/***********************
CONTENT SECTIONS
***********************/
.nav-tabs{ margin-bottom:2rem; }
.nav-tabs li{ padding:0!important; margin:0 2px 0 2px!important; }
.nav-tabs li a{ display:inline-block; background-color:#051F06; color:#fff; padding:0.5rem; text-decoration:none; }
.nav-tabs li a.active{ background-color:#fff; color:#051F06; text-decoration:underline; }
.nav-tabs li a.active:hover{  background-color:#fff; color:#051F06; }
.nav-tabs li a:hover{  background-color:#051F06; color:#fff; }
ul.pagination li a{  }
ul.pagination li:hover a, ul.pagination li.active a{  }

/*section-hero*/
/*html, body, .section-hero, .section-hero .container{ height:100%; }*/
.homemessage {background: #fff;}
.section-hero{ position:relative; min-height:200px; }
.section-hero .hero-overlay{ background-color:rgba(000,000,000,0.7); height:100%; width:100%; position:absolute; top:0; left:0; }
.section-hero h1{ font-size:1.4rem; }
.section-hero p{ font-size:1rem; }
.search-home{ border:1px solid #999; }
.search-home input{ font-size:1.2rem; }

#InputSearchTerm::-webkit-input-placeholder { /* Edge */color:#000; }
#InputSearchTerm:-ms-input-placeholder { /* Internet Explorer 10-11 */color:#000;}
#InputSearchTerm::placeholder { color:#000; }

.template-book .section-hero{ background-color:#fff; background-attachment: initial!important; background-size: 100%; background-position: top center; }

/* Mat additions for content */

.glosstable {
    width: 100%;
    
}

.glosstable td {
    padding: 10px;
    
}

.glosstable tr:nth-child(even) {background-color: #f2f2f2;}

h3 {
    margin-top: 20px!important;
}




/*for wordpress editor*/
.section-contentpage{  }
.section-contentpage h1{ font-size:2rem; }
.section-contentpage h2{ font-size:1.4rem; }
.section-contentpage h3{ font-size:1.2rem; }
.section-contentpage p{ margin-bottom:1rem; }
.section-contentpage a{ color:#051F06; text-decoration:underline; }
.section-contentpage a:hover{ text-decoration:none; color:#051F06; }
.home .section-contentpage a{ text-decoration:none; }
.section-contentpage strong{  }
.section-contentpage ul{  }
.section-contentpage hr{ border-top:1px solid #999; }
/*.section-contentpage img{ width:100%; height:auto!important; }*/

.sidebar{  }
.sidebar h2{ font-size:1.4rem; }
.sidebar a{ text-decoration:none; }

.section-documentpage #loginform .login-username, .section-documentpage #loginform .login-password, .section-documentpage #loginform .login-remember, .section-documentpage #loginform .login-submit{ display:none; }

.section-documentpage a{ text-decoration:none!important; }

.section-boxes{ position:relative; }
.section-boxes a{ border-bottom: 2px solid #EFEFEF; padding-bottom: 1rem; }
.home-box h2{ font-size:0.9rem; font-weight:600; }
.home-box hr{ border-top:1px solid #fff; }
.home-box img{ width:100%; }

.section-message p{ font-size:1rem; line-height:1.6; margin: 0 40px 0 40px; }
.section-message p a{ text-decoration:underline!important; }

a.search-result{ color:#111; border-top:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; background-color:#f9f9f9; }

.libary-btns i{ font-size:1rem; }

.volume-nav{ font-size:2rem; font-weight:bold; height:91px; display:flex; flex-direction:row; align-items:center; }


.browse-documents-header{ background-color:#c5d0c6; }
.browse-documents-header div{ padding:0.25rem 0.5rem; }
.browse-documents-header div:nth-child(1){ flex-basis: 20%; }
.browse-documents-header div:nth-child(2){ flex-basis: 20%; }
.browse-documents-header div:nth-child(3){ flex-basis: 60%; }

.browse-documents-container{ height:300px; overflow-y:scroll; border:1px solid #c2c2c2; }
.browse-documents{ font-size:0.8rem; color:#333!important; }
.browse-documents.active, .browse-documents:hover{ background-color:#051F06!important; color:#fff!important; }
.browse-documents:nth-child(even){ background-color:#fff; }
.browse-documents div:nth-child(1){ flex-basis: 20%; }
.browse-documents div:nth-child(2){ flex-basis: 20%; }
.browse-documents div:nth-child(3){ flex-basis: 60%; }

.browse-select-year.active{ color:#fff; background-color:#051F06; }


body.template-book .section-hero{  }

/* ========================================================
-MOBILE
==========================================================*/
/*less than 576px*/
@media (max-width: 576px) {
	.navbar-nav{ text-align:center; width:100%; }
	.nav-link{ justify-content:center; }
	.search-home input{ font-size:1rem; }
	.section-message p { font-size: 1rem; }
	.section-boxes a{ padding-bottom:0; }
    .navbar-brand {width: 300px !important;}
}

/*between 576px and 768px*/
@media (min-width: 576px) and (max-width: 768px) {
	.navbar-brand {width: 300px !important;}
}

/*less than 768px*/
@media (max-width: 768px){
	.dots .dot{ width:3px; height:36px; }
    .navbar-brand {width: 300px !important;}
}

/*between 768px and 992px*/
@media (min-width: 768px) and (max-width: 992px) {
	
}

/*less than 992px*/
@media (max-width: 992px) {
	.navbar-collapse ul{ padding-top:2rem; }
	.navbar-collapse ul:last-child{ padding-top:0; }
	.navbar-collapse ul li a{ text-align:center; font-size: 1.4rem; }
	#footer ul li{ width:100%; text-align:center; }
	#footer ul li a{ text-decoration:underline; }

/*dropdown*/
.dropdown-menu{padding:0 0.5rem; }
.navbar-nav .dropdown-menu a.dropdown-item{padding:0 !important; font-size: 0.85rem; }


}

/*more than 992px*/
@media (min-width: 992px) {	
	.navbar-nav{ width:33%; }
	#footer ul li::after{ content:"|"; margin-left:0.5rem; color:#fff; }
	#footer ul li:last-child::after{ display:none; content:""; margin-left:0; }
}

/*between 992px and 1200px*/
@media (min-width: 992px) and (max-width: 1200px) {
	.nav-link{ font-size:0.9rem; padding-left:0.4rem!important; padding-right:0.4rem!important; }
}

/*more than 992px*/
@media (min-width: 1200px) {

}


@media only screen and (min-width:1280px) {
    .container-big{ width:100%; max-width: 1200px; }
}
@media only screen and (min-width:1580px) {
    .container-big{ width:100%; max-width: 1500px; }
}