* {
    margin: 0px;
    padding: 0px;
   /* -webkit-user-select: none;  Safari */
   /* -ms-user-select: none;  IE 10 and IE 11 */
   /* user-select: none;  Standard syntax */
}



    *:focus {
        outline: none;
    }

:root {
    /*Body*/
    --msys-color0: white; /*Pink*/
    --msys-color1: #E6007E; /*Pink*/
    --msys-color2: #00203E; /*DarkBlue*/
    --msys-color3: #3C3C3B; /*Gray*/
    --msys-color4: #12A314; /*Green*/
    --msys-color5: #0065cb; /*Blue*/
    --msys-color6: #ebeef1;

    --msys-container-width: 76%;
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration:none;
}

strong {
    font-family: MontserratBold;
}

b {
    font-family: MontserratRegular;  
}


@font-face {
    font-family: Montserrat;
    src: url(resources/font/Montserrat-Light.otf);
}

@font-face {
    font-family: MontserratBold;
    src: url(resources/font/Montserrat-Bold.otf);
}

@font-face {
    font-family: MontserratRegular;
    src: url(resources/font/Montserrat-Regular.otf);
}

@font-face {
    font-family: MontserratMedium;
    src: url(resources/font/Montserrat-Medium.otf);
}

@font-face {
    font-family: MontserratLight;
    src: url(resources/font/Montserrat-ExtraLight.otf);
}

@font-face {
    font-family: MontserratThin;
    src: url(resources/font/Montserrat-Thin.otf);
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(resources/font/fa-regular-400.eot);
    src: url(resources/font/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(resources/font/fa-regular-400.woff2) format("woff2"),url(resources/font/fa-regular-400.woff) format("woff"),url(resources/font/fa-regular-400.ttf) format("truetype"),url(resources/font/fa-regular-400.svg#fontawesome) format("svg");
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(resources/font/fa-brands-400.eot);
    src: url(resources/font/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(resources/font/fa-brands-400.woff2) format("woff2"),url(resources/font/fa-brands-400.woff) format("woff"),url(resources/font/fa-brands-400.ttf) format("truetype"),url(resources/font/fabrands-400.svg#fontawesome) format("svg");
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(resources/font/fa-solid-900.eot);
    src: url(resources/font/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(resources/font/fa-solid-900.woff2) format("woff2"),url(resources/font/fa-solid-900.woff) format("woff"),url(resources/font/fa-solid-900.ttf) format("truetype"),url(resources/font/fa-solid-900.svg#fontawesome) format("svg")
}



body {
    font-family: Montserrat;
    background-color: white;
    width: 100%;
    font-weight: 100;
    font-display: swap;
}

#layout {
    min-width:1100px; 
}


#header {
    display:flex;
    justify-content: space-between;  
    gap:20px;
    padding: 20px 50px 20px 50px;
}

    #header .logo {
        
    }

    #header .logo img {
        height: 50px;
    }

    #header .menu {
        font-style: italic;
        letter-spacing: 1px;
    }

        #header .menu ul {
            display: flex;
            gap: 10px;
            align-content: center;
            font-size: 17px;
            font-weight: bold;
        }

        #header .menu ul li {
            padding: 14px 20px 12px 20px;
            list-style-type: none;
            color: var(--msys-color2);
            border-bottom-style: solid;
            border-bottom-width: 4px;
            border-color: var(--msys-color0);
        }

            #header .menu ul li a {
                color: var(--msys-color2);
            }


        #header .menu .sel, #header .menu ul li:hover {
            color: var(--msys-color1);
            border-color: var(--msys-color1);
        }


    #header .schedule .button {
        color: var(--msys-color0);
        background-color: var(--msys-color1);
        padding: 12px 20px 12px 20px;
        font-size: 16px;
        font-weight:bolder; 
    }

    #header .schedule .button i {
        font-size:18px; 
        margin-right:10px; 
    }




        .separator {
            height: 3px;
            border-style: none;
            background-color: var(--msys-color1);
            width: 20%;
            margin-top: 20px;
        }




#content {
    
}

    #content .container {
        width: var(--msys-container-width);
        margin:auto;
        min-width:600px; 
        max-width:1400px; 
    }

    #content .title0, #content .title1, #content .title2 {
        margin-top: 40px;
        margin-bottom: 40px;
        font-style: italic;
        letter-spacing: 1px;
        font-size: 26px;
    }

    #content .title0 {
        color: var(--msys-color0);
    }

    #content .title1 {
        color: var(--msys-color1);
    }

    #content .title2 {
        color: var(--msys-color2);
    }




    #content .separator {
        
    }

    #content .cols {
        display:flex;
        gap:20px;
        margin-bottom:40px; 
    }

        #content .cols .col1, #content .cols .col2 {
            width: 50%;
        }

    #content p {
        font-size: 18px;
        line-height: 1.5em;
        color: var(--msys-color3);
        margin-bottom: 40px;
    }

    #content ul {
        font-size: 18px;
        color: var(--msys-color3);
    }

    #content ul li {
        margin-bottom:4px; 
    }

    #content .boxs {
        display:flex;
        align-items:stretch;  
        gap:20px;
        margin-bottom:80px; 
    }

        #content .boxs .box {
            border-radius: 10px;
            border-style: none;
            border-radius: 20px;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        }

            #content .boxs .midnight {
                background-color: var(--msys-color2);
            }

            #content .boxs .green {
                background-color: var(--msys-color4);
            }

            #content .boxs .blue {
                background-color: var(--msys-color5);
            }

            #content .boxs .box .image {
                background-size: 140%;
                background-position: 50%;
                min-height: 250px;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                opacity:0.8;
            }

            #content .boxs .box:hover .image {
                animation: backsizeup;
                animation-duration: 2s; 
            }

            #content .boxs .box:not(:hover) .image {
                animation: backsizedown;
                animation-duration: 2s; 
            }


            #content .boxs .box .icon i {
                font-size:30px; 
            }

                #content .boxs .box .text {
                    font-family: MontserratLight;
                    padding: 40px;
                    text-align: center;
                    border-bottom-left-radius: 20px;
                    border-bottom-right-radius: 20px;
                    color: white;
                }


            #content .boxs .box .title {
                font-size: 24pX;
                margin-top: 10px;
                margin-bottom: 20px;
                font-style: italic;
            }

    #content .people {
        border-radius: 20px;
        border-top-left-radius: 0px;
        width: 100%; 
    }

    #prefooter {
        background-color: var(--msys-color6);
    }

        #prefooter .cols {
            width: var(--msys-container-width);
            margin:auto;
            display: flex;
            gap: 20px;
            color: var(--msys-color3);
        }

        #prefooter .cols .col1, #prefooter .cols .col2 {
           width: 50%;
        }

        #prefooter .subtitle {
            font-size:18px;
            margin-bottom:6px; 
        }

        #prefooter .shape {
            overflow: hidden;
            /*position: absolute;*/
            left: 0;
            width: 100%;
            line-height: 0;
            direction: ltr;
            transform: rotate(180deg);
            background-color: var(--msys-color6);
            height:48px; 
        }

            #prefooter .shape svg {
                display: block;
                width: calc(100% + 1.3px);
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                height: 50px; 
            }

        #prefooter .shape:not([data-negative=true]) svg {
            z-index: -1;
        }

        #prefooter .shapefill {
            fill: var(--msys-color2);
        }


        #prefooter .contact
        {
            background-color: var(--msys-color2);
            color:white;
            margin-top: -10px;
            width: 100%; 
            z-index: 10;
        }

            #prefooter .contact .phrase {
                color:white;
                margin-bottom: 20px; 
            }

            #prefooter .contact div {
                color: white;
            }

            #prefooter .contact ul {
                display:flex;
                flex-wrap: wrap;
                gap:20px;
                color:white;
                width:100%; 
            }

            #prefooter .contact ul li {
                list-style-type: none;
                display:flex;
                gap: 10px; 
            }


            #prefooter .contact a {
                color: white;
            }

                #prefooter .contact ul li i {
                    color: var(--msys-color1);
                    font-size: 18px;
                }

            #prefooter .contact iframe {
                height: 200px; 
                width:90%;
                margin: 20px 0px 20px 0px;
                border-radius:10px; 
            }

            #prefooter .contact .form {
                padding-right: 10%; 
                margin-bottom: 40px; 
            }

            #prefooter .contact .field {
               
            }

                #prefooter .contact .field .input {
                    font-family: Montserrat;
                    background-color: transparent;
                    border-radius: 20px;
                    border-style: solid;
                    border-width: 2px;
                    border-color: var(--msys-color6);
                    padding: 10px;
                    color: white;
                    width: 100%;
                }

                #prefooter .contact .field .validation
                {
                    font-size:12px;
                    text-align:center;  
                    padding: 4px 10px 10px 4px;
                    color:red;
                    display:block;
                }

                #prefooter .contact .field ::placeholder {
                    color: gray;
                    font-family: Montserrat;
                }

            #prefooter .contact .buttons {
                padding:10px 0px 10px 0px;
                text-align: right;  
            }

            #prefooter .contact .send {
                background-color: var(--msys-color1);
                color: var(--msys-color0);
                border-radius: 20px;
                padding: 10px 20px 10px 20px;
                font-size: 16px; 
                font-style: italic;  
            }



    #footer {
      background-color: var(--msys-color1);
      color:white;
    }

        #footer .content {
            padding:40px;
            display:flex; 
            gap: 40px;
            align-items: center;
            justify-content: center;
            background: rgb(230,0,126);
            background: linear-gradient(90deg, rgba(230,0,126,1) 0%, rgba(0,32,62,1) 100%);
        }

            #footer .content svg {
                height:50px; 
            }

            #footer .content .brand {
                font-size: 20px;
                font-style: italic;  
            }

        #footer .credits {
            padding: 20px 0px 10px 0px;
            display: flex;
            justify-content: space-around;
            background-color: black;
            font-size: 10px;
            background: rgb(0,32,62);
            background: linear-gradient(180deg, rgba(0,32,62,1) 0%, rgba(35,35,35,1) 50%);
        }


#somos, #contacto {
    scroll-margin-block-start: 100px;
    /*Adds margin to the top of the viewport*/

    scroll-margin-block-end: 100px;
    /*Adds margin to the bottom of the viewport*/
}


.dropborder {
    border-radius: 10px;
    border-top-left-radius: 0px;
}



.gray {
    color:gray;
}

.lightgray {
    color:lightgray;
}

.center {
    text-align:center;  
}

.right {
    text-align:right;  
}

.bold {
    font-weight:bold;  
}

.pad10 {
    padding:10px;
}

.wdp10 {
    width:10%;
}

.wdp20 {
    width: 20%
}

.wdp30 {
    width:30%; 
}

.wdp40 {
    width:40%;
}

.color1 {
   color: #fa4c11;
}

.color2 {
    color: #007ac3;
}

.color3 {
    color: #3c8a43;
}


#subfooter {
    background-color: black;
    display:none;
}

.far {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-style: normal; 
}

.fa, .fas {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal; 
}

.fab {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    font-style: normal;
}

@keyframes backsizeup {
    from {
        opacity: .8;
        background-size: 140%;
    }

    to {
        opacity: 1;
        background-size: 160%;
    }
}

@keyframes backsizedown {
    from {
        opacity: 1;
        background-size: 160%;
    }

    to {
        opacity: .8;
        background-size: 140%;
    }
}