.promopage-title{
    font-size:20px;
    color:#424242;
    position:relative;
    margin:0 0 60px;
    line-height:1.6
}
.promopage-title:after{
    content:"";
    border-bottom:2px solid #20a3f0;
    width:40px;
    display:block;
    margin-top:15px
}
.promo-bg01{
    background-color:#222e33
}
.promo-bg02{
    background-color:#20a3f0
}
.promo{
    position:relative;
    font-size:15px;
    padding:23px 0;
    margin-bottom:25px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px
}
.promo:after{
    clear:both;
    content:"";
    display:table
}
.promo-content{
    float:right;
    width:70%;
    margin-right:4%
}
.promo-button{
    width:20%;
    text-align:center;
    position:absolute;
    top:50%;
    margin:-26px 0 0;
    right:auto;
    left:5px
}
.promo-icon{
    float:right;
    width:8%;
    margin-right:4%;
    min-height:91px
}
.promo-icon + .promo-content{
    width:60%;
    margin-right:0;
    min-height:91px
}
.promo-icon > span{
    width:91px;
    height:91px;
    line-height:91px;
    text-align:center;
    color:#FFF;
    font-size:24px;
    display:inline-block;
    position:absolute;
    top:50%;
    margin-top:-46px;
    background-color:#2f2f2f;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%
}
.promo-border{
    border:1px solid #dfdfdf
}
.promo-square{
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0
}
.promo-round{
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px
}
.border-full{
    border-color:#8f8f8f
}
.promo .text-slide{
    font-weight:bold
}
.promo-bg{
    background-color:#f2f2f2
}
.promo[class*="bg-"] .promo-icon >span{
    background-color:#ffffff;
    color:#2f2f2f
}
.content-center .promo-content{
    width:84%;
    margin:0 8%;
    text-align:center
}
.promo-content .line{
    border-bottom:2px solid #20a3f0;
    margin:20px auto 21px;
    width:36px
}
.promo-border-top,.promo-border-top.border-accent{
    border:1px solid #dfdfdf;
    border-top-width:3px;
    border-right-color:#dfdfdf!important;
    border-left-color:#dfdfdf!important;
    border-bottom-color:#dfdfdf!important
}
.promo-border-left,.promo-border-left.border-accent{
    border:1px solid #dfdfdf;
    border-right-width:5px;
    border-top-color:#dfdfdf!important;
    border-left-color:#dfdfdf!important;
    border-bottom-color:#dfdfdf!important
}
.promo-border-right,.promo-border-right.border-accent{
    border:1px solid #dfdfdf;
    border-left-width:5px;
    border-right-color:#dfdfdf!important;
    border-top-color:#dfdfdf!important;
    border-bottom-color:#dfdfdf!important
}
.promo-border-bottom,.promo-border-bottom.border-accent{
    border:1px solid #dfdfdf;
    border-bottom-width:3px;
    border-right-color:#dfdfdf!important;
    border-left-color:#dfdfdf!important;
    border-top-color:#dfdfdf!important
}
.promo-small .promo-content,.promo-large .promo-content{
    float:none;
    width:auto;
    margin:auto
}
.promo-small .promo-button,.promo-large .promo-button{
    position:static;
    width:auto;
    text-align:inherit;
    margin:auto
}
.promo-small{
    padding:20px 40px 32px;
    font-size:13px
}
.promo-small .promo-button{
    padding-top:27px
}
.promo-small h3{
    margin-bottom:14px
}
.promo-large{
    padding:65px 85px 73px;
    font-size:21px
}
.promo-large h3{
    font-size:63px;
    line-height:1.3;
    font-weight:bold;
    margin-bottom:12px
}
.promo-large .promo-button{
    padding-top:12px
}
.promo-large .promo-button [class*="dg-btn"]{
    font-size:18px;
    letter-spacing:2px
}
.promo-parallax{
    background:url(../images/promo-Parallax.jpg);
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    color:#FFF
}
[class*="bg-"] .promo h1,[class*="bg-"] .promo h2,[class*="bg-"] .promo h3,[class*="bg-"] .promo h4,[class*="bg-"] .promo h5,[class*="bg-"] .promo h6,.promo[class*="bg-"] h1,.promo[class*="bg-"] h2,.promo[class*="bg-"] h3,.promo[class*="bg-"] h4,.promo[class*="bg-"] h5,.promo[class*="bg-"] h6,.promo-parallax h1,.promo-parallax h2,.promo-parallax h3,.promo-parallax h4,.promo-parallax h5,.promo-parallax h6{
    color:#FFF
}
.promo-bg .promo,.promo-parallax .promo,div[class*="bg-"] .promo{
    margin-bottom:0
}
@media only screen and (min-width:1200px) and (max-width:1300px){   
    .promo-icon{
        width:10%
    }
}
@media only screen and (min-width:992px) and (max-width:1199px){    
    .promo-content{
        width:66%
    }
    .promo-button{
        width:26%
    }
    .promo-icon{
        width:12%
    }
    .promo-icon + .promo-content{
        width:56%
    }
}
@media only screen and (min-width:768px) and (max-width:991px){ 
    .promo-content{
        width:62%
    }
    .promo-button{
        width:30%
    }
    .promo-icon{
        width:15%
    }
    .promo-icon + .promo-content{
        width:50%
    }
    .promo-small{
        padding:15px 25px 20px
    }
    .promo-small .promo-button{
        padding-top:16px
    }
    .promo-large{
        padding:32px 42px 36px
    }
}
@media only screen and (max-width:767px){   
    .promo-content{
        width:auto;
        margin:0 4%;
        float:none
    }
    .promo-button{
        width:auto;
        position:static;
        margin:0 4%;
        text-align:inherit;
        float:none
    }
    .promo-icon{
        width:auto;
        margin:0 4%;
        float:none
    }
    .promo-icon > span{
        position:static;
        margin:0
    }
    .promo-icon + .promo-content{
        width:auto;
        margin:0 4%
    }
    .promo-small,.promo-large{
        font-size:13px;
        padding:15px 15px 15px
    }
    .promo-large h3{
        font-size:30px
    }
    .promo-large .promo-button [class*="dg-btn"]{
        font-size:13px;
        letter-spacing:0
    }
}
/*text slide*/
.text-slide{
    display:inline-block;
    position:relative;
    overflow:hidden;
    vertical-align:top
}
.text-slide span{
    display:none;
    position:absolute;
    right:0;
    top:0
}
@-webkit-keyframes slide-text{
0%{
    opacity:0;
    -webkit-transform:translateY(100%)
}
100%{
    opacity:1;
    -webkit-transform:translateY(0%)
}
}
@-o-keyframes slide-text{
0%{
    opacity:0;
    -o-transform:translateY(100%)
}
100%{
    opacity:1;
    -o-transform:translateY(0%)
}
}
@keyframes slide-text{
0%{
    opacity:0;
    transform:translateY(100%)
}
100%{
    opacity:1;
    transform:translateY(0%)
}
}
@-webkit-keyframes slide-text-previous{
0%{
    opacity:1;
    -webkit-transform:translateY(0%)
}
100%{
    opacity:0;
    -webkit-transform:translateY(-100%)
}
}
@-o-keyframes slide-text-previous{
0%{
    opacity:1;
    -o-transform:translateY(0%)
}
100%{
    opacity:0;
    -o-transform:translateY(-100%)
}
}
@keyframes slide-text-previous{
0%{
    opacity:1;
    transform:translateY(0%)
}
100%{
    opacity:0;
    transform:translateY(-100%)
}
}
.text-slide span.active{
    display:inline-block;
    position:static;
    -webkit-animation-name:slide-text;
    -o-animation-name:slide-text;
    animation-name:slide-text;
    -webkit-animation-duration:400ms;
    -o-animation-duration:400ms;
    animation-duration:400ms;
    -webkit-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    white-space:nowrap
}
.text-slide span.previous{
    display:inline-block;
    -webkit-animation-name:slide-text-previous;
    -o-animation-name:slide-text-previous;
    animation-name:slide-text-previous;
    -webkit-animation-duration:400ms;
    -o-animation-duration:400ms;
    animation-duration:400ms;
    -webkit-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    white-space:nowrap
}