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

:root
{
  --blueWuriVentures: #27AAE1;
  --charcoalWuriVentures: #36454F;	
  --lightgreyWuriVentures: #b1b3b3;
  --greyWuriVentures: #808080;
  --wuriVenturesNavColor:#36454F;
  --whiteColor: #FFF;

}

@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;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: #4e91e4;
  color: var(--blueWuriVentures);
}

      

.logo 
{
	position: fixed;
	width: 13vw;
	height: 15vh;
	background-color:pink;
	z-index: 1000;
	background: url(/images/logo_wuri_ventures_v1_3_greyblueletters.png) no-repeat;
	background-size: contain;
	background-position: right center;
	top: 0;
	right: 5%;


}

/*
.logo_wuri {
    position: fixed;
    top: 6%;
    left: 94%;
    right: 5%;
    z-index: 1000;
    //background: url(/images/tijan_africa.png) no-repeat;
    //background-size: cover;
    //background-position: center;
    background: transparent;
    background-color: pink;
    width: 150px;
}

*/

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

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

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

.side_nav li {
  list-style: none;
  color: var(--whiteColor);
}

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

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

@media screen and (max-width: 500px) 
{

    .logo
	{
	width: 20vh;
	}

    .side_nav 
    {
       	font-size: 2.5vmin;
		position:absolute;
		top:5px;
	}
			
	.side_nav ul
	{
		display:grid;
		grid-template-columns: repeat(1, 1fr) ;
		text-align:left;
	}
		
}






.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(--blueWuriVentures);
}



.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;
    /*filter: grayscale(70%);*/
    transition: 1.8s;
}

.splash:hover
{
	filter: grayscale(70%);
}

.splash_title {
    color: white;
    line-height: 1;
    position: inherit;
    top: 40%;
    left: 15%;
	width:70%;
    
}

.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;
    width: 68%;
}

#hidden_image
{
    display: none;
}

#post_subscription:hover
{
	color: var(--lightgreyWuriVentures);
}


.new_page_white 
{
    color: black;
    background-color: white;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-content: center;
    place-items: center; 
    padding: 20px;

}


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

.header
{
    color: black;
    padding-top: 20px;
    padding-bottom: 0px;
}

.header h3
{
    text-align: left;
    padding-left: 22.5%;
    width: 55%;
    font-size: 2.5em;
    font-weight: 500;
    background-color: white;
    text-transform: capitalize;
    
}

.header h4
{
    margin-top: .5em;
    margin-bottom: 1.5em;
    text-align: left;
    padding-left: 22.5%;
    width: 55%;
    font-size: 1.5em;
    font-weight: 500;
    color: grey;
    background-color: white;
    text-transform: capitalize;
}


.post_header
{
    color: black;
    padding-top: 100px;
    padding-bottom: 0px;
}

.post_header h3
{
    text-align: left;
    padding-left: 22.5%;
    width: 55%;
    font-size: 2.5em;
    font-weight: 800;
    text-transform: capitalize;
	margin-bottom: 0.5em;
}

.post_header h4
{
    text-align: left;
    padding-left: 22.5%;
    width: 55%;
    font-size: 1.5em;
    font-weight: 500;
    color: grey;
    text-transform: capitalize;
	margin-bottom: 0.5em;
	margin-top:0px;

}

.post_header h5
{
    text-align: left;
    padding-left: 22.5%;
    width: 55%;
    font-size: 1.5em;
    font-weight: 500;
    color: grey;
	margin-bottom: 1em;
	margin-top:0px;
    font-weight: lighter;
}

.post_content
{
    text-align: left;
    padding-left: 22.5%;
	width: 55%;
	font-size: 1em;
    line-height: 1.8;
    font-size: 22;
    font-weight: lighter;
	color: black;
}


.img_post
{

}

.subheader 
{
    color: grey;
    text-align: left;
    padding-top: 0px;
    text-align: left;
    padding-left: 20%;
    font-size: 22;
    color: grey;
    background-color: black;
}

.grid
{
    display: grid;
    grid-template-columns: auto ;
    padding: 0px;
    grid-gap: 0px;
    background-color: white;
    margin-bottom: 80px;
}

.grid_item
{
    padding-left: 22.5%;
    color: black;
    width: 55%;
    font-family: serif;
    line-height: 1.8;
    text-align: left;
    font-size: 22;
    font-weight: lighter;
}



.new_page_grey {
    color: white;
    background-color: black;
    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;
    
}


.fgrid_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 - -webkit-font-smoothing9.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/IMG_1401.JPG) 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_black_shirt.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    height: 64vh;
    width: 50vw;   
    transition: 0.4s; 
}

.faces_tijan:hover
{
    filter: grayscale(70%);
}


.faces_jerome
{
    background: url(images/IMG_1401.JPG) no-repeat;
    background-size: cover;
    background-position: center;
    height: 64vh;
    width: 50vw;
    transition: 0.4s;
    
}

.faces_jerome:hover
{
    filter: grayscale(70%);
}


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

.email_signup
{
	padding-bottom:8em;
	padding-top:8em;
	width:60%;
	position:relative;
	right:20%;
	left:20%;
	
}


.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(4, 1fr);
	grid-gap: 20px;
	margin: 100px; 
}



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


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

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

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


.news_page
{
	position: relative;
	left:25%;
	top:150px;
	color:black;
	width:75%;
}


.news 
{    
    display: grid;
    grid-template-columns: repeat(1, 1fr);
	grid-gap: 20px;
	width:75%;
}

.news_item 
{    
    
    padding-top:20px;
	height: 100px;
    width: 500px;
	border-top-style: solid;
	border-width: 1px;
	border-color:gray;
}

@media screen and (max-width: 500px) 
{
	.news 
	{    
	    display: grid;
	    grid-template-columns: repeat(1, 1fr);
		grid-gap: 20px;
	    //width: 100%;
		padding-left:20px;
		width:95%;
		
	}

	.news_item 
	{    
    
	    padding-top:20px;
		height: 100px;
	    border-top-style: solid;
		border-width: 1px;
		border-color:gray;
		width:100%;
	}
	
	h1
	{
		position:relative;
		left: 5%;
		
	}

	.news_page
	{
		position: relative;
		left:0px;
		top:0px;			
		
	}


	
}
    





.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%;
}

.portfolio_inline
{
	display: block;
	margin-left: 10px;
	width:25%;

}

@media screen and (max-width: 500px) 
{
	.portfolio_inline
	{
		width: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;
}

      
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: relative;
  right: 0;
  bottom: 0;
  width: auto; 
  height: 100%;
}

.position
{
  position: relative;
}      

/* Add some content at the bottom of the video/page */
.content {
  position: absolute;
  background: rgba(1, 0, 0, 0.5);
  color: #f1f1f1;
  top: 45%;
    left: 35%;
    right:35%;
  width: 30%;
    height: auto;
  padding: 0px;
    
}
      
@media screen and (max-width: 500px) 
{
	.new_page_white 
	{
	    color: black;
	    background-color: white;
	    height: 125vh;
	    display: grid;
	    justify-content: center;
	    align-content: center;
	    place-items: center; 
	}
	
	.grid
	{
	    display: grid;
	    grid-template-columns: 1fr ;
	    padding: 0px;
	    grid-gap: 0px;
	    background-color: white;
	    margin-bottom: 80px;
	}
	
  .grid_item
   {
   padding-left: 5%;
   width: 90%;
   line-height: 1.4;
   text-align: left;
   font-size: 28;
   font-weight: lighter;
   line-height: 1.5;

   }

   .header h3
   {
	   padding-left: 5%;
	   width: 90%;
   }
   
   .header h4
   {
	   padding-left: 5%;
	   width: 90%;
   font-size: 1.5em;
   font-weight: 500;
   color: grey;
   background-color: white;
   
   }
	
   .post_header
   {
       color: black;
       padding-top: 0px;
       padding-bottom: 0px;
 	   position: relative;
   }

   .post_header h3
   {
       text-align: left;
	   padding-left: 5%;
	   width: 90%;
       font-size: 2.5em;
       font-weight: 800;
       text-transform: capitalize;
		margin-bottom: 0.5em;
   }

   .post_header h4
   {
       text-align: left;
	   padding-left: 5%;
	   width: 90%;
       font-size: 1.5em;
       font-weight: 500;
       color: grey;
       text-transform: capitalize;
   		margin-bottom: 0.5em;
   		margin-top:0px;

   }

   .post_header h5
   {
       text-align: left;
	   padding-left: 5%;
	   width: 90%;
       font-size: 1.25em;
       font-weight: 500;
       color: grey;
		margin-bottom: 1em;
   		margin-top:0px;
       font-weight: lighter;
   }

   .post_content
   {
       	text-align: left;
	    padding-left: 5%;
	    width: 90%;
		font-size: 1.25em;
       	line-height: 1.4;
       	font-size: 22;
       	font-weight: lighter;
   		color: black;
   }

}

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

}



/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}      


button {
  position: absolute;
  width: 100px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background-color: var(--blueWuriVentures);
  color: #fff;
  cursor: pointer;
  margin-top: 4 rem;
  margin-bottom:4 rem;
}

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

}

/*************************
==== New Block Style ====
**************************/

.news_blocks_page
{
	position: relative;
	/*top:150px;*/
	color:black;
}

.news_zone
{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
	grid-gap: 20px;
}


.news_block
{
	position: relative;
	height: 400px;
}


.news_block h3
{
	color: white;
	position:absolute;
	top: 0px;
	left: 20px;
	z-index:99;
}

.news_block h1
{
	color: white;
	position:relative;
	padding-top:40px;
	padding-left:20px;
	z-index:99;
}

@media screen and (max-width: 500px) 
{
	.news_blocks_page
	{
	/*	top:20px;
	*/
	}
	.news_block h3
	{
		
	}
		
	.news_block h1
	{	
		padding-left:0;
		padding-right:10px;
	}
	
}


/*************************
==== Footer ====
**************************/

.footer
{
    color: white;
    background-color:black;
    height: 30vh;
    width: 100%;
    padding-top: 10px;
	position:relative;
        
}

.footer_nav 
{
    color: aliceblue;
    
}


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