.containermainlocat { width:938px; margin:auto;}.containermainlocat .card { margin:0 auto; display:inline-block; margin-right:30px; -webkit-transform:scale(0); transform:scale(0); width:280px; text-align:center; position:relative; transition:all .2s; cursor:pointer; opacity:1; box-shadow:0px 17px 46px -10px #777777; height:370px; border-radius:14px;}.containermainlocat .card:nth-of-type(1) { -webkit-animation:intro 1s 0.1s forwards; animation:intro 1s 0.1s forwards;}.containermainlocat .card:nth-of-type(2) { -webkit-animation:intro 1s 0.2s forwards; animation:intro 1s 0.2s forwards;}.containermainlocat .card:nth-of-type(3) { -webkit-animation:intro 1s 0.3s forwards; animation:intro 1s 0.3s forwards;}.containermainlocat .card.orangecard { background:-webkit-linear-gradient(45deg,#c96881 0%,#f7b695 100%);}.containermainlocat .card.bluecard { background:-webkit-linear-gradient(45deg,#6B6ECC 0%,#89BFDF 100%);}.containermainlocat .card.greenecard { background:-webkit-linear-gradient(45deg,#81B77B 0%,#A3E3C3 100%);}.containermainlocat .card:hover .card_inner__header img { left:-50px; transition:all 3.4s linear;}.containermainlocat .card:hover .card_inner__cta button { -webkit-transform:scale(1); transform:scale(1);}.containermainlocat .card:nth-of-type(1):hover .card_inner__circle img { -webkit-animation:launch 1s forwards; animation:launch 1s forwards;}.containermainlocat .card:nth-of-type(1) .card_inner__circle img { top:22px; left:1px;}.containermainlocat .card:nth-of-type(2):hover .card_inner__circle img { -webkit-animation:spin 1s forwards; animation:spin 1s forwards;}.containermainlocat .card:nth-of-type(2) .card_inner__circle img { top:22px;}.containermainlocat .card:nth-of-type(3):hover .card_inner__circle img { -webkit-animation:fly 1s forwards; animation:fly 1s forwards;}.containermainlocat .card:nth-of-type(3) .card_inner__circle img { top:22px; left:1px;}.containermainlocat .card:hover { opacity:1;}.containermainlocat .card_inner__circle { overflow:hidden; width:70px; position:absolute; background:#F1F0ED; z-index:10; height:70px; border-radius:100px; left:0; box-shadow:0px 7px 20px rgba(0,0,0,0.28); right:0; margin:auto; border:4px solid white; top:82px;}.containermainlocat .card_inner__circle img { height:26px; position:relative; top:17px; transition:all .2s;}.containermainlocat .card_inner__header { height:120px; border-top-left-radius:14px; border-top-right-radius:14px; overflow:hidden;}.containermainlocat .card_inner__header img { width:120%; position:relative; top:-30px; left:0; transition:all 0.1s linear;}.containermainlocat .card_inner__content { padding:20px;}.containermainlocat .card_inner__content .price { color:white; font-weight:800; font-size:40px; text-shadow:0px 0px 10px rgba(0,0,0,0.42);}.containermainlocat .card_inner__content .text {color:#fff;font-weight:100;margin-top:10px;font-size:14px;line-height:normal;text-align:center;}.containermainlocat .card_inner__content .title { font-weight:800; text-transform:uppercase; color:rgba(255,255,255,0.64); margin-top:40px; font-size:15px; letter-spacing:1px;}.containermainlocat .card_inner__cta { position:absolute; bottom:-24px; left:0; right:0; margin:auto; width:200px;}.containermainlocat .card_inner__cta a {color:#fff;}.containermainlocat .card_inner__cta button { padding:16px; box-shadow:0px 0px 40px 4px #F76583,0px 0px 0px 2px rgba(255,255,255,0.19) inset; width:100%; background:-webkit-linear-gradient(-90deg,#fe5e7d 0%,#e5375b 100%); border:none; font-family:'Yanone Kaffeesatz',sans-serif; color:white; outline:none; font-size:20px; border-radius:6px; -webkit-transform:scale(0.94); transform:scale(0.94); cursor:pointer; transition:box-shadow .3s,-webkit-transform .3s .1s; transition:box-shadow .3s,transform .3s .1s; transition:box-shadow .3s,transform .3s .1s,-webkit-transform .3s .1s;}.containermainlocat .card_inner__cta button span { text-shadow:0px 4px 18px #BA3F57;}.containermainlocat .card_inner__cta button:hover { box-shadow:0px 0px 60px 8px #F76583,0px 0px 0px 2px rgba(255,255,255,0.19) inset;} @-webkit-keyframes launch { 0% { left:1px; } 25% { top:-50px; left:1px; } 50% { left:-100px; } 75% { top:100px; -webkit-transform:rotate(40deg); transform:rotate(40deg); } 100% { left:1px; }} @keyframes launch { 0% { left:1px; } 25% { top:-50px; left:1px; } 50% { left:-100px; } 75% { top:100px; -webkit-transform:rotate(40deg); transform:rotate(40deg); } 100% { left:1px; }}@-webkit-keyframes fly { 0% { left:0px; } 25% { top:-50px; left:50px; } 50% { left:-130px; } 75% { top:60px; } 100% { left:0px; }}@keyframes fly { 0% { left:0px; } 25% { top:-50px; left:50px; } 50% { left:-130px; } 75% { top:60px; } 100% { left:0px; }}@-webkit-keyframes spin { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform:rotate(720deg); transform:rotate(720deg); }}@keyframes spin { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform:rotate(720deg); transform:rotate(720deg); }}@-webkit-keyframes intro { 0% { -webkit-transform:scale(0); transform:scale(0); } 25% { -webkit-transform:scale(1.06); transform:scale(1.06); } 50% { -webkit-transform:scale(0.965); transform:scale(0.965); } 75% { -webkit-transform:scale(1.02); transform:scale(1.02); } 100% { -webkit-transform:scale(1); transform:scale(1); }}@keyframes intro { 0% { -webkit-transform:scale(0); transform:scale(0); } 25% { -webkit-transform:scale(1.06); transform:scale(1.06); } 50% { -webkit-transform:scale(0.965); transform:scale(0.965); } 75% { -webkit-transform:scale(1.02); transform:scale(1.02); } 100% { -webkit-transform:scale(1); transform:scale(1); }}.maincontainer{margin:0px auto; margin-bottom:50px;max-width:1024px; } #hexGrid { display:flex; flex-wrap:wrap; width:100%; margin:0 auto; overflow:hidden; font-size:15px; list-style-type:none;padding:0px; margin-bottom:50px;padding-top:50px; } .hex { position:relative; visibility:hidden; outline:1px solid transparent; } .hex::after{ content:''; display:block; padding-bottom:86.602%; } .hex::before{box-shadow:0 0 20px rgba(0,0,0,1); content:''; display:block; } .hexIn{ position:absolute; width:96%; padding-bottom:110.851%; margin:0 2%; overflow:hidden; visibility:hidden; outline:1px solid transparent; -webkit-transform:rotate3d(0,0,1,-60deg) skewY(30deg); -ms-transform:rotate3d(0,0,1,-60deg) skewY(30deg); transform:rotate3d(0,0,1,-60deg) skewY(30deg); } .hexIn * { position:absolute; visibility:visible; outline:1px solid transparent; } .hexIn .fa{position:relative;} .contentmnophex{ display:block; width:100%; height:100%; background:#000; vertical-align:middle; padding:43px 5px; font-size:14px; text-align:center; line-height:normal; opacity:1; text-shadow:0px 0px 10px rgba(0,0,0,0.42); } .bluehex{background-color:transparent;background-image:linear-gradient(to right,#4061ae 0%,#3ebff0 100%);} .orangehex{background-color:transparent;background-image:linear-gradient(to right,#e653a0 0%,#b14fae 100%); } .hexLink { display:block; width:100%; height:100%; text-align:center; color:#fff; overflow:hidden; -webkit-transform:skewY(-30deg) rotate3d(0,0,1,60deg); -ms-transform:skewY(-30deg) rotate3d(0,0,1,60deg); transform:skewY(-30deg) rotate3d(0,0,1,60deg); } .hex img { left:-100%; right:-100%; width:auto; height:100%; margin:0 auto; -webkit-transform:rotate3d(0,0,0,0deg); -ms-transform:rotate3d(0,0,0,0deg); transform:rotate3d(0,0,0,0deg); } .hex h1,.hex .mapmarkmnop { width:100%; padding:5%; box-sizing:border-box; background-color:rgb(180,81,176); font-weight:300; -webkit-transition:-webkit-transform .2s ease-out,opacity .3s ease-out; transition:transform .2s ease-out,opacity .3s ease-out; background:#392c84; background:-webkit-linear-gradient(90deg,#392c84 10%,#db4ebb 100%); background:-moz-linear-gradient(90deg,#392c84 10%,#db4ebb 100%); background:-o-linear-gradient(90deg,#392c84 10%,#db4ebb 100%); background:-ms-linear-gradient(90deg,#392c84 10%,#db4ebb 100%); background:linear-gradient(90deg,#392c84 10%,#db4ebb 100%); color:#fff;font-size:10px; } .mapmarkmnop .fa{ display:block; margin:0px auto; text-align:center; width:100%; position:relative; left:0; right:0; font-size:30px;} .hex h1 { bottom:50%; padding-top:50%; font-size:18px; z-index:1; -webkit-transform:translate3d(0,-100%,0); -ms-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0);margin:0px auto; } .hex h1::after { content:''; position:absolute; bottom:0; left:0; width:86%; text-align:center; border-bottom:none; right:0; margin:0px auto; } .hex .mapmarkmnop { top:50%; padding-bottom:50%; -webkit-transform:translate3d(0,100%,0); -ms-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); } .containermainlocat .card_inner__content .price{font-size:20px; } .hexLink:hover h1,.hexLink:focus h1,.hexLink:hover .mapmarkmnop,.hexLink:focus .mapmarkmnop{ -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } .hexLink:hover .contentmnophex{opacity:1;} .locatcitylocation{width:20%;display:block;margin:0px auto;text-align:center;} .topimge img{display:block;margin:0px auto;text-align:center;width:100%} .locatcity{width:80%;display:block;margin:0px auto;text-align:center;} .locatcityman{width:100%;position:relative;} .locatcityman img{width:100%;} .locatcityman .headingttl{display:block; margin:0px auto; text-align:center; position:absolute; bottom:-14px; left:12.5%; font-size:4.3rem; color:#0909c4; text-transform:uppercase;} .locatcityman{font-size:18px;} .mtopimge .maincontem{display:block;font-size:18px;} .mtopimge .maincontem{ max-width:700px; width:100%;} #container{min-height:600px;} #googleMap{width:100%;height:400px;height:400px; position:relative; overflow:hidden; border-radius:100%; width:400px; float:right; margin-top:65px;} .col-md-6{width:50%;} .mnaddre{color:#0a0ac4;} .mnaghtm {*padding-top:90px;margin-top:30px;} .mnaghtm .ttl{font-size:23px; color:#0a0ac4; width:auto; border-radius:8px; font-weight:600; font-style:normal; text-transform:uppercase; letter-spacing:2px;} .topimge img.locatcityimg{margin-top:-5px;margin-right:20px;width:100%} .locatem{margin-top:70px;} .mnaghtm .mntttlm{font-size:16px; padding-top:0px; color:#0a0ac4; font-style:inherit; font-weight:300;} .locatemm .locatcity{float:right;} .locatemm .locatcitylocation{width:25%;} .locatemm .locatem { margin-top:3px; } .topimgemm {display:block; margin:0px auto; text-align:center; margin-top:30px;} .locatttl{display:block; margin:0px auto; text-align:center; width:30%; margin-right:20px;margin-bottom:30px;} .locatttl a{display:block; margin:0px auto; text-align:center; padding:20px; background:#0a0ac4; font-size:40px; color:#fff;border-radius:5px;} @media (min-width:1201px) { #hexGrid{ padding-bottom:4.4% } .hex { width:20%; } .hex:nth-child(9n+6){ margin-left:10%; } } @media (max-width:1200px) and (min-width:901px) { #hexGrid{ padding-bottom:5.5% } .hex { width:25%; } .hex:nth-child(7n+5){ margin-left:12.5%; } } @media (max-width:900px) and (min-width:601px) { #hexGrid{ padding-bottom:7.4% } .hex { width:33.333%; } .hex:nth-child(5n+4){ margin-left:16.666%; } } @media (max-width:600px) { #hexGrid{ padding-bottom:11.2% } .hex { width:50%; } .hex:nth-child(3n+3){ margin-left:25%; } } @media (max-width:400px) { #hexGrid { font-size:13px; } }