/* Respective Size Define

1200px or more
992px - 1199px		Space 207px, iPad Horizontal View.
768px - 991px		Space 223px, iPad Vertical View.
600px - 767px		Space 167px, Mobile Horizontal View.
480px - 599px		Space 119px
320px - 479px		Space 159px, Mobile Vertical View.
319px or below

*/

@-webkit-keyframes fade { from { opacity: 0.4 } to { opacity: 1 } }
@keyframes fade { from { opacity: 0.4 } to { opacity: 1 } }

.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s }

.cover { position: relative; overflow: hidden; background: white; width: 100%; height: 500px }
.cover .prev, .cover .next { position: absolute; top: 50%; margin-top: -28px; padding: 16px; width: auto; font-weight: bold; font-size: 18px; color: white; cursor: pointer; border-radius: 0 3px 3px 0; transition: 0.2s ease }
.cover .next { right: 0; border-radius: 3px 0 0 3px }
.cover .prev:hover, .cover .next:hover { background-color: rgba(0,0,0,0.5) }
.cover .dotgroup { position: absolute; top: 100%; margin-top: -30px; text-align: center; width: 100%; height: 40px }
.cover .dot { display: inline-block; margin: 0 2px; background-color: rgba(255,255,255,0.2); width: 13px; height: 13px; cursor: pointer; border-radius: 50%; transition: background-color 0.5s ease }
.cover .dot:hover { background-color: rgba(255,255,255,0.8) }
.cover .dot.active { background-color: white }
.cover-img { display: none; height: 500px; background-color: gray; text-decoration: none }
.cover-img:before { position: absolute; content: ""; width: 100%; height: 500px; background-repeat: no-repeat }
.cover-img .container { position: relative; display: table; margin: auto; width: 1200px; height: 100%; color: white }
.cover-img .container > div { display: table-cell; padding: 0 50px; vertical-align: middle }
.cover-img h1, .cover-img h2 { display: block; margin: 0; font-weight: 300 }

.cover-img-1 { background: #00b2ba; background: linear-gradient(to bottom, #00b2ba 30%, #008d94) }
.cover-img-1:before { padding-left: 520px; background: url(../img/cover-img-01-bg.png) no-repeat top 40px center; background-size: 800px }
.cover-img-1 h1, .cover-img-1 h2 { margin: 1em 0; padding-left: 3%; width: 40% }
.cover-img-1 h1 { font-size: 36px; line-height: 1.2 }
.cover-img-1 h2 { font-size: 24px }

.cover-img-2:before { background-image: url(../img/cover-img-02-bg.jpg); background-position: bottom center }
.cover-img-2 h2 { display: block; margin-left: 380px; margin-right: 100px; padding: 50px; background: rgba(0,0,0,0.3); font-weight: 300; font-size: 40px; line-height: 1.3; text-align: center }

.cover-img-3 { background: #d3dfdf }
.cover-img-3:before { margin-left: 220px; background: url(../img/cover-img-03-bg.png) no-repeat top center; background-size: 650px }
.cover-img-3 h2 { margin: 1.2em 0; padding-left: 10px; width: 39%; font-weight: 300; font-size: 22px; line-height: 1.6; color: #005a65 }

@media (max-width: 1199px) {
	.cover, .cover-img, .cover-img:before { height: 41.66vw }
	.cover-img .container { width: 100% }
	
	.cover-img-1:before { padding-left: 43.33vw; background-position: top 3.33vw center; background-size: 66.66vw }
	.cover-img-1 h1, .cover-img-1 h2 { width: 36% }
	.cover-img-1 h1 { font-size: 3.4vw }
	.cover-img-1 h2 { font-size: 2.4vw }
	
	.cover-img-2:before { background-position: bottom left -33.33vw; background-size: 200vw }
	.cover-img-2 h2 { margin-left: 50%; margin-right: 0; padding: 4.16vw; font-size: 3vw }
	
	.cover-img-3:before { margin-left: 18.33vw; background-position: top center; background-size: 54.16vw }
}

@media (max-width: 991px) {
	.cover-img-3 h2 { padding-left: 3.02vw; width: 34%; font-size: 2.2vw; line-height: 1.5 }
}

@media (max-width: 767px) {
	.cover, .cover-img, .cover-img:before { height: 60vw }
	
	.cover-img-1:before { margin-left: 0; background-position: bottom -17vw left 8.5vw; background-size: 85vw }
	.cover-img-1 .container > div { vertical-align: top }
	.cover-img-1 h1, .cover-img-1 h2 { margin: 0 -50px; width: auto; text-align: center }
	.cover-img-1 h1 { margin-top: 1.56vw; font-size: 4.42vw }
	.cover-img-1 h1 span { display: block }
	.cover-img-1 h2 { margin-top: 3.9vw; font-size: 2.6vw }
	
	.cover-img-2:before { background-position: top left -22vw; background-size: 260vw }
	.cover-img-2 .container > div { vertical-align: top }
	.cover-img-2 h2 { margin: 35px 10vw 0 10vw; font-size: 4.16vw }
	
	.cover-img-3:before { margin-left: 0; background-position: top 16vw left 7vw; background-size: 85vw }
	.cover-img-3 .container > div { padding-top: 10px; vertical-align: top }
	.cover-img-3 h2 { margin: 0.7em auto; padding-left: 0; width: 80%; font-size: 2.6vw; line-height: 1.5; text-align: center }
}

@media (max-width: 599px) {
	.cover, .cover-img, .cover-img:before { height: 70vw }
	
	.cover-img-1:before { background-position: bottom -16vw left 8vw; background-size: 90vw }
	.cover-img-1 h1 { font-size: 5.5vw }
	.cover-img-1 h2 { margin-top: 30px; font-size: 3.2vw }

	.cover-img-2:before { background-position: top left -30vw; background-size: 300vw }
	.cover-img-2 h2 { margin: 35px 5vw 0 5vw; font-size: 4.16vw }
	
	.cover-img-3:before { background-position: top 18vw left 2vw; background-size: 95vw }
	.cover-img-3 h2 { width: 90%; font-size: 3vw }
}

@media (max-width: 479px) {
	.cover, .cover-img, .cover-img:before { height: 80vw }
	
	.cover-img-1:before { background-position: bottom -17.5vw left 4vw; background-size: 100vw }
	.cover-img-1 h1 { margin-top: 2vw; font-size: 6vw }
	.cover-img-1 h2 { margin-top: 15px; font-size: 3.9vw }
	.cover-img-1 h2 span { display: block }
	
	.cover-img-2:before { background-position: top left -45vw; background-size: 345vw }
	.cover-img-2 .container > div { padding: 0 40px }
	.cover-img-2 h2 { margin: 7.29vw -2vw 0 -2vw; font-size: 5.2vw }
	
	.cover-img-3:before { background-position: top 20vw left -7vw; background-size: 110vw }
	.cover-img-3 .container > div { padding: 2.08vw 10.41vw 0 10.41vw }
	.cover-img-3 h2 { width: 100%; font-size: 3.2vw }
}

@media (max-width: 319px) {
	.cover-img .container > div { padding: 0 15.62vw }
	
	.cover-img-2 h2 { margin: 7.29vw -6vw 0 -6vw; font-size: 5.2vw }
	
	.cover-img-3 .container > div { padding: 3.5vw 10.41vw 0 10.41vw }
}

/*****************/
/***** About *****/
/*****************/

.about { background: white }
.about > div { margin: auto; padding: 80px 60px; max-width: 1080px; min-height: 300px; background: url(../img/capimize-monitor.png) no-repeat center right 30px; background-size: 512px }
.about h1 { margin: 0; font-weight: 300; font-size: 60px; color: #00b2ba; line-height: 1.1 }
.about p { padding-right: 48%; font-weight: 300; font-size: 21px; color: #777; line-height: 1.8 }

@media (max-width: 1199px) {
	.about > div { background-position: center right 2.5vw; background-size: 42.66vw }
	.about h1 { font-size: 5vw }
	.about p { font-size: 1.75vw }
}

@media (max-width: 991px) {
	.about > div { padding: 60px 120px; min-height: inherit; background-position: top 40px center; background-size: 500px }	
	.about h1 { padding-top: 400px; font-size: 56px }
	.about p { padding-right: 0; font-size: 19px }
}

@media (max-width: 767px) {
	.about > div { padding: 50px 11.71vw; background-size: 450px }
	.about h1 { padding-top: 370px; font-size: 52px }
	.about p { font-size: 18px }
}

@media (max-width: 479px) {
	.about > div { padding: 40px; background-position: top 8.33vw center; background-size: 88vw }
	.about h1 { padding-top: 70vw; font-size: 46px }
	.about p { font-size: 16px }
}

@media (max-width: 319px) {
	.about > div { padding: 9.37vw 12.5vw }
	.about h1 { font-size: 13.75vw }
	.about p { font-size: 3.75vw }
}