/*
Theme Name: WP Bootstrap Starter Child Openforis
Theme URI: http://openforis.org
Template: wp-bootstrap-starter
Author: Jerome Agostini
Author URI: http://jeromeagostini.fr/
Description: The best WordPress starter theme based on the most powerful frameworks in the world: "_s" (by Automattic, the main people behind WordPress development), Twitter Bootstrap (the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web) and Font Awesome (or Fontawesome, a full suite of 675+ pictographic icons for easy scalable vector graphics on websites). This theme, like WordPress, is licensed under the GPL. You can use this theme as base for your next WordPress theme project and you are allowed to remove the link at the footer or do whatever you want. Your feedback on how we can continuously improve this WordPress Starter Theme Bootstrap will be highly appreciated. Page templates includes Right-sidebar (default page template), Left-Sidebar, Full-Width, Blank with container, Blank without container Page. Other features - Currently using Bootstrap v4.0.0 , Widgetized footer area, WooCommerce ready, Compatible with Contact Form 7, Compatible with Visual Composer, Compatible with Elementor Page Builder. This theme will be an active project which we will update from time to time. Check this page regularly for the updates.
Tags: blog,custom-menu,featured-images,threaded-comments,translation-ready,right-sidebar,custom-background,e-commerce,theme-options,sticky-post,full-width-template
Version: 1.0
Updated: 2021-01-06
*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	1. 	Document Setup
	2.	Element Base	
	3.	Site Header
	4.	Site Footer
	5.	Page Templates
	6.	Specific page Templates



----------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */

/*	1. 	Document Setup
/* -------------------------------------------------------------------------- */

/* CSS Reset ------------------------------------- */
html{font-size:16px;}
h1,
h1.entry-title,
h2,
h3,
h4,
h5,
h6{
	border-bottom:none;	
}

a {
	transition: color .5s;
	color:var(--blue);
}
a:hover{
	color:var(--green);
	text-decoration:none;
}
#page.site{
    overflow: hidden;
}
	

/* Embedding Fonts ------------------------------------- */

@font-face {
    font-family: 'caviar_dreamsregular';
    src: url('fonts/caviardreams-webfont.woff2') format('woff2'),
         url('fonts/caviardreams-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'caviar_dreamsitalic';
    src: url('fonts/caviardreams_italic-webfont.woff2') format('woff2'),
         url('fonts/caviardreams_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'caviar_dreamsbold_italic';
    src: url('fonts/caviardreams_bolditalic-webfont.woff2') format('woff2'),
         url('fonts/caviardreams_bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'caviar_dreamsbold';
    src: url('fonts/caviardreams_bold-webfont.woff2') format('woff2'),
         url('fonts/caviardreams_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.alignwide {
  /* Set these margins to work with your own theme. */
  margin-left: -80px;
  margin-right: -80px;
  max-width: 100vw;
}

.alignfull {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
  max-width: 100vw;
}

.alignfull img {
  width: 100vw;
}

.entry-content{
	margin:0;
}

/* ----------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */

/*	2. Element Base
/* ---------------------------------------------*---------------------------- */

:root {
	/* Colors */
  --blue: rgba(68,141,182); /* #448DB6 */
  --lightblue: rgba(107,170,206);
  --green: rgba(119,171,22); /* #77AB16 */
  --lightgreen: rgba(158,204,58);
  --gray: #707070;
  --lightgray: #9c9c9c;
  --verylightgray: #f0f0f1;
  --alphablue: rgba(68,141,182, 0.15);
  --green-alpha: rgba(var(--green), 0.15) ;
  --white-alpha: 255, 255, 255, 0.4 ;
  /* Shadows */
  --blueshadow:0px 10px 20px 0px rgba(68,141,182, 0.7);
  --blueshadow-sm:0px 5px 10px 0px rgba(68,141,182, 0.3);
  --greenshadow:0px 10px 20px 0px rgba(119,171,22, 0.7);
  /* Radius*/
  --rad-12:12px;
  --rad-8:8px;
  --rad-4:4px;
  --transitiontimefast:all .2s;
  --transitiontimeslow:all 1s;
  --blureffect: blur(20px);

}

.blue-shadow{	
	box-shadow: var(--blueshadow);
}

/* headings */

h1,
h2,
h3,
h4,
h5,
h6{
	font-family: 'caviar_dreamsregular';	
}
/* Font size */

h1,
h1.entry-title{
	color: var(--blue);
}
/* Small devices (landscape phones, 544px and up) */ /*1rem = 16px*/   
@media (min-width: 100px) {  
    h1, h1.entry-title {font-size:2.5rem;} 
	h2, h2.entry-title {font-size:1.25rem;} 

}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  h1, h1.entry-title {font-size:2.5rem;} 
  h2, h2.entry-title {font-size:1.25rem;} 
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  h1, h1.entry-title {font-size:3rem;}
  h2, h2.entry-title {font-size:1.5rem;} 
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  h1, h1.entry-title {font-size:3rem;}
  h2, h2.entry-title {font-size:2rem;} 
  
}

/* Separator */
.wp-block-separator{margin:120px 0;}

/* Buttons */
.wp-block-button{
	transition: var(--transitiontimefast);
	text-decoration:none;
	background: var(--gray);
	border-radius:var(--rad-8);
	box-shadow: var(--blueshadow);
	color:#ffffff;
	cursor:pointer;
	display:inline-block;
}

.wp-block-button:hover{ 
	transform: translateY(-3px);
	text-decoration:none;
	background: var(--lightgray);
	
}
.wp-block-button:active{ 
	transform: translateY(0px);
}
.wp-block-buttons .wp-block-button{
	margin-right:1em;
}


.btn-green {
	background-color:var(--green);
	text-shadow:0px 1px 7px #2f6627;
}
.btn-green:hover {
	background-color:var(--lightgreen);
}
.btn-green:active {
	position:relative;
	top:1px;
}

.btn-blue {
	background-color:var(--blue);
	text-shadow:0px 1px 7px #295166;
}
.btn-blue:hover {
	background-color:var(--lightblue);
}
.btn-blue:active {
	position:relative;
	top:1px;
}

.wp-block-button__link {
	background:none;
	padding:5px 54px;
	color:white;
}
.big .wp-block-button__link {
	padding:20px 35px;
	
}

@media (max-width: 768px) {
	.wp-block-buttons{
		flex-direction:column !important;
	}
	.wp-block-buttons .wp-block-button{
		margin-right:0;
		text-align: center;
	}
}
 
/* ----------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */

/*	3. Site header
/* ---------------------------------------------*---------------------------- */

/* Scrolled Navbar */

header#masthead{
	background-color: white;
	box-shadow: var(--blueshadow-sm);
	z-index:1000;
} 

/* Fixed navbar 

header#masthead{
	background-color: white;
	box-shadow: var(--blueshadow-sm);
	z-index:1000;
	overflow: hidden;
  padding: 30px 10px; /* Large padding which will shrink on scroll (using JS) */
	
}
#masthead{
	overflow: hidden;
	  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
	  position: fixed; /* Sticky/fixed navbar */
	  width: 100%;
	  top: 0; /* At the top */
}
 */


/* Navbar */ 
.navbar-nav li{
	padding: 0 1rem;
}
body:not(.theme-preset-active) #masthead .navbar-nav > li > a:hover, body:not(.theme-preset-active) #masthead .navbar-nav > li.current_page_item > a{
 	color:var(--gray-dark);	
	border-top: 2px solid var(--green);
	font-weight:500;
	top:-2px;
	font-size:1rem;
	
	
}
body:not(.theme-preset-active) #masthead .navbar-nav > li > a{
	color:var(--gray);	
	font-weight:500;
	border-top: 2px solid white;
	font-size:1rem;
 }
body:not(.theme-preset-active) #masthead .navbar-nav > li > a:hover{
 	color:var(--gray-dark);	
	font-weight:500;
	border-top: 2px solid var(--blue);
	font-size:1rem;
	
  }

  ul .dropdown-menu{
  	box-shadow: var(--blueshadow);	

  	
  }
  ul .dropdown-menu li{
  	transition: var(--transitiontimeslow);
	  
	  background-color:white;
  }
  ul .dropdown-menu li:hover{
	  background-color:var(--blue);
  }
  .dropdown-menu .dropdown-item:hover{
	  color:white;
  }
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
.menu-item {
    padding:0 20px;
}

}
/* Breadcrumb */ 
.fbc-wrap{
	background:var(--gray);
  	box-shadow: var(--blueshadow);	
	backdrop-filter: var(--blureffect);
	-webkit-backdrop-filter: var(--blureffect);
  border-radius:var(--rad-4);
  background: rgba(255, 255, 255,0.4);
	
}
.fbc-page .fbc-wrap .fbc-items{
	background:none!important;
	padding:0 20px;
}
.fbc-items li:first-child{display:none;}

/* Breadcrumb */
#breadcrumbs{
	margin: 14px 0;
	
}


/* ----------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */

/*	4. Site footer
/* ---------------------------------------------*---------------------------- */

.bg-footer img{
  	left: 50%;
  	margin-right: -50vw;
  	right: 50%;
  	width: 100vw;
  	z-index:-100;
  }
  body:not(.theme-preset-active) 
  footer#colophon {
	  background-color:var(--blue);
  }
footer#colophon a{ color:white;}
footer#colophon a:hover{ color:var(--green);}
.nav > li > a:focus, .nav > li > a:hover{background: none;}

footer h1, footer h2, footer h3{color:white;}

/* ----------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */

/*	5. Page template
/* ---------------------------------------------*---------------------------- */
@media (min-width: 577px) {  
  .box{
	  box-shadow: var(--blueshadow);
	  backdrop-filter: var(--blureffect);
	  -webkit-backdrop-filter: var(--blureffect);
	  padding:80px;
	  margin:20px 0;
	  border-radius:var(--rad-8);
	  background: rgba(255, 255, 255,0.4);
  }
  .box-sm{
	  box-shadow: var(--blueshadow-sm);
	  backdrop-filter: var(--blureffect);
	  -webkit-backdrop-filter: var(--blureffect);
	  padding:40px;
	  margin:20px 0;
	  border-radius:var(--rad-8);
	  background: rgba(255, 255, 255,0.4);
  }
}
@media (max-width:576px){
    .box{
		box-shadow: var(--blueshadow);
		backdrop-filter: var(--blureffect);
		-webkit-backdrop-filter: var(--blureffect);
		padding:30px;
		margin:10px 0;
		border-radius:var(--rad-8);
		background: rgba(255, 255, 255,0.4);
		text-align: center
    }
    .box-sm{
		box-shadow: var(--blueshadow-sm);
		backdrop-filter: var(--blureffect);
		-webkit-backdrop-filter: var(--blureffect);
		padding:15px;
		margin:10px 0;
		border-radius:var(--rad-8);
		background: rgba(255, 255, 255,0.4);
		text-align: center
    }
	.wp-block-button ,.btn-green, .btn-blue{
		padding:5px;
		width:100%;text-align: center}
}

/* ----------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */

/*	6. Specific page template
/* ---------------------------------------------*---------------------------- */
  /* Homepage*/ 
#content.site-content{
  	  padding-top:0;
    }
#homepage .tools, #toolspage .tools{
		  	box-shadow: var(--blueshadow);
		    border-radius:var(--rad-8);
			transition: var(--transitiontimefast);
			padding:0 20px;
			border:solid 1px white;
		}
#homepage .tools:hover, #toolspage .tools:hover{
		background:var(--alphablue);
		transform: translateY(-3px);
		border:solid 1px var(--blue);
				}
#homepage .empty, #toolspage .empty{box-shadow:none;border:none;}
#homepage .empty:hover, #toolspage .empty:hover{		
	background:none;
		border:none;
	}

.wp-block-embed__wrapper{
	  	box-shadow: var(--blueshadow);
	    border-radius:var(--rad-12);
		}	
		
.bg-image img{
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: absolute;
	top:0;
	right: 50%;
	width: 100vw;
	z-index:-100;
}


/* Twitter feed */

#ctf{
	padding: 10px;
}
.ctf-tweets{padding:20px;}
.ctf-item{
	box-shadow: var(--blueshadow);
	    backdrop-filter: var(--blureffect);
	    -webkit-backdrop-filter: var(--blureffect);
	    padding: 20px!important;
	    margin: 20px 20px;
	    border-radius: var(--rad-8);
	    background: rgba(255, 255, 255,0.4);	
		text-align: left;
}


/* Home page ------------------------------------- */