/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Feb 208, 2023, 18:56:48 PM
    Author     : Aliyu Atiku Mustapha
*/

/* -----------------------
   Global Formating
   ----------------------- */

@font-face{
    font-family: Input Font;
    src: url("../fonts/Exo2-Regular.ttf") format('truetype');
}

@font-face{
    font-family: Heading;
    src: url("../fonts/RobotoCondensed-Light.ttf") format('truetype');
}

@font-face{
    font-family: Footer Font;
    src: url("../fonts/Cabin.ttf") format('truetype');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, 
summary, time, mark, audio, video { 
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

body{
    font-size: 100%;
    width: 100%;
    background-color: #f1f1f1;
}

article, aside, footer, header, main, nav, section, fieldset{
    display: block;
} 

img{
    max-width: 100%;
    border: 0 !important;
}

hgroup h1{
    display: none;
}

.parent-nav ul{
    display: none;
}

ul, li {
    list-style: none;
}

a{
    text-decoration: none;
}

.clear-float:before, .clear-float:after {
    content: "";
    display: table;
}
.clear-float:after {
    clear: both;
}

/* ========================================================================
   Begin PC Styles
   ======================================================================== */
@media only screen and (min-width:1025px){
/* -----------------------
   Header & Nav Bar Formating
   ----------------------- */
    #top{
	width: 100%;
	height: 100px;
	background-color: #cbe4f9;
	background-repeat: repeat-x;
    }

    #container{
        width: 100%;
        min-width: 100%;
        margin: -100px auto 0;
        background-repeat: repeat-x;
        background-color: #fdfdfd;
    }

    header{
        min-width: 100%;
        width: 100%;
        height: 100px; 
        background-color: #cbe4f9;
    }

    header div, nav{
        float: left; 
    }

    #logo{
        width: 20%;
        height: 100px;
    }

    #logo img{
        padding: 2px 0px 2px 5px;
    }

    #companyName{
        width: 45%;
        height: 100px;
        display: block;
    }

    #companyName h1{
        font-family: Roboto, sans;
        font-size: 2.2em;
        text-transform: uppercase;
        padding-top: 25px;
        padding-left: 4%;
        color: #244574;
        display: inline-block;
    }

    nav{
        width: 32%;
        height: 100px;
    }

    nav #navMenu{
        display: none;
    }

    nav ul{
	width: auto;
	float: left;
	margin-top: 4em;
    }

    nav li{
        float: left;
        margin-right: .1em;
    }

    nav a{
        font-family: Aclonica, sans-serif;
        font-size: .8em;
        display: block;
        color: #244574;
        padding: .5em 1em .5em 1.5em ;
        line-height: 1.3em;
    }

    nav a#home{
        display: none;
    }

    nav li:first-child{
        margin-left: .5%;
    }

    nav a:hover{
        border-bottom: 2px solid #333;
    }

    #home{
        background-image: url(../images/home.png);
        background-repeat: no-repeat;
        background-position: 2px 5px;
    }

    #products{
        background-image: url(../images/services.png);
        background-repeat: no-repeat;
        background-position: 1px 6px;
    }
	
    #aboutUs{
        background-image: url(../images/about_us.png);
        background-repeat: no-repeat;
        background-position: 2px 6px;
    }

    #portfolio{
        background-image: url(../images/portfolio.png);
        background-repeat: no-repeat;
        background-position: 2px 6px;

    }

    #contactUs{
        background-image: url(../images/contact_us.png);
        background-repeat: no-repeat;
        background-position: 2px 6px;
    }
/* -----------------------
   Content Formating
   ----------------------- */
	content{
        width: 99.85%;
        margin-bottom: 1.5em;
        border: 1px solid #ccc;
    }

	#imageCanvas #slideShowStatic, #imageCanvas #subContent{
	width: 46%;
	float: right;
	margin-right: 1%;
	margin-top: 15px;


        //border: 1px solid #ccc;
    }

    .imgMain{
        margin-top: 0px;
    }

    #subContent{
        width: 100%;
    }

    #subContent article{
        width: 99%;
        margin: 0 auto;
    }

    #subContent #missionVission{
        width: 99%;
        margin: 0 auto;
    }

    #subContent #missionVission article{
        width: 45%;
        margin: 0 3.5% 0 0%;
        //border: 1px solid #ccc;
        float: left;
    }

    #subContent article ul, #subContent article span {
        margin-left: 1em;
    }

    #subContent article span {
        padding-bottom: 1em;
        display: block;
    }

    #subContent article li{
        font-family: Kurale, serif;
        font-size: 1em;
        margin-bottom: 1.3em;
        list-style: disc;
        margin-left: 2em;
    }

    #subContent article p{
        font-family: Kurale, serif;
        font-size: 1.2em;
        padding-bottom: 2.5em;
        width: 97%;
        margin: 0 auto;
    }

    #subContent #missionVission article p{
        font-family: Kurale, serif;
        font-size: 1.2em;
        padding-bottom: 2.5em;
        width: 92%;
        margin: 0 auto;
    }

    #subContent h3{
        font-family: RobotoCondensed, sans-serif;
        font-size: 1.7em;
        margin-bottom: .8em;
        margin-left: .6em;
        color: #224574;
    }

    .belowHeader{
        margin-top: 1.5em;
    }

    #subContent article:first-child{
        margin-top: .5em;
    }

    #services{
        width: 99%;
        margin: 0 auto;
    }

    #services h2{
        font-family: RobotoCondensed, serif;
        font-size: 1.5em;
        margin-bottom: 1em;
        margin-left: .6em;
        padding-top: .9em;
        color: #224574;
    }

    #services ul.servicesList{
        width: 95%;
        overflow: hidden;
        height: 5%;
        margin-bottom: 2em;
        margin-left: 2%;
    }

    #services ul.servicesList li{
        font-family: Montez;
        font-size: 1.7em;
        float: left;
        width: 45%;
        padding-top: 5%;
        padding-bottom: 1%;
        padding-left: 1%;
        margin: 1%;
        border: 1px solid #cfcfcf;
        text-align: center;
        background-color: #f9f9f9;
        color: #224574;
    }

    #services ul.servicesList li a{
        display: block;
        color: #224574;
    }

    #services ul.servicesList li img{
        display: block;
    }

    #services ul.servicesList li.sImportExport img{
        padding: 0 30%;
    }

    #servicesContent {
        width: 100%;
        clear: both;
    }

    #servicesContent h3{
        font-family: RobotoCondensed, sans-serif;
        font-size: 1.2em;
        margin-bottom: .8em;
        color: #224574;
        background-color: #f1f1f1;
        padding: .7em 0 .7em .5em;
    }

    #servicesContent #import .content{
        width: 99.85%;
        margin-bottom: 1.5em;
        border: 1px solid #ccc;
    }

    .bold{
        font-weight: bold;
    }
/* -----------------------
   Products Formating
   ----------------------- */
	#products-container .thumnail-container{
        //border: 1px solid #ccc;
        width:  140px;
        display: inline-block;
        text-align: center;
        margin-right: 3px;
    }

    #products-container .thumnail-container .thumnail-label{
        font-family: Kurale, serif;
        font-size: .8em; 
        padding: 0 2px;   
        color: #224574;
    }

    .productNameContent{
        font-family: Kurale, serif;
        font-size: 1.2em; 
        padding: 0 3.3% 1.8%;   
    }

	.content h5{
        font-family: RobotoCondensed, sans-serif;
        font-size: 1.2em;
        margin-bottom: 0em;
        color: #224574;
        padding: .7em 0;
        margin-left: 1em;
    }

    #products-container #product-details, #products-container 
    #large-product-image{
        width: 50%;
        margin: 0 2% 0 2% ;
        //border: 1px solid #CCC;
        float: left;
    }

    #products-container 
    #cashew_large-product-image{
		padding: 3em 0;
    }
	
	#products-container 
    #ginger_large-product-image{
		padding: 3em 0;
    }
	
		#products-container 
    #gum_large-product-image{
		padding: 3em 0;
    }
	
		#products-container 
    #hibiscus_large-product-image{
		padding: 3em 0;
    }
	
		#products-container 
    #sheanut_large-product-image{
		padding: 5em 0;
    }
	
		#products-container 
    #sheba_large-product-image{
		padding: 3em 0 5em;
    }
	
	#project-images-thumnail{
        width: 90%;
        margin: 1em auto 0 auto;
        //border: 1px solid red;
    }
/* -----------------------
   Footer Formating
   ----------------------- */
 	footer{
        clear: both;
        background-color: #063068;
    }

    footer div{
        //height: 7em;
        //border: 1px solid #b5b4b5;
	margin-left: 1%;
	margin-right: 1%;
	float: left;
	margin-bottom: 4px;
	margin-top: 1px;
	width: 45%;
    }

    footer h4{
        font-family: Nova, sans;
        font-size: 1.1em;
        margin-bottom: 1em;
        color: #b5b4b5;
        margin-left: .5em;
    }

    footer p{
        width: 90%;
        margin: 0 auto 2em 2em;
    }

    footer p, footer ul{
        font-family: Kurale, sans-serif;
        font-size: .8em;
        color: #b5b4b5;
        margin-left: .5em;
    }

    footer a{
        color: #999;
        text-decoration: underline;
    }

    #socialNetwork ul{
        width: 100%;
        margin: 0 auto;
    }

    #socialNetwork li a{
	width: 31%;
	float: left;
	margin: 1%;
	//border: 1px solid red;
	padding-top: 50px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
    }

    #socialNetwork a{
        text-decoration: none;
        display: block;
        text-align: center;
        font-size: 1.2em;
    }
 
	#socialNetwork a.youtube{
        background-image: url(../images/youtube.png);
        background-repeat: no-repeat;
        background-position: center top;
    }

    .whatsapp{
        background-image: url(../images/whatsapp.png);
        background-repeat: no-repeat;
        background-position: center top;
    }

    .phone{
        background-image: url(../images/phone.png);
        background-repeat: no-repeat;
        background-position: center top;
    }

    .frames{
    }
/*============================================================================ 
        End PC Styles
  ===========================================================================*/
}
/*============================================================================ 
   End PC Version Styles
   ===========================================================================*/

/*============================================================================ 
    Begin Tablet Version Styles
   ===========================================================================*/
@media only screen and (min-width:481px) and (max-width:1024px) {
/*============================================================================ 
   Begin Tablet Styles
  =============================================================================*/
/* -----------------------
   Header & Nav Bar Formating
   ----------------------- */
    #top{
	width: 100%;
	height: 100px;
	background-color: #cbe4f9;
	background-repeat: repeat-x;
    }

    #container{
        width: 100%;
        margin: -100px auto 0;
        background-repeat: repeat-x;
        background-color: #fdfdfd;
    }

    header{
        min-width: 100%;
        height: 100px; 
        background-color: #cbe4f9;
    }

    header div, nav{
        float: left; 
    }

    #logo{
        width: 30%;
        height: 100px;
    }

    #logo img{
        padding: 2px 0px 2px 5px;
    }

    #companyName{
        width: 70%;
        height: 100px;
        display: block;
    }

    #companyName h1{
        font-family: Roboto, sans;
        font-size: 2.2em;
        text-transform: uppercase;
        padding-top: 25px;
        padding-left: 4%;
        color: #244574;
        display: inline-block;
    }

    .active-link{
        display: block;
    }

    .inactive-link{
        display: none;
    }

    nav{
        width: 100%;
        position: relative;
        border-top: 1px solid #063068;
        height: 44px;
        background-color: #cbe4f9;
    }

    nav #navMenu{
	display: block;
	width: 50%;
	padding: 10px;
	float: right;
	height: 36px;
    }

    #menu-bar{
        position: absolute;
        right: 40px;
    }

    nav ul{
        width: 155px;
        margin-top: .2em;
        position: absolute;
        top: 42px;
        right: 5px;
        background-color: #063068;
        z-index: 100;
    }
	
    nav ul:before{
        position: absolute;
        top: -9px;
        left: 55%;
        display: inline-block;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #ccc;
        border-left: 15px solid transparent;
        border-bottom-color: #cbe4f9;
        content: '';
    }

    nav li{
        float: none;
    }

    nav a{
        font-family: Aclonica, sans-serif;
        font-size: .8em;
        display: block;
        color: #b5b4b5;
        padding: 1em 2em;
        line-height: 1.3em;
        border-bottom: 1px solid #cbe4f9;
    }

    nav li:first-child{
        margin-left: .5%;
    }

    nav a:hover{
    }

    #home{
        background-image: url(../images/home_tablet.png);
        background-repeat: no-repeat;
        background-position: 8px 12px;
    }

    #aboutUs{
        background-image: url(../images/about_us_tablet.png);
        background-repeat: no-repeat;
        background-position: 8px 13px;
    }

    #portfolio{
        background-image: url(../images/portfolio_tablet.png);
        background-repeat: no-repeat;
        background-position: 8px 12px;
    }

    #products{
        background-image: url(../images/services.png);
        background-repeat: no-repeat;
        background-position: 6px 13px;
    }

    #contactUs{
        background-image: url(../images/contact_us_tablet.png);
        background-repeat: no-repeat;
        background-position: 8px 12px;
    }
/* -----------------------
   Content Formating
   ----------------------- */
	#content{
        clear: both;
        width: 90%;
    }

	#imageCanvas #slideShowStatic, #imageCanvas #subContent{
        width: 46%;
        float: right;
        margin-right: 1%;
        margin-top: 15px;
        //border: 1px solid #ccc;
    }

    .imgMain{
        margin-top: 0px;
    }

    #subContent{
        width: 90%;
    }

    #subContent article{
        width: 99%;
        margin: 0 auto;
    }

    #subContent #missionVission{
        width: 99%;
        margin: 0 auto;
    }

    #subContent #missionVission article{
        width: 45%;
        margin: 0 3.5% 0 0%;
        //border: 1px solid #ccc;
        float: left;
    }

    #subContent article ul, #subContent article span {
        margin-left: 1em;
    }

    #subContent article span {
        padding-bottom: 1em;
        display: block;
    }

    #subContent article li{
        font-family: Kurale, serif;
        font-size: 1em;
        margin-bottom: 1.3em;
        list-style: disc;
        margin-left: 2em;
    }

    #subContent article p{
        font-family: Kurale, serif;
        font-size: 0.8em;
        padding-bottom: 2.5em;
        width: 97%;
        margin: 0 auto;
    }

    #subContent #missionVission article p{
        font-family: Kurale, serif;
        font-size: 0.8em;
        padding-bottom: 2.5em;
        width: 92%;
        margin: 0 auto;
    }

    #services h2{
        font-family: RobotoCondensed, serif;
        font-size: 1.0em;
        margin-bottom: 1em;
        margin-left: .6em;
        padding-top: .9em;
        color: #224574;
    }
	
    #servicesContent h3{
        font-family: RobotoCondensed, sans-serif;
        font-size: 1.0em;
        margin-bottom: .8em;
        color: #224574;
        background-color: #f1f1f1;
        padding: .7em 0 .7em .5em;
    }

    #subContent h3{
        font-family: RobotoCondensed, sans-serif;
        font-size: .8em;
        margin-bottom: .8em;
        margin-left: .6em;
        color: #224574;
    }

    .belowHeader{
        margin-top: 1.5em;
    }

    #subContent article:first-child{
        margin-top: .5em;
    }

    #services{
        width: 99%;
        margin: 0 auto;
    }

    #services ul.servicesList{
        width: 95%;
        overflow: hidden;
        height: 5%;
        margin-bottom: 2em;
        margin-left: 2%;
    }

    #services ul.servicesList li{
        font-family: Montez;
        font-size: 1.7em;
        float: left;
        width: 45%;
        padding-top: 5%;
        padding-bottom: 1%;
        padding-left: 1%;
        margin: 1%;
        border: 1px solid #cfcfcf;
        text-align: center;
        background-color: #f9f9f9;
        color: #224574;
    }

    #services ul.servicesList li a{
        display: block;
        color: #224574;
    }

    #services ul.servicesList li img{
        display: block;
    }

    #services ul.servicesList li.sImportExport img{
        padding: 0 30%;
    }

    #servicesContent {
        width: 100%;
        clear: both;
    }
	
    .content{
        width: 99.85%;
        margin-bottom: 1.5em;
        border: 1px solid #ccc;
    }

    #servicesContent #import .content{
        width: 99.85%;
        margin-bottom: 1.5em;
        border: 1px solid #ccc;
    }

    .bold{
        font-weight: bold;
    }
/* -----------------------
   Products Formating
   ----------------------- */
	#products-container .thumnail-container{
        //border: 1px solid #ccc;
        width:  110px;
        display: inline-block;
        text-align: center;
        margin-right: 3px;
    }

    #products-container .thumnail-container .thumnail-label{
        font-family: Kurale, serif;
        font-size: .8em; 
        padding: 0 2px;   
        color: #224574;
    }

    .productNameContent{
		
        font-family: Kurale, serif;
        font-size: 1.2em; 
        padding: 0 3.3% 1.8%;   
    }

	.content h5{
        font-family: RobotoCondensed, sans-serif;
        font-size: 1.2em;
        margin-bottom: 0em;
        color: #224574;
        padding: .7em 0;
        margin-left: 1em;
    }

    #products-container #product-details, #products-container 
    #large-product-image{
        width: 36%;
        margin: 0 2% 0 2% ;
        //border: 1px solid #CCC;
        float: left;
    }

    #products-container 
    #cashew_large-product-image{
		padding: 5em 0;
    }
	
	#products-container 
    #ginger_large-product-image{
		padding: 5em 0 7em;
    }
	
		#products-container 
    #gum_large-product-image{
		padding: 5em 0 11em;
    }
	
		#products-container 
    #hibiscus_large-product-image{
		padding: 5em 0 9.5em;
    }
	
		#products-container 
    #sheanut_large-product-image{
		padding: 5em 0 10em;
    }
	
		#products-container 
    #sheba_large-product-image{
		padding: 5em 0;
    }
	
	#project-images-thumnail{
        width: 90%;
        margin: 1em auto 0 auto;
        //border: 1px solid red;
    }
/* -----------------------
   Footer Formating
   ----------------------- */
 	footer{
        clear: both;
        background-color: #063068;
   }

    footer div{
        //height: 7em;
        //border: 1px solid #b5b4b5;
	margin-left:0.5%;
	margin-right: 0.5%;
	float: left;
	margin-bottom: 4px;
	margin-top: 1px;
	width: 45%;
    }

    footer h4{
        font-family: Nova, sans;
        font-size: 1.1em;
        margin-bottom: 1em;
        color: #b5b4b5;
        margin-left: .5em;
    }

    footer p{
        width: 90%;
        margin: 0 auto 2em 2em;
    }

    footer p, footer ul{
        font-family: Kurale, sans-serif;
        font-size: .8em;
        color: #b5b4b5;
        margin-left: .5em;
    }

    footer a{
        color: #999;
        text-decoration: underline;
    }

    #socialNetwork ul{
        width: 100%;
        margin: 0 auto;
    }

    #socialNetwork li a{
	width: 31%;
	float: left;
	margin: 1%;
	//border: 1px solid red;
	padding-top: 50px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
    }

    #socialNetwork a{
        text-decoration: none;
        display: block;
        text-align: center;
        font-size: 1.2em;
    }

    #socialNetwork a.youtube{
        background-image: url(../images/youtube.png);
        background-repeat: no-repeat;
        background-position: center top;
    }

    .whatsapp{
        background-image: url(../images/whatsapp.png);
        background-repeat: no-repeat;
        background-position: center top;
    }

    .phone{
        background-image: url(../images/phone.png);
        background-repeat: no-repeat;
        background-position: center top;
    }

    .frames{
    }

}

/*============================================================================ 
   End Tablet Version Styles
  ===========================================================================*/
/*============================================================================ 
    Begin Mobile Version Styles
   ===========================================================================*/
@media only screen and (max-width:480px) {
/*============================================================================ 
   Begin Mobile Styles
  =============================================================================*/
/* -----------------------
   Header & Nav Bar Formating
   ----------------------- */
    #top{
	width: 100%;
	height: 100px;
	background-color: #cbe4f9;
	background-repeat: repeat-x;
    }

    #container{
        width: 100%;
        margin: -100px auto 0;
        background-repeat: repeat-x;
        background-color: #fdfdfd;
    }

    header{
        min-width: 100%;
        height: 100px; 
        background-color: #cbe4f9;
    }

    header div, nav{
        float: left; 
    }

    #logo{
        width: 30%;
        height: 100px;
    }

    #logo img{
        padding: 2px 0px 2px 5px;
    }

    #companyName{
        width: 60%;
        height: 100px;
        display: block;
    }

    #companyName h1{
        font-family: Roboto, sans;
        font-size: 1.8em;
        text-transform: uppercase;
        padding-top: 25px;
        padding-left: 4%;
        color: #244574;
        display: inline-block;
    }

    .active-link{
        display: block;
    }

    .inactive-link{
        display: none;
    }

    nav{
        width: 100%;
        position: relative;
        border-top: 1px solid #063068;
        height: 44px;
        background-color: #cbe4f9;
    }

    nav #navMenu{
	display: block;
	width: 50%;
	padding: 10px;
	float: right;
	height: 36px;
    }

    #menu-bar{
        position: absolute;
        right: 40px;
    }

    nav ul{
        width: 155px;
        margin-top: .2em;
        position: absolute;
        top: 42px;
        right: 5px;
        background-color: #063068;
        z-index: 100;
    }
	
    nav ul:before{
        position: absolute;
        top: -9px;
        left: 55%;
        display: inline-block;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #ccc;
        border-left: 15px solid transparent;
        border-bottom-color: #cbe4f9;
        content: '';
    }

    nav li{
        float: none;
    }

    nav a{
        font-family: Aclonica, sans-serif;
        font-size: .8em;
        display: block;
        color: #b5b4b5;
        padding: 1em 2em;
        line-height: 1.3em;
        border-bottom: 1px solid #cbe4f9;
    }

    nav li:first-child{
        margin-left: .5%;
    }

    nav a:hover{
    }

    #home{
        background-image: url(../images/home_tablet.png);
        background-repeat: no-repeat;
        background-position: 8px 12px;
    }

    #aboutUs{
        background-image: url(../images/about_us_tablet.png);
        background-repeat: no-repeat;
        background-position: 8px 13px;
    }

    #portfolio{
        background-image: url(../images/portfolio_tablet.png);
        background-repeat: no-repeat;
        background-position: 8px 12px;
    }

    #products{
        background-image: url(../images/services.png);
        background-repeat: no-repeat;
        background-position: 6px 13px;
    }

    #contactUs{
        background-image: url(../images/contact_us_tablet.png);
        background-repeat: no-repeat;
        background-position: 8px 12px;
    }
/* -----------------------
   Content Formating
   ----------------------- */
	#content{
        clear: both;
        width: 90%;
	}

	#imageCanvas #slideShowStatic, #imageCanvas #subContent{
	width: 47%;
	float: right;
	margin-top: 15px;

        //border: 1px solid #ccc;
	margin-left: 3%;
    }

    .imgMain{
        margin-top: 0px;
    }

    #subContent{
        width: 90%;
    }
	
    #subContent article{
	width: 99%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-right: 1%;
    }

    #subContent #missionVission{
        width: 99%;
        margin: 0 auto;
    }

    #subContent #missionVission article{
	width: 45%;

        //border: 1px solid #ccc;
	float: left;
	margin-top: 0;
	margin-right: 3.5%;
	margin-bottom: 0;
	margin-left: 0%;
    }

    #subContent article ul, #subContent article span {
        margin-left: 1em;
    }

    #subContent article span {
        padding-bottom: 1em;
        display: block;
    }

    #subContent article li{
        font-family: Kurale, serif;
        font-size: 1em;
        margin-bottom: 1.3em;
        list-style: disc;
        margin-left: 2em;
    }

    #subContent article p{
	font-family: Kurale, serif;
	font-size: 1.2em;
	padding-bottom: 2.5em;
	width: 97%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	padding-left: 2em;
    }

    #subContent #missionVission article p{
        font-family: Kurale, serif;
        font-size: 0.8em;
        padding-bottom: 2.5em;
        width: 92%;
        margin: 0 auto;
    }

    #services h2{
        font-family: RobotoCondensed, serif;
        font-size: 1.0em;
        margin-bottom: 1em;
        margin-left: .6em;
        padding-top: .9em;
        color: #224574;
    }
	
    #servicesContent h3{
        font-family: RobotoCondensed, sans-serif;
        font-size: 1.0em;
        margin-bottom: .8em;
        color: #224574;
        background-color: #f1f1f1;
        padding: .7em 0 .7em .5em;
    }

    #subContent h3{
        font-family: RobotoCondensed, sans-serif;
        font-size: 1.4em;
        margin-bottom: .8em;
        margin-left: .6em;
        color: #224574;
    }

    .belowHeader{
        margin-top: 1.5em;
    }

    #subContent article:first-child{
        margin-top: .5em;
    }

    #services{
        width: 99%;
        margin: 0 auto;
    }

    #services ul.servicesList{
        width: 95%;
        overflow: hidden;
        height: 5%;
        margin-bottom: 2em;
        margin-left: 2%;
    }

    #services ul.servicesList li{
        font-family: Montez;
        font-size: 1.7em;
        float: left;
        width: 45%;
        padding-top: 5%;
        padding-bottom: 1%;
        padding-left: 1%;
        margin: 1%;
        border: 1px solid #cfcfcf;
        text-align: center;
        background-color: #f9f9f9;
        color: #224574;
    }

    #services ul.servicesList li a{
        display: block;
        color: #224574;
    }

    #services ul.servicesList li img{
        display: block;
    }

    #services ul.servicesList li.sImportExport img{
        padding: 0 30%;
    }

    #servicesContent {
        width: 100%;
        clear: both;
    }
	
    .content{
        width: 99.85%;
        margin-bottom: 1.5em;
        border: 1px solid #ccc;
    }

    #servicesContent #import .content{
        width: 99.85%;
        margin-bottom: 1.5em;
        border: 1px solid #ccc;
    }

    .bold{
        font-weight: bold;
    }
/* -----------------------
   Products Formating
   ----------------------- */
	#products-container .thumnail-container{
        //border: 1px solid #ccc;
        width:  110px;
        display: inline-block;
        text-align: center;
        margin-right: 3px;
    }

    #products-container .thumnail-container .thumnail-label{
        font-family: Kurale, serif;
        font-size: 1em; 
        padding: 0 2px;   
        color: #224574;
    }

    .productNameContent{
		
        font-family: Kurale, serif;
        font-size: 1.2em; 
        padding: 0 3.3% 1.8%;   
    }

	.content h5{
        font-family: RobotoCondensed, sans-serif;
        font-size: 1.2em;
        margin-bottom: 0em;
        color: #224574;
        padding: .7em 0;
        margin-left: 1em;
    }

    #products-container #product-details, #products-container 
    #large-product-image{
        width: 40%;
		margin: 0 2% 0 2% ;
        //border: 1px solid #CCC;
        float: left;
    }

    #products-container 
    #cashew_large-product-image{
		padding: 0em 0;
    }
	
	#products-container 
    #ginger_large-product-image{
		padding: 0em 0;
    }
	
		#products-container 
    #gum_large-product-image{
		padding: 0em 0;
    }
	
		#products-container 
    #hibiscus_large-product-image{
		padding: 0em 0;
    }
	
		#products-container 
    #sheanut_large-product-image{
		padding: 0em 0;
    }
	
		#products-container 
    #sheba_large-product-image{
		padding: 0em 0;
    }
	
	#project-images-thumnail{
        width: 90%;
        margin: 1em auto 0 auto;
        //border: 1px solid red;
    }
/* -----------------------
   Footer Formating
   ----------------------- */
 	footer{
        clear: both;
        background-color: #063068;
   }

    footer div{
        //height: 7em;
        //border: 1px solid #b5b4b5;
	margin-left: 1%;
	margin-right: 1%;
	float: left;
	margin-bottom: 4px;
	margin-top: 1px;
	width: 45%;
    }

    footer h4{
        font-family: Nova, sans;
        font-size: 1.1em;
        margin-bottom: 1em;
        color: #b5b4b5;
        margin-left: .5em;
    }

    footer p{
        width: 90%;
        margin: 0 auto 2em 2em;
    }

    footer p, footer ul{
        font-family: Kurale, sans-serif;
        font-size: .8em;
        color: #b5b4b5;
        margin-left: .5em;
    }

    footer a{
        color: #999;
        text-decoration: underline;
    }

    #socialNetwork ul{
        width: 100%;
        margin: 0 auto;
    }

    #socialNetwork li a{
	width: 50%;
	float: left;
	margin: 1%;
	//border: 1px solid red;
	padding-top: 50px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
    }

    #socialNetwork a{
        text-decoration: none;
        display: block;
        text-align: center;
        font-size: 0.8em;
    }

    #socialNetwork a.youtube{
        background-image: url(../images/youtube.png);
        background-repeat: no-repeat;
        background-position: center top;
    }

    .whatsapp{
        background-image: url(../images/whatsapp.png);
        background-repeat: no-repeat;
        background-position: center top;
    }

    .phone{
        background-image: url(../images/phone.png);
        background-repeat: no-repeat;
        background-position: center top;
    }

    .frames{
    }

}

/*============================================================================ 
   End Mobile Version Styles
  ===========================================================================*/