@font-face{
	font-family:'AlegreyaSans';
	src:url(fonts/alegreya-sans/AlegreyaSans-Thin.otf);
}
@font-face {
    font-family: 'hurme-bold';
    src: url(fonts/HurmeGeometricSans3-Bold.otf);
    font-weight: bold;
}
@font-face{
    font-family: 'hurme-semibold';
    src: url(fonts/HurmeGeometricSans3-SemiBold.otf);
}
@font-face{
    font-family: 'hurme-light';
    src: url(fonts/HurmeGeometricSans3-Light.otf);
}
html, body {
	width:100%;
	height:100%;
}

::-webkit-scrollbar{
	display:none;
}

* {
    -webkit-overflow-scrolling: touch;
}

/* IMAGE & DESC */

.wrapTitle {
	text-align:center;
}

.title {
    display: inline-block;
    font-family:hurme-semibold;
    letter-spacing: -5px;
    font-size:70px;
    width: 535px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #ee0979;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #ff6a00, #ee0979);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #ff6a00, #ee0979); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}

.image{
	border-radius:50%;
	width:280px;
	height:auto;
	left:50vw;
	margin-left:calc(50vw - 140px);
    margin-top:10px;
    padding-bottom: 20px;
}

.desc {
	position:relative;
	background: rgb(238, 238, 238);
    
	height:700px;
	width:100vw;
	min-height:568px;
	margin-top:50px;
}

#hiCont {
    margin: auto;
    margin-top: 20px;
    width: 95%;
    height: 200px;
}

.hi{
	font-size:35px;
	color:#535353;
	font-family:hurme-light;
	font-weight:200;
}
#spec {
    font-family: hurme-semibold;
    background: #ee0979;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #ff6a00, #ee0979);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #ff6a00, #ee0979); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* PROJECTS */
.projTitle {
    font-family: 'hurme-bold';
    font-size: 48px;
    color: #303030;
}
.bracket {
    font-size: 60px;
    -webkit-text-fill-color: #8F8F8F;
    color: #3F3F3F;
}

.titleCont {
    text-align: center;
    height: 100px;
    padding-top: 20px;
}

.display {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.element {
    padding-left: 25px;
    padding-right: 25px;
    
}

.projCont{
    position: relative;
    padding-top: 77.7%;
    border-radius: 10px;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(64,64,64,1);
    -moz-box-shadow: 0px 0px 6px 0px rgba(64,64,64,1);
    box-shadow: 0px 0px 6px 0px rgba(64,64,64,1);
}

.projName {
    font-family: 'hurme-semibold';
    font-size: 28px;
    color: #2C2C2C;
    letter-spacing: -1px;
    line-height: 40px;
}

.projDesc {
    font-family: 'hurme-light';
    font-size: 18px;
    color: #838383;
    margin-top: -15px;
}


/*ROUNDY*/
#roundyCont {
    background-color: #F34E4E;
    display: block;
    position: relative;
}

#roundyProj {
    height: 90%;
    position: absolute;
    float: right;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    z-index: 101;
}

/*BALLS*/
.ball {
   position: absolute;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   background: black;
   -webkit-box-shadow: 0px 0px 8px 0px rgba(64,64,64,1);
   -moz-box-shadow: 0px 0px 8px 0px rgba(64,64,64,1);
   box-shadow: 0px 0px 8px 0px rgba(64,64,64,1);
}
#ball-1 {
    width: 12.96%;
    height: 16.66%;
    top: 9.52%;
    left: 5.55%;
    background: #75E05B;
}
#ball-2 {
    width: 14.81%;
    height: 19.04%;
    top: 71.42%;
    left: 14.81%;
    background: #14817A;
}
#ball-3{
    width: 11.11%;
    height: 14.28%;
    top: 52.38%;
    left: 41.03%;
    background: #E6E647;
}
#ball-4 {
    width: 18.51%;
    height: 23.80%;
    top: 38.09%;
    left: 18.51%;
    background: #C056C0;
}
#ball-5 {
    width: 10.18%;
    height: 13.09%;
    top: 4.76%;
    left: 35.18%;
    background: #F5A845;
}

/*POMODORO*/
#pomodoroCont {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #C771CA;
}
#blur1 {
    position: absolute;
    padding-top: 77.7%;
    width: 100%;
}


#pomImg {
    width: 90%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 0;
    left: 50%;
}



/*WIKIVIEWER*/
#wikiViewer {
    margin-bottom: 50px;
}

#animated {
    position: absolute;
    top: 8%;  bottom: 0;  left: 8%;  right: 0;
    font-family: hurme-light;
    font-size: 24px;
    z-index: 101;
}

.typed-cursor {
    display: none;
}

#wikiSearch {
    width: 90%;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    z-index: -100;
    top: 15px;
}

.wikiScreens {
    position: absolute;
    transform: translate(-50%,-50%);
    width: 80%;
    left: 150%;
}

#wikiScreen1 {
    top: 35%;
}

#wikiScreen2 {
    top:65%;
}

.blurColor {
    position: absolute;
    top: 0;  bottom: 0;  left: 0;  right: 0;
    overflow: hidden;
    padding-top: 77.7%;
    border-radius: 10px;
    z-index: 101;
    background: #FC466B;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #3F5EFB, #FC466B);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #3F5EFB, #FC466B); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    
}

#blurColor1, #blurColor2 {
    opacity: 0;
}

.extBtn{
    opacity: 0;
    position: absolute;
    width: 80px;
    height: 80px;
    line-height: 80px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    z-index: 102;
}
.extBtn:hover {
    background-color: rgba(255, 255, 255, 0.7);
    color: #000000;
}

.lh {
    position: absolute;
    display: inline-block;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

/* CONTACT */
.contact {
	position:relative;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#156ed3+0,b63ac4+100 */
	background: #156ed3; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #156ed3 0%, #b63ac4 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #156ed3 0%,#b63ac4 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #156ed3 0%,#b63ac4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#156ed3', endColorstr='#b63ac4',GradientType=1 ); 
	padding-bottom: 18%;
	width:100%;
}

.contactme {
	margin:0;
	padding-top:40px;
	font-family:'AlegreyaSans';
	font-size:144px;
	color:white;
}

.social {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    margin-top: 50px;
}
.twitter {
	width: 150px;
	height: 75px;
	border-radius:10px;
	border:2px solid white;
	background-color:transparent;
	font-size:30px;
	font-family:"HelveticaNeue-Light";
	font-weight:200;
	color:white;
	text-decoration:none;
}


.facebook {
    margin: 0, 40px, 20px, 40px;
	width: 150px;
	height: 75px;
	border-radius:10px;
	border:2px solid white;
	background-color:transparent;
	font-size:30px;
	font-family:"HelveticaNeue-Light";
	font-weight:200;
	color:white;
}

.twitter:hover, .facebook:hover {
	-moz-transition:background-color 0.2s linear;
	transition:background-color 0.2s linear;
	background-color:white;
	color:black;
}

/*FOOTER*/
.footer {
	height:20px;
	width:100%;
	position:relative;
}

.right {
	position:absolute;
	top:0px;
	left:5px;
}

.wrap {
    width: 540px;
}