/* poiret-one-regular - latin */
/* @font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400; */
  /* src: url('../fonts/poiret-one-v4-latin-regular.eot'); */ /* IE9 Compat Modes */
 /*  src: local('Poiret One'), local('PoiretOne-Regular'), */
       /* url('../fonts/poiret-one-v4-latin-regular.eot?#iefix') format('embedded-opentype'),  *//* IE6-IE8 */
       /* url('../fonts/poiret-one-v4-latin-regular.woff2') format('woff2'), */ /* Super Modern Browsers */
       /* url('../fonts/poiret-one-v4-latin-regular.woff') format('woff'), */ /* Modern Browsers */
       /* url('../fonts/poiret-one-v4-latin-regular.ttf') format('truetype'); */ /* Safari, Android, iOS */
       /* url('../fonts/poiret-one-v4-latin-regular.svg#PoiretOne') format('svg'); */ /* Legacy iOS */
/* } */
@import 'https://fonts.googleapis.com/css?family=Poiret+One|Raleway';

:lang(ja){
	font-family: sans-serif;
}


.navigationBar{
	min-height: 96px;
	padding-top: 1em;
	padding-left: 0.3em;
	background-image: url("../img/jralogo750x96alpha.png");
	background-repeat: no-repeat;
	-webkit-background-size: auto auto;
	   -moz-background-size: auto;
	     -o-background-size: auto;
	        background-size: auto;
	-webkit-background-position: center;
	   -moz-background-position: center;
	     -o-background-position: center;
	        background-position: center;
	background-color: rgba(230,230, 255, 0.93);
	font-family: 'Poiret One', cursive;	
	-webkit-border-radius: 2px 2px 0px 0px;	
	   -moz-border-radius: 2px 2px 0px 0px;	
	        border-radius: 2px 2px 0px 0px;
}

:lang(ja) .navigationBar{
	font-weight: 200;
	}
:lang(ja) .fa{
	font-family: FontAwesome !important;
}

.navigationBar>ul{
	margin-top: 1.5em;
	padding-top: 0.5em;
	font-size: 1.5em;
	margin-bottom: 0;
}
.navigationBar>ul>li{
    display: inline;
    padding: 0 0.5em 0 0.5em;
    white-space: nowrap; 
    color: rgba(0,0,0,0.87);
}
@media (max-width: 750px) {
	.navigationBar{
		background-image: url("../jralogo750x96alpha.png");
		-webkit-background-size: 100% 100%;
		   -moz-background-size: 100%;
		     -o-background-size: 100%;
		        background-size: 100%;
	}
	.u-pull-right{
	float: none;
	text-align: center;
	}
	h2{
		font-size: 3rem;
	}
}

@media (max-width: 500px){
	h2{
		font-size: 3rem;
	}
	.navigationBar{
		min-height: 96px;
		padding-top: 0.1em;
		font-size: 1em;
	}
	.navigationBar>ul{
	padding-top: 0.5em;
}
.navigationBar{
		background-image: url("../jralogo750x96alpha.png");
		-webkit-background-size: 100% 100%;
		   -moz-background-size: 100%;
		     -o-background-size: 100%;
		        background-size: 100%;
	}
}
a{
	color: inherit;
	text-decoration: none;
}
/* li>a{
	text-transform: capitalize;
} */
h2,h3,h4{
	
}

body{
	min-height: 100vh;
	background: #B993D6; /* fallback for old browsers */
	/* background: -webkit-linear-gradient(to top, #B993D6 , #8CA6DB);  *//* Chrome 10-25, Safari 5.1-6 */
	/* background: linear-gradient(to top, #B993D6 , #8CA6DB); */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-image: url("../img/newback.jpg");
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    background-repeat: no-repeat;    
}
footer{
	background-color: rgba(230,230, 255, 0.93);
	text-align: right;
	font-family: 'Poiret One', cursive;
	-webkit-border-radius: 0px 0px 2px 2px;
	   -moz-border-radius: 0px 0px 2px 2px;
	        border-radius: 0px 0px 2px 2px;
	margin-top: 0vh;

}

:lang(ja) footer{
	font-weight: 200;
	}


footer>a{
	padding: 0 0.5em 0 0.5em;
}

.container{
	-webkit-box-shadow:  0 14px 43px rgba(0,0,0,0.25), 0 10px 15px rgba(0,0,0,0.22);
	   -moz-box-shadow:  0 14px 43px rgba(0,0,0,0.25), 0 10px 15px rgba(0,0,0,0.22);
	        box-shadow:  0 14px 43px rgba(0,0,0,0.25), 0 10px 15px rgba(0,0,0,0.22);
	margin-top: 2vh;
}

.cardText{
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
	opacity: 0;
	position: relative;
	z-index: 0;
	top: -15%;
	padding-left: 0.5em;
	padding-right: 0.5em;
	text-align: left;
/* 	-moz-text-align-last: center;
	text-align-last: center; */

}

.centerText{
	text-align: center !important;
}


.cardTitle{
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	opacity: 1;
	position: relative;
	z-index: 1;
	top: 15%;
	z-index: 1;
	font-family: 'Poiret One', cursive;
}
.cardTitle>a{
	pointer-events: none;
}
.panel{
	position: relative; /* So the z index property works in all browsers */
	z-index: 1;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	height: 40vh;
	margin-left: 0;
	width: 50%;
	float: left;
	text-align: center;
}
@media (max-width: 550px) {
	.panel{
		width: 100%;
		height: 6em;
	}
	.icon{
		display: none;
	}
	.cardText{
		display: none;
	}
	.cardTextButton{
		display: none;
	}
}

.panel:hover, .panel:focus, .panel:active{
	-webkit-transform: scale(1.02, 1.02);
	   -moz-transform: scale(1.02, 1.02);
	    -ms-transform: scale(1.02, 1.02);
	     -o-transform: scale(1.02, 1.02);
	        transform: scale(1.02, 1.02);
	-webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
	        border-radius: 2px;
	z-index: 3;
}
.panel:hover .cardText{
	opacity: 1;
	/* z-index: 2; */
}
.panel:focus .cardText{
	opacity: 1;
}
.panel:active .cardText{
	opacity: 1;
}
.panel:hover .icon{
	opacity: 0;
}
.panel:hover .icon{
	opacity: 0;
}.panel:hover .icon{
	opacity: 0;
}

@media (max-width: 500px) {
	.cardTitle>a{
	pointer-events: auto;
	}
	.panel:hover, .panel:focus, .panel:active{
	-webkit-transform: scale(1.02, 1.02);
	   -moz-transform: scale(1.02, 1.02);
	    -ms-transform: scale(1.02, 1.02);
	     -o-transform: scale(1.02, 1.02);
	        transform: scale(1.02, 1.02);
	-webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
	        border-radius: 2px;
	}
	.panel:hover .cardTitle{
	opacity: 1;
	}
	.panel:hover .cardTitle{
	opacity: 1;
	}.panel:hover .cardTitle{
	opacity: 1;
	}
	
}

.cardContent{
	margin: 15px;
}

#companies{
	background: #0d8df5;
	color: #F4F1F0;	       
}
/* And then we set the background of the text to the same of the panel, just in case there is overflow */
#companies>.cardText{
	background: #0d8df5;
}
#candidates{
	color: #fff;
	background: #4eabf7;
}
#candidates>.cardText{
	background: #4eabf7;
}
#coverage{
	color: #fff;
	background: #7fc0f5;
	z-index: 1;
}
#coverage>.cardText{
	background: #7fc0f5;
}
#roles{
	color: #F4F1F0;
	background: #066ec2;
}
#roles>.cardText{
	background: #066ec2;
}

.main{
	background: #f4f1f0;
	padding: 1em 1em 0em 1em;
	-webkit-border-radius: 0px 0px 0px 0px;
	   -moz-border-radius: 0px 0px 0px 0px;
	        border-radius: 0px 0px 0px 0px;
	margin-top: 0vh;
}
.middle{
	text-align: center;
}
iframe{
	width: 100%;
	height: 30vh;
	border: none;
}

/* -----------------Social Icons  */

.social{
	position: absolute;
	left: 0;
	top: 30%;
	background-color: rgba(78, 171, 247,0.8);
	text-align: right;	
	border-radius: 0 3px 3px 0;
}
.socialIcon{
	padding: 0 0.1em;
	font-size: 3em;
	display: block;
	transition: all 0.35s ease-in-out;
	color: rgba(244, 241, 240 ,1);
}

.socialIcon:hover i{
	transition: all 0.35s ease-in-out;
	transform: rotateY(360deg);	
	color: rgba(244, 241, 240 ,0.8);
}
a.socialIcon:hover{
	color: rgba(244, 241, 240 ,0.8);
}

.socialFooter{
	display: none;
}
.socialIconFooter{
	color: rgba(78, 171, 247,1);
}

@media (min-width: 1px){
	.social{
		display: none;
	}
	.socialFooter{
		display: inline-block;
	}

}


/* Overwriting skeleton pull right left just for the navigation bar. */

.u-pull-left{
	opacity: 0;
	position: absolute;
	margin-bottom: 1em;
	padding-top: 0.5em;
	z-index: 5;
}

.u-pull-right{
	position: relative;
	z-index: 6;
}
.oldu-pull-right{
	float: none;
	text-align: center;
}
/* Size Fix for non japanese buttons */
.noJp{
	font-size: 11px;
}