/*spacing*/
html {
  scroll-behavior: smooth;
}
.padding-xs { padding: .25em; }
.padding-sm { padding: .5em; }
.padding-md { padding: 1em; }
.padding-lg { padding: 1.5em; }
.padding-xl { padding: 3em; }

.padding-x-xs { padding: .25em 0; }
.padding-x-sm { padding: .5em 0; }
.padding-x-md { padding: 1em 0; }
.padding-x-lg { padding: 1.5em 0; }
.padding-x-xl { padding: 3em 0; }

.padding-y-xs { padding: 0 .25em; }
.padding-y-sm { padding: 0 .5em; }
.padding-y-md { padding: 0 1em; }
.padding-y-lg { padding: 0 1.5em; }
.padding-y-xl { padding: 0 3em; }

.padding-top-xs { padding-top: .25em; }
.padding-top-sm { padding-top: .5em; }
.padding-top-md { padding-top: 1em; }
.padding-top-lg { padding-top: 1.5em; }
.padding-top-xl { padding-top: 3em; }

.padding-right-xs { padding-right: .25em; }
.padding-right-sm { padding-right: .5em; }
.padding-right-md { padding-right: 1em; }
.padding-right-lg { padding-right: 1.5em; }
.padding-right-xl { padding-right: 3em; }

.padding-bottom-xs { padding-bottom: .25em; }
.padding-bottom-sm { padding-bottom: .5em; }
.padding-bottom-md { padding-bottom: 1em; }
.padding-bottom-lg { padding-bottom: 1.5em; }
.padding-bottom-xl { padding-bottom: 3em; }

.padding-left-xs { padding-left: .25em; }
.padding-left-sm { padding-left: .5em; }
.padding-left-md { padding-left: 1em; }
.padding-left-lg { padding-left: 1.5em; }
.padding-left-xl { padding-left: 3em; }

.margin-xs { margin: .25em; }
.margin-sm { margin: .5em; }
.margin-md { margin: 1em; }
.margin-lg { margin: 1.5em; }
.margin-xl { margin: 3em; }

.margin-x-xs { margin: .25em 0; }
.margin-x-sm { margin: .5em 0; }
.margin-x-md { margin: 1em 0; }
.margin-x-lg { margin: 1.5em 0; }
.margin-x-xl { margin: 3em 0; }

.margin-y-xs { margin: 0 .25em; }
.margin-y-sm { margin: 0 .5em; }
.margin-y-md { margin: 0 1em; }
.margin-y-lg { margin: 0 1.5em; }
.margin-y-xl { margin: 0 3em; }

.margin-top-xs { margin-top: .25em; }
.margin-top-sm { margin-top: .5em; }
.margin-top-md { margin-top: 1em; }
.margin-top-lg { margin-top: 1.5em; }
.margin-top-xl { margin-top: 3em; }

.margin-right-xs { margin-right: .25em; }
.margin-right-sm { margin-right: .5em; }
.margin-right-md { margin-right: 1em; }
.margin-right-lg { margin-right: 1.5em; }
.margin-right-xl { margin-right: 3em; }

.margin-bottom-xs { margin-bottom: .25em; }
.margin-bottom-sm { margin-bottom: .5em; }
.margin-bottom-md { margin-bottom: 1em; }
.margin-bottom-lg { margin-bottom: 1.5em; }
.margin-bottom-xl { margin-bottom: 3em; }

.margin-left-xs { margin-left: .25em; }
.margin-left-sm { margin-left: .5em; }
.margin-left-md { margin-left: 1em; }
.margin-left-lg { margin-left: 1.5em; }
.margin-left-xl { margin-left: 3em; }

/*Primary Colors*/
:root {
/*Grades*/
--Gradek:rgb(238,59,51); 
--Grade1:rgb(144,72,156);
--Grade2:rgb(248,152,29);
--Grade3:rgb(0,172,212); 
--Grade4:rgb(244,115,36);
--Grade5:rgb(0,164,138); 
--Grade6:rgb(28,68,156); 

/*BEC Blue*/
--Benchmark-Blue:#00539B; 
--BEC-Blue:#007CC3;
--BEC-Blue-plus2:#003E62;
--BEC-Blue-plus1:#005D92;
--BEC-Blue-plus3:#24346f;
--BEC-Blue-minus1:#409DD2;
--BEC-Blue-minus2:#80BEE1;
--BEC-Blue-minus3:#BFDEF0;
--BEC-Blue-minus4:#e2f0f8;
/*BEC Red*/
--BEC-Red:#EF3E33; 
--BEC-Red-plus1:#B32F26;
--BEC-Red-plus2:#781F1A;
--BEC-Red-plus3:#3C100D;
--BEC-Red-minus1:#F36E66;
--BEC-Red-minus2:#F79F99;
--BEC-Red-minus3:#FBCFCC;
/*BEC Green*/
--BEC-Green:#00A886;
--BEC-Green-plus1:#007E65;
--BEC-Green-plus2:#005443;
--BEC-Green-plus3:#002A22;
--BEC-Green-minus1:#40BEA4;
--BEC-Green-minus2:#80D4C3;
--BEC-Green-minus3:#BFE9E1;
/*BEC Yellow*/
--BEC-Yellow:#FFDF1C; 
--BEC-Yellow-plus1:#BFA715;
--BEC-Yellow-plus2:#80700E;
--BEC-Yellow-plus3:#403807;
--BEC-Yellow-minus1:#FFE755;
--BEC-Yellow-minus2:#FFEF8E;
--BEC-Yellow-minus3:#FFF7C6;
--BEC-orange:#F8981D;
/*Shades of Gray*/
--Dark-Gray:#444444;
--Gray:#898989;
--Silver:#CCCCCC;
--Light-Gray:#F8F8F8;
}
.bg-gradek, .bg-grade1, .bg-grade2, .bg-grade3, .bg-grade4, .bg-grade5, .bg-grade6 { color: white; }
.bg-gradek{ background-color: var(--Gradek); }
.bg-grade1{ background-color: var(--Grade1); }
.bg-grade2{ background-color: var(--Grade2); }
.bg-grade3{ background-color: var(--Grade3); }
.bg-grade4{ background-color: var(--Grade4); }
.bg-grade5{ background-color: var(--Grade5); }
.bg-grade6{ background-color: var(--Grade6); }
.clr-gradek{ color: var(--Gradek); }
.clr-grade1{ color: var(--Grade1); }
.clr-grade2{ color: var(--Grade2); }
.clr-grade3{ color: var(--Grade3); }
.clr-grade4{ color: var(--Grade4); }
.clr-grade5{ color: var(--Grade5); }
.clr-grade6{ color: var(--Grade6); }
.brd-gradek{ border: solid 1px var(--Gradek); }
.brd-grade1{ border: solid 1px var(--Grade1); }
.brd-grade2{ border: solid 1px var(--Grade2); }
.brd-grade3{ border: solid 1px var(--Grade3); }
.brd-grade4{ border: solid 1px var(--Grade4); }
.brd-grade5{ border: solid 1px var(--Grade5); }
.brd-grade6{ border: solid 1px var(--Grade6); }

.orange-text { color: var(--BEC-orange); }
.light-blue-text { color: var(--BEC-Blue-minus2); }
.red-text { color: var(--BEC-Red); }
.green-text { color: var(--BEC-Green); }
.dark-blue-text { color: var(--BEC-Blue-plus3); }
.blue-text { color: var(--Benchmark-Blue); }
.btn.dark-blue-bg { background-color: var(--BEC-Blue-plus3); color: white; border-radius: 0;}
.btn.dark-red-bg { background-color: var(--BEC-Red); color: white; border-radius: 0;}


div[class*="bg-grade"] h4 { line-height:0; margin:0; padding:5px;}

.f-right { float:right;}
.f-left {float:left;}
.components .books .img-thumbnail{ border-color: gray; border-radius:0; padding: 0;}
.components .books p{ padding-top:5px; }
.my-img.st .label, .my-img.hr .label, .my-img.bg .label{position: absolute; width: 80px; right: 0; bottom: 0;}
.my-img.sm .label{position: absolute; width: 60px; right: 0; bottom: 0;}

.my-img.st {max-width:100px; position: relative;} 
.my-img.hr {max-width:120px; position: relative;} 
.my-img.sm {max-width:62px; position: relative;} 
.my-img.bg {max-width:130px; position: relative;} 
.cls-1{fill:rgba(255, 255, 255, 0.2); animation-duration: 1.3s}.cls-2{font-size:39.09px;fill:#fbe000;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3{fill:white;}
.cls-4{fill:rgba(9, 67, 126, 0.8);}
.components h5{ font-size: 1em; font-weight:700; }

.components .books .img-thumbnail.big{ max-width: 130px; }

.components .books .img-thumbnail.standard{ max-width: 100px; background-color:}
.components .books .img-thumbnail.standard.push-top-md{ margin-top: 21px; }
.components .books .img-thumbnail.standard.push-top-sm{ margin-top: 12px; }
.components .books .img-thumbnail.horizontal.push-top-md{ margin-top: 34px; }


.components .books .img-thumbnail.horizontal{ max-width: 120px; margin-top: 18px;}

.components .books .img-thumbnail.small{ max-width: 62px;}
.components .books .img-thumbnail.small.pd{margin-top:65px;}

.components .books div[class*="col"] { max-width: 144px;  padding-right: 0px;}
.components .books .img-thumbnail.none{ border: none; }
.components .books p{font-size: 0.7em;}
.brd-gray{ border: solid 1px #CCCCCC; }
.fixed { position: fixed; }
.relative { position: relative; }
/*.container { max-width: 1420px; }*/
.logo { max-width:260px; padding:10px;} 
.navbar { background-color: var(--Benchmark-Blue); color: white; height:40px;}
.navbar ul  li  a{  font-size:.8em;} 
.navbar ul > li > a{ color: white; text-transform: uppercase; } 
.top-nav li a{ color: var(--Benchmark-Blue); font-size:.7em; text-transform: uppercase; }  
.top-nav li .icon{ color: white; font-size:.9em; background-color: var(--BEC-Red); border-left: solid 1px var(--BEC-Red-minus2);} 
.search-btn { background-color: initial; color: white; } 
h1, h2{ font-family: 'Rokkitt', serif; color: var(--BEC-Blue-plus3);}
h2.secondary { font-family: 'Montserrat'; font-size: 1.7em; }
h2 {font-size: 2.2em;}
h1 {font-size: 3em;}
h1 > span{font-weight:300; font-size:1em;}
h3, h4 { font-family: 'Arvo', serif;}
h4 { font-size: 1.2em }
.gray-p {color:var(--Gray);}
ul.container > li.py-2  li.dropdown a{ color: black; }

.slider .img-thumbnail{
    padding: 0rem;
    background-color: #fff;
    border: 4px solid white;
    border-radius: 0rem;
    max-width: 100%;
    height: auto;}

/*.slider { background-color: #24346f; }*/

.slider .col-md-1, .components .col-3  {
  padding-right: 0px;
    padding-left: 0px;
}
.components .col-3{height:5px; border:0;}
.components .col-3 div{border:0;}

.icon.nav-link { background-color: black; }

.slider .img-thumbnail.green {background-color: var(--BEC-Green); height:100%;}
.slider .img-thumbnail.dark-blue {background-color:var(--BEC-Blue-plus3);height:100%;}
.slider .img-thumbnail.light-blue {background-color:var(--BEC-Blue-minus2);height:100%;}
.slider .img-thumbnail.orange {background-color:var(--BEC-orange);height:100%;}

.circle-holder{
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
z-index: 9999;
width: 28em;
height: 28em;
}

footer .col-sm-12.col-lg-4 .f-right a{ padding-left: 10px; font-size: 12px;}


.hide { display: none; 
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
 }
.hide.highlighted { display: inline;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out; }


.slider .circle {
position: relative;
border-radius: 50%;
width: 28em;
height: 28em;
background: var(--BEC-Red);
position: absolute;
z-index: 9999999;
margin-top: 44px;
animation-duration: 1s;animation-delay: 2.6s;}

/*img loading*/
.loading {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index:0;
  background: url(../imgs/Preloader.gif) center no-repeat;
  animation-delay: .9s;
}

.mypage {  animation-delay: .9s;}


.slider h2{ color: white; text-align: center; padding-top:110px; font-family: 'Arvo', serif; line-height:1.4em; font-size:2.4em;
}
.c1 {animation-duration: 1s;animation-delay: 0.1s;}
.c2 {animation-duration: 1s;animation-delay: 0.2s;}
.c3 {animation-duration: 1s;animation-delay: 0.3s;}
.c4 {animation-duration: 1s;animation-delay: 0.4s;}
.a1 {animation-duration: 1s;animation-delay: 0.5s;}
.a2 {animation-duration: 1s;animation-delay: 0.6s;}
.a3 {animation-duration: 1s;animation-delay: 0.7s;}
.a4 {animation-duration: 1s;animation-delay: 0.8s;}
.a5 {animation-duration: 1s;animation-delay: 0.9s;}
.a6 {animation-duration: 1s;animation-delay: 1s;}
.a7 {animation-duration: 1s;animation-delay: 1.1s;}
.a8 {animation-duration: 1s;animation-delay: 1.2s;}
.a9 {animation-duration: 1s;animation-delay: 1.3s;}
.a10 {animation-duration: 1s;animation-delay: 1.4s;}
.a11 {animation-duration: 1s;animation-delay: 1.5s;}
.a12 {animation-duration: 1s;animation-delay: 1.6s;}
.a13 {animation-duration: 1s;animation-delay: 1.7s;}
.lookinside-arrow {
  animation-duration: 5s;
}

.triangle-isosceles {
  position: relative;
  max-width: 400px;
  padding: 15px;
  color: #000;
  background: #e4ebf3;
  border-radius: 10px;
  background: linear-gradient(top, #e4ebf3, #e4ebf3);
}
.triangle-isosceles h4 {  font-size: 1em;}
.triangle-isosceles p { line-height: 1em; }

/* creates triangle */
.triangle-isosceles:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #e4ebf3 transparent;
}
.w-100 { display: none; }
.disp1, .disp2 { display: inline; }
.footer-mobile { display: none; }
@media only screen and (max-width: 1360px) {.w-100 { display: initial;} .assessment.offset-md-1 {margin-left:0; } .components .books .img-thumbnail.small.pd{margin-top:0;}
}
@media only screen and (max-width: 1557px) {.circle-holder{width: 24em; height: 24em;}.slider .circle {width: 24em; height: 24em; margin-top: 44px;}.circle-holder h2{ font-size:2em; }}
@media only screen and (max-width: 1357px) {.circle-holder{width: 22em; height: 22em;}.slider .circle {width: 22em; height: 22em; margin-top: 42px;}.circle-holder h2{ font-size:1.8em; padding-top:100px;}}
@media only screen and (max-width: 1257px) {.circle-holder{width: 20em; height: 20em;}.slider .circle {width: 20em; height: 20em; margin-top: 40px;}.circle-holder h2{ font-size:1.6em; padding-top:80px;}}
@media only screen and (max-width: 1157px) {.circle-holder{width: 18em; height: 18em;}.slider .circle {width: 18em; height: 18em; margin-top: 38px;}.circle-holder h2{ font-size:1.4em; padding-top:80px;}}
@media only screen and (max-width: 1057px) {.circle-holder{width: 16em; height: 16em;}.slider .circle {width: 16em; height: 16em; margin-top: 36px;}.circle-holder h2{ font-size:1.2em; padding-top:80px;}}
@media only screen and (max-width:  957px) {footer { height:0; }h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; }.circle-holder{width: 14em; height: 14em;}.slider .circle {width: 14em; height: 14em; margin-top: 26px;}.circle-holder h2{ font-size:1em; padding-top:60px;}}
@media only screen and (max-width:  797px) {.circle-holder{width: 14em; height: 14em;}.slider .circle {width: 14em; height: 14em; margin-top: 16px;}.circle-holder h2{ font-size:1em; padding-top:60px;}}
@media only screen and (max-width: 767px) {.circle-holder{width: 22em; height: 22em;}.slider .circle {width: 22em; height: 22em; margin-top: 42px;}.circle-holder h2{ font-size:1.8em; padding-top:100px;}}
@media only screen and (max-width: 423px) {.circle-holder{width: 14em; height: 14em;}.slider .circle {width: 14em; height: 14em; margin-top: 26px;}.circle-holder h2{ font-size:1em; padding-top:60px;}}
@media only screen and (max-width: 767px) { .disp1 { display: none;} .circle-holder { margin-top:80px; } }
@media only screen and (max-width: 720px) { .disp1 { display: none;} .circle-holder { margin-top:60px; } }
@media only screen and (max-width: 700px) { .disp1 { display: none;} .circle-holder { margin-top:40px; } }
@media only screen and (max-width: 680px) { .disp1 { display: none;} .circle-holder { margin-top:20px; } }
@media only screen and (max-width: 660px) { .disp1 { display: none;} .circle-holder { margin-top:0px; } }
@media only screen and (max-width: 566px) {.footer-mobile { display: inline; font-size: 11px; letter-spacing:2px;} footer .logo{ display: none; } .disp1 { display: none;}.circle-holder{width: 16em; height: 16em;}.slider .circle {width: 16em; height: 16em; margin-top: 66px;}.circle-holder h2{ font-size:1.2em; padding-top:80px;} }
@media only screen and (max-width: 476px) { .disp1 { display: none;}.circle-holder{width: 16em; height: 16em;}.slider .circle {width: 16em; height: 16em; margin-top: 46px;}.circle-holder h2{ font-size:1.2em; padding-top:60px;} }
@media only screen and (max-width: 416px) { .disp1 { display: none;}.circle-holder{width: 14em; height: 14em;}.slider .circle {width: 14em; height: 14em; margin-top: 26px;}.circle-holder h2{ font-size:1.2em; padding-top:40px;} }
@media only screen and (max-width: 575px) {.header-right .margin-top-xl { margin-top: 0px;} .header-right .margin-top-xl .btn{ font-size: 0.7em; background: transparent;} 
.header-right .margin-top-xl .btn:nth-child(1){ color: var(--BEC-Blue-plus3);}
.header-right .margin-top-xl .btn:nth-child(2) { color: var(--BEC-Red);}
.col-sm-4 .logo {  width: 200px; }
}
/*@media only screen and (max-width: 991px) {
.components .books .img-thumbnail.standard{ max-width:200px; }
.components .books .img-thumbnail.small{ max-width: 140px; }
.components .books div[class*="col"] { max-width: initial; }

}
*/





/*footer*/

body { overflow-x: hidden; }
 #fixed_footer {
    background-color: #093661;
    width: 100%;
    position: fixed;
    bottom: 0;
    color: white;
    padding-top: 5px;
  }
footer {background-color:rgba(0, 80, 152, 1);height: 250px; z-index: 99999;}
footer div:last-child {color: white;}
.footer-child { background-color:rgba(0, 80, 152, 1); padding: 20px;}
.footer-child a { color: white; font-size: .9em;}
footer .logo{color:white; font-family: 'Open Sans Condensed', sans-serif; font-weight:600; font-size:0.8em; letter-spacing: 8px; text-transform: uppercase;}
footer a:hover{color:#a0d3fe;}
footer img{width:80px;margin-top:-40px; padding:0 10px;}
/*animation timing*/
@media only screen and (max-width: 820px) {
footer { height: auto;}
footer img { width:70px; }
footer .logo {font-size: 0.6em;letter-spacing: 3px;}
.footer-child { display: none;}
}