/* Main CSS file */

body {
    font-family: Karrik; /* set name */
    /*background-color: #FFFFF0; /*Ivory*/
    background-color: #FFFAFA; /*Snow*/
    margin:0;
    }

#header {
    overflow: hidden;
    background-color: #FFFAFA; /*Snow*/
    font-weight: 500;
    position: fixed;
    top: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 90%;
    text-decoration:none;
    font-family: Karrik;
    z-index: 2;
    }

#content {z-index: 1;}

#header a {
    float: left;
    display: block;
    text-align: center;
    padding-right: 2em ;
    }

.header:link, .header:visited, .header:active, .header:hover {text-decoration:none;font-family: Karrik;}
.header-right{float:right;}

.main {padding-top: 8em;}
    
.responsive {
  width: 100%;
  /*max-width: 800px;*/
  height: auto; 
    }

.container {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    }

a:link, a:visited, a:active {text-decoration:underline; color:#000;font-family: Fluxisch Else;}
a:hover {
	text-decoration:none;
	/*background:#D8BFD8;opacity:0.58;*/ /*Thistle*/
	font-family: Fluxisch Else;
    }


.no-bullets {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
    }



h1 {line-height: 2; letter-spacing: .3rem; font-size: 3em;}
h2 {letter-spacing: .2rem; font-size: 1.3em;}
h3 {line-height: 1.2; letter-spacing: .2rem; font-size: 2em;}
h4 {letter-spacing: .2rem; font-size: 1.5em;}

::selection {
    background: #ECDFEC;  /* Selago */
    color: #000;
}

::-moz-selection {
    background: #ECDFEC;  /* Selago */
    color: #000;
}

.fade-in {
    z-index:1;
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}


/* Create three equal columns that floats next to each other */


.column {
  float: left;
  width: 45%;
  padding: 15px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


@keyframes fadeIn {
  0% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}



/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

@media screen and (min-width: 1801px) { /* Extra large screens, TV, Desktops, large screens */

	body{
	padding-left:10%;
	padding-right:10%;
	letter-spacing: .2rem;font-size: 1.2em;
    }
    
    .grid3-pad{
	padding:30px;
    }


}

@media screen and (max-width: 1800px) { /* Extra large screens, TV, Desktops, large screens */

	body{
	padding-left:5%;
	padding-right:5%;
	letter-spacing: .2rem;font-size: 1.2em;
    }
    
    .grid3-pad{
	padding:30px;
    }


}

@media screen and (max-width: 1600px) { /* Small screens, laptops */

	body{
	padding-left:2%;
	padding-right:2%;
	letter-spacing: .2rem;font-size: 1.2em;
    }
    
    .grid3-pad{
	padding:20px;
    }
    
    #content{max-width:90%;}

}


@media screen and (max-width: 1200px) { /* small screen */

	body{
	padding-left:2%;
	padding-right:2%;
	letter-spacing: .2rem;font-size: 1.5em;
    }
    
    .grid3-pad{
	padding:10px;
    }
    
    #content{max-width:96%;}
}



p{
  min-width:250px;
  text-align:justify;
}
 
p.alinea-rentrant{
  text-indent :2em;
}

p.alinea-saillant{
  text-indent :-2em;
  padding-left :2em;
}