/* Parent Container */

.content_img{

    position: relative;

    width: 200px;

    height: 200px;

    float: left;

    margin-right: 5px;

	margin-bottom:5px; 

}



/* Child Text Container */

.content_img div{

    position: absolute;

    bottom: 10px;

    right: 30px;

    background: green;

    color: white;

    margin-bottom: 5px;

    font-family: 'Roboto', sans-serif;

	font-size: 10px;

    opacity: 0;

    visibility: hidden;
/*
    -webkit-transition: visibility 0s, opacity 0.5s linear;  

    transition: visibility 0s, opacity 0.5s linear;*/

}



/* Hover on Parent Container */

.content_img:hover{

    cursor: pointer;

}    



.content_img:hover div{

    width: 150px;

    padding: 8px 15px;

    visibility: visible;

    opacity: 1;        

}







nav{

position:fixed;

		height: 100px;

		display:flex;

		width: 100%;

		background: #ffffff;

		z-index:9;

		text-align:center;

		color: #f2f2f2;

		

		align-items: center;

		justify-content: space-between;

		display: flex;

		padding-top: 2px;

		padding-bottom:2px;

		padding-left:30px;

}

nav{

top:0px;

}

nav .logo{

  color: #fff;

  font-size: 35px;

  font-weight: 600;

}

nav ul{

      position: fixed;

    display: flex;

    gap: 1em;

    font-size: 10px;

    left: 50%;

}

nav ul li{

display: inline;

    margin: 1px;

    color: #000;

    font-family: Montserrat;

    text-transform: uppercase;

    float: left;

    font-weight: 700;

    list-style: none outside none;

}

nav ul li a{

  margin: 1px;

    color: #999;

    font-family: Montserrat;

    text-transform: uppercase;

    float: left;

    font-weight: 700;

    list-style: none outside none;

	padding: 5px 5px;

    display: block;
	
	font-size: 12px;

}

nav ul li a.active,

nav ul li a:hover{

  color: #8cc63f;

  background: #fff;

}

nav .menu-btn i{

  color: #000;

  font-size: 22px;

  cursor: pointer;

  display: none;

}

input[type="checkbox"]{

  display: none;

}

@media (max-width: 1000px){

  nav{

    padding: 0 40px 0 50px;

  }

}

@media (max-width: 600px){

 input[type="checkbox"]{

  display: none;

}

nav{

padding:20px;

background:#ffffff;

}

}

@media (max-width: 920px) {

  nav .menu-btn i{

    display: block;

  }

  #click:checked ~ .menu-btn i:before{

    content: "\f00d";

  }

  nav ul{

    position: fixed;

    top: 80px;

    left: -100%;

    background: #077705;

    /*height: 100vh;*/

    width: 100%;

    text-align: center;

    display: block;

    transition: all 0.3s ease;

  }

  #click:checked ~ ul{

    left: 0;

  }

  nav ul li{

    width: 100%;

    margin: 2px 0;

  }

  nav ul li a{

    text-decoration: none;

    color: #fff;

    width: 100%;

    margin-left: -100%;

    display: block;

    font-size: 20px;

    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    

  }

  #click:checked ~ ul li a{

    margin-left: 0px;

  }

  nav ul li a.active,

  nav ul li a:hover{

    background: none;

    color: cyan;

  }

}



.content{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  z-index: -1;

  width: 100%;

  padding: 0 30px;

  color: #1b1b1b;

}

.content div{

  font-size: 40px;

  font-weight: 700;

}