@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Source+Sans+Pro:wght@300;600&display=swap');

@import url("https://use.typekit.net/hzz4ldp.css");
body {
  font-family: 'Source Sans Pro', sans-serif;
  color: #333;
  margin: 0;
  cursor: url('../img/cursor/kralik-necumi.cur') 34 34, auto !important;

}

body a:hover {
  cursor: url('../img/cursor/zajic-cumi.cur') 34 34, auto !important;

}

body a:active:focus {
  cursor: url('../img/cursor/kralik-necumi.cur') 34 34, auto !important;



}

.button a{
 height: 60px;
 width: 100%;
 display: block;
 padding: 10px;
font-size: 3em;
 font-family: duper, sans-serif;


font-weight: 700;

font-style: normal;
}

.button a:hover {
 color: #9DD9DC;
}

h1  {
  margin: 0;
  padding: 0;
}
p {
  text-align: center;
}
a {
  text-decoration: none;
  color: #666;
}

footer {


      bottom: 0;
      width: 100%;



  background-color: #f7f7f7;


  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

footer a {

  padding: 20px;
}

  .footer-img{

    width: 100%;
    height: 97px;
    object-fit: cover;

  }

.topnav {

  display: flex;
  padding: 12px 3%;
  padding-right: -20px;
  margin: 0;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;


}

.topnav a {
  display: block;
  color: #666;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
}

.topnav-left a{
  font-weight: bold;

}

.topnav-right a:hover {
  background-color: #f2f2f2;
  color: #000;
}

.topnav-right a.active {
  color: white;
}
.topnav-left {
  display: flex;
}

.topnav-right {
  display: flex;
}

.topnav-right a{
  display: block;
  padding: 20px 20px 20px 20px;
}


.topnav a.icon {
  display: none;
  width: 14px;
  padding: 20px 2% 20px 40px;

}

img {
  width: 100%;
}
.wraper {
  display: flex;
  flex-wrap: wrap;
  padding: 2%;
  margin-bottom: 120px;
}

.portfolio-item {
  padding: 1%;
  width: 23%;
}

.portfolio-item:hover {
  opacity: 0.7;
}

.portfolio-item p:hover {
  color: #000;
}

.portfolio-item p {
  padding: 0 20px 20px 20px;
}


 .kontakt {
   text-align: center;
   margin-bottom: 850px;
   margin-top: 90px;
 }

 .kontakt p{
   margin: 0;
   padding: 0;
 }

 .kontakt a{
   display: block;
   padding: 12px;
 }

.o-mne {
  padding: 3%;
  margin-bottom: 600px;
}
.omne-img img{
  float: left;
  width: 30%;
  padding: 30px 60px 0 0;
}

.omne-text{
  margin-top: 35px;
  margin-bottom: 460px;
  float: left;
  padding-left: 4%;
  width: 33%;
  text-align: left;
}

.omne-text p{

  text-align: left;
}

.work {
  text-align: center;
  padding: 0 30%;
  margin-bottom: 6%
}

.work img {
  margin: 6% 0;

}


@media only screen and (max-width: 1600px) {
  .work img {

    width:100%;
    margin:2%;
  }

  .work {
    text-align: center;
    padding: 0 20%;
  }

  .omne-text{

    width: 50%;

  }

}




@media only screen and (max-width: 1050px) {
  .portfolio-item {

    width: 31.333%;

  }

  .kontakt {
    margin-bottom: 600px;
  }

}

@media only screen and (max-width:750px) {
  .portfolio-item {

    width: 47%;

  }

  .omne-img img{

    width: 70%;
  }

  .omne-text{

    padding: 2%;
    width: 96%;
    margin-bottom: 100px;

  }
}

  @media only screen and (max-width:650px) {
    .portfolio-item {
      width: 98%;
    }
    }

    @media only screen and (max-width:550px) {
      .topnav a.icon {
        display: block;
      }

      .topnav{

            padding-top: 4%;
          }

          #myLinks {
             left: 0;
             top: 82px;
             position: absolute;
             display: none;

             width: 100%;
             background-color: #fff;

           }

           .topnav-right a {
             padding: 4%;
             text-align: right;
           }

}

@media only screen and (max-width: 550px) {
  .work img {
    width:100%;
    margin:1%;
  }

  .work {
    text-align: center;
    padding: 0 5%;
  }

}