diff --git a/2-marzipano-tour-with-html-and-videos/coach.css b/2-marzipano-tour-with-html-and-videos/coach.css
index 8942446..bae15b2 100644
--- a/2-marzipano-tour-with-html-and-videos/coach.css
+++ b/2-marzipano-tour-with-html-and-videos/coach.css
@@ -1,83 +1,92 @@
#coach-container {
- display: flex;
- position: absolute;
- align-items: flex-end;
- left: 0;
- bottom: 0;
- pointer-events: none
+ display: flex;
+ position: absolute;
+ align-items: flex-end;
+ left: 0;
+ bottom: 0;
+ pointer-events: none;
}
#coach-container .coach {
- display: flex;
- position: relative;
- z-index: 14;
- pointer-events: auto
+ display: flex;
+ position: relative;
+ z-index: 14;
+ pointer-events: auto;
}
#coach-container .coach img {
- height: 35vh
+ height: 35vh;
}
#coach-container .message {
- display: block;
- position: relative;
- left: -3vh;
- bottom: 6vh;
- min-width: 300px;
- max-width: 640px;
- background-color: #ffffff;
- color: black;
- padding: 0.6em 1em;
- border: 6px solid #6581ae;
- border-radius: 15px;
- opacity: 0;
- z-index: 12;
- pointer-events: none;
- transition: opacity 0.2s;
- -webkit-transition: opacity 0.2s;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
- transition: opacity 0.3s, transform 0.3s;
- -webkit-transform-origin: -2em 50%;
- transform-origin: -2em 50%;
- -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 30deg);
- transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 30deg);
- pointer-events: none
+ display: block;
+ position: relative;
+ left: -3vh;
+ bottom: 6vh;
+ min-width: 300px;
+ max-width: 640px;
+ background-color: #ffffff;
+ color: black;
+ padding: 0.6em 1em;
+ border: 6px solid #6581ae;
+ border-radius: 15px;
+ opacity: 0;
+ z-index: 12;
+ pointer-events: none;
+ transition: opacity 0.2s;
+ -webkit-transition: opacity 0.2s;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+ transition: opacity 0.3s, transform 0.3s;
+ -webkit-transform-origin: -2em 50%;
+ transform-origin: -2em 50%;
+ -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 30deg);
+ transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 30deg);
+ pointer-events: none;
}
#coach-container .coach:hover + .message {
- opacity: 1;
- -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0);
- transform: translate3d(0,0,0) rotate3d(0,0,0,0);
- pointer-events: auto
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
+ transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
+ pointer-events: auto;
}
#coach-container .message::before {
- content: '';
- position: absolute;
- right: 99%;
- width: 1.8em;
- height: 1.8em;
- top: 50%;
- margin: -.9em 0 0;
- background: url(./img/tooltip.svg) no-repeat center center;
- background-size: 100%
+ content: "";
+ position: absolute;
+ right: 99%;
+ width: 1.8em;
+ height: 1.8em;
+ top: 50%;
+ margin: -0.9em 0 0;
+ background: url(./img/tooltip.svg) no-repeat center center;
+ background-size: 100%;
}
#coach-container p {
- font-size: 2.2vh;
- line-height: 3vh;
- margin: 1vh;
- color: #333;
- text-align: justify
+ font-size: 2.2vh;
+ line-height: 3vh;
+ margin: 1vh;
+ color: #333;
+ text-align: justify;
}
.mobile #coach-container .message {
- left: 0;
- bottom: 36vh
+ position: absolute;
+ left: 0;
+ bottom: 36vh;
+ width: 100vw;
+ font-size: 10px;
+}
+
+.mobile #coach-container p {
+ font-size: 14px;
+ line-height: 16px;
+ margin: 1vh;
}
.mobile #coach-container .message::before {
- display: none
-}
\ No newline at end of file
+ display: none;
+}