/*
Theme Name: セーフリッチプログラム
Theme URI: http://safe-rich.jp/
Author: Akira Hirohashi
Author URI: http://safe-rich.jp/
Description: 松下誠のセーフリッチプログラム
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saferich
Tags:

*/



*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	outline:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

body, #primary{
	width:100%;
	position:relative;
}
body, button, input, textarea{
	font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif !important;
}
a{
	text-decoration:none;
	color:#E96902;
}
ul, ol{
	list-style-type:none;
}
body.modal-open{
    overflow: hidden;
	position:fixed;
}
input{
	-webkit-appearance:none;
	-moz-appearance:none;
}
main{
	display:block;
}




#content{
	background-color:#FDFDFD;
}



/* Styles for fading out the drawer content in the "Expanding" demo */
.drawer-inner {
	-webkit-transition: opacity 0.3s ease; 
	   -moz-transition: opacity 0.3s ease; 
	    -ms-transition: opacity 0.3s ease; 
	     -o-transition: opacity 0.3s ease; 
	        transition: opacity 0.3s ease; 
}

.snapjs-expand-left .drawer-inner,
.snapjs-expand-right .drawer-inner {
	opacity: 0;
}



/* Default demo styles */
.snap-content {
  background: #BFC7D8;
}

.snap-drawers {
  background: #323949;
}

.snap-drawer {
	background: #323949;
	color: #eee;
}


.snap-drawer ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.snap-drawer li > a {
  display: block;
  border-bottom: 1px solid rgba(0,0,0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px;
  font-weight: bold;
  text-shadow: 0 1px 0 #000;
  text-decoration: none;
  color: #ccc;
  text-indent: 20px;
}

.snap-drawer p {
  opacity: 0.5;
  padding: 15px;
  font-size: 12px;
}





















#public-header{
	width:100%;
	background-color:#3695C5;
	border-bottom:solid 1px #297094;

	position:absolute;
	top:0;
	left:0;
	z-index:999;
}
#public-header > div{
	width:100%;
	max-width:980px;
	padding:10px 10px 0px;
	margin:0 auto;

	display: flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	flex-align:stretch;
	justify-content: space-between;
	-webkit-justify-content: space-between;	

}

#logo img{
	display:block;
	height:40px;
	margin-bottom:7px;
}
@media screen and (max-width: 480px) {
	#logo img{
		height:30px;
		margin-top:5px;
		margin-bottom:7px;
	}
}




#main-image{
	position:relative;
	width:100%;
	height:500px;
	background:url(images/mainimage-02.jpg) no-repeat;
	background-color:#D8EDFF;
	background-size:cover;
	background-position:center;
	margin-bottom:30px;
}
@media screen and (max-width: 768px) {
	#main-image{
		height:400px;
	}
}
@media screen and (max-width: 480px) {
	#main-image{
		height:300px;
	}
}

#survice-motto{
	width:100%;
	height:100%;	
	display: flex;
	margin: 0 auto;
	max-width:980px;
	padding:10px;
}

#motto{
	display:block;
	width:100%;
	max-width:800px;
	padding:10px;
	margin:auto;
}
@media screen and (max-width: 480px) {
	#motto{
	}
}


/*--------------------------------------------------------------
# Subscribe Bar
--------------------------------------------------------------*/

#subscribe-bar{
	width:100%;
	position:absolute;
	bottom:0;
	background-color:#FAFAFA;
	background-color:rgba(0,0,0,0.4);
	border-top:solid 1px #353535;
	border-bottom:solid 1px #353535;
	z-index:9999;
}

#subscribe-bar > div{
	width:100%;
	padding:10px;
	max-width:980px;
	margin:0 auto;
}
#subscribe-bar form{
	width:100%;
	display: flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:nowrap;
	flex-direction: row;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	justify-content: space-between;
	-webkit-justify-content: space-between;	
}
#subscribe-bar input.email{
	display:block;
	width:70%;
	background-color:#FFF;
	border:solid 1px #D3D3D3;
	font-size:16px;
	padding:10px;
	border-radius:5px 0 0 5px;
	background:url(images/mail-icon.svg) no-repeat #FFF;
	padding-left:50px;
	background-size:30px 30px;
	background-position:10px center;
}
#subscribe-bar input.submit{
	display:block;
	width:30%;
	border:0 none;
	background-color:transparent;
	color:#FFA22D;
	color:#FFF;
	font-weight:bold;
	border-radius:0 5px 5px 0;
	border:solid 1px #FFA22D;
	border:solid 1px #FFF;
	cursor:pointer;
	transition:0.3s ease-in-out;
}
#subscribe-bar input.submit:hover{
	background-color:#FFA22D;
	border:solid 1px #FFA22D;
	color:#FFF;
}
@media screen and (max-width: 480px) {
	#subscribe-bar input.submit{
		font-size:10px;
	}
}


#survice-feature, #subscribe-banner{
	width:100%;
	margin-bottom:20px;
}
#survice-feature img, #subscribe-banner img{
	display:block;
	width:100%;
}


















/*--------------------------------------------------------------
# Header Navigation
--------------------------------------------------------------*/

#header-navi{
	list-style-type:none;
	display: flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	flex-align:stretch;
	justify-content: space-between;
	-webkit-justify-content: space-between;	
}
#header-navi li{
	font-size:12px;
	color:#666;
	margin-left:10px;	
}
#header-navi li a{
	display:block;
	padding:8px 20px 8px;
	text-decoration:none;
	color:#FFF;
}
#header-navi li a:hover{
	color:#FF3B49;
}

#header-navi li.tologin a{
	padding:8px 20px 8px;
	border:solid 1px #DADADA;
	border-radius:5px;
	color:#FFF;
	transition:0.3s ease-in-out;
}
#header-navi li.tologin a:hover{
	border:solid 1px #F7931E;
	background-color:#F7931E;
}
@media screen and (max-width: 480px) {
	#header-navi li{
		font-size:10px;
		padding:5px;
		margin-left:5px !important;
	}
	#header-navi li.tologin a{
		padding:8px 5px 8px;
	}
	
	#header-navi li.indicator{
		display:none;
	}
	#header-navi li.product{
		display:none;
	}
	#header-navi li.requirement{
		display:none;
	}
}




#survice-benefit{
	max-width:980px;
	width:100%;
	margin:0 auto 30px;
}
#survice-benefit img{
	display:block;
	width:100%;
	margin:0 auto;
}


#our-survices{
	max-width:980px;
	padding:40px 10px;
	margin:0 auto;
}

.gallery-bullet{
	display:flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-bottom:30px;
}
.bullet{
  text-decoration:none;
  color:#333;
  display:block;
  min-height:10em;
  width:32%;
  padding:1.5em;
  margin-bottom:30px;
  margin-right:2%;
}
.bullet:nth-child(3n){
	margin-right:0;
}
@media screen and (max-width: 768px){
	.bullet{
		width:100%;
		margin-right:0;
	}
}

.bullet img{
	display:block;
	width:50px;
	height:50px;
	margin:0 auto 20px;
}

.bullet .bullet-title{
	font-weight:normal;
	font-size:16px;
	text-align:center;
	margin-bottom:1.2em;
}

#drawer-social-share{
	padding:10px;
	background-color:#FFF;
	margin:10px 10px 20px;
}

.drawer-menu-title{
	color:#FFF;
	margin-bottom:1em;
	border-bottom:solid 1px rgba(255, 255, 255, 0.5);
}
.drawer-menu-list{
	margin-bottom:15px;
}
.drawer-menu-list li{
	font-size:14px;
}
.drawer-menu-list li > a {
  display: block;
  border-bottom: 1px solid rgba(0,0,0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px;
  font-weight: bold;
  text-shadow: 0 1px 0 #000;
  text-decoration: none;
  color: #ccc;
  text-indent: 20px;
}

.drawer-login{
	display:block;
	width: calc(100% - 20px);
	color:#FFF;
	text-align:center;
	padding:10px;
	border:solid 1px #FFF;
	margin:10px;
	transition:0.3s ease-in-out;
}
.drawer-login:hover{
	color:#FFF;
	border:solid 1px #F7931E;
	background-color:#F7931E;
}



#reason-title{
	width:100%;
	max-width:980px;
	margin:0 auto 30px;
	text-align:center;
	padding:20px 0;
	font-size:28px;
}

#reason > div{
	width:100%;
	max-width:980px;
	padding:10px;
	display:flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin:0 auto 20px;
}

.reason{
  text-decoration:none;
  color:#333;
  display:block;
  min-height:10em;
  width:22.75%;
  margin-right:3%;
  margin-bottom:30px;
}
.reason:nth-child(4n){
	margin-right:0;
}
@media screen and (max-width: 768px){
	.reason{
		width:100%;
		margin-right:0;
	}
}

.reason img{
	display:block;
	width:50px;
	height:50px;
	margin:0 auto 20px;
}
.reason .reson-title{
	font-size:16px;
	text-align:center;
	line-height:1.6;
	margin-bottom:1.2em;
}
.reason p{
	font-size:14px;
}




#lecturer{
	width:100%;
	background-color:#FFF;
}

#lecturer > div{
	width:100%;
	max-width:980px;
	margin:0 auto 30%;
	padding:50px 10px;
	display:flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;

	justify-content: space-between;	
}
#lecturer h1{
	width:100%;
	margin-bottom:30px;
}
#lecturer section{
	width:47%;
	margin-bottom:40px;
}
@media screen and (max-width: 768px){
	#lecturer section{
		width:100%;
		margin-bottom:40px;
	}
}
#lecturer section img{
	display:block;
	width:100%;
	margin:0 auto;
}
.lecturer-portrait{
	max-width:200px;
}




#public-footer{
	width:100%;
	background-color:#F3F3F3;
	background-color:#2651B5;
	background-color:#203748;
}
#public-footer > div{
	width:100%;
	max-width:980px;
	padding:10px;
	margin:0 auto;
}

#social-bookmark{
	width:100%;
	background-color:#346e8c;
	background-color:#DADADA;
	padding-top:10px;
	border-top:solid 3px #203748;
}
#social-boookmark-list, #footer-menu-container, #footer-navigation{
	width:100%;
	max-width:980px;
	padding:10px;
	display:flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin:0 auto 20px;
}
#social-boookmark-list li{
	width:120px;
	height:80px;
	border-radius:10px;
	margin-right:10px;
	margin-bottom:10px;
	background-color:#FFF;
}

#footer-navigation{
}
#footer-navigation li{
	font-size:12px;
	color:#FFF;
	border-right:solid 1px #FFF;
	padding:0 15px;
}
#footer-navigation li:first-child{
	padding-left:0;
}
#footer-navigation li:last-child{
	border:0 none;
}
#footer-navigation li a{
	color:#FFF;
	transition:0.2s ease-in-out;
}
#footer-navigation li a:hover{
	color:#F7931E;
}


.footer-menu{
	width:23%;
	margin-right:2%;
	margin-bottom:40px;
}
.footer-menu:nth-child(4n){
	margin-right:0;
}
@media screen and (max-width: 768px){
	.footer-menu{
		width:48%;
		margin-right:2%;
	}
	.footer-menu:nth-child(2n){
		width:48%;
		margin-right:0;
	}	
}
@media screen and (max-width: 480px){
	.footer-menu{
		width:100%;
		margin-right:0;
	}
	.footer-menu:nth-child(2n){
		width:100%;
	}	
}
.footer-menu a{
	font-size:12px;
	color:#FFF;
}
.footer-menu a:hover{
	color:#FFF;
}

#footer-company-logo{
	display:block;
	width:100px;
	margin-bottom:10px;
}
.copyright{
	color:#FFF;
	font-size:10px;
	letter-spacing:1px;
}





.edit-link a{
	font-size:14px;
	padding:5px 10px;
	background-color:#FF7900;
	border-radius:5px;
	color:#FFF;
}









/*--------------------------------------------------------------
# Rules PrivacyPolicy
--------------------------------------------------------------*/

.rules{
	font-size:14px;
	line-height:1.6;
}
.rules h1{
	font-size:24px;
	margin-bottom:1.3em;
	color:#333;
	font-weight:normal;
}
@media screen and (max-width: 480px){
	.rules h1{
		font-size:18px;
	}
}

.rules h2{
	font-size:14px;
	margin-bottom:8px;
	margin-top:3em;
	color:#555;
}
.rules h3{
	font-size:14px;
	margin-bottom:8px;
	margin-top:3em;
	color:#555;
}
.rules p{
	font-size:14px;
	margin-bottom:1.5em;
	color:#666;
	line-height:1.7;
}









/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/

#main{
	width:100%;
	max-width:980px;
	margin:80px auto 30px;
	padding:60px 80px;
	border:solid 1px #DADADA;
	background-color:#FFF;
}
@media screen and (max-width: 768px){
	#main{
		margin:70px auto 30px;
		padding:50px 30px;
	}
}
@media screen and (max-width: 480px){
	#main{
		margin:60px auto 30px;
		padding:40px 10px;
	}
}





/*--------------------------------------------------------------
# Youtube
--------------------------------------------------------------*/


.youtube-container{
	position:relative;
	padding-top: 56.25%;
	position:relative;
	width:100%;
	margin-bottom:40px;
}
/*
.youtube-container:after{
	display:block;
	position:absolute;
	top:0;
	content:"";
	z-index:99;
	width:100%;
	height:100%;
}
*/
.youtube-container  iframe{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important
}




/*--------------------------------------------------------------
# Commerce
--------------------------------------------------------------*/

.commerce-title, .company-title{
	font-weight:normal;
	margin-bottom:2em;
}
.commerce-table, .company-table{
	width:100%;
	border-collapse:collapse;
}
.commerce-table th, .commerce-table td,
.company-table th, .company-table td{
	border-bottom:solid 1px #DADADA;
	padding:20px;
}
.commerce-table th, .company-table th{
	width:20%;
	text-align:right;
	font-size:12px;
	font-weight:normal;
	color:#333;
}
.commerce-table td,  .company-table td{
	width:80%;
	font-size:13px;
	line-height:1.9;
}
@media screen and (max-width: 480px){
	.commerce-title,  .company-title{
		font-size:18px;
	}
	.commerce-table th, .commerce-table td,
	.company-table th, .company-table td{
		font-size:10px;
		padding:20px 10px;
	}
}

















/*--------------------------------------------------------------
# Modal
--------------------------------------------------------------*/


#modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
	z-index:99999;
	display:none;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
}
#modal::-webkit-scrollbar, #modal::scrollbar {
	display: none;
}
#video-area{
	position:relative;
	max-width:960px;
	width:100%;
	margin:10px auto;
	padding-top:40px;
}
#modal-close{
	position:absolute;
	display:block;
	width:50px;
	height:50px;
	top:30px;
	right:0px;
	background:url(images/close.svg) no-repeat #666; 
	background-size:80% 80%;
	background-position:center;
	border:0 none;
	cursor:pointer;
	transition:0.3s ease-in-out;
	z-index:999999;
}
#modal-close:hover{
	background-color:#A9A9A9;
}

























/*--------------------------------------------------------------
# Animation
--------------------------------------------------------------*/

.shake{
-webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center;
-webkit-animation-name: shake-base; -ms-animation-name: shake-base; animation-name: shake-base; -webkit-animation-duration: 100ms; -ms-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; }
@-webkit-keyframes shake-base { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  2% { -webkit-transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
  4% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); }
  6% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
  8% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
  10% { -webkit-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  12% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  14% { -webkit-transform: translate(1.5px, -2.5px) rotate(-0.5deg); }
  16% { -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg); }
  18% { -webkit-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  20% { -webkit-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  22% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
  24% { -webkit-transform: translate(-1.5px, -2.5px) rotate(-1.5deg); }
  26% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  28% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  30% { -webkit-transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
  32% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
  34% { -webkit-transform: translate(-1.5px, 0.5px) rotate(-1.5deg); }
  36% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
  38% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  40% { -webkit-transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
  42% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  44% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  46% { -webkit-transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
  48% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  50% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
  52% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
  54% { -webkit-transform: translate(1.5px, 0.5px) rotate(-1.5deg); }
  56% { -webkit-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }
  58% { -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
  60% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  62% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-0.5deg); }
  64% { -webkit-transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  66% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  68% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
  70% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-1.5deg); }
  72% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
  74% { -webkit-transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
  76% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
  78% { -webkit-transform: translate(1.5px, -2.5px) rotate(0.5deg); }
  80% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
  82% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
  84% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  86% { -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  88% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  90% { -webkit-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }
  92% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  94% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  96% { -webkit-transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
  98% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); } }

@-ms-keyframes shake-base {
0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  2% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  4% { -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  6% { -ms-transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  8% { -ms-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  10% { -ms-transform: translate(1.5px, -2.5px) rotate(-1.5deg); }
  12% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  14% { -ms-transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  16% { -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  18% { -ms-transform: translate(1.5px, -0.5px) rotate(-1.5deg); }
  20% { -ms-transform: translate(-1.5px, -2.5px) rotate(-0.5deg); }
  22% { -ms-transform: translate(-0.5px, -0.5px) rotate(-0.5deg); }
  24% { -ms-transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  26% { -ms-transform: translate(-1.5px, -2.5px) rotate(0.5deg); }
  28% { -ms-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  30% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
  32% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  34% { -ms-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  36% { -ms-transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
  38% { -ms-transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
  40% { -ms-transform: translate(1.5px, -1.5px) rotate(0.5deg); }
  42% { -ms-transform: translate(-1.5px, 1.5px) rotate(-0.5deg); }
  44% { -ms-transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
  46% { -ms-transform: translate(1.5px, 0.5px) rotate(0.5deg); }
  48% { -ms-transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
  50% { -ms-transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
  52% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  54% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
  56% { -ms-transform: translate(0.5px, -1.5px) rotate(0.5deg); }
  58% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  60% { -ms-transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
  62% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  64% { -ms-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  66% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  68% { -ms-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  70% { -ms-transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
  72% { -ms-transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
  74% { -ms-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  76% { -ms-transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  78% { -ms-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  80% { -ms-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }
  82% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
  84% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  86% { -ms-transform: translate(-0.5px, 0.5px) rotate(-1.5deg); }
  88% { -ms-transform: translate(0.5px, -1.5px) rotate(0.5deg); }
  90% { -ms-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  92% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  94% { -ms-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }
  96% { -ms-transform: translate(1.5px, 1.5px) rotate(0.5deg); }
  98% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); } }

@keyframes shake-base { 0% { transform: translate(0px, 0px) rotate(0deg); }
  2% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  4% { transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
  6% { transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  8% { transform: translate(-1.5px, -2.5px) rotate(0.5deg); }
  10% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
  12% { transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
  14% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  16% { transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  18% { transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  20% { transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
  22% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
  24% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  26% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  28% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
  30% { transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
  32% { transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  34% { transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
  36% { transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  38% { transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  40% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
  42% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
  44% { transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
  46% { transform: translate(0.5px, -2.5px) rotate(0.5deg); }
  48% { transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  50% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
  52% { transform: translate(1.5px, 0.5px) rotate(0.5deg); }
  54% { transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
  56% { transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
  58% { transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
  60% { transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  62% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
  64% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
  66% { transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  68% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
  70% { transform: translate(0.5px, 1.5px) rotate(0.5deg); }
  72% { transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
  74% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  76% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
  78% { transform: translate(-0.5px, -2.5px) rotate(0.5deg); }
  80% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  82% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
  84% { transform: translate(-1.5px, -1.5px) rotate(-0.5deg); }
  86% { transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  88% { transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
  90% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  92% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  94% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
  96% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
  98% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); } 
}



















/*--------------------------------------------------------------
# Video Player
--------------------------------------------------------------*/

#video-player{
	width:100%;
	max-width:800px;
	margin:0 auto;
	padding:30px;
	background-color:#353535;
}
@media screen and (max-width: 480px) {
	#video-player{
		padding:10px;
	}
}
#video-range{
	display:block;
	width:100%;
	cursor:pointer;
	-webkit-appearance: none;
	width: 100%;
	 margin: 20px auto 30px;
}
#video-range:focus {
  outline: none;
}
#video-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  box-shadow: 0.3px 0.3px 0px #000000, 0px 0px 0.3px #0d0d0d;
  background: #3071a9;
  background: #FAFAFA;
  border-radius: 0px;
  border: 0.2px solid #010101;
}
#video-range::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #fffffd;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14.65px;
}
/*
#video-range:focus::-webkit-slider-runnable-track {
 	background: #72a8d7;
	background: #FEFFDC;
}*/
#video-range::-moz-range-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  box-shadow: 0.3px 0.3px 0px #000000, 0px 0px 0.3px #0d0d0d;
  background: #3071a9;
  border-radius: 0px;
  border: 0.2px solid #010101;
}
#video-range::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #fffffd;
  cursor: pointer;
}
#video-range::-ms-track {
  width: 100%;
  height: 7.1px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
#video-range::-ms-fill-lower {
  background: #173752;
  border: 0.2px solid #010101;
  border-radius: 0px;
  box-shadow: 0.3px 0.3px 0px #000000, 0px 0px 0.3px #0d0d0d;
}
#video-range::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 0px;
  box-shadow: 0.3px 0.3px 0px #000000, 0px 0px 0.3px #0d0d0d;
}
#video-range::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #fffffd;
  cursor: pointer;
  height: 7.1px;
}
#video-range:focus::-ms-fill-lower {
  background: #3071a9;
}
#video-range:focus::-ms-fill-upper {
  background: #72a8d7;
}

#video-player button{
	width:40px;
	height:40px;
	border:0 none;
//	background:url(images/play.svg) no-repeat;
	cursor:pointer;
	background-color:transparent;
}





#video-play{
	margin-right:10px;
	background:url(images/play.svg) no-repeat;
}
.playbutton-play{
	background-image:url(images/play.svg) !important;
}
.playbutton-pause{
	background-image:url(images/pause.svg) !important;
}
#video-play-panel{
	width:100%;
	display: flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: space-between;
	-webkit-justify-content: space-between;	
	margin-bottom:15px;
}
#video-play-information{
	display: flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;	
	margin-bottom:10px;
}
#video-time{
	height:44px;
	line-height:44px;
	font-size:12px;
	border-radius:10px;
	color:#FFF;
}
#video-volume{
	width:240px;
	height:45px;
	border:solid 1px #111;
	border-radius:5px;
	background-color:#454545;
	padding:10px;
}
@media screen and (max-width: 480px) {
	#video-volume{
		display:none;
	}
}


#video-volume-range{
	width:165px;
	cursor:pointer;
	-webkit-appearance: none;
}
#video-volume-range:focus {
  outline: none;
}
#video-volume-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: #FAFAFA;
  border-radius: 3px;
  margin-top:-18px;
}
#video-volume-range::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  background: #fffffd;
  cursor: pointer;
  -webkit-appearance: none;
   margin-top: -5px;
}
/*
#video-volume-range:focus::-webkit-slider-runnable-track {
 	background: #72a8d7;
	background: #FEFFDC;
}*/
#video-volume-range::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  box-shadow: 0.3px 0.3px 0px #000000, 0px 0px 0.3px #0d0d0d;
  background: #3071a9;
  border-radius: 0px;
  border: 0.2px solid #010101;
}
#video-volume-range::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
 height: 20px;
  width: 20px;
  border-radius: 20px;
  background: #fffffd;
  cursor: pointer;
}
#video-volume-range::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
#video-volume-range::-ms-fill-lower {
  background: #173752;
  border: 0.2px solid #010101;
  border-radius: 0px;
  box-shadow: 0.3px 0.3px 0px #000000, 0px 0px 0.3px #0d0d0d;
}
#video-volume-range::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 0px;
  box-shadow: 0.3px 0.3px 0px #000000, 0px 0px 0.3px #0d0d0d;
}
#video-volume-range::-ms-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 1px solid #000000;
	height: 20px;
	width: 20px;
	border-radius: 20px;
	background: #fffffd;
	cursor: pointer;
}
#video-volume-range:focus::-ms-fill-lower {
  background: #3071a9;
}
#video-volume-range:focus::-ms-fill-upper {
  background: #72a8d7;
}






















#video-function-area{
	width:100%;
	display: flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: space-between;
	-webkit-justify-content: space-between;	
	margin-bottom:10px;
}

#video-function{
	width:320px;
	display: flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;	
	margin-bottom:10px;
}


#video-jump{
	margin-right:20px;
}
#video-10sec-back{
	background:url(images/10back.svg) no-repeat;
	margin-right:10px;
}
#video-30sec-forward{
	background:url(images/30for.svg) no-repeat;
}


#video-speed{
	margin-right:10px;
}
#video-slow{
	background:url(images/slow.svg) no-repeat;
}
#video-normal{
	background:url(images/normal.svg) no-repeat;
}
#video-fast{
	background:url(images/fast.svg) no-repeat;	
}
#video-playback{
	height:44px;
	line-height:44px;
	color:#FFF;
}


#document-download{
	display:inline-block;
	width:40px;
	height:40px;
	margin-left:5px;
	background:url(images/document-icon.svg) no-repeat;
	display:none;
}

#report-download{
	display:inline-block;
	width:40px;
	height:40px;
	margin-left:5px;
	background:url(images/report-icon.svg) no-repeat;
	display:none;
}
#cycle-download{
	display:inline-block;
	width:40px;
	height:40px;
	margin-left:5px;
	background:url(images/cyclesheet-icon.svg) no-repeat;
	display:none;
}
#sim-download{
	display:inline-block;
	width:40px;
	height:40px;
	margin-left:5px;
	background:url(images/sheet-icon.svg) no-repeat;
	display:none;
}
#refsim-download{
	display:inline-block;
	width:40px;
	height:40px;
	margin-left:5px;
	background:url(images/sheet-icon.svg) no-repeat;
	display:none;
}







#play-consecutive{
	background:url(images/consecutive.svg) no-repeat;
}
#play-consecutive.play-consecutive-on{
	border-radius:5px;	
	background:url(images/consecutive.svg) no-repeat;
	background-color:#FFF;
}

#video-fullscreen{
	background:url(images/full.svg) no-repeat;
}
#video-subtitle{
	background:url(images/cc.svg) no-repeat;	
}
#video-subtitle.video-subtitle-on{
	border-radius:5px;
	background:url(images/cc.svg) no-repeat;	
	background-color:#FFF;
}


#video-up{
	width:20px !important;
	height:20px !important;
	background:url(images/up.svg) no-repeat;	
}
#video-down{
	width:20px !important;
	height:20px !important;
	background:url(images/down.svg) no-repeat;	
}


#player{
	position:relative;
	overflow:hidden;
}
#video{
	cursor:pointer;
}


#video-overlay{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	cursor:pointer;
	//background-color:#E8AAAB;
}
#video-overlay-subtitle{
	position:absolute;
	top:0;
	left:0;	
	width:100%;
	height:100%;
}
#video-overlay p{
	position:absolute;
	bottom:0;
	width:100%;
	padding:20px;
	color:#FFF;
	text-align:center;
	background-color:rgba(0,0,0, 0.4);
}

#video-play-response{
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:200px;
	height:200px;
	z-index:9999;
	display:none;
	background:url(images/response-play.svg) no-repeat;
	opacity:0.5;
}
@media screen and (max-width: 480px) {
	#video-play-response{
		width:100px;
		height:100px;
	}
}

#gallery-loader{
	display:block;
	position:fixed; top:0; bottom:0; left:0; right:0; margin:auto;
	height:300px;
	width:300px;
}
#video-loader{
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:200px;
	height:200px;
	z-index:9999;
}
response-play{
	background:url(images/response-play.svg) no-repeat !important;
}
.response-pause{
	background:url(images/response-pause.svg) no-repeat !important;
}
.scale-up{
    animation-name: scaleup;
    animation-duration: 1.0s;
    animation-iteration-count:1;
    animation-timing-function:ease-in-out;
    animation-direction: alternate;
    animation-delay: 0s;
    -webkit-animation-name: scaleup;
    -webkit-animation-duration: 1.0s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0s;
}
@-webkit-keyframes scaleup {
    0% {       opacity:0.5;    }
    90% {        opacity:0;    }
    100% {       opacity:0; -webkit-transform: scale(3.0);   }
}
@keyframes scaleup {
	0% {	opacity:0.5; }
    90% {		opacity:0;    }
    100% {	opacity:0; transform: scale(3.0);   }
}






.sk-fading-circle {
  width: 100%;
  height: 100%;
  position: relative;
}

.sk-fading-circle .sk-circle, .sk-fading-circle .sk-circle-black {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #FFF;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle-black:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #000;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}












.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFB833;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}
























/*--------------------------------------------------------------
# Subjects
--------------------------------------------------------------*/


.subject-container{
	display:flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-bottom:30px;
	margin-top:30px;
}

article.subjects{
	position:relative;
	width:30%;
	margin-right:5%;
	margin-bottom:20px;
	border-radius:5px;
//	border:solid 1px #DADADA;
	background-color:#FFF;
//	padding:15px;
	transition:0.3s ease-in-out;
}
article.subjects:nth-child(3n){
	margin-right:0;
}
article.subjects:hover{
}

article.subjects .entry-footer .entry-title{
	font-size:14px;
	color:#3F1801;
	border:0 none;
	text-align:center;
}

article.subjects .entry-header a{
	transition:0.3s ease-in-out;
}
article.subjects .entry-header a:hover{
	opacity:0.7;
}
article.subjects  img{
	display:block;
	width:100%;
	max-width:180px;
	height:auto;
	margin:0 auto 20px;
}


article.subjects:nth-child(3n){
	margin-right:0;
}
/*
@media screen and (max-width: 600px){
	article.subjects{
		width:100%;
		float:none;
		margin-right:0;
	}
	article.subjects:nth-child(3n){
		margin-right:0;
	}
}
*/


.backto{
	display:block;
	width:calc(100% - 20px);
	max-width:980px;
	padding:10px 0;
	border:solid 1px #5799C4;
	border-radius:5px;
	margin:0 auto 20px;
	color:#5799C4;
	text-align:center;
	transition:0.2s ease-in-out;
}
.backto:hover{
	color:#FFF;
	background-color:#5799C4;
}
@media screen and (max-width: 480px) {
	.backto{
		margin-bottom:10px;
	}
}



.toinquiry{
	display:block;
	width:calc(100% - 20px);
	max-width:980px;
	padding:10px 0;
	border:solid 1px #F7931E;
	border-radius:5px;
	margin:0 auto 20px;
	color:#F7931E;
	text-align:center;
	transition:0.2s ease-in-out;
}
.toinquiry:hover{
	color:#FFF;
	background-color:#F7931E;
}
@media screen and (max-width: 480px) {
	.toinquiry{
		margin-bottom:10px;
	}
}

.password-undelivered{
	display:block;
	width:100% !important;
	background-color:#FF2C30 !important;
	color:#FFF;
	background-position:-160% center  !important;
	margin-bottom:15px;
}





















#requirement section{
	margin-bottom:4em;
}
#requirement section p{
	font-size:14px;
line-height:1.8;
	margin-bottom:1.4em;
}
#requirement section h1{
	font-size:16px;
	margin-bottom:0.8em;
	color:#333;
	border-bottom:solid 1px #333;
}
#requirement section h2{
	font-size:15px;
	margin-bottom:0.6em;
	color:#555;
}
#requirement section ul{
	list-style-type:disc;
}
#requirement section li{
	font-size:14px;
	margin-left:3em;
	color:#333;
	margin-bottom:0.8em;
}













/*--------------------------------------------------------------
# Weekly Single
--------------------------------------------------------------*/


article.weekly .entry-title{
	font-size:16px;
	margin-bottom:10px;
}
article.weekly date{
	background:url(images/time-icon.svg) no-repeat;
	font-size:10px;
	color:#666;
	padding-left:1.6em;
}
@media screen and (max-width: 768px){
	article.weekly .entry-title{
		font-size:14px;
	}
	article.weekly date{
		font-size:8px;
	}
}
@media screen and (max-width: 480px){
	article.weekly .entry-title{
		font-size:12px;
	}
	article.weekly date{
		font-size:8px;
	}
}







/*--------------------------------------------------------------
# Weekly
--------------------------------------------------------------*/


#weekly-container{
	display:flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-bottom:30px;
}
#weekly-container article.weekly{
	width:22.75%;
	margin-right:3%;
	margin-bottom:20px;
}
#weekly-container article.weekly .entry-header{
	cursor:pointer;
}
#weekly-container article.weekly img{
	display:block;
	width:100%;
	max-width:140px;
	margin:0 auto 20px;
}
#weekly-container article.weekly:nth-child(4n){
	margin-right:0;
}
#weekly-container article.weekly .entry-title{
	font-size:14px;
	margin-bottom:10px;
}
#weekly-container article.weekly date{
	background:url(images/time-icon.svg) no-repeat;
	font-size:10px;
	color:#666;
	padding-left:1.6em;
}
@media screen and (max-width: 768px){
	#weekly-container article.weekly .entry-title{
		font-size:10px;
	}
	#weekly-container article.weekly date{
		font-size:8px;
	}
}









/*--------------------------------------------------------------
# Explain
--------------------------------------------------------------*/


#explain-container{
	display:flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-bottom:30px;
}
#explain-container article.explain{
	width:22.75%;
	margin-right:3%;
	margin-bottom:20px;
}
#explain-container article.explain .entry-header{
	cursor:pointer;
}
#explain-container article.explain img{
	display:block;
	width:100%;
	max-width:140px;
	margin:0 auto 20px;
}
#explain-container article.explain:nth-child(4n){
	margin-right:0;
}
#explain-container article.explain .entry-title{
	font-size:14px;
	margin-bottom:10px;
}
#explain-container article.explain date{
	background:url(images/time-icon.svg) no-repeat;
	font-size:10px;
	color:#666;
	padding-left:1.6em;
}
@media screen and (max-width: 768px){
	#explain-container article.explain .entry-title{
		font-size:10px;
	}
	#explain-container article.explain date{
		font-size:8px;
	}
}














/*--------------------------------------------------------------
# Lookback Single
--------------------------------------------------------------*/


article.lookback .entry-title{
	font-size:16px;
	margin-bottom:10px;
}
article.lookback date{
	background:url(images/time-icon.svg) no-repeat;
	font-size:10px;
	color:#666;
	padding-left:1.6em;
}
@media screen and (max-width: 768px){
	article.lookback .entry-title{
		font-size:14px;
	}
	article.lookback date{
		font-size:8px;
	}
}
@media screen and (max-width: 480px){
	article.lookback .entry-title{
		font-size:12px;
	}
	article.lookback date{
		font-size:8px;
	}
}







/*--------------------------------------------------------------
# Lookback
--------------------------------------------------------------*/


#lookback-container{
	display:flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-bottom:30px;
}
#lookback-container article.lookback{
	width:22.75%;
	margin-right:3%;
	margin-bottom:20px;
}
#lookback-container article.lookback .entry-header{
	cursor:pointer;
}
#lookback-container article.lookback img{
	display:block;
	width:100%;
	max-width:140px;
	margin:0 auto 20px;
}
#lookback-container article.lookback:nth-child(4n){
	margin-right:0;
}
#lookback-container article.lookback .entry-title{
	font-size:14px;
	margin-bottom:10px;
}
#lookback-container article.lookback date{
	background:url(images/time-icon.svg) no-repeat;
	font-size:10px;
	color:#666;
	padding-left:1.6em;
}
@media screen and (max-width: 768px){
	#lookback-container article.lookback .entry-title{
		font-size:10px;
	}
	#lookback-container article.lookback date{
		font-size:8px;
	}
}



































/*--------------------------------------------------------------
# Magazine Single
--------------------------------------------------------------*/


article.magazine .entry-title{
	font-size:16px;
	margin-bottom:10px;
}
article.magazine date{
	background:url(images/time-icon.svg) no-repeat;
	font-size:10px;
	color:#666;
	padding-left:1.6em;
}
@media screen and (max-width: 768px){
	article.magazine .entry-title{
		font-size:14px;
	}
	article.magazine date{
		font-size:8px;
	}
}
@media screen and (max-width: 480px){
	article.magazine .entry-title{
		font-size:12px;
	}
	article.magazine date{
		font-size:8px;
	}
}




/*--------------------------------------------------------------
# Maganine
--------------------------------------------------------------*/


#magazine-container{
	display:flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-bottom:30px;
}
#magazine-container article.magazine{
	width:22.75%;
	margin-right:3%;
	margin-bottom:20px;
}
#magazine-container article.magazine .entry-header{
	cursor:pointer;
}
#magazine-container article.magazine img{
	display:block;
	width:100%;
	max-width:140px;
	margin:0 auto 20px;
}
#magazine-container article.magazine:nth-child(4n){
	margin-right:0;
}
#magazine-container article.magazine .entry-title{
	font-size:14px;
	margin-bottom:10px;
}
#magazine-container article.magazine date{
	background:url(images/time-icon.svg) no-repeat;
	font-size:10px;
	color:#666;
	padding-left:1.6em;
}
@media screen and (max-width: 768px){
	#magazine-container article.magazine .entry-title{
		font-size:10px;
	}
	#magazine-container article.magazine date{
		font-size:8px;
	}
}











/*--------------------------------------------------------------
# Consult Single
--------------------------------------------------------------*/


article.consult .entry-title{
	font-size:16px;
	margin-bottom:10px;
}
article.consult date{
	background:url(images/time-icon.svg) no-repeat;
	font-size:10px;
	color:#666;
	padding-left:1.6em;
}
@media screen and (max-width: 768px){
	article.consult .entry-title{
		font-size:14px;
	}
	article.consult date{
		font-size:8px;
	}
}
@media screen and (max-width: 480px){
	article.consult .entry-title{
		font-size:12px;
	}
	article.consult date{
		font-size:8px;
	}
}




/*--------------------------------------------------------------
# Consult
--------------------------------------------------------------*/


#consult-container{
	display:flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-bottom:30px;
}
#consult-container article.consult{
	width:22.75%;
	margin-right:3%;
	margin-bottom:20px;
}
#consult-container article.consult .entry-header{
	cursor:pointer;
}
#consult-container article.consult img{
	display:block;
	width:100%;
	max-width:140px;
	margin:0 auto 20px;
}
#consult-container article.consult:nth-child(4n){
	margin-right:0;
}
#consult-container article.consult .entry-title{
	font-size:14px;
	margin-bottom:10px;
}
#consult-container article.consult date{
	background:url(images/time-icon.svg) no-repeat;
	font-size:10px;
	color:#666;
	padding-left:1.6em;
}
@media screen and (max-width: 768px){
	#consult-container article.consult .entry-title{
		font-size:10px;
	}
	#consult-container article.consult date{
		font-size:8px;
	}
}



























#youtube-modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
	z-index:99999;
	display:none;
}
#youtube-modal-close{
	position:fixed;
	display:block;
	width:50px;
	height:50px;
	top:10px;
	right:0px;
	background:url(images/close.svg) no-repeat #666; 
	background-size:80% 80%;
	background-position:center;
	border:0 none;
	cursor:pointer;
	transition:0.3s ease-in-out;
	z-index:999999;
}



#youtube-container{
	position:relative;
	padding-top: 56.25%;
	width:100%;
	margin-bottom:40px;
}
#youtube-container  iframe{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important
}

#youtube-video{
	max-width:980px;
	width:100%;
	margin:0 auto;
	padding-top:40px;
}
#youtube-entry-title{
	font-size:16px;
	color:#FFF;
}
#youtube-entry-date{
	font-size:10px;
	color:#FFF;
	margin-bottom:15px;	
}






/*--------------------------------------------------------------
# Help modal
--------------------------------------------------------------*/


#help-modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
	z-index:99999;
	display:none;
}
#help-modal-wrapper{
	width:100%;
	height:100%;
	padding:10px;	
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
}
#help-modal-wrapper::-webkit-scrollbar{
	display:none;
}
#help-modal-wrapper::scrollbar{
	display:none;
}



#help-article{
	width:100%;
	max-width:980px;
	padding:110px 100px;
	background-color:#FFF !important;
	margin:30px auto;
}
#help-modal-close{
	position:fixed;
	display:block;
	width:50px;
	height:50px;
	top:30px;
	right:0px;
	background:url(images/close.svg) no-repeat #666; 
	background-size:80% 80%;
	background-position:center;
	border:0 none;
	cursor:pointer;
	transition:0.3s ease-in-out;
	z-index:999999;
}
@media screen and (max-width: 480px) {
	#help-modal-close{
		width:40px;
		height:40px;
		top:10px;
		right:10px;
	}
}
.help-button{
	width:30px;
	height:30px;
	background:url(images/help-icon.svg) no-repeat #FF9207;
	background-size:80% 80%;
	background-position:center;
	border-radius:3px;
	border:0 none;
	cursor:pointer;
	transition:0.2s ease-in-out;	 	
}

#help-title{
	font-size:28px;
	color:#333;
	margin-bottom:2em;
	font-weight:normal;
	padding-left:60px;
	background:url(images/help-title-icon.svg) no-repeat;
}
#help-loader{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	display:none;
}


#help-content section{
	margin-bottom:60px;
}
#help-content section h1{
	font-size:18px;
	margin-bottom:0.7em;
	border-left:solid 15px #333;
	padding:0.2em;
	padding-left:10px;
	color:#333;
	border-bottom:dotted 1px #333;
}
#help-content section h2{
	font-size:16px;
	color:#444;
	margin-bottom:0.4em;
}
#help-content section p{
	font-size:15px;
	margin-bottom:2em;
	line-height:1.7;
}
#help-content section section{
	padding-left:20px;
	margin-bottom:40px;
}
#help-content mark{
	font-weight:bold;
	background-color:#FFF8DD;
}



@media screen and (max-width: 768px) {
	#help-title{
		font-size:20px;
		padding-left:30px;
	}
	#help-article{
		padding-left:20px;
		padding:60px 40px;
	}
	#help-content section p{
		font-size:14px;
	}
@media screen and (max-width: 480px) {
	#help-title{
		font-size:18px;
	}	
	#help-article{
		padding:30px 10px;
	}
	##help-content section h1{
		font-size:15px;
	}
	#help-content h2{
		font-size:14px;
	}
	#help-content section p{
		font-size:13px;
	}
}


.outside-link{
	background:url(images/outside-icon.svg) no-repeat;
	margin-left:0.2em;
	margin-right:0.2em;
	padding-left:1.5em;
}









/*--------------------------------------------------------------
# Journal
--------------------------------------------------------------*/


#journal-container{
	display:flex;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;	
	flex-wrap:wrap;
	flex-direction: row;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-bottom:30px;
	background-color:#F00 !important;
}
#journal-container article.journal{
	width:22.75%;
	margin-right:3%;
	margin-bottom:20px;
}
#journal-container article.journal .entry-header{
	cursor:pointer;
}
#journal-container article.journal img{
	display:block;
	width:100%;
	max-width:140px;
	margin:0 auto 20px;
}
#journal-container article.journal:nth-child(4n){
	margin-right:0;
}
#journal-container article.journal .entry-title{
	font-size:14px;
	margin-bottom:10px;
}
#journal-container article.journal date{
	background:url(<?php echo get_template_directory_uri(); ?>/images/time-icon.svg) no-repeat;
	font-size:10px;
	color:#666;
	padding-left:1.6em;
}
@media screen and (max-width: 768px){
	#journal-container article.journal .entry-title{
		font-size:10px;
	}
	#journal-container article.journal date{
		font-size:8px;
	}
}


#youtube-modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
	z-index:99999;
	display:none;
}
#youtube-modal-close{
	position:fixed;
	display:block;
	width:50px;
	height:50px;
	top:10px;
	right:0px;
	background:url(<?php echo get_template_directory_uri(); ?>/images/close.svg) no-repeat #666; 
	background-size:80% 80%;
	background-position:center;
	border:0 none;
	cursor:pointer;
	transition:0.3s ease-in-out;
	z-index:999999;
}



#youtube-container{
	position:relative;
	padding-top: 56.25%;
	position:relative;
	width:100%;
	margin-bottom:40px;
}
/*
.youtube-container:after{
	display:block;
	position:absolute;
	top:0;
	content:"";
	z-index:99;
	width:100%;
	height:100%;
}
*/
#youtube-container  iframe{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important
}

#youtube-video{
	max-width:980px;
	width:100%;
	margin:0 auto;
	padding-top:40px;
}
#youtube-entry-title{
	font-size:16px;
	color:#FFF;
}
#youtube-entry-date{
	font-size:10px;
	color:#FFF;
	margin-bottom:15px;	
}




























.loader {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader{
	display:block;
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
}


@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}