.text{ padding-top: 30px; } /* popup styles */ /** * Box model adjustments * `border-box`... ALL THE THINGS - http://cbrac.co/RQrDL5 */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /** * 1. Force a vertical scrollbar - http://cbrac.co/163MspB * NOTE: Use `text-rendering` with caution - http://cbrac.co/SJt8p1 * NOTE: Avoid the webkit anti-aliasing trap - http://cbrac.co/TAdhbH * NOTE: IE for Windows Phone 8 ignores `-ms-text-size-adjust` if the * viewport tag is used - http://cbrac.co/1cFrAvl */ html { font-size: 100%; overflow-y: scroll; /* 1 */ min-height: 100%; } /** * 1. Inherits percentage declared on above as base `font-size` * 2. Unitless `line-height`, which acts as multiple of base `font-size` */ body { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 1em; /* 1 */ line-height: 1.5; /* 2 */ color: #444; } /* Page wrapper */ .wrapper { width: 90%; max-width: 800px; margin: 4em auto; text-align: center; } /* Icons */ .icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; fill: currentcolor; } /* Headings */ h1, h2, h3, h4, h5, h6 { color: #222; font-weight: 700; font-family: inherit; line-height: 1.333; text-rendering: optimizeLegibility; } /** * Pop up */ .modal { display: none; position: fixed; z-index: 8; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); } .modal-content { margin: 50px auto; border: 1px solid #999; width: 60%; } h2, p { margin: 0 0 20px; font-weight: 400; color: #999; } span { color: #666; display: block; padding: 0 0 5px; } form { padding: 25px; margin: 25px; box-shadow: 0 2px 5px #f5f5f5; background: #eee; } input, textarea { width: 90%; padding: 10px; margin-bottom: 20px; border: 1px solid #1c87c9; outline: none; } .contact-form button { width: 100%; padding: 10px; border: none; background: #1c87c9; font-size: 16px; font-weight: 400; color: #fff; } button:hover { background: #2371a0; } .close { color: #aaa; float: right; font-size: 38px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } button.button { background: none; border-top: none; outline: none; border: none; color: transparent; /* border: none; */ /* border-bottom: #02274a 1px solid; */ padding: 5px 20px 5px 20px; font-size: 16px; cursor: pointer; border-radius: 10px; } button.button:hover { border-bottom: #a99567 1px solid; color: #a99567; } /* Text on product Image */ .text-pic { position: relative; text-align: center; color: white; } /* Centered text */ .centered { position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); } .slick-slide img { width: 150%; /* height: 187.5%; */ } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { .center .slick-center { -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); /* color: #e67e22; */ opacity: 1; transform: scale(2.00); overflow: hidden; } .center .slick-center img { border-radius: 20px; padding: 5px; } .center img { border-radius: 50px; width:200%; padding:40px; } .center .slick-center button { border: #ffffff 1px solid; color: white; } .text-pic { margin-top: 200px; margin-bottom: 200px; } .text p{ padding-top: 30px; font-size: 25px; } } @media only screen and (min-width: 600px) { .center .slick-center { -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); /* color: #e67e22; */ opacity: 1; transform: scale(1.60); overflow: visible; } .center .slick-center img { border-radius: 20px; padding: 5px; /* background-color: #222; */ } .center img { border-radius: 50px; width:200%; padding:40px; } .center .slick-center button { border: #ffffff 1px solid; color: white; } .text-pic { margin-top: 200px; margin-bottom: 200px; } .text p{ padding-top: 30px; font-size: 25px; } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { .center .slick-center { -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); /* color: #e67e22; */ opacity: 1; transform: scale(2.00); overflow: visible; } .center .slick-center img { border-radius: 20px; padding: 5px; } .center img { border-radius: 50px; width:200%; padding:40px; } .center .slick-center button { border: #ffffff 1px solid; color: white; } .text-pic { margin-top: 200px; margin-bottom: 200px; } .text p{ padding-top: 30px; font-size: 25px; } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { .center .slick-center { -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); /* color: #e67e22; */ opacity: 1; transform: scale(2.00); overflow: visible; } .center .slick-center img { border-radius: 20px; padding: 5px; } .center img { border-radius: 50px; width:200%; padding:30px; } .center .slick-center button { border: #ffffff 1px solid; color: white; } .text-pic { margin-top: 200px; margin-bottom: 200px; } .text p{ font-size: 25px; } } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { .center .slick-center { -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); /* color: #e67e22; */ opacity: 1; transform: scale(1.00); overflow: visible; } .center .slick-center img { border-radius: 20px; padding: 20px; } .center img { border-radius: 20px; padding:40px; } .center .slick-center button { border: #ffffff 1px solid; color: white; } .text-pic { margin-top: 0px; margin-bottom: 0px; } .text p{ padding-top: 0px; font-size: 20px; } }