@media only screen and (max-width: 1350px) {
  html {
    font-size: 15px;
  }
  .about-flex .about-item {
    margin: 0;
    width: 35vh;
  }
  .about-text {
    position: absolute;
    bottom: 230px;
    height: 21%;
  }
  .about-text p {
    font-size: 0.9rem;
    width: 90%;
  }
  .about-text h4 {
    font-size: 1.6rem;
    padding-bottom: 1vh;
  }
  .services .container2 #sidebar {
    width: 90%;
  }
  .projects .projects-flex .flex-item-content {
    padding: 1vh 3vh;
  }
  .projects .projects-flex .flex-item-content a {
    left: 3vh;
    font-size: 0.8rem;
    bottom: 18%;
  }
  .projects .projects-flex .flex-item img {
    width: 18vh;
  }
  .projects .projects-flex .flex-item p {
    font-size: 0.8rem;
  }
  .projects .projects-flex .flex-item h2 {
    font-size: 1.3em;
    margin-bottom: 0.5vh;
  }
  .projects .projects-flex .flex-item h5 {
    font-size: 0.7rem;
  }
  .projects .projects-flex .flex-item .languages p {
    font-size: 0.9rem;
  }
  .projects .projects-flex #more-btn {
    font-size: 0.8rem;
    width: 9%;
  }
  .projects .grid-container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-gap: 60px;
    grid-template-columns: auto auto auto;
    padding: 10px;
  }
  .contact {
    display: block;
    width: 100%;
    padding: 0;
    border-top: 1px solid rgba(61, 66, 69, 0.3);
  }
  .contact-flex-item {
    width: 50%;
    margin: 10vh auto;
  }
  .contact-flex-item img {
    display: none;
  }
  .contact-flex-item form {
    padding: 50px 0;
    width: 100%;
  }
  .contact-flex-item form input {
    display: block;
    margin: 15px 0;
    height: 40px;
    width: 100%;
  }
  .contact-flex-item form select {
    height: 40px;
    width: 100%;
  }
  .contact-flex-item form .button {
    width: 100%;
    height: 5%;
  }
}
@media only screen and (max-width: 1024px) {
  .about-flex .about-item {
    margin: 0;
    width: 29vh;
  }
  .about-text {
    bottom: 300px;
    height: 18%;
  }
  .services #canvas {
    display: none;
  }
  .projects .projects-flex {
    display: relative;
  }
  .projects .projects-flex .flex-item {
    position: relative;
    height: 100%;
  }
  .projects .projects-flex .flex-item img {
    width: 100%;
  }
  .projects .projects-flex .flex-item:hover .flex-item-content {
    height: 100%;
    opacity: 1;
  }
  .projects .projects-flex .flex-item-content {
    transition: 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    background-color: rgba(51, 51, 51, 0.937254902);
    width: 100%;
  }
  .projects .projects-flex .flex-item-content a {
    bottom: 10%;
    font-size: 1rem;
  }
  .projects .projects-flex .flex-item-content .languages {
    bottom: 0;
    border-color: rgb(151, 151, 151);
  }
  .projects .projects-flex .flex-item-content .languages p {
    color: rgb(151, 151, 151);
  }
  .projects .projects-flex .flex-item p {
    font-size: 1.1rem;
    color: rgb(221, 221, 221);
  }
  .projects .projects-flex .flex-item h2 {
    font-size: 1.7rem;
    margin-bottom: 3vh;
    color: rgb(221, 221, 221);
  }
  .projects .projects-flex .flex-item h5 {
    font-size: 0.9rem;
    color: rgb(151, 151, 151);
  }
  .projects .projects-flex #more-btn {
    font-size: 0.8rem;
    width: 15%;
  }
  .projects .grid-container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-gap: 60px;
    grid-template-columns: auto auto;
    padding: 10px;
  }
  .contact-flex-item h2 {
    font-size: 1.9rem;
  }
  .contact-flex-item h5 {
    font-size: 1.5rem;
  }
  .services h3 {
    font-size: 3.5rem;
    padding-left: 1vh;
  }
  .services .container2 {
    width: 75%;
    margin: 0 auto;
    grid-template-areas: "web" "hosting" "dizajn" "logo";
  }
  .services .container2 #sidebar {
    height: 20vh;
    margin-top: 30px;
  }
  .services .container2 #sidebar h2 {
    font-size: 2.3rem;
  }
  .services .container2 #sidebar p {
    font-size: 1.7rem;
  }
  .about h3 {
    font-size: 3.5rem;
    padding-left: 1vh;
  }
  .about .about-text {
    display: none;
  }
  .about .about-flex .about-item:hover {
    background-color: transparent;
  }
  .about .about-flex img {
    width: 40%;
  }
  .about .about-flex p {
    text-align: center;
    width: 90%;
    font-size: 2rem;
    display: block;
  }
}
@media only screen and (min-width: 200px) and (max-width: 1000px) {
  .contact .contact-flex-item {
    width: 70%;
  }
  .contact .contact-flex-item form input {
    font-size: 1.3rem;
    height: 60px;
  }
  .contact .contact-flex-item form select {
    font-size: 1.3rem;
  }
  .contact .contact-flex-item h2 {
    font-size: 3.3rem;
  }
  .contact .contact-flex-item h4 {
    font-size: 1.4rem;
  }
  .projects .projects-flex #more-btn {
    font-size: 1.5rem;
    width: 20%;
  }
  .projects .grid-container .grid-item h3 {
    font-size: 1.5rem;
  }
  .projects .grid-container .grid-item span {
    font-size: 1.1rem;
  }
  .projects-h3 {
    padding: 5vh 0 0 2.5vh;
  }
  .projects-h3 .btns-services element {
    font-size: 1.6rem;
  }
  .projects-h3 h3 {
    font-size: 3.5rem;
    padding-left: 1vh;
  }
  .home .home-content .block {
    height: 15vh;
  }
  .home .home-content .block h1 {
    font-size: 6rem;
  }
  .home .home-content .block h6 {
    font-size: 2.5rem;
  }
  .home .home-content .block h3 {
    font-size: 2.5rem;
  }
  header {
    position: static;
    background-color: #333333 !important;
  }
  header .row {
    height: 8vh;
    width: 100%;
  }
  header #myDIV {
    display: none;
  }
  header .brand-name {
    width: 100%;
    position: relative;
  }
  header .brand-name a.logo {
    font-size: 2.5rem;
  }
  header .brand-name .ikona {
    position: absolute;
    right: 1vh;
  }
  header .brand-name .ikona img {
    position: absolute;
    right: 0;
    display: block;
    height: 3.5vh;
  }
  header .navbar ul {
    background-color: rgba(51, 51, 51, 0.7176470588);
    width: 100%;
    text-align: center;
    margin-top: 4vh;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  header .navbar ul li .active::before {
    height: 0 !important;
  }
  header .navbar ul li a {
    font-size: 1.5rem;
  }
  .projects .service-overlay-text {
    flex-direction: column;
    height: auto;
    width: 90vw;
  }
  .projects .service-overlay-text img {
    display: none;
  }
  .projects .service-overlay-text .back {
    top: 10%;
    right: 10%;
  }
  .projects .service-overlay-text .overlay-inside-text {
    padding: 100px;
  }
  .projects .service-overlay-text .overlay-inside-text p.text {
    font-size: 1.5em;
    margin-top: 5vh;
  }
  .projects .service-overlay-text .overlay-inside-text h3 {
    font-size: 3em;
  }
  .projects .service-overlay-text .overlay-inside-text h4 {
    font-size: 1.7em;
  }
  .projects .service-overlay-text .overlay-inside-text h5 {
    font-size: 2em;
  }
  .containter {
    position: relative;
  }
  .containter h2 {
    margin-top: 5%;
    font-size: 3em;
  }
  .containter .content {
    position: absolute;
    width: 100%;
    height: auto;
    top: 40%;
    transform: translateY(-40%);
  }
  .containter .cf {
    height: 60px;
  }
}
@media only screen and (orientation: landscape) and (max-width: 1000px) {
  .body-content {
    display: none;
  }
  header {
    height: 50px;
    margin: 0;
    padding: 0;
    position: relative;
  }
  header .brand-name {
    display: flex;
    height: 50px;
    padding: 0 15px;
    align-items: center;
  }
  header .brand-name a.logo {
    font-size: 1.5em;
  }
  header .brand-name .ikona {
    display: none;
  }
  body .landscape {
    display: initial;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.5em;
    transform: translate(-50%, -50%);
    border-left: 3px solid #333333;
  }
  body .landscape p {
    margin: 5px 0 5px 20px;
  }
}/*# sourceMappingURL=mobile.css.map */