/*
	Theme Name: Agape
	Description: Custom theme made for Agape
	Version: 1.0
	Author: Jonathan Joseph Limoanco (bluenimbus@gmail.com)
	Author URI: https://bluenimbus.com
	Tags: HTML5, CSS3, Custom
*/

@font-face {
    font-family: "morn";
    src: url("fonts/morn.otf") format("opentype"),
    url("fonts/morn.woff") format("woff"), url("fonts/morn.ttf") format("ttf");
    font-weight: 400; 
    font-style: normal; 
    font-display: swap; 
}
@font-face {
    font-family: "morn demi";
    src: url("fonts/morndemi.otf") format("opentype"),
    url("fonts/morndemi.woff") format("woff"), url("fonts/morndemi.ttf") format("ttf");
    font-weight: 400; 
    font-style: normal; 
    font-display: swap; 
}

body, html {
    margin: 0px; 
    padding: 0px; 
    min-width: 1100px; 
    font-family: morn; 
    letter-spacing: 1px; 
}
h1,h2,h3,h4,h5,h6 {
    font-family: "morn demi"; 
    letter-spacing: 3px; 
}
strong {
    font-weight: normal; 
    font-family: "morn demi"; 
}
div.inside {
    width: 1100px; 
    margin-left: auto;
    margin-right: auto;
}
a {
    text-decoration: none; 
}

#header {
    margin-left: auto; 
    margin-right: auto;
    width: 1100px; 
    display: grid;
    grid-template-columns: auto auto; 
    align-items: center; 
    padding-bottom: 15px; 
    padding-top: 15px;
    column-gap: 25px; 
}
#header div.logo img {
    width: 125px; 
    height: auto;
}
#header div.nav ul {
    display: grid;
    grid-template-columns: repeat(8,auto); 
    column-gap: 15px; 
    margin: 0px;
    padding: 0px; 
}
#header div.nav li {
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
}
#header div.nav li a {
    text-transform: uppercase; 
    color: #111c3e; 
    font-size: 18px;
    line-height: 18px;
    font-family: "morn demi"; 
}
#header div.nav li a:hover {
    color: #c48d3d; 
}
#slider {
    width: 100%; 
    display: grid;
    grid-template-columns: auto; 
    grid-template-rows: auto; 
    height: 620px; 
    overflow: hidden; 
}
#slider div.text {
    width: 1100px; 
    margin-left: auto; 
    margin-right: auto; 
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    z-index: 5; 
}
#slider div.text h1 {
    color: #fff; 
    width: 70%; 
    font-size: 40px; 
    margin-top: 150px; 
    text-transform: uppercase; 
    font-weight: normal; 
}
#slider div.text h1 strong {
    font-size: 100px;
    line-height: 90px; 
    display: block;
    white-space: nowrap; 
}
#slider div.text p {
    color: #fff; 
    width: 70%;
    font-size: 26px; 
    line-height: 36px; 
}
#slider div.img {
    width: 100%;
    height: auto; 
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    z-index: 1; 
    overflow-x: hidden; 
}
#slider div.img img {
    height: auto; 
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translate(-50%);
    object-fit: cover;
    object-position: center; 
    
}
#about {
    width: 100%;
    padding-top: 50px; 
    padding-bottom: 50px; 
}
#about h2 {
    color: #111c3e; 
    font-size: 65px; 
    line-height: 65px; 
    font-weight: normal; 
    text-transform: uppercase; 
    margin-bottom: 15px; 
    margin-top: 0px; 
}
#about hr {
    width: 87px; 
    border-left: none; 
    border-right: none; 
    border-top: 9px solid #c48d3d; 
    border-bottom: none; 
    margin-left: 0px; 
    margin-right: auto; 
}
#about div.split {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 50px;
    align-items: center; 
    padding-top: 50px; 
}
#about div.split strong {
    font-size: 28px; 
    line-height: 32px; 
    font-weight: normal; 
}
#about div.split p {
    font-size: 22px; 
    line-height: 32px; 
}
#about div.split img {
    -webkit-box-shadow: 20px 20px 0px 0px rgba(196,141,61,0.97); 
    box-shadow: 20px 20px 0px 0px rgba(196,141,61,0.97);
}




#mission {
    width: 100%;
    padding-top: 50px; 
    padding-bottom: 50px; 
}
#mission h2 {
    color: #111c3e; 
    font-size: 65px; 
    line-height: 65px; 
    font-weight: normal; 
    text-transform: uppercase; 
    margin-bottom: 15px; 
    margin-top: 0px; 
    text-align: right;
}
#mission hr {
    width: 87px; 
    border-left: none; 
    border-right: none; 
    border-top: 9px solid #c48d3d; 
    border-bottom: none; 
    margin-left: auto; 
    margin-right: 0px;
}
#mission div.split {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 50px;
    align-items: center; 
    padding-top: 25px; 
}
#mission div.split strong {
    font-size: 28px; 
    line-height: 32px; 
    font-weight: normal; 
}
#mission div.split p {
    font-size: 22px; 
    line-height: 32px; 
}
#mission div.split img {
    -webkit-box-shadow: 20px 20px 0px 0px rgba(196,141,61,0.97); 
    box-shadow: 20px 20px 0px 0px rgba(196,141,61,0.97);
}
#mission div.split h3 {
    font-size: 30px; 
    line-height: 30px; 
}




#values div.inside {
    padding-top: 0px; 
    padding-bottom: 75px; 
}
#values div.inside h3 {
    font-size: 65px; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    text-transform: uppercase; 
    text-align: center; 
    margin-top: 15px; 
    margin-bottom: 25px; 
    font-weight: normal; 
}
#values div.inside hr {
    width: 87px; 
    border-left: none; 
    border-right: none; 
    border-top: 9px solid #c48d3d; 
    border-bottom: none; 
    margin-left: auto; 
    margin-right: auto; 
}
#values div.inside ul {
    margin: 0px;
    padding: 0px; 
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    column-gap: 50px; 
    margin-top: 50px; 
}
#values div.inside li {
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
}
#values div.inside li h4 {
    font-size: #111c3e;
    font-size: 36px;
    line-height: 36px;
    text-transform: uppercase;
    margin-top: 15px; 
    margin-bottom: 15px; 
}
#values div.inside li p {
    margin-left: 0px; 
    margin-right: 0px; 
    text-align: left; 
    font-size: 18px; 
    line-height: 28px; 
    width: 100%; 
}




#goals {
    width: 100%;
    padding-top: 0px; 
    padding-bottom: 50px; 
}
#goals h2 {
    color: #111c3e; 
    font-size: 65px; 
    line-height: 65px; 
    font-weight: normal; 
    text-transform: uppercase; 
    margin-bottom: 15px; 
    margin-top: 0px; 
}
#goals hr {
    width: 87px; 
    border-left: none; 
    border-right: none; 
    border-top: 9px solid #c48d3d; 
    border-bottom: none; 
    margin-left: 0px; 
    margin-right: auto; 
}
#goals div.split {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 70px;
    align-items: center; 
    padding-top: 50px; 
}
#goals div.split strong {
    font-size: 28px; 
    line-height: 32px; 
    font-weight: normal; 
}
#goals div.split p {
    font-size: 22px; 
    line-height: 32px; 
}
#goals div.split li {
    font-size: 22px; 
    line-height: 32px; 
}
#goals div.split img {
    -webkit-box-shadow: 20px 20px 0px 0px rgba(196,141,61,0.97); 
    box-shadow: 20px 20px 0px 0px rgba(196,141,61,0.97);
}









#whatwedo {
   background-color: #dddddd;
}
#whatwedo div.inside {
    padding-top: 75px; 
    padding-bottom: 75px; 
}
#whatwedo div.inside hr {
    width: 87px; 
    border-left: none; 
    border-right: none; 
    border-top: 9px solid #c48d3d; 
    border-bottom: none; 
    margin-left: auto; 
    margin-right: auto; 
}
#whatwedo div.inside h3 {
    font-size: 65px; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    text-transform: uppercase; 
    text-align: center; 
    margin-top: 15px; 
    margin-bottom: 25px; 
    font-weight: normal; 
}
#whatwedo div.inside p {
    font-size: 22px; 
    line-height: 32px; 
    text-align: center; 
    width: 100%; 
    margin-left: auto;
    margin-right: auto; 
}
#whatwedo div.inside ul {
    margin: 0px;
    padding: 0px; 
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    column-gap: 50px; 
    margin-top: 50px; 
}
#whatwedo div.inside ul li {
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
}
#whatwedo div.inside ul li img {
    width: 100%;
    height: auto; 
}
#whatwedo div.inside ul li p {
    margin-left: 0px; 
    margin-right: 0px; 
    text-align: left; 
    font-size: 18px; 
    line-height: 28px; 
    width: 100%; 
}
#whatwedo div.inside ul li h4 {
    font-size: #111c3e;
    font-size: 36px;
    line-height: 36px;
    text-transform: uppercase;
    margin-top: 15px; 
    margin-bottom: 15px; 
}



#globalsetup {
    width: 100%; 
    display: grid;
    grid-template-columns: auto; 
    grid-template-rows: auto; 
    height: 990px; 
    overflow: hidden;
}
#globalsetup div.text {
    width: 1100px; 
    margin-left: auto;
    margin-right: auto; 
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    z-index: 5; 
    padding-top: 30px; 
}
#globalsetup div.text h5 {
    color: #fff; 
    width: 100%; 
    font-size: 65px; 
    margin-top: 65px; 
    margin-bottom: 0px; 
    text-transform: uppercase; 
    font-weight: normal; 
    text-align: right; 
}
#globalsetup div.text hr {
    width: 87px; 
    border-left: none; 
    border-right: none; 
    border-top: 9px solid #c48d3d; 
    border-bottom: none; 
    margin-left: auto; 
    margin-right: 0px;; 
    margin-bottom: 50px; 
}
#globalsetup div.img {
    width: 100%;
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    z-index: 1; 
}
#globalsetup div.img img {
    width: 100%;
    height: auto; 
    min-height: 990px; 
}



#oil {
    width: 100%; 
    display: grid;
    grid-template-columns: auto; 
    grid-template-rows: auto; 
}
#oil div.text {
    width: 1100px; 
    margin-left: auto;
    margin-right: auto; 
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    z-index: 5; 
    padding-top: 30px; 
}
#oil div.text h5 {
    color: #fff; 
    width: 100%; 
    font-size: 65px; 
    margin-top: 65px; 
    margin-bottom: 0px; 
    text-transform: uppercase; 
    font-weight: normal; 
    text-align: right; 
}
#oil div.text hr {
    width: 87px; 
    border-left: none; 
    border-right: none; 
    border-top: 9px solid #c48d3d; 
    border-bottom: none; 
    margin-left: auto; 
    margin-right: 0px;; 
    margin-bottom: 50px; 
}
#oil div.img {
    width: 100%;
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    z-index: 1; 
}
#oil div.img img {
    width: 100%;
    height: auto; 
    min-height: 990px; 
}
#oil ul {
    margin: 0px;
    padding: 0px; 
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    column-gap: 35px; 
    grid-row-gap: 20px; 
}
#oil li {
    list-style-type: none; 
    margin: 0px;
    padding: 0px; 
    color: #fff;
}
#oil li strong {
    display: block; 
    font-size: 30px;
    line-height: 30px;
    font-weight: normal;
    text-transform: uppercase;
}
#oil li p {
    font-size: 18px;
    line-height: 28px;
    margin-top: 9px;
}





#contact {
    display: block; 
    padding-top: 50px; 
    padding-bottom: 50px; 
}
#contact div.inside {
    width: 1100px; 
    margin-left: auto; 
    margin-right: auto; 
    display: grid;
    grid-template-columns: 40% 50%; 
    column-gap: 5%; 
}
#contact div.inside hr {
   width: 87px; 
    border-left: none; 
    border-right: none; 
    border-top: 9px solid #c48d3d; 
    border-bottom: none; 
    margin-left: 0px; 
    margin-right: auto; 
    margin-bottom: 20px;  
}
#contact div.inside h6 {
    font-size: 65px;
    line-height: 65px; 
    margin-top: 0px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
#contact div.inside p {
    font-size: 22px;
    line-height: 32px; 
}
#contact div.inside ul {
    margin: 0px;
    padding: 0px; 
}
#contact div.inside li {
    list-style-type: none; 
    margin: 0px; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    font-size: 18px;
    line-height: 28px; 
}
#contact div.inside div.theform {
    border-radius: 20px; 
    -webkit-box-shadow: 0px 0px 22px 11px rgba(0,0,0,0.05); 
    box-shadow: 0px 0px 22px 11px rgba(0,0,0,0.05);
    padding-left: 50px; 
    padding-right: 50px; 
    padding-top: 50px;
    padding-bottom: 30px; 
}
#contact div.inside div.theform label {
    color: rgba(0,0,0,0.5); 
}
#contact div.inside div.theform legend {
    color: rgba(0,0,0,0.5); 
}
#contact div.inside div.theform input {
    border: 1px solid rgba(0,0,0,0.15); 
}
#contact div.inside div.theform textarea {
    border: 1px solid rgba(0,0,0,0.15); 
}
#contact div.inside div.theform input[type="submit"] {
    border: 0px; 
    background-color: #c48d3d;
    color: #fff; 
    font-size: 20px; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    padding-left: 20px; 
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px; 
    border-radius: 30px; 
    font-family: "morn demi"; 
    cursor: pointer; 
}
#contact div.inside div.theform input[type="submit"]:hover {
    background-color: #111c3e; 
}
#footer {
    padding-top: 50px;
    padding-bottom: 50px; 
}
#footer div.inside {
    padding-top: 25px; 
    padding-bottom: 25px; 
    display: grid;
    grid-template-columns: auto auto; 
    align-items: center; 
}
#footer div.inside ul {
    display: grid;
    grid-template-columns: repeat(5,auto); 
    column-gap: 50px; 
    margin: 0px;
    padding: 0px; 
    text-align: right; 
}
#footer div.inside ul li {
    list-style-type: none; 
    margin: 0px;
    padding: 0px; 
}
#footer div.inside ul li a {
    color: #000; 
    opacity: 0.50;
    font-size: 21px; 
    line-height: 21px; 
    text-transform: uppercase; 
    font-family: "morn demi";
}
#footer div.inside ul li a:hover {
    opacity: 1; 
}
#footer div.inside p {
    margin-top: 0px; 
    margin-bottom: 0px;
    text-align: right; 
    width: 100%; 
    margin-left: auto; 
    margin-right: 0px; 
    padding-top: 5px; 
    opacity: 0.5; 
    font-size: 14px; 
}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}

/*------------------------------------*\
    CSS3 Transform
\*------------------------------------*/

a, li, div {
	transition: all .18s cubic-bezier(0.64,0.20,0.02,0.35);
	-webkit-transition: all .18s cubic-bezier(0.64,0.20,0.02,0.35);
}
img {
	transition: all .3s cubic-bezier(0.64,0.20,0.02,0.35);
	-webkit-transition: all .3s cubic-bezier(0.64,0.20,0.02,0.35);
}
input, textarea, button, label, option, select, .button, .hndle {
	transition: all .25s cubic-bezier(0.64,0.20,0.02,0.35);
	-webkit-transition: all .25s cubic-bezier(0.64,0.20,0.02,0.35);
}
#wpwrap #nav-menus-frame #menu-management-liquid li, .wp-picker-holder a {
	transition: none;
	-webkit-transition: none;
}