/* === FONTS === */
@font-face { font-family: BwModelica-Black; src: url(../fonts/BwModelica-Black.otf); }
@font-face { font-family: BwModelica-Bold; src: url(../fonts/BwModelica-Bold.otf); }
@font-face { font-family: BwModelica-ExtraBold; src: url(../fonts/BwModelica-ExtraBold.otf); }
@font-face { font-family: BwModelica-Hairline; src: url(../fonts/BwModelica-Hairline.otf); }
@font-face { font-family: BwModelica-Light; src: url(../fonts/BwModelica-Light.otf); }
@font-face { font-family: BwModelica-Medium; src: url(../fonts/BwModelica-Medium.otf); }
@font-face { font-family: BwModelica-Regular; src: url(../fonts/BwModelica-Regular.otf); }
@font-face { font-family: BwModelica-Thin; src: url(../fonts/BwModelica-Thin.otf); }

/* === GLOBAL === */
html, body
{
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	background-color: #fff;
	font-family: BwModelica-Thin;
	letter-spacing: 1px;
}

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

.row
{
	margin-left: 0px;
	margin-right: 0px;
}

/* === PAGES === */
.pageHeader
{
	background-image: url("../img/background/headerBackground.jpg");
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
	text-align: center;
}

.pageAbout
{
	background-color: #ffffff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #333333;
	text-align: center;
	padding: 80px 30px 80px 30px;
}

.pageVisionMission
{
	background-color: #333333;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #ffffff;
	text-align: center;
	padding: 80px 30px 80px 30px;
}

.pageProject
{
	background-image: url("../img/background/projectBackground.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #ffffff;
	text-align: center;
	padding: 80px 30px 80px 30px;
}

.pageLandingPage
{
	background-image: url("../img/background/landingpageBackground.png");
	background-color: #bd7923;
	height: 500px;
	background-repeat: repeat;
	color: #333333;
	text-align: center;
}

.pageContact
{
	background-color: #ffffff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #333333;
	text-align: center;
	padding: 80px 30px 80px 30px;
}

.pageCopyright
{
	background-color: #bd7923;
	text-align: center;
	color: #ffffff;
	font-family: BwModelica-Medium;
	height: 50px;
	line-height: 50px;
	font-size: 12px;
}

.pageMedsos
{
	position: fixed;
	right: 0px;
	bottom: 80px;
	width: 50px;
	height: 188px;
	background-color: rgba(204, 148, 68, 0.9);
	font-size: 24px;
	border-radius: 5px 0px 0px 5px;
}

.pageMedsosMargin
{
	padding: 18px 7px 7px 7px;
}

.contactLayout
{
    text-align: left; 
    margin: 0px 0px 20px 0px; 
    padding: 0px;
}

.contactIcon
{
	font-size: 30px; 
	color: #cc9444;
}

.contactIconPosition
{
	display: inline-block; 
	vertical-align: top; 
	width: 35px;
	position: relative;
	top: -4px;
}

.contactTitle
{
	height: 21px; 
	font-size: 12px;
	color: #cc9444;
	font-family: BwModelica-Black;
	letter-spacing: 0px;
}

.contactContent
{
	font-size: 14px;
	color: #7b7b7b;
	font-family: BwModelica-Medium;
}

.contactContentPosition
{
	display: inline-block; 
	vertical-align: top; 
	width: 152px; 
	font-size: 14px; 
	position: relative; 
	top: -4px;
}

.alignVMTitle
{
	text-align: right;
	font-size: 40px;
	color: #cc9444;
	line-height: 44px;
	position: relative;
	top: -7px;
}

.alignVMContent
{
	text-align: left;
	font-size: 16px;
	line-height: 28px;
}

.videoLandingPage
{
	width: 880px;
	height: 100%;
}

.aboutdeveloper1
{
	position: relative;
	font-family: BwModelica-ExtraBold;
	font-size: 58px;
	width: 440px;
	letter-spacing: 0px;
}

.aboutdeveloper2
{
	position: relative;
	font-family: BwModelica-Regular; 
	font-size: 37px; 
	margin-bottom: 65px;
	width: 440px;
	letter-spacing: 0px;
}

.aboutContent
{
	font-family: BwModelica-Regular; 
	font-size: 16px; 
	line-height: 28px;
}

.modalPositionCustom
{
	top: 48px; 
	border-radius: 0px;
}

.titleArrow0
{
	position: absolute;
	left: -8px;
	top: 20px;
	width: 0px;
	height: 0px;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #cc9444;
}

.titleArrow1
{
	position: absolute;
	left: 0px;
	top: 4px;
	width: 0px;
	height: 0px;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #cc9444;
}

.titleArrow2
{
	position: absolute;
	right: -10px;
	top: 30px;
	width: 0px;
	height: 0px;
	border-top: 10px solid transparent;
	border-right: 10px solid #cc9444;
}

.iconPlayVideo
{
	position: relative; 
	font-size: 60px; 
	top: 45%;
	transition: 0.1s;
}

.iconPlayVideo:hover
{
	transition: 0.1s;
	font-size: 70px; 
	top: 44.5%;
}

.menuStyle
{
	color: #ffffff; 
	font-family: BwModelica-Medium;
}

.menuStyle:hover
{
	text-decoration: underline;
}

/* === ANIMATED === */

.animated {
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
}

@-webkit-keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100px, 0, 0);
		transform: translate3d(100px, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100px, 0, 0);
		transform: translate3d(100px, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

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

/* === MEDIA QUERIES === */
@media screen and (max-width: 990px) 
{
	.alignVMTitle
	{
		text-align: left;
		margin-bottom: 10px;
	}

	.videoLandingPage
	{
		width: 100%;
	}
}

@media screen and (max-width: 800px) 
{
	.bgNavBar
	{
		background-color: rgba(204, 148, 68, 0.9);
	}

	.pageLandingPage
	{
		height: 330px;
	}
}

@media screen and (max-width: 420px) 
{
	.pageHeader
	{
		background-position-x: -350px;
	}

	.aboutdeveloper1
	{
		font-size: 38px;
		width: 290px;
	}

	.aboutdeveloper2
	{
		font-size: 23px; 
		width: 290px;
	}

	.modalPositionCustom
	{
		top: 88px; 
		border-radius: 0px;
	}

	.pageLandingPage
	{
		height: 230px;
	}

	.pageCopyright
	{
		font-size: 10px;
	}

	.titleArrow0
	{
		left: -8px;
		top: 12px;
	}

	.titleArrow1
	{
		left: 0px;
		top: 4px;
	}

	.titleArrow2
	{
		right: -3px;
		top: 15px;
	}

	.pageMedsos
	{
		width: 44px;
		height: 162px;
		font-size: 19px;
	}
}

@media screen and (max-width: 350px) 
{
	.pageHeader
	{
		background-position-x: -250px;
	}

	.aboutdeveloper1
	{
		font-size: 36px;
		width: 272px;
	}

	.aboutdeveloper2
	{
		font-size: 22px; 
		width: 272px;
	}

	.aboutContent
	{
		font-size: 15px; 
	}

	.alignVMContent
	{
		font-size: 15px;
	}

	.titleArrow2
	{
		right: -6px;
		top: 15px;
	}
}