/* ============= WEB BROWSER RESETS ============ */
* { margin: 0; padding: 0; border: none }
*, *::before, *::after { box-sizing: border-box }
html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline;
scroll-behavior: smooth; scroll-padding-top: 20px }
body { line-height: 1.5; min-height: 100vh; text-rendering: optimizeSpeed } 
img { width: 100%; height: auto; display: block }

h1, h2, h3, h4 { width: 100% }
input, button, textarea, select { font: inherit }

body { font-family: 'Open Sans', sans-serif }

/* ============ SEMANTIC BLOCKS =========== */

nav, header, main, article, section, footer { width: 100% }

/* ============ WRAPPER FOR CONTENT =========== */

.wrapper { 
	margin: 0 auto; padding: 0 16px; position: relative; 
	display: flex; justify-content: space-between; flex-wrap: wrap 
}

@media (max-width: 575px)                          { .wrapper { max-width: 90% } }
@media (min-width: 576px)  and (max-width: 767px)  { .wrapper { max-width: 90% } }
@media (min-width: 768px)  and (max-width: 1024px) { .wrapper { max-width: 92% } }
@media (min-width: 1025px) and (max-width: 1199px) { .wrapper { max-width: 88% } }
@media (min-width: 1200px) and (max-width: 1399px) { .wrapper { max-width: 83% } }
@media (min-width: 1400px)                         { .wrapper { max-width: 82% } }


/* ================== HEADER ==================== */

header {
	background: linear-gradient(#0460CD, #021b79);
	box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px 0;
}

/* Main content of header */
header h1, header h2, header content p { color: #fff }
header h1 { 
    font-weight: 800; line-height: 1.3; letter-spacing: -1px;
    margin-bottom: 20px;
    font-size: calc(30px + (46 - 30) * ((100vw - 320px)/(1600 - 320)));
}

header h2 { 
    font-weight: 400; line-height: 1.8; 
    font-size: calc(16px + (20 - 16) * ((100vw - 320px)/(1600 - 320)));
}

header h2 a { text-decoration: underline solid; text-underline-position: under; font-weight: 600 }

header h2 a:link, header h2 a:visited  {
	color: #fff; text-decoration-color: #fff;
}

header h2 a:hover, header h2 a:hover, header h2 a:active  {
	color: yellow; text-decoration-color: yellow;
}

header content p { line-height: 1.6; color: #fff }

/* Small Mobiles */
@media (max-width: 500px) { 
	header { padding: 9% 0 10% 0 } 
	header .sidebar, header .content { width: 100% }
}

/* Big Mobiles */
@media (min-width: 501px) and (max-width: 767px) { 
	header { padding: 6% 0 7% 0 } 
	header .sidebar, header .content { width: 100% }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) { 
	header { padding: 3.5% 0 3.7% 0; margin-bottom: 32px } 
	header .sidebar { width: 25% }
	header .content { width: 72% }   
    header h1 { font-size: calc(22px + (36 - 22) * ((100vw - 320px)/(1600 - 320))); }
    header h2 { font-size: calc(16px + (20 - 16) * ((100vw - 320px)/(1600 - 320))); }
}

/* Small Desktops */
@media (min-width: 1025px) and (max-width: 1199px){ 
	header { padding: 2.5% 0 2.7% 0; margin-bottom: 32px } 
	header .sidebar { width: 24% }
	header .content { width: 70% }   
}

/* Big Desktops */
@media (min-width: 1200px) { 
	header { padding: 2.5% 0 2.7% 0; /* margin-bottom: 32px */ } 
	header .sidebar { width: 25% }
	header .content { width: 75%; padding-right: 16% }   
}

/* Sidebar of header */
header .sidebar picture img { margin-bottom: 20px; max-width: 300px }
header .sidebar div { display: flex }

/* Viewports */
@media (max-width: 767px) { 
    header .sidebar div { flex-direction: row; margin-bottom: 22px } 
    header .sidebar div p { margin-left: 14px; align-self: center } 
}

@media (min-width: 768px) and (max-width: 1299px) { 
    header .sidebar div { flex-direction: column } 
    header .sidebar div p { margin-left: 0; margin-top: 12px; align-self: flex-start } 
}

@media (min-width: 1300px)  { 
    header .sidebar div { flex-direction: column } 
    header .sidebar div p { 
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1600 - 320))); 
		word-break: break-all;
    }
}

header .sidebar div img { border-radius: 50%; max-width: 60px; max-height: 60px; margin-bottom: 12px }
header .sidebar div p { color: #fff; line-height: 1 }

header .sidebar div .emailAnimation {
    animation: emailTextColor 2s step-end both;
}

@keyframes emailTextColor {
    from { color: yellow }
    to   { color: white }
}



/* ============ SEMANTIC BLOCKS  =========== */

/* Desktops */
@media (min-width: 768px) { 
	section { padding: 1.5% 0 4% 0 }
	main section:last-child { margin-bottom: 0 }
}

/* Mobiles */
@media (max-width: 767px) { 
	section { padding: 9% 0 2% 0 } 
}

/* ====== TOP FOUR COLUMNS ====== */

/* Desktops */
@media (min-width: 768px) { section .item-4 { width: 23% } }

/* Mobiles */
@media (max-width: 767px) { section .wrapper .item-4 { width: 100%; margin-bottom: 20px } }

section .item-4 {
	padding: 9px 20px 15px 20px;
	background-image: linear-gradient(#D6F3D6,#bfffbf);
	border-radius: 3px;
}

section .item-4 h3 { 
	color: #023753;
	font-weight: 600;
	font-size: calc(16px + (20 - 16) * ((100vw - 320px)/(1600 - 320)));
	line-height: 1.3;
}

section .item-4 p { 
	color: #023753;
	font-size: calc(14px + (16 - 14) * ((100vw - 320px)/(1600 - 320)));
	margin: 0;
	line-height: 1.7;
	color: #004700;
}

section .item-4 a {
	text-decoration: underline solid;
	text-underline-position: under;
	font-weight: 600;
}

section .item-4 a:link, section .item-4 a:visited  {
	color: #004700;
	text-decoration-color:#004700;
	transition: 0.3s;
}

section .item-4 a:hover, section .item-4 a:hover, section .item-4 a:active  {
	color: #222;
	text-decoration-color: #222;
}


/* =========== THREE COLUMNS: HEADINGS ============= */

/* All viewports */
section .item-1 { width: 100%; padding: 1% 6% 0 6%; text-align: center }

section .item-1 h2 { 
	font-family: Georgia, 'Times New Roman', Times, serif; letter-spacing:-1px;
	font-weight: normal; color: #230cea; line-height: 1.4;
	text-align: center; margin: 0 auto 32px auto;
	font-size: calc(34px + (58 - 34) * ((100vw - 320px) / (1600 - 320))); 
}

/* =========== THREE COLUMNS: COLUMN WIDTHS  ============= */

/* Desktops */
@media (min-width: 768px) { 
	section .item-3 { width: 29% }
	section .item-3.item-margin-top { margin-top: 48px }
}

/* Mobiles */
@media (max-width: 767px) { 
	section .item-3 { width: 100%; margin-bottom: 48px }
	section .item-3:last-child { margin-bottom: 32px }
	section .item-3.item-hide-mobile, 
	section .item-3.item-hide-mobile p { display: none }
}

@media (min-width: 400px) and (max-width: 499px) { 
	section .item-3 { width: 80%; margin-left: auto; margin-right: auto } 
}

@media (min-width: 500px) and (max-width: 767px) { 
	section .item-3 { width: 70%; margin-left: auto; margin-right: auto } 
}


/* =========== THREE COLUMNS: IMAGES ============= */

section img.img-shadow { 
	margin-bottom: 24px;
	max-width: 340px;
	box-shadow: 5px 10px 8px #888
}

/* =========== THREE COLUMNS: SUB-HEADINGS ============= */

section .item-3 h3 a {
	display: block;
	font-family: 'Open Sans Condensed', sans-serif; 
	font-weight: 700; color: #230cea; line-height: 1.4;
	font-size: calc(26px + (30 - 26) * ((100vw - 320px) / (1600 - 320)));
	margin-bottom: 8px;
	text-decoration: underline solid; text-underline-position: under;
	text-decoration-thickness: 2px;
}

section .item-3 h3 a:link, 
section .item-3 h3 a:visited  {
	text-decoration-color: transparent;
	transition: 0.2s;
}

section .item-3 h3 a:hover, 
section .item-3 h3 a:hover, 
section .item-3 h3 a:active  {
	text-decoration-color: #230cea;;
}

/* =========== THREE COLUMNS: PARAGRAPHS ============= */

section .item-3 p { 
	font-weight: 400; color: #465E72; line-height: 1.6; 
	margin-bottom: 24px;
	font-size: calc(15px + (16 - 15) * ((100vw - 320px)/(1600 - 320)));
}

/* =========== THREE COLUMNS: BUTTONS ============= */

/* Faux buttons */
section .item-3 a.btn-solid { 
	display: inline-block;
	line-height: 1; text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
	text-decoration: none; border-style: solid; border-width: 2px;
	padding: 16px 32px;
	font-size: calc(14px + (15 - 14) * ((100vw - 320px)/(1600 - 320)));
}
   
section .item-3 a.btn-solid i.fas { margin-left: 12px }

@media (min-width: 768px) and (max-width: 900px) {
	section .item-3 a.btn-solid span { display: none } 
	/* section .item-3 a.btn-solid i.fas { display: none } */
}

section .item-3 a.btn-soft  { border-radius: 5px }
section .item-3 a.btn-rounded { border-radius: 100px }

section .item-3 a.btn-solid:link,
section .item-3 a.btn-solid:visited {
	background-color: #230cea;
	border-color: #230cea;
	color: #fff;
	transition: background-color 300ms;
	transition: border-color 300ms;
}

section .item-3 a.btn-solid:hover, 
section .item-3 a.btn-solid:active {
	background-color: #fff;
	border-color: #230cea;
	color: #230cea;
	transition: 0.2s;
}


/* =========== THREE COLUMNS: CHILD COLUMNS ============= *

/* Desktops */
@media (min-width: 768px) { 
	section .item-3 { 
		display: flex; 
		flex-direction: column; 
		justify-content: center
	}
	section .item-3 img.img-shadow { margin-top: auto }
	section .item-3 p { 
		flex-grow: 1;
		
	}
	section .item-3 a.btn-solid { margin-top: auto }
	section .item-3 a.btn-solid { max-width: 240px }
}

/* Mobiles */
@media (max-width: 767px) { 
	section .item-3 { display: block }
}









/* =========== PROJECTS ============= *

/* Inner child: column content */
section.bg-section-green .item-3 h3 a { 
	font-family: 'Open Sans Condensed', sans-serif; 
	font-weight: 700; 
	color: rgb(49,145,131);
	line-height: 1.2;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom-width: 2px;
	border-bottom-style: solid;

}

section.bg-section-green  .item-3 h3 a:link, 
section.bg-section-green  .item-3 h3 a:visited { 
	color: rgb(49,145,131);
	border-bottom-color: rgba(49,145,131, .0);
	transition: border-bottom 300ms;
}

section.bg-section-green .item-3 h3 a:hover,
section.bg-section-green .item-3 h3 a:active { 
	color: rgb(49,145,131);
	border-bottom-color: rgba(49,145,131, 1);
}

section.bg-section-green .item-3 a.button-solid:link, 
section.bg-section-green .item-3 .button-solid:visited {
	border-color: rgb(80,227,194);
	background-color: rgb(80,227,194);
	color: #000;
	padding: 14px 20px;	
	text-decoration: none;
	max-width: 200px;
	font-weight: bold;
} 
   
section.bg-section-green .item-3 a.button-solid:hover, 
section.bg-section-green .item-3 .button-solid:active {
	border-color: rgb(49,145,131);
	background-color: rgb(49,145,131);
	color: #fff;
	padding: 14px 20px;	
	text-decoration: none;
	max-width: 200px;
	font-weight: bold;
}
  

.bg-section-light { background-color: #eff8f5 }
.bg-section-green { background-color: #e3faf5 }

/* ================== FOOTER ==================== */

footer {
	display: flex; 
	justify-content: space-between; 
	flex-wrap: wrap; 
	background: linear-gradient(#0460CD, #021b79);
}

footer:last-child { margin-bottom: 0 } 

/* Desktops  */
@media (min-width: 768px) { 
	footer { padding: 4% 7% 4% 7% } 
	footer .item-3:nth-child(1) { width: 25% }
	footer .item-3:nth-child(2) { width: 50% }
	footer .item-3:nth-child(3) { width: 22% }
}

/* Mobiles */
@media (max-width: 767px) { 
	footer { padding: 10% 8% 4% 8% } 
	footer .item-3 { width: 100%; margin-bottom: 10% }
	footer .item-3:nth-child(2) { order: 1 }
	footer .item-3:nth-child(1) { order: 2 }
	footer .item-3:nth-child(3) { order: 3 } 
}
 
/* Styles for footer background, text, icons and links */
 
footer .item-3 h4, footer .item-3 p, footer .item-3 p i, footer .item-3 p a {
	color: #fff
}
 
footer .item-3 h4 {
	font-weight: 700;
	margin-bottom: 12px;
	font-size: calc(17px + (19 - 17) * ((100vw - 320px)/(1600 - 320)));
}
 
footer .item-3 p {
	font-weight: normal;
	margin-bottom: 12px;
	font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320)));
	line-height: 1.6
}
 
footer .item-3 i { 
	padding-right: 26px;
} 
 
footer .item-3 p a {
	font-weight: 600;
	text-decoration: none;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding-bottom: 2px;
}
 
footer .item-3 p a:link, 
footer .item-3 p a:visited  {
	border-bottom-color: transparent;
}
 
footer .item-3 p a:hover, 
footer .item-3 p a:active {
	border-bottom-color: #fff
}


.tighter-05 { letter-spacing: -0.5px }
.tighter-1 { letter-spacing: -1px }


/* EXERCISES */

section.wrapper-exercises {
	padding: 5% 20% 0 20%;
}

.flex-exercises {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 42px;
	background-color: #d8f5fe;
}

.flex-exercises .flex-exercises-item { 
	margin: 0 0 16px 0;
	padding: 16px 16px 0 16px;
}



.flex-exercises .flex-exercises-item:first-child { 
	background-color: #0000ff;
	background-image: linear-gradient(#1435b3,#0575e6);
	margin-bottom:0;
	width: 50%;
}

.flex-exercises .flex-exercises-item:last-child { 
	width: 50%;
	padding-left: 26px
}


/* Mobiles */
@media screen and (max-width: 767px) {
	.flex-exercises .flex-exercises-item { width: 100% }
}

.flex-exercises .flex-exercises-item > h3 {
	font-size: calc(18px + (26 - 18) * ((100vw - 320px)/(1600 - 320)));
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	margin: 0 0 8px 0;
	color:#fff;
}

.flex-exercises .flex-exercises-item > p,
.flex-exercises .flex-exercises-item > p b {
	font-size: calc(16px + (19 - 16) * ((100vw - 320px)/(1600 - 320)));
	font-family: 'Roboto', sans-serif;
	margin: 0 0 16px 0;
	line-height: 1.5;
	color:#fff;
}

.flex-exercises .flex-exercises-item h3 > a {
	text-decoration: none;
	color: blue;
	padding-bottom: 3px;
	color:#fff;
}

.flex-exercises .flex-exercises-item > h3 a:link,
.flex-exercises .flex-exercises-item > h3 a:visited {
	border-bottom: solid 2px #fff;
}

.flex-exercises .flex-exercises-item > h3 a:hover,
.flex-exercises .flex-exercises-item > h3 a:active {
	color: lightblue;
	border-bottom: solid 2px lightblue;
}




.flex-exercises .flex-exercises-item .flex-exercises-sub {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.flex-exercises .flex-exercises-item .flex-exercises-sub .flex-exercises-sub-item {
	width: 47%;
	margin-bottom: 32px;
}

.flex-exercises .flex-exercises-item .flex-exercises-sub .flex-exercises-sub-item img { 
	margin: 0 0 8px 0;
	width: 100%;
	height: auto;
}
.flex-exercises .flex-exercises-item .flex-exercises-sub-item a { 
	text-decoration: none;
	margin:  0;
}

.four-samples div a.link-exercise,
a.link-exercise {
	text-decoration: none;
	color:#fff;
	padding: 6px 12px;
	display: inline-block;
	margin:  0;
	font-weight: bold;
}

.four-samples div a.link-exercise { margin-bottom: 20px }


a.link-exercise:link, a.link-exercise:visited {
	background-color: blue;
}

a.link-exercise:hover, a.link-exercise:active {
	background-color: deeppink;
}



.four-samples div span.link-exercise,
span.link-exercise {
	text-decoration: none;
	color:#fff;
	padding: 6px 12px;
	display: inline-block;
	margin:  0;
	font-weight: bold;
}

span.four-samples div span.link-exercise { margin-bottom: 20px }


span.link-exercise {
	background-color: blue;
}