:root {
	--color1: #5cb839;
	--color2: #72b69b;  
	--color3: #85c0e4; 
	--linkColor: #31708f; 
	--linkColorHover: #286499;
	--background-body: #b9e9eb url('img/backImg.jpg') no-repeat right;
	--header-background: url('img/backHeaderImg.jpg') no-repeat fixed;
	--background-size-body:100%;
	--background-modal-overlay: #00639f85;
	--background-modal-content: #3091b078;
	--headerNavigationContainer: linear-gradient(70deg, #286090 7%, rgb(35 59 140 / 31%) 45%);
	--background-color: background-color: #dde4e2;
	--background-image: url('img/backImg.png');
	--background-repeat: no-repeat;
	--background-attachment: fixed; 
	--font1: 'Quicksand' ; /*  Dosis  Quicksand  */
	--font2:  ;
	--font3:  ; 
 
}





 
/*

font-family: 'Dosis', sans-serif;
font-family: 'Quicksand', sans-serif;
font-family: 'Ubuntu Condensed', sans-serif;
font-family: 'Zilla Slab', serif;
font-family: 'Squada One', cursive;
font-family: 'Nanum Gothic Coding', monospace;
font-family: 'Red Hat Display', sans-serif;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Enriqueta', serif;
font-family: 'Scada', sans-serif;
font-family: 'Basic', sans-serif;
font-family: 'Scada', sans-serif;
font-family: 'Allerta', sans-serif;

*/

/*
#f6f6f6 // background color body anterior

*/
  
body {
		font-family: var(--font1);
	background: var(--background-body);
	background-size: var(--background-size-body); 
     background-attachment:fixed;
     background-position:bottom right
     

} 
 
#logoContainer svg path{
	fill:#d7e5ed;
}



.navbar-toggle{
background-color:var(--color1) !Important;
}


#logo1{
	transform: scale(.95) !important;
	
}



#logo1{


	/* margin-top:1% */
} 

a{ 
	color:var(--linkColor)
}

a:hover,
a:focus
{
	color:var(--linkColorHover)
}

 a:focus {
      border-color: var(--color2); 
}

.btn-primary {
    color: #fff;
    background-color:var(--linkColor);
    border-color: var(--color1); 
    
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--color2);  
    border-color:var(--linkColor);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: var(--color1) !important;
    border-color: var(--linkColor) !important;
}


#main-navigation li a:hover,
#main-navigation li a:focus
 {

   color: var(--color3); 
}


.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color:var(--color2); 
   border-color: var(--color2); 
}

#searchToggle{
	   background-color: var(--color1); 
	      color: var(--color3) !important;
}


.dropdown-menu{
	    background-color: var(--color2);
	    border-color: var(--color3); 
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--color1);
    color: var(--color3) !important;
}



.article-details, #main-content {
    background: linear-gradient(to right, #d3e3ec 0%,#f5f5f5e0 20%);
    border-top: solid 1px white;
    border-right: solid 1px white;  
}


#backToTop {
	background-color: var(--color1);
}

#main-navigation li a { 
	color: white;
	background-color: #1770a600;
}

#nav-menu-background {
	background-color: var(--color1);
	
}


}
#nav-menu-background.sticky:before{

background-color: var(--color2);
}

#headerNavigationContainer {
	background: var(--header-background);
	background-size:cover;
		border-bottom: solid 3px  var(--color2);
}


#headerGradient{
	position:absolute;
	height:100%;
	width:100%;

	z-index:-; 
	top: 0;
	background: var(--headerNavigationContainer)
}




#backToTop:hover {

	background-color: var(--color2);
}

section header.page-header h2,
.page-header h1{background-color: #286980;<}




/***media queries ************************************************************************************/

@media (max-width:1135px){

*{
//color:pink ;
}

 
#logoContainer{
	transform:scale(.7) translateX(-100px);
	//background-color:red !Important;
	//outline: solid red; 
	max-width:70%;
}

}




@media (min-width:992px){
*{
//color:#E91E63 !Important;
}

#siteName{
	    transform: translate(-50%, 20%) scale(1.4) !Important;
}

}


@media (max-width:992px){

#logo1{

	margin-top:0%
} 
	
}




@media (max-width: 991px){

*{
	//color:#009688 !Important;
}
#logoContainer svg path{
	fill: white;
}

.logo{
	height:50px !important;
	margin-top:30px !important;
}


#headerGradient{
	background: linear-gradient(150deg, rgb(9 50 62 / 89%) 27%, #286090d9 45%);
}


#logoContainer{

		transform:scale(1) translateX(10px);
}


#logo1{

}

#siteName.centeredSiteName, #siteName {
 position:absolute;
left:50% !Important;

text-align:center;
	transform: translate(-50%, -10%) !important
}


.issn{
	color: #d4e2ea;
}


#siteName{
	/* width:500px */
}

}



media (max-width: 769px) and (min-width: 518px){
* {
    color: blue !Important;
}
}




@media (max-width: 517px) and (min-width: 329px){
#logoContainer {/* top:200px !Important; */}



#headerGradient{
	background: linear-gradient(130deg, rgb(4 86 84 / 92%) 7%, rgb(27 90 137 / 89%) 65%);
}

.issn{color: #a4dde8;right:90px !Important;}

}




@media (max-width:890px){
#headerNavigationContainer{
		background-size: 152%;
}

}


@media (max-width:768px){

#headerGradient{
height:100%;
}

#main-navigation li{
	background-color: var(--color1);
	margin-bottom:1px;
}


#logoContainer{top: 75px;}
 #siteName{
 	top:40px !important
 }


}

@media (max-width:560px){
#headerNavigationContainer{
		background-size: 180%;
}





}



@media (max-width:411px){
.issn{
	margin-top:20px;
	right:20px !Important
}
#headerNavigationContainer{
		background-size: 280%;
}



}