@import url(https://fonts.googleapis.com/css2?family=Play&display=swap);
 @import url('https://fonts.googleapis.com/css2?family=Arimo&family=Roboto:wght@300;400&display=swap');
 
 body { margin: 0;
        padding: 15px 0;
		box-sizing: border-box;
        font-family: 'Roboto', sans-serif }
 
    img { border: 0 }			 
    header { height: 40px; padding: 0 15px }
      header nav { float: left; color: #224B51; font: normal 28px 'Play',sans-serif }	
        header nav span { color: #ce682a }
        header .lang { margin-top: 10px; float: right; font-size: 12px }     
        header .lang a { padding: 3px; color: #555; border: 1px solid #ddd; background-color: #f7f7f7; outline: none; text-decoration: none }
        header .lang a:visited { color: #555 }
        header .lang a:hover { text-decoration: none; background-color: #fff }
	    header .lang a:active,
	    header .lang #current { background-color: #fff; color: #444; text-decoration: none } 
		
	h3 { margin: 10px 0 30px 0;
         text-align: center;
         color: #224B51;
         font-family: 'Arimo', sans-serif;
         font-weight: normal }
	
    section img { display: block; margin: 0 auto 20px }
	section h5 { text-align: center;
	             width: 260px;
	             margin: 0 auto;
				 padding: 12px 0;
				 cursor: pointer;
				 color: #f8f8f8;
				 font-size: 18px;
				 background: #498f7f;
				 border-radius: 8px;
				 border: 1px solid #ddd;
				 font-weight: normal }
   	  
	aside { box-sizing: border-box }
            
      aside .auth {   margin-top: 20px;
                      box-sizing: border-box;
                      position: relative;
                      margin-bottom: 10px }     
      
      aside label { position: absolute;
                    left: 10px;
                    top: 12px;
                    transition: top 0.5s;
                    font-size: 16px;
                    color: #555 }  
           
	  aside input[type="email"],
	  aside input[type="password"] { vertical-align: middle;
	                                 padding: 10px;
								     outline: none;
								     box-sizing: border-box;
								     border: 1px solid #8f8f8f;
								     width: 100%;
								     font-size: 16px }
		
		aside input[type='email']:focus,
        aside input[type='password']:focus { outline: none; 
                                             border-color: #015E53;
                                             transition-duration: 0.3s }
                                             
        aside input::placeholder { color: transparent }
   
   aside input[type='email']:focus+label,
   aside input[type='email']:not(:placeholder-shown)+label,
   aside input[type='password']:focus+label,
   aside input[type='password']:not(:placeholder-shown)+label { top: -7px;
                                                                background: #fff;
                                                                padding: 0 6px;
                                                                font-size: 12px }
  
        aside #pass { float: right;
                      margin-bottom: 20px;
                      padding: 5px 10px;
                      background-color: #f5f5f5;
                      border-radius: 2px;
                      color: #0056ac;
                      font-size: 14px }
		
		aside button { padding: 8px 0;
		               width: 100%;
				       font: normal 16px 'Roboto', sans-serif;
				       outline: none;
					   color: #285e68; 
					   border: 1px solid #ccc;
					   background: #f1f0e7 }

	 .main-block { margin: 0 auto; text-align: center }
     .main-block div { display: inline-block;
		               text-align: center; 
					   background-color: #faf9f7; 
					   color: #000;
					   border: 1px solid #ddd }
						  
   @media screen and (min-width: 350px) and (max-width: 390px) /*iPhone 6/7/8/X portret*/
	{
 	  h3 { font-size: 33px }
	  
	  section { width: 100% }
	    section img { width: 320px }	
		
      aside { width: 260px; margin: 60px auto }
      							 
      .main-block { margin-top: 70px; }
        .main-block div { width: 140px;  
                          height: 145px; 
                          margin-right: 35px; 
                          margin-bottom: 30px;
                          font-size: 14px } 
          .main-block div:nth-child(2n) { margin-right: 0 }						           
          .main-block  div img { width: 110px } 
 	}
	
	@media screen and (min-width: 400px) and (max-width: 460px) /*iPhone 6/7/8 Plus portret*/
	{
 	  h3 { font-size: 33px }
	  
	  section { width: 100% }
	    section img { width: 340px }	
		
      aside { width: 260px; margin: 60px auto }
							 
      .main-block { margin-top: 70px; }
        .main-block div { width: 150px;  
                          height: 155px; 
                          margin-right: 45px; 
                          margin-bottom: 30px;
                          font-size: 15px } 
          .main-block div:nth-child(2n) { margin-right: 0 }						           
          .main-block  div img { width: 120px }
 	}
	
	@media screen and (min-width: 640px) and (max-width: 680px) /*iPhone 6/7/8 peyzaj*/
	{
 	  
 	  h3 { font-size: 33px }
	  
	  section { width: 330px; margin: 0 55px 20px 25px; display: inline-block }
	    section img { width: 320px }	
		
      aside { width: 230px; display: inline-block } 
      
        .main-block { margin-top: 50px; }
        .main-block div { width: 130px;  
                          height: 140px; 
                          margin-right: 28px; 
                          margin-bottom: 30px;
                          font-size: 13px } 
          .main-block div:nth-child(4n) { margin-right: 0 }						           
          .main-block  div img { width: 105px } 
	}
	
	@media screen and (min-width: 710px) and (max-width: 780px) /*iPhone 6/7/8 Plus peyzaj*/
	{
 	  h3 { font-size: 33px }
	  
	  section { width: 360px; margin: 0 55px 20px 35px; display: inline-block }
	    section img { width: 350px }	
		
      aside { width: 250px; display: inline-block } 
      
        .main-block { margin-top: 50px; }
        .main-block div { width: 140px;  
                          height: 145px; 
                          margin-right: 30px; 
                          margin-bottom: 30px;
                          font-size: 14px } 
          .main-block div:nth-child(4n) { margin-right: 0 }						           
          .main-block  div img { width: 110px } 
	}
	
	@media screen and (min-width: 800px) and (max-width: 900px) and (orientation: landscape) /*iPhone X peyzaj*/
	{
 	  h3 { font-size: 33px }
	  
	  section { width: 390px; margin: 0 95px 20px 35px; display: inline-block }
	    section img { width: 420px }	
		
      aside { width: 250px; display: inline-block } 
      
        .main-block { margin-top: 50px; }
        .main-block div { width: 150px;  
                          height: 155px; 
                          margin-right: 35px; 
                          margin-bottom: 30px;
                          font-size: 14px } 
          .main-block div:nth-child(4n) { margin-right: 0 }						           
          .main-block  div img { width: 120px }
	}
	
	@media screen and (min-width: 910px) and (max-width: 950px) and (orientation: landscape) /*iPhone 12 pro max peyzaj*/
	{
 	  h3 { font-size: 33px }
	  
	  section { width: 420px; margin: 0 120px 20px 55px; display: inline-block }
	    section img { width: 420px }	
		
      aside { width: 250px; display: inline-block } 
      
        .main-block { margin-top: 50px; }
        .main-block div { width: 150px;  
                          height: 160px; 
                          margin-right: 45px; 
                          margin-bottom: 33px;
                          font-size: 14px } 
          .main-block div:nth-child(4n) { margin-right: 0 }						           
          .main-block  div img { width: 120px }
	}
	
	@media screen and (max-width: 320px) /*iPhone 5/SE portret*/
	{
 	  header { height: 40px; padding: 5px 10px }
	  header nav { font-size: 26px }
	  header .lang { font-size: 12px }
 	  
 	  h3 { font-size: 26px }
	  
	  section { width: 100% }
	    section img { width: 280px }	
		
      aside { width: 260px; margin: 50px auto }
      							 
      .main-block { margin-top: 70px; }
        .main-block div { width: 128px;  
                          height: 125px; 
                          margin-right: 28px; 
                          margin-bottom: 30px;
                          font-size: 12px } 
          .main-block div:nth-child(2n) { margin-right: 0 }						           
          .main-block  div img { width: 95px }
 	}
	
    @media screen and (min-width: 560px) and (max-width: 580px) and (orientation: landscape) /*iPhone 5/SE peyzaj*/
	{
 	  header { height: 40px; padding: 5px 15px }
	  header nav { font-size: 26px }
	  header .lang { font-size: 12px }
 	  
 	  h3 { font-size: 26px }
	  
	  section { width: 280px; margin: 0 35px 20px 15px; display: inline-block }
	    section img { width: 270px }	
	    section h5 { width: 230px;
	                 padding: 10px 0;
	                 font-size: 16px;
	                 border-radius: 8px }
		
      aside { width: 210px; display: inline-block } 
      
      
        aside label { left: 10px;
                      top: 7px;
                      font-size: 15px }  
            
	    aside input[type="email"],
	    aside input[type="password"] { padding: 7px;
								       font-size: 15px }
  
        aside #pass { font-size: 13px }
		
		aside button { padding: 7px 0;
		               font-size: 15px }
      
        .main-block { margin-top: 50px; }
        .main-block div { width: 118px;  
                          height: 120px; 
                          margin-right: 18px; 
                          margin-bottom: 30px;
                          font-size: 12px } 
          .main-block div:nth-child(4n) { margin-right: 0 }						           
          .main-block  div img { width: 90px }
	}
    
    @media screen and (min-width: 760px) and (max-width: 840px) and (orientation: portrait)  /*iPad portret*/
	{
 	  header { height: 50px; padding: 15px 30px }
	  header nav { font-size: 32px }
	  header .lang { font-size: 16px }
 	  
 	  h3 { font-size: 37px }
	  
	  section { width: 360px; margin: 0 85px 20px 25px; display: inline-block }
	    section img { width: 380px }	
	    section h5 { width: 270px;
	                 padding: 14px 0;
	                 font-size: 20px;
	                 border-radius: 10px }
		
      aside { width: 260px; display: inline-block } 
      
      
        aside label { left: 12px;
                      top: 12px;
                      font-size: 17px }  
            
	    aside input[type="email"],
	    aside input[type="password"] { padding: 12px;
								       font-size: 17px }
								       
		aside input[type='email']:focus+label,
        aside input[type='email']:not(:placeholder-shown)+label,
        aside input[type='password']:focus+label,
        aside input[type='password']:not(:placeholder-shown)+label { top: -9px;
                                                     background: #fff;
                                                     padding: 0 8px;
                                                     font-size: 14px }						       
  
        aside #pass { font-size: 15px }
		
		aside button { padding: 10px 0;
		               font-size: 17px }
      
        .main-block { margin-top: 50px; }
        .main-block div { width: 150px;  
                          height: 155px; 
                          margin-right: 30px; 
                          margin-bottom: 30px;
                          font-size: 15px } 
          .main-block div:nth-child(4n) { margin-right: 0 }						           
          .main-block  div img { width: 120px }
	}
	
	@media screen and (min-width: 980px) and (max-width: 1200px) /*iPad peyzaj, iPad Pro portret*/
	{ 
	  header { height: 60px; padding: 15px 30px }
	  header nav { font-size: 41px }
	  header .lang { font-size: 16px }
 	  
 	  h3 { font-size: 44px }
	  
	  section { width: 550px; margin: 0 85px 20px 45px; display: inline-block }
	    section img { width: 540px }	
	    section h5 { width: 310px;
	                 padding: 11px 0;
	                 font-size: 20px;
	                 border-radius: 8px }
		
      aside { width: 280px; display: inline-block } 
      
      
        aside label { left: 15px;
                      top: 10px;
                      font-size: 17px }  
            
	    aside input[type="email"],
	    aside input[type="password"] { padding: 10px;
								       font-size: 17px }
								       
		aside input[type='email']:focus+label,
        aside input[type='email']:not(:placeholder-shown)+label,
        aside input[type='password']:focus+label,
        aside input[type='password']:not(:placeholder-shown)+label { top: -8px;
                                                     background: #fff;
                                                     padding: 0 7px;
                                                     font-size: 13px }						       
  
        aside #pass { font-size: 14px }
		
		aside button { padding: 10px 0;
		               font-size: 17px }
      
        .main-block { margin-top: 80px; }
        .main-block div { width: 190px;  
                          height: 180px; 
                          margin-right: 55px; 
                          margin-bottom: 50px;
                          font-size: 17px } 
          .main-block div:nth-child(4n) { margin-right: 0 }						           
          .main-block  div img { width: 140px }
	}
	
    @media screen and (min-width: 1200px) and (max-width: 1400px) /*iPad Pro peyzaj*/
	{ 
	  header { height: 60px; padding: 15px 50px }
	  header nav { font-size: 46px }
	  header .lang { font-size: 18px }
 	  
 	  h3 { font-size: 46px }
	  
	  section { width: 700px; margin: 20px 150px 40px 75px; display: inline-block }
	    section img { width: 690px }	
	    section h5 { width: 350px;
	                 padding: 15px 0;
	                 font-size: 24px;
	                 border-radius: 8px }
		
      aside { width: 310px; display: inline-block } 
      
      aside .auth {   margin-top: 40px;
                      box-sizing: border-box;
                      position: relative;
                      margin-bottom: 10px }
      
      
        aside label { left: 15px;
                      top: 10px;
                      font-size: 20px }  
            
	    aside input[type="email"],
	    aside input[type="password"] { padding: 10px;
								       font-size: 20px }
								       
		aside input[type='email']:focus+label,
        aside input[type='email']:not(:placeholder-shown)+label,
        aside input[type='password']:focus+label,
        aside input[type='password']:not(:placeholder-shown)+label { top: -8px;
                                                     background: #fff;
                                                     padding: 0 7px;
                                                     font-size: 14px }						       

        aside #pass { margin-bottom: 30px }
		
		aside button { padding: 10px 0;
		               font-size: 20px }
         
        .main-block { margin-top: 80px; }
        .main-block div { width: 230px;  
                          height: 200px; 
                          margin-right: 55px; 
                          margin-bottom: 50px;
                          font-size: 18px } 
          .main-block div:nth-child(4n) { margin-right: 0 }						           
          .main-block  div img { width: 155px }
	}