/* GENERAL FONT*/
* {
	margin: 0;
	font-family: Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif;
	color: white;
	font-size: 27px;
	overflow-x: hidden;
}

/* GENERAL ANIMATION */
a {
	text-decoration: none;
}

a:hover {
  animation: shake 0.82s;
  text-decoration: none;
}

@keyframes shake {
  40%, 60% {
    transform: translate3d(0, 3px, 0);
  }
}

/* GENERAL STYLING */
.hidden {
	opacity: 0;
	transition: 0.3s;
}

/* GENERAL FONT */
.grayFont {
	color: #8E8686;
}

.extraLargeFont {
	font-size: 10vw;
	font-weight: 700;
	white-space: nowrap;
}

.largeFont {
	font-size: 70px;
	font-weight: 400;
}

.midFont {
	font-size: 40px;
	font-weight: 400;
}

.smallFont {
	font-size: 19px;
}

/* BUTTONS */
.moreButton {
	display: none;
}

.moreButton:hover {
	cursor: pointer;
}

.pointerButton:hover {
	cursor: pointer;
}

/* GENERAL CONSTRUCTS */
.containerCenter {
	background: black;
	display: flex;
	height: 100vh;
	width: 100vw;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.containerMain {
	background: black;
	display: flex;
	height: 100vh;
	width: 100vw;
	justify-content: center;
	align-items: center;
}

.paraContainer p {
	padding: 50px 100px 50px 100px;
	line-height: 32px;  
}

.bioParaContainer p {
	padding: 40px 20vw 0px 20vw;
}

.firstPara {
	margin-top: 10vw;
}

.subContainerLeft {
	width: 50vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.subContainerRight {
	height: 100vh;
	width: 50vw;
	display: flex;
	align-items: center;
	justify-content: center;
  	flex-direction: column;
}

.bioContainer {
	top: 0;
	height: 100%;
	width: 0%;
	position: fixed;
	z-index: 1;
	background: black;
	transition: 1s;
	overflow-x: auto;
}

.bioContainer a {
	font-size: 36px;
}

/* GENERAL IMAGE CONSTRUCTS*/
.iconContainer {
	width: 50px;
	height: 50px;
}

#icon1 {
	background: url("Files/arrow3x.png")center/cover no-repeat;
}

.imgMainContainer {
	width: 100vw;
	height: 100vh;
	box-shadow: 0 100vh rgba(0, 0, 0, 0.4) inset;
}

.imgAlternativeMainContainer {
	width: 80vw;
	height: 80vh;
}

.largeImageContainer {
	width: 400px;
	height: 700px;
}

.mobileImageContainer {
	width: 800px;
	height: 200px;
}

.headShotImageContainer {
	width: 400px;
	height: 500px;
	display: flex;
	align-items: center; 
	justify-content: center;
	border-radius: 50px;
}

/* NAVIGATION */
#navbar {
  background: rgb(255,255,255, 0.1);
  position: fixed;
  width: 100%;
  transition: top 0.3s;
  display: flex;
  justify-content: space-between;
}

.navbarContainer {
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#navbar a {
  padding: 15px 30px 15px 30px;
  text-decoration: none;
}

#navbar a:hover {
	cursor: pointer;
}

#myNav {
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 90px;
	height: 0;
	width: 100%;
	position: fixed;
	z-index: 1;
	background: black;
	overflow-x: hidden;
	transition: 1s;
}

#myNav a {
 font-size: 36px;
 padding: 0 3vw 0 3vw;
}

 .navRight {
  position: absolute;
  top: 20px;
  right: 45px;
}

/* SLIDE SHOW */
#slideShowContainer {
  background: url("Files/img1.jpg") center /cover no-repeat;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 100vh rgba(0, 0, 0, 0.4) inset;
}

#shadowContainer {
  width: 0%;
  height: 100%;
}

#transitioner {
  width: 0%;
  height: 100%;
  background: url("Files/img2.jpg") center /cover no-repeat;
  box-shadow: 0 100vh rgba(0, 0, 0, 0.4) inset;
  background-attachment: fixed;
}

#lineContainer {
  position: absolute;
  top: 50vh;
  left: 10vw;
  height: 3px;
  width: 60vw;
  background: white;
  opacity: 0.5;
  border-radius: 25px;
}

#line {
  position: absolute;
  top: 50vh;
  left: 10vw;
  height: 3px;
  width: 0;
  background: white;
  border-radius: 25px;
  transition: 1s;
}

#slideText {
  position: absolute;
  top: 53vh;
  left: 10vw;
  transition: 0.3s;
}

/* WORK */
#workContainer {
	overflow: hidden;
}

.subWorkContainer {
	height: 50%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.subWorkContainer p {
	padding: 20px 0 20px 0;
}

/* WORK INTRO */
#firstWhatWeDoSubContainer {
	height: 100vh;
	width: 50vw;
	text-align: center;	
}

#secondWhatWeDoSubContainer {
	height: 100vh;
	width: 50vw;
	display: flex;
  	flex-direction: column;
}

#secondAlternativeWhatWeDoSubContainer {
	display: none;
}

#mobileIntro {
	display: none;
}

#firstWorkPara, #secondWorkPara, #thirdWorkPara {
opacity: 0;
transition: 0.3s;
} 

#targetWhatWeDoText {
	transition: 0.3s;
}

/* APP */
#appAlternativeContainer {
	display: none;
}

#firstAppSubContainer {
	height: 100vh;
	width: 50vw;
	display: flex;
	justify-content: center;
  	align-items: center;
}

#secondAppSubContainer {
	height: 100vh;
	width: 50vw;
	display: flex;
  	align-items: center;
}

#appImageContainer{
	background: url("Files/img4.png") center /contain no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}

#firstAppPara, #secondAppPara {
	opacity: 0;
	transition: 0.3s;
}

/* BULENT */
#bulentImageContainer {
	background: url("Files/test5.jpeg") center /cover no-repeat;

}

#bulent {
	overflow: hidden;
}

/* SIAVUSH */
#siavushImageContainer {
	background: url("Files/test2.jpg") center /cover no-repeat;
	
}

#siavush {
	overflow: hidden;
}

/* CLIENTS */
#clients {
	flex-direction: column;
}

#title {
	height: 10%;
}

.oneThirdContainer {
	height: 27%;
	
	
}

.oneThirdSubContainer {
	display: flex;
	align-items: center;
	height: 100%;
}

.oneThirdLevel2SubContainer {

flex-direction: column;
padding: 0 12vw 0 12vw;
white-space: nowrap;
}

.logoContainer {
	width: 15vw;
	height: 15vw;
	max-width: 150px;
	max-height: 150px;
	border-radius: 100px;
}

#firstOneThirdContainer {
	transform: translate(270vw);
	animation: firstMoveText 50s linear infinite;
	
}

@keyframes firstMoveText {
	from {transform: translate(270vw)}
	to { transform: translate(-270vw)}
}

#secondOneThirdContainer  {
	transform: translate(270vw);
	animation: secondMoveText 55s linear infinite;
}

@keyframes secondMoveText {
	from {transform: translate(270vw)}
	to { transform: translate(-270vw)}
}

#thirdOneThirdContainer {
	transform: translate(270vw);
	animation: thirdMoveText 35s linear infinite;
	
}

@keyframes thirdMoveText {
	from {transform: translate(270vw)}
	to { transform: translate(-270vw)}
}

/* DIFFERENT LOGOS */
#carephoneWarehouse {
	background: url("Files/carephoneWarehouse.png") center /cover no-repeat;
}

#fortum {
	background: url("Files/fortum.png") center /cover no-repeat;
}

#nokia {
	background: url("Files/nokia.png") center /cover no-repeat;
}

#volvo {
	background: url("Files/volvo.png") center /cover no-repeat;
}

#italiaOnline {
	background: url("Files/italiaOnline.png") center /cover no-repeat;
}

#nordea {
	background: url("Files/nordea.png") center /cover no-repeat;
}

#carlsberg {
	background: url("Files/carlsberg.png") center /cover no-repeat;
}

#twitter {
	background: url("Files/twitter.png") center /cover no-repeat;
}

#cambridge {
	background: url("Files/cambridge.jpeg") center /cover no-repeat;
}

#britishGas {
	background: url("Files/britishGas.jpg") center /cover no-repeat;
}

#bbc {
	background: url("Files/bbc.jpg") center /cover no-repeat;
}

#fca {
	background: url("Files/fca.jpg") center /cover no-repeat;
}

#bos {
	background: url("Files/bos.png") center /cover no-repeat;
}

#tryg {
	background: url("Files/tryg.png") center /cover no-repeat;
}

#fazer {
	background: url("Files/fazer.png") center /cover no-repeat;
}

#capio {
	background: url("Files/capio.png") center /cover no-repeat;
}

#apmoller {
	background: url("Files/apmoller.png") center /cover no-repeat;
}

#neste {
	background: url("Files/neste.png") center /cover no-repeat;
}

#homeOffice {
	background: url("Files/homeOffice.jpg") center /cover no-repeat;
}

#alstom {
	background: url("Files/alstom.png") center /cover no-repeat;
}

#lvmh {
	background: url("Files/lvmh.jpg") center /cover no-repeat;
}

#bma {
	background: url("Files/bma.jpg") center /cover no-repeat;
}

#sandvik {
	background: url("Files/sandvik.png") center /cover no-repeat;
}

#clariant {
	background: url("Files/clariant.png") center /cover no-repeat;
}

/* BLOG */
#blogSubContainer {
	background: url("Files/img8.png") center /contain no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}

#blogPara {
	position: relative;
	right: 30px;
	bottom: 30px;
}

#blogAlternativeSubContainer {
	display: none;
	background: url("Files/img8.png") center /contain no-repeat;
}


/* CONTACT */
#contact {
	flex-direction: column;

}

#contactSub {
	height: 30%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: center;
}

/* ERROR */
#error {
	display: none;
}

/* 	VERTICAL */
@media only screen and (max-height: 680px) {
* {
	font-size: 25px;
	}

.midFont {
	font-size: 27px;
}

.paraContainer p {
	padding: 20px 50px 20px 10px; 
}

.largeImageContainer {
	width: 100vw;
	height: 100vh;
}

.headShotImageContainer {
	width: 300px;
	height: 400px;
}

.imgAlternativeMainContainer {
	width: 70vw;
	height: 70vh;
}

.logoContainer {
	max-width: 80px;
	max-height: 80px;

}

#contactSub {
	height: 60%;
}
}

@media only screen and (max-height: 500px) {
#error {
	display: flex;
	
}

#navbar {
	display: none;
}

#slideShowContainer {
	display: none;
}

#workContainer {
display: none;
}

#whatWeDoContainer {
	display: none;
}

#secondWhatWeDoSubContainer {
display: none;
}

#appContainer {
	display: none;
}

#appAlternativeContainer {
	display: none;
}

#bulent {
	display: none;
}

#siavush {
	display: none;
}

#clients {
	display: none;
}

#blog {
	display: none;
}

#contact {
	display: none;
}

}


/* SMALL DISPLAY */

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

/* Fonts */
* {
	font-size: 20px;
	}

/* Fonts */
.largeFont {
	font-size: 30px;
}

.midFont {
	font-size: 27px;
}

.smallFont {
	font-size: 13px;
}

/* General */
.paraContainer p {
	padding: 40px 20px 40px 20px;
	line-height: 25px;  
}

.bioParaContainer p {
	padding: 40px 20px 0px 20px;
}

/* Icons */
.iconContainer {
	width: 40px;
	height: 40px;
}

/* Images */
.largeImageContainer {
	width: 100vw;
	height: 100vw;
}

/* Navigation */
#myNav {
flex-direction: column;
}

.subContainerLeft {
	width: 100vw;
}

/* Bulent and Siavush */
.headShotImageContainer {
	width: 100%;
	height: 100%;
}

/* Clients */
.logoContainer {
	width: 20vw;
	height: 20vw;
}

/* Clients */
#firstOneThirdContainer {
	transform: translate(400vw);
}


/* Blog */
#blogSubContainer {
 display: none;
}

#blogAlternativeSubContainer {
 display: flex;
 justify-content: center;
 align-items: center;
}

.headShotImageContainer {
	width: 300px;
	height: 400px;
}

}

/* MID/SMALL DISPLAY */
@media only screen and (max-width: 900px) {

/* General */
.containerMain {
	height: 70vh;
	margin: 10px 0 10px 0;
}

/* Work intro */
#secondWhatWeDoSubContainer {
	display: none;
}

#secondAlternativeWhatWeDoSubContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: url("Files/test7.jpg") center / cover no-repeat;
	height: 100%;
	width: 100%;
	text-align: center;
}

/* Contact */
#contact{
background: url("Files/test.jpg") center /cover no-repeat;
}
}

/* MID DISPLAY */
@media only screen and (max-width: 1000px) {

/* Work intro */
#firstWhatWeDoSubContainer {
	display: none;
}

#mobileIntro {
	display: inline;
	 text-align: center;
	 font-size: 50px;
	 font-weight: 700;
}

#secondWhatWeDoSubContainer {
width: 90vw;
}

/* App */
#appContainer {
	display: none;
}

#appAlternativeContainer {
	display: flex;
	flex-direction: column;
}

#secondAppPara {
	line-height: 40px;
	text-align: center;
}

/* Bulent and Siavush */
.subContainerRight {
	display: none;
}

.moreButton {
	display: inline;
}
}

/* NORMAL/MID DISPLAY */
@media only screen and (max-width: 1250px) {

/* General */
.paraContainer p {
	padding: 20px 50px 20px 10px; 
}

/* Clients */
.oneThirdLevel2SubContainer {
padding: 0 20vw 0 20vw;
}

}

/* LARGE DISPLAY 1X */
@media only screen and (min-width: 1400px) {

/* General */
.bioParaContainer p {
	padding: 40px 30vw 0px 30vw;
}

/* Font */
.extraLargeFont {
	font-size: 100px;
}
}

/* LARGE DISPLAY 2X */
@media only screen and (min-width: 2000px) {

/* General */
.paraContainer p {
	padding: 50px 20vw 50px 100px;
}

.bioParaContainer p {
	padding: 40px 40vw 0px 40vw;
}
}