/*--------------------------------------------------------- RESET --------------------------------------------------------- */

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

@font-face {
  font-family: CrimsonPro;
  src: url(../Assets/Fonts/CrimsonPro.woff2) format("woff2"),
    url(../Assets/Fonts/CrimsonPro.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Lato;
  src: url(../Assets/Fonts/Lato-Regular.woff2) format("woff2"),
    url(../Assets/Fonts/Lato-Regular.woff) format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/*--------------------------------------------------------- NAV --------------------------------------------------------- */

.nav {
  align-items: center;
  background-color: white;
  display: flex;
  height: 8rem;
  justify-content: space-around;
  width: 100vw;
  position: sticky;
  top: 0;
  z-index: 1250;
  flex-wrap: wrap;
}

.nav_contact {
  display: flex;
  justify-content: space-around;
  width: 100vw;
  padding: 1rem 0 0 0;
  flex-wrap: wrap;
  -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  background-color: white;
}

.media {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}

.media i {
  margin-right: 1rem;
}

.nav .nav__mobile {
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  z-index: 1500;
}

.nav .nav__mobile li {
  color: black;
  padding: 2rem 0 2rem 0;
  text-transform: uppercase;
  font-family: CrimsonPro;
}

.nav .nav__mobile li a {
  text-decoration: none;
  color: black;
}

.nav .nav_container .nav_container_element {
  display: none;
}

@media (min-width: 800px) {
  .nav {
    justify-content: space-around;
    -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
    flex-direction: row-reverse;
  }

  .nav .nav__mobile {
    display: none;
  }

  .nav .nav_container {
    box-sizing: border-box;
    padding-right: 5rem;
    display: flex;
    justify-content: flex-end;
    width: 50vw;
  }

  .nav .nav_container .nav_container_element {
    display: block;
    font-size: 1.3rem;
    margin-left: 4rem;
    text-transform: uppercase;
    font-family: CrimsonPro;
  }

  .nav .nav_container .nav_container_element a {
    text-decoration: none;
    color: black;
  }

  .nav .nav_container .nav_container_element a:hover {
    cursor: pointer;
  }

  .nav_contact {
    width: 50vw;
    box-shadow: none;
    justify-content: flex-start;
  }

  .media {
    margin-left: 3rem;
  }
}

@media (min-width:1500px) {
  .nav {
    justify-content: center;
  }

  .nav .nav__mobile {
    display: none;
  }

  .nav .nav_container {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
  }

  .nav .nav_container .nav_container_element {
    display: block;
    font-size: 2rem;
    text-transform: uppercase;
  }

  .nav .nav_container .nav_container_element a {
    text-decoration: none;
    color: #101916;
  }

  .nav .nav_container .nav_container_element a:hover {
    cursor: pointer;
    color: #806c16;
    font-size: 2rem;
  }
}

/*--------------------------------------------------------- COMMON --------------------------------------------------------- */

html {
  font-size: 10px;
  font-family: Lato;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background-image: url(../Assets/Images/temida.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-color: #fff;
  width: 100vw;
  overflow-x: hidden;
  font-size: 1.5rem;
}

.arab_type {
  color: black;
  line-height: 2;
  padding: 1rem;
  text-align: justify;
  font-weight: 500;
  width: 90%;
  list-style-type: decimal;
}

.content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  margin: 10rem 0 10rem 0;
  width: calc(100vw - 4rem);
  padding: 2rem;
}

.direction {
  width: 100vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}

.header_mayor {
  color: #143e2c;
  font-size: 4rem;
  text-align: center;
  text-transform: uppercase;
  font-family: CrimsonPro;
}

.header_medium {
  font-size: 2.5rem;
  text-shadow: 0 1px #101916;
  text-transform: uppercase;
  font-family: CrimsonPro;
  margin: 2rem 0 2rem 0;
  letter-spacing: .5rem;
  text-align: center;
  margin-top: 10rem;
}

.header_minor {
  font-family: CrimsonPro;
  font-size: 2rem;
  color: #000;
  margin: 5rem 0;
  letter-spacing: .5rem;
  text-transform: uppercase;
  text-align: center;
}

.img {
  -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  width: 100vw;
  height: auto;
  margin-top: 5rem;
}

.latin_type_lower {
  color: black;
  line-height: 2;
  padding: 1rem;
  text-align: justify;
  font-weight: 500;
  width: 90%;
  list-style-type: lower-latin;
}

.logo {
  background-image: url(../Assets/Images/logo-adwokatura.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 30rem;
  width: 30rem;
  margin-top: 10vh;
  align-self: center;
  justify-self: center;
}

#mapid {
  height: 50vh;
  border: 1px solid #806c16;
}

.ornament {
  background-color: transparent;
  background-image: url(../Assets/Images/pattern.png);
  height: 5rem;
  width: 100vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 5rem;
}

.paragraph {
  color: black;
  line-height: 2;
  padding: 3rem;
  text-align: justify;
  font-weight: 500;
  width: calc(100vw - 6rem);
}

.paragraph_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
}

.paragraph_list li {
  color: #000;
  line-height: 2;
  padding: 1.5rem;
  text-align: justify;
  font-weight: 500;
  list-style-type: "\00A7";
  width: calc(100vw - 10rem);
}

@media (min-width: 800px) {
  .direction {
    width: 100vw;
    flex-direction: row;
    justify-content: space-around;
  }

  .paragraph {
    width: calc(60vw - 6rem);
  }

  .paragraph_list li {
    width: 60vw;
  }

  .paragraph_list li {
    width: calc(60vw - 10rem);
  }
}

@media (min-width:1100px) {
    .img {
      width: 35vw;
    }
}

@media (min-width: 1500px) {
  .header_mayor {
    font-size: 7rem;
    letter-spacing: 1rem;
    font-weight: 300;
  }

  .header_medium {
    font-size: 4rem;
    font-weight: 100;
  }

  .header_minor {
    font-size: 3rem;
    font-weight: 500;
  }

  .paragraph {
    font-size: 1.8rem;
  }

  .paragraph_list {
    font-size: 1.8rem;
  }

  .arab_type {
    font-size: 1.8rem;
  }

  .latin_type_lower {
    font-size: 1.8rem;
  }

  .content {
    width: 90%;
  }

}

/*--------------------------------------------------------- HEADER --------------------------------------------------------- */

header {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  background-color: rgba(256, 256, 256, 0.6);
  margin-top: 5rem;
  margin-bottom: 15rem;
}

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

.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-top: 5rem;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
}

.about_photo {
  width: 95vw;
  height: 30vh;
  background-image: url(../Assets/Images/toga.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media (min-width: 800px) {
  .about_photo {
    width: 45vw;
    height: 70vh;
  }
}

@media (min-width: 1100px) {
  .about_photo {
    width: 35vw;
    height: 50vh;
  }
}

/*--------------------------------------------------------- OFFER --------------------------------------------------------- */

.offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-top: 15rem;
}

.offer_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
}

.offer_container_elem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 0 5rem 0;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
  width: 100vw;
}

@media (min-width: 1100px) {
  .offer {
    background-color: white;
  }

  .offer_container {
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 5rem;
    width: 100vw;
  }

  .offer_container:last-of-type,
  .offer_container:nth-of-type(3) {
    flex-direction: row-reverse;
  }

  .offer_container_elem {
    width: 60vw;
  }
}


/*--------------------------------------------------------- RODO --------------------------------------------------------- */


.rodo {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100vw;
}

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


.contact {
  background-image: url(../Assets/Images/golden_background.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-top: 5rem;
  border: 1px solid #806c16;
}

.contact_content {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.contact_content_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 85%;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 2rem;
  margin-bottom: 1rem;
}

.info_item {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  cursor: pointer;
}

.info_item a {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
}

.info_item i {
  color: #000;
  font-size: 3.5rem;
  margin: 1rem;
  text-shadow: 2px 2px 4px #444;
}

.info_item span {
  color: #000;
  font-size: 1.6rem;
  margin: 1rem;
}

.info_item input {
  color: #000;
  font-size: 1.6rem;
  margin: 1rem;
  border: none;
  text-align: center;
  background-color: transparent;
  width: 100%;
}

.info_item input:focus {
  outline: none;
  text-emphasis: none;
}

@media (min-width:1000px) {

  .contact_content {
    flex-direction: row-reverse;
  }

  .contact_content_info {
    width: 30%;
  }
}

@media (min-width:1500px) {

  .contact_content {
    flex-direction: row-reverse;
  }

  .contact_content_info {
    width: 30%;
  }

  .info_item span {
    font-size: 2rem;
  }

  .info_item input {
    font-size: 2rem;
  }

  .info_item a {
    margin-bottom: 5rem;
  }
}

/*--------------------------------------------------------- FOOTER --------------------------------------------------------- */



footer {
  height: 4rem;
  font-size: 1rem;
  background-color: #000;
  color: #fff;
  width: 100%;
}

footer .copy {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

footer .copy span a {
  text-decoration: none;
  color: #fff;
}

@media (min-width:1000px) {

  footer {
    font-size: 1.5rem;
  }

  footer .copy span:first-of-type,
  footer .copy span:last-of-type {
    cursor: pointer;
  }

  footer .copy span:first-of-type:hover,
  footer .copy span:last-of-type:hover {
    font-weight: bolder;
  }

  footer .copy .cv_dot i:hover {
    color: #000;
    background-color: #fff;
    border: 0.2rem solid #000;
  }

  footer .copy .cv_dot i:first-of-type {
    animation-name: up;
  }

  footer .copy .cv_dot i:nth-of-type(2) {
    animation-name: upper;
  }

  footer .copy .cv_dot i:nth-of-type(3) {
    animation-name: uppest;
  }
}

@media (min-width: 1500px) {

  footer {
    font-size: 1.8rem;
  }

  footer .copy span:first-of-type,
  footer .copy span:last-of-type {
    cursor: pointer;
  }

  footer .copy span:first-of-type:hover,
  footer .copy span:last-of-type:hover {
    font-weight: bolder;
  }

  footer .copy .cv_dot i:hover {
    color: #000;
    background-color: #fff;
    border: 0.2rem solid #000;
  }

  footer .copy .cv_dot i:first-of-type {
    animation-name: up;
  }

  footer .copy .cv_dot i:nth-of-type(2) {
    animation-name: upper;
  }

  footer .copy .cv_dot i:nth-of-type(3) {
    animation-name: uppest;
  }
}