/* CSS for magnitudes map*/

html {
	margin:0px;
	padding:0px;
	border:0px
}

* {
	box-sizing:border-box
}

body {
    font-family: "Open Sans", "Helvetica Neue", Arial;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #000000;
      text-align: left;
    width:100%
}

.container {
      padding-right: 20px;
      padding-left: 20px;
      
}


header {
    color: #ffffff;
      background-color: #e20000;
      width: 100%;
      left: 0;
    margin-bottom:50px
}

a.sed-logo {
      margin-right: 0.625rem;
}

.title {
    font-size:openSans
}

.selection-box {
    display:flex
}


footer {
    background-color:#e20000
}



footer p {
    color: #fff;
    font-style: normal;

}

footer a {
    color: #fff;
    font-style: normal;
    text-decoration: none;
    border-bottom:2px dotted #fff
    
}


/*header*/
h2 {
	color: #0077bb;
	margin:0px 0px 25px;
	font-size:96%
	
}
#text_intro {
	text-align:justify;
	margin:0px
}

p{
	margin-top:0px
}




/*buttons*/



#lbox_text, #rbox_text, #l2box_text {
	border-bottom:2px solid #0077bb;
	padding-bottom:5px;
	margin-bottom:15px;
	color:#0077bb;
	font-weight:600
}

.l_but, .r_but, .l2_but {
	height:40px;
	cursor:pointer;
	text-align:center;
	color:#0077bb;
	font-size:14px; 
	line-height:40px;
	 white-space: nowrap;
	 padding:0px

}

.l_but, .l2_but {
	margin:0px 0px 15px 0px;
	width:100%
}

.r_but {
	margin:0px 0px 15px 0px;
	width:100%
}
   

.l_but.active, .r_but.active, .l2_but.active{ 
	border-top-right-radius:6px;
	border-top-left-radius:6px;
	border-bottom-right-radius:0px;
	border-bottom-left-radius:0px;
    background-color:#0077bb;
	border:1px solid #006ab5;
	font-weight:400;
	color:#fff;
	padding:0px 10px;
	
}


.l_but.noactive, .r_but.noactive, .l2_but.noactive {
	border-radius: 6px;
   background-color:#f5f5f5;
	border:1px solid #e5e5e5;
	color:#006ab5;
	padding:0px 10px	
}


.l_desc.noactive, .r_desc.noactive, .l2_desc.noactive {
	display:none !important
}

.l_desc.active, .l2_desc.active{
	
    font-style: normal;
    padding: 7px 10px 10px;
    width: 100%;
	font-size:13px;
	margin:-15px 0px 15px 0px;
	color:#000;
	border-top-right-radius:0px;
	border-top-left-radius:0px;
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	border-bottom:1px solid #006ab5;
	border-right:1px solid #006ab5;
	border-left:1px solid #006ab5
}
.r_desc.active{
    font-style: normal;
	border-top-right-radius:0px;
	border-top-left-radius:0px;
	border-bottom-right-radius:6px;
	border-bottom-left-radius:6px;
    padding: 7px 10px 10px;
    width: 100%;
	font-size:13px;
		margin:-15px 0px 15px 0px;
	color:#000;
	border-bottom:1px solid #006ab5;
	border-right:1px solid #006ab5;
	border-left:1px solid #006ab5
}


#t_desc_p, #m_desc_p {
	color:#333333;
	color: rgba(51,51,51,1);
	margin:0px
}



/*---map section---*/

#mapblock {
	position:relative;
    margin: 0 auto 20px;
	
}


#map {
width:100%;
margin-bottom:20px
}

#map img {
	width:100%
}

#legend {
	margin:20px auto 30px;
	text-align:center
}
.downl_block {
	margin:0px 20px 20px
}

#download {
    text-align: left;
	
}


 #map_pdf a, .question a, #text_intro a {
	color:#000;
	text-decoration:none;
	border-bottom:2px dotted #000000	
	
}

/* media queries */


#leftbox, #rightbox {
	width:100%;
	margin:10px 0px 50px;
}

@media (min-width:576px) {
    .container{
      max-width:540px;
	  margin-right: auto;
      margin-left: auto;
    }

	#box {
		display:block;
	}
	

		#leftbox, #rightbox, #left2box {
			width:100%;
			padding:10px 0px 50px;
		}

	#mapblock {
		width:100%
	}

  }
  @media (min-width:768px) {
    .container{
      max-width:720px
    }

	#box {
		display:flex
	}

	#leftbox,  #left2box {
		width:60%
	}

	 #rightbox {
		flex: 1
	}

	#leftbox,  #left2box {
		margin: 0px 30px 10px 0px;
	}
	
	
	#rightbox {	
		margin: 0px 0px 10px 30px
	}

	#mapblock {
		width:650px
	}

  }
  @media (min-width:992px) {
    .container {
      max-width:970px;
	  #leftbox,  #left2box {
		width:50%
	}

    }
  }
  @media (min-width:1260px) {
    .container{
      max-width:1200px
    }
  }



  footer .container {
    padding-top: 30px
}
/*--- questionnaire---*/

.question {
	background-color:#f5f5f5;
	padding:10px;
	border:1px solid #e0001b;
	margin:30px 30px 20px;
	border-radius:6px
}
/***--- accessibility ---***/
*{
    outline:0 !important
}
/*end */

/* format focused elements */
	div:focus,div:focus, #map_pdf a:focus, .question a:focus, #text_intro a:focus {
		cursor:auto;
		border:none;
		border:1px solid  #444 !important;
		padding:3px;
		color:#444 
		
	}
/* end */