/******************************************************************************/
/* common */
html {height: 100%; min-width: 500px; font-family: 'PT Sans', sans-serif; font-style: italic;  min-height: 600px;}
body {margin: 0; padding: 0;}

/******************************************************************************/
/* slides */
.fs-wrap {width: 100%; position: relative; min-width: 900px; min-height: 100%;}
.center-wrap {margin: 0 auto 0 auto; width: 90%; max-width: 1000px; min-height: 90%; display: flex; align-items: stretch; padding-top: 30px;}
.fs-wrap .fa-arrow-circle-down {position: absolute; font-size: 50px; bottom: 5px; left: 50%; transform: translate(-50%); opacity: 0.3; font-size: 50px; cursor: pointer;}
.bg-fill {height: 100%; width: 100%; background-color: white; opacity: 0.5; position: absolute;}

#bg-image {height: 100%; width: 100%; min-height: 800px; position: fixed; top: 0; left: 0; z-index: -1;}
#bg-image.welcome {background:  url(../images/bg_pattern.png) top left repeat, url(../images/bg_welcome.jpg) center center no-repeat; background-size: auto,cover;}
#bg-image.middle {background:  url(../images/bg_pattern.png) top left repeat, url(../images/bg_middle.jpg) center center no-repeat; background-size: auto,cover;}
#bg-image.contact {background:  url(../images/bg_pattern.png) top left repeat, url(../images/bg_contact.jpg) center center no-repeat; background-size: auto,cover;}

.center-wrap .stock {display: inline-block; background-size: cover; flex: 4;}
.center-wrap .text {display: inline-block; text-align: center; flex: 6; display: flex; flex-direction: column; justify-content: space-between;}
.center-wrap .text .title {font-weight: bold; font-size: 30px; margin: 10px 20px 10px 20px;}
.center-wrap .text .segment {margin: 10px 20px 10px 20px; text-indent: 20px; text-align: justify; font-size: 18px;}
.center-wrap .text .segment.important {text-align: center; font-weight: bold; margin: 20px;}

/******************************************************************************/
/* welcome screen */
#welcome-screen .center-wrap {padding: 0; position: relative; height: 100%; max-width: 700px;}
#welcome-screen .content {height: 100%; width: 100%; text-align: center; position: absolute; font-weight: bold;} 
#welcome-screen #logo {margin: 20px; height: 30vh;} 
#welcome-screen #contact-button {margin: 20px; border: 2px solid black; cursor: pointer; display: inline-block; padding: 15px; font-size: 4vh; border-radius: 5px;} 
#welcome-screen .line {margin: 20px 0 20px 0;}
#welcome-screen .split {background-color: black; width: 70%; opacity: 0.3; height: 2px; display: inline-block;}                        
#welcome-screen .text {display: inline-block; font-size: 4vh; width: 500px; vertical-align: middle;}
#welcome-screen .fa-thumbs-up {display: inline-block; vertical-align: middle; font-size: 5vh; margin: 3px; opacity: 0.5;}
#welcome-screen #lang-select img {margin: 2px; border: 1px solid black;}

/******************************************************************************/
/* about screen */
#about-screen {background-color: #e7d8c3; color: #644704; margin-top: 10px;}
#about-screen .important {background-color: #644704; color: #e7d8c3; font-size: 35px; padding: 10px;}

/******************************************************************************/
/* about screen */
#advices-screen {background-color: #e8fafe; color: #103160; margin-top: 300px;}

/******************************************************************************/
/* contact screen */
#contact-screen {color: black; margin-top: 10px;}
#contact-screen .center-wrap {padding: 0; position: relative; height: 100%; max-width: 700px; min-height: 840px;}
#contact-screen .content {height: 100%; width: 100%; text-align: center; position: absolute; font-weight: bold;} 
#contact-screen .line {font-size: 35px;}
#contact-screen .line:first-child {margin-top: 30px;}
#contact-screen .split {background-color: black; width: 70%; opacity: 0.3; height:1px; display: inline-block; margin: 10px;} 
#contact-screen iframe {width: 90%; height: 400px;}