@charset "UTF-8";

/* CSS Document */

html {
    font-family: sans-serif;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}


/**
 * Remove default margin.
 */

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    margin: 0;
}


/* HTML5 display definitions
   ========================================================================== */


/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}


/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
    display: inline-block;
    /* 1 */
    vertical-align: baseline;
    /* 2 */
}


/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}


/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}


/* Links
   ========================================================================== */


/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background-color: transparent;
}


/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

body {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: white;
}

h1 {
    font-size: 36px;
    margin-top: 100px;
    font-weight: lighter;
}

p {
    font-weight: lighter;
	font-size:14px;
}

.content article {
    padding: 100px;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

img {
    max-width: 100%;
}

/*
hr {
    border: 0;
    border-top: 1px solid #fff;
    border-bottom: none;
}
*/


/* Text-level semantics
   ========================================================================== */


/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
.sakura-box {
        position: relative;
        height: 600px;
        background-image: url(../image/photo-1452723311049-05685d7428ce.jpg);
        background-position: top center;
        background-size: auto 100%;
        background-attachment: fixed;
        background-repeat: no-repeat;
        overflow: hidden;
    }
.title-text {
	height: 200px;
	width: 100%;
	background-image: url(../image/title%20text.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 60%;
	position: absolute;
	top: 40%;
	margin-top: -50px;
}
.fore-sakura {
        width: 800px;
        height: 600px;
        background-image: url(../image/cherry-blossom-6415_1920.png);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 40%;
        position: absolute;
        left: 40%;
        margin-left: -480px;
        top: 90px;
    }
.back-sakura {
	width: 900px;
	height: 600px;
	background-image: url(../image/japanese-cherry-trees-324145_1920.png);
	background-repeat: no-repeat;
	background-position: top;
	background-size: 50%;
	position: absolute;
	left: 15%;
	margin-left: -480px;
	top: 30px;
}

.show-box-container {
        margin-top: 50px;
        width: 100%;
        height: 3500px;
    }
    .show-box {
        padding: 5%;
        width: 100%;
        height: 700px;
    }
    .show-box .box1 {
        height: 40vw;
        width: 40vw;
        background-image: url(../image/bird.jpg);
        background-size: 50%;
        background-repeat: repeat-y;
        background-attachment: fixed;
        background-position: left!important;
        float: left;
        position: relative;
        border-radius: 50%;
    }
    .show-box .box2 {
        height: 40vw;
        width: 40vw;
        background-image: url(../image/4456896338_b5a1db38c5_b.jpg);
        background-size: 50%;
        background-position: right!important;
        background-repeat: repeat-y;
        background-attachment: fixed;
        float: right;
        position: relative;
        border-radius: 50%;
    }
    .show-box .box3 {
        height: 40vw;
        width: 40vw;
        background-image: url(../image/b7eba743748dcca7bcf8be5d1a38287b.jpg);
        background-size: 50%;
        background-position: left!important;
        background-repeat: repeat-y;
        background-attachment: fixed;
        float: left;
        position: relative;
        border-radius: 50%;
    }
    .show-box .box4 {
        height: 40vw;
        width: 40vw;
        background-image:url(../image/HANAMI%20FEST.jpg);
        background-repeat: repeat-y;
        background-attachment: fixed;
        background-position: right!important;
        background-size: 50%;
        float: right;
        position: relative;
        border-radius: 50%;
    }
    .show-box .box5 {
        height: 40vw;
        width: 40vw;
        background-image: url(../image/FullSizeRender%2038_4.jpg);
        background-position: left!important;
        background-repeat: repeat-y;
        background-attachment: fixed;
        background-size: 50%;
        float: left;
        position: relative;
        border-radius: 50%;
    }
    .box-tint1 {
        background-color: rgba(255, 255, 255, 0.6);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
    .box-tint1 h3 {
        color: #b6b6b6;
        font-size: 70px;
        font-weight: lighter;
        text-align: center;
    }
    .box-tint2 {
        background-color: rgba(255, 255, 255, 0.95);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
    .box-tint2 h3 {
        color: #b6b6b6;
        font-weight: lighter;
        text-align: center;
        font-size: 70px;
    }
    .box-tint3 {
        background-color: rgba(255, 255, 255, 0.95);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
    .box-tint3 h3 {
        color: #b6b6b6;
        font-weight: lighter;
        text-align: center;
        font-size: 70px;
    }
    .box-tint4 {
        background-color: rgba(255, 255, 255, 0.95);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
    .box-tint4 h3 {
        color: #b6b6b6;
        font-weight: lighter;
        text-align: center;
        font-size: 70px;
    }
    .box-tint5 {
        background-color: rgba(255, 255, 255, 0.95);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
    .box-tint5 h3 {
        color: #b6b6b6;
        font-weight: lighter;
        text-align: center;
        font-size: 70px;
    }
    .my-text1 {
       text-align: left;
    }
    .my-text2 {
       text-align: right;
    }
    .my-text3 {
       text-align: left;
    }
    .my-text4 {
       text-align: right;
    }
    .my-text5 {
       text-align: left;
    }
/* Effect 8: border slight translate */
    nav a {
        position: relative;
        display: inline-block;
        margin: auto;
        outline: none;
        color: #f8dce1!important;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 400;
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
        font-size: 1em;
        left:50%;
		transform:translateX(-50%);
		width:auto;
    }
    nav a:hover,
    nav a:focus {
        outline: none;
    }
    .cl-effect-8 a {
        padding: 10px 10px;
    }
    .cl-effect-8 a::before,
    .cl-effect-8 a::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid #d1a9ae;
        content: '';
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
    }
    .cl-effect-8 a::after {
        border-color: #f8dce1;
        opacity: 0;
        -webkit-transform: translateY(-7px) translateX(6px);
        -moz-transform: translateY(-7px) translateX(6px);
        transform: translateY(-7px) translateX(6px);
    }
    .cl-effect-8 a:hover::before,
    .cl-effect-8 a:focus::before {
        opacity: 0;
        -webkit-transform: translateY(5px) translateX(-5px);
        -moz-transform: translateY(5px) translateX(-5px);
        transform: translateY(5px) translateX(-5px);
    }
    .cl-effect-8 a:hover::after,
    .cl-effect-8 a:focus::after {
        opacity: 1;
        -webkit-transform: translateY(0px) translateX(0px);
        -moz-transform: translateY(0px) translateX(0px);
        transform: translateY(0px) translateX(0px);
    }

/* mobile landscape */

@media screen and (min-width: 480px) {
	.sakura-box {
        position: relative;
        height: 600px;
        background-image: url(../image/photo-1452723311049-05685d7428ce.jpg);
        background-position: top center;
        background-size: auto 100%;
        background-attachment: fixed;
        background-repeat: no-repeat;
        overflow: hidden;
    }
	.title-text {
        height: 200px;
        width: 100%;
        background-image: url(../image/title%20text.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 50%;
        position: absolute;
        top: 40%;
        margin-top: -50px;
    }
    .fore-sakura {
        width: 800px;
        height: 600px;
        background-image: url(../image/cherry-blossom-6415_1920.png);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 50%;
        position: absolute;
        left: 60%;
        margin-left: -480px;
        top: 90px;
    }
    .back-sakura {
        width: 900px;
        height: 600px;
        background-image: url(../image/japanese-cherry-trees-324145_1920.png);
        background-repeat: no-repeat;
        background-position: top;
        background-size: 50%;
        position: absolute;
        left: 15%;
        margin-left: -480px;
        top: 30px;
    }
	
    .box-text1 {
        float: left;
        width: 50%;
        padding-left: 10%;
        padding-top: 5%;
        position: relative;
    }
    .box-text1 p {
		text-align:justify;
    }
    
    .box-text2 {
        float: right;
        width: 50%;
        padding-right: 10%;
        padding-top: 3%;
        position: relative;
    }
    .box-text2 p {
		text-align:justify;
    }
    
    .box-text3 {
        float: left;
        width: 50%;
        padding-left: 10%;
        padding-top: 5%;
        position: relative;
    }
    .box-text3 p {
		text-align:justify;
    }
    
    .box-text4 {
        float: right;
        width: 50%;
        padding-right: 10%;
        padding-top: 5%;
        position: relative;
    }
    .box-text4 p {
		text-align:justify;
    }
    
    .box-text5 {
        float: left;
        width: 50%;
        padding-left: 10%;
        padding-top: 5%;
        position: relative;
    }
    .box-text5 p {
		text-align:justify;
    }
	
	}


/* tablet portrait view */

@media screen and (min-width: 760px) {
	p{
		font-size:14px;
		}
	.sakura-box {
        position: relative;
        height: 600px;
        background-image: url(../image/photo-1452723311049-05685d7428ce.jpg);
        background-position: top center;
        background-size: auto 100%;
        background-attachment: fixed;
        background-repeat: no-repeat;
        overflow: hidden;
    }
	.title-text {
        height: 200px;
        width: 100%;
        background-image: url(../image/title%20text.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 40%;
        position: absolute;
        top: 40%;
        margin-top: -50px;
    }
    .fore-sakura {
        width: 800px;
        height: 600px;
        background-image: url(../image/cherry-blossom-6415_1920.png);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 60%;
        position: absolute;
        left: 70%;
        margin-left: -480px;
        top: 90px;
    }
    .back-sakura {
        width: 900px;
        height: 600px;
        background-image: url(../image/japanese-cherry-trees-324145_1920.png);
        background-repeat: no-repeat;
        background-position: top;
        background-size: 50%;
        position: absolute;
        left: 15%;
        margin-left: -480px;
        top: 30px;
    }
	
    .box-text1 {
        float: left;
        width: 50%;
        padding-left: 10%;
        padding-top: 5%;
        position: relative;
    }
    .box-text1 p {
		text-align:justify;
    }
    
    .box-text2 {
        float: right;
        width: 50%;
        padding-right: 10%;
        padding-top: 3%;
        position: relative;
    }
    .box-text2 p {
		text-align:justify;
    }
    
    .box-text3 {
        float: left;
        width: 50%;
        padding-left: 10%;
        padding-top: 5%;
        position: relative;
    }
    .box-text3 p {
		text-align:justify;
    }
    
    .box-text4 {
        float: right;
        width: 50%;
        padding-right: 10%;
        padding-top: 5%;
        position: relative;
    }
    .box-text4 p {
		text-align:justify;
    }
    
    .box-text5 {
        float: left;
        width: 50%;
        padding-left: 10%;
        padding-top: 5%;
        position: relative;
    }
    .box-text5 p {
		text-align:justify;
    }
	
	
	}

@media screen and (min-width:980px) {
	p{
		font-size:16px;
		}
    .sakura-box {
        position: relative;
        height: 600px;
        background-image: url(../image/photo-1452723311049-05685d7428ce.jpg);
        background-position: top center;
        background-size: auto 100%;
        background-attachment: fixed;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    .title-text {
        height: 200px;
        width: 100%;
        background-image: url(../image/title%20text.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 30%;
        position: absolute;
        top: 40%;
        margin-top: -50px;
    }
    .fore-sakura {
        width: 800px;
        height: 600px;
        background-image: url(../image/cherry-blossom-6415_1920.png);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 80%;
        position: absolute;
        left: 80%;
        margin-left: -480px;
        top: 90px;
    }
    .back-sakura {
        width: 900px;
        height: 600px;
        background-image: url(../image/japanese-cherry-trees-324145_1920.png);
        background-repeat: no-repeat;
        background-position: top;
        background-size: 50%;
        position: absolute;
        left: 15%;
        margin-left: -480px;
        top: 30px;
    }
    
    .box-text1 {
        float: left;
        width: 50%;
        padding-left: 10%;
        padding-top: 10%;
        position: relative;
    }
    .box-text1 p {
		text-align:justify;
    }
    
    .box-text2 {
        float: right;
        width: 50%;
        padding-right: 10%;
        padding-top: 10%;
        position: relative;
    }
    .box-text2 p {
		text-align:justify;
    }
    
    .box-text3 {
        float: left;
        width: 50%;
        padding-left: 10%;
        padding-top: 10%;
        position: relative;
    }
    .box-text3 p {
		text-align:justify;
    }
    
    .box-text4 {
        float: right;
        width: 50%;
        padding-right: 10%;
        padding-top: 10%;
        position: relative;
    }
    .box-text4 p {
		text-align:justify;
    }
    
    .box-text5 {
        float: left;
        width: 50%;
        padding-left: 10%;
        padding-top: 10%;
        position: relative;
    }
    .box-text5 p {
		text-align:justify;
    }
    
    /* Setting margin among all letters */
    .letter {
        margin: 0 10px;
    }
}