@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700');
/*font-family: 'Playfair Display', serif;*/

/*fonts-start-here */

@font-face {
    font-family: robo-light;
    src: url("../fonts/roboto/Roboto-Light.ttf");
    font-display: swap;
}

@font-face {
    font-family: robo-medium;
    src: url("../fonts/roboto/Roboto-Medium.ttf");
    font-display: swap;
}

@font-face {
    font-family: robo-bold;
    src: url("../fonts/roboto/Roboto-Bold.ttf");
    font-display: swap;
}

@font-face {
    font-family: open-light;
    src: url("../fonts/openSans/OpenSans-Light.ttf");
    font-display: swap;
}

@font-face {
    font-family: open-regular;
    src: url("../fonts/openSans/OpenSans-Regular.ttf");
    font-display: swap;
}

@font-face {
    font-family: open-semibold;
    src: url("../fonts/openSans/OpenSans-Semibold.ttf");
    font-display: swap;
}

@font-face {
    font-family: open-bold;
    src: url("../fonts/openSans/OpenSans-Bold.ttf");
    font-display: swap;
}


.RobotoLight {
    font-family: robo-light;
}

.RobotoMedium {
    font-family: robo-medium;
}

.RobotoBold {
    font-family: robo-bold;
}

.RobotoLight {
    font-family: open-light;
}

.OpensansRegular {
    font-family: open-regular;
}

.OpensanssemBold {
    font-family: open-semibold;
}

.OpenBold {
    font-family: open-bold;
}

.panel-title:hover {
    color: #000;
}

body {
    font-family: open-regular;
    line-height: 25px;
    letter-spacing: 0.8px;
}

.font-16 {
    font-size: 16px;
}.font-30 {
    font-size: 30px;
}

select::-ms-expand {
    display: none;
}

.col-md-15,
.col-sm-15 {
    width: 12.5%;
    float: left;
}

.col-md-20,
.col-sm-20 {
    width: 20%;
    float: left;
}

.modal-open {
    overflow: hidden;
}

/*fonts-end-here */

/* header syles start here*/

header {
    background-image: url("../images/bg-01.jpg");
    background-size: cover;
}


/*Navbar styles start here */

.navbar {
    background-color: transparent;
    border: none;
}

.navbar-collapse {
    padding-top: 25px;
}

.navbar-brand {
    color: #fff !important;
    font-size: 30px;
}

#navigation li a {
    color: #fff;
    padding: 2px 0px;
    border-bottom: 1px solid transparent;
    border-bottom-width: 2px;
    transition: all 0.3s ease 0s;
}

#navigation li {
    color: #fff;
    padding: 10px 20px;
}

.navbar-default .navbar-brand {
    margin-top: 0px !important;
}

.navbar-brand {
    float: left;
    height: 70px;
    padding: 5px 15px;
    font-size: 18px;
    line-height: 20px;
}

#navigation li a:hover {
    color: #fff;
    background-color: transparent;
    outline: none;
    text-decoration: none;
    border-color: #fff;
}

#navigation li.active a {
    color: #fff;
    background-color: transparent;
    outline: none;
    text-decoration: none;
    border-color: #fff;
}

.borderBTn {
    padding: 10px 30px !important;
    color: #37474F !important;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid #fff;
}

.borderBTn:hover {
    background-color: #fff !important;
}

.borderBTn div {
    border-radius: 30px;
    background-color: transparent;
    font-family: open-regular;
    font-size: 15px;
    padding: 6px 30px;
    color: #ffffff;
}

.GradinetNav li a:hover,
.GradinetNav li a:focus {
    outline: none;
    background-color: transparent;
}

.gradientBtn {
    border-radius: 50px;
    padding: 12px 3px !important;
}

.gradientBtn span {
    width: 100%;
    padding: 8px 28px !important;
    background: #fff;
    border: 3px solid transparent;
    border-radius: 50px;
}

.gradientBtn:hover span {
    color: #fff;
    background-color: transparent;
}

.btn:active,
.btn.active {
    outline: none;
    box-shadow: none;
    background-color: transparent;
}

.navbar {
    transition: all 0.3s;
}

.navbar {
    padding: 0 0 15px;
}

.navbar-fixed-top {
    transition: all 0.3s ease 0s;
}

.navbar-fixed-top .navbar-right {
    margin: 0px;
}

.dropdown-menu {
    background-color: rgba(255, 255, 255, 0.90);
}

.dropdown-menu li a {
    border-bottom: none !important;
    font-size: 12px !important;
    color: #333 !important;
}

.dropdown-menu li a {
    border-bottom: none !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
}

.dropdown-menu li {
    padding: 0px !important;
}

.dropdown-menu li:hover {
    background-color: #ddd !important;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background-color: transparent;
}


/* header syles end here*/

/* banner styles start here */

#banner-section {
    padding-top: 130px;
    padding-bottom: 220px;
    position: relative;

}

.BigFont {
    font-family: 'Playfair Display', serif;
    font-size: 53px;
    font-weight: 700;
    line-height: 78px;
    margin-bottom: 24px;
    text-transform: capitalize;
}

.bannerDesc {
    font-size: 18px;
    margin-bottom: 15px;
}

.white {
    color: #fff;
}

.BannerPlayBtn {
    border-radius: 50%;
    padding: 20px 20px 20px 27px;
    text-align: center;
    color: #fff;
    transition: all 0.3s ease 0s;
    border: 1px solid #fff;
}

.leftSpace {
    padding-left: 15px;
}

.spacetop {
    padding: 30px 0px;
}

.down-content {
    position: absolute;
    display: block;
    /* margin: 0 auto; */
    bottom: 120px;
    left: 50%;
    color: #fff;
    font-size: 50px;
    height: 50px;
    width: 50px;
    text-align: center;
    margin-left: -25px;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

@-webkit-keyframes flash {
    0%,
    50%,
    100% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

@keyframes flash {
    0%,
    50%,
    100% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

/* banner styles End here */

/* popular course section styles start here*/

.sectionPadding {
    padding: 80px 15px;
}

.SectionTitle {
    font-size: 30px;
}

.underTitleLine {
    border-radius: 3px;
    height: 4px;
    margin: 20px 0px;
    width: 80px;
}

.text-center .underTitleLine {
    margin-right: auto;
    margin-left: auto;
    display: block;
}

.BlackColor {
    color: #000000;
    font-size: 16px;
}

.LightColor {
    color: #777777;
    font-size: 16px;
}

.sectionHeader {
    padding-bottom: 50px;
}

.popularBox {
    background-color: transparent;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease 0s;
}

.popularBox:hover {
    cursor: pointer;
    margin-top: -10px;
    box-shadow: 0px 0px 20px #ddd;
}

.ImageContainer {
    height: 240px;
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat !important;
}

.popularTitle {
    margin: 0px;
    color: #333;
    font-size: 14px;
}

.popularDesc {
    margin: 0px;
    font-size: 13px;
    color: #888;
}

.popularBtn {
    margin: 0px;
    font-size: 13px;
}

.popularBtn:hover {
    text-decoration: none;
}

.popularPadding {
    padding: 15px;
    line-height: 20px;
}

/* popular course section styles end here*/

/*how it works styles start here*/

.minusMg {
    margin-top: -50px;
}

.noMarg {
    margin: 0px;
}

.search-div {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(66, 215, 209, 0.15);
    padding: 15px;
}

.iconContainer {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    display: block;
    padding: 4px 10px;
}

.BorderedSection {
    background-color: #fbfbfb;
}

.RightIcon {
    padding-right: 40px;
    text-align: right;
}

.RightIcon:after {
    background: transparent;
    border-radius: 50%;
    content: "";
    font-family: fontawesome;
    height: 20px;
    position: absolute;
    right: -10px;
    top: 30px;
    width: 20px;
}

.LeftIcon {
    text-align: left;
    margin-top: 115px;
    margin-left: -1px;
    padding-left: 40px;
}

.LeftIcon:after {
    background: transparent;
    border-radius: 50%;
    content: "";
    font-family: fontawesome;
    height: 20px;
    position: absolute;
    left: -10px;
    top: 30px;
    width: 20px;
}

.upperSpace {
    margin-top: 60px;
}

.ArrowImage {
    margin-left: auto;
    margin-right: auto;
    margin-top: 90px;
    display: block;
}

.BoxLayout {
    padding: 30px;
    overflow: hidden;
    box-shadow: 0px 0px 20px #eee;
    border-radius: 10px;

}

/*how it works styles end here*/

/* counter styles start here*/

#Counter {}

.p0withl-r {
    padding: 0px 15px;
}

.counterTitle {
    font-size: 50px;
}

.counterLine {
    border-radius: 3px;
    height: 4px;
    margin: 5px 0;
    width: 80px;
}

.ParalaxImage {
    background-size: cover !important;
}

/* counter styles end here*/

.counterDesc {
    font-size: 18px;
}

/*services box styles start here*/

.ServiceBox {
    border-radius: 10px;
    padding: 30px;
    transition: all 0.2s ease 0s;
}

.ServiceBox:hover {
    margin-top: -10px;
    box-shadow: 0px 0px 15px rgba(66, 216, 209, 0.20);
}

.serviceImage {
    margin: 15px auto;
    display: block;
    width: 70%;
}

.noPadding {
    padding: 0px;
}

.serviceTitle {
    color: #3a3737;
    font-family: open-semibold;
    font-size: 18px;
}

.serviceDetail {
    color: #999999;
    font-size: 14px;
    font-family: open-regular;
}

/*-------------------------------------------*/

/*----------- NEW SERVICE SECTION -----------*/

/*-------------------------------------------*/

.c_column {
    color: #777;
    margin: 0 0 30px;
    padding: 0 40px 40px;
    background: #fafafa;
    font-size: 14px;
    line-height: 26px;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;

    min-height: 435px;
}

.c_column .img-box {
    width: 60px;
    height: 60px;
    display: block;
    margin: 0 0 20px;
    /* background: #333;*/
    text-align: center;
    white-space: nowrap;
    background: rgb(29, 107, 241);
    /* Old browsers */
    background: -moz-linear-gradient(45deg, rgba(29, 107, 241, 1) 0%, rgba(20, 229, 132, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, rgba(29, 107, 241, 1) 0%, rgba(20, 229, 132, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, rgba(29, 107, 241, 1) 0%, rgba(20, 229, 132, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d6bf1', endColorstr='#14e584', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}



.c_column .img-box:after {
    margin: 0;
    height: 100%;
    width: 0px;
    content: "";
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.c_column .img-box img {
    white-space: normal;
    display: inline-block;
    vertical-align: middle;
}

.c_column .title {
    display: block;
    color: #222;
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 30px;
    font-family: 'Alegreya Sans SC', sans-serif;
}

.c_column .title b {
    font-weight: 700;
    text-transform: uppercase;
}

.c_column p {
    margin: 0 0 10px;
}

.c_column p a {
    color: #777;
    text-decoration: none;
    display: block;
    max-height: 3em;
    line-height: 1.5em;
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer;

}

p.mb2 {
    margin-bottom: 2px;
}



.c_column a.apply {
    display: block;
    text-align: right;
    font-size: 14px;
    color: #333;
    font-weight: 400;
    margin-top: 24px;
    text-decoration: underline;
}

.c_column:hover {
    background: #f6f6f6;
    background-size: 100% 100%;
}

.c_column:hover p {
    color: #565656;
}

.c_column:hover p a {
    color: #565656;
    text-decoration: none;
}

.c_column:hover .title {
    color: #222;
}

.c_column:hover .img-box {
    background: #333;
}

.c_column .title b a
{
    color: inherit !important;
    cursor: default !important;
    text-decoration: none !important;
}

/*-------------------------------------------------------*/

/*services box styles end here*/

/*faq styles start  here*/

.panel-title {
    font-family: open-semibold;
    font-size: 17px;
    color: #000;
    padding: 10px;
}

.panel-body {
    font-family: open-regular;
    font-size: 14px;
    color: #222;
    transition: all 0.2s ease 0s;
}

.panel-body b {
    font-size: 15px;
    font-weight: 700;
    font-family: open-semibold;
}

.panel-group .panel {
    box-shadow: 0px 0px 8px rgba(144, 144, 144, 0.8);
    border: none;
    margin-bottom: 12px;
    transition: all 0.2s ease 0s;
}

.panel-default > .panel-heading {
    background-color: #ffffff;
    padding: 0px;
}

.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
    border: none;
    transition: all 0.2s ease 0s;
}

.panel-title {
    padding: 22px 15px 13px;
    display: inline-table;
    width: 100%;
}

.panel-heading:hover {
    cursor: pointer;
}

.collpapseArrow {
    float: right;
    text-align: right;
}

.panel-group {
    padding: 0px 0px 50px 0px;
}

.faqImage {
    margin: 0 auto;
    display: block;
}

.panel-title p {
    width: 85% !important;
    float: left;
}

.panel-title i {
    width: -1%;
}

.panel-title {
    overflow: hidden;
}

.panel.active .collpapseArrow {
    transform: rotate(180deg);
}

.panel.active .panel-title {
    outline: none;
}

.panel.active {
    transition: all 0.2s ease 0s;
}

/*faq styles end  here*/

/*video tour section styles start here*/

.videoTourPlayBtn {
    background-color: #ffffff !important;
    border-radius: 50%;
    padding: 16px 20px 16px 27px;
    text-align: center;
}

.btnContainer {
    text-align: center;
    margin: 35px 0px;
}

/*video tour section styles end here*/

/*blog section styles start here*/

.BlogImageContainer {
    height: 200px;
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat !important;
}

.blogPostContainer {
    position: relative;
}

.blogPostContainer:hover .blogOverlay {
    height: 100%;
    padding: 188px 50px;
}

.blogPost p {
    margin: 10px 0px;
}

.viewBlog:hover {
    cursor: pointer;
    transform: rotate(75deg);
}

.blogOverlay {
    text-align: center;
    position: absolute;
    transition: all 0.3s ease 0s;
    bottom: 0px;
    border-radius: 10px;
    height: 0%;
    width: 100%;
    overflow: hidden;
}

.postModal {
    width: 70% !important;
}

.blogPostContent {
    padding: 50px;
}

.blogPostContent .dates {
    margin-bottom: 20px;
}

.myCloseBtn {
    color: #fff;
    float: right;
    font-size: 50px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.2;
    position: absolute;
    right: 15px;
    text-align: right;
    text-shadow: 0 1px 0 #fff;
    z-index: 999999999;
}

/*blog section styles end here*/

/* testimonials styles start here */

.clientReview {
    font-size: 16px;
    color: #fff;
    font-family: open-regular;
}

.clientName {
    font-size: 18px;
    text-transform: uppercase;
    font-family: open-semibold;
    margin: 15px 0px;
}

.owl-theme .owl-dots .owl-dot span {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 0;
    display: block;
    height: 5px;
    margin: 5px 7px;
    opacity: 1;
    width: 20px;
}

.owl-prev {
    position: absolute;
    left: -100px;
    top: 30%;
}

.owl-theme .owl-nav [class*='owl-'] {
    font-size: 22px;
    padding: 4px 10px;
    background: #869791;
}

.owl-next {
    position: absolute;
    right: -100px;
    top: 30%;
}

.student-image {
    height: 80px;
    width: 80px;
    position: absolute;
    left: 0;
    top: 0;
}

.student-image img {
    border-radius: 100%;
	display: block;
	width: auto !important;
	height: auto !important;
	max-height: 100%;
	max-width: 100%;
}

li.student-profile {
    font-size: 20px;
    font-weight: 700;
    text-align: left;
    position: relative;
    padding-left: 100px;
    padding-top: 3px;
    margin-top: 30px;
    margin-bottom: 20px;
}

li.student-profile span {
    font-size: 14px;
    font-weight: 400;
}

li.student-profile a {
    color: #fff;
    font-size: 12px;
}

li.student-profile a:hover {
    text-decoration: none;
}

ul.list-inline.org-logo {
    margin-top: 15px;
}

ul.list-inline.org-logo li img {
    height: 70px;
    width: auto;
}

/* testimonials styles end here */

/*subscribe styles start here*/

.subscribeInput {
    padding: 15px;
    width: 100%;
    border-radius: 50px;
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #fff;
    padding-right: 130px;
}

.subscribeInput::-moz-placeholder {
    color: #fff;
    font-size: 16px;
}

.subscribeBtn {
    border: 0 none;
    border-radius: 50px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    float: right;
    padding: 8px 20px;
    position: absolute;
    right: 26px;
    top: 7px;
}

.MarBm {
    margin-bottom: 30px;
}


/*subscribe styles end here*/

/*contact us styles goes here*/

.themeInputs {
    border: none;
    box-shadow: none;
    border-radius: 0px;
    background-color: transparent;
    border-bottom: 1px solid #cacaca;
    height: 60px;
}

.inputContainer {
    margin: 0px;
    overflow: hidden;
}

.form-control:focus {
    box-shadow: none;
}

.inputContainer label {
    color: #777;
}

textarea {
    padding: 20px 12px;
}

.error {
    color: #bbb;
    padding: 0px 10px;
    font-size: 11px;
    margin: 0px;
}

.contact-info ul {
    list-style: none;
}

.contact-info h5 {
    color: #111;
    font-weight: bold;
    margin-bottom: 5px;
    font-family: sans-serif;
}

.contact-info > ul > li > a {
    color: #797979;
    float: left;
    width: 100%;
}

.contact-box .social-networks {
    padding: 0px;
    padding-top: 2px;
}

.social-networks li {
    border: 1px solid transparent;
    border-radius: 50%;
    float: left;
    height: 40px;
    padding: 4px;
    width: 40px;
}

.social-networks li a {
    background: #405e94 none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    display: block;
    font-size: 13px;
    height: 30px;
    line-height: 28px;
    margin-right: 10px;
    text-align: center;
    width: 30px;
}

.social-networks li a :hover {
    text-decoration: none;
}

/*contact us styles end here*/

/* footer styles goes here*/

.footerContainer {
    background-color: #212121;
}

.footerLogo {
    font-size: 30px;
}

.footerLogo img {
    width: 150px;
    padding: 20px 0px;
}

.footerTitle {
    margin: 30px 0px;
}

footer ul {
    list-style: none;
    padding-left: 0px;
}

footer ul li a {
    color: #fff;
    line-height: 30px;
}

.footerMb {
    margin-bottom: 80px;
}

.rightsReserved {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footerPadding {
    padding-top: 80px;
    padding-bottom: 20px;
}

.SocialIcons li a img {
    width: 30px;
}

/* footer styles end here*/

/*go to top button design start here */

#TopBtn {
    position: fixed;
    right: 25px;
    bottom: 25px;
    color: #fff;
    display: none;
}

/*go to top button design end here */

/* modal design styles start here*/

.modal-dialog {
    width: 40%;
}

label {
    display: none;
}

.marg20 {
    margin: 20px 0px;
}

.loginRegisterNote {
    color: #777;
    font-size: 11px;
    font-family: open-light;
}

.modal-dialog {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

#card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
}

#card figure {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}


#card .back {
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
}

#card.flipped {
    -webkit-transform: translateX( -100%) rotateY( -180deg);
    -moz-transform: translateX( -100%) rotateY( -180deg);
    -o-transform: translateX( -100%) rotateY( -180deg);
    transform: translateX( -100%) rotateY( -180deg);
}

.loginRegisterNote a:hover,
.loginRegisterNote a:focus {
    text-decoration: none;
    outline: none;
}

/* modal design styles end here*/

/* video modal styles start here*/

#playVideo .modal-dialog {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

#playVideo .modal-content {
    width: 100%;
    height: 70vh;
    margin-top: 15vh;
}

.iframe {
    height: 100%;
    width: 100%;
}

/* video modal styles start here*/

/* loading styles start here*/

.pageLoader {
    background-color: #ffffff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2000;
}

.loaderArea {
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: 2100;
}

.Myloader1 {
    height: 100%;
    position: relative;
}

.gradient_circle {
    animation: 1s linear 0s normal none infinite running rotateThis;
    border-radius: 100%;
    box-shadow: 0 1px 0 0 rgba(225, 131, 194, 0.25), 0 -1px 0 0 rgba(165, 181, 222, 0.25), 1px 0 0 0 rgba(225, 131, 194, 0.25), -1px 0 0 0 rgba(165, 181, 222, 0.25), 1px -1px 0 0 rgba(195, 156, 208, 0.5), -1px 1px 0 0 rgba(195, 156, 208, 0.5), 1px 1px 0 0 rgba(255, 105, 180, 0.75), -1px -1px 0 0 rgba(135, 206, 235, 0.75);
    height: 90px;
    margin-left: -45px;
    margin-top: -45px;
    width: 90px;
}

.gradient_circle {
    margin-top: -45px;
    margin-left: -45px;
    height: 90px;
    width: 90px;
    border-radius: 100%;
    box-shadow: 0 1px 0 0 rgba(225, 131, 194, .25), 0 -1px 0 0 rgba(165, 181, 222, .25), 1px 0 0 0 rgba(225, 131, 194, .25), -1px 0 0 0 rgba(165, 181, 222, .25), 1px -1px 0 0 rgba(195, 156, 208, .5), -1px 1px 0 0 rgba(195, 156, 208, .5), 1px 1px 0 0 rgba(255, 105, 180, .75), -1px -1px 0 0 rgba(135, 206, 235, .75);
    animation: rotateThis 1s linear infinite
}

@-o-keyframes rotateThis {
    from {
        transform: rotate(0) scale(1)
    }
    to {
        transform: rotate(360deg) scale(1)
    }
}

@-moz-keyframes rotateThis {
    from {
        transform: rotate(0) scale(1)
    }
    to {
        transform: rotate(360deg) scale(1)
    }
}

@-webkit-keyframes rotateThis {
    from {
        transform: rotate(0) scale(1)
    }
    to {
        transform: rotate(360deg) scale(1)
    }
}

@keyframes rotateThis {
    from {
        transform: rotate(0) scale(1)
    }
    to {
        transform: rotate(360deg) scale(1)
    }
}

/* loading styles end here*/