*{
    padding: 0;
    margin: 0;
}
html, body{
    height: 100%;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
}

body{
    display: flex;
    text-align: center;
}

#xileHalf{
    width: 50%;
    height: 100%;
    background-image: url('images/xile-background.jpg');
    background-size: cover;
    color: #FFF;
}

.firstTextRow{
    margin-top: 5em;
    font-size: 1.4em;
}

#secondTextRow{
    margin-top: 2em;
    margin-bottom: 2.1em;
    text-transform: none;
}

#thirdTextRow{
    margin-top: 1.8em;
    text-transform: none;
}

.textRow{
    margin-bottom: 1em;
    text-transform: none;
}

#fourthTextRow{
    font-size: 1.6em;
    margin-bottom: 2em;
}

#xileButton{
    background-color: #96C22F;
    text-decoration: none;
    color: #FFF;
    text-transform: none;
    font-size: 1.2em;
    padding: 0.7em 1.2em;
}

#xileButton:hover{
    background-color: #FFF;
    color: #96C22F;
}

#cygridsHalf{
    width: 50%;
    height: 100%;
    background-image: url('images/cygrids-background.jpg');
    background-size: cover;
    color: #FFF;
}

#cygridTopLinks{
    display: flex;
    justify-content: flex-end;
    margin-top: 0.4em;
}

.cygridLink{
    text-decoration: none;
    text-transform: none;
    color: #FFF;
    background-color: #01B0F1;
    font-size: 0.9em;
    padding: 0.5em 0.8em;
    margin-right: 1em;
}    

.cygridLink:hover{
    color: #01B0F1;
    background-color: #FFF;
}


#cygridsFirstTextRow{
    margin-bottom: 2em;
}

#visitCygridsButton{
    background-color: #01B0F1;
    text-decoration: none;
    color: #FFF;
    text-transform: none;
    font-size: 1.2em;
    padding: 0.7em 1.2em;
}

#visitCygridsButton:hover{
    background-color: #FFF;
    color: #01B0F1;
}

.logo img{
    width: 35em;
}

#cygridsTextRow{
    margin-bottom: 4em;
}

#cygridsAddress{
    text-transform: none;
    font-size: 0.9em;
    margin-top: 4em;
}

#cygridsAddress p{
    margin-bottom: 0.5em;
}

#cygridsAddress a{
    text-decoration: none;
    color: #FFF;
}

#cygridsAddress a:hover{
    color: #01B0F1;
}

@media(max-width:1024px){
    *{
        box-sizing: border-box;
    }
    body{
        font-size: 1.5em;
        flex-wrap: wrap;
    }
     #xileHalf, #cygridsHalf{
        width: 100%;
        height: auto;
        min-height: 100%;
        box-sizing: border-box;
        padding: 2em 0.5em;
    }
    #xileHalf .firstTextRow{
        margin-top: 3em;
    }
    .logo img{
        width: 25em;
    }
}

@media(max-width:600px){
    
    body{
        font-size: 1em;
    }
    #xileHalf p {
        font-size: 0.9em;
    }
    #xileHalf .textRow{
        font-size: 0.75em;
        margin-top: 1em;
    }
    .buttonRow{
        margin-top: 4em;
    }
    .firstTextRow{
        margin-top: 1em;
    }
   
    #cygridsHalf .firstTextRow{
        margin-top: 4em;
    }
    #cygridsHalf p{
        font-size: 0.8em;
    }
    .firstTextRow{
        font-size: 1em;
    }
    .logo img{
        width: 15em;
    }

}