/* COPYRIGHT TODOS TEATRO 2019 - ALL RIGHTS RESERVED */ /* todosteatro DESKTOP CSS */ @charset "utf-8"; * { /* set default margins, borders and padding to zero */ margin: 0; border: 0; padding: 0; } /* * { border: 1px solid red; } diagnostic use only */ body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Segoe UI", Helvetica, Arial, "Lucida Grande", sans-serif; /* font-size: 3vw; */ /* font-weight: 100; */ /* letter-spacing: 0.02em; */ /* line-height: 200%; */ -webkit-text-size-adjust: 100%; /* Fixes text not displaying correctly on iPhone; note, use 100% rather than none; none stops user zooming on text */ background-color: rgba(0,153,204,1.0); background-repeat: repeat; background-size: cover; overflow-x: hidden; /* hide horizontal scroll bar at bottom of screen */ /* background-color: magenta; */ overflow-y: hidden; /* IMPORTANT - prevents sticking scroll on some iPads, ie swipe begins to scroll but page bounces back after very short swipe! */ } html, body { overflow-x: hidden; /* prevents horizontal sway when scrolling vertically in Safari on iPad; also solves similar problem for Firefox on iPad which is apparently just a front end for Safari */ } /* START: READ MORE INITIALISATION */ #more1, #more2, #more3, #more4, #more5, #more6 { display: none; } /* END: READ MORE INITIALISATION */ /* START: IFRAME WRAPPER STYLING */ /* Source Reference: https://faq.dailymotion.com/hc/en-us/articles/360022841393-How-to-preserve-the-player-aspect-ratio-on-a-responsive-page */ .turtleWrapper { position: relative; display: block; width: 100%; /* padding-bottom: 56.25%; */ /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ } #mailChimpWrapper { background-color: white; padding: 11px 11px 11px 0px; } .mailChimpButton { background-color: rgba(0,153,204,1.0); background-color: sienna; background-color: white; padding: 11px; font-size: 16px; color: white; color: sienna; border-style: solid; border-color: rgba(102,116,128,1.0); border-width: 1px; } #mce-EMAIL { font-size: 16px; border-style: solid; border-color: rgba(102,116,128,1.0); border-width: 1px; padding: 11px; } input[type="submit"], input[type="email"] { /* this webkit fix overrides iOS default behaviour, ie prevents undesirable shading and rounding of border box corners */ -webkit-appearance: none; border-radius: 0; } iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* END: IFRAME WRAPPER STYLING */ /* START: GALLERY STYLING */ .galleryStyle { display: block; width: 100%; margin-left: auto; margin-right: auto; } #carouselTwo { /* width: 85vw; */ display: block; margin: auto auto; padding-bottom: 5vw; padding-top: 3vw; width: 100vw; /* border: 1px solid white; */ /* border width, border style, border colour */ } #carouselOne, #carouselFive { /* width: 85vw; */ display: block; margin: auto auto; padding-bottom: 0vw; padding-top: 1vw; /* border: 1px solid white; */ /* border width, border style, border colour */ } /* END: GALLERY STYLING */ /* START - SOCIAL MEDIA ICON STYLING */ .iconSquare { width: 19px; display: inline-block; vertical-align: bottom; } /* Source reference: https://fontawesome.com */ .fa:hover { /* need .fa:hover here as well as .fa-twitter:hover etc below! Why? */ opacity: 0.7; } .fa-twitter { background-color: transparent; color: white; text-decoration: none; padding: 1vw 0 1vw 0; } .fa-twitter:hover { color: orange; } .fa-facebook { background-color: transparent; color: white; text-decoration: none; padding: 1vw 0 1vw 0; } .fa-facebook:hover { color: orange; } .fa-youtube { background-color: transparent; color: white; text-decoration: none; padding: 1vw 0 1vw 0; } .fa-youtube:hover { color: orange; } .fa-youtubePlacard { background-color: transparent; color: transparent; width: 11vw; height:11vw; } .fa-instagram { background-color: transparent; color: white; text-decoration: none; padding: 1vw 0 1vw 0; } .fa-instagram:hover { color: orange; } .fa-play-circleX { position: absolute; display: block; width: 100%; z-index: 101; text-decoration: none; font-size: 96px; display: block; width: 100vw; margin-top: 11vw; color: rgba(255,255,255,0.88); } /* END - SOCIAL MEDIA ICON STYLING */ /* START: PRIMARY CONTAINERS */ #containerMENUTEXT { position: fixed; padding-top: 0; z-index: 211; /* set z-index to high value to ensure that menu text is above all other elements */ width: 100vw; height: 7vw; font-size: 2vw; font-weight: 100; background-color: transparent; } #containerMENUTEXTbackground { position: fixed; z-index: 111; width: 100vw; height: 7vw; background-color: rgba(0,136,153,0.55); margin: 0 0 0 0; /* border-bottom: 1px solid rgba(212,229,159,1.0); */ } #containerHOMETESTA, #containerHOMETESTB, #containerHOMETESTC { position: relative; z-index: 0; padding-top: 0vw; background-color: rgba(101,179,227,0.99); /* START change opacity of background Reference Source: https://teamtreehouse.com/community/backgroundimage-opacity, see post by Thomas Yu on Jul 23, 2018 */ background-image: url("PUBLISHER FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ background-size: 100% auto; */ /* configure background to fill full width of page with height set to auto */ background-size: cover; -webkit-background-size: cover; /* need to for correct display with Google Chrome on Android phone */ -moz-background-size: cover; -o-background-size: cover; background-position: top; /* background-repeat: no-repeat; */ /* END change opacity of background */ } #containerTOUR_STORYB, #containerTeatrONLINE { position: relative; /* IMPORTANT OBSERVATION: position ABSOLUTE breaks everything!!!! */ display: block; z-index: 1; padding-top: 7vw; /* START change opacity of background Reference Source: https://teamtreehouse.com/community/backgroundimage-opacity, see post by Thomas Yu on Jul 23, 2018 */ background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ /* background-color: rgba(255, 255, 255, 0.77); */ /* background-blend-mode: lighten; */ /* background-position: center; */ /* background-size: 100% auto; */ /* configure background to fill full width of page with height set to auto */ background-size: contain; background-repeat: no-repeat; /* IMPORTANT - fixes incorrect rendering with Google Chrome on Android phone */ background-position: top; /* END change opacity of background */ /* background-size: cover; */ } #containerTOUR_STORYA { position: relative; /* IMPORTANT OBSERVATION: position ABSOLUTE breaks everything!!!! */ display: block; z-index: 1; width: 100vw; padding-top: 7vw; /* START change opacity of background Reference Source: https://teamtreehouse.com/community/backgroundimage-opacity, see post by Thomas Yu on Jul 23, 2018 */ background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ /* background-blend-mode: lighten; */ /* background-position: center; */ /* background-size: 100% auto; */ /* configure background to fill full width of page with height set to auto */ background-size: contain; background-repeat: no-repeat; /* IMPORTANT - fixes incorrect rendering with Google Chrome on Android phone */ background-position: top; /* END change opacity of background */ } #containerTitlePage { position: absolute; width: 100vw; height: 75vw; z-index: 300; padding-top: 0vw; background-color: rgba(212,229,159,1.0); /* START change opacity of background Reference Source: https://teamtreehouse.com/community/backgroundimage-opacity, see post by Thomas Yu on Jul 23, 2018 */ background-image: url("PUBLISHER FILES/ARTWORK/titlePage3Test.png"); /* IMPORTANT - don't forget quote "" marks! */ /* background-color: rgba(255, 255, 255, 0.00); */ /* background-blend-mode: lighten; */ background-position: center; background-size: 100% auto; /* configure background to fill full width of page with height set to auto */ /* END change opacity of background */ /* background-size: cover; */ } #containerABOUTUS_PAGE { position: relative; width: 100vw; z-index: 30; padding-top: 7vw; background-color: white; } #containerTEAM_PAGE { position: relative; padding-top: 7vw; width: 100vw; background-color: white; background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ background-size: contain; background-repeat: no-repeat; /* IMPORTANT - fixes incorrect rendering with Google Chrome on Android phone */ background-position: top; } #containerWORKSHOP_PAGE { position: relative; display: block; z-index: 1; width: 100vw; /* height: 500vw; */ /* need to specify height in order for background to repeat */ padding-top: 7vw; /* START change opacity of background Reference Source: https://teamtreehouse.com/community/backgroundimage-opacity, see post by Thomas Yu on Jul 23, 2018 */ background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ /* background-color: rgba(255, 255, 255, 0.88); */ /* background-blend-mode: lighten; */ /* background-repeat: repeat-y; */ background-size: contain; background-repeat: no-repeat; /* IMPORTANT - fixes incorrect rendering with Google Chrome on Android phone */ /* background-position: center; */ /* END change opacity of background */ /* visibility: visible; */ } #containerABOUT, #containerQuickGuide { position: relative; display: block; z-index: 1; width: 100vw; /* height: 500vw; */ /* need to specify height in order for background to repeat */ padding-top: 7vw; /* background-color: rgba(255,255,255,1.0); */ /* background-color: transparent; */ /* START change opacity of background Reference Source: https://teamtreehouse.com/community/backgroundimage-opacity, see post by Thomas Yu on Jul 23, 2018 */ background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ /* background-color: rgba(255, 255, 255, 0.88); */ /* background-blend-mode: lighten; */ /* background-repeat: repeat-y; */ background-size: contain; background-repeat: no-repeat; /* IMPORTANT - fixes incorrect rendering with Google Chrome on Android phone */ /* background-position: center; */ /* END change opacity of background */ /* visibility: visible; */ } #subContainerQuickGuide { background-color: white; } #containerGALLERY_PAGE { position: relative; width: 100vw; padding-top: 7vw; /* z-index: 30; */ /* background-color: white; */ /* START change opacity of background Reference Source: https://teamtreehouse.com/community/backgroundimage-opacity, see post by Thomas Yu on Jul 23, 2018 */ /* background-image: url("PUBLISHER FILES/ARTWORK/plasticBottlesCompressedBackgroundMono2.png"); */ /* IMPORTANT - don't forget quote "" marks! */ /* background-color: rgba(255, 255, 255, 0.77); */ /* background-blend-mode: lighten; */ /* background-position: center; */ /* background-size: 100% auto; */ /* configure background to fill full width of page with height set to auto */ /* END change opacity of background */ /* background-color: rgba(101,179,227,1.0); */ background-image: url("PUBLISHER FILES/ARTWORK/forestSunRays4.png"); /* IMPORTANT - don't forget quote "" marks! */ background-size: cover; background-repeat: repeat; background-position: top; } #containerSUPPORT_US { position: relative; width: 100vw; padding-top: 7vw; z-index: 30; /* background-color: white; */ background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ background-size: contain; /* note that cover does not appear to work in Google Chrome on Android phone */ background-position: top; background-repeat: no-repeat; /* IMPORTANT - fixes incorrect rendering with Google Chrome on Android phone */ } #containerBlog { position: relative; width: 100vw; height: 500vw; display: block; padding-top: 7vw; z-index: 30; background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ background-size: cover; background-position: top; background-repeat: repeat; } #containerPrivacyPolicy, #containerTermsAndConditions { position: relative; width: 100vw; padding-top: 0vw; z-index: 30; /* background-color: white; */ background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ background-size: cover; background-position: top; background-repeat: repeat; } #containerCONTACT { position: relative; display: block; width: 100vw; /* height: 47vw; */ padding-top: 7vw; background-color: transparent; background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ background-size: cover; /* background-repeat: repeat; */ background-position: left; } #containerLINKSPONSORS { position: relative; /* width: 100%; */ z-index: 30; padding-top: 7vw; background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ background-size: auto; -webkit-background-size: auto; /* need to for correct display with Google Chrome on Android phone */ -moz-background-size: auto; -o-background-size: autp; /* background-position: top; */ background-repeat: no-repeat; /*IMPORTANT - fixes incorrect rendering with Google Chrome on Android phone */ } #containerBOOKEND { /* clear: both; */ /* IMPORTANT to specify clear: both to avoid corruption of text content by preceding divs, eg clearing previous floats or whatever */ position: relative; display: block; margin: 0 0 0 0; padding: 3vw 0 0 0; width: 100vw; z-index: 30; background-color: rgba(0,153,204,1.0); } #containerBOOKENDTITLE { position: relative; display: block; margin: 0 0 0 0; padding: 0 0 0 0; width: 100vw; z-index: 30; background-color: rgba(51,102,153,1.0); } #containerNAVIGATION { position: absolute; width: 100vw; height: 100vh; /* note, adjust height to value such that image is centred on overlay navigation page */ /* z-index: 222; */ z-index: 999; background-color: rgba(101,179,227,1.0); background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.png"); /* IMPORTANT - don't forget quote "" marks! */ background-size: cover; background-position: bottom; } /* END: PRIMARY CONTAINERS */ /* START: SECONDARY CONTAINERS */ #subContainer { width: 100vw; display: block; background-color: transparent; } #subContainerBlue { width: 100vw; display: block; background-color: rgba(101,179,227,1.0); } #subContainerH50vw { width: 100vw; height: 50vw; display: block; } #containerBiography{ background-color: white; } #contentBiography { position: relative; width: 66vw; margin: 0 0 0 17vw; padding: 3vw 0 0 0; background-color: white; } #contentTitle { position: relative; /* width: inherit; */ /* inherit width from parent to avoid white margin to right */ z-index: 99; height: 44vw; /* z-index: 31; */ /* START change opacity of background Reference Source: https://teamtreehouse.com/community/backgroundimage-opacity, see post by Thomas Yu on Jul 23, 2018 */ background-image: url("PUBLISHER FILES/ARTWORK/bethanHomePage2.png");; /* IMPORTANT - don't forget quote "" marks! */ background-color: rgba(255, 255, 255, .00); background-blend-mode: lighten; /* END change opacity of background */ background-repeat: no-repeat; background-size: cover; width: 100%; /* Clear fix code: START */ content: ""; clear: both; display: table; /* Clear fix avoids overflow problem when image bigger than text area */ /* Source: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix2 */ /* Clear fix code: END */ } #contentTitle2 { position: relative; /* width: inherit; */ /* inherit width from parent to avoid white margin to right */ z-index: 99; height: 15vw; /* z-index: 31; */ background-color: rgba(101,179,227,1.0); /* background-image: url("PUBLISHER FILES/AnnabelEdits/treeCloud3.png"); */ background-repeat: no-repeat; background-size: cover; width: 100%; /* Clear fix code: START */ content: ""; clear: both; display: table; /* Clear fix avoids overflow problem when image bigger than text area */ /* Source: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix2 */ /* Clear fix code: END */ } #contentAbout2 { position: relative; display: block; font-family: Quicksand; margin: 0; padding: 10vw 8vw 10vw 8vw; padding: 0; background-color: rgba(101,179,227,0.66); } #contentTeatrONLINE2 { position: relative; display: block; font-family: Quicksand; margin: 0; padding: 0; background-color: rgba(101,179,227,0.66); } #contentteatrONLINE3, #contentAbout3, #contentTourDates3 { position: relative; display: block; font-family: Quicksand; padding: 16vw 8vw 5vw 8vw; background-color: white; } #contentQuickGuide2 { position: relative; display: block; font-family: Quicksand; padding: 1vw 8vw 0vw 8vw; background-color: white; } #contentContact3 { position: relative; display: block; font-family: Quicksand; padding: 16vw 8vw 5vw 8vw; background-color: white; } #contentWorkshop4 { position: relative; display: block; font-family: Quicksand; margin: 0; padding: 10vw 8vw 10vw 8vw; padding: 0; background-color: white; } #contentGalleryTitle, #contentSupportTitle { position: relative; display: block; /* height: 19vw; */ /* margin: 0 5vw 0 5vw; */ /* width: inherit; */ /* inherit width from parent to avoid white margin to right */ /* z-index: 99; */ /* height: 44vw; */ /* z-index: 31; */ /* background-color: transparent; */ /* background-color: rgba(255, 102, 0, 1.0); */ /* #FA812F */ background-color: rgba(101,179,227,0.55); /* width: 100vw; */ /* Clear fix code: START content: ""; clear: both; display: table; Clear fix avoids overflow problem when image bigger than text area Source: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix2 Clear fix code: END */ } #contentLinksTitle { position: relative; display: block; margin: 0; padding: 9vw 10vw 3vw 10vw; /* height: 19vw; */ /* margin: 0 5vw 0 5vw; */ /* width: inherit; */ /* inherit width from parent to avoid white margin to right */ /* z-index: 99; */ /* height: 44vw; */ /* z-index: 31; */ /* background-color: rgba(255, 102, 0, 1.0); */ /* #FA812F */ background-color: rgba(101,179,227,0.55); background-color: transparent; /* width: 100vw; */ /* Clear fix code: START content: ""; clear: both; display: table; Clear fix avoids overflow problem when image bigger than text area Source: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix2 Clear fix code: END */ } .contentCollapsibleReadMore { position: relative; height: 27vw; z-index: 999; } #containerBaseLine { position: relative; height: 0.11vw; /* caution when specifying height, eg 0.05 sometimes visible, sometimes note! */ z-index: 1; width: 100vw; margin-bottom: 0.5vw; background-color: grey; /* background-color: rgba(0,102,153,1.0); */ } #contentTOURTEXT { position: relative; text-align: left; width: 60vw; margin: 0 0 0 19vw; padding: 2vw 0 0 0; background-color: transparent; } #contentTOURVENUES { position: relative; text-align: left; width: 60vw; margin: 0 0 0 3vw; padding: 2vw 0 0 0; background-color: white; } #contentTOURVENUESindent { position: relative; text-align: left; width: 60vw; margin: 0 0 0 3vw; padding: 0 0 0 4vw; background-color: white; } #contentGalleryText { position: relative; text-align: left; width: 100vw; margin: 0 0 0 0; padding: 0 0 0 8vw; /* background-color: white; */ } #contentGalleryImages { margin: 0; padding: 10vw 0 10vw 0; background-color: rgba(101,179,227,0.66); } #contentPrivacyPolicy1, #contentTermsAndConditions1 { position: relative; display: block; /* width: 88vw; */ /* margin: 0 0 0 7vw; */ margin: 0; padding: 9vw 8vw 3vw 8vw; background-color: transparent; } #contentPrivacyPolicy2, #contentTermsAndConditions2 { position: relative; display: block; /* width: 88vw; */ /* margin: 0 0 0 7vw; */ margin: 0; padding: 3vw 8vw 3vw 8vw; background-color: white; } #contentBlog1 { position: relative; display: block; /* width: 88vw; */ /* margin: 0 0 0 7vw; */ margin: 0; padding: 0vw 8vw 3vw 8vw; background-color: transparent; } #contentSUPPORTTEXT1 { position: relative; display: block; /* width: 88vw; */ /* margin: 0 0 0 7vw; */ margin: 0; padding: 9vw 8vw 3vw 8vw; background-color: transparent; } #contentBlogText { position: relative; display: block; /* width: 88vw; */ /* margin: 0 0 0 7vw; */ margin: 0; padding: 0vw 8vw 3vw 8vw; background-color: transparent; } #contentSUPPORTTEXT2 { position: relative; display: block; /* height: 44vw; */ /* width: 88vw; */ /* margin: 0 0 0 7vw; */ margin: 0; padding: 10vw 8vw 10vw 8vw; padding: 0; background-color: transparent; } #contentTeamText1, #contentQuickGuide1 { position: relative; display: block; /* width: 88vw; */ /* margin: 0 0 0 7vw; */ margin: 0; padding: 9vw 8vw 3vw 8vw; background-color: transparent; } #contentTeamText2 { position: relative; /* display: block; */ /* width: 88vw; */ /* margin: 0 0 0 7vw; */ margin: 0; padding: 3vw 8vw 5vw 8vw; background-color: white; } #contentGalleryText1 { position: relative; display: block; /* width: 88vw; */ /* margin: 0 0 0 7vw; */ margin: 11vw 0vw 5vw 0vw; padding: 5vw 8vw 5vw 8vw; background-color: transparent; } #contentSUPPORTTEXT3 { position: relative; display: block; /* width: 88vw; */ /* margin: 0 0 0 7vw; */ /* padding: 3vw 0 0 0; */ padding: 33px 8vw 0vw 8vw; background-color: white; } #contentBlog3 { position: relative; /* height: 100vw; */ /* display: block; */ /* width: 88vw; */ /* margin: 0 0 0 7vw; */ /* padding: 3vw 0 0 0; */ /* min-height: 66vw; */ padding: 33px 8vw 0vw 8vw; background-color: white; } #contentPDF { position: relative; display: block; width: 100vw; height: 66vw; /* margin: 0 0 0 7vw; */ /* padding: 3vw 0 0 0; */ /* padding: 33px 8vw 0vw 8vw; */ background-color: white; } #contentTextHome{ position: relative; display: block; width: 100vw; margin: 0; padding: 0; text-align: left; background-color: transparent; } #textHome1 { position: relative; display: block; font-family: Quicksand; margin: 0vw 5vw 0vw 5vw; padding: 5vw 5vw 3vw 2vw; background-color: transparent; } #contentTextHome2 { position: relative; display: block; font-family: Quicksand; width: 100vw; background-color: transparent; } #contentGallery { position: relative; font-family: Quicksand; padding: 19vw 13vw 0 13vw; background-color: rgba(250,247,236,1.0); } #contentTextBlueBackground { position: relative; font-family: Quicksand; padding: 12vw 13vw 0 13vw; background-color: rgba(101,179,227,1.0); } #contentBOOKENDTEXT { position: relative; width: 93vw; margin: 0 0 0 3vw; padding: 0 0 0 0; background-color: transparent; } #contentBOOKENDTEXTTITLE { position: relative; width: 93vw; margin: 0 0 0 0; padding: 3vw 0 3vw 0; background-color: transparent; } #contentLINKSTEXT { position: relative; /* width: 100vw; */ margin: 0 0 0 0; padding: 0vw 8vw 10vw 8vw; background-color: rgba(101,179,227,0.0); } #containerTOUR_DATES { position: relative; display:block; width: 100vw; /* height: 222vw; */ padding-top: 7vw; /* z-index: 30; */ /* background-color: rgba(255, 255, 204, 1.0); background-color: transparent; */ /* START change opacity of background Reference Source: https://teamtreehouse.com/community/backgroundimage-opacity, see post by Thomas Yu on Jul 23, 2018 */ background-image: url("PUBLISHER%20FILES/ARTWORK/seaWaves.jpeg"); /* IMPORTANT - don't forget quote "" marks! */ background-size: contain; background-repeat: no-repeat; /* IMPORTANT - fixes incorrect rendering with Google Chrome on Android phone */ /* background-color: rgba(255, 255, 255, 0.55); */ /* background-blend-mode: lighten; */ /* background-position: center; */ /* background-size: 100% auto; */ /* configure background to fill full width of page with height set to auto */ /* END change opacity of background */ } #contentTIMESQUARE_SQUAREPAGE { position: relative; width: 100vw; height: 50vw; } #imageboxLEFTHOME, #imageboxLEFTHOME_TEXT { position: relative; display: inline-block; z-index: 1; width: 49vw; /* padding: 0 50vw 0 0; */ /* width: 100vw; */ /* float: left; */ } #imageboxLEFTHOME_TEXT_FIRST { position: absolute; z-index: 55; padding: 11vw 50vw 0 0; /* width: 100vw; */ /* float: left; */ } #imageboxRIGHTHOME, #imageboxRIGHTHOME_TEXT { position: relative; z-index: 1; padding: 0 0 0 50vw; } #contentTIMESQUARE { position: relative; width: auto; /* height: 75vw; */ /* background-color: rgba(51,51,51,0.65); */ /* background-color: rgba(255,255,153,1.0); */ } #imageboxLEFTHOME_TEXT_LINK99 { position: relative; z-index: 55; /* IMPORTANT: z-index needs to be set to appropriate value to ensure link remains active; in this case contents of imageboxLEFTHOME, including hyperlink, is hidden from display if z-index set to -1; contents, including hyperlink, is visible when z-index set to zero but renders link inactive; setting z-index to +1 renders both display visible and link active */ padding: 0 50vw 0 0; } #imageboxRIGHTHOME_TEXT_LINK99 { position: relative; display: inline-block; width: 49vw; z-index: 55; /* IMPORTANT: z-index needs to be set to appropriate value, in this case 3, to ensure link remains active; in this case contents of imageboxLEFTHOME, including hyperlink, is hidden from display if z-index set to -1; contents, including hyperlink, is visible when z-index set to zero but renders link inactive; setting z-index to +1 renders both display visible and link active */ /* padding: 0 0 0 50vw; */ } .teamTableImageBox { position: relative; width: 50%; background-color: violet; } .teamTable { border-collapse: collapse; /* note CSS default border spacing for table is 2px; hence collapse border to remove default spacing */ width: 100%; background-color: beige; } .teamHeadShotLEFT { position: relative; width: 33vw; display: inline-block; /* important: image in div is an inline element by default which includes space under the image or letter for descenders, eg the bottom part of the letter 'g' and so on! */ float: left; padding-right: 3vw; padding-left: 0vw; } .teamHeadShotRIGHT { width: 33vw; display: inline-block; /* important: image in div is an inline element by default which includes space under the image or letter for descenders, eg the bottom part of the letter 'g' and so on! */ float: right; padding-right: 5vw; padding-left: 3vw; } #ConstantAspectRatio { position: relative; width: 100%; padding-top: 0%; } #CONTACT_MAILBOX { position: relative; margin: 9vw 0 0 33vw; padding:0; } /* END: SECONDARY CONTAINERS */ /* START: IMAGE AND TEXT BOX SIZING */ .textCwhite2Rel { font-family: "Quicksand"; font-weight: 700; color: white; font-size: 19px; line-height: 25px; padding-right: 0vw; /* add padding-right to carousel text box; browser ignores container padding-right */ } .textCwhite3Rel { font-family: "Quicksand"; font-weight: 700; color: white; font-size: 22px; line-height: 25px; padding-right: 0vw; /* add padding-right to carousel text box; browser ignores container padding-right */ } .centreMenuIcon { margin: 3vw 0 0 42.5vw; position: absolute; display: block; width: 5vw; } .imageFullPageDESKTOPHOME { /* position: absolute; */ position: relative; display: block; padding-top: 7vw; width: 100vw; background-color: rgba(51,102,153,1.0); } .imageFullPageTitleW66vw { position: relative; display: block; width: 66vw; } .imageFullPage512 { position: relative; display: block; width: 100vw; } .imageTitleBackground { position: absolute; z-index: 99; display: block; padding-top: 7vw; width: 100vw; background-color: rgba(51,102,153,1.0); background-color: transparent; } .imageFullPageDESKTOPHOME_OVERLAY { position: relative; display: block; padding-top: 0vw; width: 100vw; } .imageFullPageDESKTOPHOME_OVERLAY2 { position: absolute; z-index: 109; display: block; padding-top: 7.5vw; width: 100vw; } .imageFullPageDESKTOPHOME_OVERLAY3 { position: absolute; z-index: 119; display: block; padding-top: 7.5vw; width: 100vw; } .imageWithTextDESKTOP { position: relative; display: block; padding-top: 0vw; width: 66vw; } .imageWithTextCentreDESKTOP { position: relative; margin: 0 auto 0 auto; display: block; padding-top: 0vw; width: 66vw; } .imageWithTextMOBILE, .imageWithTextCentreMOBILE { display: none; } .overlayTicketsMOBILE { display: none; } .overlayTicketsDESKTOP { position: absolute; margin: -9vw 0 0 41vw; /* IMPORTANT: specify margin not padding! */ z-index: 99; } .imagebookTicketsDESKTOP { width: 16vw; } .imagebookTicketsMOBILE { display: none; } .spacerDivDESKTOP { position: relative; height: 9vw; background-color: white; } .spacerDivDESKTOP2 { position: relative; height: 3vw; } .spacerDivMOBILE .spacerDivMOBILEX { display: none; } .tableTOUR_DATES { position: relative; z-index: 1; width: 84vw; margin: 0 0 0 0; padding: 0 3vw 0 3vw; font-size: 1vw; font-weight: 100; letter-spacing: 0vw; line-height: 1vw; color: white; background-color: rgba(204,204,204,1.0); } .tableSUPPORT_US { position: relative; z-index: 1; margin: 0 27vw 0 27vw; padding: 0 0 0 0; width: 77vw; font-size: 1vw; font-weight: 100; letter-spacing: 0vw; line-height: 1vw; color: black; } .pageDividerDesktop { position: absolute; z-index: 55; display: block; /*IMPORTANT: need to specify display: block to ensure display in Safari */ width: 9vw; /* margin: -5.5vw 0 0 44.5vw; */ margin: 0 0 0 45.5vw; padding: 0 0 0 0; } .pageDividerDesktop2 { position: absolute; z-index: 55; display: block; width: 9vw; margin: -1vw 0 0 45.5vw; padding: 0vw 0 0 0; } .pageDividerDesktop3 { position: absolute; z-index: 55; display: block; width: 9vw; margin: 5vw 0 0 45.5vw; padding: 0 0 0 0; } .pageDividerDesktop4 { position: absolute; z-index: 55; display: block; width: 9vw; margin: 0vw 0 0 45.5vw; padding: 0 0 0 0; } .pageDividerDesktop5 { position: absolute; z-index: 55; display: block; width: 9vw; margin: -8vw 0 0 45.5vw; padding: 0 0 0 0; } .pageDividerDesktop6 { position: absolute; z-index: 55; display: block; width: 9vw; margin: -3vw 0 0 45.5vw; padding: 0 0 0 0; } .pageDividerDesktopBio { position: absolute; z-index: 55; display: block; width: 9vw; margin: -8vw 0 0 29vw; padding: 0 0 0 0; } .pageDividerMobile, .pageDividerMobile2, .pageDividerMobileBio { display: none; } .tablePORTFOLIO_SUB_PAGE_LEFT { position: relative; z-index: 1; border-collapse:collapse; margin: 0vw 0 0 3vw; width: 45vw; font-size: 1vw; font-weight: 100; letter-spacing: 0vw; line-height: 1vw; color: white; } .tablePORTFOLIO_SUB_PAGE_RIGHT { position: relative; z-index: 1; border-collapse:collapse; margin: 0 0 0 3vw; width: 45vw; font-size: 1vw; font-weight: 100; letter-spacing: 0vw; line-height: 1vw; color: white; } .imageHalfSquarePageDESKTOP { position: relative; width: 50vw; height:50vw; padding: 0 0 0 0; } .imageHalfSquarePageMOBILE { display: none; } .imagePORTRAIT_MOBILE { display: none; } .imageHalfPageDESKTOP { position: relative; /* width: 44vw; */ padding: 0 0 0 0; } .imageHalfPageMOBILE,.imageHalfPageMOBILE_HEADER,.imageHalfPageMOBILE_HEADER_OVERLAY, .imageHalfPageMOBILE_HEADER_OVERLAY2 { display: none; } .imageIconEasyFundRaisingDESKTOP { margin: 2vw 0 0 23vw; padding: 0 0 0 0; width: 22vw; } .imageIconEasyFundRaisingMOBILE { display: none; } .imageCONTACT { position: relative; margin: 5vw 2vw 0 2vw; width: inherit; background-color: orange; } .twitterContact { width: 5vw; z-index: 99; } .facebookContact { width: 5vw; z-index: 99; } .instagramContact { width: 5vw; z-index: 99; } /* IMPORTANT! with ref to twitterICONheadmenu, facebookICONheadermenu and todosteatroICONheadermenu, adjust icons left or right in header via margin not padding to avoid overlapping of text menu element links ABOUT US, OUR TEAM and so on */ .todosteatroICONheadermenuNAVIGATION { position: absolute; margin: -2vw 0 0 0; width: 9vw; z-index: 99; } .todosteatroICONheadermenu { position: absolute; margin: 0 0 0 2vw; padding: 2vw 0 0 0; /* provides use with more readily accessible clickable area */ width: 9vw; z-index: 999; } .TTiconheaderDESKTOP { position: absolute; margin: 0 0 0 0; padding: 1vw 0 0 1vw; /* provides use with more readily accessible clickable area */ width: 9vw; z-index: 999; } .TTiconheaderMOBILE { display: none; } .twitterICONheadermenu { position: absolute; margin: 1.25vw 0 0 6vw; padding: 0 0 0 0; width: 2.5vw; /* z-index: 99; */ } .facebookICONheadermenu { position: absolute; margin: 1.25vw 0 0 9.5vw; padding: 0 0 0 0; width: 2.5vw; /* z-index: 99; */ } .iconBookend { position: absolute; margin: 2vw 0 0 1vw; padding: 0 0 0 0; width: 5vw; /* z-index: 99; */ } .instagramICONheadermenu { position: absolute; margin: 1.25vw 0 0 13vw; padding: 0 0 0 0; width: 2.5vw; /* z-index: 99; */ } .tableContact { margin: 15vw 0 0 6.5vw; font-family: Quicksand; } .chapterHeading { z-index: 5; position: absolute; margin: 0vw 0 0 3vw; font-family: Roboto; font-size: 4vw; letter-spacing:-0.3vw; font-weight: 400; /* color: rgba(255,204,51,1.0); */ /* color: rgba(0,102,153,1.0); */ color: black; } .chapterHeadingBackgroundDESKTOP { position: relative; width: 100vw; } .chapterHeadingBackgroundMOBILE { display: none; } #containerChapterHeading { position: relative; } .textBanner { position: relative; display: block; /*note margins never collapse on inline elements! */ z-index: 99; width: 44vw; margin: 15vw 0 0 13vw; padding-top: 3vw; padding-right: 5vw; font-family: 'Cabin Sketch'; font-weight: 500; color: white; } .textBanner3 { position: absolute; display: inline-block; /*note margins never collapse on inline elements! */ z-index: 99; width: 44vw; margin: 13vw 0 0 5vw; padding-top: 3vw; padding-right: 7vw; font-family: 'Cabin Sketch'; font-weight: 500; font-size: 8vw; color: rgba(255,233,62,1.0); text-shadow: 0.33vw 0vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBanner4 { position: absolute; display: inline-block; /*note margins never collapse on inline elements! */ z-index: 99; width: 44vw; margin: 13vw 0 0 5vw; padding-top: 3vw; padding-right: 7vw; font-family: 'Cabin Sketch'; font-weight: 500; font-size: 8vw; text-align: center; color: rgba(255,204,102,1.0); text-shadow: 0.33vw 0vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBanner2{ position: absolute; display: inline-block; /*note margins never collapse on inline elements! */ z-index: 99; width: 44vw; margin: 0 0 0 11vw; padding-top: 0; padding-right: 0; font-family: 'Cabin Sketch'; font-weight: 500; color: black; } .textBannerTitle { /* display: inline-block; */ /*note margins never collapse on inline elements! */ display: inline-block; /* z-index: 99; */ /* width: 100vw; */ font-family: 'Cabin Sketch'; font-weight: 700; font-size: 8vw; line-height: 9vw; color: rgba(255,233,62,1.0); background-color: transparent; text-shadow: 0.66vw 0.66vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ /* text-shadow: 0.33vw 0vw rgba(255,233,62,1.0); */ /* background-color: rgba(199,230,250,1.0); */ } .textBannerHome { display: inline-block; /*note margins never collapse on inline elements! */ z-index: 99; margin: 0 0 0 7vw; font-family: 'Quicksand'; font-family: "Cabin Sketch"; font-weight: 900; font-size: 3vw; line-height: 4vw; /* text-align: center; */ color: white; /* text-shadow: 0 0.3vw #000000; */ } .textBannerHome2 { display: inline-block; /*note margins never collapse on inline elements! */ z-index: 99; margin: 3vw 0 0 7vw; font-family: 'Quicksand'; font-family: "Cabin Sketch"; font-weight: 900; font-size: 3vw; line-height: 4vw; /* text-align: center; */ color: white; /* text-shadow: 0 0.3vw #000000; */ } #blankSpacer16 { height: 16vw; } .textShows { position: relative; display: block; /*note margins never collapse on inline elements! */ z-index: 99; /* width: 100vw; */ margin: 0 0 0 0; padding: 5vw 0 0 0; font-family: 'Cabin Sketch'; font-size: 3vw; font-weight: 500; line-height: 3vw; /* text-align: center; */ color: white; } .textShows2 { position: relative; display: block; /*note margins never collapse on inline elements! */ z-index: 99; /* width: 100vw; */ margin: 0; padding: 3vw 0 0 0; font-family: 'Cabin Sketch'; font-weight: 500; font-size: 3vw; line-height: 3vw; /* text-align: center; */ color: white; } .textTourDate { position: relative; display: block; /*note margins never collapse on inline elements! */ z-index: 99; /* width: 100vw; */ margin: 0 0 0 0; padding: 2vw 0 0 0; font-family: 'Cabin Sketch'; font-weight: 500; line-height: 3vw; text-align: left; color: white; } .textTeatrOnline { position: absolute; display: inline-block; /*note margins never collapse on inline elements! */ z-index: 99; width: 100vw; margin: 0 0 0 0; padding: 21vw 0 0 0; font-family: 'Cabin Sketch'; font-weight: 500; line-height: 3vw; text-align: center; color: rgba(102,116,128,1.00); } .textWorkshop { position: relative; display: block; /*note margins never collapse on inline elements! */ z-index: 99; /* width: 100vw; */ margin: 0 0 0 0; padding: 3vw 0 0 0; font-family: 'Cabin Sketch'; font-weight: 500; line-height: 3vw; /* text-align: center; */ color: white; } .textContact { position: absolute; display: inline-block; /*note margins never collapse on inline elements! */ z-index: 99; width: 50vw; margin: 0; padding-top: 11vw; padding-left: 7vw; font-family: 'Cabin Sketch'; font-weight: 500; text-align: left; color: rgba(102,116,128,1.00); } .textContact2 { position: absolute; display: inline-block; /*note margins never collapse on inline elements! */ z-index: 99; width: 50vw; margin: 0; /* padding-left: 7vw; */ font-family: 'Cabin Sketch'; font-weight: 500; text-align: left; color: rgba(102,116,128,1.00); } .imageFloatLeft { display: inline-block; z-index: 99; float: left; /* border: 1px solid white; */ /* padding: 16vw 5vw 5vw 0; */ padding: 2vw 2vw 2vw 0; } .image33Centre { display: block; z-index: 99; width: 33vw; align-content: center; } .image87Centre { display: block; z-index: 99; width: 87vw; margin: auto auto; } .image50FloatRight { display: inline-block; z-index: 99; width: 50vw; float: right; /* border: 1px solid white; */ /* padding: 16vw 5vw 5vw 0; */ padding: 0; } .image50FloatRightContact { display: inline-block; z-index: 99; width: 50vw; float: right; /* border: 1px solid white; */ /* padding: 16vw 5vw 5vw 0; */ padding-top: 25vw; } .image66FloatRight { display: inline-block; z-index: 99; width: 66vw; float: right; /* border: 1px solid white; */ /* padding: 16vw 5vw 5vw 0; */ padding-left: 2vw; } .image33FloatRight { display: inline-block; z-index: 99; width: 33vw; float: right; /* border: 1px solid white; */ /* padding: 16vw 5vw 5vw 0; */ /* width: 50vw; */ padding: 0; } .image33FloatLeft { display: inline-block; z-index: 99; width: 33vw; float: left; /* border: 1px solid white; */ /* padding: 16vw 5vw 5vw 0; */ /* width: 50vw; */ padding: 0; } .contactHeader { position: relative; /* width: inherit; */ /* inherit width from parent to avoid white margin to right */ z-index: 99; font-family: Cabin Sketch; color: rgba(255,204,102,1.0); padding: 15vw 0 0 7vw; /* z-index: 31; */ /* background-color: transparent; */ /* background-color: rgba(255, 102, 0, 1.0); */ /* #FA812F */ width: 100%; /* Clear fix code: START */ /* content: ""; clear: both; display: table; */ /* Clear fix avoids overflow problem when image bigger than text area */ /* Source: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix2 */ /* Clear fix code: END */ } .contactCol1 { display: inline-block; width: 30vw; font-family: Quicksand; color: white; padding-left: 7vw; /* vertical-align: text-top; */ } .contactCol2 { display: inline-block; width: 33vw; color: white; padding: 0; } .contactCol3 { display: inline-block; width: 30vw; font-family: Quicksand; color: white; padding: 0; } /* END: IMAGE AND TEXT BOX SIZING */ /* START: TEXT AND HYPERLINK STYLING */ .titleTextFrijole { margin: 0; padding-top: 12vw; font-family: 'Frijole', cursive; text-align: center; font-size: 4vw; line-height: 2; letter-spacing: -0.3vw; width: 100vw; color: white; background-color: rgba(51,102,153,1.0); } .titleTextTitilliumWeb { /* Extra-Light Extra-Light Italic Light Light Italic Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Black */ margin: 0; padding: 1vw 0 1vw 0; font-family: 'Titillium Web', sans-serif; text-align: center; font-size: 6vw; font-weight: 900; line-height: 1; letter-spacing: 0vw; width: 100vw; color: rgba(255,204,102,1.0); background-color: rgba(51,102,153,1.0); } .titleTextTitilliumWeb2 { /* Extra-Light Extra-Light Italic Light Light Italic Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Black */ margin: 0; padding: 2vw 0 0 0; font-family: 'Titillium Web', sans-serif; text-align: center; font-size: 3vw; font-weight: 700; line-height: 1; letter-spacing: 0.6vw; width: 100vw; color: white; background-color: rgba(51,102,153,1.0); } .titleTextTitilliumWeb3 { /* Extra-Light Extra-Light Italic Light Light Italic Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Black */ margin: 0; padding: 1vw 0 1vw 0; font-family: 'Titillium Web', sans-serif; text-align: center; font-size: 2vw; line-height: 1.3; letter-spacing: 0.6vw; width: 100vw; color: white; background-color: rgba(51,102,153,1.0); } .titleTextTitilliumWeb4 { /* Extra-Light Extra-Light Italic Light Light Italic Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Black */ margin: 0; padding: 0 0 0 0; font-family: 'Titillium Web', sans-serif; text-align: center; font-size: 2.5vw; font-weight: 700; line-height: 1.3; letter-spacing: 0.6vw; width: 100vw; color: rgba(255,204,102,1.0); background-color: rgba(51,102,153,1.0); } .titleTextTitilliumWeb5 { /* Extra-Light Extra-Light Italic Light Light Italic Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Black */ margin: 0; padding: 0 0 5vw 0; font-family: 'Titillium Web', sans-serif; text-align: center; font-size: 6vw; font-weight: 900; line-height: 1; letter-spacing: 0vw; width: 100vw; color: rgba(255,204,102,1.0); background-color: rgba(51,102,153,1.0); } .titleTextTitilliumWeb5B { /* Extra-Light Extra-Light Italic Light Light Italic Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Black */ margin: 0; padding: 0 0 5vw 0; font-family: 'Titillium Web', sans-serif; text-align: center; font-size: 6vw; font-weight: 900; line-height: 1; letter-spacing: 0vw; width: 100vw; color: rgba(51,102,153,1.0); background-color: transparent; } .titleTextTitilliumWeb6 { /* Extra-Light Extra-Light Italic Light Light Italic Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Black */ margin: 0; padding: 12vw 0 0 0; font-family: 'Titillium Web', sans-serif; text-align: center; font-size: 3vw; font-weight: 700; line-height: 2; letter-spacing: 0.6vw; width: 100vw; color: white; background-color: rgba(51,102,153,1.0); } .titleTextTitilliumWeb7 { /* Extra-Light Extra-Light Italic Light Light Italic Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Black */ margin: 0; padding: 1vw 0 5vw 0; font-family: 'Titillium Web', sans-serif; text-align: center; font-size: 6vw; font-weight: 900; line-height: 1; letter-spacing: 0vw; width: 100vw; color: rgba(255,204,102,1.0); background-color: rgba(51,102,153,1.0); } .titleTextTitilliumWeb8 { /* Extra-Light Extra-Light Italic Light Light Italic Regular Regular Italic Semi-Bold Semi-Bold Italic Bold Bold Italic Black */ margin: 0; padding: 12vw 0 0 0; font-family: 'Titillium Web', sans-serif; text-align: center; font-size: 3vw; font-weight: 700; line-height: 1; letter-spacing: 0.6vw; width: 100vw; color: white; background-color: rgba(51,102,153,1.0); } .titleCaptionDESKTOP { z-index: 99; } .titleCaptionMOBILE { display: none; } .BoxOffice { position: relative; display: block; width: 100vw; margin: 0; padding: 0; text-decoration: none; text-align: center; color: rgba(255,204,102,1.0); background-color: brown; background-color: rgba(0,153,255,1.0); font-weight: 700; line-height: 9vw; } .titleTextTOUR_PAGE_TURTLES_white { position: relative; text-align: left; padding: 0 0 0 0; /* note use padding, not margin, to avoid display of unwanted black space */ font-size: 4vw; font-weight: 300; letter-spacing: -0.3vw; /* negative values decrease spacing */ line-height: 1; color: white; } .titleTextTOUR_PAGE_TURTLES_black { position: relative; font-family: Roboto; text-align: center; padding: 0 0 0 0; /* note use padding, not margin, to avoid display of unwanted black space */ font-size: 4vw; letter-spacing: -0.25vw; /* negative values decrease spacing */ font-weight: 800; line-height: 1; color: black; } .titleTextCENTRE_black { position: relative; text-align: center; padding: 0 0 0 0; /* note use padding, not margin, to avoid display of unwanted black space */ font-size: 4vw; font-weight: 600; letter-spacing: -0.3vw; /* negative values decrease spacing */ font-size: 4vw; font-weight: 500; letter-spacing: -0.3vw; /* negative values decrease spacing */ line-height: 1; color: black; font-family: Roboto; } .titleTextCENTRE_black2 { position: relative; text-align: center; padding: 0 0 0 0; /* note use padding, not margin, to avoid display of unwanted black space */ font-size: 4vw; font-weight: 600; letter-spacing: -0.3vw; /* negative values decrease spacing */ font-size: 4vw; font-weight: 500; letter-spacing: -0.3vw; /* negative values decrease spacing */ font-family: Roboto; line-height: 1; color: black; } .titleTextTOUR_PAGE_TURTLES_blue { position: relative; text-align: center; padding: 0 0 0 0; /* note use padding, not margin, to avoid display of unwanted black space */ font-size: 4vw; font-weight: 600; letter-spacing: -0.3vw; /* negative values decrease spacing */ line-height: 1; color: rgba(51,102,204,1.0); } .LinksTitle { position: relative; text-align: center; padding: 2vw 0 0 0; /* note use padding, not margin, to avoid display of unwanted black space */ font-size: 4vw; font-weight: 300; letter-spacing: -0.3vw; /* negative values decrease spacing */ line-height: 1; font-family: Roboto; color: black; } .textCwhite { /* font-size: 2.2vw;*/ font-size: 19px; /* line-height: 2.9vw; */ line-height: 25px; font-weight: 700; color: white; } .textCwhiteCarousel { /* font-size: 2.2vw;*/ font-size: 19px; /* line-height: 2.9vw; */ line-height: 25px; font-weight: 100; color: white; padding: 5vw; } .textCRavenCarousel { font-size: 16px; /* line-height: 2.9vw; */ line-height: 25px; font-weight: 100; color: rgba(102,116,128,1.0); padding: 5vw; } .textCRaven { /* font-size: 2.2vw;*/ /* font-size: 17px; */ font-size: 16px; line-height: 25px; font-weight: 100; color: rgba(102,116,128,1.0); /* padding-right: 3vw; */ } .textCRavenList { /* font-size: 2.2vw;*/ /* font-size: 17px; */ font-size: 16px; line-height: 25px; font-weight: 100; padding-left: 2vw; color: rgba(102,116,128,1.0); /* padding-right: 3vw; */ } .textCRavenHeading { /* font-size: 2.2vw;*/ /* font-size: 17px; */ /* font-size: 16px; */ /* line-height: 25px; */ /* font-weight: 100; */ font-family: Quicksand; color: rgba(102,116,128,1.0); /* padding-right: 3vw; */ } .textCRavenList { /* font-size: 2.2vw;*/ /* font-size: 17px; */ list-style-type: none; font-size: 16px; line-height: 25px; font-weight: 100; color: rgba(102,116,128,1.0); /* padding-right: 3vw; */ } .textCRavenChevron { /* font-size: 2.2vw;*/ /* font-size: 17px; */ font-size: 16px; line-height: 25px; font-weight: 100; color: rgba(102,116,128,1.0); vertical-align: bottom; font-stretch: condensed; /* padding-right: 3vw; */ } .textCRavenSienna700 { /* font-size: 2.2vw;*/ /* font-size: 17px; */ font-size: 16px; line-height: 32px; /* provides aesthetic spacing below text */ font-weight: 100; color: sienna; padding-right: 3vw; } .textCtitle { font-size: 3vw; line-height: 3vw; font-weight: 100; color: white; } .textCblack2 { font-size: 16px; line-height: 25px; font-weight: 100; color: black; font-family: Quicksand; } .textCblackTitle { font-size: 3.3vw; line-height: 4vw; font-weight: bold; color: black; font-family: Quicksand; } .textCblackTitle2 { font-size: 22px; line-height: 25px; font-weight: 700; color: black; font-family: Quicksand; } .textCblack2indent { margin: 0 0 0 5vw; font-size: 2.2vw; line-height: 2.9vw; font-weight: 100; color: black; font-family: Inconsolata; } .textCblack700 { /* font-size: 2.2vw;*/ font-size: 17px; /* line-height: 2.9vw; */ line-height: 25px; /* font-weight: 1; */ color: black; font-family: Quicksand; font-weight: 700; } .textCwhite700 { /* font-size: 2.2vw;*/ /* font-size: 22px; */ font-size: 19px; /* line-height: 2.9vw; */ /* line-height: 25px;*/ line-height: 25px; /* font-weight: 1; */ color: white; font-family: Quicksand; font-weight: 700; } .textCRaven700 { /* font-size: 2.2vw;*/ font-size: 17px; /* line-height: 2.9vw; */ line-height: 25px; /* font-weight: 1; */ color: rgba(102,116,128,1.0); font-family: Quicksand; font-weight: 700; } .textCRaven100 { /* font-size: 2.2vw;*/ font-size: 17px; /* line-height: 2.9vw; */ line-height: 25px; /* font-weight: 1; */ color: rgba(102,116,128,1.0); font-family: Quicksand; font-weight: 100; } .textCwhite700Rel2 { /* font-size: 2.2vw;*/ font-size: 4.5vw; /* line-height: 2.9vw; */ line-height: 5vw; /* font-weight: 1; */ color: white; font-family: Quicksand; font-weight: 700; } .textCRaven700Rel { /* font-size: 2.2vw;*/ font-size: 2.5vw; /* line-height: 2.9vw; */ line-height: 3vw; /* font-weight: 1; */ color: rgba(102,116,128,1.0); font-family: Quicksand; font-weight: 700; } .textCtitle700 { font-size: 3vw; line-height: 3vw; padding-top: 27vw; /* font-weight: 1; */ color: white; font-family: Quicksand; font-weight: 700; } .textCblue700 { /* font-size: 2.2vw;*/ font-size: 22px; /* line-height: 2.9vw; */ line-height: 25px; /* font-weight: 1; */ color: rgba(101,179,227,1.0); font-family: Quicksand; font-weight: 700; } .textCblack { /* font-size: 2.2vw;*/ font-size: 16px; /* line-height: 2.9vw; */ line-height: 25px; /* font-weight: 1; */ color: black; font-family: Quicksand; } .textCblackReviews { /* font-size: 2.2vw;*/ font-size: 17px; /* line-height: 2.9vw; */ line-height: 25px; /* font-weight: 1; */ text-align: center; color: black; font-family: Quicksand; } .textCwhiteReviews { /* font-size: 2.2vw;*/ font-size: 17px; /* line-height: 2.9vw; */ line-height: 25px; /* font-weight: 1; */ text-align: center; color: white; font-family: Quicksand; } .textCRavenReviews { /* font-size: 2.2vw;*/ font-size: 17px; /* line-height: 2.9vw; */ line-height: 25px; /* font-weight: 1; */ text-align: center; color: white; color: rgba(102,116,128,1.0); font-family: Quicksand; } .tableCblack { /* font-size: 2.2vw;*/ font-size: 17px; /* line-height: 2.9vw; */ line-height: 25px; /* font-weight: 1; */ color: black; font-family: Quicksand; border: 1px solid black; padding: 2vw; } .textCblackBG { text-decoration: none; margin: 0 19vw 0 0; padding: 1vw 1vw 1vw 1vw; font-size: 2.2vw; line-height: 6vw; font-weight: 1; color: white; background-color: brown; /* font-family: Roboto; */ } .textCblackcentre { font-size: 2.2vw; line-height: 2.9vw; font-weight: 100; text-align:center; color: black; } .textCblackcentre2 { font-size: 2.2vw; line-height: 2.9vw; font-weight: 700; text-align:center; color: black; font-family: Quicksand; } .textCwhitecentre2 { font-size: 2.2vw; line-height: 2.9vw; font-weight: 700; text-align:center; color: white; font-family: Quicksand; } .pictureTextDESKTOP { margin: 0; padding: 3vw 0 3vw 0vw; font-size: 3vw; line-height: 5vw; font-weight: 100; text-align:center; color: white; background-color: rgba(51,102,153,1.0); font-family: Inconsolata; } .pictureTextMOBILE { display: none; } .textCblue { font-size: 2.2vw; text-align: center; line-height: 2.9vw; font-weight: 400; color: rgba(51,102,204,1.0); } .titleTextORANGE_ABOUT { position: relative; /* z-index: 102; */ text-align: left; padding: 5vw 0 0 3vw; /* note use padding, not margin, to avoid display of unwanted black space */ font-size: 4vw; font-weight: 400; letter-spacing: -0.3vw; /* negative values decrease spacing */ color: rgba(0, 51, 51, 1.0); font-family: Roboto; } .titleTextORANGE_TEAM { position: relative; /* z-index: 102; */ text-align: left; padding: 11vw 0 0 3vw; /* note use padding, not margin, to avoid display of unwanted black space */ font-size: 4vw; font-weight: 400; letter-spacing: -0.3vw; /* negative values decrease spacing */ color: rgba(0, 51, 51, 1.0); font-family: Roboto; } .titleTextORANGE_WORKSHOP { position: relative; /* z-index: 102; */ text-align: left; padding: 11vw 0 0 3vw; /* note use padding, not margin, to avoid display of unwanted black space */ font-size: 4vw; font-weight: 400; letter-spacing: -0.3vw; /* negative values decrease spacing */ color: rgba(0, 51, 51, 1.0); font-family: Roboto; } a.navYELLOW:link { text-decoration: none; font-family: Quicksand; color: yellow; font-weight: 100; display: inline; } a.navYELLOW:visited { color: yellow; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navYELLOW:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,153,0,1.0); } a.navYELLOW:active { color: yellow; display: inline; /*is this necessary? */ } a.navBLACK:link { text-decoration: none; font-family: Quicksand; color: sienna; font-weight: 100; display: inline; } a.navBLACK:visited { color: sienna; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navBLACK:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,153,0,1.0); } a.navBLACK:active { display: inline; /*is this necessary? */ } a.navBLACK700:link { text-decoration: none; font-family: Quicksand; color: sienna; font-weight: 100; display: inline; } a.navBLACK700:visited { color: sienna; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navBLACK700:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,153,0,1.0); } a.navBLACK700:active { display: inline; /*is this necessary? */ } a.navBLACK1:link { text-decoration: none; font-family: Quicksand; color: white; font-weight: 700; display: inline; } a.navBLACK1:visited { color: white; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navBLACK1:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,153,0,1.0); } a.navBLACK1:active { display: inline; /*is this necessary? */ } a.navRaven:link { text-decoration: none; font-size: 2.5vw; font-family: Quicksand; color: rgba(102,116,128,1.0); display: inline; } a.navRaven:visited { color: rgba(102,116,128,1.0); /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navRaven:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,233,62,1.00); } a.navRaven:active { color: white; display: inline; /*is this necessary? */ } /* styling of 'a' is rendered inert if placed at end of style sheet */ /* IMPORTANT: specify link styling in order LINK - VISITED - HOVER - ACTIVE */ a.nav:link { text-decoration: none; color: brown; display: inline; } a.nav:visited { color: brown; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.nav:hover { /* color: rgba(0,255,255,1.0); */ color: orange; } a.nav:active { color: brown; display: inline; /*is this necessary? */ } .listCblack { font-size: 2.3vw; line-height: 3.3vw; font-weight: 100; color: black; list-style-type: none; text-decoration: none; } .listCblack { font-size: 2.3vw; line-height: 3.3vw; font-weight: 100; color: white; list-style-type: none; text-decoration: none; } .listCwhite { text-align: center; font-size: 2.3vw; line-height: 3.3vw; font-weight: 100; color: white; list-style-type: none; text-decoration: none; } .listCblackLINKS { margin: 0 0 0 0; /* font-size: 2.3vw; */ /* line-height: 4.3vw; */ font-weight: 100; color: black; list-style-type: none; text-decoration: none; text-align: center; line-height: 25px; /* important, specify line height here not in .navWhite2L */ } .listClightblue { font-size: 2.3vw; line-height: 3.0vw; font-weight: 100; color: lightblue; list-style-type: none; } a.navBLUE:link { text-decoration: none; color: rgba(0,255,255,1.0); display: inline; } a.navBLUE:visited { color: rgba(0,255,255,1.0); /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navBLUE:hover { color: grey; } a.navBLUE:active { color: rgba(0,255,255,1.0); display: inline; /*is this necessary? */ } .menutitleandcancelLEFT { position: relative; display: inline-block; margin: 0.5vw 0 0 1vw; /* IMPORTANT: specify margin, not padding, to avoid clickable area overlap problem */ padding: 1vw 1vw 1vw 5vw; width: 11vw; /* width: 44vw; text-align: left; font-size: 2vw; */ } .menutitleandcancelRIGHT { position: relative; display: inline-block; margin: 0.5vw 0 0 1vw; /* IMPORTANT: specify margin, not padding, to avoid clickable area overlap problem */ padding: 3vw 8vw 1vw 1vw; float: right; width: 11vw; /* width: 44vw; */ text-align: right; font-size: 2vw; } /* START: header menu styling */ a.navMenu1:link { text-decoration: none; /* color: rgba(255,255,255,1.0); */ color: black; display: inline; } a.navMenu1:visited { /* color: rgba(255,255,255,1.0); */ /* important not to leave blank but to set this value to avoid problem with MS Edge */ color: black; display: inline; } a.navMenu1:hover { color: rgba(0,255,255,1.0); } a.navMenu1:active { /* color: rgba(0,255,255,1.0); */ color: black; display: inline; /*is this necessary? */ } a.navMenu2:link { margin: 0 0 0 17vw; /* IMPORTANT: specify margin, not padding, to avoid clickable area overlap problem */ text-decoration: none; /* color: rgba(255,255,255,1.0); */ color: black; display: inline; } a.navMenu2:visited { /* color: rgba(255,255,255,1.0); *//* important not to leave blank but to set this value to avoid problem with MS Edge */ color: black; display: inline; } a.navMenu2:hover { color: rgba(0,255,255,1.0); * } a.navMenu2:active { /* color: rgba(0,255,255,1.0); */ color: black; display: inline; /*is this necessary? */ } a.navMenu3:link { position: absolute; /* must set position to 'fixed' in order to use margin and/or padding in vertical dimension */ margin: 1.75vw 0 0 91vw; text-decoration: none; color: rgba(102,102,102,1.0); display: inline; font-size: 4.5vw; } a.navMenu3:visited { color: rgba(102,102,102,1.0); display: inline; } a.navMenu3:hover { color: lightgrey; } a.navMenu3:active { color: rgba(102,102,102,1.0); display: inline; /*is this necessary? */ } a.navMenu4:link { text-decoration: none; color: black; display: inline; } a.navMenu4:visited { /* color: rgba(255,255,255,1.0); */ /* important not to leave blank but to set this value to avoid problem with MS Edge */ color: black; display: inline; } a.navMenu4:hover { color: rgba(0,255,255,1.0); } a.navMenu4:active { /* color: rgba(0,255,255,1.0); */ color: black; display: inline; /*is this necessary? */ } a.navMenu5:link { text-decoration: none; /* color: rgba(255,255,255,1.0); */ color: black; display: inline; } a.navMenu5:visited { /* color: rgba(255,255,255,1.0); */ /* important not to leave blank but to set this value to avoid problem with MS Edge */ color: black; display: inline; } a.navMenu5:hover { color: rgba(0,255,255,1.0); } a.navMenu5:active { /* color: rgba(0,255,255,1.0); */ color: black; display: inline; /*is this necessary? */ } /* END: header menu styling */ .TwitterIconTourPageMOBILE { display: none; } .FacebookIconTourPageMOBILE { display: none; } .InstagramIconTourPageMOBILE { display: none; } .containerHeader { position: relative; text-align: center; padding: 0 0 0 0; /* note use padding, not margin, to avoid display of unwanted black space */ font-size: 4vw; font-weight: 300; letter-spacing: -0.3vw; /* negative values decrease spacing */ line-height: 1; color: black; font-family: Roboto; } /* END: TEXT AND HYPERLINK STYLING */ #blogFrame { display: block; padding-top: 11%; } /* START: RESPONSIVE VIDEO CODE SNIPPET https://speedboostr.com/how-to-embed-responsive-videos/ */ /* -- Responsive video embed -- */ .responsive-video { /* padding-bottom: 56.25%; */ /* for 16:9 ratio */ /* padding-top: 25px; */ position: relative; height: 0; display: block; width: 33vw; } .responsive-video iframe, .responsive-video object, .responsive-video embed { /* position: absolute; */ top: 0; left: 0; display: block; width: 33vw; /* width: 99.5%; */ /* height: 99.5%; */ } /* END: RESPONSIVE VIDEO CODE SNIPPET https://speedboostr.com/how-to-embed-responsive-videos/ */ /* START: STYLING FOR MAIL ADDRESS COPY TO CLIPBOARD */ .copyStyle { position: relative; /* need to explicitly specify position to enable z-index */ width: 27vw; /* margin-top: -6vw; */ /* margin-left: 7vw; */ font-family: Quicksand; font-size: 19px; line-height: 25px; font-weight: 700; z-index= -111; color: rgba(102,116,128,1.00); } .copyStyle:hover { } .copyStyle2 { position: relative; text-decoration: none; font-family: Quicksand; font-size: 19px; line-height: 25px; font-weight: 100; color: sienna; } .copyStyle2:hover { color: orange; } .contactLEFT { height: 33vw; margin: 0 0 0 0; position: relative; width: 25vw; } .contactCENTRE { position: absolute; margin: 0 0 0 25vw; display: block; } .mailStyle { font-size: 5vw; line-height: 6vw; font-weight: 100; color: black; margin: 0; padding: 5vw 0 0 0; } .contactRIGHT { position: absolute; margin: 0 0 0 63vw; width: 25vw; display: block; } input[type=text] { position: relative; z-index: -222; /* prevent text being selected and, hence, prevent appearance of select and DONE message on iOS devices */ text-decoration: none; /* font-size: 2.5vw; */ color: transparent; user-select: none; /* start: disable text selection highlighting */ /* note that main problem with undesirable text highlighting was Safari but other browsers added for good measure */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer */ -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */ -webkit-user-select: none; /* Chrome, Safari, and Opera */ -webkit-touch-callout: none; /* Disable Android and iOS callouts*/ /* end: disable text selection highlighting */ } .inputMailAddress { position: relative; height: 1vw; /* specify minimum height value to close gap between 'Mail & Enquiries' display: block; */ margin-top: -2vw; margin-left: -77vw; } .mailConnect { width: 100vw; } /* END: STYLING FOR MAIL ADDRESS COPY TO CLIPBOARD */ /* START: READ MORE STYLING */ .collapsible { cursor: pointer; font-size: 17px; line-height: 25px; font-weight: 700; color: sienna; font-family: Quicksand; } .active, .collapsible:hover { color: orange; } .contentExtraText { display: none; overflow: hidden; } /* END: READ MORE STYLING */ .imageFloatRightPortrait { display: inline-block; z-index: 99; float: right; width: 50vw; /* border: 1px solid white; */ /* padding: 16vw 5vw 5vw 0; */ padding-left: 3vw; padding-bottom: 1vw; } .textCLightBlue100 { font-size: 16px; font-family: "Quicksand"; /* line-height: 18px; */ font-weight: 100; color: rgba(199,230,250,1.0); } .textCLightBlue700 { font-size: 19px; font-family: "Quicksand"; line-height: 25px; font-weight: 700; padding-top: 1vw; color: rgba(199,230,250,1.0); } .textCMediumBlue100 { font-size: 19px; font-family: "Quicksand"; line-height: 25px; font-weight: 100; padding-top: 1vw; color: rgba(101,179,227,1.0); } .textCMediumBlue700 { font-size: 19px; font-family: "Quicksand"; line-height: 25px; font-weight: 100; padding-top: 1vw; color: rgba(101,179,227,1.0); } .textBannerPortrait, .textBannerShowsPortrait { position: relative; display: block; /*note margins never collapse on inline elements! */ width: 100vw; z-index: 99; /* width: 100vw; */ font-family: 'Cabin Sketch'; font-weight: 700; /* font-size: 8vw; */ /* line-height: 6vw; */ font-size: 6vw; line-height: 6vw; color: rgba(255,233,62,1.0); text-shadow: 0.22vw 0.22vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerLinksPortrait { /* display: inline-block; */ /*note margins never collapse on inline elements! */ display: block; font-family: 'Cabin Sketch'; font-weight: 700; font-size: 6vw; line-height: 6vw; text-align: center; color: rgba(255,233,62,1.0); text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ /* text-shadow: 0.33vw 0vw rgba(255,233,62,1.0); */ } .textBannerLinksLandscape { display: none; } .textBannerLandscape, .textBannerShowsLandscape { display: none; } .textBannerWorkshop, .textBannerOnline, .textBannerContact, .textBannerAbout { position: absolute; display: block; /*note margins never collapse on inline elements! */ width: 100vw; z-index: 99; /* width: 100vw; */ margin: 0 0 0 0vw; padding: 5vw 0 0 0; font-family: 'Cabin Sketch'; font-weight: 700; /* font-size: 8vw; */ /* line-height: 6vw; */ font-size: 6vw; line-height: 6vw; color: rgba(255,233,62,1.0); text-shadow: 0.55vw 0.55vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTourDatePortrait { position: absolute; display: block; /*note margins never collapse on inline elements! */ width: 100vw; z-index: 99; /* width: 100vw; */ margin: 0 0 0 0vw; padding: 5vw 0 0 0; font-family: 'Cabin Sketch'; font-weight: 700; /* font-size: 8vw; */ /* line-height: 6vw; */ font-size: 6vw; line-height: 6vw; color: rgba(255,233,62,1.0); text-shadow: 0.55vw 0.55vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTourDateLandscape { display: none; } .textBannerTeatrONLINE { position: relative; display: block; /*note margins never collapse on inline elements! */ z-index: 99; width: 100vw; margin: 0; padding-top: 33vw; padding-left: 0; font-family: 'Cabin Sketch'; font-weight: 700; /* font-size: 8vw; */ /* line-height: 6vw; */ font-size: 6vw; line-height: 6vw; text-align: left; color: rgba(255,233,62,1.0); text-shadow: 0.55vw 0.55vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } #placardYouTube { /* define clickable area */ position: absolute; display: block; z-index: 333; width: 55vw; height: 18vw; margin: 73vw 0 0 36vw; background-color: transparent; /* background-color: red; */ } #contentteatrONLINE1, #contentContact1, #contentAbout1, #contentTourDates1 { position: relative; line-height: 0vw; /* IMPORTANT - this removes unwanted space between div carouselThree and the lower div carouselThreeBase */ height: 41vw; /* note, image div within the above divs appear to be able to overlap beynd the base of the height, eg overalapping div contentteatrONLINE3; this is the effect that I want but why is the image div not curtailed by the height 41vw? */ font-family: Quicksand; margin: 0; padding: 7vw 8vw 0vw 8vw; background-color: rgba(101,179,227,0.0); } #contentShows1, #contentWorkshop1 { position: relative; line-height: 0vw; /* IMPORTANT - this removes unwanted space between div carouselThree and the lower div carouselThreeBase */ height: 41vw; font-family: Quicksand; margin: 0; padding: 7vw 8vw 0vw 8vw; background-color: rgba(101,179,227,0.0); } #contentShows1A,#contentWorkshop1A { position: relative; z-index: 99; line-height: 0vw; /* IMPORTANT - this removes unwanted space between div carouselThree and the lower div carouselThreeBase */ /* height: 3vw; */ font-family: Quicksand; margin: 0vw 8vw 0vw 8vw; background-color: rgba(101,179,227,0.0); } #contentShows2, #contentWorkshop2, #contentContact2, #contentAbout2, #contentTourDates2 { position: relative; line-height: 0vw; margin-top: 0vw; padding: 13vw 8vw 33px 8vw; /*note, set padding top in vw units to maintain relative space between main text and image banner above */ background-color: white; } .textBannerSupportUs, .textBannerTeam, .textBannerQuickGuide, .textBannerBlog { position: relative; display: block; /*note margins never collapse on inline elements! */ z-index: 99; /* width: 100vw; */ margin: 0 0 0 0; /* padding-top: 7vw; */ /* padding-left: 5vw; */ font-family: 'Cabin Sketch'; font-weight: 700; font-size: 6vw; line-height: 6vw; text-align: left; color: rgba(255,233,62,1.0); text-shadow: 0.55vw 0.55vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } #socialMediaLandscape { display: none; } .pageTitleBanner { position: relative; display: inline-block; padding-bottom: 3vw; /* height:22vw;*/ } .pageImageBanner { position: relative; display: inline-block; } #videoPlay { position: absolute; display: block; float: none; width: 100vw; z-index: 101; text-decoration: none; margin: auto; } .imagePlacardTextHomePortrait { position: absolute; display: block; /* important to specify display: block to avoid gap at bottom of image */ width: 48vw; /* width: 100%; */ /* specify width as % of parent container width */ /* height: 286px; */ z-index: 99; margin-left: 40vw; /* padding-top: 77vw; */ padding-top: 75vw; padding-bottom: 0vw; } .imageNavigation { position: absolute; display: block; /* important to specify display: block to avoid gap at bottom of image */ width: 100vw; /* width: 100%; */ /* specify width as % of parent container width */ /* height: 286px; */ z-index: -99; margin-left: 0vw; padding-top: 0vw; padding-bottom: 0vw; } #posterBox { position: relative; width: 100%; } /* ******** START - RESPONSIVE STYLING ********* */ /* ********* PORTRAIT STYLING ********* */ @media screen and (orientation: portrait) { .bookEndCopyrightLandscape { display: none; } .bookEndCopyrightPortrait { font-size: 16px; font-family: "Quicksand"; /* line-height: 18px; */ font-weight: 100; color: rgba(199,230,250,1.0); margin-left: 0vw; margin-top: 1vw; } #whiteSpaceHome { } #videoPlayLandscape { display: none; } #contentHome2Portrait { position: relative; /* width: 81vw; */ display: block; margin: 0 0 0 0; padding: 22px 8vw 33px 8vw; background-color: rgba(0,153,204,0.66); } #contentHome2 { position: relative; /* width: 81vw; */ display: block; margin: 0 0 0 0; padding: 22px 8vw 33px 8vw; background-color: rgba(0,153,204,1.0); } #contentShows3, #contentWorkshop3 { position: relative; display: block; font-family: Quicksand; margin-top: 0vw; /* overlap by tucking under div content1A */ padding: 0vw 8vw 5vw 8vw; background-color: white; } #topCarouselThree { position: relative; display: inline-block; z-index: 99; width: 70vw; margin-top: 8vw; padding: 33px 7vw 11px 7vw; background-color: rgba(0,153,204,1.0); /* border: 1px solid rgba(101,179,227,1.0); */ /* border width, border style, border colour */ } #carouselThree { position: relative; display: inline-block; width: 70vw; z-index: 99; /* IMPORTANT - raises div carouselThree above div contentShows3 which has negative margin to slide up and under div carouselThree */ margin-top: 22px; margin-bottom: 0px; padding: 22px 7vw 22px 7vw; background-color: rgba(0,153,204,1.0); /* border: 1px solid rgba(101,179,227,1.0); */ /* border width, border style, border colour */ } #baseCarouselThree { position: relative; display: block; line-height: 0vw; z-index: 99; font-size: 0vw; /* to collapse space between #carouselThree and div baseCarouselThree */ width: 70vw; margin: 0; padding: 11px 7vw 33px 7vw; word-wrap: normal; background-color: rgba(0,153,204,1.0); /* border: 1px solid rgba(101,179,227,1.0); */ /* border width, border style, border colour */ } .textNavigation { z-index: 49; margin: 0 0 0 0; /* take care setting TOP margin to avoid interference with other divs; incorrect setting can render top navigation link inoperable and unresponsive to hover */ text-align: center; list-style-type: none; padding-top: 12vw; /* padding to avoid interference with separate home and cancel icons at top either side */ } a.linktext:link { display: block; text-decoration: none; font-family: Quicksand; color: white; font-size: 5vw; line-height: 8vw; font-weight: 100; text-shadow: 0.3vw 0.3vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } a.linktext:visited { color: white; /* important not to leave blank but to set this value to avoid problem with MS Edge */ } a.linktext:hover { color: rgba(255,153,0,1.0); } a.linktext:active { } /* START: TODOS TEATRO full screen header main menu styling */ a.navMenu11FSN:link { position: absolute; text-decoration: none; color: rgba(255,233,62,1.0); text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ display: inline-block; font-family: 'Cabin Sketch'; font-size: 4vw; font-weight: 700; line-height: 3.6vw; background-color: transparent; } a.navMenu11FSN:visited { color: rgba(255,233,62,1.0); /* important not to leave blank but to set this value to avoid problem with MS Edge */ } a.navMenu11FSN:hover { color: rgba(255,233,62,1.0); color: orange; } a.navMenu11FSN:active { color: rgba(255,233,62,1.0); } /* END - TODOS TEATRO full screen header menu styling */ a.navMenu11:link { position: absolute; text-decoration: none; color: rgba(255,233,62,1.0); text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ padding: 1.5vw 0 0 1vw; display: inline-block; font-family: 'Cabin Sketch'; font-size: 3vw; font-weight: 700; line-height: 2.6vw; background-color: transparent; } a.navMenu11:visited { color: rgba(255,233,62,1.0); /* important not to leave blank but to set this value to avoid problem with MS Edge */ } a.navMenu11:hover { color: rgba(255,233,62,1.0); color: orange; } a.navMenu11:active { color: rgba(255,233,62,1.0); } /* padding-top: 2vw provides user with more readily accessible clickable area when selecting menu options */ a.linktextX:link { text-decoration: none; color: white; font-size: 6vw; line-height: 6vw; } a.linktextX:visited { color: white; /* important not to leave blank but to set this value to avoid problem with MS Edge */ } a.linktextX:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,153,0,1.0); /* background-color: white; */ } a.linktextX:active { color: rgba(0,0,0,1.0); } a.navMenu11White:link { position: absolute; margin: 0.5vw 0 0 3vw; /* IMPORTANT: specify margin, not padding, to avoid clickable area overlap problem */ padding: 1vw; text-decoration: none; color: white; text-shadow: 0.11vw 0.11vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ display: inline-block; font-family: 'Cabin Sketch'; font-size: 2.5vw; line-height: 2.5vw; background-color: transparent; } a.navMenu22:link { position: relative; margin: 0 0 0 14vw; /* IMPORTANT: specify margin, not padding, to avoid clickable area overlap problem */ padding-top: 2vw; text-decoration: none; /* color: rgba(255,255,255,1.0); */ font-family: 'Quicksand'; font-size: 3vw; font-weight: 700; color: white; display: inline-block; } a.navMenu22:visited { display: inline-block; color: white; } a.navMenu22:hover { color: orange; } a.navMenu22:active { display: inline-block; /*is this necessary? */ } a.navMenu33:link { position: relative; /* must set position to 'fixed' in order to use margin and/or padding in vertical dimension */ margin: 0 0 0 1.5vw; padding-top: 2vw; text-decoration: none; font-family: 'Quicksand'; font-weight: 700; font-size: 3vw; color: white; display: inline-block; /* font-size: 4.5vw; */ } a.navMenu33Plus:link { position: relative; /* must set position to 'fixed' in order to use margin and/or padding in vertical dimension */ margin: 0 0 0 3vw; padding-top: 2vw; text-decoration: none; font-family: 'Quicksand'; height: 11px; font-size: 3.5vw; /* font-size: clamp(16px, 3.5vw, 22px) !important; */ line-height: 3.5vw; !important; font-weight: 700; color: white; display: inline-block; /* font-size: 4.5vw; */ } a.navMenu33:visited, a.navMenu33Plus:visited { display: inline-block; color: white; } a.navMenu33:hover, a.navMenu33Plus:hover { color: orange; } a.navMenu33:active, a.navMenu33Plus:active { /* display: inline-block; */ /*is this necessary? */ } a.navMenu33L:link { display: none; } a.navMenu33L:visited { display: none; } a.navMenu33L:hover { display: none; } a.navMenu33L:active { display: none; } a.navMenu44:link { position: absolute; /* Firefox and Edge will display correctly with position:relative but Google Chrome will display only if set to position:fixed */ margin: 0 0 0 -1vw; padding-top: 2vw; text-decoration: none; font-weight: 700; font-size: 3.5vw; color: white; display: inline-block; } a.navMenu44:visited { display: inline-block; color: white; } a.navMenu44:hover { } a.navMenu44:active { } a.navMenu55:link { position: absolute; /* Firefox and Edge will display correctly with position:relative but Google Chrome will display only if set to position:fixed */ margin: 0 0 0 -1vw; font-weight: 700; font-size: 3.5vw; padding-top: 2vw; text-decoration: none; color: white; display: inline-block; } a.navMenu55:visited { display: inline-block; color: white; } a.navMenu55:hover { } a.navMenu55:active { display: inline-block; /*is this necessary? */ } /* END: NEW header menu styling */ .spacerDivDESKTOP5 { display: none; } .imageCentre { display: block; /* width: 66vw; */ width: 81vw; /* specify width as % of parent container width */ z-index: 99; /* margin: auto auto; */ padding-top: 11px; padding-bottom: 33px; } .imageRightPortrait { position: relative; display: inline-block; width: 84vw; /* contentShows1 (margin 8vwL 8vwR) + image width (84vw) = 100vw */ z-index: 99; } .imageRightPortraitOverlay { position: absolute; display: inline-block; width: 84vw; /* contentShows1 (margin 8vwL 8vwR) + image width (84vw) = 100vw */ z-index: 101; } .imageRightLandscape, .imageCentre3Landscape, .imageCentre3LandscapeOverlay { display: none; } .imageCentreLandscape { display: none; } .imageCentre2 { display: block; width: 44vw; z-index: 99; padding-left: 5vw; padding-top: 5vw; padding-bottom: 0vw; } .textCwhite700Rel { font-size: 5vw; line-height: 6vw; color: white; font-family: Quicksand; font-weight: 700; text-shadow: 0.1vw 0.1vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textCBlue700Rel { font-size: 4vw; line-height: 4vw; color: rgba(199,230,250,1.0); font-family: Quicksand; font-weight: 700; /* text-shadow: 0.2vw 0.2vw black; */ /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .imageFloatRight { display: none; } #textHome2 { position: relative; display: block; font-family: Quicksand; margin-right: 0; padding: 5vw 5vw 5vw 5vw; background-color: transparent; } a.navWhite:link { text-decoration: none; font-family: Quicksand; font-size: 4vw; line-height: 4vw; color: white; display: inline; } a.navWhite:visited { color: white; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navWhite:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,153,0,1.0); } a.navWhite:active { color: white; display: inline; /*is this necessary? */ } #contentText { position: relative; /* display: block; */ /* width: 100vw; */ font-family: Quicksand; padding: 5vw 8vw 5vw 8vw; } #contentTextBackground { position: relative; font-family: Quicksand; padding: 5vw 8vw 5vw 8vw; background-color: rgba(101,179,227,0.66); } #contentText2 { position: relative; font-family: Quicksand; padding: 0vw 8vw 0vw 8vw; } /* START: WORKSHOP DESCRIPTION STYLING */ .workshopBox { display: block; /* width: 100vw; */ /* note, when using margin-right do not specify width */ min-height: 19vw; vertical-align: top; /* margin-right: auto auto; */ margin-right: 0vw; margin-bottom: 5vw; padding: 5vw 3vw 3vw 3vw; /* float: left; */ border: 1px solid rgba(102,116,128,1.0); } .workshopBoxHome { display: block; /* width: 100vw; */ /* note, when using margin-right do not specify width */ min-height: 19vw; vertical-align: top; /* margin-right: auto auto; */ margin-right: 0vw; margin-bottom: 5vw; padding: 7vw; /* float: left; */ border: 1px solid white; background-color: rgba(0,153,204,0.66); } /* END: WORKSHOP DESCRIPTION STYLING */ #contentHome1 { position: relative; display: block; width: 100vw; height: 100vw; z-index: 99; padding: 0vw 0vw 0px 0vw; background-color: transparent; } #contentHome1ALandscape { display: none; } .textBannerTitle2 { /* display: inline-block; */ /*note margins never collapse on inline elements! */ /* display: inline-block; */ font-family: 'Gochi Hand', cursive; font-family: 'Cabin Sketch'; font-family: "Quicksand"; font-weight: 700; font-size: 4vw; line-height: 4vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle3 { /* display: inline-block; */ /*note margins never collapse on inline elements! */ /* display: inline-block; */ font-family: 'Gochi Hand', cursive; font-family: 'Cabin Sketch'; font-family: "Quicksand"; font-weight: 700; font-size: 4vw; line-height: 6vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle2Home { /* display: inline-block; */ /*note margins never collapse on inline elements! */ /* display: inline-block; */ position: absolute; padding-top: 22.8vw; padding-left: 8vw; width: 100vw; font-family: "Quicksand"; font-weight: 100; font-size: 4vw; line-height: 4.3vw; color: white; background-color: transparent; text-shadow: 2px 2px black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle2About { /* display: inline-block; */ /*note margins never collapse on inline elements! */ /* display: inline-block; */ position: absolute; padding-top: 26vw; width: 100vw; font-family: "Quicksand"; font-weight: 700; font-size: 4vw; line-height: 4vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle2Shows { position: absolute; padding-top: 45.5vw; width: 100vw; font-family: "Quicksand"; font-weight: 700; font-size: 4vw; line-height: 4vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle2Workshops { /* display: inline-block; */ /*note margins never collapse on inline elements! */ /* display: inline-block; */ position: absolute; padding-top: 41vw; width: 100vw; font-family: "Quicksand"; font-weight: 700; font-size: 4vw; line-height: 4vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle3HomePortrait { position: absolute; padding-top: 35.5vw; padding-left: 8vw; width: 100vw; font-family: "Quicksand"; font-weight: 100; font-size: 4vw; line-height: 4.3vw; color: white; background-color: transparent; text-shadow: 2px 2px black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle3HomeLandscape { display: none; } .textBannerTitle4 { /* display: inline-block; */ /*note margins never collapse on inline elements! */ display: block; /* note relationship between inline-block and line-height! */'; font-family: "Quicksand"; font-weight: 700; font-size: 4vw; line-height: 3vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle5 { /* display: inline-block; */ /*note margins never collapse on inline elements! */ display: inline-block; /* width: 55vw; */ padding-top: 0vw; font-family: "Quicksand"; font-weight: 700; font-size: 4vw; line-height: 5vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textCwhite2 { font-family: "Quicksand"; font-weight: 700; color: white; font-size: 19px; line-height: 25px; padding-right: 3vw; /* add padding-right to carousel text box; browser ignores container padding-right */ } .textCwhite2BE { font-family: "Quicksand"; font-weight: 100; color: white; font-size: 16px; /* line-height: 25px; */ } .textCwhite2Home { font-family: "Quicksand"; font-weight: 100; color: white; font-size: 19px; line-height: 25px; padding-right: 0vw; /* add padding-right to carousel text box; browser ignores container padding-right */ } .textCwhite2Home700 { font-family: "Quicksand"; font-weight: 700; color: white; font-size: 19px; line-height: 25px; padding-right: 0vw; /* add padding-right to carousel text box; browser ignores container padding-right */ /* text-shadow: 2px 2px black; */ /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textCwhite2Home700Portrait { position: absolute; width: 36vw; font-family: "Quicksand"; padding-top: 46vw; padding-left: 12vw; font-weight: 100; color: white; font-size: 4vw; line-height: 4.3vw; letter-spacing: 0.1vw; /* text-shadow: 2px 2px black; */ /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textCwhite2Home700Landscape { display: none; } .textCwhite3 { font-family: "Quicksand"; font-weight: 700; color: white; font-size: 22px; line-height: 22px; } .textCwhite2Carousel { /* add padding-right to carousel text box; browser ignores container padding-right */ display: inline-block; width: 66vw; /* display block and width 77vw to prevent spillage of horizontal scrolling text */ vertical-align: middle; font-family: "Quicksand"; font-weight: 100; color: rgba(101,179,227,1.0); color: white; /* font-size: 16px; */ /* line-height: 25px; */ font-size: 21px; line-height: 30px; } .textCWhite100 { font-family: "Quicksand"; font-size: 16px; line-height: 16px; font-weight: 100; color: white; } a.navWhite2:link { text-decoration: none; font-size: 19px; font-weight: 100; font-family: Quicksand; line-height: 21px; color: sienna; display: inline; /* text-shadow: 0.33px 0vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } a.navWhite2:visited { color: sienna; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navWhite2:hover { color: orange; } a.navWhite2:active { color: sienna; display: inline; /*is this necessary? */ } a.navWhite2L:link { text-decoration: none; font-size: 4vw; line-height: 6vw; font-weight: 100; font-family: Quicksand; /* note, specify line height in .listCblackLINKS */ color: white; display: inline; /* text-shadow: 0.33px 0vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ text-shadow: 0.3vw 0.3vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } a.navWhite2L:visited { color: white; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navWhite2L:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,233,62,1.00); color: orange; } a.navWhite2L:active { color: white; display: inline; /*is this necessary? */ } .textWhite3 { font-size: 16px; font-weight: 100; font-family: Quicksand; line-height: 18px; color: white; } a.navWhite3:link, li.navWhite3 { text-decoration: none; font-size: 16px; font-weight: 100; font-family: Quicksand; line-height: 18px; color: white; } a.navWhite3:visited { color: white; /* important not to leave blank but to set this value to avoid problem with MS Edge */ } a.navWhite3:hover { color: rgba(255,233,62,1.00); color: orange; } a.navWhite3:active { color: white; } .copyStyle { position: relative; /* need to explicitly specify position to enable z-index */ font-family: Quicksand; font-size: 19px; line-height: 25px; font-weight: 700; color: rgba(102,116,128,1.00); } .copiedMessage { color: transparent; font-size: 19px; line-height: 25px; } .buttonsCentred { /* display: block; */ /* text-align: center; */ margin: -1vw; padding-left: 8vw; } .buttonsCentred3 { /* display: block; */ /* text-align: center; */ margin-top: -1vw; padding-left: 0vw; padding-bottom: 3vw; } .galleryPrev, .galleryPrev2 { display: inline-block; /* background-color: rgba(101,179,227,1.0); */ width: 11vw; height: 4vw; /* font-size: 19px; */ font-size: 22px; line-height: 25px; color: white; /* background-color: rgba(101,179,227,1.0); */ background-color: transparent; border-style: none; } .galleryPrev3 { display: inline-block; /* background-color: rgba(101,179,227,1.0); */ background-color: transparent; /* font-size: 22px; */ /* line-height: 25px; */ font-size: 19px; line-height: 22px; color: rgba(102,116,128,1.0); border-style: none; } .galleryNext, .galleryNext2 { display: inline-block; /* background-color: rgba(101,179,227,1.0); */ /* width: 11vw; */ /* height: 4vw; */ font-size: 22px; line-height: 25px; color: white; /* background-color: rgba(101,179,227,1.0); */ background-color: transparent; border-style: none; } .galleryNext3 { display: inline-block; /* background-color: rgba(101,179,227,1.0); */ background-color: transparent; /* font-size: 22px; */ /* line-height: 25px; */ font-size: 19px; line-height: 22px; color: rgba(102,116,128,1.0); border-style: none; } .negativeMarginTop { margin-top: -1vw; /* padding-left: 7vw; */ } .teamTextBoxLEFT { position: relative; /* display: inline-block; */ display: block; min-height: 55vw; padding: 8vw 8vw 8vw 8vw; background-color: white; } .teamTextBoxRIGHT { position: relative; /* display: inline-block; */ display: block; /* width: 100vw; */ min-height: 55vw; padding: 8vw 8vw 8vw 8vw; background-color: white; } #bookendCol1Portrait { padding: 5vw 8vw 8vw 8vw; /* font-size: 19px; */ /* font size for fontawesome icons */ } #bookendCol1Landscape { display: none; } #bookendCol2Portrait { padding: 5vw 8vw 5vw 8vw; } #bookendCol2Landscape, #bookendCol3Landscape { display: none; } #iconLandscape { display: none; } .textBannerTitleHome { /* display: inline-block; */ /*note margins never collapse on inline elements! */ position: absolute; /* display: inline-block; */ /* z-index: 99; */ /* width: 100vw; */ padding-top: 26.75vw; padding-left: 8vw; width: 100vw; font-family: 'Cabin Sketch'; font-weight: 700; font-size: 8vw; letter-spacing: 0.01px; color: rgba(255,233,62,1.0); background-color: transparent; text-shadow: 2px 2px black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ /* text-shadow: 0.33vw 0vw rgba(255,233,62,1.0); */ /* background-color: rgba(199,230,250,1.0); */ } .textBannerTitleHomeLandscape { display: none; } .imageCentreHomeLandscape { display: none; } .imagePlacardTextHomeLandscape { display: none; } .imageCentreHome { position: relative; display: block; /* important to specify display: block to avoid gap at bottom of image */ width: 100vw; /* width: 100%; */ /* specify width as % of parent container width */ /* height: 286px; */ z-index: -99; margin-left: 0vw; padding-top: 0vw; padding-bottom: 0vw; } } /* ********* LANDSCAPE STYLING ********* */ @media screen and (orientation:landscape) { .bookEndCopyrightLandscape { font-size: 16px; font-family: "Quicksand"; /* line-height: 18px; */ font-weight: 1 00; color: rgba(199,230,250,1.0); margin-left: 8vw; margin-top: 1vw; margin-bottom: 5vw; } .bookEndCopyrightPortrait { display: none; } #videoPlayPortrait { display: none; } #contentHome2Portrait { display: none; } #contentHome2 { position: relative; /* width: 85vw; */ display: block; margin: 0 0 0 0; padding: 22px 8vw 11px 8vw;; background-color: rgba(0,153,204,1.0); } #contentShows3, #contentWorkshop3 { position: relative; display: block; /* text-align: justify; */ font-family: Quicksand; margin-top: 0px; /* overlap by tucking under div content1A */ padding: 22px 8vw 22px 8vw; background-color: white; } #topCarouselThree { position: relative; display: inline-block; z-index: 99; width: 78vw; margin-top: 0vw; padding-top: 3vw; padding-left: 3vw; /* Landscape mode: contentShows1 (margin 8vwL 8vwR) + carouselThree (padding 3vwL 3vwR, width 78vw) = 100vw */ padding-right: 3vw; background-color: rgba(0,153,204,1.0); /* border: 1px solid rgba(101,179,227,1.0); */ /* border width, border style, border colour */ } #carouselThree { position: relative; display: block; z-index: 99; /* IMPORTANT - raises div carouselThree above div contentShows3 which has negative margin to slide up and under div carouselThree */ width: 70vw; margin-top: 22px; margin-bottom; 0px; padding-top: 11px; padding-bottom: 11px; padding-left: 7vw; /* Landscape mode: contentShows1 (margin 8vwL 8vwR) + carouselThree (padding 3vwL 3vwR, width 78vw) = 100vw */ padding-right: 7vw; background-color: rgba(0,153,204,1.0); /* border: 1px solid rgba(101,179,227,1.0); */ /* border width, border style, border colour */ } #baseCarouselThree { position: relative; /* to allow div baseCarouselThree to overlap down into white space of #contentShows3 */ display: inline-block; font-size: 0vw; /* to collapse space between #carouselThree and div baseCarouselThree */ width: 78vw; margin-bottom: 2vw; padding-top: 1vw; padding-bottom: 3vw; padding-left: 3vw; /* Landscape mode: contentShows1 (margin 8vwL 8vwR) + carouselThree (padding 3vwL 3vwR, width 78vw) = 100vw */ padding-right: 3vw; background-color: rgba(0,153,204,1.0); /* border: 1px solid rgba(101,179,227,1.0); */ /* border width, border style, border colour */ } .textNavigation { z-index: 49; margin: 0 0 0 0; /* take care setting TOP margin to avoid interference with other divs; incorrect setting can render top navigation link inoperable and unresponsive to hover */ text-align: center; list-style-type: none; padding-top: 6vw; /* padding to avoid interference with separate home and cancel icons at top either side */ } a.linktext:link { display: block; text-decoration: none; font-family: Quicksand; color: white; font-size: 3vw; line-height: 3.75vw; font-weight: 100; text-shadow: 0.2vw 0.2vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } a.linktext:visited { color: white; /* important not to leave blank but to set this value to avoid problem with MS Edge */ } a.linktext:hover { color: rgba(255,153,0,1.0); } a.linktext:active { } /* START: TODOS TEATRO header menu styling */ a.navMenu11FSN:link { position: absolute; margin: 0.5vw 0 0 1vw; /* IMPORTANT: specify margin, not padding, to avoid clickable area overlap problem */ padding: 1vw 1vw 1vw 1vw; text-decoration: none; color: rgba(255,233,62,1.0); text-shadow: 0.22vw 0.22vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ display: inline-block; font-family: 'Cabin Sketch'; font-size: 2.5vw; font-weight: 700; line-height: 2vw; /* border: 0.2vw ridge rgba(255,204,102,1.0); */ /* border: 0.2vw ridge white; */ background-color: transparent; } a.navMenu11FSN:visited { color: rgba(255,233,62,1.0); /* important not to leave blank but to set this value to avoid problem with MS Edge */ } a.navMenu11FSN:hover { color: rgba(255,233,62,1.0); color: orange; } a.navMenu11FSN:active { color: rgba(255,233,62,1.0); } /* END - TODOS TEATRO header menu styling */ a.navMenu11:link { position: absolute; margin: 0.5vw 0 0 1vw; /* IMPORTANT: specify margin, not padding, to avoid clickable area overlap problem */ padding: 1vw 1vw 1vw 1vw; text-decoration: none; color: rgba(255,233,62,1.0); text-shadow: 0.22vw 0.22vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ display: inline-block; font-family: 'Cabin Sketch'; font-size: 2.5vw; font-weight: 700; line-height: 2vw; /* border: 0.2vw ridge rgba(255,204,102,1.0); */ /* border: 0.2vw ridge white; */ background-color: transparent; } a.navMenu11:visited { color: rgba(255,233,62,1.0); /* important not to leave blank but to set this value to avoid problem with MS Edge */ } a.navMenu11:hover { color: rgba(255,233,62,1.0); color: orange; } a.navMenu11:active { color: rgba(255,233,62,1.0); } /* padding-top: 2vw provides user with more readily accessible clickable area when selecting menu options */ a.linktextX:link { text-decoration: none; color: white; font-size: 3vw; line-height: 3.3vw; } a.linktextX:visited { color: white; /* important not to leave blank but to set this value to avoid problem with MS Edge */ } a.linktextX:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,153,0,1.0); /* background-color: white; */ } a.linktextX:active { color: rgba(0,0,0,1.0); } a.navMenu11White:link { position: absolute; margin: 0.5vw 0 0 3vw; /* IMPORTANT: specify margin, not padding, to avoid clickable area overlap problem */ padding: 1vw; text-decoration: none; /* color: rgba(255,255,255,1.0); */ color: white; text-shadow: 0.11vw 0.11vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ display: inline-block; font-family: 'Cabin Sketch'; font-size: 2.5vw; line-height: 2.5vw; /* border: 0.2vw ridge rgba(255,204,102,1.0); */ /* border: 0.2vw ridge white; */ background-color: transparent; } a.navMenu22:link { position: relative; margin: 0 0 0 15vw; /* IMPORTANT: specify margin, not padding, to avoid clickable area overlap problem */ padding-top: 2vw; text-decoration: none; /* color: rgba(255,255,255,1.0); */ font-family: 'Quicksand'; font-size: 2vw; font-weight: 700; color: white; display: inline-block; } a.navMenu22:visited { /* color: rgba(255,255,255,1.0); *//* important not to leave blank but to set this value to avoid problem with MS Edge */ /* color: white; */ display: inline-block; /* color: rgba(102,116,128,1.0); */ /* Colour: Raven */ color: white; } a.navMenu22:hover { /* color: rgba(0,255,255,1.0); */ /* color: rgba(255,153,0,1.0); */ color: orange; } a.navMenu22:active { /* color: rgba(0,255,255,1.0); */ display: inline-block; /*is this necessary? */ } a.navMenu33:link, a.navMenu33L:link { position: relative; /* must set position to 'fixed' in order to use margin and/or padding in vertical dimension */ margin: 0 0 0 2vw; padding-top: 2vw; text-decoration: none; font-family: 'Quicksand'; font-weight: 700; font-size: 2vw; color: white; display: inline-block; /* font-size: 4.5vw; */ } a.navMenu33Plus:link { position: relative; /* must set position to 'fixed' in order to use margin and/or padding in vertical dimension */ margin: 0 0 0 2vw; padding-top: 2vw; text-decoration: none; font-family: 'Quicksand'; height: 11px; font-size: 2vw; /* font-size: clamp(16px, 2vw, 55px) !important; */ line-height: 2vw; !important; font-weight: 700; /* font-weight: bold; */ color: white; display: inline-block; /* font-size: 4.5vw; */ } a.navMenu33:visited, a.navMenu33L:visited, a.navMenu33Plus:visited { display: inline-block; color: white; } a.navMenu33:hover, a.navMenu33L:hover, a.navMenu33Plus:hover { color: orange; } a.navMenu33:active, a.navMenu33L:active, a.navMenu33Plus:active { /* display: inline-block; */ /*is this necessary? */ } a.navMenu44:link { position: absolute; /* Firefox and Edge will display correctly with position:relative but Google Chrome will display only if set to position:fixed */ margin: 0 0 0 -1vw; padding-top: 2vw; text-decoration: none; font-weight: 700; font-size: 2.5vw; /* color: rgba(255,255,255,1.0); */ color: white; display: inline-block; } a.navMenu44:visited { display: inline-block; color: white; } a.navMenu44:hover { } a.navMenu44:active { } a.navMenu55:link { position: absolute; /* Firefox and Edge will display correctly with position:relative but Google Chrome will display only if set to position:fixed */ margin: 0 0 0 -1vw; font-weight: 700; font-size: 2.5vw; padding-top: 2vw; text-decoration: none; /* color: rgba(255,255,255,1.0); */ color: white; display: inline-block; } a.navMenu55:visited { display: inline-block; color: white; } a.navMenu55:hover { } a.navMenu55:active { display: inline-block; /*is this necessary? */ } /* END: NEW header menu styling */ .spacerDivDESKTOP5 { position: relative; height: 11vw; } .imageCentre { display: block; /* width: 66vw; */ width: 100%; z-index: 99; margin-top: 0; margin-bottom: 11px; padding-top: 0vw; padding-bottom: 0vw; } .imageCentreLandscape { display: block; /* width: 66vw; */ width: 100%; /* specify width as % of parent container width */ /* z-index: 99; */ /* margin: auto auto; */ padding-top: 0vw; padding-bottom: 0vw; } .imageRightLandscape { position: relative; display: online-block; z-index: 99; width: 52vw; } .imageRightPortrait, .imageRightPortraitOverlay { display: none; } .imageCentre2 { display: block; width: 44vw; z-index: 99; padding-left: 5vw; padding-top: 5vw; padding-bottom: 0vw; } .imageCentre3Landscape { position: relative; display: block; width: 100%; z-index: 99; margin: auto; } .imageCentre3LandscapeOverlay { position: absolute; width: 100%; z-index: 101; margin: auto; } /* .imageCentre, .imageCentre2 { display: none; } */ .textCwhite700Rel { font-size: 22px; font-size: 3vw; /* line-height: 23px; */ line-height: 4vw; color: white; font-family: Quicksand; font-weight: 700; text-shadow: 0.1vw 0.1vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textCBlue700Rel { font-size: 2.25vw; line-height: 2.25vw; color: rgba(199,230,250,1.0); font-family: Quicksand; font-weight: 700; /* text-shadow: 0.2vw 0.2vw black; */ /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .imageFloatRight { display: inline-block; z-index: 99; float: right; width: 50vw; /* border: 1px solid white; */ /* padding: 16vw 5vw 5vw 0; */ padding-left: 3vw; } #textHome2 { position: relative; display: block; font-family: Quicksand; margin-right: 0; padding: 5vw 0vw 10vw 5vw; background-color: transparent; } a.navWhite:link { text-decoration: none; font-family: Quicksand; font-size: 3vw; line-height: 3vw; color: white; display: inline; } a.navWhite:visited { color: white; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navWhite:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,153,0,1.0); } a.navWhite:active { color: white; display: inline; /*is this necessary? */ } #contentText { position: relative; /* display: block; */ /* width: 100vw; */ /* height: 40vw; */ font-family: Quicksand; padding: 5vw 8vw 5vw 8vw; /* background-color: white; */ /* background-color: rgba(250,247,236,0.66); */ } #contentTextBackground { position: relative; /* display: block; */ /* width: 100vw; */ /* height: 40vw; */ font-family: Quicksand; padding: 5vw 8vw 5vw 8vw; /* background-color: white; */ background-color: rgba(101,179,227,0.66); } #contentText2 { position: relative; /* display: block; */ /* width: 100vw; */ font-family: Quicksand; padding: 0vw 8vw 0vw 8vw; } /* START: WORKSHOP DESCRIPTION STYLING */ .workshopBox { display: inline-block; vertical-align: top; font-size: 0.001vw; width: 42%; min-height: 25vw; /* important to specify min-height rather than height alone such that box can expand on clicking ReadMore */ /* margin-right: auto auto; */ margin-right: 0vw; margin-bottom: 1vw; padding: 3vw 3vw 3vw 3vw; /* float: left; */ border: 1px solid rgba(102,116,128,1.0); } .workshopBoxHome { display: inline-block; vertical-align: top; font-size: 0.001vw; width: 44%; min-height: 28vw; /* important to specify min-height rather than height alone such that box can expand on clicking ReadMore */ /* margin-right: auto auto; */ margin-right: 0vw; margin-bottom: 1vw; padding: 2vw; /* float: left; */ border: 1px solid white; background-color: rgba(0,153,204,0.66); } /* END: WORKSHOP DESCRIPTION STYLING */ #contentHome1 { position: relative; display: block; z-index: 99; width: 100vw; /* margin: auto auto; */ background-color: transparent; padding: 0px 0vw 0px 0vw; } #contentHome1ALandscape { position: absolute; z-index: 99; background-color: transparent; padding: 33px 8vw 33px 8vw; background-color: rgba(0,153,204,0.66); } .textBannerTitle2 { /* display: inline-block; */ /*note margins never collapse on inline elements! */ display: block; font-family: "Quicksand"; font-weight: 700; font-size: 3vw; line-height: 3vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle2Home { /* display: inline-block; */ /*note margins never collapse on inline elements! */ position: absolute; display: block; /* z-index: 999; */ padding-top: 14vw; padding-left: 8vw; font-family: "Quicksand"; font-weight: 100; font-size: 2.75vw; line-height: 2.75vw; color: white; background-color: transparent; text-shadow: 2px 2px black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle2About { /* display: inline-block; */ /*note margins never collapse on inline elements! */ position: absolute; /* display: block; */ width: 100vw; padding-top: 21vw; font-family: "Quicksand"; font-weight: 700; font-size: 3vw; line-height: 3vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle2Shows { /* display: inline-block; */ /*note margins never collapse on inline elements! */ position: relative; padding-top: 25.5vw; width: 100vw; font-family: "Quicksand"; font-weight: 700; font-size: 4vw; line-height: 4vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle2Workshops { position: absolute; padding-top: 26vw; width: 100vw; font-family: "Quicksand"; font-weight: 700; font-size: 4vw; line-height: 4vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle3HomeLandscape { /* display: inline-block; */ /*note margins never collapse on inline elements! */ position: absolute; width: 100vw; padding-top: 21.5vw; padding-left: 8vw; font-family: "Quicksand"; font-weight: 100; font-size: 2.75vw; line-height: 2.75vw; color: white; background-color: transparent; text-shadow: 2px 2px black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle3HomePortrait { display: none; } .textBannerTitle3 { /* display: inline-block; */ /*note margins never collapse on inline elements! */ font-family: 'Gochi Hand', cursive; font-family: 'Cabin Sketch'; font-family: "Quicksand"; font-weight: 700; font-size: 3vw; line-height: 6vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTitle4 { /* display: inline-block; */ /*note margins never collapse on inline elements! */ display: block; font-family: "Quicksand"; font-weight: 700; font-size: 3vw; line-height: 1.5vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textCwhite2 { font-family: "Quicksand"; font-weight: 700; padding-right: 3vw; /* add padding-right to carousel text box; browser ignores container padding-right */ color: white; font-size: 19px; line-height: 25px; } .textCwhite2BE { font-family: "Quicksand"; font-weight: 100; color: white; font-size: 16px; line-height: 63px; } .textCwhite2Home { font-family: "Quicksand"; font-weight: 100; padding-right: 0vw; /* add padding-right to carousel text box; browser ignores container padding-right */ color: white; font-size: 19px; line-height: 25px; } .textCwhite2Home700 { font-family: "Quicksand"; font-weight: 700; padding-right: 0vw; /* add padding-right to carousel text box; browser ignores container padding-right */ color: white; font-size: 19px; line-height: 25px; /* text-shadow: 2px 2px black; */ /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textCwhite2Home700Landscape { position: absolute; font-family: "Quicksand"; width: 38vw; font-weight: 100; padding-top: 31.75vw; letter-spacing: 0.05vw; padding-left: 9.25vw; /* add padding-right to carousel text box; browser ignores container padding-right */ color: white; font-size: 2.7vw; line-height: 2.75vw; /* text-shadow: 2px 2px black; */ /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textCwhite2Home700Portrait { display: none; } .textCwhite3 { font-family: "Quicksand"; font-weight: 700; color: white; font-size: 22px; line-height: 22px; } .textCwhite2Carousel { /* add padding-right to carousel text box; browser ignores container padding-right */ display: block; /* width: 69vw; */ /* display block and width 77vw to prevent spillage of horizontal scrolling text */ width: 44vw; padding-top: 22px; padding-left: 11vw; padding-bottom: 22px; font-family: "Quicksand"; font-weight: 100; color: rgba(101,179,227,1.0); color: white; /* font-size: 16px; */ /* line-height: 25px; */ font-size: 27px; line-height: 36px; } .textCWhite100 { font-family: "Quicksand"; font-size: 16px; line-height: 16px; font-weight: 100; color: white; } .textBannerTitle5 { /* display: inline-block; */ /*note margins never collapse on inline elements! */ display: block; /* width: 39vw; */ padding-top: 3vw; font-family: "Quicksand"; font-weight: 700; font-size: 3vw; line-height: 3.75vw; color: white; background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } a.navWhite2:link { text-decoration: none; font-size: 19px; font-weight: 100; font-family: Quicksand; line-height: 25px; color: sienna; display: inline; /* text-shadow: 0.33px 0vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } a.navWhite2:visited { color: sienna; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navWhite2:hover { /* color: rgba(0,255,255,1.0); */ color: orange; } a.navWhite2:active { color: sienna; display: inline; /*is this necessary? */ } a.navWhite2L:link { text-decoration: none; font-size: 3vw; line-height: 5vw; font-weight: 100; font-family: Quicksand; /* note, specify line height in .listCblackLINKS */ color: white; display: inline; /* text-shadow: 0.33px 0vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ text-shadow: 0.2vw 0.2vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } a.navWhite2L:visited { color: white; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navWhite2L:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,233,62,1.00); color: orange; } a.navWhite2L:active { color: white; display: inline; /*is this necessary? */ } .textWhite3 { font-size: 16px; font-weight: 100; font-family: Quicksand; line-height: 21px; color: white; } a.navWhite3:link { text-decoration: none; font-size: 16px; font-weight: 100; font-family: Quicksand; line-height: 18px; color: white; /* display: inline; */ /* text-shadow: 0.33px 0vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } a.navWhite3:visited { color: white; /* important not to leave blank but to set this value to avoid problem with MS Edge */ display: inline; } a.navWhite3:hover { /* color: rgba(0,255,255,1.0); */ color: rgba(255,233,62,1.00); color: orange; } a.navWhite3:active { color: white; display: inline; /*is this necessary? */ } .copiedMessage { /* margin-top: -1vw; */ /* margin-left: 7vw; */ padding-bottom: 2vw; color: transparent; font-size: 19px; line-height: 25px; } .buttonsCentred { /* display: block; */ /* text-align: center; */ margin-top: -1vw; padding-left: 8vw; } .buttonsCentred3 { /* display: block; */ /* text-align: center; */ margin-top: -1vw; padding-left: 0vw; padding-bottom: 3vw; } .galleryPrev, .galleryPrev2 { display: inline-block; /* background-color: rgba(101,179,227,1.0); */ width: 11vw; height: 4vw; /* font-size: 19px; */ font-size: 33px; line-height: 25px; color: white; /* background-color: rgba(101,179,227,1.0); */ background-color: transparent; border-style: none; } .galleryPrev3 { display: inline-block; background-color: transparent; font-size: 2vw; /* line-height: 25px; */ color: rgba(102,116,128,1.0); border-style: none; } .galleryNext, .galleryNext2 { display: inline-block; font-size: 33px; line-height: 25px; color: white; background-color: transparent; border-style: none; } .galleryNext3 { display: inline-block; background-color: transparent; font-size: 2vw; color: rgba(102,116,128,1.0); border-style: none; } .negativeMarginTop { margin-top: 0vw; } .teamTextBoxLEFT { position: relative; /* display: inline-block; */ display: block; /* width: 100vw; */ min-height: 55vw; padding: 2vw 8vw 3vw 8vw; background-color: white; } .teamTextBoxRIGHT { position: relative; /* display: inline-block; */ display: block; /* width: 100vw; */ min-height: 55vw; padding: 2vw 8vw 3vw 8vw; background-color: white; } #bookendCol1Landscape { position: relative; display: inline-block; /* font-size: 0vw; */ /* do not specify font-size: 0vw; as social media icons disappear! */ /* line-height: 0vw; */ /* vertical-align: top; */ padding: 0vw 0vw 0vw 8vw; /* width: 33vw; */ } #bookendCol1Portrait { display: none; } #bookendCol2Portrait { display: none; } #bookendCol2Landscape { /* position: relative; */ display: inline-block; vertical-align: top; /* float: right; */ /* line-height: 0vw; */ /* vertical-align: top; */ /* width: 33vw; */ margin: 0vw 0vw 0vw 8vw; } #bookendCol3Landscape { /* position: relative; */ /* display: block; */ float: right; /* line-height: 0vw; */ /* vertical-align: top; */ /* width: 33vw; */ padding: 0vw 8vw 5vw 0vw; } #iconPortrait { display: none; } .textBannerTitleHome { display: none; } .textBannerTitleHomeLandscape { /* display: inline-block; */ /*note margins never collapse on inline elements! */ position: absolute; padding-top: 16.5vw; padding-left: 8vw; font-family: 'Cabin Sketch'; font-weight: 700; font-size: 5vw; /* line-height: 58px; */ letter-spacing: -0.08vw; /* text-align: left; */ color: rgba(255,233,62,1.0); background-color: transparent; text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ /* text-shadow: 0.33vw 0vw rgba(255,233,62,1.0); */ /* background-color: rgba(199,230,250,1.0); */ } .imageCentreHome { display: none; } .imageCentreHomeLandscape { position: relative; display: block; /* important, removes unwanted space below image */ width: 100vw; z-index: -99; margin-top: 0vw; padding-left: 0vw; /* width: 88%; */ /* specify width as % of parent container width */ } .imagePlacardTextHomeLandscape { position: absolute; display: block; /* important, removes unwanted space below image */ width: 36vw; z-index: 99; /* margin-top: 35vw; */ margin-top: 33.25vw; padding-left: 55vw; } .imagePlacardTextHomePortrait { display: none; } .textBannerLandscape, .textBannerShowsLandscape { position: relative; display: block; /*note margins never collapse on inline elements! */ /* z-index: 99; */ /* width: 100vw; */ /* width: 40%; */ margin: 0; padding: 0 0 0 0; font-family: 'Cabin Sketch'; font-weight: 700; /* font-size: 8vw; */ /* line-height: 6vw; */ font-size: 3vw; line-height: 3vw; color: rgba(255,233,62,1.0); text-shadow: 0.22vw 0.22vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerPortrait, .textBannerShowsPortrait { display: none; } .textBannerLinksPortrait { display: none; } .textBannerLinksLandscape { /* display: inline-block; */ /*note margins never collapse on inline elements! */ display: block; /* z-index: 99; */ /* width: 100vw; */ font-family: 'Cabin Sketch'; font-weight: 700; font-size: 3vw; line-height: 3vw; text-align: center; color: rgba(255,233,62,1.0); text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ /* text-shadow: 0.33vw 0vw rgba(255,233,62,1.0); */ /* background-color: rgba(199,230,250,1.0); */ } .textBannerWorkshop, .textBannerOnline, .textBannerContact, .textBannerAbout { position: relative; display: block; /*note margins never collapse on inline elements! */ /* z-index: 99; */ /* width: 100vw; */ /* width: 22vw; */ margin: 0; padding: 11vw 0 0 8vw; font-family: 'Cabin Sketch'; font-weight: 700; /* font-size: 8vw; */ /* line-height: 6vw; */ font-size: 3vw; line-height: 3vw; color: rgba(255,233,62,1.0); text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTourDateLandscape { position: relative; display: block; /*note margins never collapse on inline elements! */ /* z-index: 99; */ /* width: 100vw; */ width: 22vw; margin: 0; padding: 11vw 0 0 8vw; font-family: 'Cabin Sketch'; font-weight: 700; /* font-size: 8vw; */ /* line-height: 6vw; */ font-size: 3vw; line-height: 3vw; color: rgba(255,233,62,1.0); text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } .textBannerTourDatePortrait { display: none; } .textBannerTeatrONLINE { position: relative; display: block; /*note margins never collapse on inline elements! */ z-index: 99; width: 100vw; margin: 0; padding: 22vw 0 0 55vw; font-family: 'Cabin Sketch'; font-weight: 700; /* font-size: 8vw; */ /* line-height: 6vw; */ font-size: 5vw; line-height: 6vw; text-align: left; color: grey; color: white; color: rgba(255,153,51,1.0); color: rgba(255,204,102,1.0); color: rgba(255,233,62,1.0); text-shadow: 0.55vw 0.55vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } #placardYouTube { position: absolute; display: block; z-index: 333; width: 41vw; height: 15vw; margin: 31vw 0 0 52vw; background-color: transparent; /* background-color: red; */ } #contentShows2, #contentWorkshop2, #contentAbout2, #contentTourDates2 { position: relative; margin-top: 0; padding: 6vw 8vw 0vw 8vw; /*note, set padding top in vw units to maintain relative space between main text and image banner above */ background-color: rgba(101,179,227,0.33); /* NOTE: overwrites only specific previous #contentShows2 in PORTRAIT mode, ie retains PORTRAIT mode specs unless overwritten */ background-color: white; } #contentContact2 { position: relative; display: block; margin: 0; padding: 3vw 8vw 0vw 8vw; background-color: rgba(101,179,227,0.33); /* NOTE: overwrites only specific previous #contentShows2 in PORTRAIT mode, ie retains PORTRAIT mode specs unless overwritten */ background-color: white; } #contentteatrONLINE1, #contentContact1, #contentAbout1, #contentTourDates1 { position: relative; line-height: 0vw; /* IMPORTANT - this removes unwanted space between div carouselThree and the lower div carouselThreeBase */ height: 22.75vw; font-family: Quicksand; margin: 3vw 8vw 0vw 8vw; padding: 0; background-color: rgba(101,179,227,0.0); } #contentShows1, #contentWorkshop1 { position: relative; line-height: 0vw; /* IMPORTANT - this removes unwanted space between div carouselThree and the lower div carouselThreeBase */ height: 22.75vw; font-family: Quicksand; margin: 3vw 8vw 0vw 8vw; padding: 0; background-color: rgba(101,179,227,0.0); } #contentShows1A { position: relative; display: block; z-index: 99; line-height: 0vw; /* IMPORTANT - this removes unwanted space between div carouselThree and the lower div carouselThreeBase */ /* height: 2vw; */ font-family: Quicksand; margin: 0vw 8vw 0vw 8vw; padding: 0; background-color: rgba(101,179,227,0.0); } #contentWorkshop1A { position: relative; display: block; z-index: 99; line-height: 0vw; /* IMPORTANT - this removes unwanted space between div carouselThree and the lower div carouselThreeBase */ /* height: 2vw; */ font-family: Quicksand; margin: 0vw 8vw 0vw 8vw; padding: 0; background-color: rgba(101,179,227,0.0); } .textBannerSupportUs, .textBannerTeam, .textBannerQuickGuide, .textBannerBlog { position: relative; display: block; /*note margins never collapse on inline elements! */ z-index: 99; /* width: 100vw; */ margin: 0 0 0 0; /* padding-top: 7vw; */ /* padding-left: 5vw; */ font-family: 'Cabin Sketch'; font-weight: 700; font-size: 3vw; line-height: 3vw; text-align: left; color: rgba(255,233,62,1.0); text-shadow: 0.33vw 0.33vw black; /* note that Internet Explorer 9 and earlier does not support text-shadow */ } #socialMediaPortrait { display: none; } .pageTitleBanner { position: relative; display: inline-block; padding-top: 9vw; } .pageImageBanner { position: relative; display: inline-block; float: right; /* right: 8vw; */ } #contentteatrONLINE3, #contentAbout3, #contentTourDates3, #contentContact3 { position: relative; display: block; font-family: Quicksand; padding: 6vw 8vw 5vw 8vw; background-color: white; } #contentQuickGuide2 { position: relative; display: inline-block; vertical-align: top; width: 33vw; font-family: Quicksand; padding: 3vw 8vw 5vw 8vw; background-color: white; } } /* ********* END - RESPONSIVE STYLING ********* */ /* -------------------------------------- CHECK THAT ALL BELOW IS GASH BEFORE DELETING -----------------------*/ /* th { color: orange; text-align: left; padding: 3em 0 0 0; } td { text-align: left; vertical-align: bottom; padding: 1em 1em 0 0; } */ /* COPYRIGHT TODOS TEATRO 2019 - ALL RIGHTS RESERVED */