html, body {
    height: 100%;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.top-margin {
    padding-top: 75px;
}

.section {
    min-height: 100%;
    text-align: center;
}

.my-divider {
    width: 35%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-top: 2px #646464 solid;

}

.section .col-sm-6 img{
    max-width: 100%;
}

#about, #melos{
    background: -webkit-linear-gradient(#ffe8e0, #dbccc6); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ffe8e0, #dbccc6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ffe8e0, #dbccc6); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ffe8e0, #dbccc6); /* Standard syntax */
}

#logos, #contacto, #intro {
    background: -webkit-linear-gradient(#dbccc6, #ffe8e0); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#dbccc6, #ffe8e0); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#dbccc6, #ffe8e0); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#dbccc6, #ffe8e0); /* Standard syntax */
    /*background-size: cover;*/
}

.navbar button {
    opacity: 1;
}

#intro img, #intro h1, #intro h3, #intro p, #intro button {
    opacity: 1;
}

img, h1, h3, p, button {
    opacity: 0;
}

h1 {
    margin-bottom: 35px;
}


.introAnimationPic {
    opacity: 1;
    
    -webkit-transition: all 2s ease; /* Safari */
    transition: all 2s ease;
}

.introAnimationTitle {
    opacity: 1;
    
    -webkit-transition: all 1s ease; /* Safari */
    transition: all 1s ease;
}

.introAnimationSubtitle {
    opacity: 1;
    
    -webkit-transition: all 2s ease; /* Safari */
    transition: all 2s ease;
}

.introAnimationParagraph {
    opacity: 1;
    
    -webkit-transition: all 2.5s ease; /* Safari */
    transition: all 2.5s ease;
}

.introAnimationVerMas {
    opacity: 1;
    
    -webkit-transition: all 2s ease; /* Safari */
    transition: all 2s ease;
}

#contactInfo.introAnimationContactInfo {
    opacity: 1;
    
    -webkit-transition: all 3.5s ease; /* Safari */
    transition: all 3.5s ease;
}

#contactInfo {
    opacity: 0;
}

#smallBoxContainer.introAnimationSmallBox{
    opacity: 1;
    
    -webkit-transition: all 3s ease; /* Safari */
    transition: all 3s ease; 
}

#smallBoxContainer {
    opacity: 0;
}

.smallBox {
    border: 1px #9f4747 solid;
    margin: 20px;
    padding: 13px;
    color: #5c0000;
    cursor:pointer;
    
    -webkit-transition: all 1.5s ease; /* Safari */
    transition: all 0.5s ease;
}

.smallBox p, .smallBox h3 , .smallBox img, .smallBox button{
    opacity: 1;
}

.btnPersonalizado {
    color: white;
    background-color: #9f4747;
    
    -webkit-transition: all 1.5s ease; /* Safari */
    transition: all 0.5s ease;
}

.btnUltimo {
    margin-bottom: 10px;
}

.smallBox:hover .btnPersonalizado {
    color: #af5252;
    background-color: #ffc4c4;
}

.smallBox:hover .btnPersonalizado:hover,  .btnPersonalizado:hover{
    color: #740303;
    background-color: #fff4f4;
}

.circle {
    border-radius: 50%;
    border: 2px solid #9f4747;
    padding: 10px;
    height: 80px;
    line-height: 100px;
    width: 100px;
    margin: auto;
    
    -webkit-transition: all 1.5s ease; /* Safari */
    transition: all 0.5s ease;
}

.circle span {
    font-size: 50px;
    color: #5c0000;
    
    -webkit-transition: all 1.5s ease; /* Safari */
    transition: all 0.5s ease;
}

.smallBox:hover {
    background-color: #ad3a3a;
    border-color: white;
    color: white;
}

.smallBox:hover .circle span{
    color: #f4cbcb;
}

.smallBox:hover .circle {
    border-color: #f4cbcb;
}

.contactItem {
    margin-top: 15px;
    font-size: 18px;
}

#map-canvas {
    width: 100%;
    height: 400px;
    margin: auto;
}

#map-canvas * {
    opacity: 1;
}

.jumbotronDark {
    background-color: black;
    color: #9a9a9a;
    height: 50px;
    font-size: 13px;
    text-align: center;
    padding-top: 15px;
}