/*-----------------------------------------------------------------------------------

    Template Name: Grace - Elegant Wedding Invite Template
    Template URI: http://grace.designershare.net/
    Description: HTML5 Bootstrap Template
    Author: Petia Koleva
    Author URI:  http://designify.me
    Version: 1.0

-----------------------------------------------------------------------------------

CSS INDEX
===================

1. Global Styles
2. Dividers
3. Specific Layout Adjustments
4. Navigation
5. Headers
6. Section Global Styles
7. Section The Couple
8. Section Timeline
9. Section The Wedding
10. Section Gallery
11. Groomsmen
12. Bridesmaids
13. The Gifts
14. RSVP
15. Footer
16. Back To Top Link
17. Buttons
18. Paddings 
19. Margins 

-----------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------- 
1. Global Styles
-----------------------------------------------------------------------------------*/
html,body{height:100%}
body {padding-top: 50px;font-family: 'Roboto Condensed', sans-serif;  font-weight:500;color:#0d0b16}

/*----------------------------------------------------------------------------------- 
2. Dividers
-----------------------------------------------------------------------------------*/
.sm-divider {border-color:#f93e7d;max-width:25px;border-width: 2px;margin:20px auto 50px}
.sm-divider-white {border-color:#FFF;max-width:25px;border-width: 2px;margin:10px auto}

/*----------------------------------------------------------------------------------- 
3. Specific Layout Adjustments 
-----------------------------------------------------------------------------------*/
.no-gutter > [class*=col-] {padding-right: 0;padding-left: 0;}
.no-gutter {padding-right: 0;padding-left: 0;}
.no-padding {padding: 0;}

/*----------------------------------------------------------------------------------- 
4. Navigation
-----------------------------------------------------------------------------------*/
.navbar {border: 0px solid transparent;}
.navbar-brand {float: left;padding: 10px 15px;font-size: 18px;line-height: 20px;height: 60px;}
.navbar-default {background-color: #fff;border-color: #f1f1f1;border-bottom: 1px solid #f5f4f7}
@media (max-width: 767px) {
    .navbar-default .navbar-nav {margin:0px;}
    .navbar-default .navbar-nav > li > a {padding: 10px 15px;}
}
@media(min-width:768px) {
    .navbar-default .navbar-nav > li > a {padding: 20px 12px;}
}
.navbar-default .navbar-nav > li > a {color: #0d0b16;text-transform: uppercase;font-weight: 600;letter-spacing: 1px;}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {color: #f93e7d;background-color: #f5f4f7;}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {color: #f93e7d;background-color: #f5f4f7;}
.nav > li > a:hover,
.nav > li > a:focus {text-decoration: none;color: #f93e7d;background-color: #f5f4f7;}
button.navbar-toggle.collapsed {background-color:transparent;}
.navbar-default .navbar-toggle {border-color: transparent;}
.navbar-default .navbar-toggle .icon-bar {background-color: #f93e7d;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color:transparent;}
.navbar-toggle {margin-top:12px;}
@media (max-width: 767px) {
.nav-justified > li > a {color: #f93e7d;text-transform:uppercase;font-weight:500;padding: 5px 15px;}
.navbar-collapse {padding-right: 0;padding-left: 0;}
}

/*----------------------------------------------------------------------------------- 
5. Headers
-----------------------------------------------------------------------------------*/
/* Fullwidth Header */

header {
    height: 100vh;
    overflow: hidden;
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) {
    header {
        height: auto;
    }
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
    header {
        height: auto;
    }
}

/* iPad with portrait orientation */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    header {
        height: 1024px;
    }
}

/*  iPad with landscape orientation */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
    header {
        height: 768px;
    }
}


header#fullwidth{background-position:center center;background-attachment:scroll;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-o-background-size:cover;}
@media(min-width:1199px) {
    header#fullwidth {
        background-attachment: fixed;
    }
}
@media (max-width: 767px) {
    header#fullwidth {background-attachment: scroll;}
}
@media(max-width:767px) {header#fullwidth {height:auto}}
@media(min-width:992px) {
    header .header-text {padding-top:250px; padding-bottom:150px;}
}
@media(min-width:768px) {
    header .header-text {padding-top:150px; padding-bottom:150px;}
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    header .header-text {padding-top:250px; padding-bottom:100px;}
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    header .header-text {padding-top:175px; padding-bottom:140px;}
}
@media(max-width:767px) {
    header .header-text {padding-top:200px; padding-bottom:50px;}
}
@media(max-width:640px) {
    header .header-text {padding-top:140px; padding-bottom:50px;}
}
/* Header Backgrounds */
.grace-bg {background: url(../images/header-backgrounds/grace-background-couple-on-the-beach.jpg);}
.grace-bg-soon {background: url(../images/header-backgrounds/grace-background-couple-in-the-mountain.jpg);}

/*----------------------------------------------------------------------------------- 
6. Section Global Styles
-----------------------------------------------------------------------------------*/
section {padding:50px 0;}
section h2 {font-family: 'Playfair Display', serif;  color: #0d0b16; text-transform:uppercase; font-size:24px; letter-spacing:2px; font-weight:700}
section h3 {font-family: 'Playfair Display', serif;  color: #f93e7d; text-transform:uppercase; font-size:18px; letter-spacing:1px; font-weight:700}

/*----------------------------------------------------------------------------------- 
7. Section The Couple
-----------------------------------------------------------------------------------*/
#couple {background: #f2f1f8;}
#couple .lead {font-size: 16px;letter-spacing: normal}

/*----------------------------------------------------------------------------------- 
8. Section Timeline
-----------------------------------------------------------------------------------*/
.timeline{list-style:none;padding:10px 0;position:relative;font-weight:500}
.timeline:before{top:0;bottom:0;position:absolute;content:" ";width:2px;background:#f93e7d;left:50%;margin-left:-1.5px}
.timeline h2{max-width:6em;margin:0 auto 3em;padding:.5em;text-align:center;position:relative;clear:both;bottom:0}
.timeline h2.bottom-heart{max-width:6em;margin:0 auto;padding:.5em;text-align:center;position:relative;clear:both;bottom:0}
.timeline > li{margin:40px 0;position:relative;width:50%;float:left;clear:left}
.timeline > li:before,.timeline > li:after{content:" ";display:table}
.timeline > li:after{clear:both}
.timeline > li:before,.timeline > li:after{content:" ";display:table}
.timeline > li:after{clear:both}
.timeline > li > .timeline-panel{width:calc(100% - 25px);width:-moz-calc(100% - 25px);width:-webkit-calc(100% - 25px);float:left;position:relative}
.timeline > li > .timeline-panel:before{position:absolute;top:26px;right:-15px;display:inline-block;width:10px;height:10px;/*background:#0d0b16;*/-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;content:" "}
.timeline > li > .timeline-badge{color:#f93e7d;width:24px;height:24px;line-height:50px;text-align:center;position:absolute;top:16px;right:-12px;z-index:100}
.timeline > li.timeline-inverted > .timeline-panel{float:right}
.timeline > li.timeline-inverted > .timeline-panel:before{border-left-width:0;border-right-width:15px;left:-15px;right:auto}
.timeline > li.timeline-inverted > .timeline-panel:after{border-left-width:0;border-right-width:14px;left:-14px;right:auto}
.timeline-badge > a{color:#f93e7d!important}
.timeline-badge a:hover{color:#f93e7d!important}
.timeline-title{margin-top:0;color:inherit}
.timeline-heading h4{font-weight:600;padding:0 15px;color:#f93e7d;text-transform:uppercase;font-size:18px;letter-spacing: 2px}
.timeline-body > p,.timeline-body > ul{padding:10px 15px;margin-bottom:0;font-size:16px}
.timeline-footer{padding:5px 15px}
.timeline-footer p{margin-bottom:0}
.timeline-footer > a{cursor:pointer;text-decoration:none}
.timeline > li.timeline-inverted{float:right;clear:right}
.timeline > li:nth-child(2){margin-top:-50px}
.timeline > li.timeline-inverted > .timeline-badge{left:-12px}
.no-float{float:none!important}
@media (max-width: 767px) {
ul.timeline:before{left:40px}
.timeline h2{max-width:6em;margin:0 -32px 3em;padding:.5em;text-align:center;position:relative;clear:both;bottom:0}
.timeline h2.bottom-heart{max-width:6em;margin:0 -32px;padding:.5em;text-align:center;position:relative;clear:both;bottom:0}
ul.timeline > li{margin:40px 0;position:relative;width:100%;float:left;clear:left}
ul.timeline > li > .timeline-panel{width:calc(100% - 65px);width:-moz-calc(100% - 65px);width:-webkit-calc(100% - 65px)}
ul.timeline > li > .timeline-badge{left:28px;margin-left:0;top:16px}
ul.timeline > li > .timeline-panel{float:right}
ul.timeline > li > .timeline-panel:before{border-left-width:0;border-right-width:15px;left:-15px;right:auto}
ul.timeline > li > .timeline-panel:after{border-left-width:0;border-right-width:14px;left:-14px;right:auto}
.timeline > li.timeline-inverted{float:left;clear:left;margin-top:30px;margin-bottom:30px}
.timeline > li.timeline-inverted > .timeline-badge{left:28px}
}

/*----------------------------------------------------------------------------------- 
9. Section The Wedding
-----------------------------------------------------------------------------------*/
#the-wedding {background:#f2f1f8}
.animate{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.info-card{width:100%;border:1px solid #f2f1f8;position:relative;margin-bottom:20px;overflow:hidden;background:#f93e7d}
.info-card > img{margin-bottom:60px}
.info-card .info-card-details,.info-card .info-card-details .info-card-header{width:100%;height:100%;position:absolute;bottom:-100%;left:0;padding:0 15px;background:#f93e7d;text-align:center;color:#FFF}
.info-card .info-card-details::-webkit-scrollbar{width:8px}
.info-card .info-card-details::-webkit-scrollbar-button{width:8px;height:0}
.info-card .info-card-details::-webkit-scrollbar-track{background:transparent}
.info-card .info-card-details::-webkit-scrollbar-thumb{background:#a0a0a0}
.info-card .info-card-details::-webkit-scrollbar-thumb:hover{background:#828282}
.info-card .info-card-details .info-card-header{height:auto;bottom:100%;padding:20px 5px}
.info-card:hover .info-card-details{bottom:0;overflow:auto;padding-bottom:25px}
.info-card:hover .info-card-details .info-card-header{position:relative;bottom:0;padding-top:45px;padding-bottom:25px}
.info-card .info-card-details .info-card-header h3{text-transform:uppercase;margin:0!important;padding:0!important;color:#FFF;font-size:21px;font-weight:500;}
.info-card .info-card-details p{font-size:18px;letter-spacing:1px;font-weight:500;text-transform:uppercase}
.info-card .info-card-details{display:flex;align-items:center;flex-direction:column;justify-content:center;margin-left:auto;margin-right:auto}

/*----------------------------------------------------------------------------------- 
10. Section Gallery
-----------------------------------------------------------------------------------*/
#gallery {padding: 50px 0 15px;}

/*----------------------------------------------------------------------------------- 
11. Groomsmen
-----------------------------------------------------------------------------------*/
#groomsmen {padding:50px 0 25px;}
#groomsmen h2, #groomsmen p {text-transform:uppercase}
#groomsmen h3.name {font-size:16px;color:#f93e7d}
#groomsmen p.relationship {font-size:12px; letter-spacing: 1px; font-weight: 600}

/*----------------------------------------------------------------------------------- 
12. Bridesmaids
-----------------------------------------------------------------------------------*/
#bridesmaids {padding:50px 0;}
#bridesmaids h2, #bridesmaids p {text-transform:uppercase}
#bridesmaids h3.name {font-size:16px;color: #f93e7d}
#bridesmaids p.relationship {font-size:12px; letter-spacing: 1px; font-weight: 600}

/*----------------------------------------------------------------------------------- 
13. The Gifts
-----------------------------------------------------------------------------------*/
#the-gifts {background:#f2f1f8}
#the-gifts .box-coloured {background:#f93e7d;color:#FFF;padding:30px; margin-bottom:50px;}
#the-gifts .box-coloured p {font-weight:500; font-size:16px;}
#the-gifts .inner-box {border: 1px dashed #FFF; padding:10px; text-align:center}
#the-gifts .inner-box  h2 {background:#f93e7d;color:#FFF; font-size:18px; font-weight: 500;margin: -25px auto 20px;padding: 5px;width: 50%;}
@media (max-width: 767px) {
#the-gifts .inner-box  h2 {width: 55%;}
}

/*----------------------------------------------------------------------------------- 
14. RSVP
-----------------------------------------------------------------------------------*/
#rsvp {background:#fcfaff}
#rsvp .box-coloured {background:#f93e7d;color:#FFF;padding:30px; margin-bottom:50px;}
#rsvp .box-coloured p {font-weight:500; font-size:16px;}
#rsvp .inner-box {border: 1px dashed #FFF; padding:15px;font-size:12px;}
#rsvp .inner-box  h2 {background:#f93e7d;color:#FFF; font-size:24px; font-weight: 500;text-transform: none}
#rsvp form label {font-weight:600;font-size: 14px;letter-spacing: 1px;}
#rsvp .form-control {border-radius:0px;border: 1px solid #f93e7d;font-size:14px;}
#rsvp form label.attend_btn {margin-right: 5px}

/*----------------------------------------------------------------------------------- 
15. Footer
-----------------------------------------------------------------------------------*/
footer {padding:35px 0; color:#0d0b16;background:#FFF}
footer ul li.name {font-size:14px; text-transform:uppercase;font-weight: 600; letter-spacing: 2px}
footer ul li img {margin-bottom:-20px;}

/*----------------------------------------------------------------------------------- 
16. Back To Top Link
-----------------------------------------------------------------------------------*/
#top-link-block.affix-top {position: absolute; bottom: -82px;right: 10px;}
#top-link-block.affix {position: fixed;bottom: 18px;right: 10px;background-color: #f93e7d;}
#top-link-block .well-sm {padding:0px 12px 5px;border-radius: 0px;}
#top-link-block .well {min-height: 20px;margin-bottom: 20px;color:#FFF;font-weight:500;font-size:21px;background-color: #f93e7d;border: 1px solid #f93e7d;border-radius: 0px;-webkit-box-shadow: none;box-shadow: none;}

/*----------------------------------------------------------------------------------- 
17. Buttons
-----------------------------------------------------------------------------------*/
.btn{border-radius:0;letter-spacing: 2px;padding: 9px 12px 6px;white-space: normal;font-weight: 600}
.btn:focus,.btn:active,.btn.active,.btn:active:focus{outline:0}
.btn:active,
.btn.active {outline: 0;background-image: none;-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);}
/* White Button */
.btn-white{border-color:#FFF;text-transform:uppercase;color:#FFF;background-color:transparent}
.btn-white:hover,.btn-white:focus,.btn-white:active,.btn-white.active,.open .dropdown-toggle.btn-white{border-color:#FFF;color:#f93e7d;background-color:#FFF}
.btn-white:active,.btn-white.active,.open .dropdown-toggle.btn-white{background-image:none}
.btn-white.disabled,.btn-white[disabled],fieldset[disabled] .btn-white,.btn-white.disabled:hover,.btn-white[disabled]:hover,fieldset[disabled] .btn-white:hover,.btn-white.disabled:focus,.btn-white[disabled]:focus,fieldset[disabled] .btn-white:focus,.btn-white.disabled:active,.btn-white[disabled]:active,fieldset[disabled] .btn-white:active,.btn-white.disabled.active,.btn-white[disabled].active,fieldset[disabled] .btn-white.active{border-color:#FFF;background-color:#f93e7d}
.btn-white .badge{color:#f93e7d;background-color:#fff}
/* White-full Button */
.btn-white-full{border-color:#FFF;text-transform:uppercase;color:#f93e7d;background-color:#FFF}
.btn-white-full:hover,.btn-white-full:focus,.btn-white-full:active,.btn-white-full.active,.open .dropdown-toggle.btn-white-full{border-color:#FFF;color:#FFF;background-color:transparent}
.btn-white-full:active,.btn-white-full.active,.open .dropdown-toggle.btn-white-full{background-image:none}
.btn-white-full.disabled,.btn-white-full[disabled],fieldset[disabled] .btn-white-full,.btn-white-full.disabled:hover,.btn-white-full[disabled]:hover,fieldset[disabled] .btn-white-full:hover,.btn-white-full.disabled:focus,.btn-white-full[disabled]:focus,fieldset[disabled] .btn-white-full:focus,.btn-white-full.disabled:active,.btn-white-full[disabled]:active,fieldset[disabled] .btn-white-full:active,.btn-white-full.disabled.active,.btn-white-full[disabled].active,fieldset[disabled] .btn-white-full.active{border-color:#FFF;background-color:#FFF; color:#f93e7d}
.btn-white-full .badge{color:#f93e7d;background-color:#fff}

/*----------------------------------------------------------------------------------- 
18. Paddings 
-----------------------------------------------------------------------------------*/
.pddn-neg-10-top {padding-top: -10px}
.pddn-0 {padding: 0px !important}
.pddn-10 {padding: 10px}
.pddn-20 {padding: 20px}
.pddn-30 {padding: 30px}
.pddn-40 {padding: 40px}
.pddn-50 {padding: 50px}
.pddn-60 {padding: 60px}
.pddn-70 {padding: 70px}
.pddn-80 {padding: 80px}
.pddn-90 {padding: 90px}
.pddn-100 {padding: 100px}
.pddn-10-top {padding-top: 10px}
.pddn-20-top {padding-top: 20px}
.pddn-30-top {padding-top: 30px}
.pddn-40-top {padding-top: 40px}
.pddn-50-top {padding-top: 50px}
.pddn-60-top {padding-top: 60px}
.pddn-70-top {padding-top: 70px}
.pddn-80-top {padding-top: 80px}
.pddn-90-top {padding-top: 90px}
.pddn-100-top {padding-top: 100px}
.pddn-10-btm {padding-bottom: 10px}
.pddn-20-btm {padding-bottom: 20px}
.pddn-30-btm {padding-bottom: 30px}
.pddn-40-btm {padding-bottom: 40px}
.pddn-50-btm {padding-bottom: 50px}
.pddn-60-btm {padding-bottom: 60px}
.pddn-70-btm {padding-bottom: 70px}
.pddn-80-btm {padding-bottom: 80px}
.pddn-90-btm {padding-bottom: 90px}
.pddn-100-btm {padding-bottom: 100px}
.pddn-0-top-btm {padding:0}
.pddn-10-top-btm {padding: 10px 0}
.pddn-20-top-btm {padding: 20px 0}
.pddn-30-top-btm {padding: 30px 0}
.pddn-40-top-btm {padding: 40px 0}
.pddn-50-top-btm {padding: 50px 0}
.pddn-60-top-btm {padding: 60px 0}
.pddn-70-top-btm {padding: 70px 0}
.pddn-80-top-btm {padding: 80px 0}
.pddn-90-top-btm {padding: 90px 0}
.pddn-100-top-btm {padding: 100px 0}

/*----------------------------------------------------------------------------------- 
19. Margins 
-----------------------------------------------------------------------------------*/
.mrgn-5-top {margin-top: 5px}
.mrgn-10-top {margin-top: 10px}
.mrgn-15-top {margin-top: 15px}
.mrgn-20-top {margin-top: 20px}
.mrgn-30-top {margin-top: 30px}
.mrgn-40-top {margin-top: 40px}
.mrgn-50-top {margin-top: 50px}
.mrgn-60-top {margin-top: 60px}
.mrgn-70-top {margin-top: 70px}
.mrgn-80-top {margin-top: 80px}
.mrgn-90-top {margin-top: 90px}
.mrgn-100-top {margin-top: 100px}
.mrgn-10-btm {margin-bottom: 10px}
.mrgn-20-btm {margin-bottom: 20px}
.mrgn-30-btm {margin-bottom: 30px}
.mrgn-40-btm {margin-bottom: 40px}
.mrgn-50-btm {margin-bottom: 50px}
.mrgn-60-btm {margin-bottom: 60px}
.mrgn-10-top-btm {margin: 10px 0}
.mrgn-20-top-btm {margin: 20px 0}
.mrgn-30-top-btm {margin: 30px 0}
.mrgn-40-top-btm {margin: 40px 0}
.mrgn-50-top-btm {margin: 50px 0}
.mrgn-60-top-btm {margin: 60px 0}