/*
Theme Name: CSS Separators and Ribbons.
Theme URI: http://delicioustheme.com/demo-10/index.html
Description: A beautiful CSS separators and ribbons.
Author: ukrop-studio
Author URI: http://www.delicioustheme.com
*/   
   
/* ==========================================================================
   Style_1
 ========================================================================== */
 
.rp_container_simple {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_simple {
border-top:2px solid gray;
}


/* ==========================================================================
   Style_2
 ========================================================================== */
 
.rp_container_double {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_double {
border-top:6px double gray;
}

/* ==========================================================================
   Style_3
 ========================================================================== */
 
.rp_container_dashed {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_dashed {
border-top:2px dashed gray;
}

/* ==========================================================================
   Style_4
 ========================================================================== */
 
.rp_container_dotted {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_dotted {
border-top:2px dotted gray;
}

/* ==========================================================================
   Style_5
 ========================================================================== */
 
.rp_container_shadows {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_shadows {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

/* ==========================================================================
   Style_6
 ========================================================================== */
 
.rp_container_shadows2 {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_shadows2 {
border: 0; 
height:2px; 
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

/* ==========================================================================
   Style_7
 ========================================================================== */
 
.rp_container_fa {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_fa {
border-top:6px double #8c8b8b;
text-align: center;
}

.rp_sep_fa:after {
content: '\002665';
display: inline-block;
position: relative;
top: -20px;
padding: 0 10px;
background:white;
color:gray;
font-size:24px;
}

/* ==========================================================================
   Style_8
 ========================================================================== */
 
.rp_container_scissors {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_scissors{
border-top:2px dashed #8c8b8b; 
}

.rp_sep_scissors:after {
content: '\002702'; 
display: inline-block; 
position: relative; 
top: -16px; 
right:200px; 
padding: 0 3px; 
background:white; 
color:gray; 
font-size:20px; 
}

/* ==========================================================================
   Style_9
 ========================================================================== */
 
.rp_container_tail {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_tail{ 
height: 30px; 
border-style: solid; 
border-color: #8c8b8b; 
border-width: 1px 0 0 0; 
border-radius: 20px; 
} 

.rp_sep_tail:before { 
display: block; 
content: ""; 
height: 30px; 
margin-top: -31px; 
border-style: solid; 
border-color: #8c8b8b; 
border-width: 0 0 1px 0; 
border-radius: 20px; 
}

/* ==========================================================================
   Style_10
 ========================================================================== */
 
.rp_container_vertical {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_vertical {
height: 10px;
background-image: linear-gradient(90deg, #808080, #808080 33.33%, rgba(128, 128, 128, 0) 33.33%, rgba(128, 128, 128, 0) 100%);
background-size: 3px 100%;
width:100%;
}


/* ==========================================================================
   Style_11
 ========================================================================== */
 
.rp_container_slash {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_slash {
height: 10px;
background-image: linear-gradient(-45deg, rgba(179, 179, 179, 0), rgba(179, 179, 179, 0) 25%, #b3b3b3 25%, #b3b3b3 50%, rgba(179, 179, 179, 0) 50%, rgba(179, 179, 179, 0) 75%, #b3b3b3 75%);
background-size: 10px 10px;
width:100%;
}

/* ==========================================================================
   Style_12
 ========================================================================== */
 
.rp_container_slash2 {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_slash2 {
height: 10px;
background-image: linear-gradient(45deg, rgba(13, 13, 13, 0), rgba(13, 13, 13, 0) 33.33%, #0d0d0d 33.33%, #0d0d0d 66.67%, rgba(13, 13, 13, 0) 66.67%, rgba(13, 13, 13, 0) 100%);
background-size: 10px 100%;
width:100%;
}

/* ==========================================================================
   Style_13
 ========================================================================== */
 
.rp_container_book {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_book {
position: relative;
border-width: 5px;
border-color: gray transparent;
height: 11px;
border-style: double;
width:100%;
}

.rp_sep_book:before,
.rp_sep_book:after {
position: absolute;
bottom: -3.536px;
width: 7.071px;
height: 7.071px;
display: block;
border-width: 0 7.071px 7.071px 0;
border-color: gray;
border-style: double;
box-sizing: border-box;
}

.rp_sep_book:before {
transform: translateZ(0) rotate(-45deg);
left: -21px;
}

/* ==========================================================================
   Style_14
 ========================================================================== */
 
.rp_container_headline {
margin-top:40px;
margin-bottom:40px;
} 

.rp_headline_text {
display: inline;
color:gray;
}

.rp_headline_middle {
border-bottom:2px solid gray;
height: 10px;
width:85%;
display: inline-block;
margin-bottom:5px;
margin-left: 15px;
}

/* ==========================================================================
   Style_15
 ========================================================================== */
 
.rp_container_boxtitle {
margin-top:40px;
margin-bottom:40px;
} 

.rp_box_title  {
border-bottom:2px solid gray;
margin-bottom: 25px;
overflow: hidden;
}

.rp_box_title h5{
background:gray;
color:white;
float: left;
line-height:30px;
padding:5px 20px;
margin: 0px;
letter-spacing: 1.8px;
}


/* ==========================================================================
   Style_16
 ========================================================================== */
 
.rp_container_cloud  {
margin-top:60px;
margin-bottom:60px;
} 

.rp_sep_cloud {
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}


/* ==========================================================================
   Style_17
 ========================================================================== */
 
.rp_container_shortline  {
margin-top:40px;
margin-bottom:40px;
} 

.divider {
height:2px;
margin: 0.5em 0 1.5em 0;
background-color: #999;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
-webkit-animation: moveFromBottom 1900ms ease;
-moz-animation: moveFromBottom 1900ms ease;
-o-animation: moveFromBottom 1900ms ease;
-ms-animation: moveFromBottom 1900ms ease;
}

.divider span {
display: block;
width:200px;
height:2px;
background:red;
}

.rp_container_shortline h5 {
text-align:left;
padding:10px 0px 5px 30px;
color:gray;
}

/* ==========================================================================
   Style_18
 ========================================================================== */
 
.rp_container_zigzag  {
margin-top:100px;
margin-bottom:40px;
} 

.rp_sep_zig, .rp_sep_zag {
border: none;
height: 30px;
margin: 0 50px;
}

.rp_sep_zig{
background: linear-gradient(-135deg, #FFF 20px, rgba(0, 0, 0, 0) 0) 0 5px, linear-gradient(135deg, #FFF 20px, rgba(0, 0, 0, 0) 0) 0 5px;
background-color:rgba(0, 0, 0, 0);
background-position: center bottom;
background-repeat: repeat-x;
background-size: 20px 40px;
z-index: 100;
position: relative;
}

.rp_sep_zag  {
background: linear-gradient(-135deg, #333 20px, rgba(0, 0, 0, 0) 0) 0 5px, linear-gradient(135deg, #333 20px, #FFF 0) 0 5px;
background-color:rgba(0, 0, 0, 0);
background-position: center bottom;
background-repeat: repeat-x;
background-size: 20px 40px;
z-index: 50;
margin-top: -28px;
}

/* ==========================================================================
   Style_19
 ========================================================================== */
 
.rp_container_shadows3  {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_shadows3 {
border:none;
height: 20px;
width:100%;
height: 50px;
margin-top: 0;
border-bottom: 1px solid #1f1209;
box-shadow: 0 20px 20px -20px #333;
margin: -50px auto 10px; 
}

/* ==========================================================================
   Style_20
 ========================================================================== */
 
.rp_container_trimmed  {
margin-top:40px;
margin-bottom:40px;
} 

.rp_sep_trimmed{
height: 8px;
display: block;
max-width: 90%;
margin: 0 auto;
border: 0;
background: #000;
position: relative;
}

.rp_sep_trimmed:before, .rp_sep_trimmed:after{
content: '';
display: block;
width: 0;
border:4px solid #000;
position: absolute;
top: 0;
}

.rp_sep_trimmed:before{
border-left-color: transparent;
border-top-color: transparent;
right: 100%;
}

.rp_sep_trimmed:after{
border-right-color: transparent;
border-bottom-color: transparent;
left: 100%;
}

/* ==========================================================================
   Style_21
 ========================================================================== */
 
.rp_container_rc {
margin-top:40px;
margin-bottom:40px;
} 

hr  {
position: relative;
height: 2px;
border: none;
width:95%;
}

hr:before,
hr:after {
position: absolute;
margin-top: -3px;
width:8px;
height:8px;
border-radius: 50%;
content: "";
}

hr:before { left: 0; }
hr:after  { right: 0; }


hr.rp_rc, hr.rp_rc:before, hr.rp_rc:after {
 background-color:gray;
}

/* ==========================================================================
   Style_22
 ========================================================================== */
 
.rp_container_manycolors {
margin-top:40px;
margin-bottom:40px;
} 

.rp_many_height  {
height:4px;
}

.rp_many_lines {
background:repeating-linear-gradient( 90deg,
blue 0%, blue 20%,
black 20%, black 40%,
gray 40%, gray 60%,
green 60%, green 80%,
red 80%, red 100% 
)

0 0 / 100% 2.0em repeat-x; 
}

@keyframes line {
from { width: 0%; 
}

to { width:100%; 

}

}

/* ==========================================================================
   Style_22
 ========================================================================== */
 
.rp_container_ban {
margin-top:40px;
margin-bottom:40px;
} 

.rp_container_ban  hr {
border-color:gray;
width:100%;
}

.rp_container_ban  hr {
border: 1px 0 0 0;
border-style: solid;
color: #fff;
text-align: center;
display: block;
}


.banner hr:before {
content: "text";
width:100px;
height:30px;
display: block;
background-color:gray;
position: absolute;
left:48%;
margin-top: -25px;
line-height: 35px;
border-radius: 5px 5px 0 0;
letter-spacing: .05em;
margin-left: -50px;
font-size:18px;
}



/* ==========================================================================
   Style_23
 ========================================================================== */


.rp_container_gor {
margin-top:60px;
margin-bottom:60px;
}

.ribbon_gor, .ribbon_gor:before, .ribbon_gor:after{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
}

.ribbon_gor{
position: relative;
background: #2352c4;
color: #fff;  
display: inline-block;
padding:10px 20px;
border-top:2px dashed rgba(0, 0, 0, 0.2);
border-bottom:2px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}

.ribbon_gor:before{
content: '';
position: absolute;
top:40px;
left:  -43px; 
background: #2352c4;
height: 0;
z-index: -1;
border: 28px solid rgba(0, 0, 0, 0);
border-left: 15px solid #fff;
}

/* ==========================================================================
   Style_24
 ========================================================================== */
 
.rp_container_sr {
margin-top:60px;
margin-bottom:30px;
}

.rp_rib_sr {
background: #2352c4;
height: 96px;
width: auto;
display: inline-block;
padding: 0 40px 0 0;
margin: auto;
position: relative;
color: #fff;
line-height: 96px;
font-size: 36px;
text-align: center;
margin-left:40px;
}

.rp_rib_sr:before {
content: '';
border: 48px solid  #2352c4;
border-left-color: transparent;
border-left-width: 12px;
position: absolute;
top: 0;
left: -60px;
}

.rp_rib_sr:after {
content: '';
border: 48px solid transparent;
border-left-color: #2352c4;
border-left-width: 12px;
position: absolute;
top: 0;
right: -60px;
}

/* ==========================================================================
   Style_25
 ========================================================================== */
 
.rp_container_vert {
margin-top:60px;
margin-bottom:30px;
}


.rp_rib_vert {
width:400px;
position: absolute;
left:30%;
text-align: center;
background:#2352c4;

}

.rp_rib_vert h1 {
color:white;
margin:0px;
padding: 15px 10px;
font-size:30px;
}

.rp_rib_vert:before, .rp_rib_vert:after {
content: '';
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid  #2352c4;
z-index: -1;
}

.rp_rib_vert:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
}

.rp_rib_vert:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0kp-]] ]]]]]=[--],0.4) -1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
}

.rp_rib_vert .rp_rib_text:before, .rp_rib_vert .rp_rib_text:after {
border-color:  #2352c4 transparent transparent transparent;
position: absolute;
display: block;
border-style: solid;
bottom: -1em;
content: '';
}

.rp_rib_vert .rp_rib_text:before {
left: 0;
border-width: 1em 0 0 1em;
}

.rp_rib_vert .rp_rib_text:after {
right: 0;
border-width: 1em 1em 0 0;
}

.rp_rib_top {
margin-top:2px;
border-top:2px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
}

.rp_rib_bottom {
margin-bottom:2px;
border-top:2px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}


/* ==========================================================================
   Style_26
 ========================================================================== */
 
.rp_container_corner2  {
margin-top:60px;
margin-bottom:30px;
}

.rp_wrapper_cr {
margin: 50px auto;
width:500px;
height:200px;
background:url(../images/02_foto.jpg);
border-radius: 10px;
position: relative;
z-index: 90;
padding:10px;
}

.rp_wrapper_rib {
width:90px;
height:89px;
overflow: hidden;
position: absolute;
top: -4px;
right: -4px;
}

.rp_rib_cr {
color:white;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform:    rotate(45deg);
-ms-transform:     rotate(45deg);
-o-transform:      rotate(45deg);
position: relative;
padding: 7px 0;
left: -8px;
top: 15px;
width:125px;
background-color:  #2352c4;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2352c4), to(#2352c4)); 
background-image: -webkit-linear-gradient(top, ##2352c4, #2352c4); 
background-image:    -moz-linear-gradient(top, #2352c4, #2352c4); 
background-image:     -ms-linear-gradient(top, #2352c4, #2352c4); 
background-image:      -o-linear-gradient(top, #2352c4, #2352c4); 
}

.rp_rib_cr:before, .rp_rib_cr:after {
content: "";
border-top:   3px solid   #2352c4;   
border-left:  3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}

.rp_rib_cr:before {
left: 0;
}

.rp_rib_cr:after {
right: 0;
}

/* ==========================================================================
   Style_27
 ========================================================================== */
 
.rp_container_corner2  {
margin-top:60px;
margin-bottom:30px;
}

.rp_wrapper_crl {
margin: 50px auto;
width:500px;
height:200px;
background:url(../images/02_foto.jpg);
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}

.rp_wrapper_ribl {
width:125px;
height:110px;
overflow: hidden;
position: absolute;
top: -4px;
left: -3px;
}

.rp_rib_crl {
color:white;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
left: -31px;
top:20px;
width:140px;
background-color:  #2352c4;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2352c4), to(#2352c4)); 
background-image: -webkit-linear-gradient(top, #2352c4, #2352c4); 
background-image: -moz-linear-gradient(top, #2352c4, #2352c4); 
background-image: -ms-linear-gradient(top, #2352c4, #2352c4); 
background-image: -o-linear-gradient(top, #2352c4, #2352c4); 
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);								
}

.rp_rib_crl:before, .rp_rib_crl:after {
content: "";
border-top:   3px solid   #2352c4;   
border-left:  3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}

.rp_rib_crl:before {
left: 0;
}

.rp_rib_crl:after {
right: 0;
}

/* ==========================================================================
   Style_28
 ========================================================================== */
 
.rp_container_laterally  {
margin-top:60px;
margin-bottom:30px;
}

.rp_wrapper_laterally {
background:url(../images/02_foto.jpg);
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
height: 200px;
margin: 50px auto;
position: relative;
width:500px;
}

.rp_wrapper_laterally  h2 {
background:#2352c4;
border: 1px solid #666;
color:white;
font-size: 22px;
position: relative;
}

.rp_wrapper_laterally  h2 {
border-width: 1px 1px 2px;
margin: 0;
padding: 4px 40px;
position: absolute;
right: -14px;
top: 12px;
}

.rp_wrapper_laterally  h2:after {
border-width: 7px;
border-style: solid;
border-color: #134 transparent transparent #134;
bottom: -14px;
content: "";
position: absolute;
right: -2px;
}

/* ==========================================================================
   Style_29
 ========================================================================== */
 
.rp_container_twosides  {
margin-top:60px;
margin-bottom:30px;
}

.rp_wrapper_twosides {
background:url(../images/02_foto.jpg);
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
height: 200px;
margin: 0 auto;
position: relative;
width:500px;
}

.rp_wrapper_twosides h1 {
clear: both;
position: relative;
top:50px;
color:white;
background:#2352c4;
font-size: 2em;
margin:-10px -10px 10px -10px;
padding: 0.5em 20px;
}

.rp_wrapper_twosides h1:before,
.rp_wrapper_twosides h1:after {
content: " ";
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -10px;
left: 0;
z-index: -1;
position: absolute;
border-top: 10px solid #2352c4;
border-left: 10px solid transparent;
background: transparent;
}

.rp_wrapper_twosides h1:after {
right: 0;
left: auto;
border-top: 10px solid #2352c4;
border-right: 10px solid transparent;
}

/* ==========================================================================
   Style_30
 ========================================================================== */
 
.rp_container_flag  {
margin-top:60px;
margin-bottom:30px;
}

.rp_ribbon {
font-size:18px ;
width:300px;
position: relative;
background:#2352c4;
color: #fff;
text-align: center;
padding: 1em 0px; 
margin: 2em auto 3em; 
}

.rp_ribbon:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.rp_ribbon:after {
border-color: rgba(136, 183, 213, 0);
border-right-color:#2352c4;
border-width:32px;
top: 50%;
margin-top: -32px;
}

.rp_ribbon .rp_ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #999 transparent transparent transparent;
bottom: -10px;
}

.rp_ribbon .rp_ribbon-content:after {
right: 0;
border-width: 10px 10px 0 0;
}

/* ==========================================================================
   Style_31
 ========================================================================== */
 
.rp_container_curl  {
margin-top:60px;
margin-bottom:30px;
}

.rp_rib_curl {
background:#2352c4;
border-radius:30px 30px 30px 0;
color:#fff;
padding:15px 30px;
position:relative;
margin:0 auto;
width:500px;
font-size:26px;
}

.rp_rib_curl:after, .rp_rib_curl:before {
content:"";
pointer-events:none;
position:absolute;
bottom:-40px;
left:0;
right:0;
height:40px;
z-index:1;
background:#2352c4;
}

.rp_rib_curl:after {
background:#fff;
z-index:2;
border-radius:20px 0 0 0;
}