/*
Theme Name: Fynance | Online Finance HTML5 Template
Desciption: Fynance is modern and fresh design template for Online Finance that helps users gather and securely store information online relating to all aspects of their life, and provides loved ones critical information needed. 
This template including about page, service page, and  single blog page. 
It’s completed template and ready for your company/office. 

Theme URI: http://www.codingle.com/murtaxa/themeforest/fynance_demo
Author Name: Murtaxa
Author URI: http://www.codingle.com
Version: 1.0

===================
=== Theme Style ===
===================

1. General Style
2. Navbar
3. Page Hero
4. Clients
5. About
6. Free trial
7. Services
8. Testimonial
9. Pricing
10. free-consultation
11. Team 
12. Blog
13. Newsletter
14. Footer
15. Copyright
16. Contact
17. About us Page
18. Single Blog
19. Responsive

*/

*{
  font-family: 'Montserrat', sans-serif;
}


.top-section{
    margin: 0 auto;
    width: 200px;
}

.email-error{
	color: #b22222;
    font-weight: bold;
    font-size: 1.5em;
    font-size: x-large;
}

.email-success{
	color: #228b22;
    font-weight: bold;
    font-size: 1.5em;
    font-size: x-large;
}

/* 1. General style*/

section{
  padding: 40px 0px;
}
.section-title{
  text-align: center;
  margin: 0 0 60px;
}
.section-title h2{
  font-size: 40px;
  line-height: 40px;
  font-weight: 600;
  margin-bottom: 20px;
}
.section-title p{
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: .8px;
}
input[type="text"]::-webkit-input-placeholder,
input[type="message"]::-webkit-input-placeholder,
textarea[type="message"]::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder{
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .8px;
}
textarea:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
input[type="time"]:focus, 
input[type="week"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="color"]:focus{
  box-shadow: none;
  outline: none;
}

.fa-facebook{
  color: #314A83;
}
.fa-twitter{
  color: #0092CC;
}
.fa-youtube{
  color: #DD4931;
}
.fa-instagram{
  color: #DD4932;
}

button{
  border-radius: 50px !important;
  color: #fff !important;
  background: #fc6868 !important;
  padding: 15px 40px !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  letter-spacing: .8px !important;
  border: 0px;
}

/* 2. Navbar*/

.animated-nav{
  box-shadow: 20px -10px 10px -20px black;
}
.main-header{
  background: #fff;
  color: #141414;
  position: sticky;
  z-index: 99998;
  color: #fff;
  padding: 20px 0;
}
.main-header::before{
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  width: 100%;
  height: 11px;
  overflow: hidden;
  background: linear-gradient( to bottom,rgba(0,0,0,0.05) 0,rgba(0,0,0,0) 100%);
}

.navigation{
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
}
.navigation li{
  display: inline-block;
  vertical-align: top;
}
.navigation li a{
  color: #141414;
  display: inline-block;
  padding: 0 10px;
  line-height: 60px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.navbar-toggle .icon-bar{
  background: #000;
}
.main-menu .navigation > li.dropdown:hover > ul{
  visibility:visible;
  opacity:1;
  top:100%;
  transition:all 500ms ease;  
}
.main-menu .navbar-collapse > ul li.dropdown .dropdown-btn{
  display:none;
}
.responsive-logo{
  float: left;
  padding: 0;
  margin: 0;
}
.search-box {
    position: relative;
}
.search-box input[type="search"]:focus,
.search-box input[type="search"] {
    position: relative;
    display: block;
    font-size: 14px;
    color: #000;
    width: 245px;
    padding: 20px;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    border: 0px solid;
    transition: all 500ms ease 0s;
    outline: none;
}
.search-box button,
.search-box input[type="submit"] {
    position: absolute;
    display: block;
    font-size: 16px;
    right: 0;
    top: 0;
    background: transparent;
    border: 0px solid;
    color: #000;
    padding: 16px 20px;
    transition: all 500ms ease 0s;
}


/* 3. Page Hero*/

.page-hero{
	background-image: url(../img/bg.png);
	padding-bottom: 80px;
  /*-webkit-background-size: cover;
  background-size: cover;*/
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 80% 130px;

  padding-top: 80px;
  margin-bottom: 60px;
}
.page-content{
	margin-top: 80px;
}
.page-content h1{
	font-size: 45px;
  line-height: 54px;
  letter-spacing: .8px;
  color: #1c1c1c;
  font-weight: 600;
  margin: 0 0 30px;
}
.page-content p{
	font-size: 16px;
	line-height: 25px;
	color: #787878;
	margin: 0 0 30px;
}
.page-content span{
	font-size: 26px;
  color: #787878;
  text-transform: capitalize;
  display: inline-block;
}
/*.page-content button{
	font-size: 16px;
    font-weight: 300;
    letter-spacing: .8px;
    display: inline-block;
    background: #3172b9;
    color: #fff !important;
    text-transform: uppercase;
    padding: 18px 40px;
    margin-bottom: 15px;
    border-radius: 50px;
}*/

/* 4. clients*/

#clients{
	padding: 30px 15px;
  /*background: #f9fbfd;*/
}
.clients ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}
.clients ul li{
  display: inline-block;
  padding: 10px 20px;
  width: 155px;
}
.clients ul li img{
  width: 100%;
}

/* 5. about*/

.about .content-box{
  padding: 0px 0px 30px 0px;
}
 .featured-box{
  padding: 10px;
  text-align: center;
}
 .featured-box img{
  /*padding: 10px 0px 20px 0px;*/
  /*width: 80px;*/
  padding: 0 0 0 0;
  box-sizing: border-box;
  height: 100px;
}
 .featured-box h3{
  font-size: 18px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: .8px;
}
.featured-box p{
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: .8px;
}


/* 6. free-trial*/
.free-trial{
  /*background-image: url(../img/trial-bg.jpg);
  background-repeat: repeat-x;
  background-position: center bottom;
  padding: 0px 0px 130px;*/

  background: #f9f0f0;

  padding-top: 80px;
  padding-bottom: 80px;
}
.free-trial .trial-img{
  max-width: 100%;
}
.free-trial h2{
  font-size: 40px;
  line-height: 40px;
  font-weight: 600;
  margin: 0px 0px 30px;
}
.free-trial ul{
  padding-left: 0px;
}
.free-trial ul li{
  list-style: none;
  padding-bottom: 40px;
}
.free-trial ul li .col-md-2,
.free-trial ul li .col-md-10{
  margin: 0px;
  padding: 0px;
}
.free-trial ul li img{
  width: 50px;
  margin-bottom: 10px;
}
.free-trial ul li h3,
.free-trial ul li span{
  margin-top: 0px;
}
.free-trial ul li h3{
  font-size: 22px;
  font-weight: 300;
}

.free-trial h2{
  margin-bottom: 50px;
}
.free-trial .text-row{
  position: relative;
  text-align: left;
}
.free-trial .text-row .number{
  font-weight: 900;
  font-size: 40px;
  line-height: 40px;
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -25px;
  width: 60px;
  text-align: right;
}
.free-trial .text-row h3{
  padding-left: 30px;
  font-size: 18px;
  position: relative;
}


/*. 7. service*/

.services .item{
  padding-left: 90px;
  margin-bottom: 60px;
  position: relative;
}
.services .item .icon-box{
  position: absolute;
  left: 0px;
  width: 70px;
}
.services .item .icon-box img{
  width: 100%;
}
.services .item h3{
  line-height: 28px;
  font-weight: 300;
  letter-spacing: .8px;
}
.services .item p{
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .8px;
  line-height: 20px;
}

/* 8. testimonials*/

/*.testimonials{
  background-image: url(http://via.placeholder.com/350x150);
  background-repeat: no-repeat;
  background-position: right center;
  -webkit-background-size: cover;
  background-size: cover;
  color: #fff;
}
*/
#quote-carousel {
    padding: 0 10px 30px 10px;
}
#quote-carousel .carousel-control {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
}
#quote-carousel .carousel-indicators {
    position: relative;
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-top: 20px;
    margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
    width: 30px;
    height: 30px;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    opacity: 0.4;
    overflow: hidden;
    transition: all .4s ease-in;
    vertical-align: middle;
    border: 0px;
}
#quote-carousel .carousel-indicators .active {
    width: 50px;
    height: 50px;
    opacity: 1;
    transition: all .2s;
}
.item blockquote {
    border-left: none;
    margin: 0;
    font-weight: 300;
    letter-spacing: .8px;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}
.item small{
  color: #fff;
}


/* 9. Pricing*/

.price-list{
  /*border: 1px solid #d2d2d2;*/
  padding: 55px 35px;
  text-align: center;
  width: 100%;
  margin: 0 0 30px;
  border-radius: 5px;
  box-shadow: 0 0 10px 3px rgba(218,218,218,.34);
  transition: all .6s; 

}
.price-list:hover{
  box-shadow: 0 0 20px 10px rgba(218,218,218,.34);
}
.list-price{
  font-size: 24px;
  line-height: 21px;
  font-weight: 600;
  margin: 0 0 15px;
  display: block;
}
.list-type{
  font-size: 16px;
  font-weight: 300;
  line-height: 21px;
  display: block;
  margin: 0 0 15px;
}
.price-list img{
  width: 100px;
}
.price-list h3{
  padding: 35px 0 50px;
  font-size: 64px;
  font-weight: 300;
  color: #3172b9;
}
.pricing .price-list h3 span{
  font-size: 16px;
  display: block;
  font-weight: 300;
  line-height: 21px;
  margin: 30px 0 0;
}
.pricing .price-list ul{
  margin: 0 0 50px;
  list-style: none;
  padding: 0;
}
.pricing .price-list ul li:first-child{
  border-top: 1px solid #dadada;
}
.pricing .price-list ul li{
  font-size: 14px;
  line-height: 21px;
  color: #323031;
  font-weight: 600;
  padding: 30px 0;
  border-bottom: 1px solid #dadada;
  letter-spacing: .8px;
}
.pricing .price-list ul li span{
  font-weight: 300;
}
.pricing .btn{
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .8px;
  padding: 20px 50px;
  text-transform: uppercase;
  border-radius: 50px;
}

.pricing .price-list .list-status {
    font-size: 13px;
    line-height: 21px;
    color: #28b467;
    font-weight: 600;
    display: block;
    padding: 8px;
    border: 1px solid #28b467;
    border-radius: 20px;
    margin: 0 auto 15px;
    width: 50%;
}
/*. 10. free-consultation*/

.free-consultation {
  background-image: url(http://via.placeholder.com/350x150);
  background-repeat: no-repeat;
  background-size: cover;
}
.free-consultation h2{
  font-size: 34px;
  font-weight: 300;
  letter-spacing: .8px;
  color: #fff;
}
.free-consultation p{
  color: #fff;
  font-size: 18px;
  letter-spacing: .8px;
  line-height: 24px;
  font-weight: 300;
}
.free-consultation a{
  font-size: 22px;
  color: #fff;
  background: #28739e;
  padding: 10px 20px;
  border-radius: 5px;
  vertical-align: middle;
  margin-bottom: 50px;
  text-decoration: none;
}

/*. 11. team*/
.team .team-box{
  margin: 0 0 30px;
  transition: all .6s;
}
.team .team-box:hover{
  box-shadow: 0 0 20px 10px rgba(218,218,218,.34);
}
.team .team-box img{
  width: 100%;
  height: auto;
}
.team .team-box h3{
  margin: 0;
  padding: 30px 30px 15px;
  font-size: 24px;
  line-height: 24px;
  text-transform: unset;
  font-weight: 300;
}
.team .team-box h3 span{
  display: block;
  font-size: 16px;
  margin: 15px 0 0;
}
.team .team-box .team-contact-info{
  padding: 15px 30px 30px;
}
.team .team-box .team-contact-info i{
  font-size: 22px;
}

/* 12. Blog*/
.blog .card {
  display: inline-block;
  position: relative;
  width: 100%;
  margin-bottom: 30px;
  border-radius: 2px;
  color: rgba(0, 0, 0, 0.87);
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(218,218,218,.34);
  transition: all .6s;
}
.blog .card:hover{
  box-shadow: 0 0 20px 10px rgba(218,218,218,.34);
}
.blog .card .card-image{
  height: 60%;
  position: relative;
  overflow: hidden;
}
.blog .card-image img{
  height: 60%;
  position: relative;
  overflow: hidden;
}
.blog .card .content {
  padding: 15px 30px;
}
.blog .card .content .category{
  font-size: 16px;
}
.blog .card-title, 
.blog .info-title {
  color: #3C4858;
  text-decoration: none;
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: .8px;
}
.blog .card-title a, 
.blog .info-title a{
  text-decoration: none;
  color: #000;
}
.description, 
.card-description, 
.footer-big p {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .8px;
  line-height: 20px;
}

/* 13. Newsletter*/
.newsletter .section-content{
  align-items: center;
}
.newsletter .section-content form{
  width: 100%;
  text-align: center;
}
.newsletter .section-content input[type="email"]{
  display: inline-block;
  padding: 20px 50px;
  font-size: 16px;
  font-weight: 300;
  border: 1px solid #dadada;
  color: #787878;
  width: 40%;
  margin: 0 20px 0 0;
  border-radius: 50px;
}

.newsletter .section-content button[type="submit"]{
  border-radius: 50px;
  color: #fff;
  background: #347ab7;
  padding: 20px 50px;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .8px;
}
.newsletter .section-content button:hover{
  background: #1a5b94;
}


/* 14. Footer*/
.footer .f-about{
  margin-top: 50px;
}
.footer .footer-box{
  padding: 0px 10px 0px 0px;
}
.footer .footer-box .footer-logo{
  padding: 0px 0px 22px 0px;
}
.footer .footer-box .footer-logo img{
  width: 50%;
}
.footer .footer-box .footer-about p{
  font-size: 14px;
  line-height: 26px;
  letter-spacing: .8px;
  font-weight: 300;
}
.footer .footer-box .footer-social{
  margin: 0;
  padding: 0 0 20px 0;
}
.footer .footer-box .footer-social li{
  display: inline-block;
  margin-right: 5px;
}
.footer .footer-box .footer-social li a{
  font-size: 28px;
  padding-right: 10px;

}

.footer .footer-title{
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 300;
}
.footer .list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer .list li{
  padding: 0px 0px 10px 13px;
}
.footer .list li:before{
  position: absolute;
  content: "\f105";
  font-family: 'FontAwesome';
  font-size: 14px;
  font-weight: 500;
  left: 13px;
}
.footer .list li a{
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .8px;
}


.footer-widget{
  padding-bottom: 25px;
}
.img-icon-left-box .img-icon{
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  left: 0;
  z-index: 1;
}
.img-icon-left-box .img-icon img{
  max-width: 50px;
  min-height: 50px;
}
.img-icon-left-box .icon-content{
  padding-left: 65px;
  font-weight: 300;
}
.img-icon-left-box .icon-content h5,
.img-icon-left-box .icon-content p{
  letter-spacing: .8px;
}

 /* 15. Copyright*/
 .copyright-area{
  padding: 15px;
  background: #2d2d2d;
  color: #a8a8a8;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .8px;
 }
/* 16. Contact*/
.contact{
  box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
  display: flex;
}
.contact .col-md-8,
.contact .col-md-4{
  margin: 0px;
  padding: 0px;
}
.footer .contact-form{
  padding: 45px;
  padding-bottom: 100px;
}
.footer .contact-form form{
  border: none;
}
.contact-form .row{
  margin: 0;
}
.contact-form h3{
  font-weight: 300;
  letter-spacing: .8px;
}
.contact-form form .customised-formgroup{
  position: relative;
  padding: 8px 0;
  margin-bottom: 15px;
}
.contact-form form .customised-formgroup span{
  position: absolute;
  top: 19px;
  left: 0;
  font-size: 18px;
}
.contact-form form .customised-formgroup input, 
.contact-form form .customised-formgroup textarea{
  border: medium none;
  width: 100%;
  overflow: hidden;
  height: 44px;
  padding: 10px 25px;border-bottom: 1px solid #d5d5d5;
  border-radius: 0px;
  box-shadow: none;
}
.contact-form form .customised-formgroup textarea:focus, 
.contact-form form .customised-formgroup input:focus{
  border-color: #2375a0;
}
.contact-form form .customised-formgroup textarea{
  height: 100px;
  resize: none;
}
.contact-form .btn{
  font-size: 14px;
  padding: 0 20px;
  font-weight: 300;
  letter-spacing: .8px;
  margin: 20px 20px;
  line-height: 40px;
  border-radius: 50px;
}

.contact .contact-information{
  background: #fc6868;
  height: 100%;
  padding: 45px 60px;
  font-weight: 300;
  color: #fff; 
}
.contact .contact-information div:not(:last-child){
  margin-bottom:34px;
  letter-spacing: .8px;
}
.contact .contact-information div a {
    display: block;
    font-size: 18px;
    line-height: 30px;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: .8px;
    text-decoration: none;
}


/* 17. About us page*/

.about-page-content{
  text-align: center;
}
.about-page-content h3{
  font-size: 40px;
  font-weight: 300;
  letter-spacing: .8px;
  text-transform: capitalize;
}
.about-page-content p{
  font-size: 16px;
  letter-spacing: .8px;
  font-weight: 300;
  line-height: 28px;
}


/* 18. Single Blog*/
.single-page-header {
  height: 450px;
  background-position: center center;
  background-size: cover;
  margin: 0;
  padding: 60px 0;
  border: 0;
}
.single-page-header .title {
  transition: all 1.3s;
  font-size: 45px;
  font-weight: 300;
  letter-spacing: .8px;
  color: #fff;
}
.post-author img {
    display: inline-block;
    max-width: 80px;
    margin-bottom: 15px;
}
.post-author, 
.post-author a{ 
    color: #fff;
    font-weight: 300;
    letter-spacing: .8px;
}
.blog-detail .section{
  padding: 50px 0;
}
.blog-detail p{
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .8px;
}
.blog-detail img{
  padding: 20px 0;
}

.blog-tags span{
  font-size: 12px;
  font-weight: 300;
  padding: 8px 10px;
  letter-spacing: .8px;
  border-radius: 20px;
}
.blog-detail .btn{
  color: #fff;
  padding: 8px 12px;
  margin-right: 10px;
}
.blog-detail a i{
  color: #fff;
}
.blog-detail .btn-facebook{
  background: #3b5898;
}
.blog-detail .btn-twitter{
  background: #55acef;
}
.blog-detail .btn-google{
  background: #dd4b3a;
}

.blog-detail .avatar {
  width: 80px
}
.blog-detail .avatar img{
  width: 100%;
}
.blog-detail .media{
  margin-top: 40px;
}

.blog-detail .media-heading{
  font-weight: 400;
  letter-spacing: .8px;
}
.blog-detail .media .media-body p{
  font-weight: 300;
  letter-spacing: .8px;
}

.make-it-center{
  text-align: center;
}

.privacy-note{
  margin-bottom: 20px;
}

.page-content .h1-subtitle{
  font-size: 22px;
  color: #1c1c1c;
}

.services{
  background: #f0f0f0;
}

.contact-form button{
  margin-bottom: 60px;
}

.navbar-toggle{
  margin-right: 0;
}
.hide-on-desktop{
  display: none;
}
.hide-on-mobile{
  display: block;
}

.owl-carousel .owl-item{
  text-align: center;
}
.owl-carousel .owl-item img{
  display: inline-block;
}

.email_form .error{
  font-size: 12px;
  color: red;
}

/* 19. Responsive*/
@media only screen and (max-width: 1400px) {
  .page-hero{
    background-position: 85% 130px;
  }
}
@media only screen and (max-width: 1240px) {
  .page-hero{
    background-position: right 130px;
  }
}
@media only screen and (max-width: 991px) {
  .hide-on-desktop{
    display: block;
  }
  .hide-on-mobile{
    display: none;
  }
  .page-hero{
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
  }
  .page-hero .image{
    text-align: center;
    margin-bottom: 40px;
  }
  .page-hero .image img{
    max-width: 90%;
  }  
}
@media only screen and (max-width: 768px) {
    
    .section-title h2{
      font-size: 28px;
    }
    .section-title p{
      font-size: 16px;
    }
    /* For mobile phones: */
    .main-header{
      padding: 0px;
    }
    .page-content h1{
      font-size: 35px;
      line-height: 40px;
    }
    .navbar-collapse.in{
      text-align: center;
    }
    .navigation li{
      display: block;
      text-align: center;
    }
    .page-content{
      text-align: center;
      padding: 10px 10px;
    }
    .clients{
      text-align: center;
    }
    .free-trial .free-content{
      text-align: center;
      padding: 30px;
    }
    .parent-wrapper{
      width: 300px;
    }
    .contact{
      display: inline-block !important;
      width: 100%;
    }
    .footer-widget{
      padding-left: 30px;
    }
    .img-icon-left-box .img-icon{
      padding-left: 30px;
    }


    .post-content{
      padding: 20px 0;
    }
}

@media only screen and (max-width: 500px) {
  .navbar-header .responsive-logo{
    width: 190px;
    margin-top: 10px;
  }
}

/* Spinner */
.show-spinner {
    position: relative;
    color: #fff;
    cursor: not-allowed !important;
}
.show-spinner span { opacity: 0; }
.show-spinner::after {
    top: 50%;
    left: 50%;
    content: '';
    width: 12px;
    height: 12px;
    border-width: 2px;
    border-radius: 50%;
    position: absolute;
    border-style: solid;
    margin: -6px auto auto -6px;
    border-right-color: transparent;

    -webkit-animation: gfortCircleSpinner 800ms infinite linear;
    animation: gfortCircleSpinner 800ms infinite linear;
}
@-webkit-keyframes gfortCircleSpinner {
    0% { -webkit-transform: rotate(0deg) }
    100% { -webkit-transform: rotate(360deg) }
}
@keyframes gfortCircleSpinner {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}