/*
Theme Name: Koe no Katchi 
Theme URI: http://sunnydesigns.ofblue.org
Author URI: https://sunnydesigns.ofblue.org
Description: First Main layout for sunny designs
Tags: Some, tags, here
Text Domain: koetheme

 */ 
  

 

html, body  {
font-size:16px;
margin:0rem;
	
	padding:0px;
height:100%;
}


img a, img a:link, img a:hover, img a:visited {
	border-bottom:none;
	text-decoration:none;
}
 

.front {
border:0;
 word-wrap: break-word;  
text-decoration: none; 
 margin: 0;background-image: url("https://res.cloudinary.com/dlgyencqq/images/v1733020094/furinaheader/furinaheader.png?_i=AA");
     background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
height:100vh;
	font-size:16px;
width:100%;

}
 


#particles-js {
margin: 0;
    padding: 0;
height:100%;
width:100%;
overflow:hidden;
}




.navi { 
position:fixed;
top:0px;
background-color:#172167;
display:flex;
min-width:100%;
width:100%;
	z-index:99999999999;
box-shadow: 0.063rem -0.063rem 1.188rem 0.125rem rgba(0,0,0,0.51);
-webkit-box-shadow: 0.063rem -0.063rem 1.188rem 0.125rem rgba(0,0,0,0.51);
-moz-box-shadow: 0.063rem -0.063rem 1.188rem 0.125rem rgba(0,0,0,0.51);
align-content:center;
  justify-content:  center ;
 
margin:0 auto;
text-align:center;
 flex-wrap:  wrap  ;
align-items:center ;
}

strong {
	font-weight:800;
}

.logoline { border-left:1.875rem solid white;
}
.logo  {  
	border-left:solid 0.125rem #B3B9BE;
border-right:solid 0.125rem #B3B9BE;
background-color:transparent;
 padding:1.25rem 0.625rem;
 
 
}
 
 
 
  .logo a,  .logo a:link, .logo a:visited {
letter-spacing:0px;
font-size:2rem;
padding:1.25rem 1.625rem;
font-family: 'Roboto', sans-serif;
color:#183f6d;
text-decoration:none;

	  background-color:#D2D9DE;
text-transform:uppercase;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
font-family: 'Roboto', sans-serif;
   
}
 

.logo a:hover { 

text-decoration:underline;
}
.line {

font-family: 'Roboto', sans-serif;
 margin:0px 0.625rem;
  font-size:0.875rem; 
     text-decoration: none; 
	 	 color:#a8b1d8;

}


A:link.top
{   
font-family: 'Roboto', sans-serif;
text-transform:uppercase;
  font-size:0.938rem;
margin:0px 0.625rem;
padding:  1.25rem ;
     text-decoration: none; 
	  color:#a8b1d8;

}



A:visited.top
{ 	 color:#a8b1d8;

     text-decoration: none;
	 

}

A:hover.top  {
	  background-color:#222c70;	  
     text-decoration: none;
	 color:#a8b1d8;

	 

   
} 

 
 
 




 

.other-page, #otherpage {

    font-size: 0.9375rem;
   letter-spacing:0.0625rem;
        font-weight: normal;
     color:#919191;

	 font-family: 'Quicksand', sans-serif;
        font-weight: normal;
	border:0;
 word-wrap: break-word;  
text-decoration: none;
 height:100vh;
background-image: url("https://res.cloudinary.com/dlgyencqq/images/v1669814191/back_n7le7h-1/back_n7le7h-1.jpg");
     background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
        background-attachment: fixed;
        font-weight: normal;
    margin:0px;
    padding:0px;
	
}


.spacer-page {
	padding-top:4.375rem;
	clear:both;
}

::-moz-selection { /* Code for Firefox */
    color: #e2e2e2;
    background: #496a93;
}

::selection {
    color: #e2e2e2;
	background: #496a93; 
	}



.contenta {
  margin-left: auto;
    margin-right: auto;
    width:100%;
     max-width:68.75rem;
	text-align:center;
	


}





div.wpcf7-mail-sent-ok {
	-webkit-border-radius:  0.625rem;
-moz-border-radius: 0.625rem;
border-radius:  0.625rem;
  padding: 1.25rem  1.875rem;
border: solid 1px #a3a3a3;
	
}




input[type=submit] {
	text-shadow:none !important;
-webkit-border-radius:  0.625rem;
-moz-border-radius:  0.625rem;
border-radius:  0.625rem;
border: solid 1px #cccccc;
box-shadow:none !important;
	background:transparent;
  padding: 1.25rem 2.5rem;
font-family: 'Quicksand', sans-serif;
    font-size: 1.188rem;
   letter-spacing:0.0625rem;
         font-weight: normal;
     color:#777777;
	margin-bottom:17px;
  }





input[type=submit]:focus {
	outline:0;
 }





.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
	
	border: solid 1px #cccccc;
box-shadow:none !important;
    background-color: #fff;
    color: #000;
	height:20%;
	 padding: 0.625rem;
     width: 50%;
	margin: 0.625rem 0px;
}


.wpcf7 input[type="text"]:focus,

.wpcf7 input[type="email"]:focus,

.wpcf7 textarea:focus

{
	
	outline: 0;
}





/* unvisited link */
a:link, a {
 color:#496a93;
	text-decoration:none;
	border:none;
 
}

/* visited link */
a:visited {
 color:#496a93;
	border:none;
		text-decoration:none;


}

/* mouse over link */
a:hover {
		text-decoration:none;
border:none;
 color:#496a93;

}



.chatbox-iframe {
	width:15.63rem; 
	height:15rem;
}


.cboxhover {
-moz-transition: all 0.7s ease-in;
-o-transition: all 0.7s ease-in;
-webkit-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;
	position:fixed;
	top:40%;
	right:-16.3rem;
	z-index:999999999;
	width:18.75rem;
	 
}




.cboxhover:hover {
 
	right:-0px;
	 
 
}
 

.hovertitle {
float:left;	 
	margin-top:  1.25rem;
	border: solid 1px #8c98a5;
	 
                    
            border-radius: 1.875rem 0px 0px 1.875rem;
-moz-border-radius: 1.875rem  0px 0px 1.875rem;
-webkit-border-radius: 1.875rem  0px 0px 1.875rem;    
                  color:#a7b4c4;
     
	line-height: 2.5rem;
                      font-size:0.875rem;                                                        
	
	-webkit-box-shadow: 0px 0px  2.25rem  -0.25rem rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px  2.25rem  -0.25rem  rgba(0,0,0,0.75);
box-shadow: 0px 0px  2.25rem  -0.25rem  rgba(0,0,0,0.75);
	
	
           height:100%;  
 
	width: 0.625rem;
 	 font-family: 'Quicksand', sans-serif;

	padding: 1.25rem 1rem;
 	 background-color:#294970;
 	 
	
}

.chat { 
width: 13.69rem;
	
	-webkit-box-shadow: 0px 0px  2.813rem 0px rgba(0,0,0,0.47);
-moz-box-shadow: 0px 0px  2.813rem  0px rgba(0,0,0,0.47);
box-shadow: 0px 0px  2.813rem 0px rgba(0,0,0,0.47);
                    
float:left;	 
}

 


.iconentry {


  display: inline-block;
  text-align: center;
  width: 12.5rem;
 	margin-top:1.25rem;
 	margin-left:1.25rem;
	margin-right:1.25rem;
	margin-bottom:1.25rem;
   
  
 }




 


.datebox {
 	background-color: rgba(0, 0, 0, 0.03); 
	color: rgba(0, 0, 0, 0.24); 
font-size:0.563rem;
letter-spacing: 0.188rem;
text-align: center;
text-transform: uppercase;
padding:0.125rem;
 }
.iconentry img {
    border:double 0.75rem #d1d1d1;
  width: 11.25rem;
  height: 11.25rem;
   opacity: 0.98;

    
 }
 
.iconentry img:hover {

opacity: 1;
filter: alpha(opacity =100);
  
}





h1 {

   text-align:left;
font-family: 'Roboto', sans-serif;
   text-transform: uppercase;
   font-size: 1.875rem;
   margin-bottom: 1.25rem;
   margin-top: 1.25rem;
   letter-spacing: 0.1875rem;
        font-weight: normal;
     color:#606060;
	line-height: 2.5rem;
	padding-left: 1.25rem;
	border-left:solid  0.625rem #3c3b3b;

}


h2 {
margin-top:  1.25rem;
   text-align:left;
font-family: 'Roboto', sans-serif;
   text-transform: uppercase;
   font-size: 1.188rem;
      margin-bottom: 1.25rem;

   letter-spacing:0.375rem;
        font-weight: normal;
     color:#969696;

}



A:link.sitelinks {
    text-decoration: none;
    margin-top: 2rem;
   text-align:left;
font-family: 'Roboto', sans-serif;
   text-transform: uppercase;
   font-size:1.313rem;
   letter-spacing: 0.1875rem;
        font-weight: normal;
	
     color:#3c3b3b;
     display: inline-block;
     padding-bottom:0.375rem;

}

A:visited.sitelinks {
  
color:#3c3b3b;
}

A:hover.sitelinks {

       padding-bottom:0.1875rem;
    border-bottom: solid 0.1875rem #496a93;
    
} 



.sitely {
	width:95%;
	padding-top:4rem;
}

.icon-page {
 margin-left: auto;
    margin-right: auto;
 padding-top: 8.75rem;
     width:80%;
    
     max-width:67.5rem;
  text-align:center;
  padding-bottom:  8.125rem;
}

 

.page-main {
	padding-top:8.75rem;
	   width:80%;
}


.layouts-page {
	padding-top:8.75rem;
	width:100%;
	margin-left: auto;
    margin-right: auto;
 
    
     max-width:76.25rem;
	text-align: center;
	padding-bottom:  8.125rem;
}

.content-page{
  margin-left: auto;
    margin-right: auto;
 
    
     max-width:67.5rem;
	text-align:left;
	padding-bottom: 8.125rem;
	
}






  




.box {
	text-align: center;
	display:inline-block;
 max-width:21.25rem;
	min-height:18.75rem;
	width:100%;
	margin: 1.25rem  1.25rem;
	vertical-align: top;
  
}

.sunnyfeature   {
	width:100%;
 max-width: 21.25rem;
	height:auto;
	overflow:hidden;
 
	 
}




.absolute {
	width:100%;
 max-width: 21.25rem;
	height:auto;
 		overflow:hidden;
	position:absolute;
	 
		border:solid 1px #adadad;

 
 	
}
.containbox {
	width:100%;
 max-width: 21.25rem;
	height:auto;
 	
}

.titleblogsunny a {
	text-decoration:none;
	color:#f7f7f7;
		 letter-spacing:0px;
}
 

 .titleblogsunny a:visited {
	color:#f7f7f7;
}

 .titleblogsunny a:hover {
		color:#f7f7f7;

	text-decoration:underline;
}


 
.absolute:hover .downloadinfo {
	display:block;
	
	
}






.downloadinfo  {
	
	-moz-transition: all 0.7s ease-in;
-o-transition: all 0.7s ease-in;
-webkit-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;
	display:none;
   	padding:0.1875rem;
	text-decoration:none;
	color:#f7f7f7;
	 
	margin:0px;
	text-align:center;
	font-size:0.125rem;
font-family: 'Roboto', sans-serif;
}



.download-layout-text  {
	display: block;
   	padding-top:0.625rem;
   		padding-bottom:1.25rem;
	text-decoration:none;
	color:#f7f7f7;
	margin:0px;
	
 	text-align:center;
	font-size:0.75rem;
font-family: 'Roboto', sans-serif;
}


 
.download-layout-credit  {
	display: block;
      
   		padding-bottom: 0.625rem;
	text-decoration:none;
	color:#f7f7f7;
	margin:0px;
	letter-spacing: 0.0625rem;
 	text-align:center;
	font-size:0.75rem;
   	font-family: 'Quicksand', sans-serif;
}


 


 .downloadinfo a {
	margin:0px;
padding:0.1875rem;
	text-decoration:none;
	color:#f7f7f7;
	letter-spacing: 0.0625rem;
	text-align:center;
	font-size:0.75rem;
   	font-family: 'Quicksand', sans-serif;
}

 .downloadinfo a:visited {
	color:#f7f7f7;
}

 .downloadinfo a:hover {
		color:#f7f7f7;

	text-decoration:underline;
}
 
.titleblogsunny {
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	width:100%;
	text-align:center;
 max-width: 21.25rem;
	min-height: 0.625rem;
	z-index:988899;
background-color: rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.4);
	color:#f7f7f7;
	font-size: 1.188rem;
	padding: 1.25rem 0px;
  	font-family: 'Quicksand', sans-serif;

}

 

 






A:link.apply {
    
        text-decoration: none;
letter-spacing:0.25rem;
     color:#8e8e8e;
}

a:visited.apply {
 
        text-decoration: none;

     color:#8e8e8e;

}

a:hover.apply {

        text-decoration: none;

     color:#8e8e8e;
} 




.doubleborder-button  img {
border:double 0.75rem #d1d1d1;
	text-decoration:none;
	width:5.5rem;
	height:  1.938rem;
	 
	
}

.sitelypic {
    float:left;
    margin-right: 0.625rem;
    max-width: 36.5rem;
    width:100%;
    margin-bottom:1.25rem;
   height: auto;
}

.center-iconentry-textxt {
	 	margin-top:0.875rem;

  font-family: 'Quicksand', sans-serif;
    font-size: 0.8125rem;
   letter-spacing: 0.0625rem;
 display:block;
        font-weight: normal;
     color:#919191;
  text-align:center;
}


.sitely p {

font-family: 'Quicksand', sans-serif;
    font-size:0.9375rem;
   letter-spacing: 0.0625rem;
   line-height: 2.375rem;
        font-weight: normal;
     color:#919191;
	text-align:left;

}





.page-main p {

font-family: 'Quicksand', sans-serif;
    font-size:0.9375rem;
   letter-spacing: 0.0625rem;
   line-height: 2.75rem;
        font-weight: normal;
     color:#919191;
	text-align:left;

}

 

  
.sunny-logo  {
	vertical-align: middle;
	 display: inline-block;
	 letter-spacing: 0.125rem;
	  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

	 

} 


/* NAV */

  
.main {
    vertical-align: middle;
	 display: inline-block;
    float: right;
}



 .show {


 }
 

 * {
  margin:0px;
  padding:0px;
 }
 

.main a, .main a:hover, .main a:visited {
   cursor:pointer;
border: none;
  margin:0px;
text-decoration: none;
 color: #a7b4c4;
 text-align: right;
    padding:0px  2.5rem;
  letter-spacing:  0.125rem;
 border-right: solid 1px #a7b4c4;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size:  0.875rem;
line-height:  5.625rem; 
}
 


  

.menu {
display:none;
}





@media screen and (max-width: 450px) {
	
	
  
	
	 
 
.cboxhover {
	display: none;
}
	  


.box {
	 overflow:hidden;
	width:87%;
	margin:1.25rem auto;
 	
}

.sunnyfeature   {
	width:100%;	 
}




.absolute {
	width:87%;


 
 	
}
.containbox {
 width:87%;
 	
}

	 
	
	
	
	
}


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


	 

.content-sitely-content{
  margin-left: auto;
    margin-right: auto;
    width:90%;
    padding-top: 2.5rem;
     max-width: 68.75rem;
	text-align:left;
	padding-bottom:  8.125rem;
}




.sitelypic {
    float: none;
    margin: 0 auto;
    min-width:100%;
    
} 

}


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

 
	

	.sitely {
		width:80%;
	}


.cboxhover {
	display: none;
}


.sitelypic {
    
    width:60%;
     
   
}

 
.navi-contain {
width:79%;

}


 

 .main a, .main a:hover, .main a:visited{
max-width: 62.5rem;
margin:0 auto;
 display: block;
 text-align: left;
border:none;
padding:0px;
	 min-width:43.75rem;
	  

 }
	

      .menu { 

display:inline-block;
  cursor:pointer;
margin:0px;
padding:0px 0.625rem;
line-height: 5.625rem;   
 }

  
.icon-menu {
	background-color: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.1);

     font-size: 0.9375rem;
    float: left;
       font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
     margin:0px;
     font-weight:  normal;
     letter-spacing: 0.1875rem;
     min-height: 100%;
     padding: 1.875rem 1rem ;
line-height:1.875rem;
color: #bac4d1;
float: right;

  
   }
 
.main {
     display:none;
     }

 

     .show {
     	padding-top:1.875rem;
       display:block;
      margin-left:auto;
      margin-right: auto;
            padding-bottom:1.875rem;
      clear: both;
      float: left;
      }



	}



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

html  {
	 
font-size:20px;


}	
 
	
}


@media screen and (min-width: 1920px) {
 
html   {
font-size:24px; 

} 
	
}




@media screen and (min-width: 2450px) {
 
html   {
font-size:32px; 

}
	 

	
	
}