@charset "UTF-8";

@font-face {
    font-family: 'gta_Rg';
    src: url('../fonts/gta-webfont.woff2') format('woff2'),
         url('../fonts/gta-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gts_BdIt';
    src: url('../fonts/gts-bold-italic-webfont.woff2') format('woff2'),
         url('../fonts/gts-bold-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gts_MdIt';
    src: url('../fonts/gts-medium-italic-webfont.woff2') format('woff2'),
         url('../fonts/gts-medium-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@keyframes menu-slide {
	0% {
		transform: translateX(40%);
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}

@keyframes link-ul-fade-in {
	0% {
		/*border-bottom: 1px #17365d solid;*/
		border-bottom: 2px solid rgba(23, 54, 93, 0);
	}
	100% {
		border-bottom: 2px solid rgba(23, 54, 93, 1);
	}
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	margin: 20px;
	background-color: #f1f1f1;
}

.main a {
	color: #17365d;
}

.main a:link,
.main a:visited {
	text-decoration: none;
}

.main a:hover,
.main a:visited:hover,
.main a:active,
.main a:visited:active {
	animation: link-ul-fade-in .4s ease-out forwards;
}

.header {
	grid-area: header;
	font-family: 'gta_Rg';

	/*border: 1px solid red;*/
}

.header h1 {
	font-size: 35px;
	font-weight: normal;
	color: #17365d;
}

.header h2 {
	font-size: 20px;
	font-weight: normal;
	color: #f8123e;
}

.projects {
	grid-area: projects;
	justify-self: end;
	text-align: right;
	margin-top: 20px;
	margin-right: 20px;
	/*padding-left: 20px;*/

	/*padding-top: 20px;*/

	/*border: 1px solid blue;*/
}

.projects ul {
	font-family: 'gts_BdIt';
	font-size: 35px;
	list-style: none;
}

/*.projects li:before {
	content: '\2937 \00A0 \00A0';
	color: #17365d;
	font-size: 25px;
}*/

.projects li:first-child:before {
	content: none;
}

.projects li {
	animation: menu-slide 0.9s ease-out forwards;
	animation-fill-mode: both;
	line-height: 1.2;
}

.projects li:nth-child(1) { animation-delay: .1s;  }
.projects li:nth-child(2) { animation-delay: .15s; }
.projects li:nth-child(3) { animation-delay: .2s; /*margin-left: 10px;*/ }
.projects li:nth-child(4) { animation-delay: .25s; /*margin-left: 15px;*/ }
.projects li:nth-child(5) { animation-delay: .3s; /*margin-left: 20px;*/ }
.projects li:nth-child(6) { animation-delay: .35s; /*margin-left: 25px;*/ }
.projects li:nth-child(7) { animation-delay: .4s; /*margin-left: 30px;*/ }
.projects li:nth-child(8) { animation-delay: .45s; /*margin-left: 35px;*/ }
.projects li:nth-child(9) { animation-delay: .5s; /*margin-left: 40px;*/ }
.projects li:nth-child(10) { animation-delay: .55s; /*margin-left: 45px;*/ }
.projects li:nth-child(11) { animation-delay: .6s; /*margin-left: 50px;*/ }

.projects h3 {
	color: #f8123e;
	font-size: 25px;
	font-weight: bold;
	font-family: 'gts_BdIt';
	padding-bottom: 5px;
	text-decoration: underline;
}

.projects em {
	font-weight: normal;
	font-style: normal;
	/*font-size: 0.5em;*/
	/*color: #f8123e;*/
}

.projects em:before {
	content: '\2022 \00A0';
}

.image {
	grid-area: projects;
	justify-self: end;
	margin-right: 90px;
	margin-top: 50px;
	/*margin-right: 180px;*/
	z-index: -1;
}

.image svg {
	height: 340px;
}

.footer {
	grid-area: footer;
	font-family: 'Hind', sans-serif;
	font-size: 10px;
	direction: rtl;
	text-align: justify;
	color: #17365d;
	line-height: 1;
	/*width: 95%;*/
	justify-self: center;

	margin-top: 20px;

	/*border: 1px solid red;*/
}

.footer em {
	color: #f8123e;
}

.buttons {
	grid-area: buttons;
	font-family: 'gts_MdIt';
	font-size: 15px;
	color: #17365d;

	margin-top: 20px;

	/*border: 1px solid red;*/
}

.main {
	display: grid;
	max-width: 800px;
	margin: 0 auto;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
	'header header header'
	'projects projects projects'
	'footer footer footer'
	'buttons buttons buttons';

	/*border: 1px solid red;*/
}

@media only screen
	and (max-device-width: 812px),
	(max-width: 500px) {
		
		.main {
			max-width: 100vw;
		}

		.main a {
			color: #f8123e;
		}

		.header h1 {
			font-size: 5vw;
		}

		.header h2 {
			font-size: 4vw;
			margin-bottom: 30px;
		}

		.projects {
		grid-area: projects;
		justify-self: start;
		text-align: left;
		margin-top: 30px;
		margin-right: 20px;
		}

		.projects h3 {
			color: #17365d;
		}

		.projects ul {
			font-size: 6vw;
		}

		.image {
			grid-area: footer;
			justify-self: end;
			margin-right: 20px;
			margin-top: 40px;
			z-index: -1;
		}

		.image svg {
			height: 200px;
		}

		.main a:hover,
		.main a:visited:hover,
		.main a:active,
		.main a:visited:active {
			animation: none;
		}

		.footer {
			font-size: 4vw;
			margin-top: 50px;
		}

		.buttons {
			font-size: 5vw;
			margin-bottom: 200px;
		}
}