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

/* Breakpoints

992px, 768px, 600px, 480px, 380px

*/

html { 
  position:relative;
	
}

body{
	font-family: 'Noto Sans', sans-serif;
	border-top: 3px solid #0094cb;
	line-height:1.7;
  	color:#000;
	background-color: #fbfbfb;
    background: url("../img/JRA-beeldmerk.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 500px;
	width: 100%;
	height: 100%;
}

 
::selection { background: #e6007e; color: #fff; } /* Safari 3.1+, Opera 9.5+, Chrome 2+ */
::-moz-selection { background: #e6007e; color: #fff; } /* Mozilla Firefox */

img{border:none;}
img a {border:none;}
a img{border:none; }
img a:hover{border:none;}

.img-center{ margin:0 auto; display:block;}
.clear{clear:both;}
.margin-top-130px{width:1px; height:130px;}
.margin-top-100px{width:1px; height:100px;}
.margin-top-60px{width:1px; height:60px;}
.margin-top-50px{width:1px; height:50px;}
.margin-top-40px{width:1px; height:40px;}
.margin-top-30px{width:1px; height:30px;}
.margin-top-20px{width:1px; height:20px;}
.margin-top-10px{width:1px; height:10px;}

.clearboth{clear: both;}

.background-white{width: 100%; height: auto; background-color: #fff;box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);}
	 
/********** Fonts **********/

p{margin-bottom:16pt;font-size: 11pt; color: #363636;}

p a,ul a{
  color: #0094cb;
  text-decoration:none;
	border-bottom:1px solid #0094cb;
  cursor: pointer;
-webkit-transition: color ease-in-out 0.15s;
	transition: color ease-in-out 0.15s;
	-webkit-transition: border-bottom ease-in-out 0.15s;
	transition: border-bottom ease-in-out 0.15s;
	
}

p a:hover,ul a:hover,
a:focus{
  color: #004863;
	border-bottom:1px solid #004863;
	-webkit-transition: color ease-in-out 0.15s;
         transition: color ease-in-out 0.15s;
	-webkit-transition: border-bottom ease-in-out 0.15s;
         transition: border-bottom ease-in-out 0.15s;
}

p.lead{font-family: 'Noto Sans', Helvetica, Arial, sans-serif, serif;font-size: 12pt; line-height: 1.7; font-weight: 500;}

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

h1,h2,h3{font-size: 18pt; margin-top: 10px; margin-bottom: 0px; color: #0094cb;}
h2{font-size: 16pt}
h3{font-size: 15pt}

strong.blue{color: #0094cb;}
span.pink{color:#e6007e;}
span.strong-blue{font-weight: 500; color:#0094cb;}


@media (max-width: 600px) {
	body{
	background-position: 120px;
}
}



/*** HEADER ***/

header{background-color:#fff;}
.logo{width: 351px; height: 120px; background: 100%; margin: 0 auto;}
p.intro{font-weight: 400; font-size: 25pt;color: #706f6f; text-align: center;}


/** CV **/
.foto-wrapper{width: 220px; height: auto; margin: 0 auto;}
.naam-foto{width: 220px; height: auto; margin: 0 auto; }

.avatar{background: url("../img/jurriaan_asma.png"); background-position: center; background-size: cover; height: 220px; width: 220px; border-radius:110px}

a.icon{border-bottom: 0px; color: #0094cb;-webkit-transition: color ease-in-out 0.15s;
         transition: color ease-in-out 0.15s;}
a.icon:hover{border-bottom: 0px; color: #004863;-webkit-transition: color ease-in-out 0.15s;
         transition: color ease-in-out 0.15s;}


@media screen and (min-width: 600px) {
  
}

/*** FOOTER ***/

footer{background: #0094cb; border-bottom: 3px solid #e6007e;}
footer h1, footer p{color: #fff;}
footer p a{color: #fff;}
footer p a:hover{color:#fff; text-decoration-color: none; border-bottom: #fff 1px solid ;}


/*** Cookie consent ***/

.cc-window.cc-banner{
	border-bottom:1px solid #0094cb;
}


/********** Responsive images **********/


/* for high resolution display */

@media only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-device-pixel-ratio: 2) {

.avatar {

    background: url("../img/jurriaan_asma@2x.png");
    background-position: center;
	background-size: cover;

/* rest of your styles... */

}

}







@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
       	
		img.avatar{}
}