/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}

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

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


body { 

	margin: 0px;
	font-family: "Chivo", sans-serif;
	font-size: .9em;
	letter-spacing: -.25px;
	-webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

}

/*------Header------*/

header {
	position: fixed;
	top:0;
	/*margin: 0;*/
	width: 100%;
	height: 125px;
	font-size: 200%;
	background-color: rgba(255,255,255,.75) ;
	border-bottom: 1px solid black;
	z-index: 500;
	/*margin: 25px 0px 0px 25px;*/
}

h1 {
	display:inline-block;
	font-size: 100%;
	margin: 25px 0px 0px 25px;
}

a {
	color:inherit;
	text-decoration: inherit;
}

#eng-name {
	display: inline-block;
	z-index: 1
}

a:hover #eng-name{
	display: none;
}

 #rus-name {
	display: none;
}

a:hover #rus-name {
	display: inline-block;
	z-index: 2
}

nav {
	float:right;
	display:inline-block;
	margin: 25px 25px 0px 0px;
}

nav li {
	display:inline;
	margin-left: 40px;
	cursor: pointer;
}

nav li:hover {

	text-decoration: underline;
	color: blue;

}

/*------Content------*/

.wrapper {

	overflow: auto;
	margin: 125px 25px 0px 25px;
}

p {
	/*font-size: 100%;*/
	line-height: 150%;
}

#reel {

	position: fixed;
	right: -50%;
	z-index: 0;
	width: 0%;
	height: 100%;
	/*padding: 150px 25px 25px 25px;*/
	font-size: 150%;
	overflow: scroll;
	background-color: rgba(255,255,255,.80);
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	/*background-color: black;*/

}

#reel.reelOn {

	right:0;
	width: 100%;
	height:100%;

}

iframe {

	position: relative;
    top:0;
    left: 0;
    width: 100%;
    height: 80%;

}

.project-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	z-index: 0;
	margin-top: 25px;
	/*position: absolute;*/
}

.project-thumbnail {
	display: inline;
	/*position: relative;*/ /*turn this on if positioning gets fucked up*/
	width:32.25%;
	margin-bottom: 20px;
	cursor: pointer;
	transition: all .1s ease-in-out;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
}

.project-thumbnail:hover {
	text-indent: 5px;
	color: blue;
}

.thumbnail-image {
	display: block;
	max-width: 100%;
    max-height: 100%;
	/*max-height: 63%*/
	height: auto;
}

.thumbnail-content {
	padding-bottom: 63%;
	background-position: center center;
	background-size: cover;
	font-size: 150%;
	font-weight: 700;
	text-align: center;
}

.thumbnail-title {
	margin-top: 6px;
	display: block;
	font-size: 125%;
	/*font-size: 1.5vw; */
	white-space:nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.project-thumbnail.inactive {
	pointer-events: none;
	margin:0;
}

/*------Project View------*/

.invisible {
	display: none;
	opacity:0;
}

.project-view {
	display: none;
	/*opacity: 0;*/
	/*transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;*/
}

.view-on {
	display: block;
}

.hero-box {
	z-index: 100;
	width: 100%;
}

.hero-image {
	display: block;
	max-width: 100%;
    max-height: 100%;
	/*max-height: 63%*/
	margin: 0 auto;
	height: auto;
}

.description-box {
	
	margin: 50px 20% 50px 20%;
	font-size: 150%;

}

.project-title {
	display: inline-block; /*new*/
	float: left; /*new*/
	width:40%; /*new*/
	/*font-size: 150%; */
	font-weight: 700;
}

.project-description {
	display: inline-block; 
	float: right;
	width: 60%;
	/*font-size: 125%;*/
	color: #939393;
	margin-bottom: 50px;
}

.detail-box {
	width:60%;
	margin:0 20% 15px 20%;
}

.caption {
	margin-top: 3px;
	font-size: 100%;
	color: #939393;
}

.back-button {
	position: fixed;
    z-index: 20;
    bottom: 53px;
    left: 6%;
    font-size: 125%;
    cursor: pointer;
    transition: all .1s ease-in-out;
   -moz-transition: all .1s ease-in-out;
   -webkit-transition: all .1s ease-in-out;
}

.back-button:hover {
	color: blue;
	text-indent: -5px;
}

.copyright {
	display:block;
	margin: 75px 20% 0 20%;
	text-align: center;
	color: #939393;
	opacity: .5;
	font-size: 125%;
}

/*------About------*/

#about p {
	margin-bottom: 25px;
}

#about a {
/* 	position: relative; */
    	display: inline-block;
    	border-bottom: 2px solid blue;
/*    	padding-bottom: -20px; */
    	border-color: rgb(140,140,140);
}

#about {

	position: fixed;
	right: -50%;
	z-index: 25;
	width: 0%;
	height: 100%;
	padding: 150px 25px 25px 25px;
	border-left: 1px solid black;
	font-size: 150%;
	margin-top: -125px;
	overflow: scroll;
	background-color: rgb(255,255,255);
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;

}

#about::-webkit-scrollbar {
	
	display: none;

}

#about.aboutOn {

	right:0;
	width: 50%;

}

/*Exponent Text ('17)*/
sup {

	/*font-size:.3em;*/
	left:100px;

}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 2px solid blue;
    padding-bottom: -20px;
    border-color: rgb(140,140,140);
    opacity: 1;
}

.tooltip .tooltiptext {

    visibility: hidden;
    width: 140px;
    background-color: white;
    color: blue;
    text-align: center;
    padding: 5px 7px;
    border: 1px solid black;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -70px;
    opacity: 0;
    font-size: 70%;
    line-height: 115%

}

.tooltip:hover .tooltiptext {

    visibility: visible;
    opacity: 1;

}

.tooltip .tooltiptext.diamonds{

	background-image: url("../textures/diamonds.jpg");
	background-size: 166px 133px;
	width: 166px;
	height: 133px;
	padding: 0;

}

.tooltip .tooltiptext.ai{

	background-image: url("../textures/ai.jpg");
	background-size: 166px 133px;
	width: 166px;
	height: 133px;
	padding: 0;

}

.tooltip .tooltiptext.media{

	background-image: url("../textures/media.jpg");
	background-size: 166px 133px;
	width: 166px;
	height: 133px;
	padding: 0;

}

.close-button {

	z-index: 20;
    margin-bottom: 25px;
    float: right;
    cursor: pointer;
    transition: all .1s ease-in-out;
   -moz-transition: all .1s ease-in-out;
   -webkit-transition: all .1s ease-in-out;

}

.close-button:hover {

	color: blue;
	text-indent: -5px;

}

/*------Footer------*/

footer {
	margin-top: 50px;
	padding: 25px 0 25px 0;
	border-top: 1px solid black;
	text-align: center;
	font-size: 125%;
	/*line-height: 150%;*/
}

/*------Normal Screen------*/

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

	.project-thumbnail {
		/*display: inline;*/
		width:49%;
	}

	.description-box {
		font-size: 125%;
	}

}

/*------Tablet------*/

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


	.description-box {
		margin: 50px 0 50px 0;
		/*text-align: center;*/
	}

	.project-title {
		display: block;
		float:none;
		width: 60%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;
		font-size: 150%; 
	}

	.project-description {
		display: block;
		float: none;
		width: 60%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 60px
	}

/*	#about.aboutOn {

		width: 100%;

	}*/

}

/*------Mobile------*/

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

	body {
		/*font-size: 1em;*/
	}

	.wrapper {

		overflow: auto;
		margin: 125px 15px 0px 15px;
	}

	header {
		/*padding-bottom: 25px;*/
		width: 100%;
		font-size: 150%;
		height: 90px;
	}

	h1 {
		display: block;
		font-weight: 700;
		margin: 12.5px 25px 0px 15px;
	}

	nav {
		float: none;
		display:block;
		margin: 10px 25px 0 15px;
	}

	nav li {
		float:left;
		margin: 0;
		/*display:block;*/
	}

	.about-button, .projects-button {
		margin-left: 15px;
	}

	#about {
		letter-spacing: 0px;
		font-size: 115%;
		padding: 105px 15px 0 15px;
		border-left: none;
	}

	#about.aboutOn {

		width: 100%;

	}

	.project-gallery {

		overflow: scroll;
		margin-top: 0;

	}

	.project-thumbnail {

		width:100%;
		margin-bottom: 15px;

	}

	.thumbnail-title {

		/*font-size: 125%;*/

	}

	.description-box {

		margin: 30px 0 30px 0;
		/*font-size: 115%;*/

	}

	.project-title, .project-description {

		width:100%;
		margin-bottom: 25px;

	}

	.detail-box {
		width:100%;
		margin:0 0 15px 0;
	}

	.caption {
		font-size: 100%;
	}

	.back-button {
	    bottom: 25px;
	    left: 25px;
	}

	.back-button:hover {
		color: initial;
		text-indent: 0;
	}

	.back-button:active {
		color: blue;
/*		text-indent: -5px;*/
	}

	.copyright {

		margin-top: 25px;
		font-size: 100%;

	}

	footer {

		margin-top: 25px;
		font-size: 100%;

	}

}