*{box-sizing:border-box}
html, body, div, span, applet, object, iframe, p, a,  acronym, address,  cite, del, dfn, img, ins, kbd, q,  samp,  strike, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
body {
background: linear-gradient(to right, #c4036a 0%,#990369 43%,#640070 100%);
margin: 2em 0;
font-family: 'Source Sans Pro', sans-serif; font-size: 1.5rem;
color: #333;
}
.wrapper{padding: 0 0 300px 0;  max-width: 1600px; margin: 0 auto; width: 90%; background-image: url('/img/itf/bottom.jpg'); background-position: bottom; background-repeat: no-repeat;}
.top, .program, .enrol, .contacts  {margin-bottom: 5em; position: relative; padding-bottom: 2em;}
.program, .enrol, .contacts {padding-top: 4em;}
.top {background: #293149; color: white; z-index: 10;}
.program {background: white; z-index: 8; top: -5em;}
.enrol {background: #f8b8f7; z-index: 6; top: -10em;}
.contacts {background: #b2a8ee; z-index: 4; top: -15em;}
.top:before, .program:before, .enrol:before, .contacts:before {
	content: ""; 
	border: solid transparent;
	position: absolute; 
 	top: 100%;
	left: calc(50% - 3em);
	border-width: 3em;
	margin-left: -1px;
}
.top:before {border-top-color: #293149;}
.program:before {border-top-color: white;}
.enrol:before {border-top-color: #f8b8f7;}
.contacts:before {border-top-color: #b2a8ee;}
.top a {color: white; text-decoration: none;}
.contacts a {text-decoration: none;}
.top h1 a {color: #e2915f; font-size: 80%;}
h1, h2, h3, .top p, h4 {text-align: center;}
p, h4 {margin: 1em;}
h1 {color: #cd5ea0; font-size: 240%;}
h2 {color: #e2915f; font-size: 180%;}
h3 {color: #293149; font-size: 160%;}
h4, h4 a {color: #5c5f9d; font-size: 120%;}
.h4 {color: #5c5f9d; font-size: 120%; font-weight: bold;}
#program .flexbox {margin: 1em}
#program .flexbox p {width: calc(100% - 180px); text-align: justify;}
.floatleft{float:left; margin:0 1em 1em 1em; clear: both;}
.center {text-align: center;}
.w120 {width: 120px;}
.accent {font-size: 120%; color: #c4036a;}
.accent1 {font-size: 120%; color: #640070;}
@media screen and (max-width: 800px) {
    .floatleft{ margin:0 0.5em 0.5em 0.5em;}
    #program .flexbox p {width: calc(100%); text-align: left;}
    p, .accent, .accent1 {font-size: 80%;}
    .top h1 a {font-size: 60%;}
}