/*  www.anuvi.me*/
/*=ORDER------------------------------------------------------------------------
  RESET
  MAIN
  LINKS
  LISTS
  FORM
  CHEAT
  404
  IPAD
  RESPONSIVE
  
*/

/*------------------------------------
=RESET
    from Harry Roberts
    Author URL: csswizardry.com
------------------------------------*/

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
a,abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
	display:block;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
strong,b,mark{
	font-weight:bold;
	font-style:inherit;
}
em,i,cite,q,address,dfn,var{
	font-style:italic;
	font-weight:inherit;
}
abbr[title],dfn[title]{
	cursor:help;
	border-bottom:1px dotted;
}
ins{
	border-bottom:1px solid;
}
a,u,ins{
	text-decoration:none;
}
del,s{
	text-decoration:line-through;
}
pre,code,samp,kbd{
	font-family:monospace;
}
small{
	font-size:0.75em;
}
img{
	border:none;
	font-style:italic;
}
input,
select,option,optgroup,
textarea{
	font:inherit;
}



/*
Form items have always missed cursor interactions...
*/
label,
input,
textarea,
button,
select,
option{
    cursor:pointer;
}
.text-input:active,
.text-input:focus,
textarea:active,
textarea:focus{
    cursor:text;
}

ul, ol, dl{
    
    list-style: none;
}

/*------------------------------------
=CLEARFIX
------------------------------------*/
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
/* For modern browsers */
.cf:before,
.cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf{
    zoom:1;
}

/*=MAIN----------------------------------------------------------------------------------------------------------------------------------------------------*/
@font-face {
  font-family: 'myra_4f_capsregular';
  src: url("https://www.anuvi.me/fonts/myra_4f_caps_regular-webfont.eot");
  src: url("https://www.anuvi.me/fonts/myra_4f_caps_regular-webfont.eot#iefix") format("embedded-opentype"), url("https://www.anuvi.me/fonts/myra_4f_caps_regular-webfont.woff") format("woff"), url("https://www.anuvi.me/fonts/myra_4f_caps_regular-webfont.ttf") format("truetype"), url("https://www.anuvi.me/fonts/myra_4f_caps_regular-webfont.svg#myra_4f_capsregular") format("svg");
  font-weight: normal;
  font-style: normal; }


  html{
    overflow-y:scroll;
    height:100%;
    max-height:100%;    
    line-height:1.5; /* A safe and comfortable default for body copy at any size. */
      
}
body {
   
  background:#fff;
  color: #596b59;
  font-size: 1.5rem; /*16px*/
  height:100%;

  
    

}

.header {
	position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
   width:100%;
   padding:0;
  background-color:#596b59;  
  z-index: 299;  
  /* -webkit-transform: translateZ(0);  */
  
  } 
.wrap{
  
    max-width:1224px;
    margin:0 auto;  
    margin-bottom:80px;
    font-family: Georgia;
   
    
  
}


.whdt-80{
  width:80%;
  margin: 0 auto;
}





  


.cntr{
   width:40%;
   text-align:center;
   margin:0 auto;

}
h1{
    position:absolute;
    color:#faea57; 
    padding:0 2%;
   
}

h2, h3,h4,h5 {
  font-family: 'myra_4f_capsregular';
  /*#5F3A91*/
  /*#faea57; */
   text-align:center;
  
}

.cv h4{
  text-align: left;
}

.hdl-g {

   overflow:hidden;
   }
  
h2,h3,h4 ,p, .ex-mb{
   margin-bottom:1.5%; 
  

}



.hdl-l{
  text-transform:uppercase;
   color: #5F3A91;
}

h4, .hdl-g-s{

  color:#596b59;
  font-family:Georgia;
  font-size:0.9em;
}

#demos, #ahhaa{
     margin-bottom:4.5%;
    
}

.ex-marb{
    margin-bottom:3.5%;

}

.ex-mar-b-6{
  margin-bottom:6%;
}



.ex-p-b{
  padding-bottom:100px;
}




.itl{
  font-style: italic;
   font-size: 0.7em;
   }
   



.brct {
  margin-left: 20%; }

.bcy {
  background-color: #faea57; }

.bclb {
  background-color: #dfe7f2; }

.bclg {
  background-color: #e6e2d4; }

.bcw {
  background-color:#fff;/*#e6d6ed;*/ }

.bclp {
  background-color: #fdcdc9;/*#b29ad6;*/ }

.bcgr {
  background-color: #c9fbc9; /*#bcbfeb;*/ }
  
.bcg{
  background-color: #596b59;

}

.bold{
  font-weight:bold;

}

.last{
  margin-right:0;

}
/*h2:before{
    content:"{";


} */
.text--center{
  text-align: center;
}

.hide{
   position:absolute;
   left:-9999em;
   top:-9999em;

}

.skills-js{
  width:54%;
  position:relative;
  z-index:39;
  margin:-40px auto 0;
  height:170px;
            
}

.skills-js p{ 
   padding:1% 2%;


}

.sq{
     color:#faea57;
     margin-right:1%;

}






#ahhaa p{
  width:80%;
  margin:0 auto 1.5%;
  /*padding-left: 1em;*/
  /*text-indent: -0.7em; */
  text-align:center;

}




.copy{
   font-size:0.6em;
   padding-bottom:80px;

}



.ex-mart{
    margin-top:4.5%;

}

.frst{
        -webkit-animation-name: coloringF;
    }
.thrd{

    -webkit-animation-name: coloringT;


}
    
.frst, .thrd{
    -webkit-animation-iteration-count: infinite;   
       -webkit-animation-duration: 8s;
   -webkit-animation-timing-function: ease; /* ease is the default */

}
    
@-webkit-keyframes coloringF {
      10%{
      
        color:  #faea57;
        
      
      
      }
      
      
      
      70%{
        color: #dfe7f2;
      
      }
      


}



@-webkit-keyframes coloringT {
      10%{
      
        color: #dfe7f2; 
        
      
      
      }
      
      
      
      70%{
        color: #faea57;
      
      }
      


}

.m-msg{
    visibility:hidden;

}


    
/*=MAIN END ----------------------------------------------------------------------------------------------------------------------------------------------*/
/*=LINKS ----------------------------------------------------------------------------------------------------------------------------------------------*/
a{
   color:#596b59;
    padding:1%;
    text-decoration:underline;

}
a > span.none{
    text-decoration:none;
}
a:hover{
    background-color: #e6e2d4;
    transition: background 0.3s ease-out 0s;
    color:#596b59;
    padding:1%;
    text-decoration:none;

}

h1 a, h1 a:visited, h1 a:hover ,h1 a:active, h1 a:focus {
    color:#faea57; 
    background:#596b59;
    padding:0 2%;
    text-decoration:none;

}


.cntr > a{
    display:block;

}


/*=LINKS END ----------------------------------------------------------------------------------------------------------------------------------------------*/
/*=LISTS -----------------------------------------------------------------------*---------------------------------------------------------------------------*/


.mnu{
   

   position: absolute;
   left: -999em;
    color:#faea57; 
    
}

.nav{
  float:right;
  width:50%;
  text-align:center;
  margin:0
}



.nav li{
  width:24%;    
  display:inline-block;
    /*vertical-align:middle; */
    /*display: inline; */ /*IE7*/
    zoom: 1;          /*IE7*/
}

.nav-ex li{
   width:20%;
}

.nav  a{
   color:#faea57;
    display:block;  
   text-decoration:none;
    /*background-color:#596b59;*/
    margin:0 2%;

}


.nav a:hover, .nav a:active, .nav a:focus{
         color:#596b59;
   
} 


a.active{
       color:#596b59;
       background-color:#faea57;
}  


.rght {
  float:right;

}


.skills-list {
  
  text-align: center;
  text-transform: lowercase;
  margin: 0  auto;
  padding: 0; 
  width:52%; 
  }

.skills-list li {
  display: inline-block;
  height: 180px; 
   vertical-align:bottom;
    /*display: inline; */ /*IE7*/
    zoom: 1;          /*IE7*/
     width:16.66%;
     margin:0px;
     padding:0;
  
  }
  


.ex-list{
  width:100%;
  overflow:hidden;
  text-align:center;
}

.ex-list li{
     float:left;
    /* width:33.33%; */
    width: 49%;
   
     overflow:hidden;
     margin:1% 0;
      
 } 
  
.ex-list a{
    display:block;
    height:130px; 
    padding:2%; 
}

.ex-list .gl{
    height:auto;

}

.ex-list p{
   font-size:0.8em;
   color:#596b59;

}

.dm-lst li{
    margin-bottom:1.5%;
}



.ds-lst{
  text-align: center
  width:80%;
  margin:20px 0;
  padding:0;

}

.ds-lst li{
  display:inline;

}

.ds-lst a{
  display:inline-block;

}

.cv-lst-dot {
  list-style:none;

}

.cv-lst-dot li:before{
  content:"ā– ";
  color: #faea57;
  margin-right: 1%;
}

.cv ol {
  list-style: inside inline;
}

.cntct-lst{
  display:grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  padding:2%;
}

.cntct-lst2{
  display:grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-evenly;
  padding:2%;
}



h1.v-cntr{
    margin:0
}



ul.grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
/*grid-column: span 2;*/
  grid-gap: 20px;

}

ul.grid > li {
  background-color: #fdcdc9;
   padding:0.7rem;
}

.wide-row{
  grid-row: span 2;
}


.hlp-lst > li{
  margin-bottom:2rem;
}

/*=LISTS  END-----------------------------------------------------------------------*---------------------------------------------------------------------------*/
/*--- FORM ---*/
#mail-form{
  
   width:80%;
   margin:0 auto 4.5%;  
}

 fieldset{
  border:none;

}
#mail-form label {
    float:left;
    clear:left;
    width:26%;
    text-align:right;
    padding-right:1%;
    margin-bottom:2%;


}

#mail-form input, #mail-form textarea{
    width:58%;
    padding-left:1%;
    color:#596b59;
   
}

#mail-form input:focus, #mail-fomr textarea:focus{
    border:1px solid #c9fbc9;


}

#mail-form textarea{
   resize:none;
   height:150px;
   display:inline;
  

}

 fieldset > p{
      margin:0 0 1% 100px;
     
   }
   
.warning-message{
   color:	#E87600;
   border:2px solid #E87600;
   }
   
.warning{
   color:	#E87600;
   
   
}
.c {
    padding-left:30%;

}

#mail-form input[type="submit"]{
    width:21%;
    margin-right:13.5%;
    margin-top:1.5%;
    float:right;


}
.button {
   border-top: 1px solid #c9fbc9;
   background: #c9fbc9;
   background: -webkit-gradient(linear, left top, left bottom, from(#c9fbc9), to(#c9fbc9));
   background: -webkit-linear-gradient(top, #c9fbc9, #c9fbc9);
   background: -moz-linear-gradient(top, #c9fbc9, #c9fbc9);
   background: -ms-linear-gradient(top, #c9fbc9, #c9fbc9);
   background: -o-linear-gradient(top, #c9fbc9, #c9fbc9); 
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;   
   text-shadow: rgba(0,0,0,.4) 0 1px 0; 
   color: #596b59;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   border: none;
   }
#mail-form .button:hover {
   border-top-color: #596b59;
   background: #596b59;
   color: #fff;
   }
.button:active {
   border-top-color: #596b59;
   background: #1b435e;
   color: #fff;
   }



#ok-teade p{
    text-align:center;
    color: green;
    font-weight:bold;
  
    
  
}





/*--- FORM END---*/
/*------------------------------------*\
    =CHEATSHEET -spikker
\*------------------------------------*/
.pgtr-cont {
  position: relative;
	width: 100%;
	height:500px;
	border:1px solid red;
  -webkit-perspective: 1000;
	-moz-perspective: 1000px ;
	perspective: 1000px;
	/*-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;   */
 
   

}  


.page {
   position:absolute;
   width:100%;
   height:100%;
   border: 1px solid green;
 -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
     -webkit-backface-visibility: hidden; 

}

.page section{
     position:absolute;
   width:100%;
   height:100%;
    
    

} 
.pgtr-jq{
   position:absolute;
   width:100%;
   height:100%;
     -webkit-transform: rotateY(180deg);
   -webkit-backface-visibility: hidden; 
     background: #ddd;
 }

.v{
   
     -webkit-transform: rotateY(180deg);

}

.v-back{
     
     -webkit-transform: rotateY(-180deg);
}







  


/*.pgtr-jq:hover {
   position: absolute;
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
} */



.back-cont{
    position: relative;
    visibility:hidden;
    bottom:0;
    z-index:10;
}

.vsbl{
    visibility:visible;

}
     
/*.pgtr-current, .vsbl{    */
  
 /* visibility: visible;  */
 
  

/*}*/  

/*.page .pgtr-jq{
    background: #ddd;
  -webkit-transform: rotateY(180deg);

} */
 



.panel{
    min-width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -150%;
    position: absolute;
    background: #000;
    box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
    z-index: 2;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}
.panel:target{
    margin-top: 0%;
    background-color: #ffcb00;  
}

/*.pgtr-css{
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotateFoldBottom .7s both ease;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotateFoldBottom .7s both ease;
	transform-origin: 50% 0%;
	animation: rotateFoldBottom .7s both ease;
	background:#dfe7f2;

} */





@-webkit-keyframes example {
   -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.pgt-jq {
 
	-webkit-animation-name: example;
   -webkit-animation-duration: 6s;
   -webkit-animation-timing-function: ease; /* ease is the default */
   -webkit-animation-delay: 5s;             /* 0 is the default */
   -webkit-animation-iteration-count: 2;    /* 1 is the default */
   -webkit-animation-direction: alternate;  /* normal is the default */
}

.pgt-jq:target{
      background:#ddd;

}



/*--- =CHEATSHEET END---*/
/*------------------------------------*\
    =404
\*------------------------------------*/
.q-cont{
    margin:8% auto 0;  /*80px*/
    text-align:center;

}

.er-code{
   margin-bottom:1.5em;

}
/*--- =404 END---*/

/*------------------------------------*\
    =IPAD
\*------------------------------------*/
.ip-hd{
   position:static;
   float:left;
  
   

}

.ph-hover{
   /*background:  red; */
   z-index:400;


}

/*--- =IPAD END---*/
/*------------------------------------*\
    =$RESPONSIVE
\*------------------------------------*/
/*--- LARGE ---*/

@media only screen and (min-width: 1378px){
       body{ 
       font-size:1.8em; /*24px*/
        
    } 
    .header{
        -webkit-transform: translateZ(0); 
    
    } 
   
    h3{
       font-size:1em;
    
    }

}
 /*--- NORMAL ---*/
@media only screen and (min-width: 961px)and (max-width: 1377px){
        .header{
            -webkit-transform: translateZ(0); 
        
        }
        h3{
       font-size:1em;
    
       }

}
/*--- NARRoW ---*/
@media (min-width: 641px) and (max-width: 960px){
     body{font-size:1em; /*16px*/
          
      } 
      
     .header{
         -webkit-transform: translateZ(0); 
     
     }
     
     h3{
       font-size:0.8em;
      
    
    }
      
     .ex-list li{
       width:50%;
     
     }  
      
     .skills-js{
       margin-top:-30px;
     
     } 
    .skills-list li{
       height:140px;
    
    }
  
    

     
}



/*--- THIN ---*/
@media(min-width: 120px) and (max-width: 640px){


body{
    font-size:1.25em; /* 1.125Make text slightly larger for smaller devices to improve readability. */
	-webkit-text-size-adjust:none;
}


.header{
   position:relative;
     height:2.1em;
    
}
.header-cont{
     position:fixed;
     top:0;
   left:0;
   right:0;
     left:0;
      z-index:3;
      width:100%;
     background-color:#596b59;
      -webkit-transform: translateZ(0); 
       height:2.1em;
        
  }  
h1{

    font-size:1em; 
    display: block; 
    left:0;
   width: 5em;
   height:2.1em;
    text-align:center;
   vertical-align:middle;
   line-height:2.1em; 
   background-color:#596b59;
   
}

h3{
   font-size:0.8em;
  


}  

.mnu {
   
 
   left: auto;
   right: 0;
   display: block;
   width: 5em;
   height:2.1em;
   text-align:center;
    vertical-align:middle;
   line-height:2.1em; 
   cursor: pointer;
   background-color:#dfe7f2;
     color:#596b59; 
}     

 





.nav{
    width:100%;
    padding-right:0;
    height:auto; 
    background-color:#596b59;
    text-align:center;

}


.nav li{
   display:block;
    width:100%;
     
}  

.nav li:nth-child(2){
      position:relative;
    z-index:100; 

}

.expanded, .no-dspl{
  display:none;

}


.wrap{
	width:auto;
	/*margin-top:14%; */
  margin: 10px;
}


.cntct-lst, .cntct-lst2, .grid{
  grid-template-columns: repeat(1, auto);
}

.wide-row{
  grid-row: span 2;
  grid-column: span 2;
}
.cntct-lst2 {
  text-align:center;
}






.skills-list{
   width:auto;
  
  
}
.skills-list li{
   height:120px;

}

.skills-js{
 width:auto;
 font-size:0.8em;

}
h3{
   font-size:0.7em;
}

.hdl-l{
  margin-bottom:4.5%;

}
 #ahhaa{
   margin-bottom:8.5%;

}
#ahhaa p{
  
  width:100%;
  margin-bottom:3.5%;

}
.ex-list li{
  width:100%;
 

}

.ex-list a{
   height:auto;

}
#mail-form{
  
   width:auto;
   margin:0 auto;
   
}

#mail-form label{
   font-size:0.9em;
   width:20%;
   margin-top:1%;
}

#mail-form input, #mail-form textarea{
     width:70%;

}

fieldset > p{
    font-size:0.8em;
     margin-left:0;
     text-align:center;
    width:auto;
   
}

.c{
  padding-left:0;

}

#mail-form input[type="submit"]{
   float:none;
    width:100%;
    margin-bottom:3.5%;
}

.no-mob{
    visibility:hidden;

}
.m-msg{
    visibility:visible;
    text-align:center;
}



.anchr{
  height:3rem;
}


}

@media  (max-width: 320px){

 .mnu{
   width:50%;
 
 }
 
 h1{
   width:50%;
 
 }
 
 .nav{
    width:100%;
    margin-top:2.1em;
    padding-right:0;
    height:auto; 
    background-color:#596b59;
    text-align:center;

}

h3{
  font-size:0.6em;

}


/*label{
  
   display:block;
   width:100%;
   float:left;
   border:1px solid red;

}
input{
   float:left;

} */


}