/* -------------------------------------------*/
/* BASIC SETUP */
/* -------------------------------------------*/



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    background-color: rgb(250, 250, 250);
    font-family: 'europa', 'Arial', sans-serif;
    text-rendering: optimizeLegibility; /* will make the fonts render in a perfect way*/
}





/* -------------------------------------------*/
/* CSS Text animaiton Landing Page */
/* -------------------------------------------*/



span{
	opacity: 0;
    display: inline;
    position: absolute;
    color: rgb(0, 28, 193);
	animation: textanimation infinite 18s;
-webkit-animation: textanimation infinite 18s;
}


span:nth-child(2) { 
	animation-delay: 3s; 
	color: rgb(255, 79, 77);
}
 span:nth-child(3) { 
	animation-delay: 6s; 
	color: rgb(44, 217, 169);
}
 span:nth-child(4) { 
	animation-delay: 9s; 
	color: rgb(0, 28, 193);
}
 span:nth-child(5) { 
	animation-delay: 12s; 
	color: rgb(255, 79, 77);
}

 span:nth-child(6) {  
	animation-delay: 15s; 
	color: rgb(44, 217, 169);
}




/* --------TEXT ANIMATION --------*/



@keyframes textanimation {
    0% { opacity: 1; }
    14% { opacity: 1; }
    15% { opacity: 0; }
    100% { opacity: 0; }
}




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




h1, 
h2,
h3, 
h4, 
h5, 
h6 {
    color: #022242;
}


/* H1 Bold Headline */

h1 {
  font-size: 80px;
  font-weight: 700;
  line-height: 130%;
  font-style: normal;
  text-align: left;

}


@media (max-width: 812px){
  h1{
    font-size: 60px;
  }
}


@media (max-width: 580px){
  h1{
    font-size: 36px;
  }
}

/* H1 Bold Headline class for ABOUT SITE*/

h1.about {
  font-size: 70px;
  font-weight: 700;
  line-height: 130%;
  font-style: normal;
  text-align: left;

}


@media (max-width: 812px){
  h1.about{
    font-size: 60px;
  }
}


@media (max-width: 580px){
  h1.about{
    font-size: 36px;
  }
}


/* h2 Thin Headline */

h2 {
    font-size: 80px;
    font-weight: 300;
    font-style: normal;
    text-align: left;
    line-height: 120%;
}

@media (max-width: 812px){
  h2{
    font-size: 54px;
  }
}


@media (max-width: 580px){
  h2{
    font-size: 32px;
  }
}

/* h2 class for text on ABOUT SITE */

h2.about {
    font-size: 70px;
    font-weight: 300;
    font-style: normal;
    text-align: left;
    line-height: 120%;
}

@media (max-width: 812px){
  h2.about {
    font-size: 54px;
  }
}


@media (max-width: 580px){
  h2.about {
    font-size: 32px;
  }
}

/* h3 Thin LP Text Style */

h3 {
    font-weight: 300;
    font-size: 48px;
    font-style: normal;
    text-align: left;
    line-height: 120%;
}


@media (max-width: 580px){
  h3{
    font-size: 28px;
  }
}


h3.bold {
    font-weight: 500;
    text-align: center;
}



/* h4 Bold Title PS Text Style */

h4 {
    font-weight: 700;
    font-size: 20px;
    font-style: normal;
    text-align: left;
    line-height: 135%;
    padding-bottom: 5px;
}


@media (max-width: 580px){
  h4{
    font-size: 18px;
  }
}


h4.centred {
  text-align: center;
}

@media (max-width: 580px){
  h4.centred{
    font-size: 18px;
  }
}



h4.WithTopGap {
  padding-top: 56px;
}

h4.FortytwoPX {
  font-weight: 500;
  font-size: 30px;
}


@media (max-width: 580px){
  h4.FortytwoPX{
    font-size: 24px;
  }
}



/* h5 Underline Link Font Style */

h5 {
    font-weight: 500;
    font-size: 24px;
    font-style: normal;
    letter-spacing: 0.7px;
    z-index: 2;
}


@media (max-width: 580px){
  h5{
    font-size: 20px;
  }
}

h5.bold {
     font-weight: 500;
}


/* h6 Image Caption */


h6 {
    font-weight: 500;
    font-size: 14px;
    font-style: normal;
    line-height: 135%;
}

h6.WithGaps {
  padding-top: 12px;
  padding-bottom: 48px;
}




h6.scaleable {
    font-weight: 500;
    font-size: 14px;
    font-style: normal;
    line-height: 135%;
}


@media (max-width: 580px){
  h6.scaleable {
    font-weight: 500;
    font-size: 7px;
    font-style: normal;
    line-height: 135%;
}
}

  
  
  
p {
   font-weight: 300;
    font-size: 20px;
    font-style: normal;
     letter-spacing: 0.5px;
/*    text-align: left;*/
    line-height: 135%;
}


@media (max-width: 580px){
  p{
    font-size: 18px;
  }
}

p.bold {
     font-weight: 500;
  
}


/* --------BULLET POINT LIST --------*/

 ul {
  list-style-type: disc;
  margin-left: 22px;
}

li {
  font-weight: 300;
  font-size: 20px;
  font-style: normal;
  letter-spacing: 0.5px;
  line-height: 135%;
}

@media (max-width: 580px){
  li {
     font-size: 18px;
  }
}

/* --------LINKS --------*/


/*
a.l1:link,
a.l1:visited { 
    display: inline-block;
    line-height: 100%;
    border-radius: 2px;
    padding: 0px 10px 4px 5px;
    background-color: rgba(2, 34, 66, 0);
    text-decoration-line: underline;
    text-decoration-style: solid;
    color: #022242;
    transition: background-color 0.25s ease-out, color 0.25s ease-out, text-decoration 0.25s ease-out; 
}



a.l1:hover,
a.l1:active { 
    display: inline-block;
    line-height: 100%;
    border-radius: 2px;
    padding: 0px 10px 4px 5px;
    background-color: rgba(2, 34, 66, 1);
    text-decoration-line: none;
    color: #fff;
}



*/



/* -------------------------------------------*/
/*                  ANCHOR                    */
/* -------------------------------------------*/

#MP{}

#Emilie{}

#Leopold{}

#AppIcon {}

#ToolbarTab {}

#WindowDesign {}

#UIComponents {}

#Onboarding {}

/* -------------------------------------------*/
/*                  LAYOUT                    */
/* -------------------------------------------*/




/* ------ 🐰  2 column Grid ------- */


.projectSiteGrid{
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 6%;
  height: 100vh;
}

@media (max-width:812px){
  .projectSiteGrid  {
    height: auto;
  }
}



.grid2x2 {
  display: flex;
  flex-wrap: wrap;
}


@media (max-width:812px) {
  .grid2x2 {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
  }
 }




/* Makes a 2 column row */


.grid2x2Col {
  display: flex;
  flex-basis: 50%;
  flex-direction: row;
  flex-grow: 1;
}



@media (max-width:812px) {
.grid2x2Col {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
}




.box  { padding-top: 20px;}
.box2 { padding-top: 60px; padding-bottom: 50px;}
.box3 { padding-bottom: 20px;}
.box4 { padding-top: 20px; }



/* 🐰  Image Layout Grid */


.GridImageBox {
  max-width: 100%;

}



@media (max-width: 812px){
  .GridImageBox {
    float: right;
    max-width: 60%;
    height: auto;
  }
 }


/* -------------------------------------------*/
/* LANDING PAGE referd to as "LP"*/
/* -------------------------------------------*/

/* 🐰  Text Layout  */

.textBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10%;
  padding-right: 10%;
  height: 100vh;
}

@media (max-width: 812px){
  .textBox{
    height: auto;
    padding-top: 20%;
    padding-bottom: 20%;
  }
}


.LPtextBoxlastText {
   display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10%;
  padding-right: 10%;
  height: 100vh;
}


@media (max-width: 812px) {
  .LPtextBoxlastText{
    height: auto;
    padding-top: 20%;
    padding-bottom: 20%;
  }
}


@media (max-width: 320px) {
  .LPtextBoxlastText{
    height: auto;
    padding-top: 60%;
    padding-bottom: 20%;
  }
}

/* 🐰  Image Layout  */

.LPImageBox {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 10%;
  padding-right: 10%;

}



.LPImageFrame{
  max-width: 100%;
}


@media (max-width: 812px){
  .LPImageFrame{
   max-width: 60%;
  }  
}


@media (max-width: 580px){
  .LPImageFrame{
   max-width: 100%;
  }  
}



.LPFixedTextBox {
  position: absolute;
  left: 10%;
  z-index: 99;
  width: 30vw;
}


/* -------- BÄRIS MEDIA QUERY FOR THE VERTICALLY STACKED LAYOUT --------*/

@media (max-width: 580px){
  .LPFixedTextBox{
    position: static;
    width: 80vw;
    padding-bottom: 48px;
  }
}


@media (max-width: 320px){
  .LPFixedTextBox{
    padding-top: 200px;
    padding-bottom: 30px;
  }
}

/* -------- END OF BÄRIS MEDIA QUERY --------*/



/*  GAP AND SECTIONS  */

.LPBottomGap {
  height: 6vh;
}


.LPImageFrameEnd {
  max-width: 100%;
}


@media (max-width: 800px) {
.LPImageFrameEnd {
  max-width: 8%;
  }
}



/* -------------------------------------------*/
/* ABOUT SITE referd to as "About"*/
/* -------------------------------------------*/

/* 🐰  Text Layout  */

.AboutTextBox {
  display: flex;
  flex-direction: column;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 6%;
  padding-bottom: 6%;

}

@media (max-width: 812px){
  .AboutTextBox{
    height: auto;
    padding-top: 10%;
    padding-bottom: 10%;
  }
}

/* -------------------------------------------*/
/* PROPJECT SITE referd to as "Ps"*/
/* -------------------------------------------*/


.SectionPs {
  margin-top: 160px;
}

.SectionPsDivider {
  margin-bottom: 70px;
}


.SectionPsChapterDivider {
  height: 20vh;
}

@media (max-width: 414px){
  .SectionPsChapterDivider {
  height: 48px;
}
}

.PsGap {
  height: 25px;
}

.PsGrid{
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 7%;
  margin-bottom: 10%;
  height: auto;
}

@media (max-width:812px){
  .PsGrid  {
    height: auto;
  }
}



.PsGrid2x2 {
  display: flex;
  flex-wrap: wrap;
}


@media (max-width:812px) {
  .PsGrid2x2 {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
  }
 }




/* Makes a 2 column row */


.PsGrid2x2Col {
  display: flex;
  flex-basis: 50%;
  flex-direction: row;
  flex-grow: 1;
}



@media (max-width:812px) {
.PsGrid2x2Col {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
}




.PsBox1 {
  padding-right: 40px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}


@media (max-width:812px) {
  .PsBox1 { padding-right: 0px;}
}

.PsBox2 {}

@media (max-width:973px) {
  .PsBox2 {
    padding-top: 40px;
    text-align: center;
  }
}


.PsBox3 { padding-top: 60px; padding-right: 40px;}

@media (max-width:812px) {
  .PsBox3 {padding-top: 40px; padding-right: 0px;}
}

.PsBox4 { padding-top: 60px; }

@media (max-width:812px) {
  .PsBox4 {padding-top: 40px;}
}


/* --------IMAGE LAYOUT --------*/

.PsImageContainerNoWrap {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: 10%;
  padding-right: 10%;
}



.PsImageContainer {
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-left: 10%;
  padding-right: 10%;
}


.PsImageBox{
text-align: center;
}



.PsImageFrame{
  max-width: 100%;
  
}


.PsImageFrame75percent{
  width: 75%;
}

.PsEmilieImageFrame75percent{
    width: 75%;
}

@media (max-width: 414px){
  .PsEmilieImageFrame75percent{
    width: 100%;
}
}


.PsImageFrame50percent{
  width: 50%;
}

@media (max-width: 812px){
  .PsImageFrame50percent{
  width: 75%;
  }
}


@media (max-width: 580px){
  .PsImageFrame50percent{
  width: 100%;
  }
}



.PsImageFrame25percent{
  width: 25%;
  
}

@media (max-width: 580px){
  .PsImageFrame25percent{
  width: 50%;
  }
}


.PsImageFrameHero {
  max-width: 100%;
}

@media (max-width:973px) {
  .PsImageFrameHero {
    width: 80%;    
  }
}

/* -------- VIDEO LAYOUT --------*/

.PsVideoBox {
  z-index: 80;
  position: absolute;
  max-width: 238px;
  bottom: 21.45%
}

@media (max-width:400px){
  .PsVideoBox {
    width: 58%;
  }
}


/* For videos that were documented with my iPhone 5 */
.PsVideoBoxOldVideos {
  z-index: 84;
  position: absolute;
  max-width: 238px;
  bottom: 23.9%;
}

@media (max-width:400px){
  .PsVideoBoxOldVideos {
    width: 58%;
  }
}




.PsVideoBoxGeneral {
  margin-bottom: 24px;
  z-index: 85;
  width: 75%;

}

@media (max-width:812px) {
  .PsVideoBoxGeneral {
  z-index: 85;
  width: 100%;   
}
}




.PsVideoBoxGeneralShadow{
  box-shadow: 0 0 12px 0 rgba(0,0,0,0.28);
  margin-bottom: 24px;
  z-index: 85;
  width: 75%;
}

@media (max-width:812px) {
  .PsVideoBoxGeneralShadow {
  z-index: 85;
  width: 100%;
}
}

/* -------- TEXT LAYOUT --------*/

.PsTextBox {
  display: flex;
  position: relative;
  justify-content: center;
  text-align:center;
  padding-left: 30%;
  padding-right: 30%;
}




@media (max-width: 812px){
  .PsTextBox {
  padding-left: 20%;
  padding-right: 20%;
  }
}



.PsTextBoxLeftAligned {
  display: flex;
  position: relative;
  text-align:left;
  padding-top: 20px;
  padding-left: 28%;
  padding-right: 28%;
}




@media (max-width: 1025px){
  .PsTextBoxLeftAligned {
  padding-top: 18px;
  padding-left: 18%;
  padding-right: 18%;
  }
}


@media (max-width: 812px){
  .PsTextBoxLeftAligned {
  padding-top: 18px;
  padding-left: 10%;
  padding-right: 10%;
  }
}


.SectionPsText{
  margin-bottom: 40px;
}


/* -------- ORNAMENTS --------*/


.PsDotContainer {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin-top: 72px;
}

.PsDot {
  width: 4px;
  height: 4px;
  background-color: #022242;
  border-radius: 50%;
  margin-left: 10px;
  margin-right: 10px;
}

.BottomLine {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 12px;
  margin-left: 12px;
  margin-right: 12px;
  border-radius: 4px;
  height: 12px;
  background-color: #022242; 
}




/* -------------------------------------------*/
/* -------------------------------------------*/
/* LINKS */
/* -------------------------------------------*/
/* -------------------------------------------*/





.PsBackButtonTopContainer {
  position:relative;
  margin-left: 10%;
  margin-top: 40px;
}


.PsBackButtonBottomContainer {
  display: flex;
  flex-direction: column;
  background-color:rgba(250,250,250,1);
  height:60vh;
  width: auto;
  justify-content: center;
  align-items: center;
  z-index: -10;
 
  
}





/* -------------------------------------------*/
/* RED UNDERLINE LINK */
/* -------------------------------------------*/


    a.RedUnderlineLink {
       text-decoration: none; 
       position: relative;
       color: #022242;
     }   

    a.RedUnderlineLink:after {
        position: absolute;
        content: '';
        height: 5px;
		z-index: -1;
		  /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
        bottom: -5px; 
		border-radius: 4px;


       /****** 
       optional values below 
       ******/
        
        /* center - (optional) use with adjusting width   */
        margin: 0 auto;
		left: 0;
        right: 0;
		width: 100% ;
		background: rgba(255, 79, 77, 0.9);
		  
		  /* optional animation */
		-o-transition:.5s;
  		-ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
    }
	 

	 /* optional hover classes used with anmiation */
	  a.RedUnderlineLink:hover:after {
		  width: 114%;
		  height: 115%;
		  left: -7%;
		  background: rgba(255, 79, 77, 0.9);
    }


/* RED UNDERLINE FOR BIG TEXT */


    a.RedUnderlineLinkBig {
       text-decoration: none; 
       position: relative;
       color: #022242;
     }   

    a.RedUnderlineLinkBig:after {
        position: absolute;
        content: '';
        height: 5px;
		z-index: -1;
		  /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
        bottom: 6px; 
		border-radius: 4px;


       /****** 
       optional values below 
       ******/
        
        /* center - (optional) use with adjusting width   */
        margin: 0 auto;
		left: 0;
        right: 0;
		width: 100% ;
		background: rgba(255, 79, 77, 0.9);
		  
		  /* optional animation */
		-o-transition:.5s;
  		-ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
    }
	 

	 /* optional hover classes used with anmiation */
	  a.RedUnderlineLinkBig:hover:after {
		  width: 114%;
		  height: 80%;
		  left: -7%;
		  background: rgba(255, 79, 77, 0.9);
    }

@media (max-width: 580px){
  a.RedUnderlineLinkBig:after{
    bottom: 1px;
  }
}

/* -------------------------------------------*/
/* GREEN UNDERLINE LINK */
/* -------------------------------------------*/



    a.GreenUnderlineLink {
       text-decoration: none; 
       position: relative;
       color: #022242;
     }   

    a.GreenUnderlineLink:after {
        position: absolute;
        content: '';
        height: 5px;
		z-index: -1;
		  /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
        bottom:-5px; 
		border-radius: 4px;


       /****** 
       optional values below 
       ******/
        
        /* center - (optional) use with adjusting width   */
        margin: 0 auto;
		left: 0;
        right: 0;
		width: 100%;
		background: rgba(44, 217, 169, 1);
		  
		  /* optional animation */
		-o-transition:.5s;
  		-ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
    }
	 

	 /* optional hover classes used with anmiation */
	  a.GreenUnderlineLink:hover:after {
		  width: 114%;
		  height: 115%;
		  left: -7%;
		  background: rgba(44, 217, 169, 0.8);
    }



/* GREEN UNDERLINE FOR BIG TEXT */


    a.GreenUnderlineLinkBig {
       text-decoration: none; 
       position: relative;
       color: #022242;
     }   

    a.GreenUnderlineLinkBig:after {
        position: absolute;
        content: '';
        height: 5px;
		z-index: -1;
		  /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
        bottom: 6px; 
		border-radius: 4px;


       /****** 
       optional values below 
       ******/
        
        /* center - (optional) use with adjusting width   */
        margin: 0 auto;
		left: 0;
        right: 0;
		width: 100%;
		background: rgba(44, 217, 169, 1);
		  
		  /* optional animation */
		-o-transition:.5s;
  		-ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
    }
	 

	 /* optional hover classes used with anmiation */
	  a.GreenUnderlineLinkBig:hover:after {
		  width: 114%;
		  height: 80%;
		  left: -7%;
		  background: rgba(44, 217, 169, 0.8);
    }

@media (max-width: 580px){
  a.GreenUnderlineLinkBig:after{
    bottom: 1px;
  }
}



/* -------------------------------------------*/
/* BLUE UNDERLINE LINK */
/* -------------------------------------------*/



    a.BlueUnderlineLink {
       text-decoration: none; 
       position: relative;
       color: #022242;
     }   

    a.BlueUnderlineLink:after {
        position: absolute;
        content: '';
        height: 5px;
		z-index: -1;
		  /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
        bottom: -5px; 
		border-radius: 4px;


       /****** 
       optional values below 
       ******/
        
        /* center - (optional) use with adjusting width   */
        margin: 0 auto;
		left: 0;
        right: 0;
		width: 100%;
		background: rgba(0, 28, 193, 1);
		  
		  /* optional animation */
		-o-transition:.5s;
  		-ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
    }
	 

	 /* optional hover classes used with anmiation */
	  a.BlueUnderlineLink:hover:after {
		  width: 114%;
		  height: 115%;
		  left: -7%;
		  background: rgba(0, 28, 193, 0.8);
    }




/*  BLUE UNDERLINE LINK BIG */


  a.BlueUnderlineLinkBig {
       text-decoration: none; 
       position: relative;
       color: #022242;
     }   

    a.BlueUnderlineLinkBig:after {
        position: absolute;
        content: '';
        height: 5px;
		z-index: -1;
		  /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
        bottom: 6px; 
		border-radius: 4px;


       /****** 
       optional values below 
       ******/
        
        /* center - (optional) use with adjusting width   */
        margin: 0 auto;
		left: 0;
        right: 0;
		width: 100%;
		background: rgba(0, 28, 193, 1);
		  
		  /* optional animation */
		-o-transition:.5s;
  		-ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
    }
	 

	 /* optional hover classes used with anmiation */
	  a.BlueUnderlineLinkBig:hover:after {
		  width: 114%;
		  height: 80%;
		  left: -7%;
		  background: rgba(0, 28, 193, 0.8);
    }


@media (max-width: 580px){
  a.BlueUnderlineLinkBig:after{
    bottom: 1px;
  }
}

/* -------------------------------------------*/
/* RED BOOKMARK LINK*/
/* -------------------------------------------*/



    a.RedBookmarkLink {
       text-decoration: none; 
       position: relative;
       color: #022242;
/*       margin-right: 25px;*/
     }   

    a.RedBookmarkLink:after {
        position: absolute;
        content: '';
        height: 34px;
		z-index: -1;
		  /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
        bottom: -5px; 
		border-radius: 4px;
        


       /****** 
       optional values below 
       ******/
        
        /* center - (optional) use with adjusting width   */
        margin: 0 auto;
		width: 114%;
        left: -7%;
		background: rgba(255, 79, 77, 0.1);
		  
		  /* optional animation */
		-o-transition:.5s;
  		-ms-transition:.5s;
        -moz-transition:.5s;
        -webkit-transition:.5s;
        transition:.5s;
    }
	 

	 /* optional hover classes used with anmiation */
	  a.RedBookmarkLink:hover:after {
		  background: rgba(255, 79, 77, 0.9);
    }