html,body {
background-color: #FFFFFF;
font-size:100%;
margin:0px;
padding:0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
 background-image: url(images/bg.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}


::-moz-selection {
color:#848484;
background-color: #d4d4d4;
}

::selection {
color:#848484;
background-color: #d4d4d4; 
}

::-webkit-scrollbar {
width:1.25rem; 
background: #FFFFFF;  
}

::-webkit-scrollbar-thumb {
background: #cccbcb;
-webkit-border-radius: 0.625rem;
-moz-border-radius: 0.625rem;
border-radius: 0.625rem;
}


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


a:link, a:visited {
color:#6f6f6f;
font-weight: 600;
text-decoration: none;
text-decoration: underline;

}

a:hover {
color:#295999;
text-decoration: underline;
}

.center {
text-align: justify;
text-align-last: center;
}

.justify {
text-align: justify;
}


.card {
filter: grayscale(100%) opacity(0.5);
-webkit-filter: grayscale(100%) opacity(0.5);
width:12%;
height: auto;
margin:0 1%;
} 


.header img {
width:100%;
display: block;
-webkit-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
-moz-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
height: auto;
}

.header {
position: relative;
width: 100%;
height: auto;
}

.navi-wrap {
position: absolute;
max-width: 100%;
bottom: 0px;
left:0px;
right: 0px;
z-index: 999999;
}

.line {
display: block;
padding:0.4% 0px;
width: 100%;
margin-bottom: 0.9375rem;
background-color: rgba(255, 255, 255, 0.8);
}


.navi-line {
padding:3% 0px;
border-bottom:;
background-color: rgba(255, 255, 255, 0.8);
width: 100%;
}


.fix {
position: fixed;
top:0px;
border-bottom:solid 0.0625rem #d1cfcf;
background-color:#FFFFFF;
-webkit-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
-moz-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
}



 .top {
background-color: #000000;
width: 100%;
height: 0.125rem;
}
 
.justify {
text-align: 
}

.center {
text-align: center;
}

.divider {
text-align: center;
display: block;
margin:3.125rem auto;
}

.divider img {
width:5rem;
height: 1.25rem;
}

 .links {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.8125rem;
padding:0px 0px;
color:#9e9e9e;
text-transform: uppercase;
}



.footer p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.25rem;
font-size: 0.5625rem;
text-align: center;
color:#6d6d6d;
}
       

.footer {
-webkit-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
-moz-box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
box-shadow: 0px 0px 4rem -1.9375rem rgba(0,0,0,0.36);
padding:0.625rem 2.1875rem;
background-color: #303030;
}

.links a, .links a:link, .links a:visited {
color:#9e9e9e;
line-height: 2.5rem;
text-decoration: none;
}


 .content-first {
width: 70%;
margin: 8.125rem auto;
} 


.content-first p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
color:#727272;
line-height: 2.8125rem;
}


ul {
list-style-type: square;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
color:#727272;
line-height: 2.8125rem;
}


ol {
list-style-type: lower-alpha;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
color:#727272;
line-height: 2.8125rem;
}

blockquote {
margin:20px 0px;
width: 100%;
padding-left:1rem;
border-left: solid 6px #bfbfbf;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
color:#727272;
text-align: justify;
line-height: 2.8125rem;

}

.content-first h1::first-letter{
font-weight: 800;
color:#295999;
}


.content-first h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1.875rem;
color:#000000;
padding-bottom: 0.625rem;
text-transform: uppercase;
line-height: 2.5rem;
}


.content-first h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1rem;
color:#8e8e8e;
text-transform: uppercase;
line-height: 2.5rem;
}


strong {
font-weight: 700;
}


p i {
letter-spacing: 0.0625rem;
color:#9ab3ba;
}


p strong {
color:#3a699d;
font-weight: 700;
}


 .flex {
display: flex;
width:90%;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
}

.navi {

}

.navi a, .navi a:link {
color:#606060;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
margin:0px 1.375rem;
font-size: 0.8125rem;
vertical-align: middle;
text-decoration: none;
line-height: 3.75rem;
letter-spacing: 0.125rem;
text-transform: uppercase;
}


.vertical-line {
margin-left: 0.875rem;
margin-right: 0.625rem;
}



 .logo{
padding-left:3%;
font-family: 'Open Sans', sans-serif;
font-size: 2.375rem;
line-height: 3.75rem;
text-transform: uppercase;
}

.mobile{
width: 100%;
text-align:  center;
padding-left:3%;
font-family: 'Open Sans', sans-serif;
font-size: 1.5625rem;
line-height: 3.75rem;
text-transform: uppercase;
cursor: pointer;
display: none;
}

.main-head {
display: block;
}

.mobile-h {
display: none;
}


@media screen and (max-width: 400px) {
  
.show a:link { line-height: 2.5rem; margin: 0.625rem;
}

.main-head { display: none;
}
 
.mobile-h { display: block; }

}

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

.logo, .navi, .line {  display: none;  } 

.show { display: block; width: 100%; text-align: center; } 

.show a:link { font-size: 0.625rem; }

.mobile{ font-size: 1.125rem; text-align: center; display: block; }

}



@media screen and (min-width: 1440px) { 
html  {
 font-size: 106%;
} }


@media screen and (min-width: 1600px) { 
html  {
 font-size: 116%;
} }


@media screen and (min-width: 1680px) { 
html  {
 font-size: 123%;
} }


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

} }
 

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

} }