/*Global styles*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    
    font-family: Mulish;
    line-height: 1.5;

    background-color: var(--complimentary-color);

    color: var(--text-color);
}

a {
    text-decoration: none;
    background-color: transparent;
}
/*
img {
	text-decoration:none;
	border:#CCCCCC thin solid;
	padding: 4px;
} 
*/

.wrapper {
    min-height: 100%;
    margin-bottom: calc(var(--footer-height) * -1);
}


/*Universal Classes Start*/
.section-header {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    padding: var(--std-margin);
    color: var(--accent-color);
}

.content-border {
    border-bottom: 5px solid var(--accent-color);
}
/*Universal Classes End*/

/*Header Block Start*/
.header {
    background-color: var(--accent-color);
    color: var(--primary-color);

    position: fixed;
    top: 0;
    height: 140px;
    width: 100%;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, .3);*/
    
    z-index: 2;
    display: flex;
    justify-content: space-between;
}

.site-logo {
    margin-left: 15%;
    width: 25%;
    min-width: 500px;
    height: inherit;
}

.site-logo h1 {
    margin: 0;
    padding: 20px;
    font-size: 2vw;
    text-align: center;
}

.site-logo h4 {
    margin: 0;
    padding: 10px;
    margin-top: -27px;
    text-align: center;
    font-size: 1vw;
}

.navbar {
    width: 25%;
    min-width: 500px;
    margin-right: 15%;

    display: flex;
    flex-direction: row;
    justify-items: flex-start;
    justify-content: space-around;
}

.navbar a {
    display: block;
    padding: 10px 10px 10px 10px;
    font-size: 1.5vw;
    font-weight: 500;

    margin-top: 4vh;

    color: var(--primary-color);
}

.navbar a:hover {
    opacity: 0.7;
}


/*Header Block End*/

/*Content Block Start*/
.content-view {
    background-color: var(--complimentary-color);
    width: 100%;
}

.content-page {
    background-color: var(--primary-color);
    width: var(--content-width);
    margin: auto;
    color: var(--complimentary-color);
}

/*Separator between Content blocks*/
.content-separator {
    margin: 20px;
}

/*Introduction Block Start*/
.introduction-backgroud {
    background-color: var(--accent-color);
    background: linear-gradient(rgba(255, 123, 0, .75), rgba(255, 123, 0, .75)), url(../images/organ-pipes-med.jpg);
        /*Photo by Josh Applegate https://unsplash.com/photos/vvehwJBaYFU */
    background-position: bottom;
    background-size: cover;

    color: var(--primary-color);

    height: 650px;
    min-height: 500px;
    margin: 0;
    margin-top: 140px;
    padding: 0;
}

.introduction-flexbox {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: var(--content-width);
    margin: 0 auto;
    padding: 0;

    height: 100%;
}

.introduction-text {
    order: 1;
    align-self: flex-end;
    flex: 3;
    
    padding-bottom: 50px;
    margin: 0;

    text-align: right;

    font-size: 1.5rem;
}

.introduction-text h1 {
    font-size: 4rem;
    padding-bottom: 4rem;
    margin-top: -1rem;
}

.introduction-text h2 {
    font-size: 3rem;
}

.introduction-image {
    order: 2;
    flex: 2;
    margin: 0;
    padding: 0;
}

img.introduction-image {
    max-height: 100%;
    padding-bottom: 1px;
}
/*Introduction Block End*/

/*Information Block Start*/
.info-block {
    width: 60%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--std-margin);
}

.text-right {
    order: 2;
    flex: 1;
    min-width: 350px;
    margin: auto var(--std-margin);
    padding: 0;
    text-align: left;
    font-size: 1.5em;
}

.text-left {
    order: 0;
    flex: 1;
    min-width: 350px;
    margin: auto var(--std-margin);
    padding: 0;
    text-align: right;
    font-size: 1.5em;
}

/*Image fades and shows button on hover Start*/
.info-image {
    flex: 1;
    margin: var(--std-margin);
    padding: 0;
    position: relative;
}

.info-image:hover img.in-content {
    opacity: 0.4;
}

img.in-content {
    border: 5px solid var(--accent-color);

    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.info-image-button {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.info-image-text {
    background-color: var(--accent-color);
    color: var(--primary-color);
    font-size: 1rem;
    padding: 16px 32px;
    text-align: center;
}

.info-image:hover .info-image-button {
    opacity: 1;
}
/*Image fades and shows button on hover End*/
/*Information Block End*/


/*Contacts Block Start*/
.contacts {
    padding-bottom: 30px;
}

.social-icons {
    text-align: center;
}

.social-icons li {
    display: inline-block;
    margin: 10px;
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    text-align: center;
    line-height: var(--social-icon-size);
    color: #fff;
    font-size: 4rem;
    transition: all 0.5s;
}

.fa {
    display: inline-block;
    color: var(--accent-color);
}

.fa:hover {
    opacity: 0.7;
    transform: scale(1.3);
}
/*Contacts Block End*/
/*Content Block End*/

/*To stick footer to the bottom of the page*/
.footer,
.push {
  height: var(--footer-height);
}

.footer {
    background-color: var(--primary-color);
    text-align: center;

    width: var(--content-width);
    margin: auto;
}

.footer-text {
    line-height: var(--footer-height);
    color: var(--complimentary-color);
    font-size: 1rem;
}


/*Fonts*/
@font-face {
	font-family: 'Fira Sans';
	src: url('FiraSans-Regular.woff2') format('woff2'), 
       url('FiraSans-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Mulish;
	src: url('Mulish-VariableFont.woff2') format('woff2'), 
       url('Mulish-VariableFont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*Colors and Sizes Variables*/
:root {
    /*Almond Pallet
    light: #e4dcc4
    darker: #dbd4bc
    #c9b98a */
    /*Green-Almond Pallet
    #FEF9C7
    #e49c40
    #007561
    */
    --primary-color: #fff5e9;
    --complimentary-color: #402e32;
    --accent-color: #ff7b00;

    --text-color: #1b233b;

    --std-margin: 20px;
    --footer-height: 40px;
    --content-width: 70%;
    --social-icon-size: 80px;
}