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

body {font-family: "aktiv-grotesk-std",sans-serif;
font-style: normal;
font-weight: 300; color:#8e8e8e; -webkit-text-size-adjust: none;}

.top {background:#fff; display:block; overflow:hidden; padding:30px 0}

figure.logo {width:120px; height:129px; float:left;}
header nav {float:right; display:block}
header nav li {display: block; float:left; font-size:16px; font-weight:500}
header nav li a {color:#a8a8a8; text-decoration:none; display:block; padding:50px 20px;}
header nav li a:hover, .active {color:#ffc324}

.banner {position: relative; display:block}
.banner img {margin-top: -50px; max-width:1920px;}
.banner article {width:100%; position:absolute; top:28%}
.banner h1 {font-weight:900; font-size:72px; text-align:center; color:#fff; text-transform:uppercase; line-height:67px; text-shadow:1px 1px 1px #666}
.banner p {font-weight:400; text-align:center; font-size:18px; color:#ffc324; margin-top:20px; text-shadow:1px 1px 1px #666}
.curve {background:url(../img/curve.png); width:212px; height:50px; position:relative; margin:0 auto; z-index:999; display:block}
.curve i {position: absolute; left:65px}

.banner.pres {height:330px; background:url(../img/logo-watermark.png) center no-repeat #28a2df}
.banner.pres2 {height:330px; background:url(../img/logo-watermark.png) center no-repeat #a125fb}

.blue {background:#28a2df}
.pink {background:#fc1897}
.purple {background:#a125fb}
.green {background:#8cbe24;}

.features {display: block; overflow:hidden}
.features article {min-height:150px;}
.features h3 {color:#fff; font-size:33px; font-weight:400; padding:50px 70px;}

.content {display: block; overflow:hidden}
.content p {color:#8e8e8e; font-size:14px; line-height:23px; margin:7px 0; padding:7px 0}
strong {font-weight:700;}

.button {border:0; font-weight:900; font-size:24px; color:#fff; background:#8cbe24; display:inline-block; padding:10px 25px; border-radius:3px; text-decoration:none; text-transform:uppercase; margin:8px 0}
.button:hover {background:#28a2df}

.students {padding: 80px 40px;}
.students h2 {font-weight:900; font-size:48px; color:#fc1897; text-transform:uppercase}
.students h3 {font-weight:300; font-size:24px; max-width:80%}
.students a {font-size: 16px; color:#fc1897; font-weight:500}

.gallery {display: block; margin:30px 0}
.gallery img {border-radius: 3px;}

.meet h1 {font-weight:900; font-size:15px; background:#fc1897; color:#fff; text-transform:uppercase; display:block; padding:10px; border-radius:4px;}
.students-images {display: block; overflow:hidden}
.students-images img {width:auto; display:block; float:left; margin: 20px 10px 20px 0}

.copy {padding: 80px 40px;}

.footer {border-top: 1px solid #eee; display:block; overflow:hidden; background:url(../img/colours.gif) bottom left repeat-x; padding:50px 0; font-size:12px;}
figure.logo-footer {width:73px; float:left;}
footer span {float:left; display:block; padding:30px;}
footer article {float:right; text-align:right}
footer .links a {display: inline-block; padding:10px 0 10px 20px; color:#a1a1a1; text-decoration:none}
footer .links a:hover {color:#28a2df}

footer p {display:block; margin-top:10px;}
footer p a {font-weight:700; color:#28a2df;}

@media screen and (min-width: 200px) and (max-width: 768px) {
.wrapper {width:95%}
figure.logo {float:none; margin:0 auto}
header nav {float:none; margin:20px 0 40px 0; overflow:hidden}
header nav li {width:100%; text-align:center;}
header nav li a {padding: 10px; font-size:22px;}
.banner article {position: relative; background:#eee; margin-top:-50px; padding:90px 0 40px 0}
.banner h1 {font-weight:900; font-size:32px; line-height:34px; color:#424242;}
.banner p {color:#8e8e8e;}
.banner img {margin-top: 0;}
.curve i {top: -50px;}
.students, .copy {padding: 0px 20px;}
.students {padding-top: 30px;}
.copy {padding-bottom: 30px;}
figure.logo-footer {float:none; margin:0 auto 10px;}
footer span {padding: 10px 0; text-align:center; width:100%;}
.links {text-align:center;}
footer .links a {padding: 10px 3px 0 0}
footer p {text-align:center; font-size:16px;}
.features h3 {padding: 30px;}
.students h2 {font-size: 30px}
.students h3 {font-size: 20px; max-width:100%}
.content p {font-size: 16px;}
.flex-direction-nav a {top: 38%;}
.banner.pres {height:auto;}
}

@media screen and (min-width: 1000px) and (max-width: 1300px) {
.wrapper { width: 95%; }
.features h3 {padding:50px 30px; font-size:30px;}
.banner article {top:28%}
}

@media screen and (min-width: 1301px) and (max-width: 1400px) {
.wrapper { width: 95%; }
}