body { font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; color: #888; line-height: 30px; text-align: center; } strong { font-weight: 600; } a, a:hover, a:focus { color: #9b59b6; text-decoration: none; transition: all .3s; } h1, h2 { margin-top: 10px; font-family: 'Montserrat', sans-serif; font-size: 38px; font-weight: 300; color: #555; line-height: 50px; } h3 { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 300; color: #555; line-height: 30px; } img { max-width: 100%; } .medium-paragraph { font-size: 17px; line-height: 32px; } .colored-text { color: #9b59b6; } ::-moz-selection { background: #9b59b6; color: #fff; text-shadow: none; } ::selection { background: #9b59b6; color: #fff; text-shadow: none; } /***** General style, all sections *****/ .section-container { margin: 0 auto; padding-bottom: 80px; } .section-container-gray-bg { background: #f8f8f8; } .section-container-image-bg, .section-container-image-bg h2, .section-container-image-bg h3 { color: #fff; } .section-container-image-bg .divider-1 span { border-color: #fff; } .section-description { margin-top: 60px; padding-bottom: 10px; } .section-description p { margin-top: 20px; padding: 0 120px; } .section-container-image-bg .section-description p { opacity: 0.8; } .section-bottom-button { padding-top: 60px; } .btn-link-1 { display: inline-block; height: 50px; margin: 0 5px; padding: 0 28px; background: #9b59b6; background: rgba(155, 89, 182, 0.7); border: 0; font-size: 15px; font-weight: 600; line-height: 48px; color: #fff; border-radius: 4px; transition: all .3s; } .btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active, .btn-link-1:active:focus, .btn-link-1.btn-primary:not(:disabled):not(.disabled):active, .btn-link-1.btn-primary:not(:disabled):not(.disabled):active:focus { background: #9b59b6; background: rgba(155, 89, 182, 0.9); outline: 0; color: #fff; box-shadow: none; } .btn-link-2 { display: inline-block; height: 50px; margin: 0 5px; padding: 0 28px; background: #333; background: rgba(0, 0, 0, 0.2); border: 0; font-size: 15px; font-weight: 600; line-height: 48px; color: #fff; border-radius: 4px; transition: all .3s; } .btn-link-2:hover, .btn-link-2:focus, .btn-link-2:active, .btn-link-2:active:focus, .btn-link-2.btn-primary:not(:disabled):not(.disabled):active, .btn-link-2.btn-primary:not(:disabled):not(.disabled):active:focus { background: #333; background: rgba(0, 0, 0, 0.4); outline: 0; color: #fff; box-shadow: none; } .btn-link-3 { display: inline-block; height: 50px; margin: 0 5px; padding: 0 28px; background: none; border: 0; border-bottom: 2px solid #9b59b6; font-size: 15px; font-weight: 600; line-height: 48px; color: #9b59b6; border-radius: 0; transition: all .3s; } .btn-link-3:hover, .btn-link-3:focus, .btn-link-3:active, .btn-link-3:active:focus, .btn-link-3.btn-primary:not(:disabled):not(.disabled):active, .btn-link-3.btn-primary:not(:disabled):not(.disabled):active:focus { padding: 0 10px; background: none; border: 0; border-bottom: 2px solid #9b59b6; outline: 0; color: #9b59b6; box-shadow: none; } /***** Divider *****/ .divider-1 span { display: inline-block; width: 200px; border-bottom: 1px dashed #ccc; } /***** Top menu *****/ .navbar { background: #444; -o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s; backface-visibility: hidden; } .navbar.navbar-no-bg {background: #444; background: rgba(0, 0, 0, 0.2); } .navbar-dark .navbar-nav { font-size: 15px; color: #fff; font-weight: 600; } .navbar-dark .navbar-nav .nav-link { color: #fff; color: rgba(255, 255, 255, 0.8); border: 0; } .navbar-dark .navbar-nav .nav-link:hover { color: #fff; } .navbar-dark .navbar-nav .nav-link:focus { color: #fff; outline: 0; } .navbar-expand-md .navbar-nav .nav-link { padding-left: 1rem; padding-right: 1rem; } .navbar-brand { width: 136px; background: url(../img/logo.png) left center no-repeat; border: 0; text-indent: -99999px; } /***** Top content *****/ .top-content { padding: 210px 0; } .top-content .text { color: #fff; } .top-content .text h1 { margin-top: 25px; color: #fff; } .top-content .description { margin: 30px 0 10px 0; } .top-content .description p { opacity: 0.8; } .top-content .top-big-link { margin-top: 45px; } /***** About us *****/ .our-story-box { margin-top: 100px; } .our-story-box-text { padding-right: 30px; text-align: left; } .our-story-box-text h3 { margin-top: 0; } .our-story-box-text .medium-paragraph { margin-top: 20px; margin-bottom: 20px; } .our-story-box-text a { border-bottom: 1px dashed #9b59b6; } .our-story-box-text a:hover, .our-story-box-text a:focus { border: 0; } .our-story-box-img img { border-radius: 4px; } /***** details *****/ .details-box { padding-top: 30px; text-align: left; } .details-box h3 { margin-top: 30px; } .details-box h3 a { color: #555; } .details-box h3 a:hover, .details-box h3 a:focus { color: #9b59b6; } .details-box h3 i { padding-left: 10px; color: #ccc; -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } .details-box h3:hover i { padding-left: 15px; } .details-box-date { padding-bottom: 10px; font-size: 14px; color: #aaa; text-transform: uppercase; } .details-box-date i { padding-right: 5px; color: #ddd; } .details-container .section-bottom-button { padding-top: 40px; } /***** rsvp *****/ .rsvp-box { margin-top: 30px; text-align: left; } .rsvp-box h3 { margin-top: 0; } .rsvp-box h3 a { color: #555; } .rsvp-box h3 a:hover, .rsvp-box h3 a:focus { color: #9b59b6; } .rsvp-box h3 i { padding-left: 10px; color: #ccc; -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } .rsvp-box h3:hover i { padding-left: 15px; } .rsvp-box-date { padding-bottom: 10px; font-size: 14px; color: #aaa; text-transform: uppercase; } .rsvp-box-date i { padding-right: 5px; color: #ddd; } .rsvp-container .section-bottom-button { padding-top: 40px; } /***** Footer *****/ footer { padding: 40px 0 0 0; background: #444; color: #aaa; text-align: left; } .footer-left a { color: #ddd; border-bottom: 1px dashed #ddd; } .footer-left a:hover, .footer-left a:focus { color: #ddd; border: 0; } .footer-right { text-align: right; } .footer-right a { margin: 0 6px; font-size: 32px; color: #aaa; } .footer-right a:hover, .footer-right a:focus { color: #eee; } .footer-bottom { padding-bottom: 25px; text-align: center; } .footer-bottom a { font-size: 32px; color: #666; line-height: 40px; } .footer-bottom a:hover, .footer-bottom a:focus { color: #888; }