
:root {
    --primary-font-color1: #ffffff; 
    --primary-font-color2: #000000;
}

h2{
    font-size:35px;
}
h3{
    font-size: 1.92rem;;
}
/** loader */
.preloader-background {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eee;
	
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;	
}
/** fin loader */

/** menu */
nav, .page-footer{
    background: rgb(107, 0, 0);
}

nav .brand-logo, .page-footer h2{
font-weight: bold;
}

.sidenav {
    width: 250px;
}

/** fin menu */

/** home */
        .background-1{
            width: 100%;
            background: url('../img/sd-1.png');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

        }

        .fondo-1{
            width:100%;
            height:100vh;
            
        }

        .fondo-1 .img-women{
            margin-top:3em;
            max-width: 100%;
        }

        .fondo-1 .title-welcome{
            margin-top: 4em;
            margin-bottom: 0px;
            text-align: center;
            color: var(--primary-font-color1);
            font-size: 2.5em;
        }
        .fondo-1 span{
            font-size: 4em;
            color: white;
            font-weight: bold;
        }

        .fondo-1 .see-more{
            margin-top:3em;
            color: var(--primary-font-color1);
        }

        .fondo-1 .fa-chevron-down{
            font-size: .7em;
            color: var(--primary-font-color1);
        }

/** fin home */

/** what-is */
        .background-2{
            margin-top: 2em;
            margin-bottom: 2em;
        }

        .background-2 .title-what-is{
            color: var(--primary-font-color2);
        }

        .line-shape, .line-shape-2{
            width: 80px;
            height: 2px;
            margin-left: calc(50% - 40px);
            background-color: var(--primary-font-color2);
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .background-2 .text-sideflip{
            text-align: center;
            margin: 0 60px 0 60px;
        }

        .background-2 .see-more{
            background: #8BC34A;
            color: var(--primary-font-color1);
        }

        .background-2 .see-more:hover{
            background: #388E3C;

        }

        .fa-facebook-square{
            color:#3b5998
        }
        
        .fa-youtube-square{
            color: #c4302b
        }

        .fa-twitter-square{
            color: #0084b4
        }

        .fa-facebook-square,.fa-youtube-square,.fa-twitter-square{
            font-size:2em;
            margin: -7px 5px 0 5px;
        }

/** fin what-is */

/** services */
        .background-3{
            width: 100%;
            background-image: url(../img/sd-2.jpg);
            background-attachment: fixed;
            background-size: cover;
            background-position: 50% 0;
            background-repeat: no-repeat;
            position: relative !important;
        }

        .fondo-3{
            width:100%;
            background: rgba(0,0,0,.5);
            opacity:.9;
            padding-top: 3em;
            padding-bottom: 2em;
        }

        .background-3, .line-shape-2 ,.background-4{
            color: var(--primary-font-color1);
        }
/**
        .grid-container {
            display: grid;
            grid-column-gap: 50px;
            grid-row-gap: 50px;
            grid-template-columns: repeat(auto-fill,310px);
            justify-content: center;
        }
*/
        .background-3 .row-services .col {
            border: 1px solid rgba(255, 255, 255, 0.8);
            padding: 20px;
            text-align: center;
            border-radius: 19px;
            color: white;
        }

        .background-3 .row-services .col .fa{
            font-size: 50px;
        }

    /** fin Services */

    /* prices */

        .columns {
            
            width: 48%;
            padding: 8px;
            color: white;
        }

        .price {
            list-style-type: none;
            border: 1px solid #eee;
            margin: 0;
            padding: 0;
            -webkit-transition: 0.3s;
            transition: 0.3s;
        }

        .free{
            background-image: url(../img/sd-3.jpg);
        }

        .premium{
            background-image: url(../img/IMG_1617.JPG);
        }
        .free,.premium{
            width: 100%;
            background-size: cover;
            background-position: 50% 0;
            background-repeat: no-repeat;
            position: relative !important;
        }



        .price:hover {
            box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
        }

        .price .header-columns {
            font-size: 25px;
        }

        
        .button-columns {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 25px;
            text-align: center;
            text-decoration: none;
            font-size: 18px;
        }

        .price-more-div{
            margin-top: 2em;
        }
        .price-more{
            color: #0070c9;
            font-size: 24px;
        }

/* Fin prices */
/** clients */
        .container-grid{
            display:grid;
            grid-template-columns: repeat(auto-fill,250px);
            grid-gap: 5px;
            justify-content:center;
        }

        .item-grid{
            border-radius: 5px;
            padding: 10px;
            background: #f2f2f2;
        }

        .item-grid img{
            max-width: 100%;
        }

        .black{
            background-color: black;
        }
        .black img{
            margin: 11% 0px 0px 0px;
        }

/** fin clients */

/** contact-us */
        .background-4{
            width: 100%;
            background-image: url(../img/sd-5.jpg);
            background-size: cover;
            background-position: 50% 0;
            background-repeat: no-repeat;
            position: relative !important;
        }

        .fondo-4{
            width:100%;
            background: rgba(0,0,0,.5);
            opacity:.9;
            padding-top: 3em;
            padding-bottom: 2em;
        }

        .fondo-4 form input, textarea{
            width: 50%;
            margin-left: 25%;
        }

        .fondo-4 form input{
            height: 7%;
        }

        .fondo-4 form .send-form{
            background: #8BC34A;
        }

        .fondo-4 form .send-form:hover{
            background: #388E3C;
        }

/** fin contact-us */

/** footer */
        .footer {
            width:100%;
            background-color: black;
            color:white;
            padding-top: 3em;
            padding-bottom: 3em;
        }

        .footer .footer-content p{
            text-align: center;
        }

        .footer .footer-content .fa{
            font-size: 3em;
        }
/** Fin footer */

/** Media queries */
@media screen and (max-width: 650px) {
    .column {
        width: 100%;
    }

    .button-columns{
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 10px 25px;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
    }

    .fondo-1 .img-women {
        margin-top: 10em;
        max-width: 100%;
    }
}

.price li:nth-child(1){
    font-weight: bold;
}
.price li {
    border-top: 1px solid rgba(255,255,255,.3);
    padding: 20px;
    text-align: center;
    background: rgba(0,0,0,.6);
}

.price .grey {
    font-size: 20px;
}

.price .line-price{
    width:86px;
    background-color: white;
}

/** MEDIA QUERIES */

@media screen and (max-width: 330px) {
    
    .container-grid{
        display:grid;
        grid-template-columns: repeat(auto-fill,224px);
        grid-gap: 5px;
        justify-content:center;
    }

    .grid-container {
        grid-template-columns: repeat(auto-fill,211px);
        justify-content: center;
    }
    .price .header-columns {
        font-size: 20px;
    }
    .price li {
        font-size: 13px;
        padding: 10px;
        text-align: center;
        background: rgba(0,0,0,.6);
    }



}



@media (max-width: 760px){
    h3{
        font-size: .92rem;
        font-weight: bold;
    }
    .see-more, .fa-chevron-down{
        display:none;
    }
}