/***************
    This is a style of the index page that show the design themes
***************/
@import url('https://fonts.googleapis.com/css?family=Poppins');
body {line-height:1.7; font-family: 'Poppins', sans-serif;}

/*header*/
header {background-color:#121212; padding:70px 0}
header h1 {color:#fff; margin:0 0 8px; font-size:40px}
header p {font-size:20px; color:#999; margin:0}

/*section presentation*/
.pres {background-color:#fff; padding:100px 0}
.pres h2 {font-size:35px; margin:0 0 100px}
.pres h3 {font-size:30px; line-height:1; margin:20px 0}
.pres div.demo-box {box-shadow:0 0 5px #ddd; overflow: hidden}
.pres a.view {display:inline-block; width:150px; height:45px; line-height:45px; text-decoration:none; color:#fff; background-color:#e10a6f; border-radius:20px; font-size:14px; font-weight:bold; margin:30px 0 0; transition: all 0.3s ease-in-out}
@media (max-width:767px) {
    .pres a.view {margin-bottom:50px}
}
.pres a.view:hover {background-color:#333;}

/*footer*/
footer {padding:70px 20px; background-color:#333}
footer .social-media a {display:inline-block; margin:0 10px 10px; color:#fff}
footer p {margin:0; color:#fff}

/*div loading*/
.loading {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1034;
    background-color:#fff
}
.loading .load-content {
    position:absolute;
    width:200px;
    height:80px;
    top:calc(50% - 40px);
    left:calc(50% - 100px)
}
.loading .center-element {
    position:absolute;
    top:calc(50% - 50px);
    left:calc(50% - 50px);
    width:100px;
    height:100px;
    animation:rotate 2s linear 0.1s infinite;
}
.loading .center-element .ball {
    width:20px; 
    height:20px;
    border-radius:50%;
    position:absolute;
    top:calc(50% - 10px);
    left:calc(50% - 10px)
}
.loading .center-element .circle {
    width:50px; 
    height:50px; 
    border-radius:50%;
    position:absolute;
    top:calc(50% - 25px);
    left:calc(50% - 25px);
    border:2px solid #000
}
.loading .center-element .circle span {
    display:block;
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    left:calc(50% - 3.5px);
    background-color:#000
}
.loading .center-element .circle span.top {top:-4.5px}
.loading .center-element .circle span.bottom {bottom:-4.5px}
.loading .center-element .circle span.right {right:-4.5px; top:calc(50% - 3.5px); left:auto}
.loading .center-element .circle span.left {left:-4.5px; top:calc(50% - 3.5px)}
@-webkit-keyframes rotate {
    from {
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    to {
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@-moz-keyframes rotate {
    from {
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    to {
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@keyframes rotate {
    from {
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    to {
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
.loading p {text-transform:uppercase; letter-spacing:9px; color:#999; margin-top:80px; margin-left:12px}