.carousel-inner > .carousel-item > a > img, .carousel-inner > .carousel-item > img, .img-fluid {
  width: 100%; }

.inner-nav {
  background: #011138 !important }
.mast-nav {
    background: rgba(0, 0, 0, 0.55);
}
.dropdown .fa {
    color: #757575;
}
.banner-logo{
    position: absolute;
    z-index: 1;
    text-align: center;
    width: 100%;
}

.text-xt {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 19px;
    max-height: 57px;      /* fallback */
   -webkit-line-clamp: 3; /* number of lines to show */
   -moz-line-clamp: 3;
   -ms-line-clamp: 3;
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
   -ms-box-orient: vertical;
}

@media (max-width:575px) {
    .banner-logo img {
        width: 210px;
        padding-top:30px;
    }
}

.panel-title a .fa {
    color: black !important;
    -webkit-transform:rotate(-180deg);
    transform:rotate(-180deg);
}


.panel-title a.collapsed .fa {
    color: black !important;
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
}

.navbar {
  box-shadow: none; }
.card-overlay {
    background-size: cover !important;
}
.scrolling-navbar {
  -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
  -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
  transition: background .5s ease-in-out, padding .5s ease-in-out; }

.top-nav-collapse {
  background-color: #1C2331; }

footer.page-footer {
  background-color: #1C2331;
  margin-top: 0; }

@media only screen and (max-width: 768px) {
  .navbar {
    background-color: #1C2331; 
    min-height:50px;
  }

}

.navbar .navbar-toggler {
    z-index: 9999999 !important;
    position:relative;
}
 

.btn-bar {
    position: absolute;
    top: 8px;
    right: 0px;
    z-index: 99999;
}
/* Carousel*/
.flex-center {
  color: #fff; }

@media (min-width: 776px) {
  .carousel .view ul li {
    display: inline; }

  .carousel .view .full-bg-img ul li .flex-item {
    margin-bottom: 1.5rem; } }
#banner {
  height: 550px;
  background-size: contain; }

img.sort-logo {
  position: absolute;
  right: 5rem;
  top: -13em;
  width: 25rem; }

img.sort-texas-logo {
  position: absolute;
  right: 7rem;
  top: -3rem;
  width: 5rem; }

img.sort-dps-logo {
  position: absolute;
  right: 13rem;
  top: -1rem;
  width: 15rem; }

/*# sourceMappingURL=style.css.map */
/* YOUR CUSTOM STYLES */
.custom-blue {
   color: #45526E;
}

#state-navbar  i.fa.fa-sign-in {
   color: #45526E;  
}
 .top-nav-collapse {
            background-color: #2E2E2E;
        }
.dev-notes {
    color:red;
    border: 3px solid red;
    padding: .5em;
}
#slide-out i.fa.fa-user{
    color:#fff;
    
}
.mdb-skin .side-nav .logo-wrapper{
    
    background-image: none;
}
.logo-wrapper .fa  {
    font-size: 5rem;
    
    display: flex;
    justify-content: space-around;
    padding:10px;
   
}

.logo-wrapper a.edit-profile {
    color:#fff;
    cursor: pointer;
}

.logo-wrapper p {
    text-align: center;
   
}
p .login-profile {
    font-size: 20px;
    color:#fff;
}
#dashboard-logo {
    display: inline-block;
    margin-left: 1rem;
    width: 17rem;
}
.breadcrumb-dn {
    display: inline-block;
    padding: .5rem;
    margin-left: 5rem;
    font-size: 3.5rem;
}


.mdb-skin .navbar {
    background-color: rgb(255,255,255);
}

.mdb-skin .navbar .fa {
   color: #45526E;
}
.mdb-skin .navbar p{
  color: #45526E;
}
  li.nav-item a.nav-link {
    color:#45526E;
}
.mdb-gradient, .mdb-skin .side-nav {
  background: #45526E !important;
}



.mdb-gradient .mdb-skin .side-nav .fa{
  background: #fff !important;
}
.collapse.show {
    display: block;
}

#why-protatech {
   
   
}
.card .card-title a, .card-block p{
    color: #fff;
}

#core-exams .card-block {
    background-color:  #45526E;
}

#core-exams card-block h4, #core-exams .card-footer, .fa
{
    color: #000;
}
#mandatory-exam .card-block,#elective-exam .card-block  {
    background-color: #7283A7;
}
 .card-block h4, .card-footer
{
    color: #fff;
}

 /*Check out Invoice CSS*/
.invoice-title h2, .invoice-title h3 {
    display: inline-block;
}

.table > tbody > tr > .no-line {
    border-top: none;
}

.table > thead > tr > .no-line {
    border-bottom: none;
}

.table > tbody > tr > .thick-line {
    border-top: 2px solid;
}

/**Register**/


#register-form .blue-gradient {
    background: #45526E;
}
.md-form .fa {
    color: #45526E;
}
#register-page #register-form button.btn.btn-indigo {
    background: #45526E;
}
/**End Register**/

/**Contact Form**/

#contact-page {
    margin-top: 3rem;
}


#contact-form p {
    color: gray;
}

#contact-form .fa {
    color: #45526E;
}
#contact-form .fa-phone {
    font-size:2rem;
}
#contact-form .call-us {
    font-size: 1.5rem;
    color: #45526E;
    margin-right: 1rem;
}

#contact-form button.btn.btn-default {
    background:  #45526E;
}

/**End Contact Form**/



/**Dashboard Footer**/
#dashboard-footer {
    background: #fff;
}

/**End Dashboard Footer**/

/**Login **/

#login-page {
    margin-top: 3rem;
}
#login-page .fa {
     font-size:2rem;
         color: #45526E;
    
}
#login-page h3 {
      color: #45526E;
}

#login-page button.btn.btn-primary {
    background:  #45526E;
}
/**End Login **/


/**Certificate**/

#certificate-page i.fa  {
    color:#45526E;
}
#certificate-page th {
    background: #45526E;
    color: #fff;
}
#certificate-page td:nth-of-type(2n){
    width: 10%;
    text-align: center;
}
#certificate-page td{
    width: 25%;
    border: 1px solid #45526E;
    font-size: 1.2rem;
}
/**Comments**/

#comments-page #comments-form h3 {
    color:#45526E;
}

#comments-page #comments-form p {
    color: #757575;
}

#comments-page #comments-form i.fa.fa-envelope {
    color:  #45526E;
}

#comments-page #comments-form button.btn.btn-default {
    background:   #45526E;
}
/**End Comments**/

/**My Courses**/

.courses-input input {
    border: 2px solid gray;
   
}

#my-core-courses th, #my-elective-courses th {
    background: #45526E;
    color: #fff;
}
#my-elective-courses td:nth-of-type(2n), #my-core-courses td:nth-of-type(2n){
    width: 5%;
    text-align: center;
}
#my-core-courses td, #my-elective-courses td {
    width: 25%;
    border: 1px solid #45526E;
    font-size: 1.2rem;
}

/**Packages**/
#packages .card { 
    background-color:  #45526E;
    position: relative;
}
.packages-card-title {
    font-size: 4rem;
    color: #fff;
}

.packages-hours {
     font-size: 1.4rem;
    color:#fff;
    
}
#packages .card .card-footer {
   color:#fff;
}


/**End Packages**/

/**About**/

#about-page .panel-heading {
    background: #45526E;
     padding: 1rem;
}

#about-page .panel-heading a {
  color:#fff;
   
}

/**End About**/



/**Faqs**/

#faqs-page .panel-heading {
    background: #45526E;
     padding: 1rem;
}

#faqs-page .panel-heading a {
  color:#fff;
   
}

/**End Faqs**/

/**Courses Row**/

#photos-desc-row .card {
    background-color: #45526E;
}

#photos-desc-row .card-block {
    background-color: #45526E;
}



/**Packages Alt Row**/

/**Packages**/
#packages-photo-row .card { 
    background-color: #45526E;
    position: relative;
}
.packages-card-title {
    font-size: 4rem;
    color: #fff;
}

.packages-hours {
     font-size: 1.4rem;
    color:#fff;
    
}
#packages .card .card-footer {
   color:#fff;
}
/**End Packages Alt Row**/

/**Notes**/

.text-red {
    color: red;
    font-weight: bold;
}
/**End Notes**/

/**Shopping-cart**/

#shopping-cart {
    margin-top: 10rem;
}

.fa-trash-o {
    color: red;
}
.fa-wpforms, .fa-clock-o, .fa-calendar-check-o, .fa-dollar {
    color: black;
}

/**End Shopping-cart**/

/**Courses**/
#course-options {
    color: #45526E;
}
#course-options .card {
   position: relative;
}
#course-options .card p.card-text {
    margin-bottom: 2rem;
}
#course-options .card .card-footer {
    display: flex;
    flex-direction: row;
   position: absolute;
    bottom:10px;
    right: 10px;
   align-content: flex-end;
    margin-top: 10px;
    padding-top: 0px;
   
}

.md-toolbar-tools {
  
    padding: 30px 24px!important;
}

$gray: #eee;

md-content.md-default-theme {
  background-color: $gray;
}
md-card {
  background-color: #fff;
  h2:first-of-type {
    margin-top: 0;
  }
}
md-toolbar {
  .md-button.md-default-theme {
    border-radius: 99%; 
  }
}
h2 {
  font-weight: 400;
}
.md-toolbar-tools-bottom {
  font-size: small; & :last-child {
    opacity: 0.8;
  }
}
md-toolbar:not(.md-hue-1),
.md-fab {
  fill: #fff;
}
md-sidenav {
  fill: #737373;
  ng-md-icon {
    position: relative;
    top: 5px;
  }
}
.user-avatar {
  border-radius: 99%;
}
/** Added by HariRam on 23Nov 2016 for Hide HTML5 input type number arrow**/
.no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}
/**End Courses**/
.btm-space {
    margin-bottom: 25px;
}
.md-hue-2 {
    background:#434c61 !important;
}
.progress {
    background: gray;
    margin-bottom:25px;
}
.progress-bar-success {
    background:#2cce50;
}
.badgeCart
{
     /* position: absolute; */
    /* right: 5px; */
    /* z-index: 1002; */
    background-color: green;
    /* height: 50px; */
    /* width: 46px; */
    color: white;
    /* border-radius: 50%; */
    padding: 4px;
    /* top: 4px; */
}


    .block-content h4 {
        color: black;
        font-weight:bold;
    }
    .block-content p {
        color:#000000 !important;
        font-size:14px;
        margin-bottom:5px !important;
    }
    .block-content .progress {
        height: 6px;
        margin-bottom: 10px !important;
    }

.pad-top {padding-top: 10px;}
.filter-section {
}
    .filter-section a {
        margin: 0px 5px;
        font-size:14px;
        color:gray;
        display:inline-block;
    }
        .filter-section a .fa {
            vertical-align: middle;
        }
    .filter-section .form-control {
        margin: 0px;
    }

/*===================== Player Section Style ====================*/
.profile-image-holder {
  position: relative;
  margin-bottom: 15px;
}

.playersection {
  position: relative;
  height:86vh;
  background: #fff;
  padding-bottom: 50px;
}

.playersection .html-container1 {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  background:#fff;
}

.playersection .player-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: black;
}

.playersection .player-panel .play-control {
  width: 100%;
  padding: 10px;
  background: #232222;
  color: white;
}

.playersection .player-panel .play-control a {
  color: #fff;
  margin-right: 15px;
  display: inline-block;
}

.playersection .player-panel .play-control a .fa {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  margin-top: 4px;
}

.playersection .player-panel .play-control span {
  margin: 0px 7px;
  display: inline-block;
}

.module-section ul {
  overflow-x: hidden;
  overflow-y: scroll;
  height:71vh;
}

.module-section h3 {
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 20px;
  border-bottom: solid #d6d6d6 1px;
  padding-bottom: 10px;
      white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
md-radio-button {
    margin-bottom: 8px;
}
.cvv-note {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center !important;
    border-radius: 50px;
    padding: 0px;
    line-height: 25px;
}
    .cvv-note > .fa {
        color: white;
    }
.module-section ul {
  margin: 0;
  padding: 0;
}

.module-section ul li {
  display: block;
     border-bottom: solid 1px #e6e6e6;
}

.module-section ul li a {
  display: block;
  padding:10px 0px 10px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: gray !important;
  font-size:16px;
   
}

.module-section ul li a .fa {
  margin-right: 10px;
  color: gray !important;
  
}
    .module-section ul li a .count-page {
        display:inline-block;
        width:25px;
        margin-right:5px;
        text-align:right;
       
    }
.module-section ul li a span .fa-play, .module-section ul li a span .fa-rotate-right, .module-section ul li a span .fa-pause {
  font-size: 15px;
  color: gray !important;
}

.module-section ul li.active a {
  color: #000 !important;
  background: rgba(165, 170, 184, 0.28);
  font-weight: bold;
}

.module-section ul li.active a .fa {
  color: #000 !important;
}

.course-button {
    display: none;
}

md-input-container.md-default1-theme:not(.md-input-invalid).md-input-has-value label, md-input-container.md-default1-theme label, md-input-container.md-default1-theme .md-placeholder {
    color: black;
    font-size:14px;
}

@media (max-width:600px) {
    .module-section ul li.active a {
  color: #fff !important;
}

     .module-section ul li {
  display: block;
     border-bottom:solid 1px rgba(255, 255, 255, 0.1);
}

.module-section ul li.active a .fa {
  color: #fff !important;
}

 .overlay {
		position:fixed; 
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.42);
		z-index: 3;
         left: 0px;
         top: 60px;
		
	} 

    .course-button {
    display: block;
    position:absolute;
    top:9px;
    right:15px;
    z-index:2;
        width: 27px;
    height: 27px;
    
}
    .mobile-view {
        position: fixed;
        left: 0;
        top: 60px;
        width: 240px;
        background: #011138;
        height: 100% !important;
        z-index: 10;
        -webkit-transform:translate(-240px); 
	    -webkit-transition:all ease .3s;
	    -moz-transition:all ease .3s;
	    -ms-transition:all ease .3s;
    }
    .nav-show {
        -webkit-transform: translate(0px);
        -webkit-transition: all ease .3s;
        -moz-transition: all ease .3s;
        -ms-transition: all ease .3s;
         height: 100% !important;
         overflow-y:scroll;
         overflow-x:hidden;
    }
    .playersection {
        margin: 0px ;
        height:90vh;
    }
}

@media (max-width:575px) {
    .chapter {
    }
        .chapter .card-block {
            padding: 10px 10px 5px;
        }
        .chapter .btn {
            margin:0px;
        }
}


@media (max-width:767px){
.container {
    width: 100%;
    max-width: 100%;
}
}


.thumb-view {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: center;
}

.thumb-view li {
  height: auto;
}

.list-view {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

.list-view li {
  padding: 15px;
  height: 75px;
  background: #fff;
  border: solid 1px #f1f1f1;
  margin-bottom: 15px;
}

.list-view li .appliaction-form {
  margin: 0px;
  box-shadow: none;
  border: none;
}

.list-view li .thumb-img, .list-view li h5 {
  display: inline-block;
  vertical-align: middle;
}

.list-view li h5 {
  border: none !important;
  padding: 0px;
}

.list-view li .thumb-img {
  margin: 0px 10px 0px 0px;
  background: white;
}

.list-view li .thumb-img img {
  width: 35px;
  padding: 0px;
}

.list-view li .btn {
  float: right;
  margin-top: 0px;
}

 

md-dialog-container {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
}



#login-dialog {
  max-width: 90%;
  width: 500px;
}


@-webkit-keyframes three-quarters {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-moz-keyframes three-quarters {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-o-keyframes three-quarters {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes three-quarters {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

/* Styles for old versions of IE */
.btn-spinner {
  font-family: sans-serif;
  font-weight: 100; }

/* :not(:required) hides this rule from IE9 and below */
.btn-spinner:not(:required) {
  -webkit-animation: three-quarters 1250ms infinite linear;
  -moz-animation: three-quarters 1250ms infinite linear;
  -ms-animation: three-quarters 1250ms infinite linear;
  -o-animation: three-quarters 1250ms infinite linear;
  animation: three-quarters 1250ms infinite linear;
  border: 3px solid #8c8c8c;
  border-right-color: transparent;
  border-radius: 100%;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: hidden;
  text-indent: -9999px;
  width: 18px;
  height: 18px; }

.btn-spinner:not(:required) {
  margin-left: -22px;
  opacity: 0;
  transition: 0.4s margin ease-out, 0.2s opacity ease-out; }

.is-loading .btn-spinner {
  transition: 0.2s margin ease-in, 0.4s opacity ease-in;
  margin-left: 5px;
  opacity: 1;
  }

.btn {
  text-align: left; }


.section-heading {
    text-align: center;
    font-size: 28px;
}



/* CSS for Credit Card Payment form */
.credit-card-box .panel-title {
    display: inline;
    font-weight: bold;
}
.credit-card-box .form-control.error {
    border-color: red;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6);
}
.credit-card-box label.error {
  font-weight: bold;
  color: red;
  padding: 2px 8px;
  margin-top: 2px;
}
.credit-card-box .payment-errors {
  font-weight: bold;
  color: red;
  padding: 2px 8px;
  margin-top: 2px;
}
.credit-card-box label {
    display: block;
}
/* The old "center div vertically" hack */
.credit-card-box .display-table {
    display: table;
}
.credit-card-box .display-tr {
    display: table-row;
}
.credit-card-box .display-td {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}
/* Just looks nicer */
.credit-card-box .panel-heading img {
    min-width: 180px;
}


@media (max-width: 959px)
{
    md-dialog.md-dialog-fullscreen
    {
       margin-top:145px;
    }
}



.hint {
  
    left: 2px;
    right: auto;
    bottom: 7px;
    font-size: 12px;
    line-height: 14px;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    color: grey;
}


.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}