@font-face{
  font-family: 'Lato-Regular';
  src: url('assets/Lato-Regular.ttf');

}

*{
  margin: 0;
  padding: 0;

}

html {
  scroll-behavior: smooth;

}

body {
  width: 1020px;
  margin: 0 auto;
  font-family: Lato-Regular, Myriad Pro, sans-serif;

}

button:focus {
  outline: 0;

}

/*HEADER*/

.menu{
  display: none;

}

.burger{
  display: none;

}

@keyframes rotate-90-cw {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

header{
  position: sticky;
  z-index: 3;
  top: 0;
  height: 90px;
  display: flex;
  justify-content: space-between;
  background-color: #2d303a;

}

h1{
  margin: 29px 0px 0px 40px;
  display: inline;
  font-size: 24px;
  color: white;

}

.star{
  font-size: 25px;
  color: #e36861; 

}

nav{
  margin: 37px 43px 0px 0px;

}

.active{
  background-color: #f06c64;

}

nav a{
  display: inline;
  font-size: 11.7px;
  color: white;
  text-decoration: none;

}

nav a:hover{
  color: #e36861;

}

nav span{
  margin-left: 9px;
  margin-right: 9px;
  vertical-align: 3px;
  color: #494e62;

}

.header-line{
  background-color: #323746;
  height: 7px;
  border: none;

}

/*SLIDER*/

.slider{
  height: 591px;

}

.slider h2{
  display: none;

}

.carousel-container{
  width: 100%; 
  background-color: #f06c64;
  overflow: hidden;

}

.carousel-slide{
  display: flex;
  width: 100%;

}

#slide-2{
  width: 1020px;
  height: 598px;
  background: url("assets/slide-2.png");
}

#move-left{
  position: relative;
  z-index: 2;
  
}

#move-right{
  position: relative;
  z-index: 2;
  
}

.phones{
  width: 1020px;

}

#iphone-vertical{
  position: relative;
  top: 50px;
  left: 111px;
  box-shadow: 24px 24px 0px #ce5d56;
  border-radius: 0px 30px 24px 22px;
  z-index: 2;
  
}

.iphone-vertical-black{
  position: relative;
  top: 50px;
  right: 108px;
  z-index: 1;

}

#iphone-horizontal{
  position: relative;
  right: 13px;
  bottom: 70px;
  box-shadow: 24px 24px 0px #ce5d56;
  border-radius: 0px 30px 24px 22px;
  z-index: 2;
  
}

.iphone-horizontal-black{
  position: relative;
  bottom: 288px;
  left: 425px;
  z-index: 1;

}

.arrow-right, .arrow-left {
  width: 20px;
  height: 20px;
  border: solid #ca4549;
  border-width: 0px 5px 5px 0px;
  border-radius: 4px 4px 4px 4px;
  padding: 3px;
  background: none;
    
}

.arrow-right {
  left: 933px;
  bottom: 400px;
  transform: rotate(-45deg);

}

.arrow-right:hover {
  box-shadow: -4px -4px #ca4549 inset;

}

.arrow-left {
  left: 45px;
  bottom: 400px;
  transform: rotate(135deg);

}

.arrow-left:hover {
  box-shadow: -4px -4px #ca4549 inset;

}
  
.phones-line{
  height: 7px;
  background-color: #ea676b;
  border: none;

}

/*SERVICES*/

#services{
  height: 497px;
  color:#666d89;
  background-color: #f2f2f2;

}

.description{
  width: 939px;
  padding: 57px 0px 0px 40px;

}

.description h3{
  font-size: 31px;
  font-weight: bolder;

}

.description p{
  margin: 18px 0px 44px 0px;
  font-size: 17.59px;
  line-height: 1.7;

}

.advantages{
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
  
}

.advantages > article:nth-child(1) {
  order: 1;

}

.advantages > article:nth-child(2) {
  order: 4;

}

.advantages > article:nth-child(3) {
  order: 2;
}

.advantages > article:nth-child(4) {
  order: 5;

}

.advantages > article:nth-child(5) {
  order: 3;

}

.advantages > article:nth-child(6) {
  order: 6;

}

article{
  display: inline-block;
  width: 300px;
  margin-right: 20px;

}

article img{
  float: left;
  padding: 5px 21px 20px 0px;

}

article p{
  text-align: justify;
  margin: 11px 0px 30px 0px;
  width: 295px;
  font-size: 11.5px;
  line-height: 1.78;
  
}

 /*PORTFOLIO*/

.design-active{
  border: solid white !important;
  color: white !important;

}

#portfolio{
  height: 863px;
  padding-left: 41px;  
  color: #666d89;
  background-color: #2d303a;

}

#portfolio h3{
  font-size: 32px;
  padding: 58px 0px 22px 0px;

 }

 #portfolio p{
  font-size: 17px;
  padding: 0px 15px 14px 0px; 

 }

#design-select button{
  padding: 3px 6px 3px 6px;
  margin: 0px 5px 5px 0px;
  border: solid #666d89;
  border-width: 1px 1px 1px 1px;
  border-radius: 4px 4px 4px 4px;
  font-size: 12px;
  color: #666d89;
  background: none;

}

#portfolio button:hover{
  color: white;
  border-color: white;

} 
 
.gallery{
  height: 616px;
  overflow: hidden;

}

.click{
  width: 209px;
  margin: 12px 16px 0px 0px;
  padding: 0px !important;
  border: 5px solid #F06C64;

}

#gallery img{
  padding: 16px 16px 0px 0px;

}

.portfolio-line{
  height: 7px;
  background-color: #323746;
  border: none;

}

/*ABOUT US*/

#about{
  height: 729px;
  padding-left: 41px; 
  color: #666d89;
  background-color: #f2f2f2;

}

#about h3{
  padding: 59px 0px 0px 0px; 
  font-size: 30px;
  font-weight: bold;

}

.description-about{
  padding: 21px 0px 44px 0px;
  font-size: 17px;
  letter-spacing: 0.3px;
  line-height: 29px;

}

.employees{
  display: flex;

}

figure{
  width: 303px;
  margin-right: 16px;

}

figcaption h2{
  padding: 12px 0px 11px 0px;
  font-size: 18px;

} 

figcaption p{
  margin-bottom: 25px;
  font-size: 11.8px;
  text-align: left;
  line-height: 19px;

} 

figcaption a{
  margin-right: 4px;

}

@keyframes scale-up {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

figcaption img:hover{
  animation: scale-up 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

}

.about-line{
  height: 7px;
  background-color: white;
  border: none;
  
}

/*CONTACT*/

#contact{
  height: 646px;
  padding-left: 41px; 
  color: #f0d8d9;
  background-color: #f06c64;

}

#contact h3{
  padding: 59px 0px 0px 0px; 
  font-size: 29.6px;
  font-weight: bold;

}

.contact-description{
  padding: 21px 0px 41px 0px;
  font-size: 16.9px;
  letter-spacing: 0.3px;
  line-height: 29px;

}

.feedback{
  display: flex;

}

form{
  width: 604px;
  margin-top: 2px;

}

input, textarea{
  margin-bottom: 16px;
  padding-left: 13px;
  width: 100%;
  border: none;
  border-radius: 4px 4px 4px 4px;
  font-size: 12px;
  font-family: Lato-Regular;
  background-color: #d6564f;

}

input{
  height: 37.5px;
 
}

::placeholder { 
  color: #ec7e7e;
  opacity: 1;
}

textarea{
  height: 193px;
  padding-top: 9px;
  
}

#contact button{
  width: 90px;
  height: 34px;
  margin-left: 526px;
  border: none;
  border-radius: 4px 4px 4px 4px;
  font-size: 12px;
  color: #f0d8d9;
  background-color: #d6564f;

}

#submit-button{
  display: none;

}

#message-block{
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 2798px;
  left: 0;
  background: #0008;

}

#message-block.hidden{
  display: none;

}

#message{
  position: absolute;
  top: 40%;
  left: 25%;
  border: 2px solid #666d89;;
  border-radius: 4px 4px 4px 4px;
  background-color: salmon;
  font-family: Lato-Regular;
  font-size: 24px;
  text-align: center;
  
}

#message p{
  font-size: 30px;

}

#close-button{
  margin: 10px;

}

aside{
  width: 301px;
  margin-left: 36px;

}

aside h4{
  font-size: 18.6px;

}

aside p{
  margin: 10px 0px 22px 0px;
  font-size: 11.8px;
  line-height: 21px;

}

.no-wrap{
  display: none;

}

aside figure{
  float: left;
  margin-bottom: 3px;

}
aside figcaption{
  padding-left: 9px;
  font-size: 11.4px;
  display: inline-block;
  
}

.contact-line{
  height: 7px;
  background-color: #ea676b;
  border: none;

}

/*FOOTER*/

footer{
  display: flex;
  justify-content: space-between;
  height: 77px;
  color: #4f5569;
  background-color: #2d303a;

}

.copyright{
  margin: 31px 0px 0px 40px;
  font-size: 11.8px;
    
}

.socials{
  margin: 24px 39px 0px 40px;

}

.socials a{
  padding-left: 4px;

}

@keyframes rotate-scale-down-ver {
  0% {
    transform: scale(1) rotateY(0);
  }
  50% {
    transform: scale(0.5) rotateY(180deg);
  }
  100% {
    transform: scale(1) rotateY(360deg);
  }
  
}

.socials img:hover {
  animation: rotate-scale-down-ver 0.65s linear both;
  
}


/*TABLET*/

@media screen and (max-width: 768px) {
  body{
    width: 768px;

  }
  
  /*HEADER*/

  header{
    height: 88px;

  }
  
  nav{
    margin: 32px 39px 0px 0px;
  
  }

  nav span{
    margin-left: 10px;
    margin-right: 10px;
  
  }
  
  /*SLIDER*/

  .slider{
    height: 443px;

  }

  .carousel-slide div {
    height: 426px;

  }

  #slide-2{
    background: url("assets/slide-2-tablet.png") no-repeat;

  }

  .arrow-right{ 
    bottom: 211px;
    left: 695px;
  
  }

  .arrow-left{
    bottom: 211px;
    left: 32px;

  }

  #iphone-vertical{
    width: 162.36px;
    height: 344.26px;
    top: 41px;
    left: 81px;
    box-shadow: 19px 19px 0px #ce5d56;
    border-radius: 0px 28px 24px 22px;
    
  }
  
  .iphone-vertical-black{
    width: 162.36px;
    height: 344.26px;
    top: 41px;
    right: 86px;

  }
  
  #iphone-horizontal{
    width: 344.26px;
    height: 162.36px;
    right: 13px;
    bottom: 50px;
    box-shadow: 19px 19px 0px #ce5d56;
    border-radius: 0px 28px 24px 22px;
    
  }
  
  .iphone-horizontal-black{
    width: 344.26px;
    height: 162.36px;
    bottom: 216px;
    left: 320px;
  }

  /*SERVICES*/

  #services{
    height: 677px;

  }
  
  .description{
    width: 687px ;
    padding: 40px 0px 0px 40px;
  
  }

  .description p{
    font-size: 17.71px;
    margin-bottom: 33.1px;
  
  }

  article{
    margin: 0px 33px  21px 21px;
 
  }
  
  /*PORTFOLIO*/

  #portfolio{
    height: 1093px;
  
  }
  
  #portfolio h3{ 
    font-size: 31px;
    padding-bottom: 18px;

  }
  
  #portfolio p{
    width: 660px;
    letter-spacing: 0.3px;
    line-height: 30px;
    padding-bottom: 9px; 
 
  }
  
  #design-select button{
    margin-bottom: 10px;
    font-size: 11.9px;

  
  }
  
  .gallery{
    height: 616px;
    overflow: hidden;
  
  }
  
  .click{
    width: 206px !important;
  
  }

  #gallery img{
    width: 215px;
    padding-bottom: 1px;
  
  }

  /*ABOUT US*/
   
   #about{
    height: 662px;
  
  }
  
  #about h3{
    padding-top: 52px; 

  }
  
  .description-about{
    padding-bottom: 39px;
    width: 680px;
 
  }

  figure{
    width: 218px;

  }

  .adam-jensen, .desmond-miles, .scolara-visari{
    width: 219px;
    height:  219px;
  
  }
  
  figcaption h2{
    padding: 7px 0px 3px 0px;
  
  } 
  
  figcaption p{
    width: 219px;
    margin-bottom: 12px;
    text-align: justify;
    line-height: 21px;
  
  } 
  
  /*CONTACT*/

  #contact{
    height: 626px;
  
  }
  
  #contact h3{
    padding-top: 55px;
    letter-spacing: 0.4px;
  
  }
  
  .contact-description{
    width: 680px;
    padding: 20px 0px 22px 0px;
    font-size: 17px;
    letter-spacing: 0.32px;
    line-height: 30px;
  
  }

  form{
    width: 555px;

  }
  
  input, textarea{
    width: 434px;
    margin-bottom: 12px;
    padding-left: 7px;

  }
  
  textarea{
    height: 150px;
    padding-top: 8px;
    
  }
  
  
  #contact button{
    margin-left: 350px;
  
  }
  
  #message{
    left: 15%;

  }
  
  .no-wrap{
    display: block;
    
  }

  .wrap{
    display: none;
    
  }

  aside{
    margin: 0px;

  }

  aside h4{
    font-size: 18.3px;
    margin-bottom: 0px;

  }

  aside p{
    width: 218px;
    text-align: justify;
    line-height: 22px;
    margin: 0px 0px 10px 0px;
  
  }

  aside figcaption{
    padding-left: 7px;

  }
 
  /*FOOTER*/

  .copyright{
    margin: 31px 0px 0px 40px;
    font-size: 13px;
      
  }
  
  .socials{
    margin: 20px 40px 0px 40px;
  
  }
  
}

/*PHONE*/

@media screen and (max-width: 375px) {
  body{
    width: 375px;

  }

  /*HEADER*/

  header{
    height: 70px;

  }
 
  nav, .header-line{
    display: none;

  }

  .rotate-90-cw {
    -webkit-animation: rotate-90-cw 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: rotate-90-cw 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  #home{
    display: block;

  }

  h1{
    position: absolute;
    top: -6px;
    right: 211px;
    z-index: 1;

  }

  .menu{
    display: none;
    padding-top: 150px;
    height: 100vh;
    width: 80vw;
    background-color: #2d303a;

  }

  #burger{
    display: inline-block;
    margin: 24px 0px 0px 23px;
    cursor: pointer;

  }

  #burger i{
    display: block;
    width: 25px;
    height: 2px;
    margin-top: 6px;
    background: white;

  }

  ul{
    height: 100vh;
    margin-top: 0px;

  }
  
  li{
    margin: 30px 0px 0px 72px;
    font-size: 23px;
    list-style-type: none; 
    
  }

  li a{
    text-decoration: none;
    color: white;

  }

  li a:hover{
    color: #e36861;
  
  }

  .show{
    display: block;

  }

  h1{
    margin-left: 100px;
    font-size: 19px;
  
  }

  .star{
    font-size: 20px;
  
  }

  /*SLIDER*/

  .slider{
    height: 214px;

  }

  .carousel-container{
    height: 221px;
    
  }
 

  #slide-2{
    background: url("assets/slide-2-phone.png") no-repeat;

  }

  .arrow-right{ 
    bottom: 325px;
    left: 319px;
  
  }

  .arrow-left{
    bottom: 325px;
    left: 12px;

  }

  #iphone-vertical{
    width: 79.28px;
    height: 168.1px;
    top: 21px;
    left: 42px;
    box-shadow: 9px 9px 0px #ce5d56;
    border-radius: 0px 11px 11px 11px;
    
  }
  
  .iphone-vertical-black{
    width: 79.28px;
    height: 168.1px;
    top: 21px;
    right: 42px;

  }
  
  #iphone-horizontal{
    width: 168.1px;
    height: 79.28px;
    right: 11px;
    bottom: 22px;
    box-shadow: 9px 9px 0px #ce5d56;
    border-radius: 0px 11px 11px 11px;
    
  }
  
  .iphone-horizontal-black{
    width: 168.1px;
    height: 79.28px;
    bottom: 22px;
    left: -183px;

  }

  /*SERVICES*/

  #services{
    height: 1032px;

  }
  
  .description{
    width: 310px;
    padding: 0px 0px 0px 32px;
  
  }

  .description p{
    margin-bottom: 24px;

  }

  .description h3{
    padding-top: 25px;
  }

  article h3{
    font-size: 18px;

  }

  article p{
    margin: 10.7px 2px 3px 0px;
    width: 301px;
    font-size: 12px;
    line-height: 1.78;

  }

  .advantages {
    margin-left: 10px;

  }
  
  /*PORTFOLIO*/

  #portfolio{
    height: 837px;
    padding-left: 29px ;
  
  }
  
  #portfolio h3{ 
    padding-top: 41px;

  }
  
   #portfolio p{
    width: 313px;
    padding-bottom: 14px; 
  
  }
  
  #design-select{
    margin-bottom: 12px;

  }
  
  .gallery{
    height: 616px;
    overflow: hidden;
  
  }
  
  .click{
    width: 142px !important;
    margin: 0px 8px 8px 0px;
  
  }

  
  #gallery img{
    width: 151px;
    padding: 0px 10px 11px 0px;

  }

  #gallery > img:nth-child(9) {
    display: none;
  
  }
  
  #gallery > img:nth-child(10) {
    display: none;
  
  }

  #gallery > img:nth-child(11) {
    display: none;
  
  }
  
  #gallery > img:nth-child(12) {
    display: none;
  
  }
   
  /*ABOUT*/

  #about{
    height: 662px;
  
  }
  
  #about h3{
    padding-top: 52px; 

  }
  
  .description-about{
    padding-bottom: 39px;
    width: 680px;
 
  }

  figure{
    width: 218px;

  }

  .adam-jensen, .desmond-miles, .scolara-visari{
    width: 219px;
    height:  219px;
  
  }
  
  figcaption h2{
    padding: 7px 0px 3px 0px;
  
  } 
  
  figcaption p{
    width: 219px;
    margin-bottom: 12px;
    text-align: justify;
    line-height: 21px;
  
  } 

  /*ABOUT*/
   
  #about{
    height: 1749px;
    padding-left: 31px;
  
  }
  
  #about h3{
    padding-top: 34px;

  }
  
  .description-about{
    padding: 18px 0px 25px 0px;
    width: 310px;
    letter-spacing: 0.26px;
    line-height: 30px;
 
  }

  figure{
    margin-bottom: 31px;

  }

  .employees{
    width: 310px;
    flex-wrap: wrap;

  }

  .adam-jensen, .desmond-miles, .scolara-visari{
    width: 314px;
    height:  314px;
  
  }
  
  figcaption h2{
    padding: 12px 0px 3px 0px;
  
  } 
  
  figcaption p{
    width: 313px;

  } 

  /*CONTACT*/

  #contact{
    height: 962px;
    padding-left: 31px;
  
  }
  
  #contact h3{
    padding-top: 44px;
  
  }

  .contact-description{
    width: 318px;
    padding-bottom: 20px;
  
  }

  form{
    margin-bottom: 61px;

  }

 .feedback{
   display: block;

  }
  
  input, textarea{
    width: 306px;

  }
   
  #contact button{
    margin-left: 110px;
  
  }
  
  #message-block{
    top: 3923px;

  }

  #message{
    width: 200px;
    top: 40%;
    left: 20%;
    font-size: 16px;

  }

  aside p{
    width: 314px;
    line-height: 22.7px;

  }

  aside figure{
    margin-bottom: 7px;

  }

  /*FOOTER*/

  .copyright{
    display: none;

  }

  .socials{
    margin-left: 108px;

  }

}