@charset "UTF-8";
/* MY STYLES */

/* Global */
@font-face {
  font-family: 'Zona Pro';
  src: url('../fonts/zona/ZonaPro-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/zona/ZonaPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/zona/ZonaPro-Regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/zona/ZonaPro-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/zona/ZonaPro-Regular.svg#bb1fe4599c1fb6494adcac51c11eb979') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Zona Pro ExtraBold';
  src: url('../fonts/zona/ZonaPro-ExtraBold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/zona/ZonaPro-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/zona/ZonaPro-ExtraBold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/zona/ZonaPro-ExtraBold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/zona/ZonaPro-ExtraBold.svg#b1685b3bb7bf2cab29af6680c5962cb9') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  700;
}

@font-face {
  font-family: 'Zona Pro Bold';
  src: url('../fonts/zona/ZonaPro-Bold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/zona/ZonaPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/zona/ZonaPro-Bold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/zona/ZonaPro-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/zona/ZonaPro-Bold.svg#9f382fee952eb88388ebc6cbb2f6f72b') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  700;
}

@font-face {
  font-family: 'Zona Pro SemiBold';
  src: url('../fonts/zona/ZonaPro-SemiBold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/zona/ZonaPro-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/zona/ZonaPro-SemiBold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/zona/ZonaPro-SemiBold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/zona/ZonaPro-SemiBold.svg#40d9dc5992fcd91c986ce763d0b18251') format('svg'); /* Legacy iOS */
       
  font-style:   italic;
  font-weight:  700;
}

@font-face {
  font-family: 'Zona Pro Light';
  src: url('../fonts/zona/ZonaPro-Light.eot'); /* IE9 Compat Modes */
  src: url('../fonts/zona/ZonaPro-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/zona/ZonaPro-Light.woff') format('woff'), /* Modern Browsers */
       url('../fonts/zona/ZonaPro-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/zona/ZonaPro-Light.svg#539f28dff6ab3b175f2fd677663c51c6') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  200;
}

@font-face {
  font-family: 'Zona Pro Thin';
  src: url('../fonts/zona/ZonaPro-Thin.eot'); /* IE9 Compat Modes */
  src: url('../fonts/zona/ZonaPro-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/zona/ZonaPro-Thin.woff') format('woff'), /* Modern Browsers */
       url('../fonts/zona/ZonaPro-Thin.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/zona/ZonaPro-Thin.svg#7578feebbccce406800e568eece85043') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  200;
}

@font-face {
  font-family: 'Zona Pro Hairline';
  src: url('../fonts/zona/ZonaPro-Hairline.eot'); /* IE9 Compat Modes */
  src: url('../fonts/zona/ZonaPro-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/zona/ZonaPro-Hairline.woff') format('woff'), /* Modern Browsers */
       url('../fonts/zona/ZonaPro-Hairline.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/zona/ZonaPro-Hairline.svg#c5e1f6902d776e7e1ed6262bd857df8d') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

html {
	font-family: 'Zona Pro';
}

body {
	font-family: 'Zona Pro';
	font-size: 1.6em;
	background-color: #FFFFFF;
	margin-top: -25px;
}

h1, h2, h3, small {
	color: #979797;
}

p {
	font-family: 'Zona Pro Light';
	line-height: 150%;
	color: #989898;
}

a.navbar-brand {
	letter-spacing: 1px;
	font-family: 'Zona Pro Light';
	text-indent: 25px;
}

a.navbar-brand strong {
	font-family: 'Zona Pro ExtraBold';
}
/*------------ Home Page -------------*/

/* Header */
img.social-media-header {
	width: 10%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 20% 0% 10%;
}


/* Home Page Global Style */

img.section-image {
	width: 100%;
}

div.page-header {
	text-align: center;
	border-bottom: 0px thin #000000;
}

img.section-border {
	width: 30%;
}

div.home {
	font-family: 'Zona Pro Bold';
}

/* Home Section */
div.jumbotron {
	height: 100vh;
	padding: 0px;
	margin: 0px;
	background-image: url(https://pantipa.com/images/homepage/home_section/background.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: relative;
}

div#intro {
	position: relative;
}


@media screen and (max-width: 1249px) {
	div.jumbotron {
		background-size: auto 100%;
	}
}

@media screen and (max-width: 1250px) {
	img.image-home {
		height: 100vh;
		overflow: hidden;
	}
	div.jumbotron {
		overflow: hidden;
	}
}

#intro {
	width: 100%;
	text-align: center;
	color: #FFFFFF;
}

@media screen and (max-width: 1919px) {
	#intro {
		top: 20%;
	}
}

@media screen and (min-width: 1920px) {
	#intro {
		top: 15%;
	}
}

h1.pantipa {
	font-family: 'Zona Pro';
	letter-spacing: 4px;
	padding-top: 100px;
}

h2.is-a {
	font-family: 'Zona Pro Light';
	letter-spacing: 8.5px;
	text-indent: 10px;
	margin-top: 10px;
}

.jumbotron p {
	margin-top: 7%;
}

@media only screen and (max-width: 767px) {
  h1.pantipa {
    font-size: 5rem;
  }
  
  .jumbotron p {
	  margin-top: 15%;
  }
  
  div.view-work>p>a {
	  padding: 2%;
  }
  
  h2.is-a {
	  font-size: 1.6rem;
  }
  
  a.view-work {
	  font-size: 1.2rem;
  }
  
  b, i {
	  font-size: 2rem;
  }
  
  div.home>h1 {
	font-size: 3rem;
}
}

@media only screen and (min-width: 768px) {
  h1.pantipa {
    font-size: 6rem;
  }
  
  h2.is-a {
	  font-size: 2.0rem;
  }
  
  a.view-work {
	  font-size: 1.2rem;
  }
  
  div.view-work>p>a {
	  padding: 1%;
  }
}

@media only screen and (min-width: 1170px) {
  h1.pantipa {
    font-size: 7rem;
  }
  
  h2.is-a {
	  font-size: 2.6rem;
  }
  
  a.view-work {
	  font-size: 1.4rem;
  }
}

h2.is-a {
	color: #FFFFFF;
}

img.home-border {
	width: 20%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

section.cd-intro {
	margin-top: 5%;
	margin-bottom: 5%;
}

b, i {
	font-style: normal;
	font-weight: 500;
	color: #FFFFFF;
}

div.view-work>p>a {
	text-decoration: none;
	color: #FFFFFF;
	border: 1px solid #FFFFFF;
}

div.view-work>p>a:hover {
	color: #000000;
	background-color: #FFFFFF;
}

div.bouncing-arrow {
	width: 100%;
	position: absolute;
	bottom: 8%;
}

div.arrow {
	margin: 0 auto;
}

#topnavbar.affix {
    position: fixed;
    top: 0;
    width: 100%;
}

/* Work Section */

div.row {
	margin: 0px;
}

div.work-col {
	padding: 0px;
}

img.work-image {
	width: 100%;
}

@media only screen and (max-width: 767px) {
	.ih-item.square.effect13 .info h3 {
		font-size: 2 rem;
	}
	
	.ih-item.square.effect13 .info p {
		font-size: 1.2 rem;
	}
}

/* About Section */

div.about {
	text-align: center;
}

img.download-icon {
	width: 10%;
}

img.about-image {
	padding: 10% 0 10%;
	width: 40%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Contact */

div.contact {
	text-align: center;
}

/* Footer */

img.social-media {
	width: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 20% 0% 15%;
}

div.sub-footer {
	text-align: center;
	color: #DBDBDB;
	padding-top: 1%;
}

/* Work Pages */

/* Global */
@media screen and (min-width: 768px) {
	div.project-description {
		border-right: 1px solid #C3C3C3;
	}
	
	div.page-header h1 {
	font-size: 3rem;
	}

}

div.page-header h1 {
	font-size: 5rem;
}

div#project-details {
	text-align: center;
}

img.work-page-images {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding: 2.5% 0 5%;
}


@media screen and (max-width: 768px) {
	iframe { 
	height: 50vh;
	width: 100%;
}

	div.page-header h1 {
		font-size: 3rem;
	}

}

/* Simon Page */

@media screen and (min-width: 1170px) {
	div.simon-persona {
		 width: 75%; 
		 margin: 0 auto;
	}
}

.effect0:hover {
	box-shadow: 2px 4px 4px #979797;
}

/* IKEO Page */

.ikeo-icon-images {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 2.5rem 0;
}

@media screen and (max-width: 768px) {
	.ikeo-icon-images { 
	width: 100%;
	}
}

@media screen and (min-width: 769px) {
	.ikeo-icon-images { 
	width: 55%;
	}
}