/* Thanks to TEMPLATEMO for their November Template - for the initial layout of the site. http://www.templatemo.com/tm-473-november Sorry guys, I have altered the Template quite a bit ... !!! I hope their is not too many horrible bugs in the final product ... ! COPYRIGHT © 2016 Magic Tours Pty Ltd DESIGN: thö design */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* --** RESET CSS starts here **-- */ * { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; box-sizing: border-box; -webkit-font-smoothing: antialiased; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } html, body, button, input, select, textarea { font-family: Arial; font-size: 12px; color: #8c806e; } ul, ol { margin-top: 0; margin-bottom: 10px; } ul ul { margin-bottom: 0; } li { font-size: 13px; margin: 5px 0px 10px 0px; } pre { overflow: auto; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; quotes: none; } a img { border: 0; } a, input { outline: none; } a { color: #F06; } a:hover { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin: 5px 0px 15px 0px; clear: both; font-weight: lighter; } h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 24px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 14px; } p {font-size: 13px; margin: 5px 0px 15px 0px; } img { -ms-interpolation-mode: bicubic; border: 0; height: auto; max-width: 100%; vertical-align: middle; display: block; } figure { margin: 0; } ::-webkit-input-placeholder { color: rgba(51, 51, 51, 0.7); } :-moz-placeholder { color: rgba(51, 51, 51, 0.7); } ::-moz-placeholder { color: rgba(51, 51, 51, 0.7); opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ } :-ms-input-placeholder { color: rgba(51, 51, 51, 0.7); } input:focus, textarea:focus { background-color: #fff; border: 1px solid #c1c1c1; border: 1px solid rgba(51, 51, 51, 0.3); color: #333; } input:focus, select:focus { outline: 2px solid #c1c1c1; outline: 2px solid rgba(51, 51, 51, 0.3); } /* --** RESET CSS ends here **-- */ /* <<< WEBSITE STARTS HERE >>> */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* WEBSITE WRAPPER ITEMS - starts here */ /* <<< Body >>> */ body { background: #FFF; } /* <<< HIDE >>> */ .hide { display: none; } /* <<< Clear >>> */ .clear { clear: both; height: 0px; overflow: hidden; } /* <<< Design Holder >>> */ .Design_Holder { position: relative; display: block; width: 100%; min-height: 100%; } /* <<< Layout Frame >>> */ .Layout_Frame { margin: 0 auto; width: 100%; display: block; } /* WEBSITE WRAPPER ITEMS - ends here */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* HEADER - starts here */ /* <<< Header >>> */ Header { width: 100%; position: fixed; top: 0px; left: 0px; height: 105px; background: rgba(0, 0, 0, 0.5); z-index: 9; } /* <<< NO DOT ! IMPORTANT ! >>> */ Header .Header_Center { max-width: 1100px; margin: auto; } /* <<< NO DOT ! IMPORTANT ! >>> */ /* <<< Header Site_Logo >>> */ Header .Site_Logo { padding: 20px 0px 0px 0px; width: 220px; float: left; transition: all 0.3s; } /* <<< NO DOT ! IMPORTANT ! >>> */ Header .Site_Logo h1 { margin: 0px; } /* <<< NO DOT ! IMPORTANT ! >>> */ Header .Site_Logo h1 a { font-size: 42px; /* <<< NO DOT ! IMPORTANT ! >>> */ color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 800; text-decoration: none; text-transform: uppercase; text-shadow: rgb(3, 3, 3) 0px 2px 5px; transition: all 0.7s ease; } Header .Site_Logo h1 a span { color: #ff9000; } /* <<< Header Header.Smaller >>> */ Header.Smaller { padding: 0px 0px 0px 0px; height: 60px; transition: all 0.3s; background: rgba(0, 0, 0, 0.75); } /* <<< NO DOT ! IMPORTANT ! >>> */ /* <<< Header Header.Smaller .Site_Logo >>> */ Header.Smaller .Site_Logo { padding: 13px 0px 0px 20px; } /* <<< NO DOT ! IMPORTANT ! >>> */ Header.Smaller .Site_Logo h1 { line-height: 30px; } /* <<< NO DOT ! IMPORTANT ! >>> */ Header.Smaller .Site_Logo h1 a { font-size: 35px; } /* <<< NO DOT ! IMPORTANT ! >>> */ /* HEADER - ends here */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* NAVIGATION - starts here */ /* <<< Navigation >>> */ .Navigation { float: right; width: 68.18%; margin-right: 11px; } .Navigation ul { list-style: none; margin: 0px; float: right; } .Navigation li { height: 105px; float: left; padding: 0px; margin: 0px; position: relative; transition: all 0.3s ease; } .Navigation li a { padding: 42px 41px 36px 41px; font-size: 15px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 600; text-decoration: none; display: block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .Navigation li span { border-bottom: solid 5px #ff9000; background: rgba(56,87,122,1); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(56,87,122,1)), color-stop(0%, rgba(56,87,122,1)), color-stop(0%, rgba(56,87,122,1)), color-stop(100%, rgba(44,68,94,1))); background: linear-gradient(to bottom, rgba(56,87,122,1) 0%, rgba(56,87,122,1) 0%, rgba(56,87,122,1) 0%, rgba(44,68,94,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38577a', endColorstr='#2c445e', GradientType=0 ); width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -10; opacity: 0; transition: all 0.5s ease; } .Navigation li:hover span, .Navigation li.active span { opacity: 1; } /* <<< Header.Smaller .Navigation >>> */ Header.Smaller .Navigation li a { padding: 16px 41px; } Header.Smaller .Navigation li { height: 60px; } /* NAVIGATION - ends here */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* MOBILE - starts here */ /* <<< Mobile >>> */ .Mobile { display: none; } .Mobile .fa { padding: 12px 14px; font-size: 31px; width: 55px; height: 55px; color: #fff; cursor: pointer; background: #ff9408; } .Mobile .fa:hover { background: #e3860e; } .Mobile.closed .fa-bars { display: none; } .Mobile .fa-times { padding: 11px 15px; width: 55px; height: 55px; display: none; font-size: 31px; } .Mobile.closed .fa-times { display: block; } /* <<< Mobile.SMALLER >>> */ .Mobile.Smaller { display: none; } .Mobile.Smaller .fa { padding: 12px 14px; font-size: 31px; width: 55px; height: 55px; color: #fff; cursor: pointer; background: #ff9408; } .Mobile.Smaller .fa:hover { background: #e3860e; } .Mobile.Smaller.closed .fa-bars { display: none; } .Mobile.Smaller .fa-times { padding: 11px 15px; width: 55px; height: 55px; display: none; font-size: 31px; } .Mobile.Smaller.closed .fa-times { display: block; } /* MOBILE - ends here */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* BANNER - starts here */ /* <<< Banner Section Banner_Section >>> */ .Banner_Section { top: center; height: 687px; position: relative; width: 100%; background-image:url(../img/mainbanner/mainbanner.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #464646; } /* <<< Banner Section Banner_Side >>> */ .Banner_Section .Banner_Side { width: 100%; position: absolute; top: 150px; left: 0px; /* border-style: solid; border-width: 4px; border-color: #000; */ } /* <<< BLACK >>> */ /* <<< Banner Section Banner_Center >>> */ .Banner_Section .Banner_Center { max-width: 1100px; margin: auto; } /* <<< Banner Section Left_Side >>> */ .Banner_Section .Left_Side { width: 28.90%; float: left; padding: 0px 0px 0px 0px; overflow: hidden; } /* <<< Banner Section Left_Side_Title >>> */ .Banner_Section .Left_Side_Title { width: 100%; float: left; margin-top: 50px; } .Banner_Section .Left_Side_Title h3 { display: block; font-size: 36px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 800; text-transform: uppercase; text-align: left; line-height: 34px; text-shadow: rgb(3, 3, 3) 0px 2px 5px; transition: all 0.7s ease;} .Banner_Section .Left_Side_Title h3 span { display: block; font-size: 36px; color: #ff9000; font-family: 'Open Sans', sans-serif; font-weight: 600; text-align: left; text-shadow: rgb(3, 3, 3) 0px 2px 5px; transition: all 0.7s ease;} /* <<< Banner Section Left_Side_Text >>> */ .Banner_Section .Left_Side_Text{ width: 100%; float: left; padding: 50px 0px 0px 0px; } .Banner_Section .Left_Side_Text span { margin-top: 55px; font-size: 16px; color: #F8F8F8; font-family: 'Open Sans', sans-serif; font-weight: 100; font-style: italic; margin-bottom: 0px; word-spacing: 3px; line-height: 22px; } /* <<< Banner Section Left_Side_Button >>> */ .Banner_Section .Left_Side_Buttons { width: 100%; float: left; padding: 0px 0px 0px 0px; margin-top: 30px; } .Banner_Section .Left_Side_Buttons ul { list-style: none; float: none; width: 70%; } .Banner_Section .Left_Side_Buttons li { float: left; background-color: #043959; border-style: solid; border-width: 1px; border-color: #0CF; margin: 0px 5px 10px 0px; box-shadow: 0px 2px 6px 0px #242424; -webkit-box-shadow: 0px 2px 6px 0px #242424; -moz-box-shadow: 0px 2px 6px 0px #242424; -o-box-shadow: 0px 2px 6px 0px #242424; } .Banner_Section .Left_Side_Buttons li:first-child { margin-left: 120px; margin-bottom: 40px; } .Banner_Section .Left_Side_Buttons li a { padding: 10px 10px 10px 10px; margin: 0px; text-align: center; width: 170px; font-size: 14px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 400; text-decoration: none; text-transform: uppercase; border: none; display: inline-block; transition: all 0.3s ease; } .Banner_Section .Left_Side_Buttons li:hover, .Banner_Section .Left_Side_Buttons li.activeLink {/* border: solid 1px #8CDBEC; */ border-color: #ff9408; } .Banner_Section .Left_Side_Buttons li a:hover, .Banner_Section .Left_Side_Buttons li a.activeLink {/* border: solid 1px #8CDBEC; */ background-color: #ff9408; color: #003; } .Banner_Section .Left_Side_Buttons a.hperlinkweiterlesen { color: #fff; } .Banner_Section .Left_Side_Buttons a.hperlinkenglishwebsite { color: #ff9000; } .Banner_Section .Left_Side_Buttons a.hperlinkavailability { color: #0CF; } /* <<< Banner Section Left_Side_Social_Media_Buttons >>> */ .Banner_Section .Left_Side_Social_Media_Buttons { width: 100%; float: left; padding: 0px 0px 0px 0px; margin: 18px 0px 0px 0px; } .Banner_Section .Left_Side_Social_Media_Buttons ul { position: relative; list-style: none; margin: 0px 0px 0px 0px;; padding: 0px 0px 0px 0px; } .Banner_Section .Left_Side_Social_Media_Buttons li { display: inline-block; width: 37px; height: 37px; padding: 0px 0px 0px 0px; margin: 0px 26px 0px 0px; box-shadow: 0px 2px 6px 0px #242424; -webkit-box-shadow: 0px 2px 6px 0px #242424; -moz-box-shadow: 0px 2px 6px 0px #242424; -o-box-shadow: 0px 2px 6px 0px #242424; } /* <<< Banner Section Right_Side >>> */ .Banner_Section .Right_Side { width: 68.36%; float: right; position: relative; margin-top: 100px; /* border-style: solid; border-width: 4px; border-color: #F00; */ } /* <<< RED >>> */ .Banner_Section .Right_Side .bx-wrapper { position: relative; z-index: 1; } .Banner_Section .Right_Side ul { list-style: none; margin: 0px; } .Banner_Section .Right_Side li { padding: 0px; margin: 0; float: none!important; } /* <<< Banner Section Slider >>> */ .Banner_Section .Right_Side #slider { width: 100%; float: right; position: relative; z-index: 1; } .Banner_Section .Right_Side .Slider .text { padding: 25px 47px 21px 30px; position: absolute; bottom: 0px; left: 0px; width: 100%; background: rgba(0, 0, 0, 0.7); } .Banner_Section .Right_Side .IconHeart { width: 25%; display: inline-block; position: absolute; z-index: 2; bottom: 0px; padding: 0px 0px 20px 40px; margin: 0px 0px 0px 0px; /* border-style: solid; border-width: 4px; border-color: #00C; */ } /* <<< BLUE >>> */ .Banner_Section .Right_Side .IconHeart ul { list-style: none; margin: 0px; } .Banner_Section .Right_Side .IconHeart li { float: left!important; padding: 0px 0px 0px 0px; margin: 0px; } .Banner_Section .Right_Side .IconHeart li a { display: block; font-size: 14px; color: #fff; text-decoration: none; font-family: 'Open Sans', sans-serif; font-weight: 400; transition: all 0.3s ease; } .Banner_Section .Right_Side .IconHeart li:last-child { padding: 0px; } .Banner_Section .Right_Side .IconHeart li:hover a { color: #ff9000!important; } .Banner_Section .Right_Side .IconHeart li a .fa { padding: 13px; margin-right: 10px; color: #fff; border-radius: 50px; border: solid 2px #fff; transition: all 0.3s ease; cursor: pointer; } .Banner_Section .Right_Side .IconHeart li:hover a .fa { background: #ff9000; color: #fff; border: solid 2px #ff9000; } .Banner_Section .Right_Side .IconComment { width: 75%; display: inline-block; float: none; position: absolute; z-index: 2; bottom: 0px; padding: 0px 0px 20px 0px; margin: 0px 0px 0px 150px; /* border-style: solid; border-width: 4px; border-color: #F00; */ } /* <<< RED >>> */ .Banner_Section .Right_Side .IconComment ul { list-style: none; margin: 0px; } .Banner_Section .Right_Side .IconComment li { float: left!important; padding: 0px 0px 0px 0px; margin: 0px; } .Banner_Section .Right_Side .IconComment li a { display: block; font-size: 14px; color: #fff; text-decoration: none; font-family: 'Open Sans', sans-serif; font-weight: 400; transition: all 0.3s ease; } .Banner_Section .Right_Side .IconComment li:last-child { padding: 0px; } .Banner_Section .Right_Side .IconComment li:hover a { color: #ff9000!important; } .Banner_Section .Right_Side .IconComment li a .fa { padding: 13px; margin-right: 10px; color: #fff; border-radius: 50px; border: solid 2px #fff; transition: all 0.3s ease; cursor: pointer; } .Banner_Section .Right_Side .IconComment li:hover a .fa { background: #ff9000; color: #fff; border: solid 2px #ff9000; } .Banner_Section .Right_Side .Slider .text .Icon { width: 38%; float: left; } .Banner_Section .Right_Side .Slider .text ul { list-style: none; margin: 0px; } .Banner_Section .Right_Side .Slider .text li { float: left!important; padding: 0px 30px 0px 10px; margin: 0px; } .Banner_Section .Right_Side .Slider .text li a { display: block; font-size: 14px; color: #fff; text-decoration: none; font-family: 'Open Sans', sans-serif; font-weight: 400; transition: all 0.3s ease; } .Banner_Section .Right_Side .Slider .text li:last-child { padding: 0px; } .Banner_Section .Right_Side .Slider .text li:hover a { color: #ff9000!important; } .Banner_Section .Right_Side .Slider .text li a .fa { padding: 13px; margin-right: 10px; color: #fff; border-radius: 50px; border: solid 2px #fff; transition: all 0.3s ease; cursor: pointer; } .Banner_Section .Right_Side .Slider .text li:hover a .fa { background: #ff9000; color: #fff; border: solid 2px #ff9000; } .Banner_Section .Right_Side .Slider .text .Lorem { float: right; width: 31%; } .Banner_Section .Right_Side .Slider .text .Lorem p { width: 100%; padding-top: 5px; font-size: 16px; color: #fff; margin: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; text-transform: uppercase; text-align: right; line-height: 19px; } .Banner_Section .Right_Side .Slider .text .Lorem p span { font-size: 14px; text-align: right; color: #ff9000; display: block; text-transform: capitalize; } .Banner_Section .Right_Side .prevBtn { width: 42px; height: 42px; display: block; text-indent: -9999px; background: url(../img/prev-arrow.png) no-repeat; position: absolute; top: 213px; left: 49px; z-index: 1; opacity: 0.5; transition: opacity 0.3s ease; } .Banner_Section .Right_Side .prevBtn:hover { opacity: 1; } .Banner_Section .Right_Side .nextBtn { width: 42px; height: 42px; display: block; text-indent: -9999px; background: url(../img/next-arrow.png) no-repeat; position: absolute; top: 213px; right: 47px; z-index: 1; opacity: 0.5; transition: opacity 0.3s ease; } .Banner_Section .Right_Side .nextBtn:hover { opacity: 1; } .Banner_Section .Right_Side .Shadow { position: absolute; bottom: -3px; left: -25px; max-width: none; } /* <<< Banner Section Banner_Section_Spacer >>> */ .Banner_Section_Spacer { height: 74px; width: 100%; background: rgba(249,250,251,1); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(249,250,251,1)), color-stop(0%, rgba(249,250,251,1)), color-stop(100%, rgba(225,228,231,1))); background: linear-gradient(to bottom, rgba(249,250,251,1) 0%, rgba(249,250,251,1) 0%, rgba(225,228,231,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fafb', endColorstr='#e1e4e7', GradientType=0 ); /* border-style: solid; border-width: 4px; border-color: #0F0; */ } /* <<< Banner Section Banner_Section_Container >>> */ #Banner_Section_Container { overflow: hidden; width: 100%; } /* BANNER - ends here */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ABOUT - starts here */ /* <<< About_Section >>> */ .About_Section { padding: 70px 0px 0px 0px; width: 100%; overflow: hidden; /* border-style: solid; border-width: 4px; border-color: #F00; */ } .About_Section .About_Center { max-width: 1100px; padding: 0px 20px 0px 20px; margin: auto; overflow: hidden; text-align: center; /* border-style: solid; border-width: 4px; border-color: #00C; */ } /* <<< BLUE >>> */ .About_Section h2 { font-size: 56px; color: #000; font-family: 'Oswald', sans-serif; font-weight: 400; margin: 0px; text-transform: uppercase; line-height: 60px; letter-spacing: -0.4px; } .About_Section p { padding: 25px 20px 35px 20px; font-size: 14px; color: #7a7a7a; margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; font-weight: 400; } /* <<< About About_Line >>> */ .About_Section .About_Line { border: solid 1px #C60; height: 2px; width: 252px; margin: auto; } /* <<< About About_Content >>> */ .About_Section .About_Content { padding: 60px 0px 0px 0px; width: 100%; /* border-style: solid; border-width: 4px; border-color: #000; */ } /* <<< BLACK >>> */ .About_Section .About_Content ul { list-style: none; margin: 0px; padding-bottom: 59px; /* border-style: solid; border-width: 4px; border-color: #90C; */ } .About_Section .About_Content ul p { padding: 0px 0px; } .About_Section .About_Content li { float: none; padding: 0px; display: inline-block; width: 170px; } .About_Section .About_Content li a { padding: 14px 20px 14px 20px; font-size: 14px; color: #C60; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center; text-decoration: none; text-transform: uppercase; border: solid 1px #d5d5d5; background-color: #F5F5F5; display: block; transition: all 0.3s ease; } .About_Section .About_Content li a:hover, .About_Section .About_Content li a.activeLink { border: solid 1px #C60; background-color: #C60; color: #fff; box-shadow: -3px 3px 10px rgba(0,0,0,0.15), -3px 3px 10px rgba(0,0,0,0.25); } .About_Section .About_Content .About_Content_Image_Left { width: 43.63%; float: left; position: relative; /* border-style: solid; border-width: 4px; border-color: #F00; */ } /* <<< RED >>> */ .About_Section .About_Content .About_Content_Image_Left .img1 { position: absolute; top: 0px; left: 42px; height: 260px; background: url(../img/shadows/about-shadow.png) no-repeat; background-position: 4px 254px; } .About_Section .About_Content .About_Content_Image_Left .img1 img { padding: 1px; border: solid 1px #ececec; background: #fff; } .About_Section .About_Content .About_Content_Image_Left .img2 { position: absolute; top: 120px; left: 2px; height: 260px; background: url(../img/shadows/about-shadow.png) no-repeat; background-position: 4px 254px; } .About_Section .About_Content .About_Content_Image_Left .img2 img { padding: 1px; border: solid 1px #ececec; background: #fff; } .About_Section .About_Content .About_Content_Description_Main { width: 54.3%; height: 100%; padding: 0px 20px 50px 20px; float: right; text-align: left; margin-top: -6px; } .About_Section .About_Content .About_Content_Description_Main h3 { font-size: 24px; color: #000; margin: 0px; text-transform: uppercase; font-family: 'Open Sans', sans-serif; line-height: 29px; } .About_Section .About_Content .About_Content_Description_Main h3 span { padding-left: 3px; font-size: 14px; color: #C60; display: block; } .About_Section .About_Content .About_Content_Description_Main p { padding: 15px 0px 4px 0px; font-size: 14px; color: #7a7a7a; margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; } /* About Section About_Content_Buttons */ .About_Section .About_Content .About_Content_Buttons { width: 100%; padding: 0px 0px 0px 0px; margin: 30px 0px -40px 0px; /* border-style: solid; border-width: 4px; border-color: #F00; */ } /* <<< RED >>> */ .About_Section .About_Content .About_Content_Buttons ul { list-style: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } .About_Section .About_Content .About_Content_Buttons ul li { width: 300px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } .About_Section .About_Content .About_Content_Buttons ul li a { padding: 14px 20px 14px 20px; width: 220px; margin: 0px 0px 0px 0px; font-size: 12px; color: #C60; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center; text-decoration: none; text-transform: uppercase; border: solid 1px #d5d5d5; background-color: #F5F5F5; display: block; transition: all 0.3s ease; } .About_Section .About_Content .About_Content_Buttons li a:hover, .About_Section .About_Content .About_Content_Buttons li a.activeLink { border: solid 1px #C60; background: #C60; color: #fff; box-shadow: -3px 3px 10px rgba(0,0,0,0.15), -3px 3px 10px rgba(0,0,0,0.25); } /* <<< About Section About_Content_Buttons_Testimonials >>> */ .About_Section .About_Content .About_Content_Buttons_Testimonials { width: 100%; height: 100px; display: inline-block; padding: 0px 0px 0px 0px; } .About_Section .About_Content .About_Content_Buttons_Testimonials ul { list-style: none; margin: 0px; } .About_Section .About_Content .About_Content_Buttons_Testimonials ul p { padding: 0px 0px 0px 0px; } .About_Section .About_Content .About_Content_Buttons_Testimonials li { width: 180px; display: inline-block; float: none; padding: 0px 0px 0px 0px; margin: 20px 0px 0px 0px; } .About_Section .About_Content .About_Content_Buttons_Testimonials li a { padding: 14px 20px 14px 20px; font-size: 12px; color: #C60; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center; text-decoration: none; text-transform: uppercase; border: solid 1px #d5d5d5; display: block; transition: all 0.3s ease; } .About_Section .About_Content .About_Content_Buttons_Testimonials li a:hover, .About_Section .About_Content .About_Content_Buttons_Testimonials li a.activeLink { border: solid 1px #C60; background: #C60; color: #fff; } /* <<< About About_Content_Button_BackToTop >>> */ .About_Section .About_Center .About_Content_Button_BackToTop { float: right; height: 40px; width: 40px; object-fit: contain; margin: 80px 0px -10px 0px; padding: 0px 0px 0px 0px; /* border-style: solid; border-width: 4px; border-color: #F00; */ } /* <<< RED >>> */ .About_Section .About_Center .About_Content_Button_BackToTop img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ } .About_Section .About_Center .About_Content_Button_BackToTop img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } /* <<< About About_Content_Button_Testimonials_BackToTop >>> */ .About_Section .About_Center .About_Content_Button_Testimonials_BackToTop { float: right; height: 40px; width: 40px; object-fit: contain; margin: 0px 5px -20px 0px; padding: 0px 0px 0px 0px; /* border-style: solid; border-width: 4px; border-color: #F00; */ } /* <<< RED >>> */ .About_Section .About_Center .About_Content_Button_Testimonials_BackToTop img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ } .About_Section .About_Center .About_Content_Button_Testimonials_BackToTop img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } /* ABOUT - ends here */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* SERVICES - starts here */ /* <<< Services Section >>> */ .Services_Section { padding: 70px 0px 0px 0px ; width: 100%; overflow: hidden; background: url(../img/services/services_background.jpg) top center no-repeat; background-size: cover; } /* <<< Services Section Services_Center >>> */ .Services_Section .Services_Center { max-width: 1100px; padding: 0px 20px 0px 20px; margin: auto; overflow: hidden; text-align: center; /* border-style: solid; border-width: 4px; border-color: #000; */ } /* <<< BLACK >>> */ .Services_Section h2 { font-size: 56px; color: #fff; font-family: 'Oswald', sans-serif; font-weight: 400; margin: 0px; text-transform: uppercase; line-height: 60px; } .Services_Section p { padding: 25px 0px 35px 0px; font-size: 14px; color: #d8dfe5; margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; font-weight: 400; } .Services_Section .Services_Line { border: solid 1px #ff9408; height: 2px; width: 252px; margin: auto; } /* Services Section Services_Content */ .Services_Section .Services_Content { padding: 100px 0px 40px 0px; width: 100%; } .Services_Section .Services_Content ul { list-style: none; margin: 0px; padding-bottom: 100px; } .Services_Section .Services_Content ul p { padding: 0px 0px; } .Services_Section .Services_Content ul li { float: none; padding: 0px; display: inline-block; width: 180px; margin: 0px 3px 0px 0px; } .Services_Section .Services_Content li a { padding: 10px 20px 10px 20px; font-size: 14px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center; text-decoration: none; text-transform: uppercase; border: solid 1px #0CF; background-color: #043959; display: block; transition: all 0.3s ease; } .Services_Section .Services_Content li a:hover, .Services_Section .Services_Content li a.activeLink { border: border-style: solid; border-width: 1px; border-color: #ff9408; background-color: #ff9408; color: #003; box-shadow: -5px 10px 20px rgba(0,0,0,0.25), -10px 10px 20px rgba(0,0,0,0.25); } /* Services Section Services_Content_Buttons */ .Services_Section .Services_Content .Services_Content_Buttons { padding: 0px 0px 0px 0px; width: 100%; height: 100%; margin-top: 30px; } .Services_Section .Services_Content .Services_Content_Buttons ul { height: 100%; width: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; list-style: none; } .Services_Section .Services_Content .Services_Content_Buttons ul li { padding: 0px 0px 0px 0px; display: inline-block; width: 220px; background-color: #043959; margin: 0px 3px 7px 0px; } .Services_Section .Services_Content .Services_Content_Buttons ul li a { padding: 10px 10px 10px 10px; font-size: 12px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center; text-decoration: none; text-transform: uppercase; display: block; transition: all 0.3s ease; } .Services_Section .Services_Content .Services_Content_Buttons li a:hover, .Services_Section .Services_Content .Services_Content_Buttons li a.activeLink { border-style: solid; border-width: 1px; border-color: #ff9408; background-color: #ff9408; color: #003; box-shadow: -5px 5px 13px rgba(0,0,0,0.20), -10px 5px 13px rgba(0,0,0,0.20); } /* SERVICES SECTION Services_Content_Image_Left */ .Services_Section .Services_Content .Services_Content_Image_Left { width: 43.63%; float: left; position: relative; } .Services_Section .Services_Content .Services_Content_Image_Left .img1 { position: absolute; top: 0px; left: 42px; height: 260px; background: url(../img/shadows/about-shadow.png) no-repeat; background-position: 4px 254px; } .Services_Section .Services_Content .Services_Content_Image_Left .img1 img { padding: 1px; border: solid 1px #ececec; background: #fff; } .Services_Section .Services_Content .Services_Content_Image_Left .img2 { position: absolute; top: 120px; left: 2px; height: 260px; background: url(../img/shadows/about-shadow.png) bottom center no-repeat; background-position: 4px 254px; } .Services_Section .Services_Content .Services_Content_Image_Left .img2 img { padding: 1px; border: solid 1px #ececec; background: #fff; } /* SERVICES SECTION Services_Content_Description_Main */ .Services_Section .Services_Content .Services_Content_Description_Main { padding: 0px 20px 0px 0px; width: 54.3%; float: right; text-align: left; margin: -6px 0px 0px 0px; overflow: hidden; } .Services_Section .Services_Content .Services_Content_Description_Main h3 { font-size: 24px; color: #E4E4E4; font-weight: 400; text-transform: uppercase; font-family: 'Open Sans', sans-serif; line-height: 29px; } .Services_Section .Services_Content .Services_Content_Description_Main h3 span { padding-left: 3px; font-size: 14px; color: #f79627; display: block; margin-bottom: 30px; } .Services_Section .Services_Content .Services_Content_Description_Main p { padding: 15px 0px 4px 0px; font-size: 14px; color: #d8dfe5; margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; } .Services_Section .Services_Content .Services_Content_Buttons .Services_Content_Description_Main_BackToTop { float: right; height: 40px; width: 40px; object-fit: contain; margin: 40px 0px 0px 0px; padding: 0px 0px 0px 0px; } .Services_Section .Services_Content .Services_Content_Buttons .Services_Content_Description_Main_BackToTop img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ } .Services_Section .Services_Content .Services_Content_Buttons .Services_Content_Description_Main_BackToTop img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } /* SERVICES - ends here */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* TOURS - starts here */ /* <<< Tours Section >>> */ .Tours_Section { width: 100%; padding: 70px 0px 20px 0px ; margin: 0px 0px 0px 0px; overflow: hidden; /* border-style: solid; border-width: 4px; border-color: #F00; */ } /* <<< RED >>> */ .Tours_Section .Tours_Center { max-width: 1100px; margin: auto; overflow: hidden; text-align: center; } .Tours_Section h2 { font-size: 56px; color: #000; font-family: 'Oswald', sans-serif; font-weight: 400; margin: 0px; text-transform: uppercase; line-height: 60px; letter-spacing: -0.4px; } .Tours_Section p { padding: 25px 0px 35px 0px; font-size: 14px; color: #7a7a7a; margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; font-weight: 400; } .Tours_Section .Tours_Line { display: table; margin: 0px auto 0px auto; border: solid 1px #ff9408; height: 2px; width: 252px; margin-top: 30px; text-align: center } .Tours_Section .Tours_Title_Scheduled_Departures { padding: 0px 0px 0px 0px ; width: 100%; } .Tours_Section .Tours_Title_Scheduled_Departures h2 { font-size: 24px; color: #8f8f8f; font-weight: 400; font-family: 'Open Sans', sans-serif; line-height: 29px; text-transform: uppercase; margin: 40px 0px 0px 0px; } /* <<< Tours Tours_Content >>> */ .Tours_Section .Tours_Content { padding: 40px 0px 0px 0px; width: 100%; margin-top: 40px; } .Tours_Section .Tours_Content ul { list-style: none; margin: 0px; padding-bottom: 59px; } .Tours_Section .Tours_Content ul p { padding: 0px 0px; } .Tours_Section .Tours_Content li { float: none; padding: 0px; display: inline-block; width: 230px; } .Tours_Section .Tours_Content li a { padding: 14px 10px 14px 10px; font-size: 14px; color: #C60; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center; text-decoration: none; text-transform: uppercase; border: solid 1px #d5d5d5; background-color: #F5F5F5; display: block; transition: all 0.3s ease; } .Tours_Section .Tours_Content li a:hover, .Tours_Section .Tours_Content li a.activeLink { border: solid 1px #C60; background: #C60; color: #fff; box-shadow: -3px 3px 10px rgba(0,0,0,0.15), -3px 3px 10px rgba(0,0,0,0.25); } /* <<< Tours Section Tours_Content_Image_Left >>> */ .Tours_Section .Tours_Content .Tours_Content_Image_Left { width: 43.63%; float: left; position: relative; 00ffff; } .Tours_Section .Tours_Content .Tours_Content_Image_Left .img1 { position: absolute; top: 0px; left: 42px; height: 260px; background: url(../img/shadows/about-shadow.png) no-repeat; background-position: 4px 254px; } .Tours_Section .Tours_Content .Tours_Content_Image_Left .img1 img { padding: 1px; border: solid 1px #ececec; background: #fff; } .Tours_Section .Tours_Content .Tours_Content_Image_Left .img2 { position: absolute; top: 120px; left: 2px; height: 260px; background: url(../img/shadows/about-shadow.png) no-repeat; background-position: 4px 254px; } .Tours_Section .Tours_Content .Tours_Content_Image_Left .img2 img { padding: 1px; border: solid 1px #ececec; background: #fff; } /* <<< Tours Section Tours_Content_Description_Main >>> */ .Tours_Section .Tours_Content .Tours_Content_Description_Main { padding: 7px 7px 20px 7px; width: 54.3%; float: right; text-align: left; margin-top: -7px; } .Tours_Section .Tours_Content .Tours_Content_Description_Main h3 { font-size: 24px; color: #8f8f8f; margin: 0px; text-transform: uppercase; font-family: 'Open Sans', sans-serif; line-height: 29px; font-weight: 400; } .Tours_Section .Tours_Content .Tours_Content_Description_Main h3 span { padding-left: 3px; font-size: 14px; color: #C60; display: block; } .Tours_Section .Tours_Content .Tours_Content_Description_Main h4 { font-size: 16px; color: #8f8f8f; 0px 0px 0px 0px; text-transform: uppercase; font-family: 'Open Sans', sans-serif; font-weight: 400; } .Tours_Section .Tours_Content .Tours_Content_Description_Main h5 { padding: 10px 0px 0px 0px; font-size: 14px; color: #8f8f8f; display: block; text-transform: uppercase; font-family: 'Open Sans', sans-serif; font-weight: 400; } .Tours_Section .Tours_Content .Tours_Content_Description_Main h5 span { padding: 10px 0px 0px 0px; font-size: 14px; color: #C60; display: block; text-transform: uppercase; font-family: 'Open Sans', sans-serif; font-weight: 400; } .Tours_Section .Tours_Content .Tours_Content_Description_Main p { padding: 15px 10px 4px 0px; font-size: 14px; color: #7a7a7a; margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; } /* <<< Tours Section Tours_Content_Buttons_Tours >>> */ .Tours_Section .Tours_Content .Tours_Content_Description_Main .Tours_Content_Buttons_Tours { width: 100%; position: relative; float: left; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } .Tours_Section .Tours_Content .Tours_Content_Description_Main .Tours_Content_Buttons_Tours ul { list-style: none; padding: 30px 0px 0px 0px; margin: 0px 0px 0px 0px; } .Tours_Section .Tours_Content .Tours_Content_Description_Main .Tours_Content_Buttons_Tours ul li { width: 100%; padding: 0px 5px 5px 0px; margin: 0px 0px 0px 0px; } .Tours_Section .Tours_Content .Tours_Content_Description_Main .Tours_Content_Buttons_Tours ul li a { padding: 14px 20px 14px 20px; width: 300px; margin: 0px 0px 0px 0px; font-size: 12px; color: #C60; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center; text-decoration: none; text-transform: uppercase; border: solid 1px #d5d5d5; display: block; transition: all 0.3s ease; } .Tours_Section .Tours_Content .Tours_Content_Description_Main .Tours_Content_Buttons_Tours li a:hover, .Tours_Section .Tours_Content .Tours_Content_Description_Main .Tours_Content_Buttons_Tours li a.activeLink { border: solid 1px #C60; background-color: #C60; color: #fff; } .Tours_Section .Tours_Content .Tours_Content_Description_Main .Tours_Content_Description_Main_BackToTop { float: right; height: 40px; width: 40px; object-fit: contain; margin: 20px 27px 0px 0px; padding: 0px 0px 0px 0px; } .Tours_Section .Tours_Content .Tours_Content_Description_Main .Tours_Content_Description_Main_BackToTop img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ } .Tours_Section .Tours_Content .Tours_Content_Description_Main .Tours_Content_Description_Main_BackToTop img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* TOURS - ends here */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* CONTACT - starts here */ /* <<< Contact Section >>> */ .Contact_Section { padding: 0px 0px 0px 0px; width: 100%; overflow: hidden; /* border-style: solid; border-width: 4px; border-color: #0F0; */ } /* <<< LIGHT GREEN >>> */ .Contact_Section .Contact_Head { width: 100%; padding: 70px 0px 57px 0px; margin: 0px px 0px 0px; text-align: center; background: url(../img/Contact-bg.jpg); position: top; background-repeat: no-repeat; background-size: cover; overflow: hidden; /* border-style: solid; border-width: 4px; border-color: #0FF; */ } /* LIGHT BLUE */ .Contact_Section h2 { font-size: 56px; color: #fff; font-family: 'Oswald', sans-serif; font-weight: 400; margin: 0px; text-transform: uppercase; line-height: 60px; } .Contact_Section p { padding: 24px 0px 35px 0px; font-size: 14px; color: #ebebeb; margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; font-weight: 400; } .Contact_Section .Contact_Line { border: solid 1px #ff9408; height: 2px; width: 252px; margin: auto; } /* <<< Contact Section Body >>> */ .Contact_Section_Body { position: relative; width: 100%; overflow: hidden; background: url(../img/Get-bg.jpg) top center no-repeat; background-size: cover; } .Contact_Section_Body .Contact_Section_Body_Content { padding: 76px 0px 40px 0px; max-width: 1100px; margin: auto; overflow: hidden; /* border-style: solid; border-width: 4px; border-color: #F00; */ } /* <<< RED >>> */ /* <<< Contact Section Body Contact_Section_Body_Content_Address >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Address { padding: 0px 20px 0px 20px; width: 48.18%; float: left; /* border-style: solid; border-width: 4px; border-color: #0FF; */ } /* LIGHT BLUE */ .Contact_Section_Body .Contact_Section_Body_Content_Address_Title h2 { padding-bottom: 44px; font-size: 46px; color: #f88e04; font-family: 'Oswald', sans-serif; font-weight: 400; margin: 0px; text-transform: uppercase; line-height: 46px; text-shadow: rgb(3, 3, 3) 0px 1px 1px; } /* <<< Contact Section Body Contact_Section_Body_Content_Address_Icon_Address >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Address_Icon_Address { width: 40px; height: 40px; float: left; background: url(../img/location-icn.png) left 4px no-repeat; } .Contact_Section_Body .Contact_Section_Body_Content_Address_Address p { float: left; width: 90%; padding: 0px 0px 27px 65px; margin-left: 3px; font-size: 14px; color: #ebedf1; font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal; line-height: 24px; } /* <<< Contact Section Body Contact_Section_Body_Content_Address_Icon_Numbers >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Address_Icon_Numbers { width: 40px; height: 40px; float: left; background: url(../img/phone-icn.png) left 4px no-repeat; } .Contact_Section_Body .Contact_Section_Body_Content_Address_Numbers p { float: left; width: 90%; padding: 0px 0px 27px 65px; margin-left: 3px; font-size: 14px; color: #ebedf1; font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal; line-height: 24px; } /* <<< Contact Section Body Contact_Section_Body_Content_Address_Icon_Email >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Address_Icon_Email { width: 40px; height: 40px; float: left; background: url(../img/mail-icn.png) left 4px no-repeat; } .Contact_Section_Body .Contact_Section_Body_Content_Address_Email a { float: left; width: 90%; padding: 0px 0px 27px 65px; margin-left: 3px; font-size: 14px; color: #ebedf1; font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal; line-height: 24px; } .Contact_Section_Body .Contact_Section_Body_Content_Address_Email a:Hover { color: #f88e04; } /* ------------------------------------------------------------------------------------------------ */ /* <<< DO NOT SHOW IN CSS MAIN !!! >>> */ /* <<< Contact_Section_Body Contact_Section_Body_Content_Address_Logo >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Address_Logo { display: none; } /* <<< IMPORTANT: add ( display: block !important; ) on child CSS !!! >>> */ /* ------------------------------------------------------------------------------------------------ */ /* <<< Contact Section Body Contact_Section_Body_Content_Address_Images >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Address_Image1 { position: absolute; padding: 60px 30px 0px 0px; } .Contact_Section_Body .Contact_Section_Body_Content_Address_Image2 { position: absolute; padding: 180px 30px 0px 80px; } .Contact_Section_Body .Contact_Section_Body_Content_Address_Image1 figure { width: 378px; border: 1px solid #FFF; box-shadow: 0px 10px 10px 0px #242424; -webkit-box-shadow: 0px 10px 10px 0px #242424; -moz-box-shadow: 0px 10px 10px 0px #242424; -o-box-shadow: 0px 10px 10px 0px #242424; border-radius: 0px; transition: all 0.3s ease; padding: 1px; } .Contact_Section_Body .Contact_Section_Body_Content_Address_Image2 figure { width: 378px; border: 1px solid #FFF; box-shadow: 0px 10px 10px 0px #242424; -webkit-box-shadow: 0px 10px 10px 0px #242424; -moz-box-shadow: 0px 10px 10px 0px #242424; -o-box-shadow: 0px 10px 10px 0px #242424; border-radius: 0px; transition: all 0.3s ease; padding: 1px; } /* <<< Contact Section Body Contact_Section_Body_Content_Social_Media_Icons >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Social_Media_Icons ul { position: relative; list-style: none; margin: 0px 0px 0px 0px;; padding: 27px 0px 0px 0px; } .Contact_Section_Body .Contact_Section_Body_Content_Social_Media_Icons li { display: inline-block; width: 40px; height: 40px; padding: 0px 0px 0px 0px; margin: 0px 20px 0px 0px; box-shadow: 0px 2px 6px 0px #242424; -webkit-box-shadow: 0px 2px 6px 0px #242424; -moz-box-shadow: 0px 2px 6px 0px #242424; -o-box-shadow: 0px 2px 6px 0px #242424; } .Contact_Section_Body .Contact_Section_Body_Content_Social_Media_Icons li a { text-decoration: none; } /* <<< Contact Section Body Contact_Section_Body_Content_Form >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Form { width: 48.2%; float: right; /* border-style: solid; border-width: 4px; border-color: #F00; */ } /* <<< RED >>> */ /* <<< Contact Section Body Contact_Section_Body_Content_Form_Label_Top >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Form_Label_Top { padding: 15px 20px 20px 15px; margin: 0px 0px 15px 0px; background: url(../img/backgroundlabel.jpg); height: 59px; box-shadow: 0px 2px 6px 0px #242424; -webkit-box-shadow: 0px 2px 6px 0px #242424; -moz-box-shadow: 0px 2px 6px 0px #242424; -o-box-shadow: 0px 2px 6px 0px #242424; } .Contact_Section_Body .Contact_Section_Body_Content_Form_Label_Top p { font-size: 20px; color: #fff; text-transform: uppercase; text-shadow: rgb(3, 3, 3) 0px 1px 1px;; } /* <<< Contact Section Body Contact_Section_Body_Content_Form_Label_Bottom >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Form_Label_Bottom { padding: 15px 20px 20px 15px; margin: 0px 0px 15px 0px; background: url(../img/backgroundlabel.jpg); height: 59px; box-shadow: 0px 2px 6px 0px #242424; -webkit-box-shadow: 0px 2px 6px 0px #242424; -moz-box-shadow: 0px 2px 6px 0px #242424; -o-box-shadow: 0px 2px 6px 0px #242424; } .Contact_Section_Body .Contact_Section_Body_Content_Form_Label_Bottom p { font-size: 20px; color: #fff; text-transform: uppercase; text-shadow: rgb(3, 3, 3) 0px 1px 1px;; } .Contact_Section_Body .Contact_Section_Body_Content_Form_Label_Bottom p span { font-size: 20px; color: #FF0; text-shadow: rgb(3, 3, 3) 0px 1px 1px; cursor: pointer; } /* <<< Contact Section Body Contact_Section_Body_Content_Form fieldset >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Form fieldset { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } .Contact_Section_Body .Contact_Section_Body_Content_Form p { padding: 0px; margin: 0px 0px 15px 0px; } /* <<< Contact Section Body Contact_Section_Body_Content_Form input.field >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Form input.field { width: 100%; height: 50px; padding: 10px 60px 10px 20px; background-color: #FFF; border-width: 2px; border-style: solid; border-color: #333; border-radius: 0px; font-size: 15px; color: #3B3B3B; font-family: 'Open Sans', sans-serif; font-weight: 400; box-shadow: 0px 2px 6px 0px #242424; -webkit-box-shadow: 0px 2px 6px 0px #242424; -moz-box-shadow: 0px 2px 6px 0px #242424; -o-box-shadow: 0px 2px 6px 0px #242424; } /* .Contact_Section_Body .Contact_Section_Body_Content_Form input:required:valid { background-image:url(../img/tick.png); background-position: right top; background-repeat: no-repeat; background-color: #FFF; } */ .Contact_Section_Body .Contact_Section_Body_Content_Form input:required:valid { border-width: 2px; border-style: solid; border-color: #0F0; } /* <<< Contact Section Body Contact_Section_Body_Content_Form input.field:focus >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Form input.field:focus { outline: none; background-color: #FFF3CE; border-width: 2px; border-style: solid; border-color: #f88e04; border-radius: 0px; font-size: 15px; color: #333; font-family: 'Open Sans', sans-serif; font-weight: 400; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; } /* <<< Contact Section Body Contact_Section_Body_Content_Form textarea >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Form textarea { width: 100%; height: 156px; resize: none; padding: 14px 60px 10px 20px; background-color: #FFF; border-width: 2px; border-style: solid; border-color: #333; border-radius: 0px; font-size: 15px; color: #3B3B3B; font-family: 'Open Sans', sans-serif; font-weight: 400; box-shadow: 0px 2px 6px 0px #242424; -webkit-box-shadow: 0px 2px 6px 0px #242424; -moz-box-shadow: 0px 2px 6px 0px #242424; -o-box-shadow: 0px 2px 6px 0px #242424; } /* .Contact_Section_Body .Contact_Section_Body_Content_Form textarea:required:valid { background-image:url(../img/tick.png); background-position: right top; background-repeat: no-repeat; background-color: #FFF; } */ .Contact_Section_Body .Contact_Section_Body_Content_Form textarea:required:valid { border-width: 2px; border-style: solid; border-color: #0F0; } /* <<< Contact Section Body Contact_Section_Body_Content_Form textarea:focus >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Form textarea:focus { outline: none; background-color: #FFF3CE; border-width: 2px; border-style: solid; border-color: #f88e04; border-radius: 0px; font-size: 15px; color: #333; font-family: 'Open Sans', sans-serif; font-weight: 400; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; } /* <<< Contact Section Body Contact_Section_Body_Content_Form .button >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Form .button { padding: 12px 0px 13px 0px; margin-top: -3px; margin-bottom: 0px; font-size: 15px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 400; text-align: center; background-image:url(../img/backgroundlabel.jpg); border: 0px; text-transform: uppercase; width: 100%; cursor: pointer; box-shadow: 0px 2px 6px 0px #242424; -webkit-box-shadow: 0px 2px 6px 0px #242424; -moz-box-shadow: 0px 2px 6px 0px #242424; -o-box-shadow: 0px 2px 6px 0px #242424; border-radius: 0px; transition: all 0.3s ease; } /* <<< Contact Section Body Contact_Section_Body_Content_Form .button:hover >>> */ .Contact_Section_Body .Contact_Section_Body_Content_Form .button:hover { background: #f88e04; color: #003; } .Contact_Section_Body .Contact_Section_Body_Content_Form .Contact_Section_Body_Content_Address_BackToTop { float: right; height: 40px; width: 40px; object-fit: contain; margin: 50px 27px 0px 0px; padding: 0px 0px 0px 0px; } .Contact_Section_Body .Contact_Section_Body_Content_Form .Contact_Section_Body_Content_Address_BackToTop img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ } .Contact_Section_Body .Contact_Section_Body_Content_Form .Contact_Section_Body_Content_Address_BackToTop img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } /* <<< footer >>> */ footer { overflow: hidden; width: 100%; text-align: center; background: rgba(0, 0, 0, 0.6); } footer .Content { padding: 28px 0px; max-width: 1100px; margin: auto; } footer .Content p { padding: 0px; font-size: 12px; color: #a9abad; font-family: 'Open Sans', sans-serif; margin: 0px; } footer .Content a { color: #a9abad; text-decoration: none; } footer .Content a:hover { color: #f88e04; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* CONTACT - ends here */ /* ========================================================================== Author's custom styles ========================================================================== */ #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ z-index: 1001; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ } 100% { -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ } } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #222222; z-index: 1000; -webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: translateX(0); /* Firefox 16+, IE 10+, Opera */} #loader-wrapper .loader-section.section-left { left: 0; } #loader-wrapper .loader-section.section-right { right: 0; } /* Loaded */ .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); } .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); } .loaded #loader { opacity: 0; transition: all 0.3s ease-out; } .loaded #loader-wrapper { visibility: hidden; -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */ transition: all 0.3s 1s ease-out; } /* JavaScript Turned Off */ .no-js #loader-wrapper { display: none; } /* <<< WEBSITE ENDS HERE >>> */