/* 1. Enable smooth scrolling */

.grid-container-equal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 10px;
	padding: 10px;
}

.arrow {
	border: solid #1a3661;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
}

.right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.box2 {
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.box2:hover {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	animation-name: example2;
	animation-duration: 0.25s;
	border-left: 8px solid #fdb913;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.boxYellow {
	background-color: #fdb913;
	border: none;
	padding: 10px 28px;
	font-size: 16px;
	border-radius: 100rem;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
}

.boxText {
	border: none;
	background-color: white;
	padding: 14px 28px;
	font-size: 16px;
	cursor: pointer;
	display: inline-block;
	border-radius: 20px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
	transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.center {
	/*display: flex;
    align-items: center;
    justify-content: center; */
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}

.boxText:hover {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	animation-name: example2;
	animation-duration: 0.25s;
	border-left: 8px solid #fdb913;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.grid-container1 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
	grid-gap: 10px;
	margin-left: 100px;
	margin-right: 100px;
}

.grid-container1>div {
	/* background-color: rgba(255, 255, 255, 0.8); */
	/* text-align: center; */
	padding: 10px 0px 10px 0px;
	margin-bottom: 24px;
}

.headingh2 {
	padding-bottom: 0px;
	font-size: 30pt;
	font-weight: 400;
}

.responsiveIntro {
	max-width: 40vh;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.responsive {
	box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
	transition: 0.5s all ease-in-out;
	/*for zooming in when hover, smoothness */
	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.zoonIn {
	transition: 0.5s all ease-in-out;
}

.zoomIn:hover {
	-ms-transform: scale(1.2);
	/* IE 9 */
	-webkit-transform: scale(1.2);
	/* Safari 3-8 */
	transform: scale(1.2);
}

.responsive:hover {
	-ms-transform: scale(1.2);
	/* IE 9 */
	-webkit-transform: scale(1.2);
	/* Safari 3-8 */
	transform: scale(1.2);
}

.responsiveGif {
	/*max-width: 60vh;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    */
	/*max-width:100%; 
    max-height:100%; margin:auto; */
	width: 100%;
	max-width: 60vh;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.boxYellow {
	max-width: -webkit-fill-available;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.test5 {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.responsiveRightBox,
.boxText {
	max-width: 40vh;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.responsiveVideo {
	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.responsive1 {
	/*max-width: 20vh; */
	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

html {
	scroll-behavior: smooth;
}

.item2 {
	margin-bottom: 0px;
}


/* 2. Make nav sticky */

main>nav {
	position: sticky;
	top: 2rem;
	align-self: start;
}


/* 3. ScrollSpy active styles (see JS tab for activation) */

.section-nav li.active>a {
	color: #333;
	font-weight: 500;
}


/* Sidebar Navigation */

.section-nav {
	/*box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px; */
	/*it has cool colour generator*/
	border-top: 18px solid #fdb913 !important;
	border-radius: 10px;
	box-shadow: 0px 4.5px 14px rgba(0, 0, 0, 0.1);
	margin-top: 40px;
	padding-bottom: 20px;
	padding-top: 20px;
	/*
    padding-top:2rem; /*top padding for sidebar*/
}

.section-nav a {
	text-decoration: none;
	display: block;
	padding: .125rem 0;
	color: #ccc;
	transition: all 50ms ease-in-out;
	/* 💡 This small transition makes setting of the active state smooth */
}

.section-nav a:hover,
.section-nav a:focus {
	color: #666;
}

@media only screen and (max-width: 1500px) {
	.video {
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
		height: 0;
	}
	.video iframe {
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	}
}


/*Tablet size*/

@media only screen and (max-width: 768px) {
	.video {
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
		height: 0;
	}
	.video iframe {
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	}
	.section-nav {
		display: none;
	}
	main {
		display: block;
		margin-left: 100px;
		padding-left: 100px;
	}
	.grid-container1 {
		display: block;
		margin-left: 0px;
		margin-right: 0px;
	}
	.grid-container-equal {
		display: block;
	}
	.grid-container2 {
		display: block;
	}
}

@media only screen and (max-width: 1000px) {
	.video {
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
		height: 0;
	}
	.video iframe {
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	}
}

@media only screen and (max-width: 768px) {
	.video {
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
		height: 0;
	}
	.video iframe {
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	}
	.section-nav {
		display: none;
	}
	main {
		display: block;
		margin-left: 50px;
		padding-left: 50px;
	}
	.grid-container1 {
		display: block;
		margin-left: 0px;
		margin-right: 0px;
	}
	.grid-container-equal {
		display: block;
	}
	.grid-container2 {
		display: block;
	}
}

@media only screen and (max-width: 1317px) {
	.section-nav {
		display: none;
	}
	main {
		display: block;
		margin-left: 100px;
		padding-left: 100px;
	}
	.grid-container1 {
		display: block;
		margin-left: 0px;
		margin-right: 0px;
	}
	.grid-container-equal {
		display: block;
	}
}


/*Mobile size */

@media only screen and (max-width: 372px) {
	/*.section-nav {
    display:none;
    } */
	.video {
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
		height: 0;
	}
	.video iframe {
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		position: absolute;
	}
	.section-nav {
		display: none;
	}
	main {
		display: block;
	}
	.grid-container1 {
		display: block;
		margin-right: 0px;
		margin-right: 0px;
	}
	.grid-container1>div {
		padding: 10px 10px;
		margin-bottom: 24px;
	}
	.grid-container2 {
		display: block;
	}
}


/** Poor man's reset **/

* {
	box-sizing: border-box;
}

html,
body {
	background: #fff;
}

ul,
ol {
	list-style: square;
	margin: 0;
	padding: 0;
}

li.li-body {
	margin-left: 1.5rem;
	margin-right: 1.5rem;
	padding-top: 10px;
	padding-bottom: 10px;
}

h1 {
	font-weight: 300;
}


/** page layout **/

main {
	display: grid;
	grid-template-columns: 2fr 1fr;
	/* old line of code*/
	/*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
	margin-left: 30px;
	padding: 10px;
	/*max-width: 100em;
    width: 90%;
    margin: 0 auto; */
}


/** enlarge the sections for this demo, so that we have a long scrollable page **/

section {
	/*padding-bottom: 20rem; */
	padding-bottom: 40px;
}
@media only screen and (max-width: 1831px) {
 


    .dropshadow-img-bigger {
       /* width: 80%;
        max-width: 1200px; */
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        transition: 0.5s all ease-in-out;
    }


    .dropshadow-img-bigger {
        width: 10vw;
        height: 10vw;
    }
}

@media only screen and (max-width: 768px) {
     .dropshadow-img-bigger {
        /*width: 50%;
        max-width: 1200px; */
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        transition: 0.5s all ease-in-out;
    }
	   .dropshadow-img-bigger {
        width: 10vw;
        height: 10vw;
    }
}
.dropshadow-img-bigger {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 7vw;
    height: 7vw;
    webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming)*/
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}