:root{
	--darkpink:#E94E77;
	--lighttan:#EEEBE6;
	--rose:#D68189;
	--tan:#C6A49A;
	--bluegreen:#C6E5D9;
	--ivory:#E3CFB4;
}

/****overall**/
body{
	font-family: 'Roboto', sans-serif;
	margin:0;
}

img {
	width:100%;
}

h1{
	font-family: 'Aubrey', cursive;
	font-size:48px;
	text-align:center;
}

p{
	font-size:18px;
}


/**header**/
header{
	background-color:white;
	padding:20px 30px;
	
	/**FLEXBOX**/
	/**display:flex;
	justify-content:space-between;**/
	
	/**
	position:fixed;
	width:calc(100% - 30px);
	top:0;
	left:0;
	z-index:1;
	
	box-shadow:0 0 15px rgba(0,0,0,.3);
	**/
	
	/**FLOAT**/
	overflow:hidden; 
}

#logo-container{
	width:400px;
	
	/**FLOAT**/
	float:left;
}


header img.dark-version{
	display:none;
}

header.dark img.light-version{
	display:none;
}

header.dark img.dark-version{
	display:inherit;
}

header.dark{
	background-color:var(--tan);
}





nav ul {
	/**FLEXBOX**/
	/**display:flex;**/
	
	/**FLOAT**/
	float:right;
	padding-right:30px;
}

header nav ul li {
	list-style:none;
	margin-left:20px;
	
	/**FLOAT**/
	display: inline-block;
}

header nav ul li a {
	background-color:var(--rose);
	text-decoration:none;
	color:white;
	padding:15px 20px;
	border-radius:10px;
	position:relative;
	top:0;
	transition:top .2s;
}

header nav ul li a:hover{
	background-color:var(--darkpink);
	top:-10px;
}

/*index.html *****/

/****sections****/

.section {
	padding: 60px 0;
}

.main-container{
	width:1100px;
	margin: 0 auto;
}

.bgcolor{
    background-color: red;
	
}

h2.section-title{
	
}

p.section-subtitle{
	
}

/* feratured lesson *********/
.featured-container{
	
}

.featured-img img  {
	
}

.featured-desc {
	
}

.featured-cta{
	
}

.featured-cta sup{
	
}

.price{
	
}

.price span{
	
}

a.button{
	
}

a.button:hover{
	
}

/**masterclass**/
.card-container{
	
}

.lesson-card {
	
}

.card img{

}

.card h3{

}

.card p {

}

.skill-level{

}

.skill {
	
}


/*page-title *****/
section.page-title {
	
}

section.page-title h1{

}



/** ABOUT PAGE **/
.masters-container{
	
}

.masters-content{
	
}

.masters-content.cont1 {
	

}

.masters-content.cont2 {
	

}

.about-content h3,
.about-content small{
	
}

.masters-content img{
	
}


.schoolmasters-container{
	
}

.headmaster {
	
}

.headmaster img {
	
}

.lessonmasters {
	
}

.lessonmaster-content{
	
}

.lessonmaster-content img{
	
}

.lessonmaster-content img:hover{
	
}


/* footer *****/
footer{
	background-color:var(--tan);
	padding:10px 30px;
	
	/**display:flex;
	justify-content:space-between;
	align-items:center;**/
}

footer img{
	width:200px;
	margin-right:10px;
}

footer p{
	font-size:12px;
	margin-left:auto;
}