@import url("https://use.typekit.net/jsa0fex.css");
*,*::before,*::after{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
html, body{ height: 100%;padding:0; margin:0} 
body{color: #001e33!important; font-weight:400; background-color:#fff!important;font-family: 'brother-1816', sans-serif!important;font-size:16px!important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-style: normal;} 

.bold700,.home-text2,.home-text6,.f-text1{font-family: "brother-1816", sans-serif;font-weight: 700;font-style: normal;}
.bold500,.home-text4{font-family: "brother-1816", sans-serif;font-weight: 500;font-style: normal;}

.x{border:1px solid #000!important}
a{color:#000;outline:none!important; border: none!important; text-decoration:none}
a:hover{text-decoration:none!important; color:#00a9e2;outline:none!important; border: none!important}
::-moz-selection { background-color:#00a9e2; color:#fff}
::selection {background-color:#00a9e2; color:#fff}
a:focus{outline:none!important; border:none!important;text-decoration:none!important}
*:focus{outline:none!important;text-decoration:none!important}

.relative,.line{position:relative!important}
.tc, .tc p{text-align:center!important}

.smooth, a,.top-number-en svg{-webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; -o-transition: all 500ms linear; transition: all 500ms linear}
.font20{font-size:20px!important}.font26{font-size:26px!important; font-weight: 700!important;}

.adjust{margin:  0 auto!important}
.adj1{margin-top:30px}
/* ------------------- IDS and Classes------------------------ */
#page-container{overflow-x: hidden!important}
.header{padding:10px 0 10px 0; border-bottom:5px solid #3777bb}
.top-banner{min-height:500px; background:url("../img/nole-banner.jpg") top center no-repeat; background-size:cover}
.top-b1{float: right; position: relative}
.top-b1:before{content: ''; position: absolute; top:-10px; left:50px; width:50px; height:5px; display: inline-block; background-color:#3777bb}

.top-number-en{font-size:16px; color: #3777bb;display: flex;align-items: center;}
.top-number-en svg{width:30px; height:auto;margin-right: 20px;}
.top-number-en:hover svg {fill: #00a9e2}
.top-number-en .bold700{font-size: 20px}
.footer-banner{min-height:1000px; background:url("../img/footer.jpg") top center no-repeat; background-size:cover}

/* ------------------- Text & Colors------------------------ */
h1{font-size:30px!important; text-transform: uppercase; text-align: center; font-weight: 500}
.page-id-12 h1{font-weight:700}
h2{font-size:30px!important; color: #fff; text-align: center;text-shadow: 10px 10px 12px rgba(0, 0, 0, 0.9); font-weight: 600}
.blue-bg, .footer{background-color: #3777bb}
.home-text1 p{font-size:20px;padding:30px 0 30px 0}
.home-text2{font-size:24px;padding:30px 0 10px 0;text-shadow: 2px 2px 10px rgba(255,255,255,1),-2px -2px 20px rgba(255,255,255,1),4px 4px 20px rgba(255,255,255,1),-4px -4px 10px rgba(255,255,255,1); font-style: italic}
.home-text3 p{font-size:20px;padding:30px 0 30px 0; color: #fff}
.home-text4, .home-text5 {background-color: rgba(255,255,255,0.9); margin: 20px auto 20px auto; padding:10px; position: relative}
.line{ width: 150px; height:6px; background-color:#3777bb; margin: 20px auto; display: inline-block}
.home-text6{font-size:28px;padding:0 0 20px 0}
.home-text5 p{line-height:30px}
.home-text7{padding: 30px 0 0 0; color:#3777bb; font-size: 20px}
.footer{padding: 30px 0 30px 0; color: #fff;}
.f-text1{font-size:60px; line-height: 40px}
.f-text2{font-size:45px}
.f-text3, .f-text4{font-size:20px}
/* ------------------- Links ------------------------ */
#totopbutton {position: fixed; bottom:0; right:0; opacity: 0;visibility: hidden; z-index: 9999999999;display:inline-block;width:40px;height:40px;background: linear-gradient(to bottom, #00a9e2 50%, #094772 50%);  background-size: 100% 200%;line-height:40px;text-align:center;border:0!important;cursor: pointer } 
#totopbutton:after{content: "";  background:url('../img/arrow.svg') center no-repeat; width: 20px; height: 27px; display: inline-block;background-size:20px 27px; margin-top:7px} 
#totopbutton:hover{background-position: 0 100%} #totopbutton.show { opacity: 1; visibility: visible }




@media only screen and (max-width:767px) {
body{padding-top:70px}
 
.header{position:fixed!important;z-index:9999!important;height:65px!important; left:0!important;right:0!important; top:0!important; width:100%!important; padding:5px 0 0 0!important; margin:0!important;background-color: #fff;border-bottom:2px solid #3777bb}    
.logo{width:210px!important}
.top-b1:before,.link-text{display: none!important}
.top-number-en{height: 40px; width: 40px; line-height: 40px!important; text-align: center; background-color: #00a9e2}
.top-number-en:hover{background-color: #094772}    
.top-number-en svg{fill:#fff!important;transform: translateX(10px)}
.top-number-en:hover svg {fill: #00a9e2!important}    
}

@media only screen and (min-width: 1024px) {
.logo{height:90px; width:auto}   
   .home-text4,.home-text5{padding:30px}    
}

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

.header{padding:50px 0 50px 0;border-bottom:10px solid #3777bb}
.top-banner{min-height:700px}
.logo{height:100px; width:auto}
.home-text1 p{font-size:28px;padding:50px 0 20px 0; max-width: 900px; margin: 0 auto}
.home-text3 p{font-size:28px;padding:80px 0 60px 0; max-width: 980px; margin: 0 auto}  
.home-text4,.home-text5{margin: 40px auto 40px auto; max-width:800px; padding:60px;}
.home-text4,.home-text7{font-size:24px;}
.home-text5 p{font-size:20px; line-height: 40px}   
.adj1{margin-top: 60px}   
.footer{padding:60px 0 30px 0; color: #fff;}  
    .f-text4{transform: translateX(-80px)}    
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
   
}

/* - Ipad Pro Portrait */
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {
    .home-text4,.home-text5{padding: 50px}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
   .home-text4,.home-text5{padding:50px 30px}   
}
@media (min-width: 1400px){.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {max-width: 1200px;}}