@CHARSET "ISO-8859-1"; /* Reset CSS * --------------------------------------- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } a{ text-decoration:none; } table { border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; } strong{ font-weight: bold; } ol,ul { list-style: none; margin:0; padding:0; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; margin:0; padding:0; color:#444; } q:before,q:after { content:''; } abbr,acronym { border: 0; } .white { color: #fff; } /*hide menu*/ .container{ max-width: 100%; margin: 0 auto; } /* nav .orange{ color: #e88873; } nav .red{ color: #fd5f65; } nav .green{ color: #59b76f; } nav .darkblue{ color: #3f75aa; } nav .blue{ color: #65c6ea; } nav a:hover{ color: #414141; }*/ /*MOBILE MENU*/ .open{ top: 0; } .menu-btn{ display: none; } .close-btn{ display: none; } nav{ position: absolute; top: -1600px; left: 0; right: 0; background: #fff; transition: all 0.5s; font-family: arial; z-index: 1000001; } nav > ul{ max-width: 900px; margin: 10px auto; text-align: center; } nav > ul > li > a{ font-size: 72px; font-weight: bold; padding: 10px 0 40px 0; display: block; } nav > ul > li{ padding: 40px 0 0 0; } nav > ul > li span{ font-style: italic; font-size: 20px; padding-bottom: 20px; color: #adadad; } .line{ border-bottom: 1px solid #e0e0e0; } /*.sub-menu{ border-bottom: 1px solid #e0e0e0; padding-bottom: 30px; } .sub-menu li{ display: inline-block; font-size: 18px; margin: 10px; font-weight: bold; }*/ /* Headings * --------------------------------------- */ h1{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:300; color: #fff; margin:0; padding:0; } h1{ /*font-size: 5em;*/ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:300; color: #fff; margin:0; padding:0; } /* Centered texts in each section * --------------------------------------- */ .section{ text-align:center; } /* Backgrounds will cover all the section * --------------------------------------- */ #section0, #section1, #section2, #section3, #section4, #section5 { background-size: cover; } /*Adding background for the slides * --------------------------------------- */ #slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10, #slide11, #slide12, #slide13, #slide14, #slide15, #slide16, #slide17, #slide18, #slide19{ background: #000000; position:relative; padding: 6% 0 0 0; } .martinLeft { float:left; width:45%; } .martinRight { float:left; width:45%; text-align:left; } @media all and (max-width:767px) { .martinLeft { width:100%; clear:none; margin-left:5%; } .martinRight { width:95%; clear:none; margin-left:5%; } } @media all and (max-width:444px) { header#masthead {padding-bottom: 15px;} .font-48 {font-size: 32px;line-height: 32px;} .button a {width: auto;display: block; font-size: 0.8em;margin-right: 0; padding: 5px 5px 5px 5px; margin-right: 2px; width:auto; line-height: 24px; } .font-28 {font-size: 16px;line-height: 28px;} } /* video * --------------------------------------- */ .videowrap { height: auto; left: 7%; position: absolute; top: 0; width: 85%; z-index: 999999; } /* Layer with position absolute in order to have it over the video * --------------------------------------- */ #section5 .videowrap .layer { border: 1px solid #a42628; bottom: 10%; color: #ffffff; height: 200px; left: 50%; position: fixed; width: 5%; z-index: 999999; } /*solves problem with overflowing video in Mac with Chrome */ #section5{ overflow: hidden; } .videotext { margin:0; padding:20px; position:absolute; top: 110px; left: -150px; text-align:left; width: 30%; height: auto; z-index:999999; background-color: rgba(0,0,0,0.7); -webkit-border-top-left-radius: 70px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 70px; -moz-border-radius-topleft: 70px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 70px; border-top-left-radius: 70px; border-top-right-radius: 5px; border-bottom-right-radius: 70px; } .videotext p{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:400; color: #fff; text-align: left; font-size:1.1em; } .videotext h1{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:700; color: #fff; text-align: left; font-size:1em; padding-bottom:3px; letter-spacing:1px; } .videotext img{ margin: 0 auto; text-align:center !important; } /* Custom CSS * --------------------------------------- */ body{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight: 300; color: #fff; } #pagewrap{ margin: 0 auto; height: auto; width: 100%; position: relative; } .wrap{ margin: 20px auto; height: auto; width: 80%; position: relative; /*padding: 40px 0 40px 0;*/ padding: 30px; background-color: rgba(255,255,255,0.7); } .wrap2{ margin: 0 auto; width: 80%; position: relative; padding: 240px 0 40px 0; } .wrap h1, .wrap2 h1, .wrap3 h1{ font-size: 3em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:300; color: #fff; margin:0; padding:0; text-align:left; } .wrap3{ margin: 0 auto; width: 75%; position: relative; padding: 60px; } .wrap3 p{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1em; color: #222222; padding-bottom:20px; } .wrap4{ margin: 0 auto; width: 90%; position: relative; padding: 200px 0 40px 0; } p{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1em; color: #222222; padding-bottom:20px; } #contact{ width: 80%; margin: 0 auto; color: #fff; height:auto; } #contact h1{ font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-size: 3.5em !important; color: #fff; padding-bottom:20px; letter-spacing:1px; } .contact{ font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-size: 2.5em; color: #fff; padding-bottom:20px; letter-spacing:1px; } .intro { font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight:300; color: #000; margin:0; padding:0; position:absolute; top: 180px; left: 40px; text-align:left; width: 100%; height: auto; z-index:999999; } .intro p{ width: 50%; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; margin: 0 auto; font-size: 1.5em; color: #000; } .intro h1{ font-size: 3em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight:400; color: #fff; margin:0; padding:0; text-align:left; } .intro2 { background-color: rgba(69, 92, 129, 0.1); font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:300; color: #2A4159; margin:0; padding:20px; position:absolute; bottom: 110px; left: 40px; text-align:left; width: auto; height: auto; z-index:999999; } .intro2 p{ width: 50%; margin: 0 auto; font-size: 1.5em; color: #2A4159; } .intro2 h1{ font-size: 2em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight:300; color: #2A4159; margin:0; padding:0; text-align:left; } .intro h1 a, .intro h1 a:active{ font-size: 3em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; color: #fff; margin:0; padding:0; position:absolute; bottom: 40px; left: 40px; text-align:left; } .intro h1 a:hover{ font-size: 3em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight:300; color: #ccc; background-color: rgba(255,255,25,0.7); margin:0; padding:0; position:absolute; bottom: 40px; left: 40px; text-align:left; } .intro3 { font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight:300; color: #2A4159; margin:0; padding:0; position:absolute; bottom: 110px; left: 40px; text-align:left; width: 100%; height: auto; z-index:999999; } .intro3 p{ width: 50%; margin: 0 auto; font-size: 1.5em; color: #2A4159; } .intro3 h1{ font-size: 3em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight:300; color: #2A4159; margin:0; padding:0; text-align:left; } .intro3 h1 a, .intro3 h1 a:active{ font-size: 3em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight:300; color: #2A4159; margin:0; padding:0; position:absolute; bottom: 40px; left: 40px; text-align:left; } .intro3 h1 a:hover{ font-size: 3em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight:300; color: #ccc; background-color: rgba(255,255,25,0.7); margin:0; padding:0; position:absolute; bottom: 40px; left: 40px; text-align:left; } /* ---------------------------------------------------------------- box ---------------------------------------------------------------- */ #box { cursor:pointer; border: 1px solid #fff; color: #31398c; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1em; font-weight: normal; padding: 20px; text-align: center !important; width: 20%; position:absolute; bottom: 20px; right: 80px; width: 200px; display:block; } #box a:link, #box a:active { cursor:pointer; text-decoration:none; color: #fff; text-align: center; background: rgba(255,255,255, 1); } .bg { cursor:pointer; background-color: rgba(255,255,255, 1.0); text-align: center; } #box h1 { color: #fff; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif !important; font-size: 1em; font-weight: normal; letter-spacing: 1px; margin: 0; padding-top: 0 !important; text-align: center !important; } #box a:hover{ cursor:pointer; color: red; text-align: center; } /* BUTTONS*/ .button { background-color: rgba(255,255,255, 0.0); border: 1px solid #ccc; color: #fff; cursor: pointer; display: block; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-size: 1em; height: auto; overflow: visible; padding: 10px !important; position: relative; width: 200px; letter-spacing:2px; text-align:center; } .button:hover { background-color: rgba(255,255,255, 0.3); } .button2 { background-color: rgba(255,255,255, 0.1); border: 1px solid #2A4159; color: #2A4159; cursor: pointer; display: block; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-size: 1em; height: auto; overflow: visible; padding: 10px !important; position: relative; width: 200px; letter-spacing:2px; margin:0 auto; } .button2:hover { background-color: rgba(255,255,255, 0.3); } .button3 { border: 1px solid #2A4159; color: #2A4159; cursor: pointer; display: block; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-size: 1em; height: auto; overflow: visible; padding: 10px !important; position: relative; width: 200px; letter-spacing:2px; margin:0; } .button3:hover { background-color: rgba(255,255,255, 0.2); } .button4{ background-color: rgba(255,255,255, 0.0); border: 1px solid rgba(255,255,255, 0.2); color: #fff; cursor: pointer; display: block; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-size: 1em; height: auto; overflow: visible; padding: 10px !important; position: relative; width: 230px;box letter-spacing:2px; text-align:center; margin:6px auto; } .button4:hover { background-color: rgba(255,255,255, 0.3); } .button5{ background-color: rgba(255,255,255, 0.0); color: #fff; display: block; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-size: 1em; height: auto; overflow: visible; padding: 10px !important; position: relative; width: 230px;box letter-spacing:2px; text-align:center; margin:6px auto; } .accordion { width: 80%; padding: 25px; } .single-accordion { height: 45px; overflow: hidden; background: transparent; color:#fff; margin-bottom: 5px; padding: 10px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; } .single-accordion:hover { height: 550px; border-radius: 10px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; } .single-accordion h2:hover { cursor: pointer; } .single-accordion h2 { color: #ffffff; font-size: 0.9em; font-family: futura, futura-pt, sans-serif; } .single-accordion p { line-height: 25px; color: #fff; text-align: justify; padding: 10px; } .single-accordion2 { height: 45px; overflow: hidden; background: transparent; color:#fff; margin-bottom: 5px; padding: 10px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; } .single-accordion2:hover { height: 1200px; border-radius: 10px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; } .single-accordion2 h2:hover { cursor: pointer; } .single-accordion2 h2 { color: #ffffff; font-size: 1em; font-family: futura, futura-pt, sans-serif; } .single-accordion2 p { line-height: 25px; color: #fff; text-align: justify; padding: 10px; } .btnmore { display: none; } .mainheading{ margin:20px auto 10px; display:block; border-bottom:1px solid #2A4159; width: 40%; padding-bottom: 5px; z-index:999999; } .mainheading h1 { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 3em; text-align: center; font-weight: normal; color: #2A4159; margin-top: 10px; letter-spacing: 1px; padding-bottom: 0; margin-left:auto; margin-right:auto; } .tagline { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1.7em !important; text-align: center; font-weight: normal; color: #2A4159; letter-spacing: 3px; padding-bottom: 5px; margin: 0 auto; } .mainheading2{ margin:40px auto; display:block; border-bottom:1px solid #2A4159; width: 60%; padding-bottom: 20px; text-align: center; } .mainheading2 h1 { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1.5em; text-align: center; font-weight: normal; color: #2A4159; margin-top: 10px; letter-spacing: 1px; padding-bottom: 10px; margin-left:auto; margin-right:auto; animation: 15s fadein; -moz-animation: 15s fadein; /* Firefox */ -webkit-animation: 15s fadein; /* Safari and Chrome */ -o-animation: 15s fadein; /* Opera */ } .mainheading2 h1 .tagline { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 0.9em !important; text-align: center; font-weight: normal; color: #666; margin-top: 10px; letter-spacing: 2px; padding-bottom: 10px; margin-left:auto; margin-right:auto; } .mainheading3{ margin:40px auto; display:block; border-bottom:1px solid #fff; width: 60%; padding-bottom: 20px; text-align: center; } .mainheading3 h1 { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1.6em; text-align: center; font-weight: normal; color: #fff; margin-top: 10px; letter-spacing: 1px; padding-bottom: 10px; margin-left:auto; margin-right:auto; } .mainheading3 h1 .tagline { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 0.9em !important; text-align: center; font-weight: normal; color: #fff; margin-top: 10px; letter-spacing: 2px; padding-bottom: 10px; margin-left:auto; margin-right:auto; } .mainheading4{ margin:40px auto; display:block; border-bottom:1px solid #2A4159; width: 60%; padding-bottom: 20px; text-align: center; } .mainheading4 h1 { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1.5em; text-align: center; font-weight: normal; color: #fff; margin-top: 10px; letter-spacing: 1px; padding-bottom: 10px; margin-left:auto; margin-right:auto; animation: 15s fadein; -moz-animation: 15s fadein; /* Firefox */ -webkit-animation: 15s fadein; /* Safari and Chrome */ -o-animation: 15s fadein; /* Opera */ } .mainheading4 h1 .tagline { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 0.9em !important; text-align: center; font-weight: normal; color: #fff; margin-top: 10px; letter-spacing: 2px; padding-bottom: 10px; margin-left:auto; margin-right:auto; } .mainheading5{ margin:0 auto 30px; display:block; border-bottom:1px solid #ffffff; width: 60%; padding-bottom: 50px; text-align: center; } .mainheading5 h1 { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1.8em; text-align: center; font-weight: normal; color: #fff; margin-top: 10px; letter-spacing: 1px; padding-bottom: 10px; margin-left:auto; margin-right:auto; animation: 15s fadein; -moz-animation: 15s fadein; /* Firefox */ -webkit-animation: 15s fadein; /* Safari and Chrome */ -o-animation: 15s fadein; /* Opera */ } .mainheading5 h1 .tagline { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1.3em !important; text-align: center; font-weight: normal; color: #fff; margin-top: 30px; letter-spacing: 2px; padding-bottom: 10px; margin-left:auto; margin-right:auto; } .textbox5 p .italic { font-family: Georgia, futura-pt, FuturaPT-Book,'Century Gothic', Verdana, Helvetica, Arial, sans-serif; font-size: 0.9em !important; text-align: center; font-weight: normal; color: #2A4159; margin-top: 10px; padding-bottom: 10px; margin-left:auto; margin-right:auto; font-style: italic; } .section{ text-align:center; } .sound{ width: 9%; height: auto; padding: 10px 10px 0 0; opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } .sound:hover { opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ cursor: pointer; border:none; } .soundicon{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #ffffff; font-size: 1em; text-align: left; padding:0 20px 0 0; min-height:100px; position:fixed; top:5px; right:5px; width: 200px; height: auto; z-index:999999; } .icon { margin-left: 10px; opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } .icon:hover { opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ cursor: pointer; border:none; } #topnav{ position:fixed; top:5px; right: 20px; min-height: 30px; z-index: 999999; width: 10%; padding: 0; margin:0; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight: normal; color: #fff; letter-spacing:1px; font-size:0.9em; text-align:right; } #topnav2{ position:fixed; top:15px; right: 25px; z-index: 999999; width: 30%; padding: 0; margin:0; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight: normal; color: #fff; letter-spacing:0; font-size:0.8em; text-align:right; } #topnav li { display:inline; margin: 0 5px 0 0; color: #fff; text-align:right; background-color: transparent !important; font-size: 0.9em; } #topnav li a{ text-decoration:none; color: #fff; } #topnav li a:hover{ color: #3D5E7F; } /* menu * --------------------------------------- */ #menu li { display:block; margin: 5px; color: #fff; text-align:right; background-color: transparent !important; font-size:1em; line-height:100%; } #menu li.active{ color: #fff; } #menu li a{ text-decoration:none; color: #fff; } #menu li.active a:hover{ color: #3D5E7F; } #menu li a:hover{ color: #3D5E7F; } #menu li a, #menu li.active a{ padding: 0 2px 0 0; display:block; } #menu li.active a{ color: #fff; } #menu{ position:absolute; top:50px; right: 50px; min-height: 50px; z-index: 1000000; width: 80%; padding: 0; margin:0; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight: normal; color: #fff; letter-spacing:1px; font-size:1.1em; } #menu li a.demo{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight: bold; color: #2a4159 !important; letter-spacing:1px; font-size:0.9em; padding-top: 12px; } #menu li a.demo:hover{ color: #fff !important; } #menuwrap{ position: absolute; top: 0; right:0; float:right; width:250px; margin: 0 auto; min-height:230px; height:auto; padding:0 0 0 0; z-index:22000; text-align: center; color:#F5F2F2; background-color: rgba(69,92,129,0.6); animation-delay: 10s; animation: fadeInDown 3s; -moz-animation: fadeInDown 3s; /* Firefox */ -webkit-animation: fadeInDown 3s; /* Safari and Chrome */ -o-animation: fadeInDown 3s; /* Opera */ } #menubg{ position: absolute; top: 0; left: 0; width:100%; margin: 0 auto; min-height:200px; height:20%; padding:0 0 0 0; z-index:999999; text-align: center; background-color: rgba(69,92,129,0.2); color:#F5F2F2; } .stockItemSlideshowWrapper .stockItemSlideshowWrapperZoom { width:100%;clear:both;pading-top:20px;padding-bottom:20px; } .stockItemSlideshowWrapperZoom {pading-top:10px;} .stockItemSlideshow {width:15%; float:left; } .stockItemSlideshow img {width:60px; height:60px; } .stockItemSlideshowWrapperPreview { width:100%;clear:both;pading-top:20px;padding-bottom:20px; } .stockItemSlideshowPreview {width:18%; float:left; padding:2px; } .stockItemSlideshowPreview img {width:60px; height:60px; border:1px solid #eeeeee; } .stockItemImage {text-align:center; } .stockItemImage img { width:100%;height:auto;max-height:480px; max-width:90%;} .fixednoanimation{ position: fixed !important; top: 0; left: 0; width:100%; background-color: rgba(69,92,129,0.3)!important;; animation-delay: none!important; -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; } .noanimation{ background-color: rgba(69,92,129,0.1)!important;; /* background-color: transparent !important;*/ animation-delay: none!important; -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; min-height: 300px; z-index:999999; } .nobg{ position: fixed !important; top: 0; left: 0; width:100%; background-color: transparent !important; animation-delay: none!important; -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; } #menuwrap h1{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #ffffff; font-size: 1.8em; text-align: left; padding:30px; min-height:100px; } .fixedname{ font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; color: #ffffff; font-size: 1.5em; text-align: left; padding:30px; min-height:100px; position:absolute; top:30px; left:30px; width: 350px; height: auto; z-index:999999; } .largename{ font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-size: 1.3em; color: #fff; padding-bottom:20px; letter-spacing:1px; } .fixednameresp{ visibility: hidden; } .largenameresp{ visibility: hidden; } .fixednamehide{ min-height:100px; position:fixed; top:30px; left:30px; width: 350px; height: auto; z-index:1100000; background-color:#000000; } .noname{ display: none; } /* ---------------------------------------------------------------- animations ---------------------------------------------------------------- */ @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } } @-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity: 1; } } /************* * FadeInDown * *************/ @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-400px); } 50%{ opacity: 0.5; } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown{ opacity: 0; -webkit-transform: translateY(-400px); transform: translateY(-400px); } .fadeInDown.go { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } /*=== FADE IN LEFT ===*/ @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; -moz-transform:none; -o-transform:none; } } @-moz-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; -moz-transform:none; -o-transform:none; } } @-o-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; -moz-transform:none; -o-transform:none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; -moz-transform:none; -o-transform:none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } .animated { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; -ms-animation-duration: 3s; -o-animation-duration: 3s; animation-duration: 3s; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } .delay { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } /*==== FADE IN RIGHT ===*/ @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; -moz-transform:none; -o-transform:none; } } @-moz-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; -moz-transform:none; -o-transform:none; } } @-o-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; -moz-transform:none; -o-transform:none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; -moz-transform:none; -o-transform:none; } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } /*FADE IN */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } /* ---------------------------------------------------------------- obras musicales flexbox ---------------------------------------------------------------- */ .flexcontainer { display: -webkit-flex; display: flex; display: -moz-flex; display: -ms-flex; display: -o-flex; -webkit-flex-direction: column;/* works with row or column */ -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: auto; width: 70%; margin:0 auto; width: 50%; height: auto; padding:30px; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: left; z-index: 999999; color: #2A3F59; background-color: rgba(69,92,129,0.3); } .flex-item { padding: 20px; width: 80%; height: auto; border-bottom:1px solid #2A3F59; z-index: 999999; background-image:url(images/arrow-right.png); background-repeat:no-repeat; background-position:right 50%; background-size: 3%; } .flex-item2 { padding: 10px; width: 100%; height: auto; border-bottom:1px solid #2A3F59; z-index: 999999; } .flex-item2 .player { padding: 20px 0 0 0; width: 100%; margin: 0 auto; text-align: center; } .flex-item:hover { background-color: rgba(255,255,255,0.2); } .flex-item:hover a { background-color: rgba(69,92,129,0.2); } .last{ border-bottom:none !important; } .flex-item p { padding: 0; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: left; z-index: 12000; color: #2A3F59; } .flex-item h1 { font-size: 1.3em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: left; color: #ffffff; font-weight:bold; padding: 8px 0 0 0; letter-spacing:1px; } .flex-item h2 { font-size: 0.9em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: left; color: #ffffff; font-weight:normal; padding: 5px 0 0 0; } /* ---------------------------------------------------------------- demos - flexbox ---------------------------------------------------------------- */ .demowrap { display: -webkit-flex; display: flex; display: -moz-flex; display: -ms-flex; display: -o-flex; -webkit-flex-direction: row; /* works with row or column */ -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: auto; width: 100%; margin:0 auto; } .demowrap2 { display: -webkit-flex; display: flex; display: -moz-flex; display: -ms-flex; display: -o-flex; -webkit-flex-direction: row; /* works with row or column */ -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: auto; width: 100%; margin:60px auto 0; } .demo-item { padding: 20px; width: 50%; height: auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item p { padding: 30px; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item h1 { font-size: 1.3em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:normal; padding: 0 0 10px 0; border-bottom:1px solid #ffffff; } .demo-item2 { padding: 20px; width: 50%; height: auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color:#ffffff; font-weight:300; text-align: left; font-size: 1em; } .demo-item2 p { padding: 20px 0 5px 0; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: left; color: #ffffff; font-weight:300; font-size: 1em; text-align: left; } .demo-item2 h1 { font-size: 1.3em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: left; color: #ffffff; font-weight:normal; padding: 0 0 10px 0; border-bottom:1px solid #ffffff; } .demo-item2 .player { padding: 20px 0 0 0; text-align: left; } .demo-item3 { padding: 20px; width: 50%; height: auto; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item3 p { padding: 30px; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; text-align: center; } .demo-item3 h1 { font-size: 1.3em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:normal; padding: 0 0 10px 0; border-bottom:1px solid #ffffff; } .demo-item3 h2 { font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:normal; padding: 0 0 10px 0; } .demo-item4 { padding: 20px; width: 50%; height: auto; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item4 p { padding: 30px; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; text-align: center; } .demo-item4 h1 { font-size: 1.3em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:normal; padding: 0 0 10px 0; border-bottom:1px solid #ffffff; } .demo-item5 { padding: 20px; width: 50%; height: auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item5 p { padding: 30px; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; text-align: center; } .demo-item5 h1 { font-size: 1.3em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:normal; padding: 0 0 10px 0; border-bottom:1px solid #ffffff; } .demo-item5 { padding: 20px; width: 50%; height: auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item5 p { padding: 30px; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; text-align: center; } .demo-item5 h1 { font-size: 1.3em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:normal; padding: 0 0 10px 0; border-bottom:1px solid #ffffff; } .textblock1{ width: 100%; height: auto; min-height:350px; padding:0; margin: 30px auto; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #666; text-align: center; z-index: 12000; } .textblock1 p, .textblock-slideup p, .textbox2 p{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #333; font-weight: 300; font-weight:400; font-size: 0.9em; } .textblock-slidedown{ width: 70%; height: auto; position: absolute; bottom: 8%; left: 13%; padding:30px; margin: 0 auto; font-size: 1em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; text-align: center; z-index: 12000; background-color: rgba(69,92,129,0.5); color:#ffffff; animation-duration: fadeInDown 5s; -webkit-animation-duration: fadeInDown 5s; -moz-animation-duration: fadeInDown 5s; -o-animation-duration: fadeInDown 5s; animation-delay: fadeInDown 10s; animation: fadeInDown; -moz-animation: fadeInDown 10s; /* Firefox */ -webkit-animation: fadeInDown 10s; /* Safari and Chrome */ -o-animation: fadeInDown 10s; /* Opera */ } .crane-logo{ width: auto; height: auto; position: absolute; top: 1%; left: 2%; padding:30px; margin: 0 auto; font-size: 1em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; text-align: center; z-index: 12000; color:#ffffff; animation-duration: fadeIn 5s; -webkit-animation-duration: fadeIn 5s; -moz-animation-duration: fadeIn 5s; -o-animation-duration: fadeIn 5s; animation-delay: fadeIn 10s; animation: fadeIn; -moz-animation: fadeIn 10s; /* Firefox */ -webkit-animation: fadeIn 10s; /* Safari and Chrome */ -o-animation: fadeIn 10s; /* Opera */ } .crane-logo-small{ width: auto; height: auto; position: absolute; top: 8%; left: 1%; padding:30px; margin: 0 auto; font-size: 1em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; text-align: center; z-index: 12000; color:#ffffff; animation-duration: fadeIn 5s; -webkit-animation-duration: fadeIn 5s; -moz-animation-duration: fadeIn 5s; -o-animation-duration: fadeIn 5s; animation-delay: fadeIn 10s; animation: fadeIn; -moz-animation: fadeIn 10s; /* Firefox */ -webkit-animation: fadeIn 10s; /* Safari and Chrome */ -o-animation: fadeIn 10s; /* Opera */ } .crane-logo-small-cent{ animation-duration: fadeIn 5s; -webkit-animation-duration: fadeIn 5s; -moz-animation-duration: fadeIn 5s; -o-animation-duration: fadeIn 5s; animation-delay: fadeIn 10s; animation: fadeIn; -moz-animation: fadeIn 10s; /* Firefox */ -webkit-animation: fadeIn 10s; /* Safari and Chrome */ -o-animation: fadeIn 10s; /* Opera */ } .slidewrap{ width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; padding:30px; margin: 00; } .textblock-slidedown2{ width: 70%; height: auto; position: absolute; top: 3%; left: 15%; padding:30px; margin: 0 auto; font-size: 1em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight:400; text-align: center; z-index: 1999999; color:#ffffff; animation-duration: fadeInDown 5s; -webkit-animation-duration: fadeInDown 5s; -moz-animation-duration: fadeInDown 5s; -o-animation-duration: fadeInDown 5s; animation-delay: fadeInDown 5s; animation: fadeInDown; -moz-animation: fadeInDown 5s; /* Firefox */ -webkit-animation: fadeInDown 5s; /* Safari and Chrome */ -o-animation: fadeInDown 5s; /* Opera */ } .textblock-slidedown p{ font-size: 1.2em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight: normal; font-style: normal; text-align: center; color:#F5F2F2; } .textblock-slidedown2 p{ font-size: 1.2em; font-family: futura, futura-pt, FuturaPT-Book, sans-serif; font-weight:400; text-align: center; color:#F5F2F2; line-height:100%; } .textblock-slidedown2 a, .textblock-slidedown2 a:active{ font-size: 1.2em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight:400; text-align: center; color:#F5F2F2; line-height:100%; text-decoration:none; } .textblock-slidedown2 a:hover{ color:#5D93CA; text-decoration:none; } .textblock-slidedown2 h1{ font-size: 1.8em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:400; text-align: center; color:#F5F2F2; } .more{ display:inline; } .priceblock{ width: 70%; height: auto; position: absolute; bottom: 20%; left: 15%; padding:30px; margin: 0 auto; font-size: 1em; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-weight:400; text-align: center; z-index: 1999999; color:#ffffff; background-color:white; animation-duration: fadeInUp 5s; -webkit-animation-duration: fadeInUp 5s; -moz-animation-duration: fadeInUp 5s; -o-animation-duration: fadeInUp 5s; animation-delay: fadeInUp 5s; animation: fadeInUp; -moz-animation: fadeInUp 5s; /* Firefox */ -webkit-animation: fadeInUp 5s; /* Safari and Chrome */ -o-animation: fadeInUp 5s; /* Opera */ opacity:0.75; } .textcontainer{ width: 70%; min-height: 30vh; height:auto; padding:50px 0; margin: 0 auto; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #666; z-index: 12000; } .textcontainer2{ width: 40%; height:auto; margin: 0 auto; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #333; z-index: 999999; text-align:left; position:absolute; bottom: 10%; left: 3%; } .textbox1{ width: 20%; height: auto; padding:15px; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #666; text-align: left; float:left; } .textbox1 img{ height: auto; width: 80%; } .textbox2{ width: 100%; float:left; font-size: 0.9em; text-align: left; height: auto; padding:40px; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #000; font-weight: 300; background-color: rgba(255,255,255,0.7); z-index: 12000; animation: fadein 5s; -moz-animation: fadein 5s; /* Firefox */ -webkit-animation: fadein 5s; /* Safari and Chrome */ -o-animation: fadein 5s; /* Opera */ } .textbox3{ width: 96%; float:left; font-size: 0.9em; text-align: left; height: auto; padding:25px; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #000; font-weight: 300; background-color: rgba(255,255,255,0.7); z-index: 999999; margin-top:10%; } .textbox4{ width: 100%; float:left; text-align: center; height: auto; padding:25px; font-size: 0.9em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #000; font-weight: 300; background-color: rgba(255,255,255,0.7); z-index: 999999; margin-top:5%; } .textbox4 p, .textbox5 p{ width: 100%; text-align: center; font-size: 0.9em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #2A4159; font-weight: 300; line-height:130%; animation: 15s fadein; -moz-animation: 15s fadein; /* Firefox */ -webkit-animation: 15s fadein; /* Safari and Chrome */ -o-animation: 15s fadein; /* Opera */ } .textbox5{ width: 75%; margin:0 auto; font-size: 0.9em; text-align: left; height: auto; padding:80px; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #666; font-weight: normal; background-color: rgba(255,255,255,0.7); z-index: 999999; } .textbox6{ width: 85%; margin:0 auto; font-size: 0.9em; text-align: center; height: auto; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #666; font-weight: normal; z-index: 999999; } .textbox7{ width: 75%; margin:0 auto; font-size: 0.9em; text-align: left; height: auto; padding:80px; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #666; font-weight: normal; background-color: rgba(69,92,129,0.7); z-index: 999999; } .spacer1{ width: 75%; margin:0 auto; height: 800px; } /*carousel discografia*/ #simple .frame { width: 100%; height: 100%; z-index:999999; } #simple .frame ul { list-style: none; height: 100%; padding: 0; margin: 0; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; } #simple .frame ul li { float: left; height: 100%; padding: 0 10px; } #simple .frame ul li img { max-width: none; } #simple .frame ul li .details { padding-top: 10px; font-weight: 300; } #simple .frame ul li .details strong { display: block; color: #000; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; } #simple .frame ul li .details b { } #simple ul.mSPages { float: right; margin-bottom: 20px; margin-right: 12px; } #simple .mSButtons { top: 91px; bottom: auto; } /*ver demo button animation*/ .box { background-color: rgba(69, 92, 129, 0.6); float: right; border-radius: 10px; cursor: pointer; height: auto; line-height: 40px; text-align: center; -webkit-transition-property: background, border-radius; transition-property: background, border-radius; -webkit-transition-duration: .2s, 1s; transition-duration: .2s, 1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; width: 115px; color: #fff; margin-top:10px; font-size:1em; } .box:hover { background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; line-height: 40px; } .box2 { background-color: rgba(69, 92, 129, 0.8); border-radius: 10px; cursor: pointer; height: auto; line-height: 70px; text-align: center; -webkit-transition-property: background, border-radius; transition-property: background, border-radius; -webkit-transition-duration: .2s, 1s; transition-duration: .2s, 1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; width: 200px; color: #fff; margin:10px auto; font-size:1em; padding:20px; } .box2:hover { background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; line-height: 70px; } /* tablets and desktops ----------- */ @media only screen and (min-width : 768px) and (max-width : 1024px) { .demo-item { display: block !important; margin: 0 auto; padding: 10px; width: 80%; height: auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item3 { display: block !important; margin: 0 auto; padding: 10px; width: 90%; height: auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item4 { display: block !important; margin: 0 auto; padding: 10px; width: 90%; height: auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } #topnav{ position:fixed; top:5px; right: 25px; z-index: 999999; width: 20%; padding: 0; margin:0 0 5px 0; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight: normal; color: #fff; letter-spacing:0; font-size:0.8em; text-align:right; } #menu li { display:block; margin: 5px; color: #fff; text-align:right; background-color: transparent !important; font-size:1em; line-height:120%; } .demowrap, .demowrap2 { display: block !important; height: auto; width: 100%; border-bottom:1px dotted #E2DDDD; margin:15px auto; padding: 40px 0 40px 0; } .videowrap { display: block; height: auto; margin: 30% auto 0 auto; width: 100%; z-index: 999999; } .flex-item2 .player { padding: 0 0 0 0; width: 90%; margin: 0 auto; text-align: center; } .flexcontainer { display: block; -webkit-flex-direction: column; /* works with row or column */ -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: auto; width: 90%; margin:0 auto; padding:2px; font-size: 0.9em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; z-index: 999999; color: #2A3F59; background-color: rgba(69,92,129,0.3); } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { .videowrap { display: block; height: auto; margin: 15% auto; width: 80%; z-index: 999999; } .demo-item { display: block !important; padding: 10px; width: 60%; height: auto; margin: 0 auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item3, .demo-item4 { display:block; padding: 20px; width: 90%; height: auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .mainheading3{ margin:50px auto; display:block; border-bottom:1px solid #fff; width: 80%; padding: 20px 0 20px 0; text-align: center; } } /* mobile */ @media all and (max-width:767px) { .wrap3, .wrap4{ margin: 0 auto; width: 90%; position: relative; padding: 10px 0 10px 0; } .textbox7 { width: 90%; margin:0 auto; font-size: 1em; text-align: center; height: auto; padding:10px; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #fff; font-weight: normal; background-color: rgba(69,92,129,0.6); z-index: 999999; } .spacer1{ display: none; margin:0 auto; } .demo-item { padding: 20px; width: 90%; height: auto; margin: 0 auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item2 { padding: 20px; width: 90%; height: auto; margin: 0 auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color:#ffffff; font-weight:300; text-align: center; font-size: 1em; } .demo-item2 p { padding: 20px 0 5px 0; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item2 h1 { font-size: 1.3em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:normal; padding: 0 0 10px 0; border-bottom:1px solid #ffffff; } .demo-item3, .demo-item4 { display:block; padding: 20px; width: 90%; height: auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item3 h2 { font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff !important; font-weight:normal; padding: 7px 0 10px 0; } .mainheading2{ margin:40px auto; display:block; border-bottom:1px solid #ffffff; width: 80%; padding-bottom: 20px; text-align: center; } .mainheading2 h1, .mainheading3 h1 { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1.2em; text-align: center; font-weight: normal; color: #ffffff; margin-top: 10px; letter-spacing: 1px; padding-bottom: 10px; margin-left:auto; margin-right:auto; animation: 5s fadein; -moz-animation: 5s fadein; /* Firefox */ -webkit-animation: 5s fadein; /* Safari and Chrome */ -o-animation: 5s fadein; /* Opera */ } .mainheading2 h1 .tagline { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 0.9em !important; text-align: center; font-weight: normal; color: #ffffff; margin-top: 10px; letter-spacing: 2px; padding-bottom: 10px; margin-left:auto; margin-right:auto; } .mainheading3{ margin:40px auto; display:block; border-bottom:1px solid #fff; width: 80%; padding-bottom: 20px; text-align: center; } .textbox5 p .italic { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 0.9em !important; text-align: center; font-weight: normal; color: #ffffff; margin-top: 10px; padding-bottom: 10px; margin-left:auto; margin-right:auto; font-style: italic; } .demowrap, .demowrap2 { display: block !important; height: auto; width: 100%; margin:15px auto; border-bottom:1px dotted #E2DDDD; } .videowrap { display: block; height: auto; margin-top: 100px; width: 90%; z-index: 999999; } .demo-item { display: block !important; padding: 10px; width: 100%; height: auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:300; font-size: 1em; } .demo-item h1 { font-size: 1.1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; color: #ffffff; font-weight:normal; padding: 0 0 5px 0; border-bottom:1px solid #ffffff; } .fp-controlArrow.fp-prev { left: 2px; width: 0; border-width: 20.5px 16px 20.5px 0; border-color: transparent rgba(255, 255, 255, 0.7) transparent transparent; } .fp-controlArrow.fp-next { right: 2px; border-width: 20.5px 0 20.5px 16px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.7); } .textblock-slidedown2{ width: 95%; height: auto; position: absolute; top: 1%; left: 5%; padding:5px; margin: 0 auto; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; z-index: 1999999; color:#ffffff; animation-duration: none; -webkit-animation-duration: none; -moz-animation-duration: none; -o-animation-duration: none; animation-delay: none; animation: none; -moz-animation: none; /* Firefox */ -webkit-animation: none; /* Safari and Chrome */ -o-animation: none; /* Opera */ } .textblock-slidedown2 p{ font-size: 1.1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:400; text-align: center; color:#F5F2F2; line-height:120%; padding: 0 0 20px 0; } .textblock-slidedown2 a, .textblock-slidedown2 a:active{ font-size: 1.1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:400; text-align: center; color:#F5F2F2; line-height:120%; text-decoration:none; } .textblock-slidedown2 a:hover{ color:#5D93CA; text-decoration:none; } .textblock-slidedown2 h1{ font-size: 1.1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:400; text-align: center; color:#F5F2F2; } .mainheading5{ margin:0 auto 30px; display:block; border-bottom:1px solid #ffffff; width: 80%; padding-bottom:3px; text-align: center; } .mainheading5 h1 { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1.1em; text-align: center; font-weight: normal; color: #fff; margin-top: 5px; letter-spacing: 1px; padding-bottom: 2px; margin-left:auto; margin-right:auto; animation: 15s fadein; -moz-animation: 15s fadein; /* Firefox */ -webkit-animation: 15s fadein; /* Safari and Chrome */ -o-animation: 15s fadein; /* Opera */ } .mainheading5 h1 .tagline { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1em !important; text-align: center; font-weight: normal; color: #fff; margin-top: 5px; letter-spacing: 1px; padding-bottom: 10px; margin-left:auto; margin-right:auto; } .fixednameresp{ visibility:visible; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #ffffff; font-size: 1.2em; text-align: center; padding:10px 0 0 0; position:absolute; top:40px; left:10%; width: 80%; height: auto; z-index:999999; display:block; } .largenameresp{ visibility:visible; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1em; color: #fff; padding-bottom:20px; letter-spacing:1px; } .intro { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:300; font-size: 1em; color: #fff; margin:0; padding:0; position:absolute; top: 50px; left: 10px; text-align:left; width: 80%; height: auto; z-index:999999; } .intro p{ width: 50%; margin: 0 auto; font-size: 1em !important; color: #FFFFFF; } .intro h1{ font-size: 2.5em !important; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:300; color: #fff; margin:0 0 50px 0; padding:0; text-align:left; width: 100%; } .button { background-color: rgba(255,255,255, 0.0); border: 1px solid #ccc; color: #fff; cursor: pointer; display: block; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 0.9em; height: auto; overflow: visible; padding-left: 10px !important; position: absolute; bottom: 10px !important; left: 0 !important; width: 100px; letter-spacing:1px; text-align:center; margin-left:100px; } #section3 .button3 { background-color: rgba(255,255,255, 0.0); border: 1px solid #ccc; color: #fff; cursor: pointer; display: block; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 0.9em; height: auto; overflow: visible; padding: 10px !important; position: absolute; bottom: 10px !important; left: 0 !important; width: 100px; letter-spacing:1px; text-align:center; } nav li { display: inline; } /*mobile menu*/ .btnHide { display: block; height: 20px; width: 100px; background: lightgreen; text-align: center; padding: 5px; font: 15px Tahoma; border: 1px solid black; text-decoration: none; list-style:none; margin: 10px 0px 10px 0px; } .menu-btn{ cursor: pointer; background-image: url('images/btn-hamburger.png'); height: 50px; width: 50px; background-size: cover; background-color: rgba(69,92,129,0.8); display: inline; z-index: 10001000; position: fixed; top: 0; right: 0; } .close-btn{ background-image: url('images/btn-close.png'); } nav{ position: absolute; top: -1600px; left: 0; right: 0; background: #fff; transition: all 0.5s; font-family: arial; z-index: 1000001; } #menubg{ display: none; } #menu{ display: none; } #menu{ position:absolute; top: -1600px; top: 0; left: 0; height: 100vh; z-index: 1000105; width: 80%; padding: 100px 0 0 10px; margin:0; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight: normal; color: #fff !important; letter-spacing:1px; font-size:1.4em; background-color: rgba(69,92,129,0.5); } #menu li { display:block; margin: 5px; color: #fff; text-align:left; background-color: rgba(69,92,129,0.6); font-size:1.4em; line-height:120%; animation-delay: 15s; animation: fadeInDown 3s; -moz-animation: fadeInDown 3s; /* Firefox */ -webkit-animation: fadeInDown 3s; /* Safari and Chrome */ -o-animation: fadeInDown 3s; /* Opera */ } #menu li.active{ color: #fff; } #menu li a{ text-decoration:none; color: #fff !important; } #menu .resp li.active a:hover{ color: #3D5E7F; } #menu li a:hover{ color: #ccc; } #menu li a, #menu li.active a{ padding: 0 2px 0 0; display:block; } #menu .resp li.active a{ color: #333; } .flexcontainer { display: block; -webkit-flex-direction: column; /* works with row or column */ -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: auto; width: 90%; margin:0 auto; padding:2px; font-size: 0.9em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: left; z-index: 999999; color: #2A3F59; background-color: rgba(69,92,129,0.3); } .flex-item { padding: 5px 0 5px 15px; width: 80%; height: auto; border-bottom:1px solid #2A3F59; z-index: 999999; background-image:url(images/arrow-right.png); background-repeat:no-repeat; background-position:right 50%; background-size: 3%; } .flex-item2 { padding: 0; width: 100%; height: auto; border-bottom:1px solid #2A3F59; z-index: 999999; } .flex-item h1 { font-size: 0.9em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: left; color: #ffffff; font-weight:normal; padding: 5px 0 5px 0; letter-spacing:1px; } .flex-item h2 { font-size: 0.9em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: left; color: #ffffff; font-weight:normal; padding: 5px 0 0 0; } .textblock-slidedown{ width: 90%; height: auto; position: absolute; bottom: 4%; left: 2%; padding:15px; margin: 0 auto; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; text-align: center; z-index: 12000; background-color: rgba(69,92,129,0.5); color:#ffffff; animation-duration: fadeInDown 5s; -webkit-animation-duration: fadeInDown 5s; -moz-animation-duration: fadeInDown 5s; -o-animation-duration: fadeInDown 5s; animation-delay: fadeInDown 2s; animation: fadeInDown 2s; -moz-animation: fadeInDown 2s; /* Firefox */ -webkit-animation: fadeInDown 2s; /* Safari and Chrome */ -o-animation: fadeInDown 2s; /* Opera */ } .textblock-slidedown p{ font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:400; text-align: center; color:#F5F2F2; line-height:110%; } /*sound and languages*/ #topnav{ position:fixed; top:0; left: 3px; z-index: 999999; width: 20%; padding: 0; margin:0; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight: normal; color: #fff; letter-spacing:0; font-size:0.8em; text-align:left; } #topnav li { display:block; margin: 0 3px 0 0; color: #fff; text-align:left; background-color: transparent !important; font-size: 1em; } #topnav li a{ text-decoration:none; color: #fff; } #topnav li a:hover{ color: #3D5E7F; } .sound{ width: 30%; height: auto; padding: 10px 3px 5px 2px; opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } .sound:hover { opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ cursor: pointer; border:none; } .soundicon{ padding-right: 10px; } .fixedname{ display:none; } .largename{ display:none; } /*ver demo button animation*/ .box { background-color: rgba(255, 255, 255, 0.2); float: left; border-radius: 20px; padding: 10px !important; cursor: pointer; height: auto; line-height: 110%; text-align: left; -webkit-transition-property: background, border-radius; transition-property: background, border-radius; -webkit-transition-duration: .2s, 1s; transition-duration: .2s, 1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; width: 60%; color: #fff; margin-top:25px; font-size:0.9em; } #topnavwrap{ display:none; } #menuwrap{ display: fixed; top: 0; left: 0; width:100%; margin: 0 auto; min-height:10px; height:100px; padding:0 0 0 0; z-index:22000; text-align: center; background-color: rgba(69,92,129,0); color:#F5F2F2; animation: none; } /* video * --------------------------------------- */ #myVideo{ display: none; } .intro2 { background-color: rgba(69, 92, 129, 0.1); font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:300; color: #ffffff; margin:0; padding:20px; position:absolute; bottom: 30%; left: 10%; text-align:center; width: 80%; height: auto; z-index:999999; margin: 0 auto; } .intro2 p{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; width: 50%; margin: 0 auto; font-size: 1.5em; color: #ffffff; } .intro2 h1{ font-size: 5em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:300; color: #ffffff; margin:0; padding:0 0 30px 0; text-align:center; } .intro3 { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:300; color: #2A4159; margin:0; padding:0; position:absolute; bottom: 110px; left: 40px; text-align:left; width: 100%; height: auto; z-index:999999; } .intro3 p{ width: 70%; margin: 0 auto; font-size: 3em; color: #2A4159; } .intro3 h1{ font-size: 5em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:300; color: #2A4159; margin:0; padding:0; text-align:left; } .button:hover { background-color: rgba(255,255,255, 0.3); } .contact{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1em !important; color: #fff; padding-bottom:20px; letter-spacing:1px; } #section4.contact h1{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 2em !important; color: #fff; padding-bottom:20px; letter-spacing:1px; } #section4 p{ font-size: 1em !important; } #section4 h1{ font-size: 2em !important; } .mainheading{ margin:20px auto 10px; display:block; border-bottom:1px solid #2A4159; width: 80%; padding-bottom: 5px; z-index:999999; } .mainheading h1 { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1.5em; text-align: center; font-weight: normal; color: #2A4159; margin-top: 40px; letter-spacing: 1px; padding-bottom: 0; margin-left:auto; margin-right:auto; } .tagline { font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1em !important; text-align: center; font-weight: normal; color: #2A4159; letter-spacing: 3px; padding-bottom: 0; margin: 0 auto; } .textblock-slidedown p{ font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-weight:400; text-align: center; color:#F5F2F2; } .more{ position: absolute !important; top: -9999px !important; left: -9999px !important; } .btnmore { display: rgba(255,255,255, 0.0); border: 1px solid #ccc; color: #fff; cursor: pointer; display: block; font-family: futura, futura-pt, FuturaPT-Book, Verdana, sans-serif; font-size: 1.5em; height: auto; overflow: visible; padding: 10px !important; position: relative; width: 80%; letter-spacing:1px; text-align:center; margin: 0 auto; } .btnmore:hover { background-color: rgba(255,255,255, 0.3); } .btnback { background: rgba(255,255,255, 0.0); border: 1px solid #ccc; color: #fff; cursor: pointer; display: block; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1.5em; height: 15px; overflow: visible; padding: 10px !important; position: relative; width: 15px; letter-spacing:2px; text-align:center; margin: 0 auto; border-radius:50%; line-height:12px; } .btnback:hover { background-color: rgba(255,255,255, 0.3); } .resp{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1em !important; color: #fff; padding-bottom:20px; } .wrap3{ margin: 0 auto; width: 100%; padding: 0; } .wrap3 p{ font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; font-size: 1.1em; color: #fff; padding-bottom:20px; } .textbox5{ width:80%; margin:0 auto; line-height: 130%; font-size: 1.1em; text-align: center; height: auto; padding:10px; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #fff; font-weight: normal; background-color: rgba(255,255,255,0); z-index: 999999; } .textbox6{ width: 85%; margin:0 auto; font-size: 0.9em; text-align: center; height: auto; font-size: 1em; font-family: futura-pt, FuturaPT-Book, futura, Verdana, sans-serif; color: #666; font-weight: normal; z-index: 999999; } .back{ position:fixed; top:5px; left:2px; width: 25%; height: auto; font-size: 1em; z-index:999000; } } .slideshowmainimage { width:90%; height:auto; max-height:580px; }