/* custom css decl. for KOKOPELLO.COM */
/* taken on from FLUTISSIMA.COM */

/* ---------- CSS HERITAGE --------------------- */
/* (2/5) Core Bootstrap Style = /assets/css/bootstrap.min.css */
/* (3/5) Custom Style for this template = /assets/css/bootstrap-samples/jumbotron-narrow.css */
/* (4/5) Custom Style addition = /assets/css/bootstrap-custom/custom-msmedia.css */
/* (5/5) Custom Style for THIS SITE =/assets/css/bootstrap-custom/custom-kokopello.css

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


/* hint :: CASCADING style sheets read BACKWARD :: from RIGHT to LEFT ! */
/* the > selector indicates a direct parent/child relationship */

/* Modification du BACKGROUND du site
/* >>> sur jumbotron-narrow dans samples, a priori car declaration body deja faite a ce niveau e d'un niveau hierarchique supérieur???

body {
  padding-top: 50px;
  padding-bottom: 20px;
}

  
/* Custom navMenu */
  /* Tous les libelles des liens dans le contexte .nav sont blancs */
  .nav a {
  color:white;
  }
    /* on hover les nav-pills sont gray et le texte est yellow */
  .nav-pills>li>a:hover {
  background-color:gray;
  color:yellow;
  }
  
   /* le texte des nav-pills du menu lgMenu est black au lieu de blanc car sur fond bleu clair (local style dans la boucle bootstrap util) */
    /* Tous les libelles des liens dans le contexte .nav sont blancs */
  #lgMenu :not(.active) a {
  color:black;
  }
  #lgMenu .active a {
  color:white;
  }
  
      /* ------ FONT FROM  GOOGLE FONTS------------ */
    /* ------ select and load link to get font-face call ----------- */
/* https://fonts.googleapis.com/css?family=Coming+Soon */

/*@font-face {
  font-family: 'Coming Soon';
  font-style: normal;
  font-weight: 400;
  src: local('Coming Soon'), local('ComingSoon'), url(https://fonts.gstatic.com/s/comingsoon/v6/myblyOycMnPMGjfPG-DzP7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}
*/


     /* ------ FONTS FAMILIES ON SERVER-- */
/*
@font-face {
    font-family: snoopy_snails;
    src: url(/assets/fonts/SnoopySnailsNF.otf);
}
*/

@font-face {
    font-family: arial_rounded;
    src: url(/assets/fonts/Arial-Rounded-Bold.ttf);
}

@font-face {
    font-family: kokopello_logo;
    src: url(/assets/fonts/Arial-Rounded-Bold.ttf);
    /* src: url(/assets/fonts/JobberWackyNF.otf); */
}

@font-face {
    font-family: drury_lane;
    src: url(/assets/fonts/DruryLaneNF.otf);
}

/*
@font-face {
    font-family: GoudyMediaeval-DemiBold;
    src: url(/assets/fonts/GoudyMediaeval-DemiBold.ttf);
}

@font-face {
    font-family: GoudyMediaeval-Regular;
    src: url(/assets/fonts/GoudyMediaeval-Regular.ttf);
}
@font-face {
    font-family: GoudyMedieval-Alternate;
    src: url(/assets/fonts/GoudyMedieval-Alternate.ttf);
}
*/


 
/* ------ FONTS USE------------ */

/* ------ FONTS USE  JUMBOTRON------------ */
.jumbotron h1,h2 {
    font-family: kokopello_logo;
    line-height: 120%;
}

.lead {
    font-family: drury_lane;
}


.marketing {
    font-family: drury_lane;
}

.marketing {
    font-family: drury_lane;
}

/* ------ FONTS USE  ELSEWHERE------------ */

logo {
	display:block;
	margin-top:1em;
	margin-left: auto;
    margin-right: auto;
    font-family: kokopello_logo;
    font-size: 3em;
    text-align:center;
}

clip {
    font-family: drury_lane;
    font-size: 2em;
    margin-top:0em;
}

h1,h2 {
    font-family: kokopello_logo;
}

h3 {
    font-family: drury_lane;
}

p,code {
    font-family: drury_lane;
    font-size: inherit;
    line-height: inherit;
}

.footer {
    font-family: arial_rounded;
    font-size: 0.5em;
    text-align: center;
    padding:0%;
    margin:0%;
    line-height: 20%;
}

/* ------ JUMBOTRON BACK GROUND ------------ */
  .jumbotron {
  	margin-top:20px;
	color: inherit;
	*/ background-color: #ccff66;
}
  
     /* ------ FONTS SIZES------------ */
	h1 {font-size:3em;}
	h2 {font-size:2em;}
	h3 {font-size:1.6em;}
	p {font-size:1.4em;}
  
  /* FONTS in JUMBOTRON */
  /* 1) in JUMBOTRON*/
	.jumbotron h1 {font-size:6em;}
	.jumbotron h2 {font-size:2.2em;}
	.jumbotron h3 {font-size:1.8em;}
	.jumbotron p {font-size:1.4em;}
    .jumbotron code {font-size:1em;}
    
    /* 1) in JUMBOTRON - LEAD*/
    .lead p {font-size:1.4em;}
    .lead code {font-size:1em;}
  
   /* 2) in JUMBOTRON - MARKETING */
	.marketing h1 {font-size:2em;}
	.marketing h2 {font-size:1.6em;}
	.marketing h3 {font-size:1.4em;}
	.marketing p {font-size:1em;}
	.marketing code {font-size:1em;}
	/* end of ---- FONTS in JUMBOTRON */
	/* end of ---- FONTS ------------- */
  
  
/* JUMBOTRON - XS for very small units & LG  */

 @media screen and (max-width: 480px) {
 
 .jumbotron {
  	margin-left:0%;
  	margin-right:0%;
}
 
  	.marketing>.row>div {
  padding-right:0px;
  padding-right:0px;
  	}
  
  	.jumbotron {
  padding-right:0px;
  padding-left:0px;
  	}
  	
  }
  
    /* ------ FONTS ------------ */
	h1 {font-size:2em;}
	h2 {font-size:1.6em;}
	h3 {font-size:1.5em;}
	p {font-size:1.3em;}
  
  /* FONTS in JUMBOTRON */
  	.jumbotron h1 {font-size:4em;}
	.jumbotron h2 {font-size:2.2em;}
	.jumbotron h3 {font-size:1.8em;}
	.jumbotron p {font-size:1.4em;}
    .jumbotron code {font-size:1em;}
    
  /* 1) in JUMBOTRON LEAD*/
	.lead h2 {font-size:1.6em;}
	.lead h3 {font-size:1.5em;}
	.lead p {font-size:1.3em;}
    .lead code {font-size:1em;}
  
   /* 2) in JUMBOTRON row marketing*/
	.marketing h2 {font-size:1.6em;}
   .marketing h3 {font-size:1.5em;}
	.marketing p {font-size:1.3em;}
	.marketing code {font-size:1em;}
	/* end of ---- FONTS in JUMBOTRON */
	/* end of ---- FONTS ------------- */
  
  
  
   @media screen and (min-width: 768px) {
   
 
  	.jumbotron {
  padding-right:5%;
  padding-left:5%;
  	margin-left:10%;
  	margin-right:10%;
  	}
  	
  	.marketing {
  padding-right:5%;
  padding-left:5%;
  	margin-left:10%;
  	margin-right:10%;
  	}
  }
  
   @media screen and (min-width: 992px) {
   
    .jumbotron {
    padding-right:10%;
  	padding-left:10%;
  	margin-left:10%;
  	margin-right:0%;
  
	}
   
  	.marketing {
  padding-right:0%;
  padding-left:10%;
  margin-left:0%;
  	margin-right:0%;
  	}
  }
  
   @media screen and (min-width: 1200px) {
   
    .jumbotron {
  	padding-right:20%;
  	padding-left:20%;
  	margin-left:10%;
  	margin-right:0%;
	}
   
  	.marketing {
  padding-right:10%;
  padding-left:10%;
   margin-left:0%;
  	margin-right:0%;
  	}

.col-sm-2 {
    width: 100%;
  }
  }