/* that will affect all elements on our web page, */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* this rule will apply to everything visible on the web page - elements that have no defined styles */
  /* 1rem = 10px; */
  font-size: 62.5%;
  font-family: 'EB Garamond', serif;
  text-rendering: optimizeLegibility;
/*  font-weight: 300;*/
/*  font-size: 2rem;*/
}


body, h1, p {
    /* font-size: 1.6rem; */
    /* font-family: 'Lato', sans-serif;*/
}


.wrapper {
  width: 100%;
  height: calc(100vh - 10rem);
/*  max-width: 1920px;*/
  margin-left: auto;
  margin-right: auto;
  display: flex;  
  flex-flow: row wrap;
  font-weight: normal;
  flex-direction: row;
  align-items: stretch;
}
@media screen and (max-width: 1024px) {
  .wrapper {
    flex-direction: column;
    height: auto;  
    overflow: auto;
  }
}


.header {
  width: 100%;
  background: #23272A;
  font-weight: 700;
  color: #D3D3D3;
  /*  font-family: 'EB Garamond', serif;*/
  /*  font-family: 'Lato', sans-serif;*/
  height: 10rem;
  display: flex;
  align-items: center;
}
.header h1 {
  text-align: center;
  width: 100%;
  font-size: 3.2rem;
  letter-spacing: 1px;
}
@media screen and (max-width: 1024px) {
  .header {
    padding: 8rem 0;
    height: 300px;
  }
  .header h1 {
    text-align: left;
    font-size: 6rem;
    padding: 6rem;
  }
}



/*
.footer {
  display: flex;
  align-items: center;
  width: 100%;
  height: 4rem;
  background: #282828;
}
.footer p {
  width: 100%;
  text-align: left;
  padding-left: 3rem;
  font-size: 1.5em;
  font-weight: 100;
  color: #DFEDF5;
  
}
*/

/*** aside-1 ***/

.aside-1 {
  position: relative;
  width: 20%;
  height: 100%; 
  background: #0d314d;
  /* background: #10314C; */
  padding: 0;
}
@media screen and (max-width: 1024px) {
  .aside-1 {
    width: 100%;
  }
 .aside-1 ul {
    margin-top: 100px;
  }
}


/*** main ***/

.main {
  width: 30%;
  height:100%; 
  text-align: left;
  background: #113b5d;
  color: white;
  padding: 0;
}

@media screen and (max-width: 1024px) {
  .main {
    /*width: 100%;*/
    min-height: 600px;
    display: none;
  }
}

/*** aside-2 ***/

.aside-2 {
  display: block;
  position: relative;
  background-image: url(img/Bojinov_800x800.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
  width: 50%;
  height:100%;
/*  min-height: 850px;*/
  padding: 0;
  margin: 0;
  
}
@media screen and (max-width: 1366px) {
  .aside-2 {
/*    min-height: 600px;*/
    background-image: url(img/medium_683x668.png);
    background-position: right top;
  }
}
@media screen and (max-width: 1024px) {
  .aside-2 {
    width: 100%;
    min-height: 900px;
    background-image: url(img/small_1024.jpg);
  }
}


ul.main-nav {
	list-style: none;
	margin-top: 50px;
  width: 85%;
  color: white;
}

ul.main-nav li.main-nav-item {
  text-align: left;
  display: block;
}

ul.main-nav li.main-nav-item a {
  display: inline-block;
  width: 100%;
  padding: 1.3rem 0 1.3rem 3rem;
  color: #DFEDF5;
  margin-bottom: 2rem;
  text-decoration: none;
  font-size: 2.5rem;
  font-weight: 300;
/*  letter-spacing: 2px;*/
}
@media screen and (max-width:1366px) {
    ul.main-nav li.main-nav-item a {
      font-size: 2rem; 
}
}
@media screen and (max-width: 1024px) {
  ul.main-nav li.main-nav-item a {
      font-size: 5rem; 
      padding: 5rem 0 5rem 6rem;
      font-weight: bold;
    }
}

ul.main-nav li.main-nav-item a.active {
  text-decoration: underline;
}
@media screen and (max-width: 1024px) {
  ul.main-nav li.main-nav-item a.active {
    text-decoration: none;
  }
}

/* button 1 */
ul.main-nav li.main-nav-item a.btn1:link,
ul.main-nav li.main-nav-item a.btn1:visited {
  background-color: #2675b4;
  color: #d9dcde;
}
ul.main-nav li.main-nav-item a.btn1:hover,
ul.main-nav li.main-nav-item a.btn1:active {
  background-color: #1a517d;
  color:#bec3c6;
  transition: background-color 0.3s; color: 0.3s;
}

/* button 2 */
ul.main-nav li.main-nav-item a.btn2:link,
ul.main-nav li.main-nav-item a.btn2:visited {
/*  background-color: #2675b4;*/
  background-color: #206399;
  color: #d9dcde;
}
ul.main-nav li.main-nav-item a.btn2:hover,
ul.main-nav li.main-nav-item a.btn2:active {
  background-color: #1a517d;
  color: #bec3c6;
  transition: background-color 0.3s; color: 0.3s;
}

/* button 3 */
ul.main-nav li.main-nav-item a.btn3:link,
ul.main-nav li.main-nav-item a.btn3:visited {
  background-color: #882019;
}
ul.main-nav li.main-nav-item a.btn3:hover,
ul.main-nav li.main-nav-item a.btn3:active {
  background-color: #6b1914;
  color:#bec3c6;
  transition: background-color 0.3s; color: 0.3s;
}

.text-mobile {
  padding: 0;
  margin: 0 0 0 10rem;
  font-size: 5rem;
}

.mob-visible {
  display: none;
}
.mob-hidden {
  display: none;
}
@media screen and (max-width: 1024px) {
  .mob-visible {
    display: block;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 1s ease-out;
  }
  .mob-hidden {
    display: block;
    max-height: 0;
    overflow: hidden;
/*    padding: 0;*/
    transition: max-height 0.3s ease-out;
/*    transition: padding 0.3s ease-out;*/
  }
}

.contact {
  position: absolute;
  width: 100%;
  bottom: 10%;
  color: #DFEDF5;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 100%;
  padding: 6rem 0 0 3rem; 
}
@media screen and (max-width: 1366px) {
  .contact {
      font-size: 1.8rem;
    }
}
@media screen and (max-width: 1024px) {
  .contact {
    position: static;
    font-size: 4rem;
    padding: 16rem 0 6rem 6rem;
  }
}

.text {
  margin-top: 10px;
  padding: 5rem;
  font-family: 'EB Garamond', serif;
  /* font-family: 'Lato', sans-serif; */
  font-size: 2.4rem;
  font-weight: 300;
  /* letter-spacing: 1px; */
  line-height: 150%;
}
@media screen and (max-width: 1366px) {
  .text {
      font-size: 1.8rem;
  }
}
  /*
    }
  #text2.text {
      font-size: 1.8em;
    }
  #text3.text {
      font-size: 1.8em;
    }
*/


#text2 {
  display: none;
}
#text3 {
  display: none;
}

.name {
  position: absolute;
  /* width: 1140px; */
  left: 5rem;
  bottom: 18%;
  /* transform: translate(-50%, -50%); */
  font-size: 3.6rem;
  color: #DFEDF5;
}
@media screen and (max-width: 1366px) {
  .name {
    font-size: 2.2rem;
/*    bottom: 13rem;*/
    left: 4.8rem;
    
  }
}
@media screen and (max-width: 1024px) {
  .name {
    font-size: 5rem;
/*    bottom: 15rem;*/
    left: 6rem;
  }
}

.position {
  position: absolute;
  text-align:center;
  height: auto;
  left: 5.7rem;
  bottom: 15%;
  font-size: 2.5rem;
  color: #DFEDF5;
}
@media screen and (max-width: 1366px) {
  .position {
    font-size: 1.7rem;
/*    bottom: 11rem;*/
    left: 5rem;
  }
}
@media screen and (max-width: 1024px) {
   .position {
    font-size: 3rem;
    left: 7rem;
/*    bottom: 12.5rem;*/
  }
}

.spacer {
  margin:0;
  padding:0;
  width: 100%;
  height: 5rem;
}

/*
@media all and (min-width: 600px) {
  .aside { 
    flex-direction: row;
  }
}
*/

/*
@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}
*/

/*
  letter-spacing: 2px;
  font-weight: 500;
*/

/*
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}
*/