@charset "utf-8";
/* CSS Document */

body {
	margin: 0em auto;
	overflow-x:hidden;
    background-color:#fff;
	width:auto;
    padding: 0;
    margin: 0;
}


@font-face {
    font-family: "boston";
    src: url(../fonts/boston.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto-Light";
    src: url(../fonts/Roboto-Light.ttf) format("truetype")
}


@font-face {
    font-family: "rabeloRegular";
    src: url(../fonts/rabeloRegular.ttf) format("truetype")
}

@font-face {
    font-family: "Roboto-Bold";
    src: url(../fonts/Roboto-Bold.ttf) format("truetype")
}

@font-face {
    font-family: "basictitlefont";
    src: url(../fonts/basictitlefont.ttf) format("truetype")
}

@font-face {
    font-family: "kid";
    src: url(../fonts/kid.ttf) format("truetype")
}

@font-face {
    font-family: "cool";
    src: url(../fonts/cool.ttf) format("truetype")
}


@font-face {
    font-family: "fan";
    src: url(../fonts/fan.otf) format("opentype")
}


h1 {
    font-family: "Roboto-Bold";
}

h2 {
    font-family: "Roboto-Light";
}

h3 {
    font-family: "boston";
}

p {
    font-family: "Roboto-Light"
}

a {
    text-decoration: none;
    color: #000;
    font-family: "Roboto-Light";
	cursor:pointer
}


.loader{animation-name: example;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;

}
@keyframes example {
    from {   transform: scale(0.5); opacity: 0;}
    to { transform: scale(1.0); opacity: 1;}
  }




#capa1{
    position: relative;
    width: 100%;
    height: auto;
    background-color: #2ab2be;
    background-image: url(../imagenes/patCole2.png);
}

    .fila1Capa1{position: relative; width: 80%; height: 200px; display: block; margin-left: auto; margin-right: auto; }
    .col1Capa1{float: left; width: 15%; height: 100%; }
    .logo{position: relative; display: block; margin-left: auto; margin-right: auto; width: 200px; height: auto;}

    .col2Capa1{float: left; width: 50%; height: 100%; }
    .txt1Capa1{position: relative; display: inline; top: 40px; text-align: left; color: #fff;  font-size: 3.5em; }

    .col3Capa1{float: left; width: 35%; height: 100%; }
    .txt2Capa1{position: relative; display: inline; top: 40px; text-align: right; color: #fff;  font-size: 2em; }
    .iconCapa1{position: relative; display: block; margin-left: auto; margin-right: 10px; width: 400px; height: auto; z-index: 20000000;}

   

#capa2{
    position: relative;
    width: 100%;
    height: auto;
    background-color: #fee502;

} 

.txt1Capa2{position: relative; display: inline-block; width: 100%; margin-left: auto; margin-right: auto; text-align: center; color: #3a383a; font-size: 1em;}



#capa3{
    position: relative;
    width: 100%;
    height: 800px;
    background-color: #5a5959;
    background-image: url(../imagenes/img1Index.png);
    background-size: cover;
    background-repeat: no-repeat;
}

    .fila1Capa3{
        position: relative;
        width: 60%;
        height: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .txt1Capa3{
        position: relative;
        font-size: 6em;
        padding-top: 110px;       
        color: #fff;
        display: inline-block;
    }


    .txt2Capa3{
        position: relative;
        font-size: 6em;        
        color: #fff;
        top: -100px;
        display: inline;
    }

    .btn1Capa3{position: relative; width: 400px; height: 70px; outline: none; background-color: #ff0305; border:none; border-radius: 10px; font-size: 2em; color: #fff;top: -90px;}




#capa4{
        position: relative;
         width: 100%;
        height: auto;
        display: inline-block;
}


    .colCapa4{
        float: left;
        width: 25%;
        height: 300px;
        background-color: #2ab2be;
    }

    .iconCapa4{
        padding-top: 40px;
        position: relative;
        width: 80px; height: auto;
        display: block;
    }

    .txtCapa4{
        text-align: left;
        color: #fff;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        font-size: 1em;
    }

    .txt2Capa4{
        text-align: left;
        color: #fff;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        font-size: 1em;
    }

#capa5{
        position: relative;
        width: 100%;
        height: auto;
        background-image: url(../imagenes/patCole.png);
        background-size: cover;
}

    .fila0Capa5{
        position: relative;
        width: 100%;
        height: 50px;
        display: inline-table;
    }

        .filaCapa5{
            position: relative;
            width: 80%;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

            .colCapa5{
                float: left;
                width: 50%;
                height:500px;
            }

            .imgCapa5{
                position: relative;
                display: block;
                margin-left: auto;
                margin-right: auto;
                padding-top: 50px;
            }

            .txt1Capa5{
                position: relative;
                padding-top: 50px;
                width: 90%;
                font-size: 3em;
                display: inline-block;
                text-align: left;
                margin-left: auto;
                margin-right: auto;
            }


            .txt2Capa5{
                position: relative;
                width: 80%;
                display: inline-block;
                text-align: justify;
                margin-left: auto;
                margin-right: auto;
            }

            .btnCapa5{
                position: relative;
                width: 200px;
                height: 50px;
                background-color: #ed7927;
                border: none;
                outline: none;
                font-size: 1em;
                color: #fff;
                top: 50px;
                display: block;
                margin-left: 1%;
                margin-right: auto;
                border-radius: 10px;
            }



#capa6{
position: relative;
width: 100%;
height: auto;
background-color: #000;
background-image: url(../imagenes/img2Index.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}


    .fila0Capa6{
        position: relative;
        width: 100%;
        height: 50px;
    }

    .fila1Capa6{
        position: relative;
        width: 60%;
        height: auto;
        display: inline-block;
        margin-left: 20%;
        margin-right: 20%;
        
    }

    .fila2Capa6{
        position: relative;
        width: 100%;
        height: auto;
        display: inline-table;
    }

        .txt1Capa6{
            position: relative;
            text-align: left;
            display: inline;
            font-size: 5em;
            color: #fff;
        }
    
        .col1Capa6{
            float: left;
            width: 15%;
            height: auto;
            display: inline-table;
        }

        .iconCapa6{
            position: relative;
            width: 100%;
            height: auto;

        }
    
        .col2Capa6{
            float: left;
            width: 35%;
            height: auto;
            display: inline-table;
        }
        .txt2Capa6{
            position: relative;
            text-align: left;
            display: inline;
            font-size: 1.4em;
            color: #fff;
        }

        .txt3Capa6{
            position: relative;
            width: 100%;
            text-align: left;
            display: inline;
            font-size: 1em;
            color: #fff;
        }
    

 #capa7{
       position: relative;
        width: 100%;
        height: auto;
       }

       .fila0Capa7{
           position: relative;
           width: 100%;
           height: 50px;
          
       }
        
       
       .fila1Capa7{
        position: relative;
        width: 80%;
        height: auto;
        display: inline-block;
        margin-left: 15%;
        margin-right: 15%;
        }

        .colCapa7{
            float: left;
            display: inline-table;
            width: 30%;
            height: 300px;
        }

        .iconCapa7{
            position: relative;
            width: 80px;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
            padding-top: 50px;
        }
        .txt1Capa7{
            text-align: center;
            font-size: 1.4em;
    }

    #capa8{
        position: relative;
         width: 100%;
         height: 400px;  background-color: #2ab2be;

    }
    #map_canvas{
        position:relative
        top:0px; 
        left:0px; 
        width:100%; 
        height:100%;
        }	
    

#capa9{
      position: relative;
      width: 100%;
      height: auto;background-color: #2ab2be;
      background-image: url(../imagenes/patCole2.png);
}
        .fila0Capa9{
            position: relative;
            width: 100%;
            height: 20px;
        }
    
        .logoFooter{
            position: relative;
            width: 150px;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .iconFooter{
            position: relative;
            width: 60px;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .txt1Capa9{
            position: relative;
            text-align: center;
            width: 100%;
            display: inline-block; color: #fff;
            margin-left: auto;
            margin-right: auto;

        }

@media screen and (min-width: 1px) and (max-width: 360px) {


        .fila1Capa1{ width: 100%; height: 600px; }
        .col1Capa1{position: relative; width: 100%; height: auto;}
        .col2Capa1{position: relative; width: 100%; height: auto;}
            .txt1Capa1{top: 0px; text-align: center; font-size: 2.5em;display: block; margin-left: auto; margin-right: auto; }
        .col3Capa1{position: relative; width: 100%; height: auto;}
            .txt2Capa1{position: relative; display: inline; top: 40px; text-align: right; color: #fff;  font-size: 2em; }
            .iconCapa1{margin-right: auto; width: 300px; }


                
        #capa3{height: auto;}
            .fila1Capa3{width:100%;height: 400px;}
            .txt1Capa3{ font-size: 3em; padding-top: 20px;  }
            .txt2Capa3{font-size: 4em;   top: -100px; display: block; }
            .btn1Capa3{width: 90%;top: -120px;}


    
        .colCapa4{position: relative; width: 100%; height: 220px;}
        .txt1Capa4{ font-size: 0.9em;}
        .txt2Capa4{font-size: 0.8em;}
        .iconCapa4{padding-top: 10px; width: 50px;}



    .filaCapa5{position: relative;width: 90%;}
        .colCapa5{position: relative;width: 100%; height:auto;}
        .imgCapa5{width: 100%;height: auto;padding-top: 10px;}
        .txt1Capa5{position: relative; padding-top: 0px; width: 90%;font-size: 2em; text-align: center; }
        .txt2Capa5{position: relative; width: 100%; }
        .btnCapa5{ width: 100%; top: 10px;}


         
        .fila1Capa6{ width: 90%; margin-left: 5%;   margin-right: 5%;  }
        .fila2Capa6{ width: 100%;}
            .txt1Capa6{text-align: center;  font-size: 3em;}
            .col1Capa6{position: relative; width: 100%; height: auto;}
            .col2Capa6{position: relative; width: 100%; height: auto;}
            .iconCapa6{position: relative;width: 40%;height: auto; display: block; margin-left: auto; margin-right: auto;}
            .txt2Capa6{position: relative;text-align: center;  display: inline;font-size: 1.4em; color: #fff;}
            .txt3Capa6{text-align: center;display: inline; }



   
            .fila0Capa7{height: 10px;}
            .fila1Capa7{position: relative; width: 100%;height: auto; display:inline-block;  margin-left: auto; margin-right: auto;}
            .colCapa7{position: relative; width: 100%;height: auto; }
            .iconCapa7{width: 40px;padding-top: 10px; }
            .txt1Capa7{ text-align: center;  font-size: 1.2em;}

        

}

@media screen and (min-width: 361px) and (max-width: 640px) {
            .fila1Capa1{ width: 100%; height: 600px; }
            .col1Capa1{position: relative; width: 100%; height: auto;}
            .col2Capa1{position: relative; width: 100%; height: auto;}
                .txt1Capa1{top: 0px; text-align: center; font-size: 2.5em;display: block; margin-left: auto; margin-right: auto; }
            .col3Capa1{position: relative; width: 100%; height: auto;}
                .txt2Capa1{position: relative; display: inline; top: 40px; text-align: right; color: #fff;  font-size: 2em; }
                .iconCapa1{margin-right: auto; width: 300px; }



                #capa3{height: auto;}
                .fila1Capa3{width:100%;height: 400px;}
                .txt1Capa3{ font-size: 3em; padding-top: 20px;  }
                .txt2Capa3{font-size: 4em;   top: -100px; display: block; }
                .btn1Capa3{width: 90%;top: -120px;}



                
        .colCapa4{position: relative; width: 100%; height: 220px;}
        .txt1Capa4{ font-size: 0.9em;}
        .txt2Capa4{font-size: 0.8em;}
        .iconCapa4{padding-top: 10px; width: 50px;}



        .filaCapa5{position: relative;width: 90%;}
        .colCapa5{position: relative;width: 100%; height:auto;}
        .imgCapa5{width: 100%;height: auto;padding-top: 10px;}
        .txt1Capa5{position: relative; padding-top: 0px; width: 90%;font-size: 2em; text-align: center; }
        .txt2Capa5{position: relative; width: 100%; }
        .btnCapa5{ width: 100%; top: 10px;}



          
        .fila1Capa6{ width: 90%; margin-left: 5%;   margin-right: 5%;  }
        .fila2Capa6{ width: 100%;}
            .txt1Capa6{text-align: center;  font-size: 3em;}
            .col1Capa6{position: relative; width: 100%; height: auto;}
            .col2Capa6{position: relative; width: 100%; height: auto;}
            .iconCapa6{position: relative;width: 20%;height: auto; display: block; margin-left: auto; margin-right: auto;}
            .txt2Capa6{position: relative;text-align: center;  display: inline;font-size: 1.3em; color: #fff;}
            .txt3Capa6{text-align: center;display: inline; }
        

            
            .fila0Capa7{height: 10px;}
            .fila1Capa7{position: relative; width: 100%;height: auto; display:inline-block;  margin-left: auto; margin-right: auto;}
            .colCapa7{position: relative; width: 100%;height: auto; }
            .iconCapa7{width: 40px;padding-top: 10px; }
            .txt1Capa7{ text-align: center;  font-size: 1.2em;}

}

@media screen and (min-width: 641px) and (max-width: 960px) {
            .fila1Capa1{ width: 100%; height: 600px; }
            .col1Capa1{position: relative; width: 100%; height: auto;}
            .col2Capa1{position: relative; width: 100%; height: auto;}
                .txt1Capa1{top: 0px; text-align: center; font-size: 2.5em;display: block; margin-left: auto; margin-right: auto; }
            .col3Capa1{position: relative; width: 100%; height: auto;}
                .txt2Capa1{position: relative; display: inline; top: 40px; text-align: right; color: #fff;  font-size: 2em; }
                .iconCapa1{margin-right: auto; width: 300px; }


                #capa3{height: auto;}
                .fila1Capa3{width:100%;height: 400px;}
                .txt1Capa3{ font-size: 3em; padding-top: 20px;  }
                .txt2Capa3{font-size: 4em;   top: -100px; display: block; }
                .btn1Capa3{width: 90%;top: -120px;}


                .colCapa4{height: 500px;}


                .filaCapa5{position: relative;width: 90%;}
                .colCapa5{position: relative;width: 100%; height:auto;}
                .imgCapa5{width: 100%;height: auto;padding-top: 10px;}
                .txt1Capa5{position: relative; padding-top: 0px; width: 90%;font-size: 2em; text-align: center; }
                .txt2Capa5{position: relative; width: 100%; }
                .btnCapa5{ width: 100%; top: 10px;}


                
            .fila0Capa7{height: 10px;}
            .fila1Capa7{position: relative; width: 100%;height: auto; display:inline-block;  margin-left: auto; margin-right: auto;}
            .colCapa7{position: relative; width: 100%;height: auto; }
            .iconCapa7{width: 40px;padding-top: 10px; }
            .txt1Capa7{ text-align: center;  font-size: 1.2em;}


}



@media screen and (min-width: 961px) and (max-width: 1380px) {
    .col1Capa1{width: 25%; }
    .col2Capa1{ width: 45%; }
    .col3Capa1{width: 15%;}
    .txt1Capa1{ font-size: 2.5em;}
    .iconCapa1{margin-right: auto; width: 350px; }




    .iconCapa4{padding-top: 10px; width: 50px;}
    .txt1Capa4{ font-size: 0.9em;}
    .txt2Capa4{font-size: 0.9em;}

    .filaCapa5{position: relative;width: 90%;}
    .colCapa5{position: relative;width: 100%; height:auto;}
    .imgCapa5{width: 100%;height: auto;padding-top: 10px;}
    .txt1Capa5{position: relative; padding-top: 0px; width: 90%;font-size: 2em; text-align: center; }
    .txt2Capa5{position: relative; width: 100%; }
    .btnCapa5{ width: 100%; top: 10px;}

    
    .fila0Capa7{height: 10px;}
    .fila1Capa7{position: relative; width: 100%;height: auto; display:inline-block;  margin-left: auto; margin-right: auto;}
    .colCapa7{position: relative; width: 100%;height: auto; }
    .iconCapa7{width: 40px;padding-top: 10px; }
    .txt1Capa7{ text-align: center;  font-size: 1.2em;}


}