/**********************************************
Title			: ideasi.id CSS
Author			: Yosua Pessy (@yosuapessy)
Studio			: PT Pessy Sukses Kaya
License			: All rights reserved
**********************************************/


/* GENERAL */
* {
	width: 100%;
	max-width: 640px;
	font-family: "Gotham", sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	color: #4B4B4B;
}

h1 {
	font-size: 1.5em;
	line-height: 1.25em;
}


img, p {
	width: 100%;
	display: block;
	margin: auto;
}


/* WRAPPER */
.wrapper {
	width: 90%;
	padding: 1.5em 0;
	margin: auto;
}


/* HOME */
#home{padding-top: 2.6em;}


.fading{animation:fading 4s infinite}


	@keyframes fading {
		0%{opacity:0}
		20%{opacity:1}
		90%{opacity:1}
		100%{opacity:0}
	}


#home .wrapper {
	background: #52A8FF;
	color: white;
	width: 80%;
	padding: 5%;
	margin-top: 1.5em;
}

#home .wrapper h1{color:white;}


/* WHAT MAKES US */
#what-makes-us .wrapper {
	width: 80%;
	padding-bottom: 0;
	}
	
	
#what-makes-us .wrapper p, #what-makes-us .wrapper h1 {
	text-align: center;
	margin-bottom: 1.5em;
}


#what-makes-us .wrapper img {
	width: 80%;
	margin-bottom: 1em;
}


/* WHAT CAN WE DO */
#what-we-can .wrapper p, #what-we-can .wrapper h1 {
	text-align: center;
	margin-bottom: 1.5em;
}


#what-we-can a {
	text-decoration: none;
	font-weight: bold;
}


#what-we-can a:hover {
	color: #52A8FF;
	transition: .4s;
}


#what-we-can .wrapper .tab input{display:none;}


#what-we-can .wrapper .tab label {
	display: block;
	padding: 1em 0;
	background: #52A8FF;
	color: white;
	font-weight: bold;
	cursor: pointer;
}


#what-we-can .wrapper .tab-content {
	max-height: 0vh;
	overflow: hidden;
	border-bottom: 1px white solid;
	-webkit-transition: max-height .5s ease; /* CLOSE TAB */
	-o-transition: max-height .5s ease;
	transition: max-height .5s ease;
}


#what-we-can .wrapper .tab input:checked ~ .tab-content {
	max-height: 100vh;
	-webkit-transition: max-height 1s ease; /* OPEN TAB */
	-o-transition: max-height 1s ease;
	transition: max-height 1s ease;
}


#what-we-can .wrapper .tab .tab-content p {
	padding: 1em 0;
	text-align: left;
	margin-bottom: 0;
}


/* WHO TRUST US */
#who-trust-us{background:#E6E6E6;}


#who-trust-us .wrapper h1 {
	text-align:center;
	margin-bottom: 1.5em;
}


/* CONTACT */
#contact{background:#4b4b4b;}


#contact .wrapper p, #contact .wrapper h1 {
	text-align: center;
	color: white;
	margin-bottom: 1.5em;
}


input, textarea {
	width: 90%;
	display: block;
	padding: 1em;
	font-style: italic;
	border: none;
}


textarea:focus,input:focus {
	border: 1px solid #52A8FF;
	font-style: normal;
}


*:focus::-webkit-input-placeholder{opacity: 0;} /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder{opacity: 0;} /* FF 4-18 */
*:focus::-moz-placeholder{opacity: 0;} /* FF 19-50 */
*:focus:-ms-input-placeholder{opacity: 0;} /* IE 10+ */
*:focus::placeholder{opacity: 0;} /* Modern Browsers */


input.submit-button {
	width: 30%;
	padding: 1em;
	font-weight: bold;
	font-style: normal;
	cursor: pointer;
	background: #52A8FF;
	color: white;
}


input.submit-button:hover {
	opacity: 0.8;
	transition: 0.4s;
}


/* COPYRIGHT */
#copyright{
	background: #e6e6e6;
	padding-bottom: 2.6em;
}


#copyright .wrapper p{
	margin-bottom: 0;
	text-align: center;
}


/* MOBILE NAV */
#mobile-nav-top {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9999;
	background: #52A8FF;
}


#mobile-nav-top a img, #mobile-nav-bottom a img {
	width: 20%;
	display: block;
	float: left;
}
	
	
#mobile-nav-top a img.logo {
	width: 60%;
	display: block;
	float: left;
}

	
#mobile-nav-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: #E6E6E6;
}