/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('https://www.hinkers.software/fonts/roboto-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('https://www.hinkers.software/fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('https://www.hinkers.software/fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://www.hinkers.software/fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('https://www.hinkers.software/fonts/roboto-v18-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://www.hinkers.software/fonts/roboto-v18-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-500.woff') format('woff'), /* Modern Browsers */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('https://www.hinkers.software/fonts/roboto-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https://www.hinkers.software/fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.hinkers.software/fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
* {
    margin:0;
    padding:0;
}

html,body {
    min-height: 100%;
    width: 100%;
    height: 100%;
    font-size: 16px;
    
  -webkit-user-select: none;  
  -moz-user-select: none;     
  -ms-user-select: none;      
  user-select: none;    
}


.selectable {
-webkit-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select:  auto !important;
user-select:  auto !important;
}



a, div, img {
    /*
  -webkit-transition: all .5s ease;
    transition: all .5s ease;   
    */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;

    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica', 'Arial', sans-serif;
    font-weight: 300;
    background: #111;
    color: #ff8000; /*#ef6c00;*/
    
    
    background: #333 url(https://res.hinkers.net/img/material.dark.svg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://res.hinkers.net/img/material.dark.svg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://res.hinkers.net/img/material.dark.svg', sizingMethod='scale')";
    

   display: flex;
  flex-direction: column;
    
        text-align: center;

}

.modal-header {
    
    min-height:55px;
    
    font-size:20px;
    
    background:#f57c00;
    color:#000;
   display: flex;
     flex-direction: row;
}

#modal-header-text, #modal-header-close {

    padding-top:0px;
    padding-bottom:0px;
    

    
   line-height:55px;
    
     
    
}

#modal-header-text {
         flex:1; 
    text-align: left;
   
}

#modal-header-text, .modal-content {
    padding-left: 38px;
}

.modal-content {
   /* min-height: calc(100% - 55px - 30px);*/ /* Sorry.. i know :(*/
   min-height: calc(100% - 130px);
    padding: 40px 38px ;
    text-align: left;
}

.modal-header-close:hover, .modal-header-close:focus {
      background-color: #ff972d;
}

.modal-header-close:active {
      background-color: #a50000;
}

.modal-header-close {
     background: #f57c00 url(../../res/ic_close.png) no-repeat center center; 
    background-size: 25px;
     
    min-width:100px;
    cursor:pointer;
 

}

.modal-container {
    
     display: flex;
    flex-direction: column;
    
}

.modal, .modal-container {
    
       height:100vh;
    width:100vw;
    background:#111
}

.modal {
    position:fixed;
     z-index:100;
 
    background: rgba(0, 0, 0, 0.8);
    color:#ebebeb;
       
    visibility: hidden;
    opacity: 0;
    
  
  -webkit-transition: all .2s ease; 
    transition: all .2s ease;   
    

}

.modal-container-open {
    
    transform: scale(1) translate(0, 60vh);


    -webkit-animation: modal-container-open-animation .5s linear forwards;
    animation: modal-container-open-animation .5s linear forwards;
}


@keyframes modal-container-open-animation {
    
   20% {  }
   66% {  transform: scale(1) translate(0, 0); }
   69% {  transform: scale(1) translate(0, 2vh);} 
   73% {  transform: scale(1) translate(0, 0); }
   80% {  transform: scale(1) translate(0, 1vh);}
   100% { transform: scale(1); }
}

.modal-open {
    visibility: visible !important;
   

    
    opacity:1 !important;
}





.modal-content {
     overflow:auto;

}

.mobile-newline {
        display:block;
 }




.content {
         -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
    

.main-container {
        flex: none;
 
    
    
        -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.center {
           margin: 0 auto;
}

.container {




}



.footer {
   
    
    
     background: #111111; /*#000000a3 url(../../res/material.blur.dark.png) no-repeat center center fixed; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    
    align-self: flex-bottom;
    padding: 1vh;
    
    color:#b3b3b3;
    
    text-transform: uppercase;
    
}

a {
    text-decoration: none;
    color:#ffaa00;
}

.footer a {
        color: #b3b3b3;  
}
.footer a:hover, .footer a:focus {
        color: #d88733;
    
}


.footer-dark {
    color:#ca6600;
    font-weight: bold;
    
}

.logo {
 
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.7);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.7);
}

.round {
      border-radius: 100%;
}

.logo-img {
   visibility: hidden;
    opacity: 0;
    
    background: url(../../logo.png) repeat center center ; 

}
.logo-bg {
     background: #000000a3 url(../../res/logo.blur.png) no-repeat center center; 
  
}
.logo-bg,.logo-img {
    
      background-size: 120px;
}



.logo-size {
     height:120px;
     width: 120px;
}


.main-logo, .main-name-container {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
}
 
.main-name-container h1 {
    font-size: 39px;
    font-weight: 300;
}
.thin{
    font-weight: 300;
}
.thick{
    font-weight: 400;
}
.main-work h2 {
    
    font-weight: 300;
    font-family: 'Consolas', monospace;
    color:#d88733;
    font-size:28px;

}

@media (min-width: 400px) {
   
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	   background-color: #191919;
    }

    ::-webkit-scrollbar
    {
	   width: 6px;
    height: 6px;
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb
    {
    background-color: #f57c00;
    }

    
}

.main-work h2 {

    min-height:71px;
}




@media (min-width: 768px){
    
    .modal-container {
        
    }
    
.logo-bg,.logo-img {
    
   

    background-size: 150px;
}
    
    
.main-work h2 {

    min-height:0;
}

    
    .logo-size {
     height: 150px;
        width: 150px;
 

}
    /*
.main-logo, .main-name-container {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}*/
    
    .modal {
        
        
    }
    
    .container {
  margin: 0 auto;
  /*width: 90%;*/
  max-width: 700px;

}

    
    
    .main-logo, .main-name-container {
    
        -webkit-box-flex: 0!important;
    -webkit-flex: none!important;
    -ms-flex: none!important;
    flex: none!important;
        
        
    }
    
      .main-logo {
              width: 31% !important;
          
    }
    
    
    .main-name-container {
              width: 69%!important;
        

        
    }
    
    .main-name-container h1, .main-work h2 {
    
        text-align: left;
    
    }
    
    
.main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
       -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

}
    
    
    
    .main-name-container h1 {
    font-size: 65px;

    }
    
    .main-work h2 {

    font-size:30px;
}
    
    .mobile-newline {
        display:inline-block;
    }
    
}
















.blink-anim{
  animation: blink-frames linear 1s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: blink-frames linear 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -ms-animation: blink-frames linear 1s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes blink-frames{
  0% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  51% {
    opacity:1;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes blink-frames {
  0% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  51% {
    opacity:1;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes blink-frames {
  0% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  51% {
    opacity:1;
  }
  100% {
    opacity:1;
  }
}







.form-message {
    background:#eee;
    color:#000;
    transition: color 0s ease;
}

.form-message-success {
    background: #00e676;
    color:#000;
}

.form-message-error {
    background: #d50000;
    color:#fff;
}



















.fade-out-collapse {
    animation: anim-fade-out-collapse ease-in .5s;
    -webkit-animation: anim-fade-out-collapse ease-in .5s;
    -ms-animation: anim-fade-out-collapse ease-in .5s;


    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;


}



@keyframes anim-fade-out-collapse {
    0% {
        max-height: 1001px;
        opacity: 1;
    }
    90 % {
        display: unset;
    }
    100% {
        max-height: 0;
        opacity:0;

    }


}

.hide {
    display:none;
}


.message-content {
    /*display: flex;*/
    justify-content: space-between;
}

.message-content .btn{
    margin-top: 20px;
    font-weight: bold;
    color:#222;
    min-width: 150px;
}

.message-content .btn:hover, .btn:focus{
    color:#000;
}

.form-message:not(.form-message-success):not(.form-message-error)
{
    display:none;
}


@media (min-width: 580px) {

    .message-content {
        display: flex;

    }

    .message-content .btn {
        margin-top:0px;
    }
}



.d-flex {
    display: flex !important;
}
.d-block {
    display: block !important;
}