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

    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. Colours
4. Texts & Text Adjustments
5. Specific Layout Adjustments 
6. Navigation
7. Header
	7.1 Header Backgrounds
	7.2 Counter Wrap
8. Section Global Styles
9. Couple Story 
10. Story Timeline
11. The Wedding
12. The Gallery
13. The Gents and The Ladies
14. The Presents
15. RSVP
16. Footer
17. Back To Top Link
18. Buttons
19. Paddings 
20. Margins 

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

/*-----------------------------------------------------------------------------------
0. Font @Import
-----------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');


/*-----------------------------------------------------------------------------------
1. Global Styles
-----------------------------------------------------------------------------------*/
html,body{height:100%}
body {font-family: 'Roboto Condensed', sans-serif;color:#959595;}

/*-----------------------------------------------------------------------------------
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:20px auto 50px}
.sm-divider-dark {border-color:#0d0b16;max-width:25px;border-width: 2px;margin:20px auto 50px}

/*-----------------------------------------------------------------------------------
3. Colours
-----------------------------------------------------------------------------------*/
.white {color:#FFF}
.purple {color:#f93e7d}
.dark-purple {color:#7b788b}

/*-----------------------------------------------------------------------------------
4. Texts & Text Adjustments
-----------------------------------------------------------------------------------*/
.text-bold {font-weight:500}
@media (min-width: 768px) {
.lead-sm {font-size:18px; font-weight:500}
}

/*-----------------------------------------------------------------------------------
5. 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;}
.vertical-align {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

/*-----------------------------------------------------------------------------------
6. 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 #fcfaff}
@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: #fcfaff;}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {color: #f93e7d;background-color: #fcfaff;}
.nav > li > a:hover,
.nav > li > a:focus {text-decoration: none;color: #625e79;background-color: #fcfaff;}
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;}
}


/*-----------------------------------------------------------------------------------
7. Header
-----------------------------------------------------------------------------------*/
/* 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-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-o-background-size:cover;
background-attachment: fixed}
@media (max-width: 767px) {
    header#fullwidth {background-attachment: scroll;}
}
@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:60px;}
}
@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;}
}

/*-----------------------------------------------------------------------------------
7.1 Header Background
-----------------------------------------------------------------------------------*/
.grace-bg-soon {background: url(../images/header-backgrounds/grace-background-couple-in-the-mountain.jpg);}

/*-----------------------------------------------------------------------------------
7.2 Counter Wrap
-----------------------------------------------------------------------------------*/
.counter-wrap {background:#f93e7d; position: absolute;bottom: 0;left: 0;right: 0;padding: 15px 0 20px;color: #FFFFFF;text-align: center;}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) {
    .counter-wrap {position: relative;}
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
    .counter-wrap {position: relative;}
}
/*-----------------------------------------------------------------------------------
8. Section Global Styles
-----------------------------------------------------------------------------------*/
section {padding:50px 0;}
section h2 {color:#f93e7d; text-transform:uppercase;font-family: 'Playfair Display', serif; font-size:24px; letter-spacing:2px; font-weight:500}
section h3 {font-family: 'Playfair Display', serif;  color: #0d0b16; text-transform:uppercase; font-size:18px; letter-spacing:1px; font-weight:700}

/*-----------------------------------------------------------------------------------
9. Couple Story
-----------------------------------------------------------------------------------*/
#couple {background:#f2f1f8}
#couple .lead {font-size: 16px;letter-spacing: normal;padding: 0px 35px}
/*-----------------------------------------------------------------------------------
10. Story Timeline
-----------------------------------------------------------------------------------*/
#story-timeline {background: url(../images/backgrounds/timeline-bg.jpg);position: relative;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;color:#FFF}
@media (max-width: 767px) {
    #story-timeline {background-attachment: scroll;}
}
/* 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: #FFF;left: 50%;margin-left: -1.5px;}
.timeline h2  {max-width: 6em;margin: 0 auto 3em;padding: 0.5em;text-align: center;position: relative;clear: both;bottom:0px;}
.timeline h2.bottom-heart  {max-width: 6em;margin: 0 auto 0em;padding: 0.5em;text-align: center;position: relative;clear: both;bottom:0px;}
.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: #FFF;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;content:" ";}
.timeline > li > .timeline-badge {color: #ffffff;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: #ffffff !important;}
.timeline-badge a:hover {color: #dcdcdc !important;}
.timeline-title {margin-top: 0;color: inherit;}
.timeline-heading h4 {font-weight:500;padding: 0 15px;color: #FFF;text-transform:uppercase;font-size:21px;}
.timeline-body > p, .timeline-body > ul { padding: 10px 15px;margin-bottom: 0;font-size:18px;}
.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: 0.5em;text-align: center;position: relative;clear: both;bottom:0px;}
.timeline h2.bottom-heart  {max-width: 6em;margin: 0 -32px 0em;padding: 0.5em;text-align: center;position: relative;clear: both;bottom:0px;}
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;}
}

/*-----------------------------------------------------------------------------------
11. The Wedding
-----------------------------------------------------------------------------------*/
#the-wedding {background:#f2f1f8}
/* Tabs */
#the-wedding .tab-content > .tab-pane {background:transparent; padding:25px 0;}
#the-wedding .nav-tabs {border-top:1px solid #f93e7d;
    border-bottom:1px solid #f93e7d;}
#the-wedding .nav-tabs.nav-justified{width:100%;}
#the-wedding .nav-tabs.nav-justified > li{float:none;border-top: 2px solid transparent; border-bottom: 3px solid transparent;border-right: 3px solid transparent}
#the-wedding .nav-tabs.nav-justified > li:last-child{border-right: 0px solid transparent}
#the-wedding .nav-tabs.nav-justified > li > a{margin-bottom:5px;text-align:center;}
#the-wedding .nav-tabs.nav-justified > .dropdown .dropdown-menu{top:auto;left:auto}
@media (min-width: 768px) {
    #the-wedding .nav-tabs.nav-justified > li{display:table-cell;width:1%}
    #the-wedding .nav-tabs.nav-justified > li > a{margin-bottom:0}
}
#the-wedding .nav-tabs.nav-justified > li > a{margin-right:0;border-radius:0px;cursor: pointer;font-size: 16px;font-weight: bold;text-transform: uppercase; letter-spacing: 2px;}
#the-wedding .nav-tabs.nav-justified > li > a:hover,
#the-wedding .nav-tabs.nav-justified > li > a:focus {color: #FFF;background-color: #f93e7d;}
#the-wedding .nav-tabs.nav-justified > .active > a,
#the-wedding .nav-tabs.nav-justified > .active > a:hover,
#the-wedding .nav-tabs.nav-justified > .active > a:focus{border:0px solid #ddd;color: #FFF;background-color: #f93e7d;}
@media (min-width: 768px) {
    #the-wedding .nav-tabs.nav-justified > li > a{border-bottom:0px solid #ddd;border-radius:0px 0px 0 0;color:#f93e7d}
    #the-wedding .nav-tabs.nav-justified > .active > a,
    #the-wedding .nav-tabs.nav-justified > .active > a:hover,
    #the-wedding .nav-tabs.nav-justified > .active > a:focus{border-bottom-color:#fff}
}

/*-----------------------------------------------------------------------------------
12. The Gallery
-----------------------------------------------------------------------------------*/
#gallery {padding: 15px 0;}

/*-----------------------------------------------------------------------------------
13. The Gents and The Ladies
-----------------------------------------------------------------------------------*/
#gents-ladies {padding:50px 0 25px;}
#gents-ladies h2, #gents-ladies p {text-transform:uppercase}
#gents-ladies h2.name {font-size:16px;}
#gents-ladies p.relationship {font-size:15px;}
#gents-ladies .friend-item figure {margin:15px 0;}
/* ========== Friend Items ========== */
figure.friend{color:#fff;position:relative;float:left;overflow:hidden;width:100%;background:#f93e7d;text-align:center;margin-bottom:20px;letter-spacing: 1px;}
figure.friend *{-webkit-box-sizing:padding-box;box-sizing:padding-box;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}
figure.friend img{opacity:1;width:100%}
figure.friend figcaption{top:50%;left:40px;right:40px;position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
figure.friend figcaption h2.accent{position:relative;font-weight:500;text-transform:uppercase;margin:0;-webkit-transform:translateY(75%);transform:translateY(75%)}
figure.friend figcaption h2 span{font-weight:500}
figure.friend figcaption p{font-size:1.5em;font-weight:500;opacity:0;margin:0}
figure.friend:before,figure.friend:after{position:absolute;top:10px;right:10px;bottom:10px;left:10px;content:'';opacity:0;-webkit-transition:opacity 0.6s,-webkit-transform .6s;transition:opacity 0.6s,-webkit-transform 0.6s,-moz-transform 0.6s,-o-transform 0.6s,transform .6s}
figure.friend:before{border-top:1px dashed #fff;border-bottom:1px dashed #fff;-webkit-transform:scale(0,1);transform:scale(0,1)}
figure.friend:after{border-right:1px dashed #fff;border-left:1px dashed #fff;-webkit-transform:scale(1,0);transform:scale(1,0)}
figure.friend:hover img,figure.friend.hover img{opacity:.2;-webkit-filter:blur(5px);filter:blur(5px);-webkit-transform:scale(1.1);transform:scale(1.1)}
figure.friend:hover figcaption h2,figure.friend.hover figcaption h2,figure.friend:hover figcaption p,figure.friend.hover figcaption p{opacity:1;border-color:rgba(255,255,255,0.5);-webkit-transition-delay:.2s;transition-delay:.2s;-webkit-transform:translateY(0);transform:translateY(0)}
figure.friend:hover figcaption p,figure.friend.hover figcaption p{-webkit-transition-delay:.3s;transition-delay:.3s}
figure.friend:hover:before,figure.friend.hover:before,figure.friend:hover:after,figure.friend.hover:after{opacity:.8;-webkit-transform:scale(1);transform:scale(1)}

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

/*-----------------------------------------------------------------------------------
15. RSVP
-----------------------------------------------------------------------------------*/
#rsvp {background: url(../images/backgrounds/rsvp-bg.jpg);position: relative;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;}
@media (max-width: 767px) {
    #rsvp {background-attachment:scroll;}
}
#rsvp h2 {color:#FFF}
#rsvp .box-white {background: rgba(255,255,255,0.95);color:#0d0b16;padding:15px; margin-bottom:50px;}
#rsvp .box-white p {font-weight:500; font-size:16px;}
#rsvp .inner-box {border: 1px dashed #f93e7d; padding:5px 30px;font-size:12px;}
#rsvp .inner-box  h2 {color:#0d0b16; font-size:24px; font-weight: 600;text-transform: none;letter-spacing: normal;line-height: 32px}
#rsvp form label {font-weight:500;font-size:14px;}
#rsvp .form-control {border-radius:0px;border: 1px solid #f93e7d;font-size:14px;}
#rsvp form label.attend_btn {margin-right: 5px}
/*-----------------------------------------------------------------------------------
16. Footer
-----------------------------------------------------------------------------------*/
footer {padding:35px 0; color:#0d0b16;background:#fcfaff}
footer ul li.name {font-size:14px; text-transform:uppercase;font-weight: 600; letter-spacing: 2px}
footer ul li img {margin-bottom:-20px;}

/*-----------------------------------------------------------------------------------
17. 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;}

/*-----------------------------------------------------------------------------------
18. Buttons
-----------------------------------------------------------------------------------*/
.btn{border-radius:0;letter-spacing: 1px;padding: 9px 12px 6px;white-space: normal;}
.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;font-weight:600;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;font-weight:600;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}
/*Purple-full Button */
.btn-purple-full{border-color:#f93e7d;text-transform:uppercase;font-weight:600;color:#FFF;background-color:#f93e7d}
.btn-purple-full:hover,.btn-purple-full:focus,.btn-purple-full:active,.btn-purple-full.active,.open .dropdown-toggle.btn-purple-full{border-color:#f93e7d;color:#f93e7d;background-color:transparent}
.btn-purple-full:active,.btn-purple-full.active,.open .dropdown-toggle.btn-purple-full{background-image:none}
.btn-purple-full.disabled,.btn-purple-full[disabled],fieldset[disabled] .btn-purple-full,.btn-purple-full.disabled:hover,.btn-purple-full[disabled]:hover,fieldset[disabled] .btn-purple-full:hover,.btn-purple-full.disabled:focus,.btn-purple-full[disabled]:focus,fieldset[disabled] .btn-purple-full:focus,.btn-purple-full.disabled:active,.btn-purple-full[disabled]:active,fieldset[disabled] .btn-purple-full:active,.btn-purple-full.disabled.active,.btn-purple-full[disabled].active,fieldset[disabled] .btn-purple-full.active{border-color:#f93e7d;background-color:transparent; color:#f93e7d}
.btn-purple-full .badge{color:#f93e7d;background-color:#fff}

/*-----------------------------------------------------------------------------------
19. Paddings 
-----------------------------------------------------------------------------------*/
.pddn-neg-10-top {padding-top: -10px}
.pddn-0 {padding: 0px !important}
.pddn-5 {padding: 5px}
.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}

/*-----------------------------------------------------------------------------------
20. 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-15-btm {margin-bottom: 15px}
.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}