/* 
	TYPOGRAPHY 
*/

@font-face{
	font-family: Caecilia;
	src: url(../fonts/CaeciliaLTPro-46LightItalic.otf);
}
@font-face{
	font-family: Seravek;
	src: url(../fonts/Seravek.ttf);
}
@font-face{
	font-family: SeravekBold;
	src: url(../fonts/Seravek-Bold.ttf);
}
@font-face{
	font-family: SeravekLight;
	src: url(../fonts/Seravek-Light.ttf);
}
.body{
    font-family: 'SeravekLight', sans-serif;
}
.h1,.h2,.h3,.h4,h1,h2,h3,h4{
    font-family: 'SeravekBold', sans-serif;
}
a{
	color:#000;
	text-decoration:underline;
}
a:hover{
	color:#DA5A35;
	text-decoration:none;
}
.text-small{
    font-size:.75rem;
}
.text-large{
    font-size:1.25rem;
}
sup{
	top:-1em;
}
ul{
	padding-left:20px;
}

/* 
	COLORS 
*/

.white{
	color:#fff;
}
.black{
	color:#000;
}
.blue{
	color:#567099;
}
.orange{
	color:#DA5A35;
}
.red{
	color:#E33518;
}
.grey{
	color:#e4e4e4;
}
.bg-white{
	background-color:#fff;
}
.bg-blue{
	background-color:#344e7a;
}
.bg-orange{
	background-color:#DA5A35;
}
.bg-other-blue{
	background-color:#5878a3;
}
.bg-grey{
	background-color:#e4e4e4;
}
.bg-green{
	background-color:#144c3d;
}
.bg-dark-blue{
	background-color:#002b55;
}
.bg-purple{
	background-color:#653b71;
}

/*
	BUTTONS 
*/
.btn{
	font-family:'Caecilia';
	font-weight:bold;
	font-size:28px;
	padding:.375rem 1.75rem;
	text-decoration:none;
}

/* 
	CONTAINER 
*/

.body{
    background:#f0f0f0;
}
.row{
	padding:0 5%
}

/* 
	HEADER 
*/

header{
	padding:15px 0;
}
.logo img{
	height:120px;
}

/*
	PAGE HEADER 
*/
.page-title{
	padding:20px 0;
}
.page-title h1{
	font-family:'Seravek';
	font-size:80px;
	line-height:1.1;
}
.page-title h1 sup{
	font-size:35px;
}
.page-title h2{
	font-family:'Caecilia';
	font-style:italic;
	font-size:40px;
}
.badge{
	position: absolute;
	top:120px;
	left:65%;
	right:auto;
    height: 250px;
    width: 250px;
    padding: 8px;
    color: #fff;
    font-size: 25px;
    line-height: 30px;
    border-radius: 50%;
    border: 4px solid #000;
	transform:rotate(15deg);
}
.badge .text{
	border: 1px solid #000;
    border-radius: 50%;
    height: 225px;
    padding: 20px;
}
.badge .fifteen{
	display: block;
    line-height: 0.75;
    font-size: 90px;
	margin: 10px 0 -30px;
}
.badge #curved{
	font-size:20px;
}

/*
	HERO
*/
.hero{
	background-image:url(../images/Mom-Daughter.jpg);
	background-size:cover;
	background-position:50% 50%;
	padding:30px;
}
.hero img{
	width:100%;
}

/* 
	PAGE
*/
.intro{
	padding-top:40px;
	padding-bottom:40px;
}
.intro p{
	font-size:24px;
}
.intro .btn{
	margin:0 auto;
}
.guide{
	padding-top:40px;
	padding-bottom:40px;
	background-image:url(../images/BlueTeacher-Student.jpg);
	background-size:cover;
	background-position:50% 50%;
}
.guide img{
	width:100%;
}
.guide p{
	font-size:24px;
}
.guide p span{
	font-weight:bold;
}
.guide ul{
	font-size:24px;
	margin-bottom:0;
}
.testimonials{
	padding-top:30px;
	padding-bottom:30px;
	font-size:26px;
}
.curriculum{
	padding-top:40px;
	padding-bottom:40px;
}
.curriculum img{
	width:100%;
}
.curriculum .title{
	margin:0 auto;
	padding:0 30px;
}
.curriculum .level{
	font-weight:bold;
	font-style:italic;
}
/*
	RESPONSIVE STYLES
*/

@media(min-width:1980px){
	.badge{
		left:60%;
	}
}

@media(max-width:970px){
	.badge{
		top:-20px;
		left:auto;
		right:-20px;
		transform:scale(.75) rotate(15deg);
	}
}


@media(max-width:768px){
	.page-title{
		padding-top:50px;
	}
	.page-title h1{
		font-size:50px;
	}
	.page-title h1 sup{
		font-size:25px;
	}
	.hero{
		padding:30px 0;
	}
}

@media(max-width:480px){
	.logo img{
		height:70px;
	}
	.page-title{
		padding-right:15%;
	}
}