@font-face {
    font-family: 'Griffos';
    src: url('../font/GriffosFont-webfont.eot');
    src: url('../font/GriffosFont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/GriffosFont-webfont.woff') format('woff'),
         url('../font/GriffosFont-webfont.ttf') format('truetype'),
         url('../font/GriffosFont-webfont.svg#griffosfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    font-size: 1em;
	font-family: 'Source Sans Pro', sans-serif;
}

h1 {
    font-size: 54px;
	line-height: 72px;
	font-family: 'Griffos', 'Georgia', serif;
}

h2 {
    font-weight: bold;
}

p {
    font-size: 1.2em;
    line-height: 1.5em;
}
    
#wrapper-header {
	height: 600px;
	background-repeat: repeat-x;
	background-image: url('../img/background-header.png');
    margin-bottom: 48px;
}

.teaser-image img {
	width: 380px;
	position: relative;
	left: 60px;
	top: 40px;
	overflow: visible;
}

.teaser-text {
    margin-top: 4em;
    color: whitesmoke;
	font-size: 1.5em;
	overflow: visible;
}

.call-to-action {
    margin-top: 140px;
}

.btn-call-to-action {
	font-size: 2em;
	font-family: 'Griffos', 'Georgia', serif;
}

.btn-call-to-action:hover {
    text-decoration: none;
}

.service-icon {
	margin-top: 24px;
	margin-bottom: 24px;
}

@media (max-width: 768px) {
    
    .text-center-sm {
     text-align: center;
    }
    
    #wrapper-header {
        height: 540px;
        background-size: 100% 100%;
        margin-bottom: 24px;
    }
    
    .teaser-image {
        height: 450px;
        text-align: center;
    }
    
    .teaser-image img {
        height: 400px;
        max-width: 276px;
        left: 0;
    }
    
    .teaser-text {
        display: none;
    }

    .call-to-action {
        margin-top: 24px;
        text-align: center;
    }
    
    .btn-call-to-action {
        font-size: 1.5em;
        font-family: 'Griffos', 'Georgia', serif;
    }

}

@media (min-width: 768px) and (max-width: 992px) {
    
    .text-center-sm {
        text-align: center;
    }
    
    h1 {
        font-size: 44px;
        line-height: 52px;
    }
    
    #wrapper-header {
        height: 540px;
        background-size: 100% 100%;
        margin-bottom: 24px;
    }
    
    .teaser-image {
        position: absolute;
        height: 450px;
    }
    
    .teaser-image img {
        height: 400px;
        max-width: 276px;
        left: 0;
    }
    
    .teaser-text {
        margin-left: 324px;
    	font-size: 1.5em;
    }
    
    .call-to-action {
        margin-left: 324px;
        margin-top: 72px;
    }
    
    .btn-call-to-action {
        font-size: 1.5em;
        font-family: 'Griffos', 'Georgia', serif;
    }

}

@media (min-width: 992px) and (max-width: 1200px) {
    
    .text-center-sm {
        text-align: center;
    }
    
    #wrapper-header {
        height: 540px;
        background-size: 100% 100%;
        margin-bottom: 24px;
    }
    
    .teaser-image {
        position: absolute;
        height: 480px;
    }
    
    .teaser-image img {
        height: 480px;
        width: auto;
        left: 0;
    }
    
    .teaser-text {
        margin-left: 400px;
    	font-size: 1.5em;
    }
    
    .call-to-action {
        margin-left: 400px;
        margin-top: 86px;
    }
    
    .btn-call-to-action {
        font-size: 2em;
        font-family: 'Griffos', 'Georgia', serif;
    }

}