@font-face {
        font-family: 'Avenir-Medium';
        src: url('../Avenir-Medium.otf') format('opentype');
    }

    @font-face {
        font-family: 'Avenir-light';
        src: url('../Avenir-light.otf') format('opentype');
    }

    @font-face {
        font-family: 'Avenir-Book';
        src: url('../Avenir-Book.otf') format('opentype');
    }

    @font-face {
        font-family: 'OpenSans';
        src: url('../OpenSans.ttf') format('truetype');
    }


 

    html { background:#222627; scroll-behavior: smooth; }

    html, body { margin:0; padding:0; font-size:1em; line-height:normal; font-family: 'Avenir-light', sans-serif;  color:#444f51; height:100%;  }

    a:link, a:visited { text-decoration:none; color:#3D4241;
			            -webkit-transition:0.4s;
			            -moz-transition: 0.4s;
			            transition:0.4s;
                        }

    a:hover, a:active { text-decoration:underline; color:#000;
			            -webkit-transition:0.2s;
			            -moz-transition: 0.2s;
			            transition:0.2s;
					    }



    a:link.rev, a:visited.rev { text-decoration:none; color:#bed5e1;  }
    a:hover.rev, a:active.rev { text-decoration:underline; color:#fff; }

 
    a:link.null, a:visited.null { text-decoration:none; color:inherit; }
    a:hover.null, a:active.null { text-decoration:none; color:inherit; }


    .ots { text-align:center; font-size:0.9em; letter-spacing:1px; } 
    .ots a { display:inline-block; padding:10px; color:#cdcdcd; }
    .ots a:hover { color:#fff; }



                  .epath { stroke-dasharray: 3000;
                              stroke-dashoffset: 3000;
                              animation: dash 3s linear forwards;
                            }

                            @keyframes dash {
                              0%, 100% { stroke-dashoffset: 3000;
                                         fill:transparent;
                              }

                              80% {  fill:transparent;

                              }

                              100% { stroke-dashoffset: 0;
                                     fill:#CACACA;
                              }
                            }


                    .epathl { stroke-dasharray: 3000;
                              stroke-dashoffset: 3000;
                              animation: dashout 5s linear forwards;
                            }

                            @keyframes dashout {
                              0%, 100% { stroke-dashoffset: 3000;
                                         fill:transparent;
                              }

                              50% { fill:transparent; }

                              70% { stroke-dashoffset: 0;
                                     fill:#CACACA;
                                     opacity:100;
                              }

                              90% { stroke-dashoffset: 0;
                                     fill:#CACACA;
 
                              }

                              100% { stroke-dashoffset: 0;
                                     opacity:0;}

                             }

            	.st0 {  opacity:0;
                          animation: fadeInAnimation ease 1.4s;
                          animation-iteration-count: 1; 
                          animation-fill-mode: forwards;  
                          animation-delay:1.8s;
                          -webkit-animation: fadeInAnimation ease 1.4s;
                          -webkit-animation-iteration-count: 1; 
                          -webkit-animation-fill-mode: forwards; 
                          -webkit-animation-delay:1.8s;
                          fill:#CACACA;
 	                }

                    @keyframes fadeInAnimation {
                        0% {
                            opacity: 0;
 
                        } 

                        100% { opacity: 1;
 
                             } 
                         	}
            



                    @keyframes inupAni {
                        0% {
                            opacity: 0;
  
                        } 

                        100% { opacity: 1;
  
                             } 


                     }


            .hero1  { font-size:1.1em; line-height:1.4em; color: rgba(255,255,255,0.8); letter-spacing:1px;
                      text-align:left;
                      display:block;
                      margin:2px 0; 
                      padding:0;                                    
                    } 

            .hroani { opacity:0;
                      animation: inupAni ease 1s;
                      animation-iteration-count: 1; 
                      animation-fill-mode: forwards;  
                      -webkit-animation: inupAni ease 1s;
                      -webkit-animation-iteration-count: 1; 
                      -webkit-animation-fill-mode: forwards; 
               
                  }
 

            .hrodly1 { animation-delay:2s; -webkit-animation-delay:2s; }
            .hrodly2 { animation-delay:2.4s; -webkit-animation-delay:2.4s; }
            .hrodly3 { animation-delay:2.8s; -webkit-animation-delay:2.8s; }
            .hrodly4 { animation-delay:3.2s; -webkit-animation-delay:3.2s; }
            .hrodly5 { animation-delay:3.6s; -webkit-animation-delay:3.6s; }


            .herobx { height:260px; position:relative; }


 

                header { width: 100%;
                         height:110px;
                         background: transparent; 
                         -webkit-transition:0.4s;
			             -moz-transition:0.4s;
			             transition:0.4s;
                       }


                header.sticky { height:60px;
                                background: rgba(0, 0, 0, 0.8); 
                                -webkit-transition:0.4s;
			                    -moz-transition:0.4s;
			                    transition:0.4s;
                                z-index:9999;
                              }


                .headbx { width:94%; max-width: 1366px; height:auto; margin:0 auto; padding:0; position:relative; }


                a.logobx { position:absolute; top:25px; left:10px; }
                   .lgid { width:50px; display:inline-block; vertical-align:middle; }
                   .lgtx { width:112px; padding:0 0 10px 5px; display:inline-block; vertical-align:middle; }


  
                .tel { float:right; padding:35px 0 0 0; text-align:right;
                        -webkit-transition:0.4s;
			            -moz-transition:0.4s;
			            transition:0.4s;
                     }
                .telstick { float:right; font-size:1.2em; color:#fff; padding:15px 0 0 0;
                             -webkit-transition:0.4s;
			                 -moz-transition:0.4s;
			                 transition:0.4s;
                           }


                .con { padding:0; margin:0 10px 0 0; font-size:1em;
                        -webkit-transition:0.8s;
			            -moz-transition:0.8s;
			            transition:0.8s;
                        display:inline-block;
                        border-right:none;
                     }

                .constick { padding:0; font-size:0.7em;
                            -webkit-transition:0.4s;
			                -moz-transition:0.4s;
			                transition:0.4s;
                          }                 

 

                    .ftel { font-size:1em; font-weight:bold; padding:10px 0 20px 0; text-align:left; }
                    .ftoffs { font-size:0.9em; padding:20px 0; }
 
                        a.toptel[href^=tel] { color:#fff; text-decoration: none; font-size:1em; letter-spacing:1px; } 

                        a.toptel[href^=tel]:hover { text-decoration:none; color:#bed5e1; }

                        a.fttel[href^=tel] { display:block; color:#3a3a3a; } 

                        .txout { display:none; }



                    #mainvid { height:100vh; width:100%; position:fixed; object-fit:cover; z-index:-1; filter: hue-rotate(30deg); }

                   h1 { font-size:1.3em; line-height:1.2em; padding:0 0 10px 0; }
  
                   h2 { font-size:1.1em; padding:0 0 5px 0; }

                   h3.bcola { font-size:1.4em; line-height:1.2em; font-weight:normal; padding:0 0 20px 0; color:#444f51; }

 


    /*---------- CONSTRUCT --*/


                article.cls {
                padding: 0;
                -webkit-column-count: 1; /* Chrome, Safari, Opera */
                -moz-column-count: 1; /* Firefox */
                column-count: 1;
                -webkit-column-rule: 1px solid #9d9d9d; /* Chrome, Safari, Opera */
                -moz-column-rule: 1px solid #9d9d9d; /* Firefox */
                column-rule: 1px solid #9d9d9d;
                -webkit-column-gap: 80px; /* Chrome, Safari, Opera */
                -moz-column-gap: 80px; /* Firefox */
                column-gap: 80px;
                text-align: justify;
                line-height:1.4em;
                font-size:1em;
            }
  
                article.pr { line-height:1.6em; color:#000; }
 
    .gradbx { background-image:linear-gradient(to bottom, rgba(36, 36, 36, 1), rgba(36, 36, 36, 0.6)); }


    .container { z-index:10;
                 width: 94%;
                 max-width: 1366px;
                 margin: 0 auto;
                 padding: 40px 20px;
               }



    .containernp { z-index:10;
                 width: 94%;
                 max-width: 1366px;
                 margin: 0 auto;
                 padding: 40px 0;
               }


 
    .containerhp { z-index:10;
                 width: 94%;
                 max-width: 1366px;
                 margin: 0 auto;
                 padding: 40px 0 0 0;
               }


    .containfx { z-index: 10;
                 width: 94%;
                 max-width: 1366px;
                 margin: 0 auto;
                 padding:20px 0 40px 0;
                 display:flex;
                 flex-wrap:wrap;
               }



    .projbx { display:flex; flex-direction:column; }
    .projbxtx { background:rgba(199,199,199,1);  padding:30px; flex:1 1 100%; margin:0; order:1; }
    .projbxim { background-size:cover; flex:1 1 100%; padding:80px; margin:0; margin:0; }

    .txr { text-align:left; }


    .prjtxr, .prjtxl { width:100%; margin:0; text-align:justify; }


    .exambx { background: rgba(36,36,36,0.9); padding:40px 0 60px 0; position:relative;  }

    .secvid { position:absolute; z-index:0; opacity:0.6; filter: grayscale(50%); 
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
               width:100%;
               height:100%;
              object-fit: cover;

            }


    a.exbox { background:rgba(62,62,62,1); 
             height:350px;
             padding:10px;
             flex:1;
             transition:0.5s; 
             margin:4px;
             color: white;
             z-index:10;
             position:relative;
             text-decoration:none;
           }

        .exbox:hover { flex:3; opacity:1; border-radius:8px; box-shadow: inset 0 0 400px 400px rgba(255, 255, 255, 0.8); color:#121212; padding:20px; }

        h2.ex { font-size:1em; padding:10px; transition:0.4s; backdrop-filter: blur(10px) grayscale(10%);   }

        .exbox:hover .extag { opacity:1; }
        .exbox:hover h2.ex { letter-spacing:4px; transition:0; padding:0; backdrop-filter: blur(0); }
 

        .extag { opacity: 0;
                 transition: 0.6s;
                 padding: 10px 0;
               }
         

            .extsub { font-size:0.9em; letter-spacing:1px; line-height:1.6em; padding:20px 0 10px 0; color:#000; }            

            .etgs { padding:5px 0; font-size:0.9em; }


            .grbar { background: rgba(36,36,36,0.9); padding:20px 0; color: #fff;
                        -webkit-transition:0.6s;
			            -moz-transition:0.6s;
			            transition:0.6s;    
                  }


            .whbar { background: rgba(255,255,255,0.8);
                     padding: 0;
                     -webkit-transition: 0.6s;
                     -moz-transition: 0.6s;
                     transition: 0.6s;
                     position:relative;
                 }

                .whbar:before {
                    content: " ";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0.6;
                    z-index: -1;
                    background: url('../code-bg-3.jpg');
                    background-size: cover;
                    background-attachment:fixed;
                }



   
         

                .hdtx { overflow: hidden; text-align: center; width:100%; font-size:0.9em; letter-spacing:2px; text-transform:uppercase; padding:0 0 40px 0; color:#fff; }
                    .hdtx:before,
                    .hdtx:after {
                        background-color: rgba(255,255,255,0.2);
                        content: "";
                        display: inline-block;
                        height: 1px;
                        position: relative;
                        vertical-align: middle;
                        width: 50%;
                    }

                    .hdtx:before {
                        right: 20px;
                        margin-left: -50%;
                    }
                    .hdtx:after {
                        left: 20px;
                        margin-right: -50%;
                    }


                    .quartbadge,  .sixbadge { width: calc(100% /3); padding:10px 20px; }   
 

				.aniline {  position: relative;
     
				         }

                    .aniline:before {
                        content: "";
                        position: absolute;
                        display: block;
                        width: 100%;
                        height: 2px;
                        top: 2px;
                        left: 0;
                        background-color: #9d9d9d;
                        transform: scaleX(0);
                        transition: transform 0.8s ease;
                    }


				    .exbox:hover .aniline:before {
					    transform: scaleX(1);
 
				    }


            .abtnbx { position:absolute; bottom:20px; right:20px; font-size:0.9em; }


 

            .btn-style701 { cursor:pointer;
                            position: relative;
                            border: none;
                            color: #fff;
                            font-size:0.9em;
                            opacity:0;
                            text-align:right;
                            border-radius:4px;
                          }

            .exbox:hover .btn-style701 { color: #000; opacity:1; background:rgba(255,255,255,0.5); }


            .btn-style701 span {
                width: 100%;
                display: block;
                position: relative;
                padding:12px;
            }

                .btn-style701::before, .btn-style701::after,
                .btn-style701 span::before,
                .btn-style701 span::after {
                    width: 12px;
                    height: 6px;
                    position: absolute;
                    transition: all 0.5s;
                    border: 2px solid #9d9d9d;
                    opacity: 0;
                    content: "";
                }

            .btn-style701::before {
                top: 0;
                left: 0;
                border-right: none;
                border-bottom: none;
                transform: translate(-50%, -50%);
            }

            .btn-style701::after {
                bottom: 0;
                left: 0;
                border-right: none;
                border-top: none;
                transform: translate(-50%, 50%);
            }

            .btn-style701 span::before {
                top: 0;
                right: 0;
                border-left: none;
                border-bottom: none;
                transform: translate(50%, -50%);
            }

            .btn-style701 span::after {
                bottom: 0;
                right: 0;
                border-left: none;
                border-top: none;
                transform: translate(50%, 50%);
            }

            .btn-style701:hover { color:#000; }

                .btn-style701:hover::before, .btn-style701:hover::after,
                .btn-style701:hover span::before,
                .btn-style701:hover span::after {
                    opacity: 1;
                    border-color: #9d9d9d;
                    transform: translate(0%, 0%);
                }



     

                .infqotel, .infqoter { padding:30px 0; font-family:'New York', sans-serif; font-size:0.9em; font-style: italic; letter-spacing:1px; line-height:1.6em; color:#000; position: relative; width:100%; margin:0 0 0 auto;  }

                    .infqotel:before, .infqoter:before { border-bottom: none; }
 
               
                
                    .infspecs { font-size:0.8em; letter-spacing:1px; padding:40px 0 0 0; }        
 

                    .fa-envelope-open, .fa-phone-square { color: rgba(255,255,255,0.7); font-size:1.6em; padding:0 15px 0 0; margin:0; vertical-align:middle; }



/*---------- HIDE --*/

                .clicker {  outline: none;
                            cursor: pointer; 
                          }

                .hiddendiv { height:2px; display: block;  
                             overflow:hidden;
			                  -webkit-transition:all 1s;
			                  -moz-transition: all 1s;
			                  transition: all 1s;
                              opacity:0.5;
                              border-bottom:2px dashed rgba(0,0,0,0.3);
                            }

                .clicker:focus + .hiddendiv { height:auto;
                                              display: block;
			                                    transition: 0.4s;
			                                    -moz-transition: 0.4s;
			                                    transition: 0.4s;
                                                opacity:1;
                                               border-bottom:none;
                                            }




                #demo.hide { opacity:0; display:none; padding:0; margin:0; transition: all 1s; background:red; }
                #demo { transition: all 1s; display:block; }




            #myBtn {
              display: none;
              position: fixed;
              bottom: 20px;
              right: 20px;
              z-index: 99;
              font-size:24px;
              border: none;
              outline: none;
              background: #bed5e1;
              color:rgba(62,62,62,1);
              cursor: pointer;
              padding: 10px;
              border-radius: 4px;
              transition: all 0.5s;
            }

            #myBtn:hover { background: rgba(62,62,62,0.8); color:#fff; }




/*---------- FORMS --*/
 

            .lbfield { padding:0 0 15px 0; overflow:hidden; }
 
		    label.form { font-weight:normal; background:none; display:block; float:left; padding:5px 10px 5px 5px; margin:0; text-align:left; min-width:100px; width:auto; font-size:0.9em; line-height:normal; display:none;  }  
 
            input.form { background:none; border:none; border-bottom:1px solid rgba(62, 62, 62, 0.4); padding:15px 10px; margin:0; vertical-align:top; font-size:0.9em; line-height:normal; width:100%; }  

                    .form:focus {  box-shadow: 0;
	                                border:none; 
                                    border-left:1px solid rgba(62, 62, 62, 1); 
	                                color: #000;
                                    padding:15px; 
			                        -webkit-transition: 0.2s;
			                        -moz-transition: 0.2s;
			                        transition: 0.2s;
                                    background: rgba(255,255,255,0.3);
                                 }

            input.formx { border:none; border-left:3px solid #660000; padding:15px; margin:0; vertical-align:top; font-size:0.9em; line-height:normal; width:100%; }

 

            textarea.form { background:none; border:none; border-bottom:1px solid rgba(62, 62, 62, 0.4); padding:15px 10px; margin:0; vertical-align:top; font-size:0.9em; line-height:normal; width:100%; height:100px;
       
                           }

                   textarea.form:focus { background: rgba(255,255,255,0.3); box-shadow: 0;
	                                     border:none; 
	                                     color: #000;
                                         padding:15px; 
			                             -webkit-transition: 0.2s;
			                             -moz-transition: 0.2s;
			                             transition: 0.2s;
                                    border-left:1px solid rgba(62, 62, 62, 1); 

                                      }

           textarea.formx { border:1px solid red; padding:6px 10px; margin:0; vertical-align:top; font-size:12px; line-height:normal; width:100%; }


          .mesneg, .mespos  { padding:10px; margin:0 0 15px 0; color:#fff; text-align:center;
                               -webkit-border-radius: 3px;
                               -moz-border-radius: 3px;
                                border-radius: 3px;
                            } 
            
           .mesneg { background:#660000; }
            .mespos { background:#30900f; } 

 
 
 

            input.more { background:none; border:none; padding:0; margin:0; vertical-align:top; text-align:left; font-size:0.8em; line-height:normal; cursor:pointer; }  



 

            input.dobtn, input.dobtn2 { padding: 10px 15px;
                                        margin: 0;
                                        vertical-align: top;
                                        font-size: 0.8em;
                                        line-height: normal;
                                        cursor: pointer;
                                        -webkit-border-radius: 3px;
                                        -moz-border-radius: 3px;
                                        border-radius: 3px;
                                        font-family:'OpenSans';
                                        word-break:break-all;
                                        text-align:center;
                                        -webkit-transition: 0.5s;
                                        -moz-transition: 0.5s;
                                        -o-transition: 0.5s;
                
                                    }


            input.dobtn { background: rgba(0,0,0,0.7);
                          border: none;
                          color: #fff;
                        }

            input.dobtn:hover { background: rgba(255,255,255,1); color:#000; }


            input.dobtn2 { background: rgba(255,255,255,0.1);
                           border: none;
                           color: #fff;
                         }

            input.dobtn2:hover { background: rgba(255,255,255,0);  }


             input.btnpd { margin:0 0 20px 0; }




             .ckibx { background:rgba(0,0,0,0.9); position:fixed; left:0; right:0; bottom:0; padding:80px; z-index:99999999; }



/*---------- TESTI --*/



             .tezb { display:flex; flex-direction:column; grid-gap:2em;  } 

                 .tesform { background: rgba(0,0,0,0.7); padding:40px; border-radius:10px; position:relative; font-size:1em; color:#fff; line-height:1.4em; z-index:2; box-shadow: inset 0 0 10px rgba(0,0,0,1); }  
                 .fsub1 { display:flex; grid-gap:2em; flex-direction:column;  }
 
 
            .tesname { padding:20px 0 0 0; font-style:normal; font-size:0.9em; font-weight:bold; color:#fff; }
                .tespos { font-weight:normal; padding:0 60px 20px 0; }

            .quotel { position:absolute; font-size:4em; top:15px; left:15px; z-index:0; color: rgba(255,255,255,0.1); }

            .quoter { color:rgba(255,255,255,0.5); position:absolute; font-size:1.8em; bottom:0; right:0; z-index:1; }

  

            .qotname { padding:10px 0 0 0; font-size:0.9em; font-family: 'Avenir-light', sans-serif; font-weight:100; font-style:normal; }


            .qtms { display:inline-block; padding:0 3px; vertical-align:top; line-height: normal; color: rgba(0,0,0,0.6); }

            .tebdg { position:absolute; bottom:-20px; right:20px; width:80px; border-radius:10px; border:5px solid rgba(255,255,255,0.1); }




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

         footer { background:rgba(62,62,62,0.9); padding:20px 40px; color: #fff;  font-family: arial, sans-serif; letter-spacing:1px; font-size:0.9em; } 


         .ftlft { display:block; width:100%; vertical-align:top; padding:20px; }
         .ftcnt { display:block; width:100%; vertical-align:top; padding:20px; }

            .ftlinks { float:none; width:100%;  text-align:center; }

           .ftlinks a:link, .ftlinks a:visited { display:inline-block; text-decoration:none; color:#cdcdcd; padding:0; margin:0; font-size:0.8em;
                                                 -webkit-transition: 0.5s;
                                                 -moz-transition: 0.5s;
                                                 -o-transition: 0.5s;
                                                 transition: 0.5s;
                                               }

            .ftlinks a:hover, .ftlinks a:active { display:inline-block; text-decoration:none; color:#6C98B0; 
                                                  -webkit-transition: 0.3s;
                                                  -moz-transition: 0.3s;
                                                  -o-transition: 0.3s;
                                                  transition: 0.3s;
					                            }

            .ftdis { float:none; width:100%; font-size:0.8em; color:#cdcdcd; text-align:center; padding:0 0 20px 0; line-height:1.4em; }
 


            .ftel { font-size:1.2em; font-weight:bold; padding:10px 0 20px 0; text-align:left; }
            .ftoffs { font-size:0.9em; padding:20px 0; }

            


            .cookie {  border-collapse:collapse; margin:10px auto 20px 0; font-size:0.9em; line-height:1.2em; width:100%; }
            .cookie th { background:#f3f3f3;  border:none;  padding:10px; text-align:left; font-weight:normal; border:1px solid #cdcdcd;  }
            .cookie td { background: rgba(255,255,255,0.2);  padding:10px; vertical-align:top; text-align:left; border:1px solid #cdcdcd; word-wrap: break-word; font-size:0.9em; }