/*!
 * @name         wuri.ventures_v1_10.css
 * @description  Venture Capital in Africa
 * @homepage     https://www.wuri.ventures
 * @repository   
 * @bugs         
 * @license      
**/

@charset "UTF-8";
/*@import url("https://fonts.googleapis.com/css?family=Kosugi:400,600,700");**/

@import url('https://fonts.googleapis.com/css?family=Nunito|M+Plus+1p|Kosugi+Maru|Montserrat|Kosugi');

html 
{
  /*font-family: "Montserrat", sans-serif;**/
  font-family: 'M+Plus+1p', sans-serif;
  font-size: 16px;
  color: #546778;
  font-smooth: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body 
{
    margin: 0;
    font-family: 'M+Plus+1p', sans-serif;
}

ul  
{
    height: 100px;
    padding-left: 44px;
    padding-top: 3px;
}



.logo_wuri {
    position: fixed;
    top: 6%;
    left: 6%;
    z-index: 1000;
    //background: url(/images/logo_wuri_v1_0.jpg) no-repeat;
    //background-size: cover;
    //background-position: center;
    background: transparent;
    //width: auto;
}

.side_nav 
{
  color: black;
  font-size: 1.5vmin;  
  position: fixed;
  top: 50%;
  right: 5%;
  z-index: 1000;
 
}

@media screen and (max-width: 500px) 
{
  .side_nav 
        {
            font-size: 2.5vmin;
        }
}



.side_nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: auto;
}

.side_nav li {
  list-style: none;
  color: grey;
}

.side_nav a {
  display: inline-block;
  padding: .5em;
  color: inherit;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
}

.side_nav a:hover {
  color: #4e91e4;
  color: var(--clr-accent);
}

.footer_nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: auto;
}

.footer_nav li {
  list-style: none;
  color: white;
}

.footer_nav a {
  display: inline-block;
  padding: .5em;
  color: inherit;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
}

.footer_nav a:hover {
  color: #4e91e4;
  color: var(--clr-accent);
}



.splash {
    color: white;
    background-color: black;
    background: url(/images/bluegame.jpg) no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    min-height: 80vh;
    display: grid;
    place-items: center;
    position: relative;
    top: 0;
    right: 0;
}

.splash_title {
    color: white;
    line-height: .5;
}

.splash_title h1 {
    /*font-size: 88px;     */
    /*font-size: 6rem;     */
    font-size: 8vmin;
}

.splash_title h2 { 
    /*font-size: 44px;     */
    /*font-size: 3rem;     */
    font-size: 4vmin;
    font-weight: 200;
}

#hidden_image
{
    display: none;
}

.new_page_white 
{
    color: #grey;
    background-color: white;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-content: center;
    place-items: center; 
}

.new_page_white h1 
{
    /*font-size: 72px;   */
    font-size: 6vmin;
    width: 70%;
}

.new_page_grey {
    color: #grey;
    background-color: lightgrey;
    height: 100vh;
    width: 100%;
    min-height: 80vh;
    display: grid;
    place-items: center; 
}

.new_page_grey h1 {
    font-size: 64px;
    font-size: 6vmin;
    text-align: middle;
    width: 70%;
}

.flex
{
    /*display: grid;
    grid-template-columns: auto auto;*/    
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding: 0px;
    background-color: auto;
    
}


.grid_contents
{
    font-size: 1em;
    text-align: center;
}

.grid_contents img
{
    height: 18vh;
}

.grid_contents ul
{
    height: 23vh;

}

.grid_contents h2
{

}



.new_page_team 
{  
    color: #grey;
    background-color: white;
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    place-items: center; 
    flex-wrap: wrap; 
}

/*
.faces_right {
    //padding: 4em;
    color: white; 
    background-color: black;
    background: url(/images/tijan_africa.png) no-repeat;
    background-size: cover;
    background-position: center;
    width: 50vw;    
    height: 40vh;
    -webkit-filter: grayscale(0%); // Safari 6.0 - 9.0
    filter: grayscale(0%);
   // image-resolution: 300dpi;
}

*/

.faces_right {
    color: white;
    background-color: black;
    background: url(/images/tijan_africa.png) no-repeat;
    background-size: cover;
    background-position: center;
    /*height: 600px;*/
    width: 50vw;
    height: 40vh;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}


.faces_right_text {
    color: #546778;
    position: relative;
    font-size: 1em;
    background-color: white;
    margin-top: 20px;
    padding-left: 3em;
    padding-right: 3em;
    width: 20vw;
    line-height: 2;
}

.faces_left {
    color: white;
    background-color: black;
    background: url(/images/jerome_ifc.png) no-repeat;
    background-size: cover;
    background-position: center;
    /*height: 600px;*/
    width: 50vw;
    height: 40vh;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.faces_tijan
{
    background: url(images/tijan_cape_town.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    height: 64vh;
    width: 50vw;    
}



.faces_jerome
{
    background: url(images/jerome_ifc.png) no-repeat;
    background-size: cover;
    background-position: center;
    height: 64vh;
    width: 50vw;    
}



.faces_text
{
    color: #546778;
    position: relative;
    font-size: 1em;
    margin-top: 20px;
    padding-left: 3em;
    width: 25vw;
    line-height: 2;
    
}

@media screen and (max-width: 500px) 
{
    .faces_tijan
        {
            width: 100vw;
            height: 40vh;
        }
    
    .faces_jerome
        {
            width: 100vw;
            height: 40vh;
        }
    
    .faces_text
        {
            width: 80vw;
        }   
}


.faces_left_text {
/*  
    color: #546778;
    position: absolute;
   // background-color: black;
    margin-top: 150px;
    //width: 300px;
    //right: 20%;
    line-height: 2;
*/    
    color: #546778;
    position: relative;
    font-size: 1em;
    background-color: white;
    margin-top: 20px;
    padding-left: 3em;
    //padding-right: 3em;
    width: 20vw;
    //left: 10%;
    line-height: 2;
    
    
}


/* Backup */

.grid_2_columns
{
    display: grid;
    grid-template-columns: repeat(auto-fit, 1fr);
    text-align: center;
    padding: 0px;
    background-color: auto;
    
}


.grid_3_columns
{
    display: grid;
    grid-template-columns: 33% 34% 33%;
    //text-align: center;
    padding-left: 50px;

    
}

.grid_item
{
    padding-left: 20%;
    padding-bottom: 100%;
    color: black;
    //width: 53%;
    height: 100;
    font-family: serif;
    line-height: 1.5;
    text-align: justify;
    font-size: 18;
}




ul
{
    list-style-type: square;   
    text-align: left;
    line-height: 2;
}




.grid_item p
{
    white-space: pre-wrap;
    padding-left: 0%;
  
}

.grid_item a
{
    color: black;
    text-decoration: none;
}

.portfolio 
{    
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px;
    //width: 100%;
}


@media screen and (max-width: 500px) 
{
    .portfolio 
        {    
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 10px;
            padding-left: 20px;
            padding-right: 20px;
        }    
    
}


.portfolio_item 
{    
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.2s;  
    background-color: white;
    height: 180px;
    width: 180px;
   
}

@media screen and (max-width: 500px) 
{
    .portfolio_item 
        {    
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.2s;  
            height: 180px;
            width: 180px;
        }
}
    
    

.portfolio_item:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.grid_page 
{
    color: grey;
    background-color: white;
    height: 800px;
    width: 100%;
}


.new_page_dark h1 
{
    font-size: 72px;   
    text-align: center;
    width: 70%;
}


.new_page_blue h1 {
    font-size: 64px;   
    text-align: middle;
    width: 70%;
}

.new_page {
    color: #grey;
/*    background-color: black; */
    height: 1200px;
    width: 100%;
    //min-height: 80vh;
    display: grid;
    place-items: center;
    //position: relative;
    //top: 0;
    //right: 0;
}

.new_page h1 {
    font-size: 80px;   
    text-align: middle;
    width: 75%;
}


.new_page_blue {
    color: white;
    background-color: lightgrey;
    height: 1200px;
    width: 100%;
    //min-height: 80vh;
    display: grid;
    place-items: center;
    position: relative;
    top: 0;
    right: 0;
    font-family: sans-serif;
    
}

.new_page_dark {
    color: white;
    background-color: #484848;
    height: 400px;
    width: 100%;
    display: grid;
    place-items: center;
    position: relative;
    top: 0;
    right: 0;
    
}



.layout_grid {
    padding-top: 20px;
    display: grid;
    height: 100%;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: 40% 60%;
    grid-gap: 20px;
}

.layout_grid_last {
    background: none;
    padding-top: 20px;
    display: grid;
    height: 100%;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: 40% 60%;
    grid-gap: 20px;
}



.grid_items {
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid_text {
    background: none;
    padding-left: 10px;
    font-size: 32px;
    font-weight: 600;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.portfolio_right {
    color: white;
    background-color: black;
    //background: url(/images/giftedmom.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    height: 600px;
    margin-top: 150px;
    //width: 33%;
    //min-height: 80vh;
   // display: grid;
    position: absolute;
    left: 50%;
    right: 0%;      
}


.portfolio_left {
    color: white;
    background-color: black;
    //background: url(/images/waw.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    height: 600px;
    margin-top: 150px;
    //width: 33%;
    //min-height: 80vh;
   // display: grid;
    position: absolute;
    left: 0%;
    right: 50%;
}


.casestudy_top {
  display: block;
  height: 550px;
  background-color: #546778; 
  padding-top: 85px;
  padding-bottom: 85px;
  background: url(/images/giftedmom.png) no-repeat center;
  background-size: cover;
}

.casestudy_top1 {
  display: block;
  height: 550px;
  background-color: #546778; 
  padding-top: 85px;
  padding-bottom: 85px;
  background: url(/images/waw.jpg) no-repeat center;
  background-size: cover;
}

.casestudy_top2 {
  display: block;
  height: 550px;
  background-color: #546778; 
  padding-top: 85px;
  padding-bottom: 85px;
  background: url(/images/quickbus.jpg) no-repeat center;
  background-size: cover;
}


.casestudy_bottom {
  display: block;
  height: 350px;
  background-color: #ffffff; 
  padding-top: 0px;
  padding-bottom: 0px;
}

.casestudy_top_title {
  color: #ffffff;
  padding: 0px;
  text-align: center;
  font-weight: bolder;
  font-size: 64px;
}

.casestudy_top_subtitle {
  color: #ffffff;
  padding-left: 50px;
  text-align: left;
  font-weight: bolder;
  font-size: 44px;
}

.casestudy_top_caption {
  color: #ffffff;
  padding-top: 100px;
  padding-left: 50px;
  max-width: 300px;
  text-align: left;
  font-weight: bolder;
  font-size: 22px;
}

.casestudy_bottom_caption {
  color: #D2691E;
  padding-top: 10px;
  padding-left: 50px;
  max-width: 300px;
  text-align: left;
  font-weight: bolder;
  font-size: 22px;
}

.navigation 
{
    color: aliceblue;
 position: fixed;
  top: 50%;
  right: 5%;
  z-index: 1001;

}


.footer
{
    color: white;
    background-color:#484848;
    height: 30vh;
    width: 100%;
    padding-top: 20px;
        
}

.footer_nav 
{
    color: aliceblue;
    
}


/*@media (min-width: 800px)
{
    
}
*/