


/* ========================================= */





@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: auto !important;
}

html,body{
    height: 100%;
    place-items: center;
    scroll-behavior: auto !important;
}


body{
    padding:0;
    background-color:#fff !important;
}



img{ border:none; }






/* ========================================= */



.tagline{
    color: #fff;
    font-weight: 700;
    /*font-size: 44px;*/
    margin: 15px auto 15px auto;
    padding: 0;
}




/* ======================================== */




.divider{
    margin:40px auto 0px auto;
    padding:0px 0px 45px 0px;
    border-top:1px solid #ccc;
    width:85%;
}



.wrapper-box{
    padding: 35px;
    margin: 0px auto 0px auto;
    border-radius: 10px;
    -webkit-box-shadow: 0px 3px 8px 0px rgba(0,3,5,0.25);
    -moz-box-shadow: 0px 3px 8px 0px rgba(0,3,5,0.25);
    box-shadow: 0px 3px 8px 0px rgba(0,3,5,0.15);
    background-color: #fff;
}




/* ======================================== */




a.contact-email{  
    font-weight: 700; 
    text-decoration: none; 
    letter-spacing: 2px;
}

a.contact-email:link    {  color:#fff; }      
a.contact-email:visited {  color:#fff; }  
a.contact-email:active  {  color:#fff; }  
a.contact-email:hover   {  color:#999; }  



a.footer-contact-email{  
    font-weight: 700; 
    text-decoration: none; 
    letter-spacing: 2px;
}

a.footer-contact-email:link    {  color:#fff; }      
a.footer-contact-email:visited {  color:#fff; }  
a.footer-contact-email:active  {  color:#fff; }  
a.footer-contact-email:hover   {  color:#999; } 


.button-click a:link {    font-size:12px; text-decoration: none; background-color:#162c55; color:#fff; padding:10px 20px 10px 20px; }
.button-click a:visited { font-size:12px; text-decoration: none; background-color:#162c55; color:#fff; padding:10px 20px 10px 20px; }
.button-click a:active {  font-size:12px; text-decoration: none; background-color:#162c55; color:#fff; padding:10px 20px 10px 20px; } 
.button-click a:hover {   font-size:12px; text-decoration: none; background-color:#767676; color:#fff; padding:10px 20px 10px 20px; } 






/* ========================================= */




input::placeholder {
  color: #ccc; /* Set the desired color */
}



#form-main .form-input-block{
    padding:0px 0px 15px 0px !important;
}



#form-main #form-submit {
    width: 100%;
    border:none;
    background-color: #162c55;
    color:#fff;
    padding:15px;
    font-size: 13px;
    font-weight: 700;
    cursor:pointer;
    background: #162c55 !important;
    -webkit-transition: background-color .25s ease-out;
    -moz-transition: background-color .25s ease-out;
    -o-transition: background-color .25s ease-out;
    transition: background-color .25s ease-out;
}


#form-main #form-submit:hover {
    background: #767676 !important;
}


#form-main label{
    font-size: 14px;
    color:#666;
}

#form-main .form-item{
    margin-top: 5px;
    width:100%;
    border: none;
    background-color: #f0f0f0;
}


#form-main input, 
#form-main select,
#form-main textarea{
    padding:10px;
}

.form-item-header{
    font-weight: 600;
    color:#666;
    font-size: 14px;
    margin-bottom: 0px !important;
}



/* ======================================= */




.table-output-results{
    margin:15px auto 15px auto;
}


.table-output-results th{
    font-size: 11px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    background-color:#333;
    color: #fff;
}

.table-output-results td{
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    color: #666;
}


.table-output-results td.last-column{
    border-bottom: 1px solid #ddd;
}

/*.table-output-results tr:nth-child(even) { background: #f9f9f9; }*/

tr:nth-child(4n+0),
tr:nth-child(4n+1) {
    background: #f9f9f9; /* Set the alternating background color */
}


/* ======================================= */




/* Extra small devices (phones, 575px and down) */
@media (max-width: 575px) {     

    .tagline{ font-size: 24px; }
    a.contact-email{  font-size:16px; }
    a.footer-contact-email{  font-size:12px; }

    

    /* ======================================================= */
    /* coming soon */
    /* ======================================================= */

    .coming-soon-row{  min-height: 200px; }


    /* ======================================================= */
    /* homepage */
    /* ======================================================= */

    .classroom-customs-nav-logo{ max-height: 65px; top: 1px; }
    .background-homepage-gradient { background-size: auto 350px; background-position: -700px -50px; }

    .homepage-header-text-main{ font-size: 30px; }
    .homepage-header-text-second{ font-size: 14px; }
    .homepage-header-text-third{ font-size: 12px; }

} 


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    .tagline{ font-size: 24px; }
    a.contact-email{  font-size:18px; }
    a.footer-contact-email{  font-size:14px; }

    
    /* ======================================================= */
    /* coming soon */
    /* ======================================================= */

    .coming-soon-row{  min-height: 300px; }


    /* ======================================================= */
    /* homepage */
    /* ======================================================= */

    .classroom-customs-nav-logo{ max-height: 90px; top: 5px; }
    .background-homepage-gradient { background-size: auto 400px; background-position: -700px -50px; }

    .homepage-header-text-main{ font-size: 45px; }
    .homepage-header-text-second{ font-size: 25px; }
    .homepage-header-text-third{ font-size: 14px; }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

    .tagline{ font-size: 34px; }
    a.contact-email{  font-size:20px; }
    a.footer-contact-email{  font-size:16px; }

    

    /* ======================================================= */
    /* coming soon */
    /* ======================================================= */

    .coming-soon-row{  min-height: 400px; }


    /* ======================================================= */
    /* homepage */
    /* ======================================================= */

    .classroom-customs-nav-logo{ max-height: 100px; top: 5px; }
    .background-homepage-gradient { background-size: auto 550px; background-position: -1000px -145px; }

    .homepage-header-text-main{ font-size: 60px; }
    .homepage-header-text-second{ font-size: 30px; }
    .homepage-header-text-third{ font-size: 16px; }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .tagline{ font-size: 44px; }
    a.contact-email{  font-size:24px; }
    a.footer-contact-email{  font-size:18px; }


    /* ======================================================= */
    /* coming soon */
    /* ======================================================= */

    .coming-soon-row{  min-height: 500px; }


    /* ======================================================= */
    /* homepage */
    /* ======================================================= */

    .classroom-customs-nav-logo{ max-height: 125px; top: 10px; }
    .background-homepage-gradient { background-size: auto 700px; background-position: -1200px -150px; }

    .homepage-header-text-main{ font-size: 70px; }
    .homepage-header-text-second{ font-size: 34px; }
    .homepage-header-text-third{ font-size: 18px; }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

    .tagline{ font-size: 44px; }
    a.contact-email{  font-size:24px; }
    a.footer-contact-email{  font-size:18px; }


    /* ======================================================= */
    /* coming soon */
    /* ======================================================= */

    .coming-soon-row{  min-height: 500px; }


    /* ======================================================= */
    /* homepage */
    /* ======================================================= */

    .classroom-customs-nav-logo{ max-height: 125px; top: 10px; }
    .background-homepage-gradient { background-size: auto 800px; background-position: -900px -175px; }

    .homepage-header-text-main{ font-size: 100px; }
    .homepage-header-text-second{ font-size: 34px; }
    .homepage-header-text-third{ font-size: 18px; }

}





/* ======================================== */






/* ======================================================= */
/* navbar */
/* ======================================================= */

.nav-item{ 
    padding: 0px 15px 0px 15px !important; 
}

.nav-link{ 
    color: #fff !important; 
    letter-spacing: 1px !important;
    font-size: 15px !important;
}


.nav-link:hover{ 
    color: #666 !important; 
}

.classroom-customs-nav-logo{
    position: absolute;
}




/* ======================================================= */
/* homepage */
/* ======================================================= */

.background-homepage-gradient {
    background-image: url('/images/homepage/pattern_gradient.png');
    background-repeat: repeat-x;
}


.homepage-header-line-height{
    line-height: .8;
}


.homepage-header-text-color-light{
    color: #fff;
}

.homepage-header-text-color-dark{
    color: #000;
}

.homepage-header-text-main{ 
    padding: 0;
    letter-spacing: 1px;
}


.homepage-header-text-second{
    padding: 5px 0px 0px 0px;
    letter-spacing: 1px;
}


.homepage-header-text-third{
    padding-top: 20px;
    letter-spacing: 1px;
}



.homepage-background-alt{
    background-color: #fff;
}


.row-no-margins{
    margin: 0px !important;
}


/* ======================================================= */






/* 
======================================= 
scroll to top
=======================================
*/

.scrollToTop{
    width:35px; 
    height:35px;
    padding:0px; 
    text-align:center; 
    text-decoration: none;
    position:fixed;
    bottom:30px;
    right:30px;
    display:none;
    z-index: 5000 !important;
    background: url('/images/back_to_top.png') no-repeat 0px 0px;
}

.scrollToTop:hover{
    text-decoration:none;
}



/* ======================================= */




/* 
======================================= 
spinner
=======================================
*/

.spinner {
   position: relative;
   left: 0px;
   top: 0px;
   height:30px;
   width:30px;
   margin:0px auto;
   -webkit-animation: rotation .6s infinite linear;
   -moz-animation: rotation .6s infinite linear;
   -o-animation: rotation .6s infinite linear;
   animation: rotation .6s infinite linear;
   border-left:2px solid rgba(22, 44, 85, .10) !important;
   border-right:2px solid rgba(22, 44, 85, .10) !important;
   border-bottom:2px solid rgba(22, 44, 85, .10) !important;
   border-top:2px solid rgba(22, 44, 85, .8) !important;
   border-radius:100%;
}

@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}
