/* --------------------------------------------

	

	main.css : this is the main style file of the theme.
	

	---

	

	CONTEXT:

	

	1. BASE (@base)

	2. TYPOGRAPHY (@typo)

	3. HELPERS (@helpers)

	4. LAYOUT (@layout)

	5. ELEMENTS (@elements)

	5. MEDIA QUERIES (@media)

	

 -------------------------------------------- */



/*  --------------------------------------------



	1. BASE (@base) - base html elements

	

    -------------------------------------------- */
	
		@font-face {
    font-family: 'RiseofBeauty-Script';
    src: url('../fonts/RiseofBeauty-Script.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html,

body {
    

    width:      100%;

    height:     100%;

    padding:    0;

    margin:     0;

    box-sizing: border-box;

}

html {
    font-size: 18px;
}



* {

    box-sizing: border-box;

}



body {
    
    color: #2b3561;

    background-color: #fff;

    font-size: 1rem;

    line-height:      1.8;

	font-family: 'Bitter', serif;

    font-weight: 400;

    font-style:  normal;

}



img {

    max-width: 100%;

    height:    auto;

}



/* Loader */

html {

    overflow: hidden;

}



html.loaded {

    overflow: auto;

}



html.loaded:after {

    display: none;

}



body {

    transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);

    opacity:    0;

}



html.loaded body {

    opacity: 1;

}



/*  --------------------------------------------



	2. TYPOGRAPHY (@typo) - typographic styles



    -------------------------------------------- */

h1,

h2,

h3,

h4,

h5,

h6 {


	font-style: normal;

	font-weight: 400;

    margin: 1em 0 .66em 0;

}

h1,

h2 {

	font-family: 'RiseofBeauty-Script', cursive;
	color: #f5a302;

}



h1:first-child,

h2:first-child,

h3:first-child,

h4:first-child,

h5:first-child,

h6:first-child {

    margin-top: 0;

}



h1 {

    margin:50px 0 0;

    font-size: 2.6rem;
    line-height: 2.7;

    /*display:        flex;

    flex-direction: column;*/

    align-items:    center;

}



h2 {

    font-size:   1.8rem;

    margin: 60px 0 20px 0;

}




p:last-child {
    margin-bottom: 0;
}



/* LIGHT TEXT */

.is-text-light {
    color: #fff;
}



.is-text-light a {
   color: #fff;
}

.share a,
.breadcrumb a,
.footer a {
    text-decoration: none;
    transition: 0.5s ease;
}

.breadcrumb a {
    color: #949bba;
}

.footer a {
    color:white;
    font-weight: bold;
}

.share a {
    color: #f5a302;
    font-weight: bold;
}

.project a .project-title {
    font-size: 0.8em;
}

.share a:hover,
.disclaimer a:hover,
.footer a:hover,
.breadcrumb a:hover  {
    text-decoration:underline;
}

/*  --------------------------------------------



	2. LAYOUT (@layout) - layout styles



    -------------------------------------------- */



/* CONTENT */

.content-wrap {

    width:      100%;

    padding-bottom: 25px;

    position:   relative;

    z-index:    20;
}

.header {
    padding-bottom: 20px;
    margin: 0;
}

.breadcrumb {
	padding-top: 20px;
	font-size:0.8em;
	text-align: center;
	color: #949bba;
}

.content {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
}

.poem img {
    max-width: 100%;
    width: auto;

}

.share {
    padding: 25px 0 0;
    font-size: 1rem;
}

.projects {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 20px;
    padding:40px 0;
}

.project {
    width: 23%;

}

.project a img {
    width:75%;
    border-radius: 100%;
    transition: top 1s, box-shadow 1s;
    top:0;
    position: relative;
    -webkit-box-shadow: 0 30px 30px -25px rgba(20, 27, 57, 0.5);
    box-shadow: 0 30px 30px -25px rgba(20, 27, 57, 0.5);
}

.project a {
    min-height:100%;
    display:block;
}

.project .project-title {
    padding-top: 5px;
}

.footer {
    display:         flex;
    justify-content: space-between;
    padding: 20px 0;
	background-color: #2b3561;
    color: white;
}

.newsletter {
    font-size: 0.6rem;
    display:         flex;
    justify-content: space-around;
    flex-direction: column;
}

.newsletter div {
    margin:0 auto;
}

.newsletter .mastfoot.no-bg {
    margin-top: 0 !important;
}

.newsletter .emailoctopus-form .form-control {
    color: #2b3561 !important;
    --text-colour: #2b3561 !important;
    --label-colour: #2b3561 !important;
    --button-colour: #2b3561 !important;
}

.newsletter .emailoctopus-form .form-control::placeholder {
    color:#2b3561;
}


.newsletter .mastfoot.no-bg p,
.newsletter .mastfoot.no-bg a {
    color: #f5a302 !important;
}

.newsletter .mastfoot a:before{
    filter: invert(63%) sepia(71%) saturate(593%) hue-rotate(356deg) brightness(95%) contrast(103%);
}

.newsletter .mastfoot.no-bg a:hover{
    color: white !important;
}

.newsletter .emailoctopus-form input[type=submit] {
    background-color: #f5a302 !important;
    transition: 0.5s ease;

}

.newsletter .emailoctopus-form input[type=submit] {
	border: none !important;
}

.newsletter .emailoctopus-form input:not([type=submit]) {
	border: none !important;
}


.newsletter .emailoctopus-form input[type=submit]:hover {
    background-color: #2b3561 !important;
}

.copyright {
    font-size: 0.8rem;
}

/*  --------------------------------------------



	6. MEDIA QUERIES (@media) - base html elements

	

    -------------------------------------------- */






/* TABLETS */





/* DESKTOPS */


@media screen and (max-width: 1100px) {

    
}

/* DESKTOPS HIGH RES */


@media screen and (min-width: 1280px) {
    
    .project a:hover img{
        top: -40px;
        -webkit-box-shadow: 0 30px 100px -25px rgba(20, 27, 57, 0.5);
        box-shadow: 0 30px 100px -25px rgba(20, 27, 57, 0.5);
        
    }
    
}

@media screen and (max-width: 768px) {
    
    html {
        font-size: 20px;
    }
    .project {
        width: 48%;
    }
    .footer,
    .project a .project-title,
    .breadcrumb
    {
        font-size: 1rem;
    }
    .newsletter div {
        margin:0;
    }
}


@media screen and (max-width: 500px) {
    
    html {
        font-size: 16px;
    }
	
	.poem img {
		max-width: 90%
	}
	
	.content {
		margin: 0 auto;
	}

}