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

	

	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: 'bim-runger';
    src: url('../fonts/bim-runger.woff2') format('woff2'),
                 url('../fonts/bim-runger.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    
}

@font-face {
    font-family: 'Holiday Delight';
    src: url('../fonts/HolidayDelight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    
}

@font-face {
    font-family: 'MagicWishful-Regular';
    src: url('../fonts/MagicWishful-Regular.woff2') format('woff2'),
                 url('../fonts/MagicWishful-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    
}

@font-face {
    font-family: 'LittleQuotes-Regular';
    src: url('../fonts/LittleQuotes-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    
}

@font-face {
    font-family: 'MagnolinDeliciousy-Regular';
    src: url('../fonts/MagnolinDeliciousy-Regular.woff2') format('woff2'),
                 url('../fonts/MagnolinDeliciousy-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    
}

@font-face {
    font-family: 'PinkWallRegular';
    src: url('../fonts/PinkWallRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    
}

html,

body {
    

    width:      100%;

    height:     100%;

    padding:    0;

    margin:     0;

    box-sizing: border-box;

}

html {
    font-size: 46px;
}



* {

    box-sizing: border-box;

}



body {
    
    color: #102e4e;

    background-color: #f6f6f6;
    
    font-size: 1rem;
    
    line-height:      1.3;
    
    font-family: 'LittleQuotes-Regular', sans-serif;
    
    font-weight: 500;
    
    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;

	color: #1e1f4c;
}



html.loaded body {

    opacity: 1;

}



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



	2. TYPOGRAPHY (@typo) - typographic styles

	

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


h1,

h2,

h3,

h4,

h5,

h6 {

	font-style: normal;

	font-weight: 400;

}



h1:first-child,

h2:first-child,

h3:first-child,

h4:first-child,

h5:first-child,

h6:first-child {

    margin-top: 0;

}



h1 {

    font-size: 4rem;
    
    /*display:        flex;*/
    
    /*flex-direction: column;*/
    
    /*align-items:    center;*/
	
	/*padding: 20px 0;*/
    margin-bottom:0;
    margin-top:0;
}



h2 {

    font-size:   2.2rem;

    line-height: 1.3;
    
    margin-bottom: 25px;

}


strong {
	    
    font-weight:bold;
}

p:last-child {

    margin-bottom: 0;

}



/* LIGHT TEXT */

.is-text-light {

    color: #fff;

}


.is-text-light a {

    color: #fff;

}

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

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

.breadcrumb a {
    color: #1e1f4c;
}

.footer a {
    font-weight: bold;
    color: #1e1f4c;
}

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

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

.no-wrap {
  white-space: nowrap;
}

.strikethrough {
	text-decoration: line-through;
}

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



	2. LAYOUT (@layout) - layout styles

	

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



/* CONTENT */

body {
    background: url("../images/bg-poem.jpg") top center repeat;
}

.content-wrap {

    width:      100%;
    padding-bottom: 25px;
    position:   relative;
    z-index:    20;

}

.header {
    margin: 0;
    color: #1e1f4c;
}

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


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


.row img {
	margin:10px auto 0;
	max-width: 100%;
}

.row  {
	padding: 0;
	display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    -webkit-box-pack:  justify;
    -ms-flex-pack:     justify;
    justify-content:   space-between;
	gap:0;
}

.row .text-box {
    width: 50%;
}

.row .img-box {
    width: 50%;
}

.row {
	text-align:center;
}

.row-1 {
    /*margin-top:-100px*/
}

.row-2 {
    /*margin-top:-200px*/
}

.row-2 .text-box {
    padding-top:100px;
}

.row-3 {
    /*margin-top:-50px*/
}

.row-4,
.row-5,
.row-6 {
    /*margin-top:-100px*/
}

.row-7 {
    text-align:center;
    width: 100%;
    /*margin-top:-100px;*/
}

.row-7 img {
    width:50%;
}

.row-8 {
    text-align:center;
    width: 100%;
}

.share {
    padding: 40px 0 0;
    font-size: 0.7rem;
    color: #1e1f4c;
}


.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(240,138,134, 0.5);
	box-shadow: 0 30px 30px -25px rgba(240,138,134, 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: rgba(245,204,198, 0.3);
    font-size: 0.7rem;
    color: #1e1f4c;
}

.footer .content {
	max-width:1100px;
}

.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: #1e1f4c !important;
    --text-colour: #1e1f4c !important;
    --label-colour: #1e1f4c !important;
    --button-colour: #1e1f4c !important;
}

.newsletter .emailoctopus-form .form-control::placeholder {
    color:#1e1f4c;
}


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

.newsletter .mastfoot a:before{
    filter: invert(53%) sepia(10%) saturate(2745%) hue-rotate(312deg) brightness(200%) contrast(91%);
}

.newsletter .mastfoot.no-bg a:hover{
    color: #1e1f4c !important;
}

.newsletter .emailoctopus-form input[type=submit] {
    background-color: #f2c9c3 !important;
    color: #1e1f4c !important;
}

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


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

.copyright {
    font-size: 0.6rem;
}

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



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

	

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






/* TABLETS */





/* DESKTOPS */


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

    .content	{
		margin:0 2%;
		width: 96%;
	}

	.share {
		padding: 20px 0 0;
	}
	
	.row  {
		padding: 20px 0;
		-ms-flex-direction:    column;
		flex-direction:        column;
		gap:20px;
	}

	.row .text-box,
	.row .img-box {
		width: 100%;
	}

	.row-2, .row-4, .row-6 {
		-ms-flex-direction:    column-reverse;
		flex-direction:        column-reverse;
	}

	.row-1 .text-box,
	.row-2 .text-box,
	.row-3 .text-box,
	.row-2 .text-box,
	.row-4 .text-box,
	.row-6 .text-box  {
		text-align:center;
	}

}

/* DESKTOPS HIGH RES */
@media screen and (min-width: 1280px) {
 
	.project a:hover img{
		top: -40px;
		-webkit-box-shadow: 0 30px 100px -25px rgba(240,138,134, 0.5);
		box-shadow: 0 30px 100px -25px rgba(240,138,134, 0.5);

	}

}

@media screen and (max-width: 768px) {
    html {
        font-size: 36px;
    }

	.project {
		width: 48%;
	}
    
    .newsletter div {
        margin:0;
    }
    
    .row-7 img {
        width:100%;
    }
    
}


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

	.CTA {
		font-size: 0.7rem;
	}

}