/******************
GENERAL
******************/
* {
  font-family: 'Quicksand', sans-serif;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
} 

a {
  text-decoration: none;
  color: pointer;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%; /* IMPORTANT */
}

ul {
	list-style-type: none;
}

h5 {
  font-size: .7em;
  font-weight: 700;
}

/******************
COLORS
******************/

/* Section 1 #D4D649 */
/* Section 2 #7F5E95 */
/* Section 3 #FF6D65 */
/* Section 4 #007DB3 */

/******************
CITIES
******************/

/******************
BODY
******************/

.main_wrapper {
  width: 100%;
  margin: auto;
  padding: 0;
  background-image: 
	  url('../img/_backs/backs-01.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
}

/******************
MAIN LOGO
******************/

.main_logo_wrapper {
  width: 100%;
}

.main_logo_wrapper .modal_trigger {
  width: 100%;
}

.main_logo_wrapper .main_logo {
  width: 20em;
  margin: auto;
  display: block;
}

/******************
MOBILE MENU MODAL
******************/

.modal {
  display: inline-block;
}

.modal label {
  cursor: pointer;
  display: inline-block;
  transition: all .5s;
}

.modal_overlay {
  background: #000;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  z-index: -100;
  opacity: 0;
  transform: scale(.5);
  transition: all .75s ease-in-out;
}

.modal_wrap {
  /*max-width: 500px;*/
  padding: 1em 0;
  position: relative;
  margin: 0 auto;
  width: 100%;
  color: #fff;
}

.modal_names {
  color: white; 
  padding: .5em;
  margin: 0;
}

.modal_names_big1:hover {
  background-color: #D4D649;
}

.modal_names_big2:hover {
  background-color: #7F5E95;
}

.modal_names_big3:hover {
  background-color: #FF6D65;
}

.modal_names_big4:hover {
  background-color: #007DB3;
}

.modal_names_small {
  font-size: .9em;
}

.modal_names_small:hover {
  color: #D4D649;
}

.modal_names_home {
  font-size: 1.1em;
}

.modal_names_home:hover {
  color: #D4D649;
}
 
.modal input {
  position: absolute;
  top: -10000px;
  left: -10000px;
}

.modal input:checked ~ .modal_overlay {
  opacity: .9;
  transform: scale(1);
  z-index: 1000;
}

@media screen and (min-width: 600px) {
  .modal_overlay {
    font-size: 1.2em;
  }
  .modal_names_small {
    font-size: .7em;
  }
}

@media screen and (min-width: 800px) {
  .modal_overlay {
    font-size: 1.5em;
  }
  .modal_names_small {
    font-size: .5em;
    display: inline;
  }
}

/******************
PHOTO MODAL
******************/

.photo_modal {
  /*display: inline-block;*/
}

.photo_modal label {
  cursor: pointer;
  /*display: inline-block;*/
  transition: all .5s;
}

.photo_modal_overlay {
  background: #000;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  z-index: -100;
  opacity: 0;
  transform: scale(.5);
  transition: all .75s ease-in-out;
  overflow: scroll;
}

.photo_modal_wrap {
  padding: 1em;
  position: relative;
  margin: 0 auto;
  width: 100%;
  color: #fff;
}
 
.photo_modal input {
  position: absolute;
  top: -10000px;
  left: -10000px;
}

.photo_modal input:checked ~ .photo_modal_overlay {
  opacity: 1;
  background-color: rgba(0,0,0,.9);
  transform: scale(1);
  z-index: 1000;
}

.photo_modal_trigger_close {
  font-size: 1.5em;
}

@media (min-width: 800px) {
  /* pentru modalurile paginilor secundare */
  .width100padding0 {
    width: 100% !important;
    padding: 0 !important;
  }
  /* pentru hoverurile modalurilor paginilor secundare */
  .reset_padding_top {
    padding-top: 2em !important;
  }
}

/******************
IMAGE BLOCK MODAL
******************/

.modal_block_wrapper {
  display: block;
  padding-top: 3em;
}

.modal_block_wrapper .modal_main_image_wrapper {
  position: relative;
  z-index: 1;
}

.modal_block_wrapper .modal_main_image_wrapper .modal_main_image {
  width: 100%;
}

.modal_block_wrapper .modal_main_image_wrapper .modal_main_background {
  position: absolute;
  width: 100%;
  top: -2em;
  left: 0;
  width: 100%;
  height: calc(100% + 2em);
  opacity: 1;
  z-index: -1;
}

.modal_block_wrapper .modal_main_image_wrapper .modal_main_foreground {
  mix-blend-mode: overlay;
  position: absolute;
  width: 100%;
  top: -2em;
  left: 0;
  width: 100%;
  height: calc(100% + 2em);
  opacity: .5;
  z-index: 0;
}

.modal_block_wrapper .modal_main_timber_wrapper {

}

.modal_block_wrapper .modal_main_timber_wrapper .modal_main_timber {
  text-align: center;
  position: relative;
  background: url('../svg/timbers/timber1.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 2em;
  padding-top: 4em;
  margin: 2em;
  top: -5em;
  z-index: 1;
  margin-bottom: -5em;
}

.modal_block_wrapper .modal_main_timber_wrapper .modal_main_timber2 {
  background-image: url('../svg/timbers/timber2.svg');
}

.modal_block_wrapper .modal_main_timber_wrapper .modal_main_timber3 {
  background-image: url('../svg/timbers/timber3.svg');
}

.modal_block_wrapper .modal_main_timber_wrapper .modal_main_timber4 {
  background-image: url('../svg/timbers/timber4.svg');
}

.modal_block_wrapper_desktop {
  position: relative;
}

.modal_desktop_timber_wrapper {
  position: absolute;
  margin: auto;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 1em;
}

.modal_desktop_timber {
  background-image: url('../svg/timbers/timber1.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 1em;
  font-size: .75em;
}

.modal_desktop_timber2 {
  background-image: url('../svg/timbers/timber2.svg');
}

.modal_desktop_timber3 {
  background-image: url('../svg/timbers/timber3.svg');
}

.modal_desktop_timber4 {
  background-image: url('../svg/timbers/timber4.svg');
}

@media screen and (min-width: 600px) {
  .photo_modal_trigger_close {
    font-size: 2em;
  }
  .modal_block_wrapper {
    padding: 0 2em;
    padding-top: 3em;
  }
  .modal_block_wrapper .modal_main_timber_wrapper {
    margin-left: 6em;
    margin-right: 6em;
  }
}

@media screen and (min-width: 800px) {
  .modal_block_wrapper {
    width: 75%;
    margin: auto;
  }
}

@media screen and (min-width: 1000px) {
  .modal_block_wrapper {
    width: 90%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
  }
  .modal_main_image_wrapper {
    width: 65%;
  }
  .modal_main_timber_wrapper {
    width: 35%;
    align-self: center;
    margin: 0 !important;
  }  
  .modal_main_timber {
    margin: 0 !important;
    padding: 2em !important;
    padding-left: 4em !important;
    top: 0 !important;
    left: -3em !important; 
  }
  .modal_desktop_timber {
    font-size: .9em;
  }
}

/******************
MAIN TITLE
******************/

.main_title {
  font-size: 3em;
  text-align: center;
  font-weight: 100;
  padding-left: 1em;
  padding-right: 1em;
}

.main_subtitle {
  font-size: 2em;
  text-align: center;
  font-weight: 700;
  padding-left: 1em;
  padding-right: 1em;
}

@media screen and (min-width: 800px) {
  .main_title {
    font-size: 5em;
  }
  .main_subtitle {
    font-size: 4em;
  }
}

/******************
MAIN PARAGRAPH
******************/

.main_paragraph_wrapper {
  width: 100%;
  padding: 1em;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.main_paragraph_wrapper .main_paragraph {
  font-size: 1em;
  text-align: center;
  padding: 0 2em 2em 2em;
  margin: 0;
  align-self: center;
}

@media screen and (min-width: 500px) {
  .main_paragraph_wrapper {
    padding: 2em;
  }
  .main_paragraph_wrapper .main_paragraph {
    width: 30em;
  }
}

@media screen and (min-width: 800px) {
  .main_paragraph_wrapper .main_paragraph {
    font-size: 1.3em;
  }
}

/******************
IMAGE BLOCK
******************/

.block_wrapper {
  display: block;
}

.block_wrapper .main_image_wrapper {
  position: relative;
  z-index: 1;
}

.block_wrapper .main_image_wrapper .main_image {
  width: 100%;
}

.block_wrapper .main_image_wrapper .main_background {
  position: absolute;
  width: 100%;
  top: -2em;
  left: 0;
  width: 100%;
  height: calc(100% + 2em);
  opacity: 1;
  z-index: -1;
}

.block_wrapper .main_image_wrapper .main_foreground {
  mix-blend-mode: overlay;
  position: absolute;
  width: 100%;
  top: -2em;
  left: 0;
  width: 100%;
  height: calc(100% + 2em);
  opacity: .5;
  z-index: 0;
}

.block_wrapper .main_timber_wrapper {

}

.block_wrapper .main_timber_wrapper .main_timber {
  text-align: center;
  position: relative;
  background: url('../svg/timbers/timber1.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 2em;
  padding-top: 4em;
  margin: 2em;
  top: -5em;
  z-index: 1;
  margin-bottom: -5em;
}

.block_wrapper_desktop {
  position: relative;
}

.desktop_timber_wrapper {
  position: absolute;
  margin: auto;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 1em;
}

.desktop_timber {
  background-image: url('../svg/timbers/timber1.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 1em;
  font-size: .75em;
}

.desktop_timber2 {
  background-image: url('../svg/timbers/timber2.svg');
}

.desktop_timber3 {
  background-image: url('../svg/timbers/timber3.svg');
}

.desktop_timber4 {
  background-image: url('../svg/timbers/timber4.svg');
}

@media (min-width: 800px) {
  .block_wrapper_desktop:hover .desktop_timber_wrapper {
    display: block;
  }  
}

@media screen and (min-width: 600px) {
  .block_wrapper {
    padding: 0 2em;
  }
  .block_wrapper .main_timber_wrapper {
    margin-left: 6em;
    margin-right: 6em;
  }
}

@media screen and (min-width: 800px) {
  .block_wrapper {
    width: 75%;
    margin: auto;
  }
}

@media screen and (min-width: 1000px) {
  .block_wrapper .main_timber_wrapper {
    width: 50%;
    margin: auto;
  }
  .desktop_timber {
    font-size: .9em;
  }
}

/******************
INTERLUDE
******************/

.main_intelude {
  background-image: url('../img/_backs/backs-02.png');
  background-position: top right;
  background-size: contain;
  background-repeat: no-repeat;
  padding: 1em;
  padding-top: 2em;
  padding-bottom: 2em;
  font-size: 2.5em;
  text-align: center;
  font-weight: 100;
}

@media screen and (min-width: 800px) {
  .main_intelude {
    background-image: url('../img/_backs/backgrounds-02.png');
    background-position: top center;
    background-size: contain;
  }
}

/******************
BLANK INTERLUDE
******************/

.blank_interlude10em {
  padding-top: 5em;
  padding-bottom: 5em;
}

/******************
BACKGROUNDS
******************/

.background1 {
  background-image: url('../img/_backs/backs-03.png');
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
}

@media screen and (min-width: 800px) {
  .background1 {
    background-image: url('../img/_backs/backgrounds-03.png');
    background-position: top center;
    background-size: contain;
  }
}

.background2 {
  background-image: url('../img/_backs/backs-04.png');
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
}

@media screen and (min-width: 800px) {
  .background2 {
    background-image: url('../img/_backs/backgrounds-04.png');
    background-position: top center;
    background-size: contain;
  }
}

.background3 {
  background-image: url('../img/_backs/backs-05.png');
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
}

@media screen and (min-width: 800px) {
  .background3 {
    background-image: url('../img/_backs/backgrounds-05.png');
    background-position: top center;
    background-size: contain;
  }
}

.background4 {
  background-image: url('../img/_backs/backs-06.png');
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
}

@media screen and (min-width: 800px) {
  .background4 {
    background-image: url('../img/_backs/backgrounds-06.png');
    background-position: top center;
    background-size: contain;
  }
}

/******************
FOOTER
******************/

footer {
  text-align: center;
  padding: 2em;
  margin: 1em;
  font-size: .8em;
}

footer p {
  padding-top: .8em;
  padding-bottom: .8em;
}

.footer_text_color1 {
  color: #D4D649;
}

.footer_text_color2 {
  color: #7F5E95;
}

.footer_text_color3 {
  color: #FF6D65;
}

.footer_text_color4 {
  color: #007DB3;
}

.footer_logo {
  width: 5em;
}

.footer_line1 {
  margin: auto;
  margin-top: 4em;
  margin-bottom: 4em;
  border: 1px solid #000;
  width: 20em;
}

@media screen and (min-width: 600px) {
  .footer_line1 {
    width: 30em;
  }
}

@media screen and (min-width: 800px) {
  .footer_line1 {
    width: 40em;
  }
}

@media screen and (min-width: 1000px) {
  .footer_line1 {
    width: 50em;
  }
}

/******************
COUNTRYSIDE
******************/

.main_timber2 {
  background-image: url('../svg/timbers/timber2.svg') !important;
}

.main_timber2 h4 {
  padding-left: 2em !important;
  padding-right: 2em !important;
}

/******************
POLITICAL
******************/

.main_timber3 {
  background-image: url('../svg/timbers/timber3.svg') !important;
}

.main_timber3 h4 {
  padding-left: 2em !important;
  padding-right: 2em !important;
}

/******************
VARIOUS
******************/

.main_timber4 {
  background-image: url('../svg/timbers/timber4.svg') !important;
}

.main_timber4 h4 {
  padding-left: 2em !important;
  padding-right: 2em !important;
}

/******************
CITY COUNTRY POLITICAL VARIOUS
******************/

@media (max-width: 799px) {
  .hide_on_mobile {
    display: none;
  }
}

@media (min-width: 800px) {
  .hide_on_desktop {
    display: none;
  }
  .desktop_images_wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 1vw;
  }
  .block_wrapper_desktop {
    width: 32vw;
  }
  .main_foreground_desktop {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
  }
  .main_timber_wrapper_desktop {
    display: none;
  }
  .b_w_d_1,
  .b_w_d_2,
  .b_w_d_3,
  .b_w_d_4,
  .b_w_d_5 {
    margin: 0 !important;
    padding: 0 !important;
    height: 21vw;
  }
  .b_w_d_1 {
    order: 1;
  }
  .b_w_d_2 {
    order: 3;
  }
  .b_w_d_3 {
    order: 2;
  }
  .b_w_d_4 {
    order: 4;
  }
  .b_w_d_5 {
    order: 5;
  }
}

/******************
HOMEPAGE
******************/

.home_image_wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}

.home_image_wrapper .home_image {
  align-self: center;
  order: 2;
}

.home_image_wrapper .home_paragraph {
  text-align: center;
  align-self: center;
  font-size: 1em;
  font-weight: 100;
  padding: 3em;
  padding-top: 0;
  margin-top: 0;
  order: 1;
}

.home_button_link {
  width: 100%;
  display: block;
  margin-top: 4em;
  margin-bottom: 4em;
  padding-top: 3em;
  padding-bottom: 3em;
}

.home_button_link .home_button {
  background-image: url('../svg/buttons/button1.svg');
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: auto;
  display: block;
  border: 0;
  width: 15em;
  height: 5em;
}

.home_secions_wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
}

.home_secions_wrapper .home_section {
  display: block;
  width: 100vw;
  height: 100vw;
  position: relative;
}

.home_secions_wrapper .home_section .home_section_pattern {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.home_secions_wrapper .home_section .home_section_img {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.home_secions_wrapper .home_section .home_section_text {
  position: absolute;
  bottom: 1em;
  width: 100%;
  text-align: center;
  color: #fff;
}

.home_secions_desc {
  padding: 2em;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.home_secions_desc h6 {
  padding: 1em;
  margin: 0;
  text-align: center;
}

@media (min-width: 500px) {
  .home_image_wrapper .home_paragraph {
    width: 30em;
  }
  .home_image_wrapper .home_image {
    width: 25em;
    height: 32em;
    margin: auto;
    display: block;
    /*background-image: url('../svg/timbers/timber1_portrait.svg');*/
    background-size: cover;
    background-position: center center;
    padding: 3em;
  }
  .home_secions_wrapper {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .home_secions_wrapper .home_section {
    width: 50vw;
    height: 50vw;
  }
}

@media (min-width: 800px) {
  .home_image_wrapper .home_paragraph {
    width: 40em;
  }
/*  .home_secions_desc {
    flex-direction: row;
    padding: 0;

  }
  .home_secions_desc h6 {
    width: 50%;
    padding: 2em;
  } */
}

@media (min-width: 1000px) {
  .home_image_wrapper {
    width: 75%;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .home_image_wrapper .home_image {
    align-self: flex-start;
    order: 1;
    width: 20em;
    height: 28em;
    margin: 3em;
    margin-top: 0;
    padding: initial;
    padding-right: 2em;
    padding-top: 2em;
    padding-bottom: 2em;
  }
  .home_image_wrapper .home_paragraph {
    align-self: flex-start;
    order: 2;
    width: 30em;
    text-align: left;
  }
  .home_button_link {
    margin-top: 0;
    margin-bottom: 0;
  }
  .home_secions_wrapper .home_section {
    width: 25vw;
    height: 25vw;
  }
}

/******************
BIOGRAPHY
******************/

.bio_image_width {
  width: 100%;
}

@media (min-width: 600px) {
  .bio_image_timber {
    padding: 3em;
    background-image: url('../svg/timbers/timber1_portrait.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
}

@media (min-width: 800px) {
  .bio_image_timber {
    padding: 2em;
  }
  .bio_main_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 1em;
  }
  .bio_main_container_desktop {
    width: 50%;
    padding: 1em;
    padding-top: 2em;
    padding-bottom: 2em;
  }
  .bio_main_paragraph {
    width: initial !important;
    font-size: 1em !important; 
  }
  .align_left {
    text-align: left !important;
  }
  .align_right {
    text-align: right !important;
  }
  .v2_image_left {
    width: 75% !important;
    margin-left: 12.5% !important;
  }
  .v2_image_center {
    width: 50% !important;
    margin-left: 25% !important;
  }
  .v2_paragraph {
    width: 100% !important;
    font-size: 1.3em !important;
  }
  .v2_wrapper {
    width: 100% !important;
  }
}

@media (min-width: 1000px) {
  .bio_main_container {
    width: 75%;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
  }
  .bio_main_container_desktop {
    width: 50%; 
    padding-left: 1em;
    padding-right: 1em;
  }
}

@media (min-width: 1200px) {
  .bio_image_timber {
    padding: 5em;
  }
}

/******************
BIOGRAPHY HOVER DESKTOP TIMBER
******************/

.bio_main_container_desktop {
  position: relative;
}

.desktop_timber_wrapper_bio {
  position: absolute;
  margin: auto;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 2em;
  padding-top: 4em;
}

.desktop_timber_bio {
  background-image: url('../svg/timbers/timber1.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 1em;
  font-size: .75em;
}

@media (min-width: 800px) {
  .bio_main_container_desktop:hover .desktop_timber_wrapper_bio {
    display: block;
  }  
}

@media (min-width: 800px) {
  .desktop_timber_bio {
    font-size: .9em;
  }
}

/******************
PHOTOGRAPHY
******************/

.photo_paragraph_quote {
  background-color: #D4D649;
}

.photo_paragraph_quote_text {
  font-size: .9em !important;
  font-weight: 100;
}

/******************
CURATORY
******************/

@media (min-width: 1200px) {

  .curatory_image_timber {
    padding: 20px;
  }

}