body {
	background: #F7B4C6;
}

/*BANNERS------------------------------------------------------------------------------------------------------*/

.header {;

	background: #ffe6ed;

	max-width: 2560px;
	height: 50px;

	margin: auto;
}

		/*HEADER "COUCOU! JE SUIS ALEJANDRA"*----------------------------------------------------------------------*/

h1 {
	font-weight: 700;
	font-style: normal;
	font-size: 80px;

	text-align: center;
	padding-top: 20px;
	margin-bottom: 25px;
	line-height: 45px;
}


h1>span.one {
	position: relative;
	z-index: 2;
	font-family: "Homemade Apple", cursive;
	font-weight: 400;
	font-style: normal;
	font-size: 35px;
}

.title-two {
	position: relative;
	display: block;
	width: 350px;
	height: 90px;
	margin: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	z-index: 1;
	background: linear-gradient(to right,#f7b4c6, #FAF290, #ABEDC6, #81D0F8, #D499F7);
	background-position-y: 300;

	-webkit-background-clip: text;
	color: transparent;
}

		/*menu----------------------------------------------------------------------------------------------------*/

.menu {
	background: #ffe6ed;

	max-width: 2560px;
	height: 50px;

	 margin-bottom: 30px;
}

.container-menu {

position: relative;

width: 100vw;
max-width: 1280px;

margin: auto;
display: block;
}

.menu-buttons {

	position: relative;
	display: block;

	float: left;

	padding-top: 3px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 2px;

	font-weight: 500;
	font-style: normal;
	font-size: 20px;

	text-align: left;
	text-decoration: none;
	color: #4a363b;

	line-height: 45px;
	transition: background 0.5s;
}

.menu-buttons:hover {
	cursor: pointer;

	background: #f7b4c6;
	color: white;
}


/*PATRICIA, BOB------------------------------------------------------------------------------------------------*/

.patricia {

	max-width: 2560px;
	position: relative;
	margin: auto;
	display: block;

	background: white;
}

.bob {
	max-width: 1280px;
	position: relative;
	margin: auto;
	display: block;
}


/*CONTAINERS---------------------------------------------------------------------------------------------------*/

.container{
	position: relative;
	display: block;
}

/*PARRAGRAPHS------------------------------------------------------------------------------------------------------*/

.pink_ipsum {
	margin-top: 20px;
	margin-bottom: 20px;

	margin-left: 420px;

	position: relative;
	z-index: 1;
	display: block;
	float: left;
	width: calc( 65% + 30px);

	line-height: 20px;

	border: 2px solid;
	border-color: #4a363b;
} 

.experience {
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 335px;

	position: relative;
	z-index: 1;
	display: block;
	float: left;
	width: 413px;

	line-height: 20px;

	border: 2px solid;
	border-color: #4a363b;
}

.competences {
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;

	position: relative;
	z-index: 1;
	display: block;
	float: left;
	width: 413px;

	line-height: 20px;

	border: 2px solid;
	border-color: #4a363b;
}

.etplus {
	margin-top: 0;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;

	position: relative;
	z-index: 1;
	display: block;
	float: left;
	width: 64%;

	line-height: 20px;

	border: 2px solid;
	border-color: #4a363b;
}

.universites {
	margin-top: 20px;
	margin-bottom: 20px;

	margin-left:300px;

	position: relative;
	z-index: 1;
	display: block;
	float: left;

	width: 450px;

	line-height: 10px;

	border: 2px solid;
	border-color: #4a363b;
} 

.lycee {
	margin-top: -95px;
	margin-bottom: 20px;

	margin-left:570px;

	position: relative;
	z-index: 1;
	display: block;
	float: left;

	width: 450px;

	line-height: 10px;

	border: 2px solid;
	border-color: #4a363b;
} 


.competences h3{
	margin-left: 20px;
}
.row{
	margin-left: -10px;
	margin-right: -10px;
}


body {
	max-width: 100vw;
	overflow-x: hidden;

	font-family: "Fredoka", sans-serif;
	font-weight: 100;
	font-style: normal;
	font-size: 18px;
	/*line-height: 60px:;*/

 	/*background-image: url(../img/Template.jpg);*/

 	background-size: cover;

 	color: #4a363b;
}


p {
	margin-top: 20px;
}

.etplus p {
	margin-top: 20px;
	margin-left: 0px;

	text-align: left;
}

.formations p {
	line-height: 8px
}

.experience p {
	line-height: 8px
}

ul {
  list-style: none;
}

ul .purple::before {
  content: "─";
  font-style: 500px;
}

li{
	width: 100%;
	position: relative;

	margin-top: 7px;
	margin-bottom: 7px;
}

li>span{
	position: absolute;
	left: 115px;
	top: 0;
}



/*TITLES------------------------------------------------------------------------------------------------------*/

h2 {
	font-family: "Fredoka", sans-serif;
	font-weight: 500;
	font-size: 30px;

	padding-top: 20px;
	padding-bottom: 20px;
}

h2.right {
	font-family: "Fredoka", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 30px;

	text-align: right;

	padding-top: 20px;
	padding-bottom: 20px;
}

h2.left {
	font-family: "Fredoka", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 30px;

	text-align: left;

	padding-top: 20px;
	padding-bottom: 20px;
}

/*Titles in the tabs*/
h3 {
	font-family: "Fredoka", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 25px;

	padding-top: 20px;
	padding-bottom: 20px;

	margin-left: 20px;
}

/*Changed the line height to be aline with the buttons*/
h3.formations {
	line-height: 20px;
}

h5.right {

	text-align: right;

	margin-bottom: 20px
}





/*BOXES (TABS)------------------------------------------------------------------------------------------------------*/

.title-box{

	position: relative;
  display: block;

	border-bottom: 2px solid;
	border-color: #4a363b;
	width: 100%;
}

.background-purple {
	background: #D499F7;
}

.background-l-purple {
	background: #f4e5fd;
}

.background-yellow {
	background: #FAF290;
}


.background-l-yellow {
	background: #fdfad3;
}

.background-blue {
	background: #81D0F8;
}

.background-l-blue {
	background: #dff3fd;
}

.background-orange  {
	background: #f9d697;
}

.background-l-orange  {
	background: #fdf3e0;
}

.background-green {
	background: #ABEDC6;
}

.background-l-green {
	background: #eafaf1;
}

.buttons-container {
	position: absolute;
	top: 15px;
	right: 0;

	z-index: 10;
	
	margin-right: 20px;

}

.buttons-container>.button {

	position: relative;

	border: 2px solid;
	border-color: #4a363b;
	border-radius: 5px;
	width: 30px;
	height: 30px;

	margin-left: 5px;

	background: #ffffff;

	float: right;
	transition: opacity 1s;
}

.button:hover{
	opacity: 0.5;
	cursor: pointer;
}

.competences .buttons-container {
	margin-right: 20px;
}

.content-box{

	padding-left: 40px;	
	padding-right: 40px;
	padding-top: 10px;	
	padding-bottom: 30px;
}

/*Symbols (-,+)*/
h6 {
	font-family: "Fredoka", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
	    "wdth" 100;;
	font-size: 30px;

	line-height: 20px;

	text-align: center;
}


/*FORM------------------------------------------------------------------------------------------------------*/

.contacte-moi {
	margin-top: 20px;
	margin-bottom: 20px;

	position: relative;
	z-index: 1;
	display: block;
	float: left;
	width: 650px;

	line-height: 20px;

	border: 2px solid;
	border-color: #4a363b;
} 

.content-box.contact {
    padding-top: 30px;
}


input, textarea {
	position: relative;	
	display: block;

	width: 565px;

	padding: 5px;

	margin-top: 5px;
	margin-bottom: 20px;

	line-height: 20px;

	border: 2px solid;
	border-color: #4a363b;
	border-radius: 5px;


	font-family: "Fredoka", sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 15px;
	resize: vertical;
}

button {

	position: relative;	
	display: block;
	
	width: 130px;

	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;

 	padding: 10px;

	line-height: 20px;

	border: 2px solid;
	border-color: #4a363b;
	border-radius: 5px;

	font-family: "Fredoka", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 18px;
	color: #4a363b;	

	transition: background 0.5s;

	background: #D499F7
}

button:hover {
	cursor: pointer;

	background: #8f6899;
	color: white;
}


/*IMAGES------------------------------------------------------------------------------------------------------*/

img{

	width: 100%;
	height: auto;
}

.mamita {

	max-width: 450px;
	z-index: 2;
	position: absolute;

	top: -45px;
	left: 0px;

	float: left;

	margin: auto;

}.mamita-business {

	max-width: 430px;
	z-index: 2;
	position: absolute;

	margin-bottom: 10px;

	top: 370px;
	left: 400px;

	float: left;

	margin: auto;
}

.mamita-book {
	max-width: 430px;
	z-index: 2;
	position: absolute;
	display: block;
	
	top: 275px;
	left: 885px;

	float: left;

	margin-bottom: 20px;
}

.mamita-graduation {
	max-width: 380px;
	z-index: 2;
	position: absolute;

	top: 100px;
	bottom: 0;

	float: left;

	margin: auto;
}

.stationery {
	width: 20%;
	z-index: 2;
	position: absolute;

	top: 25px;
	left: 1025px;

	float: left;

	margin: auto;
}

.heart {
	width: 25px;
	position: relative;
	float: left;

	margin-top: 5px ;
	margin-left:  2px;
	margin-right: 2px;
	margin-bottom: 5px;
}

.heart-nono {
	width: 25px;
	position: relative;
	float: left;

	margin-top: 5px ;
	margin-left:  2px;
	margin-right: 2px;
	margin-bottom: 5px;
}

.mamita-phone {
	max-width: 450px;
	
	z-index: 2;
	position: absolute;

	left: 830px;

	float: left;

	margin: auto;
}

.portfolio-content {

	position: relative;

	width: 410px;

	margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
	
	z-index: 2;
	position: relative;

}

/*NINJA---------------------------------------------------------------------------------------*/

.background-red {
  background: #b75254;
}

.background-l-red {
  background: #b77c7d;
}

.ninja {
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;
  border-color: transparent;
  top: 0;
  left: 0;
  z-index: -1;
}

/*OTHERS------------------------------------------------------------------------------------------------------*/

.clearfix {
	position: relative;
	float: none;
	clear: both;
	width: 100%;
}

.masonry { 
  display: flex;
  flex-flow: column wrap;
  max-height: 800px;
  margin-left: -8px; /* Adjustment for the gutter */
  width: 100%;
}

.masonry-brick {
  margin: 0 8px 8px 0; /* Some gutter */
}
.mobile-only{
	background: pink;
	display: none;
}


/*}

.container1 { 

	display: flex;

}*/