diff --git a/style.css b/style.css index 96e82d8d..82c1a8e3 100644 --- a/style.css +++ b/style.css @@ -1,135 +1,133 @@ /**** GLOBAL STYLES ****/ -@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); * { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Poppins", sans-serif; -} - -html { - font-size: 62.5%; -} - -body { - font-family: "Poppins", sans-serif; -} -.scroll-top-btn { - position: fixed; /* Fixed position */ - bottom: 20px; /* Distance from the bottom of the viewport */ - right: 80px; /* Adjust this value to move the button left */ - background-color: #007bff; - color: white; - border: none; - padding: 10px 17px; - cursor: pointer; - border-radius: 50%; - display: none; /* Initially hidden */ - z-index: 1000; /* Ensure it appears above other content */ + margin: 0; + padding: 0; + box-sizing: border-box; + } + + html { + font-size: 62.5%; + } + + body { + font-family: "Poppins", sans-serif; + } + .scroll-top-btn { + position: fixed; /* Fixed position */ + bottom: 20px; /* Distance from the bottom of the viewport */ + right: 80px; /* Adjust this value to move the button left */ + background-color: #007bff; + color: white; + border: none; + padding: 10px 15px; + cursor: pointer; + border-radius: 5px; + display: none; /* Initially hidden */ + z-index: 1000; /* Ensure it appears above other content */ } .scroll-top-btn:hover { - background-color: #2c445e; -} - -h1 { - font-size: 2.6rem; -} - -h2 { - font-size: 4.8rem; -} -h3 { - font-size: 3rem; - font-weight: normal; -} - -h4, -h5 { - font-size: 2.8rem; -} - -a { - color: white; - text-decoration: none; -} - -li, -button, -label, -input, -p { - font-size: 2rem; -} - -button { - padding: 2rem 6rem; - background: #4c6e97; - border: none; - color: white; - font-size: 1.8rem; - cursor: pointer; - transition: background 0.6s ease-in-out; -} - -/**** MAIN PAGE ****/ - -.main-head { - background: #131c27; - color: white; - position: sticky; - top: 0%; - z-index: 5; -} - -nav { - display: flex; - width: 90%; - margin: auto; - padding: 2rem; - min-height: 10vh; - align-items: center; - flex-wrap: wrap; -} - -nav ul { - display: flex; - flex: 1 1 40rem; - justify-content: space-around; - align-items: center; - list-style: none; + background-color: #007bff; } - -#logo { - flex: 2 1 40rem; - font-family: "Pattaya", sans-serif; - font-weight: 400; -} - -.hero { - min-height: 90vh; - background: linear-gradient(rgba(0, 0, 0, 0.8), transparent), - url("/img/landing-page.jpg"); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - color: white; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; -} - -.hero button { - border-radius: 1rem; -} - -.hero h3 { - padding: 5rem; -} -/* Header Styles */ + + h1 { + font-size: 2.6rem; + } + + h2 { + font-size: 4.8rem; + } + h3 { + font-size: 3rem; + font-weight: normal; + } + + h4, + h5 { + font-size: 2.8rem; + } + + a { + color: white; + text-decoration: none; + } + + li, + button, + label, + input, + p { + font-size: 2rem; + } + + button { + padding: 2rem 6rem; + background: #4c6e97; + border: none; + color: white; + font-size: 1.8rem; + cursor: pointer; + transition: background 0.6s ease-in-out; + } + + /**** MAIN PAGE ****/ + + .main-head { + background: #131c27; + color: white; + position: sticky; + top: 0%; + z-index: 5; + } + + nav { + display: flex; + width: 90%; + margin: auto; + padding: 2rem; + min-height: 10vh; + align-items: center; + flex-wrap: wrap; + } + + nav ul { + display: flex; + flex: 1 1 40rem; + justify-content: space-around; + align-items: center; + list-style: none; + } + + #logo { + flex: 2 1 40rem; + font-family: "Pattaya", sans-serif; + font-weight: 400; + } + + .hero { + min-height: 90vh; + background: linear-gradient(rgba(0, 0, 0, 0.8), transparent), + url("/img/landing-page.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + } + + .hero button { + border-radius: 1rem; + } + + .hero h3 { + padding: 5rem; + } + /* Header Styles */ .main-head { padding: 15px; background-color: #007bff; /* Header background */ @@ -186,250 +184,250 @@ nav ul { margin-bottom: 20px; } -/**** LOCATIONS PAGE ****/ - -#locations { - min-height: 100vh; - background: linear-gradient(rgba(0, 0, 0, 0.5), transparent), - url("/img/new-york-page.png"); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - display: flex; - align-items: center; - position: relative; - overflow: hidden; -} - -.locations-head { - width: 90%; - margin: auto; -} - -.locations-head h2 { - padding: 1rem 0rem; - text-decoration: underline; - text-decoration-thickness: 0.5rem; -} - -.locations-head h3 { - padding: 4rem 0rem; - background: linear-gradient(#090f15, #42231e); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; -} - -.dark-mode .locations-head h3 { - -webkit-text-fill-color: white; -} - -.cloud { - position: absolute; - top: 0%; - right: 0%; -} - -.moving-cloud-1 { - animation: cloudAnimation 3s infinite alternate ease-in-out; -} - -.moving-cloud-2 { - top: 20%; - z-index: -1; - opacity: 0.5; - animation: cloudAnimation 3.5s infinite alternate ease-in-out; -} - -/**** ANIMATION ****/ - -@keyframes cloudAnimation { - from { - transform: translate(10%, -10%); + + /**** LOCATIONS PAGE ****/ + + #locations { + min-height: 100vh; + background: linear-gradient(rgba(0, 0, 0, 0.5), transparent), + url("/img/new-york-page.png"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + display: flex; + align-items: center; + position: relative; + overflow: hidden; } - to { - transform: translate(0%, 0%); + + .locations-head { + width: 90%; + margin: auto; } -} - -/**** BENEFITS SECTION ****/ - -.benefits-head { - background: #343c44; - min-height: 30vh; - padding: 3rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - color: white; - text-align: center; -} - -.benefits-head h3 { - padding: 1rem; -} - -.cards { - width: 90%; - margin: auto; - display: flex; - min-height: 70vh; - align-items: center; - flex-wrap: wrap; -} - -.card { - text-align: center; - flex: 1 1 25rem; - min-height: 45vh; - margin: 2rem 5rem; - box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1), 0px 20px 20px rgba(0, 0, 0, 0.1); - transition: all 0.2s; -} - -.card:hover { - scale: 1.02; - box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.205), - 0px 20px 20px rgba(0, 0, 0, 0.205); -} - -.cards img { - max-width: 20%; - margin: 0.5rem; -} -.card h4, -.card p { - padding: 1rem; - line-height: 2; -} - -.card-icon { - background: #2a3c53; - padding: 2rem; -} - -/**** CONTACT PAGE ****/ - -#contact { - min-height: 100vh; - background: linear-gradient(rgba(0, 0, 0, 0.5), transparent), - url("/img/contact-mountain.png"); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - display: flex; - justify-content: center; - align-items: center; -} - -.form-wrapper { - background: rgba(19, 28, 39, 0.8); - width: 60%; - color: white; - border-radius: 2rem; -} - -.form-head { - text-align: center; - padding: 4rem; -} - -.name-form, -.email-form { - padding: 3rem; - text-align: center; -} - -.form-wrapper label { - margin: 0rem 3rem; -} - -.form-wrapper button { - width: 100%; - padding: 2rem; - margin-top: 8rem; - border-bottom-left-radius: 2rem; - border-bottom-right-radius: 2rem; -} - -.form-wrapper input { - padding: 1rem 3rem; -} - -/**** FOOTER ****/ - -footer { - color: white; - background-color: rgba(19, 28, 39, 1); -} -.footer-wrapper { - display: flex; - padding: 2rem; - width: 90%; - margin: auto; - align-items: center; - min-height: 10vh; - flex-wrap: wrap; -} -footer h5 { - flex: 1 1 40rem; -} - -footer ul { - display: flex; - list-style: none; - flex: 1 1 40rem; - justify-content: space-between; - align-items: center; -} - -/**** MEDIA QUERY ****/ - -@media screen and (max-width: 932px) { - html { - font-size: 45%; + + .locations-head h2 { + padding: 1rem 0rem; + text-decoration: underline; + text-decoration-thickness: 0.5rem; + } + + .locations-head h3 { + padding: 4rem 0rem; + background: linear-gradient(#090f15, #42231e); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + } + + .dark-mode .locations-head h3 { + -webkit-text-fill-color: white; } - nav ul { + .cloud { + position: absolute; + top: 0%; + right: 0%; + } + + .moving-cloud-1 { + animation: cloudAnimation 3s infinite alternate ease-in-out; + } + + .moving-cloud-2 { + top: 20%; + z-index: -1; + opacity: 0.5; + animation: cloudAnimation 3.5s infinite alternate ease-in-out; + } + + /**** ANIMATION ****/ + + @keyframes cloudAnimation { + from { + transform: translate(10%, -10%); + } + to { + transform: translate(0%, 0%); + } + } + + /**** BENEFITS SECTION ****/ + + .benefits-head { + background: #343c44; + min-height: 30vh; + padding: 3rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: white; text-align: center; } - #logo { - padding: 1.8rem; + + .benefits-head h3 { + padding: 1rem; + } + + .cards { + width: 90%; + margin: auto; + display: flex; + min-height: 70vh; + align-items: center; + flex-wrap: wrap; + } + + .card { text-align: center; + flex: 1 1 25rem; + min-height: 45vh; + margin: 2rem 5rem; + box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1), 0px 20px 20px rgba(0, 0, 0, 0.1); + transition: all 0.2s; } - .cloud { - height: 40rem; - pointer-events: none; + .card:hover{ + scale: 1.02; + box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.205), 0px 20px 20px rgba(0, 0, 0, 0.205); } - .locations-head h3 { - background: rgba(19, 28, 39, 0.8); - -webkit-text-fill-color: white; + + .cards img { + max-width: 20%; + margin: 0.5rem; + } + .card h4, + .card p { + padding: 1rem; + line-height: 2; + } + + .card-icon { + background: #2a3c53; padding: 2rem; - text-align: start; } - + + /**** CONTACT PAGE ****/ + + #contact { + min-height: 100vh; + background: linear-gradient(rgba(0, 0, 0, 0.5), transparent), + url("/img/contact-mountain.png"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + } + .form-wrapper { + background: rgba(19, 28, 39, 0.8); + width: 60%; + color: white; + border-radius: 2rem; + } + + .form-head { + text-align: center; + padding: 4rem; + } + + .name-form, + .email-form { + padding: 3rem; + text-align: center; + } + + .form-wrapper label { + margin: 0rem 3rem; + } + + .form-wrapper button { width: 100%; + padding: 2rem; + margin-top: 8rem; + border-bottom-left-radius: 2rem; + border-bottom-right-radius: 2rem; } - + + .form-wrapper input { + padding: 1rem 3rem; + } + + /**** FOOTER ****/ + footer { - text-align: center; + color: white; + background-color: rgba(19, 28, 39, 1); + } + .footer-wrapper { + display: flex; + padding: 5rem; + width: 90%; + margin: auto; + align-items: center; + min-height: 10vh; + flex-wrap: wrap; } - footer h5 { - padding-bottom: 3rem; + flex: 1 1 40rem; + } + + footer ul { + display: flex; + list-style: none; + flex: 1 1 40rem; + justify-content: space-between; + align-items: center; + } + + /**** MEDIA QUERY ****/ + + @media screen and (max-width: 932px) { + html { + font-size: 45%; + } + + nav ul { + text-align: center; + } + #logo { + padding: 1.8rem; + text-align: center; + } + + .cloud { + height: 40rem; + pointer-events: none; + } + .locations-head h3 { + background: rgba(19, 28, 39, 0.8); + -webkit-text-fill-color: white; + padding: 2rem; + text-align: start; + } + + .form-wrapper { + width: 100%; + } + + footer { + text-align: center; + } + + footer h5 { + padding-bottom: 3rem; + } } -} -/* General styling */ -body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - /* box-sizing: border-box; */ - transition: background-color 0.3s ease, color 0.3s ease; + /* General styling */ + body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + /* box-sizing: border-box; */ + transition: background-color 0.3s ease, color 0.3s ease; } /* Dark mode styles @@ -442,7 +440,7 @@ body.dark-mode { /* body.light-mode { background-color: #ffffff; color: #000000; -} */ +} */ .light-mode { background-color: #ffffff; /* Light mode background */ color: black; /* Light mode text color */ @@ -455,67 +453,72 @@ body.dark-mode { /* Button styles */ .mode-toggle { - position: fixed; - top: 10px; - right: 10px; - background: none; - border: none; - cursor: pointer; - outline: none; - font-size: 1.5em; - transition: color 0.3s, transform 0.3s; - padding: 15px; + position: fixed; + top: 10px; + right: 10px; + background: none; + border: none; + cursor: pointer; + outline: none; + font-size: 1.5em; + transition: color 0.3s, transform 0.3s; + padding: 15px; } /* Sun and moon icons */ .sun-icon { - color: #ffd700; + color: #FFD700; } .moon-icon { - color: #b0c4de; + color: #B0C4DE; } /* Glow effect */ .sun-icon.glow { - color: #ffa500; - text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700; + color: #FFA500; + text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700; } /* Section styling */ .map-section { - padding: 40px; - background-color: inherit; - text-align: center; + padding: 40px; + background-color: inherit; + text-align: center; } .map-section h2 { - font-size: 2.5em; - margin-bottom: 20px; + font-size: 2.5em; + margin-bottom: 20px; } /* Map container styling */ #map { - height: 600px; /* Adjust the height as needed */ - width: 100%; - margin-top: 20px; - border-radius: 8px; - box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + height: 600px; /* Adjust the height as needed */ + width: 100%; + margin-top: 20px; + border-radius: 8px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); } /* itineraries */ .itineraries-section { padding: 50px; background-color: #f4f4f4; - text-align: center; } .itineraries-section h2 { - font-size: 2.5em; + font-size: 36px; margin-bottom: 20px; - font-weight: bold; + font-weight: 600; + text-align: center; +} +.itineraries-section p{ + font-size: 16px; + color: #007BFF; + margin-bottom: 40px; + text-align: center; } - .itinerary-list { display: flex; flex-wrap: wrap; @@ -528,28 +531,35 @@ body.dark-mode { .itinerary { background: white; padding: 20px; + max-width: 150px; + min-height: 280px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); flex: 1 1 calc(33% - 40px); - max-width: calc(33% - 40px); - text-align: center; + max-width: calc(33% - 40px); +} + +.itinerary:hover{ + transform: scale(1.05); + transition: all 0.3s; } .itinerary h3 { - font-size: 2em; - margin-bottom: 10px; - color: #090f15; + font-size: 24px; + font-weight: 600; + margin-bottom: 30px; + color: #007BFF; } .itinerary p { - font-size: 1.5rem; - text-align: center; - margin-bottom: 15px; - color: #003366; + font-size: 16px; + margin-bottom: 35px; + color: #000c18; + text-align: left; } .itinerary button { - background-color: #007bff; + background-color: #007BFF; color: white; padding: 10px 15px; border: none; @@ -557,20 +567,21 @@ body.dark-mode { cursor: pointer; transition: background-color 0.3s; margin-bottom: 15px; + margin-left: 70px; } .itinerary button:hover { background-color: #0056b3; } -@media (max-width: 768px) { - .itinerary { +@media(max-width: 768px){ + .itinerary{ flex: 1 1 calc(45% - 20px); max-width: calc(45% - 20px); } } -@media (max-width: 480px) { - .itinerary { +@media (max-width: 480px){ + .itinerary{ flex: 1 1 100%; max-width: 100%; } @@ -613,23 +624,18 @@ body.dark-mode { display: block; margin-bottom: 5px; font-weight: bold; - font-size: 15px; } -.review-form input, -.review-form select, -.review-form textarea { +.review-form input, .review-form select, .review-form textarea { width: 100%; - font-weight: 600; padding: 10px; - font-size: 15px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; } .review-form button { - background-color: #007bff; + background-color: #007BFF; color: white; padding: 10px 15px; border: none; @@ -684,17 +690,6 @@ body.dark-mode { border-color: black; /* Dark border in dark mode */ } -.cab-booking-section input, .cab-booking-section select { - width: 100%; - font-weight: 600; - padding: 20px; - height: 20px; - font-size: 15px; - margin-bottom: 15px; - border: 1px solid #ccc; - border-radius: 5px; -} - .review-item h3 { margin: 0 0 10px; font-size: 1.2em; @@ -767,7 +762,7 @@ body.dark-mode { /* Button to check deals */ .popup-content button { - background-color: #007bff; + background-color: #007BFF; color: #fff; padding: 10px 15px; border: none; @@ -787,44 +782,51 @@ body.dark-mode { } .deals-section h2 { - font-size: 2em; - margin-bottom: 20px; + font-size: 36px; text-align: center; + margin-bottom: 10px; } .deals-section p { - font-size: 2em; - text-align: center; margin-bottom: 30px; + color: #019a22; + text-align: center; + font-size: 16px; } .deals-list { display: flex; flex-wrap: wrap; - justify-content: space-around; + justify-content: space-evenly; gap: 20px; } .deal-item { background-color: #fff; padding: 20px; + font-size: 15px; border-radius: 10px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); max-width: 300px; - text-align: center; - color: #090f15; + margin-top: 20px; +} +.deal-item:hover{ + transform: scale(1.05); + transition: all 0.3s; } .deal-item h3 { - font-size: 1.5em; - margin-bottom: 15px; - color: #090f15; + font-size: 24px; + font-weight: 600; + color: #019a22; + margin-bottom: 20px; } .deal-item p { - font-size: 1.5rem; - margin-bottom: 15px; + font-size: 16px; + margin-bottom: 35px; color: #090f15; + text-align: left; } .deal-item .discount { @@ -839,13 +841,15 @@ body.dark-mode { color: white; padding: 10px 15px; border: none; + align-items: center; border-radius: 5px; cursor: pointer; + margin-left: 60px; transition: background-color 0.3s; } .deal-item button:hover { - background-color: #218838; + background-color: #077d20; } #deals { background-color: #f9f9f9; /* Light background */ @@ -863,54 +867,60 @@ body.dark-mode { } .recommendations-section h2 { - font-size: 2em; margin-bottom: 20px; + font-size: 36px; text-align: center; - color: #0056b3; /* Dark blue for headings */ } .recommendations-section p { - font-size: 1.1em; text-align: center; - margin-bottom: 30px; - color: black; /* Darker gray for text */ + margin-bottom: 40px; + font-size: 16px; + color: rgb(47, 0, 255); /* Darker gray for text */ } .recommendation-list { display: flex; flex-wrap: wrap; gap: 20px; - justify-content: space-around; + min-height: 300px; + justify-content: space-evenly; } .recommendation-item { - background-color: #fff; /* White background for items */ + background-color: #effafa; /* White background for items */ padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */ max-width: 300px; - text-align: center; border: 2px solid #0056b3; /* Blue border */ } +.recommendation-item:hover{ + transform: scale(1.03); + transition: all 0.3s; +} .recommendation-item h3 { - font-size: 1.5em; - margin-bottom: 15px; + font-size: 24px; + font-weight: 600; + margin-bottom: 25px; color: #0056b3; /* Dark blue for headings */ } .recommendation-item p { - font-size: 1em; - margin-bottom: 20px; + font-size: 16px; + margin-bottom: 40px; + text-align: left; color: black; /* Darker gray for text */ } .recommendation-item button { background-color: #0056b3; /* Dark blue for buttons */ - color: white; + color: rgb(255, 255, 255); padding: 10px 15px; border: none; border-radius: 5px; + margin-left: 50px; cursor: pointer; transition: background-color 0.3s; } @@ -946,11 +956,12 @@ body.dark-mode { display: none; /* Initially hidden */ } + .navhover { text-decoration: none; color: black; font-size: 18px; - display: inline-block; + display: inline-block; padding: 10px 15px; /* Adds padding around the text */ border-radius: 20px; /* Creates rounded corners */ transition: background-color 0.3s, color 0.3s; /* Smooth transition */ @@ -961,40 +972,40 @@ body.dark-mode { color: white; /* Changes text color on hover */ } -#social-icons { - display: inline-block; - font-size: 24px; /* Adjust the size as needed */ - padding: 7px 9px 7px; /* Adds padding around the text */ - border-radius: 20px; /* Creates rounded corners */ - transition: transform 0.3s ease, color 0.3s ease; -} - -.twitter:hover { - background-color: #1e97e3; /* Twitter's official blue color */ - transform: scale(1.1); -} - -.instagram:hover { - background-color: #e1306c; /* Instagram's official pinkish color */ - transform: scale(1.1); /* Slightly enlarges the icon */ -} - -.youtube:hover { - background-color: #ff0000; /* YouTube's official red color */ - transform: scale(1.1); /* Slightly enlarges the icon */ +.social-icons a { + display: inline-flex; + justify-content: center; + align-items: center; + width: 4rem; + height: 4rem; + background-color: transparent; + border: 0.2rem solid #b74b4b; + font-size: 2rem; + border-radius: 50%; + margin: 3rem 1.5rem 3rem 0; + transition: 0.3s ease; + color: #b74b4b; } -/* Extra small devices (phones, 600px and down) */ -/*@media only screen and (max-width: 600px) {...}*/ - -/* Small devices (portrait tablets and large phones, 600px and up) */ -/*@media only screen and (min-width: 600px) {...}*/ - -/* Medium devices (landscape tablets, 768px and up) */ -/*@media only screen and (min-width: 768px) {...}*/ - -/* Large devices (laptops/desktops, 992px and up) */ -/*@media only screen and (min-width: 992px) {...}*/ - -/* Extra large devices (large laptops and desktops, 1200px and up) */ -/*@media only screen and (min-width: 1200px) {...}*/ +.social-icons a:hover { + color: black; + transform: scale(1.3) translateY(-5px); + background-color: #b74b4b; + box-shadow: 0 0 25px #b74b4b; +} + + /* Extra small devices (phones, 600px and down) */ + /*@media only screen and (max-width: 600px) {...}*/ + + /* Small devices (portrait tablets and large phones, 600px and up) */ + /*@media only screen and (min-width: 600px) {...}*/ + + /* Medium devices (landscape tablets, 768px and up) */ + /*@media only screen and (min-width: 768px) {...}*/ + + /* Large devices (laptops/desktops, 992px and up) */ + /*@media only screen and (min-width: 992px) {...}*/ + + /* Extra large devices (large laptops and desktops, 1200px and up) */ + /*@media only screen and (min-width: 1200px) {...}*/ +