/*!

=========================================================
* Argon Design System - v1.0.1
=========================================================

* Product Page: https://www.creative-tim.com/product/argon-design-system
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/argon-design-system/blob/master/LICENSE.md)

* Coded by www.creative-tim.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/


.section-shaped {
    position: relative
}

.section-shaped .stars-and-coded {
    margin-top: 8rem
}

.section-shaped .shape {
    position: absolute;
    z-index: -1;
    top: 0;
    width: 100%;
    height: 100%
}

.section-shaped .shape span {
    position: absolute
}

.section-shaped .shape + .container {
    position: relative;
    min-height: 100%
}

.section-shaped .shape.shape-skew + .container {
    padding-top: 0
}

.section-shaped .shape.shape-skew + .container .col {
    margin-top: -100px
}

.section-shaped .shape.shape-skew + .shape-container {
    padding-top: 18rem;
    padding-bottom: 19rem
}

.section-shaped .shape-skew {
    transform: skewY(-4deg);
    transform-origin: 0
}

.section-shaped .shape-skew span {
    transform: skew(4deg)
}

.section-shaped .shape-default {
    background: linear-gradient(150deg, #293069 15%, #3a417a 70%, #4b528b 94%);
}

.section-shaped .shape-default :nth-child(1) {
    background: #7795f8
}

.section-shaped .shape-default :nth-child(2) {
    background: #7b9aff
}

.section-shaped .shape-default :nth-child(3) {
    background: #6f8ff8
}

.section-shaped .shape-default :nth-child(4) {
    background: #76eea7
}

.section-shaped .shape-default :nth-child(5) {
    background: #6adaff
}


.section-shaped .shape-style-1 span {
    width: 120px;
    height: 120px;
    border-radius: 50%
}

.section-shaped .shape-style-1 .span-200 {
    width: 200px;
    height: 200px
}

.section-shaped .shape-style-1 .span-150 {
    width: 150px;
    height: 150px
}

.section-shaped .shape-style-1 .span-100 {
    width: 100px;
    height: 100px
}

.section-shaped .shape-style-1 .span-75 {
    width: 75px;
    height: 75px
}

.section-shaped .shape-style-1 .span-50 {
    width: 50px;
    height: 50px
}

.section-shaped .shape-style-1 :nth-child(1) {
    bottom: auto;
    left: -4%;
    background: rgba(255, 255, 255, .1)
}

.section-shaped .shape-style-1 :nth-child(2) {
    top: 10%;
    right: 4%;
    background: rgba(255, 255, 255, .1)
}

.section-shaped .shape-style-1 :nth-child(3) {
    top: 280px;
    right: 5.66666%;
    background: rgba(255, 255, 255, .3)
}

.section-shaped .shape-style-1 :nth-child(4) {
    top: 320px;
    right: 7%;
    background: rgba(255, 255, 255, .15)
}

.section-shaped .shape-style-1 :nth-child(5) {
    top: 38%;
    right: auto;
    left: 1%;
    background: rgba(255, 255, 255, .05)
}

.section-shaped .shape-style-1 :nth-child(6) {
    top: 44%;
    right: auto;
    left: 10%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, .15)
}

.section-shaped .shape-style-1 :nth-child(7) {
    right: 36%;
    bottom: 50%;
    background: rgba(255, 255, 255, .04)
}

.section-shaped .shape-style-1 :nth-child(8) {
    right: 2%;
    bottom: 70px;
    background: rgba(255, 255, 255, .2)
}

.section-shaped .shape-style-1 :nth-child(9) {
    right: 2%;
    bottom: 1%;
    background: rgba(255, 255, 255, .1)
}

.section-shaped .shape-style-1 :nth-child(10) {
    right: auto;
    bottom: 1%;
    left: 1%;
    background: rgba(255, 255, 255, .05)
}

@media (max-width: 991.98px) {
    .section-shaped .shape-style-1 span {
        height: 120px
    }
}

@media (max-width: 767.98px) {
    .section-shaped .shape-style-1 span {
        height: 90px
    }
}


.section-shaped .shape-style-2 span {
    height: 190px
}

.section-shaped .shape-style-2 .span-sm {
    height: 100px
}

.section-shaped .shape-style-2 :nth-child(1) {
    top: 0;
    left: -16.66666%;
    width: 33.33333%
}

.section-shaped .shape-style-2 :nth-child(2) {
    top: 0;
    right: auto;
    left: 16.66666%;
    width: 33.33333%
}

.section-shaped .shape-style-2 :nth-child(3) {
    bottom: auto;
    left: 49.99999%;
    width: 33.33333%
}

.section-shaped .shape-style-2 :nth-child(4) {
    top: 55%;
    right: -16.66666%;
    width: 33.33333%
}

.section-shaped .shape-style-2 :nth-child(5) {
    bottom: 0;
    width: 33.33333%
}

@media (max-width: 991.98px) {
    .section-shaped .shape-style-2 span {
        height: 120px
    }
}

@media (max-width: 767.98px) {
    .section-shaped .shape-style-2 span {
        height: 90px
    }
}

.section-shaped .shape-style-3 span {
    height: 140px
}

.section-shaped .shape-style-3 .span-sm {
    height: 100px
}

.section-shaped .shape-style-3 :nth-child(1) {
    bottom: auto;
    left: -16.66666%;
    width: 66%
}

.section-shaped .shape-style-3 :nth-child(2) {
    top: 54%;
    right: -16.66666%;
    width: 40%
}

.section-shaped .shape-style-3 :nth-child(3) {
    top: 34%;
    right: auto;
    left: -16.66666%;
    width: 33.33333%
}

.section-shaped .shape-style-3 :nth-child(4) {
    right: -16.66666%;
    bottom: 0;
    width: 60%;
    opacity: .6
}

.section-shaped .shape-style-3 :nth-child(5) {
    bottom: 0;
    width: 33.33333%
}

@media (max-width: 991.98px) {
    .section-shaped .shape-style-3 span {
        height: 120px
    }
}

@media (max-width: 767.98px) {
    .section-shaped .shape-style-3 span {
        height: 90px
    }
}