#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
#myImg:hover {
	opacity: 0.7;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0px;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}
@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #ad9033;
  font-size: 60px;
  font-weight: bold;
  transition: 0.3s;
  z-index: 999999;
  opacity: .9;
}
.close:hover,
.close:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.photo_img_size{
	width:100%;
	height: 350px;
	cursor: pointer;
	margin-top: 10px;
	transition:1s;
}
.border_frame{	
	border: 0px solid #ffffff;
	border-radius: 3px;
}
.border_frame:hover{	
	border: 0px solid #ffffff;
	border-radius: 3px;
	box-shadow: 2px 2px 30px 0 rgb(255 255 255 / 100%);
    transition: all ease-in-out 0.1s;
}
.course{
	text-align:center;
	color:green;
}
.course1{
	text-align:center;
}
.cours2{
	margin-top:30px;
}
.cours2{
	position:relative;
	margin-bottom:50px;	
}
.cours3{
	-border:1px solid red;
	position:absolute;
	top:-100px;
	opacity:0;
	-bottom:100px;
	-background-color:rgba(142,198,63,.8);
	background-color:rgba(0,0,0,0.3);
	color:white;
	padding:10p;
}
.cours2:hover .cours3 {
	opacity:1;
	top:0px;
	transition:1s;
}
.cours4{
	position:absolute;
	-border:1px solid red;
	-margin-top:-80px;
	padding-top:20px;
	width:100%;
	height:80px;
	opacity:0;
	bottom:-50px;
	-background-color:rgba(142,198,63,.8);
	background-color:rgba(0,0,0,0.3);
}
.cours2:hover .cours4{
	opacity:1;
	bottom:0;
	transition:1s;
}
.cours2:hover .hover{
	transform:scale(1.3);
	transition:1s;
}
.cours7{
	border:1px solid rgb(73,183,43);
	background-color:rgb(73,183,43);
	color:white;
	font-size:18px;
	padding:10px 15px;
	border-radius:5px 20px;
}
.cours7:hover{
	background-color:transparent;
	color:rgb(73,183,43);
	border:1px solid rgb(73,183,43);
	transition:1s;
}
.cou:hover{
	/*background-color:transparent !important;
	color:#ad9033 !important;
	border:1px solid #ad9033 !important;*/
	cursor: pointer !important;
}
/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #000;
  color: white;
}
/*animation element*/
.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/
.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 2s linear;
  -webkit-transition: all 2s linear;
  -o-transition: all 2s linear;
  transition: all 2s linear;
  -moz-transform: translate3d(-500px, 0px, 0px);
  -webkit-transform: translate3d(-500px, 0px, 0px);
  -o-transform: translate(-500px, 0px);
  -ms-transform: translate(-500px, 0px);
  transform: translate3d(-500px, 0px, 0px);
}
.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
/*animation slide right styled for testimonials*/
.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 2s linear;
  -webkit-transition: all 2s linear;
  -o-transition: all 2s linear;
  transition: all 2s linear;
  -moz-transform: translate3d(500px, 0px, 0px);
  -webkit-transform: translate3d(500px, 0px, 0px);
  -o-transform: translate(500px, 0px);
  -ms-transform: translate(500px, 0px);
  transform: translate3d(500px, 0px, 0px);
}
.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	#myImg {
	  border-radius: 5px;
	  cursor: pointer;
	  transition: 0.3s;
	}
	#myImg:hover {
		opacity: 0.7;
	}
	/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 999999; /* Sit on top */
	  padding-top: 100px; /* Location of the box */
	  left: 0;
	  top: 0px;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	}
	/* Modal Content (image) */
	.modal-content {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	}
	/* Caption of Modal Image */
	#caption {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	  text-align: center;
	  color: #ccc;
	  padding: 10px 0;
	  height: 150px;
	}
	/* Add Animation */
	.modal-content, #caption {  
	  -webkit-animation-name: zoom;
	  -webkit-animation-duration: 0.6s;
	  animation-name: zoom;
	  animation-duration: 0.6s;
	}
	@-webkit-keyframes zoom {
	  from {-webkit-transform:scale(0)} 
	  to {-webkit-transform:scale(1)}
	}
	@keyframes zoom {
	  from {transform:scale(0)} 
	  to {transform:scale(1)}
	}
	/* The Close Button */
	.close {
	  position: absolute;
	  top: 15px;
	  right: 35px;
	  color: #ad9033;
	  font-size: 60px;
	  font-weight: bold;
	  transition: 0.3s;
	  z-index: 999999;
	  opacity: .9;
	}
	.close:hover,
	.close:focus {
	  color: #ffffff;
	  text-decoration: none;
	  cursor: pointer;
	}
	.photo_img_size{
		width:100%;
		height: 250px;
		cursor: pointer;
		margin-top: 10px;
		transition:1s;
	}
	.border_frame{	
		border: 0px solid #ffffff;
		border-radius: 3px;
	}
	.border_frame:hover{	
		border: 0px solid #ffffff;
		border-radius: 3px;
		box-shadow: 2px 2px 30px 0 rgb(255 255 255 / 100%);
		transition: all ease-in-out 0.1s;
	}
	.course{
		text-align:center;
		color:green;
	}
	.course1{
		text-align:center;
	}
	.cours2{
		margin-top:30px;
	}
	.cours2{
		position:relative;
		margin-bottom:50px;	
	}
	.cours3{
		-border:1px solid red;
		position:absolute;
		top:-100px;
		opacity:0;
		-bottom:100px;
		-background-color:rgba(142,198,63,.8);
		background-color:rgba(0,0,0,0.3);
		color:white;
		padding:10p;
	}
	.cours2:hover .cours3 {
		opacity:1;
		top:0px;
		transition:1s;
	}
	.cours4{
		position:absolute;
		-border:1px solid red;
		-margin-top:-80px;
		padding-top:20px;
		width:100%;
		height:80px;
		opacity:0;
		bottom:-50px;
		-background-color:rgba(142,198,63,.8);
		background-color:rgba(0,0,0,0.3);
	}
	.cours2:hover .cours4{
		opacity:1;
		bottom:0;
		transition:1s;
	}
	.cours2:hover .hover{
		transform:scale(1.3);
		transition:1s;
	}
	.cours7{
		border:1px solid rgb(73,183,43);
		background-color:rgb(73,183,43);
		color:white;
		font-size:18px;
		padding:10px 15px;
		border-radius:5px 20px;
	}
	.cours7:hover{
		background-color:transparent;
		color:rgb(73,183,43);
		border:1px solid rgb(73,183,43);
		transition:1s;
	}
	.cou:hover{
		/*background-color:transparent !important;
		color:#ad9033 !important;
		border:1px solid #ad9033 !important;*/
		cursor: pointer !important;
	}
	/* Style the counter cards */
	.card {
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	  padding: 16px;
	  text-align: center;
	  background-color: #000;
	  color: white;
	}
	/*animation element*/
	.animation-element {
	  opacity: 0;
	  position: relative;
	}
	/*animation element sliding left*/
	.animation-element.slide-left {
	  opacity: 0;
	  -moz-transition: all 2s linear;
	  -webkit-transition: all 2s linear;
	  -o-transition: all 2s linear;
	  transition: all 2s linear;
	  -moz-transform: translate3d(-500px, 0px, 0px);
	  -webkit-transform: translate3d(-500px, 0px, 0px);
	  -o-transform: translate(-500px, 0px);
	  -ms-transform: translate(-500px, 0px);
	  transform: translate3d(-500px, 0px, 0px);
	}
	.animation-element.slide-left.in-view {
	  opacity: 1;
	  -moz-transform: translate3d(0px, 0px, 0px);
	  -webkit-transform: translate3d(0px, 0px, 0px);
	  -o-transform: translate(0px, 0px);
	  -ms-transform: translate(0px, 0px);
	  transform: translate3d(0px, 0px, 0px);
	}
	/*animation slide right styled for testimonials*/
	.animation-element.slide-right {
	  opacity: 0;
	  -moz-transition: all 2s linear;
	  -webkit-transition: all 2s linear;
	  -o-transition: all 2s linear;
	  transition: all 2s linear;
	  -moz-transform: translate3d(500px, 0px, 0px);
	  -webkit-transform: translate3d(500px, 0px, 0px);
	  -o-transform: translate(500px, 0px);
	  -ms-transform: translate(500px, 0px);
	  transform: translate3d(500px, 0px, 0px);
	}
	.animation-element.slide-right.in-view {
	  opacity: 1;
	  -moz-transform: translate3d(0px, 0px, 0px);
	  -webkit-transform: translate3d(0px, 0px, 0px);
	  -o-transform: translate(0px, 0px);
	  -ms-transform: translate(0px, 0px);
	  transform: translate3d(0px, 0px, 0px);
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px)and (max-width: 767px) {
	#myImg {
	  border-radius: 5px;
	  cursor: pointer;
	  transition: 0.3s;
	}
	#myImg:hover {
		opacity: 0.7;
	}
	/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 999999; /* Sit on top */
	  padding-top: 100px; /* Location of the box */
	  left: 0;
	  top: 0px;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	}
	/* Modal Content (image) */
	.modal-content {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	}
	/* Caption of Modal Image */
	#caption {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	  text-align: center;
	  color: #ccc;
	  padding: 10px 0;
	  height: 150px;
	}
	/* Add Animation */
	.modal-content, #caption {  
	  -webkit-animation-name: zoom;
	  -webkit-animation-duration: 0.6s;
	  animation-name: zoom;
	  animation-duration: 0.6s;
	}
	@-webkit-keyframes zoom {
	  from {-webkit-transform:scale(0)} 
	  to {-webkit-transform:scale(1)}
	}
	@keyframes zoom {
	  from {transform:scale(0)} 
	  to {transform:scale(1)}
	}
	/* The Close Button */
	.close {
	  position: absolute;
	  top: 15px;
	  right: 35px;
	  color: #ad9033;
	  font-size: 60px;
	  font-weight: bold;
	  transition: 0.3s;
	  z-index: 999999;
	  opacity: .9;
	}
	.close:hover,
	.close:focus {
	  color: #ffffff;
	  text-decoration: none;
	  cursor: pointer;
	}
	.photo_img_size{
		width:100%;
		height: 350px;
		cursor: pointer;
		margin-top: 10px;
		transition:1s;
	}
	.border_frame{	
		border: 0px solid #ffffff;
		border-radius: 3px;
	}
	.border_frame:hover{	
		border: 0px solid #ffffff;
		border-radius: 3px;
		box-shadow: 2px 2px 30px 0 rgb(255 255 255 / 100%);
		transition: all ease-in-out 0.1s;
	}
	.course{
		text-align:center;
		color:green;
	}
	.course1{
		text-align:center;
	}
	.cours2{
		margin-top:30px;
	}
	.cours2{
		position:relative;
		margin-bottom:50px;	
	}
	.cours3{
		-border:1px solid red;
		position:absolute;
		top:-100px;
		opacity:0;
		-bottom:100px;
		-background-color:rgba(142,198,63,.8);
		background-color:rgba(0,0,0,0.3);
		color:white;
		padding:10p;
	}
	.cours2:hover .cours3 {
		opacity:1;
		top:0px;
		transition:1s;
	}
	.cours4{
		position:absolute;
		-border:1px solid red;
		-margin-top:-80px;
		padding-top:20px;
		width:100%;
		height:80px;
		opacity:0;
		bottom:-50px;
		-background-color:rgba(142,198,63,.8);
		background-color:rgba(0,0,0,0.3);
	}
	.cours2:hover .cours4{
		opacity:1;
		bottom:0;
		transition:1s;
	}
	.cours2:hover .hover{
		transform:scale(1.3);
		transition:1s;
	}
	.cours7{
		border:1px solid rgb(73,183,43);
		background-color:rgb(73,183,43);
		color:white;
		font-size:18px;
		padding:10px 15px;
		border-radius:5px 20px;
	}
	.cours7:hover{
		background-color:transparent;
		color:rgb(73,183,43);
		border:1px solid rgb(73,183,43);
		transition:1s;
	}
	.cou:hover{
		/*background-color:transparent !important;
		color:#ad9033 !important;
		border:1px solid #ad9033 !important;*/
		cursor: pointer !important;
	}
	/* Style the counter cards */
	.card {
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	  padding: 16px;
	  text-align: center;
	  background-color: #000;
	  color: white;
	}
	/*animation element*/
	.animation-element {
	  opacity: 0;
	  position: relative;
	}
	/*animation element sliding left*/
	.animation-element.slide-left {
	  opacity: 0;
	  -moz-transition: all 2s linear;
	  -webkit-transition: all 2s linear;
	  -o-transition: all 2s linear;
	  transition: all 2s linear;
	  -moz-transform: translate3d(-500px, 0px, 0px);
	  -webkit-transform: translate3d(-500px, 0px, 0px);
	  -o-transform: translate(-500px, 0px);
	  -ms-transform: translate(-500px, 0px);
	  transform: translate3d(-500px, 0px, 0px);
	}
	.animation-element.slide-left.in-view {
	  opacity: 1;
	  -moz-transform: translate3d(0px, 0px, 0px);
	  -webkit-transform: translate3d(0px, 0px, 0px);
	  -o-transform: translate(0px, 0px);
	  -ms-transform: translate(0px, 0px);
	  transform: translate3d(0px, 0px, 0px);
	}
	/*animation slide right styled for testimonials*/
	.animation-element.slide-right {
	  opacity: 0;
	  -moz-transition: all 2s linear;
	  -webkit-transition: all 2s linear;
	  -o-transition: all 2s linear;
	  transition: all 2s linear;
	  -moz-transform: translate3d(500px, 0px, 0px);
	  -webkit-transform: translate3d(500px, 0px, 0px);
	  -o-transform: translate(500px, 0px);
	  -ms-transform: translate(500px, 0px);
	  transform: translate3d(500px, 0px, 0px);
	}
	.animation-element.slide-right.in-view {
	  opacity: 1;
	  -moz-transform: translate3d(0px, 0px, 0px);
	  -webkit-transform: translate3d(0px, 0px, 0px);
	  -o-transform: translate(0px, 0px);
	  -ms-transform: translate(0px, 0px);
	  transform: translate3d(0px, 0px, 0px);
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px)and (max-width: 991px) {
	#myImg {
	  border-radius: 5px;
	  cursor: pointer;
	  transition: 0.3s;
	}
	#myImg:hover {
		opacity: 0.7;
	}
	/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 999999; /* Sit on top */
	  padding-top: 100px; /* Location of the box */
	  left: 0;
	  top: 0px;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	}
	/* Modal Content (image) */
	.modal-content {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	}
	/* Caption of Modal Image */
	#caption {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	  text-align: center;
	  color: #ccc;
	  padding: 10px 0;
	  height: 150px;
	}
	/* Add Animation */
	.modal-content, #caption {  
	  -webkit-animation-name: zoom;
	  -webkit-animation-duration: 0.6s;
	  animation-name: zoom;
	  animation-duration: 0.6s;
	}
	@-webkit-keyframes zoom {
	  from {-webkit-transform:scale(0)} 
	  to {-webkit-transform:scale(1)}
	}
	@keyframes zoom {
	  from {transform:scale(0)} 
	  to {transform:scale(1)}
	}
	/* The Close Button */
	.close {
	  position: absolute;
	  top: 15px;
	  right: 35px;
	  color: #ad9033;
	  font-size: 60px;
	  font-weight: bold;
	  transition: 0.3s;
	  z-index: 999999;
	  opacity: .9;
	}
	.close:hover,
	.close:focus {
	  color: #ffffff;
	  text-decoration: none;
	  cursor: pointer;
	}
	.photo_img_size{
		width:100%;
		height: 350px;
		cursor: pointer;
		margin-top: 10px;
		transition:1s;
	}
	.border_frame{	
		border: 0px solid #ffffff;
		border-radius: 3px;
	}
	.border_frame:hover{	
		border: 0px solid #ffffff;
		border-radius: 3px;
		box-shadow: 2px 2px 30px 0 rgb(255 255 255 / 100%);
		transition: all ease-in-out 0.1s;
	}
	.course{
		text-align:center;
		color:green;
	}
	.course1{
		text-align:center;
	}
	.cours2{
		margin-top:30px;
	}
	.cours2{
		position:relative;
		margin-bottom:50px;	
	}
	.cours3{
		-border:1px solid red;
		position:absolute;
		top:-100px;
		opacity:0;
		-bottom:100px;
		-background-color:rgba(142,198,63,.8);
		background-color:rgba(0,0,0,0.3);
		color:white;
		padding:10p;
	}
	.cours2:hover .cours3 {
		opacity:1;
		top:0px;
		transition:1s;
	}
	.cours4{
		position:absolute;
		-border:1px solid red;
		-margin-top:-80px;
		padding-top:20px;
		width:100%;
		height:80px;
		opacity:0;
		bottom:-50px;
		-background-color:rgba(142,198,63,.8);
		background-color:rgba(0,0,0,0.3);
	}
	.cours2:hover .cours4{
		opacity:1;
		bottom:0;
		transition:1s;
	}
	.cours2:hover .hover{
		transform:scale(1.3);
		transition:1s;
	}
	.cours7{
		border:1px solid rgb(73,183,43);
		background-color:rgb(73,183,43);
		color:white;
		font-size:18px;
		padding:10px 15px;
		border-radius:5px 20px;
	}
	.cours7:hover{
		background-color:transparent;
		color:rgb(73,183,43);
		border:1px solid rgb(73,183,43);
		transition:1s;
	}
	.cou:hover{
		/*background-color:transparent !important;
		color:#ad9033 !important;
		border:1px solid #ad9033 !important;*/
		cursor: pointer !important;
	}
	/* Style the counter cards */
	.card {
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	  padding: 16px;
	  text-align: center;
	  background-color: #000;
	  color: white;
	}
	/*animation element*/
	.animation-element {
	  opacity: 0;
	  position: relative;
	}
	/*animation element sliding left*/
	.animation-element.slide-left {
	  opacity: 0;
	  -moz-transition: all 2s linear;
	  -webkit-transition: all 2s linear;
	  -o-transition: all 2s linear;
	  transition: all 2s linear;
	  -moz-transform: translate3d(-500px, 0px, 0px);
	  -webkit-transform: translate3d(-500px, 0px, 0px);
	  -o-transform: translate(-500px, 0px);
	  -ms-transform: translate(-500px, 0px);
	  transform: translate3d(-500px, 0px, 0px);
	}
	.animation-element.slide-left.in-view {
	  opacity: 1;
	  -moz-transform: translate3d(0px, 0px, 0px);
	  -webkit-transform: translate3d(0px, 0px, 0px);
	  -o-transform: translate(0px, 0px);
	  -ms-transform: translate(0px, 0px);
	  transform: translate3d(0px, 0px, 0px);
	}
	/*animation slide right styled for testimonials*/
	.animation-element.slide-right {
	  opacity: 0;
	  -moz-transition: all 2s linear;
	  -webkit-transition: all 2s linear;
	  -o-transition: all 2s linear;
	  transition: all 2s linear;
	  -moz-transform: translate3d(500px, 0px, 0px);
	  -webkit-transform: translate3d(500px, 0px, 0px);
	  -o-transform: translate(500px, 0px);
	  -ms-transform: translate(500px, 0px);
	  transform: translate3d(500px, 0px, 0px);
	}
	.animation-element.slide-right.in-view {
	  opacity: 1;
	  -moz-transform: translate3d(0px, 0px, 0px);
	  -webkit-transform: translate3d(0px, 0px, 0px);
	  -o-transform: translate(0px, 0px);
	  -ms-transform: translate(0px, 0px);
	  transform: translate3d(0px, 0px, 0px);
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	#myImg {
	  border-radius: 5px;
	  cursor: pointer;
	  transition: 0.3s;
	}
	#myImg:hover {
		opacity: 0.7;
	}
	/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 999999; /* Sit on top */
	  padding-top: 100px; /* Location of the box */
	  left: 0;
	  top: 0px;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	}
	/* Modal Content (image) */
	.modal-content {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	}
	/* Caption of Modal Image */
	#caption {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	  text-align: center;
	  color: #ccc;
	  padding: 10px 0;
	  height: 150px;
	}
	/* Add Animation */
	.modal-content, #caption {  
	  -webkit-animation-name: zoom;
	  -webkit-animation-duration: 0.6s;
	  animation-name: zoom;
	  animation-duration: 0.6s;
	}
	@-webkit-keyframes zoom {
	  from {-webkit-transform:scale(0)} 
	  to {-webkit-transform:scale(1)}
	}
	@keyframes zoom {
	  from {transform:scale(0)} 
	  to {transform:scale(1)}
	}
	/* The Close Button */
	.close {
	  position: absolute;
	  top: 15px;
	  right: 35px;
	  color: #ad9033;
	  font-size: 60px;
	  font-weight: bold;
	  transition: 0.3s;
	  z-index: 999999;
	  opacity: .9;
	}
	.close:hover,
	.close:focus {
	  color: #ffffff;
	  text-decoration: none;
	  cursor: pointer;
	}
	.photo_img_size{
		width:100%;
		height: 300px;
		cursor: pointer;
		margin-top: 10px;
		transition:1s;
	}
	.border_frame{	
		border: 0px solid #ffffff;
		border-radius: 3px;
	}
	.border_frame:hover{	
		border: 0px solid #ffffff;
		border-radius: 3px;
		box-shadow: 2px 2px 30px 0 rgb(255 255 255 / 100%);
		transition: all ease-in-out 0.1s;
	}
	.course{
		text-align:center;
		color:green;
	}
	.course1{
		text-align:center;
	}
	.cours2{
		margin-top:30px;
	}
	.cours2{
		position:relative;
		margin-bottom:50px;	
	}
	.cours3{
		-border:1px solid red;
		position:absolute;
		top:-100px;
		opacity:0;
		-bottom:100px;
		-background-color:rgba(142,198,63,.8);
		background-color:rgba(0,0,0,0.3);
		color:white;
		padding:10p;
	}
	.cours2:hover .cours3 {
		opacity:1;
		top:0px;
		transition:1s;
	}
	.cours4{
		position:absolute;
		-border:1px solid red;
		-margin-top:-80px;
		padding-top:20px;
		width:100%;
		height:80px;
		opacity:0;
		bottom:-50px;
		-background-color:rgba(142,198,63,.8);
		background-color:rgba(0,0,0,0.3);
	}
	.cours2:hover .cours4{
		opacity:1;
		bottom:0;
		transition:1s;
	}
	.cours2:hover .hover{
		transform:scale(1.3);
		transition:1s;
	}
	.cours7{
		border:1px solid rgb(73,183,43);
		background-color:rgb(73,183,43);
		color:white;
		font-size:18px;
		padding:10px 15px;
		border-radius:5px 20px;
	}
	.cours7:hover{
		background-color:transparent;
		color:rgb(73,183,43);
		border:1px solid rgb(73,183,43);
		transition:1s;
	}
	.cou:hover{
		/*background-color:transparent !important;
		color:#ad9033 !important;
		border:1px solid #ad9033 !important;*/
		cursor: pointer !important;
	}
	/* Style the counter cards */
	.card {
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	  padding: 16px;
	  text-align: center;
	  background-color: #000;
	  color: white;
	}
	/*animation element*/
	.animation-element {
	  opacity: 0;
	  position: relative;
	}
	/*animation element sliding left*/
	.animation-element.slide-left {
	  opacity: 0;
	  -moz-transition: all 2s linear;
	  -webkit-transition: all 2s linear;
	  -o-transition: all 2s linear;
	  transition: all 2s linear;
	  -moz-transform: translate3d(-500px, 0px, 0px);
	  -webkit-transform: translate3d(-500px, 0px, 0px);
	  -o-transform: translate(-500px, 0px);
	  -ms-transform: translate(-500px, 0px);
	  transform: translate3d(-500px, 0px, 0px);
	}
	.animation-element.slide-left.in-view {
	  opacity: 1;
	  -moz-transform: translate3d(0px, 0px, 0px);
	  -webkit-transform: translate3d(0px, 0px, 0px);
	  -o-transform: translate(0px, 0px);
	  -ms-transform: translate(0px, 0px);
	  transform: translate3d(0px, 0px, 0px);
	}
	/*animation slide right styled for testimonials*/
	.animation-element.slide-right {
	  opacity: 0;
	  -moz-transition: all 2s linear;
	  -webkit-transition: all 2s linear;
	  -o-transition: all 2s linear;
	  transition: all 2s linear;
	  -moz-transform: translate3d(500px, 0px, 0px);
	  -webkit-transform: translate3d(500px, 0px, 0px);
	  -o-transform: translate(500px, 0px);
	  -ms-transform: translate(500px, 0px);
	  transform: translate3d(500px, 0px, 0px);
	}
	.animation-element.slide-right.in-view {
	  opacity: 1;
	  -moz-transform: translate3d(0px, 0px, 0px);
	  -webkit-transform: translate3d(0px, 0px, 0px);
	  -o-transform: translate(0px, 0px);
	  -ms-transform: translate(0px, 0px);
	  transform: translate3d(0px, 0px, 0px);
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	#myImg {
	  border-radius: 5px;
	  cursor: pointer;
	  transition: 0.3s;
	}
	#myImg:hover {
		opacity: 0.7;
	}
	/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 999999; /* Sit on top */
	  padding-top: 100px; /* Location of the box */
	  left: 0;
	  top: 0px;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	}
	/* Modal Content (image) */
	.modal-content {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	}
	/* Caption of Modal Image */
	#caption {
	  margin: auto;
	  display: block;
	  width: 80%;
	  max-width: 700px;
	  text-align: center;
	  color: #ccc;
	  padding: 10px 0;
	  height: 150px;
	}
	/* Add Animation */
	.modal-content, #caption {  
	  -webkit-animation-name: zoom;
	  -webkit-animation-duration: 0.6s;
	  animation-name: zoom;
	  animation-duration: 0.6s;
	}
	@-webkit-keyframes zoom {
	  from {-webkit-transform:scale(0)} 
	  to {-webkit-transform:scale(1)}
	}
	@keyframes zoom {
	  from {transform:scale(0)} 
	  to {transform:scale(1)}
	}
	/* The Close Button */
	.close {
	  position: absolute;
	  top: 15px;
	  right: 35px;
	  color: #ad9033;
	  font-size: 60px;
	  font-weight: bold;
	  transition: 0.3s;
	  z-index: 999999;
	  opacity: .9;
	}
	.close:hover,
	.close:focus {
	  color: #ffffff;
	  text-decoration: none;
	  cursor: pointer;
	}
	.photo_img_size{
		width:100%;
		height: 350px;
		cursor: pointer;
		margin-top: 10px;
		transition:1s;
	}
	.border_frame{	
		border: 0px solid #ffffff;
		border-radius: 3px;
	}
	.border_frame:hover{	
		border: 0px solid #ffffff;
		border-radius: 3px;
		box-shadow: 2px 2px 30px 0 rgb(255 255 255 / 100%);
		transition: all ease-in-out 0.1s;
	}
	.course{
		text-align:center;
		color:green;
	}
	.course1{
		text-align:center;
	}
	.cours2{
		margin-top:30px;
	}
	.cours2{
		position:relative;
		margin-bottom:50px;	
	}
	.cours3{
		-border:1px solid red;
		position:absolute;
		top:-100px;
		opacity:0;
		-bottom:100px;
		-background-color:rgba(142,198,63,.8);
		background-color:rgba(0,0,0,0.3);
		color:white;
		padding:10p;
	}
	.cours2:hover .cours3 {
		opacity:1;
		top:0px;
		transition:1s;
	}
	.cours4{
		position:absolute;
		-border:1px solid red;
		-margin-top:-80px;
		padding-top:20px;
		width:100%;
		height:80px;
		opacity:0;
		bottom:-50px;
		-background-color:rgba(142,198,63,.8);
		background-color:rgba(0,0,0,0.3);
	}
	.cours2:hover .cours4{
		opacity:1;
		bottom:0;
		transition:1s;
	}
	.cours2:hover .hover{
		transform:scale(1.3);
		transition:1s;
	}
	.cours7{
		border:1px solid rgb(73,183,43);
		background-color:rgb(73,183,43);
		color:white;
		font-size:18px;
		padding:10px 15px;
		border-radius:5px 20px;
	}
	.cours7:hover{
		background-color:transparent;
		color:rgb(73,183,43);
		border:1px solid rgb(73,183,43);
		transition:1s;
	}
	.cou:hover{
		/*background-color:transparent !important;
		color:#ad9033 !important;
		border:1px solid #ad9033 !important;*/
		cursor: pointer !important;
	}
	/* Style the counter cards */
	.card {
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	  padding: 16px;
	  text-align: center;
	  background-color: #000;
	  color: white;
	}
	/*animation element*/
	.animation-element {
	  opacity: 0;
	  position: relative;
	}
	/*animation element sliding left*/
	.animation-element.slide-left {
	  opacity: 0;
	  -moz-transition: all 2s linear;
	  -webkit-transition: all 2s linear;
	  -o-transition: all 2s linear;
	  transition: all 2s linear;
	  -moz-transform: translate3d(-500px, 0px, 0px);
	  -webkit-transform: translate3d(-500px, 0px, 0px);
	  -o-transform: translate(-500px, 0px);
	  -ms-transform: translate(-500px, 0px);
	  transform: translate3d(-500px, 0px, 0px);
	}
	.animation-element.slide-left.in-view {
	  opacity: 1;
	  -moz-transform: translate3d(0px, 0px, 0px);
	  -webkit-transform: translate3d(0px, 0px, 0px);
	  -o-transform: translate(0px, 0px);
	  -ms-transform: translate(0px, 0px);
	  transform: translate3d(0px, 0px, 0px);
	}
	/*animation slide right styled for testimonials*/
	.animation-element.slide-right {
	  opacity: 0;
	  -moz-transition: all 2s linear;
	  -webkit-transition: all 2s linear;
	  -o-transition: all 2s linear;
	  transition: all 2s linear;
	  -moz-transform: translate3d(500px, 0px, 0px);
	  -webkit-transform: translate3d(500px, 0px, 0px);
	  -o-transform: translate(500px, 0px);
	  -ms-transform: translate(500px, 0px);
	  transform: translate3d(500px, 0px, 0px);
	}
	.animation-element.slide-right.in-view {
	  opacity: 1;
	  -moz-transform: translate3d(0px, 0px, 0px);
	  -webkit-transform: translate3d(0px, 0px, 0px);
	  -o-transform: translate(0px, 0px);
	  -ms-transform: translate(0px, 0px);
	  transform: translate3d(0px, 0px, 0px);
	}
}