.container-fluid{
    padding: 0px; 
    margin: auto;
}


nav.mycolor{
    padding: 0px;
    border: none;
}

h1.heading{
    
    font-family: sans-serif;
    font-size: 30px;
    color:darkslategray;
    margin-left: 4%;
    
}

div.icon{
    float: right;
}

.fas2{
    padding-right: 40px;
    padding-top: 0px;
    margin-top: 0px;
    cursor: pointer;
}

body
{
	margin: auto;
	padding: 0;
	min-height: 100vh;
	display: flex;
	justify-mycontent: center;
	align-items: center;
	font-family: consolas;
}
.containermy
{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-mycontent: space-around;
    padding-left: 40px;
    margin: auto;
}
.containermy .mybox
{
	position: relative;
	width: 280px;
	height: 400px;
	margin: 20px 0;
	mybox-sizing: border-mybox;
	overflow: hidden;

}
.containermy .mybox .imgBx
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	clip-path: circle(400px at center 100px);
	transition: 0.5s;
	transition-delay: 0.5s;
}
.containermy .mybox:hover .imgBx
{
	clip-path: circle(80px at center 100px);
	transition-delay: 0s;
}
.containermy .mybox .imgBx img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.containermy .mybox .mycontent
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 55%;
	padding: 20px;
	mybox-sizing: border-mybox;
	text-align: center;
}
.containermy .mybox .mycontent h2
{
	margin: auto;
	padding: 0;
}
.containermy .mybox .mycontent a
{
	text-decoration: none;
	background: #000;
	color: #fff;
	padding: 5px;
	display: inline-block;
}
.containermy .mybox .mycontent h2,
.containermy .mybox .mycontent p,
.containermy .mybox .mycontent a
{
	opacity: 0;
	transition: 0.5s;
	transform: translateY(20px);
}
.containermy .mybox:hover .mycontent h2
{
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.5s
}
.containermy .mybox:hover .mycontent p
{
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.7s
}
.containermy .mybox:hover .mycontent a
{
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.9s
}

.modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}



.modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}

@media (max-width:600px){.modal-content{margin:0 10px;width:auto!important}.modal{padding-top:30px}}

@media (max-width:768px){.modal-content{width:500px}.modal{padding-top:50px}}
.animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

@media (min-width:993px){.modal-content{width:900px}.hide-large{display:none!important}.sidebar.collapse{display:block!important}}

.display-topright{position:absolute;right:0;top:0}

.center{text-align:center!important}

.transparent,.hover-none:hover{background-color:transparent!important}
.hover-none:hover{box-shadow:none!important}

.padding-64{padding-top:64px!important;padding-bottom:64px!important}

.padding-64{padding-top:64px!important;padding-bottom:64px!important}
.left{float:left!important}

.image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}

.opacity,.hover-opacity:hover{opacity:0.60}.opacity-off,.hover-opacity-off:hover{opacity:1}
.opacity-max{opacity:0.25}





.footsy{
    min-height: 150px;
}


.icon{
    margin-top: 20px;
    text-align: center;
}

.fa{
    margin: 10px;
    color: #fff;
    cursor: pointer;
}

.icon h1{
    margin-top: 30px;
    color: #fff;
    font-family: sans-serif;
    font-size: 12px;
}