/*@import url("https://fonts.googleapis.com/css?family=Prompt");*/
/*font-family: 'Prompt', sans-serif;*/
/*@import url('https://fonts.googleapis.com/css?family=Maitree');*/
/*font-family: 'Maitree', serif;*/

@font-face {
    font-family: "Prompt";
    src: url("asset/Prompt-Regular.ttf");
}

/*
@font-face {
    font-family: "Maitree";
    src: url("asset/Taviraj-Regular.ttf");
}
*/

.mainMenuItem a#programming {
    border: 2px solid white;
}

.footerMenuItem a#programming {
    color: #ff6600;
}

.subMenuItem a#itecReadEngBook {
    border: 2px solid white;
}

#section01 {
    font-family: 'Prompt', sans-serif;
    position: relative;
    float: left;
	text-align: center;
	color: blue;
	width: 96%;
	padding: 40px 2% 20px 2%;
}

.courseContainner {
    font-family: 'Prompt', sans-serif;
    position: relative;
    float: left;
}

.courseVideo {
    position: relative;
    float: left;
	width: 92%;
	padding: 10px 4% 20px 4%;
}

.courseText {
    position: relative;
    float: left;
	text-align: left;
	width: 92%;
	padding: 0 4% 0 4%;
}

.courseTextDetail {
    font-family: 'Prompt', sans-serif;
}

.courseTextUseful {
	font-family: 'Prompt', sans-serif;
}

.courseTextSpace {
    position: relative;
    float: left;
	width: 100%;
	height: 0px;
}

.hrLarge {
	width: 90%;
}

.hrSmall {
	width: 90%;
}

#itecFacebook {
    font-family: 'Prompt', sans-serif;	position: relative;
	float: none;
	text-align: center;
	widows: 96%;
	padding: 20px 2% 20px 2%;
	word-wrap: break-word;
}

#buttonFooterPage {
    position: relative;
    float: left;
    width: 96%;
    padding: 30px 2% 30px 2%;
}

.buttonFooterCell {
    position: relative;
    float: left;
	margin: 15px 15px;
}

.buttonFooter {
    font-family: 'Prompt', sans-serif;
    text-decoration: none;
    text-align: center;
    color: white;
    background-color: #ff6600;
    padding: 20px;
    border-radius: 8px;
	display: inline-block;
    
    box-shadow: 0px 4px 4px #000000;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.buttonFooter:hover {
    box-shadow: 0px 3px 3px #000000;
    background: #cc5200;
}

.buttonFooter:active {
    box-shadow: 0px 1px 1px #000000;
}

@media (max-width: 414px) {
	.courseContainner {
		width: 96%;
		padding: 20px 2% 20px 2%;
	}

	.hrLarge {
		width: 90%;
	}

	.hrSmall {
		display: block;
	}
}

@media (min-width: 415px) and (max-width: 1023px) {
	.courseContainner {
		width: 96%;
		padding: 20px 2% 20px 2%;
	}

	.hrLarge {
		width: 90%;
	}

	.hrSmall {
		display: block;
	}
}

@media (min-width: 1024px) {
	.courseContainner {
		width: 50%;
		padding: 20px 0% 20px 0%;
	}
	
	.hrLarge {
		width: 95%;
	}

	.hrSmall {
		display: none;
	}
}