/*-----------------------------------------------------------------------------------

	Theme Name: Canvas
	Theme URI: http://themes.semicolonweb.com/html/canvas
	Description: The Multi-Purpose Template
	Author: SemiColonWeb
	Author URI: http://themeforest.net/user/semicolonweb
	Version: 5.9

-----------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

#my-logo {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 270px !important;
	z-index: 400;
}
#my-logo a {
}
#my-logo img {
	position: relative;
	left: -50%;
	width: 270px !important;
}
#home-title {
	display: block;
	position: absolute;
	top: 0;
	left: 20px;
	right: 20px;
}
#home-title h1 {
	font-family: 'Merriweather', serif;
	font-size: 20px;
	font-weight: 900;
	color: #172983;
	text-align: center;
	margin-top: 200px;
	background-color: rgba(255,255,255,0.5);
	padding: 10px;
}
#home-subtitle {
	width: 100%;
	margin: 0 20px;
}
#header-wrap {
	border-bottom: 0px !important;
}
.primary-menu {
	z-index: 1000 !important;
}
.full-header .primary-menu .menu-container {
	border-right: none;
}
.menu-link {
	font-family: 'Merriweather', serif;
	font-size: 15px;
	font-weight: 700;
	color: #425099;
	letter-spacing: 0;
}
.menu-item:hover > .menu-link, 
.menu-item.current > .menu-link {
	color: #ED7F00;	
}
.dark .menu-item:hover > .menu-link, 
.dark .menu-item.current > .menu-link {
	color: #ED7F00;	
}

#content {
	background-color: rgba(0,0,0,0) !important;
}

h1 {
	font-family: 'Merriweather', serif;
	text-transform: none !important;
	font-weight: 700 !important;	
}
h2, h3 {
	font-family: 'Merriweather', serif;
	font-weight: 700 !important;	
	color: #172983;
}
h2 {
	font-size: 24px;
}
h3 {
	font-size: 18px;
}
p {
	font-family: 'Merriweather', serif;
}
.home-slider {
	min-height: 800px !important;
}
.home-slider h2 {
	font-family: 'Merriweather', serif;
	font-size: 20px;
	font-weight: 900;
	color: #fff;
	padding-top: 0px;
	margin-top: 40px;
	background-color: rgba(164,2,125,0.7);
	padding: 10px;
}

.bg-blue {
	background-color: #172983 !important;
}
.bg-light-blue {
	background-color: #008acf !important;
}
.bg-yellow {
	background-color: #fed125 !important;
}

.lector-box h3 {
	font-family: 'Merriweather', serif;
	font-size: 14px;
	font-weight: 900;	
	color: #172983;
	margin: 10px 0 0 0;
	line-height: 1.2;
}

.lector-box p {
	font-family: 'Merriweather', serif;
	font-size: 12px;
	font-weight: 300;	
	color: #172983;
	margin: 5px 0 0 0;
	line-height: 1.3 !important;
}

.timetable-left h3 {
	font-family: 'Merriweather', serif;
	font-size: 22px;
	font-weight: 900;	
	color: #fff;
	margin: 10px 0 10px 0;
	line-height: 1.2;
}

.timetable-left p {
	font-family: 'Merriweather', serif;
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	margin: 0 0 10px 0;
	line-height: 1.1;		
}
.timetable-right h4 {
	font-family: 'Merriweather', serif;
	font-size: 18px;
	font-weight: 900;	
	color: #172983;
	line-height: 1.3;
	text-align: left;
	margin-bottom:20px;
}

.timetable-lector h3 {
	font-family: 'Merriweather', serif;
	font-size: 14px;
	font-weight: 900;	
	color: #fff;
	margin: 10px 0 0 0;
	line-height: 1.3;
	text-align: center;
}
.timetable-lector p {
	font-family: 'Merriweather', serif;
	font-size: 9px;
	font-weight: 300;	
	color: #fff;
	margin: 5px 0 0 0;
	line-height: 1.5 !important;
	text-align: center;
}

/* ----------------------------------------------------------------
	Responsive CSS - Breakpoints
-----------------------------------------------------------------*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	#my-logo {
		width: 450px !important;
	}
	#my-logo img {
		width: 450px !important;
	}

	#home-title h1 {
		font-size: 24px;
			margin-top: 300px;
	}
	.home-slider {
		min-height: 1100px !important;
	}
	.home-slider h2 {
		font-size: 24px;
	}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.lector-box h3 {
		font-size: 15px;
	}
		
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

	.header-wrap-home {
		height: 190px !important;
	}
	#my-logo {
		display: block;
		position: absolute;
		top: 100px;
		left: 20px;		
	}

	#my-logo img {
		left: 0;
		width: 480px !important;
	}
	.menu-link {
		font-size: 13px;
		padding-left: 10px;
		padding-right: 10px;
	}
	#home-title {
		left: auto;
		top: 0;
		right: 40px;
		width: 500px;
	}
	#home-title h1 {
		font-size: 25px;
		margin-top: 30px;
		color: #fff;
		padding-top: 100px;
		background-color: rgba(255,255,255,0);
		text-shadow: 3px 1px 7px #000;
	}
	#home-subtitle {
		width: 60%;
		margin: 0 auto;
		margin-top: 400px;
	}
	.home-slider h2 {
		font-size: 36px;
		margin-bottom: 5px;
	}

	.lector-box h3 {
		font-size: 15px;
	}

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

	#my-logo {
		width: 550px !important;
	}
	#my-logo img {
		width: 550px !important;
	}
	.menu-link {
		font-size: 15px;
		padding-left: 10px;
		padding-right: 10px;
	}

	#home-title {
		width: 700px;
		right: 10px;
	}

	#home-title h1 {
		font-size: 30px;
		padding-top: 100px;
	}
	#home-subtitle {
		width: 70%;
		margin: 0 auto;
		margin-top: 450px;
	}
	.home-slider h2 {
		font-size: 34px;
		margin-top: 300px;
	}

	.lector-box h3 {
		font-size: 18px;
	}
	
}

/* MY Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1440px) {

	#my-logo {
		width: 640px !important;
	}
	#my-logo img {
		width: 640px !important;
	}

	.home-slider h2 {
		font-size: 24px;
		margin-top: 350px;
	}

	#home-title {
		width: 700px;
		right: 60px;
	}
	
	#home-title h1 {
		font-size: 20px;
		padding-top: 100px;
	}
		
}


/* ----------------------------------------------------------------
	Responsive CSS - Single Segment of Screen Sizes
-----------------------------------------------------------------*/

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
	
 }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
	
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
	
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) {
	
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {

}



/* ----------------------------------------------------------------
	Retina CSS
-----------------------------------------------------------------*/

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 991.98px),
only screen and (   min--moz-device-pixel-ratio: 2) and (max-width: 991.98px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and (max-width: 991.98px),
only screen and (        min-device-pixel-ratio: 2) and (max-width: 991.98px),
only screen and (                min-resolution: 192dpi) and (max-width: 991.98px),
only screen and (                min-resolution: 2dppx) and (max-width: 991.98px) {

}