@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

/* @font-face {
  font-family: 'demo-icomoon';
  src:url('/fonts/demo-icomoon.eot');
  src:url('/fonts/demo-icomoon.eot?#iefix') format('embedded-opentype'),
    url('/fonts/demo-icomoon.woff') format('woff'),
    url('/fonts/demo-icomoon.ttf') format('truetype'),
    url('/fonts/demo-icomoon.svg#demo-icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
} */

[data-icon]:before {
  font-family: 'demo-icomoon';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.slidePageInFromLeft{
  animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;
  }
.openpage{ 
  animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
}
.slidePageBackLeft{
  opacity:1; 
  left:0;
  animation: slidePageBackLeft .8s ease-out 1 normal forwards;
}
.slidePageLeft{
  opacity:1;
  transform: rotateY(0) translateZ(0) ; 
  animation:slidePageLeft .8s ease-out 1 normal forwards;
}
.fadeOutback{
  animation: fadeOutBack 0.3s ease-out 1 normal forwards;
}
.fadeInForward-1, .fadeInForward-2, .fadeInForward-3 {
  opacity:0;
  transform: translateZ(-5em) scale(0.75);
  animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
}
.fadeInForward-2{
  animation-delay: .55s;
}
.fadeInForward-3{
  animation-delay: .7s;
}


@keyframes fadeOutBack{
  0%{transform: translateX(-2em) scale(1); opacity:1;}
  70% {transform: translateZ(-5em) scale(0.6); opacity:0.5;}
  95% {transform: translateZ(-5em) scale(0.6); opacity:0.5;}
  100% {transform: translateZ(-5em) scale(0); opacity:0;}
}

@keyframes fadeInForward{
  0%{transform: translateZ(-5em) scale(0); opacity:0;}
  100% {transform: translateZ(0) scale(1); opacity:1;}
}

@keyframes rotatePageInFromRight{
  0% {transform:rotateY(-90deg) translateZ(5em);opacity:0}
  30%{opacity:1}
  100%{transform: rotateY(0deg) translateZ(0) ; opacity:1}
}

@keyframes slidePageLeft{
  0%{left:0; transform: rotateY(0deg) translateZ(0) ; opacity:1}
  70%{opacity:1;}
  100%{opacity:0; left:-150%; transform: rotateY(0deg)}
}

@keyframes slidePageInFromLeft{
  0%{opacity:0; }
  30%{opacity:1}
  100%{opacity:1; left:0;}
}

@keyframes slidePageBackLeft{
  0%{opacity:1; left:0; transform: scale(0.95);}
  10%{transform: scale(0.9);}
  70%{opacity:1;}
  100%{opacity:0; left:-150%;}
}

/*======================= media queries =======================*/

@media screen and (min-width: 64em){
  
  @keyframes fadeInForward{
    80%{opacity:0.9;}
    100% {transform: translateZ(0) scale(1) translateX(-2em); opacity:1;}
  }

}
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
*{
  box-sizing: border-box;
  margin:0;
  padding:0;
}
.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

html{
  height:100%; 
  overflow-y:scroll;
  overflow-x:hidden;
}
body{
  width:100%;
  height:100%;
  line-height:1.5;
  font-family:'Lato', sans-serif;
  font-weight:300;
  font-size:16px;
);

}
ul{
  list-style-type: none;
}
.wrapper{
  background-size:cover;
  padding:4em .5em; 
  width:100%; 
  overflow:hidden;
  perspective:3300px;
  position:relative;
  border-bottom:1px solid #eee;
}
.dashboard{
  margin:0 auto; 
  width:100%;
  padding:1em;
}
.col1, .col2, .col3{
  width:99%; 
  margin:1em auto;
}

.page{
  width:0; 
  width:100%;
  height:100%;
  color:white;
  text-align:center;
  font-size:3em;
  font-weight:300;
  position:absolute;
  right:0;
  top:0;
  opacity:0;
  transform-origin: 100% 0%; 
  transform:rotateY(-90deg) translateZ(5em);
}

.page-title {
  margin-top:1em; 
  font-weight:100; 
  font-size:2.5em;
}
.close-button{
  font-size:1em;
  width:1em; 
  height:1em; 
  position:absolute; 
  top:1.25em; 
  right:1.25em; 
  cursor:pointer; 
  border:1px solid white;
  line-height:.8em;
  text-align:center;
}

.big, .small{ 
  float:left; 
  margin:0 auto 1%; 
  color:white;
  font-size:2em;
  text-align:center; 
  height:4.5em; 
  font-weight:300;
  overflow:hidden;
  padding:.75em 1em;
  cursor:pointer;
  transition:all 0.3s ease-out;
}
.big:hover, .small:hover{
  background:white;
}
.big{
  width:100%; 
}
.small{
  width:49%;
  margin-right:2%;
}
.big p {
  line-height:1.5;
  margin-top:.6em;
  padding:0 .3em;
  transition:all 0.3s ease-out;
}
.small.last{
  margin-right:0;
}

/*icon fonts styles*/

.icon-font{
  font-size:2em;
  line-height:1.6 !important;
}
.big .icon-font{
  float:left;
}
.lock-thumb .icon-font{
  margin-left:25%;
}

/*styling the boxes/thumbs*/

.weather-thumb {background:#F2854C;}
.weather-thumb:hover {color:#F2854C;}

.paint-thumb {background:#85A9C3;}
.paint-thumb:hover {color:#85A9C3;}

.cpanel-thumb {background:#83A8C3;}
.cpanel-thumb:hover {color:#83A8C3;}

.games-thumb {background:#04ACAD;}
.games-thumb:hover {color:#04ACAD;}

.news-thumb, .calculator-thumb {background:#EBB741;}
.news-thumb:hover, .calculator-thumb:hover {color:#EBB741;}

.videos-thumb, .code-thumb{background:#BEA881;}
.videos-thumb:hover, .code-thumb:hover{color:#BEA881;}

.lock-thumb, .alarm-thumb {background:#EF3A5B;}
.lock-thumb:hover, .alarm-thumb:hover {color:#EF3A5B;}

.git-thumb, .favorites-thumb, .notes-thumb {background:#385E82;}
.git-thumb:hover, .favorites-thumb:hover, .notes-thumb:hover {color:#385E82;}

.photos-thumb {background:#BEA881;}
.photos-thumb:hover {color:#BEA881;}

.calendar-thumb, .organizer-thumb {background:#8BBA30;}
.calendar-thumb:hover, .organizer-thumb:hover {color:#8BBA30;}

.todos-thumb {background:#2FB1BE;}
.todos-thumb:hover {color:#2FB1BE;}

.todos-thumb p{
  margin-top:.8em;
}
.todos-thumb-span{
  display:block;
  margin-top:1.5em;
}
.todos-thumb:hover p{
  margin-top:-2.7em;
}

/*styling log in screen*/

.login-screen{
  background:#EF3A5B;
  height:100%; 
  width:100%;
  position:absolute; 
  top:0;
  left:-150%;
  color:white;
  text-align:center;
  font-weight:300;
  z-index:1;
}
  .login-screen p{
    font-size:6em;
    margin-top:2em;
    font-weight:100;
  }
  .myform{
    margin:2em auto;
    width:300px;
  }

    input{
      display:block;
      line-height:40px;
      padding:0 10px; 
      width:260px;
      height:40px;
      float:left;
    }
    #unlock-button{
      background:black;
      color:white;
      font-size:1em;
      float:left;
      border:0;
      height:2.5em; 
      width:2.5em;
      padding:.3125em;
      text-align:center;
      cursor:pointer;
      border-radius:2px;
    }
    
    
  /*styling for heading and the info on the front page*/
  .profilepic{
	  position:relative;
    bottom: 50px;
    float:right;
  }
  
  .profilepic img{
  	width: 15%;
  	position:relative;
  	float:right;
  	
  }
  
	.centerdiv {
		width: 50%;
		margin: 0 auto;
		position: relative;
		z-index: -1; }

	.heading {
		font-size: 3.5em;
		font-weight: 100; }

	.subheading {
		font-size: 20px; }
		
#topbtn{
  display:none;
	position:fixed;
	right:10px;
	border: 1px solid gray;
	top:630px;
	width:70px;
	cursor:pointer;	
}

#topbtn:hover{
	background-color:gray;
}
  

.btmftr{
  text-align:center;
  bottom:2%;
}


/*styling the pages*/
.page.random-page{
  background:#DFD4C1;
  z-index:100;
}


.resume-page {
  background: #DFD4C1; }

#resume {
  max-width: 80%; }


.ebay-page {
  background: #00ff00; }


.page.contact-page{
  background:#F2854C;
  z-index:100;
}

.contact-page p{
  font-size:24px;
}
.page.todos{
  background:#2FB1BE;
  z-index:100;
}
  .todos ul{
    margin: 50px auto;
    width:60%;
    list-style-type: none;
  }
    .todos li{
      padding:5px 10px;
      text-align:left;
      background:white;
      border-left:5px solid #EF3A5B;
      color:#444;
      font-weight:300;
      font-size:0.5em;
      margin-bottom:15px;
    }
      .delete-button{
        font-size:0.7em;
        float:right;
        line-height:25px;
      }


/*======================= media queries =======================*/



@media all and (min-width: 64em){
  .col1,.col2,.col3{
    float:left;
    margin-right:.5%;
    left:15.5%;
    position: relative;
    width:32%;
  }
  
.col3{
	width: 64.5%;
	left: 232px;
	top: -30px;
}
	
	
  .col1{margin-left:2em;}
  

}

@media handheld and (min-width: 40em){/*700px*/
  .dashboard{
    position:relative;
  }

}

/*share button */

/* @font-face {
  font-family: 'social';
  src: url('/font/Socialico.ttf'); 
  src: url('/font/codepen/Socialico.ttf')    format('truetype') 
}
 */

.container, .lin, .click{
  box-sizing:  border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-shadow: 0 3px 0 rgba(0,0,0,0.2);
}


.click {
  width: 80px;
  height: 80px;
  position: relative;
  font: 1em/1.0 'social';
color: #fff;
font-size: 80px;
}

.lin {
  color: inherit;
  text-decoration: none;
}

.container {
  margin: 100px auto;
  padding-right:110px;
}

.click > .click{
  position: absolute;
  display: inline-block;
  text-align: center;
  box-shadow: 0 5px 0 rgba(0,0,0,0.1);
}

.container > a {
  position: absolute;
}

.share {

width: 80px;
height: 80px;
padding: 0px;
padding-top: 3px;
background: #2c3034;
line-height: 1em;
z-index: 200;
font-size: 84px;

}

.twitter {
  background: #71a4b6;
  border: 2px solid #6b9daf;
}

.facebook {
  background: #b65b5c;
  border: 2px solid #aa5152;
}

.youtube {
  background: #8c6983;
  border: 2px solid #805d77;
}

.linkedin {
 box-shadow: none;
 background: #5f848e;
 border: 2px solid #547983;
}

.open-sesame .youtube {
  animation: open-bottom 0.5s ease-in-out; 
  animation-fill-mode: forwards;
}

.open-sesame  .facebook {
  animation: open-left 0.5s ease-in-out; 
  animation-fill-mode: forwards;
  animation-delay: 0.5s; 
}

.open-sesame .linkedin {
  animation: open-top 0.5s ease-in-out; 
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

.open-sesame  .twitter {
  animation: open-right 0.5s ease-in-out; 
  animation-fill-mode: forwards;
  animation-delay: 1.5s; 
}


@keyframes open-right {  
  from {  
    left: 0;
  } to {  
    left: 80px;
   }  
}

@keyframes open-bottom {  
  from {  
    top: 0;
  } to {  
    top: 80px;
   }  
}


@keyframes open-left {  
  from {  
    right: 0;
  } to {  
    right: 105px;
   }  
}


@keyframes open-top {  
  from {  
    bottom: 0;
  } to {  
    bottom: 80px;
   }  
}