section div.introSection{
    background-color: #f5f5f5;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    position: relative;
    overflow: visible;
}

section div.introSection div.introSectionDetails{
    padding: 20px;
}

section div.introSection div.introSectionDetails p.introSectionTitle{
    font-size: 26px;
    color: black;
    font-weight: 600;
    margin-top: 0px;
    margin-bottom: 20px;
}

section div.introSection div.introSectionDetails p.introSectionBody{
    font-size: 20px;
    color: #14213D;
    font-weight: 500;
    margin-bottom: 0px;
}

section div.introSection div.introSectionDetails hr{
    height: 1.5px;
    background-color: #FCA311;
    border: none;
    margin: 0;
}

section div.accessMethodSection{
    width: 100%;
    height: auto;
    position: relative;
}

section div.accessMethodSection div.accessMethodSectionDetails{
    padding: 0px 20px;
}

section div.accessMethodSection div.accessMethodSectionDetails p.accessMethodSectionTitle{
    font-size: 24px;
    color: #14213D;
    font-weight: 600;
}

section div.accessMethodSection div.accessMethodSectionDetails p.accessMethodSectionBody{
    font-size: 20px;
    color: #14213D;
    font-weight: 500;
    margin-bottom: 20px;
}

section div.sectionContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px;
}
 
section div.sectionContainer input#searchbar{
    padding: 8px;
    border-radius: 5px;
    width: 50%;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: none;
    background-color: #f5f5f5;
}

section div.sectionContainer input#searchbar:focus{
    border: 3px solid #FCA311;
    background-color: white;
    padding: 8px;
    font-size: 16px;
}

section div.sectionContainer button.clearButton{
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: transparent 0 0 0 3px,rgba(18, 18, 18, .1) 0 6px 20px;
    box-sizing: border-box;
    color: #14213D;
    cursor: pointer;
    display: inline-flex;
    flex: 1 1 auto;
    font-size: 1.2rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    margin: 20px;
    outline: none;
    padding: 10px 16px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    user-select: none;
    touch-action: manipulation;
}

section div.sectionContainer button.clearButton:hover{
    box-shadow: #14213D 0 0 0 3px, transparent 0 0 0 0;
    padding-left: 45px;
}

section div.sectionContainer button.clearButton span{
    position: absolute;
    opacity: 0;
}

section div.sectionContainer button.clearButton:hover span{
    opacity: 1;
    margin-right: 160px;
}

section div.sectionContainer button.clearButton:focus span{
    animation: rotate 0.5s linear infinite;
}
 
section div.sectionContainer ul#list{
    list-style: none;
    padding: 0;
    margin: 0;
}
 
section div.sectionContainer ul#list li.sections{
    font-size: 1.2em;
    padding: 0px;
    animation: fadeIn 0.5s ease-in-out;
}
 
section div.sectionContainer ul#list li.sections:last-child{
    border-bottom: none;
}

section div.sectionContainer ul#list 
li.sections div.educationalArticlesSection,
li.sections div.explanatoryVideosSection,
li.sections div.websitesSection,
li.sections div.dailyTipsSection,
li.sections div.successStoriesSection,
li.sections div.appliedExercises{
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    background-color: #f5f5f5;
    position: relative;
}

section div.sectionContainer ul#list
li.sections div.educationalArticlesSection div.educationalArticlesSectionDetails,
li.sections div.explanatoryVideosSection div.explanatoryVideosSectionDetails,
li.sections div.websitesSection div.websitesSectionDetails,
li.sections div.dailyTipsSection div.dailyTipsSectionDetails,
li.sections div.successStoriesSection div.successStoriesSectionDetails,
li.sections div.appliedExercises div.appliedExercisesDetails{
    padding: 20px;
}

section div.sectionContainer ul#list
li.sections div.educationalArticlesSection div.educationalArticlesSectionDetails p.educationalArticlesSectionTitle,
li.sections div.explanatoryVideosSection div.explanatoryVideosSectionDetails p.explanatoryVideosSectionTitle,
li.sections div.websitesSection div.websitesSectionDetails p.websitesSectionTitle,
li.sections div.dailyTipsSection div.dailyTipsSectionDetails p.dailyTipsSectionTitle,
li.sections div.successStoriesSection div.successStoriesSectionDetails p.successStoriesSectionTitle,
li.sections div.appliedExercises div.appliedExercisesDetails p.appliedExercisesTitle{
    font-size: 26px;
    color: black;
    font-weight: 600;
    margin-top: 0px;
    margin-bottom: 20px;
}

section div.sectionContainer ul#list
li.sections div.educationalArticlesSection div.educationalArticlesSectionDetails ul.educationalArticlesmidContentSectionBody,
li.sections div.explanatoryVideosSection div.explanatoryVideosSectionDetails ul.explanatoryVideosSectionmidContentBody,
li.sections div.websitesSection div.websitesSectionDetails ul.websitesSectionmidContentBody,
li.sections div.dailyTipsSection div.dailyTipsSectionDetails ul.dailyTipsSectionmidContentBody,
li.sections div.successStoriesSection div.successStoriesSectionDetails ul.successStoriesSectionmidContentBody,
li.sections div.appliedExercises div.appliedExercisesDetails ul.appliedExercisesmidContentBody{
    list-style: none;
    padding: 0px;
    
    li{
		margin-left: .75em;
		margin-right: .75em;
        margin-bottom: 15px;
        font-size: 18px;
	}
	
	&:hover{
		a{
			color: #CCC;
			&:hover{
				color: #14213D;
                font-size: 19px;
				box-shadow: 0 2px 0 0 currentcolor;
			}
		}
	}
}

section div.sectionContainer ul#list
li.sections div.educationalArticlesSection div.educationalArticlesSectionDetails ul.educationalArticlesmidContentSectionBody li a,
li.sections div.explanatoryVideosSection div.explanatoryVideosSectionDetails ul.explanatoryVideosSectionmidContentBody li a,
li.sections div.websitesSection div.websitesSectionDetails ul.websitesSectionmidContentBody li a,
li.sections div.dailyTipsSection div.dailyTipsSectionDetails ul.dailyTipsSectionmidContentBody li a,
li.sections div.successStoriesSection div.successStoriesSectionDetails ul.successStoriesSectionmidContentBody li a,
li.sections div.appliedExercises div.appliedExercisesDetails ul.appliedExercisesmidContentBody li a{
    color: #FCA311;
}

section div.sectionContainer ul#list
li.sections div.educationalArticlesSection div.educationalArticlesSectionDetails ul.educationalArticlesmidContentSectionBody i,
li.sections div.explanatoryVideosSection div.explanatoryVideosSectionDetails ul.explanatoryVideosSectionmidContentBody i,
li.sections div.websitesSection div.websitesSectionDetails ul.websitesSectionmidContentBody i,
li.sections div.dailyTipsSection div.dailyTipsSectionDetails ul.dailyTipsSectionmidContentBody i,
li.sections div.successStoriesSection div.successStoriesSectionDetails ul.successStoriesSectionmidContentBody i,
li.sections div.appliedExercises div.appliedExercisesDetails ul.appliedExercisesmidContentBody i{
    color: #14213D;
    cursor: default;
}

strong{
    user-select: none;
    cursor: default;
    direction: rtl;
    box-shadow: inset 0px 0px 0px 0px #14213D;
    color: #14213D;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

strong:hover{
    color: #fff;
    box-shadow: inset -200px 0px 0px 0px #14213D;
}

strong{
    color: #FCA311;
}


@keyframes fadeIn{
    from{
        opacity: 0;
        transform: translateY(-10px);
    }
 
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


@media screen and (min-width: 1025px){

    section div{
        border-radius: 10px;
    }

    section div.sectionContainer{
        margin-bottom: 0px;
    }
}

@media screen and (max-width: 600px){

    section div.introSection p.introSectionTitle{
        font-size: 2.1em;
    }

    section div.introSection p.introSectionAbout{
        margin-top: 10px;
        font-size: 1em;
    }

    section div.sectionContainer input#searchbar{
        width: 80%;
    }
}