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

	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');

#logo {
	display: block;
	position: absolute;
	top: 0;
	left: 20px;		
}
#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;
	padding-top: 170px;
}
#logo img {
	height: 150px !important;
}
#header-wrap {
	border-bottom: 0px !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: #A4027D;
	padding-top: 0px;
	margin-top: 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) {
	#logo img {
		height: 250px !important;
	}

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

}

/* 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) {

	#logo img {
		height: 270px !important;
	}
	.menu-link {
		font-size: 13px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.home-slider h2 {
		font-size: 24px;
		padding-top: 300px;
		margin-top: 0px;
		margin-bottom: 5px;
	}

	#home-title {
		left: auto;
		top: 0;
		right: 60px;
		width: 450px;
	}
	#home-title h1 {
		font-size: 24px;
		padding-top: 100px;
	}

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

}

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

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

	.home-slider h2 {
		font-size: 24px;
		padding-top: 300px;
	}

	#home-title {
		width: 600px;
	}

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

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

	#logo img {
		height: 350px !important;
	}

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

	#home-title {
		width: 700px;
	}

		
}


/* ----------------------------------------------------------------
	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) {

}
