html {
  font-size: 100%;
}

body
{
	
word-break: break-all;
margin:0;
padding:0;
text-align:center;
overflow-x:hidden; 
background-color:#f2f2f2;
background-image: url('images/right.png'), url('images/JIys63C.jpeg');
background-repeat: repeat-y, repeat;
background-position: top right  ;
background-attachment: fixed;
background-size: 1.7% , 25rem 25rem   ;
}


.credit, .credit a:link, .credit a, .credit a:visited, .credit a:hover {
font-family: 'Roboto', sans-serif;
color:#939191;
font-size: 0.438rem;
position: fixed;
left:0px;
text-transform:uppercase;
letter-spacing:0.125rem;
padding:0.313rem;
border-radius:1rem;
bottom: 0px;
text-decoration: none;
background-color: rgba(255, 255, 255, 0.4); 
}

label {
padding:0px 0.25rem;
font-family: 'Roboto', sans-serif;
font-size: 0.75rem;
color:#939191;
text-align: justify;
line-height: 1.563rem;
font-weight: 800;
display: block;
}

input {
width:99%;
outline: none !important;
margin:0.625rem 0px;
padding: 0px 1.25rem;
box-sizing: border-box;
border: 0.063rem dashed  #919393;
border-radius: 0.25rem;
background-color: #f8f8f8;
font-size: 1rem;
  resize: none;
  font-family: 'Roboto', sans-serif;
font-size: 0.688rem;
  color:#939191;
  text-align: justify;
 line-height: 1.563rem;

 }

 img {
  max-width: 100%;
  height: auto;
 }

 input:focus {
    font-weight: 800;

    border: 0.063rem dashed  #919393;

 }


 button{
  margin:0px 0.375rem;
 outline: none !important;
   padding: 0.75rem 1.25rem;
  box-sizing: border-box;
  border: 0.063rem dashed  #b7b7b7;
  border-radius: 0.25rem;
  background-color: #f8f8f8;
  font-size: 1rem;
  resize: none;
  font-family: 'Roboto', sans-serif;
font-size: 0.688rem;
  color:#939191;
  display: block;
  text-align: justify;
 line-height: 1.563rem;
}


 textarea{
width:99%;
outline: none !important;
height: 12.5rem;
  padding: 0.75rem  1.25rem;
  box-sizing: border-box;
  border: 0.063rem dashed  #b7b7b7;
  border-radius: 0.25rem;
  background-color: #f8f8f8;
  font-size: 1rem;
  resize: none;
  font-family: 'Roboto', sans-serif;
font-size: 0.688rem;
  color:#939191;
  text-align: justify;
 line-height: 1.563rem;
}

 textarea:focus {
  font-weight: 800;
    border: 0.063rem solid  #b7b7b7;

  }


 blockquote {
  padding-left:0.625rem;
  padding-right:0.625rem;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
font-family: 'Roboto', sans-serif;
font-size: 0.688rem;
  color:#939191;
  text-align: justify;
 line-height: 1.563rem;
 font-weight: 400;
 margin:0px;
 background-color: #eeeeee;
 border-left:0.5rem solid #6da9c0 ;
 }

 ::selection {
    color: #686d6f;
    background-color: #b7cbd3;
  }
 

.pagination {
  clear:both;
  color:#a4a3a3;
  text-transform: uppercase;
  font-weight: 400;
   padding-bottom:1.875rem ;
    padding-top:0.625rem ;

}


 


 .header img {
  margin:0 auto;
   max-width:100%;
   height:auto;
 }

strong {
  letter-spacing: 0.063rem;
  font-weight: 800;
}
 
.title {
  font-family: 'Roboto', sans-serif;
  color:#6f5350;
  letter-spacing: 0.125rem;
  text-align: right;
  padding-right:0.625rem;
  padding-top:1.563rem;
  text-transform: uppercase;
  font-size:1.438rem;
 

} 
.title { 

     display: flex;
    align-items: center;
    justify-content: right;
    
}

.title span {
     padding-left:0.625rem;
      font-size:0.813rem ;
      
 }

 .container {
  text-align: center;
    
   float: right;
  position: fixed;
right:2.6%;
top:0%;
width:34%;
 }

 .textbox {
background-image: url('images/noise2.png');
background-size:cover;
background-repeat:repeat ;
   
  font-family: 'Roboto', sans-serif;
font-weight: 300;
   border-top:0.188rem solid #f6886f;
  border-bottom:0.313rem solid #f6886f;
   text-transform: uppercase;
  font-size: 0.563rem;
  line-height: 1.5rem;
  margin-bottom:0.625rem;
  padding: 1.063rem 0.625rem;
  letter-spacing: 0.188rem;
  text-align: justify;
  background-color: #6da9c0;
  color:#FFFFFF;
 }

 .navi {
  margin: 0 auto;
  text-align: center;
    
   display: flex;
    align-items: center;

  justify-content: space-between;
   flex-wrap:   wrap;
   
 }

 .navi a, .navi a:link, .navi a:visited {
  -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;
  background-image: url('images/noise.png');
background-size:22.563rem 23.125rem;
background-repeat:repeat ;
  font-family: 'Roboto', sans-serif;
font-size: 0.688rem;
text-decoration: none;
flex-shrink:0;
letter-spacing: 0.125rem;
   text-align: center;
padding:0.625rem 0.625rem;
 font-weight: 300;
 text-transform: uppercase;
line-height: 1.25rem;
 width:27%;
 font-weight:400 ;
 margin:0.125rem 0px;
 color:#f2f2f2;
     background-color: #9eb5bd;
 }

 .navi a:hover {
  color:#536b73;
     background-color: #baccd2;
 }


 .content {
 position: absolute;
 top:3%;
  font-family: 'Roboto', sans-serif;
 
 right:38%;
   
width:33%;
 
 }



 .box {  



  margin-top:1.875rem ;
  margin-bottom:0px;
 padding:0.938rem 1.25rem;
 background-color:#fbfbfb;
border-top:solid 0.063rem #d3d2d2;
border-left:solid 0.063rem #d3d2d2;

border-right:solid 0.063rem #d3d2d2;


 background-image: url('images/noise.png'),url('images/lightnoise.png') ;
background-size:361px 370px, cover;
background-repeat:repeat ;

 }


.postbox span {
  color:#eabba6;
}

 .postbox { 
 background-image: url('images/noise.png');
background-size:22.563rem 23.125rem;
background-repeat:repeat ;
-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;

  opacity: 0.86;

  font-family: 'Roboto', sans-serif;
font-size: 0.5rem;
  color:#939191;
  text-align: center;
 line-height: 1.563rem;
 font-weight: 400;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  margin-bottom:0.625 ;
 padding:0.188rem 1.25rem;
 background-color:#fbfbfb;
border-top:dashed  0.063rem #d3d2d2;
border-left:solid 0.063rem #d3d2d2;
border-right:solid 0.063rem #d3d2d2;
border-bottom:solid 0.063rem #d3d2d2;

 }

.postbox:hover {
    opacity: 1;

}


.icon {
-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;
  filter: grayscale(70%);

  opacity: 0.86;

  width:6.25rem;
  height:6.25rem;
  float: left;
  margin-right:0.625rem;
  padding:0.375;
  border: dotted 0.063rem #8a8888;
  }


.icon:hover {
  filter: grayscale(0%);
}




 .content p {
  padding:0px 0.25rem;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  color:#939191;
  text-align: justify;
  line-height: 1.563rem;
  font-weight: 400;

 }
.dots img {
 width:44%;
 height: auto;
}
 .dots {
  position: fixed;
  top:42%;
  right:73%;
 }

 .titlebox {
   background-image: url('images/lightnoise.png');
background-size:cover;
background-repeat: repeat;
   background-color: #fdfbf8;
  padding:0.25rem 0px;
  border : 0.063rem solid #cdcccc;
   

 }

.line {
 margin-bottom:1.25rem;
 margin-top:0.188rem;
 margin-left:auto;
 margin-right:auto;
 width:100%;
 background-image: url('images/line.png');
 background-repeat: repeat-x;
 background-size: 0.313rem 0.063rem ;
 height:0.063rem;


}
 .content h1 {
 color:#595556;
 font-family: "Times New Roman", Times, serif;
 font-size: 1rem;
 font-weight: 300;
 margin:0px;
 letter-spacing: 0.063rem;
 line-height: 1.25rem;
 text-transform: uppercase;
 }

 .content h1::first-letter {
 font-size: 1rem;
 font-weight: 700;
 color: #e15430;
}



 .content h2 {
 line-height: 0.813rem;
 margin:0px;
 letter-spacing: 0.125rem;
 color:#999797;
 font-family: "Times New Roman", Times, serif;
 font-size: 0.8rem;
 font-weight: 300;
 text-transform: uppercase;
 }

 .content h3 {
 padding:0px 0.25rem;
 font-family: 'Roboto', sans-serif;
 font-size: 0.688rem;
 color:#939191;
 text-align: justify;
 line-height: 0.625rem;
 letter-spacing: 0.188rem;
 text-transform: uppercase;
 font-weight: 700;
 }


 .content h4 {
 padding:0px 0.25rem;
 font-family: 'Roboto', sans-serif;
 font-size: 0.563rem;
 color:#939191;
 text-align: justify;
 line-height: 0.5rem;
 letter-spacing: 0.313rem;
 text-transform: uppercase;
 font-weight: 700;
 }




 .content a:link, .content a, .content a:visited {
  -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;
  color:#6da9c0;
  text-decoration: none;
  letter-spacing: 0.063rem;
  border-bottom:dashed 0.063rem #6da9c0;
 }

 .content a:hover {
  color:#478aa4;
    border-bottom:dashed 0.063 #478aa4;

 }


.pagination a, .pagination a:link, .pagination a:visited {
  -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;
background-color:#f5f5f5;
   color:#b0afaf;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0px 0.625rem;
  padding:0.625rem;
  border-radius: 1rem;
  font-size: 0.438rem;
  letter-spacing: 0.063rem;
  border:dashed 0.063rem #cbcaca ;
  text-decoration: none;
}

.pagination a:hover {
background-color:#d6d5d5;
   color:#f5f5f5;
}

 i {
  color:#f87b4d;
  letter-spacing: 0.063rem;
 } 


 

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

} }