body{height:100vh;margin:0px;display:block;font-family:Montserrat;}
aside{
  background-color:white;
  width:260px;
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  font-weight:600;
  z-index:1;
  border-right: solid ;
  border-width: 1px;
  border-color:rgb(210, 210, 210) !important;
}
main{margin-left:260px;}

ul{
  list-style-type:none;
  margin:0;
  padding: 0px 40px 40px 40px;}

/* .image-profile-1{
  max-width:100vw;
  width:800px;
  height:auto;
  object-fit:contain;
  align-self:end;
  justify-self:right;
  margin-left:-104px;
  z-index:-1;
} */
/* .image-profile-2{max-width:100vw;width:600px;height:auto;object-fit:contain;align-self:end;justify-self:right;margin-left:-50px;z-index:-1;} */
/* .page-wrapper{display:grid;grid-template-columns:3fr 1fr;}
.page-wrapper-banner{grid-template-rows:auto auto;}
.page-content{display:flex;flex-direction:column;justify-content:space-around;margin:20px;max-width:90vw;}
.page-banner{grid-column:span 2;} */
.dropdown-content-a{
  text-decoration:none;
  padding:17px 0px;
  display:flex;
  border-bottom-style:solid;
  border-color:gainsboro;
  border-width:1px;
  color:rgb(0, 0, 0);
  font-size:11pt;
  font-weight:600;
}
.dropdown-content-a:hover {
  color: rgb(253, 66, 144) !important;
}

.dropdown-content-a-span{
  color: rgb(253, 66, 144);
  padding-right:5px;
  font-size:20pt;
  font-weight:400;
  line-height: 11pt;

}

.menu-button{display:none;}

.logo-container{
  max-height: 100%;
  margin: 40px 60px 40px 40px;
  /* padding:40px; */
  /* height:100px; */
  overflow: hidden;
}
.logo{
  height:100%;
  /* height: 80px; */
  width:100%;
  opacity: 0.9;
  object-fit: contain;
  
}
/* .logo-container{
  padding:40px;
  height:100px;
}
.logo{
  max-width: 160px;
  width:auto;
  opacity: 0.9;
} */
.menu-icon{
  width:25px;
  height:3px;
  background-color: rgb(253, 66, 144);
  margin:6px 0;
}


/* 
.flex{display:flex;flex-wrap:wrap;}
.font-14{font-size:14px;}
.font-16{font-size:16px;}
.font-36{font-size:36px;}
.padding-8{padding:8px;}
.width-300{width:300px;} */


/* .page-title{color:rgb(100, 100, 100);font-weight:600;font-size:40px;margin-bottom:20px;}
.page-title span{color:red;font-weight:400;font-size:50px;} */

/* .text2{font-size:15px;font-weight:300;letter-spacing:1px;} */
/* .list{list-style-type:none;margin:0;padding:30px;}
.list li{text-decoration:none;padding:10px 0px;display:flex;color:black;font-size:12pt;}
.list li div{width:140px;} */



/* .quotation-symbol{font-weight:800;font-size:90px;}
.font-color-1{color:rgb(239, 16, 109);}
.font-color-2{color:rgb(255, 216, 0);}
.font-color-3{color:rgb(100, 100, 100);}
.font-color-4{color:rgb(50, 50, 50);}
.font-color-5{color: white;} */
/* .minheigh-100-lanscape{
  min-height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.minheigh-100{min-height:100vh;} */



.socialmedia{
  padding: 0px 40px 0px 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: space-around; */

}
.socialmedia__link{
  padding-right: 14px;
  text-decoration-line: none;
  /* min-width: 10px; */
}

.color__dark-grey {
  color:rgb(61, 61, 61) !important;
}

.color__light-grey {
  color:rgb(61, 61, 61) !important;
}

.color__rose{
  color: rgb(253, 66, 144) !important;
}

.font__standard{
  line-height: 22px;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.26px;
}

.font__bold{
  line-height: 22px;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.26px;
}

.font__smaller{
  line-height: 22px;
  font-size:13px;
  font-weight:400;
  letter-spacing:0.26px;
}
.font__smaller2{
  line-height: 22px;
  font-size:13px;
  font-weight:450;
  letter-spacing:0.26px;
}

/* -------------------------------------- HOME -------------------------------------- */

.home{
  position: relative;
  display: flex;
  /* height: auto; */
  flex-direction: row;
  max-height: 100vh;
  /* align-items: center; */
  justify-content: flex-end;
  background-color:rgb(239, 16, 109);
}
.home__container{
  position: absolute;
  display: flex;
  overflow: visible;
  /* margin-left: 38px; */
  float: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  object-fit: fill;
  /* height: 100%;  
  align-items:center;
  justify-items:center; */
  left: 40px;
  top: 0%;
  bottom: 0%;
  
}
.home__image{
  height: 100vh;
  width: auto;

  position: static;
  
  
  align-self: flex-end;
  object-fit: contain;
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
.home__hi{color:white;font-weight:600;font-size:40px;}
.home__name{color:white;font-weight:600;font-size:38px;}
.home__profession{
  color:rgb(255, 255, 255);
  padding:5px;
  font-weight:600;
  font-size:20px;
  background-color: rgb(32, 32, 32);
}


/* -------------------------------------- PAGE -------------------------------------- */

.page {
  /* min-height: 900px !important; */
  background-size: contain !important;
  overflow: hidden !important;
  min-height: 800px;
  /* background-size: 200px !important; */
  background-position: bottom right !important;

  /* background-size: 300px !important; */
 

}

.page__container{
  /* max-width: 900px; */
  margin-left: 5vw;
  margin-right: 36vw;
  /* margin-bottom: 350px; */
}

.page__container-nophoto{
  /* max-width: 800px; */
  margin: 20px 10vw 20px 10vw;
  /* margin-bottom: 350px; */
}

.page__content{
  grid-area: content;
  margin: 0px auto 0px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* min-width: 600px; */
  justify-self: flex-end;
  height: 100%;
    
}

.page__text{
  /* max-width: 600px; */
  grid-area: text;
  margin: 40px;
  color:rgb(98,98,98);
  line-height: 22px;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.26px;

}


.page__title{
  /* color:rgb(100, 100, 100); */

  font-weight: 700;
  font-size: 28px;
  margin-top:80px;
  margin-bottom:0px;
  
}
.page__title-span{
  font-weight:400;
  font-size:40px;
}

/* -------------------------------------- ABOUT -------------------------------------- */

.about{
  background: url(../images/Final_Image_1_Page2_About_Me.png) no-repeat;
}
.about__text{
  margin-top: 40px;
  margin-bottom: 40px;
}
.about__table{
  margin-top: 40px;
  max-width: 320px;
  grid-area: table;
  border-collapse: collapse;
  border-style: hidden;
}
.about__table-row{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 15px 0px 15px 0px;
  border-bottom: 1px solid rgb(206, 205, 205);
}
.about__table-left{
  min-width: 100px;
  /* min-height: 50px; */

}
.about__table-right{
  width: 200px;
  /* min-height: 50px; */
}



/* .about__table-datacol{
  line-height: 22px;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.26px;
}
.about__table td{
  padding: 12px 12px 12px 0px;
  min-width: 50px;
  min-height: 70px;
  border-bottom: 1px solid rgb(206, 205, 205);
}

.about__table-cell td{
 font-size: 10px !important;
} */



/* -------------------------------------- SKILLS -------------------------------------- */

.skills{
  background: url(../images/Final_Image_1_Page3_Skills.png) no-repeat;

}
.skills__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* min-width: 600px; */
  justify-self: flex-end;
  height: 100%;
}
.skills__skillcontainer{
  grid-area: skillcontainer;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); */
  /* max-width: 1100px; */
  /* padding: 10vw; */
  margin-top: 40px;
}

.skills__card{
  max-width:340px;
  display:grid;
  grid-template-columns: 1fr 6fr;
  grid-template-rows: 30px auto;
  margin:10px;
}
.skills__card-aside{
  grid-column:1;
  grid-row:1 / span 2;
  padding: 8px;

  /* color: rgb(100, 100, 100); */
}

.skills__card-aside-icon{
  width:40px;
}
.skills__card-top{
  grid-column:2 / span 2;
  grid-row:1;
  padding: 8px;
  /* font-size: 16px;
  font-weight: 300; */
  /* color: rgb(239, 16, 109); */
}
.skills__card-bottom{
  grid-column:2 / span 2;
  grid-row:2;
  padding: 8px;
  /* font-size: 16px;
  font-weight: 300; */
  /* color: rgb(100, 100, 100); */
}

.skills__baner{
  grid-area: baner;
  background-color:rgb(255, 216, 0);
  /* min-height:15vh; */
  bottom:0px;
  display:flex;
  flex-flow:row wrap;
  justify-content: space-around;
  align-items:center;

}
.skills__baneritem{
   /* color:rgb(100, 100, 100); */
   
   font-weight: 700;
   font-size: 20px;
   margin:40px;
}
.skills__baneritemspan{

  font-weight:600;
  font-size:20px;
}




/* -------------------------------------- EDUCATION -------------------------------------- */

.education{
  background: url(../images/Final_Image_1_Page4_Education.png) no-repeat;
  background-position: top;
  
}
.education__text{
  margin-top: 20px;
  margin-bottom: 20px;
 
}

.education__cardgrid{
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 20px;
}
.education__card{
  width:340px;
  min-width: 250px;
  display:grid;
  grid-template-columns: 50px auto;
  grid-template-rows: 60px auto;
  margin-bottom:20px;
}
.education__card-aside{
  grid-column:1;
  grid-row:1 / span 2;
  padding: 8px;
  font-size: 30px;
  font-weight: 500;
  /* color: rgb(253, 66, 144); */
}
.education__card-top{
  grid-column:2 / span 1;
  grid-row:1;
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
  /* color: rgb(68, 67, 67); */
  margin-top: 4px;
}
.education__card-bottom{
  grid-column:2 / span 1;
  grid-row:2;
  padding: 8px;
  font-size: 13px;
  font-weight: 400;
  /* color: rgb(100, 100, 100); */
}

.education__quote{
  max-width:600px;
  display:grid;
  grid-template-columns: 1fr 6fr;
  grid-template-rows: 100px auto;
  margin: 60px 20px 0px 30px;
}
.education__quote-aside{
  text-align: center;
  grid-column:1;
  grid-row:1 / span 2;
  padding: 8px;
  font-size: 128px;
  font-weight: 300;
  color: rgb(239, 16, 109);
  font-family:Arial;
}
.education__quote-top{
  grid-column:2 / span 2;
  grid-row:1;
  padding: 8px;
  font-size: 16px;
  font-weight: 300;
  color: rgb(100, 100, 100);
}
.education__quote-bottom{
  text-align: right;
  grid-column:2 / span 2;
  grid-row:2;
  padding: 8px;
  font-size: 16px;
  font-weight: 300;
  color: rgb(239, 16, 109);
}


/* -------------------------------------- EMPLOYMENT -------------------------------------- */

.employment{
  min-width: 100%;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}
.employment__content{
  /* display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "title"
    "skillcontainer"
    "image"; */
    grid-area: content;
  /* margin: 0px auto 0px 0px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* min-width: 600px; */
  justify-self: flex-end;
  height: 100%;
 
}


.employment__workplaces{
  /* grid-area: workplaces; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* max-width: 100vw; */
}

.employment__footer{
  display: flex;
  flex-direction: row;
  background-color:rgb(239, 16, 109);
  min-width: 100%;
  margin-bottom: 0px;
}

.employment__footer-image{
  background-color:rgb(239, 16, 109);
  position: relative;
  min-width: 380px;
  min-height: 300px;
  /* margin-right: -50px;
  z-index: 0; */
}
.employment__footer-image img{
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* object-fit: contain; */
}
.employment__footer-text{
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.employment__footer-qote{
  background-color:rgb(239, 16, 109);
  padding: 0px 0px 0px 0px;
  max-width: 100vw;
  

}
.employment__footer-events{
  background-color:rgb(239, 16, 109);
  padding: 0px;
  /* display: grid; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* padding: 10px; */
  /* grid-gap: 20px; */
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
  /* max-width: 100vw; */
  justify-content: space-evenly;
  /* height: 100%; */
  align-content:space-around;
  /* align-items: stretch; */

}


/* -------------------------------------- PORTFOLIO -------------------------------------- */
.jg-caption{
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: Montserrat !important;
  padding: 10px 10px 10px 15px !important;
  /* 
  vertical-align: text-bottom;
  
  background-color: rgb(0, 0, 0) !important;
  min-height: 100% !important; */

}


/* -------------------------------------- CONTACT -------------------------------------- */

.contact{
  background: url(../images/Final_Image_1_Page7_Contact.jpg) no-repeat;
  /* background-position: top; */
}
.contact__list{
  margin-top: 40px;
  margin-bottom: 40px;
}
.contact__list-element{
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
}
.contact__list-element span{
 padding-left: 10px;
}


/* -------------------------------------- PROJECT -------------------------------------- */

.project{
  /* display: grid;
  justify-items: stretch;
  grid-gap: 20px;
  grid-template-areas:
    "hero"
    "title"
    "title-expxtended"
    "facts"
    "description"
    "gallery"; */
  /* padding-left: 10vw; */
  /* padding-right: 1vw;
  padding-top: 8vh;
  
  font-size:18px;
  font-weight:300;
  letter-spacing:1px;
  line-height:22px; */
}

.project__nav{
  display: flex;


}
.project__link{
  margin: 5px;
  text-decoration:none;
  text-align: center;
  font-size:36pt;
  font-weight:400;
  color: rgb(253, 66, 144) !important;
  width:40px;
}

.project__link-container{
  width: 10vw;
  position:fixed;
	display: flex;
  justify-content: center;

  top: 45vh;
}

.project__link-left{
  
	/* left:10vw !important; */

}

.project__link-right{
  
	right: 0px !important;

}

.project__title{
  font-weight: 600;
  font-size: 18px;
  margin-top:40px;
  margin-bottom:15px;
  text-justify: center;
}
.project__title-span{
  font-weight:400;
  font-size:30px;
}

.project__container{
  display: flex;
  flex-direction: row;
  /* margin-top: 20px; */
  margin-bottom:  40px;
  
}


.project__description{
  grid-area: description;
  /* margin-top: 20px; */
  /* margin-bottom:  40px; */
  
}
.project__gallery{
  grid-area: gallery;
  margin: -10px;
}



/* -------------------------------------- TABLE -------------------------------------- */
.table{

}
.table td{
  padding: 10px;
}



/* -------------------------------------- JOBQUOTE -------------------------------------- */

.jobquote{
  background-color:rgb(239, 16, 109);
  padding: 20px 20px 20px 0px;
  border-bottom-style:solid;
  border-color:white;
  border-width:1px;
  
}

.jobquote__text{
  color:white;
  font-weight:400;
  font-size:30px;
  
  letter-spacing: 1px;
}
.jobquote__author{
  padding-top: 10px;
  color:white;
  font-weight:300;
  font-size:20px;
  
  font-style: italic;
  text-align: end;

}




/* -------------------------------------- JOBCARD -------------------------------------- */
.jobcard{
 
  padding: 20px
}
.jobcard__company{

  /* min-height: 20px; */
}
.jobcard__title{
  padding-bottom:8px;
}
.jobcard__years{
  font-size:16px;
  font-weight:400;
  padding: 5px;
  background-color: rgb(61, 61, 61);
  color: white;
  display: inline-block;
}
.jobcard__description{
  padding-top:5px;
}


/* -------------------------------------- EXPERIENCECARD -------------------------------------- */
.experiencecard{
  background-color:rgb(239, 16, 109);
  color:white;
  
  font-size:12px;
  font-weight:400;
  /* letter-spacing:1px; */
  /* max-width: 300px; */
  display:grid;
  grid-gap: 6px;
  margin: 10px;
  grid-template-columns: 60px auto;
  width:300px;
}
.experiencecard__number{
  color:rgb(255, 216, 0);
  font-size:24px;
  font-weight:600;

  text-align: center;
  
}
.experiencecard__content{
  color: white;

}
.experiencecard__title{
  color: white;
 
}
.experiencecard__description{
  color: white;
}



.card-grid-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 10px;
  /* background-color: #2196F3; */
  padding: 10px;
}


/* BEM */

.--color-primary{
  background-color:rgb(239, 16, 109);
}

.--bgcolor-primary{
  background-color:rgb(239, 16, 109);
}


/* 0 - 1280 */
@media screen and (max-width: 1280px){
  .about {
    background: none;
  }
  .skills {
    background: none;
  }
  .education {
    background: none;
  }
  .contact {
    background: none;
  }
  .employment__footer-image{
    display: none;
  }
  .page__container{
    margin-right: 5vw;
  }
  .page {
    min-height: 0px;
  }
}

  /* 0 - 960 */
@media screen and (max-width: 960px){
  aside{width:100vw;
    height:60px;
    position:fixed;top:0px;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    
  }
  main{
    padding-top:60px;
    margin-left:0px;
  }
  .home__image{
    height: auto;
    width: 100vw;
  }
  .dropdown-content{display:none;
    position:absolute;
    background-color:#f9f9f9;
    min-width:260px;

  }
  .dropdownopen{
    display:block;
    width:100vw;
    left:0px;
    /* border-right: black !important;
    border-style: 2px !important;
    border-style: solid !important; */
  }
  .menu-button{
    display:block;
  }
  .dropdown{
    order: 3; 
    margin-right:20px;
  }
  .socialmedia{
    display: none;
    order: 2; 
  }
  .logo-container{
    height: 100px;
    /* max-width: auto; */
    margin: 0px;
    /* padding: 5px; */
    /* padding:40px; */
    /* height:100px; */
    overflow: hidden;
  }
  .logo{
    height:30px;
    /* height: 80px; */
    width:auto;
    margin: 15px;
    
    
  }
  .education__quote{
    
    grid-template-rows: auto auto;
    margin: 0px;
  }
  /* .about__table-datacol{
    line-height: 22px;
    font-size:13px;
    font-weight:500;
    letter-spacing:0.26px;
  } */
  .skills__baneritem{
    /* color:rgb(100, 100, 100); */

    margin:20px;
 }
 .experiencecard{
  
  width:260px;
}
}