/*

TemplateMo 569 Edu Meeting

https://templatemo.com/tm-569-edu-meeting

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  outline: 0;
}



.main-banner {
  position: relative;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: -7px;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgba(31,39,43,0.75);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

.main-banner2 .caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


.main-banner2 {
  position: relative;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: -7px;
}

#bg-video2 {
    min-width: 100%;
    min-height: 20vh;
    max-width: 10%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}


#bg-video3 {
    min-width: 90%;
    min-height: 36vh;
    max-width: 0%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}


.main-banner3 {
  position: relative;
  max-height: 90%;
  overflow: hidden;
  margin-bottom: -3px;
}


#bg-video2::-webkit-media-controls {
    display: none !important;
}

.video-overlay2 {
    position: absolute;
    background-color: rgba(31,39,43,0.75);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

.video-overlay3 {
    position: absolute;
    background-color: rgba(31,39,43,0.75);
    top: 0;
    left: 0;
    bottom: 0;
    right: 100;
    width: 100%;
}


.main-banner2 .caption2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


.fotosresponsive {
	width: 90VW;
max-width: 100%;
min-width: 320px;
margin:auto;

margin: auto 0;
	overflow: hidden;
}
.img {
width: 100%;


}


.slider-frame2 {
	
	max-width: 1000px;
	min-width: 320px;
	margin: auto;
	width: 560px;
    height: 457px;
	margin:10px auto 0;
	overflow: hidden;
}

.slider-frame2 ul {
	display: flex;
	padding: 0;
	width: 400%;
	
	animation: slide 10s infinite;
}

.slider-frame2 li {
	width: 100%;
	list-style: none;
}

.slider-frame2 img {
	width: 100%;
}

@keyframes slide {
	0% {margin-left: 0;}
	0% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
	
	}
	
	
	
	.slider-frame3 {
	width: 100%;
	
	min-width: 320px;
	
	
    height: 400px;
	margin: 10px auto 0;
	overflow: hidden;
}

.slider-frame3 ul {
	display: flex;
	padding: 0;
	width: 400%;
	
	animation: slide 20s infinite;
}

.slider-frame3 li {
	width: 100%;
	list-style: none;
}

.slider-frame3 img {
	width: 100%;
}

@keyframes slide {
	0% {margin-left: 0;}
	0% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
	
	}