/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@font-face {
	font-family: Icons;
	src: url(../webfonts/fa-solid-900.woff2)
}

/*fa-spinner -- */
/*fa-comment-slash -- */
/*fa-comment-dots -- "\f4ad" */
/*fa-times -- "\f00d" */
/*fa-envelope -- "\f0e0" */
/*fa-search -- "\f002" */


@keyframes spin {
 0% {transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}


.fas {
	font-family: Icons
}

i.fa-spinner {
	animation: spin 2s infinite linear;
}

i.fa-spinner:before {
	content: "\f110";

}	




i.fa-comment-slash:before {
	content: "\f4b3"
}

i.fa-comment-dots:before {
	content: "\f4ad"
}

i.fa-times:before {
	content: "\f00d"
}

i.fa-envelope:before {
	content: "\f0e0"
}


i.fa-search:before {
	content: "\f002"
}


html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #2c343b;
  background-color: #eaf5ff;

}

#search {margin:30px 0px 0px; display:flex; place-content:center; height:110px}

#search form {height:100%; display:flex; width:100%; place-content:center; 
background:#1836fe; 

padding:30px;     border-radius: 0px 0px 0px 0px;
box-shadow:2px -2px 2px 0px #2d2c2c, -2px -2px 2px 0px #2d2c2c}

#search form input {
	  
    display: block;
    width: 70%;
    font-size: 20px;
    border-radius: 4px;
    padding: 10px;
    font-weight: 700;
	}

#search form button {
	height:50px; 
	font-size:30px; 
	width:90px;     
	color: #1836fe;
    background-color: #d2f400;
	border: none;
	text-align: center;
	text-decoration: none;
	display: inline-block;	
	border-radius:4px;
	margin-left:20px; 
	cursor: pointer;
	}


.retry {width:200px; margin:0px auto}
.retry h1 {
	text-align: center;
    border: 1px solid #fedb32;
    border-radius: 5px;
    padding: 20px;
}
.retry h1 i {margin:0px 0px 0px 10px} 

#block_icon i {color:#757575}



a {
  color: #415ea6;
  text-decoration: none;
}

img, video {
  max-width: 100%;
}

/* -------------------------------- 

Hero Slider - by CodyHouse.co

-------------------------------- */
/* Main Header */
.cd-header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  background-image:url(../assets/logo.png);
  background-size:230px;
  background-repeat:no-repeat;
  background-position-y:10px;
  background-position-x:center;
 
}


.contacts {
//background-image: url(../assets/man-support.png);
//   background-size: 200px;
//   background-repeat: no-repeat;
//     background-position: calc(100% - 12px) 50px;	
	
	
}



 

.main_panel {
  position: relative;
  margin-top:100px;
  width: 80%;
  overflow: hidden;
  margin:0px;
  //background-color: #2c343b;
  background-color: #213140;
  opacity: 0.9;
  border-radius: 5px;
  box-shadow: 3px 3px 10px #333; 
 //background-image: url(../assets/man-support.png);
  // background-size: 200px;
  // background-repeat: no-repeat;
  //   background-position: calc(100% - 12px) 50px;
	 
}  
  
h2.faqtitle {    background-color: #1836fe;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 700;
    padding: 20px 0px 30px;
	box-shadow:0px -2px 2px 0px #2d2c2c}  

#faqs {font-size:20px; color:#FFFFFF; display:flex; flex-wrap: wrap; background:#1836fe}
.article {width:40%; margin:4% 5% 0%; height:40%; text-align:left}
.article a {    color: #FFFFFF;
    margin: 0px 0px 1em;
    display: inline-block;
    line-height: 1.5;
    font-weight: 900;
}
.article p {margin:0px; line-height:1.5}
.hours p {display:block; width:180px; float:left; color:#ffffff; font-size:40px; margin:10px; text-shadow: 1px 1px 3px #000;}
.email p {display:block; font-size:40px; margin:10px; text-align:right; text-shadow: 1px 1px 3px #000;}
cd-main-content {display:block; margin:0px 10%; width:80%}

.hours {width:50%; float:right}
//.email {width: 50%; float:right; } 


#search form {
	border-top:1px solid #fff;
}
 
 

/*---------------
Media Queries
---------------*/






@media only screen and (max-width:1023px) {
.hours {width:100%; display:flex; justify-content:center}
.email {width:100%}
.email p {text-align: center;}
.hours p {text-align: center;}

}
 
@media only screen and (min-width:1024px) and (max-width:1294px) {
.email p {font-size:30px}
.hours p {font-size:30px}
 
}

#open:after, #close:after {content: ":00"}

.alert {
   
    text-align: center; position: relative;
	 background: #ffffff;
	 border-radius: 5px 5px 0px 0px;
}

.email {
	    display: block;
    background-color: #fff;
    padding: 20px 5%;
    text-align: right;
    font-size: 22px;
}

#alert {       color: #913c88;
    font-size: 30px;
    display: inline-block;
    padding: 30px 5%;
	    line-height: 1.5;
   }

#alert i, .email i {margin-right:1em}


.alert i {margin-right:0.5em}

 
 
.alert a {
    display: block;
    text-align: right;
    padding: 20px 5%;
	font-size:25px}
 
.cd-hero.offset {margin-top:300px}


.contacts {

	
	
}

.contact-method {//width:220px;
//height:60px;
//border-radius:30px;
//border:solid 1px #fff;
padding:30px 0px;
display:flex;
justify-content:center;
//background-color:#7BD0FF}
 

.contact-method br {
	display:none
	
}

.contact-method i {
color:#1836fe;
font-size:30px;
}
.contact-method div {
//width: 200px;
height: 50px;
margin: 10px;
display: flex;
//flex-direction: column;
justify-content: center;
color:#fff;
//margin-right:2em
}

.contact-method a {
width:90px;
height:50px;	
background-color:#fedb32;	
display:flex;
border-radius:4px;
flex-direction: column;
justify-content: center;
}	
  
.contact-method p {
font-size:28px;
font-weight:700;
padding:0px 30px;	 
}    

#form { 
//background: #54626e; 
//background:#0189C0;
}

.icons {
  display: flex;	
  position: relative;
  justify-content: center;
  align-items: center;
 // margin: 0 auto;
  height: 2.6rem;
}  

 

@media only screen and (max-width: 950px) {
.article {
	width:90%;
	margin-bottom:1em;
	border-bottom:2px dashed
	
	
}

.article:last-of-type {
	border-bottom:unset
	
}

.contacts {
	border:dotted 10px #fff;
	margin:40px 20px 20px 20px;
	
}

#search form {
border-radius:0px	
}	

}	

@media only screen and (min-width: 1001px) {

.container {
 background-image: url(../assets/man-support.png);
 background-size: 200px;
 background-repeat: no-repeat;
 background-position: 98% 27%;


}
}	
  


@media only screen and (min-width: 768px) {
.main_panel {
 width:80%;
 margin:100px auto 0px;
 
 
 

}	
.cd-main-content {
	width:80%;
	margin:10px auto 60px;
}	


}


@media only screen and (min-width: 600px) and (max-width:1000px) {
	 
.contact-method {width:65%;
display:flex;
flex-direction:column}	

.contact-method div {
   flex-direction: column;
   align-items:center;
}
  
.contact-method p {
    font-size: 18px;
    text-align: center;
    margin: 10px 0px 0px;
padding: 0px 0px 10px;}
	
.contact-method p:first-of-type {
    border-bottom: 1px solid #fff;
}
 
#search form {
	width:100%;
	border-radius:0px;

}




#search {
	margin-left:0px;
	margin-right:0px
}

.open_hours {
flex-direction:column;}

.contacts {
	border:dotted 10px #fff;
	margin:20px;
	
background-image: url(../assets/happy_phone.png);
   background-size: 123px;
   background-repeat: no-repeat;
	
	
	background-position: calc(90% - 10%) 50px;
}

.main_panel {
  //   background-position: calc(100% - 10%) 50px;
	 
}  
  
	
}	
 
@media only screen and (min-width: 1001px) and (max-width:1300px) {
	
	
	
}



@media only screen and (min-width: 600px) and (max-width:768px) {
	
	
	
	
.main_panel {
 width:100%;
 margin:50px auto 0px;
 box-shadow: unset;
border-radius:0px;
}	
	
	
.cd-main-content {
	width:100%;
	margin:10px auto 60px;
}	

.alert {
   
     border-radius: 0px;
}


.alert a {
    text-align: center;
}






#search form {
	flex-direction:column;
	width:100%
}
 
#search form input {
width:100%

}	
 
#search form button {
margin: 20px auto;
padding:10px
}	
 
#search {
height:190px
}	

}	



@media only screen and (max-width: 600px) {
	
.contact-method {width:65%;
display:flex;
flex-direction:column}	
	
.main_panel {
 width:100%;
 margin:50px auto 0px;
 border-radius:0px;
// background-position: calc(100% - 30px) 50px;

    
}

.contacts {
	background-image: url(../assets/happy_phone.png);
   background-size: 110px;
   background-repeat: no-repeat;

	background-position: calc(91% - 0px) 77px;
}

.cd-main-content {
	width:100%;
	margin:10px auto 60px;
}	

.alert {
   
     border-radius: 0px;
}

.alert a {
    text-align: center;
} 

.contact-method p {

    font-size: 18px;
    text-align: center;
    margin: 10px 0px 0px;
    padding: 0px 0px 10px;


	 
}

.contact-method p:first-of-type {


    border-bottom: 1px solid #fff;

	 
}

.open_hours {
	//width:140px
}


.contact-method div {
   flex-direction: column;
   align-items:center;
}

.email {
text-align:center	
	
}



#search {
	margin-left:0px;
	margin-right:0px
}


 
#search form {
	flex-direction:column;
	width:95%;
	width:100%
}
 
#search form input {
width:100%

}	
 
#search form button {
margin: 20px auto;
padding:10px
}	
 
#search {
height:190px
}

}	





@media only screen and (max-width: 455px) {

.email {
text-align:center	
	
}


.cta a {
padding: 10px 25px;}

#search form {
	flex-direction:column;
	
}
 
#search form input {
width:100%

}	
 
#search form button {
margin: 20px auto;
padding:10px
}	
 
#search {
height:180px
}

}	

.stripes {
	background-image: linear-gradient(45deg, #788b9c 45.45%, #fedb32 45.45%, #fedb32 50%, #788b9c 50%, #788b9c 95.45%, #fedb32 95.45%, #fedb32 100%);
background-size: 31.11px 31.11px;
	
}


.disable {
   pointer-events: none;
   cursor: default; 	
}

.cta {
	display:flex;
	background:#1836fe;
	
	
} 
 
.cta a {  

	padding: 16px 30px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 1.85rem;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    -webkit-border-radius: 0.6rem;
    -moz-border-radius: 0.6rem;
    -ms-border-radius: 0.6rem;
    -o-border-radius: 0.6rem;
    

    color: #1836fe;
    background-color: #d2f400;
	margin: 50px auto;
    display: block;
    width: 155px;
	height: 50px
	
}

.hide {display:none ! important}





html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#attribution {
  position: fixed;
  right: 10px;
  bottom: 10px;
  color: #FE8989;
  z-index: 100;
  font-weight: bold;
  cursor: pointer;
}
#attribution a {
  color: inherit;
  text-decoration: inherit;
}

#container {
  background: linear-gradient(#8affff, #80eded);
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.button {
  position: relative;
  margin-bottom: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #FE8989;
  box-shadow: 0px 0px 0 0px rgba(0, 0, 0, 0);
  border-radius: 50px;
  width: 25.25rem;
  padding: 1rem 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 2.75rem;
  color: white;
  cursor: pointer;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.icons i {
  position: absolute;
 top: 0;
 //left: 0;
  display: block;
}


.icon-default {
  transition: opacity 0.3s, transform 0.3s, color 0.3s;
}
.icon-clicked {
  transition: opacity 0.3s, transform 0.3s, color 0.3s;
  transform: rotate(-180deg) scale(0.5);
  opacity: 0;
}

.clicked .icon-clicked {
  transform: rotate(0deg) scale(1);
  opacity: 1;
  color:#fedb32;
}
.clicked .icon-default {
  transform: rotate(180deg) scale(0.5);
  opacity: 0;
}

.contact-method a {
transition: background-color 0.3s;	
background-color:#d2f400;	}

.contact-method a.clicked {
transition: background-color 0.3s;
background-color:#1836fe;	
}