html,
body{
    font-family: sofia-pro, sans-serif;
font-style: normal;
font-weight: 400;
}


hr{
    width: 90%;
    height: 70px;
    border-width: thick;
    border-color: black;
   
    margin-bottom: -10vh;
}


.navbar-nav>li>a{
    color:#000;
}

.style{
    text-align: center;
    text-decoration-color: none;
    color: #fff;
    
}


.white {
    background: #fff;
    text-align: center center;
    padding-top: 15vh;
    padding-right: 5vw;
    
}

.logo{
        padding: 10px;
        padding-left: 30px;
    
}
.logo a {
    
    text-decoration: none;
    color:#000;
font-weight: 400;
font-size: 28px;
}


.icon-bar {
    background: #000;
    
}

.navbar-toggle {
    position: absolute;
    top: -3px;
    left: 80vw;
    
   
     
}


.navbar-nav {
width: 100%;
text-align:right;
font-weight: 300;
font-size: 18px;
position: absolute;
    z-index: 2;
    padding-right: 50px;
    
}


@media screen and (min-width: 299px) and (max-width: 799px) {
    .navbar-nav {
        position:relative;
           }   
    
          }  
.navbar-nav > li {
 float: none;
 display: inline-block;
}

.pic_pencil {
    background: #000;
    width: 100%;
    float: none;
    display: inline-block;
    height: auto;
    
}

.about {
font-weight: 300;
font-size: 30px;
line-height: 44px;
margin-top: 28vh;
margin-bottom: : 50vh;

}





.name h1 {
  
font-weight: 900;
font-size: 30vh;
color: #000;
text-align: center;
padding-top: 30vh;
padding-bottom: 30vh;
        
}

/*
   @media screen and (max-width: 299px) {
    .name h1 {
    font-size: 10vh;
    text-align: center;
    
    }
}
*/

@media screen and (min-width: 299px) and (max-width: 799px) {
    .name h1 {
        font-size: 10vh;
        text-align: center;
        padding-top: 30vh;
        padding-bottom: 30vh;
           }   
    
          }  


/*
@media screen and (min-width: 800px) {
    .name h1 {
        font-size: 10vh;
      
    }
}
*/




.koteret { 
text-decoration: none;
font-weight: 900;
font-size: 20px;
    color: #000;
margin: 0px;
padding: 0px;


}

.koteretmishnit {
 text-decoration: none;
 font-weight: 100;
font-size: 15px;
    color: #000;
    margin: 0px;
    padding: 0px;
    padding-top:2%;
 
}

.diveder {
    height: 200px;
}

@media screen and (min-width: 299px) and (max-width: 799px) {
    .diveder {
         height: 30px;
           }   
    
          }  




.firstimg {
/*    margin-bottom: 200px;*/
        overflow: hidden;
   -webkit-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

}

.firstimg img{
       -webkit-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.firstimg:hover{
    transform: scale(.97); 
}

.firstimg:hover img{
    transform: scale(1.1); 
}



.skills{
font-weight: 100;
font-size: 30px;
line-height: 48px;
padding-top: 28vh;
padding-bottom: 28vh;

}


.talk {
font-weight: 900;
font-size: 25vh;
color: #000;
    padding-bottom: 10vh;
    text-decoration: none;
    
}

@media screen and (min-width: 299px) and (max-width: 799px) {
    .talk {
        font-size: 100px;
        
           }   
    
          }  


.opencoteret {
    color: #000;
    font-size: 8vw;
    font-weight: 900; 
    padding-top: 20vh;
}


@media screen and (min-width: 299px) and (max-width: 799px) {
    .opencoteret {
        color: #000;
    font-size: 18vw;
    font-weight: 900; 
    padding-top: 20vh;
        
           }   
    
          } 

.bottemcotert {
    color: #000;
    font-size: 4vh;
    font-weight: 200; 
    padding-bottom: 20vh;
    
}

.imglarg {
    width: 100%;
}

.website {
    background: #f1f5f8;
    height: 380vh;
}



@media screen and (min-width: 299px) and (max-width: 799px) {
    .website {
        height:inherit;
        
           }   
    
          } 




.myname {
    font-size: 100px;
    font-weight: 900;
    letter-spacing: 0px;
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
    
    
}

.letstalk{
    position: relative;

}

.letstalk a:hover{
    text-decoration: none;
}

.neck {
    position: absolute;
    left: 53%;
    top: 20%;
    z-index: 1;
    opacity: 0.9;
}

@media screen and (min-width: 299px) and (max-width: 799px) {
    .neck {
/*        position: absolute;*/
    left: 5%;
    top: 10%;
    z-index: 1;
    opacity: 0.2;
        
           }   
    
          }  


.oneeye {
    position: absolute;
    left: 27%;
    top: 20%;
    z-index: 1;
    opacity: 0.9;
    
}


@media screen and (min-width: 299px) and (max-width: 799px) {
    .oneeye {
        position: absolute;
    left: 26%;
    top: 14%;
    z-index: 1;
    opacity: 0.5;
        
           }   
    
          }  

.downeye {
    position: absolute;
    left: 18%;
    top: -8%;
    z-index: 1;
    opacity: 0.9;
}

@media screen and (min-width: 299px) and (max-width: 799px) {
    .downeye {
        position: absolute;
    left: 12%;
    top: 8%;
    z-index: 1;
    opacity: 0.5;
        
           }   
    
          }  


.mouth {
   position: absolute;
    left: 18.95%;
    top: 25%;
    z-index: 1; 
    opacity: 0.9;
}

@media screen and (min-width: 299px) and (max-width: 799px) {
    .mouth {
        position: absolute;
    left: 12%;
    top: 25%;
    z-index: 1;
    opacity: 0.9;
        
           }   
    
          }  

.othereye {
    position: absolute;
    left: 53.25%;
    top: 90.2%;
    z-index: 1;
    opacity: 0.9;
}


@media screen and (min-width: 299px) and (max-width: 799px) {
    .othereye {
/*        position: absolute;*/
    left: 10%;
    top: 33%;
    z-index: 1;
    opacity: 0.2;
        
           }   
    
          }  


.ohana {
    font-weight: 200;
    font-size: 50px;
    letter-spacing:3px;
}

.fullname {
    font-weight: 100;
    font-size: 30px;
 
}


@media screen and (min-width: 299px) and (max-width: 799px) {
    .fullname {
        font-size: 18px;
        line-height: 25px;
        
           }   
    
          }  



.mouthonly {
    position: absolute;
    right: 0;
    top:60%;
  
    box-shadow: 30PX;
}

.myname_a {
    position: absolute;
    z-index: 1;
    font-size: 100px;
    font-weight: 900;
    letter-spacing: 0px;
    
/*    padding-top: 10%;*/
    
}

.strips {
    position: absolute;
    left: 40%;
    top:0%;
    z-index: 1; 
    opacity: 0.9;
}




.ux {
    font-weight: 100;
}

.good {
    font-weight:900;
}


@media screen and (min-width: 299px) and (max-width: 799px) {
    .good {
        font-size: 18px;
        line-height: 90%;
        
           }   
    
          }  

.end {
    padding-bottom: 100px;
}

@media screen and (min-width: 299px) and (max-width: 799px) {
    .end {
        padding-top: 20vh;
        
           }   
    
          }  


.case {
    font-size: 20px;
    font-weight: 100;
    padding: 0px;
    margin: :0px;
    padding-top: 10vh;
    padding-bottom: 10vh;
    
}



@media screen and (min-width: 299px) and (max-width: 799px) {
   .case {
       
     padding-top: 0px;
    padding-bottom: 0px;
        
           }   
    
          }  



.case_h3 {
    padding: 0px;
    margin: 0px;
    padding-top: 10vh;
    padding-bottom: 10vh;
   
    }


@media screen and (min-width: 299px) and (max-width: 799px) {
   .case_h3 {
       
    padding-left: 6%;
       height: inherit;
    
    padding-bottom: 3vh;
        
           }   
    
          }  



.casebold {
    padding: 0px;
    margin: 0px;
    font-size: 40px;
    font-weight: 900;
    line-height: 0.8;
}

@media screen and (min-width: 299px) and (max-width: 799px){
    .casebold{
        font-size: 5vh;
    font-weight: 900;
    line-height: 0.8;
        
    }
}



.pad_down {
    margin: 0px;
    padding: 0px;
    margin-top: 20vh;
    margin-bottom:  20vh;
    
}

@media screen and (min-width: 299px) and (max-width: 799px) {
   .pad_down {
       
    margin-top: 10vh;
    margin-bottom:  10vh;
        
           }   
    
          }  


.botemckoteret_a {
    font-size: 20px;
    font-weight: 100;
    padding: 0px;
    margin: :0px;
    padding-bottom: 40px;
    
}




.move {
    top: 90%
}

.index {
    
    position: absolute;
    z-index: 1px;
    right: -63%;
/*   bottom:70%;*/
    top:30%;
}


@media screen and (min-width: 299px) and (max-width: 799px){
    .index{
        position: relative;
        right: auto;
        top: 20px;
    }
}






.left {
    float: left;
}

.clearfix:after {
    display: table;
    clear:both;
    content:'';
    
}

.absulute {
    position: absolute;
    z-index: 1px;
    bottom: -110%;
    right: 50%;
    
}

.gap {
     margin-bottom: 120px;
}






@media screen and (min-width: 299px) and (max-width: 799px){
    .gap{
        margin-bottom: 20px;
    }
}

.casebold_a {
    padding: 0px;
    margin: 0px;
    font-size: 40px;
    font-weight: 900;
    line-height: 0.8;
}


@media screen and (min-width: 299px) and (max-width: 799px){
    .casebold_a{
        font-size: 5vh;
    font-weight: 900;
    line-height: 0.8;
    }
}


.noaroatet {
    
  -webkit-animation-name: noaroatet;
  animation-name: noaroatet;
}

@-webkit-keyframes noaroatet {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
}

.paar {
     height: 30%;
}

.NEXT {
     padding: 0px;
    margin: 0px;
    font-size: 10px;
    font-weight: 400;
    line-height: 0.8;
}

.all {
     padding: 0px;
    margin: 0px;
    font-size: 12px;
    font-weight: 400;
    padding-left: 70%;
   
}


    

.boxshadow{
     
    position: relative;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
}

/* Make the image fit the box */
#boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
}

#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}
}




@keyframes neck {
  0% { transform: translateY(0);}
0%  {transform: translateY(0);}   
}
    
 @-webkit-keyframes neck {
  100% { transform: translateY(-10%);}
100%  { transform: translateY(-10%);}   
}   
  
   
    
.neck{

animation: neck 3s infinite alternate ease-in-out;
-webkit-animation: neck 3s infinite alternate ease-in-out;
    animation-name: neck  ;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: initial;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: initial;
    animation-play-state: initial;
    }



@keyframes mouthonly {
  0%
  {
    right: 0;
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }
  45%
  {
    right: 10%;
    box-shadow: 0 0 0 rgba(255,255,255,0);
    transform: scaleX(1) ;
  }
    50%{
    right: 12%;
    box-shadow: 0 0 0 rgba(255,255,255,0);
    transform: scaleX(1) ;
    }
    55%{
    right: 10%;
    box-shadow: 0 0 0 rgba(255,255,255,0);
    transform: scaleX(1) ;
    }
	100%
  {
    right: 0px;
    box-shadow: 0 0 0 rgba(255,255,255,0);
    transform: scaleX(1) ;
  }
}


 .mouthonly {
    animation: mouthonly 8s ease-in-out infinite;
  }





.black {
    position: fixed;
    top:0;
    background: rgba(255,255,255,0.5);
    height: 50px;
    width: 100%;
    z-index: 1000;
}





@media screen and(min-width:768px)and(max-width:992px){
    .black{
        position:fixed;
    }
}






@media screen and(min-width:768px)and(max-width:992px){
    .infotext{
        color:#fff;
    }
}



.middle {
    margin:0 auto;
}

.website_a {
    
    background: #f1f5f8;
    height: 250vh;

}

.website_b {
    background: #f1f5f8;
    height: 250vh;

}

.about_1 {
font-weight: 300;
font-size: 30px;
line-height: 44px;
padding-top: 30vh;
margin-bottom: : 35vh;
}

@media screen and (min-width: 299px) and (max-width: 799px){
    .about_1 {
        padding-top: 10vh;
margin-bottom: : 10vh;
    }
}





.about_2 {
    font-weight: 300;
font-size: 30px;
line-height: 44px;
padding-top: 35vh;
padding-bottom: 35vh;

}

.cover {
    background: center center;
    background-size: cover; 
}

.case_1 {
    font-size: 20px;
    font-weight: 100;
    padding: 0px;
    margin: :0px;
    
}



.gap_1 {
    margin-bottom: 60px;
}


@media screen and (min-width: 299px) and (max-width: 799px) {
    .gap_1 {
        margin-top: 5vh;
    margin-bottom:  5vh;
        
           }   
    
          }  



.gap_2 {
    margin-top: 20vh;
    margin-bottom: 10vh;
}

.bottemcotert_1 {
    color: #000;
    font-size: 3vh;
    font-weight: 200; 
    padding-bottom: 20vh;
    padding-left: 1%;
}

@media screen and (min-width: 299px) and (max-width: 799px) {
    .bottemcotert_1 {
        padding-bottom: 1vh;
    padding-left: 0%;
        
           }   
    
          }  

.website_3 {
     background: #f1f5f8;
    height: 350vh;
}








.opencoteret_1 {
    color: #000;
    font-size: 6.5vw;
    font-weight: 900; 
    padding-top: 20vh;
}

@media screen and (min-width: 299px) and (max-width: 799px) {
    .opencoteret_1 {
       font-size: 11vh;
    font-weight: 900; 
    padding-top: 20vh;
        text-align: center;
        
           }   
    
          }  

.img {
    background-size: cover;
}

.website_color {
    
    background: #f1f5f8;
    height: 680vh;
}


.casebold_b {
    padding: 0px;
    margin: 0px;
    font-size: 100px;
    font-weight: 900;
    line-height: 0.8;
}

@media screen and (min-width: 299px) and (max-width: 799px) {
    .casebold_b {
        font-size: 50px;
        
           }   
    
          }  


.littel_right {
    margin-left:1%;
}

/*
.gap_up {
    margin-top: 5%;
}
*/

@media screen and (min-width: 299px) and (max-width: 799px) {
    .gap_up {
        margin-top:inherit;
        
           }   
    
          }  



.gap-left {
    margin-right: 5vw;
}


@media only screen and (max-width: 320px) {

   body { 
      font-size: 14px; 
   }

}



@media screen and (min-width: 299px) and (max-width: 799px) {
    .sticky-kit {
        position: 0px;
        
           }   
    
          }



.noaohana1 {
    font-size: 40px;
    font-weight: 900;
    line-height: 0.8;
    text-align: center;
}

.noaohana2 {
    font-size: 20px;
    font-weight: 200;
    line-height: 0.8;
    text-align: center;
}

.section_Title {
    
	font-size: 3vh;
	font-weight: 500;
    color: darkgray;
    
    

}

.section_Content {
    font-weight: 900;
    font-size: 2vh;
}

.sub_Details {
    font-weight: 100;
    font-size: 1.5vh;
}

.link {
    
    list-style-type:disc;
    font-size: 15px;
    text-decoration: none;
    
}

.cv {
   
margin: 0;
padding: 0;
border: 2px solid #000000;

}

















.modal-dialog {
      border: 10px solid #000000;
}





.details a {
    font-size: 14px;
    color: black;
    font-weight: 400;
    padding: 0px;
    margin: 0px;
}

.detail_space {
   margin-top:4vh;
    margin-bottom: 5vh;
    text-align:center;
}












.fa-facebook {
    margin-right:15px;
}

.fa-behance {
     margin-right:15px;
}





.align {
    text-align: right;
    margin-left: -29px;
}

.download {
    color: black;
}

.secret {
    font-weight: 600;
    font-size: 8vh;
    text-align: center;
}




.website_shaked {
    
     background: #f1f5f8;
    height: 350vh;
}

@media screen and (min-width: 299px) and (max-width: 799px) {
    .website_shaked  {
        height: inherit;
        
           }   
    
          }



.website_arta {
    background: #f1f5f8;
    height:inherit;
}

.gapupdown {
     margin-bottom: 1vh;
    margin-top: 1vh:
}