@charset "utf-8";
/* CSS Document */

/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

/* Root */
:root {
    --blue: #274ca0;
}

/******************************

[Table of Contents]

1.  320px (max)
2.  320px
3.  400px
4.  480px
5.  600px
6.  610px
7.  650px
8.  720px
9.  768px
10. 876px
11. 992px
12. 1080px
13. 1280px
14. 1400px
15. 1440px
16. 1800px
17. 1920px
18. 2150px
19. 2560px

******************************/

/************
1. 320px (max)
************/

/** Main */
main {
    font-size: 14px;
}

/** Container */
.super-container {
    padding: 0;
}

/* Navigation Bar */
.agronum-navbar {
    position: fixed;
    z-index: 9999 !important;
    top: 0;
    width: 100%;

    padding-top: 11px;
    padding-bottom: 11px;
}

.nav-item {
    margin: 2px auto;
}

.nav-link {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 900;
}

.navbar-logo {
    width: 50px;
    height: 10%;
}


/** Section */
section {
    padding: 40px 20px;
}

section h1 {
    font-weight: bold;
    font-size: 40px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/** About Us */
section#about-us {
    padding-top: 80px;
    background-color: #f1f1e6;
}

#about-us h1 {
    text-align: left;
    color: #3d3d3f;
    padding-bottom: 10px;
}

.about-us-title {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

.about-us-title > span {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

.about-blue-band {
    display: none;
}

.about-us-desc {
    padding-left: 20px;
    padding-top: 22px;
    padding-right: 60px;
    padding-bottom: 20px;
    margin-left: 30px;
    border-left: var(--blue) 20px solid;
}

.about-us-desc > p {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

/** Vision and Missions */
#vision-mission {
    color: #ffffff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: calc(100% + 100vw);
    padding-left: 50px;
    padding-right: 50px;
}

.gap-vis-mis {
    margin-top: 30px;
}

.gap-vis-mis > h5 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

.gap-right {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

#vision-mission .and-title {
    font-weight: normal;
}

.vis-mis {
    padding-top: 20px;
}

.vis-mis-main-title > h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

.mission-list li {
    margin-bottom: 12pt;
    margin-left: -25px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

.vis-mis-blue-band {
    display: none;
}

.sub-title {
    width: 60%;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

.the-missions {
    width: 60%;
    float: right;
}

.the-missions > div {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

/** Board of Directors */
section#directors {
    background-color: #f1f1e6;
    background-image: url('../images/asset-2.png');
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
}

#directors > h1 {
    margin-bottom: 40px;
    color: #3d3d3f;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

#directors > h1 small {
    font-size: 30px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

.director-div {
    text-align: center;
    margin-bottom: 20px;
}

.director-div > img {
    width: 55%;
    height: 55%;
    border-radius: 200px 200px 200px 40px;
    border-style: solid;
    border-width: 5px;
    border-color: #f1f1e6;
    margin-bottom: 3px;
}

.director-name {
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

.director-job {
    text-transform: capitalize;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

#president-dir, #it-dir, #art-dir {
    margin-bottom: 30px;
}

/** Culture */
section#culture {
    background-color: #141f41;
    background-image: url('../images/culture-bubble.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-x: 0;
    color: #ffffff;
    margin-bottom: -40px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

#culture .blue-band {
    display: none;
}

#culture h1 {
    padding-left: 30px;
}

#culture h5 {
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    letter-spacing: 1.5px;
    padding-left: 10px;
}

#culture .gap-bottom {
    margin-bottom: 60px;
    margin-right: initial;
}

.culture-title-row {
    background-color: #213F99;
    padding-top: 30px;
    margin-right: 0px;
}

.culture-title {
    padding-left: 20px;
    float: right;
}

.culture-title > h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

.align-text-right {
    padding-left: 40px;
    padding-right: 60px;
    padding-bottom: 30px;
    text-align: left;
    /* background-color: #213F99; */
}

.align-text-right > h5 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

.culture-space {
    /* background-color: #213F99; */
}

.culture-div {
    margin-bottom: 1cm;
    padding: 0 60px;
}

.culture-div.general {
    padding-top: 50px;
    margin-bottom: 1cm;
    padding-left: 60px;
    padding-right: 60px;
}

.list-unstyled {
    text-align: center;
}

.list-unstyled > li {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

.culture-div li {
    margin-bottom: 12.5px;
}

.culture-icon {
    text-align: center;
    margin: 18px 0;
}

.sub-culture {
    margin-bottom: 7px;
    font-weight: bold;
    font-size: 30px;
    text-transform: uppercase;
    text-align: center;
    padding-top: 30px;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

/** Footer */
footer {
    padding-top: .5cm;
    font-size: 14px;
    background-color: #141f41;
    color: #ffffff;
}

/** Footer - Agronum Info */
#agronum-info {
    padding: 0 20px;
    padding-top: 40px;
}

#agronum-info h4 {
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

.agronum-short-desc {
    text-align: center;
}

.agronum-footer-decs {
    padding-bottom: 40px;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

.agronum-social {
    margin: 20px 10px;
}

.agronum-social > div{
    text-align: center;
    margin: -5px 0;
}

.agronum-social-icon {
    display: inline-block;
    margin: 0 10px;
    font-size: 50px;
}

.agronum-social-icon a {
   color: #ffffff; 
}

.agronum-social-icon a:hover {
    color: #686868;
}

/** Footer - Divider */
footer .divider {
    width: 100%;
    border-top: 2px solid #9a9eaa;
}

/* Footer - Agronum Website Info */
#web-info {
    padding-top: 15px;
    padding-bottom: 20px;
    font-size: 12px;
    width: 100%;
    text-align: center;
}

.agronum-forge {
    margin-bottom: 5px;
}

.agronum-copyright {
    color: #9a9eaa;
    padding-bottom: 20px;
}

.agronum-loc-con > p {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

.agronum-social > div {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

.phone-link, .email-link, .map-link {
    color: white;
    text-decoration-color: white
}

.main-link {
    color: white;
}

/************
2. 320px
************/

@media only screen and (max-width: 320px) {
    section#culture {
        background-position-y: 60px;
    }

}

/************
3. 400px
************/

@media only screen and (max-width: 400px) {
    
}

/************
4. 480px
************/

@media only screen and (max-width: 480px) {
    #vision-mission {
        background-image: url('../images/about-us-map-bg-dark-2.png');
    }
}

@media only screen and (min-width: 480px)
{
	/** Section */
    section {
        padding: 40px 10%;
    }

    .about-us-desc {
        padding-left: 20px;
        padding-top: 22px;
        padding-bottom: 20px;
        margin-left: 30px;
        border-left: var(--blue) 20px solid;
    }

    /** Vision and Missions */
    #vision-mission {
        background-image: url('../images/about-us-map-bg-2.png');
        background-position-x: calc(100% + 40vw);
    }

    .sub-title {
        width: 60%;
    }
    
    .the-missions {
        width: 60%;
        float: right;
    }

    /** Board of Directors */
    .director-div > img {
        width: 50%;
        height: 50%;
    }

    /** Culture  */
    section#culture {
        background-position-y: -50px;
    }

    #culture h1 {
        padding-left: 10px;
    }

    .culture-title-row {
        background-color: #213F99;
        padding-top: 30px;
        padding-bottom: 10px;
        border-width: 0px 0px 0px 2px;
        border-color: #213F99;
    }

    .culture-space {
        display: none;
    }

    .culture-title {
        padding-left: 50px;
    }

    .culture-div {
        padding: 0 100px;
    }

    .culture-div.general {
        padding-left: 100px;
        padding-right: 100px;
        padding-top: 30px;
    }

    .align-text-right {
        padding-top: 30px;
        padding-left: 50px;
        padding-right: 135px;
        border-width: 0px 2px 0px 0px;
        border-color: #213F99;
    }

    /** Footer - Agronum Info */
    .agronum-short-desc {
        padding: 0 75px;
    }
}

/************
5. 576px
************/

@media only screen and (min-width: 576px)
{
    section#culture {
        background-position-y: -200px;
    }
}

/************
5. 600px
************/

@media only screen and (min-width: 600px)
{
    /** Vision and Missions */
    #vision-mission {
        background-position-x: calc(100% + 20vw);
        background-color: #141f41;
    }

    /** Board of Directors */
    .director-div > img {
        width: 50%;
        height: 50%;
    }

    /** Culture  */
    .culture-div li {
        margin-left: 5%;
        margin-right: 5%;
    }

    section#culture {
        background-position-y: -200px;
    }

    .culture-title {
        padding-left: 70px;
    }

    .align-text-right {
        padding-top: 30px;
        padding-left: 70px;
        padding-right: 200px;
        border-width: 0px 2px 0px 0px;
        border-color: #213F99;
    }

    /** Footer - Agronum Info */
    #agronum-info p {
        margin-left: 8%;
    }

    .sub-title {
        width: 60%;
    }
    
    .the-missions {
        width: 60%;
        float: right;
    }
}

/************
6. 610px
************/

@media only screen and (min-width: 610px) {

    .align-text-right {
        padding-bottom: 70px;
    }
}

/************
7. 650px
************/

@media only screen and (min-width: 650px) {

    .align-text-right {
        padding-bottom: 120px;
    }
}

/************
8. 720px
************/

@media only screen and (min-width: 720px)
{
    /** Vision and Missions */
    #vision-mission {
        background-position-x: center;
        background-color: #141f41;
    }

	/** Board of Directors */
    .director-div > img {
        width: 45%;
        height: 45%;
    }

    .sub-title {
        width: 60%;
    }
    
    .the-missions {
        width: 60%;
        float: right;
    }

    /** Culture */
    .culture-title {
        padding-left: 70px;
    }

    section#culture {
        background-position-y: -350px;
    }
}



/************
9. 768px
************/

@media only screen and (min-width: 768px)
{
    /** Section  */
    section {
        padding: 50px 100px;
    }

    /** About Us  */
    #about-us h1 {
        border-style: none;
        text-align: right;
        padding-right: 30px;
    }

    .about-us-title span {
        display: block;
    }

    .about-blue-band {
        display: block;
        position: absolute;
    }

    #about-btn {
        position: relative;
        top: 10px;
        left: 40%;
        width: 30px;
        height: 580px;
        border-style: none;
        background-color: var(--blue);
    }

    .about-us-desc {
        font-size: 13.5px;
        border-width: 0;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 40%;
    }

    /** Vision and Missions  */
    #vision-mission {
        padding-top: 60px;
        background-color: #141f41;
    }

    .vis-mis {
        padding-left: 70px;
        padding-right: 30px;
    }

    .sub-title {
        width: 100%;
    }

    .the-missions {
        width: 100%;
        float: none;
    }

    .vis-mis-blue-band {
        display: block;
        position: absolute;
        width: 100%;
    }

    .vis-mis-blue-band .blue-band {
        position: relative;
        float: right;
        top: -175px;
    }

    .vis-mis-blue-band .blue-band img {
        height: 175px;
    }

    /** Board of Directors */
    section#directors {
        background-image: none;
    }

    .director-div {
        z-index: 1;
        position: relative;
        text-align: center;
        color: #f1f1e6;
    }

    .director-div > img {
        width: 180px;
    }

    .director-name {
        font-size: 16px;
    }

    #president-dir {
        margin-bottom: 0;
    }

    #it-dir {
        margin-bottom: 0;
    }

    #art-dir {
        margin-bottom: 0;
    }

    /** Blue Background  */
    .for-blue {
        position: absolute;
        left: 0;
        width: 100%;
    }
    
    .blue-rectangle {
        --height: 200px;
        
        position: relative;
        z-index: 0;
        left: 0;
        top: calc(var(--height) * -1);
        height: var(--height);
        width: 100%;
        background-color: var(--blue);
    }
    
    .blue-triangle {
        position: relative;
        z-index: 1;
        left: 0;
        top: 0;
        
        --triangle: 350px;
        width: 0;
        height: 0;
        border-top: var(--triangle) solid var(--blue);
        border-right: var(--triangle) solid transparent;
    }

    /** Culture  */
    section#culture {
        background-image: none;
    }

    #culture .blue-band {
        display: inline-block;
        background-color: var(--blue);
        height: 30px;
        margin: auto 0;
        margin-right: 10px;
    }

    #culture h5 {
        font-weight: bold;
        line-height: 25px;
        letter-spacing: 1px;
    }

    .culture-title-row {
        background: none;
    }

    .culture-title {
        margin-right: 100px;
        padding-left: 0;
    }

    .culture-space {
        background-color: transparent;
        /* padding-right: 100px; */
    }

    .align-text-right {
        background-color: transparent;
        padding: 0;
        text-align: right;
        padding-left: 80px;
        padding-right: 100px;
        position: absolute;
        right: 0;
    }

    .culture-div {
        padding-left: 150px;
    }
    
    .culture-div.general {
        padding-left: 150px;
        margin-top: 150px;
    }

    .list-unstyled {
        text-align: left;
    }

    .culture-div li {
        margin-left: 115px;
        margin-right: 0;
    }

    .sub-culture {
        font-size: 20px;
        text-align: left;
        padding-left: 135px;
    }

    /** Footer - Agronum Info  */
    #agronum-info {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 13.5px;
        border-top: none;
    }

    #agronum-info h4 {
        margin-top: 0;
        margin-left: 60px;
        text-align: left;
    }

    .agronum-short-desc {
        padding: 0;
    }
    
    .agronum-icon-img {
        margin: auto auto;
        padding-bottom: 30px;
        padding-left: 45px;
        text-align: right;
    }

    .agronum-icon-img img {
        width: 100px;
    }

    .agronum-footer-decs {
        text-align: left;
        margin-left: 60px;
    }

    .agronum-social {
        margin: 0 10px;
    }

    /** Footer - Agronum Website Info  */
    .agronum-forge {
        display: inline-block;
        width: 50%;
        text-align: left;
    }
    
    .agronum-copyright {
        display: inline-block;
        width: 40%;
        text-align: right;
    }
}

/************
10. 876px
************/

@media only screen and (min-width: 876px) {
    /** Footer - Agronum Info  */
    #agronum-info {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}


/************
11. 992px
************/

@media only screen and (min-width: 992px) {

    body {
        background-color: #141F41 !important;
    }

    .nav-item {
        margin: 0;
        padding: 0 20px;
    }

    .nav-item:first-child {
        padding-left: 40px;
    }

    /** About Us  */
    section#about-us {
        padding-top: 100px;
    }
}


/************
12. 1080px
************/

@media only screen and (min-width: 1080px)
{
    /** Section  */
    section {
        padding-left: 100px;
        padding-right: 100px;
    }

	section h1 {
        font-size: 50px;
        letter-spacing: 5px;
    }

    /** About Us  */
    section#about-us {
        padding-top: 120px;
    }

    #about-btn {
        height: 500px;
    }

    .about-us-desc {
        padding-left: 37%;
    }

    /** Vision and Mission  */
    #vision-mission {
        padding-top: 85px;
        padding-bottom: 200px;
        background-color: #141f41;
    }

    .and-title {
        display: block;
    }

    .vis-mis {
        padding-top: 40px;
        padding-left: 75px;
    }

    .vis-mis-blue-band .blue-band {
        top: -250px;
    }

    .vis-mis-blue-band .blue-band img {
        height: 250px;
    }

    /** Board of Directors  */
    .director-div > img {
        width: 250px;
    }

    /** Blue Rectangle  */
    .for-blue .blue-rectangle {
        --height: 250px;
        top: calc(var(--height) * -1);
        height: var(--height);
    }

    /** Culture  */
    #culture .blue-band {
        height: 40px;
    }

    /** Footer - Agronum Info */
    #agronum-info h4 {
        margin-left: 0;
        padding-left: 50px;
    }
    
    .agronum-footer-decs {
        margin-left: 0;
        padding-left: 50px;
    }

    .agronum-icon-img {
        padding-left: 60px;
    }
}

/************
13. 1280px
************/

@media only screen and (min-width: 1280px)
{
    /** Section  */
    section {
        padding-left: 150px;
        padding-right: 150px;
    }

	section h1 {
        font-size: 60px;
        letter-spacing: 5px;
    }

    /** About Us */
    #about-btn {
        width: 40px;
        height: 480px;
    }
    
    /** Blue Background  */
    .blue-triangle {
        --triangle: 450px;
        border-top: var(--triangle) solid var(--blue);
        border-right: var(--triangle) solid transparent;
    }
}


/************
14. 1400px
************/

@media only screen and (min-width: 1400px)
{
    /** Section */
	section {
        padding-left: 150px;
        padding-right: 150px;
    }

    /** About Us */
    #about-btn {
        left: 37.5%;
    }

    /** Vision and Mission  */
    #vision-mission {
        font-size: 15px;
        background-color: #141f41;
    }

    .vis-mis {
        padding-top: 50px;
    }

    /** Culture  */
    #culture h5 {
        font-size: 20px;
        line-height: 35px;
    }

    /** Footer - Agronum Info  */
    .agronum-icon-img {
        padding-left: 80px;
    }
     #agronum-info h4 {
        padding-left: 30px;
    }
    
    .agronum-footer-decs {
        padding-left: 30px;
    }
}

/************
15. 1440px
************/

@media only screen and (min-width: 1440px)
{
    #about-btn {
        left: 40%;
    }
}

/************
16. 1800px
************/

@media only screen and (min-width: 1800px)
{
    #about-btn {
        left: 42%;
    }
}


/************
17. 1920px
************/

@media only screen and (min-width: 1920px)
{
    /** Section  */
    section {
        padding-left: 250px;
        padding-right: 250px;
        font-size: 20px;
    }

	section h1 {
        font-size: 80px;
        letter-spacing: 5px;
    }

    /** About Us  */
    #about-btn {
        height: 570px;
        left: 37%
    }

    .about-us-desc {
        font-size: 18px;
    }

    /** Vision and Mission  */
    #vision-mission {
        font-size: 20px;
        padding-bottom: 350px;
        background-color: #141f41;
        padding-left: 100px;
        padding-right: 100px;
    }

    #vision-mission h5 {
        font-size: 30px;
    }

    .vis-mis {
        padding-top: 100px;
        padding-left: 100px;
        padding-right: 10px;
    }

    /** Board of Directors  */
    .director-name {
        font-size: 25px;
    }

    .director-job {
        font-size: 20px;
    }

    /** Culture  */
    #culture h5 {
        font-size: 25px;
        line-height: 45px;
    }

    .sub-culture {
        font-size: 30px;
        padding-left: 175px;
    }

    /* Footer - Agronum Info */
    #agronum-info {
        padding-bottom: 30px;
    }

    .agronum-short-desc {
        font-size: 18px;
    }
    
    .agronum-short-desc h4 {
        font-size: 28px;
    }

    .agronum-loc-con {
        font-size: 18px;
    }
    
    .agronum-social {
        font-size: 18px;
    }
    
    /** Footer - Website Info */
    #web-info {
        font-size: 16px;
    }
}


/************
18. 2150px
************/

@media only screen and (min-width: 2150px)
{
    #about-btn {
        left: 39%;
    }

    #vision-mission {
        padding-left: 150px;
        padding-right: 150px;
    }
}

/************
19. 2560px
************/

@media only screen and (min-width: 2560px)
{
    #about-btn {
        left: 41%;
    }

    #vision-mission {
        padding-left: 200px;
        padding-right: 200px;
    }
}