/*
   styleBase.css
   IJR
   
   Created by cass on 2015-04-13.
   Copyright 2015 cass. All rights reserved.
*/

body{ background-color: #FFFFFF; overflow-x: hidden; }

.gray{ color: gray; }
.black{ color: black; }
.white{ color: #fff; }
.blue{ color: #303E52; }
.title{ font-size: 25pt; letter-spacing: 5px; text-transform: uppercase; text-align: center; padding: 40px 0px; }
.subtitle{ font-size: 14pt; }
.subtitle-w70{ width: 70%; margin: 0 auto; text-align: center; }
.subsubtitle{ font-size: 11pt; }
.text{ font-size: 20px; }
.mintext{ font-size: 11pt; }
.btn{ background-color: white; border-radius: 15px; padding: 8px 20px; outline: none; border: none; }
.btn:hover{ cursor: pointer; text-decoration: underline; }
.separator{ width: 85%; border-bottom: 1px solid rgba(0,0,0,0.3); margin: 0 auto; padding-bottom: 40px; }

input{ width: calc(100% - 21px); color: white; padding: 10px 10px; margin: 5px 0px; outline: none; background-color: transparent; border: 1px solid rgba(250,250,250,0.3); }
input:focus{ border: 1px solid white; }
textarea{ width: calc(100% - 21px); max-width: calc(100% - 21px); height: 150px; resize: none; color: white; padding: 10px 10px; margin: 5px 0px; outline: none; background-color: transparent; border: 1px solid rgba(250,250,250,0.3); }
textarea:focus{ border: 1px solid white; }
/*
 * header
 */
#header{ color: white; min-height: 700px; }
#header{ height: 100vh; }
#header-menu{ background-color: rgba(0,0,0,0.6); height: 60px; width: 100%; position: relative; position: fixed; z-index: 999; color: white; }
#header-menu > ul{ width: 655px; height: 17px; position: absolute; right: 0px; top: 0; bottom: 0; margin: auto; -webkit-animation: fadeIn 0.5s; animation: fadeIn 0.5s; }
#header-menu > ul{ text-transform: uppercase; font-size: 8.5pt; letter-spacing: 2px; }
#header-menu > ul li{ display: inline-block; padding: 0 15px; }
#header-menu > ul a:first-child{ color: rgb(255,30,0); }
#header-menu > ul li:hover{ cursor: pointer; text-decoration: underline; }
#header-menu span{ height: 60px; line-height: 60px; margin-left: 60px; letter-spacing: 10px; font-size: 15pt;  }
#header-menu img{ position: absolute; top: 0; bottom: 0; margin: auto; }
#header-menu img{ right: 20px; display: none; cursor: pointer; -webkit-animation: fadeIn 0.5s; animation: fadeIn 0.5s; }

a{ text-decoration: none; font-style: normal;}
a:link{ color: #fff;}      /* unvisited link */
a:visited{ color: #fff; }  /* visited link */
a:hover{ color: #fff; }  /* mouse over link */
a:active{ color: #fff; }  /* selected link */


#header-fw{ width: 100%; height: 100%; position: relative; background-color: rgba(0,0,0,0.4); }
#header-sv{ position: absolute; letter-spacing: 5px; font-size: 20pt; font-family: 'Raleway-light'; text-transform: uppercase; }
#header-m{ position: absolute; width: 100%; top: 55%; letter-spacing: 5px; font-size: 13pt; text-align: center; font-family: 'Raleway-light'; text-transform: uppercase; }
.header-line{ width: 150px; border-bottom: 1px solid white; position: absolute;  }
#header-line-l{ left: 110%; }
#header-line-r{ right: 110%; }

/*
 * wellcome
 */
#wellcome{ padding-top: 60px; padding-bottom: 100px; }
/*#wellcome p:nth-child(2){ font-size: 22px; }*/
/*#wellcome p:nth-child(1){ padding-top: 0px; }*/

/*
 * wwa
 */
#wwa{ width: 100%; height: auto; }
#wwe-l, #wwe-r{ width: 50%; height: 500px; float: left; position: relative; }
#wwe-r{ background-color: black; }
#wwe-r p:last-child{ width: 90%; margin: 0 auto; padding-top: 40px; color: rgba(139, 139, 139, 1); }
#wwe-r i{ width: 20%; position: absolute; left: 0; right: 0; margin: auto; border-bottom: 1px solid rgba(250,250,250,0.5); }

/*
 * services
 */
#services{ padding-bottom: 100px; padding-top: 60px; }
#services-body{ padding-top: 70px; }
.sb-col{ width: 300px; min-height: 400px; border: 1px solid #e4e4e4;/*#e4e4e4;*/ /*border-top: 2px solid rgb(250,30,0);*/ background-color: #fcfcfc; }
.sb-col:hover{ border: 1px solid black; }
.sb-col-header{ position: relative; color: white; background-color: black; }
.sb-col-header i{ position: absolute; width: 70%; bottom: 0; left: 0; right: 0; margin: auto; /*border-bottom: 1px solid #e4e4e4;*/ }
/*.sb-col-header{ background-color: #303E52; color: white; }*/
.sb-col-header p{ text-transform: uppercase; text-align: center; padding: 35px 0px; letter-spacing: 1px; }
.sb-col ul{ width: width: 90%; margin: 0 auto; text-align: center; color: gray; }
.sb-col ul li{ padding: 10px 0px; font-size: 15px; }

/*
 * slide
 */
#slide{ width: 100%; height: auto; position: relative; }
.slide-box{ width: 100%; height: 450px; }

/*
 * logo
 */
#logo-wrapper{ width: 100%; min-height: 350px; margin: 0 auto; }
#logo-wrapper{ width: 90%; height: 100%; padding-bottom: 50px; }
#experience img{ width: auto; height: 70px; padding: 20px; }

/*
 * contact
 */
#contact{ width: 100%; height: 650px; }
#contact-wrapper{ width: 100%; height: 100%; position: relative; background-color: rgba(0,0,0,0.7); }
#contact-form{ width: 550px; margin: 0 auto; padding-top: 100px; }
#contact ul{ color: white; text-align: center; }
#contact-button button{ padding: 15px 40px; margin-top: 20px; outline: none; background-color: rgba(0,0,0,0.7); color: rgba(250,250,250,0.8); border: 1px solid rgba(250,250,250,0.3); }
#contact-button button:hover{ cursor: pointer; border-color: white;  color: white; }
#cb-bottom{ margin-top: 20px; color: white; text-align: center; position: absolute;  bottom: 0; left: 0; right: 0; }
#cb-bottom p{ padding: 15px 35px; display: inline-block; background-size: 20px 20px; background-position: left center; background-repeat: no-repeat; }
#cb-bottom p{ background-image: url('../img/icons/ijr-23.png'); }
#cb-bottom p:first-child{ background-image: url('../img/icons/ijr-24.png'); }
#cb-bottom p:last-child{ background-image: url('../img/icons/ijr-25.png'); }

/*
 * footer
 */
#footer-outlier{ width: 100%; }
#footer-outlier p{ background-color: #1E1E1E; color: white; text-align: center; font-size: 10pt;padding: 2px 0px; letter-spacing: 5px; }
#footer-outlier li{ height: 5px; float: left; width: 16.6%; }

#footer-ol{ width: 100%; background-color:  #212121; height: 50px; line-height: 50px; color: white; }
#footer-ol span:first-child{ color: #888888; padding-left: 50px; }
#footer-ol span:last-child{ letter-spacing: 4px; }

/*
 * responsive
 */
@media only screen and (max-width: 1030px) { 
	#header-menu img:nth-child(2){ display: none; }
}
@media only screen and (max-width: 1000px) {
	#header-body p{ width: 60%; }
	#header-bar p{ width: 60%; }
}
@media only screen and (max-width: 890px) {
	#header-menu img{ display: block; }

	#header-menu ul{ z-index: 1; /*margin-top: -220px;*/ margin-top: 60px; width: 100%; right: 0; display: none; }
	#header-menu ul li{ display: block; padding: 0; background-color: rgba(0,0,0,0.6); padding: 7px 0px; text-align: center; }
	#header-menu img:nth-child(3){ display: block; }
	#header-body p{ width: 80%; }
	#header-bar p{ width: 80%; font-size: 13pt; }
}
@media only screen and (max-width: 800px) {
	.header-line{ width: 100px; }
}
@media only screen and (max-width: 770px) {
	.subtitle-w50{ width: 80%; } 
	
	#wwe-l, #wwe-r{ width: 100%; float: none; }
}
@media only screen and (max-width: 660px) {
	.header-line{ width: 130px; }
	#header-line-l{ left: 90%; }
	#header-line-r{ right: 90%; }
}
@media only screen and (max-width: 600px) {
	.subtitle-w50{ width: 90%; }
	#contact-form{ width: 90%; } 
}
@media only screen and (max-width: 550px) {
	.header-line{ width: 100px; }
} 
@media only screen and (max-width: 500px) { 
	.title{ font-size: 17pt; }
	#header-bar p{ font-size: 11pt; }
	
	.header-line{ width: 50px; }
	#header-line-l{ left: 100%; }
	#header-line-r{ right: 100%; }
}