/*------------------------------------------------------------------ Project: Triangulum Version: 1.0 Last change: 22/09/14 Assigned to: MambooThemes - Themeforest Primary use: Coming Soon -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 1. Base Structure 2. Header Content / #header 2.1. Coming Soon Text 2.2. Stars Background Animation 2.3. Top Triangle 2.4. Countdown 3. Navigation 4. About us 4.1. Testimonial Carousel 5. Portfolio 6. Contact us 7. Footer 7.1 Social Icons Style 7.2 Scroll Top Button 8. Portfolio Modals -------------------------------------------------------------------*/ /*------------------------------------------------------------------ # [Color codes] # Pink: #FF006F ( logo, triangle, navigation, buttons, social icons, icons, about, footer, scroll up button) # Pink - transparent : rgba(255, 0, 111, 0.89) (open modals) # Dark Sky: #08030b (header) # */ /*------------------------------------------------------------------ *********************** 1. BASE STRUCTURE ************************** -------------------------------------------------------------------*/ body { background: #fff; overflow-x: hidden; } p { font-size: 20px; } p.small { font-size: 16px; } a, a:hover, a:focus, a:active, a.active { outline: 0; color: rgba(255, 255, 255, 0.66); } h1, h2, h3, h4, h5, h6 { text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; } .img-centered { margin: 0 auto; } /*------------------------------------------------------------------ *********************** 2. HEADER CONTENT ************************** -------------------------------------------------------------------*/ /* it includes the "Coming Soon", stars animation, upper triangle and the countdown */ header { top:50px; text-align: center; color: #fff; /*** Background color of the star animation ***/ background: #08030b; /*** Stars background start (if you change this, the stars animation might not work anymore) ***/ -webkit-perspective: 340px; -moz-perspective: 340px; -o-perspective: 340px; perspective: 340px; } header .container { padding-top: 50px; padding-bottom: 50px; } /*** If you put a image in your header content this makes it centered ***/ header img { display: block; margin: 0 auto 20px; } /*------------------------------------------------------------------ 2.1 COMING SOON TEXT *********************************************** -------------------------------------------------------------------*/ header .intro-text .name { display: block; text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 2em; font-weight: 700; } header .intro-text .thanks{ font-size: 1.25em; font-weight: 300; } @media(min-width:768px) { header .container { padding: 200px 0 100px; } header .intro-text .name { font-size: 5em; } header .intro-text .thanks { font-size: 1.75em; } } /*------------------------------------------------------------------ 2.2 STARS BACKGROUND ANIMATION ************************************ -------------------------------------------------------------------*/ /*** you should leave it like this in order for it to work properly ***/ .stars { position: absolute; top: 10%; left: 50%; width: 2px; height: 2px; border-radius:5px; box-shadow: 512px -434px #bababa, -613px 108px #9c9c9c, -325px 290px #cccccc, -727px 105px #cccccc, -525px 281px #8c8c8c, -521px -357px #9e9e9e, -575px 269px #c4c4c4, 143px -424px #8c8c8c, -262px 308px #adadad, -731px 150px #b5b5b5, 719px -51px #919191, -255px 29px #a1a1a1, -749px 175px #cfcfcf, 474px -363px #ebebeb, -351px 98px #cccccc, 272px -61px #e3e3e3, -279px 97px #c9c9c9, 552px -149px #a6a6a6, -520px -4px #f0f0f0, -333px -389px #8a8a8a, 512px 393px #d4d4d4, 561px 134px #a1a1a1, -17px 125px #a1a1a1, -698px -197px #999999, -555px -384px #bdbdbd, 112px -12px #9c9c9c, -624px 102px #f7f7f7, -56px -41px #c7c7c7, 447px 189px #f7f7f7, 141px -139px #949494, -601px 70px #f7f7f7, -469px 19px #bdbdbd, 612px -349px #b5b5b5, -423px 422px #a3a3a3, -271px -235px #a8a8a8, 87px 329px #dedede, 652px 141px #e8e8e8, -132px -227px #c2c2c2, -443px -24px #a6a6a6, -509px 477px #d4d4d4, 447px 0px #858585, 670px 24px #e6e6e6, 359px -149px #a1a1a1, -160px 381px #ededed, -99px -308px #828282, -216px 147px #a1a1a1, -320px 386px #e8e8e8, 469px 41px gray, -491px 215px #999999, -618px -187px #b3b3b3, 196px -273px #9e9e9e, -234px 421px #c4c4c4, 84px 300px #919191, -168px -369px #c2c2c2, -303px -313px #e3e3e3, 0px -55px #8c8c8c, -744px 228px #a8a8a8, 74px -330px #a8a8a8, 290px -31px #919191, 258px -155px #e3e3e3, -512px 446px #fcfcfc, 691px -19px #f7f7f7, -374px 51px #b8b8b8, 48px -373px #e6e6e6, 637px -268px #828282, 17px -431px #919191, -19px -83px #c9c9c9, -567px 383px #d9d9d9, 438px 5px #a3a3a3, 717px -244px #cfcfcf, -661px 444px #8f8f8f, -473px -28px #f7f7f7, 584px -74px #c2c2c2, -437px 463px #bfbfbf, -479px 84px whitesmoke, -496px 207px #ebebeb, -344px -119px #f7f7f7, 413px 199px #858585, 268px 32px #adadad, -503px -306px #d6d6d6, 130px -213px #bdbdbd, 141px 24px #8a8a8a, 466px -52px #8c8c8c, 526px 336px #dbdbdb, 334px 411px #ededed, 83px 143px #dbdbdb, -281px 242px #cfcfcf, -250px 428px #bababa, -270px 404px #f7f7f7, 297px 291px #a8a8a8, -120px 87px #f0f0f0, -356px 281px #dedede, -261px 469px #858585, -389px 271px #ebebeb, 132px -301px #d1d1d1, -439px -361px #c2c2c2, 659px 411px whitesmoke, 361px 27px #ababab, 245px 226px #a3a3a3, -349px 0px #bdbdbd, -131px 328px #d1d1d1, 473px 343px #fcfcfc, 51px 61px #a8a8a8, -232px -362px #cccccc, -459px -416px #f7f7f7, 136px 232px #a8a8a8, -485px 5px #c2c2c2, 412px -114px #ababab, -205px -256px #c2c2c2, 304px -334px #ededed, -664px -398px #c9c9c9, 319px -424px #b8b8b8, -387px -342px #c9c9c9, -736px 51px #c4c4c4, -728px 390px #8a8a8a, -414px 184px #949494, 358px -35px #adadad, 485px 47px #fcfcfc, -563px 359px #adadad, 28px -216px #dbdbdb, -391px 287px #e8e8e8, 509px -151px #8c8c8c, 268px 206px #c9c9c9, -560px 441px #9c9c9c, 398px -439px #969696, -293px -200px #c7c7c7, 35px 103px #adadad, 740px 266px #969696, -212px 298px #858585, 473px -267px #919191, -485px -452px #adadad, 97px 16px #bdbdbd, -298px 246px #fcfcfc, 12px 369px #bfbfbf, 120px 359px #cccccc, -587px -4px #dedede, 204px -120px #d4d4d4, 305px 186px #b5b5b5, -365px 231px #8f8f8f, 429px -203px gray, 271px 406px #a6a6a6, -131px 423px #828282, -484px -73px #e3e3e3, 86px -154px #ededed, 156px 317px #bababa, -666px 57px #969696, -182px -3px #e3e3e3, -451px 34px #ededed, 228px -171px #a3a3a3, 0px 84px #9e9e9e, -639px 238px #9c9c9c, 525px -190px #8c8c8c, -699px 328px #bdbdbd, 9px 180px gray, 245px 210px #e6e6e6, 386px 70px #bdbdbd, -123px 211px #d9d9d9, 366px -285px #f7f7f7, 663px 122px #e3e3e3, 217px -319px #ebebeb, 219px 455px #949494, -405px 114px #b3b3b3, 549px -216px #949494, 737px 175px #e3e3e3, -421px 83px #9e9e9e, 712px 444px #878787, 634px -169px #828282, -486px -303px #949494, -553px 359px #919191, 170px -224px #d1d1d1, -705px 329px #c9c9c9, 381px -122px #cfcfcf, -282px 56px #d4d4d4, 679px 174px #949494, -158px -55px #fafafa, -563px -263px #8c8c8c, 306px -126px gray, -346px -391px #858585, 584px 339px #828282, 727px 212px #e0e0e0, -629px -416px #cfcfcf, -452px -425px #b8b8b8, -374px -342px #a1a1a1, -161px -333px #e8e8e8, -587px 461px #d1d1d1, -591px -133px #969696, -321px 444px #b8b8b8, -380px 391px #bababa, 223px 452px #cccccc, -148px 170px #8a8a8a, -107px 467px #b3b3b3, -254px 423px #bababa, -321px -94px #cfcfcf, 490px 204px #adadad, -67px -199px #e6e6e6, 163px 291px #adadad, -459px 236px #9e9e9e, -243px 21px #969696, 738px -258px #919191, 87px 203px #8f8f8f, -662px -476px #828282, 500px 382px #b5b5b5, -570px -392px #ababab, -20px -84px #e6e6e6, 605px 45px #828282, -242px 301px #c4c4c4, 506px 283px #c9c9c9, -608px -143px #dbdbdb, 239px -257px #e0e0e0, 699px -331px #c2c2c2, 510px -279px #e6e6e6, -394px 257px #bfbfbf, 101px 117px #a3a3a3, 488px 383px #c9c9c9, 199px -469px #9e9e9e, 591px 10px #d9d9d9, 29px 120px #8a8a8a, -563px 230px #f0f0f0, 72px -118px #cfcfcf, -321px -113px #969696, -129px 95px #fcfcfc, -323px -203px #e3e3e3, 65px -416px #fcfcfc, -206px -5px #bfbfbf, -213px -232px #e0e0e0, -480px 268px #c9c9c9, 554px -158px #e8e8e8, 307px -433px #f0f0f0, -282px -49px #cccccc, -533px -117px #e8e8e8, 66px -456px #f2f2f2, 79px 200px #9c9c9c, 231px 316px #858585, -716px -349px #d9d9d9, 162px 123px #858585, 380px -168px #bfbfbf, 389px -66px #dedede, -105px 472px #8c8c8c, 644px 49px #c7c7c7, -459px 401px #d1d1d1, -6px 98px #858585, -56px 247px #919191, -204px 99px #b5b5b5, -271px 400px #969696, 541px -201px #f0f0f0, -702px 264px #8c8c8c, -571px -324px #ababab, 193px 385px #8f8f8f, 57px 164px #a3a3a3, -653px 407px #a3a3a3, 647px -11px #bababa, -389px -257px #e0e0e0, -643px 411px #fafafa, -510px 6px #a6a6a6, 412px 464px #f7f7f7, -504px 143px #858585, -241px -12px #cccccc, 680px 203px #adadad, -491px -266px #9c9c9c, -729px -73px #dbdbdb, 387px -163px #b0b0b0, 6px 133px #dedede, -459px 437px #b0b0b0, -572px -170px #e0e0e0, -372px 93px #dedede, 167px 190px #dedede, -529px 2px #b5b5b5, -94px 417px #dbdbdb, -143px 208px #999999, -542px 173px whitesmoke, -70px -256px #e8e8e8, 121px -243px #8c8c8c, 134px -113px #f0f0f0, 183px 394px #f0f0f0, -456px -382px #dbdbdb, 257px 220px #dbdbdb, -739px -411px #e6e6e6, 627px 337px whitesmoke, -270px 124px #f7f7f7, -352px -242px #c9c9c9, -658px -288px #c9c9c9, 180px 379px #f0f0f0, -245px 365px gray, -483px -219px #858585, 284px 49px #d9d9d9, -679px -367px #8a8a8a, -77px -35px #a8a8a8, 490px 160px #a8a8a8, -273px 267px #e3e3e3, 485px -366px #bdbdbd, 721px 193px #878787, 4px -270px #a3a3a3, 299px 454px #858585, 723px 453px #9c9c9c, -492px -170px #c2c2c2, 483px -446px #bababa, 481px 438px #c9c9c9, -511px 244px #bdbdbd, 633px 38px #d4d4d4, 499px 429px #ededed, 686px -207px #a3a3a3, -638px -435px #919191, 331px 434px #a6a6a6, -40px -295px #8c8c8c, 382px 125px #fcfcfc, 690px -293px #fcfcfc, 498px 249px #a3a3a3, -545px -339px #9e9e9e, 80px 245px #b5b5b5, 607px -79px #d6d6d6, -589px -188px #c2c2c2, -735px 159px #9e9e9e, -420px -417px #b5b5b5, -18px -140px #e3e3e3, 182px 122px #8f8f8f, 166px 1px #f7f7f7, 667px 448px #bdbdbd, -692px 59px #d9d9d9, -36px 18px #cfcfcf, -630px -174px #c2c2c2, -156px -206px #8c8c8c, 260px -94px #a3a3a3, -31px -345px #c9c9c9, -128px -187px #d6d6d6, -626px -224px #a3a3a3, 147px -332px #858585, 706px -57px #c2c2c2, 149px 275px #a3a3a3, -306px -113px #a6a6a6, -292px 162px #e6e6e6, 294px -313px #c9c9c9, 605px -475px gray, -70px -297px #d6d6d6, -56px -139px #e0e0e0, 11px -360px #f0f0f0, 130px -185px #d4d4d4, -546px -309px whitesmoke, -49px 199px #f7f7f7, 307px -24px #e3e3e3, 196px 346px #b8b8b8, -714px -116px #ababab, 460px 183px gray, -498px -224px #8c8c8c, 469px 258px #ededed, -385px 273px #d4d4d4, 416px -31px #858585, -296px -245px #f2f2f2, -644px -105px #fafafa, -197px -211px #8c8c8c, -218px 462px #bababa, 713px -150px #858585; -moz-box-shadow: 512px -434px #bababa, -613px 108px #9c9c9c, -325px 290px #cccccc, -727px 105px #cccccc, -525px 281px #8c8c8c, -521px -357px #9e9e9e, -575px 269px #c4c4c4, 143px -424px #8c8c8c, -262px 308px #adadad, -731px 150px #b5b5b5, 719px -51px #919191, -255px 29px #a1a1a1, -749px 175px #cfcfcf, 474px -363px #ebebeb, -351px 98px #cccccc, 272px -61px #e3e3e3, -279px 97px #c9c9c9, 552px -149px #a6a6a6, -520px -4px #f0f0f0, -333px -389px #8a8a8a, 512px 393px #d4d4d4, 561px 134px #a1a1a1, -17px 125px #a1a1a1, -698px -197px #999999, -555px -384px #bdbdbd, 112px -12px #9c9c9c, -624px 102px #f7f7f7, -56px -41px #c7c7c7, 447px 189px #f7f7f7, 141px -139px #949494, -601px 70px #f7f7f7, -469px 19px #bdbdbd, 612px -349px #b5b5b5, -423px 422px #a3a3a3, -271px -235px #a8a8a8, 87px 329px #dedede, 652px 141px #e8e8e8, -132px -227px #c2c2c2, -443px -24px #a6a6a6, -509px 477px #d4d4d4, 447px 0px #858585, 670px 24px #e6e6e6, 359px -149px #a1a1a1, -160px 381px #ededed, -99px -308px #828282, -216px 147px #a1a1a1, -320px 386px #e8e8e8, 469px 41px gray, -491px 215px #999999, -618px -187px #b3b3b3, 196px -273px #9e9e9e, -234px 421px #c4c4c4, 84px 300px #919191, -168px -369px #c2c2c2, -303px -313px #e3e3e3, 0px -55px #8c8c8c, -744px 228px #a8a8a8, 74px -330px #a8a8a8, 290px -31px #919191, 258px -155px #e3e3e3, -512px 446px #fcfcfc, 691px -19px #f7f7f7, -374px 51px #b8b8b8, 48px -373px #e6e6e6, 637px -268px #828282, 17px -431px #919191, -19px -83px #c9c9c9, -567px 383px #d9d9d9, 438px 5px #a3a3a3, 717px -244px #cfcfcf, -661px 444px #8f8f8f, -473px -28px #f7f7f7, 584px -74px #c2c2c2, -437px 463px #bfbfbf, -479px 84px whitesmoke, -496px 207px #ebebeb, -344px -119px #f7f7f7, 413px 199px #858585, 268px 32px #adadad, -503px -306px #d6d6d6, 130px -213px #bdbdbd, 141px 24px #8a8a8a, 466px -52px #8c8c8c, 526px 336px #dbdbdb, 334px 411px #ededed, 83px 143px #dbdbdb, -281px 242px #cfcfcf, -250px 428px #bababa, -270px 404px #f7f7f7, 297px 291px #a8a8a8, -120px 87px #f0f0f0, -356px 281px #dedede, -261px 469px #858585, -389px 271px #ebebeb, 132px -301px #d1d1d1, -439px -361px #c2c2c2, 659px 411px whitesmoke, 361px 27px #ababab, 245px 226px #a3a3a3, -349px 0px #bdbdbd, -131px 328px #d1d1d1, 473px 343px #fcfcfc, 51px 61px #a8a8a8, -232px -362px #cccccc, -459px -416px #f7f7f7, 136px 232px #a8a8a8, -485px 5px #c2c2c2, 412px -114px #ababab, -205px -256px #c2c2c2, 304px -334px #ededed, -664px -398px #c9c9c9, 319px -424px #b8b8b8, -387px -342px #c9c9c9, -736px 51px #c4c4c4, -728px 390px #8a8a8a, -414px 184px #949494, 358px -35px #adadad, 485px 47px #fcfcfc, -563px 359px #adadad, 28px -216px #dbdbdb, -391px 287px #e8e8e8, 509px -151px #8c8c8c, 268px 206px #c9c9c9, -560px 441px #9c9c9c, 398px -439px #969696, -293px -200px #c7c7c7, 35px 103px #adadad, 740px 266px #969696, -212px 298px #858585, 473px -267px #919191, -485px -452px #adadad, 97px 16px #bdbdbd, -298px 246px #fcfcfc, 12px 369px #bfbfbf, 120px 359px #cccccc, -587px -4px #dedede, 204px -120px #d4d4d4, 305px 186px #b5b5b5, -365px 231px #8f8f8f, 429px -203px gray, 271px 406px #a6a6a6, -131px 423px #828282, -484px -73px #e3e3e3, 86px -154px #ededed, 156px 317px #bababa, -666px 57px #969696, -182px -3px #e3e3e3, -451px 34px #ededed, 228px -171px #a3a3a3, 0px 84px #9e9e9e, -639px 238px #9c9c9c, 525px -190px #8c8c8c, -699px 328px #bdbdbd, 9px 180px gray, 245px 210px #e6e6e6, 386px 70px #bdbdbd, -123px 211px #d9d9d9, 366px -285px #f7f7f7, 663px 122px #e3e3e3, 217px -319px #ebebeb, 219px 455px #949494, -405px 114px #b3b3b3, 549px -216px #949494, 737px 175px #e3e3e3, -421px 83px #9e9e9e, 712px 444px #878787, 634px -169px #828282, -486px -303px #949494, -553px 359px #919191, 170px -224px #d1d1d1, -705px 329px #c9c9c9, 381px -122px #cfcfcf, -282px 56px #d4d4d4, 679px 174px #949494, -158px -55px #fafafa, -563px -263px #8c8c8c, 306px -126px gray, -346px -391px #858585, 584px 339px #828282, 727px 212px #e0e0e0, -629px -416px #cfcfcf, -452px -425px #b8b8b8, -374px -342px #a1a1a1, -161px -333px #e8e8e8, -587px 461px #d1d1d1, -591px -133px #969696, -321px 444px #b8b8b8, -380px 391px #bababa, 223px 452px #cccccc, -148px 170px #8a8a8a, -107px 467px #b3b3b3, -254px 423px #bababa, -321px -94px #cfcfcf, 490px 204px #adadad, -67px -199px #e6e6e6, 163px 291px #adadad, -459px 236px #9e9e9e, -243px 21px #969696, 738px -258px #919191, 87px 203px #8f8f8f, -662px -476px #828282, 500px 382px #b5b5b5, -570px -392px #ababab, -20px -84px #e6e6e6, 605px 45px #828282, -242px 301px #c4c4c4, 506px 283px #c9c9c9, -608px -143px #dbdbdb, 239px -257px #e0e0e0, 699px -331px #c2c2c2, 510px -279px #e6e6e6, -394px 257px #bfbfbf, 101px 117px #a3a3a3, 488px 383px #c9c9c9, 199px -469px #9e9e9e, 591px 10px #d9d9d9, 29px 120px #8a8a8a, -563px 230px #f0f0f0, 72px -118px #cfcfcf, -321px -113px #969696, -129px 95px #fcfcfc, -323px -203px #e3e3e3, 65px -416px #fcfcfc, -206px -5px #bfbfbf, -213px -232px #e0e0e0, -480px 268px #c9c9c9, 554px -158px #e8e8e8, 307px -433px #f0f0f0, -282px -49px #cccccc, -533px -117px #e8e8e8, 66px -456px #f2f2f2, 79px 200px #9c9c9c, 231px 316px #858585, -716px -349px #d9d9d9, 162px 123px #858585, 380px -168px #bfbfbf, 389px -66px #dedede, -105px 472px #8c8c8c, 644px 49px #c7c7c7, -459px 401px #d1d1d1, -6px 98px #858585, -56px 247px #919191, -204px 99px #b5b5b5, -271px 400px #969696, 541px -201px #f0f0f0, -702px 264px #8c8c8c, -571px -324px #ababab, 193px 385px #8f8f8f, 57px 164px #a3a3a3, -653px 407px #a3a3a3, 647px -11px #bababa, -389px -257px #e0e0e0, -643px 411px #fafafa, -510px 6px #a6a6a6, 412px 464px #f7f7f7, -504px 143px #858585, -241px -12px #cccccc, 680px 203px #adadad, -491px -266px #9c9c9c, -729px -73px #dbdbdb, 387px -163px #b0b0b0, 6px 133px #dedede, -459px 437px #b0b0b0, -572px -170px #e0e0e0, -372px 93px #dedede, 167px 190px #dedede, -529px 2px #b5b5b5, -94px 417px #dbdbdb, -143px 208px #999999, -542px 173px whitesmoke, -70px -256px #e8e8e8, 121px -243px #8c8c8c, 134px -113px #f0f0f0, 183px 394px #f0f0f0, -456px -382px #dbdbdb, 257px 220px #dbdbdb, -739px -411px #e6e6e6, 627px 337px whitesmoke, -270px 124px #f7f7f7, -352px -242px #c9c9c9, -658px -288px #c9c9c9, 180px 379px #f0f0f0, -245px 365px gray, -483px -219px #858585, 284px 49px #d9d9d9, -679px -367px #8a8a8a, -77px -35px #a8a8a8, 490px 160px #a8a8a8, -273px 267px #e3e3e3, 485px -366px #bdbdbd, 721px 193px #878787, 4px -270px #a3a3a3, 299px 454px #858585, 723px 453px #9c9c9c, -492px -170px #c2c2c2, 483px -446px #bababa, 481px 438px #c9c9c9, -511px 244px #bdbdbd, 633px 38px #d4d4d4, 499px 429px #ededed, 686px -207px #a3a3a3, -638px -435px #919191, 331px 434px #a6a6a6, -40px -295px #8c8c8c, 382px 125px #fcfcfc, 690px -293px #fcfcfc, 498px 249px #a3a3a3, -545px -339px #9e9e9e, 80px 245px #b5b5b5, 607px -79px #d6d6d6, -589px -188px #c2c2c2, -735px 159px #9e9e9e, -420px -417px #b5b5b5, -18px -140px #e3e3e3, 182px 122px #8f8f8f, 166px 1px #f7f7f7, 667px 448px #bdbdbd, -692px 59px #d9d9d9, -36px 18px #cfcfcf, -630px -174px #c2c2c2, -156px -206px #8c8c8c, 260px -94px #a3a3a3, -31px -345px #c9c9c9, -128px -187px #d6d6d6, -626px -224px #a3a3a3, 147px -332px #858585, 706px -57px #c2c2c2, 149px 275px #a3a3a3, -306px -113px #a6a6a6, -292px 162px #e6e6e6, 294px -313px #c9c9c9, 605px -475px gray, -70px -297px #d6d6d6, -56px -139px #e0e0e0, 11px -360px #f0f0f0, 130px -185px #d4d4d4, -546px -309px whitesmoke, -49px 199px #f7f7f7, 307px -24px #e3e3e3, 196px 346px #b8b8b8, -714px -116px #ababab, 460px 183px gray, -498px -224px #8c8c8c, 469px 258px #ededed, -385px 273px #d4d4d4, 416px -31px #858585, -296px -245px #f2f2f2, -644px -105px #fafafa, -197px -211px #8c8c8c, -218px 462px #bababa, 713px -150px #858585; -webkit-animation: fly 3s linear infinite; -moz-animation: fly 3s linear infinite; -o-animation: fly 3s linear infinite; animation: fly 3s linear infinite; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; z-index:1; } .stars:before, .stars:after { content: ""; position: absolute; width: inherit; height: inherit; box-shadow: inherit; } .stars:before { -webkit-transform: translateZ(-300px); -moz-transform: translateZ(-300px); -o-transform: translateZ(-300px); transform: translateZ(-300px); opacity: .1; } .stars:after { -webkit-transform: translateZ(-600px); -moz-transform: translateZ(-600px); -o-transform: translateZ(-600px); transform: translateZ(-600px); transform: translateZ(-600px); opacity: .3; } @-webkit-keyframes fly { from { -webkit-transform: translateZ(0px); opacity: .3; } to { -webkit-transform: translateZ(300px); opacity: 1; } } @-moz-keyframes fly { from { -moz-transform: translateZ(0px); opacity: .3; } to { -moz-transform: translateZ(300px); opacity: 1; } } @-o-keyframes fly { from { -o-transform: translateZ(0px); opacity: .3; } to { -o-transform: translateZ(300px); opacity: 1; } } @keyframes fly { from { transform: translateZ(0px); opacity: .3; } to { transform: translateZ(300px); opacity: 1; } } /*** End of stars animation ***/ /*------------------------------------------------------------------ 2.3. TOP TRIANGLE ************************************************** -------------------------------------------------------------------*/ .triangle { margin-top:-200px; margin-right:auto; margin-left:auto; display: block; width: 0px; height: 0px; border: 0 solid transparent; /*** Change the color of the triangle ***/ border-top-color: #FF006F; /*** Change the size of the triangle by replacing the non zero values, in order for it to be a equilateral triangle, please put the same value on every segment ***/ border-width: 200px 200px 0 200px; } /*** This makes some space between the upper triangle and the "comming soon" text ***/ #mainheadline{ margin-top:40px; } /*** Change the color of the soon text element ***/ #soon { color:#FF006F; } /*------------------------------------------------------------------ 2.4 COUNTDOWN ****************************************************** -------------------------------------------------------------------*/ /*** the countdown clock is an embedded element form an external html file,in order to change the colours of the countdown you should access the countdown.js file. ***/ iframe { width: 100%; top:0;left:0; height:100%; } #countdown1 { border:none; } /*------------------------------------------------------------------ *********************** 3. NAVIGATION ****************************** -------------------------------------------------------------------*/ /****************** ON SCROLL NAVBAR EFFECTS ***********************/ @media(min-width:768px) { /*** Here you can set the height of the navbar as it is when you open up the page***/ .navbar-fixed-top { padding: 25px 0; -webkit-transition: padding .3s; -moz-transition: padding .3s; -o-transition: padding .3s; transition: padding .3s; } /*** Here you can change the font size of the brand (logo) before shrinking and it's transition properties ***/ .navbar-fixed-top .navbar-brand { font-size: 2.5em; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } /*** Here you can set the height of the navbar as it is when it shrins as you scroll down***/ .navbar-fixed-top.navbar-shrink { padding: 10px 0; } /*** Here you can change the font size of the brand (logo) after shrinking ***/ .navbar-fixed-top.navbar-shrink .navbar-brand { font-size: 1.5em; } } /*** Change the navbar font and the navbar background color ***/ .navbar { text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 700; background-color:rgba(0, 0, 0, 0.92); } /*** Change the color of the navbar buttons ***/ .navbar-default .navbar-nav>li>a { color: #fff; } /*** Change the color of the navbar buttons on hover ***/ .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #FF006F; background-color: transparent; } /*** Change the background color and the font color of the navbar buttons when active ***/ .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #fff; background-color:#FF006F; } /*** Change the color of the brand ( logo ) ***/ .navbar-default .navbar-brand { color: #FF006F; } .navbar a:focus { outline: 0; } .navbar .navbar-nav { letter-spacing: 1px; } .navbar .navbar-nav li a:focus { outline: 0; } .navbar-default, .navbar-inverse { border: 0; } /******* SECTIONS - portfolio- -about- -contact- *******/ /*** Overall section settings ***/ section { padding: 100px 0; } section h2 { margin: 0; font-size: 3em; } /*------------------------------------------------------------------ *********************** 4. ABOUT US ******************************** -------------------------------------------------------------------*/ /*** Change font color and background color of section -about us- ***/ section.aboutus { color: #fff; background: #FF006F; position:relative; z-index: 500; } /*** This makes some space between the heading and the paragraph ***/ .aboutus h2 { padding-bottom:40px; } .aboutus h3 { padding-top:40px; } /*** This sets the font size of the paragrph in -about us- ***/ .aboutus p { font-size:16px; } @media(max-width:767px) { section { padding: 75px 0; } section.first { padding-top: 75px; } } /*------------------------------------------------------------------ 4.1 TESTIMONIAL CAROUSEL ******************************************* -------------------------------------------------------------------*/ #quote-carousel { padding: 0 10px 30px 10px; margin-top: 30px 0px 0px; } /* Control buttons */ #quote-carousel .carousel-control{ background: none; color: rgba(255, 255, 255, 0.38); font-size: 2.3em; text-shadow: none; margin-top: 30px; } /* Previous button */ #quote-carousel .carousel-control.left { left: -12px; } /* Next button */ #quote-carousel .carousel-control.right { right: -12px !important; } /* Changes the position of the indicators */ #quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } /* Changes the color of the indicators */ #quote-carousel .carousel-indicators li { background: #c0c0c0; } #quote-carousel .carousel-indicators .active { background: #333333; } #quote-carousel img { width: 100px; height: 100px } /* End carousel */ .item blockquote { border-left: none; margin: 0; } .item blockquote img { margin-bottom: 10px; } .item blockquote p:before { content: "\f10d"; font-family: 'Fontawesome'; float: left; margin-right: 10px; } /** MEDIA QUERIES */ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #quote-carousel { margin-bottom: 0; padding: 0 40px 30px 40px; margin-top: 30px; } } /* Small devices (tablets, up to 768px) */ @media (max-width: 768px) { /* Make the indicators larger for easier clicking with fingers/thumb on mobile */ #quote-carousel .carousel-indicators { bottom: -20px !important; } #quote-carousel .carousel-indicators li { display: inline-block; margin: 0px 5px; width: 15px; height: 15px; } #quote-carousel .carousel-indicators li.active { margin: 0px 5px; width: 20px; height: 20px; } } /*------------------------------------------------------------------ *********************** 5. PORTFOLIO ******************************* -------------------------------------------------------------------*/ /*** Second triangle in portfolio section ***/ .triangle2 { margin-top:-100px; margin-right:auto; margin-left:auto; display: block; width: 0px; height: 0px; border: 0 solid transparent; /*** Change the color of the triangle ***/ border-top-color: #FF006F; /*** Change the size of the triangle by replacing the non zero values, in order for it to be a equilateral triangle, please put the same value on every segment ***/ border-width: 50px 50px 0 50px; } #portfolio{ /*** Change the background color of portfolio section ***/ background-color:#000; position:relative; z-index: 1000; } #porthead { /*** Makes some space between the heading and the portfolio items ***/ margin-bottom:40px; margin-top:40px; } #portfolio .portfolio-item { right: 0; margin: 0 0 15px; } #portfolio .portfolio-item .portfolio-link { display: block; position: relative; margin: 0 auto; max-width: 400px; } #portfolio .portfolio-item .portfolio-link .caption { position: absolute; width: 100%; height: 100%; /*** this sets the opacity of the background that covers the portfolio items ***/ opacity: 0.9; /*** this sets the background color or the portfolio items when they are not hovered ***/ background: rgba(0, 0, 0, 0.9); -webkit-transition: all ease .5s; -moz-transition: all ease .5s; transition: all ease .5s; } #portfolio .portfolio-item .portfolio-link .caption:hover { /*** this sets the opacity of the background to 0 when portfolio items are hovered giving a lighting up effect ***/ opacity: 0; } #portfolio .portfolio-item .portfolio-link .caption .caption-content { position: absolute; top: 50%; width: 100%; height: 20px; margin-top: -12px; text-align: center; font-size: 20px; /*** Change the color of the icon over portfolio items ***/ color: #FF006F; } #portfolio .portfolio-item .portfolio-link .caption .caption-content i { margin-top: -12px; } #portfolio .portfolio-item .portfolio-link .caption .caption-content h3, #portfolio .portfolio-item .portfolio-link .caption .caption-content h4 { margin: 0; } #portfolio * { z-index: 2; } @media(min-width:767px) { #portfolio .portfolio-item { margin: 0 0 30px; } } /*------------------------------------------------------------------ *********************** 6. CONTACT US ****************************** -------------------------------------------------------------------*/ .floating-label-form-group input, .floating-label-form-group textarea { z-index: 1; position: relative; padding-right: 0; padding-left: 0; border: 0; border-radius: 0; font-size: 1.5em; background: 0 0; box-shadow: none!important; resize: none; } .floating-label-form-group { position: relative; margin-bottom: 0; padding-bottom: .5em; border-bottom: 1px solid #dedede; border-bottom: 1px solid #dedede; } .form-control:focus{ /*** Change the color of the border on the forms when focused ***/ border-color:#3b1e4a; } .floating-label-form-group label { display: block; z-index: 0; position: relative; top: 2em; margin: 0; font-size: .85em; line-height: 1.764705882em; vertical-align: middle; vertical-align: baseline; opacity: 0; -webkit-transition: top .3s ease,opacity .3s ease; -moz-transition: top .3s ease,opacity .3s ease; -ms-transition: top .3s ease,opacity .3s ease; transition: top .3s ease,opacity .3s ease; } .floating-label-form-group::not(:first-child) { padding-left: 14px; border-left: 1px solid #eee; } .floating-label-form-group-with-value label { top: 0; opacity: 1; } .floating-label-form-group-with-focus label { color: #726E68; } form .row:first-child .floating-label-form-group { border-top: 1px solid #dedede; } #contact{ position:relative; /*** Change the background color of the contact section ***/ background-color:#fff; z-index: 1000; } #contact h2{ /*** This makes some space between the heading and the forms ***/ padding-bottom: 40px; padding-top: 40px; } /*** Button Style ***/ .btn-outline { margin-top: 15px; /*** Change the color of the border of the button ***/ border: solid 1px #FF006F; font-size: 20px; /*** Change the color of the text inside the button ***/ color: #FF006F; background: 0 0; transition: all .3s ease-in-out; } /*** Change the way the button looks when hoover (the border, font color and background color) ***/ .btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active { border: solid 1px #FF006F; color: #fff; background: #FF006F; } /*------------------------------------------------------------------ *********************** 7. FOOTER ********************************** -------------------------------------------------------------------*/ footer { /*** Change the color of the font on the footer ***/ color: #fff; /*** This makes the stars animation show on the footer ***/ -webkit-perspective: 400px; -moz-perspective: 400px; -o-perspective: 400px; perspective: 400px; } footer h3 { margin-bottom: 30px; } footer .footer-above { padding-top: 50px; /*** Change the background color on the footer ***/ background-color: #000; } footer .footer-col { margin-bottom: 50px; } footer .footer-below { padding: 25px 0; /*** Change the background color on the bottom line from the footer***/ background-color: #FF006F; } /*------------------------------------------------------------------ 7.1 Social icons style ********************************************* -------------------------------------------------------------------*/ .btn-social { display: inline-block; width: 50px; height: 50px; /*** Change the color of the border on social icons ***/ border: 1px solid #fff; border-radius: 100%; text-align: center; font-size: 20px; line-height: 45px; } .btn:focus, .btn:active, .btn.active { outline: 0; } /*------------------------------------------------------------------ 7.2 Scroll top button ********************************************** -------------------------------------------------------------------*/ .scroll-top { z-index: 1049; position: fixed; right: 2%; bottom: 2%; width: 50px; height: 50px; } .scroll-top .btn { width: 50px; height: 50px; border-radius: 100%; font-size: 20px; line-height: 28px; /*** Change the color of the scroll top button ***/ background-color:#FF006F; /*** Change the border color of the scroll top button ***/ border: solid 1px #FF006F; } .scroll-top .btn:focus { outline: 0; } /*------------------------------------------------------------------ *********************** 5. PORTFOLIO MODALS ************************ -------------------------------------------------------------------*/ .portfolio-modal .modal-content { padding: 100px 0; min-height: 100%; border: 0; border-radius: 0; text-align: center; /*** Change the background color of the modal ***/ background-color: rgba(255, 0, 111, 0.89); background-clip: border-box; -webkit-box-shadow: none; box-shadow: none; /*** Change the font color on modals ***/ color:#fff; } .portfolio-modal .modal-content h2 { margin: 0; font-size: 3em; margin-bottom:40px; } .portfolio-modal .modal-content img { margin-bottom: 30px; } .portfolio-modal .modal-content .item-details { margin: 30px 0; } .portfolio-modal .close-modal { position: absolute; top: 25px; right: 25px; width: 75px; height: 75px; background-color: transparent; cursor: pointer; } .portfolio-modal .close-modal:hover { opacity: .3; } .portfolio-modal .close-modal .lr { z-index: 1051; width: 1px; height: 75px; margin-left: 35px; background-color: rgba(255, 255, 255, 0.98); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .portfolio-modal .close-modal .lr .rl { z-index: 1052; width: 1px; height: 75px; background-color: rgba(255, 255, 255, 0.98); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }